/* Orkora System of Record — v8.
   Monochrome chrome, light and dark themes; colour appears only where it
   carries meaning: status, classification, attention. Single-screen app:
   the page never scrolls; panels own their overflow. Arial per D14. */

:root {
  --bg: #cfd4cb; --panel: #ffffff; --ink: #1b1f24;
  /* surface layering (founder, 29 July 2026; well deepened v16-dev.39 —
     founder: "white cards on a white box"; ground deepened v16-dev.89 —
     founder: "panel colours are indistinguishable from the background"):
     page bg → panel well → object card read as three lightness steps,
     no hue — the colour law is untouched. --panel-2 is the recessed
     panel interior; --card is the object surface that lifts off it.
     The dev.39 pass left bg-vs-well at 1.02:1, so a panel whose whole
     interior is the well melted into the page. The ladder now descends
     bg #cfd4cb (deepest) → well #dee1da (~1.13:1 above bg) → white
     panel/card (~1.5:1 above bg): panels read as raised surfaces
     everywhere, wells still sit sunken inside them. */
  --panel-2: #dee1da; --card: #ffffff;
  --line: #bfc6cd; --line-soft: #dfe3e7; --quiet: #556170;
  --chrome: #16191d; --chrome-ink: #c9cfd6; --chrome-line: #2c3239;
  --chrome-red: #ef6f64;
  --hi: #ffffff;
  /* functional. --fn-green is set to clear 4.5:1 as TEXT on --panel-2
     (2f7d49 measured 4.42:1 there, a hair under AA); it still reads as
     the same green. --fn-amber/--fn-amber-ink split (accessibility fix,
     30 July 2026): yellow is intrinsically light, so one value cannot
     serve both as a fill and as text. --fn-amber is the bright fill
     (measured 9.78:1 against #14171a ink) — state badges, lamps, the
     act-marker edge bar, gauge cells, count pills. --fn-amber-ink is for
     amber used AS TEXT on light surfaces (6.78:1 on white, 5.92:1 on
     --panel-2 — the bright fill value there would be 1.84:1, invisible). */
  /* fn-green/fn-red/c-public deepened with the dev.89 ground (the
     darker --bg dropped them to 4.0-4.3:1 as text on bare bg; all
     three now clear 4.5:1 on every paired surface, same hues). */
  --fn-green: #245f37; --fn-amber: #f5b400; --fn-amber-ink: #7a5400;
  --fn-blue: #2e5e8c; --fn-red: #a02d24;
  /* D12 classification. --c-confidential darkened with --fn-amber-ink
     (same accessibility pass): the prior #b07c0f measured 3.66:1 on white
     and 3.20:1 on --panel-2 as text — both fail AA. The heat-ramp hue
     order (Public cool green, Internal slate, Confidential gold,
     Restricted red, Controlled maroon) is unchanged, only darkened. */
  --c-public: #1b5e33; --c-internal: #46525e; --c-confidential: #7a5400;
  --c-restricted: #a0272b; --c-controlled: #5c1a1a;
  /* D30 distribution gauge (finding 4, v16-dev.39): a dedicated token,
     not an alias of --c-confidential — distribution (how carefully a
     licensed holding must be handled) and classification (Confidential)
     are different decisions on different channels and must be free to
     retune independently, even though they start at the same value. */
  --dist-licensed: #7a5400;
}
[data-theme="dark"] {
  /* v16-dev.39 (founder measurement): the whole document grid read as
     one dark mass — ground-vs-panel 1.11:1, panel-vs-card 1.09:1,
     card-vs-border 1.35:1. Deepened ground and strengthened the border
     so the three levels separate: ground-vs-card now 1.30:1,
     card-vs-border 1.63:1 — --ink 11.9:1 and --quiet 5.7:1 on --card. */
  --bg: #0f1215; --panel: #191d23; --ink: #e6e9ec;
  /* dark inverts the step: the well stays at panel, cards rise lighter */
  --panel-2: #191d23; --card: #232a33;
  --line: #414b57; --line-soft: #272d34; --quiet: #99a3ae;
  --chrome: #101316; --chrome-ink: #c9cfd6; --chrome-line: #262c33;
  --chrome-red: #ef6f64;
  --hi: #ffffff;
  /* dark theme's amber is already legible as both fill (8.34:1 with
     near-black text) and text on dark panels, so fill and ink share one
     value — components reference the same two token names either theme */
  --fn-green: #57c07c; --fn-amber: #e0a72e; --fn-amber-ink: #e0a72e;
  --fn-blue: #71aede; --fn-red: #ef6f64;
  --c-public: #57c07c; --c-internal: #9aa8b5; --c-confidential: #e0a72e;
  --c-restricted: #ef6f64; --c-controlled: #d98d85;
  --dist-licensed: #e0a72e;
}

/* The house family in the interface itself (fonts-everywhere
   remainder, 23 August 2026): Source Sans 3 for the UI, Source Code Pro
   for serials and hashes — the same faces every document carries.
   local() first so an installed copy wins without a download; woff2
   subsets served from /static/fonts. The probe-* faces further down
   stay local()-only and keep answering "installed on this machine". */
@font-face { font-family: "Source Sans 3"; font-weight: 400;
  font-style: normal; font-display: swap;
  src: local("Source Sans 3"),
       url("/static/fonts/SourceSans3-Regular.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600;
  font-style: normal; font-display: swap;
  src: local("Source Sans 3 SemiBold"), local("Source Sans 3"),
       url("/static/fonts/SourceSans3-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700;
  font-style: normal; font-display: swap;
  src: local("Source Sans 3 Bold"), local("Source Sans 3"),
       url("/static/fonts/SourceSans3-Bold.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400;
  font-style: italic; font-display: swap;
  src: local("Source Sans 3 Italic"), local("Source Sans 3"),
       url("/static/fonts/SourceSans3-It.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-weight: 400;
  font-style: normal; font-display: swap;
  src: local("Source Code Pro"),
       url("/static/fonts/SourceCodePro-Regular.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-weight: 700;
  font-style: normal; font-display: swap;
  src: local("Source Code Pro Bold"), local("Source Code Pro"),
       url("/static/fonts/SourceCodePro-Bold.woff2") format("woff2"); }

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Source Sans 3", Arial, Helvetica, sans-serif; line-height: 1.45; font-size: 15px; }
.mono, .hash { font-family: "Source Code Pro", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; }
a { color: var(--fn-blue); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--fn-blue); outline-offset: 2px; }
.quiet { color: var(--quiet); } .small { font-size: 0.85rem; }
.error { color: var(--fn-red); font-weight: 700; }

/* shell */
body.shell { display: grid; grid-template-columns: 216px 1fr; height: 100vh; height: 100dvh; overflow: hidden; }
.rail { background: var(--chrome); color: var(--chrome-ink); display: flex;
  flex-direction: column; padding: 1rem 0; overflow-y: auto; }
.wordmark { color: var(--hi); font-weight: 700; letter-spacing: 0.16em;
  padding: 0 1.2rem 0.9rem; display: block; }
.wordmark span { display: block; font-weight: 400; letter-spacing: 0.02em;
  font-size: 0.75rem; opacity: 0.75; margin-top: 0.1rem; }
.wordmark.dark { color: var(--ink); padding: 0 0 1.2rem; }
.rail nav { display: flex; flex-direction: column; border-top: 1px solid var(--chrome-line); }
.rail nav a { color: var(--chrome-ink); padding: 0.55rem 1.2rem; font-size: 0.92rem;
  border-left: 3px solid transparent; display: flex; align-items: center; }
.rail nav a:hover { color: var(--hi); background: rgba(255,255,255,0.05); text-decoration: none; }
.rail nav a.active { color: var(--hi); background: rgba(255,255,255,0.07);
  border-left-color: var(--hi); font-weight: 700; }
/* count pills are blue everywhere — information, not alarm (approved
   design study, 29 July 2026) */
.count { font-style: normal; margin-left: auto; background: var(--fn-blue);
  color: #fff; font-size: 0.72rem; font-weight: 700; border-radius: 9px;
  padding: 0.05rem 0.5rem; }
.soon { font-style: normal; font-size: 0.65rem; font-weight: 700;
  background: var(--line-soft); color: var(--quiet); border-radius: 2px;
  padding: 0.05rem 0.35rem; margin-left: 0.35rem; vertical-align: middle; }
.rail nav a .soon { background: var(--chrome-line); color: var(--chrome-ink); margin-left: auto; }
.rail-user { margin-top: auto; padding: 0.9rem 1.2rem 0;
  border-top: 1px solid var(--chrome-line); font-size: 0.82rem;
  display: flex; flex-direction: column; gap: 0.12rem; }
.rail-user .quiet { color: var(--quiet); }
.rail-user a { color: var(--quiet); margin-top: 0.35rem; }
.rail-user a.rail-name { color: var(--chrome-ink); margin-top: 0; font-weight: 700; }
/* one hover grammar for everything in the rail: colour to --hi, the nav
   wash, never an underline */
.wordmark:hover, .rail-user a.rail-name:hover { color: var(--hi);
  background: rgba(255, 255, 255, 0.05); text-decoration: none; }

.stage { display: grid; grid-template-rows: auto 1fr auto; height: 100vh;
  height: 100dvh; min-width: 0; overflow: hidden; }
.topbar { background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 0.5rem 1.4rem; display: flex; gap: 0.8rem; align-items: center; }
.go { flex: 1; }
.go input { width: min(520px, 100%); font: inherit; padding: 0.4rem 0.8rem;
  border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--ink); }
.newbtn, .themebtn { font-weight: 700; background: var(--ink); color: var(--bg);
  padding: 0.4rem 0.9rem; border-radius: 2px; white-space: nowrap; border: none; }
.newbtn:hover, .themebtn:hover { opacity: 0.85; text-decoration: none; }
.themebtn { background: transparent; color: var(--quiet); border: 1px solid var(--line);
  font-weight: 400; font-size: 0.85rem; cursor: pointer; }

main { min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  padding: 0.9rem 1.4rem; gap: 0.7rem; }
/* flow pages: one scrollbar for the whole page, panels grow to content —
   nested scrollbars hide content (founder, 28 July 2026). Content-style
   pages opt in via main_class "flow"; dashboards keep the panel model. */
main.flow { overflow-y: auto; padding-bottom: 2rem; }
main.flow .panels { flex: 0 0 auto; grid-auto-rows: auto;
  /* A panel never paints more card than it has content (founder, 22
     August 2026). Grid rows stretch items to the tallest sibling by
     default, so a short panel beside a tall one painted its unused
     height as a white block. Content-sized on flow pages, always. */
  align-items: start; }
main.flow .panels.grid-2, main.flow .panels.grid-2x2 { grid-template-rows: none; }
main.flow .panel { min-height: 0; }
main.flow .panel-body { flex: none; overflow-x: auto; overflow-y: visible; }

.page-head { flex: 0 0 auto; }
h1 { font-size: 1.25rem; font-weight: 700; margin: 0; }
h1 .quiet { font-weight: 400; font-size: 0.95rem; }
.lede { color: var(--quiet); max-width: 90ch; margin: 0.2rem 0 0; font-size: 0.9rem; }
.crumb { margin: 0 0 0.3rem; font-size: 0.82rem; color: var(--quiet); }

/* panels */
.panels { flex: 1 1 auto; min-height: 0; display: grid; gap: 0.8rem; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.grid-1-2 { grid-template-rows: auto 1fr; }
/* min-width: 0 completes the shrink chain (founder report, 6 August
   2026: Activities and Team spilled off screen on portrait). A grid
   child's default min-width is auto = its content's max-content, so
   one wide table or nowrap row forced a panel column beyond its 1fr
   share, and the fixed-viewport shell clipped the excess off screen
   with no scrollbar. With the chain intact, content ellipsizes and
   wraps inside its share instead. */
.panel { display: flex; flex-direction: column; min-height: 0;
  min-width: 0;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(16,20,26,0.07); }
.panel-head { flex: 0 0 auto; padding: 0.45rem 0.9rem; background: var(--panel-2);
  border-bottom: 1px solid var(--line); display: flex; align-items: baseline;
  gap: 0.6rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink); }
.panel-head .count { margin-left: 0; }
.panel-head .pull { margin-left: auto; text-transform: none;
  letter-spacing: normal; font-weight: 400; }
/* No bounce (founder, 5 August 2026): a scrollbar that appears and then
   disappears shifts the layout by its own width — the visible "jump" on
   loading listing screens before the fit measurement lands. The two
   scrollers that actually toggle during load reserve their gutter: the
   flow-page scroller and the listing cards region. NOT every
   panel-body — a blanket gutter painted an empty strip down the right
   of panels that never scroll (founder report, 6 August 2026: "an
   artifact at the right of the RACI table"). */
main.flow, .panel-body.listing #doc-cards, .panel-body.listing #lib-cards,
.panel-body.listing #reg-cards { scrollbar-gutter: stable; }
/* Checkboxes ride their text, everywhere (founder cleanup, 7 August
   2026: boxes sat at browser-default baselines inside unstyled
   fieldset frames). One rule, not per-screen fixes. */
input[type="checkbox"] { width: 0.95rem; height: 0.95rem;
  vertical-align: -0.15rem; margin: 0 0.3rem 0 0;
  accent-color: var(--fn-blue); flex: 0 0 auto; }
label:has(> input[type="checkbox"]) { display: inline-flex;
  align-items: baseline; gap: 0.35rem; }
.worklist td input[type="checkbox"] { vertical-align: middle; margin: 0; }
/* the authority / reviewer fieldsets: the house line style instead of
   the browser's default frame; entries wrap on an even grid */
fieldset.authority-grid { border: 1px solid var(--line);
  border-radius: 2px; padding: 0.45rem 0.7rem 0.6rem;
  margin: 0 0 0.5rem; display: flex; flex-wrap: wrap;
  gap: 0.35rem 1.1rem; }
fieldset.authority-grid legend { font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--quiet); padding: 0 0.35rem; }
fieldset.authority-grid table { flex: 1 1 100%; }
/* Site sweep, 7 August 2026: the repeated inline styles become house
   classes, so a spacing decision is made once and every screen obeys
   it. .pop is the disclosure panel that used to be hand-positioned on
   the activity and process pages — now viewport-safe by construction:
   it can never be wider than the glass, and it flips to the left edge
   rather than overflowing the right. */
.pop { position: absolute; z-index: 30; background: var(--card);
  border: 1px solid var(--line); padding: 0.6rem 0.7rem;
  margin-top: 0.3rem; right: 0; left: auto;
  width: max-content; max-width: min(360px, calc(100vw - 2rem));
  text-transform: none; letter-spacing: normal; font-weight: 400;
  box-shadow: 0 2px 8px rgba(16,20,26,0.12); }
[data-theme="dark"] .pop { box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.pop-host { position: relative; }
/* a narrow stacked form block: was max-width:420px inline, five times */
.form-narrow { max-width: 420px; }
/* Page-true reading of a holding's extracted text (7 August 2026):
   the pager sits above the page, controls anchored in one place on
   every holding so the position is learned once. The page body scrolls
   nothing sideways — long lines wrap, and the gutter is reserved so
   turning a page never shifts the layout. */
.pager-line { display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap; margin-bottom: 0.5rem; }
.pager-line .button-small.disabled { opacity: 0.4; pointer-events: none; }
.pager-jump { margin-left: auto; }
.pager-jump input { width: 5rem; }
/* No inner scroller (founder report, 7 August 2026): the holding is a
   flow page, so the PAGE scrolls and panels grow to their content —
   the citation panel did, this did not, and two scrollbars on one
   screen is the defect the "one scrollbar per page" law names. A page
   of extracted text is naturally bounded (it is one page), so it needs
   no cap at all. */
pre.page-text { white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: inherit; font-size: 0.88rem; line-height: 1.5;
  margin: 0; }
/* The reading bar: one quiet line carrying the holding's address and
   its two controls, with the raw/reflowed toggle pushed right. The
   explanations live in tooltips and the help legend, never as standing
   copy on the page (founder, 7 August 2026: three paragraphs of
   instruction had become furniture on every holding). */
.reading-bar { display: flex; align-items: baseline; gap: 0.45rem;
  flex-wrap: wrap; margin: 0 0 0.45rem; }
.reading-bar .pull { margin-left: auto; }
.shelfmark { letter-spacing: 0.02em; }
/* the holding's own contents table (7 August 2026): indented by level,
   the current section marked, each entry a jump to its page */
.contents-box { border: 1px solid var(--line); border-radius: 2px;
  margin-bottom: 0.6rem; background: var(--panel-2); }
.contents-box > summary { cursor: pointer; padding: 0.4rem 0.7rem;
  font-size: 0.8rem; font-weight: 700; }
/* likewise: the contents list grows, and stays collapsed by default on
   a long document so the reader opts into its length */
.contents-list { list-style: none; margin: 0; padding: 0 0.7rem 0.6rem; }
.contents-list li { display: flex; gap: 0.5rem; align-items: baseline;
  padding: 0.12rem 0; font-size: 0.82rem; }
.contents-list li > a { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.contents-list li > a.here { font-weight: 700; color: var(--fn-blue); }
.contents-list .lvl-2 { padding-left: 1rem; }
.contents-list .lvl-3 { padding-left: 2rem; }
.contents-list .lvl-4 { padding-left: 3rem; }
/* a soft divider between repeated blocks in one panel */
.block-sep { margin-bottom: 0.8rem; border-top: 1px solid var(--line);
  padding-top: 0.5rem; }
.block-sep:first-of-type { border-top: none; padding-top: 0; }
/* Team authority matrix adapts to width (founder, 5 August 2026):
   below 1200px the per-type columns yield to a per-person summary
   cell — the same facts, never a sideways scroll. */
.auth-sum { display: none; }
/* 1400, not 1200 (founder report, 6 August 2026): a portrait monitor
   (1080-1440 wide) and a 1366 laptop both need the summary form — the
   full matrix only ever fits comfortably on a wide landscape screen. */
@media (max-width: 1400px) {
  .worklist .auth-col { display: none; }
  .worklist td.auth-sum, .worklist th.auth-sum { display: table-cell; }
}
.panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.7rem 0.9rem;
  background: var(--panel-2); }
.panel-body.tight { padding: 0; }
/* Fit-to-viewport paging (founder, 30 July 2026): a listing panel is a
   flex column of its own — the card grid grows and, if measurement is
   ever slightly off, scrolls rather than clipping; the count and the
   pager are fixed-height rows pinned directly under it, so they sit in
   the same place on every screen and every page of the same listing,
   never pushed out of view by the grid above them. Documents, the
   reference shelf and Registers all share this one rule (`.panel`
   never grows past the viewport at desktop width — see `main` above —
   so this column never needs the page itself to scroll). */
.panel-body.listing { display: flex; flex-direction: column; gap: 0.5rem; }
.panel-body.listing #doc-cards, .panel-body.listing #lib-cards,
.panel-body.listing #reg-cards { flex: 1 1 auto; min-height: 0; overflow: auto; }
.panel-body.listing #doc-count, .panel-body.listing #lib-count,
.panel-body.listing #reg-count, .panel-body.listing #doc-pager,
.panel-body.listing #lib-pager { flex: 0 0 auto; margin: 0; }
/* Surface layering, four levels (CLAUDE.md §6, v16-dev.39): a panel that
   holds a collection recesses its body. `.panel-body` already carries
   `--panel-2` unconditionally above (every panel interior is the well,
   not only ones with card grids), so this is a defensive restatement,
   not a new behaviour — checked directly against the real markup
   (every `.objgrid`/`.objlist` in the templates sits inside a
   `.panel-body` ancestor, none directly inside a bare `.panel`). The
   defect the founder saw was real regardless: --panel-2 (#eef0eb) and
   --card (#ffffff) measured only 1.15:1, imperceptible as a step —
   fixed by deepening --panel-2 itself (see the :root comment above)
   rather than by this selector, which would have been a no-op against
   the old values too. Kept here as the load-bearing statement in case a
   future panel variant ever stops inheriting the base rule. */
.panel-body:has(> .objgrid), .panel-body:has(> .objlist) { background: var(--panel-2); }
/* "your move" marker (founder, 30 July 2026): a left edge bar on the
   element holding the act that is THIS reader's own to perform — amber
   because a person must act, red when that act is also overdue. A bar,
   never an outline: the outline channel is reserved for schedule
   criticality (.critical/.critical-late above). At most one marker per
   page; the layout itself never varies by reader or state, only this. */
/* Colour never travels alone (founder-approved, 5 August 2026): at
   area scale the second channel is PATTERN — diagonal stripe for
   amber, crosshatch for red, and only those two (calm states stay
   solid; pattern spent on everything says nothing). Stripe vs
   crosshatch separates the pair the common colour deficiencies
   collapse, so no colour-blind mode exists: one UI for every viewer.
   The 4px track stays reserved by a transparent border; the pattern is
   painted over it, gaps showing the true surface beneath. */
.edge-amber, .edge-red { border-left: 4px solid transparent;
  position: relative; }
.edge-amber::before, .edge-red::before { content: ""; position: absolute;
  left: -4px; top: 0; bottom: 0; width: 4px; pointer-events: none; }
.edge-amber::before { background: repeating-linear-gradient(45deg,
  var(--fn-amber) 0 4px, transparent 4px 7px); }
.edge-red::before { background:
  repeating-linear-gradient(45deg, var(--fn-red) 0 1.5px, transparent 1.5px 4px),
  repeating-linear-gradient(-45deg, var(--fn-red) 0 1.5px, transparent 1.5px 4px); }
.fields.edge-amber, .fields.edge-red { padding-left: 0.6rem; }
.empty { color: var(--quiet); border: 1px dashed var(--line);
  padding: 0.8rem 1rem; border-radius: 2px; font-size: 0.9rem; background: var(--panel); }
.empty-cell { color: var(--quiet); text-align: center; padding: 1rem; }
.pull { margin-left: auto; }

/* object block */
.objgrid { display: grid; gap: 0.55rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.objlist { display: grid; gap: 0.55rem; grid-template-columns: 1fr; }
.obj { display: grid; grid-template-columns: 1fr auto; grid-template-areas:
  "type serial" "title title" "facts facts"; gap: 0.1rem 0.6rem;
  background: var(--card); border: 1px solid var(--line);
  /* the 4px left track is reserved for the your-act marker; unmarked
     cards keep it neutral so marking never shifts geometry (3rd ed.) */
  border-left: 4px solid var(--line); padding: 0.5rem 0.7rem; color: var(--ink); }
.obj-type { grid-area: type; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--quiet); font-weight: 700; }
.obj-serial { grid-area: serial; font-size: 0.78rem; color: var(--quiet); }
.obj-title { grid-area: title; font-weight: 700; font-size: 0.92rem;
  line-height: 1.3; color: var(--ink);
  /* fixed anatomy: the title slot is always exactly two lines — clamped
     beyond, reserved when short — so wrapping never moves what follows */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em; }
.obj-title:hover { color: var(--fn-blue); }
/* fixed anatomy, every card type (the device-card discipline, pack-wide):
   the facts slot is a fixed grid, not a wrap — primary fact top left,
   status badge pinned top right, then one fact per line with reserved
   rows; absent values render an em dash, never a missing element. A
   slot's extent never depends on its content. */
.obj-facts { grid-area: facts; display: grid;
  grid-template-columns: 1fr auto; gap: 0.18rem 0.6rem;
  align-items: center; font-size: 0.78rem; color: var(--quiet);
  margin-top: 0.15rem; }
.obj-facts > * { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.obj-facts .fact-line { grid-column: 1 / -1; min-height: 1.15em; }
.obj-facts .state, .obj-facts [class^="st-"] { grid-column: 2;
  grid-row: 1; justify-self: end; }
.obj-serial, .obj-type, .obj-kind { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
/* fixed geometry, properly: every card of a type reserves the same row
   tracks — the lamp row's y never moves, absent rows stay as space */
.obj-document .obj-facts { grid-template-rows: 1.4em 1.3em 1.3em; }
.obj-activity .obj-facts { grid-template-rows: 1.4em 1.3em 1.4em 1.8em; }
.obj-obligation .obj-facts { grid-template-rows: 1.4em 1.3em; }
.obj-process .obj-facts { grid-template-rows: 1.4em 1.3em; }
.obj-device .obj-facts { grid-template-rows: 1.4em 1.3em 1.3em; }
/* 3rd edition (founder-approved, 5 August 2026): document, holding and
   reference cards share ONE track template — life row, gauge row, court
   row — so the gauges sit at the same y on every card and a mixed
   listing renders as one even population. The old holding template
   (four tracks, 5.0em) was 1em taller than the document card despite
   the in-code claim of equal height; a mixed grid row stretches to the
   tallest card, so the mismatch would have shown everywhere. */
.obj-holding .obj-facts { grid-template-rows: 1.4em 1.3em 1.3em; }
.obj-reference .obj-facts { grid-template-rows: 1.4em 1.3em 1.3em; }
.packact-none { display: inline-block; min-height: 1em; }
/* 3rd edition: type-coded left borders retired — they said in colour
   what the kind badge already says in words, and the colour law allows
   colour only its five meanings. The left edge belongs to the your-act
   marker alone (.edge-amber/.edge-red). */
.obj-view { font-size: 0.76rem; font-weight: 700; border: 1px solid var(--fn-blue);
  padding: 0.05rem 0.45rem; border-radius: 2px; }

/* states & classifications — functional colour only */
.state, [class^="st-"] { display: inline-block; padding: 0.05rem 0.5rem;
  border-radius: 2px; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.03em; border: 1px solid currentColor; }
.state-draft { color: var(--quiet); }
.state-in-review { color: var(--fn-amber-ink); }
.state-approved { color: var(--fn-blue); }
.state-issued { color: var(--fn-green); }
.state-superseded, .state-withdrawn { color: var(--quiet); text-decoration: line-through; }
.st-complete { color: var(--fn-green); } .st-in-progress { color: var(--fn-blue); }
.st-ready { color: var(--fn-blue); } .st-blocked, .st-open { color: var(--quiet); }
.class-public { color: var(--c-public); font-weight: 700; }
.class-internal { color: var(--c-internal); font-weight: 700; }
.class-confidential { color: var(--c-confidential); font-weight: 700; }
.class-restricted { color: var(--c-restricted); font-weight: 700; }
.class-export-controlled, .class-nuclear, .class-cui { color: var(--c-controlled); font-weight: 700; }
.badge-latest { display: inline-block; background: var(--fn-green); color: #fff;
  font-size: 0.74rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 2px; }
.overdue { color: var(--fn-red); font-weight: 700; }
.chain-ok { color: var(--fn-green); font-weight: 700; }

/* record header */
.record-head { flex: 0 0 auto; background: var(--panel);
  border: 1.5px solid var(--ink); padding: 0.7rem 1rem; }
.serial { font-size: 0.85rem; color: var(--quiet); letter-spacing: 0.04em; }
.record-id h1 { margin: 0.1rem 0 0.5rem; }
.record-chips { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  border-top: 1px solid var(--line-soft); padding-top: 0.5rem; }
/* the single quiet facts row beneath identity/position (founder legibility
   direction, 30 July 2026): draft label, with-slot, classification and
   its inheritance, releasability, author, contributors, trace — plain
   text, no chip weight, so it reads as background not controls */
.record-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem;
  margin-top: 0.35rem; align-items: baseline; }
.chip { display: flex; flex-direction: column; gap: 0.05rem; font-size: 0.88rem; }
.chip-label { font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--quiet); }
.chip-wide { min-width: 260px; flex: 1; }
.progressline { display: flex; align-items: center; gap: 0.6rem; }
.progressline .progress { flex: 1; margin: 0; }
.actionbar { flex: 0 0 auto; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.actionbar input { flex: 1; min-width: 220px; }
/* D62: the duty bar. One named owner, a clock, and its state. Spacing
   lives here rather than inline: repeats belong in house classes. */
.duty-bar { margin-bottom: 0.6rem; }
.duty-bar details { margin-top: 0.3rem; }
.duty-bar form { margin-top: 0.3rem; }

/* DAG */
.dag { display: flex; align-items: center; gap: 0.45rem; overflow: auto;
  height: 100%; padding: 0.2rem; }
.dag-stage { display: flex; flex-direction: column; gap: 0.5rem; flex: 0 0 auto; }
.dag-step { display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--card); border: 1px solid var(--line);
  border-left: 5px solid var(--quiet); padding: 0.55rem 0.75rem;
  width: 200px; color: var(--ink); }
a.dag-step:hover { text-decoration: none; background: var(--line-soft); }
.dag-step .flow-title { font-weight: 700; line-height: 1.25; font-size: 0.88rem; }
.dag-step .flow-meta { font-size: 0.74rem; color: var(--quiet); }
/* awaiting predecessors is AHEAD, not stopped — quiet unless late */
.dag-step .waitline { color: var(--quiet); }
.dag-step .waitline.overdue { color: var(--fn-red); }
.dag-step .state, .dag-step [class^="st-"] { align-self: flex-start; margin-top: 0.15rem; }
.dag-arrow { color: var(--quiet); font-size: 1.3rem; flex: 0 0 auto; }
/* masterplan stages: share the panel width equally, equal heights, no
   horizontal scroll — the four stages must always be visible at once */
.mp-stages { align-items: stretch; overflow: visible; }
.mp-stages .dag-stage { flex: 1 1 0; min-width: 0; display: flex; }
.mp-stages .dag-step { width: auto !important; flex: 1; }
.mp-stages .dag-arrow { align-self: center; }
/* status pinned to the card foot so all five badges sit on one line */
.mp-stages .dag-step [class^="st-"] { margin-top: auto; padding-top: 0.15rem; }
.s-complete { border-left-color: var(--fn-green); }
.s-in-progress { border-left-color: var(--fn-blue); }
.s-ready { border-left-color: var(--fn-blue); }
.s-blocked { border-left-color: var(--line); opacity: 0.88; }
.s-template { border-left-color: var(--ink); }
.progress { height: 5px; background: var(--line-soft); border-radius: 3px;
  margin: 0.4rem 0 0.3rem; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--fn-green); }

/* tables */
/* Site sweep, 7 August 2026: tables shrink instead of forcing their
   panel wider. Cells ellipsize; the columns that carry the least
   meaning retire at width in priority order (.col-lo first, then
   .col-mid), the same discipline the team authority matrix proved.
   A table must never be the reason a screen scrolls sideways. */
table.worklist { width: 100%; table-layout: auto; }
.worklist td, .worklist th { overflow: hidden; text-overflow: ellipsis; }
.worklist td .mono, .worklist td a { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .col-lo { display: none; } }
@media (max-width: 820px) { .col-mid { display: none; } }
/* The substance column NEVER retires (founder report, 7 August 2026:
   the audit page had collapsed its Detail column, which is the whole
   narrative). Priority runs the other way: mechanical columns go
   first — row ids, hashes, methods — and the column carrying the
   meaning takes the width they free. */
.detail-col { white-space: normal; overflow-wrap: anywhere;
  min-width: 16rem; width: auto; }
@media (max-width: 1100px) { .detail-col { min-width: 12rem; } }
table.worklist { width: 100%; border-collapse: collapse; background: var(--panel); }
.worklist th { background: var(--chrome); color: var(--chrome-ink); text-align: left;
  padding: 0.45rem 0.8rem; font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.05em; position: sticky; top: 0; }
.worklist td { padding: 0.45rem 0.8rem; border-top: 1px solid var(--line-soft); vertical-align: top; }
.worklist tr:hover td { background: var(--line-soft); }
.shrink { white-space: nowrap; width: 1%; }
.dc-panel { border-collapse: collapse; width: 100%; background: var(--panel); }
.dc-panel th { text-align: left; width: 42%; padding: 0.35rem 0.8rem;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--quiet); border-top: 1px solid var(--line-soft); font-weight: 700; }
.dc-panel td { padding: 0.35rem 0.8rem; border-top: 1px solid var(--line-soft); }
.dc-panel .dc-sys th { background: var(--chrome); color: var(--chrome-ink); width: auto; }
.hash { color: var(--fn-green); }

/* provenance */
.ledger { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ink); }
.ledger li { padding: 0.4rem 0 0.4rem 0.9rem; position: relative; }
.ledger li::before { content: ""; position: absolute; left: -6px; top: 0.85rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--bg);
  border: 2px solid var(--ink); }
.ledger-label { font-weight: 700; margin-right: 0.4rem; }
.ledger .note { margin: 0.2rem 0 0; color: var(--quiet); font-size: 0.85rem; }
.edgetype { display: inline-block; background: var(--chrome); color: var(--chrome-ink);
  font-size: 0.7rem; padding: 0.08rem 0.45rem; border-radius: 2px; letter-spacing: 0.04em; }

/* board */
.board-date { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.board-nav { display: flex; gap: 0.5rem; margin-left: auto; align-items: center; }
.board-nav a { font-weight: 700; border: 1px solid var(--line);
  padding: 0.15rem 0.7rem; border-radius: 2px; color: var(--ink); }
.cadence { color: var(--quiet); font-size: 0.92rem; }
.panels.rows-1 { grid-template-rows: 1fr; }
.ok { color: var(--fn-green); font-weight: 600; }
.warn { color: var(--fn-amber-ink); font-weight: 600; }
.atrisk-label { color: var(--fn-amber-ink); }
.card-soon { opacity: 0.75; }
.obj-progress { grid-area: note; display: flex; align-items: center; }
.obj-progress .progress { flex: 1; margin: 0.15rem 0 0; }
.milestone { display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.35rem 0; border-bottom: 1px solid var(--line-soft); }
.milestone .mdate { font-weight: 700; white-space: nowrap; }
/* status in its own right-aligned column, never floating in the prose */
.milestone [class^="st-"] { margin-left: auto; white-space: nowrap;
  align-self: center; }

/* forms */
input, select, textarea { font: inherit; padding: 0.4rem 0.6rem;
  border: 1px solid var(--line); border-radius: 2px; background: var(--panel); color: var(--ink); }
button { font: inherit; font-weight: 700; background: var(--panel); color: var(--ink);
  border: 1.5px solid var(--ink); padding: 0.38rem 0.9rem; border-radius: 2px; cursor: pointer; }
button:hover { background: var(--line-soft); }
button.primary { background: var(--ink); color: var(--bg); }
button.primary:hover { opacity: 0.88; }
.button-small { display: inline-block; font-size: 0.78rem; font-weight: 700;
  border: 1px solid var(--fn-blue); padding: 0.1rem 0.6rem; border-radius: 2px; }
/* the Open slot greyed in place (fixed-anatomy rule): non-renderable
   formats keep the slot, not the affordance — a quiet border, not blue */
.button-small.quiet { border-color: var(--line); cursor: default; }
/* The canonical CFR citation tag (macros.html cite_tag(), D30 rebuild
   v16-dev.48): title-qualified so it is safe to copy on its own --
   user-select:all so a double-click selects the whole tag instead of
   fragmenting on the parentheses; the Copy button is the one-click path. */
.cite-tag { display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.95rem; -webkit-user-select: all; user-select: all; }
.cite-copy { font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--quiet); background: transparent;
  border: 1px solid var(--line); border-radius: 2px; padding: 0.05rem 0.4rem;
  cursor: pointer; user-select: none; -webkit-user-select: none; }
.cite-copy:hover { color: var(--ink); border-color: var(--fn-blue); }
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.filters input { min-width: 260px; flex: 1; }
/* Naming who carries an object of work (D37): one short field and a
   button, sat beside the chips rather than filling the row. */
.assign { display: inline-flex; gap: 0.4rem; align-items: flex-start; }
.assign input { min-width: 0; max-width: 14rem; }
/* The predictive list. Positioned over the page rather than pushing it
   about, because it appears and vanishes on every keystroke. */
.typeahead { position: relative; display: inline-block; }
.ta-menu { position: absolute; z-index: 40; top: calc(100% + 2px);
  left: 0; min-width: 20rem; margin: 0; padding: 0.2rem; list-style: none;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  max-height: 17rem; overflow-y: auto; }
.ta-menu li { display: grid; grid-template-columns: 1fr auto;
  gap: 0 0.6rem; padding: 0.3rem 0.45rem; border-radius: 4px;
  cursor: pointer; font-size: 0.86rem; }
.ta-menu li.on, .ta-menu li:hover { background: var(--line-soft); }
.ta-name { font-weight: 600; }
.ta-key { font-size: 0.76rem; align-self: center; }
.ta-role { grid-column: 1 / -1; font-size: 0.74rem; }
/* A tick and its sentence on one line, against the stacked label the
   form grid gives everything else. */
.tickline { flex-direction: row !important; align-items: center;
  gap: 0.45rem !important; }
.form-grid { display: grid; gap: 0.55rem; }
.form-grid label { font-size: 0.8rem; color: var(--quiet);
  display: flex; flex-direction: column; gap: 0.2rem; }
.criteria { margin: 0.2rem 0; padding-left: 1.2rem; }
.criteria li { margin-bottom: 0.3rem; }
dl.fields { margin: 0; }
dl.fields dt { font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--quiet); margin-top: 0.6rem; }
dl.fields dd { margin: 0.1rem 0 0; }
.blocked-banner { border: 1px solid var(--fn-red); border-left-width: 4px;
  padding: 0.6rem 0.9rem; margin: 0.6rem 0; font-size: 0.9rem; background: var(--panel); }
.instruction { max-width: 70ch; margin: 0.2rem 0; }
.authority span { display: inline-block; width: 1.1em; text-align: center;
  color: var(--quiet); font-weight: 700; }
.authority .approve { color: var(--fn-green); }
.raci dt { margin-top: 0.4rem; }
.complete-form { display: grid; gap: 0.7rem; max-width: 420px; }
.proc-card { margin-bottom: 0.9rem; }
.playbook-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card-soon { opacity: 0.8; }

/* login */
body.bare { background: var(--chrome); }
.bare-main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.login-wrap { display: flex; flex-direction: column; align-items: center;
  gap: 1.1rem; width: min(400px, 92vw); }
.login-panel { width: 100%; background: var(--panel); color: var(--ink);
  padding: 2.4rem 2.2rem 1.8rem; border-radius: 3px;
  border-top: 4px solid var(--c-confidential);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35); }
.login-panel .wordmark.dark { text-align: center; padding-bottom: 1.7rem; }
.login-panel label { display: block; margin-bottom: 1.1rem; font-size: 0.78rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--quiet); }
.login-panel input { width: 100%; margin-top: 0.35rem; padding: 0.6rem 0.7rem;
  font-size: 1rem; }
.login-panel button { width: 100%; background: var(--ink); color: var(--bg);
  padding: 0.65rem; font-size: 1rem; font-weight: 700; margin-top: 0.3rem;
  cursor: pointer; }
.login-panel button:hover { opacity: 0.9; }
.login-error { border: 1px solid var(--fn-red); border-radius: 3px;
  padding: 0.55rem 0.75rem; font-weight: 400; font-size: 0.9rem;
  margin: 0 0 1.1rem; }
.login-help { margin: 1.3rem 0 0; text-align: center; }
.login-foot { color: var(--chrome-ink); opacity: 0.65; margin: 0; }

.classband { display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.35rem 1.4rem; color: #fff; font-size: 0.78rem; letter-spacing: 0.04em;
  background: var(--c-confidential); }
[data-theme="dark"] .classband { color: #14171a; }

/* orientation & aspect */
@media (min-aspect-ratio: 2/1) and (min-width: 1500px) {
  .grid-2x2 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
}
/* Portrait desktop (founder, 5 August 2026): a rotated monitor is a
   DESKTOP, not a phone. The flow layout fires on narrow widths (and
   portrait tablets up to 1000px), never on aspect ratio alone: above
   1000px, portrait keeps the shell, the rail and fit-to-viewport paging
   (the measured page simply fits more rows). Only the genuinely
   landscape-shaped screens re-flow, trading their width for the
   abundant height: the workpack narrows to two columns with the WI
   keeping its full-height reading column, the seven-day week wraps
   4+3 rather than squeezing days below usefulness, the board stacks
   its upper row in pairs, and the masterplan stages run vertically
   (all visible at once, as the law requires — down the page instead
   of across it). */
@media (orientation: portrait) and (min-width: 1000px) {
  /* The 2x2 quadrant grid KEEPS its shape in portrait (founder report,
     6 August 2026: a stacked version made four sparse full-width bands
     scrolling off the bottom — "one vacuous column"). With the .panel
     shrink chain intact, half a portrait screen is a workable quadrant
     and all four stay on the glass at once. */
  /* NOTE: the portrait workpack override lives AFTER the base workpack
     rules (source order beats it here — the lesson of 12 August). */
  .weekrow { grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(110px, auto); }
  .board-grid { grid-template-rows: none; grid-auto-rows: auto;
    overflow: auto; }
  .grid-board-upper { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3 { grid-column: auto; }
  .mp-stages { flex-direction: column; }
  .mp-stages .dag-arrow { align-self: center; transform: rotate(90deg); }
}
@media (orientation: portrait) and (max-width: 1000px), (max-width: 880px) {
  /* Small screens abandon the single-screen model: the PAGE scrolls,
     panels grow to their content. The desktop shell's fixed-viewport
     grid left only the inner panel scroller usable on a phone. */
  html { font-size: 14px; }
  body { font-size: 14px; }
  body.shell { grid-template-columns: 1fr; grid-template-rows: auto auto;
    height: auto; min-height: 100dvh; overflow: visible; }
  .stage { height: auto; overflow: visible; grid-template-rows: none;
    grid-auto-rows: auto; }
  main { overflow: visible; padding: 0.7rem 0.8rem; }
  h1 { font-size: 1.1rem; }
  .rail { flex-direction: row; align-items: center; flex-wrap: wrap;
    padding: 0.45rem 0.8rem; gap: 0.4rem; overflow: visible; }
  .rail nav { flex-direction: row; border-top: none; flex-wrap: nowrap;
    flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rail nav a { border-left: none; border-bottom: 3px solid transparent;
    padding: 0.3rem 0.55rem; font-size: 0.85rem; white-space: nowrap; }
  .rail nav a.active { border-bottom-color: var(--hi); }
  .rail nav a .count, .rail nav a .soon { margin-left: 0.3rem; }
  .rail-user { margin-top: 0; margin-left: auto; border-top: none; padding: 0; }
  .panels.grid-2, .panels.grid-2x2 { grid-template-columns: 1fr;
    grid-template-rows: none; grid-auto-rows: auto; }
  .panel { min-height: 160px; }
  .topbar { padding: 0.45rem 0.8rem; }
  /* the action strip collapses to the Your-move chip alone */
  .team-chip { display: none; }
  /* lamps and steppers shrink; nothing scrolls sideways */
  .obj-facts .lamps .lamp { width: 10px; }
  .lamp { width: 14px; }
  .stepper .lamp { width: 30px; }
  /* 16px stops iOS Safari zooming the page on input focus */
  input, select, textarea, .go input, .login-panel input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* v9: week board, year bar, diary */
.board-grid { grid-template-rows: 1.25fr 1fr; }
.weekrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; min-height: 0; }
.daycell { display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--line); }
.day-past { opacity: 0.92; }
.day-today { border-color: var(--ink); border-width: 2px; }
.dayhead { flex: 0 0 auto; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: baseline; }
.today-tag { margin-left: auto; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.08em; background: var(--ink); color: var(--bg);
  padding: 0.05rem 0.4rem; border-radius: 2px; }
.daybody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.45rem 0.6rem;
  display: flex; flex-direction: column; gap: 0.3rem; }
.ditem { display: block; font-size: 0.82rem; line-height: 1.35; color: var(--ink);
  padding: 0.15rem 0; }
.ditem:hover { color: var(--fn-blue); text-decoration: none; }
.ditem .quiet { display: block; padding-left: 1rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 0.4rem; vertical-align: baseline; }
.dot-green { background: var(--fn-green); }
.dot-blue { background: var(--fn-blue); }
.dot-red { background: var(--fn-red); }
.ditem-group { border: 1px solid var(--fn-red); border-left-width: 4px;
  padding: 0.3rem 0.5rem; margin-bottom: 0.3rem; }
.ditem-label { display: block; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; margin-bottom: 0.15rem; }
.grid-board-lower { grid-template-columns: 1fr 1.3fr 1fr; min-height: 0; }
.yearbar { position: relative; display: flex; height: 26px; margin: 0.5rem 0 0.2rem;
  border: 1px solid var(--line); background: var(--panel); }
.yq { flex: 1; display: grid; place-items: center; font-size: 0.72rem;
  font-weight: 700; color: var(--quiet); border-left: 1px solid var(--line);
  letter-spacing: 0.08em; }
.yq:first-child { border-left: none; }
.yq:hover { background: var(--line-soft); text-decoration: none; }
.yq-now { color: var(--ink); background: var(--line-soft); }
.ymarker { position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--fn-red); }
.diarystrip { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.3rem; }
.diaryph { margin: 0; flex: 0 0 auto; width: 190px; }
.diaryph img { width: 100%; height: 110px; object-fit: cover;
  border: 1px solid var(--line); display: block; }
.diaryph figcaption { font-size: 0.74rem; color: var(--quiet); margin-top: 0.2rem; }
.diaryform { margin-top: 0.5rem; }
.diaryform input[type="file"] { min-width: 0; flex: 0 1 auto; }
.diaryform input[name="caption"] { min-width: 140px; }
@media (orientation: portrait) and (max-width: 1000px), (max-width: 880px) {
  .weekrow { grid-template-columns: 1fr; grid-auto-rows: minmax(110px, auto); }
  .grid-board-lower { grid-template-columns: 1fr; }
  .board-grid { grid-template-rows: none; grid-auto-rows: auto; overflow: auto; }
}

/* v10: reordered board, 7-day week, carousel, dialog */
.grid-board-upper { grid-template-columns: 1fr 1.4fr 1fr; min-height: 0; }
.board-grid { grid-template-rows: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.weekrow { grid-template-columns: repeat(7, 1fr); }
.day-off { background: var(--line-soft); opacity: 0.85; }
.day-off .dayhead { color: var(--quiet); }
.holiday-tag { font-style: italic; }
.dot-amber { background: var(--fn-amber); }
.dot-ink { background: var(--ink); }
.dot-quiet { background: var(--quiet); }
.atrisk-group { border: 1px solid var(--fn-amber); border-left-width: 4px;
  padding: 0.3rem 0.5rem; margin-bottom: 0.3rem; }
.overbudget { color: var(--fn-amber-ink); font-weight: 700; }
.ditem-gate { font-weight: 700; }
.board-btn-disabled { font-weight: 700; border: 1px solid var(--line);
  padding: 0.15rem 0.7rem; border-radius: 2px; color: var(--quiet); opacity: 0.6; }
.board-date .cadence { color: var(--quiet); font-size: 0.88rem; }
.carousel-panel .panel-body { display: flex; }
.carousel { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 100%;
  overflow: hidden; background: var(--chrome); align-self: center; }
.cslide { position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity 0.6s ease; }
.cslide.on { opacity: 1; }
.cslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cslide figcaption { position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(10,12,14,0.72); color: #e6e9ec; font-size: 0.78rem;
  padding: 0.3rem 0.7rem; }
.cempty { position: static; display: grid; place-items: center; opacity: 1;
  background: var(--panel); }
.dlg { border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink);
  padding: 1.4rem; width: min(420px, 92vw); }
.dlg::backdrop { background: rgba(10,12,14,0.55); }
.dlg h1 { font-size: 1.05rem; margin-bottom: 0.6rem; }
@media (orientation: portrait) and (max-width: 1000px), (max-width: 880px) {
  .grid-board-upper { grid-template-columns: 1fr; }
  .weekrow { grid-template-columns: 1fr 1fr; }
  .board-grid { grid-template-rows: none; grid-auto-rows: auto; overflow: auto; }
}

/* v11: rail groups, aligned board upper row */
.nav-label { display: block; padding: 0.7rem 1.2rem 0.2rem; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--quiet);
  font-weight: 700; }
.nav-help { margin-top: 0.4rem; border-top: 1px solid var(--chrome-line); }
/* SoR issues: the rail's last entry and its only red one (founder,
   15 September 2026: issues are raised inside the system, not in
   messages). --chrome-red, not --fn-red: the rail is dark chrome in
   both themes and the light-theme functional red does not read on it. */
.rail nav a.nav-issues { color: var(--chrome-red); font-weight: 700; }
.rail nav a.nav-issues:hover, .rail nav a.nav-issues.active { color: var(--chrome-red); }
.rail nav a.nav-issues.active { border-left-color: var(--chrome-red); }
.grid-board-upper { display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 0.6rem; min-height: 0; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
@media (orientation: portrait) and (max-width: 1000px), (max-width: 880px) {
  .grid-board-upper { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .nav-label { display: none; }
  .nav-help { border-top: none; margin-top: 0; }
  .rail nav a.nav-issues.active { border-bottom-color: var(--chrome-red); }
}

/* v12: content control */
.notice { border: 1px solid var(--fn-green); border-left-width: 4px;
  background: var(--panel); padding: 0.5rem 0.9rem; margin: 0 0 0.2rem;
  font-size: 0.9rem; flex: 0 0 auto; }
.state-registered { color: var(--quiet); border-style: dashed; }

/* v14.1: containment — nothing renders outside its object's border */
.obj { grid-template-areas: "type serial" "title title" "facts facts" "note note"; }
.obj-note { grid-area: note; font-size: 0.8rem; color: var(--quiet);
  line-height: 1.4; margin-top: 0.25rem; border-top: 1px solid var(--line-soft);
  padding-top: 0.3rem; }
dl.fields dt:first-child { margin-top: 0; }
dl.fields dd > .objlist { margin-top: 0.25rem; }
.panel-body > dl.fields > dd p:first-child { margin-top: 0; }

/* ============ v15: card grammar 2nd edition ============ */
/* One anatomy everywhere; documents look like FILES; colour = status, solid. */

.obj { grid-template-areas: "kind serial" "title title" "facts facts" "note note";
  border-left: 1px solid var(--line); position: relative;
  box-shadow: 0 1px 2px rgba(10,12,14,0.10); }
[data-theme="dark"] .obj { box-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.obj-kind { grid-area: kind; display: flex; align-items: center; gap: 0.45rem; }
.obj-document, .obj-activity, .obj-obligation, .obj-process { border-left: 1px solid var(--line); }

/* documents are files: dog-eared corner + format badge */
.obj-document { padding-right: 1.1rem; }
.obj-document::before { content: ""; position: absolute; top: 0; right: 0;
  width: 0; height: 0; border-style: solid; border-width: 0 16px 16px 0;
  border-color: transparent var(--bg) transparent transparent; }
.obj-document::after { content: ""; position: absolute; top: 0; right: 0;
  width: 0; height: 0; border-style: solid; border-width: 16px 0 0 16px;
  border-color: var(--line) transparent transparent transparent;
  transform: translateX(-0px); filter: brightness(0.96); }
.filebadge { display: inline-block; background: var(--ink); color: var(--bg);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 0.12rem 0.45rem; border-radius: 2px; }
.filebadge-none { background: var(--line-soft); color: var(--quiet); }
.kind-act { background: transparent; color: var(--quiet);
  border: 1px solid var(--line); }
.dag-kind { margin-bottom: 0.15rem; align-self: flex-start; }

/* status & lifecycle: SOLID badges; red=blocked, amber=in work, green=done */
.state, [class^="st-"] { border: none; color: #fff; padding: 0.1rem 0.55rem;
  border-radius: 2px; }
.state-draft { background: var(--quiet); }
.state-registered { background: var(--line-soft); color: var(--quiet); }
.state-in-review { background: var(--fn-amber); color: #14171a; }
.state-approved { background: var(--fn-blue); }
.state-issued { background: var(--fn-green); }
.state-superseded, .state-withdrawn { background: var(--line-soft);
  color: var(--quiet); text-decoration: line-through; }
.st-complete { background: var(--fn-green); }
/* colour law: in progress is normal activity — blue, never amber;
   amber is reserved for "a person must act" */
.st-in-progress { background: var(--fn-blue); }
.st-ready { background: var(--fn-blue); }
.st-blocked { background: var(--fn-red); }
.st-open { background: var(--line-soft); color: var(--quiet); }
[data-theme="dark"] .state-in-review { color: #14171a; }

/* classification: small semantic text chips — never decoration */
[class^="class-"] { font-size: 0.72rem; border: 1px solid currentColor;
  padding: 0 0.4rem; border-radius: 2px; font-weight: 700; }

/* the gold theme dies: classification band goes graphite */
.classband { background: var(--chrome); color: var(--chrome-ink);
  border-top: 1px solid var(--chrome-line); }
[data-theme="dark"] .classband { color: var(--chrome-ink); }

/* flow cards are activity cards: no side colour strips */
.dag-step, .s-complete, .s-in-progress, .s-ready, .s-blocked, .s-template {
  border-left: 1px solid var(--line); }
.dag-step { box-shadow: 0 1px 2px rgba(10,12,14,0.10); }

/* compliance report: stacked rollup bars — colour speaks status only */
.cmp-bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden;
  background: var(--line-soft); min-width: 200px; }
.cmp-bar span { display: block; }
.cmp-met { background: var(--fn-green); }
.cmp-partial { background: var(--fn-amber); }
.cmp-open { background: var(--fn-red); }
.cmp-org { background: var(--quiet); opacity: 0.45; }
.cmp-doc { font-size: 1rem; margin: 1.3rem 0 0.1rem; }
.cmp-doc .mono { color: var(--quiet); font-weight: 400; margin-right: 0.4rem; }
.cmp-kind { margin: 0 0 0.4rem; }
.cmp-rollup { margin-bottom: 0.6rem; }

/* topbar action bar: whose move, server-rendered, native details only.
   Topbar discipline: every control shares one height (2.2rem) and one
   rhythm; text is contained — labels ellipsize, never spill. */
.topbar .go input, .topbar .newbtn, .topbar .chip-btn, .topbar .iconbtn {
  height: 2.2rem; }
.topbar .newbtn { display: inline-flex; align-items: center; }
/* topbar zones, left to right: FIND (go, flex) · YOUR WORK (chips) ·
   CREATE (new) · DISPLAY (quiet icon buttons behind a divider —
   preferences never compete with work) */
.tb-divider { width: 1px; align-self: stretch; background: var(--line);
  margin: 0 0.1rem; }
.tb-display { display: flex; align-items: center; gap: 0.4rem; }
.iconbtn.sharebtn { width: auto; padding: 0 0.6rem; font-size: 0.8rem; letter-spacing: 0.02em; }
.iconbtn { width: 2.2rem; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 2px; background: transparent;
  color: var(--quiet); font-size: 1rem; cursor: pointer; padding: 0;
  font-weight: 400; }
.iconbtn:hover { background: var(--line-soft); color: var(--ink);
  text-decoration: none; opacity: 1; }
.moves { display: flex; align-items: center; gap: 0.5rem; flex: 0 1 auto;
  min-width: 0; }
.chip-btn { display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; border: 1px solid var(--line); border-radius: 2px;
  padding: 0 0.7rem; color: var(--ink); background: var(--panel);
  white-space: nowrap; cursor: pointer; }
.chip-quiet { color: var(--quiet); cursor: default; }
.team-chip:hover { background: var(--line-soft); text-decoration: none; }
details.yourmove { position: relative; }
details.yourmove summary { list-style: none; }
details.yourmove summary::-webkit-details-marker { display: none; }
details.yourmove[open] summary.chip-btn { background: var(--line-soft); }
.yourmove-panel { position: absolute; top: calc(100% + 6px); left: 0;
  z-index: 40; width: min(420px, calc(100vw - 2rem));
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(10, 12, 14, 0.22); padding: 0.25rem 0; }
.yourmove-caption { margin: 0.2rem 0.9rem 0.1rem; text-transform: uppercase;
  letter-spacing: 0.07em; font-size: 0.66rem; font-weight: 700; }
.yourmove-panel ul { list-style: none; margin: 0; padding: 0; }
/* fixed anatomy: label column + reserved date column on every row —
   undated rows carry an em dash, so rows never differ in shape */
.yourmove-panel li { display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 0.8rem; padding: 0.4rem 0.9rem;
  border-top: 1px solid var(--line-soft); }
.yourmove-panel li:first-child { border-top: none; }
.yourmove-panel a { color: var(--ink); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.yourmove-panel a:hover { color: var(--fn-blue); }
.yourmove-panel .due { min-width: 6.5ch; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.duesoon { color: var(--fn-amber-ink); font-weight: 700; }

/* ============ display layer: lamps, gauge, stepper (design study,
   approved in full 29 July 2026) ============ */
.lamps { display: inline-flex; gap: 3px; align-items: center; }
.lamp { display: inline-block; width: 22px; height: 8px; border-radius: 2px;
  background: var(--line-soft); flex: 0 0 auto; }
.lamp.done { background: var(--fn-green); }
.lamp.live-blue { background: var(--fn-blue); }
.lamp.live-amber { background: var(--fn-amber); }
.lamp.live-red { background: var(--fn-red); }
.lamp.dim { background: var(--line-soft); }
.lamp-label { font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; margin-left: 0.25rem; }
.lamp-green { color: var(--fn-green); } .lamp-blue { color: var(--fn-blue); }
.lamp-amber { color: var(--fn-amber-ink); } .lamp-red { color: var(--fn-red); }
.lamp-quiet { color: var(--quiet); }
.lamp-open { font-size: 0.68rem; font-weight: 700; color: var(--fn-amber-ink);
  margin-left: 0.35rem; white-space: nowrap; }
.obj-facts .lamps { grid-column: 2; grid-row: 1; justify-self: end; }
.obj-facts .lamps .lamp { width: 14px; height: 7px; }

.stepper { display: inline-flex; gap: 6px; align-items: flex-start; }
.stepper .step { display: flex; flex-direction: column; gap: 0.15rem;
  align-items: flex-start; }
.stepper .lamp { width: 46px; height: 9px; }
.step-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; }

.gauge { display: inline-flex; gap: 2px; align-items: center; }
.gauge i { width: 9px; height: 8px; border-radius: 1px;
  background: var(--line-soft); flex: 0 0 auto; }
.gauge i.on { background: currentColor; }
.gauge-label { font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.05em; margin-left: 0.25rem; color: currentColor; }
.class-hue-public { color: var(--c-public); }
.class-hue-internal { color: var(--c-internal); }
.class-hue-confidential { color: var(--c-confidential); }
.class-hue-restricted { color: var(--c-restricted); }
.class-hue-export-controlled, .class-hue-nuclear, .class-hue-cui {
  color: var(--c-controlled); }

/* D30 amendment: the distribution gauge on a holding card — PUBLIC cool,
   LICENSED warmer. A separate channel from classification (the gauge
   macro above), reusing the same two hues at the ends of that scale so
   "cool" and "warmer" read consistently across both gauges. */
.dist-hue-public { color: var(--c-public); }
.dist-hue-licensed { color: var(--dist-licensed); }

/* the publisher monogram chip: text only, never a logo (D30 amendment).
   3rd edition: it lives in the top-right identity corner — the
   provenance channel. Serial = Orkora minted identity; monogram =
   somebody else's document; both = a Reference (the D30 tier boundary
   rendered on the card). */
.monogram { display: inline-block; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.04em; border: 1px solid var(--line); border-radius: 2px;
  padding: 0.06rem 0.4rem; color: var(--quiet); background: var(--panel-2);
  max-width: 9em; overflow: hidden; text-overflow: ellipsis;
  vertical-align: baseline; }
/* the LIBRARY origin word (3rd edition): ours is the default and
   unmarked; the exception gets the word. RECEIVED joins this slot when
   the inbound boundary builds. */
.origin-tag { display: inline-block; font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--quiet);
  border: 1px dashed var(--quiet); border-radius: 2px;
  padding: 0.04rem 0.32rem; }

/* the file chip is the open control: bigger target, hover affordance */
a.filebadge-open { position: relative; min-height: 26px;
  display: inline-flex; align-items: center; }
a.filebadge-open::after { content: ""; position: absolute; inset: -9px; }
a.filebadge-open:hover { opacity: 0.85; text-decoration: none;
  box-shadow: 0 1px 4px rgba(10, 12, 14, 0.35); }

/* ============ the workpack (design study, 29 July 2026) ============ */
.lamp.diamond { width: 10px; height: 10px; border-radius: 1px;
  transform: rotate(45deg); margin: 0 2px; }
.linksrow { display: inline-flex; gap: 4px; align-items: center;
  flex-wrap: wrap; }
.lchip { font-style: normal; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.05em; padding: 0.08rem 0.35rem; border-radius: 2px;
  white-space: nowrap; }
.lk-green { background: var(--fn-green); color: #fff; }
.lk-red { background: var(--fn-red); color: #fff; }
.lk-on { background: var(--fn-blue); color: #fff; }
.lk-off, .lk-none { background: var(--line-soft); color: var(--quiet); }
.packact-blocked { color: var(--quiet); font-size: 0.78rem;
  border: 1px dashed var(--line); border-radius: 2px;
  padding: 0.1rem 0.5rem; display: inline-block; }
.packact { display: inline; }
/* live blocks: compact, and every row at fixed coordinates — the study
   scale (title ~0.82rem, facts 0.6–0.72rem), lamp row never moves */
.dag-step.liveblock { width: 212px; padding: 0.45rem 0.6rem;
  display: grid; align-content: start; gap: 0.12rem;
  grid-template-rows: 1.15em 2.3em 1.15em 1.15em 1.35em 1.15em 1.7em; }
.dag-step.liveblock .flow-title { font-size: 0.82rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.dag-step.liveblock .flow-meta { font-size: 0.68rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.dag-step .lamps { margin-top: 0.2rem; }
.dag { gap: 0.4rem; }

/* The workpack is a STATION (founder, 12 August 2026: "these panels
   can have different numbers of objects in them for different
   workpacks but we want the layout to look the same so that it looks
   familiar"). The resolution of the round-2/3/4 oscillation — blank
   slabs when panels stretched, ragged gaps when they hugged content,
   holes above the flow row when columns packed — is that CONTENT
   VOLUME MUST NEVER SET THE GEOMETRY. The page is fit-to-viewport like
   the workbench: three chronology columns (the links-row order
   PRE·EXMP·TMPL·WI·DLV made spatial — prepare, work, deliver-and-
   close) with the flow strip below, every zone at a fixed share of
   the glass on every workpack, and each panel absorbing its own
   variance by scrolling its body (lists are content; forms and
   buttons sit at the top of their zone, never beneath a scroll).
   Card-holding bodies wear the well surface so an under-filled zone
   reads as designed depth, not accidental blank. Phones keep the
   page-scroll law and read the chronology straight down. */
/* Real estate follows actual use (founder, 12 August 2026): the
   second ROW — study, team, completion, all near-constant intrinsic
   content — is one auto grid row, so it takes the tallest natural
   height and the three band seams ALIGN across the page (the packed-
   column build left them ragged); the heavy panels above share the
   1fr row and scroll their own variance. */
.workpack { display: grid; gap: 0.8rem; flex: 1 1 auto; min-height: 0;
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "inputs wi   dlv"
    "study  team done"
    "flow   flow flow"; }
.wp-inputs { grid-area: inputs; } .wp-study { grid-area: study; }
.wp-wi { grid-area: wi; } .wp-team { grid-area: team; }
.wp-dlv { grid-area: dlv; } .wp-done { grid-area: done; }
.wp-flow { grid-area: flow; }
.workpack .panel { min-height: 0; min-width: 0; }
/* the constant band still cannot balloon: a long booking ledger
   scrolls inside its zone rather than squeezing the work row */
.wp-study .panel-body, .wp-team .panel-body, .wp-done .panel-body {
  max-height: 16rem; }
/* the flow strip's step boxes get air: the bare .tight body put the
   white boxes flush against the panel edge */
.wp-flow .panel-body { padding: 0.6rem 0.9rem; }
.workpack .panel-body:has(.obj) { background: var(--panel-2); }
/* dt helper phrases stay lowercase and quiet: the dt's uppercase
   transform made them shout (seen on the 12 August screenshots) */
dl.fields dt .quiet { text-transform: none; letter-spacing: normal; }
/* Portrait desktop, placed AFTER the base rules on purpose: the old
   override lived in the early portrait block and silently LOST the
   source-order fight against the later base .workpack — portrait
   rendered three cramped columns and nobody could know without a
   screenshot. The WI keeps the full reading column on the right. */
@media (orientation: portrait) and (min-width: 1000px) {
  .workpack { grid-template-columns: 1fr 1.4fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
      auto auto;
    grid-template-areas:
      "inputs wi"
      "study  wi"
      "dlv    wi"
      "team   done"
      "flow   flow"; }
  /* the landscape band cap would strand a white void below a capped
     body inside portrait's stretched rows (13 August screenshot);
     here the panel fills its track and the body fills the panel */
  .wp-study .panel-body, .wp-team .panel-body, .wp-done .panel-body {
    max-height: none; }
}
@media (orientation: portrait) and (max-width: 1000px), (max-width: 880px) {
  /* Phones scroll the page by law, so the single column simply reads
     the chronology downward: prepare, work, deliver, close — zones
     grow to content, nothing fits-to-viewport here. */
  .workpack { grid-template-columns: 1fr; grid-template-rows: none;
    grid-template-areas:
      "inputs" "study" "wi" "team" "dlv" "done" "flow"; }
  /* page scrolls here: a capped body would be a nested scroller */
  .wp-study .panel-body, .wp-team .panel-body, .wp-done .panel-body {
    max-height: none; }
}
.wi-steps { list-style: none; margin: 0.2rem 0; padding: 0; }
.wi-steps li { display: flex; gap: 0.5rem; align-items: baseline;
  padding: 0.25rem 0; border-bottom: 1px solid var(--line-soft); }
.tickform { display: inline; }
.tickbtn { width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--line);
  border-radius: 2px; background: var(--panel); color: var(--fn-green);
  font-weight: 700; padding: 0; cursor: pointer; line-height: 1; }
.tickbtn.ticked { border-color: var(--fn-green); }
.budgetline { font-weight: 700; margin: 0 0 0.5rem; }
.chainrow { display: flex; gap: 0.4rem; align-items: center;
  flex-wrap: wrap; margin-bottom: 0.6rem; }
.chainstep { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.15rem 0.6rem; border-radius: 2px; background: var(--line-soft);
  color: var(--quiet); }
.chainstep.done { background: var(--fn-green); color: #fff; }
.chainstep.live { background: var(--fn-blue); color: #fff; }
.chainrow .chainstep + .chainstep::before { content: ""; }

/* reserved: critical-path outline lighting — lit by the planner (deferred
   by its own approved terms); no computation sets these yet */
.critical { outline: 2px solid var(--fn-amber); outline-offset: 1px; }
.critical-late { outline: 2px solid var(--fn-red); outline-offset: 1px; }

/* account: device cards and retired-key history */
.obj-device .obj-note summary { cursor: pointer; color: var(--quiet);
  font-size: 0.8rem; }
.key-history { margin-top: 0.8rem; }
.key-history summary { cursor: pointer; }

/* D30: the reference library. Search-term emphasis stays out of the
   status/classification colour channels (the card grammar's "colour
   speaks status only" — highlighting a match is neither): weight and an
   underline in the informational blue rather than a new hue. */
mark { background: none; color: inherit; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--fn-blue);
  text-decoration-thickness: 2px; text-underline-offset: 0.1em; }
.pager { display: flex; align-items: center; gap: 0.7rem;
  margin-top: 0.6rem; }
/* an exact result count is information, not a summons: quiet text, not
   the .count pill (that channel is reserved for things awaiting a
   person, colour law) — tabular numerals so the figure does not jitter
   as it updates live */
.result-count { font-variant-numeric: tabular-nums; margin-bottom: 0.5rem; }
#lib-loadmore { margin-top: 0.7rem; }
.clausetext { border-left: 3px solid var(--line); padding-left: 0.7rem;
  margin: 0.3rem 0 0.6rem; }
.clausetext.self { border-left-color: var(--fn-blue); }
.clause-tree { list-style: none; margin: 0; padding-left: 0; }
.clause-tree ul { list-style: none; margin: 0.3rem 0 0.3rem 1.1rem;
  padding-left: 0.7rem; border-left: 1px solid var(--line-soft); }
.clause-tree li { margin-bottom: 0.5rem; }
.clause-path { font-size: 0.72rem; color: var(--quiet); }
.clause-leadin { margin: 0 0 0.6rem; }
/* Paragraph tree rows show the short form (a)(1) for scanning (D30
   rebuild point 3) but the copy control still yields the full
   title-qualified tag -- shrunk to sit quietly beside the short label. */
.clause-tree > li > .cite-copy, .clause-tree li > .cite-copy {
  font-size: 0.62rem; padding: 0 0.3rem; margin-left: 0.3rem; }
.licence-chip { display: inline-block; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.5rem;
  border-radius: 2px; border: 1px solid var(--line); color: var(--quiet); }
.licence-chip.licensed { color: var(--fn-amber-ink); border-color: var(--fn-amber); }
/* Finding 3 (v16-dev.39): a licence refusal is RED (CLAUDE.md §6 lists
   "refused" explicitly under RED) — amber means a person must act, and
   nothing the reader does resolves a licence refusal. */
.licence-chip.refused { color: var(--fn-red); border-color: var(--fn-red); }
.key-history table { margin-top: 0.4rem; }

/* v16-dev.38: surfaces that actually separate (founder: "still completely
   white"). Ground #e0e3dc vs panel white measures 1.30:1 where the old pair
   measured 1.10:1; panel heads carry a filled cap; dense tables zebra. */
/* v16-dev.39: dark theme keeps --panel-2 equal to --panel by doctrine
   ("the well stays at panel") so the light-theme zebra rule above paints
   no stripe at all in dark — zebra rows there instead borrow --card, the
   one token already defined as the next step up from --panel. */
/* v16-dev.42: listing controls live in the panel head, anchored top right,
   so the count, the page position and the pager sit in one predictable
   place on every collection screen (founder, 30 July 2026). */
.panel-head .listing-controls { margin-left: auto; display: flex; align-items: center;
  gap: 0.8rem; text-transform: none; letter-spacing: normal; font-weight: 400; }
/* the count and the pager were laid out stacked at the panel foot before
   they moved into the head; their old vertical margins pushed them onto
   what looked like two lines inside the row. One line, one place. */
.panel-head .listing-controls .result-count { margin: 0; }
.panel-head .listing-controls .pager { margin: 0; }
.panel-head .listing-controls .pager { display: flex; gap: 0.35rem; }
.panel-head .result-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 880px) {
  .panel-head .listing-controls { flex-wrap: wrap; gap: 0.4rem; }
}

/* v16-dev.43: density and no dead band. The fit is honest (four rows of 154px
   in 704px leaves 88px, less than a row), so buy a row back by tightening the
   card, and distribute whatever is still left between the rows rather than
   letting it pool as an empty band under the last one. */
.panel-body.listing .objgrid { align-content: space-between; }
.panel-body.listing .obj { padding: 0.4rem 0.6rem; gap: 0.08rem 0.6rem; }
.panel-body.listing .obj .obj-title { min-height: 2.5em; line-height: 1.25; }
.panel-body.listing .obj .obj-facts { font-size: 0.74rem; }
.panel-body.listing .obj-kind, .panel-body.listing .obj-serial { font-size: 0.7rem; }

/* v16-dev.43: the holding card's facts sit two to a row, left and right, so
   it stands the same height as a document card and the two collection
   screens show the same number of rows (founder, 30 July 2026). */
.obj-holding .obj-facts { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
.obj-holding .obj-facts .fact-right { justify-self: end; text-align: right; }
.obj-facts .factcell { display: flex; align-items: center; gap: 0.4rem; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obj-facts .fact-right { white-space: nowrap; }
/* a fact that is prose (a person's name, a date and extent) takes the whole
   row: truncating a name to save half a row is a bad trade. */
.obj-facts .fact-span { grid-column: 1 / -1; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* v16-dev.84: regulatory events from the daily watch on the board */
.ditem-reg { color: var(--quiet); }
.ditem-reg:hover { color: var(--ink); }

/* D66: the team wall chart — presence with deadlines overlaid. Cells
   are deliberately small: the panel reads as a shape (who is away when,
   where the dots cluster), and the tooltip carries the words. */
.wallchart-scroll { overflow-x: auto; }
.wallchart { border-collapse: collapse; table-layout: fixed; }
.wallchart .wc-name { white-space: nowrap; padding-right: .6rem;
  font-size: .82rem; text-align: left; }
.wallchart td.wc-day, .wallchart th.wc-day { width: 14px; height: 18px;
  padding: 0; border: 1px solid var(--line-soft);
  text-align: center; font-size: .62rem; color: var(--quiet); }
.wallchart td.wc-we { background: var(--line-soft);
  border-color: var(--line-soft); }
.wallchart td.wc-hol { background:
  repeating-linear-gradient(45deg, var(--line-soft) 0 3px,
                            transparent 3px 6px); }
.wallchart td.wc-abs { background: var(--fn-amber); opacity: .55; }
.wallchart .wc-today { outline: 2px solid var(--fn-blue);
  outline-offset: -2px; }
.wallchart .wc-week { border-left-width: 2px; }
.wallchart .wc-due { color: var(--fn-red); font-size: .7rem;
  line-height: 1; }

/* D66-adjacent (23 August 2026): probe faces for the installed-font
   check. local() sources ONLY — each face resolves solely when the OS
   has the real family installed, which is what fontcheck.js measures.
   Never used for display; UI webfonts, when they land, must use the
   real family names so these probes keep answering "installed on this
   machine", not "served to this page". */
@font-face { font-family: "probe-stix-text"; src: local("STIX Two Text"); }
@font-face { font-family: "probe-stix-math"; src: local("STIX Two Math"); }
@font-face { font-family: "probe-ss3"; src: local("Source Sans 3"); }
@font-face { font-family: "probe-scp"; src: local("Source Code Pro"); }

/* The station's own section of its panel (founder, 1 September 2026:
   the cycle was rendering as a second panel nested inside the first).
   It is a section, not a sub-panel: separated by space and a rule, and
   never by a frame of its own. */
.station { margin-bottom: 0.7rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line); }
.station .station-line { margin: 0 0 0.4rem 0; }
.station .form-grid { margin-top: 0.5rem; }

/* The reviewer's do and do not at the return slot (2 September 2026). */
.reviewer-rules { margin-top: 0.4rem; }
.reviewer-rules .rules { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.3rem; }
.reviewer-rules .rules p { margin: 0 0 0.2rem; }
.reviewer-rules .rules ol { margin: 0; padding-left: 1.2rem; }

/* comment register (founder ruling, 7 September 2026): the resolution
   sheet as a table; printed, chrome and forms drop away. */
.table-scroll { overflow-x: auto; }
.register td.where { max-width: 18rem; }
.register td.where q { quotes: "\201C" "\201D"; color: var(--quiet); font-size: 0.85rem; }
.register .reply { margin: 0.3rem 0 0 0.8rem; padding-left: 0.6rem;
  border-left: 2px solid var(--line-soft); color: var(--quiet); }
.register-acts { margin-top: 0.6rem; }
@media print {
  nav, .rail, .actionbar, .filters, .no-print, .toolbar { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border: 0; box-shadow: none; }
  .worklist th { position: static; }
  .worklist td, .worklist th { border: 1px solid #999; }
}

/* the station's three steps (8 September 2026) */
.station-steps { margin: 0.4rem 0 0; padding-left: 1.4rem; }
.station-steps > li, .station-steps form > li { margin: 0.35rem 0; }
.station-steps .actionbar { margin: 0.3rem 0; }

/* the reference shelf's reading page (11 September 2026): the text
   panel is full width, the measure is bounded, the citations sit
   beneath in columns that fill the width */
pre.page-text.reading { max-width: 84ch; }
.cite-columns { display: grid; gap: 0.6rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cite-kind { margin: 0 0 0.25rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.74rem; }
.cite-list { list-style: none; margin: 0; padding: 0; columns: 1; }
.cite-list li { padding: 0.12rem 0; break-inside: avoid; }

/* back, to the left of the search (11 September 2026) */
.topbar .backbtn { font-size: 1.3rem; line-height: 1; border: 1px solid var(--line);
  border-radius: 2px; background: var(--bg); color: var(--ink); cursor: pointer; }
.topbar .backbtn:disabled { opacity: 0.35; cursor: default; }

/* Prepared files on the account page (18 September 2026): the handoff
   list beside staging, in classes rather than inline styles. */
.handoff-lede { margin: 0 0 0.3rem; }
.handoff-list { margin-bottom: 0.8rem; }
.clip-name { max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inline-form { display: inline; }
.gap-top { margin-top: 0.6rem; }
.gap-top-sm { margin-top: 0.4rem; }
blockquote.gap-top-sm { margin: 0.4rem 0 0; }