/* ============================================================================
   DATA SURFACES — flags, controls, grids, drill-down modals, the desk.
   Phase B, 2026-07-26. STYLE-GUIDE §14 is written from this file.

   Loaded AFTER app.css. Everything here is APP vocabulary; nothing here ever
   touches the chart. Not one raw size, colour, radius or leading appears
   below — every value resolves through a token in tokens.css, and the five
   tokens this file needed were added there first (STYLE-GUIDE §10 step 1:
   amend tokens before the sheet that spends them).

   These rules began life in `design\mockups\mock.css`, which he clicked
   through as Phase A. They are moved here rather than copied: the mockups
   linked the real tokens.css and app.css, so what he saw is what this is.
   ============================================================================ */

/* ---- FLAG BAND — first-class, above the grid, never a filter --------------
   His words, the specification for this whole band: "We have staff with no
   posts. We have staff with posts that have no action." A condition he has to
   go looking for inside a dropdown has not been raised. Each card carries its
   own count, states what it means underneath, and clicking it filters the grid
   to exactly that set. */
.flags {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: var(--s5);
}
.flag {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: var(--s4); border-radius: var(--radius);
  border: var(--bw) solid var(--stroke-1); background: var(--bg-1);
  font-family: var(--ui-font);
}
.flag:hover { background: var(--bg-hover); }
.flag.is-on { border-color: var(--brand); background: var(--brand-wash); }
.flag.is-raised { border-left: var(--bw-accent) solid var(--flag-fg); }
.flag-n {
  margin: var(--s0); font-family: var(--ui-font-serif);
  font-size: var(--ui-display); line-height: var(--ui-display-lh);
  font-weight: var(--w-regular); letter-spacing: var(--ui-track-display);
  color: var(--fg-1);
}
.flag.is-raised .flag-n { color: var(--flag-fg); }
.flag-l { margin: var(--s0); font-size: var(--ui-body); color: var(--fg-1);
          font-weight: var(--w-medium); }
.flag-note { margin: var(--s1) var(--s0) var(--s0); font-size: var(--ui-caption);
             line-height: var(--ui-caption-lh); color: var(--fg-3); }

/* ---- CONTROL ROW: search, dropdowns, segmented switch --------------------- */
.controls { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
            margin-bottom: var(--s4); }
.controls .grow, .q-row .grow, .mdl-head .grow, .queue-head .grow { flex: 1 1 auto; }
.ctl { display: flex; align-items: center; gap: var(--s2); }
.ctl-l { font-size: var(--ui-caption); color: var(--fg-3); font-weight: var(--w-semibold); }
select.ctl-s, input.ctl-i {
  height: var(--ctrl-h); padding: var(--s0) var(--ctrl-px);
  border: var(--bw) solid var(--stroke-1); border-radius: var(--radius-sm);
  background: var(--bg-1); color: var(--fg-1);
  font-family: var(--ui-font); font-size: var(--ui-ui);
}
input.ctl-i { min-width: 18rem; }
select.ctl-s:focus-visible, input.ctl-i:focus-visible,
.flag:focus-visible, .gr th button:focus-visible, .gr tbody tr:focus-visible,
.q-row:focus-visible {
  outline: var(--bw-rule) solid var(--accent); outline-offset: var(--bw-rule);
}
.seg { display: inline-flex; }
.seg .zbtn { border-radius: var(--r-chart); margin-left: calc(var(--bw) * -1); }
.seg .zbtn:first-child { border-radius: var(--r-pill) var(--r-chart) var(--r-chart) var(--r-pill);
                         margin-left: var(--s0); }
.seg .zbtn:last-child  { border-radius: var(--r-chart) var(--r-pill) var(--r-pill) var(--r-chart); }
.seg .zbtn.on { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-ink);
                font-weight: var(--w-semibold); }

/* ---- THE GRID ------------------------------------------------------------- */
.gr-wrap { overflow-x: auto; border: var(--bw) solid var(--stroke-1);
           border-radius: var(--radius); background: var(--bg-1); }
.gr { width: 100%; border-collapse: collapse; font-size: var(--ui-ui);
      line-height: var(--ui-ui-lh); }
.gr thead th {
  position: sticky; top: var(--s0); z-index: 1;
  background: var(--grid-head); text-align: left;
  border-bottom: var(--bw) solid var(--stroke-1);
  padding: var(--s0);
}
.gr th button {
  display: flex; align-items: center; gap: var(--s1); width: 100%;
  padding: var(--s2) var(--s3); min-height: var(--ctrl-h);
  background: none; border: none; cursor: pointer;
  font-family: var(--ui-font); font-size: var(--ui-ui);
  line-height: var(--ui-ui-lh);
  font-weight: var(--w-semibold); color: var(--fg-3); text-align: left;
}
.gr th button:hover { color: var(--fg-1); }
/* a column that carries no sort — where the order is the board's own order and
   re-sorting it would say something untrue about it */
.gr th.plain { padding: var(--s2) var(--s3); font-size: var(--ui-ui);
               line-height: var(--ui-ui-lh);
               font-weight: var(--w-semibold); color: var(--fg-3); }
.gr th .sort-mark { color: var(--brand-ink); font-weight: var(--w-semibold); }
.gr tbody tr { border-bottom: var(--bw) solid var(--stroke-2); cursor: pointer; }
.gr tbody tr:nth-child(even) { background: var(--grid-zebra); }
.gr tbody tr:hover { background: var(--bg-hover); }
.gr tbody tr.is-raised { box-shadow: inset var(--bw-accent) 0 0 0 var(--flag-fg); }
.gr td { padding: var(--s2) var(--s3); min-height: var(--row-h); vertical-align: top;
         color: var(--fg-1); }
.gr td.num { font-family: var(--ui-mono); color: var(--fg-2); }
.gr td.dim { color: var(--fg-3); }
/* A SECONDARY LINE LIVES IN THE CELL — one row, two facts, no second column.
   The comm center's station rows join this rule rather than declaring a second
   secondary-line style: there is one such line in this application. */
.gr .sub, .q-row .sub, .stn-post .sub, .stn-where .sub {
                        display: block; font-size: var(--ui-caption);
                        line-height: var(--ui-caption-lh); color: var(--fg-3); }
.gr .swatch, .mdl .swatch { margin-right: var(--s2); vertical-align: baseline; }
.gr-foot { padding: var(--s3); font-size: var(--ui-caption); color: var(--fg-3);
           border-top: var(--bw) solid var(--stroke-2); background: var(--bg-1); }
.gr-empty { padding: var(--s8); text-align: center; color: var(--fg-3); }

/* NOT HELD — the honest blank. A cell the Center holds no data for reads as an
   explicit statement, never as an empty cell, a dash or a zero. An unreported
   figure and a figure of zero are different facts. */
.nothed { font-size: var(--ui-caption); line-height: var(--ui-caption-lh);
          color: var(--fg-4); font-style: italic; }
.chip-none { background: var(--flag-bg); color: var(--flag-fg); font-weight: var(--w-semibold); }
.chip-stat { background: var(--bg-2); color: var(--fg-3); }
.chip-cos  { background: var(--bg-2); color: var(--fg-3); font-weight: var(--w-semibold); }

/* ---- DRILL-DOWN MODAL -----------------------------------------------------
   A native <dialog> opened with showModal(), exactly as STYLE-GUIDE §13
   specifies: Esc closes and focus is trapped by the browser, not by script. */
/* ONE SCROLL REGION (his finding, 2026-07-26, flaw 9). A flex column: the head
   and the action bar are fixed, `.mdl-body` takes what is left and is the only
   thing that moves. `min-height: 0` on the body is what actually lets a flex
   child shrink below its content and scroll — without it the dialog grows past
   its own max-height and the browser puts a second bar on the box itself. */
.mdl { width: min(var(--w-modal), 92vw); max-height: 88vh; padding: var(--s0);
       display: flex; flex-direction: column; overflow: hidden;
       border: var(--bw) solid var(--glass-stroke); border-radius: var(--radius-lg);
       background: var(--bg-1); color: var(--fg-1);
       box-shadow: var(--shadow-lift), var(--glass-inset); }
/* THE SCRIM IS ITSELF GLASS. The page behind a modal is blurred, not merely
   darkened — which is what makes the dialog read as a pane of glass held in
   front of the work rather than a box drawn on top of it. */
.mdl::backdrop { background: var(--scrim); backdrop-filter: var(--scrim-blur);
                 -webkit-backdrop-filter: var(--scrim-blur); }
.mdl-accent { height: var(--bw-accent); background: var(--brand); flex: none;
              border-radius: var(--radius-lg) var(--radius-lg) var(--r-chart) var(--r-chart); }
.mdl-head { display: flex; align-items: flex-start; gap: var(--s3);
            flex: none; padding: var(--s7) var(--s7) var(--s4); }
/* A QUESTION WRAPS; IT IS NEVER CUT (flaw 6). Nothing in this app truncates a
   title: `min-width: 0` lets the flex child wrap instead of overflowing, and
   `overflow-wrap` breaks a single unbroken run rather than clipping it. */
.mdl-head .grow { min-width: 0; }
.mdl-t { overflow-wrap: anywhere; }
.mdl-t { margin: var(--s0); font-family: var(--ui-font-serif);
         font-size: var(--ui-title); line-height: var(--ui-title-lh);
         font-weight: var(--w-regular); letter-spacing: var(--ui-track-title); }
.mdl-sub { margin: var(--s1) var(--s0) var(--s0); font-size: var(--ui-body); color: var(--fg-2); }
.mdl-body { padding: var(--s0) var(--s7) var(--s7); overflow-y: auto;
            flex: 1 1 auto; min-height: 0; }
.mdl-sec { margin-top: var(--s5); }
.mdl-sec > h3 { margin: var(--s0) var(--s0) var(--s2);
                font-size: var(--ui-caption); line-height: var(--ui-caption-lh);
                font-weight: var(--w-semibold); color: var(--fg-3);
                border-bottom: var(--bw) solid var(--stroke-2); padding-bottom: var(--s1); }
.mdl-sec p { margin: var(--s0) var(--s0) var(--s2); color: var(--fg-1); }
.kv { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: var(--s2) var(--s4); }
.kv dt { font-size: var(--ui-caption); color: var(--fg-3); font-weight: var(--w-semibold); }
.kv dd { margin: var(--s0); color: var(--fg-1); }
.mdl-actions { display: flex; gap: var(--s3); justify-content: flex-end; flex: none;
               padding: var(--s5) var(--s7); background: var(--glass-2);
               border-top: var(--bw) solid var(--glass-stroke); }
/* two callouts, and the difference between them is the whole doctrine:
   .awaits = something is waiting on a person; .verbatim = certified text,
   quoted, which nothing in this app may edit. */
.awaits { border-left: var(--bw-accent) solid var(--flag-fg); background: var(--flag-bg);
          padding: var(--s3) var(--s4); max-width: var(--w-read);
          border-radius: var(--r-chart) var(--radius)
          var(--radius) var(--r-chart); }
.awaits p { color: var(--flag-fg); }
.verbatim { border-left: var(--bw-accent) solid var(--brand); background: var(--brand-wash);
            padding: var(--s3) var(--s4); max-width: var(--w-read);
            border-radius: var(--r-chart) var(--radius) var(--radius) var(--r-chart); }

/* ============================================================================
   THE DESK — rebuilt 2026-07-26 (late) on his own eyes.

   The page said "10 things are waiting on you" over ten rows each stamped "not
   yet decision-ready". The band below now carries ONE number and it is the
   number of decisions actually ready for his word. Everything else on his desk
   is under its own plain heading, at ordinary weight, where it cannot argue
   with the heading above it.
   ============================================================================ */

/* THE GATE BAND. The heavy amber rule that used to run down its left edge is
   gone with his aesthetic ruling: a 3px stripe on a card is a line-of-business
   convention, and the amber numeral beside the heading already says the same
   thing without drawing a bar across the page. The band is a container now,
   and the decision cards inside it are the surfaces that carry weight. */
.gate-card { padding-top: var(--s7); }
.gate-head { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
             margin-bottom: var(--s4); }
.gate-head .grow { display: flex; align-items: baseline; gap: var(--s3);
                   flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.gate-n { margin: var(--s0); font-family: var(--ui-font-serif);
          font-size: var(--ui-display); line-height: var(--ui-display-lh);
          font-weight: var(--w-regular); color: var(--flag-fg);
          font-variant-numeric: tabular-nums;
          letter-spacing: var(--ui-track-display); }
.gate-t { margin: var(--s0); font-family: var(--ui-font-serif);
          font-size: var(--ui-title); line-height: var(--ui-title-lh);
          font-weight: var(--w-regular); letter-spacing: var(--ui-track-title);
          color: var(--fg-1); }
.gate-when { margin: var(--s0); font-size: var(--ui-caption);
             line-height: var(--ui-caption-lh); color: var(--fg-3); }
.gate-raise { margin-top: var(--s4); }

/* THE HONEST ZERO. Ordinary type, ordinary colour: an empty gate is not an
   alarm and it is not a congratulation. */
.gate-zero { border-left: var(--bw) solid var(--stroke-1);
             padding-left: var(--s5); }
.gate-zero-t { margin: var(--s0) var(--s0) var(--s2); font-size: var(--ui-subtitle);
               line-height: var(--ui-subtitle-lh); color: var(--fg-1); }
.gate-zero-b { margin: var(--s0); color: var(--fg-3); }

/* ---- ONE DECISION, DRAWN AS A DECISION -------------------------------------
   The centre of the Center, per his ruling of 2026-07-27 that approvals flow
   through COMMS: the question, the context, one obvious act, on the page. */
.dec-list { display: grid; gap: var(--s6); }
.dec { border: var(--bw) solid var(--stroke-2); border-radius: var(--radius);
       padding: var(--s7) var(--s7) var(--s6); background: var(--bg-1);
       transition: background var(--dur) var(--ease); }
.dec:hover { background: var(--bg-hover); }
.dec-gate { margin: var(--s0) var(--s0) var(--s1); font-size: var(--ui-caption);
            line-height: var(--ui-caption-lh); font-weight: var(--w-semibold);
            letter-spacing: var(--ls-slight); text-transform: uppercase;
            color: var(--flag-fg); }
/* THE QUESTION. Display type, and it WRAPS — nothing here is ever cut. */
.dec-q { margin: var(--s0) var(--s0) var(--s3); font-family: var(--ui-font-serif);
         font-size: var(--ui-title); line-height: var(--ui-title-lh);
         font-weight: var(--w-regular); letter-spacing: var(--ui-track-title);
         color: var(--fg-1); max-width: var(--w-read);
         overflow-wrap: anywhere; }
.dec-ctx { margin: var(--s0) var(--s0) var(--s2); font-size: var(--ui-subtitle);
           line-height: var(--ui-subtitle-lh); color: var(--fg-1); }
.dec-sub { margin: var(--s0) var(--s0) var(--s2); color: var(--fg-3); }
.dec-acts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.dec-b { min-height: var(--ctrl-h); }
.dec-err { margin: var(--s3) var(--s0) var(--s0); color: var(--danger);
           font-size: var(--ui-body); line-height: var(--ui-body-lh); }

/* ---- THE PLAIN LIST — everything that is not at his gate -------------------
   ONE MARKER PER ROW, at caption size, in the tertiary grey. The old rows
   carried three chips each in three colours; the colour is now reserved for
   the one band that is actually waiting on him. */
.q-list { list-style: none; margin: var(--s0); padding: var(--s0); }
.q-row { display: flex; align-items: baseline; gap: var(--s4); width: 100%;
         padding: var(--s3) var(--s2); text-align: left; cursor: pointer;
         background: none; border: none; border-top: var(--bw) solid var(--stroke-2);
         font-family: var(--ui-font); font-size: var(--ui-ui);
         line-height: var(--ui-ui-lh); color: var(--fg-1); }
.q-row { border-radius: var(--radius); transition: background var(--dur) var(--ease); }
.q-row:hover { background: var(--bg-hover); }
.q-row .grow { min-width: 0; }
/* A TITLE WRAPS AND IS NEVER TRUNCATED (his finding, flaw 6: a legal-matter
   item title cut mid-word, with an ellipsis, on a screen with room to spare).
   There is no `text-overflow` and no `nowrap` anywhere on this row by design. */
.q-title { display: block; font-size: var(--ui-subtitle);
           line-height: var(--ui-subtitle-lh); color: var(--fg-1);
           overflow-wrap: anywhere; }
.q-mark { flex: none; font-size: var(--ui-caption); line-height: var(--ui-caption-lh);
          color: var(--fg-3); white-space: nowrap; }

/* ---- BARS: a proportion, where a proportion is the honest shape ----------- */
.bars { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.bar-l { display: flex; justify-content: space-between; gap: var(--s3);
         font-size: var(--ui-body); margin-bottom: var(--s1); }
.bar-l .r { color: var(--fg-3); font-family: var(--ui-mono); }
.bar { display: flex; height: var(--s3); border-radius: var(--r-pill); overflow: hidden;
       background: var(--bg-3); }
.bar span { display: block; height: 100%; }
.bar .seg-filled { background: var(--brand); }
.bar .seg-held   { background: var(--flag-fg); }
.bar .seg-open   { background: var(--fg-4); }
.bar .seg-rest   { background: var(--stroke-2); }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s2);
          font-size: var(--ui-caption); line-height: var(--ui-caption-lh); color: var(--fg-3); }
.legend i { display: inline-block; width: var(--s3); height: var(--s3);
            border-radius: var(--radius-sm); margin-right: var(--s1);
            vertical-align: baseline; font-style: normal; }

/* ---- THE FRESHNESS LINE — the anti-stale rule, made visible ---------------
   The old Station was built once per page load and never re-read. Every view
   that carries state now stamps the time it read it, on its own face. */
.fresh { display: flex; align-items: center; gap: var(--s2); font-size: var(--ui-caption);
         line-height: var(--ui-caption-lh); color: var(--fg-3); }
.fresh b { font-weight: var(--w-semibold); color: var(--fg-2); font-family: var(--ui-mono); }

/* ---- READ-ONLY BANNER — a mode he must never discover by being refused ---- */
.robar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--s6);
  background: var(--flag-bg); color: var(--flag-fg);
  border-bottom: var(--bw) solid var(--stroke-1);
  font-size: var(--ui-caption); line-height: var(--ui-caption-lh);
}
.robar strong { font-weight: var(--w-semibold); }

/* ---- the reading-step control in the masthead ----------------------------- */
.readbar { display: flex; align-items: center; gap: var(--s2); }

/* ===========================================================================
   §15 — THE DECISION SURFACE, rebuilt 2026-07-26 (late).

   The shape is the design: THE QUESTION. TWO LINES OF CONTEXT. A PLACE FOR HIS
   WORD. ONE ACT. Everything that used to sit between those — four section
   headings, five explanatory captions, a latency essay and a red bar that
   appeared before he had touched anything — is gone, and so are the rules that
   styled them.

   NO NEW TOKEN IS SPENT HERE. Every value below is an existing token from
   tokens.css, and the harness asserts this file adds no `--token:` declaration.
   =========================================================================== */

/* ---- the question's own words, and the record's ---------------------------- */
.act-sum { font-size: var(--ui-body); line-height: var(--ui-body-lh);
           max-width: var(--w-read);
           color: var(--fg-1); margin: var(--s0) var(--s0) var(--s2); }
.act-recorded { color: var(--fg-2); }
.act-note { color: var(--fg-3); font-size: var(--ui-body);
            line-height: var(--ui-body-lh); }
/* TWO LINES OF CONTEXT, quiet, under the question. */
.act-ctx { margin: var(--s0) var(--s0) var(--s1); font-size: var(--ui-caption);
           line-height: var(--ui-caption-lh); color: var(--fg-3); }

/* ---- an option: the button, and the exact words it will record ------------- */
.act-opt { margin-bottom: var(--s3); }
.act-opt-word { border-left: var(--bw-accent) solid var(--brand);
                background: var(--brand-wash); color: var(--fg-1);
                padding: var(--s2) var(--s3); margin: var(--s2) var(--s0) var(--s0);
                border-radius: var(--r-chart) var(--radius) var(--radius) var(--r-chart); }

/* ---- his own word: always drawn, never conditional ------------------------- */
.act-word-l { display: block; margin-bottom: var(--s2);
              font-size: var(--ui-body); line-height: var(--ui-body-lh);
              font-weight: var(--w-semibold); color: var(--fg-1); }
textarea.act-word { width: 100%; max-width: var(--w-read);
                    min-height: var(--textarea-min-h);
                    padding: var(--s3) var(--s4); font-family: var(--ui-font);
                    font-size: var(--ui-body); line-height: var(--ui-body-lh);
                    color: var(--fg-1); background: var(--bg-1);
                    border: var(--bw) solid var(--stroke-1);
                    border-radius: var(--radius-sm);
                    transition: border-color var(--dur) var(--ease),
                                box-shadow var(--dur) var(--ease); }
textarea.act-word:focus { border-color: var(--brand);
                          box-shadow: 0 0 0 var(--bw-accent) var(--brand-wash); }
textarea.act-word:focus-visible { outline: var(--sh) solid var(--brand);
                                  outline-offset: var(--sh); }
.act-bar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
           margin-top: var(--s3); }
/* THE REASON A CONTROL IS UNAVAILABLE, SAID ONCE, IN GREY — never in red, and
   never after the fact. This replaces the 422 error bar he saw before he had
   typed or clicked anything (flaw 3). */
.act-why { margin: var(--s0); font-size: var(--ui-caption);
           line-height: var(--ui-caption-lh); color: var(--fg-3); }
.act-stands { margin: var(--s2) var(--s0) var(--s0); font-size: var(--ui-caption);
              line-height: var(--ui-caption-lh); color: var(--fg-3); }

/* ---- everything he will not want every time, one disclosure down ----------- */
.act-more { margin-top: var(--s5); border-top: var(--bw) solid var(--stroke-2);
            padding-top: var(--s3); }
.act-more > summary { cursor: pointer; font-size: var(--ui-ui);
                      line-height: var(--ui-ui-lh); color: var(--fg-2); }
.act-alt { margin-top: var(--s4); }
.act-alt-t { margin: var(--s0) var(--s0) var(--s1); font-weight: var(--w-semibold);
             color: var(--fg-1); }
.act-alt-b { margin: var(--s0) var(--s0) var(--s2); font-size: var(--ui-caption);
             line-height: var(--ui-caption-lh); color: var(--fg-3); }
.act-alt-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.act-desk { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---- orders given: the other half of the cycle, on his own page ------------ */
.orders-card { /* no stripe — see .gate-card */ }
.verbatim-p { border-left: var(--bw-accent) solid var(--brand); background: var(--brand-wash);
              padding: var(--s3) var(--s4); margin: var(--s0); max-width: var(--w-read);
              border-radius: var(--r-chart) var(--radius) var(--radius) var(--r-chart); }

/* ---- THE PAGE DOES NOT SCROLL UNDER A DIALOG (flaw 9) ---------------------- */
:root.modal-open .scroller { overflow: hidden; }
:root.modal-open body { overflow: hidden; }

/* ---- DRAFTS: the mini mail interface (his design ruling, 2026-07-26) -------
   A draft is a letter he edits in place. It reuses the decision card's shell
   (`.dec`) because a draft IS a decision — approve or send it back — and a
   second card vocabulary for the same act is how two surfaces drift apart. */
.draft-to { margin: var(--s0) var(--s0) var(--s3); color: var(--fg-3);
            font-size: var(--ui-caption); line-height: var(--ui-caption-lh); }
input.draft-subject { width: 100%; height: var(--ctrl-h); margin-bottom: var(--s4);
                      padding: var(--s0) var(--s3); font-family: var(--ui-font);
                      font-size: var(--ui-subtitle); line-height: var(--ui-subtitle-lh);
                      color: var(--fg-1); background: var(--bg-1);
                      border: var(--bw) solid var(--stroke-1);
                      border-radius: var(--radius-sm); }
input.draft-subject:focus-visible { outline: var(--sh) solid var(--brand);
                                    outline-offset: var(--sh); }
/* THE WHOLE LETTER, VISIBLE. Ten lines before it scrolls, and it grows with
   his reading step because every value here is rem-derived. */
textarea.draft-body { min-height: calc(var(--ctrl-h) * 8); }
/* A DECIDED DRAFT IS A RECORD: shown whole, in the message's own line breaks,
   never re-wrapped into a paragraph. */
.draft-body-read { margin: var(--s3) var(--s0) var(--s0); padding: var(--s3) var(--s4);
                   max-width: var(--w-read);
                   background: var(--bg-2); border-radius: var(--radius);
                   font-family: var(--ui-font); font-size: var(--ui-body);
                   line-height: var(--ui-body-lh); color: var(--fg-1);
                   white-space: pre-wrap; overflow-wrap: anywhere; }

/* ============================================================================
   §19 — THE COMM CENTER: A STATION FOR EVERY MEMBER OF STAFF (2026-07-27)

   His ruling: "Every staff should have a portal desk, 3-basket system, etc."

   THIS SECTION SPENDS NO NEW TOKEN. Phase B spent five and declared them;
   Phase C, D and the redesign spent none; this spends none either, and the
   harness counts the file's declarations rather than trusting the sentence.

   Three things this sheet has to say without a word, because the room says
   them without a word:

     · A STACK OF THREE, IN ORDER. IN, PENDING, OUT read left to right on a
       directory row and top to bottom on a station, which is the order source
       puts them in and the order the directories sit in on disk.
     · A FULL BASKET LOOKS DIFFERENT FROM AN EMPTY ONE, at a glance, from
       across the room — "I can always judge the state of a department by the
       state of the station." `.stn-count.has` takes the attention pair; an
       empty one stays quiet. No new colour is minted for it: a waiting
       particle and a raised flag are the same idea.
     · A STATION NOTHING CAN REACH IS NOT DRAWN AS AN EMPTY ONE. It recedes and
       it carries words (`.nothed`), because "no post on the board" and "no
       despatches today" are different facts and the row may not blur them.

   RUSH sits at the desk in its own block ABOVE the stack and is styled as a
   position rather than a container — no basket chrome, deliberately, so it
   cannot be mistaken for a fourth basket.
   ============================================================================ */

/* ---- the directory --------------------------------------------------------- */

/* THE ROOM IS ORDERED BY DIVISION (Eames RULING 01 §4, on his own word: "There's
   not organization."). The heading is a divider between groups of rows, not a
   card of its own — the room is one list read top to bottom, and a stack of
   seven cards would break the scan it exists to make possible.

   IT IS BODY SIZE, NOT CAPTION SIZE. Every accessibility ruling on this build
   runs the other way: his vision is worsening and he reads on a 27" monitor, so
   the thing that tells him WHICH DIVISION he is looking at is never smaller than
   the rows underneath it. The count beside it is the caption. */
.stn-group { display: flex; align-items: baseline; gap: var(--s2);
             margin: var(--s4) var(--s0) var(--s1);
             font-family: var(--ui-font-display);
             font-weight: var(--w-semibold); color: var(--fg-1); }
.stn-card > .stn-list + .stn-group,
.stn-card > .stn-group:first-child { margin-top: var(--s2); }
.stn-group-n { font-size: var(--ui-caption); line-height: var(--ui-caption-lh);
               font-weight: var(--w-regular); color: var(--fg-3); }

.stn-card > .stn-list { margin-top: var(--s2); }
.stn-list { display: flex; flex-direction: column; }
.stn-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
           gap: var(--s4); align-items: center; padding: var(--s3) var(--s4);
           min-height: var(--row-h); border-top: var(--bw) solid var(--stroke-2);
           font-size: var(--ui-ui); line-height: var(--ui-ui-lh);
           color: var(--fg-1); text-decoration: none; border-radius: var(--radius);
           transition: background var(--dur) var(--ease); }
.stn-list > .stn-row:first-child { border-top: 0; }
.stn-row:hover { background: var(--bg-hover); }
.stn-row:focus-visible { outline: var(--sh) solid var(--brand); outline-offset: var(--sh); }
.stn-row.is-you { box-shadow: inset var(--bw-accent) 0 0 0 var(--brand); }

.stn-who { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
           min-width: 0; }
.stn-row-name { font-weight: var(--w-semibold); }
.stn-row-kind { font-size: var(--ui-caption); line-height: var(--ui-caption-lh);
                color: var(--fg-3); }
.stn-where { min-width: 0; color: var(--fg-2); }
/* A STATION NOTHING CAN REACH RECEDES — and it recedes by weight, never by
   hiding: the row is still drawn, still readable, still opens. */
.stn-row.is-unreachable .stn-row-name { font-weight: var(--w-regular); color: var(--fg-2); }

/* ---- the stack, as three counts ------------------------------------------- */
.stn-stack { display: flex; gap: var(--s2); justify-self: end; }
.stn-count { display: flex; flex-direction: column; align-items: center; justify-content: center;
             min-width: calc(var(--ctrl-h) + var(--s3)); padding: var(--s1) var(--s2);
             background: var(--bg-2); border: var(--bw) solid var(--stroke-2);
             border-radius: var(--radius); color: var(--fg-3); }
/* THE ONE THAT IS NOT EMPTY. Reuses the app's single non-brand status pair
   (STYLE-GUIDE §4, "one accent only") — a particle waiting in a basket and a
   raised flag are the same idea, so they are the same colour. */
.stn-count.has { background: var(--flag-bg); border-color: var(--flag-bg);
                 color: var(--flag-fg); }
.stn-count-n { font-family: var(--ui-mono); font-size: var(--ui-ui);
               line-height: var(--ui-ui-lh); font-weight: var(--w-semibold); }
.stn-count-l { font-size: var(--ui-caption); line-height: var(--ui-caption-lh); }
.stn-stack-lg { margin-top: var(--s4); }
.stn-stack-lg .stn-count { min-width: calc(var(--ctrl-h) * 2); padding: var(--s2) var(--s3); }

/* ---- the tag on the basket -------------------------------------------------
   MAKH 05 p.90: "Each basket is tagged with the person's name and underneath
   the name is their post or posts." The tag is that, and nothing else. */
.stn-tag { margin: var(--s0) var(--s0) var(--s3); }
.stn-name { margin: var(--s0); font-family: var(--ui-font-serif);
            font-size: var(--ui-title); line-height: var(--ui-title-lh);
            font-weight: var(--w-regular); letter-spacing: var(--ui-track-title);
            color: var(--fg-1); }
.stn-kind { margin: var(--sh) var(--s0) var(--s3); font-size: var(--ui-caption);
            line-height: var(--ui-caption-lh); color: var(--fg-3); }
.stn-posts { margin: var(--s0); padding: var(--s0); list-style: none;
             display: flex; flex-direction: column; gap: var(--s2); }
.stn-post { padding-left: var(--s3); border-left: var(--bw) solid var(--stroke-1); }
.stn-post-t { color: var(--fg-1); }

/* ---- RUSH — a POSITION at the desk, never a container ----------------------
   MAKH 07.4 OT12: a RUSH particle is placed in the centre of the desk and NOT
   in the IN basket. So it gets no basket chrome — no border box, no count
   badge, nothing that reads as a fourth basket. It is a marked place on the
   desk, and the sheet says so by giving it the attention rule and no walls. */
.rush-card { border-left: var(--bw-accent) solid var(--flag-fg); }
.rush-source { margin: var(--s0) var(--s0) var(--s2); color: var(--fg-1);
               font-style: italic; }
.rush-ruling { margin: var(--s2) var(--s0) var(--s0); font-size: var(--ui-caption);
               line-height: var(--ui-caption-lh); color: var(--fg-3); }

/* ---- narrow screens --------------------------------------------------------
   The row becomes three stacked lines rather than three squeezed columns.
   Nothing is truncated at any width (§18.1 rule 5) — a long name wraps. */
@media (max-width: 900px) {
  .stn-row { grid-template-columns: 1fr; gap: var(--s2); }
  .stn-stack { justify-self: start; }
}

/* ============================================================================
   §20 — THE STATISTICS SURFACE (added 2026-08-03, on Eames's specification)

   The wall, the sheets, the condition chip. App vocabulary throughout —
   nothing in §20 ever touches the chart.

   NO NEW TOKEN IS SPENT. Every colour here resolves through an existing
   `tokens.css` entry, and the condition chip deliberately takes the app's ONE
   non-brand status pair rather than minting a second accent (§4, "one accent
   only"). A condition is not a traffic light: the WORD carries the meaning and
   the colour only keeps the three that are waiting from being missed.

   THE PLOT'S GEOMETRY IS NOT A TOKEN CANDIDATE AND IS DELIBERATELY NOT ONE.
   Everything inside the SVG — 720×320, the margins, the stroke widths, the
   point radius — is viewBox space, which is unitless and scales with the
   element. Those are coordinates, the same category as the chart's own, not
   design values in pixels. Only the plot's INK is here.
   ============================================================================ */

.wall-lead { margin: var(--s0) var(--s0) var(--s5); max-width: var(--w-read); }
.wall-lead p { margin: var(--s0) var(--s0) var(--s2); }

/* The certified division product, printed verbatim beside its division.
   NO max-width. A first draft capped this cell at a rem literal; the grid
   distributes its own columns and the text wraps without help, so the cap was
   a raw value buying nothing. `test_desks` caught it -- and its scan runs from
   the comm-center marker TO THE END OF THE SHEET, so anything appended after
   that section is inside its scope. Worth knowing before adding a literal
   here. */
.gr td.product .cap { color: var(--fg-2); }

/* THE FIGURE IS A BUTTON, because it opens the readings behind it. "A
   statistic you cannot click through to its own evidence is a claim." */
.figure-btn { display: block; width: 100%; text-align: left; background: none;
              border: 0; padding: var(--s0); font: inherit; color: inherit;
              cursor: pointer; }
.figure-btn:hover .figure-n { text-decoration: underline; }
.figure-n { font-family: var(--ui-font-serif);
            font-size: var(--ui-title); line-height: var(--ui-title-lh);
            font-weight: var(--w-regular); letter-spacing: var(--ui-track-title);
            color: var(--fg-1); }

/* THE CONDITION CHIP — a control, never an ornament. Clicking it opens the
   condition's own panel. */
.cond { display: inline-block; border: var(--bw) solid transparent;
        border-radius: var(--r-pill); padding: var(--sh) var(--s2);
        font-size: var(--ui-ui); line-height: var(--ui-ui-lh);
        font-weight: var(--w-semibold); background: var(--bg-2);
        color: var(--fg-2); cursor: pointer; }
.cond:hover { background: var(--bg-hover); }
.cond-raised { background: var(--flag-bg); color: var(--flag-fg); }
.cond-plain  { background: var(--bg-2);    color: var(--fg-2); }
.cond-none   { background: var(--bg-2);    color: var(--fg-4); }

/* A statistic carrying his own word reads differently from one still proposed.
   Brand wash, exactly as every other "this is settled" chip in the app. */
.chip-adopted { background: var(--brand-wash); color: var(--brand-ink); }

/* ---- the sheets -----------------------------------------------------------
   ONE PLOT PER ROW, and that is a legibility decision rather than a layout
   preference: the SVG scales with its container, so two side by side on the
   data measure would scale the axis labels DOWN, below the caption floor,
   which is the one thing §3's type floors do not permit. Full width scales
   them UP. */
.plot-wrap { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
.plot { padding: var(--s4) var(--s0) var(--s0); border-top: var(--bw) solid var(--stroke-2); }
.plot:first-child { border-top: 0; padding-top: var(--s0); }
.plot h3 { margin: var(--s0) var(--s0) var(--s1); font-size: var(--ui-body);
           line-height: var(--ui-body-lh); font-weight: var(--w-semibold); }
.plot-note { margin: var(--s0) var(--s0) var(--s3); font-size: var(--ui-caption);
             line-height: var(--ui-caption-lh); color: var(--fg-3); }
.plot-blank { padding: var(--s5); background: var(--bg-2);
              border-radius: var(--radius); }
.plot-blank p { margin: var(--s0); color: var(--fg-3); }
.stamp { display: inline-block; margin-bottom: var(--s2);
         padding: var(--sh) var(--s2); border-radius: var(--r-pill);
         background: var(--flag-bg); color: var(--flag-fg);
         font-size: var(--ui-caption); line-height: var(--ui-caption-lh);
         font-weight: var(--w-semibold); }

.plot-svg { display: block; width: 100%; height: auto; }
.plot-svg .gl  { stroke: var(--stroke-2); }
.plot-svg .ax  { stroke: var(--stroke-1); }
.plot-svg .ln  { stroke: var(--brand); }
.plot-svg .void{ stroke: var(--fg-4); }
.plot-svg .lbl { fill: var(--fg-3); font-size: var(--plot-lbl); }
.plot-svg .lbl-v { fill: var(--fg-4); font-size: var(--plot-lbl); font-style: italic; }
.plot-svg .pt  { fill: var(--brand); }
/* A RUNNING FIGURE IS DRAWN HOLLOW. The week is still open, so it is not a
   marked point, and a condition is read off a slant between MARKED points. */
.plot-svg .pt-running { fill: var(--bg-1); stroke: var(--brand); stroke-width: 2; }
/* AN OFF-CADENCE POINT — a true reading of a true record, taken on a day that
   is not a week close. Drawn as an open square joined to nothing, so it cannot
   be mistaken for part of the line and cannot take part in the slant. The
   bookkeeping desk's caveat 9, 2026-08-06: "The two sets should not be drawn as
   one continuous series without saying so on the face of the graph." It takes
   the muted ink already in use for a hole in the series, NOT a second accent. */
.plot-svg .pt-aside { fill: none; stroke: var(--fg-4); stroke-width: 2; }

/* THE CONDITION LINE UNDER A SHEET. Two words and two chips: the condition read
   off this week's slant, and the condition standing on the record. They are
   different things and the sheet never blurs them. */
/* The statements under a sheet: one per line, at the reading measure, so a
   long counting method reads as prose instead of as a grey wall. */
.plot-foot { margin: var(--s0) var(--s0) var(--s1); max-width: var(--w-read); }
.plot-cond { display: flex; align-items: center; flex-wrap: wrap;
             gap: var(--s2); margin: var(--s3) var(--s0) var(--s0); }
.plot-cond .lbl { font-size: var(--ui-caption); line-height: var(--ui-caption-lh);
                  color: var(--fg-3); text-transform: none; }
.plot-cond .lbl + * { margin-right: var(--s4); }

/* THE OIC WALL — one card per division, stacked. No new surface: it is the
   app's own `.card` at the app's own card rhythm, so the wall reads as the
   same room as every other view. */
.oic-wall { display: flex; flex-direction: column; gap: var(--s5); }
.oic-wall > .card { margin: var(--s0); }

/* ---- the honest blank's way forward (Eames's Appendix item 3, 2026-08-03) --
   The blank states the fact; the line under it states where the fact comes
   from, or offers the route that would fill it. Nothing here is a "coming
   soon" badge — §7 retired those and this does not bring them back. */
.nothed-block { margin: var(--s0) var(--s0) var(--s2); max-width: var(--w-read); }
.nothed-block .nothed { margin: var(--s0) var(--s0) var(--s1); }
.nothed-fwd { margin: var(--s0); font-size: var(--ui-caption);
              line-height: var(--ui-caption-lh); color: var(--fg-3); }
.nothed-go { display: inline-block; margin-top: var(--s1);
             font-size: var(--ui-caption); line-height: var(--ui-caption-lh);
             font-weight: var(--w-semibold); color: var(--brand-ink); }

/* A CARD THAT IS ALSO A DISCLOSURE (his ruling of 2026-08-03: "We don't need
   everything going on all at once in the same spot"). It is the app's existing
   `.disc` behaviour wearing the app's existing `.card` surface — no third
   pattern, and no value here that a token does not already carry. */
.disc-card { padding: var(--s0); }
.disc-card > .disc-sum { padding: var(--s4) var(--s5); min-height: var(--row-h); }
.disc-card > .disc-sum .card-note { margin-left: auto; }
.disc-card > .disc-body { padding: var(--s0) var(--s5) var(--s5); }

/* THE TARGET NUMBER IS NOT PART OF THE TARGET'S TEXT, and until 2026-08-03 it
   read as if it were: "13Drill your employees so that they know the org
   board". `.target-no` is used inline beside source text on the Programs view,
   where nothing separated the two. Found by looking at the rendered preview.
   The number stays in mono at the caption step, as §14 already has it — only
   the space beside it is new. */
.q-row .target-no { margin-right: var(--s2); }
.q-row .target-text { display: inline; }