/* PD-078 (26 Sep 2026) · the page ground is pale sage, and cards, lines and pills follow it.
   PD-077 (26 Sep 2026) · text in IBM Plex Sans, headings in IBM Plex Serif, figures in IBM Plex Mono
   (--font-num). This supersedes the type lines of PD-076 and the text half of B-88.
   PD-076 (26 Sep 2026) · Paper in field green. The palette, surfaces and heading face below follow
   design/approved-v2/tokens.css on main; B-88's IBM Plex Mono stays the body face, and headings move
   from Space Grotesk to Source Serif 4. The history below describes the earlier look. */
/* ═══════════════════════════════════════════════════════════════════════════
   NutrientEdge — the decision journey.

   This stylesheet implements design/journey/Main.dc.html on `main`. The mockup
   is a fixed 1440×940 artboard; the one deliberate deviation is that widths
   flex here — the rail (186px) and the recommendation pane (376px) are fixed as
   drawn, everything else fills. At 1440 the result is the artboard; narrower, it
   degrades instead of scrolling sideways.

   The scale is the mockup's: a 3.4px unit and 13px base text. THE TYPEFACES ARE NOT the
   mockup's — the owner replaced Barlow / Barlow Condensed on 6 September with IBM Plex Mono for
   the body and Space Grotesk for headings and glanceable numbers (B-88). Mono body text sets
   wider than Barlow did, so line lengths are longer everywhere; that is the trade the owner asked
   for and `design/journey/Main.dc.html` on `main` still shows the original faces.
   ═══════════════════════════════════════════════════════════════════════════ */
/* B-88 · the owner's typefaces. IBM Plex Mono carries the body — everything here is
   data-shaped, and a monospaced face makes a column of figures line up without being told to.
   Space Grotesk carries headings and any number meant to be read at a glance.
   `display=swap` and real fallbacks: the app is reached through a tunnel and a browser with no
   route to Google must still render legibly rather than blankly. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600&display=swap');

:root {
  --u: 3.4px;
  --s1: 3.4px; --s2: 5px; --s3: 6.8px; --s4: 10.2px; --s5: 13.6px; --s6: 20.4px; --s7: 27.2px;

  --bg: #EBEFE2;
  --surface: #FAFBF5;
  --rail: #EBEFE2;
  --text: #1E1E1C;
  --muted: #5E5A52;
  --faint: #6F6A60;
  --line: #D3DAC4;
  --line-soft: #DDE3CF;

  --accent: #3F5227;
  --accent-dark: #3A4A22;
  --accent-bg: #DCE5C8;
  --accent-line: #C9CBA0;

  --warn: #8A6A1E;          /* also the scenario colour: a scenario is a warning, not a mode you forget */
  --warn-bg: #F1EDD3;
  --warn-line: #DCD4A8;
  /* Text a model wrote. Deliberately outside the existing scale — the palette runs blue for the
     product's own accents and brown/green for freshness, so neither could carry "a machine
     wrote this" without colliding with a meaning already in use. */
  --ai: #6B4B8A;
  --ai-line: #b9a3cd;

  --stale: #8A6A1E;
  --fresh: #4A6B45;
  --fresh-bg: #E7EEE0;
  --fresh-line: #9DB08F;

  --ink-2: #3B3934; --tile: #E8EDDD; --track: #DDE3CF; --bar: #B2AF86; --urgent: #A1402A;
  --paper-shadow: 6px 6px 0 var(--track);
  --font-num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-h: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --shadow: 0 12px 32px rgba(46, 59, 28, .18);

  /* Aliases for surfaces still carrying the older token names in inline styles.
     Everything new uses the scale above; these keep the not-yet-redrawn screens
     coherent instead of silently falling back to unstyled. */
  --space-1: var(--s1); --space-2: var(--s2); --space-3: var(--s3); --space-4: var(--s4);
  --space-5: var(--s5); --space-6: var(--s6); --space-7: var(--s7); --space-8: 34px;
  --color-bg: var(--bg); --color-surface: var(--surface); --color-text: var(--text);
  --color-accent: var(--accent); --color-divider: var(--line);
  --color-accent-100: var(--accent-bg); --color-accent-800: var(--accent-dark);
  --color-neutral-100: var(--tile); --color-neutral-800: var(--ink-2);
  --font-heading: var(--font-h); --font-heading-weight: 600;
  --radius-lg: 10px; --shadow-lg: var(--shadow);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.5; }
/* IBM Plex Mono is loaded at 400/500/600. Browser-default bold is 700, which the browser would
   SYNTHESISE by smearing the 600 — so `b` and `strong` are pinned to a weight that actually
   exists. A faked weight is the one typographic error a reader notices without knowing why. */
b, strong { font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-h); font-weight: 600; letter-spacing: .01em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* — the mockup's utility vocabulary, verbatim — */
.h { font-family: var(--font-h); font-weight: 600; letter-spacing: .01em; }
.kick { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lbl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: var(--s3); }
.sep { height: 1px; background: var(--line); flex: none; }
.scroll { overflow-y: auto; overflow-x: hidden; }
.scroll-x { overflow-x: auto; }
.stale { color: var(--stale); }
.fresh { color: var(--fresh); }
.muted, .text-muted { color: var(--muted); }
.faint { color: var(--faint); }

/* — blueprint frame: every component is a wireframe object with corner marks — */
.bp { position: relative; border: 1px solid var(--line); background: var(--surface); }
.bp > i { position: absolute; width: 5px; height: 5px; border: 1px solid var(--accent); }
.bp > i.tl { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.bp > i.tr { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.bp > i.bl { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.bp > i.br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.btn { border: 1px solid var(--line); background: var(--surface); padding: var(--s2) var(--s4); border-radius: 2px; font-size: 12px; display: inline-block; text-align: center; }
.btn:hover { background: var(--tile); text-decoration: none; color: inherit; }
.btn-primary { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--tile); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.tag { display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid rgba(30, 30, 28, .22); border-radius: 2px; }
.tag-accent { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.tag-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

.input { border: 1px solid var(--line); background: var(--tile); padding: var(--s3); font: inherit; font-size: 12px; color: var(--text); border-radius: 2px; width: 100%; }
.input:focus-visible { border-color: var(--accent); }
input[type=range].input { padding: 0; background: transparent; border: 0; }

/* ── app frame: the page never scrolls; panes scroll inside it ─────────────
   B-86 · navigation lives in a left rail and the header's top right carries the workspace
   switcher and nothing else. The demonstration bar stays above both, full width, because it
   describes the whole screen — a warning sharing a row with navigation reads as navigation. */
.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.app-body { flex: 1; min-height: 0; display: flex; }
.app-rail { flex: none; width: 208px; border-right: 1px solid var(--line); background: var(--bg);
  display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) var(--s3); overflow-y: auto; }
.app-rail .brand { display: flex; gap: var(--s1); font-family: var(--font-h); font-weight: 700;
  letter-spacing: .06em; font-size: 15px; padding: 0 var(--s2); }
.app-rail .brand span:last-child { color: var(--accent); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-head { border-bottom: 1px solid var(--line); background: var(--bg); flex: none; }
.app-head .top { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s6); }
/* B-87/B-88 · a PATH, not four labelled buckets. Numbered steps in a gutter, joined by a line, and
   everything after the gutter shares one left edge — the labels and the links line up because a
   journey that does not align reads as a list that was tidied.
   The heading names a purpose and is not a destination: no link, no focus. */
.app-nav { display: flex; flex-direction: column; gap: var(--s4); }
.nav-group { position: relative; padding-left: 24px; display: flex; flex-direction: column; gap: 1px; }
.nav-step { position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--faint);
  font-family: var(--font-h); font-weight: 500; font-size: 10px; line-height: 14px; text-align: center; }
/* The line that makes four steps a path. It stops before the group that is not one. */
.nav-group-step:not(.nav-group-last)::before {
  content: ''; position: absolute; left: 8px; top: 19px; bottom: calc(var(--s4) * -1);
  width: 1px; background: var(--line-soft); }
.nav-group-aside { margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.nav-goal { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
  padding: 0 0 var(--s2); }
.app-nav a { padding-left: var(--s3); }
.app-nav a { border-left: 2px solid transparent; border-radius: 0; padding: var(--s2) var(--s3);
  font-size: 12px; color: inherit; }
.app-nav a:hover { background: var(--tile); text-decoration: none; }
.app-nav a[aria-current='page'] { border-left-color: var(--accent); background: var(--tile); color: var(--accent-dark); }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) var(--s3) 0;
  border-top: 1px solid var(--line); }
.rail-link { font-size: 12px; color: var(--muted); }
/* Narrow screens: the rail becomes a strip rather than a drawer. A drawer needs script, and every
   other control in this product is a link or a form. */
@media (max-width: 900px) {
  .app-body { flex-direction: column; }
  .app-rail { width: auto; border-right: 0; border-bottom: 1px solid var(--line);
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s2); overflow: visible; }
  .app-nav { flex-direction: row; flex-wrap: wrap; gap: var(--s3); }
  .nav-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s1);
    padding-left: 0; }
  .nav-group-step::before { display: none; }
  .nav-step { position: static; flex: none; }
  .nav-group-aside { margin-top: 0; padding-top: 0; border-top: 0; }
  /* The goals stay, inline, because they are the reason the grouping exists. */
  .nav-goal { padding: 0 var(--s1) 0 0; }
  .app-nav a { border-left: 0; border-bottom: 2px solid transparent; }
  .app-nav a[aria-current='page'] { border-bottom-color: var(--accent); }
  .rail-foot { margin-top: 0; border-top: 0; flex-direction: row; align-items: center; }
}
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
.page-title h1 { font-size: 26px; line-height: 1.1; }
/* B-89 · 68ch, not 80. The measure was set for Barlow; IBM Plex Mono puts every character on the
   same advance width, so 80 of them is a materially longer line to track and prose that used to
   look dense now looks endless. Shortening the measure removes crowding without removing a word. */
.page-title p { margin: var(--s1) 0 0; font-size: 12px; color: var(--muted); max-width: 68ch; text-wrap: pretty; }

/* ── S-1 command centre ─────────────────────────────────────────────────── */
.counters { margin-left: auto; display: flex; gap: var(--s7); }
.counters div { text-align: right; }
.counters .n { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 24px; line-height: 1; }
.counters .lbl { max-width: 15ch; display: block; }
.cc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 1200px) { .cc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .cc-cards { grid-template-columns: minmax(0, 1fr); } }
.cc-card { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.cc-card .name { font-family: var(--font-h); font-size: 18px; line-height: 1.1; }
.cc-card .action { font-family: var(--font-h); font-size: 15px; }
.cc-card .reason { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.cc-card .warnstrip { border-top: 1px dashed var(--warn-line); padding-top: var(--s2); font-size: 11px; color: var(--warn); }
.cc-card .btn { margin-top: auto; }
/* Coverage against lead time, as a meter with the lead time as a tick. The number
   alone does not show which side of the line you are on. */
.meter { height: 5px; background: var(--track); margin-top: var(--s1); position: relative; }
.meter .fill { position: absolute; left: 0; top: 0; bottom: 0; }
.meter .lead { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--text); }
.cc-lower { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s5); }
@media (max-width: 900px) { .cc-lower { grid-template-columns: minmax(0, 1fr); } }
.portfolio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s3); }
.portfolio .v { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 19px; line-height: 1.1; }
.cc-alert { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; border-top: 1px solid var(--line-soft); }
.cc-alert .tag { flex: none; }
.cc-alert .head { font-size: 12px; font-weight: 500; }

/* ── S-2 workspace ──────────────────────────────────────────────────────── */
.workspace { flex: 1; display: flex; min-height: 0; }
.rail { width: 186px; flex: none; border-right: 1px solid var(--line); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s1); background: var(--rail); overflow-y: auto; }
.rail a { text-align: left; border: 0; border-left: 3px solid transparent; border-radius: 0; padding: var(--s2) var(--s3); background: transparent; color: inherit; display: block; }
.rail a:hover { background: var(--tile); text-decoration: none; }
.rail a[aria-current='page'] { border-left-color: var(--accent); background: var(--accent-bg); }
.rail .name { font-family: var(--font-h); font-size: 14px; }
.rail .action { margin-left: auto; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.rail .sub { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .workspace { flex-direction: column; }
  .rail { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail a { border-left: 0; border-bottom: 3px solid transparent; min-width: 130px; }
  .rail a[aria-current='page'] { border-bottom-color: var(--accent); }
  .rail .lbl { display: none; }
}
.ws { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ws-head { padding: var(--s5) var(--s6) 0; flex: none; }
.ws-head h1 { font-size: 26px; line-height: 1.05; }
.baseline { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding: var(--s2) var(--s4); background: var(--accent-bg); border: 1px solid var(--accent-line); font-size: 11.5px; flex-wrap: wrap; }
.baseline .lbl { color: var(--accent-dark); }
.baseline .change { margin-left: auto; color: var(--accent-dark); }
.baseline-changes { margin-top: var(--s1); padding: var(--s1) var(--s4); border: 1px solid var(--accent-line); border-top: 0; font-size: 11.5px; }
.baseline-changes summary { cursor: pointer; color: var(--accent-dark); }
.baseline-changes ul { margin: var(--s2) 0 var(--s1); padding-left: var(--s4); columns: 2; column-gap: var(--s6); }
.baseline-changes li { break-inside: avoid; padding: 1px 0; }

/* The chain IS the navigation: five equal steps, the active one marked on the
   edge nearest the pane it drives. */
.chain-nav { padding: var(--s4) var(--s6) 0; display: flex; gap: var(--s1); flex: none; }
.chain-nav a { flex: 1; min-width: 0; border: 1px solid var(--line); border-bottom: 3px solid var(--line); border-radius: 0; background: var(--surface); text-align: left; padding: var(--s3) var(--s4); color: inherit; }
.chain-nav a:hover { background: var(--tile); text-decoration: none; }
.chain-nav a[aria-current='step'] { background: var(--surface); border-bottom-color: var(--accent); }
.chain-nav a[aria-current='step'] .lbl { color: var(--accent); }
.chain-nav .label { font-family: var(--font-h); font-size: 13px; display: block; }
@media (max-width: 900px) { .chain-nav { flex-wrap: wrap; } .chain-nav a { flex: 1 1 40%; } }

.panes { flex: 1; display: flex; gap: var(--s5); padding: var(--s5) var(--s6) var(--s6); min-height: 0; }
@media (max-width: 1100px) { .panes { flex-direction: column; min-height: auto; } }
/* The recommendation never leaves the screen. Fixed width so the evidence pane
   takes every pixel the window gains. */
.pane-rec { width: 376px; flex: none; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
@media (max-width: 1100px) { .pane-rec { width: auto; } }
.pane-rec .action { font-family: var(--font-h); font-size: 27px; line-height: 1; }
.pane-rec .qty { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 22px; line-height: 1.15; }
.pane-rec .urgency { font-size: 12px; color: var(--muted); }
.rec-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.rec-metrics .v { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; line-height: 1.15; }
.rec-metrics .note { font-size: 10.5px; color: var(--faint); line-height: 1.3; }
.rec-warn { border: 1px dashed var(--warn-line); background: var(--warn-bg); padding: var(--s3); font-size: 11.5px; color: var(--warn); line-height: 1.4; }
.rec-wc { border: 1px solid var(--accent); padding: var(--s3); font-size: 11.5px; }
.rec-wc .v { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.rec-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); }

/* What we hold and what we were offered, in the pane that never leaves the screen. PD-036 keeps
   them grouped as Our Context; this is the always-visible summary of it, entry included. */
.rec-context { display: flex; flex-direction: column; gap: var(--s2); }
.rec-context > .lbl a { color: var(--accent); }
.rec-holdings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); }
.rec-holdings .v { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.rec-quote { border-left: 2px solid var(--accent); padding-left: var(--s3); }
.rec-quote .v { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.rec-quote .muted, .rec-holdings .lbl { font-size: 10.5px; }

/* The same two figures on the landing screen, so a card never shows a recommendation without
   the holdings and the quote it was computed from. */
.cc-context { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 11px; color: var(--muted); }
.cc-context b { color: var(--text); font-weight: 500; }
.rec-actions { display: flex; gap: var(--s2); }
.rec-actions .btn-primary { flex: 1; }
.rec-decided { background: var(--fresh-bg); border: 1px solid var(--fresh-line); padding: var(--s3); font-size: 11.5px; }
.rec-decided .lbl { color: var(--fresh); }

/* One generic row renderer keeps every step consistent: what it is and how fresh,
   what it says and where it came from, and the number it contributes. */
.pane-step { flex: 1; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.pane-step > h2 { font-size: 20px; line-height: 1.1; }
.pane-step .blurb { margin: 0; font-size: 12px; color: var(--muted); max-width: 68ch; text-wrap: pretty; }
.srow { display: flex; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.srow .k { width: 110px; flex: none; }
.srow .v { flex: 1; min-width: 0; }
.srow .v .val { font-size: 12.5px; line-height: 1.45; }
.srow .v .prov { font-size: 11px; color: var(--faint); line-height: 1.4; }
/* PD-023 · the CONSEQUENCE of a row's state, computed by the engine and never authored. It sits
   between the fact and the provenance, and it is deliberately louder than the provenance and
   quieter than the fact: what a stale figure COSTS is more urgent than where it came from, and
   less important than what it is. `--stale` because an effect only ever appears where something
   is not current. */
.srow .v .effect { font-size: 11px; color: var(--stale); line-height: 1.4; margin-top: 1px; }
.srow .n { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; text-align: right; flex: none; }
.srow .fresh-note { font-size: 10.5px; }
@media (max-width: 620px) { .srow { flex-wrap: wrap; } .srow .k { width: 100%; } }
.step-foot { background: var(--accent-bg); border: 1px solid var(--accent-line); padding: var(--s4); font-size: 12px; line-height: 1.5; }
.step-empty { font-size: 12px; color: var(--muted); padding: var(--s4) 0; }

/* Scenario: never a quiet mode. The banner sits inside the pane it applies to. */
.scenario-banner { background: var(--warn); color: #fff; padding: var(--s2) var(--s4); margin: calc(var(--s5) * -1) calc(var(--s5) * -1) 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.pane-rec.is-scenario { background: var(--warn-bg); border-color: var(--warn-line); }
.scenario-note { font-size: 11px; color: var(--warn); text-align: center; }
[data-assumption] { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3); align-items: baseline; font-size: 12px; }
[data-assumption] .input { grid-column: 1 / -1; }
[data-assumption] .was { font-size: 11px; color: var(--warn); font-variant-numeric: tabular-nums; }
[data-assumption].is-overridden > label::before { content: '▸ '; color: var(--warn); font-weight: 600; }

/* ── S-3 decisions ──────────────────────────────────────────────────────── */
.dec-card { padding: var(--s5); display: flex; gap: var(--s6); align-items: flex-start; flex-wrap: wrap; }
.dec-card .when { width: 130px; flex: none; }
.dec-card .when .product { font-family: var(--font-h); font-size: 17px; }
.dec-capture { flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.dec-capture .v { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.dec-card .note { width: 210px; flex: none; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* ── S-5 data ───────────────────────────────────────────────────────────── */
.src-grid { display: grid; grid-template-columns: 1.4fr .8fr .9fr .8fr 1.4fr; gap: var(--s3); margin-top: var(--s3); font-size: 12px; align-items: baseline; }
.src-grid .name { font-family: var(--font-h); font-size: 13px; }
.src-grid .note { color: var(--faint); font-size: 11px; }
@media (max-width: 900px) { .src-grid { grid-template-columns: 1fr 1fr; } }

/* ── S-7 market map ─────────────────────────────────────────────────────── */
.map-filters { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: end; }
.map-filters label { display: flex; flex-direction: column; gap: 2px; }
.map-filters .input { width: auto; min-width: 170px; }
.map-plot svg { display: block; width: 100%; height: auto; background: var(--accent-bg); border: 1px solid var(--line); }
.map-plot .graticule line { stroke: var(--line-soft); stroke-width: 1; }
.map-plot .equator { stroke: rgba(30, 30, 28, .3); stroke-width: 1; stroke-dasharray: 4 4; }
.map-dot circle { fill: rgba(63, 82, 39, .42); stroke: var(--accent-dark); stroke-width: 1.2; }
.map-dot:hover circle { fill: rgba(63, 82, 39, .8); }
.map-dot text { font-size: 11px; paint-order: stroke; stroke: var(--accent-bg); stroke-width: 3px; stroke-linejoin: round; fill: var(--text); font-variant-numeric: tabular-nums; font-family: var(--font-h); }
.map-cap { font-size: 11px; color: var(--faint); margin-top: var(--s2); line-height: 1.45; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s5); }
.map-country { padding: var(--s4); }
.map-country[hidden] { display: none; }
.map-sig { border-top: 1px solid var(--line-soft); padding-top: var(--s2); margin-top: var(--s2); }

/* ── overlay layer: drawers float above, never in the row ────────────────── */
#drawer-backdrop { position: fixed; inset: 0; background: rgba(30, 30, 28, .28); z-index: 40; }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; z-index: 50; width: 392px; max-width: 92vw; background: var(--bg); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); box-shadow: var(--shadow); overflow-y: auto; }
#ask-drawer { width: 428px; }
.drawer[hidden], #drawer-backdrop[hidden] { display: none; }
.drawer-item { border-top: 1px solid rgba(30, 30, 28, .14); padding: var(--s3) 0; }
.drawer-item .head { font-family: var(--font-h); font-size: 15px; margin-top: var(--s1); }
.drawer-item .body { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.drawer-foot { margin-top: auto; font-size: 11px; color: var(--faint); line-height: 1.45; }
.ask-q { text-align: left; border: 1px solid rgba(30, 30, 28, .14); font-size: 12px; width: 100%; background: transparent; padding: var(--s3); }
.ask-q:hover { background: var(--tile); }
.ask-answer { border: 1px solid var(--accent-line); background: var(--accent-bg); padding: var(--s4); }

/* ── modals ─────────────────────────────────────────────────────────────── */
dialog { border: 0; padding: 0; background: transparent; }
dialog::backdrop { background: rgba(30, 30, 28, .28); }
.dialog { width: min(640px, 94vw); background: var(--bg); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); box-shadow: var(--shadow); border: 1px solid var(--line); position: relative; }
.dialog-title { font-family: var(--font-h); font-size: 22px; }
.dialog-actions { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }
.dialog-actions .btn-primary { margin-left: auto; }
.capture-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.capture-grid > div { background: var(--surface); padding: var(--s2) var(--s3); }
.capture-grid .v { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
@media (max-width: 560px) { .capture-grid, .dec-capture { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reasons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.reasons label { font-size: 11.5px; border: 1px solid var(--line); background: var(--surface); padding: var(--s2) var(--s4); border-radius: 2px; cursor: pointer; }
.reasons label:has(input:checked) { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.reasons input { margin-right: 4px; }
.field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }

/* ── tables, for the surfaces the mockup renders as plain records ───────── */
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th { text-align: left; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 400; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line); }
.table td { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table tr.expired td { color: var(--faint); }

/* ── compatibility: surfaces not yet redrawn to the mockup ──────────────── */
.card { border: 1px solid var(--line); background: var(--surface); padding: var(--s5); }
.card-title { font-family: var(--font-h); font-size: 18px; }
.card-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.card-body { margin: var(--s1) 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.card-meta { font-size: 10.5px; color: var(--faint); font-style: normal; }
.blueprint { position: relative; }
.corner { position: absolute; width: 5px; height: 5px; border: 1px solid var(--accent); }
.corner.tl { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.corner.tr { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.corner.bl { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.corner.br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.tag-neutral { background: var(--surface); }
.tag-outline { border-color: var(--accent); color: var(--accent-dark); }
.elev-lg { box-shadow: var(--shadow); }
.hr { border: 0; border-top: 1px solid var(--line); margin: var(--s3) 0; }
.seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn-secondary { }
.btn-block { width: 100%; margin-top: var(--s2); }
dl { margin: var(--s2) 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--s3); font-size: 11.5px; }
dt { color: var(--faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
dd { margin: 0; }
pre { font-size: 11px; background: var(--surface); padding: var(--s3); overflow-x: auto; }
details summary { cursor: pointer; font-size: 12px; color: var(--accent); }

/* Real country outlines (Natural Earth 1:50m) sit under the graticule and the dots: context,
   never the subject — except a country carrying a signal, which is shaded so the map answers
   "where" before you read a single dot. */
.map-plot .land path { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: rgba(30, 30, 28, .28); stroke-width: .5; vector-effect: non-scaling-stroke; }
.map-plot .land path.has-signals { fill: color-mix(in srgb, var(--accent) 34%, transparent); stroke: var(--accent-dark); stroke-width: .9; }

/* A step's rows can open a named group: PD-036 puts three different things in one place, and
   without a heading it reads as one undifferentiated list of column names. */
.srow-group { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: var(--s5) 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.srow-group:first-child { margin-top: 0; }
.srow-group h3 { font-family: var(--font-h); font-size: 16px; }
.srow-group span { font-size: 11.5px; color: var(--faint); }


/* PD-053. A product skipped by the engine is never skipped by the screen — this strip names it,
   says what it is missing, and links to the page that ends the condition. */
.disclosure { border: 1px solid var(--warn); border-left-width: 3px; padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); font-size: 12px; line-height: 1.5; margin-bottom: var(--s4); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.disclosure a { color: var(--accent-dark); white-space: nowrap; }
/* F-34 · stated once at the top when NOTHING is assessed, instead of a per-product reassurance
   that every other product is fine — which is false exactly when it is repeated most. */
.disclosure-lead { padding-bottom: var(--s3); margin-bottom: var(--s2); border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); line-height: 1.55; }

/* ── PD-054 · the regional briefing band on S-1 ───────────────────────────────
   Sits above the decision cards as context, never instead of them: the cards keep their size
   and position, and the band is bounded so it can never push them below the fold on a laptop.
   There is no chart here — the S-1 no-charts constraint is unchanged. */
.briefing { border: 1px solid var(--line); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s5); }
.briefing-head { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
.briefing-head form { margin-left: auto; }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: baseline; gap: var(--s2); border: 1px solid var(--line); padding: 3px var(--s3); font-size: 11.5px; color: var(--text); text-decoration: none; }
.chip .num { color: var(--faint); font-variant-numeric: tabular-nums; font-size: 10.5px; }
.chip:hover { border-color: var(--accent); }
.chip.is-on { border-color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.chip.is-on .num { color: var(--accent-dark); }

.briefing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: var(--s4); align-items: start; }
.news-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.news-card { border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.news-img { width: 100%; height: 104px; object-fit: cover; display: block; background: var(--accent-bg); }
.news-img-none { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.news-img-none span { font-family: var(--font-h); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.news-body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.news-sum { margin: 0; font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 11px; align-items: baseline; }
.news-foot a { color: var(--accent); }

.risk-panel { border-left: 2px solid var(--accent); padding-left: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.risk-row { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s2); align-items: baseline; }
.risk-cat { font-family: var(--font-h); font-size: 13px; }
.risk-row .num { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--accent-dark); }
.risk-row .faint { grid-column: 1 / -1; font-size: 10.5px; }

@media (max-width: 1100px) { .briefing-grid { grid-template-columns: 1fr; } }
.news-link { color: inherit; text-decoration: none; }
.news-link:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* The country list on S-7 is ranked rows, not a grid: a grid gives a country with one signal the
   same weight as one with twelve. The bar is proportional to the signal COUNT — it is not a score,
   and the page still computes nothing of its own (PD-038 §4). */
.map-grid { display: flex; flex-direction: column; gap: var(--s2); }
.map-country { padding: var(--s3) var(--s4); }
.mc-head { display: grid; grid-template-columns: 2.2rem minmax(120px, 1fr) 2.5rem auto minmax(60px, 90px) minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.mc-rank { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.mc-name { font-family: var(--font-h); font-size: 15px; }
.mc-count { font-family: var(--font-h); font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; color: var(--accent-dark); }
.mc-unit { font-size: 11px; color: var(--faint); }
.mc-bar { display: block; height: 6px; background: var(--line-soft); align-self: center; }
.mc-bar i { display: block; height: 100%; background: var(--accent); }
.mc-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-signals summary { font-size: 11.5px; color: var(--accent); margin-top: var(--s2); }
.mc-signals .map-sig { margin-top: var(--s3); }
@media (max-width: 900px) { .mc-head { grid-template-columns: 2rem 1fr auto; } .mc-bar, .mc-meta { display: none; } }

/* Sample data is disclosed where it is edited, and clearing it is a separate act from saving. */
.sample-notice { margin-top: var(--s3); border-top: 2px solid var(--warn); }

/* ── Text a model wrote ───────────────────────────────────────────────────────
   About 5% of events are AI-extracted and the rest are read straight from a published dataset.
   Both render as ordinary sentences, so without this the reader cannot tell a model's summary
   from a figure lifted out of a spreadsheet. Disclosure, not decoration. */
.ai-written { color: var(--ai); }
.ai-mark { margin-left: .35em; font-family: var(--font-h); font-size: 9px; letter-spacing: .09em; vertical-align: .35em;
  color: var(--ai); border: 1px solid var(--ai); border-radius: 2px; padding: 0 3px; text-decoration: none; cursor: help; }
.ai-legend { display: inline-flex; align-items: baseline; gap: var(--s2); font-size: 11px; color: var(--muted); }
.ai-legend b { color: var(--ai); font-weight: 500; }

/* ── PD-056 · the watchlist band ──────────────────────────────────────────────
   Set apart from the briefing beside it on purpose. Everything else on the command centre is
   derived from evidence; this is the one thing that is not, and it should not be able to pass
   for a news card. Hence the ruled left edge and no imagery of any kind. */
.watch{border:1px solid var(--line);border-left:3px solid var(--accent-dark);background:var(--surface);
  padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4)}
.watch-head{display:flex;align-items:flex-end;gap:var(--s3)}
.watch-head>button{margin-left:auto}
.watch-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--muted);max-width:78ch}
.watch-row{display:grid;grid-template-columns:minmax(150px,180px) 1fr;gap:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.watch-when{display:flex;flex-direction:column;gap:4px;align-items:flex-start;font-variant-numeric:tabular-nums}
.watch-statement{margin:0 0 4px;font-size:13.5px;line-height:1.45;font-weight:500}
.watch-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);font-size:11.5px;line-height:1.4}
.watch-outcome{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2);font-size:11.5px}
.watch-resolve{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);align-items:center}
.watch-resolve .input{flex:1;min-width:180px;font-size:12px}
.watch-sample{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);font-size:11.5px;
  border-top:1px solid var(--line);padding-top:var(--s3)}
.watch-sample>button{margin-left:auto}
.watch-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s2)}
.watch-check{display:flex;align-items:center;gap:6px;font-size:12px}
.watch-row[data-status="RESOLVED"]{opacity:.72}
@media (max-width:820px){.watch-row{grid-template-columns:1fr}}

/* ── PD-057 · S-8 NPK planning ────────────────────────────────────────────────
   No new palette, no new type, no new density. A calculated figure is marked once, quietly, by a
   dotted underline rather than by a badge on every cell — the distinction has to stay readable
   without turning the table into a legend. */
.calc { border-bottom: 1px dotted var(--faint); }
.absent { color: var(--faint); font-style: italic; }
.numc { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-scope, .fx-banner, .fx-incomplete { margin: 0 0 var(--s3); font-size: 12px; line-height: 1.5;
  color: var(--muted); max-width: 92ch; }
.fx-banner, .fx-incomplete { border-left: 3px solid var(--accent-dark); background: var(--surface);
  padding: var(--s3) var(--s4); }
.fx-tabs { display: flex; gap: var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.fx-tabs a { padding: var(--s2) 0 var(--s3); font-size: 12px; text-decoration: none;
  border-bottom: 2px solid transparent; color: var(--muted); }
.fx-tabs a[aria-current='page'] { color: var(--text); border-bottom-color: var(--accent); }
.fx-list { display: grid; gap: var(--s3); }
.fx { border: 1px solid var(--line); background: var(--surface); padding: var(--s4) var(--s5); }
.fx-flag { border-left: 3px solid var(--accent-dark); }
.fx-head { display: flex; align-items: flex-start; gap: var(--s3); }
.fx-head > a { margin-left: auto; flex: none; }
.fx-name { font-family: var(--font-h); font-size: 17px; }
.fx-grade { font-size: 12.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.fx-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2) var(--s4);
  margin-top: var(--s3); align-items: start; }
.fx-facts dt { margin-bottom: 2px; }
.fx-warn { font-size: 11.5px; color: var(--muted); margin: var(--s3) 0 0; }
.fx-open { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); }
.plan-edit { display: flex; gap: var(--s2); align-items: center; }
.plan-edit .input { width: 8ch; font-size: 12px; padding: 2px var(--s2); }
.table tr.balance td { color: var(--faint); border-bottom: none; }
.table tr.ing-blocked td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.table .sub { margin-top: var(--s2); width: auto; }
.table .sub th, .table .sub td { padding-right: var(--s4); }
@media (max-width: 820px) { .fx-facts { grid-template-columns: 1fr 1fr; } }

/* Edited values carry a solid accent rule against the calculated value's dotted one — two marks,
   not four badges. */
.edited { border-bottom: 1.5px solid var(--accent); }
input.edited { border-color: var(--accent); }
.plan-edit .input.kg, .table .input.kg { width: 7ch; text-align: right; }
.fx-out { opacity: .55; }
.fx-out .fx-name { text-decoration: line-through; }
.fx-market { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s3); }

/* PD-058 · money on the plan. */
.fx-spend { display: flex; gap: var(--s5); align-items: flex-start; border: 1px solid var(--line);
  border-left: 3px solid var(--accent-dark); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.fx-spend-figure { font-family: var(--font-h); font-size: 22px; font-variant-numeric: tabular-nums; }
.fx-spend .faint { font-size: 11.5px; line-height: 1.5; max-width: 70ch; }
.fx-why { margin: var(--s1) 0 0; padding-left: 1.1em; }
.fx-bench { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s4); }

/* PD-059 · the plan is kept. */
.plan-edit .input.month { width: 13ch; }
.fx-pool { border: 1px solid var(--line); border-left: 3px solid var(--accent-dark);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.fx-pool-grid { grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); }
.fx-pool-grid dd { font-variant-numeric: tabular-nums; }
.fx-months { margin-top: var(--s4); }
.table tr.fx-unscheduled td { background: color-mix(in srgb, var(--muted) 6%, transparent); }
.fx-risks { margin: var(--s2) 0 0; padding-left: 1.1em; font-size: 12px; line-height: 1.6; }
.fx-risks li { margin-bottom: var(--s1); }

/* ── S-8 redesign · material identity, cards, ranked bars, timeline ──────────
   Reuses the app's own hue families (accent/ai/warn/fresh) for material identity rather than
   inventing a new palette, so the feature still reads as native NutrientEdge. */
:root{
  --m-kno3:var(--accent); --m-map:#9a6a3f; --m-mkp:#7d6a9e;
  --m-sop:#4f8a86; --m-urea:#5f8a55; --m-micro:#93939a;
}
.npk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.npk-tabs a{padding:var(--s3) var(--s5);font-size:12.5px;font-family:var(--font-h);color:var(--muted);
  border:1px solid transparent;border-bottom:2px solid transparent}
.npk-tabs a:hover{background:var(--tile);color:var(--text);text-decoration:none}
.npk-tabs a[aria-current='page']{color:var(--accent-dark);border-bottom-color:var(--accent);background:var(--surface)}

.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s5)}
.fx-card{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.fx-card.fx-flag{border-left:3px solid var(--warn-line)}
.fx-card.fx-out{opacity:.6}
.fx-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.fx-name{font-family:var(--font-h);font-size:16px;line-height:1.15}
.fx-grade{font-family:var(--font-h);font-size:26px;line-height:1;font-variant-numeric:tabular-nums;margin-top:2px}
.fx-comp-bar{display:flex;height:9px;border-radius:1px;overflow:hidden;background:var(--line-soft)}
.fx-comp-bar span{display:block;height:100%}
.fx-comp-legend{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:10px;color:var(--faint);margin-top:5px}
.fx-comp-legend i{display:inline-block;width:7px;height:7px;border-radius:1px;margin-right:3px;vertical-align:1px}
.fx-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4);font-size:11.5px}
.fx-facts dt{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:1px}
.fx-facts dd{margin:0;font-variant-numeric:tabular-nums}
.fx-facts dd.span2{grid-column:1/-1}
.fx-programme-line{border-top:1px dashed var(--line);padding-top:var(--s3);font-size:11.5px}
/* PD-070 §2 · the name is an input and reads as the heading it replaced. It shows its edges on
   hover and focus so it is discoverable, and stays flat otherwise so a card does not read as a
   form. `width:100%` on a min-width:0 parent is what keeps a long name from widening the card. */
.fx-name-input{font-family:var(--font-h);font-size:16px;line-height:1.15;color:var(--text);
  background:transparent;border:1px solid transparent;border-radius:2px;padding:1px 3px;
  margin:-1px -3px;width:100%;max-width:26ch}
.fx-name-input:hover{border-color:var(--line-soft)}
.fx-name-input:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.fx-name-input.edited{border-bottom-color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:3px}
/* PD-070 §3 · the timing half of the plan-versus-programme comparison. Same treatment as the
   tonnage half, because they are two readings of one question and neither outranks the other. */
.fx-timing{padding-top:var(--s2);font-size:11.5px}
.fx-timing .gap{color:var(--warn);font-weight:500}
.fx-programme-line .gap{color:var(--warn);font-weight:500}
.fx-programme-line .ok{color:var(--fresh)}
.fx-cost-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line-soft);padding-top:var(--s3)}
.fx-cost-row .v{font-family:var(--font-h);font-size:15px}

/* ── Ingredients: ranked bars, same vocabulary as the Market Map's mc-bar ── */
.ing-list{display:flex;flex-direction:column}
.ing-row2{display:grid;grid-template-columns:1.6rem minmax(160px,1.4fr) 6rem auto 4rem 5rem 5rem;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line-soft)}
.ing-row2:first-child{border-top:none}
.ing-rank2{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.ing-name2{font-family:var(--font-h);font-size:14.5px}
.ing-name2 .code2{font-family:var(--font);font-size:10px;color:var(--faint);display:block;font-weight:400;letter-spacing:0;text-transform:none;margin-top:1px}
.ing-qty2{font-family:var(--font-h);font-size:15px;text-align:right;font-variant-numeric:tabular-nums;color:var(--accent-dark)}
.ing-bar2{height:7px;background:var(--line-soft);position:relative}
.ing-bar2 i{display:block;height:100%}
.ing-bar2.is-blocked2{background:repeating-linear-gradient(135deg,var(--line-soft),var(--line-soft) 4px,var(--line) 4px,var(--line) 8px)}
.ing-share2,.ing-stock2,.ing-net2{font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.ing-detail{grid-column:1/-1;margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--line);font-size:11.5px}

/* ── Market intelligence: material cards, not a 9-column table ──────────── */
.mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
.mkt-card2{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.mkt-card2 .name2{font-family:var(--font-h);font-size:14px}
.mkt-card2 .from2{font-size:10.5px;color:var(--faint)}
.mkt-row2{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px}
.mkt-row2 dt{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.mkt-row2 dd{margin:0;font-variant-numeric:tabular-nums;text-align:right}
.mkt-basis2{font-size:10px;color:var(--faint)}
.mkt-none2{color:var(--faint);font-size:11.5px;text-align:center;padding:var(--s5) 0}

/* ── Procurement plan: timeline strip ─────────────────────────────────────── */
.tl-wrap2{padding:var(--s5)}
.tl-months2{display:grid;grid-template-columns:150px repeat(var(--tl-n,7),1fr);font-size:9.5px;color:var(--faint);
  letter-spacing:.04em;text-transform:uppercase;padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.tl-months2 .now2{color:var(--accent-dark);font-weight:600}
.tl-row2{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:0;padding:var(--s2) 0;border-bottom:1px solid var(--line-soft)}
.tl-mat2{font-size:11.5px;font-family:var(--font-h)}
.tl-track2{position:relative;height:16px;display:grid;grid-template-columns:repeat(var(--tl-n,7),1fr)}
.tl-track2 .cell2{border-left:1px solid var(--line-soft)}
.tl-span2{position:absolute;top:3px;height:10px;background:var(--accent);border-radius:1px}
.tl-span2.is-past2{background:var(--warn)}
.tl-span2 .cap2{position:absolute;top:-13px;font-size:9px;white-space:nowrap;color:var(--muted)}
.tl-span2.is-past2 .cap2{color:var(--warn)}
.tl-none2{font-size:10.5px;color:var(--faint)}
.tl-now-line2{position:absolute;top:0;bottom:0;width:1px;background:var(--text);z-index:2}
.tl-now-line2::after{content:'';position:absolute;top:-3px;left:-2px;width:5px;height:5px;background:var(--text);border-radius:50%}

.pool-bar2{height:20px;background:var(--line-soft);position:relative;border-radius:2px}
.pool-bar2 .seg2{position:absolute;top:0;bottom:0}
.pool-bar2 .seg2.portfolio2{left:0;background:var(--accent-line)}
.pool-bar2 .seg2.plan2{background:var(--warn-line)}
.pool-bar2 .cap-line2{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text)}
.pool-legend2{display:flex;gap:var(--s5);font-size:10.5px;margin-top:var(--s2);flex-wrap:wrap}
.pool-legend2 i{display:inline-block;width:8px;height:8px;margin-right:4px;vertical-align:-1px;border-radius:1px}

/* O-07 · the sign-in screen. Its own small page, deliberately without the app chrome. */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); }
.login-card { width: 100%; max-width: 380px; padding: var(--s6); }
.login-problem { margin: var(--s4) 0 0; padding: var(--s3); font-size: 12px; line-height: 1.5;
  border: 1px solid var(--warn); border-left-width: 3px; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, transparent); }
.login-card .field { display: flex; flex-direction: column; gap: var(--s1); }

/* The demonstration bar. Above everything, on every page, and not dismissible — the risk it
   carries is somebody quoting one of these figures to a supplier. */
.demo-bar { padding: var(--s3) var(--s5); font-size: 12px; line-height: 1.5; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-bottom: 1px solid var(--warn-line); }
.demo-bar b { font-weight: 600; }
/* B-89 · the line that carries what every row below shares, so no row has to repeat it. It reads
   as provenance, not as a heading: same colour and size as the .prov it replaced. */
.step-common { margin: var(--s2) 0 0; font-size: 11.5px; color: var(--faint); max-width: 68ch; }

/* B-90 · the command centre card is for deciding. The urgency sits under the quantity because it
   qualifies it; everything the card no longer carries is on the product's own page. */
.cc-urgency { font-size: 11px; color: var(--muted); margin-top: calc(var(--s1) * -1); }
/* Products needing no decision fold away. They are still in the page, so opening the row shows the
   whole card with the inputs its recommendation was computed from (PD-052 §3). */
.cc-quiet { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: var(--s4); }
.cc-quiet > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: var(--s2) 0; }
.cc-quiet > summary:hover { color: var(--text); }
.cc-quiet[open] > summary { margin-bottom: var(--s4); }
.demo-bar-note { color: var(--faint); }

/* The workspace switcher. Shown only where there is more than one to choose from. */
.ws-one { font-size: 12px; }
.ws-switch { display: flex; align-items: center; gap: var(--s2); padding: 0;
  background: transparent; font-size: 12px; }
.ws-switch .input { width: auto; min-width: 180px; padding: 2px var(--s2); font-size: 12px; }
.ws-switch .lbl { color: var(--faint); }

/* ── PD-076 · Paper ─────────────────────────────────────────────────────────
   Cards are paper: a cream sheet, a warm 1px edge and a hard unblurred offset shadow, so they
   read as stacked. The blueprint corner marks belonged to the wireframe look and go. */
.bp { background: var(--surface); border-color: var(--line); box-shadow: var(--paper-shadow); border-radius: 2px; }
.bp > i { display: none; }
h1, h2, h3, .h { font-weight: 500; letter-spacing: 0; }
.page-title h1, .ws-head h1 { font-size: 32px; font-weight: 400; line-height: 1.1; }
.lbl, .nav-goal { letter-spacing: .08em; color: var(--faint); }
.kick { color: var(--faint); font-weight: 600; }

.btn { border-radius: 10px; background: var(--surface); border-color: var(--line); padding: var(--s3) var(--s5); font-size: 13px; }
.btn:hover { background: var(--tile); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #FFFEF6; font-weight: 600; }
.btn-primary:hover { background: var(--accent-dark); color: #FFFEF6; }
.btn-ghost { background: transparent; border-color: transparent; }
.tag { border-radius: 999px; padding: 2px 9px; border-color: var(--line); background: var(--tile); letter-spacing: .04em; }
.tag-accent { background: var(--accent); border-color: var(--accent); color: #FFFEF6; }
.tag-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.input { background: var(--surface); border-color: var(--line); border-radius: 8px; }

/* The rail is a sheet of its own, floating on the ground like the cards. */
.app-body { gap: 0; }
.app-rail { background: var(--surface); margin: 16px 0 16px 16px; border: 1px solid var(--line);
  box-shadow: var(--paper-shadow); border-radius: 2px; }
.app-rail .brand { align-items: center; gap: 9px; font-family: var(--font); font-weight: 600; letter-spacing: 0;
  font-size: 15px; padding: 2px var(--s2) var(--s2); }
.app-rail .brand img, .brand img { flex: none; display: block; }
.app-rail .brand span:last-child { color: inherit; }
.brand .wordmark { white-space: nowrap; }
.brand .wordmark span { color: #6B7A33; }
.app-nav a { border-left: 0; border: 1px solid transparent; border-radius: 8px; font-size: 13px; }
.app-nav a:hover { background: var(--tile); }
.app-nav a[aria-current='page'] { background: var(--accent-bg); border-color: var(--line); color: var(--accent); font-weight: 600; }
.nav-step { background: var(--surface); }
.app-head { background: var(--bg); border-bottom-color: transparent; }
.meter { background: var(--track); height: 7px; }
.meter .lead { background: var(--accent); width: 2px; }
.chain-nav a { border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: var(--s2) var(--s5); }
.chain-nav a:hover { background: var(--tile); }
.chain-nav a[aria-current='step'] { background: var(--accent-bg); border-color: var(--line); color: var(--accent); }
.rec-warn { border-style: solid; border-radius: 10px; }
.baseline { border-radius: 10px; }
@media (max-width: 900px) { .app-rail { margin: 8px; } }
/* F-48 · /formulation's header figures sat in `.counters`, the command centre's class, which never
   separates a figure from its label — so they rendered "6formulas". Each figure now sits on its own
   line above its label. */
.counters > div > b { display: block; font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.counters > div > span { display: block; font-size: 11px; color: var(--muted); max-width: 18ch; margin-left: auto; }
/* F-48 · the computed grade's dotted "calculated" rule hung below a 1.0 line box and struck through
   the caption under it. A taller line box keeps the rule inside its own line. */
.fx-grade { font-family: var(--font-num); font-weight: 700; line-height: 1.3; }
/* The recommendation pane was taller than the screen and did not scroll, so Accept / Modify /
   Reject — the reason the pane exists — sat below the fold, cut off. The pane now scrolls and the
   decision bar is pinned to its bottom edge: whatever else the pane holds, the decision is on screen. */
.pane-rec { overflow-y: auto; min-height: 0; }
.pane-rec > .rec-foot { position: sticky; bottom: calc(var(--s5) * -1); margin: auto calc(var(--s5) * -1) calc(var(--s5) * -1);
  padding: var(--s4) var(--s5); background: var(--surface); border-top: 1px solid var(--line); z-index: 1; }
.pane-rec.is-scenario > .rec-foot { background: var(--warn-bg); }
/* ── PD-076 · the command centre in Paper ───────────────────────────────────
   Same content, same order (PD-068: portfolio → alerts → products). The title and counters share a
   header sheet; the products become rows of one "Needs a decision" sheet. Each row still carries on
   hand, in transit and the best quote (PD-052 §3), its reason, and any reliability warning. */
.cc-head { display: flex; align-items: flex-end; gap: var(--s6); padding: var(--s5) var(--s6); }
.cc-list { padding: var(--s5) var(--s6); }
.cc-list-title { font-size: 22px; font-weight: 400; margin-bottom: var(--s3); }
.cc-list .cc-cards { display: flex; flex-direction: column; gap: 0; }
.cc-list .cc-card { display: grid; gap: var(--s1) var(--s6); align-items: start;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.1fr) minmax(0, 2.2fr) auto;
  grid-template-areas: "id act ctx btn" "id urg reason btn" "id warn warn btn";
  box-shadow: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: var(--s5) 0; }
.cc-list .cc-card > .cc-id { grid-area: id; align-items: flex-start; flex-wrap: wrap; }
.cc-list .cc-card > .cc-id .tag { margin-left: 0 !important; margin-top: var(--s2); }
.cc-list .cc-card > .cc-act { grid-area: act; }
.cc-list .cc-card > .cc-act .action:last-child { margin-left: 0 !important; font-family: var(--font-num); font-weight: 700; font-size: 15px; }
.cc-list .cc-card > .cc-urgency { grid-area: urg; font-size: 12px; color: var(--muted); }
.cc-list .cc-card > .cc-context { grid-area: ctx; }
.cc-list .cc-card > .reason { grid-area: reason; }
.cc-list .cc-card > .warnstrip { grid-area: warn; border-top: 0; padding-top: 0; }
.cc-list .cc-card > .btn { grid-area: btn; align-self: center; margin-top: 0; white-space: nowrap; }
.cc-list .cc-card .name { font-size: 19px; }
.cc-list .cc-card .action { font-size: 15px; }
.cc-list .cc-quiet { border-top: 1px solid var(--line); padding-top: var(--s4); }
.cc-list .cc-quiet .cc-cards { margin-top: var(--s3); }
@media (max-width: 1100px) {
  .cc-list .cc-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "act" "urg" "ctx" "reason" "warn" "btn"; }
  .cc-head { flex-direction: column; align-items: flex-start; }
}
.cc-list .cc-card > .cc-act { flex-direction: column; align-items: flex-start; gap: 2px !important; }
.cc-list .cc-card > .cc-act .action { white-space: nowrap; }
.cc-list .cc-card > .cc-act .action:first-child { font-size: 17px; }

/* PD-077 · a proportional text face sets one size up from the mono it replaces — what the owner
   approved on the rendered screen was 14px. */
body { font-size: 14px; }
/* F-49 · phone width (≤ 680px). Found checking PD-076 at narrow widths; present before it too
   (14 elements past the right edge of /command on the pre-redesign build, 6 after). The header's
   workspace picker ran off the screen, counters squeezed their title to a word per line and were
   cut off, and the three-column portfolio overprinted its own figures. */
@media (max-width: 680px) {
  .app-head .top { flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4); }
  .app-head .top > .row { margin-left: 0 !important; flex-wrap: wrap; max-width: 100%; }
  .app-head select { max-width: 100%; }
  .page-scroll { padding: var(--s4); }
  .cc-head, .page-scroll > .row:first-child { flex-direction: column; align-items: flex-start !important; gap: var(--s4); }
  .counters { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .counters div { text-align: left; }
  .counters > div > span, .counters .lbl { margin-left: 0; max-width: none; }
  .portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .page-title h1, .ws-head h1 { font-size: 26px; }
}
/* PD-079 / PD-082 · a workspace's own materials, and secondary nutrients beside the grade. */
.fx-secondary { font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--muted); }
.fx-own { border-collapse: collapse; margin-bottom: var(--s4); font-size: 13px; }
.fx-own th { text-align: right; font-weight: 500; color: var(--faint); font-size: 11px; letter-spacing: .06em; padding: var(--s1) var(--s4); border-bottom: 1px solid var(--line); }
.fx-own th:first-child, .fx-own td:first-child { text-align: left; padding-left: 0; }
.fx-own td { text-align: right; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line-soft); }
.fx-material-form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.fx-mat-name { flex: 1 1 240px; }
.fx-mat-pct { width: 84px; }
.fx-mat-pct .lbl, .fx-own th { text-transform: none; }
/* PD-083 · new formula, add and remove recipe lines. */
.fx-new { padding: var(--s4) var(--s5); margin-bottom: var(--s5); }
.fx-new summary { cursor: pointer; }
.fx-new-form { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s4); max-width: 760px; }
.fx-newlines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); }
.fx-newline { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: var(--s2); }
.fx-addline { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.fx-rm { padding: var(--s1) var(--s3); font-size: 12px; color: var(--urgent); }
@media (max-width: 680px) { .fx-newlines { grid-template-columns: minmax(0, 1fr); } }

/* PD-077 set text in IBM Plex Sans at 14px, which is wider per character than the mono these boxes
   were sized for: '531' showed as '53', 'not entered' as 'not e', the month as dashes. Sized for
   the font actually in use now. */
.plan-edit .input { width: 13ch; font-size: 13px; }
.plan-edit .input.kg, .table .input.kg { width: 9ch; }
.plan-edit .input.month { width: 16ch; }
/* PD-081 · four cost figures on the formula card: materials, conversion, total, spend. */
.fx-cost-3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.fx-conv td:nth-child(2), .fx-conv th:nth-child(2) { text-align: right; }
.fx-conv tfoot td { border-top: 1px solid var(--line); border-bottom: 0; padding-top: var(--s3); }
@media (max-width: 680px) { .fx-cost-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* PD-084 · drift and label tolerance on the formula card. */
.fx-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: 12px; }
.fx-rule { flex-basis: 100%; font-size: 11px; }
.fx-market-pick { display: inline-flex; gap: var(--s1); align-items: center; margin-left: auto; }
.fx-market-pick .input { font-size: 12px; padding: 2px var(--s2); width: auto; }
.fx-default-market { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.tag-urgent { background: #F8E3DC; border-color: #E2B4A6; color: var(--urgent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* B-133 · chokepoint traffic around the map's edge */
.map-plot .cp rect { fill: var(--surface); stroke: var(--accent-dark); stroke-width: .8; }
.map-plot .cp-name { font: 600 7.2px var(--font-mono, monospace); letter-spacing: .06em; fill: var(--muted); }
.map-plot .cp-val { font: 600 15px var(--font-sans, sans-serif); fill: var(--text); font-variant-numeric: tabular-nums; }
.map-plot .cp-of { font: 7.6px var(--font-sans, sans-serif); fill: var(--muted); }
.map-plot .cp-lead { stroke: var(--accent-dark); stroke-width: .7; opacity: .75; }
.map-plot .cp-pt, .map-plot #cp-arrow path { fill: var(--accent-dark); }
.map-plot .cp:hover rect { stroke-width: 1.6; } .map-plot .cp:hover .cp-lead { opacity: 1; stroke-width: 1.2; }
.cp-legend { font-size: 11.5px; color: var(--muted); margin: var(--s2) 0 var(--s4); max-width: 110ch; }
/* PD-086 · the NPK answer strip */
.npk-tiles { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s3); margin: var(--s4) 0; }
.npk-tile { border: 1px solid var(--line); background: var(--surface); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; }
.npk-tile b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.npk-tile b small { font-size: 11px; font-weight: 400; color: var(--muted); }
.npk-tile .note { font-size: 11px; color: var(--muted); }
.npk-tile.is-warn { border-color: var(--warn); } .npk-tile.is-warn b { color: var(--warn); }
.npk-blockers { padding: var(--s4) var(--s5); margin-bottom: var(--s4); border-left: 3px solid var(--warn); }
.npk-blockers ul { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.npk-blockers li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line-soft, var(--line)); font-size: 13px; }
.npk-blockers li:first-child { border-top: none; }
.npk-blockers li > span { flex: 1 1 320px; }
.npk-inline { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.npk-inline .input { width: 9ch; padding: 4px 6px; } .npk-inline input[name=note] { width: 18ch; }
.npk-foot { margin-top: var(--s6); }
.npk-checks { font-size: 12px; color: var(--muted); margin: calc(-1 * var(--s2)) 0 var(--s4); } .npk-checks b { color: var(--text); margin-right: 3px; } .npk-checks span { margin-right: 2px; }
@media (max-width: 900px) { .npk-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* B-136 · lists as drill-downs, the method behind a click */
.step-more > summary, .step-why > summary { cursor: pointer; font-size: 12px; color: var(--accent-dark); padding: var(--s3) 0; }
.step-why { margin-top: var(--s3); border-top: 1px solid var(--line); }

/* PD-088 · What we decided */
.dec-h2 { font-size: 18px; margin: var(--s6) 0 var(--s3); border-bottom: 1px solid var(--line); padding-bottom: var(--s2); }

/* PD-094 · formulas as a table, one row each; materials in one sage ramp, not six unrelated hues */
/* B-149 · materials are categories, so each needs its own hue: validated with the dataviz palette
   checker on #FAFBF5, all pairs — lightness, chroma and normal-vision separation pass (worst 16.3);
   colour-blind separation is 6.1 (pink/aqua, deutan), legal only with a second cue, so segments are
   split by 2px gaps and every material is named on hover and in the opened recipe. The premix is a
   trace (a few kg/t), so it is neutral rather than a sixth hue. */
:root{ --m-kno3:#2a78d6; --m-urea:#1baf7a; --m-mkp:#4a3aa7; --m-map:#eda100; --m-sop:#e87ba4; --m-micro:#9A968A; }
.fx-mini-bar{gap:2px;background:transparent}.fx-comp-bar{gap:2px;background:transparent}
.btn-link{background:none;border:0;padding:0 2px;color:var(--accent-dark);font:inherit;font-size:12px;cursor:pointer;text-decoration:none}
.fx-plan-sm{display:flex;gap:4px;align-items:center}
.fx-plan-sm .input{font-size:12px;padding:2px 5px;height:26px}
.fx-plan-sm .input[type=number]{width:58px}.fx-plan-sm .input.month{width:118px}
.fx-name-input{font-size:13px}
.fx-mini-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line-soft);min-width:60px}
.fx-mini-bar span{display:block;height:100%}
.fx-table{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.fx-row{display:grid;grid-template-columns:minmax(0,1.4fr) 178px 64px 226px 40px minmax(0,1fr) 78px 86px 76px;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line-soft);font-size:12px}
.fx-row.fx-thead{border-top:0;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fx-row.fx-flag{box-shadow:inset 3px 0 0 var(--warn-line)}.fx-row.fx-out{opacity:.6}.fx-row.is-open{background:var(--tile)}
.fx-row .c-name{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}.fx-row .c-name .tag{font-size:9px;padding:0 5px}.fx-row .c-name input{min-width:0;width:100%}
.fx-row .c-grade{font-family:var(--font-num);font-size:12.5px;white-space:nowrap}.fx-row .c-grade .fx-grade{display:inline}.fx-drift-s{font-size:10px;color:var(--warn);border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:8px;padding:0 5px;margin-left:4px}.fx-row .c-grade .tag{font-size:9px;white-space:normal;margin-top:2px;display:inline-block}.fx-row .c-status{min-width:0}.fx-table{overflow-x:auto}
.fx-row .c-grade .fx-grade,.fx-card2 .k-grade .fx-grade{font-size:inherit;font-family:inherit;margin:0}
.fx-row .c-num{text-align:right;white-space:nowrap}.fx-row .c-share{text-align:right}
.fx-row .c-act{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11px}
.fx-row .c-open{grid-column:1/-1;padding:8px 0 4px}
.fx-factline { font-size: 12px; color: var(--muted); margin-top: var(--s2); }
.fx-row .c-micro{grid-column:2/7;font-size:10.5px;color:var(--faint);margin-top:-4px}
.fx-row .c-micro .fx-drift-s{font-size:9.5px;margin-right:8px;padding:0 6px}

/* B-150 · Home: what needs me today */
.today-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s5)}
@media (max-width:900px){.today-grid{grid-template-columns:1fr}}
.today-row{display:grid;grid-template-columns:minmax(120px,.8fr) 2fr auto 14px;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line-soft);color:inherit;text-decoration:none;font-size:12.5px}
.today-row:hover{background:var(--tile)}
.today-more{display:inline-block;margin-top:var(--s3);font-size:12px}


.today-need{margin-bottom:var(--s5);border-left:3px solid var(--warn-line)}
.today-need .today-row{grid-template-columns:0 1fr auto auto}
.today-row .faint{white-space:nowrap}
.journey-open{display:block;width:calc(100% - 2*var(--s3));margin:0 var(--s3) var(--s3);font-size:12px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;text-align:left}.journey-open::before{content:'▸ '}
#journey-dialog{max-width:none}.journey.dialog{width:min(1040px,92vw);max-width:none}
.journey-boxes{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;counter-reset:j}
.journey-boxes li{position:relative}
.journey-boxes li:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:42%;color:var(--faint)}
.journey-boxes a{display:flex;flex-direction:column;gap:6px;height:100%;padding:12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:inherit;text-decoration:none;font-size:12px}
.journey-boxes a:hover{background:var(--tile)}
.journey-boxes b{font-family:var(--font-h);font-size:14px}
.journey-boxes .journey-n{font-size:11px;color:var(--faint)}
.journey-boxes li.is-here a{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-bg)}
.journey-boxes em{font-style:normal;font-size:10.5px;color:var(--accent-dark);text-transform:uppercase;letter-spacing:.06em}
@media (max-width:900px){.journey-boxes{grid-template-columns:1fr}.journey-boxes li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-18px}}
/* B-157 · one row per product on the Command centre */
.cc-table td,.cc-table th{white-space:nowrap}
.cc-table td .tag{margin-right:4px}
.cc-table tr.cc-row:hover{background:var(--tile)}
/* B-164 · the price on a product's own page */
.price-panel{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:var(--s3) var(--s4);margin-bottom:var(--s4);font-size:12.5px}
.price-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:4px 0}.price-now b{font-family:var(--font-num);font-size:22px}.price-now .unit{color:var(--muted)}
.price-chg{font-family:var(--font-num);font-size:12px;color:var(--muted)}
.price-months{display:flex;flex-wrap:wrap;gap:2px 0;margin:6px 0 8px;font-family:var(--font-num);font-size:11.5px}.price-months span{display:flex;flex-direction:column;align-items:flex-end;min-width:42px;padding:2px 4px;border-left:1px solid var(--line-soft)}.price-months i{font-style:normal;font-size:10px;color:var(--faint)}
.price-outlook{margin-top:6px;line-height:1.5}.price-outlook .lbl{margin-right:6px}
.price-outlook a{white-space:nowrap}
/* B-165 · Formulas table (Fable's A+B+C, owner picked #3): the form column keeps its width, share
   sits apart from Save, the micro line and the drift flag are readable, bars are larger with the
   legend named once above the table, and the label-market setting folds to one line. */
.fx-table .fx-row{grid-template-columns:minmax(0,1.4fr) 166px 76px 216px 52px minmax(0,1fr) 78px 86px 76px}
.fx-table .fx-thead{align-items:end}
.fx-table .fx-row .c-share{padding-left:10px}
.fx-table .c-micro{font-size:11px;color:var(--muted)}
.fx-table .c-micro .fx-drift-s{font-size:11px;text-transform:none;letter-spacing:0;font-weight:600}
.fx-table .fx-mini-bar{height:9px}
.fx-legend{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:12px;margin:0 0 var(--s2)}.fx-legend .lbl{margin-right:4px}
.fx-legend .fx-mk i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.fx-market-fold{margin-bottom:var(--s3);font-size:12.5px}.fx-market-fold summary{cursor:pointer}.fx-market-fold .fx-default-market{margin-top:var(--s2)}
/* B-167 · last period's sales */
.hist-table td.num{white-space:nowrap}.hist-table td{vertical-align:top}.hist-edit summary{cursor:pointer;font-size:12px}
.price-forecast{margin-top:6px;padding:6px 8px;border-left:3px solid var(--accent-line);background:var(--tile);line-height:1.5}.price-forecast .lbl{margin-right:6px}
.price-manifest{margin-top:6px;padding:6px 8px;border-left:3px solid var(--ink,currentColor);background:var(--tile);line-height:1.5}.price-manifest .lbl{margin-right:6px}.price-manifest .price-months{margin:4px 0}
.manifest-table{font-size:12px;margin:4px 0}.manifest-table td,.manifest-table th{padding:3px 8px 3px 0;white-space:nowrap;vertical-align:top}.manifest-table td:last-child{white-space:normal;min-width:16ch}.manifest-table td:last-child .faint{display:block;font-size:11px}
/* B-168 · verdict */
.table td.verdict{min-width:260px;white-space:normal;font-size:12px;line-height:1.4}.v-now{color:var(--warn)}.v-wait{color:var(--accent-dark)}.v-by{color:var(--ink)}.v-none{color:var(--muted)}
.pos-note{font-size:10.5px;color:var(--warn);max-width:180px;margin-left:auto;white-space:normal;line-height:1.3}
.delivered{margin:4px 0 0 auto;font-size:11px;line-height:1.4;text-align:right;white-space:normal;max-width:24ch}.delivered-why{display:inline}.delivered-why summary{display:inline;cursor:pointer;color:var(--ink-2);margin-left:4px}.delivered-why[open]{display:block;text-align:left;font-size:11px;color:var(--ink-2)}
.plan-recorded{margin:4px 0 0 auto;font-size:11px;line-height:1.4;text-align:right;white-space:normal;max-width:24ch;color:var(--ink-2)}.plan-switch{margin-top:3px;font-size:11px;text-align:right}
.fresh-choices{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.fresh-choices .chip{font-size:11px;padding:2px 8px;border:1px solid var(--track);border-radius:10px;text-decoration:none;color:inherit}.fresh-choices .chip.is-on{background:var(--tile);font-weight:600}
/* B-249 · Our data: a row of inputs, so the cells centre on the inputs and the headings may wrap. */
.table.od-positions th { white-space: normal; vertical-align: bottom; line-height: 1.3; }
.table.od-positions td { vertical-align: middle; padding-top: var(--s2); padding-bottom: var(--s2); }
/* PD-124 · the Admin links are filled in by the server after the page is drawn, so the current one
   is marked from the nav's own attribute. Sign out stays in view when the rail is taller than the window. */
.app-nav[data-active='/readiness'] a[href='/readiness'] { border-left-color: var(--accent); background: var(--tile); color: var(--accent-dark); }
.rail-foot { position: sticky; bottom: calc(var(--s4) * -1); background: inherit; padding-bottom: var(--s3); }
/* four unnumbered groups now, not two: the same rule between them, less air around it */
.app-nav { gap: var(--s3); }
.nav-group-aside { margin-top: 0; padding-top: var(--s3); }
.nav-goal { padding-bottom: var(--s1); }
/* B-252 · the frame never scrolls; each page's own pane does. Our data, Data readiness and Workspaces
   are a bare main.wrap, which had no rule at all, so anything below the window could not be reached. */
main.wrap { flex: 1; min-height: 0; overflow-y: auto; }

/* ── B-255 · PREVIEW: a glass bar across the top, three sections, Settings in a menu. ── */
body.pv .app { background: radial-gradient(1200px 500px at 10% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent), var(--bg); }
.glass-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s5);
  margin: var(--s3) var(--s4) 0; padding: var(--s2) var(--s4); border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 62%, transparent); backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.glass-bar .brand { display: flex; align-items: center; gap: var(--s1); font-family: var(--font-h); font-weight: 700; font-size: 15px; color: inherit; text-decoration: none; }
.glass-bar .brand span:last-child { color: var(--accent); }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--tile) 80%, transparent); margin: 0 auto; }
.seg a { padding: 6px 22px; border-radius: 9px; font-size: 13px; color: var(--muted); text-decoration: none; }
.seg a:hover { color: var(--text); }
.seg a[aria-current='page'] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.glass-right { gap: var(--s2); }
.settings-menu { position: relative; }
.settings-menu > summary { list-style: none; cursor: pointer; }
.settings-menu > summary::-webkit-details-marker { display: none; }
.settings-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: var(--s2); border-radius: 14px; z-index: 30;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.12);
  display: flex; flex-direction: column; gap: 1px; }
.settings-pop a { padding: var(--s2) var(--s3); border-radius: 8px; color: inherit; font-size: 13px; }
.settings-pop a:hover { background: var(--tile); text-decoration: none; }
.settings-pop .nav-group { padding: var(--s2) 0 0; margin: var(--s2) 0 0; border-top: 1px solid var(--line); gap: 1px; }
.settings-pop .nav-goal { padding: 0 var(--s3) var(--s1); }
.settings-pop form { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s2); }
body.pv .app-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* the product strip, under the bar */
.pv-strip { display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s3) var(--s5) var(--s1); flex: none; }
.pv-strip a { flex: none; display: flex; flex-direction: column; gap: 1px; padding: var(--s2) var(--s3); min-width: 112px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.pv-strip a:hover { border-color: var(--line); }
.pv-strip a[aria-current='page'] { background: var(--surface); border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pv-strip .name { font-family: var(--font-h); font-size: 14px; }
.pv-strip .act, .pv-card .act { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.pv-strip .is-wait, .pv-card .is-wait { color: var(--muted); }
.pv-strip .sub { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pv-sep { flex: none; width: 1px; background: var(--line); margin: var(--s1) var(--s1); }
/* the overview's cards */
.pv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); }
.pv-card { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4); border-radius: 14px; color: inherit; text-decoration: none; }
.pv-card:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.pv-card .act { font-size: 18px; letter-spacing: .02em; font-family: var(--font-h); text-transform: none; }
.pv-card .q { font-variant-numeric: tabular-nums; font-size: 13px; }
/* A · list beside (today's layout): the strip carries only Overview and Decision history; overview is the table */
html[data-pv='a'] .pv-strip a[href^='/product/'], html[data-pv='a'] .pv-sep { display: none; }
html[data-pv='a'] .pv-cards { display: none; }
/* B · strip on top: no list column; overview is the table */
html[data-pv='b'] .workspace > .rail, html[data-pv='c'] .workspace > .rail { display: none; }
html[data-pv='b'] .pv-cards { display: none; }
/* C · cards: the overview opens on one card per product; the table is not repeated */
html[data-pv='c'] .pv-table { display: none; }
/* the picker that switches between A, B and C */
.pv-picker { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; gap: var(--s2); align-items: center; font-size: 12px;
  padding: var(--s2) var(--s3); border-radius: 14px; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.pv-picker a { padding: 3px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; }
html[data-pv='a'] [data-pv-pick='a'], html[data-pv='b'] [data-pv-pick='b'], html[data-pv='c'] [data-pv-pick='c'] { background: var(--accent); color: #fff; }
/* the map drawer */
.pv-mapbar { display: flex; align-items: center; gap: var(--s3); }
.map-drawer { width: min(1100px, 92vw); height: 86vh; max-height: 86vh; margin-right: 0; margin-top: 7vh; padding: 0; border: 1px solid var(--line); border-radius: 18px 0 0 18px; display: none; }
.map-drawer[open] { display: flex; flex-direction: column; }
.map-drawer::backdrop { background: rgba(20,24,16,.28); backdrop-filter: blur(2px); }
.map-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.map-drawer iframe { flex: 1; border: 0; width: 100%; }
html.embedded .glass-bar, html.embedded .pv-picker, html.embedded .demo-bar { display: none; }
/* B-256 · Overview and Decision history: two tabs at the top of the Products page, not tiles in the strip */
.pv-tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--line); margin-bottom: calc(var(--s2) * -1); }
.pv-tabs a { padding: var(--s2) 0; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.pv-tabs a:hover { color: var(--text); }
.pv-tabs a[aria-current='page'] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.pv-tabs-row { padding: var(--s3) var(--s5) 0; flex: none; }
.pv-tabs-row .pv-tabs { margin-bottom: 0; }
/* B-257 · gear only, a floating Ask, a one-control workspace switcher */
.glass-bar .gear { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; border-radius: 50%; }
.ws-compact .input { min-width: 0; width: auto; max-width: 220px; border-radius: 10px; padding: 5px 28px 5px 10px; font-size: 12.5px;
  background-color: color-mix(in srgb, var(--surface) 80%, transparent); }
.ask-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; padding: 12px 22px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14); font: inherit; font-weight: 600; color: var(--accent-dark); cursor: pointer; }
.ask-fab:hover { box-shadow: 0 14px 34px rgba(0,0,0,.18); }
html[data-pv='a'] .pv-strip { display: none; }
/* B-258 · the section switcher sits on the bar's true centre, not midway between the logo and the right-hand controls */
.glass-bar .seg { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
.glass-bar .glass-right { margin-left: auto; }
.settings-pop .pop-item { text-align: left; justify-content: flex-start; padding: var(--s2) var(--s3); border-radius: 8px; font-size: 13px; border: 0; }
/* B-260 · a group heading in the plain source table */
.src-plain tr.src-group td { padding-top: var(--s4); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark); font-weight: 600; border-bottom: 1px solid var(--line); }
.src-plain td:first-child { white-space: nowrap; }
/* PD-127 · the review prompt on the market step */
.review-prompt { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; padding: var(--s4); margin-bottom: var(--s4); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.review-cat { padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.review-cat:first-of-type { border-top: 0; }
.review-top { margin: var(--s2) 0 0; padding-left: var(--s5); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }

/* B-317 / PD-131 · the sign-in stage (routes). Motion is slow and decorative, and stops under prefers-reduced-motion. */
.lx-body { background: var(--bg); }
.lx-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); }
.lx-main { display: grid; place-items: center; }
.lx-login { min-height: 0; padding: var(--s7); }
.lx-side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 48px; color: #F3F5EC; background: linear-gradient(160deg, #2F3E1C 0%, #3F5227 55%, #4C6230 100%); isolation: isolate; }
.lx-stage { position: absolute; inset: 0; z-index: -1; }
.lx-copy { max-width: 470px; }
.lx-kicker { font-family: var(--font-num, 'IBM Plex Mono', monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #C9D6A8; }
.lx-head { font-family: var(--font-h); font-size: 34px; line-height: 1.12; font-weight: 600; margin-top: 12px; color: #FBFCF6; }
.lx-sub { font-size: 14.5px; line-height: 1.6; margin-top: 14px; color: #DCE3CB; max-width: 430px; }
.lx-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* routes */
.lx-3 .lx-arc { fill: none; stroke: rgba(227,234,208,.32); stroke-width: 1.2; stroke-dasharray: 3 6; animation: lx-flow 30s linear infinite; }
.lx-3 .lx-node { fill: #C9D6A8; opacity: .8; }
.lx-3 .lx-cargo { fill: #FBFCF6; filter: drop-shadow(0 0 4px rgba(251,252,246,.8)); }
.lx-3 .lx-marquee { position: absolute; left: 0; right: 0; top: 40px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lx-3 .lx-track { display: flex; gap: 34px; width: max-content; animation: lx-scroll 38s linear infinite; }
.lx-3 .lx-track span { font-family: var(--font-num, 'IBM Plex Mono', monospace); font-size: 12px; letter-spacing: .12em; color: rgba(227,234,208,.7); }
@keyframes lx-flow { to { stroke-dashoffset: -300; } }
@keyframes lx-scroll { to { transform: translateX(-50%); } }

@media (max-width: 860px) {
  .lx-wrap { grid-template-columns: 1fr; }
  .lx-side { min-height: 260px; padding: 28px 20px; }
  .lx-head { font-size: 24px; }
  .lx-sub { font-size: 13px; }
  .lx-login { padding: 20px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-side *, .lx-side *::before, .lx-side *::after { animation: none !important; }
  .lx-3 .lx-cargo { display: none; }
}
.lx-side::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(47,62,28,0) 0%, rgba(47,62,28,.82) 62%, rgba(47,62,28,.95) 100%); }
.lx-login .login-card { max-width: 400px; }
.lx-login .brand { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.lx-login h1 { font-size: 26px !important; }
/* B-319 · the sign-in column (the owner's choice, B): the brand and "Secure sign-in" at its top, an open form with
   no box, a footer; the moving panel takes the wider share. */
.lx-wrap { grid-template-columns: minmax(0, 1.7fr) minmax(380px, 1fr); }
.lx-main { display: flex; flex-direction: column; min-height: 100vh; padding: 28px 40px; place-items: initial;
  background: radial-gradient(1200px 600px at 100% 0%, rgba(220,229,200,.55), transparent 60%), var(--bg); }
.lx-top { display: flex; align-items: center; justify-content: space-between; }
.lx-top .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.lx-secure { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.lx-secure::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fresh); box-shadow: 0 0 0 3px var(--fresh-bg); }
.lx-main .lx-login { flex: 1; display: grid; place-items: center; padding: 24px 0; }
.lx-foot { font-size: 11.5px; color: var(--faint); text-align: center; }
.lx-login .login-card { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: 420px; }
.lx-login .login-card > i { display: none; }
.lx-login h1 { font-size: 32px !important; margin-top: 0 !important; }
.lx-login .input { height: 44px; font-size: 14px; background: var(--surface); }
.lx-login .btn-primary { height: 44px; font-size: 14px; }
.lx-card-brand { display: none !important; align-items: center; gap: 8px; }
@media (max-width: 860px) { .lx-wrap { grid-template-columns: 1fr; } .lx-main { min-height: 0; padding: 20px 16px; } .lx-top { display: none; }
  .lx-card-brand { display: flex !important; margin-bottom: 14px; } }
/* B-332 · THE BAR ON A PHONE. The section switcher sits on the bar's exact centre (B-258), which on a narrow screen
   lands on the logo, the workspace switcher and Alerts. Below 760px the bar wraps: logo and controls on the first row,
   Products · Market · Tools across the full width on the second. Below 480px the wordmark gives way to the mark. */
@media (max-width: 760px) {
  .glass-bar { flex-wrap: wrap; gap: 8px 10px; margin: 8px 8px 0; padding: 8px 10px; border-radius: 16px; }
  .glass-bar .seg { position: static; transform: none; order: 3; flex: 1 0 100%; display: flex; }
  .glass-bar .seg a { flex: 1; text-align: center; padding: 7px 0; }
  .glass-bar .glass-right { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .ws-compact .input { max-width: 132px; }
  .glass-bar #alerts { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 480px) {
  .glass-bar .brand .wordmark { display: none; }
  .ws-compact .input { max-width: 112px; font-size: 12px; padding-right: 22px; }
  .glass-bar #alerts { padding-left: 8px; padding-right: 8px; }
}
/* 760–1040px: room for one row, but not for the switcher on the exact centre — it sits between logo and controls */
@media (min-width: 761px) and (max-width: 1040px) {
  .glass-bar .seg { position: static; transform: none; margin: 0 auto; }
  .glass-bar .seg a { padding: 6px 14px; }
  .glass-bar .glass-right { margin-left: 0; }
  .ws-compact .input { max-width: 160px; }
}