/* Control Room (/panel/control-room) — page-scoped bridge layer.
   Namespaced `.ctrl-*` classes only; consumes the shared `fi-eds-*`
   primitives from eds-panel.css rather than redeclaring them. Status
   colours use the sanctioned EDS tokens (--ok-ink/--err-ink + surfaces),
   never a literal hex. */

/* ── Toolbar ─────────────────────────────────────────────────────── */
.ctrl-toolbar { position: sticky; top: 4rem; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 12px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.ctrl-search { position: relative; display: block; max-width: 560px; }
.ctrl-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink3); pointer-events: none; }
.ctrl-search__icon svg { width: 100%; height: 100%; }
.ctrl-search__input { width: 100%; padding-left: 36px; }
.ctrl-search__input::-webkit-search-cancel-button { cursor: pointer; }
.ctrl-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ctrl-chips .fi-eds-chip { text-decoration: none; cursor: pointer; }
.ctrl-chip__count { font: 500 11px var(--sans); color: var(--ink2); margin-left: 4px; }
.ctrl-chip--active { border-color: var(--purple); background: var(--psoft); color: var(--purple7); }
.ctrl-chip--active .ctrl-chip__count { color: var(--purple7); }
.ctrl-chip--danger { border-color: color-mix(in srgb, var(--err-ink) 33%, transparent); color: var(--err-ink); }
.ctrl-chip--awaits { border-color: var(--purple); color: var(--purple7); }
.ctrl-chip--new { border-color: var(--ok-ink); color: var(--ok-ink); }
/* .fi-eds-badge declares no border at all, so border-color alone is a
   no-op — the badge needs the style and width too. */
.ctrl-badge--new { border: 1px solid var(--ok-ink); color: var(--ok-ink); background: color-mix(in srgb, var(--ok-ink) 8%, transparent); }
/* Equal specificity with --active means source order decides; make the
   selected state win explicitly rather than by accident. */
.ctrl-chip--active.ctrl-chip--new { border-color: var(--purple); color: var(--purple7); }
.ctrl-chip--unknown { border-style: dashed; color: var(--ink3); cursor: help; }
.ctrl-toolbar__count { margin: 0; font: 400 12.5px var(--sans); color: var(--ink2); }
.ctrl-toolbar__clear { background: none; border: 0; padding: 0 0 0 8px; font: 500 12.5px var(--sans); color: var(--purple); text-decoration: underline; cursor: pointer; }

.ctrl-section { scroll-margin-top: 96px; }
.ctrl-section__count { font: 500 12px var(--sans); color: var(--ink2); }
/* The shared grid is a row-major CSS grid: the ROW TRACK is sized by the
   tallest card in it, so align-items:start alone just moves the dead space
   from inside short cards to a blank hole beside them — unfixed at ~95
   wildly uneven cards. A column-flow packs cards into a fixed number of
   columns and lets each column find its own height, so short cards
   backfill under tall ones instead of leaving a hole next to them.
   .ctrl-card carries the matching break-inside/margin-bottom below. */
.ctrl-section .fi-eds-grid { display: block; columns: 280px 4; column-gap: 14px; }

/* ── The "needs a decision" band ─────────────────────────────────── */
.ctrl-awaits { border-color: var(--purple); background: linear-gradient(180deg, var(--psoft), var(--cream2) 62%); }

/* ── Flag card ───────────────────────────────────────────────────── */
/* CONSUMES the bridge's .fi-eds-doc card primitive rather than
   re-declaring its surface — the card element carries both classes, and
   everything below is only what a switch card genuinely differs on. The
   primitive is built for a clickable tile; a flag card is a container
   whose BUTTON is the target, so the pointer affordance comes off. */
.ctrl-card { cursor: default; gap: 6px; width: 100%; break-inside: avoid; margin-bottom: 14px; }
.ctrl-card:hover { transform: none; }
.ctrl-card--danger { border-color: color-mix(in srgb, var(--err-ink) 33%, transparent); background: var(--err-surface); }
/* The shared danger badge fill is the same colour as this card's own
   background (both --err-surface) — on paper cards the badge reads as a
   chip, here it was invisible chrome: loose red text with no border or
   fill of its own. Equal specificity is enough since u12.css loads after
   eds-panel.css. */
.ctrl-card--danger .fi-eds-badge--danger { background: var(--paper); }
.ctrl-card--awaits { border-color: var(--purple); }
.ctrl-card__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 20px; }
.ctrl-card__title { margin: 2px 0 0; font: 430 16px var(--ser); color: var(--ink); letter-spacing: -.01em; line-height: 1.25; }
.ctrl-card__key { align-self: flex-start; font: 500 10.5px 'JetBrains Mono', ui-monospace, monospace; color: var(--ink2); background: var(--cream2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.ctrl-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ctrl-card__desc { margin: 4px 0 0; font: 400 12.5px/1.55 var(--sans); color: var(--ink2); }
/* Some caveats run to 1,800+ characters — painting the whole paragraph
   var(--err-ink) turns those into 20-30 lines of red body copy, which
   stops signalling and just hurts to read. A small leading label carries
   the warning instead of a left border (EDS bans border-left flag
   stripes); the body reads as normal ink at any length. */
.ctrl-card__caveat { margin: 2px 0 0; font: 500 12px/1.5 var(--sans); color: var(--ink2); }
.ctrl-card__caveat::before { content: "Note — "; font-weight: 700; }
.ctrl-card__caveat--hold { font-style: italic; color: var(--ink3); }
.ctrl-card__caveat--hold::before { content: "Held — "; }
/* Red is reserved for cards that actually charge money, send real messages
   or delete data — a caveat on any other card is informational, not a
   warning, and shouldn't borrow the danger signal. */
.ctrl-card--danger .ctrl-card__caveat { color: var(--err-ink); }
.ctrl-card--danger .ctrl-card__caveat::before { content: "Caution — "; }
/* A held caveat on a danger card is still a HOLD, not a live-money caution —
   without this, the danger rule above (same specificity, later in source)
   wins and a danger+hold caveat silently reads "Caution —". */
.ctrl-card--danger .ctrl-card__caveat--hold::before { content: "Held — "; }
.ctrl-card__notes { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ctrl-note { font: 500 11.5px var(--sans); color: var(--ink3); }
.ctrl-note--warn { color: var(--warn-ink); }
/* NOTE: margin-top:auto is inert here — .ctrl-section .fi-eds-grid above
   lays cards out in CSS columns, not a flex/grid row, so there's no shared
   row height for "auto" to push against. Left in only because it's
   harmless (computes as 0 in this formatting context); if the grid ever
   goes back to row-major, this is what re-pins the switch to the card's
   bottom edge. */
.ctrl-card__foot { display: flex; flex-direction: column; gap: 6px; align-items: stretch; margin-top: auto; padding-top: 10px; }
/* The purple primary button only ever appears on an awaiting card, and
   align-items:stretch turns it from a button into a full-bleed purple bar —
   the loudest thing on a band already carrying a purple badge, border and
   gradient. Sized to its own content it reads as an action, not a stripe. */
.ctrl-card--awaits .ctrl-card__foot { align-items: flex-start; }
.ctrl-card__confirmlabel { font: 500 11px var(--sans); color: var(--ink2); }
.ctrl-card__confirmlabel code { font-size: 10px; overflow-wrap: anywhere; }
.ctrl-card__confirm { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
.ctrl-btn--danger { border-color: var(--err-ink); color: var(--err-ink); }
.ctrl-btn--danger:hover { background: var(--err-ink); color: var(--paper); }
.ctrl-danger-section { border-color: color-mix(in srgb, var(--err-ink) 33%, transparent); }

.ctrl-link { color: var(--purple); text-decoration: underline; }
.ctrl-empty { font: 400 13px var(--sans); color: var(--ink2); margin: 0; }
.ctrl-audit { display: flex; flex-direction: column; }
.ctrl-audit__row { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ctrl-audit__row:first-child { border-top: 0; }
.ctrl-audit__delta { font: 500 12.5px var(--sans); color: var(--ink); }
.ctrl-audit__who { font: 400 12.5px var(--sans); color: var(--ink2); }
.ctrl-audit__when { font: 400 12px var(--sans); color: var(--ink2); margin-left: auto; }

@media (max-width: 640px) {
    /* The 280px column-width minimum is wider than the content box at
       320–375px once the panel, page and card padding are taken out —
       it overflows the viewport. One column below 640px. */
    .ctrl-section .fi-eds-grid { columns: 1; }
    .ctrl-toolbar { position: static; }
    .ctrl-card { padding: 13px 14px; }
    /* iOS zooms the viewport on focus for any input under 16px. */
    .ctrl-search__input, .ctrl-card__confirm { font-size: 16px; }
}