/* "A new version is available" bar — components/update-notice.js.
 *
 * A row inserted into #main above #content, not an overlay. #main is a flex
 * column with #content on flex: 1, so the bar takes its own band across the
 * top of the app and #content gives up exactly that much height. Nothing is
 * covered, nothing has to be told to move, and it works the same over one
 * pane or two.
 *
 * Quiet on purpose. This is news, not a problem: gold to match the accent the
 * rest of the app uses for "worth your attention", and no red anywhere. */

.update-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 9px 16px;
  background: var(--gold-soft);
  border-bottom: 1px solid var(--gold);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
}

/* A steady dot, not a pulsing one. The bar already earns a glance by existing;
   animating it would make a routine deploy look like an incident. */
.update-notice-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.update-notice-text {
  min-width: 0;
  line-height: 1.4;
}

.update-notice-text strong { font-weight: 600; }

/* The escape hatch, for the case where a plain reload isn't enough because the
   browser is still holding assets cached under the old long-lived headers.
   Sized down and dimmed: it is the answer to a question most people will never
   have to ask, and putting it at full weight would read as an instruction. */
.update-notice-hint {
  color: var(--text-muted);
  font-size: 12px;
}

.update-notice-btn {
  flex: none;
  margin-left: auto;
  padding: 5px 14px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--speed);
}

.update-notice-btn:hover { opacity: 0.88; }

.update-notice-close {
  flex: none;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 19px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--speed), color var(--speed);
}

.update-notice-close:hover { background: var(--hover); color: var(--text); }

/* Narrow window, or the app in a popout. Wrapping is all this needs: the
   text shrinks first, and if the buttons still don't fit they take a second
   row with margin-left: auto keeping them right-aligned there. */
@media (max-width: 720px) {
  .update-notice { flex-wrap: wrap; padding: 9px 12px; }
  .update-notice-text { flex: 1 1 220px; }
}