/* ============================================================================
   BANNER FAMILY — ONE ANATOMY, FOUR STATES (approved page 7)
   Loads after lq-fixes.css so this is the last word on .banner. Values are the
   approved page's own: 10px radius, 12px/16px padding, 12px gap, a 3px rail in
   the state colour on the left edge, 13.5px title over 12.5px body, and the
   action as a 12.5px 600-weight link in the state's ink.

   THE TWO RULES THE COMPONENT ENFORCES, not just documents:
     · Warning and critical are NOT dismissible. They clear when the condition
       clears. lqBanner() drops a dismiss id on those tones.
     · Illustration appears only on suggestion and success. lqBanner() drops art
       on info, warning and critical.
   ========================================================================== */

.banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--lq-border); border-left: 3px solid var(--lq-ink-muted);
  font-size: 12.5px; line-height: 1.5; color: var(--lq-ink-primary);
  background: var(--lq-surface-card);
}
/* ONLY the component's own title is a block. Two rules were wrong here in turn:
     1. a blanket `.banner b { display: block }` put every inline bold on its own line;
     2. `.banner > div > b:first-child` looked safer but CSS :first-child ignores TEXT nodes,
        so "Inputs are gathered for <b>2026-08-A</b>. Log overtime…" ALSO matched — the period
        code became a block and the sentence broke with an orphaned full stop.
   There is no selector for "a <b> with no text before it". Legacy banners therefore render
   their leading bold inline, and get the approved title anatomy by being migrated to
   lqBanner(), which marks its title explicitly. Never guess structure in CSS. */
.banner b { display: inline; font-weight: 650; color: var(--lq-ink-primary); }
.banner__t { display: block; font-size: 13.5px; font-weight: 650; color: var(--lq-ink-primary); }
.banner__bd b, .banner__s b { font-weight: 650; color: var(--lq-ink-primary); }
.banner__bd { flex: 1; min-width: 0; }
.banner__s { font-size: 12.5px; color: var(--lq-ink-secondary); margin-top: 1px; }
.banner__icon, .banner > svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }

/* Actions sit at the end of the row, in the state's ink — a link, not a button. */
.banner__act {
  flex: 0 0 auto; align-self: center; font: 600 12.5px var(--lq-font-ui);
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  text-decoration: none; white-space: nowrap;
}
.banner__act:hover { text-decoration: underline; }
.banner__act:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 3px; border-radius: 4px; }

/* Dismiss. Present only on info and success — see lqBanner(). */
.banner__x {
  flex: 0 0 auto; align-self: flex-start; width: 20px; height: 20px; margin: -1px -4px 0 0;
  display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--lq-ink-muted); border-radius: 6px;
}
.banner__x svg { width: 13px; height: 13px; }
.banner__x:hover { color: var(--lq-ink-primary); background: var(--lq-surface-subtle); }
.banner__x:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 2px; }

/* The illustration, on suggestion and success only. */
.banner__art { flex: 0 0 auto; align-self: center; width: 74px; }
.banner__art svg { width: 100%; height: auto; display: block; }

/* ── THE FOUR STATES ─────────────────────────────────────────────────────── */
.banner--info, .banner.info {
  background: var(--lq-banner-info-bg, #f4f6fd);
  border-color: var(--lq-border); border-left-color: var(--lq-accent);
}
.banner--info .banner__icon, .banner--info > svg,
.banner--info .banner__act { color: var(--lq-accent); }

.banner--warn, .banner.warn {
  background: var(--lq-banner-warn-bg, #fffdf7);
  border-color: #f4e3c6; border-left-color: var(--lq-warning);
}
.banner--warn .banner__icon, .banner--warn > svg,
.banner--warn .banner__act { color: var(--lq-warning-text); }

.banner--danger, .banner.bad {
  background: var(--lq-banner-danger-bg, #fef7f7);
  border-color: #f2d3d3; border-left-color: var(--lq-danger);
}
.banner--danger .banner__icon, .banner--danger > svg,
.banner--danger .banner__act { color: var(--lq-danger-text); }

.banner--success, .banner.ok {
  background: linear-gradient(180deg, color-mix(in srgb, var(--lq-success) 5%, transparent), transparent 72%), var(--lq-surface-card);
  border-color: var(--lq-success-border); border-left-color: var(--lq-success);
}
.banner--success .banner__icon, .banner--success > svg,
.banner--success .banner__act { color: var(--lq-success-text); }

/* Dark theme: the washes are light-theme tints, so re-derive them from the tokens. */
[data-theme="dark"] .banner--info,   [data-theme="dark"] .banner.info {
  background: color-mix(in srgb, var(--lq-accent) 12%, var(--lq-surface-card)); border-color: var(--lq-border); }
[data-theme="dark"] .banner--warn,   [data-theme="dark"] .banner.warn {
  background: color-mix(in srgb, var(--lq-warning) 12%, var(--lq-surface-card)); border-color: var(--lq-warning-border); }
[data-theme="dark"] .banner--danger, [data-theme="dark"] .banner.bad {
  background: color-mix(in srgb, var(--lq-danger) 12%, var(--lq-surface-card)); border-color: var(--lq-danger-border); }
[data-theme="dark"] .banner--success,[data-theme="dark"] .banner.ok {
  background: color-mix(in srgb, var(--lq-success) 12%, var(--lq-surface-card)); border-color: var(--lq-success-border); }

/* ── SUGGESTION CARD (approved page 7) ───────────────────────────────────────
   The lowest rank in the family and the only member that is a card rather than
   a row: a blue wash, the pitch, one primary action, the Ant in a soft lavender
   tile, and a dismiss in the corner. */
.lq-sugg {
  position: relative; border-radius: 16px; padding: 22px 24px;
  border: 1px solid #e6ebfa;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lq-accent) 5%, transparent), transparent 72%), var(--lq-surface-card);
}
.lq-sugg__row { display: flex; gap: 20px; align-items: center; }
.lq-sugg__bd { flex: 1; min-width: 0; }
.lq-sugg__k { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--lq-accent); }
.lq-sugg__t { font-size: 17px; font-weight: 700; margin-top: 7px; letter-spacing: -.01em; color: var(--lq-ink-primary); }
.lq-sugg__s { font-size: 13.5px; color: var(--lq-ink-secondary); margin-top: 5px; max-width: 60ch; }
.lq-sugg__a { margin-top: 16px; }
.lq-sugg__art { flex: 0 0 96px; height: 96px; border-radius: 28px; background: #e8e6f7; display: grid; place-items: center; }
.lq-sugg__art svg { width: 66px; height: auto; }
[data-theme="dark"] .lq-sugg__art { background: color-mix(in srgb, #8b7fd4 22%, var(--lq-surface-card)); }
.lq-sugg .banner__x { position: absolute; top: 16px; right: 18px; margin: 0; }
@media (max-width: 640px) {
  .lq-sugg__row { flex-direction: column; align-items: flex-start; }
  .lq-sugg__art { align-self: center; }
}

/* ── THE STACKED CRITICAL VARIANT (approved page 16) ─────────────────────────
   When a blocking state carries two actions, they drop to a second row as
   buttons instead of sitting inline as a link. Same family, same colours, same
   3px rail — only the action layout differs. The values here are page 16's. */
.run-block {
  margin: 0 0 var(--space-5); padding: 13px 16px; border-radius: 11px;
  background: var(--lq-danger-tint); border: 1px solid var(--lq-danger-border);
  border-left: 3px solid var(--lq-danger);
}
.run-block__h { font-size: 13px; font-weight: 650; color: var(--lq-danger-text); }
.run-block__s { font-size: 12px; color: var(--lq-ink-secondary); margin-top: 4px; max-width: 68ch; }
.run-block__a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }