/* ============================================================================
   SOFRITO OPERATOR CONSOLE
   Internal operations interface.

   Built on the tokens in site.css. This file adds only what an operator
   console needs and the marketing site does not: a persistent application
   shell, semantic state treatment for the six intake states, dense queue and
   table primitives, and an inspection drawer.

   COLOUR SEMANTICS — these are load-bearing, not decoration:
     deep green    structure. The shell, the rail, the framing.
     carrot orange do something. Primary action only.
     red onion     look closer. Investigation, unresolved interpretation.
     yellow onion  waiting. Pending, awaiting information, not complete yet.
     green         settled. Verified, healthy, resolved.
     deep red      a real failure. Missing evidence past cutoff. Never decor.

   Every status chip carries a text label. Colour is never the only signal.
   ============================================================================ */

:root {
  /* ---- Shell geometry ---- */
  --rail-w: 232px;
  --rail-w-collapsed: 72px;
  --head-h: 60px;

  /* ---- Console surfaces. Warmer and flatter than the marketing site:
          an operator stares at this for an hour, not eight seconds. ---- */
  --console-bg: var(--sofrito-cream);
  --console-surface: #FFFDF9;
  --console-surface-sunk: #F6EDE2;
  --console-hairline: #E4D6C2;
  --console-hairline-strong: var(--clay-border);

  /* ---- Rail ---- */
  --rail-bg: #193720;
  --rail-bg-deep: #142B19;
  --rail-fg: #EFE4D4;
  --rail-fg-dim: #95BB9E;
  --rail-active-bg: #214A2B;

  /* ---- Semantic state roles. One pair per intake state. ---- */
  --st-expected-bg: #FAF1E1;
  --st-expected-fg: #7D591C;
  --st-expected-edge: #DDB779;

  /* Received leans ORANGE, not red. It previously sat 3.7 RGB units from the
     missing chip's background and 12.7 from its foreground — the two states an
     operator most needs to tell apart were, in colour terms, the same chip.
     Contrast checks never saw it because they measure each chip's own text
     against its own background, never one chip against another. Now 5.92:1,
     and the worst state pair in the set moved from missing/received to
     expected/received at nearly double the separation. */
  --st-received-bg: #FDEED4;
  --st-received-fg: #8C4A12;
  --st-received-edge: #E3B87A;

  --st-clarify-bg: #F5EAEF;
  --st-clarify-fg: #440F27;
  --st-clarify-edge: #C996AD;

  --st-verified-bg: #DEEDE2;
  --st-verified-fg: #214229;
  --st-verified-edge: #87B692;

  --st-missing-bg: #F9E3E0;
  --st-missing-fg: #962A17;
  --st-missing-edge: #E29F94;

  --st-na-bg: #EFE8DD;
  --st-na-fg: #5C554E;
  --st-na-edge: #CFC2AF;

  /* ---- Urgency ---- */
  --urg-critical: #962A17;
  --urg-soon: var(--achiote-orange);
  /* Garlic Gold is a fill, never a carrier of meaning: 2.17:1 on the surface
     and 1.97:1 on the page, under the 3:1 that a non-text indicator needs.
     --gold-text is its sanctioned darkened equivalent, 5.64:1. */
  --urg-open: var(--gold-text);
  --urg-ready: #396E46;

  /* ---- Focus ----
     Two rings, because one colour cannot serve both grounds. The previous
     single blue was 5.46:1 on the ivory workspace but only 2.14:1 against the
     navigation rail, so focusing a nav link failed AA — and the contrast suite
     never caught it because it only ever tested the ring against the
     workspace. Each ring is now checked against the surface it appears on. */
  --focus-ring: #262016;
  --focus-ring-on-dark: var(--sofrito-cream);
}

/* ============================================================================
   1. BASE

   RESET FIRST, AND IT IS LOAD-BEARING.

   The console shares site.css because that is where the Sofrito palette lives.
   It inherits the marketing site's element rules along with it, and those were
   written for a page that breathes: `section { padding: 88px 0 }`,
   `p { max-width: 68ch }`, `h2 { font-size: clamp(1.8rem, 4.2vw, 2.7rem) }`.
   Dropped into an operator console they add roughly 180px of dead air around
   every section, cap paragraph width mid-row, and quietly put page-heading
   type on a panel label.

   None of this shows up in a contrast check or a structural assertion. It only
   shows up when you look at the thing. So: neutralise the element defaults here
   and let the console's own classes state everything they need.

   Class names are prefixed where site.css already owns the name (.c-field,
   .c-check, .c-eyebrow, .c-num, .c-tl-item). Relying on load order to win a
   specificity tie is not a strategy — .field label in site.css is 0,1,1 and
   beats .field-label here at 0,1,0 no matter which sheet loads last.
   ============================================================================ */

/* :where() so the scope contributes no specificity. These land at 0,0,1 —
   enough to beat site.css's bare element rules on load order, and low enough
   that any console class (0,1,0) beats them. Written as `.console-body h1` the
   reset is 0,1,1 and outranks .page-title, which silently strips every heading
   in the console back to body type. That is not hypothetical; it shipped. */
:where(.console-body) section { padding: 0; margin: 0; }
:where(.console-body) h1,
:where(.console-body) h2,
:where(.console-body) h3,
:where(.console-body) h4 {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
}
:where(.console-body) p { margin: 0; max-width: none; }
:where(.console-body) a { color: inherit; }
:where(.console-body) ul,
:where(.console-body) ol { list-style: none; margin: 0; padding: 0; }
:where(.console-body) dl,
:where(.console-body) dt,
:where(.console-body) dd { margin: 0; }
:where(.console-body) figure,
:where(.console-body) blockquote { margin: 0; }

.console-body {
  background: var(--console-bg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  min-height: 100vh;
}

.console-body *:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Dark grounds: the rail, the drawer header, the login backdrop. */
.rail *:focus-visible,
.drawer-head *:focus-visible,
.login-page > *:focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--rail-bg);
  color: var(--rail-fg);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.console-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ============================================================================
   2. NAVIGATION RAIL
   Dark green is structural. It frames the whole application, and the ivory
   workspace reads as the work surface set inside it.
   ============================================================================ */

.rail {
  background: var(--rail-bg);
  background-image: linear-gradient(180deg, var(--rail-bg) 0%, var(--rail-bg-deep) 100%);
  color: var(--rail-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 0 14px;
  border-right: 1px solid #102314;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 18px;
  text-decoration: none;
  color: var(--rail-fg);
}
.rail-brand img { display: block; width: 26px; height: 26px; }
.rail-brand-word {
  font-family: var(--disp);
  font-size: 1.24rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}
.rail-brand-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rail-fg-dim);
  margin-top: 3px;
}

.rail-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }

.rail-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--rail-fg-dim);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.rail-link:hover { background: rgba(255,255,255,.06); color: var(--rail-fg); }
.rail-link[aria-current="page"] {
  background: var(--rail-active-bg);
  color: #FFF8EC;
  box-shadow: inset 3px 0 0 var(--achiote-orange);
}
.rail-link-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255,255,255,.10);
  color: var(--rail-fg);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.rail-link-count.is-urgent { background: var(--achiote-orange); color: #262016; }

.rail-foot { margin-top: auto; padding: 12px 14px 0; border-top: 1px solid rgba(255,255,255,.10); }
.rail-operator { display: block; min-width: 0; }
.rail-operator-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rail-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-operator-account {
  display: block;
  font-size: 0.6875rem;
  color: var(--rail-fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-signout {
  margin-top: 10px;
  width: 100%;
  background: none;
  border: 1px solid rgba(255,255,255,.20);
  color: var(--rail-fg-dim);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.rail-signout:hover { color: var(--rail-fg); border-color: rgba(255,255,255,.42); }

/* ============================================================================
   3. WORKSPACE
   ============================================================================ */

.workspace { min-width: 0; padding: 26px 30px 72px; max-width: 1420px; }

.page-head { margin-bottom: 20px; }
.c-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke-gray);
  margin-bottom: 5px;
}
.page-title {
  font-family: var(--disp);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--caldero-black);
}
.page-sub { font-size: 0.875rem; color: var(--smoke-gray); margin-top: 5px; }
.page-sub strong { color: var(--caldero-black); font-weight: 600; }

.section { margin-bottom: 26px; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--console-hairline);
}
.section-title {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--caldero-black);
}
.section-note { font-size: 0.8125rem; color: var(--smoke-gray); margin-left: auto; }

/* ============================================================================
   4. OPERATING SUMMARY STRIP
   Counts only, all derived from live records. Never a chart.
   ============================================================================ */

/* A grid of equal cells rather than natural-width flex items. Flex sized the
   cells to their labels, so a wider fallback font (or one more cell) could tip
   the whole strip onto a second row and double its height. Equal columns bound
   the height whatever the font does: a long label wraps inside its own cell.
   The 1px gap over a hairline background draws the dividers, so they stay
   correct however the grid wraps. */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--console-hairline);
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.summary-cell {
  background: var(--console-surface);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.summary-n {
  font-family: var(--disp);
  font-size: 1.85rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--caldero-black);
}
.summary-l {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--smoke-gray);
  overflow-wrap: break-word;
}
.summary-cell.is-zero .summary-n { color: var(--ash-gray); }
.summary-cell.tone-action .summary-n { color: #AC351F; }
.summary-cell.tone-critical .summary-n { color: var(--urg-critical); }
.summary-cell.tone-ready .summary-n { color: var(--urg-ready); }
.summary-cell.tone-investigate .summary-n { color: var(--red-onion); }

/* ============================================================================
   5. QUEUE ROWS — the work surface
   Rows, not cards. A queue is read top to bottom, and cards fight that.
   ============================================================================ */

.queue { list-style: none; display: flex; flex-direction: column; gap: 7px; }

.queue-row {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 16px;
  background: var(--console-surface);
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.queue-row:hover {
  border-color: var(--ash-gray);
  box-shadow: 0 2px 10px rgba(31,27,23,.06);
}
/* Ash Gray is 2.50:1 here and cannot carry the fallback edge either. */
.queue-edge { align-self: stretch; background: var(--smoke-gray); }
.queue-row.urg-critical  .queue-edge { background: var(--urg-critical); }
.queue-row.urg-soon      .queue-edge { background: var(--urg-soon); }
.queue-row.urg-open      .queue-edge { background: var(--urg-open); }
.queue-row.urg-ready     .queue-edge { background: var(--urg-ready); }
.queue-row.urg-investigate .queue-edge { background: var(--red-onion); }

.queue-main { padding: 12px 0 12px 2px; min-width: 0; }
.queue-biz {
  font-family: var(--disp);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--caldero-black);
}
.queue-ctx {
  font-size: 0.75rem;
  color: var(--smoke-gray);
  margin-top: 1px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 7px;
}
.queue-ctx span::after { content: "·"; margin-left: 7px; color: var(--ash-gray); }
.queue-ctx span:last-child::after { content: ""; }
.queue-reason {
  font-size: 0.875rem;
  color: var(--ink-900);
  margin-top: 5px;
  font-weight: 500;
}

.queue-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 12px 0;
  text-align: right;
}
.queue-act { padding: 12px 14px 12px 0; }

.cutoff {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--smoke-gray);
  white-space: nowrap;
}
.cutoff.is-critical { color: var(--urg-critical); font-weight: 700; }
.cutoff.is-soon { color: #AC351F; font-weight: 600; }
.cutoff.is-passed { color: var(--urg-critical); font-weight: 600; }

/* ============================================================================
   6. STATUS CHIPS
   Text always present. Colour is reinforcement, never the sole carrier.
   ============================================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.chip.state-expected             { background: var(--st-expected-bg); color: var(--st-expected-fg); border-color: var(--st-expected-edge); }
.chip.state-received             { background: var(--st-received-bg); color: var(--st-received-fg); border-color: var(--st-received-edge); }
.chip.state-needs-clarification  { background: var(--st-clarify-bg);  color: var(--st-clarify-fg);  border-color: var(--st-clarify-edge); }
.chip.state-verified             { background: var(--st-verified-bg); color: var(--st-verified-fg); border-color: var(--st-verified-edge); }
.chip.state-missing              { background: var(--st-missing-bg);  color: var(--st-missing-fg);  border-color: var(--st-missing-edge); }
.chip.state-not-applicable       { background: var(--st-na-bg);       color: var(--st-na-fg);       border-color: var(--st-na-edge); }

/* Hollow dot for states where nothing has arrived — a filled dot reads as
   "present", and expected/missing are precisely the absence of a thing. */
.chip.state-expected::before,
.chip.state-missing::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }

/* Priority. P1 is the only one that competes for attention. */
.chip.pri-P1 { background: #FBE6E1; color: #902916; border-color: #ED9F8E; }
.chip.pri-P2 { background: var(--st-expected-bg); color: var(--st-expected-fg); border-color: var(--st-expected-edge); }
.chip.pri-P3 { background: var(--st-na-bg); color: var(--st-na-fg); border-color: var(--st-na-edge); }
.chip.pri-P1::before, .chip.pri-P2::before, .chip.pri-P3::before { display: none; }

.chip.neutral { background: var(--console-surface-sunk); color: var(--smoke-gray); border-color: var(--console-hairline-strong); }
.chip.neutral::before { display: none; }

/* ============================================================================
   7. BUTTONS
   Orange means do something, and only one thing per row may claim it.
   ============================================================================ */

.cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.cbtn:active { transform: translateY(1px); }
.cbtn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Chili Coral has almost no room to darken while keeping black type, so the
   hover is Eerie Black with the label inverted to cream — the rule the brand
   book draws on p.26 and the handoff flags hardest. The previous hover here
   darkened the coral and kept the dark label, which measured 4.11:1 and failed
   AA on the console's only primary action. */
.cbtn-action {
  background: var(--primary-action);
  color: var(--primary-action-text);
  border-color: var(--peanut-butter-jelly);
}
.cbtn-action:hover:not(:disabled),
.cbtn-action:focus-visible {
  background: var(--primary-action-hover);
  color: var(--sofrito-cream);
  border-color: var(--primary-action-hover);
}

.cbtn-solid {
  background: var(--culantro-green);
  color: var(--sofrito-cream);
  border-color: #214229;
}
.cbtn-solid:hover:not(:disabled) { background: #214229; }

.cbtn-quiet {
  background: var(--console-surface);
  color: var(--ink-900);
  border-color: var(--console-hairline-strong);
}
.cbtn-quiet:hover:not(:disabled) { background: var(--console-surface-sunk); border-color: var(--ash-gray); }

.cbtn-ghost { background: none; color: var(--smoke-gray); border-color: transparent; }
.cbtn-ghost:hover:not(:disabled) { background: rgba(31,27,23,.06); color: var(--ink-900); }

.cbtn-investigate {
  background: var(--st-clarify-bg);
  color: var(--st-clarify-fg);
  border-color: var(--st-clarify-edge);
}
.cbtn-investigate:hover:not(:disabled) { background: #EDDCE4; }

.cbtn-sm { font-size: 0.75rem; padding: 4px 9px; }

/* ============================================================================
   8. TABLES — for comparison across businesses and inputs
   ============================================================================ */

.dtable-wrap {
  background: var(--console-surface);
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dtable-scroll { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.dtable caption { position: absolute; left: -9999px; }
.dtable th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smoke-gray);
  background: var(--console-surface-sunk);
  padding: 8px 14px;
  border-bottom: 1px solid var(--console-hairline-strong);
  white-space: nowrap;
}
.dtable td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--console-hairline);
  vertical-align: middle;
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: #FBF4EA; }
.dtable .c-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable .t-name { font-family: var(--disp); font-size: 0.98rem; font-weight: 500; }
.dtable th:first-child, .dtable td:first-child { min-width: 190px; }
.dtable .t-sub { font-size: 0.75rem; color: var(--smoke-gray); }
.dtable .t-act { text-align: right; white-space: nowrap; }
.dtable .t-muted { color: var(--smoke-gray); }
.row-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--disp); font-size: 0.98rem; font-weight: 500;
  color: var(--caldero-black); text-align: left;
}
.row-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   9. COMPLETENESS — explicit counts, never a bare number
   ============================================================================ */

.completeness { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.8125rem; }
.completeness b { font-variant-numeric: tabular-nums; font-weight: 700; }
.cmp-part { white-space: nowrap; color: var(--smoke-gray); }
.cmp-part b { color: var(--caldero-black); }
.cmp-part.is-verified b { color: var(--urg-ready); }
.cmp-part.is-missing b { color: var(--urg-critical); }
.cmp-part.is-clarify b { color: var(--red-onion); }

.meter {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--console-surface-sunk);
  border: 1px solid var(--console-hairline);
  min-width: 110px;
}
.meter span { display: block; height: 100%; }
.meter .m-verified { background: var(--urg-ready); }
.meter .m-received { background: var(--achiote-orange); }
.meter .m-clarify  { background: var(--red-onion-400); }
.meter .m-expected { background: var(--garlic-gold); }
.meter .m-missing  { background: var(--urg-critical); }
.meter .m-na       { background: var(--ash-gray); }

/* ============================================================================
   10. BUSINESS WORKSPACE
   Customer and location are different things and must never read as one
   name printed twice.
   ============================================================================ */

.biz-head {
  background: var(--console-surface);
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.biz-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.biz-customer {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--culantro-green);
}
.biz-customer-tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke-gray);
  background: var(--console-surface-sunk);
  border: 1px solid var(--console-hairline);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}
.biz-identity { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.biz-name {
  font-family: var(--disp);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--caldero-black);
}
.biz-loc-tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--achiote-orange);
  border: 1px solid #ED9F8E;
  background: #FBE6E1;
  color: #902916;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  margin-top: 6px;
}
.biz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-top: 7px;
  font-size: 0.78125rem;
  color: var(--smoke-gray);
}
.biz-meta span::after { content: "·"; margin-left: 10px; color: var(--ash-gray); }
.biz-meta span:last-child::after { content: ""; }
.biz-meta b { color: var(--ink-900); font-weight: 600; }

/* State strip — only states the system can actually derive */
.state-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  border: 1px solid;
}
.state-pill.tone-ready      { background: var(--st-verified-bg); color: var(--st-verified-fg); border-color: var(--st-verified-edge); }
.state-pill.tone-action     { background: var(--st-received-bg); color: var(--st-received-fg); border-color: var(--st-received-edge); }
.state-pill.tone-wait       { background: var(--st-expected-bg); color: var(--st-expected-fg); border-color: var(--st-expected-edge); }
.state-pill.tone-critical   { background: var(--st-missing-bg);  color: var(--st-missing-fg);  border-color: var(--st-missing-edge); }
.state-pill.tone-investigate{ background: var(--st-clarify-bg);  color: var(--st-clarify-fg);  border-color: var(--st-clarify-edge); }
.state-pill.tone-neutral    { background: var(--st-na-bg);       color: var(--st-na-fg);       border-color: var(--st-na-edge); }

/* Tabs */
.biz-tabs {
  display: flex;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--console-hairline-strong);
  margin-bottom: 18px;
}
.biz-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--smoke-gray);
  cursor: pointer;
  margin-bottom: -1px;
}
.biz-tab:hover { color: var(--ink-900); }
.biz-tab[aria-selected="true"] { color: var(--caldero-black); border-bottom-color: var(--achiote-orange); }

/* ============================================================================
   11. WEEK PROGRESSION — driven by real week status, never decorative
   ============================================================================ */

.progression { display: flex; flex-wrap: wrap; gap: 0; list-style: none; }
.prog-step {
  flex: 1 1 0;
  min-width: 116px;
  padding: 9px 12px 9px 16px;
  background: var(--console-surface);
  border: 1px solid var(--console-hairline-strong);
  border-right: 0;
  position: relative;
}
.prog-step:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.prog-step:last-child { border-right: 1px solid var(--console-hairline-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prog-n {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash-gray);
}
.prog-name { font-size: 0.8125rem; font-weight: 600; color: var(--smoke-gray); margin-top: 1px; }
.prog-note { font-size: 0.6875rem; color: var(--ash-gray); margin-top: 2px; }

.prog-step.is-done { background: var(--st-verified-bg); }
.prog-step.is-done .prog-name, .prog-step.is-done .prog-n { color: var(--st-verified-fg); }
.prog-step.is-current { background: var(--console-surface); box-shadow: inset 0 3px 0 var(--achiote-orange); }
.prog-step.is-current .prog-name { color: var(--caldero-black); font-weight: 700; }
.prog-step.is-current .prog-note { color: var(--smoke-gray); }
.prog-step.is-blocked { background: var(--st-missing-bg); box-shadow: inset 0 3px 0 var(--urg-critical); }
.prog-step.is-blocked .prog-name { color: var(--st-missing-fg); font-weight: 700; }
.prog-step.is-blocked .prog-note { color: var(--st-missing-fg); }

.dependency {
  margin-top: 9px;
  font-size: 0.8125rem;
  color: var(--smoke-gray);
}
.dependency b { color: var(--caldero-black); font-weight: 600; }

/* ============================================================================
   12. COMMAND GRID
   ============================================================================ */

.cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.panel {
  background: var(--console-surface);
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.panel-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--smoke-gray);
}
.panel-action { margin-left: auto; }

.minirow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--console-hairline);
  font-size: 0.8125rem;
}
.minirow:last-child { border-bottom: 0; }
.minirow-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minirow-meta { margin-left: auto; font-size: 0.75rem; color: var(--smoke-gray); white-space: nowrap; }
.minirow-meta.tone-critical { color: var(--urg-critical); font-weight: 600; }
.minirow-meta.tone-investigate { color: var(--red-onion); font-weight: 600; }
.minirow-meta.tone-action { color: #AC351F; font-weight: 600; }
.minirow-meta.tone-ready { color: var(--urg-ready); }

/* ============================================================================
   13. EVIDENCE ROWS AND INSPECTION DRAWER
   ============================================================================ */

.inbox-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--console-surface);
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  margin-bottom: 14px;
}
.inbox-summary-line { font-size: 0.9375rem; color: var(--ink-900); }
.inbox-summary-line b { font-variant-numeric: tabular-nums; }
.inbox-flag {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--urg-critical);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ev-input { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-label { font-family: var(--disp); font-size: 0.98rem; font-weight: 500; color: var(--caldero-black); }
.ev-sub { font-size: 0.71875rem; color: var(--smoke-gray); display: flex; flex-wrap: wrap; gap: 0 6px; }
.ev-sub span::after { content: "·"; margin-left: 6px; color: var(--ash-gray); }
.ev-sub span:last-child::after { content: ""; }

/* Drawer */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(24,20,16,.44);
  z-index: 200;
  opacity: 0;
  transition: opacity .16s ease;
}
.drawer-scrim.is-open { opacity: 1; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--console-bg);
  border-left: 1px solid var(--console-hairline-strong);
  box-shadow: var(--shadow-overlay);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .18s cubic-bezier(.32,.72,.35,1);
}
.drawer.is-open { transform: translateX(0); }
.drawer-head {
  background: var(--rail-bg);
  color: var(--rail-fg);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.drawer-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rail-fg-dim);
}
.drawer-title {
  font-family: var(--disp);
  font-size: 1.24rem;
  font-weight: 500;
  line-height: 1.15;
  margin-top: 3px;
  color: #FFF8EC;
}
.drawer-close {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255,255,255,.24);
  color: var(--rail-fg);
  border-radius: var(--radius-sm);
  width: 30px; height: 30px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.drawer-close:hover { background: rgba(255,255,255,.10); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 28px; }
.drawer-foot {
  border-top: 1px solid var(--console-hairline-strong);
  background: var(--console-surface);
  padding: 12px 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Definition grid for evidence facts */
.facts { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 0; margin: 0; }
.facts dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--smoke-gray);
  padding: 8px 0;
  border-bottom: 1px solid var(--console-hairline);
}
.facts dd {
  font-size: 0.8125rem;
  color: var(--ink-900);
  padding: 8px 0;
  border-bottom: 1px solid var(--console-hairline);
  min-width: 0;
  overflow-wrap: anywhere;
}
.facts dd.is-absent { color: var(--ash-gray); font-style: italic; }

/* ============================================================================
   14. TIMELINE — State History. This is an audit trail; it should read like
   one. Chronological, actor-attributed, and never inferred.
   ============================================================================ */

.timeline { list-style: none; position: relative; padding-left: 20px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--console-hairline-strong);
}
.c-tl-item { position: relative; padding: 0 0 14px; }
.c-tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: -19px; top: 4px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--console-surface);
  border: 2px solid var(--ash-gray);
}
.c-tl-item.to-verified .tl-dot            { border-color: var(--urg-ready); background: var(--urg-ready); }
.c-tl-item.to-missing .tl-dot             { border-color: var(--urg-critical); background: var(--st-missing-bg); }
.c-tl-item.to-received .tl-dot            { border-color: var(--achiote-orange); background: var(--achiote-orange); }
.c-tl-item.to-needs-clarification .tl-dot { border-color: var(--red-onion); background: var(--st-clarify-bg); }
.tl-transition { font-size: 0.8125rem; font-weight: 600; color: var(--caldero-black); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-arrow { color: var(--ash-gray); }
.tl-attr {
  font-size: 0.71875rem;
  color: var(--smoke-gray);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.tl-actor {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.625rem;
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  border: 1px solid var(--console-hairline-strong);
  background: var(--console-surface-sunk);
  color: var(--smoke-gray);
}
.tl-actor.actor-clock { background: var(--st-missing-bg); border-color: var(--st-missing-edge); color: var(--st-missing-fg); }
.tl-actor.actor-concierge { background: var(--st-verified-bg); border-color: var(--st-verified-edge); color: var(--st-verified-fg); }
.tl-reason {
  max-width: 78ch;
  font-size: 0.78125rem;
  color: var(--ink-900);
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--console-surface-sunk);
  border-left: 2px solid var(--console-hairline-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ============================================================================
   15. FORMS AND CONTROLS
   The native select control is kept. It is replaced visually, not
   functionally: the element is still a <select>, so keyboard behaviour,
   screen-reader semantics, and the platform picker are all untouched.
   ============================================================================ */

.c-field { margin-bottom: 14px; }
.field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 5px;
}
.field-hint { font-size: 0.75rem; color: var(--smoke-gray); margin-top: 4px; }

.select-wrap { position: relative; display: block; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 13px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -5px;
  border-right: 2px solid var(--smoke-gray);
  border-bottom: 2px solid var(--smoke-gray);
  transform: rotate(45deg);
  pointer-events: none;
}
.cselect, .cinput {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-900);
  background: var(--console-surface);
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  line-height: 1.4;
}
.cselect {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
}
.cselect:hover, .cinput:hover { border-color: var(--ash-gray); }
.cselect:focus, .cinput:focus { border-color: var(--culantro-green); }
.cinput::placeholder { color: var(--ash-gray); }

/* The Windows blue is on the option list, which lives outside the page and
   cannot be styled. Setting the colours on <option> is what the platform
   actually honours, and it keeps the popup from flashing system blue-on-white
   against a warm page. */
.cselect option { background: var(--console-surface); color: var(--ink-900); }

.check-list { display: flex; flex-direction: column; gap: 2px; }
.c-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--console-hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--console-surface);
  font-size: 0.8125rem;
}
.c-check:hover { background: #FBF4EA; border-color: var(--ash-gray); }
.c-check input { margin-top: 2px; accent-color: var(--culantro-green); width: 15px; height: 15px; flex: none; cursor: pointer; }
.c-check.is-checked { background: var(--st-verified-bg); border-color: var(--st-verified-edge); }
.check-text { min-width: 0; }
.check-sub { display: block; font-size: 0.71875rem; color: var(--smoke-gray); margin-top: 1px; }

.radio-cards { display: flex; flex-direction: column; gap: 6px; }
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--console-surface);
  cursor: pointer;
  font-size: 0.8125rem;
}
.radio-card:hover { border-color: var(--ash-gray); background: #FBF4EA; }
.radio-card input { margin-top: 2px; accent-color: var(--red-onion); width: 15px; height: 15px; flex: none; cursor: pointer; }
.radio-card.is-checked { background: var(--st-clarify-bg); border-color: var(--st-clarify-edge); }

.default-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--st-verified-fg);
  background: var(--st-verified-bg);
  border: 1px solid var(--st-verified-edge);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 12px;
}

/* ============================================================================
   16. MODAL
   ============================================================================ */

.cmodal-scrim { position: fixed; inset: 0; background: rgba(24,20,16,.44); z-index: 300; }
.cmodal {
  position: fixed;
  z-index: 301;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: var(--console-bg);
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.cmodal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--console-hairline-strong);
  background: var(--console-surface);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cmodal-title { font-family: var(--disp); font-size: 1.18rem; font-weight: 500; line-height: 1.2; }
.cmodal-sub { font-size: 0.75rem; color: var(--smoke-gray); margin-top: 2px; }
.cmodal-close {
  margin-left: auto;
  background: none;
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  width: 28px; height: 28px;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--smoke-gray);
  cursor: pointer;
  flex: none;
}
.cmodal-close:hover { background: var(--console-surface-sunk); color: var(--ink-900); }
.cmodal-body { padding: 16px 18px; overflow-y: auto; }
.cmodal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--console-hairline-strong);
  background: var(--console-surface);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ============================================================================
   17. EMPTY STATES
   Sofrito has a voice. It is used once per screen, not once per paragraph.
   ============================================================================ */

.empty {
  background: var(--console-surface);
  border: 1px dashed var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  padding: 26px 22px;
  text-align: center;
}
.empty-title {
  font-family: var(--disp);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--caldero-black);
  margin-bottom: 5px;
}
.empty-body { font-size: 0.875rem; color: var(--smoke-gray); max-width: 46ch; margin: 0 auto; }
.empty-act { margin-top: 14px; }
.empty.is-tight { padding: 16px; text-align: left; }
.empty.is-tight .empty-body { margin: 0; }

/* ============================================================================
   18. FEEDBACK
   ============================================================================ */

.loading-line { font-size: 0.875rem; color: var(--smoke-gray); padding: 22px 0; }

.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 400; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--rail-bg);
  color: var(--rail-fg);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: var(--shadow-elevated);
  max-width: 340px;
  animation: toast-in .18s ease;
}
.toast.is-error { background: #762213; }
.toast.is-good { background: #244B2E; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.inline-error {
  background: var(--st-missing-bg);
  border: 1px solid var(--st-missing-edge);
  color: var(--st-missing-fg);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.8125rem;
  margin-bottom: 12px;
}

/* A verification landing softly rather than snapping. Motion carries the state
   change and nothing else. */
@keyframes settle {
  0%   { background: var(--st-verified-bg); }
  100% { background: transparent; }
}
.just-settled { animation: settle 1.1s ease-out; }

/* ============================================================================
   19. LOGIN
   ============================================================================ */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--rail-bg);
  background-image: linear-gradient(160deg, #214229 0%, #142B19 100%);
  padding: 24px;
}
.login-card {
  width: min(400px, 100%);
  background: var(--console-bg);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-overlay);
}
.login-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.login-brand img { width: 30px; height: 30px; }
.login-brand-word { font-family: var(--disp); font-size: 1.3rem; font-weight: 500; }
.login-title { font-family: var(--disp); font-size: 1.4rem; font-weight: 500; margin-bottom: 5px; }
.login-sub { font-size: 0.875rem; color: var(--smoke-gray); margin-bottom: 20px; }

/* ============================================================================
   20. REVIEW STUDIO AND RESPONSIVE LAYOUT
   Desktop is the operator's environment. Narrower widths are supported
   deliberately: the rail becomes a bar, tables scroll rather than reflowing
   into unreadable stacks, and the drawer takes the full width.
   ============================================================================ */

.review-shell { display: grid; gap: 18px; }
.review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 22px;
  background: var(--rail-bg);
  color: var(--rail-fg);
  border-radius: var(--radius-md);
}
.review-kicker {
  margin: 0 0 5px;
  color: var(--achiote-orange);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.review-head .review-kicker { color: #F7BE7F; }
.review-title {
  margin: 0;
  color: #FFFDF9;
  font-family: var(--disp);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.05;
}
.review-sub { margin: 8px 0 0; max-width: 66ch; color: var(--rail-fg); font-size: .875rem; }
.review-state {
  flex: none;
  padding: 6px 10px;
  border: 1px solid #87B692;
  border-radius: 999px;
  background: #DEEDE2;
  color: #214229;
  font-size: .75rem;
  font-weight: 800;
}
#reviewStudio { display: grid; gap: 18px; }
.review-candidate-picker {
  padding: 13px 15px;
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--console-surface-sunk);
}
.review-candidate-picker p { margin: 0 0 9px; color: var(--charcoal); font-size: .82rem; overflow-wrap: anywhere; }
.review-candidate-picker div { display: flex; flex-wrap: wrap; gap: 8px; }
.playbook-status { overflow-wrap: anywhere; }
.review-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.review-summary-grid > article {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--console-surface);
}
.review-summary-grid h3,
.review-action-card h3 {
  margin: 0;
  color: var(--sofrito-green);
  font-family: var(--disp);
  font-size: 1.12rem;
  overflow-wrap: anywhere;
}
.review-summary-grid article > p:last-child { margin: 8px 0 0; color: var(--charcoal); font-size: .84rem; }
.review-section {
  padding: 18px;
  border: 1px solid var(--console-hairline);
  border-radius: var(--radius-md);
  background: var(--console-surface);
}
.review-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.review-section-head h3 { margin: 0; color: var(--sofrito-green); font-size: 1rem; }
.review-section-head p { margin: 0; color: var(--smoke-gray); font-size: .75rem; }
.claim-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.claim-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--console-hairline);
  border-top: 3px solid var(--gold-text);
  border-radius: var(--radius-sm);
  background: var(--console-bg);
}
.claim-cause { border-top-color: var(--red-onion); }
.claim-hypothesis { border-top-color: var(--achiote-orange); }
.claim-limitation { border-top-color: var(--smoke-gray); }
.claim-head, .measurement-head, .action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.claim-kind { color: var(--sofrito-green); font-size: .6875rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.claim-statement { margin: 10px 0 7px; color: var(--charcoal); font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; }
.claim-reason { margin: 0; color: var(--smoke-gray); font-size: .75rem; }
.evidence-badge {
  display: inline-flex;
  flex: none;
  padding: 3px 7px;
  border: 1px solid;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 800;
  white-space: nowrap;
}
.evidence-verified { background: var(--st-verified-bg); border-color: var(--st-verified-edge); color: var(--st-verified-fg); }
.evidence-supported { background: var(--st-clarify-bg); border-color: var(--st-clarify-edge); color: var(--st-clarify-fg); }
.evidence-unknown { background: var(--st-na-bg); border-color: var(--st-na-edge); color: var(--st-na-fg); }
.measurement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.measurement-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--console-hairline-strong);
  border-radius: var(--radius-sm);
  background: #FFFDF9;
}
.measurement-id { margin: 0 0 3px; color: var(--smoke-gray); font-size: .6875rem; font-weight: 800; text-transform: uppercase; }
.measurement-label { margin: 0; color: var(--sofrito-green); font-size: .95rem; overflow-wrap: anywhere; }
.measurement-value { margin: 16px 0 4px; color: var(--sofrito-green); font-family: var(--disp); font-size: 1.7rem; font-weight: 800; }
.measurement-comparison { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-bottom: 12px; color: var(--smoke-gray); font-size: .75rem; }
.measurement-delta { color: var(--red-onion); font-weight: 800; }
.review-mini-facts { display: grid; grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr); gap: 6px 12px; margin: 0 0 13px; font-size: .78rem; }
.review-mini-facts dt { color: var(--smoke-gray); font-weight: 800; }
.review-mini-facts dd { margin: 0; color: var(--charcoal); overflow-wrap: anywhere; }
.review-lineage {
  padding: 13px 16px;
  border-left: 4px solid var(--gold-text);
  background: var(--console-surface-sunk);
}
.review-lineage p:last-child { margin: 0; color: var(--charcoal); font-size: .82rem; overflow-wrap: anywhere; }
.review-action-card { padding: 20px; border: 2px solid var(--sofrito-green); border-radius: var(--radius-md); background: var(--console-surface); }
.decision-class {
  padding: 4px 8px;
  border: 1px solid var(--console-hairline-strong);
  border-radius: 999px;
  color: var(--smoke-gray);
  font-size: .6875rem;
  font-weight: 800;
  text-transform: uppercase;
}
.action-facts { margin-top: 16px; }
.measurement-plan { margin-top: 16px; padding: 15px; border: 1px solid var(--console-hairline); border-radius: var(--radius-sm); background: var(--console-bg); }
.measurement-plan h4 { margin: 0 0 10px; color: var(--sofrito-green); font-size: .9rem; }
.decision-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--console-hairline); }
.protected-note, .review-warning {
  margin: 13px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--st-clarify-edge);
  border-radius: var(--radius-sm);
  background: var(--st-clarify-bg);
  color: var(--st-clarify-fg);
  font-size: .78rem;
}
.decision-record { padding: 12px 15px; border: 1px solid var(--st-verified-edge); border-radius: var(--radius-sm); background: var(--st-verified-bg); color: var(--st-verified-fg); }
.decision-record p { margin: 0; font-size: .78rem; }
.decision-record p + p { margin-top: 4px; }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.proof-row { padding: 10px 11px; border-left: 3px solid var(--urg-ready); background: var(--console-bg); }
.proof-row.relationship-limits { border-left-color: var(--gold-text); }
.proof-row.relationship-contradicts { border-left-color: var(--urg-critical); }
.proof-row > div { display: flex; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.proof-row p { margin: 5px 0 0; color: var(--smoke-gray); font-size: .75rem; overflow-wrap: anywhere; }

/* Delivery Studio: publication controls stay separate from the customer view. */
.delivery-shell { display: grid; gap: 18px; }
.delivery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--rail-bg); color: var(--rail-fg); }
.delivery-head h2 { margin: 0; color: #fffdf9; font-family: var(--disp); font-size: clamp(1.55rem,3vw,2.15rem); }
.delivery-head p:last-child { margin: 7px 0 0; max-width: 64ch; font-size: .85rem; }
.delivery-state { flex: none; padding: 6px 10px; border: 1px solid #e9a57f; border-radius: 999px; color: #512114; background: #ffe0cf; font-size: .72rem; font-weight: 850; }
#deliveryStudio { display: grid; gap: 16px; }
.delivery-grid { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(0,1.55fr); gap: 18px; align-items: start; }
.delivery-controls,.delivery-preview,.delivery-history { min-width: 0; padding: 19px; border: 1px solid var(--console-hairline-strong); border-radius: var(--radius-md); background: var(--console-surface); }
.delivery-controls { position: sticky; top: 22px; }
.delivery-controls .select-wrap,.delivery-controls .cselect { min-width: 0; max-width: 100%; }
.delivery-controls h3,.delivery-preview h3 { margin: 0 0 17px; color: var(--sofrito-green); font-family: var(--disp); font-size: 1.25rem; }
.delivery-controls .cbtn-sm { margin: -4px 0 15px; }
.delivery-facts { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 7px 12px; margin: 15px 0; font-size: .77rem; }
.delivery-facts dt { color: var(--smoke-gray); font-weight: 800; }.delivery-facts dd { margin: 0; overflow-wrap: anywhere; }
.delivery-actions { display: grid; gap: 8px; }.delivery-actions .cbtn { width: 100%; min-height: 42px; }
.delivery-result { margin: 14px 0 0; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--smoke-gray); background: var(--console-surface-sunk); font-size: .76rem; }
.delivery-result.is-good { color: var(--st-verified-fg); background: var(--st-verified-bg); }
.delivery-alert { padding: 12px 14px; border: 1px solid var(--st-missing-edge); border-radius: var(--radius-sm); color: var(--st-missing-fg); background: var(--st-missing-bg); font-size: .82rem; }
.delivery-preview { padding: 0; overflow: hidden; }.delivery-preview-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 17px 19px; border-bottom: 1px solid var(--console-hairline); }
.delivery-preview-head h3 { margin-bottom: 0; }.preview-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.preview-tabs button { padding: 7px 9px; border: 1px solid var(--console-hairline-strong); border-radius: 7px; background: var(--console-bg); color: var(--smoke-gray); font: 750 .72rem var(--sans); cursor: pointer; }
.preview-tabs button[aria-selected="true"] { color: #fff; border-color: var(--red-onion); background: var(--red-onion); }
#livingPreview,#emailPreview { min-width: 0; padding: 19px; background: var(--console-bg); }
.living-preview { min-width: 0; padding: clamp(18px,4vw,30px); border: 1px solid var(--console-hairline-strong); border-radius: 13px; background: #fffdf9; }
.living-preview h3 { max-width: 22ch; margin: 0 0 16px; color: var(--sofrito-green); font-size: clamp(1.55rem,3vw,2.25rem); overflow-wrap: anywhere; }
.delivery-period { margin: 0 0 8px; color: var(--smoke-gray); font-size: .75rem; }
.delivery-money { margin: 18px 0 6px; color: var(--red-onion); font: 800 clamp(1.8rem,5vw,2.8rem) var(--disp); }
.living-move { margin: 22px 0; padding: 16px; border: 2px solid var(--sofrito-green); border-radius: 10px; }
.living-move h4 { margin: 0; color: var(--sofrito-green); font: 700 1.08rem var(--disp); overflow-wrap: anywhere; }.living-move p:last-child { margin: 9px 0 0; color: var(--smoke-gray); font-size: .78rem; }
.delivery-claims { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.delivery-claim-group { min-width: 0; padding: 11px; border-left: 3px solid var(--red-onion); background: var(--console-surface-sunk); }
.delivery-claim-group h4 { margin: 0 0 8px; color: var(--sofrito-green); font-size: .76rem; }.delivery-claim-group p,.delivery-claim-group li { font-size: .72rem; overflow-wrap: anywhere; }.delivery-claim-group ul { margin: 0; padding-left: 16px; }
.delivery-limit { margin-top: 13px; padding: 12px; border-left: 4px solid var(--gold-text); background: #fff4cf; font-size: .75rem; }.delivery-limit ul { margin-bottom: 0; padding-left: 17px; }
.delivery-proof { margin-top: 14px; border: 1px solid var(--console-hairline); border-radius: 8px; }.delivery-proof summary { cursor: pointer; padding: 11px; color: var(--red-onion); font-size: .76rem; font-weight: 800; }.delivery-proof ul { margin: 0; padding: 0 26px 13px; }.delivery-proof li { margin: 6px 0; font-size: .72rem; overflow-wrap: anywhere; }
.email-subject { margin: 0 0 10px; color: var(--smoke-gray); font-size: .76rem; overflow-wrap: anywhere; }#deliveryEmailFrame { width: 100%; min-height: 650px; border: 1px solid var(--console-hairline-strong); border-radius: 9px; background: #fff; }
.delivery-history { padding: 18px; }.delivery-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }.delivery-events li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 11px; border-left: 3px solid var(--red-onion); background: var(--console-bg); font-size: .77rem; }.delivery-events span { color: var(--smoke-gray); text-align: right; }
.delivery-response { margin-top: 13px; padding: 11px; border-radius: var(--radius-sm); color: var(--st-clarify-fg); background: var(--st-clarify-bg); font-size: .8rem; }.decision-next { margin-top: 9px !important; }

@media (max-width: 1100px) {
  .review-summary-grid { grid-template-columns: 1fr 1fr; }
  .review-summary-grid > article:last-child { grid-column: 1 / -1; }
  .claim-grid { grid-template-columns: 1fr 1fr; }
  .queue-row { grid-template-columns: 4px minmax(0,1fr) auto; }
  .queue-act { grid-column: 2 / -1; padding: 0 14px 12px 2px; }
}

@media (max-width: 900px) {
  .console-shell { grid-template-columns: 1fr; }
  .rail {
    position: sticky;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 8px 12px;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid #102314;
    flex-wrap: wrap;
  }
  .rail-brand { padding: 0 8px 0 0; }
  .rail-brand-sub { display: none; }
  .rail-nav { flex-direction: row; padding: 0; flex: 1; }
  .rail-foot { margin-top: 0; padding: 0; border-top: 0; display: flex; align-items: center; gap: 10px; }
  .rail-operator-account { display: none; }
  .rail-signout { margin-top: 0; width: auto; }
  .workspace { padding: 18px 16px 60px; }
  .page-title { font-size: 1.55rem; }
  .summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
  .facts dd { padding-top: 2px; }
  .drawer { width: 100vw; }
  .progression { flex-direction: column; }
  .review-head, .review-section-head { flex-direction: column; }
  .review-summary-grid, .claim-grid, .measurement-grid { grid-template-columns: 1fr; }
  .review-summary-grid > article:last-child { grid-column: auto; }
  .review-mini-facts { grid-template-columns: 1fr; }
  .review-mini-facts dt { margin-top: 5px; }
  .delivery-head,.delivery-preview-head { flex-direction: column; }.delivery-grid { grid-template-columns: 1fr; }.delivery-controls { position: static; }.delivery-claims { grid-template-columns: 1fr; }
  .decision-controls .cbtn, .review-candidate-picker .cbtn { min-height: 44px; }
  .prog-step { border-right: 1px solid var(--console-hairline-strong); border-bottom: 0; }
  .prog-step:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .prog-step:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); border-bottom: 1px solid var(--console-hairline-strong); }
  .prog-step.is-current, .prog-step.is-blocked { box-shadow: inset 3px 0 0 var(--achiote-orange); }
  .prog-step.is-blocked { box-shadow: inset 3px 0 0 var(--urg-critical); }
}

@media (max-width: 620px) {
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-row { grid-template-columns: 4px minmax(0,1fr); }
  .queue-meta { grid-column: 2; align-items: flex-start; text-align: left; padding: 0 14px 8px 2px; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .queue-act { grid-column: 2; }
  .queue-act .cbtn { width: 100%; }
  .delivery-controls,.delivery-history { padding: 15px; }.delivery-preview-head,#livingPreview,#emailPreview { padding: 14px; }.living-preview { padding: 17px; }.delivery-events li { flex-direction: column; }.delivery-events span { text-align: left; }
}

/* ==========================================================================
   ACTION ROOM
   The move and its proof sit side by side. On a narrow screen they stack in
   that order, because the move without the proof is just advice again.
   ========================================================================== */
.action-shell { display: grid; gap: 18px; }
#actionRoom { display: grid; gap: 16px; }
.action-current { padding: 19px 21px; border: 2px solid var(--sofrito-green); border-radius: var(--radius-md); background: var(--console-surface); }
.action-current h3 { margin: 0 0 6px; color: var(--sofrito-green); font-family: var(--disp); font-size: clamp(1.2rem,2.6vw,1.6rem); line-height: 1.2; overflow-wrap: anywhere; }
.action-current-meta { margin: 0 0 11px; color: var(--smoke-gray); font-size: .8rem; }
.action-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: start; }
.action-col { min-width: 0; padding: 19px; border: 1px solid var(--console-hairline-strong); border-radius: var(--radius-md); background: var(--console-surface); }
.action-col h4 { margin: 0 0 4px; color: var(--sofrito-green); font-family: var(--disp); font-size: 1.15rem; }
.action-proof { border-left: 4px solid var(--berenjena-purple, #5b2b73); }
.action-closed-loop { padding: 18px; border: 1px solid var(--console-hairline-strong); border-radius: var(--radius-md); background: var(--console-surface); }
.action-closed-loop h4 { margin: 0 0 12px; color: var(--sofrito-green); font-family: var(--disp); font-size: 1.15rem; }
.loop-chain { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 13px; padding: 0; list-style: none; }
.loop-chain li { padding: 7px 11px; border: 1px solid var(--console-hairline-strong); border-radius: 999px; color: var(--smoke-gray); background: var(--console-bg); font-size: .74rem; font-weight: 800; }
.loop-chain li.is-done { color: var(--st-verified-fg); border-color: var(--st-verified-edge, var(--console-hairline-strong)); background: var(--st-verified-bg); }
.loop-chain li.is-done::before { content: "\2713\00a0"; }
.loop-statement { margin: 0; color: var(--sofrito-green); font-family: var(--disp); font-size: 1.1rem; line-height: 1.35; overflow-wrap: anywhere; }
.loop-reason { margin: 6px 0 0; color: var(--smoke-gray); font-size: .78rem; }
.proof-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rail-point { position: relative; padding: 11px 0 14px 20px; border-left: 2px solid var(--console-hairline-strong); }
.rail-point:last-child { border-left-color: transparent; }
.rail-point::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--console-hairline-strong); }
.rail-point.rail-ready::before { background: var(--st-verified-fg); }
.rail-point.rail-critical::before { background: var(--urg-critical); }
.rail-point.rail-action::before { background: var(--achiote-orange); }
.rail-point.rail-wait::before { background: var(--st-expected-fg, var(--smoke-gray)); }
.rail-when { margin: 0; color: var(--smoke-gray); font-size: .72rem; font-weight: 750; }
.rail-what { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; color: var(--ink, #2b2723); font-size: .86rem; }
.rail-who { color: var(--smoke-gray); font-size: .74rem; font-weight: 600; }
.rail-track { margin: 3px 0 0; color: var(--smoke-gray); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.rail-detail { margin: 6px 0 0; padding-left: 17px; color: var(--smoke-gray); font-size: .77rem; }
.rail-detail li { margin: 2px 0; overflow-wrap: anywhere; }
.modal-quote { margin: 0 0 6px; padding: 11px 13px; border-left: 3px solid var(--achiote-orange); border-radius: var(--radius-sm); background: var(--console-bg); font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- Login card internals ---- */
.login-submit { width: 100%; padding: 11px 16px; font-size: 0.9375rem; }
.login-message {
  margin-top: 16px;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 0.875rem;
  border: 1px solid;
}
.login-message.is-good { background: var(--st-verified-bg); border-color: var(--st-verified-edge); color: var(--st-verified-fg); }
.login-message.is-error { background: var(--st-missing-bg); border-color: var(--st-missing-edge); color: var(--st-missing-fg); }
.login-hint { font-size: 0.78125rem; opacity: .82; margin-top: 4px; }
.login-footer { margin-top: 20px; font-size: 0.75rem; color: var(--smoke-gray); line-height: 1.5; }

/* The Action Room's own breakpoints. They sit after its base rules on purpose:
   placed with the other media queries higher up, the base two-column grid
   declared later won on source order and the panel never stacked. */
@media (max-width: 900px) {
  .action-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .action-col,.action-current { padding: 15px; }
  .loop-chain { flex-direction: column; align-items: stretch; }
  .action-col .delivery-facts { grid-template-columns: 1fr; }
  .action-col .delivery-facts dt { margin-top: 5px; }
}

/* ==========================================================================
   COMMAND — the opening screen answers the financial question first.

   What used to be here was a strip of intake counts. It told an operator how
   the software was doing. The financial stories now lead; the three lanes
   follow as workflow context rather than becoming the page hierarchy.
   ========================================================================== */
.financial-command { padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--console-hairline-strong); border-radius: var(--radius-md); background: var(--console-surface-sunk); }
.financial-command .section-head { margin-bottom: 16px; border-bottom-color: var(--console-hairline-strong); }
.financial-command .section-title { color: var(--sofrito-green); font-family: var(--disp); font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 500; letter-spacing: -.01em; text-transform: none; }
.financial-command .story-strips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pulse-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.lane-card { display: grid; gap: 3px; padding: 16px 18px; border: 1px solid var(--console-hairline-strong); border-left-width: 4px; border-radius: var(--radius-md); background: var(--console-surface); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.lane-card:hover { background: var(--console-surface-sunk); }
.lane-card.is-zero { opacity: .72; }
.lane-now { border-left-color: var(--achiote-orange); }
.lane-waiting { border-left-color: var(--st-expected-fg, var(--smoke-gray)); }
.lane-proven { border-left-color: var(--st-verified-fg); }
.lane-n { font-family: var(--disp); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1; color: var(--sofrito-green); }
.lane-t { font-size: .95rem; font-weight: 850; color: var(--sofrito-green); }
.lane-m { font-size: .75rem; color: var(--smoke-gray); }
.lane-note { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--console-surface-sunk); color: var(--smoke-gray); font-size: .77rem; }
.queue-why { margin: 5px 0 0; color: var(--smoke-gray); font-size: .77rem; font-style: italic; }

.proven-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.proven-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 16px; border: 1px solid var(--console-hairline-strong); border-left: 4px solid var(--st-verified-fg); border-radius: var(--radius-md); background: var(--console-surface); }
.proven-biz { margin: 0 0 3px; font-weight: 850; color: var(--sofrito-green); }
.proven-statement { margin: 0; font-size: .87rem; line-height: 1.45; overflow-wrap: anywhere; }
.proven-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.proven-quiet { border-left-color: var(--smoke-gray); }
.proven-rejected { border-left-color: var(--console-hairline-strong); }

.story-strips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.story-strip { min-width: 0; padding: 17px 19px; border: 1px solid var(--console-hairline-strong); border-left: 4px solid var(--console-hairline-strong); border-radius: var(--radius-md); background: var(--console-surface); }
.story-strip.tone-critical { border-left-color: var(--urg-critical); }
.story-strip.tone-action { border-left-color: var(--achiote-orange); }
.story-strip.tone-ready { border-left-color: var(--st-verified-fg); }
.story-strip.tone-wait { border-left-color: var(--st-expected-fg, var(--smoke-gray)); }
.story-strip.has-approved-money { grid-column: 1 / -1; padding: 22px 24px; border-left-width: 6px; background: var(--console-surface); box-shadow: 0 2px 10px rgba(31,27,23,.08); }
.story-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 8px; }
.story-name { font-weight: 850; }
.story-headline { margin: 0; color: var(--sofrito-green); font-family: var(--disp); font-size: 1.08rem; line-height: 1.3; overflow-wrap: anywhere; }
.story-money { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 9px 0 0; color: var(--berenjena-purple, #5b2b73); font-family: var(--disp); font-size: 1.5rem; }
.has-approved-money .story-headline { max-width: 44rem; font-size: clamp(1.35rem, 2.8vw, 1.75rem); }
.has-approved-money .story-money { font-size: clamp(2.35rem, 5vw, 3.1rem); font-weight: 600; line-height: 1.05; }
.story-lines { margin: 9px 0 0; padding-left: 17px; color: var(--smoke-gray); font-size: .8rem; }
.story-lines li { margin: 3px 0; overflow-wrap: anywhere; }
.story-act { margin: 13px 0 0; }
.all-locations { margin-top: 22px; }
.all-locations > summary { cursor: pointer; padding: 11px 13px; border: 1px solid var(--console-hairline-strong); border-radius: var(--radius-sm); background: var(--console-surface); color: var(--smoke-gray); font-size: .8rem; font-weight: 800; }
.all-locations > summary:focus-visible { outline: 3px solid var(--achiote-orange); outline-offset: 2px; }
.all-locations[open] > summary { margin-bottom: 12px; }

.focus-mode { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(16, 42, 28, .72); }
.focus-panel { width: min(680px, 100%); max-height: 90vh; overflow: auto; padding: 26px 28px 22px; border-radius: var(--radius-md); background: var(--console-surface); }
.focus-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.focus-heading { margin: 0; color: var(--sofrito-green); font-family: var(--disp); font-size: 1.15rem; }
.focus-count { margin: 0 0 6px; color: var(--smoke-gray); font-size: .75rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.focus-title { margin: 0 0 6px; color: var(--sofrito-green); font-family: var(--disp); font-size: clamp(1.35rem, 3.4vw, 1.9rem); line-height: 1.2; overflow-wrap: anywhere; }
.focus-detail { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; }
.focus-story { padding: 13px 15px; border-radius: var(--radius-sm); background: var(--console-bg); }
.focus-story-line { margin: 0; font-weight: 800; color: var(--sofrito-green); overflow-wrap: anywhere; }
.focus-story-sub { margin: 4px 0 0; color: var(--smoke-gray); font-size: .8rem; }
.focus-why { margin: 13px 0 0; color: var(--smoke-gray); font-size: .8rem; font-style: italic; }
.focus-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.focus-actions .cbtn { min-height: 42px; }
.focus-keys { margin: 14px 0 0; color: var(--smoke-gray); font-size: .72rem; }
body.focus-open { overflow: hidden; }

@media (max-width: 900px) {
  .pulse-lanes { grid-template-columns: 1fr; }
  .proven-row { flex-direction: column; }
  .proven-meta { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .financial-command { padding: 14px; }
  .financial-command .story-strips { grid-template-columns: 1fr; }
  .story-strips { grid-template-columns: 1fr; }
  .story-strip { padding: 15px; }
  .focus-panel { padding: 18px; }
  .focus-actions .cbtn { width: 100%; }
}

/* Business Command leads with the story, and Decision Memory carries it back. */
.current-story { border-left: 4px solid var(--sofrito-green); }
.current-story-headline { margin: 0; color: var(--sofrito-green); font-family: var(--disp); font-size: clamp(1.15rem, 2.6vw, 1.55rem); line-height: 1.25; overflow-wrap: anywhere; }
.loop-next { margin: 10px 0 0; color: var(--smoke-gray); font-size: .8rem; line-height: 1.5; }
.memory-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.memory-entry { position: relative; padding: 12px 0 14px 20px; border-left: 2px solid var(--console-hairline-strong); }
.memory-entry:last-child { border-left-color: transparent; }
.memory-entry::before { content: ""; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--console-hairline-strong); }
.memory-entry.memory-ready::before { background: var(--st-verified-fg); }
.memory-entry.memory-action::before { background: var(--achiote-orange); }
.memory-entry.memory-critical::before { background: var(--urg-critical); }
.memory-when { margin: 0; color: var(--smoke-gray); font-size: .72rem; font-weight: 750; }
.memory-title { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: .88rem; font-weight: 800; color: var(--sofrito-green); }
.memory-body { margin: 4px 0 0; color: var(--smoke-gray); font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }