/* ============================================================
   messages.css — the site-wide flash-message component.

   Loaded by all three root templates (pages/base.html,
   pages/nb_base.html, templates/onboarding/base_wizard.html),
   because no existing sheet is common to all three: styles.css
   is on base + wizard but not nb_base; interaction-feedback.css
   is on base + nb_base but not the wizard.

   ⚑ THE TOKEN CHAIN, and why it is not optional.
   --nb-* exists only when nb_active: nb_base always has it,
   base.html gets it through nb_navchrome_skin.html, the wizard
   gates it. examstudyaid/test_settings.py forces
   NOTEBOOK_PROOF = False, so THE WHOLE TEST SUITE RENDERS THE
   LEGACY PATH. A component styled only in --nb-* would look
   tested and be unstyled in half the states it ships in.

   So every colour resolves through
       var(--nb-x, var(--legacy-x, #literal))
   and the whole chain is declared ONCE, in the block below, so
   there is one place to review it. The legacy names come from
   styles.css :root (legacy dark) and theme-light.css (legacy
   light) — both define --text, --text-faint, --surface-soft,
   --border, --accent, --danger and --success, so the middle link
   resolves in both legacy themes.

   The #literal tail is a last resort that no shipping page can
   reach: base.html and base_wizard.html always load styles.css,
   nb_base.html always loads notebook-tokens.css, so one of the
   first two links is always present. The values are copied from
   styles.css :root / theme-dark.css rather than invented, so the
   tail cannot drift away from the palette.

   There is no --nb-warning token; the notebook palette collapses
   warning into the error hue, exactly as the partial this
   replaces (_notebook_messages.html) did. Adding one would mean
   bumping notebook-tokens.css across the eight loaders pinned by
   pages/tests_notebook.py.

   .pv-toast is deliberately NOT styled here — it belongs to
   notebook-profile.css / profile.css, and the coarse-pointer
   contract in pages/tests_sitewide_notebook_lifecycle.py reads it
   there.
   ============================================================ */

.esa-messages {
  --esa-ink: var(--nb-ink, var(--text, #F0EFEC));
  --esa-ink-faint: var(--nb-ink-3, var(--text-faint, #89867D));
  --esa-surface: var(--nb-paper-sunken, var(--surface-soft, #141519));
  --esa-line: var(--nb-border, var(--border, #2E3036));
  --esa-accent: var(--nb-blue, var(--accent, #789FF2));
  --esa-danger: var(--nb-error, var(--danger, #f08a8a));
  --esa-good: var(--nb-success, var(--success, #5eead4));

  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto 20px;
}

/* The notebook <main> (.nb-page-main) already carries the reading measure and
   its own gutter, so width:100% above lines the bar up with page content by
   itself. The legacy <main> is full-bleed, which left the bar centred at 860px
   under a hero on a 48px gutter — visibly detached. Match that gutter here.
   The three legacy families measure 1184 / 1060 / 880, so no single value
   aligns all of them; this tracks the widest (the homepage, where the sign-in
   notice actually lands) and stays inside the others. */
.main-content > .esa-messages {
  max-width: 1184px;
  width: calc(100% - 96px);
}

@media (max-width: 720px) {
  .main-content > .esa-messages {
    width: calc(100% - 32px);
  }
}

.esa-messages:empty {
  display: none;
  margin: 0;
}

.esa-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--esa-line);
  border-radius: var(--nb-r-md, 10px);
  background: var(--esa-surface);
  color: var(--esa-ink);
  font: var(--nb-type-ui, 400 15px/1.5 inherit);
}

.esa-msg-glyph {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--esa-ink-faint);
}

.esa-msg-text {
  min-width: 0;
}

/* ── info / debug: the base look, tinted by the accent ── */
.esa-msg--info,
.esa-msg--debug {
  border-color: color-mix(in srgb, var(--esa-accent) 26%, transparent);
}

.esa-msg--info .esa-msg-glyph,
.esa-msg--debug .esa-msg-glyph {
  color: var(--esa-accent);
}

/* ── success ── */
.esa-msg--success {
  border-color: color-mix(in srgb, var(--esa-good) 28%, transparent);
  background: color-mix(in srgb, var(--esa-good) 10%, var(--esa-surface));
}

.esa-msg--success .esa-msg-glyph {
  color: var(--esa-good);
}

/* ── warning + error share the error hue (see the token note above) ── */
.esa-msg--warning,
.esa-msg--error {
  border-color: color-mix(in srgb, var(--esa-danger) 30%, transparent);
  background: color-mix(in srgb, var(--esa-danger) 10%, var(--esa-surface));
}

.esa-msg--warning .esa-msg-glyph,
.esa-msg--error .esa-msg-glyph {
  color: var(--esa-danger);
}

@media (max-width: 640px) {
  .esa-messages {
    max-width: none;
    margin-bottom: 14px;
  }
}