/* =====================================================================
   THE TYPE SCALE, ROLLED OUT. 16 August 2026.
   FORMATTING-MASTER §1: "Four sizes and one mono. Nothing on any screen
   may use a size outside this set."

   Ruled 13 August, built into the mocks, and never applied to the
   client. The deployed sheet had TWENTY-FIVE distinct font sizes across
   nine screens and declared none of these tokens. Gerry counted ten on
   one viewport and asked "are there just too many fonts / font sizes";
   across the whole application it was twenty-five.

   THE RULE IS RANK, NOT CATEGORY, and not where the text sits. Sizes
   still rise and fall down a page — a label is smaller than the field it
   names, the field is larger than the note beneath it. What was wrong
   was twenty-five sizes with no rule, not that they varied.

   HOW THIS WAS APPLIED. Every declaration was mapped by band, with two
   classes of exception, both from the master rather than from taste:

     §2  a rule already set in IBM Plex Mono takes --mono, because mono
         is for things somebody would quote — record numbers, references,
         hashes, keyboard keys — and §2 fixes it at 12px.

     §1  `.actask` takes --body by NAME. It is the line that says what is
         outstanding, which §1 assigns to --body; by band it would have
         grown to --lead.

   AND ONE EXEMPTION THAT IS A RECOMMENDATION, NOT A RULING. The wordmark
   is untouched — .wmtext, .wmsub, .mwmtext, .mwmsub, .pohja-mark__name,
   .pohja-mark__sub and the sign-in mark. It is a logotype set in a face
   reserved for it alone (§1 Families), it is brand furniture rather than
   content, and §5b already exempts it from the contrast pass by name.
   Forcing it into the content scale would redraw the mark. Put to Gerry;
   overturning it is a one-line change to the EXEMPT list.

   WHAT THIS CANNOT SEE. Whether an individual element now sits at the
   right RANK. The bands are mechanical; rank is judgement, and jsdom
   does not lay out. Nine screens want a browser pass.
   ===================================================================== */
/* =====================================================================
   ONE RADIUS FOR AN ACTION. 16 August 2026.
   FORMATTING-MASTER §6, ruled 14 August: "three classes, one radius, one
   height." OPEN-POINT-SCREEN.md §12.9: "Thirteen radii to one."

   The audit of 14 August found 21 chip-shaped classes carrying 13
   distinct radii across 144 instances. By 16 August the sheet held
   FIFTEEN. Nobody sees the difference between 12px and 14px; the reason
   to fix it is that fifteen unnamed values is how this file drifts,
   which is the same reason §1 exists for type.

   "ONE RADIUS" MEANS ONE RADIUS FOR AN ACTION. It was applied to a NAMED
   list of the action family rather than as a catch-all, because a
   catch-all did real damage on the first pass: it turned the round × on
   a rejected option into a chip and put a 13px radius on the file icon's
   box. §12.9 is explicit that round marks were never chips and that the
   file icon loses its box — and losing a box is the class collapse's
   job, not this one.

   FOUR SHAPES, EACH WITH A REASON FROM THE MASTER:

     13px   an action. Every chip, pill, button and option.
     6px    a field. "A field is not a button" — the mock's own note, and
            the reason the two never collapse into each other.
     50%    a circle. Round marks were never chips: the avatar, the back
            button, the priority dots, the step markers.
     3px    a small square that is deliberately NOT a control — the `/`
            key glyph (§12.9: a mono key glyph, deliberately unlike a
            control) and the board-pack checkbox (§12.9: a checkbox
            becomes a checkbox).

   AND TWO THAT SURVIVE, NAMED SO THEY ARE NOT MISTAKEN FOR DRIFT:

     2px    .bar and .barfill. A progress bar is a RULE, not a control —
            the same family as the 2-3px gold attention rule, which §5
            already treats as a graphical object rather than a shape.
     0      .s-home .rico, the report icon's container. It has no border
            and no ground, so it has no shape to round; a radius on it
            was always inert. Left rather than deleted because deleting
            it is the class collapse's business.

   NOT DONE HERE: the 21 classes to 4, and the widths. That is the next
   step and it is where .fico loses its box.
   ===================================================================== */
:root{
  --meta:11.5px;
  --body:13.5px;
  --lead:16px;
  --title:21px;
  --mono:12px;

  /* ── THE COLOUR TOKENS ──────────────────────────────────────────
     Declared 9 September 2026, to the ruling of 30 August: TOKENISE THE
     PALETTE FIRST, THEN ASSERT A FREEZE — declare the colours that carry
     real weight, leave the long tail as literals. The freeze is built
     (`drive-palette.mjs`). The distance rule comes last, and this block
     is written so as not to prejudge it.

     NOTHING USES THESE YET, AND THAT IS DELIBERATE. `test-shell`'s
     colour checks match `color:#hex` literally, so the day a call site
     writes `var(--ink)` those checks go blind — recorded in MANIFEST.md
     since 24 August. Call sites move only after test-shell resolves
     variables. Declaring first is what the type scale did on 13 August:
     tokens, then assertion, then use.

     TEN, NOT TWENTY. The top twenty by use contain eight values that
     are near-duplicates of a more-used sibling, and naming both halves
     of a pair would bless the duplication rather than record it. Each
     token below is the clear winner in its role — the pale-ground
     cluster is deliberately absent, see the note under it.

     Every value here is in live use, and `drive-palette.mjs` asserts
     that, so a token cannot be declared for a colour the product
     does not draw. */
  --ink:#16191c;          /* primary text · 246 uses */
  --ink2:#434a52;         /* secondary text · 100 */
  --ink3:#2e3439;         /* emphasis inside meta lines · 32 */
  --quiet:#666d7a;        /* meta and captions · 265 */
  --quiet2:#5e6469;       /* the quietest text still meant to be read · 51 */
  --page:#fff;            /* the page, and any surface that is the page · 150 */
  --rule:#e8eaec;         /* the standard hairline · 106 */
  --border:#c9ced3;       /* a border meant to be seen · 49 */
  --border-strong:#8c96a1;/* the strongest border in the product · 28 */
  --attention:#b8883a;    /* THIS NEEDS YOU, and nothing else · 83 */

  /* THE PALE GROUNDS ARE NOT DECLARED, ON PURPOSE. Five values sit
     within seven RGB steps of each other and none is a clear winner:
     #f0f2f3 (48 uses), #f4f6f7 (44), #eceef0 (31), #f8f9fa (28),
     #f4f6f6 (26). #f4f6f7 and #f4f6f6 are ONE step apart. Choosing
     between them is the distance rule, which is ruled to come last, and
     naming five tokens nobody can tell apart would make that harder
     rather than easier. They stay as literals in the long tail, which is
     what the 30 August ruling says to do with the long tail.

     AND #dfe3e5 IS NOT DECLARED EITHER. It was, as `--rule-soft`, until
     this file's own driver refused it: at 13 RGB steps from `--rule`
     #e8eaec it is a second hairline nobody can distinguish, and naming
     both is the thing this block says it will not do. 41 uses, and it
     joins the deferred cluster. THE ASSERTION CAUGHT THE AUTHOR, which
     is the only reason to write assertions about your own judgement.

     #f9f2e6 IS ALSO ABSENT and for a different reason: it is the
     historical canvas (STATE.md §9.1), it has 7 uses, and it belongs to
     a ruled semantic rather than to this palette. Giving it a token here
     would put a design rule in a colour list. */
}

/* =====================================================================
   The screens below are the prototype's own CSS, unchanged, scoped one
   screen at a time so nine stylesheets cannot collide. Nothing here is
   a fresh design decision — the design was settled in those files and
   tested with two people on 4 August.

   Removed from each: the laptop frame (.page, .lidwrap, .lid, .cam,
   .base) and the annotation styling around the mocks. Those exist to
   present a screen, not to be one.
   ===================================================================== */
*{box-sizing:border-box}
/* ── `hidden` MUST ACTUALLY HIDE ─────────────────────────────────
   Found 25 August 2026 by Gerry, in a browser, on the People screen:
   the band carets turned and the rows did not go anywhere.

   THE ATTRIBUTE WAS SET CORRECTLY THE WHOLE TIME. `apply()` does
   `r.hidden = !ok || f.shut.has(key)`, which is right. But `[hidden]`
   is a UA rule of one attribute, and `.s-people .W .prow` sets
   `display:flex` at three classes — an author rule at higher
   specificity — so the row kept its flex box and stayed on screen.

   AND NO ASSERTION COULD HAVE CAUGHT IT. jsdom sets the property and
   never resolves the cascade, so `r.hidden === true` is true in a suite
   and false to the eye. This is the blind spot §4 of
   `HANDOVER-24-august` names: an assertion reading the argument rather
   than the drawn region.

   A RULE, NOT A FIFTH ENTRY IN A LIST. Four `[hidden]{display:none}`
   guards already sit further down this file, one per selector, each
   added the moment this bit somebody — the same shape the contrast
   check was in before it was computed for every colour. `!important`
   is what lets one rule outrank every scoped `display` in this file,
   present and future, and it is the only form that cannot recur on the
   eleventh screen.

   The four existing guards are left where they are. They are redundant
   now, and they are also the record of where this bit before. */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:#fff;font-family:'Inter',system-ui,sans-serif;
  font-size:var(--body);line-height:1.5;color:#16191c;-webkit-font-smoothing:antialiased}
#app{display:none;min-height:100vh}
/* Ruled by Gerry, 10 August 2026 — the application is a document on a
   page above 1400px, not a strip at the left of a 2560px monitor.
   
   Capped rather than stretched, because stretching widens the middle
   pane while the type stays put, and the copy rules already hold prose
   to 52-64 characters — so a wider pane puts the same text in a bigger
   empty box. Space outside a bordered application reads as page; space
   inside it reads as a pane that failed to fill.
   
   The minimum stops the other end. The rail and the right pane are
   fixed at 230 and 250, so below about 900 there is nothing left for the
   middle and the panes ride over each other. A sideways scrollbar is
   merely unideal; text on top of text is broken. */
#app > .screen{min-height:100vh;display:flex;flex-direction:column;
  max-width:1400px;min-width:900px;margin:0 auto}
#app .panes,#app .homepanes{flex:1;min-height:0}

/* sign in */
#gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#f4f5f6;z-index:60;padding:40px 24px}
#gate .card{max-width:400px;width:100%}
#gate .gmark{--s:1.5;display:inline-block;position:relative;
  padding-bottom:calc(14px*var(--s));line-height:1;margin-bottom:34px}
#gate .grow{display:flex;align-items:flex-end;gap:calc(10px*var(--s))}
#gate .gtext{display:flex;flex-direction:column;line-height:1}
#gate .gname{font-family:'Jost',sans-serif;font-weight:300;font-size:calc(16px*var(--s));
  letter-spacing:.26em;color:#16191c;line-height:1.05}
#gate .gsub{font-weight:300;font-size:calc(7px*var(--s));letter-spacing:.24em;
  text-transform:uppercase;color:#666d7a;margin-top:3px}
#gate .gemb{flex:none;width:calc(26px*var(--s));height:calc(42px*var(--s));
  margin-bottom:calc(-3px*var(--s))}
#gate .gline{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
#gate p{margin:0 0 14px;color:#434a52;max-width:400px;font-size:var(--lead);line-height:1.62}
#gate input{width:100%;padding:11px 13px;border:1px solid #c9ced3;border-radius:6px;
  font-family:inherit;font-size:var(--lead);font-weight:300;color:#16191c;background:#fff;margin-top:8px}
#gate input:focus{outline:2px solid #16191c;outline-offset:2px;border-color:#16191c}
#gate button{width:100%;margin-top:10px;height:40px;border-radius:13px;cursor:pointer;
  border:1px solid #b8883a;background:#b8883a;color:#fff;font-size:var(--body);font-weight:500}
#gate button:hover{background:#a67a33}
#gate button:disabled{opacity:.45;cursor:default}
#gate .status{margin-top:14px;font-size:var(--body);color:#666d7a;min-height:19px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== home ===== */
.s-home .screen{background:#fff;overflow:hidden}
.s-home .W{background:#fff;color:#16191c;font-size:var(--body);line-height:1.5}
.s-home .W .nav{display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;
  padding:9px 18px;border-bottom:1px solid #e8eaec;min-height:56px}
.s-home .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1}
.s-home .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-home .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-home .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-home .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-home .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-home .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-home .W .askfield{display:flex;align-items:center;gap:9px;width:380px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;cursor:text}
.s-home .W .askico{flex:none;color:#666d7a}
.s-home .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-home .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:17px}
.s-home .W .whoami{display:flex;align-items:center;gap:9px}
.s-home .W .avatar{width:28px;height:28px;border-radius:50%;background:#f0f2f3;color:#666d7a;
  font-size:var(--meta);font-weight:500;display:flex;align-items:center;justify-content:center}
.s-home .W .whoname{font-size:var(--body);color:#5e6469}
.s-home .W .homepanes{display:grid;grid-template-columns:230px minmax(0,1fr);height:520px}
.s-home .W .pane{overflow:hidden}
.s-home .W .pane+.pane{border-left:1px solid #e8eaec}
.s-home .rail{padding:14px 12px;overflow-y:auto;background:#f8f9fa;display:flex;flex-direction:column}
/* THE GAP BETWEEN FAMILIES. Ruled by Gerry, 31 August 2026, from a
   screenshot of the live rail: WORK, CONTEXT, VALUE and MEMORY OWNER
   read as one continuous list rather than four groups, because 18px
   between groups is barely more than the 7px under each group's own
   label plus the 1px between its items.

   THE SEPARATION IS THE GROUP LABEL'S SPACE ABOVE IT, NOT A RULE. A
   divider line would be a fifth thing on a rail that already carries
   marks, labels, counts and a selected state; whitespace says the same
   thing and adds nothing to look at. Same reason the Memory Owner
   group's heading is a button with no border.

   THE FIRST GROUP DOES NOT GET THE GAP. It has the rail's own top
   padding above it, and a group that starts lower than the pane looks
   like a rendering fault rather than a decision. */
.s-home .railgrp{margin-bottom:18px}
.s-home .railgrp+.railgrp{margin-top:16px}
/* C2 — A GOLD RULE TO THE WIDTH OF THE LABEL. Built 1 September 2026,
   as recommended in §11 of `MOCK-icon-family.html` and in the standing
   handover.

   WHY NOT GOLD TEXT. `#b8883a` measures 3.17:1 and fails 4.5:1 at
   11.5px, so `test-shell` would refuse it — correctly. **A 2px RULE IS
   A GRAPHICAL OBJECT**, which WCAG 1.4.11 asks 3:1 of, and 3.17:1
   clears that. The brand colour is kept and applied to the one thing
   entitled to it, rather than the brand being changed to satisfy a rule
   that does not apply to it. `test-shell` already asserts `#b8883a`
   survives in the sheet for exactly this reason.

   TO THE WIDTH OF THE LABEL, NOT THE RAIL. `width:fit-content` shrinks
   the block to its own text, so the rule marks where the group's name
   ends rather than drawing a line across the whole column. Compared in
   the mock against a full-width rule and against a softer gold: the
   full-width version competes with the list beneath it, and the softer
   gold stops reading as a boundary at all. */
.s-home .raillab{font-size:var(--meta);font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:#666d7a;margin:0 0 14px;padding:0 10px;position:relative}
/* THE RULE IS EQUAL ON EVERY GROUP AND DRAWN AS A PSEUDO-ELEMENT.
   C2's first build put a `border-bottom` on the label itself with
   `width:fit-content`, so the rule tracked the text — 59px under WORK,
   141px under MEMORY OWNER. Ruled 1 September 2026: EQUAL. A rule that
   tracks its label reads as an underline of the words; an equal one
   reads as a mark for the group, which is what it is for.

   AND A PSEUDO-ELEMENT RATHER THAN A BORDER, so the label's own box is
   untouched. The border version had to shrink the block to size the
   rule, which cost the `Memory Owner` toggle its full-width click
   target. This costs nothing. */
.s-home .raillab::before{content:'';position:absolute;left:10px;bottom:-7px;
  width:104px;height:2px;background:#b8883a}
/* Home sits above the first group label, so it carries the spacing a
   label would have given it. */
.s-home .railhome{margin:0 0 18px}
.s-home .nav-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
  font-size:var(--body);color:#434a52;cursor:pointer;margin-bottom:1px}
.s-home .nav-i:hover{background:#eef0f1}
.s-home .nav-i.on{background:#fff;color:#16191c;font-weight:500;box-shadow:inset 2px 0 0 #c9ced3}
.s-home .nav-i svg{flex:none;opacity:.72}
/* THE TOGGLE INHERITS `.raillab` AND OVERRIDES NOTHING TYPOGRAPHIC.
   The first version set `font:inherit` and `color:inherit`, which are
   SHORTHANDS that reset size, weight, family and letter-spacing — and
   because this rule sits after `.raillab` at equal specificity it won,
   so MEMORY OWNER rendered larger, darker and unspaced beside WORK,
   CONTEXT and VALUE. Only the button's own defaults are reset here.

   AND THE SAME FAULT WAS COMMITTED AGAIN ON 1 SEPTEMBER 2026, FOUR
   LINES BELOW THIS WARNING. C2 put a gold `border-bottom` on
   `.raillab`; this rule reset the button's frame with `border:0`, ANOTHER
   SHORTHAND, and at equal specificity coming later it won — so MEMORY
   OWNER was the one group label with no gold rule under it. Gerry saw
   it in the rendered screen and asked why. The three sides the button
   actually needs cleared are now named individually, because the
   shorthand is the fault both times. */
/* THE TOGGLE TAKES THE SAME RULE, WHICH MEANS IT TAKES THE SAME WIDTH.
   `width:100%` here would draw the gold across the whole rail on the
   one label that is a button, and three labels marked one way beside a
   fourth marked another is worse than either. THE CONSEQUENCE IS A
   SMALLER CLICK TARGET — the toggle now ends where its text ends rather
   than at the rail edge. Said out loud rather than left to be found:
   its HEIGHT is unchanged, and if the narrower target is wrong this is
   one line to revert. */
.s-home .railtog{display:flex;align-items:center;gap:6px;width:100%;background:none;
  border:0;text-align:left;cursor:pointer;font-family:inherit}
/* THE DISCLOSURE MARK IS A GLYPH, NOT A BORDER TRIANGLE. The first
   version used the width:0/height:0 border trick, and `height:0` on a
   class that appears on a <button> is a height outside the ruled set —
   test-shell derives control classes from the markup and checks every
   one. A character needs no height at all. */
.s-home .railtog::after{content:'\25B8';font-size:var(--meta);line-height:1;opacity:.55;
  display:inline-block;transition:transform .12s ease}
.s-home .railtog[aria-expanded="true"]::after{transform:rotate(90deg)}
.s-home .railgrp[data-collapsed="1"] a,.s-home .railgrp[data-collapsed="1"] > span.nav-i{display:none}

.s-home .nav-i.on svg{opacity:1;color:#5e6469}
.s-home .nav-i .n{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a}
.s-home .nav-i.on .n{color:#5e6469}
.s-home .railfoot{margin-top:auto;padding-top:12px;border-top:1px solid #e8eaec}
.s-home .main{padding:22px 26px;overflow-y:auto}
.s-home .greet{font-size:var(--title);font-weight:500;letter-spacing:-.016em;margin:0 0 3px;color:#16191c}
.s-home .greetsub{font-size:var(--body);color:#666d7a;margin:0 0 31px}
.s-home .attn{background:transparent;border-left:2px solid #b8883a;padding:2px 0 2px 18px;margin:0 0 30px}
.s-home .attnh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#434a52;margin:0 0 10px}
.s-home .attnrow{display:flex;align-items:flex-start;gap:11px;padding:7px 0}
.s-home .attnrow:first-of-type{padding-top:0}
.s-home .attnrow:last-of-type{padding-bottom:0}
.s-home .attndot{width:5px;height:5px;border-radius:50%;background:#b8883a;flex:none;margin-top:8px}
.s-home .attntext{font-size:var(--body);color:#16191c;margin:0;flex:1;line-height:1.5}
/* NOT MONO. §2 reserves the mono face for things somebody would
   quote — record numbers, references, hashes, keys. "yesterday",
   "Wed" and "10 Aug" are none of those, and this is the same misuse
   §2 was written to remove: `.condkind` was caught for it and taken
   off mono while this one was missed, because test-shell checks that
   selector by name and does not check this one. Found from a live
   screenshot of Home, 21 August 2026. */
.s-home .attnwhen{font-size:var(--meta);color:#666d7a;flex:none;margin-top:3px}
.s-home .secl{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#666d7a;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #f0f2f3}
/* Amended 13 August 2026. Two fixed columns put four figure cards in a
   narrow strip with the rest of the pane empty. auto-fit lets the row
   take as many columns as the pane can hold at a 240px minimum, so the
   cards fill the width they are given and fall back to two-up, then
   one-up, as it narrows. The figures are a few characters each, so
   unlike prose they have nothing to lose from more room. */
/* The cards keep their density on a wide monitor. Ruled 13 August:
   design for 1536, treat wider as space the application may take and
   must never depend on. At 1536 the main pane is about 1300px and four
   cards land at their drawn width; with a plain 1fr they stretched to
   450px each on a 2500px window — three words in a very large box. */
.s-home .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,300px));
  gap:22px;margin-bottom:28px;justify-content:start}
.s-home .card{cursor:pointer}
.s-home .cardn{font-size:var(--title);font-weight:500;color:#666d7a;letter-spacing:-.02em;line-height:1.1;
  margin:0;display:flex;align-items:center;gap:9px}
.s-home .cardn.live{color:#16191c}
.s-home .cardn .ld{width:7px;height:7px;border-radius:50%;background:#b8883a;flex:none}
.s-home .card.ref .cardl{color:#666d7a}
.s-home .cardl{font-size:var(--body);color:#434a52;margin:3px 0 0}
.s-home .cards{font-size:var(--body);color:#666d7a;margin:3px 0 0}
.s-home .cardn.quiet{color:#666d7a}
/* `flex:1` on .rbody pushes the status tag to the far right of whatever
   the pane happens to be — on a 2500px window, a thousand pixels from
   the report it describes. The design system's rule is that nothing is
   pushed to the far edge of a row; the row now stops at a measure so the
   tag stays beside its own name. */
.s-home .rrow{display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid #f4f6f6;cursor:pointer}
.s-home .rrow:last-child{border-bottom:0}
.s-home .rico{flex:none;width:30px;height:30px;border-radius:6px;background:#f4f6f7;
  display:flex;align-items:center;justify-content:center;color:#666d7a}
.s-home .rbody{flex:1;min-width:0}
.s-home .rname{font-size:var(--body);color:#16191c;margin:0}
.s-home .rsub{font-size:var(--body);color:#666d7a;margin:2px 0 0}
.s-home .rtag{flex:none;font-size:var(--meta);font-weight:500;height:19px;padding:0 9px;border-radius:13px;
  display:inline-flex;align-items:center;line-height:19px}
.s-home .rtag.ready{background:#f0f2f3;color:#5e6469}
.s-home .rtag.auto{background:#f0f2f3;color:#666d7a}
.s-home .cap{max-width:1180px;margin:0 auto;padding:34px 20px 10px}
.s-home .cap h1{font-size:var(--title);font-weight:500;letter-spacing:-.018em;margin:0 0 6px}
.s-home .cap p{color:#5e6469;margin:0 0 22px;max-width:568px;font-size:var(--lead)}
.s-home a.px{color:inherit;text-decoration:none;display:contents}
.s-home a.pxb{color:inherit;text-decoration:none}
.s-home .clickable{cursor:pointer}
.s-home .screen{height:100%;display:flex;flex-direction:column;overflow:hidden}
.s-home .W{flex:1;display:flex;flex-direction:column;min-height:0}
.s-home .W .panes,.s-home .W .homepanes{flex:1;height:auto!important;min-height:0}
.s-home .W .nav{flex:none}
.s-home .W .orient{flex:none}
.s-home .screen{border-left:1px solid #eceef0;border-right:1px solid #eceef0}
.s-home .W{flex:none}
.s-home .W .panes,.s-home .W .homepanes{flex:none;height:auto!important;min-height:520px}
.s-home .W .pane,.s-home .W .main,.s-home .W .rail,.s-home .W .left,.s-home .W .mid,.s-home .W .right{overflow:visible!important;height:auto}

/* ===== openpoint ===== */
.s-openpoint .screen{background:#fff;overflow:hidden}
.s-openpoint .W{background:#fff;color:#16191c;font-size:var(--body);line-height:1.5}
.s-openpoint .W .nav{display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;
  padding:9px 18px;border-bottom:1px solid #e8eaec;min-height:56px}
.s-openpoint .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-openpoint .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;
  border:1px solid #dfe3e5;background:#fff;color:#434a52;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.s-openpoint .W .backbtn:hover{background:#f4f6f7;border-color:#c9ced3;color:#16191c}
.s-openpoint .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-openpoint .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-openpoint .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-openpoint .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-openpoint .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-openpoint .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-openpoint .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-openpoint .W .panes{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;height:470px}
.s-openpoint .W .pane{overflow:hidden}
.s-openpoint .W .pane+.pane{border-left:1px solid #e8eaec}
.s-openpoint .W .left{padding:0;background:#f8f9fa;display:flex;flex-direction:column}
.s-openpoint .W .left-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.s-openpoint .W .left-foot{flex:0 0 auto;padding-top:8px;border-top:1px solid #e8eaec}
.s-openpoint .W .lhead{padding:14px 16px 10px;border-bottom:1px solid #e8eaec}
.s-openpoint .W .lh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#666d7a;margin:0}
.s-openpoint .W .lcount{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em;
  line-height:1.1;margin:6px 0 0}
.s-openpoint .W .lcount span{font-size:var(--body);font-weight:400;color:#666d7a;letter-spacing:0;margin-left:6px}
.s-openpoint .W .item{padding:12px 16px;border-bottom:1px solid #eceff0;cursor:pointer}
.s-openpoint .W .item:last-child{border-bottom:0}
.s-openpoint .W .item.sel{background:#fff;box-shadow:inset 3px 0 0 #c9ced3}
.s-openpoint .W .irow{display:flex;align-items:flex-start;gap:9px}
.s-openpoint .W .idot{width:9px;height:9px;border-radius:50%;background:#b8883a;flex:none;margin-top:5px}
.s-openpoint .W .idot.m{width:7px;height:7px;margin-top:6px}
.s-openpoint .W .idot.l{width:5px;height:5px;background:#c9ced3;margin-top:7px}
/* THE LIST ITEM IS A LIST ITEM, NOT A HEADING. Corrected 24 August 2026
   after Gerry saw twelve open points in the contextual pane: "text in
   the left panel is too big".

   It was `var(--lead)` — 16px at weight 500, the same size this
   stylesheet gives a section heading — in a 230px column. Titles like
   "Legion Course — winter tee closure" wrapped to three lines, so
   twelve items made a column taller than the record beside it.

   IT WAS SIZED WHEN THAT PANE HELD FOUR THINGS. The prototype's
   "Waiting on you" list had four rows and the size read as emphasis.
   With twelve it reads as noise, and the pane is now the primary way to
   move between open points rather than a summary of them. `var(--body)`
   is what every other list row in this product uses. */
.s-openpoint .W .ititle{font-size:var(--body);font-weight:500;color:#16191c;line-height:1.35}
.s-openpoint .W .item:not(.sel) .ititle{font-weight:400;color:#434a52}
.s-openpoint .W .imeta{font-size:var(--mono);color:#666d7a;margin-top:4px;padding-left:18px;
  }
.s-openpoint .W .mid{padding:16px 20px;overflow-y:auto}
.s-openpoint .W .recid{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;
  margin-bottom:18px;border-bottom:1px solid #f0f2f3;flex-wrap:wrap}
.s-openpoint .W .recno{font-size:var(--mono);font-weight:500;
  color:#16191c;letter-spacing:.02em}
.s-openpoint .W .recmeta{font-size:var(--body);color:#666d7a}
.s-openpoint .W .right{padding:16px;overflow-y:auto}
.s-openpoint .W .rh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#666d7a;margin:0 0 14px}
.s-openpoint .W .askfield{display:flex;align-items:center;gap:9px;width:380px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;cursor:text}
.s-openpoint .W .askfield:hover{border-color:#c9ced3}
.s-openpoint .W .askico{flex:none;color:#666d7a}
.s-openpoint .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-openpoint .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:17px}
.s-openpoint .drop{border:1px dashed #c9ced3;border-radius:6px;background:#fbfcfc;
  padding:34px 24px;text-align:center;margin-bottom:18px}
.s-openpoint .drop .dt{font-size:var(--lead);color:#16191c;margin:0 0 5px}
.s-openpoint .drop .ds{font-size:var(--body);color:#666d7a;margin:0}
.s-openpoint .drop .dbtn{margin-top:16px}
.s-openpoint .btn{font-family:'Inter',sans-serif;font-size:var(--body);font-weight:500;
  height:36px;padding:0 16px;border-radius:13px;border:1px solid #b8883a;
  background:#b8883a;color:#fff;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;line-height:1.2;box-sizing:border-box}
.s-openpoint .btn.sec{background:#fff;color:#434a52;border-color:#dfe3e5}
.s-openpoint .btn.sec:hover{background:#f4f6f7;border-color:#c9ced3}
.s-openpoint .btn[disabled]{opacity:.45;cursor:default}
.s-openpoint .flist{margin:0 0 18px}
.s-openpoint .frow{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid #f0f2f3}
.s-openpoint .frow:last-child{border-bottom:0}
.s-openpoint .fico{flex:none;width:26px;height:32px;border:1px solid #e0e4e6;border-radius:3px;
  display:flex;align-items:center;justify-content:center;color:#8c96a1}
.s-openpoint .fbody{flex:1;min-width:0}
.s-openpoint .fname{font-size:var(--body);color:#16191c;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-openpoint .flabelrow{display:flex;align-items:center;gap:8px;margin-top:5px}
.s-openpoint .flabel{font-size:var(--meta);color:#666d7a}
.s-openpoint .finput{font-family:'Inter',sans-serif;font-size:var(--body);color:#16191c;
  border:1px solid #e0e4e6;border-radius:6px;padding:3px 8px;width:210px;background:#fff}
.s-openpoint .frole{flex:none;display:flex;gap:6px}
.s-openpoint .roleopt{font-size:var(--meta);font-weight:500;height:24px;padding:0 11px;border-radius:13px;
  border:1px solid #e0e4e6;background:#fff;color:#666d7a;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1}
.s-openpoint .roleopt.on{background:#eceef0;border-color:#16191c;color:#16191c}
.s-openpoint .disclose{background:#f8f9fa;padding:14px 16px;border-radius:6px;margin-bottom:18px}
.s-openpoint .disclose p{margin:0;font-size:var(--body);color:#5e6469;line-height:1.55;max-width:568px}
.s-openpoint .disclose b{color:#16191c;font-weight:500}
.s-openpoint .opstate{display:flex;align-items:center;gap:9px;padding:9px 13px;margin-bottom:18px;
  background:#f4f6f7;color:#434a52;font-size:var(--body);line-height:1.45}
.s-openpoint .opstate svg{flex:none;color:#5e6469}
.s-openpoint h3.optitle{font-size:var(--title);font-weight:500;letter-spacing:-.014em;margin:0 0 6px;
  color:#16191c;line-height:1.3;max-width:568px}
.s-openpoint .opask{font-size:var(--body);color:#434a52;margin:0 0 20px;max-width:568px}
.s-openpoint .evid{background:#fbfcfc;border:1px solid #f0f2f3;border-radius:6px;padding:14px 16px;margin-bottom:22px}
.s-openpoint .evidh{font-size:var(--meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#666d7a;margin:0 0 11px}
.s-openpoint .evrow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.s-openpoint .evcol .evl{font-size:var(--meta);color:#666d7a;margin:0 0 4px}
.s-openpoint .evcol .evq{font-size:var(--body);color:#2e3439;margin:0;line-height:1.5}
.s-openpoint .evfoot{font-size:var(--meta);color:#666d7a;margin:11px 0 0;padding-top:10px;border-top:1px solid #f0f2f3}
.s-openpoint .sec{margin-bottom:22px}
.s-openpoint .seclab{font-size:var(--meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#666d7a;margin:0 0 8px;display:flex;align-items:center;gap:9px}
/* .s-openpoint .reqd — the pill's styling REMOVED 16 August 2026.
   §12.7 ruled the Required pill gone entirely: "removed entire rather
   than de-bordered". It has been display:none on every screen since
   this morning, but it was still carrying a 62px fixed width, a
   radius and a mono face for something that never renders — which is
   how a ruled-away control comes back. The display:none rule stays,
   because the static markup still emits the span before hydration
   strips it. */
.s-openpoint .done{color:#3d6b52;background:#eef3f0}
.s-openpoint .fieldbox{width:100%;border:1px solid #e0e4e6;border-radius:6px;background:#fff;
  padding:11px 13px;font-family:'Inter',sans-serif;font-size:var(--body);color:#16191c;
  line-height:1.55;min-height:76px;resize:vertical}
.s-openpoint .fieldbox::placeholder{color:#666d7a}
.s-openpoint .fieldbox:focus{outline:2px solid #16191c;outline-offset:1px;border-color:#16191c}
.s-openpoint .fieldhint{font-size:var(--body);color:#666d7a;margin:6px 0 0;max-width:568px}
.s-openpoint .addrow{display:flex;align-items:center;gap:9px;margin-top:9px}
.s-openpoint .addbtn{font-size:var(--body);color:#434a52;background:none;
  border-radius:13px;height:30px;padding:0 12px;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1}
.s-openpoint .addbtn:hover{background:#faf6ee}
.s-openpoint .auth{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.s-openpoint .authopt{font-size:var(--body);font-weight:400;height:28px;padding:0 12px;border-radius:13px;
  border:1px solid #e0e4e6;background:#fff;color:#666d7a;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1;box-sizing:border-box}
.s-openpoint .authopt:hover{border-color:#c9ced3;color:#434a52}
.s-openpoint .authopt.on{background:#eceef0;border-color:#16191c;color:#16191c;font-weight:500}
.s-openpoint .authnote{font-size:var(--body);color:#666d7a;margin:8px 0 0;max-width:568px;line-height:1.5}
.s-openpoint .authshown{display:inline-flex;align-items:center;gap:8px;margin:0}
.s-openpoint .authpill{height:22px;padding:0 11px;
  background:#f4f6f7;color:#434a52;
  line-height:22px;box-sizing:border-box}
.s-openpoint .authpill.unc{background:#f0f2f3;color:#666d7a}
.s-openpoint .authsrc{font-size:var(--body);color:#5e6469}
.s-openpoint .posauth{margin:6px 0 0}
.s-openpoint .pos{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:11px 0;border-bottom:1px solid #f4f6f6}
.s-openpoint .pos:last-child{border-bottom:0}
.s-openpoint .posfn{font-size:var(--body);color:#16191c;line-height:22px;margin:0}
.s-openpoint .posnote{font-size:var(--body);color:#666d7a;margin:2px 0 0;line-height:1.5;max-width:400px}
.s-openpoint .posval{white-space:nowrap;
  flex:none;min-width:112px;height:22px;padding:0 9px;justify-content:center;box-sizing:border-box}
.s-openpoint .posval.wait{background:#f0f2f3;color:#666d7a}
.s-openpoint .posval.ok{background:#eef3f0;color:#3d6b52}
.s-openpoint .posval.cond{background:#f4f6f7;color:#434a52}
.s-openpoint .actions{margin-top:26px;padding-top:20px;border-top:1px solid #e8eaec}
.s-openpoint .actask{font-size:var(--body);color:#16191c;margin:0 0 16px;max-width:568px;line-height:1.5}
.s-openpoint .actrow{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.s-openpoint .actrow.alt{margin-top:14px;width:382px;justify-content:center}
.s-openpoint .btn.wide{width:186px;height:38px;white-space:nowrap}
.s-openpoint .btn.sec.quiet{color:#434a52;border-color:#dfe3e5}
.s-openpoint .actnote{font-size:var(--body);color:#666d7a;margin:14px 0 0;max-width:568px;line-height:1.5}
.s-openpoint .meta{padding:10px 0;border-bottom:1px solid #f0f2f3}
.s-openpoint .meta:last-child{border-bottom:0}
.s-openpoint .metal{font-size:var(--meta);color:#666d7a;margin:0 0 3px}
.s-openpoint .metav{font-size:var(--body);color:#16191c;margin:0}
.s-openpoint .metav.gold{color:#16191c;font-weight:500}
.s-openpoint .metasub{font-size:var(--meta);color:#666d7a;margin:2px 0 0}
.s-openpoint .dochash{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a}
/* THE MESSAGES KEPT FROM AN ASK, on the point they were carried onto.
   THE SAME SHAPE THE THREAD USES, copied from `.s-record .W .mrow` and
   not adapted: a kept message is the same object it was in the thread,
   read in a different place, and giving it a second shape would make a
   reader work out whether it is the same thing. NO `.keepbtn` HERE —
   keeping already happened, and the act is not offered twice. */
.s-openpoint .mrow{display:flex;gap:14px;align-items:flex-start;padding:9px 0;
  border-bottom:1px solid #f4f6f6}
.s-openpoint .mrow:last-child{border-bottom:0}
.s-openpoint .mbody{flex:1;min-width:0}
.s-openpoint .mline{font-size:var(--body);color:#16191c;margin:0;line-height:1.5;max-width:568px}
.s-openpoint .mfoot{display:block;margin-top:3px}
.s-openpoint .mwho{font-size:var(--meta);color:#5e6469}
.s-openpoint .compl{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.s-openpoint .complnum{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em}
.s-openpoint .complof{font-size:var(--body);color:#666d7a}
.s-openpoint .bar{height:4px;border-radius:2px;background:#f0f2f3;overflow:hidden;margin-top:8px}
.s-openpoint .barfill{height:100%;background:#666d7a;border-radius:2px}
.s-openpoint a.px{color:inherit;text-decoration:none;display:contents}
.s-openpoint a.pxb{color:inherit;text-decoration:none}
.s-openpoint .screen{height:100%;display:flex;flex-direction:column;overflow:hidden}
.s-openpoint .W{flex:1;display:flex;flex-direction:column;min-height:0}
.s-openpoint .W .panes,.s-openpoint .W .homepanes{flex:1;height:auto!important;min-height:0}
.s-openpoint .W .nav{flex:none}
.s-openpoint .W .orient{flex:none}
.s-openpoint .screen{border-left:1px solid #eceef0;border-right:1px solid #eceef0}
.s-openpoint .W{flex:none}
.s-openpoint .W .panes,.s-openpoint .W .homepanes{flex:none;height:auto!important;min-height:470px}
.s-openpoint .W .pane,.s-openpoint .W .main,.s-openpoint .W .rail,.s-openpoint .W .left,.s-openpoint .W .mid,.s-openpoint .W .right{overflow:visible!important;height:auto}

/* ===== record ===== */
.s-record .screen{background:#fff;overflow:hidden}
.s-record .W{background:#fff;color:#16191c;font-size:var(--body);line-height:1.5}
.s-record .W .nav{display:flex;align-items:center;background:#f8f9fa;padding:9px 18px;
  border-bottom:1px solid #e8eaec;min-height:56px}
.s-record .W .nav{justify-content:space-between}
.s-record .W .askwrap{display:flex;align-items:center;flex:none}
.s-record .W .askfield{display:flex;align-items:center;gap:9px;width:288px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;
  cursor:text;box-sizing:border-box}
.s-record .W .askfield:hover{border-color:#c9ced3}
.s-record .W .askico{flex:none;color:#666d7a}
.s-record .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.s-record .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.s-record .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-record .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;
  border:1px solid #dfe3e5;background:#fff;color:#434a52;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.s-record .W .backbtn:hover{background:#f4f6f7;border-color:#c9ced3;color:#16191c}
.s-record .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-record .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-record .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-record .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-record .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-record .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-record .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-record .W .panes{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;height:470px}
/* A destination has no right pane — see destinationShell(). Without
   this the removed pane leaves a 250px column of nothing beside a
   middle pane that stays needlessly narrow. */
.s-record .W .panes.destination{grid-template-columns:230px minmax(0,1fr)}
.s-record .W .pane{overflow:hidden}
.s-record .W .pane+.pane{border-left:1px solid #e8eaec}
.s-record .W .left{padding:0;background:#f8f9fa;display:flex;flex-direction:column}
.s-record .W .left-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.s-record .W .left-foot{flex:0 0 auto;padding-top:8px;border-top:1px solid #e8eaec}
.s-record .W .lhead{padding:14px 16px 10px;border-bottom:1px solid #e8eaec}
.s-record .W .lh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#666d7a;margin:0}
.s-record .W .lcount{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em;
  line-height:1.1;margin:6px 0 0}
.s-record .W .lcount span{font-size:var(--body);font-weight:400;color:#666d7a;letter-spacing:0;margin-left:6px}
.s-record .W .item{padding:12px 16px;border-bottom:1px solid #eceff0;cursor:pointer}
.s-record .W .item:last-child{border-bottom:0}
.s-record .W .item.sel{background:#fff;box-shadow:inset 3px 0 0 #c9ced3}
.s-record .W .irow{display:flex;align-items:flex-start;gap:9px}
.s-record .W .idot{width:9px;height:9px;border-radius:50%;background:#b8883a;flex:none;margin-top:5px}
.s-record .W .idot.m{width:7px;height:7px;margin-top:6px}
.s-record .W .idot.l{width:5px;height:5px;background:#c9ced3;margin-top:7px}
.s-record .W .ititle{font-size:var(--body);font-weight:500;color:#16191c;line-height:1.35}
.s-record .W .item:not(.sel) .ititle{font-weight:400;color:#434a52}
.s-record .W .imeta{font-size:var(--mono);color:#666d7a;margin-top:4px;padding-left:18px;
  }
.s-record .W .mid{padding:16px 20px;overflow-y:auto}
.s-record .W .recid{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;
  margin-bottom:18px;border-bottom:1px solid #f0f2f3;flex-wrap:wrap}
/* The one figure the ribbon keeps visible. Prose, not a card — it is a
   sentence saying what is being watched, not a control. */
.s-home .standsum{font-size:var(--body);color:#434a52;margin:0 0 22px}
/* RENEWALS RECORDED. Built 31 August 2026, step 4 of
   BUILD-NOTE-renewals-and-entry.md, drawn in
   MOCK-renewals-and-reminders.html panel 1.

   IN THE STYLESHEET, NOT IN JAVASCRIPT, AND THAT IS THE POINT. `Needs
   you` is built entirely from style.cssText a few hundred lines below,
   which is how a banned grey carried its label for weeks: test-shell
   reads this sheet, and a colour written from script never appears
   here. A block built the same way would be checked by nobody. So this
   one is classes, and every value in it is inside what that suite can
   read.

   BESIDE `Needs you`, NOT INSIDE IT. Ruled 31 August: Home surfaces
   obligations somebody created, never dates the world will reach
   anyway. A renewal date is the second kind until a person ticks the
   reminder, at which point it becomes an ask with their name on it and
   arrives in `Needs you` legitimately. The left border is grey rather
   than the gold `Needs you` carries, for the same reason. */
.s-home .renew{background:transparent;border-left:2px solid #e8eaec;padding:2px 0 2px 18px;margin:0 0 22px}
.s-home .renewlab{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#5e6469;margin:0 0 8px}
.s-home .renewrow{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;font-size:var(--body);line-height:1.5;flex-wrap:wrap}
.s-home .renewdate{color:#16191c;white-space:nowrap}
.s-home .renewwho{color:#434a52}
.s-home .renewask{font-size:var(--meta);color:#5e6469;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0}
.s-home .renewmore{font-size:var(--meta);color:#5e6469;background:none;border:0;padding:0;margin:6px 0 0;cursor:pointer;text-decoration:underline}
.s-home .renewnote{font-size:var(--meta);color:#5e6469;margin:6px 0 0}
/* THE LEAD TIME, ON THE MEMORY OWNER SCREEN. Built 31 August 2026.
   The unit is markup beside the field rather than something anybody
   types — ruled 31 August, because `12 weeks` in a text box invites
   `3 months` and `a quarter`. Every value here is a token; there is no
   literal size in this block, which is the rule test-shell holds. */
.s-record .ltrow{display:flex;align-items:baseline;gap:9px;margin:0 0 4px}
.s-record .ltweeks{width:5.5em;box-sizing:border-box;font-family:Inter,sans-serif;font-size:var(--body);color:#16191c;background:#fff;border:1px solid #e8eaec;border-radius:3px;padding:8px 10px}
.s-record .ltunit{font-size:var(--body);color:#434a52}
/* THE WHERE-THINGS-STAND TOGGLE. 31 August 2026. Not a control shape:
   no border, no background, no radius — the same treatment `.railtog`
   already uses for the rail's own group headings, because this opens a
   region rather than acting on a record. */
.s-home .standtog{margin-left:10px;border:0;background:none;padding:0;
  font-family:inherit;font-size:var(--meta);color:#434a52;
  text-decoration:underline;cursor:pointer;text-transform:none;
  letter-spacing:normal}
/* THE NEGOTIATION SCREEN'S CHIPS AND ITS SIDE SECTION. 31 August 2026.
   `.negchip` borrows the tint the pressed side button uses rather than
   introducing a colour; nothing here is a new grey or a literal size. */
.s-record .negchips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px}
/* The renewal date sits inside the posture section rather than in one
   of its own, so it carries its own top margin to separate it from the
   hint above. 18px, the value the record line already uses. */
.s-record .renewrow{margin-top:18px}
.s-record .leadpick{margin-top:9px}
/* The value claim on the record it belongs to. `--title` because the
   figure is the answer to the section's own question. */
.s-record .valbig{margin:0 0 4px;font-size:var(--title);font-weight:500;
  letter-spacing:-.014em;color:#16191c;line-height:1.3}
.s-record .valstate{margin:8px 0 6px}
.s-record .valamend{margin-top:16px}
/* `.pohja-value` is the section's own hook, alongside `.pohja-decision`
   and `.pohja-rests` — it carries no styling of its own beyond the
   section it already is, and it is declared here because the
   screen-vocabulary check caught it the moment the section shipped.
   That check has now fired on new work twice, both times mine. */
.s-record .pohja-value{margin-bottom:22px}
/* HOW THE FIGURE MOVED, under the value it moved to. Set at `--meta`
   because it is provenance rather than the claim — the figure above it
   is what the record says, and this is how it got there. */
.s-record .W .valmoves{margin-top:10px;padding-top:9px;border-top:1px solid #f0f2f3}
.s-record .W .valmove{font-size:var(--meta);color:#5e6469;margin:4px 0 0;line-height:1.5}
/* ── THE VALUE SCREEN, 1 September 2026 ──────────────────────────────
   The card layout Gerry chose, in the product's own values: 13px on
   every radius because a chip is a chip, the four greys the sheet
   already uses, and `#b8883a` as the only accent — on the forgone card
   and nowhere else, because that is the one figure on the page that
   exists nowhere else in the business. */
/* THE CARDS TAKE THE WINDOW; THE PROSE ABOVE THEM KEEPS THE MEASURE.
   `.s-record .W .pane.mid > *` caps every direct child at 568px — the
   RULED measure, 78ch converted on 17 August — and that is right for a
   decision record, which is a page of sentences. **THIS SCREEN IS A
   GRID OF TILES**, and five of them in a 568px box is what made
   `18 room-nights` tight enough to break in the first place.

   THE EXEMPTION IS THE ONE THE MEMORY TABLE ALREADY USES, in the same
   shape and for the same stated reason: *prose is capped and centred; a
   table takes the width it is given* — ruled 18 August. It is
   ASSERTED BY NAME in `test-shell` beside `memhead`, `memtable` and
   `memsec`, so removing it means overturning a ruling rather than
   tidying a rule.

   THE HEADING AND THE STANDFIRST ARE NOT EXEMPT and must not be. They
   are direct children of the pane, they are sentences, and they keep
   the measure — which is the whole distinction the rule draws. */
.s-record .W .pane.mid > .valbody{max-width:none}
.s-record .valcard{border:1px solid #e8eaec;border-radius:13px;padding:16px 18px;margin:0 0 14px}
.s-record .valcardhead{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 14px}
.s-record .valcardact{font-size:var(--meta);color:#666d7a}
/* 190px, NOT 168px. Measured after Gerry opened it against real data:
   at 168 the tile has 142px of content and *18 room-nights* is 156px at
   `--title`, so it broke to *18 room-* / *nights*. The longest figure
   the register can produce is a unit label somebody TYPED —
   `CAPACITY_UNITS` carries one — so no width is safe forever, and the
   value is allowed to wrap rather than being forced onto one line by
   `nowrap`, which would overflow the card instead. 190 clears every
   built-in unit; a long typed label will still wrap, and wrapping is
   the right failure. */
.s-record .valtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.s-record .valgaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.s-record .valtile{border:1px solid #eceef0;border-radius:13px;padding:13px 14px}
/* THE FIGURES SIT AT `--title`, NOT AT THE MOCK'S 26px AND 31px.
   The type scale is CLOSED — five tokens — and `test-shell` refuses a
   literal font size anywhere in the sheet, with the wordmark the one
   named exemption. The drawing used two sizes that are not in the
   scale, and the honest resolution is the scale rather than a third
   and fourth exemption. **THE FIGURES ARE THEREFORE SMALLER THAN THE
   DRAWING.** If they should be bigger, that is a new token and it is a
   ruling about the type scale, not about this screen. */
.s-record .valtilev{margin:0;font-size:var(--title);font-weight:500;letter-spacing:-.014em;
  color:#16191c;line-height:1.15}
.s-record .valtilel{margin:4px 0 0;font-size:var(--meta);color:#666d7a;line-height:1.35}
.s-record .valtileu{margin:9px 0 0;font-size:var(--meta);color:#8c96a1;line-height:1.35}
.s-record .valpair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.s-record .valrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid #f1f3f4}
.s-record .valrow:last-child{border-bottom:0}
.s-record .valrown{font-weight:500;color:#16191c}
.s-record .valrowc{font-size:var(--meta);color:#666d7a}
.s-record .valforgone{border-color:#e6dcc6;background:#fdfaf5}
.s-record .valforgv{margin:0;font-size:var(--title);font-weight:500;letter-spacing:-.014em;
  color:#16191c;line-height:1.15}
.s-record .valforgo{display:inline-flex;align-items:center;height:30px;padding:0 13px;
  margin-top:10px;border:1px solid #e0e4e6;border-radius:13px;background:#fff;
  font-size:var(--body);color:#16191c}
.s-record .valfoot{margin:12px 0 0;padding-top:11px;border-top:1px solid #f1f3f4;
  font-size:var(--meta);color:#666d7a}
.s-record .valclaim{display:flex;gap:16px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid #f1f3f4;color:inherit}
.s-record .valclaim:last-child{border-bottom:0}
/* THE TITLE AND ITS SUB-LINE ARE BLOCKS, not two inline spans.
   Rendered and looked at first: as inline they ran together —
   *Corporate event cancellationvalue forgone · against...* — because
   `.valtitle` and `.valkind` were written as `<span>` inside the
   middle column and neither declares a display. Found in a picture,
   not by a check. */
.s-record .valmid{flex:1;min-width:0}
.s-record .valmid .valtitle,
.s-record .valmid .valkind{display:block}
.s-record .valref{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  white-space:nowrap}
@media (max-width:820px){.s-record .valpair{grid-template-columns:1fr}}
/* The ask control, beside the record actions on the open point. */
.s-openpoint .askwrap{margin-top:14px}
.s-openpoint .askbody{margin-top:10px}
.s-openpoint .askopts{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 8px}
/* The publish control. It writes a position and widens nothing. */
.s-openpoint .pubwrap{margin-top:18px}
/* 13px, NOT 10. The named set says 13px is "an action — every chip,
   pill, button and option", and a chip drawn at a radius of its own is
   a shape nobody ruled. test-shell caught the 10px here. */
/* A CHIP IS A CHIP. 13px, LIKE EVERY OTHER CHIP IN POHJA. Ruled by
   Gerry, 1 September 2026, SUPERSEDING the 3px ruling made earlier the
   same day.

   WHAT THE FIRST RULING GOT WRONG. `We buy from them` was drawn twice,
   sixty pixels apart — a read-only chip and the control that sets it —
   and the two shapes were the wrong way round. The fix taken was to
   move the LABEL to 3px, on the closed set's own words: *a small square
   that is deliberately not a control*. Rendered and looked at, 3px
   reads as a BOX, not a quiet chip, and the negotiation screen ended up
   with two shapes where it had had one.

   THE RULING IS NOW THE SIMPLER ONE: every chip in the product is the
   same shape, whether it is pressed or not. CONSISTENCY ACROSS THE
   SCREENS BEATS A SHAPE THAT ENCODES PRESSABILITY. What separates a
   control from a label here is the border, the weight and the cursor —
   not the corner.

   `.sideopt` KEEPS 13px, which is the other half of the original
   correction and is unaffected: it was at 2px, the progress-bar value,
   and was genuinely wrong. */
.s-record .negchip{font-size:var(--meta);padding:3px 8px;border:1px solid #c9ced3;
  border-radius:13px;color:#434a52;background:#fff}
.s-record .negnone{font-size:var(--body);color:#5e6469;font-style:italic;margin:2px 0 8px}
/* WHICH SIDE OF THIS. Migration 0045's control, 31 August 2026. The
   same shape as `.roleopt` on the upload screen — two buttons, one
   pressed, neither pressed by default — because it is the same
   question: which of these two is this. Reusing the idiom rather than
   inventing one is why there is no third state to explain. */
.s-record .sideopts{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 0}
/* THE POSTURE OPTIONS TAKE THE ACTION RADIUS. Ruled by Gerry, 1
   September 2026. They were built at 2px on 31 August, which the closed
   set in `test-shell` defines as `a progress bar, which is a rule and
   not a shape` — so a pressable option was wearing the one value in the
   set reserved for something that is not pressed at all. The set's own
   entry for 13px reads `an action: every chip, pill, button and
   option`. This is an option. */
.s-record .sideopt{font-size:var(--body);padding:6px 12px;border:1px solid #c9ced3;
  border-radius:13px;background:#fff;color:#16191c;font-family:inherit;cursor:pointer}
.s-record .sideopt.on{border-color:#16191c;background:#eceef0;font-weight:600}
/* THE MEMORY OWNER SCREEN. 31 August 2026. Four rules, and every
   value is a token or a palette colour already in this sheet — nothing
   here is a literal size and nothing is a new grey. `.ownerv` is prose
   and takes the reading face; the record number beside it does not. */
.s-record .ownerv{font-size:var(--lead);color:#16191c;margin:0}
.s-record .ownerpick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
/* 13px, NOT 2px. `.ownerop` is a BUTTON — the option row on the
   Memory Owner screen — and it was wearing the value the closed set
   defines as *a progress bar, which is a rule and not a shape*. That
   is the identical fault ruled on `.sideopt` the same morning, still
   standing on another screen, and found by the audit rather than by
   the register: the shape-to-role check reads the PILL FAMILY by
   name and `ownerop` is not in it. */
.s-record .ownerop{font-size:var(--meta);padding:4px 9px;border:1px solid #c9ced3;
  border-radius:13px;background:#fff;color:#434a52;font-family:inherit;cursor:pointer}
.s-record .ownerop.on{border-color:#16191c;color:#16191c;font-weight:600}
.s-record .ownerfn{color:#5e6469;font-weight:400;margin-left:6px}
/* THE REDUCED MEMORY OWNER SCREEN, 10 September 2026: a quiet Change beside
   each fact the Memory Owner can change, its control opening beneath. */
.s-record .ownerchg{font-family:inherit;font-size:var(--body);border:0;background:none;padding:0;margin:6px 0 0;
  color:#16191c;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9ced3}
.s-record .ownerchg:hover{text-decoration-color:#16191c}
.s-record .ownerchg:focus-visible{outline:2px solid #b8883a;outline-offset:2px;border-radius:3px}
.s-record .ownerbox{margin:10px 0 0;max-width:568px}
.s-record .ownerbox[hidden]{display:none}
.s-record .ownerfind,.s-record .tzsel{width:100%;max-width:568px;box-sizing:border-box;font-family:Inter,sans-serif;
  font-size:var(--body);color:#16191c;background:#fff;border:1px solid #e8eaec;border-radius:3px;padding:8px 10px;margin:0 0 8px}
.s-record .ownersub{font-size:var(--body);color:#666d7a;margin-left:8px}
.s-record .W .recno{font-size:var(--mono);font-weight:500;
  color:#16191c;letter-spacing:.02em}
.s-record .W .recmeta{font-size:var(--body);color:#666d7a}
.s-record .prov{display:flex;align-items:center;gap:9px;padding:9px 12px;margin-bottom:20px;
  background:#f4f7f5;border-left:2px solid #4a7a5c}
.s-record .prov .pt{font-size:var(--body);font-weight:500;color:#2d5540}
.s-record .prov .pd{font-size:var(--body);color:#6a7d72}
.s-record .prov.recon{background:#f4f6f7;border-left-color:#666d7a}
.s-record .prov.recon .pt{color:#434a52}
.s-record .prov.recon .pd{color:#8a7a5e}
.s-record h3.dtitle{font-size:var(--title);font-weight:500;letter-spacing:-.014em;margin:0 0 18px;
  color:#16191c;line-height:1.3;max-width:568px}
.s-record .sec{margin-bottom:22px}
.s-record .seclab{font-size:var(--meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#666d7a;margin:0 0 7px}
.s-record .secbody{font-size:var(--body);color:#2e3439;margin:0;line-height:1.6;max-width:568px}
.s-record .opt{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid #f4f6f6}
.s-record .opt:last-child{border-bottom:0}
.s-record .optmark{flex:none;width:18px;height:18px;border-radius:50%;background:#f0f2f3;
  color:#666d7a;font-size:var(--meta);display:flex;align-items:center;justify-content:center;margin-top:1px}
.s-record .optbody{flex:1;min-width:0}
.s-record .optname{font-size:var(--body);color:#16191c;margin:0}
.s-record .optwhy{font-size:var(--body);color:#666d7a;margin:2px 0 0;line-height:1.5}
.s-record .cond{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f4f6f6}
.s-record .cond:last-child{border-bottom:0}
/* THE ASK THREAD'S MESSAGE ROW. Added 21 August 2026, from a live
   screenshot Gerry sent showing the Keep control cramped and boxed
   beside plain message text.

   ROOT CAUSE, AND IT WAS TWO THINGS, NOT ONE. `.markbtn` — as it then
   was — had been a completely unstyled raw <button> from the moment
   Mark was built: no rule for it existed anywhere in this sheet, so it
   took the user-agent default while every control beside it was
   drawn. That is the obvious half. The second half is structural and
   CSS alone would not have fixed it: `.mbody` was a <span> wrapping a
   block-level <p class="mline">, and an inline box containing a block
   cannot lay out as a column. The row therefore read as a run-on line
   with a button dropped into it. `.mbody` is now a <div>.

   The shape follows `.opt` directly, twenty-four lines above — the
   established two-column row on this same screen — rather than
   inventing a second pattern for the same job.

   THE CONTROL TAKES THE QUIET BORDER, NOT `.act`'s #8c96a1. Ruled by
   Gerry 21 August. It repeats on every message: at twenty messages the
   stronger border draws a column of boxes down the right-hand edge,
   which is the complaint the screenshot raised in the first place.
   24px, from §6's closed set — the minimum target size, needing no
   spacing exception argued. Caught before build: the first draft was
   26px and would have passed, because §6's height assertion reads a
   named selector family that never included this control. A gap in the
   test is not permission. */
.s-record .W .mrow{display:flex;gap:14px;align-items:flex-start;padding:9px 0;
  border-bottom:1px solid #f4f6f6}
.s-record .W .mrow:last-child{border-bottom:0}
.s-record .W .mbody{flex:1;min-width:0}
.s-record .W .mline{font-size:var(--body);color:#16191c;margin:0;line-height:1.5;max-width:568px}
.s-record .W .mfoot{display:block;margin-top:3px}
.s-record .W .mwho{font-size:var(--meta);color:#5e6469}
.s-record .W .keepbtn{flex:none;font-family:'Inter',sans-serif;font-size:var(--meta);font-weight:500;
  border-radius:13px;border:1px solid #dfe3e5;background:#fff;color:#434a52;height:24px;padding:0 11px;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;margin-top:1px}
.s-record .W .keepbtn:hover{background:#f4f6f7;border-color:#c9ced3}
/* THE KEPT STATE IS NOT GOLD. Ruled by Gerry 21 August, on the
   recommendation. Gold on a pale gold ground already means one thing
   inside this exact thread — `.readmarker`, "New since your last
   visit". Two gold signals within four hundred pixels of each other,
   meaning entirely different things, spends the discipline that makes
   the marker legible. The kept state is the tick, a stronger border,
   and full ink. */
.s-record .W .keepbtn.on{border-color:#c9ced3;color:#16191c}
.s-record .W .keepcount{color:#5e6469;font-weight:400}
/* THE DAY HEADER IS NOT A CONTROL SHAPE. It is pressable, so it needs
   a target, but it is a divider that happens to collapse — giving it
   the 13px action radius would say a date is a button, which is the
   fault §6 and the radii set both exist to remove. It declares no
   border-radius at all, so it sits outside the closed set rather than
   quietly widening it. Mono, uppercase and letterspaced, matching
   `.caplab` — the established shape for a label somebody reads rather
   than presses. */
.s-record .W .dhead{display:flex;align-items:center;gap:9px;width:100%;padding:14px 0 7px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-size:var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#5e6469}
.s-record .W .dhead:hover{color:#16191c}
.s-record .W .dhead .dline{flex:1;height:1px;background:#f0f2f3}
.s-record .W .dcount{font-family:'Inter',sans-serif;font-size:var(--meta);letter-spacing:0;
  text-transform:none;color:#666d7a}
.s-record .W .dcv{font-size:var(--body);line-height:1}
.s-record .W .dhead[data-open="0"] .dcv{transform:rotate(-90deg)}
.s-record .W .dgrp[hidden]{display:none}
/* CORRECTED 16 August 2026, after Gerry saw it cramped on the record
   screen. Two faults, and the first was caused by the type scale.

   1. IT WAS NEVER MONO. FORMATTING-MASTER §2: mono is for things
      somebody would quote — record numbers, references, hashes,
      keyboard keys, nothing else — and it names the misuses it was
      written to remove, one of which is `proceed with conditions`.
      That is .posval, the chip doing the same job one line away, and it
      was taken off mono while this one was missed. NARRATIVE is a
      classification, not an identifier: nobody quotes it elsewhere and
      expects it to resolve.

   2. THE BOX WAS DRAWN FOR THE OLD TYPE. Being mono, the scale sent it
      to --mono, 9.5px to 12px, inside width:72px with padding:0 —
      about two pixels of air each side. The type grew and the box did
      not, which is the class of fault the build plan predicted would
      need correcting on contact.

   min-width RATHER THAN width, deliberately. §6 says position in a list
   comes from a grid track and a chip that describes takes its content's
   width; the two pull against each other when each row is its own
   element, because a max-content track cannot align across siblings.
   A minimum gives both: the column still lines up, and a long label
   makes its own room instead of being crushed. Same shape of guard as
   minmax(0,1fr) on a grid track. */
.s-record .condkind{letter-spacing:.05em;
  text-transform:uppercase;flex:none;margin-top:2px;
  min-width:92px;height:20px;padding:0 9px;justify-content:center;
  text-align:center;box-sizing:border-box;white-space:nowrap}
.s-record .condkind.ev{background:#f4f6f7;color:#434a52}
.s-record .condkind.dt{background:#f0f2f3;color:#666d7a}
.s-record .condkind.nr{background:#f4f6f6;color:#666d7a}
.s-record .condtext{font-size:var(--body);color:#2e3439;margin:0}
.s-record .condmet{font-size:var(--body);color:#434a52;margin:3px 0 0;font-weight:500}
/* Whether Pohja is watching this condition. Deliberately quieter than
   `.condmet`, which states that something HAPPENED — this only states
   what is arranged.

   THE UNWATCHED VARIANT DIFFERS BY ITALIC AND NOTHING ELSE. It was
   drafted a shade lighter and test-shell caught it: #8a9096 is 3.23:1
   and banned for text. Nothing quieter than #666d7a clears 4.5:1, and
   the right conclusion is not to hunt for a loophole — a sentence
   admitting Pohja cannot watch something must not be the hardest
   sentence on the record to read. It is also not dressed as a warning:
   it is a limitation disclosed honestly, and an alarm colour would make
   an old record look faulty when what it is, is old. */
.s-record .condwatch{font-size:var(--meta);color:#666d7a;margin:3px 0 0}
.s-record .condwatch[data-unwatched]{font-style:italic}
.s-record .pos{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:11px 0;border-bottom:1px solid #f4f6f6}
.s-record .posmain{flex:1;min-width:0}
.s-record .posrow{display:flex;justify-content:space-between;align-items:center;gap:16px}
.s-record .pos:last-child{border-bottom:0}
.s-record .posfn{font-size:var(--body);color:#16191c;line-height:22px;margin:0}
.s-record .posval{white-space:nowrap;
  flex:none;min-width:112px;height:22px;padding:0 9px;justify-content:center;
  text-align:center;margin-top:0;box-sizing:border-box}
.s-record .posval.ok{background:#eef3f0;color:#3d6b52}
.s-record .posval.cond{background:#f4f6f7;color:#434a52}
.s-record .posval.dis{background:#fdeeed;color:#b03030}
.s-record .posnote{font-size:var(--body);color:#666d7a;margin:3px 0 0;line-height:1.5;max-width:400px}
.s-record .arrive{display:flex;align-items:center;gap:9px;padding:10px 13px;margin-bottom:16px;
  background:#f4f6f7;color:#434a52;font-size:var(--body);line-height:1.45}
.s-record .arrive svg{flex:none;color:#5e6469}

/* ── THE NAVIGATION STRIP ────────────────────────────────────────────
   Built 24 August 2026 to `MOCK-nav-strip.html`, ruled by Gerry.
   `STATE.md` §4.3 item 2 — every destination was reachable only from
   Home, on a product with 21 client routes.

   DELIBERATELY UNSCOPED, AND THAT IS THE POINT. Every other nav rule in
   this stylesheet is scoped per screen — `.s-record .pohja-mark`,
   `.s-home .nav`, ten screens' worth, with ZERO unscoped nav rules. §8
   records two screens shipping completely unstyled because a new screen
   class inherits none of them. A strip that must appear on every screen
   is exactly the thing that must not be written that way, so these
   rules carry no screen prefix and a screen added tomorrow gets the
   strip for free.

   NOT AN INDEX. There are 21 routes and the Home rail already offers
   twelve items; a strip listing every destination is the rail in a
   different corner, and two indexes drift. Three controls: the way back
   and the two acts.

   THE PRIMARY ACT IS MARKED BY WEIGHT AND A TINT, NEVER BY A SECOND
   TEXT COLOUR. #b8883a is 3.17:1 and MOCK-people.html records a gold
   text colour shipping for three days on that confusion.

   36px, from test-shell's closed set. It sits in the right margin the
   one-measure ruling left free earlier today — the band is 540px and
   the window is not. */
.pohja-strip{position:fixed;right:26px;bottom:22px;z-index:60;display:flex;gap:6px;
  background:#fff;border:1px solid #e8eaec;border-radius:13px;padding:6px;
  box-shadow:0 1px 3px rgba(22,25,28,.06)}
.pohja-strip button{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;
  font-size:var(--body);height:36px;padding:0 13px;border-radius:13px;border:1px solid transparent;
  background:none;color:#434a52;cursor:pointer;white-space:nowrap}
.pohja-strip button:hover{background:#f4f6f7;color:#16191c}
.pohja-strip button:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.pohja-strip button.pohja-strip-act{font-weight:500;color:#16191c;
  border-color:#e6dcc6;background:#fdfaf5}
.pohja-strip button.pohja-strip-act:hover{background:#f9f2e6}
.pohja-strip .pohja-strip-div{width:1px;background:#e8eaec;margin:6px 1px}

/* ── THE ASK COMPOSER ────────────────────────────────────────────────
   Built 24 August 2026 to `MOCK-ask-composer.html`, ruled by Gerry.

   `+ New ask` used to NAVIGATE to `#newask`, which asks the taxonomy —
   A person / A function / Everyone — BEFORE A WORD IS WRITTEN. That is
   the inversion `STATE.md` §4.5 was ruled against, and the FIRST of the
   six actions that ruling counted. Opening in place removes the
   navigation entirely: nothing is left, and nothing has to be come back
   from — which matters most on the screen somebody was reading when the
   question occurred to them, because that is where questions occur.

   ANCHORED TO THE STRIP, NOT CENTRED. Same `right:26px`, so the control
   that was pressed stays visible and the panel grows from it. A centred
   modal would put the answer somewhere other than the question. AND THE
   STRIP DOES NOT MOVE when this opens: shifting a control under a
   cursor that is about to press it is its own fault.

   UNSCOPED, for the same reason the strip is — every `.s-*` nav rule in
   this file is per-screen, §8 records two screens shipping bare because
   of it, and a composer that must open on every screen is exactly the
   thing that must not be written that way.

   NOT A CHAT WINDOW. It closes when the ask is sent. §4.5 makes raising
   an ask nearly free; it does not make Pohja a messenger. */
/* `width:min(...)` RATHER THAN A FIXED 560px, because test-shell caught
   the fixed one: "a chip may declare a minimum width, never a fixed
   one. A fixed width on a box whose contents can change length is a
   promise the label cannot keep." The guard is blunt — it fires on
   anything with a 13px radius — but it was RIGHT here, and not for the
   reason it states: 560px is wider than a narrow window, so the panel
   would have hung off the screen. One declaration now carries both
   bounds. */
.pohja-composer{position:fixed;right:26px;bottom:80px;z-index:61;
  width:min(560px, calc(100vw - 52px));background:#fff;border:1px solid #e8eaec;border-radius:13px;
  padding:16px 17px 14px;box-shadow:0 10px 30px rgba(22,25,28,.10)}
/* THE CHIP ROW IN THE COMPOSER, added 9 September 2026 with the chips.
   It reuses `.authopt`, which is already declared for this window's
   screens, so only the row that holds them is new. Wraps, because five
   chips in a small window will not sit on one line at every width and a
   row that overflows a dialog is worse than a row that wraps. */

/* THE RECORDS A REPLY STOOD ON, as rows. Added 9 September 2026 with the
   Q3 ruling. Scoped to the record shell, which is the screen every ask
   route uses. */
.s-record .mstoodlead{font-size:var(--meta);color:#666d7a;margin:8px 0 4px}
.s-record .mstoodrow{display:flex;gap:9px;align-items:baseline;padding:4px 0;
  border-bottom:1px solid #f0f2f3;text-decoration:none}
.s-record .mstoodrow:last-child{border-bottom:0}
.s-record .mstoodref{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);
  color:#5e6469;flex:none}
.s-record .mstoodtitle{font-size:var(--meta);color:#2e3439;line-height:1.45}
.pohja-composer .cmpsends{font-size:var(--meta);color:#2e3439;margin:8px 0 0;line-height:1.55}
.pohja-composer .cmprank{font-size:var(--meta);color:#5e6469;margin:6px 0 0}
/* THE CHIP ROW AND ITS CHIPS WERE REMOVED HERE, 10 September 2026, with
   the chips themselves: ruled by Gerry from MOCK-ask-typing.html — the
   question is the only input. Their 9 September comment recorded that the
   panel lives outside every `.s-*` wrapper, which is still true of the
   rules below and why they are scoped `.pohja-composer`. */
.pohja-composer[hidden]{display:none}
.pohja-composer .cmph{font-size:var(--lead);color:#16191c;margin:0 0 2px}
.pohja-composer .cmpsub{font-size:var(--meta);color:#666d7a;margin:0 0 12px}
/* ── THE BOX YOU WRITE IN ────────────────────────────────────────────
   ONE RULE FOR ALL THREE, ruled by Gerry 24 August 2026: "responding to
   build the conversation should have the same text box as New Ask."

   HE FOUND A REAL FAULT AND NOT ONLY AN INCONSISTENCY. The ask thread's
   reply box had NO SIZING AT ALL — `.fieldbox` is sized at line 413 for
   `.s-openpoint` and at 1692 for `.s-upload`, and `.s-record` inherits
   only a border colour. So the reply fell back to a browser-default
   textarea: about twenty columns and two rows, on a screen whose whole
   purpose is writing a reply. THE §8 FAULT AGAIN — a rule written per
   screen, and the screen that needed it most was not on the list.

   So the three places somebody writes an ask or a reply — the composer,
   the arriving ask, and the thread — now take one rule rather than
   three that drift. A person writing a sentence should not be able to
   tell which of them they are in. */
.pohja-composer .cmpbox,
.pohja-inbox .inbreply,
/* SCOPED TO `.areply`, NOT TO `.fieldbox` — and that is not cosmetic.
   `tests/test-raise.mjs` asserts that `.fieldbox` is NOT styled under
   `.s-record`, because that absence is WHY the raise form cannot borrow
   the record shell the way `people` and `ask` do. A first version of
   this rule read `.s-record .W [data-sec="reply"] .fieldbox` and broke
   that invariant to save inventing a class. The suite caught it.
   Eroding an architectural invariant to avoid a class name is a bad
   trade, so the reply box carries its own. */
.s-record .W .aopen .areply,
.s-record .W [data-sec="reply"] .areply{width:100%;font-family:'Inter',sans-serif;
  font-size:var(--body);color:#2e3439;line-height:1.5;border:1px solid #dfe3e5;
  border-radius:6px;background:#fff;padding:11px 12px;min-height:78px;resize:vertical}
/* The gold edge marks the box that is WAITING for you — the composer you
   just opened, and the reply to an ask that is waiting on you. A thread
   you are reading is not waiting on you until you choose to write, so
   its box takes the quiet border until focus. */
.pohja-composer .cmpbox{border-color:#b8883a}
.pohja-composer .cmpbox:focus,
.pohja-inbox .inbreply:focus,
.s-record .W .aopen .areply:focus,
.s-record .W [data-sec="reply"] .areply:focus{outline:2px solid #b8883a;
  outline-offset:-1px;border-color:transparent}
.pohja-composer .cmpnote{font-size:var(--meta);color:#666d7a;margin:7px 1px 0}
.pohja-composer .cmplab{font-size:var(--meta);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:#666d7a;margin:16px 0 8px;display:flex;gap:9px;align-items:baseline}
.pohja-composer .cmplab i{font-style:normal;font-weight:400;letter-spacing:0;
  text-transform:none;color:#666d7a}
.pohja-composer .cmpchans{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:6px}
.pohja-composer .cmpch{display:flex;align-items:center;gap:10px;text-align:left;
  font-family:'Inter',sans-serif;font-size:var(--body);background:#fff;border:1px solid #e8eaec;
  border-radius:13px;padding:8px 12px;cursor:pointer;color:#2e3439}
/* THE × ON A NAMED CHIP, 12 September 2026. 13px radius like every other
   action in the product, and a hit area big enough to press on a phone. It sits
   inside the card and stops the click reaching it, so pressing the card still
   chooses the channel. */
.pohja-composer .cmpx{margin-left:auto;padding:0 2px 0 8px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;color:#666d7a;font-size:var(--lead);line-height:1;cursor:pointer;flex:none}
.pohja-composer .cmpx:hover{color:#16191c;background:#f0f2f3}
.pohja-composer .cmpx:focus-visible{outline:2px solid #b8883a;outline-offset:-2px}
.pohja-composer .cmpch:hover{border-color:#c9ced3}
.pohja-composer .cmpch:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
/* THE CHOSEN ONE. Marked by the gold tint and border the attention
   panel already uses, plus weight — never by a second text colour, and
   never by a tick alone, which is a 13px mark doing the work of a
   state. It has to be legible at a glance across four chips. */
.pohja-composer .cmpch.picked{background:#fdfaf5;border-color:#e6dcc6}
.pohja-composer .cmpch.picked b{font-weight:500}
/* SEND IS DISABLED UNTIL SOMEBODY IS CHOSEN, and looks it. #666d7a on
   #f8f9fa clears 4.94:1, so a disabled control is still READABLE —
   greying a button into illegibility hides what it would do. */
.pohja-composer .cmpbtn[disabled]{background:#f8f9fa;color:#666d7a;cursor:default}
.pohja-composer .cmpbtn[disabled]:hover{border-color:#e8eaec}
.pohja-composer .cmpch b{font-weight:500;color:#16191c;display:block;line-height:1.3}
.pohja-composer .cmpch span{display:block;font-size:var(--meta);color:#666d7a}
/* THE MATCHED WORD, on its own line under the lead, saying what it is —
   `matched “budget”` — where a bare word at the card's edge said nothing.
   The folded line and the @ list, 10 September 2026. */
.pohja-composer .cmpch .cmpmatch{font-size:var(--meta);color:#666d7a}
.pohja-composer .cmpnamed .cmplab{margin-top:14px}
.pohja-composer .cmpfold{display:block;font-family:'Inter',sans-serif;font-size:var(--meta);border:0;
  background:none;padding:0;margin:12px 0 8px;color:#666d7a;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9ced3}
.pohja-composer .cmpfold::before{content:"\203A\00a0"}
.pohja-composer .cmpfold[aria-expanded=true]::before{content:"\2304\00a0"}
.pohja-composer .cmpfold:hover{color:#16191c}
.pohja-composer .cmpfold:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.pohja-composer .cmpat{border:1px solid #e8eaec;border-top:0;border-radius:6px;
  max-height:240px;overflow-y:auto;margin:-4px 0 0;background:#fff}
.pohja-composer .cmpat[hidden]{display:none}
.pohja-composer .athit{display:flex;align-items:baseline;gap:9px;margin:0;padding:7px 12px;
  border-top:1px solid #f4f6f6;cursor:pointer;font-size:var(--body)}
.pohja-composer .athit b{font-weight:500;color:#16191c}
.pohja-composer .athit span{font-size:var(--meta);color:#666d7a}
.pohja-composer .athit.on{background:#fdfaf5}
/* A BARE @, AND THE MEETING WITH NOBODY NAMED — built 11 September 2026 to
   MOCK-ask-window-changes.html questions 1 and 2. The @ list's closing line
   is not an option, so it takes the row's spacing and none of its cursor. */
.pohja-composer .atmore{margin:0;padding:7px 12px;border-top:1px solid #f4f6f6;font-size:var(--meta);color:#666d7a}
/* ── THE ALERT TEAL, #0f6b5c, AND IT IS THE THIRD COLOUR ──────────────
   Ruled by Gerry 12 September 2026 — *it catches your eye but doesn't
   shout* — together with the rule that permits a third colour at all, so
   the 9 September scheme is amended rather than contradicted. **This is
   the first time it reaches the product**; until now it existed only in
   mocks, and `drive-mock-palette.mjs` was classing it as drift because
   the client is the authority on what Pohja DRAWS and not on what has
   been RULED. `drive-palette.mjs`'s frozen list gains it in the same
   commit, which is the freeze working rather than being edited around.

   ONE GROUND CLASS, USED IN BOTH REFUSALS. `.cmpalert` is on the
   unmatched token inside the mirror and on the act inside the refusal
   line; two classes would be two treatments by the end of the month. */
.pohja-composer .cmpalert{background:#0f6b5c;color:#fff;border-radius:3px;padding:1px 4px}
.pohja-composer .cmprefusal{font-size:var(--body);color:#2e3439;margin:9px 1px 0;
  padding-left:10px;border-left:2px solid #b8883a}
.pohja-composer .cmprefusal[hidden]{display:none}
.pohja-composer .cmprefusal b{font-weight:600;color:#16191c}
/* THE EDGE GOES TEAL FOR THE MEETING REFUSAL ONLY — row two, treatment B.
   The token refusal marks the word itself, so an edge as well would be
   the same thing said twice. */
.pohja-composer .cmpbox.cmpwarn{border-color:#0f6b5c}
/* ── THE MIRROR ───────────────────────────────────────────────────────
   A textarea cannot give one word inside it a background, so the ground
   is drawn on a layer behind the box holding the same words. **Its font,
   spacing and padding are copied from the box's own computed style at
   paint time** — declaring them here as well would be a second source of
   truth for where a word sits. Only position and behaviour are declared.
   **The box's text is hidden ONLY while something is marked**, which is
   what `.cmpmasked` does: every other moment, this window is the textarea
   it has always been, and the caret is the box's own. */
.pohja-composer .cmpwrap{position:relative}
.pohja-composer .cmpmirror{position:absolute;top:0;left:0;margin:0;overflow:hidden;
  white-space:pre-wrap;overflow-wrap:break-word;pointer-events:none;
  color:#2e3439;background:none;border:1px solid transparent;border-radius:6px}
.pohja-composer .cmpbox.cmpmasked{color:transparent;caret-color:#16191c;background:none}
/* THE MEETING, 10 September 2026 — the meeting card spans the row so it reads
   as a choice about everybody named, not another person; what opens beneath
   uses the window's own field, text-action and card values. */
.pohja-composer .cmpch.meet{grid-column:1 / -1}
.pohja-composer .cmpmeet{margin:12px 0 0;padding:12px 0 0;border-top:1px solid #f4f6f6}
.pohja-composer .cmpmeet .cmplab{margin:10px 0 6px}
.pohja-composer .cmpmeet .cmplab:first-child{margin-top:0}
.pohja-composer .cmpin{font-family:'Inter',sans-serif;font-size:var(--body);color:#2e3439;border:1px solid #dfe3e5;
  border-radius:6px;background:#fff;padding:7px 10px;box-sizing:border-box}
.pohja-composer .cmpin:focus{outline:2px solid #b8883a;outline-offset:-1px;border-color:transparent}
.pohja-composer .cmpaddout{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.pohja-composer .cmpaddout[hidden]{display:none}
.pohja-composer .cmptext{font-family:'Inter',sans-serif;font-size:var(--body);border:0;background:none;padding:0;
  color:#16191c;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9ced3}
.pohja-composer .cmptext:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.pohja-composer .cmpoutrow{margin:0 0 6px}
.pohja-composer .cmpchip{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:13px;
  border:1px solid #e0e4e6;font-size:var(--body);color:#16191c;background:#fff}
.pohja-composer .cmpchip small{font-size:var(--meta);color:#666d7a}
.pohja-composer .cmpchip button{border:0;background:none;padding:0;color:#666d7a;cursor:pointer;font-size:var(--body)}
.pohja-composer .cmpwhen{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pohja-composer .cmpto{font-size:var(--body);color:#666d7a}
.pohja-composer .cmpmeethint{font-size:var(--meta);color:#2e3439;margin:10px 0 0;line-height:1.55}
.pohja-composer .cmpslotlab{font-size:var(--meta);color:#666d7a;margin:0 0 6px}
.pohja-composer .cmpslotlab[hidden],.pohja-composer .cmpslots[hidden],.pohja-composer .cmpwhere[hidden]{display:none}
.pohja-composer .cmpslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0 0 8px}
.pohja-composer .cmpch.cmpslot{padding:7px 10px}
.pohja-composer .cmpnotinv{font-size:var(--meta);color:#8a3d46}
.pohja-composer .cmpch .cmpsim{font-size:var(--meta);color:#8a3d46}
.pohja-composer .cmpfoot{display:flex;align-items:center;gap:10px;margin-top:14px;
  padding-top:12px;border-top:1px solid #f4f6f6}
.pohja-composer .cmpfoot .cmpgrow{flex:1;font-size:var(--meta);color:#666d7a}
.pohja-composer .cmpbtn{font-family:'Inter',sans-serif;font-size:var(--body);height:36px;
  padding:0 15px;border-radius:13px;border:1px solid #e8eaec;background:#fff;color:#2e3439;cursor:pointer}
.pohja-composer .cmpbtn:hover{border-color:#c9ced3}

/* ── AN ASK ARRIVING ─────────────────────────────────────────────────
   Built 24 August 2026, ruled by Gerry: "when you send an Ask, the
   recipient should receive it in the same window and position above the
   nav bar."

   THE SYMMETRY IS THE POINT. You ask from that spot; you receive in
   that spot. The same panel, the same right:26px, the same distance
   above the strip — so the place where a question leaves and the place
   where one arrives are one place, and nobody has to learn a second.

   ONE DECISION I MADE AND DID NOT BURY: IT ARRIVES COLLAPSED. A panel
   that opens itself over whatever somebody is reading is an
   interruption, and `STATE.md` records that Pohja is READ FAR MORE
   OFTEN THAN IT IS WRITTEN — a product that covers the reading to
   announce the writing has its own priorities backwards. So it appears
   as a single line, in position, and one press opens the full panel
   with the reply box. Same window, same position, no hijack.

   Auto-expanding is one line if Gerry rules the other way: the note in
   `openAskInbox` says which. */
.pohja-inbox{position:fixed;right:26px;bottom:80px;z-index:61;
  width:min(560px, calc(100vw - 52px));background:#fff;border:1px solid #e6dcc6;
  border-radius:13px;box-shadow:0 10px 30px rgba(22,25,28,.10);overflow:hidden}
.pohja-inbox[hidden]{display:none}
.pohja-inbox .inbbar{display:flex;align-items:center;gap:10px;width:100%;
  font-family:'Inter',sans-serif;font-size:var(--body);text-align:left;
  background:#fdfaf5;border:0;padding:11px 14px;cursor:pointer;color:#2e3439}
.pohja-inbox .inbbar:hover{background:#f9f2e6}
.pohja-inbox .inbbar:focus-visible{outline:2px solid #b8883a;outline-offset:-2px}
.pohja-inbox .inbdot{width:7px;height:7px;border-radius:50%;background:#b8883a;flex:none}
.pohja-inbox .inbwho{font-weight:500;color:#16191c;white-space:nowrap}
.pohja-inbox .inbq{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pohja-inbox .inbmore{font-size:var(--meta);color:#666d7a;white-space:nowrap}
.pohja-inbox .inbbody{padding:14px 15px 13px;border-top:1px solid #f0e7d6}
.pohja-inbox .inbfull{font-size:var(--body);color:#16191c;margin:0 0 4px;line-height:1.45}
.pohja-inbox .inbmeta{font-size:var(--meta);color:#666d7a;margin:0 0 11px}
/* `.inbreply` takes the shared writing-box rule above. */
.pohja-inbox .inbfoot{display:flex;align-items:center;gap:10px;margin-top:11px}
.pohja-inbox .inbfoot .inbnote{flex:1;font-size:var(--meta);color:#666d7a}
.pohja-inbox .inbbtn{font-family:'Inter',sans-serif;font-size:var(--body);height:36px;
  padding:0 15px;border-radius:13px;border:1px solid #e8eaec;background:#fff;
  color:#2e3439;cursor:pointer}
.pohja-inbox .inbbtn:hover{border-color:#c9ced3}

/* ── ASKS AS THREADS ─────────────────────────────────────────────────
   The destination showed a count, three tabs and "Nothing here right
   now". A row carries ONLY what `GET /asks` returns — question,
   addressType with the person or function, messageCount, lastMessageAt,
   waitingOnMe, expiresAt. No message preview and no unread count,
   because the list route returns neither and drawing them first would
   invent what the API cannot say.

   UNCAPPED, AND UNLIKE THE PEOPLE ROW THAT COSTS NOTHING. A person row
   holds ~338px of information, so stretching it opens a gap. A thread
   row holds a QUESTION — a sentence, which fills the width. That is the
   distinction the People arithmetic of 24 August turned on. */
.s-record .W .askthreads{margin-top:6px}
.s-record .W .athread{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  width:100%;padding:13px 0;border:0;border-bottom:1px solid #f4f6f6;background:none;
  text-align:left;cursor:pointer;font-family:'Inter',sans-serif;text-decoration:none}
.s-record .W .athread:hover{background:#fbfcfc}
.s-record .W .athread:focus-visible{outline:2px solid #b8883a;outline-offset:-2px}
.s-record .W .aq{font-size:var(--body);color:#16191c;margin:0 0 4px;line-height:1.45}
.s-record .W .athread.amine .aq{font-weight:500}
.s-record .W .ameta{font-size:var(--meta);color:#666d7a;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}
.s-record .W .awho{color:#2e3439}
.s-record .W .adot{width:6px;height:6px;border-radius:50%;background:#b8883a;flex:none;display:inline-block}
.s-record .W .aright{font-size:var(--meta);color:#666d7a;white-space:nowrap;text-align:right}
.s-record .W .aright b{display:block;font-weight:500;color:#2e3439}
.s-record .W .asoon{color:#8a3d46}
/* LIST OR WEEK on the Asks screen, 10 September 2026 (MOCK-asks-week.html).
   The switch is two quiet text choices; the week reuses the row's own
   question, meta, dot and red, in cards. */
.s-record .W .asksviews{display:flex;gap:14px;margin:0 0 6px}
.s-record .W .viewopt{font-family:'Inter',sans-serif;font-size:var(--body);border:0;background:none;padding:0 0 3px;
  color:#666d7a;cursor:pointer;border-bottom:2px solid transparent}
.s-record .W .viewopt[aria-pressed=true]{color:#16191c;border-bottom-color:#16191c}
.s-record .W .viewopt:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-record .W .askweek{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:1100px){.s-record .W .askweek{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.s-record .W .askweek{grid-template-columns:1fr}}
.s-record .W .awcol{border-top:1px solid #e8eaec;padding-top:10px;min-width:0}
.s-record .W .awday{font-size:var(--meta);color:#666d7a;margin:0 0 8px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.s-record .W .awday b{font-weight:500;color:#16191c}
.s-record .W .awcard{display:block;border:1px solid #e8eaec;border-radius:6px;padding:9px 10px;margin:0 0 8px;
  text-decoration:none;background:#fff}
.s-record .W .awcard:hover{border-color:#c9ced3}
.s-record .W .awcard:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-record .W .awcard.amine{border-color:#e6dcc6;background:#fdfaf5}
.s-record .W .awcard.amine .aq{font-weight:500}
.s-record .W .awline{display:block;font-size:var(--meta);color:#2e3439;margin-top:6px}
.s-record .W .awreply{color:#666d7a}
.s-record .W .awempty{font-size:var(--meta);color:#8c96a1;margin:0}
/* A MEETING'S TRANSCRIPT ON ITS THREAD, 10 September 2026 — the drop, and the
   passages in the Asks screen's bands. Passages sit at the message measure. */
.s-record .W .mdrop{border:1px dashed #c9ced3;border-radius:6px;padding:18px 16px;max-width:568px;background:#fafbfb}
.s-record .W .mdrop.over{border-color:#b8883a;background:#fdfaf5}
.s-record .W .mdrop:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-record .W .mdroph{font-size:var(--body);color:#16191c;margin:0 0 2px;font-weight:500}
.s-record .W .mdrops{font-size:var(--meta);color:#666d7a;margin:0 0 10px}
.s-record .W .mpwhat{font-family:'Inter',sans-serif;font-size:var(--meta);border:0;background:none;padding:0;margin:0 0 6px;color:#666d7a;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9ced3}
.s-record .W .mpwhatbody{font-size:var(--meta);color:#2e3439;max-width:568px;margin:0 0 8px}
.s-record .W .mpwhatbody p{margin:0 0 4px}
.s-record .W .mpwhatbody b{font-weight:500}
.s-record .W .mpass{padding:12px 0 12px 26px;border-bottom:1px solid #f4f6f6;max-width:594px}
.s-record .W .mptext{font-size:var(--body);color:#16191c;line-height:1.5;margin:0 0 4px}
.s-record .W .mpmeta{font-size:var(--meta);color:#666d7a;margin:0}
.s-record .W .mpacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.s-record .W .mpwhy{flex-basis:100%;font-size:var(--meta);color:#2e3439;margin:2px 0 0}
/* THE BAND DOT ON THE ASKS LIST. Same values as `.adot` above it and a
   deliberately different name: `.adot` means "this ROW is waiting on
   you", and a band heading is a different role. The shape is shared so
   the two marks read as one mark, not so one class does two jobs. */
/* What a generated answer stood on, under its byline. Sits at the
   message's own measure and never wider — it is a footnote to the
   words above it, not a section. */
.s-record .W .mstood{display:block;font-size:var(--meta);color:#666d7a;margin-top:5px}
.s-record .W .mstood a{color:#5e6469}
/* The Keep help line, under the message rather than beside the button.
   Held to the message's own measure so it reads as a footnote to those
   words and not as a caption for the pane. */
.s-record .W .keephelp{margin-top:6px;max-width:568px}
.s-record .W .pbdot{width:6px;height:6px;border-radius:50%;background:#b8883a;
  flex:none;display:inline-block}
/* The bands themselves, on the People screen's pattern. Rows sit inset
   26px under their heading, the way `.s-people .W .prow` does, so a row
   reads as belonging to its band rather than as a list that happens to
   have a heading above it. */
.s-record .W .pband{border-top:1px solid #e8eaec;padding-top:14px;margin-top:14px}
.s-record .W .pbtn{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  padding:4px 0;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.s-record .W .pbtn:focus-visible{outline:2px solid #b8883a;outline-offset:3px;border-radius:3px}
.s-record .W .pcar{color:#666d7a;transition:transform .14s ease;flex:none}
.s-record .W .pbtn[aria-expanded=false] .pcar{transform:rotate(-90deg)}
.s-record .W .pbname{font-size:var(--mono);letter-spacing:.10em;text-transform:uppercase;color:#16191c}
/* THE COUNT SITS WITH ITS LABEL. Ruled by Gerry 9 September 2026 from
   `MOCK-band-count.html`: *a band heading is not a table row.*
   `Everything else 1` reads as one semantic unit; pushed to the far
   edge the eye travels a thousand pixels, and on a COLLAPSED band the
   count is the only thing the row says.

   THE TREATMENT IS UNCHANGED AND THAT IS THE POINT — same mono, same
   size, same colour. Only `margin-left:auto` goes. A badge or extra
   spacing would make it a status marker; it is metadata belonging to
   the group label.

   THIS IS NOW THE CONVENTION AND NOT A ONE-OFF. The Negotiations groups
   (`.nggh`) and the §18 sets (`.ngseth`) already put the count beside
   the label; this was one of two headings that did not. */
.s-record .W .fromask{font-size:var(--meta);color:#5e6469;margin:0 0 14px;line-height:1.55}
@media print{.s-record .W .fromask{display:none}}
.s-record .W .pbcount{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a}
.s-record .W .pband .athread{padding-left:26px}
@media (prefers-reduced-motion:reduce){.s-record .W .pcar{transition:none}}

/* ── A THREAD OPENS BENEATH ITS ROW ──────────────────────────────────
   Ruled by Gerry 24 August 2026: "when a user clicks to respond, they
   should not be taken to a new page. The window should just appear
   beneath."

   The last of the four places this product used to navigate for
   something small — the composer, the arriving ask, the send, and now
   the reply. Each one took you off the screen you were reading to do a
   thing that takes a sentence.

   THE ROW IS STILL AN ANCHOR, AND THAT IS THE POINT OF IT. Plain left
   click expands in place; middle click, ⌘-click and "copy link" still
   reach `#askthread` because the `href` is real. A button could not do
   that — `test-asks-destination` caught exactly that when these rows
   were first built, by asserting the ROUTE rather than the element. */
.s-record .W .athreadwrap{border-bottom:1px solid #f4f6f6}
.s-record .W .athreadwrap .athread{border-bottom:0}
.s-record .W .athreadwrap.open{background:#fbfcfc}
.s-record .W .aopen{padding:2px 0 16px 0}
.s-record .W .amsgs{margin:0 0 12px}
.s-record .W .amsg{padding:8px 0;border-top:1px solid #f4f6f6}
.s-record .W .amsg:first-child{border-top:0}
.s-record .W .amsgwho{font-size:var(--meta);color:#666d7a;margin:0 0 3px}
.s-record .W .amsgwho b{font-weight:500;color:#2e3439}
.s-record .W .amsgbody{font-size:var(--body);color:#16191c;margin:0;line-height:1.5}
.s-record .W .anone{font-size:var(--meta);color:#666d7a;padding:6px 0 10px}
.s-record .W .arow2{display:flex;align-items:center;gap:10px;margin-top:10px}
.s-record .W .arow2 .anote{flex:1;font-size:var(--meta);color:#666d7a}
.s-record .W .abtn{font-family:'Inter',sans-serif;font-size:var(--body);height:36px;padding:0 15px;
  border-radius:13px;border:1px solid #e8eaec;background:#fff;color:#2e3439;cursor:pointer}
.s-record .W .abtn:hover{border-color:#c9ced3}
.s-record .W .abtn[disabled]{background:#f8f9fa;color:#666d7a;cursor:default}

/* ── THE ASK BOX ─────────────────────────────────────────────────────
   Built 24 August 2026 to `STATE.md` §4.5 and `MOCK-asks-channels.html`,
   ruled by Gerry, and opened as a SMALL WINDOW from `+ New ask` rather
   than as a screen.

   WHY A WINDOW AND NOT A ROUTE. §4.5's whole argument is that Pohja
   competes with the text message somebody would have sent instead, and
   that raising an Ask cost six actions. A route change is an action:
   it replaces what you were reading, and coming back is another. The
   strip removed the first of the six on 24 August; this removes the
   rest, and leaves the screen behind it intact so an ask raised while
   reading a record does not cost you the record.

   `#newask` STILL EXISTS and still works. A window is not a substitute
   for an addressable screen — somebody sent a link to it should land
   somewhere.

   UNSCOPED, for the same reason the strip is: it opens over every
   screen, and §8 records two screens shipping bare because every nav
   rule in this file is scoped per screen. */
.pohja-askveil{position:fixed;inset:0;z-index:90;background:rgba(22,25,28,.18);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.pohja-askbox{width:560px;max-width:100%;background:#fff;border:1px solid #e8eaec;
  border-radius:6px;box-shadow:0 18px 48px rgba(22,25,28,.16);padding:18px 20px 16px}
.pohja-askbox h3{font-family:'Inter',sans-serif;font-size:var(--body);font-weight:500;
  color:#16191c;margin:0 0 2px}
.pohja-askbox .asksub{font-size:var(--meta);color:#666d7a;margin:0 0 12px}
.pohja-askbox textarea{width:100%;min-height:76px;font-family:'Inter',sans-serif;
  font-size:var(--body);line-height:1.5;color:#16191c;padding:10px 11px;
  border:1px solid #dfe3e5;border-radius:6px;resize:vertical}
.pohja-askbox textarea:focus{outline:2px solid #b8883a;outline-offset:-1px;border-color:transparent}
/* THE CHANNELS. Nothing at rest — this block is empty until a word in
   the sentence matches this organisation's own record. */
.pohja-asklab{font-size:var(--meta);color:#666d7a;margin:11px 0 6px}
.pohja-askch{display:flex;flex-wrap:wrap;gap:6px}
.pohja-askch button{font-family:'Inter',sans-serif;font-size:var(--meta);height:24px;
  padding:0 11px;border-radius:13px;border:1px solid #e8eaec;background:#fff;
  color:#434a52;cursor:pointer;white-space:nowrap}
.pohja-askch button:hover{border-color:#16191c;color:#16191c}
.pohja-askch button[aria-pressed="true"]{background:#fdfaf5;border-color:#e6dcc6;
  color:#16191c;font-weight:500}
.pohja-asknone{font-size:var(--meta);color:#666d7a;margin:11px 0 0}
.pohja-askact{display:flex;gap:8px;align-items:center;margin-top:14px}
.pohja-askact .pohja-asksend{font-family:'Inter',sans-serif;font-size:var(--body);font-weight:500;
  height:36px;padding:0 16px;border-radius:13px;border:1px solid #b8883a;background:#b8883a;
  color:#fff;cursor:pointer}
.pohja-askact .pohja-asksend[disabled]{background:#fff;color:#666d7a;border-color:#e8eaec;cursor:default}
.pohja-askact .pohja-askcancel{font-family:'Inter',sans-serif;font-size:var(--meta);height:24px;
  padding:0 11px;border-radius:13px;border:1px solid #e8eaec;background:#fff;color:#666d7a;cursor:pointer}
.pohja-askact .pohja-asknote{margin-left:auto;font-size:var(--meta);color:#666d7a}

/* WHEN THE LEFT PANE IS DROPPED, THE GRID MUST CLOSE UP — AND THIS
   RULE IS WRITTEN THE ONLY WAY THAT CANNOT MISS A SCREEN.

   THE FIRST VERSION READ `.s-record .W .panes.destination.nostrip-left`
   AND WAS THE §8 FAULT ALL OVER AGAIN, in the same commit whose comment
   above claims to avoid it. `#decisions` is `.s-decisions-table` and
   `#people` is `.s-people`, so the override never applied to either:
   the pane was removed and the grid still said `230px minmax(0,1fr)`,
   which put the whole screen into the 230px column. Gerry found both on
   a live instance within minutes. Reading the rule did not catch it;
   reading the COMPUTED grid on nine screens did.

   Every `.panes` rule in this stylesheet is scoped per screen, so no
   single unscoped selector can outrank them — `.s-people .W .panes` is
   three classes and `.panes.nostrip-left` is two. Rather than write one
   override per screen and leave the eleventh screen to fail silently,
   the column list is set INLINE by the code that removes the pane. An
   inline style outranks every scoped rule, and a screen added tomorrow
   is covered without anyone remembering this file exists.

   That is the same reasoning the strip's own rules use, applied to the
   one place it was forgotten. */

/* SIGN OUT IS AN ACCOUNT ACTION, NOT NAVIGATION, and it is the one
   control on this product you must never press by accident — which is
   why it did not go in the strip beside two things you press often.
   `.whoami` existed only on Home and only `.s-home .W .whoami` styled
   it, so building one into the other screens' nav needed an UNSCOPED
   rule or it would have rendered bare: the §8 fault, one more time. */
.nav .whoami.pohja-acct{margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:var(--meta);color:#666d7a;cursor:pointer;white-space:nowrap}
.nav .whoami.pohja-acct:hover{color:#16191c}

/* ── YOUR DATA, on the Reports destination ───────────────────────────
   Added 24 August 2026, ruled by Gerry after the built screen was seen
   on a live instance.

   WHY THIS EXISTS RATHER THAN A BORROWED CLASS. The Reports screen was
   built reusing `.arrive`, a neutral grey callout, because reusing
   existing classes meant adding no CSS at all and §8 records two
   screens shipping completely unstyled through a new screen class
   inheriting nothing. That was a sound engineering call and it quietly
   weakened the design that had been ruled: MOCK-reports.html argued ONE
   thing — two of the items on that page are REPORTS and one is a RIGHT,
   and they are not the same kind of thing — and the tint was half of
   what carried it. On screen, grey made the right read as a third row
   with a note above it.

   THE RISK IS REAL AND IS ACCEPTED HERE ONLY BECAUSE IT IS COVERED.
   `#reports` is in `tests/test-render.mjs` since it was built, so a
   screen that stopped resolving the cascade would go red rather than
   ship. This is the one place on that screen where new CSS is worth it.

   The tint and border are lifted from MOCK-people.html's gaps panel
   unchanged, so the two cannot drift apart. Gold marks attention and is
   used ONCE — as a dot, a graphical object, never as text, because
   #b8883a is 3.17:1 and MOCK-people records a gold text colour shipping
   for three days on exactly that confusion. */
.s-record .mine{border:1px solid #e6dcc6;background:#fdfaf5;border-radius:6px;
  padding:15px 17px;margin:0 0 14px;max-width:568px}
.s-record .minehead{display:flex;align-items:center;gap:8px;font-size:var(--body);
  font-weight:500;color:#16191c;margin:0 0 5px}
.s-record .minedot{width:7px;height:7px;border-radius:50%;background:#b8883a;flex:none}
.s-record .minetext{font-size:var(--body);color:#434a52;line-height:1.55;margin:0}
/* The label names the ACT; the format is secondary and sits beneath the
   pair rather than on the controls. Ruled 24 August. Width goes to
   content because the shared 186px is set with `white-space:nowrap` and
   a longer, plainer label does not fit it. HEIGHT IS UNTOUCHED and
   stays 36px — the closed set is about how tall a control is, not how
   wide. */
.s-record .exportbtn{width:auto;padding:0 18px}
.s-record .exportcap{font-size:var(--meta);color:#666d7a;margin:9px 0 0;line-height:1.5}
/* FOUR SIZES AND ONE MONO — nothing may use a size outside the set.
   Ruled 13 August, asserted by test-shell across the WHOLE file. The
   first pass here invented a fifth (40px for the headline) and three
   more besides, and the suite caught all four. `.lcount` and
   `.complnum` — the product's other large numerals — are var(--title),
   so this is too: the headline is made to carry weight by SPACE and
   LIGHTNESS, not by a size nobody else uses. */
.s-record .valhead{margin:26px 0 0;padding:22px 0 20px;border-top:1px solid #e8eaec;
  border-bottom:1px solid #e8eaec}
.s-record .valbig{font-weight:300;font-size:var(--title);letter-spacing:-.01em;
  line-height:1.15;color:#16191c}
.s-record .valclaim{padding:15px 0;border-bottom:1px solid #f4f6f6}
/* INTER, NOT MONO. Ruled by Gerry 30 August 2026 with the screen open,
   which is what `SPEC-screen-density.md` §4a said this decision needed:
   *one borderline case is left deliberately — `.s-record .valamt` is
   `var(--lead)`, 16px, a value amount, so a count. Not changed tonight,
   because it is the product rather than a mock and no visual suite
   could confirm it. It is a ruling to make with the screen open, not
   from a stylesheet.*

   THE RULE IT LANDS UNDER: IBM Plex Mono carries IDENTIFIERS, Inter
   carries COUNTS AND FIGURES. `£25,000` and `12 man-days` are prose
   about quantity — read, not matched — and at 16px mono stops
   helping and starts signalling. IBM's own guide says Plex Mono is
   IBM Developer's face because it is familiar to developers, being the
   style used in coding environments. NUMBERS ARE MOST OF WHAT THIS
   PRODUCT SHOWS, and setting them in a coding face tells a hospitality
   GM this is software for somebody else.

   AND ONE RULE CAUSED TWO FAULTS. `.valkind` sits INSIDE `.valamt`, so
   *value forgone* and *efficiency gain* inherited the mono without any
   rule asking for it. A kind is a label, not an identifier and not a
   count, so it was never a candidate for mono in the first place —
   it was collateral. Changing the parent fixes both, and `.valkind`
   now says its family rather than inheriting one.

   500, MATCHING THE THREE FILES §4a ALREADY MOVED. `MOCK-value-
   register.html`, `MOCK-screen-density.html` and `PITCH-DECK.html`
   went to Inter 500 on the 29th, and the product did not — which is
   the piecemeal change that produced this inconsistency. A font change
   made in one place is not a font change. */
.s-record .valamt{font-family:'Inter',sans-serif;font-weight:500;font-size:var(--lead);
  color:#16191c;margin:0 0 3px}
.s-record .valkind{font-family:'Inter',sans-serif;font-weight:400;font-size:var(--meta);
  color:#434a52;letter-spacing:.02em}
.s-record .valtitle{font-size:var(--body);color:#16191c;margin:0 0 5px}
.s-record .actions{margin-top:28px;padding-top:20px;border-top:1px solid #e8eaec}
.s-record .actask{font-size:var(--body);color:#16191c;margin:0 0 16px;max-width:568px;line-height:1.5}
.s-record .actrow{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.s-record .actrow.alt{margin-top:14px;width:382px;justify-content:center}
.s-record .btn.sec.quiet{color:#434a52;border-color:#dfe3e5}
.s-record .btn.sec.quiet:hover{background:#f4f6f7;border-color:#c9ced3}
.s-record .btn{font-family:'Inter',sans-serif;font-size:var(--body);font-weight:500;
  width:186px;height:38px;padding:0 12px;border-radius:13px;box-sizing:border-box;white-space:nowrap;
  border:1px solid #b8883a;background:#b8883a;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.25}
/* A BUTTON WHOSE LABEL STATES A CONSEQUENCE CANNOT BE A FIXED WIDTH.
   Added 8 September 2026, from a screenshot — the first time the ask
   thread had been opened in a browser.

   WHAT HAPPENED. R2, ruled 2 September, made the promote control say
   what it will carry: *Promote · 0 replies will be kept*. The markup
   was written as `btn wide`, **borrowing a class that exists only for
   `.s-openpoint` and `.s-upload`** — so on this screen it did nothing,
   `.s-record .btn` held `width:186px` with `white-space:nowrap`, and
   the label overflowed the pill at BOTH ends. It read *romote · 0
   replies will be kep*.

   NOTHING COULD HAVE CAUGHT IT: jsdom does not lay out, which STATE.md
   records as the standing limit of every layout assertion here. A
   suite reads which words reach the screen, never where they sit.

   `min-width` RATHER THAN A BIGGER NUMBER. The count varies — nought,
   one, seventeen — so any fixed width is wrong for some value of it.
   The floor keeps this button the same size as its neighbours when the
   label is short, and lets it grow rather than clip when it is not. */
.s-record .btn.wide{width:auto;min-width:186px;padding:0 18px}
.s-record .btn.sec{background:#fff;color:#434a52;border-color:#dfe3e5}
.s-record .btn.sec:hover{background:#f4f6f7;border-color:#c9ced3}
.s-record .actnote{font-size:var(--body);color:#666d7a;margin:14px 0 0;max-width:568px;line-height:1.5}
.s-record .auth{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.s-record .authopt{font-size:var(--body);font-weight:400;height:28px;padding:0 12px;border-radius:13px;
  border:1px solid #e0e4e6;background:#fff;color:#666d7a;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1;box-sizing:border-box}
.s-record .authopt:hover{border-color:#c9ced3;color:#434a52}
.s-record .authopt.on{background:#eceef0;border-color:#16191c;color:#16191c;font-weight:500}
.s-record .authnote{font-size:var(--body);color:#666d7a;margin:8px 0 0;max-width:568px;line-height:1.5}
.s-record .authshown{display:inline-flex;align-items:center;gap:8px;margin:0}
.s-record .authpill{height:22px;padding:0 11px;
  background:#f4f6f7;color:#434a52;
  line-height:22px;box-sizing:border-box}
.s-record .authpill.unc{background:#f0f2f3;color:#666d7a}
.s-record .authsrc{font-size:var(--body);color:#5e6469}
.s-record .posbear{font-size:var(--body);color:#434a52;margin:5px 0 0;line-height:1.45;
  padding-left:10px;border-left:2px solid #e8d5b0;max-width:400px}
.s-record .rel{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;margin:0 -12px;
  border-radius:6px;text-decoration:none;cursor:pointer;
  border-bottom:1px solid #f4f6f6}
.s-record .rel:last-of-type{border-bottom:0}
.s-record .rel:hover{background:#f8f9fa}
.s-record .relno{font-size:var(--mono);color:#5e6469;
  font-weight:500;flex:none;margin-top:2px;width:56px}
.s-record .relbody{flex:1;min-width:0;display:block}
.s-record .reltitle{display:block;font-size:var(--body);color:#16191c;line-height:1.4}
.s-record .relwhy{display:block;font-size:var(--body);color:#666d7a;margin-top:3px}
.s-record .relgo{flex:none;color:#8c96a1;margin-top:4px}
.s-record .rel:hover .relgo{color:#16191c}
.s-record .dochash{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a}
.s-record .W .right{padding:16px;overflow-y:auto}
.s-record .W .rh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#666d7a;margin:0 0 14px}
.s-record .meta{padding:10px 0;border-bottom:1px solid #f0f2f3}
.s-record .meta:last-child{border-bottom:0}
.s-record .metal{font-size:var(--meta);color:#666d7a;margin:0 0 3px}
.s-record .metav{font-size:var(--body);color:#16191c;margin:0}
.s-record .metav.gold{color:#16191c;font-weight:500}
.s-record .metasub{font-size:var(--meta);color:#666d7a;margin:2px 0 0}
.s-record .docline{display:flex;align-items:baseline;gap:8px;margin-top:5px}
.s-record a.px{color:inherit;text-decoration:none;display:contents}
.s-record a.pxb{color:inherit;text-decoration:none}
.s-record .screen{height:100%;display:flex;flex-direction:column;overflow:hidden}
.s-record .W{flex:1;display:flex;flex-direction:column;min-height:0}
.s-record .W .panes,.s-record .W .homepanes{flex:1;height:auto!important;min-height:0}
.s-record .W .nav{flex:none}
.s-record .W .orient{flex:none}
.s-record .screen{border-left:1px solid #eceef0;border-right:1px solid #eceef0}
.s-record .W{flex:none}
.s-record .W .panes,.s-record .W .homepanes{flex:none;height:auto!important;min-height:470px}
.s-record .W .pane,.s-record .W .main,.s-record .W .rail,.s-record .W .left,.s-record .W .mid,.s-record .W .right{overflow:visible!important;height:auto}

/* ===== reconsider ===== */
.s-reconsider .lbl{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:#7a8288;margin:0 0 10px}
.s-reconsider .screen{background:#fff;overflow:hidden}
.s-reconsider .W{background:#fff;color:#16191c;font-size:var(--body);line-height:1.5}
.s-reconsider .W .nav{display:flex;justify-content:space-between;align-items:center;
  background:#f8f9fa;padding:9px 18px;border-bottom:1px solid #e8eaec;min-height:54px}
.s-reconsider .W .nav{justify-content:space-between}
.s-reconsider .W .askwrap{display:flex;align-items:center;flex:none}
.s-reconsider .W .askfield{display:flex;align-items:center;gap:9px;width:288px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;
  cursor:text;box-sizing:border-box}
.s-reconsider .W .askfield:hover{border-color:#c9ced3}
.s-reconsider .W .askico{flex:none;color:#666d7a}
.s-reconsider .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.s-reconsider .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.s-reconsider .W .lockup{position:relative;display:inline-block;padding-bottom:14px;cursor:pointer}
.s-reconsider .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-reconsider .W .wedge{flex:none;cursor:pointer;padding:6px 4px;margin-left:-4px;opacity:.85;
  transition:opacity .12s ease}
.s-reconsider .W .wedge:hover{opacity:1}
.s-reconsider .W .lockrow{display:flex;align-items:flex-end;gap:10px}
.s-reconsider .W .lockline{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-reconsider .W .wmblock{display:flex;flex-direction:column;line-height:1}
.s-reconsider .W .wmtext{font-family:'Jost','Inter',sans-serif;font-weight:300;font-size:16px;
  letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-reconsider .W .wmsub{font-family:'Inter',sans-serif;font-weight:300;font-size:7px;
  letter-spacing:.24em;text-transform:uppercase;color:#666d7a;margin-top:3px}
.s-reconsider .W .emblem{flex:none;margin-bottom:-3px}
.s-reconsider .W .ctx{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a}
.s-reconsider .W .panes{display:grid;grid-template-columns:230px minmax(0,1fr) 232px;height:392px}
.s-reconsider .W .pane{overflow:hidden}
.s-reconsider .W .pane+.pane{border-left:1px solid #e8eaec}
.s-reconsider .W .left{padding:0;background:#f8f9fa;display:flex;flex-direction:column}
.s-reconsider .W .left-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.s-reconsider .W .left-foot{flex:0 0 auto;padding-top:8px;border-top:1px solid #e8eaec}
.s-reconsider .W .lhead{padding:14px 16px 10px;border-bottom:1px solid #e8eaec}
.s-reconsider .W .lh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#666d7a;margin:0}
.s-reconsider .W .lcount{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em;
  line-height:1.1;margin:6px 0 0}
.s-reconsider .W .lcount span{font-size:var(--body);font-weight:400;color:#666d7a;letter-spacing:0;margin-left:6px}
.s-reconsider .W .item{padding:12px 16px;border-bottom:1px solid #eceff0;cursor:pointer;display:block}
.s-reconsider .W .item:last-child{border-bottom:0}
.s-reconsider .W .item.sel{background:#fff;box-shadow:inset 3px 0 0 #c9ced3}
.s-reconsider .W .irow{display:flex;align-items:flex-start;gap:9px}
.s-reconsider .W .idot{width:9px;height:9px;border-radius:50%;background:#b8883a;flex:none;margin-top:5px}
.s-reconsider .W .idot.m{width:7px;height:7px;margin-top:6px}
.s-reconsider .W .idot.l{width:5px;height:5px;background:#c9ced3;margin-top:7px}
.s-reconsider .W .ititle{font-size:var(--lead);font-weight:500;color:#16191c;line-height:1.35}
.s-reconsider .W .item:not(.sel) .ititle{font-weight:400;color:#434a52}
.s-reconsider .W .imeta{font-size:var(--mono);color:#666d7a;margin-top:4px;padding-left:18px;
  }
.s-reconsider .W .mid{padding:16px 18px;overflow:hidden;display:flex;flex-direction:column}
.s-reconsider .W .mh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#666d7a;margin:0 0 14px}
.s-reconsider .W .right{padding:16px;overflow-y:auto}
.s-reconsider .recon{border-left:2px solid #b8883a;padding:2px 0 2px 16px;margin-bottom:20px}
.s-reconsider .recon .kick{font-size:var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:#16191c;margin:0 0 8px}
.s-reconsider .recon h3{font-size:var(--lead);font-weight:500;letter-spacing:-.012em;margin:0 0 10px;color:#16191c;line-height:1.3}
.s-reconsider .recon p{font-size:var(--body);color:#434a52;margin:0 0 10px;max-width:568px}
.s-reconsider .recon .ev{background:#faf7f1;padding:11px 14px;margin:12px 0}
.s-reconsider .recon .evl{font-size:var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:#8a8478;margin:0 0 5px}
.s-reconsider .recon .evb{font-size:var(--body);color:#434a52;margin:0}
.s-reconsider .recon .ask{font-size:var(--body);color:#16191c;margin:14px 0 0}
.s-reconsider .acts{display:flex;gap:8px;margin-top:16px}
.s-reconsider .btn{font-size:var(--body);font-weight:500;padding:8px 15px;border-radius:13px;
  border:1px solid #b8883a;background:#b8883a;color:#fff;cursor:pointer;line-height:1}
.s-reconsider .btn.sec{background:#fff;color:#434a52;border-color:#e8eaec}
.s-reconsider .trail{border-top:1px solid #f0f2f3;margin-top:20px;padding-top:14px}
.s-reconsider .trail .tl{font-size:var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:#666d7a;margin:0 0 10px}
.s-reconsider .trail .ti{display:flex;gap:10px;padding:7px 0;font-size:var(--body);color:#434a52}
.s-reconsider .trail .ti .td{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  flex:none;width:64px}
.s-reconsider .prit{padding:11px 0;border-bottom:1px solid #f0f2f3}
.s-reconsider .prit:last-child{border-bottom:0}
.s-reconsider .prid{font-size:var(--mono);color:#666d7a;margin:0 0 4px}
.s-reconsider .prb{font-size:var(--body);color:#434a52;line-height:1.48;margin:0}
.s-reconsider .prw{font-size:var(--meta);font-weight:500;color:#16191c;margin:4px 0 0}
.s-reconsider .prnone{font-size:var(--body);color:#666d7a;display:flex;gap:7px;align-items:center;margin:4px 0 0}
.s-reconsider .prnone::before{content:"—";color:#c9ced3}
.s-reconsider a.px{color:inherit;text-decoration:none;display:contents}
.s-reconsider a.pxb{color:inherit;text-decoration:none}
.s-reconsider .screen{height:100%;display:flex;flex-direction:column;overflow:hidden}
.s-reconsider .W{flex:1;display:flex;flex-direction:column;min-height:0}
.s-reconsider .W .panes,.s-reconsider .W .homepanes{flex:1;height:auto!important;min-height:0}
.s-reconsider .W .nav{flex:none}
.s-reconsider .W .orient{flex:none}
.s-reconsider .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-reconsider .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #dfe3e5;
  background:#fff;color:#434a52;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer}
.s-reconsider .W .backbtn:hover{background:#f4f6f7;border-color:#c9ced3;color:#16191c}
.s-reconsider .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-reconsider .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-reconsider .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-reconsider .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-reconsider .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-reconsider .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-reconsider .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-reconsider .screen{border-left:1px solid #eceef0;border-right:1px solid #eceef0}
.s-reconsider .W{flex:none}
.s-reconsider .W .panes,.s-reconsider .W .homepanes{flex:none;height:auto!important;min-height:392px}
.s-reconsider .W .pane,.s-reconsider .W .main,.s-reconsider .W .rail,.s-reconsider .W .left,.s-reconsider .W .mid,.s-reconsider .W .right{overflow:visible!important;height:auto}

/* ===== moments ===== */
.s-moments .screen{background:#fff;overflow:hidden}
.s-moments .W{background:#fff;color:#16191c;font-size:var(--body);line-height:1.5}
.s-moments .W .nav{display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;
  padding:9px 18px;border-bottom:1px solid #e8eaec;min-height:56px}
.s-moments .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-moments .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #dfe3e5;
  background:#fff;color:#434a52;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.s-moments .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-moments .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-moments .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-moments .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-moments .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-moments .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-moments .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-moments .W .askfield{display:flex;align-items:center;gap:9px;width:380px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;cursor:text}
.s-moments .W .askico{flex:none;color:#666d7a}
.s-moments .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-moments .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:17px}
.s-moments .W .panes{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;height:470px}
.s-moments .W .pane{overflow:hidden}
.s-moments .W .pane+.pane{border-left:1px solid #e8eaec}
.s-moments .W .left{padding:0;background:#f8f9fa;display:flex;flex-direction:column}
.s-moments .W .left-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.s-moments .W .left-foot{flex:0 0 auto;padding-top:8px;border-top:1px solid #e8eaec}
.s-moments .W .lhead{padding:14px 16px 10px;border-bottom:1px solid #e8eaec}
.s-moments .W .lh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#666d7a;margin:0}
.s-moments .W .lcount{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em;line-height:1.1;margin:6px 0 0}
.s-moments .W .lcount span{font-size:var(--body);font-weight:400;color:#666d7a;letter-spacing:0;margin-left:6px}
.s-moments .W .item{padding:12px 16px;border-bottom:1px solid #eceff0;cursor:pointer}
.s-moments .W .item.sel{background:#fff;box-shadow:inset 3px 0 0 #c9ced3}
.s-moments .W .ititle{font-size:var(--lead);font-weight:500;color:#16191c;line-height:1.35}
.s-moments .W .item:not(.sel) .ititle{font-weight:400;color:#434a52}
.s-moments .W .imeta{font-size:var(--mono);color:#666d7a;margin-top:4px}
.s-moments .W .mid{padding:16px 20px;overflow-y:auto}
.s-moments .W .right{padding:16px;overflow-y:auto}
.s-moments .W .rh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#666d7a;margin:0 0 14px}
.s-moments .W .recid{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid #f0f2f3;flex-wrap:wrap}
.s-moments .W .recno{font-size:var(--mono);font-weight:500;color:#16191c}
.s-moments .W .recmeta{font-size:var(--body);color:#666d7a}
.s-moments .mrow{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid #f4f6f6;align-items:flex-start}
/* THE MONTH HEADING. A rule with a name on it — not a card, and not a
   band you can fold. The same shape the Decisions table gives JAN 2027,
   so the two screens GROUP ALIKE even though one is a table and one is
   a list, which is the consistency worth having between them. Folding
   was refused for the reason it was refused on People: on a screen
   whose job is finding what happened, all-collapsed shows nothing
   wrong because it shows nothing. */
.s-moments .mmonth,
.s-moments-board .mmonth{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin:22px 0 2px;padding-bottom:7px;border-bottom:1px solid #e8eaec}
.s-moments .mmonth:first-child,
.s-moments-board .mmonth:first-child{margin-top:0}
.s-moments .mmonthname,
.s-moments-board .mmonthname{font-size:var(--meta);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:#2e3439}
.s-moments .mmonthcount,
.s-moments-board .mmonthcount{font-size:var(--meta);color:#666d7a}
.s-moments .mrow:last-child{border-bottom:0}
.s-moments .mdate{flex:none;width:74px;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);
  color:#666d7a;margin-top:2px}
.s-moments .mbody{flex:1;min-width:0}
.s-moments .mline{font-size:var(--body);color:#16191c;margin:0;line-height:1.5;max-width:568px}
.s-moments .mfoot{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.s-moments .mref{font-size:var(--mono);color:#5e6469;font-weight:500}
.s-moments .mwho{font-size:var(--meta);color:#666d7a}
.s-moments .mprov{font-size:var(--meta);font-weight:500;height:18px;padding:0 8px;border-radius:13px;
  background:#eef3f0;color:#3d6b52;display:inline-flex;align-items:center;line-height:18px}
.s-moments .mprov.rec{background:#f4f6f7;color:#434a52}
.s-moments .mpromo{flex:none;margin-top:1px}
.s-moments .chk{width:18px;height:18px;border-radius:3px;border:1.5px solid #dfe3e5;background:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.s-moments .chk.on{background:#16191c;border-color:#16191c;color:#fff}
.s-moments .mstate{height:19px;padding:0 9px;line-height:19px;flex:none;margin-top:1px}
.s-moments .mstate.board{background:#f4f6f7;color:#434a52}
.s-moments .mstate.fn{background:#f0f2f3;color:#666d7a}
.s-moments .periodbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.s-moments .pseg{font-size:var(--body);height:30px;padding:0 13px;border:1px solid #e0e4e6;background:#fff;
  color:#666d7a;cursor:pointer;display:inline-flex;align-items:center;line-height:1;border-radius:13px}
.s-moments .pseg.on{background:#eceef0;border-color:#16191c;color:#16191c;font-weight:500}
.s-moments .capture{background:#fbfcfc;border:1px solid #f0f2f3;border-radius:6px;padding:15px 17px;margin-bottom:22px}
.s-moments .caph{font-size:var(--meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#666d7a;margin:0 0 10px}
.s-moments .capq{font-size:var(--body);color:#16191c;margin:0 0 11px;max-width:568px}
.s-moments .capin{width:100%;border:1px solid #e0e4e6;border-radius:6px;background:#fff;padding:10px 12px;
  font-family:'Inter',sans-serif;font-size:var(--body);color:#16191c;line-height:1.5;min-height:60px;resize:vertical}
.s-moments .capin:focus{outline:2px solid #16191c;outline-offset:1px;border-color:#16191c}
.s-moments .capin::placeholder{color:#666d7a}
.s-moments .caphint{font-size:var(--body);color:#666d7a;margin:8px 0 0;max-width:568px;line-height:1.5}
.s-moments .btn{font-family:'Inter',sans-serif;font-size:var(--body);font-weight:500;height:36px;padding:0 16px;
  border-radius:13px;border:1px solid #b8883a;background:#b8883a;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:1.2;box-sizing:border-box}
.s-moments .btn.sec{background:#fff;color:#434a52;border-color:#dfe3e5}
.s-moments .btn.sec:hover{background:#f4f6f7;border-color:#c9ced3}
.s-moments .btn[disabled]{opacity:.45;cursor:default}
.s-moments .actrow{display:flex;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid #e8eaec}
.s-moments .meta{padding:10px 0;border-bottom:1px solid #f0f2f3}
.s-moments .meta:last-child{border-bottom:0}
.s-moments .metal{font-size:var(--meta);color:#666d7a;margin:0 0 3px}
.s-moments .metav{font-size:var(--body);color:#16191c;margin:0}
.s-moments .metav.gold{color:#16191c;font-weight:500}
.s-moments .metasub{font-size:var(--meta);color:#666d7a;margin:2px 0 0}
.s-moments .bignum{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em;margin:0}
.s-moments .bignum span{font-size:var(--body);font-weight:400;color:#666d7a;letter-spacing:0;margin-left:6px}
.s-moments a.px{color:inherit;text-decoration:none;display:contents}
.s-moments a.pxb{color:inherit;text-decoration:none}
.s-moments .screen{height:100%;display:flex;flex-direction:column;overflow:hidden}
.s-moments .W{flex:1;display:flex;flex-direction:column;min-height:0}
.s-moments .W .panes,.s-moments .W .homepanes{flex:1;height:auto!important;min-height:0}
.s-moments .W .nav{flex:none}
.s-moments .W .orient{flex:none}
.s-moments .screen{border-left:1px solid #eceef0;border-right:1px solid #eceef0}
.s-moments .W{flex:none}
.s-moments .W .panes,.s-moments .W .homepanes{flex:none;height:auto!important;min-height:470px}
.s-moments .W .pane,.s-moments .W .main,.s-moments .W .rail,.s-moments .W .left,.s-moments .W .mid,.s-moments .W .right{overflow:visible!important;height:auto}

/* ===== moments-board ===== */
.s-moments-board .screen{background:#fff;overflow:hidden}
.s-moments-board .W{background:#fff;color:#16191c;font-size:var(--body);line-height:1.5}
.s-moments-board .W .nav{display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;
  padding:9px 18px;border-bottom:1px solid #e8eaec;min-height:56px}
.s-moments-board .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-moments-board .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #dfe3e5;
  background:#fff;color:#434a52;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.s-moments-board .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-moments-board .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-moments-board .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-moments-board .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-moments-board .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-moments-board .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-moments-board .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-moments-board .W .askfield{display:flex;align-items:center;gap:9px;width:380px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;cursor:text}
.s-moments-board .W .askico{flex:none;color:#666d7a}
.s-moments-board .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-moments-board .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:17px}
.s-moments-board .W .panes{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;height:470px}
.s-moments-board .W .pane{overflow:hidden}
.s-moments-board .W .pane+.pane{border-left:1px solid #e8eaec}
.s-moments-board .W .left{padding:0;background:#f8f9fa;display:flex;flex-direction:column}
.s-moments-board .W .left-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.s-moments-board .W .left-foot{flex:0 0 auto;padding-top:8px;border-top:1px solid #e8eaec}
.s-moments-board .W .lhead{padding:14px 16px 10px;border-bottom:1px solid #e8eaec}
.s-moments-board .W .lh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#666d7a;margin:0}
.s-moments-board .W .lcount{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em;line-height:1.1;margin:6px 0 0}
.s-moments-board .W .lcount span{font-size:var(--body);font-weight:400;color:#666d7a;letter-spacing:0;margin-left:6px}
.s-moments-board .W .item{padding:12px 16px;border-bottom:1px solid #eceff0;cursor:pointer}
.s-moments-board .W .item.sel{background:#fff;box-shadow:inset 3px 0 0 #c9ced3}
.s-moments-board .W .ititle{font-size:var(--lead);font-weight:500;color:#16191c;line-height:1.35}
.s-moments-board .W .item:not(.sel) .ititle{font-weight:400;color:#434a52}
.s-moments-board .W .imeta{font-size:var(--mono);color:#666d7a;margin-top:4px}
.s-moments-board .W .mid{padding:16px 20px;overflow-y:auto}
.s-moments-board .W .right{padding:16px;overflow-y:auto}
.s-moments-board .W .rh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#666d7a;margin:0 0 14px}
.s-moments-board .W .recid{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid #f0f2f3;flex-wrap:wrap}
.s-moments-board .W .recno{font-size:var(--mono);font-weight:500;color:#16191c}
.s-moments-board .W .recmeta{font-size:var(--body);color:#666d7a}
.s-moments-board .mrow{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid #f4f6f6;align-items:flex-start}
.s-moments-board .mrow:last-child{border-bottom:0}
.s-moments-board .mdate{flex:none;width:74px;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);
  color:#666d7a;margin-top:2px}
.s-moments-board .mbody{flex:1;min-width:0}
.s-moments-board .mline{font-size:var(--body);color:#16191c;margin:0;line-height:1.5;max-width:568px}
.s-moments-board .mfoot{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.s-moments-board .mref{font-size:var(--mono);color:#5e6469;font-weight:500}
.s-moments-board .mwho{font-size:var(--meta);color:#666d7a}
.s-moments-board .mprov{font-size:var(--meta);font-weight:500;height:18px;padding:0 8px;border-radius:13px;
  background:#eef3f0;color:#3d6b52;display:inline-flex;align-items:center;line-height:18px}
.s-moments-board .mprov.rec{background:#f4f6f7;color:#434a52}
.s-moments-board .mpromo{flex:none;margin-top:1px}
.s-moments-board .chk{width:18px;height:18px;border-radius:3px;border:1.5px solid #dfe3e5;background:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.s-moments-board .chk.on{background:#16191c;border-color:#16191c;color:#fff}
.s-moments-board .mstate{height:19px;padding:0 9px;line-height:19px;flex:none;margin-top:1px}
.s-moments-board .mstate.board{background:#f4f6f7;color:#434a52}
.s-moments-board .mstate.fn{background:#f0f2f3;color:#666d7a}
.s-moments-board .periodbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.s-moments-board .pseg{font-size:var(--body);height:30px;padding:0 13px;border:1px solid #e0e4e6;background:#fff;
  color:#666d7a;cursor:pointer;display:inline-flex;align-items:center;line-height:1;border-radius:13px}
.s-moments-board .pseg.on{background:#eceef0;border-color:#16191c;color:#16191c;font-weight:500}
.s-moments-board .capture{background:#fbfcfc;border:1px solid #f0f2f3;border-radius:6px;padding:15px 17px;margin-bottom:22px}
.s-moments-board .caph{font-size:var(--meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#666d7a;margin:0 0 10px}
.s-moments-board .capq{font-size:var(--body);color:#16191c;margin:0 0 11px;max-width:568px}
.s-moments-board .capin{width:100%;border:1px solid #e0e4e6;border-radius:6px;background:#fff;padding:10px 12px;
  font-family:'Inter',sans-serif;font-size:var(--body);color:#16191c;line-height:1.5;min-height:60px;resize:vertical}
.s-moments-board .capin:focus{outline:2px solid #16191c;outline-offset:1px;border-color:#16191c}
.s-moments-board .capin::placeholder{color:#666d7a}
.s-moments-board .caphint{font-size:var(--body);color:#666d7a;margin:8px 0 0;max-width:568px;line-height:1.5}
.s-moments-board .btn{font-family:'Inter',sans-serif;font-size:var(--body);font-weight:500;height:36px;padding:0 16px;
  border-radius:13px;border:1px solid #b8883a;background:#b8883a;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:1.2;box-sizing:border-box}
.s-moments-board .btn.sec{background:#fff;color:#434a52;border-color:#dfe3e5}
.s-moments-board .btn.sec:hover{background:#f4f6f7;border-color:#c9ced3}
.s-moments-board .btn[disabled]{opacity:.45;cursor:default}
.s-moments-board .actrow{display:flex;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid #e8eaec}
.s-moments-board .meta{padding:10px 0;border-bottom:1px solid #f0f2f3}
.s-moments-board .meta:last-child{border-bottom:0}
.s-moments-board .metal{font-size:var(--meta);color:#666d7a;margin:0 0 3px}
.s-moments-board .metav{font-size:var(--body);color:#16191c;margin:0}
.s-moments-board .metav.gold{color:#16191c;font-weight:500}
.s-moments-board .metasub{font-size:var(--meta);color:#666d7a;margin:2px 0 0}
.s-moments-board .bignum{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em;margin:0}
.s-moments-board .bignum span{font-size:var(--body);font-weight:400;color:#666d7a;letter-spacing:0;margin-left:6px}
.s-moments-board a.px{color:inherit;text-decoration:none;display:contents}
.s-moments-board a.pxb{color:inherit;text-decoration:none}
.s-moments-board .screen{height:100%;display:flex;flex-direction:column;overflow:hidden}
.s-moments-board .W{flex:1;display:flex;flex-direction:column;min-height:0}
.s-moments-board .W .panes,.s-moments-board .W .homepanes{flex:1;height:auto!important;min-height:0}
.s-moments-board .W .nav{flex:none}
.s-moments-board .W .orient{flex:none}
.s-moments-board .screen{border-left:1px solid #eceef0;border-right:1px solid #eceef0}
.s-moments-board .W{flex:none}
.s-moments-board .W .panes,.s-moments-board .W .homepanes{flex:none;height:auto!important;min-height:470px}
.s-moments-board .W .pane,.s-moments-board .W .main,.s-moments-board .W .rail,.s-moments-board .W .left,.s-moments-board .W .mid,.s-moments-board .W .right{overflow:visible!important;height:auto}

/* ===== compare ===== */
.s-compare :root{--pg:#e8eaeb;--pgink:#16191c;--pgink2:#5e6469;--pgmark:#7a2f3c;--shell:#2e3439;--shell2:#bdc3c8}
.s-compare .wrap{max-width:1200px;margin:0 auto;padding:0 20px 100px}
.s-compare header{padding:48px 0 20px;border-bottom:1px solid #c9ced3;max-width:820px}
.s-compare .eb{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--pgmark);margin:0 0 12px}
.s-compare header p{color:var(--pgink2);margin:10px 0 0;max-width:568px}
.s-compare .notes{max-width:820px;margin:22px 0 0;background:#fff;padding:20px 24px}
.s-compare .notes p{margin:0 0 9px;font-size:var(--lead);color:var(--pgink2)}
.s-compare .notes p:last-child{margin:0}
.s-compare .notes b{color:var(--pgink);font-weight:500}
.s-compare .caplab{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--pgink2);margin:28px 0 10px}
.s-compare .below{display:grid;grid-template-columns:376px minmax(0,1fr);gap:34px;align-items:start;margin-top:30px}
.s-compare .obs{background:#fff;padding:18px 22px;font-size:var(--lead);color:var(--pgink2)}
.s-compare .obs b{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:9px;color:var(--pgink2);font-weight:500}
.s-compare .obs ul{margin:0;padding-left:18px}
.s-compare .obs li{margin-bottom:7px}
.s-compare .obs li b{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;
  color:var(--pgink);font-weight:500;font-family:'Inter',sans-serif}
.s-compare .screen{background:#fff;overflow:hidden}
.s-compare .pstatus{height:36px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#7a8288}
/* SEVENTEEN DEAD CUSTOM PROPERTIES AND A REDUNDANT RULE, REMOVED
   9 September 2026. Ruled by Gerry the same day.

   WHAT WAS HERE. `.s-compare --g:#ffffff;` — WITH NO OPENING BRACE —
   followed by sixteen more custom properties (`--ink`, `--ink2`,
   `--ink3`, `--rule`, `--hair`, `--mk` and the four pill pairs), and
   then a `.W{...}` rule.

   WHY IT WAS ALL DISCARDED. A CSS parser reads a rule prelude until it
   finds `{`. With the brace missing after `.s-compare`, the next one was
   on `.W`, so the seventeen declarations AND that rule became a single
   invalid selector and the whole thing was dropped. Confirmed two ways
   before removal: `var(--ink)` and every other name was referenced ZERO
   times anywhere in the file, and `--ink` computed to empty on a `.W`
   element.

   AND REMOVING IT CHANGES NOTHING THAT WAS IN EFFECT, which is the only
   reason it could be a deletion rather than a design decision. Five of
   the six things `.W` declared — background, colour, font-family,
   font-size, line-height — are on `body` already and inherit; the sixth,
   `font-weight:400`, is the browser default for a div. The rule was
   redundant against `body`, so it is deleted rather than repaired: a
   rule that repeats `body` is how the next reader concludes it must be
   doing something.

   THE COLOUR TOKENS THIS WAS REACHING FOR ARE STILL OWED. `STATE.md`
   §9.6 holds the ruling and the freeze that is built; the ground for
   them is now genuinely empty rather than apparently occupied. */
.s-compare .W .nav{display:flex;justify-content:space-between;align-items:center;
  background:#f8f9fa;padding:10px 18px;border-bottom:1px solid #e8eaec}
.s-compare .W .nav{justify-content:space-between}
.s-compare .W .askwrap{display:flex;align-items:center;flex:none}
.s-compare .W .askfield{display:flex;align-items:center;gap:9px;width:288px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;
  cursor:text;box-sizing:border-box}
.s-compare .W .askfield:hover{border-color:#c9ced3}
.s-compare .W .askico{flex:none;color:#666d7a}
.s-compare .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.s-compare .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.s-compare .W .lockup{position:relative;display:inline-block;padding-bottom:9px;cursor:pointer}
.s-compare .W .lockrow{display:flex;align-items:flex-end;gap:10px}
.s-compare .W .lockline{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-compare .W .wmblock{display:flex;flex-direction:column;line-height:1}
.s-compare .W .wmtext{font-family:'Jost','Inter',sans-serif;font-weight:300;font-size:16px;
  letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-compare .W .wmsub{font-family:'Inter',sans-serif;font-weight:300;font-size:7px;
  letter-spacing:.24em;text-transform:uppercase;color:#666d7a;margin-top:0}
.s-compare .W .emblem{flex:none;margin-bottom:-3px}
.s-compare .W .nav{align-items:center;min-height:56px}
.s-compare .W .navright{display:flex;align-items:center}
.s-compare .W .nav .ctx{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a}
.s-compare .W .panes{display:grid;grid-template-columns:196px minmax(0,1fr) 232px;height:360px}
.s-compare .W .pane{overflow:hidden}
.s-compare .W .pane+.pane{border-left:1px solid #e8eaec}
.s-compare .W .left{padding:14px 16px;overflow-y:auto;background:#f8f9fa}
.s-compare .W .lh{font-size:var(--meta);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#16191c;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #e8eaec}
.s-compare .W .item{padding:9px 0;border-bottom:1px solid #f0f2f3;cursor:pointer}
.s-compare .W .item:last-child{border-bottom:0}
.s-compare .W .item .ititle{font-size:var(--body);font-weight:400;color:#434a52;display:flex;align-items:center;gap:0}
.s-compare .W .item .ititle.on{color:#16191c;font-weight:500}
.s-compare .W .item .imeta{font-size:var(--mono);color:#666d7a;margin-top:4px;
  padding-left:22px}
.s-compare .W .pri{display:inline-flex;align-items:center;flex:none;margin-right:10px}
.s-compare .W .pill{display:inline-flex;align-items:center;font-size:var(--meta);font-weight:500;
  padding:2px 7px;border-radius:13px;white-space:nowrap}
.s-compare .W .pill.d{background:#fdeeed;color:#b03030}
.s-compare .W .pill.u{background:#f4f6f7;color:#434a52}
.s-compare .W .pill.a{background:#f0f2f3;color:#666d7a;font-weight:400}
.s-compare .W .mid{padding:14px 18px;overflow:hidden;display:flex;flex-direction:column}
.s-compare .W .mh{font-size:var(--meta);font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:#666d7a;margin:0 0 14px}
.s-compare .W .tscroll{overflow-x:auto;flex:1;margin:0 -18px;padding:0 18px}
.s-compare .W table{width:100%;border-collapse:collapse;font-size:var(--body);
  font-variant-numeric:tabular-nums;table-layout:fixed}
.s-compare .W th{font-size:var(--meta);font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:#666d7a;text-align:left;border-bottom:1px solid #e8eaec;
  padding:0 10px 7px 0;vertical-align:bottom;background:#fff}
.s-compare .W td{border-bottom:1px solid #f0f2f3;padding:8px 10px 8px 0;vertical-align:top;
  background:#fff;font-size:var(--body);color:#434a52;height:1px}
.s-compare .W td .cell{display:flex;flex-direction:column;align-items:flex-start;height:100%;min-height:100%}
.s-compare .W td .val{flex:1}
.s-compare .W td .cell .pill{margin-top:6px;align-self:flex-start}
.s-compare .W tr:last-child td{border-bottom:1px solid #e8eaec}
.s-compare .W th:first-child,.s-compare .W td:first-child{position:sticky;left:0;z-index:3;width:108px;
  padding-right:8px;color:#16191c;font-weight:500}
.s-compare .W .ref{position:sticky;left:108px;z-index:3;background:#f8f9fa!important;
  padding-left:8px;padding-right:10px;border-right:1px solid #e8eaec;width:118px}
.s-compare .W th:nth-child(n+3),.s-compare .W td:nth-child(n+3){width:auto}
.s-compare .W .cmp{min-width:640px}
.s-compare .W th.ref{background:#fff!important}
.s-compare .W .acts{display:flex;gap:8px;margin-top:14px;flex-shrink:0}
.s-compare .W .btn{font-size:var(--body);font-weight:500;padding:7px 14px;border-radius:13px;
  border:1px solid #b8883a;background:#b8883a;color:#fff;cursor:pointer;line-height:1}
.s-compare .W .btn.sec{background:#fff;color:#434a52;border-color:#e8eaec}
.s-compare .W .right{padding:14px 16px;background:#fff;overflow-y:auto}
.s-compare .W .rh{font-size:var(--meta);font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:#666d7a;margin:0 0 14px}
.s-compare .W .pritem{padding:10px 0;border-bottom:1px solid #f0f2f3}
.s-compare .W .pritem:last-child{border-bottom:0}
.s-compare .W .prid{font-size:var(--mono);color:#666d7a;margin-bottom:4px}
.s-compare .W .prbody{font-size:var(--body);color:#434a52;line-height:1.48}
.s-compare .W .prwho{font-size:var(--meta);font-weight:500;color:#16191c;margin-top:4px}
/* THE PRECEDENT REFERENCE, AS A LINK. Added 30 August 2026 with §6 of
   SPEC-precedent-navigation.md. Weight and an underline offset rather
   than a colour, per the house rule: the record number should read as
   reachable without becoming the loudest thing in the panel. A class
   with no rule anywhere takes the user-agent default — bright blue and
   underlined — while everything beside it is drawn, and nothing fails
   because nothing looks; that is the fault test-day-grouping records. */
.s-openpoint .prref,.s-compare .W .prref{color:inherit;font-weight:600;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.s-compare .W .empty{font-size:var(--body);color:#666d7a}
.s-compare .W .pritem.none .prid{color:#c0c5ca}
.s-compare .W .pritem.none .empty{display:flex;align-items:center;gap:7px;color:#666d7a;margin-top:4px}
.s-compare .W .pritem.none .empty::before{content:"—";font-size:var(--body);color:#c9ced3;flex:none}
.s-compare .M{background:#fff;color:#16191c;
  font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:var(--lead);line-height:1.5}
.s-compare .pstatus .sysicons{display:flex;align-items:center;gap:5px}
.s-compare .M .mhead{display:flex;align-items:center;
  padding:6px 20px 14px;background:#fff}
.s-compare .M .mwm{display:flex;flex-direction:column;line-height:1}
.s-compare .M .mwmtext{font-family:'Jost','Inter',sans-serif;font-weight:300;font-size:15px;
  letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-compare .M .mwmsub{font-family:'Inter',sans-serif;font-weight:300;font-size:6.5px;
  letter-spacing:.24em;text-transform:uppercase;color:#666d7a;margin-top:0;line-height:1.1}
.s-compare .M .mbar{background:#f8f9fa;border-bottom:1px solid #e8eaec;border-top:1px solid #e8eaec;
  padding:7px 20px 10px;font-weight:600;font-size:var(--lead)}
.s-compare .M .msec{padding:0 20px}
.s-compare .M .msech{font-size:var(--meta);font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:#666d7a;padding:16px 0 10px;border-bottom:1px solid #e8eaec}
.s-compare .M .mrow{padding:16px 0;border-bottom:1px solid #f0f2f3}
.s-compare .M .mrow:last-child{border-bottom:0}
.s-compare .M .mkick{display:inline-flex;align-items:center;font-size:var(--meta);font-weight:500;
  padding:3px 8px;border-radius:13px;background:#f4f6f7;color:#434a52;margin:0 0 9px}
.s-compare .M .mbody{font-size:var(--lead);line-height:1.42;margin:0 0 6px;color:#16191c}
.s-compare .M .mmeta{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;margin:0}
.s-compare .M .mwho{font-size:var(--body);font-weight:500;color:#16191c;margin-top:4px}
.s-compare .M .mbtn{display:block;width:100%;margin-top:14px;padding:13px;
  font-size:var(--lead);font-weight:500;border:1px solid #e8eaec;
  background:#fff;color:#16191c;text-align:center;border-radius:13px}
@media (max-width:1040px){.s-compare .below{grid-template-columns:1fr} .s-compare .W .panes{grid-template-columns:1fr;height:auto} .s-compare .W .pane+.pane{border-left:0;border-top:1px solid #e8eaec}}
.s-compare a.px{color:inherit;text-decoration:none;display:contents}
.s-compare a.pxb{color:inherit;text-decoration:none}
.s-compare .screen{height:100%;display:flex;flex-direction:column;overflow:hidden}
.s-compare .W{flex:1;display:flex;flex-direction:column;min-height:0}
.s-compare .W .panes,.s-compare .W .homepanes{flex:1;height:auto!important;min-height:0}
.s-compare .W .nav{flex:none}
.s-compare .W .orient{flex:none}
.s-compare .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-compare .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #dfe3e5;
  background:#fff;color:#434a52;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer}
.s-compare .W .backbtn:hover{background:#f4f6f7;border-color:#c9ced3;color:#16191c}
.s-compare .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-compare .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-compare .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-compare .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-compare .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-compare .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-compare .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-compare .screen{border-left:1px solid #eceef0;border-right:1px solid #eceef0}
.s-compare .W{flex:none}
.s-compare .W .panes,.s-compare .W .homepanes{flex:none;height:auto!important;min-height:360px}
.s-compare .W .pane,.s-compare .W .main,.s-compare .W .rail,.s-compare .W .left,.s-compare .W .mid,.s-compare .W .right{overflow:visible!important;height:auto}

/* ===== upload ===== */
.s-upload .screen{background:#fff;overflow:hidden}
.s-upload .W{background:#fff;color:#16191c;font-size:var(--body);line-height:1.5}
.s-upload .W .nav{display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;
  padding:9px 18px;border-bottom:1px solid #e8eaec;min-height:56px}
.s-upload .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-upload .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;
  border:1px solid #dfe3e5;background:#fff;color:#434a52;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.s-upload .W .backbtn:hover{background:#f4f6f7;border-color:#c9ced3;color:#16191c}
.s-upload .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-upload .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-upload .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-upload .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-upload .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-upload .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-upload .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-upload .W .panes{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;height:470px}
.s-upload .W .pane{overflow:hidden}
.s-upload .W .pane+.pane{border-left:1px solid #e8eaec}
.s-upload .W .left{padding:0;background:#f8f9fa;display:flex;flex-direction:column}
.s-upload .W .left-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.s-upload .W .left-foot{flex:0 0 auto;padding-top:8px;border-top:1px solid #e8eaec}
.s-upload .W .lhead{padding:14px 16px 10px;border-bottom:1px solid #e8eaec}
.s-upload .W .lh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#666d7a;margin:0}
.s-upload .W .lcount{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em;
  line-height:1.1;margin:6px 0 0}
.s-upload .W .lcount span{font-size:var(--body);font-weight:400;color:#666d7a;letter-spacing:0;margin-left:6px}
.s-upload .W .item{padding:12px 16px;border-bottom:1px solid #eceff0;cursor:pointer}
.s-upload .W .item:last-child{border-bottom:0}
.s-upload .W .item.sel{background:#fff;box-shadow:inset 3px 0 0 #c9ced3}
.s-upload .W .irow{display:flex;align-items:flex-start;gap:9px}
.s-upload .W .idot{width:9px;height:9px;border-radius:50%;background:#b8883a;flex:none;margin-top:5px}
.s-upload .W .idot.m{width:7px;height:7px;margin-top:6px}
.s-upload .W .idot.l{width:5px;height:5px;background:#c9ced3;margin-top:7px}
.s-upload .W .ititle{font-size:var(--lead);font-weight:500;color:#16191c;line-height:1.35}
.s-upload .W .item:not(.sel) .ititle{font-weight:400;color:#434a52}
.s-upload .W .imeta{font-size:var(--mono);color:#666d7a;margin-top:4px;padding-left:18px;
  }
.s-upload .W .mid{padding:16px 20px;overflow-y:auto}
.s-upload .W .recid{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;
  margin-bottom:18px;border-bottom:1px solid #f0f2f3;flex-wrap:wrap}
.s-upload .W .recno{font-size:var(--mono);font-weight:500;
  color:#16191c;letter-spacing:.02em}
.s-upload .W .recmeta{font-size:var(--body);color:#666d7a}
.s-upload .W .right{padding:16px;overflow-y:auto}
.s-upload .W .rh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:#666d7a;margin:0 0 14px}
.s-upload .W .askfield{display:flex;align-items:center;gap:9px;width:380px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;cursor:text}
.s-upload .W .askfield:hover{border-color:#c9ced3}
.s-upload .W .askico{flex:none;color:#666d7a}
.s-upload .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-upload .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:17px}
.s-upload .drop{border:1px dashed #c9ced3;border-radius:6px;background:#fbfcfc;
  padding:34px 24px;text-align:center;margin-bottom:18px}
.s-upload .drop .dt{font-size:var(--lead);color:#16191c;margin:0 0 5px}
.s-upload .drop .ds{font-size:var(--body);color:#666d7a;margin:0}
.s-upload .drop .dbtn{margin-top:16px}
.s-upload .btn{font-family:'Inter',sans-serif;font-size:var(--body);font-weight:500;
  height:36px;padding:0 16px;border-radius:13px;border:1px solid #b8883a;
  background:#b8883a;color:#fff;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;line-height:1.2;box-sizing:border-box}
.s-upload .btn.sec{background:#fff;color:#434a52;border-color:#dfe3e5}
.s-upload .btn.sec:hover{background:#f4f6f7;border-color:#c9ced3}
.s-upload .btn[disabled]{opacity:.45;cursor:default}
.s-upload .flist{margin:0 0 18px}
.s-upload .frow{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid #f0f2f3}
.s-upload .frow:last-child{border-bottom:0}
.s-upload .fico{flex:none;width:26px;height:32px;border:1px solid #e0e4e6;border-radius:3px;
  display:flex;align-items:center;justify-content:center;color:#8c96a1}
.s-upload .fbody{flex:1;min-width:0}
.s-upload .fname{font-size:var(--body);color:#16191c;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-upload .flabelrow{display:flex;align-items:center;gap:8px;margin-top:5px}
.s-upload .flabel{font-size:var(--meta);color:#666d7a}
.s-upload .finput{font-family:'Inter',sans-serif;font-size:var(--body);color:#16191c;
  border:1px solid #e0e4e6;border-radius:6px;padding:3px 8px;width:210px;background:#fff}
.s-upload .frole{flex:none;display:flex;gap:6px}
.s-upload .roleopt{font-size:var(--meta);font-weight:500;height:24px;padding:0 11px;border-radius:13px;
  border:1px solid #e0e4e6;background:#fff;color:#666d7a;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1}
.s-upload .roleopt.on{background:#eceef0;border-color:#16191c;color:#16191c}
.s-upload .disclose{background:#f8f9fa;padding:14px 16px;border-radius:6px;margin-bottom:18px}
.s-upload .disclose p{margin:0;font-size:var(--body);color:#5e6469;line-height:1.55;max-width:568px}
.s-upload .disclose b{color:#16191c;font-weight:500}
.s-upload .opstate{display:flex;align-items:center;gap:9px;padding:9px 13px;margin-bottom:18px;
  background:#f4f6f7;color:#434a52;font-size:var(--body);line-height:1.45}
.s-upload .opstate svg{flex:none;color:#5e6469}
.s-upload h3.optitle{font-size:var(--title);font-weight:500;letter-spacing:-.014em;margin:0 0 6px;
  color:#16191c;line-height:1.3;max-width:568px}
.s-upload .opask{font-size:var(--body);color:#434a52;margin:0 0 20px;max-width:568px}
.s-upload .evid{background:#fbfcfc;border:1px solid #f0f2f3;border-radius:6px;padding:14px 16px;margin-bottom:22px}
.s-upload .evidh{font-size:var(--meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#666d7a;margin:0 0 11px}
.s-upload .evrow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.s-upload .evcol .evl{font-size:var(--meta);color:#666d7a;margin:0 0 4px}
.s-upload .evcol .evq{font-size:var(--body);color:#2e3439;margin:0;line-height:1.5}
.s-upload .evfoot{font-size:var(--meta);color:#666d7a;margin:11px 0 0;padding-top:10px;border-top:1px solid #f0f2f3}
.s-upload .sec{margin-bottom:22px}
.s-upload .seclab{font-size:var(--meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:#666d7a;margin:0 0 8px;display:flex;align-items:center;gap:9px}
/* .s-upload .reqd — the pill's styling REMOVED 16 August 2026.
   §12.7 ruled the Required pill gone entirely: "removed entire rather
   than de-bordered". It has been display:none on every screen since
   this morning, but it was still carrying a 62px fixed width, a
   radius and a mono face for something that never renders — which is
   how a ruled-away control comes back. The display:none rule stays,
   because the static markup still emits the span before hydration
   strips it. */
.s-upload .done{color:#3d6b52;background:#eef3f0}
.s-upload .fieldbox{width:100%;border:1px solid #e0e4e6;border-radius:6px;background:#fff;
  padding:11px 13px;font-family:'Inter',sans-serif;font-size:var(--body);color:#16191c;
  line-height:1.55;min-height:76px;resize:vertical}
.s-upload .fieldbox::placeholder{color:#666d7a}
.s-upload .fieldbox:focus{outline:2px solid #16191c;outline-offset:1px;border-color:#16191c}
.s-upload .fieldhint{font-size:var(--body);color:#666d7a;margin:6px 0 0;max-width:568px}
.s-upload .addrow{display:flex;align-items:center;gap:9px;margin-top:9px}
.s-upload .addbtn{font-size:var(--body);color:#434a52;background:none;
  border-radius:13px;height:30px;padding:0 12px;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1}
.s-upload .addbtn:hover{background:#faf6ee}
.s-upload .auth{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.s-upload .authopt{font-size:var(--body);font-weight:400;height:28px;padding:0 12px;border-radius:13px;
  border:1px solid #e0e4e6;background:#fff;color:#666d7a;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1;box-sizing:border-box}
.s-upload .authopt:hover{border-color:#c9ced3;color:#434a52}
.s-upload .authopt.on{background:#eceef0;border-color:#16191c;color:#16191c;font-weight:500}
.s-upload .authnote{font-size:var(--body);color:#666d7a;margin:8px 0 0;max-width:568px;line-height:1.5}
.s-upload .authshown{display:inline-flex;align-items:center;gap:8px;margin:0}
.s-upload .authpill{height:22px;padding:0 11px;
  background:#f4f6f7;color:#434a52;
  line-height:22px;box-sizing:border-box}
.s-upload .authpill.unc{background:#f0f2f3;color:#666d7a}
.s-upload .authsrc{font-size:var(--body);color:#5e6469}
.s-upload .posauth{margin:6px 0 0}
.s-upload .pos{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:11px 0;border-bottom:1px solid #f4f6f6}
.s-upload .pos:last-child{border-bottom:0}
.s-upload .posfn{font-size:var(--body);color:#16191c;line-height:22px;margin:0}
.s-upload .posnote{font-size:var(--body);color:#666d7a;margin:2px 0 0;line-height:1.5;max-width:400px}
.s-upload .posval{white-space:nowrap;
  flex:none;min-width:112px;height:22px;padding:0 9px;justify-content:center;box-sizing:border-box}
.s-upload .posval.wait{background:#f0f2f3;color:#666d7a}
.s-upload .posval.ok{background:#eef3f0;color:#3d6b52}
.s-upload .posval.cond{background:#f4f6f7;color:#434a52}
.s-upload .actions{margin-top:26px;padding-top:20px;border-top:1px solid #e8eaec}
.s-upload .actask{font-size:var(--body);color:#16191c;margin:0 0 16px;max-width:568px;line-height:1.5}
.s-upload .actrow{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.s-upload .actrow.alt{margin-top:14px;width:382px;justify-content:center}
.s-upload .btn.wide{width:186px;height:38px;white-space:nowrap}
.s-upload .btn.sec.quiet{color:#434a52;border-color:#dfe3e5}
.s-upload .actnote{font-size:var(--body);color:#666d7a;margin:14px 0 0;max-width:568px;line-height:1.5}
.s-upload .meta{padding:10px 0;border-bottom:1px solid #f0f2f3}
.s-upload .meta:last-child{border-bottom:0}
.s-upload .metal{font-size:var(--meta);color:#666d7a;margin:0 0 3px}
.s-upload .metav{font-size:var(--body);color:#16191c;margin:0}
.s-upload .metav.gold{color:#16191c;font-weight:500}
.s-upload .metasub{font-size:var(--meta);color:#666d7a;margin:2px 0 0}
.s-upload .dochash{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a}
.s-upload .compl{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.s-upload .complnum{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em}
.s-upload .complof{font-size:var(--body);color:#666d7a}
.s-upload .bar{height:4px;border-radius:2px;background:#f0f2f3;overflow:hidden;margin-top:8px}
.s-upload .barfill{height:100%;background:#666d7a;border-radius:2px}
.s-upload a.px{color:inherit;text-decoration:none;display:contents}
.s-upload a.pxb{color:inherit;text-decoration:none}
.s-upload .screen{height:100%;display:flex;flex-direction:column;overflow:hidden}
.s-upload .W{flex:1;display:flex;flex-direction:column;min-height:0}
.s-upload .W .panes,.s-upload .W .homepanes{flex:1;height:auto!important;min-height:0}
.s-upload .W .nav{flex:none}
.s-upload .W .orient{flex:none}
.s-upload .screen{border-left:1px solid #eceef0;border-right:1px solid #eceef0}
.s-upload .W{flex:none}
.s-upload .W .panes,.s-upload .W .homepanes{flex:none;height:auto!important;min-height:470px}
.s-upload .W .pane,.s-upload .W .main,.s-upload .W .rail,.s-upload .W .left,.s-upload .W .mid,.s-upload .W .right{overflow:visible!important;height:auto}

/* ===== firstsession ===== */
.s-firstsession .screen{background:#fff;overflow:hidden}
.s-firstsession .W{background:#fff;color:#16191c;font-size:var(--body);line-height:1.5}
.s-firstsession .W .orient{display:flex;align-items:center;gap:12px;background:#b8883a;color:#fff;
  padding:6px 18px;min-height:28px}
.s-firstsession .W .orientlab{font-size:var(--meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.s-firstsession .W .orientnote{font-size:var(--body);color:#f4e6cf}
.s-firstsession .W .nav{display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;
  padding:9px 18px;border-bottom:1px solid #e8eaec;min-height:56px}
.s-firstsession .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-firstsession .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #dfe3e5;
  background:#fff;color:#434a52;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.s-firstsession .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-firstsession .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-firstsession .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-firstsession .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-firstsession .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-firstsession .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-firstsession .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-firstsession .W .askfield{display:flex;align-items:center;gap:9px;width:380px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;cursor:text}
.s-firstsession .W .askico{flex:none;color:#666d7a}
.s-firstsession .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-firstsession .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:17px}
.s-firstsession .W .panes{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;height:500px}
.s-firstsession .W .pane{overflow:hidden}
.s-firstsession .W .pane+.pane{border-left:1px solid #e8eaec}
.s-firstsession .W .left{padding:0;background:#f8f9fa;display:flex;flex-direction:column}
.s-firstsession .W .left-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
.s-firstsession .W .left-foot{flex:0 0 auto;padding-top:8px;border-top:1px solid #e8eaec}
.s-firstsession .W .lhead{padding:14px 16px 10px;border-bottom:1px solid #e8eaec}
.s-firstsession .W .lh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#666d7a;margin:0}
.s-firstsession .W .lcount{font-size:var(--title);font-weight:500;color:#16191c;letter-spacing:-.02em;line-height:1.1;margin:6px 0 0}
.s-firstsession .W .lcount span{font-size:var(--body);font-weight:400;color:#666d7a;letter-spacing:0;margin-left:6px}
.s-firstsession .W .mid{padding:16px 20px;overflow-y:auto}
.s-firstsession .W .right{padding:16px;overflow-y:auto}
.s-firstsession .W .rh{font-size:var(--meta);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#666d7a;margin:0 0 14px}
.s-firstsession .W .recid{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid #f0f2f3;flex-wrap:wrap}
.s-firstsession .W .recno{font-size:var(--mono);font-weight:500;color:#16191c}
.s-firstsession .W .recmeta{font-size:var(--body);color:#666d7a}
.s-firstsession .thread{max-width:600px}
.s-firstsession .turn{margin-bottom:26px}
.s-firstsession .turn.done{opacity:.62}
.s-firstsession .tq{font-size:var(--lead);color:#16191c;margin:0 0 10px;line-height:1.5;max-width:568px}
.s-firstsession .ta{font-size:var(--body);color:#434a52;margin:0}
.s-firstsession .thelp{font-size:var(--body);color:#666d7a;margin:7px 0 0;max-width:568px;line-height:1.5}
.s-firstsession .tinput{width:100%;border:1px solid #e0e4e6;border-radius:6px;background:#fff;
  padding:10px 12px;font-family:'Inter',sans-serif;font-size:var(--body);color:#16191c;line-height:1.5}
.s-firstsession .tinput:focus{outline:2px solid #16191c;outline-offset:1px;border-color:#16191c}
.s-firstsession .tinput::placeholder{color:#666d7a}
.s-firstsession textarea.tinput{min-height:72px;resize:vertical}
.s-firstsession .taglist{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.s-firstsession .tag{font-size:var(--body);height:28px;padding:0 12px;border-radius:13px;background:#f4f6f7;
  border:1px solid #dfe3e5;color:#434a52;display:inline-flex;align-items:center;
  gap:7px;line-height:1}
.s-firstsession .tag .x{color:#c0a878;cursor:pointer;font-size:var(--body);line-height:1}
.s-firstsession .tagadd{font-size:var(--body);height:28px;padding:0 12px;border-radius:13px;background:#fff;
  border:1px dashed #dfe3e5;color:#666d7a;cursor:pointer;display:inline-flex;
  align-items:center;line-height:1}
.s-firstsession .tagadd:hover{border-color:#c9ced3;color:#434a52}
.s-firstsession .people{margin-top:10px}
/* The control that releases the rest of the roster. An action, so 13px
   from test-shell's closed set. */
.s-firstsession .fsmore{font-family:'Inter',sans-serif;font-size:var(--meta);height:24px;
  padding:0 11px;border-radius:13px;border:1px solid #e8eaec;background:#fff;
  color:#434a52;cursor:pointer;margin:6px 0 0}
.s-firstsession .fsmore:hover{background:#f4f6f7;color:#16191c}
.s-firstsession .prow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #f4f6f6}
.s-firstsession .prow:last-child{border-bottom:0}
.s-firstsession .pav{flex:none;width:26px;height:26px;border-radius:50%;background:#f0f2f3;
  font-size:var(--meta);font-weight:500;color:#666d7a;display:flex;align-items:center;justify-content:center}
.s-firstsession .pname{flex:1;font-size:var(--body);color:#16191c;min-width:0}
.s-firstsession .pmail{font-size:var(--body);color:#666d7a}
.s-firstsession .pdept{flex:none;font-size:var(--body);color:#5e6469;border:1px solid #e8eaec;border-radius:13px;
  padding:4px 9px;background:#fff}
.s-firstsession .pflag{flex:none;font-size:var(--meta);font-weight:500;height:22px;padding:0 10px;border-radius:13px;
  background:#f4f6f7;color:#434a52;display:inline-flex;align-items:center;line-height:22px}
.s-firstsession .pflag.none{background:#f4f6f7;color:#434a52}
.s-firstsession .impway{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap}
.s-firstsession .wbtn{font-size:var(--body);height:34px;padding:0 14px;border-radius:13px;border:1px solid #dfe3e5;
  background:#fff;color:#434a52;cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1}
.s-firstsession .wbtn:hover{background:#f4f6f7;border-color:#c9ced3}
.s-firstsession .wbtn svg{color:#666d7a}
.s-firstsession .impnote{font-size:var(--body);color:#666d7a;margin:9px 0 0;max-width:568px;line-height:1.5}
.s-firstsession .btn{font-family:'Inter',sans-serif;font-size:var(--body);font-weight:500;height:36px;
  padding:0 16px;border-radius:13px;border:1px solid #b8883a;background:#b8883a;color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  line-height:1.2;box-sizing:border-box}
.s-firstsession .btn.sec{background:#fff;color:#434a52;border-color:#dfe3e5}
.s-firstsession .btn.sec:hover{background:#f4f6f7;border-color:#c9ced3}
.s-firstsession .actrow{display:flex;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid #e8eaec}
.s-firstsession .step{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid #f4f6f6}
.s-firstsession .step:last-child{border-bottom:0}
.s-firstsession .smark{flex:none;width:17px;height:17px;border-radius:50%;margin-top:2px;
  display:flex;align-items:center;justify-content:center;font-size:var(--meta)}
.s-firstsession .smark.on{background:#666d7a;color:#fff}
.s-firstsession .smark.now{background:#fff;border:1.5px solid #5e6469}
.s-firstsession .smark.off{background:#f0f2f3;color:#666d7a}
.s-firstsession .stext{flex:1;min-width:0}
.s-firstsession .sname{font-size:var(--body);color:#16191c;margin:0}
.s-firstsession .step.off .sname{color:#666d7a}
.s-firstsession .ssub{font-size:var(--meta);color:#666d7a;margin:2px 0 0}
.s-firstsession .reassure{font-size:var(--body);color:#666d7a;margin:16px 0 0;line-height:1.55;
  padding-top:14px;border-top:1px solid #f0f2f3}
.s-firstsession a.px{color:inherit;text-decoration:none;display:contents}
.s-firstsession a.pxb{color:inherit;text-decoration:none}
.s-firstsession .screen{height:100%;display:flex;flex-direction:column;overflow:hidden}
.s-firstsession .W{flex:1;display:flex;flex-direction:column;min-height:0}
.s-firstsession .W .panes,.s-firstsession .W .homepanes{flex:1;height:auto!important;min-height:0}
.s-firstsession .W .nav{flex:none}
.s-firstsession .W .orient{flex:none}
.s-firstsession .screen{border-left:1px solid #eceef0;border-right:1px solid #eceef0}
.s-firstsession .W{flex:none}
.s-firstsession .W .panes,.s-firstsession .W .homepanes{flex:none;height:auto!important;min-height:500px}
.s-firstsession .W .pane,.s-firstsession .W .main,.s-firstsession .W .rail,.s-firstsession .W .left,.s-firstsession .W .mid,.s-firstsession .W .right{overflow:visible!important;height:auto}

/* =====================================================================
   Layout correction — 6 August 2026.

   Every screen was drawn inside a 1118px laptop shell (.page, stripped
   with the rest of the frame). Their middle pane is minmax(0,1fr), so
   with the shell gone it became elastic and now fills whatever monitor
   the page is opened on: on a 2500px display the home main pane is
   2270px, the two-column figure grid gives 1120px columns, and the
   dates in "Since Friday" are flung to the far edge.

   Restoring the drawn width of the elastic column restores the tested
   proportions exactly. Nothing else is changed: the panes stay adjacent
   and the rail stays flush left. Each screen's cap is the shell width
   less its own fixed columns.

   To widen a screen, change its --mid. Prose inside is already capped
   at 52-64ch by the screens' own rules, so a wider pane does not
   produce a wider measure. Change `start` to `center` on the rule below
   to float the whole app in the middle of a wide display instead.

   Scoped above 1180px so the compare screen's own collapse rule at
   1040px still wins on a narrow window, and so the floor below can never
   exceed the window it sits in: 230 + 638 + 300 is 1168.

   AMENDED 13 August 2026 — the empty half.

   The block above pinned the elastic column with minmax(0, --mid), which
   made the drawn width a ceiling. On a 2500px window that left the panes
   stopping at about 1118px, flush left, while the nav spanned everything
   — the fault reported on every screen. It was not the 1400px cap, which
   has been dead since 12 August: line 1438 sets max-width:none on the
   same element, later in the same sheet.

   The reason the ceiling was needed has since gone. When it was written,
   a wider middle pane meant wider prose. It no longer does: the measure
   rules further down hold body copy to 68ch and every direct child of a
   prose pane to 78ch, so the pane can take the whole window without the
   text following it out. Tables were never the problem — every pixel a
   table gets is a column that does not have to wrap.

   So --mid becomes a floor rather than a ceiling: minmax(--mid, 1fr).
   Each screen keeps the drawn width it was tested at as its minimum and
   grows into whatever else the window gives. --mid remains the lever to
   change a screen's minimum, exactly as before.

   Flush left is kept, ruled by Gerry 13 August. The earlier objection to
   centring was that the rail was marooned on one side while the top bar
   spanned everything and so looked wider than the application. Widening
   the content removes that cause rather than moving it: the panes now
   reach the same right edge as the nav.

   The right pane goes 250 to 300 (232 to 280 where it was narrower). It
   carries precedent and from-the-record, which are the two things a
   reader is asked to act on, and it was the tightest column on screen.
   ===================================================================== */
@media (min-width: 1180px) {
  #app .homepanes, #app .panes { justify-content: start; }

  .s-home          .W .homepanes { --mid: 888px; grid-template-columns: 230px minmax(var(--mid), 1fr); }
  .s-openpoint     .W .panes     { --mid: 638px; grid-template-columns: 230px minmax(var(--mid), 1fr) 300px; }
  .s-record        .W .panes     { --mid: 638px; grid-template-columns: 230px minmax(var(--mid), 1fr) 300px; }
  .s-moments       .W .panes     { --mid: 638px; grid-template-columns: 230px minmax(var(--mid), 1fr) 300px; }
  .s-moments-board .W .panes     { --mid: 638px; grid-template-columns: 230px minmax(var(--mid), 1fr) 300px; }
  .s-upload        .W .panes     { --mid: 638px; grid-template-columns: 230px minmax(var(--mid), 1fr) 300px; }
  .s-firstsession  .W .panes     { --mid: 638px; grid-template-columns: 230px minmax(var(--mid), 1fr) 300px; }
  .s-reconsider    .W .panes     { --mid: 656px; grid-template-columns: 230px minmax(var(--mid), 1fr) 280px; }
}
/* .s-compare is deliberately absent. Line 1513 declares its grid again,
   later and unconditionally, as two columns with precedent spanning the
   full width beneath — so any rule for it here never applies at any
   window size. It had a --mid of 690px in this block since the block was
   written, and that value has never once been used. Removed rather than
   corrected, because a dead rule that reads as a live one is what caused
   the empty half to be misdiagnosed twice. */

/* =====================================================================
   SESSION CHANGED
   The cookie is shared across tabs. A magic link opened in a second tab
   replaces it, and the first tab carries on showing what it had cached —
   the previous person's records, with the previous person's name in the
   corner, and no way to tell. Since migration 0012 an address can belong
   to more than one organisation, so "the same person" is no longer a
   safe assumption either.

   This covers the stale record rather than quietly swapping it. Nothing
   typed is discarded and nothing is read that should not be; the reader
   is told plainly and reloads when ready.
   ===================================================================== */
#sessionchanged{position:fixed;inset:0;z-index:90;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;padding:40px 24px}
#sessionchanged .box{max-width:420px;width:100%}
#sessionchanged h2{font-size:var(--lead);font-weight:500;letter-spacing:-.01em;margin:0 0 8px;color:#16191c}
#sessionchanged p{font-size:var(--body);line-height:1.6;color:#434a52;margin:0 0 8px}
#sessionchanged .why{font-size:var(--body);color:#666d7a;margin:0 0 18px}
#sessionchanged button{height:36px;padding:0 16px;border-radius:13px;border:1px solid #b8883a;
  background:#b8883a;color:#fff;font-size:var(--body);font-weight:500;cursor:pointer}
#sessionchanged button:hover{background:#a67a33;border-color:#a67a33}

/* The scrollbar gutter, reserved permanently.

   Panes are overridden to overflow:visible further up, so the window
   scrolls rather than a pane. A window scrollbar appears on the longer
   screens and not on Home, and it narrows the viewport by about fifteen
   pixels when it does — which moves anything centred by half that. Ask
   Pohja shifted left on Open points, Decisions and People and nowhere
   else, which is exactly the set of screens long enough to scroll.

   Holding the gutter open means the centre line is the same on every
   screen whether there is anything to scroll or not. */
html{scrollbar-gutter:stable}

/* Ask Pohja sits in the centre of the bar on every screen. Ruled by
   Gerry, 11 August 2026.

   Each screen declared its own nav with justify-content:space-between,
   which spreads children apart rather than centring anything. Home has
   three items so the field landed mid-bar; the other eight have two, so
   space-between pushed the field to the right edge. It was never centred
   by rule, only by what happened to sit beside it.

   Three columns instead: flexible, field, flexible. The field is centred
   whether or not anything follows it. */
.s-home .W .nav,.s-openpoint .W .nav,.s-record .W .nav,.s-reconsider .W .nav,.s-moments .W .nav,.s-moments-board .W .nav,.s-compare .W .nav,.s-upload .W .nav,.s-firstsession .W .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.s-home .W .nav .navleftgrp,.s-home .W .nav > .pohja-mark,.s-openpoint .W .nav .navleftgrp,.s-openpoint .W .nav > .pohja-mark,.s-record .W .nav .navleftgrp,.s-record .W .nav > .pohja-mark,.s-reconsider .W .nav .navleftgrp,.s-reconsider .W .nav > .pohja-mark,.s-moments .W .nav .navleftgrp,.s-moments .W .nav > .pohja-mark,.s-moments-board .W .nav .navleftgrp,.s-moments-board .W .nav > .pohja-mark,.s-compare .W .nav .navleftgrp,.s-compare .W .nav > .pohja-mark,.s-upload .W .nav .navleftgrp,.s-upload .W .nav > .pohja-mark,.s-firstsession .W .nav .navleftgrp,.s-firstsession .W .nav > .pohja-mark{grid-column:1;justify-self:start}
.s-home .W .nav .askfield,.s-openpoint .W .nav .askfield,.s-record .W .nav .askfield,.s-reconsider .W .nav .askfield,.s-moments .W .nav .askfield,.s-moments-board .W .nav .askfield,.s-compare .W .nav .askfield,.s-upload .W .nav .askfield,.s-firstsession .W .nav .askfield{grid-column:2;justify-self:center;width:clamp(380px,34vw,560px);height:38px}

/* Ask Pohja is set larger than the body copy beneath it, amended 13
   August 2026. It was 12.5px against a 13.5px body — the primary way
   into the whole corpus, rendered smaller than the text it searches.
   The field also stayed at 380px whatever the window did, which is what
   made it read as lost once the panes filled the width. */
.s-home .W .nav .askfield .askph,.s-openpoint .W .nav .askfield .askph,.s-record .W .nav .askfield .askph,.s-reconsider .W .nav .askfield .askph,.s-moments .W .nav .askfield .askph,.s-moments-board .W .nav .askfield .askph,.s-compare .W .nav .askfield .askph,.s-upload .W .nav .askfield .askph,.s-firstsession .W .nav .askfield .askph{font-size:var(--body)}
.s-home .W .nav .askfield input,.s-openpoint .W .nav .askfield input,.s-record .W .nav .askfield input,.s-reconsider .W .nav .askfield input,.s-moments .W .nav .askfield input,.s-moments-board .W .nav .askfield input,.s-compare .W .nav .askfield input,.s-upload .W .nav .askfield input,.s-firstsession .W .nav .askfield input{font-size:var(--body)}
.s-home .W .nav .whoami,.s-openpoint .W .nav .whoami,.s-record .W .nav .whoami,.s-reconsider .W .nav .whoami,.s-moments .W .nav .whoami,.s-moments-board .W .nav .whoami,.s-compare .W .nav .whoami,.s-upload .W .nav .whoami,.s-firstsession .W .nav .whoami{grid-column:3;justify-self:end}

/* Dissent, stated at the top of the record. Ruled by Gerry, 11 August
   2026. Outlined, no colour: this is not something that wants an action,
   it is something the reader must not miss. Gold would have made it a
   demand and put it in competition with the things that are. */
.s-record .W .dissent{display:flex;align-items:baseline;gap:11px;margin:0 0 20px}
.s-record .W .dissent .dchip{flex:none;font-size:var(--meta);font-weight:500;letter-spacing:.03em;
  padding:3px 10px;border:1px solid #16191c;border-radius:13px;color:#16191c;
  background:#fff;white-space:nowrap}
.s-record .W .dissent .dtext{margin:0;font-size:var(--body);color:#16191c;line-height:1.5}

/* ── Width. Ruled by Gerry, 12 August 2026. ───────────────────────────

   The shell was fixed at 1400px, so a comparison table was squeezed into
   the middle third of a screen that had room to spare either side. The
   objection to widening has always been that the text does not grow with
   it and gets lost in a bigger panel.

   That objection is right, and the answer is that prose and tables want
   opposite things. Reading text has an optimal line length regardless of
   screen size — around 60 to 75 characters — so a wider pane makes prose
   harder to read, not easier, and enlarging the type to compensate makes
   it worse again. A table has no line-length problem at all: every cell
   is a few words, and every pixel it gets is a column that does not have
   to truncate or wrap.

   So the shell grows and the content decides how much of it to use.
   Prose panes hold a reading measure and centre inside whatever space
   exists. Tables take everything.

   Nothing about the type scale changes. That is the point. */

#app > .screen{max-width:none;width:100%}

/* Prose keeps its measure whatever the window does. */
/* Split one-per-rule, 17 August. As a comma list only the LAST selector
   before the brace was resolvable — TEST-STATE.txt names this exact
   trap — so a check on the record screen's cap read nothing at all and
   passed by looking empty. */
.s-record .W .pane.mid .secbody{max-width:568px}
.s-openpoint .W .pane.mid .secbody{max-width:568px}
.s-reconsider .W .pane.mid .secbody{max-width:568px}
.s-record .W .pane.mid,
.s-openpoint .W .pane.mid,
.s-reconsider .W .pane.mid,
.s-moments .W .pane.mid,
.s-firstsession .W .pane.mid{--pohja-measure:1}
/* 17 August: 78ch -> 568px. THIS RULE IS THE ONE THAT DECIDES, and it
   was nearly missed. It has higher specificity than every per-element
   max-width above it, so converting those and leaving this at 78ch
   would have changed nothing a browser paints while every per-element
   check passed — a whole pass that reads as done and is not.

   Not arithmetic: 78ch of Inter at --body resolves near 570px, but the
   value is the RULED measure rather than a per-element approximation of
   what the old unit happened to produce. §3 bans ch because it moves
   with the type scale; keeping its resolved width would keep the drift
   and only hide the unit. */
/* THE MEASURE IS APPLIED BY CONTENT, NOT BY SHELL. Ruled by Gerry,
   1 September 2026.

   WHAT IT WAS. `.pane.mid > *` capped EVERY direct child at 568px on
   three shells — and `.s-record` alone carries FIFTEEN routes: value,
   derived, decision, ask, asks, newask, askthread, adopt, seed,
   negotiations, newnegotiation, negotiation, reports, owner,
   comparisons. Seventeen screens wore a prose measure whether their
   content was prose or not.

   IT HAD BEEN FOUND WRONG TWICE, BOTH TIMES IN A BROWSER. The memory
   table borrowed the record shell and shipped with six columns in a
   568px box; the Value screen shipped with five tiles in one. **Each
   was patched with a named escape, and a rule that needs an escape per
   screen is a rule aimed at the wrong thing.**

   SO THE CAP NOW NAMES PROSE. Paragraphs and headings keep the ruled
   measure — 78ch converted on 17 August, and the reason it is a fixed
   px is that `ch` drifts with the type scale. Containers — sections,
   tables, card grids, action rows — take the width they are given,
   which is the 18 August ruling in its own words: **prose is capped and
   centred; a table takes the width it is given.**

   PROSE INSIDE A CONTAINER IS UNAFFECTED AND STILL CAPPED.
   `.secbody`, `.fieldhint`, `.fieldbox` and `.mline` each carry their
   own 568px and always did, so a section that now spans the pane still
   holds its sentences at the measure.

   THE SAME THREE LINES ON ALL THREE SHELLS, deliberately identical:
   the fault this replaces was one shell being treated differently from
   another. */
/* CAPPED AND FLUSH LEFT, NOT CAPPED AND CENTRED. Ruled by Gerry,
   1 September 2026, and it AMENDS HALF OF THE 18 AUGUST RULING.

   THAT RULING SAID *prose is capped and centred*, and it was right
   while EVERYTHING was capped: the whole column moved together and
   centring was invisible. **The moment containers took the pane width,
   centring split the page** — the heading and standfirst sat 92px in
   from a card that started at the pane edge, and on a wide window that
   gap is over three hundred pixels. Gerry saw it in a browser.

   SO THE PROSE KEEPS ITS MEASURE AND ITS LEFT EDGE. `margin-right:auto`
   is retained so the cap still governs the width rather than the
   element stretching. **The centring on `> *` stays** — it is a no-op
   on a full-width container and it is what a future capped child would
   otherwise lose.

   THE 13 AUGUST RULING WAS FLUSH-LEFT and 18 August reversed it to
   cap-and-centre; this restores the first half of the first one for
   the same reason it was ruled originally, on a page that finally has
   something wide on it to align to.

   WRITTEN OUT, ONE SELECTOR PER RULE, and that is not fussiness.
   The first version grouped them with commas across a line break and
   `test-shell`'s resolver could not see them — twelve assertions went
   red on CSS a browser applied perfectly. **A rule a checker cannot
   read is a rule nobody is holding.** */
.s-record .W .pane.mid > p{max-width:568px;margin-left:0;margin-right:auto}
.s-record .W .pane.mid > h1{max-width:568px;margin-left:0;margin-right:auto}
.s-record .W .pane.mid > h2{max-width:568px;margin-left:0;margin-right:auto}
.s-record .W .pane.mid > h3{max-width:568px;margin-left:0;margin-right:auto}
.s-openpoint .W .pane.mid > p{max-width:568px;margin-left:0;margin-right:auto}
.s-openpoint .W .pane.mid > h1{max-width:568px;margin-left:0;margin-right:auto}
.s-openpoint .W .pane.mid > h2{max-width:568px;margin-left:0;margin-right:auto}
.s-openpoint .W .pane.mid > h3{max-width:568px;margin-left:0;margin-right:auto}
.s-reconsider .W .pane.mid > p{max-width:568px;margin-left:0;margin-right:auto}
.s-reconsider .W .pane.mid > h1{max-width:568px;margin-left:0;margin-right:auto}
.s-reconsider .W .pane.mid > h2{max-width:568px;margin-left:0;margin-right:auto}
.s-reconsider .W .pane.mid > h3{max-width:568px;margin-left:0;margin-right:auto}

/* Home reads as a page rather than a pane, so it keeps a centred column
   and simply sits in more air. */
/* Home reads as a page, so it keeps a measure — but the measure sits
   with the rail at the left rather than centred in the window. Centred,
   the rail was marooned on one side and the content floated in the
   middle with the top bar spanning everything, so the bar looked wider
   than the application. */
.s-home .cap{max-width:1180px;margin:0}
/* The cap comes off, 13 August 2026. Ruled by Gerry: the application
   takes the width, flush left.

   This was the second cap and the reason Home stayed half empty after
   the pane grids were freed. The first was on `#app > .screen` and was
   already dead; the tracks were freed in the 1180px media query. Nobody
   had checked the grid *container*, which is a different element again —
   which is why the fix appeared to do nothing on Home while working
   everywhere else. */
.s-home .W .homepanes{max-width:none;margin:0}

/* The comparison is the one screen built to be wide. The table takes the
   window; Precedent moves beneath it rather than taking a third of the
   width while a table is on screen. */
.s-compare .wrap{max-width:none}
.s-compare .W .panes{grid-template-columns:196px minmax(0,1fr);height:auto}
.s-compare .W .pane.right{
  grid-column:1 / -1;
  border-left:0;
  border-top:1px solid #e8eaec;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 26px;
  align-content:start}
.s-compare .W .pane.right .rh{grid-column:1 / -1}
.s-compare .W table{min-width:0}
.s-compare .W .tscroll table{min-width:0}
/* A cell is a few words. It should not wrap while the window is empty
   either side of it. */
.s-compare .W table td .val{white-space:normal}

/* The table takes the width it needs, not the width available.

   Fixed 15% columns were the wrong instrument. The values are short —
   "30 days", "£250,000" — and dividing a 2400px window by rule left each
   one adrift in six hundred pixels of nothing. A table of short values
   should be compact and dense, which is also what the audience rule
   asks for: dense and fast over simple and slow.

   So the table sizes to its content and stops. On a very wide screen it
   sits left with white space to the right, which is correct: empty space
   is not a problem, and stretching six words across a monitor is. */
.s-compare .W table{table-layout:auto;width:auto;min-width:100%;max-width:1500px}
.s-compare .W table th,
.s-compare .W table td{overflow-wrap:anywhere}
.s-compare .W table th{white-space:normal;vertical-align:bottom;padding-right:26px}
.s-compare .W table td{vertical-align:top;padding-right:26px}
/* The clause column carries the subject and its actions, so it needs
   real room; every value column is a few words and needs very little.

   The inset: every column after the first is held off its neighbour by
   that neighbour's padding-right, so it reads as inset. The first column
   has nothing to its left and sat hard against the table edge. It gets
   the same 26px, which is the gutter every other column already has.

   Read before writing: the base rule at the top of this sheet sets
   `padding:8px 10px 8px 0` on td and `padding:0 10px 7px 0` on th, and
   the sticky first-column rule above sets `padding-right:8px` — which
   still wins over the `padding-right:26px` below it, being one pseudo-
   class more specific. Neither sets a left, which is the fault. Only the
   left is set here; nothing else is disturbed. `*{box-sizing:border-box}`
   is set at the top of the sheet, so the 26px comes out of the declared
   300px and the column's outside width does not move — which matters,
   because `.ref` is stuck at a fixed `left:108px`. */
.s-compare .W table th:first-child,
.s-compare .W table td:first-child{width:300px;min-width:300px;padding-left:26px}
.s-compare .W table th.ref,
.s-compare .W table td.ref{min-width:150px}

/* The clause cell: subject, match count, then the actions beneath. */
.s-compare .W .csubj{margin:0;font-size:var(--body);font-weight:500;color:#16191c}
.s-compare .W .cmatch{margin:3px 0 0;font-size:var(--meta);color:#666d7a}
.s-compare .W .cacts{margin:9px 0 0}
.s-compare .W .cacts .btn{font-size:var(--meta);padding:5px 10px}
.s-compare .W .cacts .chiprow{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 7px}
.s-compare .W .cacts .chiprow[hidden]{display:none}
.s-compare .W .cacts .chipask{margin:0 0 5px;font-size:var(--meta);color:#666d7a}
/* Values sit at the top of their cell, level with the clause they
   belong to. Left to fill the cell they drifted to the bottom, so a
   pill sat two lines below its own number. */
.s-compare .W table td .cell{display:block}
.s-compare .W .cacts .chiprow button{font-size:var(--meta);padding:3px 7px}
.s-compare .W .cacts .btnrow{display:flex;flex-wrap:wrap;gap:6px}

@media (min-width:1500px){
  .s-compare .W table{font-size:var(--body)}
}

/* ── Candidates, under the field they answer ─────────────────────────

   What this replaces was a two-column panel below the form. Its fault
   was structural rather than cosmetic: the candidates for the decision
   were nowhere near the decision field, so choosing one meant scrolling
   away from the thing being written.

   NOTE ON WIDTH — read before changing anything here. The rule
   `.s-openpoint .W .pane.mid > *` caps direct children at 78ch to hold a
   reading measure for prose. A `.pohja-cands` host is not a direct child:
   it sits inside a `.sec`, which is the capped child. So it inherits that
   measure rather than opting out of it, which is right — a candidate is
   read as a sentence and belongs on the same measure as the field above
   it. The old surface needed `max-width:none` because two columns inside
   78 characters were cramped; one column is not.

   Nothing later in this sheet selects .pcand, .pohja-cands or
   .pohja-source. Checked, not assumed. */

.s-openpoint .pohja-cands{margin:10px 0 0}
.s-openpoint .pohja-cands:empty{margin:0}

/* A candidate. Outlined, never filled — the one filled control on this
   screen is Record. */
.s-openpoint .pcand{
  border:1px solid #eceef0;
  border-radius:6px;
  padding:9px 11px;
  margin:0 0 6px;
  background:#fff}
.s-openpoint .pcand:last-child{margin-bottom:0}

/* The label. Named in words at the point of choosing, and the same words
   the record shows afterwards. Grey, because whose words they are is
   metadata about the record rather than part of what was decided —
   the same ink as every other metadata line, and never the gold. */
.s-openpoint .pcandlab{
  margin:0 0 4px;
  font-size:var(--meta);
  color:#666d7a;
  line-height:1.4}
/* A record number is a quotable reference, so it takes the same monospace
   as every other record number on the screen. */
.s-openpoint .pcandref{font-size:var(--mono);letter-spacing:.02em}

.s-openpoint .pcandtext{
  margin:0;
  font-size:var(--body);
  line-height:1.5;
  color:#16191c}

/* Dismissing costs the same as placing, so the two controls are the same
   size and sit beside each other. Most candidates under any given field
   will be wrong for it; making "Not this" the cheaper action would be
   making the common case the awkward one. */
.s-openpoint .pcandacts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 0}
.s-openpoint .pcanduse,
.s-openpoint .pcandnot{
  font-family:'Inter',sans-serif;
  font-size:var(--meta);
  font-weight:500;
  line-height:1;
  padding:6px 11px;
  border:1px solid #d5dade;
  border-radius:13px;
  background:#fff;
  color:#16191c;
  cursor:pointer}
.s-openpoint .pcandnot{color:#5e6469}
.s-openpoint .pcanduse:hover,
.s-openpoint .pcandnot:hover{border-color:#16191c}

/* Why a placement was refused. Sits under the control that refused it
   rather than anywhere central, so the reason is beside the cause. */
.s-openpoint .plwhy{
  flex:1 1 100%;
  margin:6px 0 0;
  font-size:var(--meta);
  color:#5e6469;
  line-height:1.5}

/* The decision field can only ever carry the recorder's own words.
   Without this line the absence of any record or library candidate reads
   as a gap in the product rather than as a rule. */
.s-openpoint .pcandonly{
  margin:8px 0 0;
  font-size:var(--meta);
  color:#666d7a;
  line-height:1.5}
.s-openpoint .pcandonly + .pcand{margin-top:8px}

/* Collapsed. A filled field has no use for a screen of candidates it did
   not need, so they fold to one line — and the line says how many, because
   "some" is not a fact anyone can act on. Nothing is dismissed by folding. */
/* `.pcandmore` removed with slice 2. It styled the collapse line,
   `N more from what was said`, which the four chips supersede (§0). */

/* Where the candidates came from, above the fields, because a transcript
   feeds every field and belongs to none of them. */
.s-openpoint .pohja-source{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:7px;
  margin:0 0 18px;
  padding:0 0 12px;
  border-bottom:1px solid #f0f2f3}
.s-openpoint .psrctext{font-size:var(--meta);color:#5e6469;line-height:1.5}
.s-openpoint .psrcclear{
  font-family:'Inter',sans-serif;
  font-size:var(--meta);
  color:#5e6469;
  background:none;
  border:0;
  padding:0;
  text-decoration:underline;
  cursor:pointer}
.s-openpoint .psrcclear:hover{color:#16191c}

/* The worked example says so at the moment it runs, not only in a note
   beforehand. Otherwise somebody forms a view on the strength of a
   capability that does not exist. */
/* `.plsimwarn` removed with slice 2, with the voice note simulation
   it warned about. §6: a voice note is not made on this screen. */
/* The way in — above the fields now, not beside the reasoning one.

   It moved because a transcript feeds every field and belongs to none of
   them; sitting under Reasoning it implied a transcript was a reasoning
   tool. It sits above the first .sec, so it takes a bottom margin and a
   rule beneath it rather than the small top margin it had when it hung
   off a textarea. Read alongside `.s-openpoint .sec{margin-bottom:22px}`
   above: the 18px here plus the section's own spacing is what separates
   this band from the first field. */
.s-openpoint .pohja-entry{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin:0 0 18px;
  padding:0 0 14px;
  border-bottom:1px solid #f0f2f3}
.s-openpoint .plentry{
  font-family:'Inter',sans-serif;
  font-size:var(--meta);
  padding:5px 11px;
  border:1px solid #dfe3e5;
  border-radius:6px;
  background:#fff;
  color:#434a52;
  cursor:pointer}
.s-openpoint .plentry:hover{border-color:#16191c;color:#16191c}
/* Not built, and it says so rather than looking available. */
/* `.plsim` removed with slice 2 — the dashed `Voice note · not built`
   control, the one thing on the screen that could not do anything. */
/* What naming a speaker means, said before the name is typed rather than
   after it is on the record. */
.s-openpoint .psrcnote{flex:1 1 100%;margin:4px 0 0;font-size:var(--meta);color:#666d7a;line-height:1.5}
.s-openpoint .plwhonote{
  flex:1 1 100%;
  margin:0;
  font-size:var(--meta);
  color:#666d7a;
  line-height:1.5}
/* `.pldictate` removed with slice 2. The dictation line returns in
   slice 4 as a hint on focus that NAMES the key — `Win`+`H`, or `fn`
   twice on a Mac. "Use your dictation key" is not an instruction
   anybody can follow without knowing which key that is (§6). */
.s-openpoint .plpaste{
  flex:1 1 100%;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:8px 0 0}
.s-openpoint .plwho,
.s-openpoint .plta{
  flex:1 1 100%;
  font-family:'Inter',sans-serif;
  font-size:var(--body);
  padding:8px 10px;
  border:1px solid #e0e4e6;
  border-radius:6px;
  color:#16191c;
  box-sizing:border-box}
.s-openpoint .plta{resize:vertical;line-height:1.55}

/* Origin, under each field. Quiet by construction: this is metadata
   about how the record was made, not part of what was decided, so it
   takes the same muted ink as every other metadata line and never the
   gold. Placed after the body so it reads as a footnote to the field
   rather than a heading for the next one. */
.s-record .pohja-origin{
  margin:5px 0 0;
  font-size:var(--meta);
  color:#5e6469;
  line-height:1.5}

/* The way out of an empty pane. Outlined, never filled, and grey rather
   than gold: the 11 August audit demoted every back link and navigation
   affordance to grey, and going somewhere else is not one of gold's three
   roles. These are screen-agnostic — emptyPane is called from six
   hydrators across five screen classes — so they carry no .s- prefix, and
   nothing later in the sheet selects .emptyact or .emptyacts. */
.emptyacts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 0}
.emptyact{
  display:inline-flex;
  align-items:center;
  font-size:var(--body);
  font-weight:500;
  line-height:1;
  padding:7px 12px;
  border:1px solid #d5dade;
  border-radius:13px;
  color:#16191c;
  background:#fff;
  text-decoration:none;
  cursor:pointer}
.emptyact:hover{border-color:#16191c}

/* The ladder in the left pane. Sits with the dot, before the title, so
   the eye meets urgency and subject together rather than hunting for a
   mark at the far edge of the row. */
/* CENTRED AGAINST ITS OWN ROW, NOT SAT ON THE BASELINE. Fixed 21 August
   2026, from a live screenshot: the mark rode high against the title
   beside it and looked detached from the row it belongs to.

   THE CAUSE IS THE HEIGHT DIFFERENCE. The ladder is 29px tall — 22px
   wide on a 26x34 viewBox — and it sits beside a 13.5px line of text.
   `vertical-align:-2px` was tuned for a mark roughly the size of the
   text; against one more than twice the line height it does nothing
   useful, and in Home's grid the row is baseline-aligned, which puts
   the two on a line neither of them shares.

   `align-self:center` in both places instead: the row's height is set
   by the mark, so centring the mark against the row centres the title
   against the mark, which is what reads as belonging together. */
.pohja-ladder{
  display:inline-flex;
  align-items:center;
  align-self:center;
  margin:0 6px 0 0;
  color:#666d7a}
.s-home .attnrow .pohja-ladder{align-self:center;padding:0}
.s-home .attnrow .attntext{align-self:center}
.s-home .attnrow .attnwhen{align-self:center}
.pohja-ladder svg{display:block}

/* Two columns, aligned. Ruled 13 August 2026, revised the same
   afternoon after looking at it on screen.

   THE HISTORY, because this rule has now been wrong twice in opposite
   directions and the third version needs to explain why it is neither.

   First it was `flex:1` on the text, which right-aligned the date at
   the far edge of the row. Survivable at 1400px; absurd once the width
   cap came off, with the date several hundred pixels from the thing it
   described.

   Then it was `flex:0 1 auto`, which put the date immediately after the
   title. That fixed the drift and created a worse fault: with four rows
   of different title lengths the dates landed at four different
   positions, so a column that should be scannable in one movement of
   the eye was a ragged edge.

   Both failures come from the same mistake — trying to solve a
   two-dimensional problem one row at a time. A row cannot know how wide
   its neighbours are. So the grid goes on the container and the rows
   become `display:contents`, which is the only way cells in different
   rows can share a column.

   `fit-content(46ch)` is what keeps it from drifting: the title column
   is as wide as the longest title and no wider, capped at a reading
   measure. So the dates align with each other and still sit next to the
   titles, which is what both earlier versions each got half right. */
/* THE THIRD FAULT, and why the track sizes read as they do. Putting the
   grid on the container aligned the dates, and threw the mark 670px to
   the left of the title it belongs to.

   The cause is one word. An `auto` track is stretched to absorb leftover
   space — `justify-content` defaults to `normal`, which behaves as
   `stretch` for auto-sized tracks — so on a wide window the first column
   swallowed everything the other two did not need. `max-content` does
   not stretch, and the trailing `1fr` gives the free space somewhere to
   go that is not between the mark and the title. */
.s-home .attn{
  display:grid;
  /* THREE TRACKS, NOT FOUR. Fixed 13 August 2026.

     Every row emits three cells — the mark, the title, the date — into a
     grid that declared four columns. With `display:contents` on the rows
     there is no row box to stop the flow, so the first row filled
     columns 1-3, the second began at column 4, the third at column 3,
     and the list staircased across the pane. On a narrow shell the
     damage was small; once the pane filled the window it was the mess
     Gerry reported.

     The fourth track was a trailing 1fr added to stop an `auto` first
     column stretching to absorb free space. `justify-content:start` does
     that job without a phantom track for nothing to sit in. */
  grid-template-columns:max-content fit-content(46ch) max-content;
  justify-content:start;
  column-gap:11px;
  align-items:baseline}
.s-home .attnh,
.s-home .attn > p{grid-column:1 / -1}
.s-home .attnrow{display:contents}
/* Padding moves to the cells: a row that is `display:contents` has no
   box of its own to carry it. */
.s-home .attnrow > *{padding:7px 0}
.s-home .attnrow:first-of-type > *{padding-top:0}
.s-home .attnrow:last-of-type > *{padding-bottom:0}
.s-home .attntext{flex:none}
.s-home .attnwhen{margin-top:0}
.s-home .attnwhen::before{content:'\00b7';margin-right:7px;color:#c9ced3}
/* The dot sits with the first line of the title rather than on its
   baseline, which is a couple of pixels low for a 5px circle. */
/* THE MARK IS A CIRCLE IN EVERY ROW. Fixed 21 August 2026 from a live
   screenshot: rows one and four drew round, rows two and three drew as
   stretched ovals.

   THE CAUSE IS THE GRID, NOT THE MARK. `.s-home .attn` sets
   `align-items:baseline`, and a 5px empty span has no baseline, so the
   grid stretches it to the row box — and the row boxes differ, because
   the titles wrap differently. Three rules were arguing over one
   element with no explicit cross-axis size between them, so which won
   varied row by row.

   WHY IT ONLY SURFACED NOW. The ladder was masking it. In this grid the
   ladder carried `align-self:center` and the plain mark appeared only
   on recorded decisions, which are the rows that happened to draw
   correctly. Taking the ladder out of Recently exposed a fault that had
   been latent since this grid was built.

   Size and alignment stated together in one rule so there is nothing
   left to argue about, and `center` rather than `start` because the
   mark belongs to the title beside it and the title sets the height. */
.s-home .attndot{width:5px;height:5px;min-height:5px;max-height:5px;
  border-radius:50%;align-self:center;margin:0;padding:0}
/* The ladder replaces the dot on an open point, so it takes the dot's
   place in the first column rather than adding a fourth. */
/* The ladder no longer appears in this list — ruled 21 August 2026. Its
   rule here is deleted rather than left behind: it matched nothing, and
   it was the only thing holding this column's alignment steady, which
   is precisely how the mark's own stretching stayed hidden. */

/* The report row: no tile, and the status tags aligned.

   Two faults on one row, both visible the moment the width cap came off.

   The tile. Every mark in the rail is a bare stroke on nothing, and
   these three sat in filled grey rounded squares — two treatments on one
   screen, which is exactly what a symbol language exists to prevent. The
   rail proves the marks read without a tile.

   The tag. Same history as the dates above, same fix: the grid goes on
   the container. `.rlist` is created by hydrateHome, because the three
   rows are loose siblings in the prototype and one is wrapped in an
   anchor — no CSS rule can align cells that are not in one grid. */
.s-home .rico{
  background:none;
  width:auto;
  height:auto;
  border-radius:0;
  color:#666d7a}
/* THREE TRACKS, NOT FOUR. Fixed 13 August 2026, evening.

   The same fault as .attn, in the same file, from the same cause: each
   row emits three cells — icon, body, tag — into a grid declaring four
   columns, and `display:contents` leaves no row box to stop the flow. So
   the second row began in column four and the list staircased.

   The trailing 1fr was there to stop an auto track stretching.
   `justify-content:start` does that without a track for nothing to sit
   in.

   Note for anyone changing this: a `display:contents` element has no box,
   so max-width, padding and borders on .rrow do nothing at all. An
   earlier attempt to stop the tag flying to the far edge by capping the
   row was inert for exactly that reason. The measure goes on .rlist. */
/* THE SECOND TRACK IS FIXED. Changed 14 August 2026.

   It was `fit-content(52ch)`, and two things were wrong with that.

   `ch` resolves against the element's own font size — FORMATTING-MASTER
   §3. Every measure in this file is in pixels for that reason, and this
   one was the last survivor. 52ch of Inter at the inherited 13.5px is
   about 385px, so 384px is the same width said in a unit that cannot
   drift when a font size beneath it changes.

   And `fit-content()` sizes to the longest content in the column, which
   means the tag column's left edge moves when the content does.
   hydrateHome rewrites the last row's .rsub with a live decision count,
   so the position of all three tags depended on how many decisions the
   organisation happened to hold. A fixed track puts them on one vertical
   whatever the rows say. */
.s-home .rlist{
  display:grid;
  grid-template-columns:max-content 384px max-content;
  justify-content:start;
  column-gap:14px;
  align-items:baseline;
  max-width:900px}
.s-home .rrow{display:contents}
.s-home .rrow > *{padding:12px 0}
.s-home .rrow:last-child > *{padding-bottom:0}
/* The rule under each row spans the whole grid, which a `display:contents`
   row cannot draw for itself. */
.s-home .rlist .rrow:not(:last-child) > *{border-bottom:1px solid #f4f6f6}
.s-home .rbody{flex:none;min-width:0}
.s-home .rtag{align-self:baseline}
.s-home .rtag::before{content:'\00b7';margin-right:9px;color:#c9ced3;font-weight:400}
.s-home .rtag.ready,
.s-home .rtag.auto{background:none;padding:0;height:auto;line-height:inherit}

/* =====================================================================
   THE CONTRAST LAYER. 14 August 2026.

   Every value here was computed, not chosen. WCAG 2.2 AA asks 4.5:1 of
   text under 24px and 3:1 of the boundary of any control a person has to
   find (1.4.11). Ratios on white:

     BEFORE                          AFTER
     #8a9096  3.23:1  labels         #666d7a  4.52:1   (replaced in place)
     #a0a8b0  2.41:1  placeholders   #646e79  4.50:1   (replaced in place)
     #e8eaec  1.21:1  .btn.sec       #8c96a1  3.00:1
     #e0e4e6  1.28:1  fields, opts   #8c96a1  3.00:1
     #dfe3e5  1.29:1  most controls  #8c96a1  3.00:1
     #cfd5d9  1.48:1  the drop zone  #8c96a1  3.00:1
     white on #b8883a  3.17:1        white on #976f2f  4.53:1

   Each replacement keeps the original hue and saturation and is walked
   down in lightness only, so the family is unchanged.

   THE GOLD RULE STAYS #b8883a. As a graphical object a 2-3px attention
   rule needs 3:1 and it has 3.17:1. The wordmark is untouched. What
   changes is gold carrying a white label at 13.5px, which needs 4.5:1
   and had 3.17:1 — the single most important control on the screen had
   the least legible text on it.

   WHY THIS IS APPENDED RATHER THAN EDITED IN PLACE. These values are
   spread across nine screen-scoped prefixes; editing each is forty
   chances to miss one. FORMATTING-MASTER warns that appending is how
   this file drifts, and the mitigation is the same one it prescribes:
   test-shell resolves the winning value the way a browser would and
   asserts the ratio, so a later block that undoes this fails the suite.

   NOT IN THIS LAYER. Hover borders keep #c9ced3: 1.4.11 governs the
   resting state, and darkening every hover would add ink no standard
   asks for. The chip rationalisation is ruled but waits for the open
   point build - FORMATTING-MASTER's order of work.
   ===================================================================== */
/* Same :is() form, same reason. The primary carries a white label at
   --body, so it is text and needs 4.5:1 — not the 3:1 a graphical object
   needs. It had 3.17:1: the most important control on the screen with
   the least legible text on it. */
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .btn{background:#976f2f;border-color:#976f2f}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .btn.sec{background:#fff;border-color:#8c96a1;color:#16191c}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .btn.sec.quiet{border-color:#8c96a1}

/* Screen-scoped with :is(), for two reasons.

   Specificity: the rules being corrected are screen-scoped, and a bare
   class loses to them. `:is()` takes the specificity of its strongest
   argument, so `:is(.s-home,…) .fieldbox` matches `.s-openpoint
   .fieldbox` exactly and wins on source order.

   Resolvability: a long comma list puts the class in the middle of the
   selector, and test-shell only counts a rule where the class is the
   last selector before the brace — deliberately, so `.secbody` cannot
   be read as `body`. The first draft of this block was invisible to the
   suite for that reason and reported as failing. One class per rule is
   what the resolver can see, and it is easier to read besides. */
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .fieldbox{border-color:#8c96a1}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .authopt{border-color:#8c96a1}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .finput{border-color:#8c96a1}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .tinput{border-color:#8c96a1}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .roleopt{border-color:#8c96a1}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .pseg{border-color:#8c96a1}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .addbtn{border-color:#8c96a1}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .askfield{border-color:#8c96a1}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .backbtn{border-color:#8c96a1}
.s-firstsession .tag{border-color:#8c96a1}
.s-firstsession .tagadd{border-color:#8c96a1}
.s-firstsession .wbtn{border-color:#8c96a1}
.s-moments-board .chk{border-color:#8c96a1}
.s-upload .drop{border-color:#8c96a1}

/* The .W prefix beats a two-class selector, so Compare's own copies of
   .btn need naming. Same values, higher specificity. */
.s-compare .W .btn{background:#976f2f;border-color:#976f2f}
.s-compare .W .btn.sec{background:#fff;border-color:#8c96a1;color:#16191c}
/* =====================================================================
   THE OPEN POINT SCREEN — SLICE 1, THE REVEAL SKELETON. 14 August 2026.

   OPEN-POINT-SCREEN.md §2, §3, §7 and §12.7; FORMATTING-MASTER §7 and
   §11. A field is drawn when the one before it has content, and nothing
   is ever removed once drawn.

   WHY THE SECTIONS ARE HIDDEN HERE AND NOT IN SCRIPT. hydrateOpenPoint
   is async — it awaits departments, decisions and deferrals before it
   touches the markup. Six sections painting and then collapsing to one
   is worse than the wall this replaces, because the person has already
   read the mass and estimated the duration by then. So the prototype's
   six start hidden and hydration adds `op-shown`.

   NOTE THE CHILD COMBINATOR, AND DO NOT REMOVE IT. `sec` is also the
   secondary-button class in this file — `Save and come back` is
   `btn sec wide`. A descendant selector here hides both buttons in the
   action block. The sections are direct children of the middle pane;
   the buttons are not.
   ===================================================================== */
:is(.s-openpoint) .pane.mid > .sec{display:none}
:is(.s-openpoint) .pane.mid > .sec.op-shown{display:block}

/* =====================================================================
   ITEM 6a — THE ASK POHJA ANSWER. Built 17 August 2026.
   `runAsk`, the only client-side generator of this markup, was deleted
   19 August — it had zero callers, see MANIFEST.md. This sheet is kept
   because `POST /ask` still exists and still works, and a future client
   surface is the reason it was kept rather than deleted alongside the
   function. Nothing in the client currently produces `.askans` markup.

   The screen predated the type scale, the radius pass and the measure,
   and was drawn entirely in inline styles before this pass moved it
   onto the same tokens as every other pane. Scoped with :is() across
   all nine screens because the deleted function rendered into whichever
   screen was current: `.pane.main` on home and `.pane.mid` everywhere
   else — kept here in case a future surface reuses the same scoping.

   The four inline styles it carried used #8a9096, which is 3.23:1 and
   has been asserted dead since the WCAG pass. They survived because
   that assertion reads the stylesheet and these were built into a
   template string — the same blind spot that kept the greys in
   positionMarkup. Moving the screen into the sheet is what fixed them.
   ===================================================================== */
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .askans{padding:26px;max-width:568px}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .askq{font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;color:#666d7a;margin:0 0 10px}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .askline{font-size:var(--lead);line-height:1.6;margin:0 0 10px;color:#16191c}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .asknote{font-size:var(--body);color:#5e6469;margin:0;line-height:1.55}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .askrests{font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;color:#666d7a;margin:22px 0 8px}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .askrec{font-size:var(--body);margin:0 0 8px}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .askback{font-size:var(--body);margin:20px 0 0}

/* =====================================================================
   §12.10 — MARK THE EXCEPTION, NOT THE NORM. Ruled by Gerry, 17 August.

   Four classes currently chip BOTH sides of a distinction: every
   person's function and the one without a flag; every `Agrees` as well
   as every `Differs`; every `Written during the decision` as well as
   the ones written afterwards. Chipping the ordinary case spends ink
   telling the reader that nothing is wrong.

   `.mprov` was the one deliberately left open, on the ground that a
   board pack where every moment reads `Written during the decision` is
   making a claim about the record's quality and that may be worth the
   ink. Ruled with the other three: the provenance figure in the right
   pane already states the ratio — `16 captured at the time · 3 written
   afterwards` — and repeating it on every row is the same doubling
   struck from the rejected-option placeholder this morning.

   AND `.mprov` HAD IT BACKWARDS. The norm carried a GREEN fill and the
   exception a grey one, so the loudest mark on the row was the one
   saying nothing had gone wrong.

   THE EXCEPTION IS ALWAYS A MODIFIER CLASS, never a string: `.rec`,
   `.a`, `.none`. No rule below reads a label, which is the fault the
   whole of this morning went on.

   THE QUIET GREY IS #666d7a, NOT #8a9096. The obvious grey for text
   that has stopped being a chip fails 4.5:1 at 3.23, and is asserted
   dead in test-shell. Caught by that assertion on the first run of this
   block, which is what it is for.

   NOTE WHAT IS NOT SET. `border-radius` is deliberately left alone. A
   radius on an element with no ground and no border draws nothing, and
   cancelling it would put a new value into the closed set asserted in
   test-shell for no visible gain.
   ===================================================================== */

/* The norm: written during the decision. Plain text. */
.s-moments .mprov{background:none;padding:0;height:auto;line-height:1.4;
  font-weight:400;color:#666d7a}
/* The exception: written afterwards. Keeps the chip. */
.s-moments .mprov.rec{background:#f4f6f7;padding:0 8px;height:18px;
  line-height:18px;font-weight:500;color:#434a52}
.s-moments-board .mprov{background:none;padding:0;height:auto;line-height:1.4;
  font-weight:400;color:#666d7a}
.s-moments-board .mprov.rec{background:#f4f6f7;padding:0 8px;height:18px;
  line-height:18px;font-weight:500;color:#434a52}

/* The compare table, §12.10's worst instance: twelve pills where about
   four carry information. `Agrees` is the norm and becomes text;
   `Differs` and `Unverified` are the exceptions and keep their chips. */
.s-compare .W .pill.a{background:none;padding:0;font-weight:400;color:#666d7a}

/* A function on every row is the norm, so it is never a chip. There is
   no exception here — every person has one. */
.s-firstsession .pdept{border:0;background:none;padding:0}

/* Having a leader flag is the norm. Not having one is the exception the
   Memory Owner is accountable for, and until now the two were drawn
   IDENTICALLY — `.pflag.none` set the same background and the same
   colour as `.pflag`, so the flag that needed attention looked exactly
   like the one that did not. */
.s-firstsession .pflag{background:none;padding:0;height:auto;line-height:1.4;
  font-weight:400;color:#666d7a}
.s-firstsession .pflag.none{background:#fdeeed;padding:0 10px;height:22px;
  line-height:22px;font-weight:500;color:#b03030}

/* =====================================================================
   THE MEASURE IS A PROPERTY OF PROSE, NOT OF THE APPLICATION.
   Ruled by Gerry, 18 August 2026, closing the wide-window question open
   since 13 August.

   Flush-left was ruled on 13 August and "cap and centre" has sat as a
   recommendation ever since. Both were arguing about the wrong unit.
   THE RULING SPLITS BY CONTENT: prose is capped at the measure and
   centred in its track; a table takes the width it is given.

   WHY. A 1,100px line of body copy is unreadable — that is what the
   measure exists to prevent. A table is not prose; it is a comparison,
   and comparison wants width. Capping a table at 568px squeezes six
   columns into a stub, which is exactly what happened here.

   AND THIS WAS A LIVE FAULT, not a preference. The memory table borrows
   the record screen's shell — `ask: { screen: 'record' }` — so
   `.s-record .W .pane.mid > *` capped it at 568px from the moment it
   shipped on 17 August. Nothing caught it: jsdom does not lay out, and
   every assertion about that table reads which words are present rather
   than how wide they are.

   WHAT CENTRING MEANS HERE. The column is centred in its track; the
   text inside it stays left-aligned. Gerry's screenshot showed 568px of
   prose against the left edge of an 1,100px track with the whole excess
   piled on the right, which reads as an unfinished screen rather than a
   deliberate margin.
   ===================================================================== */
.s-record .W .pane.mid > *{margin-left:auto;margin-right:auto}
.s-openpoint .W .pane.mid > *{margin-left:auto;margin-right:auto}
.s-reconsider .W .pane.mid > *{margin-left:auto;margin-right:auto}

/* THE TABLE IS EXEMPT, and named so that removing the exemption means
   overturning a ruling rather than tidying a rule. Every direct child of
   the memory table's pane takes the window; the opened row inside it
   keeps the measure, because that IS prose. */
.s-record .W .pane.mid > .memhead{max-width:none}
.s-record .W .pane.mid > .memtable{max-width:none}
.s-record .W .pane.mid > .memsec{max-width:none}

/* =====================================================================
   ASK POHJA — THE MEMORY TABLE. Built 17 August 2026.

   The table takes the window rather than a measure. Flush left and
   uncapped: prose wants the measure, a table wants width, and centring
   it inside a cap spent the space the columns needed on white.

   Three columns, not six. Six shared the width and left about 120px a
   cell, which is a stub rather than a line. The other three arrive by
   opening the row in place — the comparison down a column stays intact
   and the detail lands where the eye already is.

   Vertically centred, because a row is read ACROSS. Top-alignment left
   a one-line cell floating at the head of a three-line neighbour.
   ===================================================================== */
:is(.s-record) .memhead{margin:0 0 22px}
:is(.s-record) .memsubj{font-size:var(--title);font-weight:500;letter-spacing:-.014em;color:#16191c;margin:0 0 6px}
:is(.s-record) .memcount{font-size:var(--body);color:#434a52;margin:0 0 3px}
:is(.s-record) .memfound{font-size:var(--meta);color:#666d7a;margin:0;line-height:1.55}
:is(.s-record) .memsec{margin:30px 0 0}
:is(.s-record) .memlab{font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;color:#666d7a;margin:0 0 5px}
:is(.s-record) .memnote{font-size:var(--meta);color:#666d7a;margin:0 0 12px;line-height:1.55}
:is(.s-record) .memtable{width:100%;border-collapse:collapse;table-layout:fixed}
:is(.s-record) .memtable th{font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;color:#666d7a;font-weight:400;text-align:left;padding:0 14px 8px 0;border-bottom:1px solid #e8eaec;white-space:nowrap}
:is(.s-record) .memtable td{font-size:var(--body);color:#2e3439;padding:15px 14px 15px 0;vertical-align:middle;border-bottom:1px solid #f4f6f6;line-height:1.5}
:is(.s-record) .memtable tr.memsup td{color:#666d7a}
:is(.s-record) .memw-ref{width:80px}
:is(.s-record) .memw-who{width:158px}
:is(.s-record) .memw-when{width:88px}
:is(.s-record) .memstack{line-height:1.7}
:is(.s-record) .memnone{color:#dfe3e5}
:is(.s-record) .memref{font-size:var(--meta);color:#666d7a;white-space:nowrap;display:inline-block}
/* The link and the expander, split 25 August 2026. `a.memref` is a real
   anchor — keyboard, middle-click and copy-link all work on it, which
   is the 24 August ruling this table predated. The chevron is a
   `<button>` beside it, drawn from `::after` so it carries no text a
   screen reader would read twice. */
:is(.s-record) a.memref{text-decoration:none}
:is(.s-record) a.memref:hover{color:#16191c;text-decoration:underline}
:is(.s-record) a.memref:focus-visible{outline:2px solid #b8883a;outline-offset:2px;border-radius:3px}
:is(.s-record) button.memopen{border:0;background:none;padding:0 0 0 3px;cursor:pointer;
  color:#666d7a;font-size:var(--meta);line-height:1}
:is(.s-record) button.memopen::after{content:'\203A';display:inline-block;transition:transform .12s}
:is(.s-record) button.memopen.on::after{transform:rotate(90deg)}
:is(.s-record) button.memopen:hover{color:#16191c}
:is(.s-record) button.memopen:focus-visible{outline:2px solid #b8883a;outline-offset:2px;border-radius:3px}
:is(.s-record) .memopen{cursor:pointer}
:is(.s-record) .memopen:after{content:' \203a';color:#b8883a;display:inline-block}
:is(.s-record) .memopen.on:after{transform:rotate(90deg)}
:is(.s-record) .memmark{font-size:var(--meta);display:block;margin-top:3px}
:is(.s-record) .memsupmark{color:#666d7a}
:is(.s-record) .memlive{color:#3d6b52;font-weight:500}
/* THE LINEAGE POINTER. A third line in the record cell, quieter than
   the mark above it because it names another record rather than the
   state of this one. #666d7a is 5.21:1 and is already the quiet mono
   grey elsewhere; the closed variant is the same value, because a
   record you cannot open is not a lesser fact and must not be drawn
   as one. Only the affordance differs. */
:is(.s-record) .memlin{font-size:var(--meta);display:block;margin-top:2px;color:#666d7a}
:is(.s-record) .memlinshut{cursor:default}
:is(.s-record) .memwhen{font-size:var(--meta);color:#666d7a;white-space:nowrap}
:is(.s-record) .memmore{display:none}
:is(.s-record) .memmore.on{display:table-row}
:is(.s-record) .memmore td{border-bottom:1px solid #e8eaec;padding:0 0 22px}
:is(.s-record) .membox{max-width:568px;padding:4px 0 0}
:is(.s-record) .memfield{margin:0 0 16px}
:is(.s-record) .memk{font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;color:#666d7a;margin:0 0 4px}
:is(.s-record) .memv{font-size:var(--body);color:#2e3439;line-height:1.6;margin:0 0 7px}
/* Same disclosure as `.condwatch`, inside a table cell. Quieter than the
   condition it sits under, because the condition is what the
   organisation wrote and this is what Pohja can do about it. */
:is(.s-record) .memwatch{font-size:var(--meta);color:#666d7a}
:is(.s-record) .memwatch[data-unwatched]{font-style:italic}
:is(.s-record) .memnone2{font-size:var(--body);color:#a8b0b7;line-height:1.6;margin:0}

/* =====================================================================
   ITEM 4, STAGE TWO — `.act`. Ruled by Gerry, 17 August 2026.

   YOU CAN PRESS THIS. Outlined on white. `.act.primary` is filled gold
   — the one action that completes the view. `.act.quiet` is text only:
   available, never competing.

   THE THREE ALREADY EXISTED, spread across seven screens as `.btn`,
   `.btn.sec` and `.btn.sec.quiet`. Collapsing them is naming what the
   product already did rather than changing it.

   WHAT DOES NOT GET `.act`, AND WHY IT MATTERS MORE THAN THE COLLAPSE.
   `.act` means the control works. Ruled by Gerry, 17 August 2026: wire
   a control before dressing it, so a shape never promises what it
   cannot do — the `/` badge fault again, on record because Gerry tried
   to press it.

   THE SIX NAMED THAT DAY — `.roleopt`, `.pseg`, `.tag`, `.tagadd`,
   `.wbtn`, `.chk` — WERE RE-CHECKED DIRECTLY ON 19 AUGUST, NOT
   TRUSTED FROM THIS COMMENT. Four had already been overtaken by real
   work since this was written: `.chk` and `.roleopt` both carry real
   handlers now, confirmed by actually clicking them in a live render,
   not by reading the surrounding code and assuming; `.tag` and
   `.tagadd` sit in static markup the first-session hydrator has since
   rebuilt from scratch and never renders at all, their intent — adding
   a function, importing people — fulfilled through entirely different,
   already-working controls elsewhere. `.wbtn`'s own intent, vCard
   import, now lives on the People screen, real and wired.
   `.pseg` was the one genuinely still open, and is not any longer —
   see hydrateMoments and momentsInPeriod. Department removal, the
   one loose thread this re-check found — no route exists to delete a
   department at all — is named here rather than built, since it has
   real downstream consequences (people, signals, positions) that
   deserve their own decision, not a quiet fix bundled into this pass.

   ESTABLISHED BY READING THE HANDLERS, not by pattern-matching: only
   `.authopt` (stamps data-ground at wire time) and `.addbtn` (bound to
   addRejected) were live on 17 August. That is no longer the current
   state — see above — and this line is kept as the historical claim
   it was, not corrected to read as if it always matched today.

   HEIGHT IS NOT SET HERE. §6 owns it — 24px for an action, 36px for a
   button — and the compare and reconsider screens are exempt as sized
   by padding. Same separation as `.fact`.
   ===================================================================== */
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .act{font-family:'Inter',sans-serif;font-size:var(--body);font-weight:500;border-radius:13px;border:1px solid #8c96a1;background:#fff;color:#16191c;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .act.primary{background:#976f2f;border-color:#976f2f;color:#fff}
/* Text only. The border came off here rather than being lightened:
   §12.9's reasoning is that a shape which is nearly absent is harder to
   read than one that is absent. */
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .act.quiet{border-color:transparent;background:none;color:#434a52;font-weight:400}
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .act[disabled]{opacity:.45;cursor:default}

/* =====================================================================
   ITEM 4, STAGE ONE — `.fact`. Ruled by Gerry, 17 August 2026.

   A FACT ABOUT THE RECORD, NEVER PRESSABLE. Filled, no border. Fill
   carries the meaning — the three-class version of this ruling asked
   people to read the ABSENCE of a shape, and four classes exist so that
   nobody has to.

   THE CLASS THAT SAYS WHAT IT IS STAYS. `.posval` is still `.posval`;
   it gains `.fact`. A rename would make one selector match a position
   value, a provenance mark, a compare pill and a leader flag at once,
   and nothing could tell them apart — which is the fault the whole of
   17 August went into removing, arriving from the other direction.

   HEIGHT IS NOT SET HERE. §6 owns it and its rules stay where they are.
   Two rulings in one selector means the next person to change a height
   cannot find where it lives.

   PADDING IS 9px, the value four of the six already carried. 8, 10 and
   11 were the others, and none of them was a decision — they are what a
   chip drawn at a different time happened to get.
   ===================================================================== */
:is(.s-home,.s-openpoint,.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-upload,.s-firstsession) .fact{font-size:var(--meta);font-weight:500;padding:0 9px;border-radius:13px;display:inline-flex;align-items:center;white-space:nowrap}
/* The compare screen is sized by padding throughout and is exempt from
   §6 for that reason; the same exemption applies to the padding here.
   Written with a plain screen prefix rather than :is() — one screen
   needs no set, and :is() would make the rule unresolvable to a
   selector lookup for no gain. */
.s-compare .W .pill.fact{padding:2px 7px}

/* =====================================================================
   §6 — ONE HEIGHT. Ruled by Gerry, 17 August 2026: THREE values, not
   one, each named with the reason it exists and asserted as a closed
   set. The radius pass is the model — "one radius for an action" ended
   as FOUR ruled shapes, because the family needed naming rather than
   flattening, and the same is true here.

   Ten values were in the sheet: 18, 19, 20, 22, 24, 28, 30, 32, 34, 36,
   38. FORMATTING-MASTER §6: "one height always — a varying height is
   what makes a row look broken."

   ── 20px, A FACT ────────────────────────────────────────────────────
   Never pressable, so WCAG 2.2 SC 2.5.8 (Target Size, Minimum) does not
   apply to it at any size. Set in --meta at 11.5px, so 20px leaves
   8.5px of air — between the 18 and 22 already in use. Gerry had
   already corrected .condkind to 20px on 16 August, on this reasoning,
   after seeing NARRATIVE cramped on the record screen.

   ── 24px, AN ACTION ─────────────────────────────────────────────────
   The criterion's own number. 2.5.8 asks 24x24 CSS px and offers a
   SPACING exception for undersized targets — a 24px circle centred on
   each must not intersect its neighbour's. The gaps here are 4 to 10px,
   so 20px would have passed everywhere except .chiprow at 4px, which
   lands on exactly 24 centre-to-centre: tangent rather than clear.
   24px needs no exception argued at all, and — the deciding reason —
   it can be asserted from the declared value, whereas a spacing
   argument depends on painted positions and jsdom does not lay out.
   A rule that can be tested survives; one that must be re-derived does
   not.

   ── 36px, A BUTTON ──────────────────────────────────────────────────
   .btn declared 36 AND 38 for itself, which is the one class broken by
   its own rule.

   ── THE EXEMPTION, AND IT IS A RULING NOT AN OVERSIGHT ──────────────
   THE COMPARE SCREEN IS SIZED BY PADDING, NOT BY HEIGHT, THROUGHOUT.
   Its pills are padding:2px 7px, its buttons 7px 14px, and the quieter
   .cacts button 5px 10px — two deliberately different button sizes
   against two different type sizes, neither declaring a height. Laying
   a height over that does not tidy the screen, it redesigns it: the
   quiet button would gain 16px and stop being quiet.

   Found by Gerry on 17 August, looking at the mock. The same applies to
   .s-reconsider .btn at 8px 15px. Both are exempt, and the exemption is
   written here so that the next person to flatten them has to overturn
   a ruling rather than discover a gap.
   ===================================================================== */

/* 20px — a fact. One class per rule; see TEST-STATE.txt on comma lists.
   .rtag is absent deliberately: .rtag.ready and .rtag.auto are BOTH
   already height:auto, so it never draws a chip and has no height to
   rule. Checked rather than assumed. */
.s-openpoint .authpill{height:20px}
.s-record .authpill{height:20px}
.s-upload .authpill{height:20px}
.s-openpoint .posval{height:20px}
.s-record .posval{height:20px}
.s-upload .posval{height:20px}
.s-moments .mstate{height:20px}
.s-moments-board .mstate{height:20px}
.s-moments .mprov.rec{height:20px}
.s-moments-board .mprov.rec{height:20px}
.s-firstsession .pflag.none{height:20px}

/* 24px — an action. */
.s-openpoint .authopt{height:24px}
.s-record .authopt{height:24px}
.s-upload .authopt{height:24px}
.s-openpoint .addbtn{height:24px}
.s-upload .addbtn{height:24px}
.s-moments .pseg{height:24px}
.s-moments-board .pseg{height:24px}
.s-firstsession .tag{height:24px}
.s-firstsession .tagadd{height:24px}
.s-firstsession .wbtn{height:24px}

/* 36px — a button, where a button declares a height at all. */
.s-openpoint .btn{height:36px}
.s-openpoint .btn.wide{height:36px}
.s-record .btn{height:36px}
.s-moments .btn{height:36px}
.s-moments-board .btn{height:36px}
.s-upload .btn{height:36px}
.s-upload .btn.wide{height:36px}
.s-firstsession .btn{height:36px}

/* =====================================================================
   THE COMPARE COLLISION — a live regression from §12.10, fixed here.

   Found by Gerry, 17 August, on the deployed screen: `60 daysAgrees`
   and `Registered officeAgrees`, the value and its label touching.

   HOW IT HAPPENED, because the shape of it matters more than the fix.
   §12.10 stripped `Agrees` of its fill, correctly. It stripped the
   padding with it — and the padding was the only thing separating the
   two spans. `.cell` is overridden to display:block further down this
   file, so val and pill sit inline, and the markup carries NO
   whitespace between the closing and opening tags. The chip's 7px of
   left padding was doing the work of a word space.

   The assertion written for §12.10 checked that the background resolved
   to `none`. It never asked what sat beside it. A property was tested;
   a consequence was not — the third time today that a check agreed with
   a change it should have caught.

   7px, deliberately: exactly the padding that was removed, so the words
   sit where they sat when Gerry last approved this screen.
   ===================================================================== */
.s-compare .W .pill.a{margin-left:7px}

/* The context of an open point, above the question rather than instead
   of it. Set at the lede's measure, quieter than the question, because
   it is a fact about the point and not the screen asking something. */
:is(.s-openpoint) .opctx{font-size:var(--body);color:#5e6469;line-height:1.6;
  margin:0 0 14px;max-width:568px}

/* =====================================================================
   §12.5 — Positions, above the fields.

   One line and a chip, on the measure, sitting between the instruction
   and the first field. It is not a form field and must not read as one,
   so it carries no label gutter and no box — the rule elsewhere in this
   file that a fact is text rather than furniture.
   ===================================================================== */
:is(.s-openpoint) .pane.mid > .sec.posline{
  display:block;margin:0 0 22px;padding:0;border:0;max-width:568px}
:is(.s-openpoint) .posline .poslinerow{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
:is(.s-openpoint) .posline .poslinetext{
  margin:0;font-size:var(--body);color:#434a52}
:is(.s-openpoint) .posline .posdetail{
  margin:10px 0 0;padding-left:11px;border-left:1px solid #e8eaec}

/* §12.7 — there is no Required pill, on any field, on any screen. The
   spans are removed from the DOM at hydration; this is the brace to
   that belt, so one cannot paint in the moment before the script runs.
   Ruled 14 August, pulled into slice 1 because progressive reveal makes
   the pill more conspicuous rather than less: one pill on one field on
   an otherwise empty page, wearing the outline that means "you can
   press this" on the one screen state where it distinguishes nothing
   from nothing. */
/* THE `Required` PILL RETURNS, 30 August 2026. Gerry ruled option B
   from `MOCK-raise-gate.html`, STATE.md §4 row 16.

   IT HAD NO STYLING LEFT — only this `display:none`, across nine
   screens. Its colours and shape went when it did on 11 August, so
   this is a REBUILD rather than an un-hiding, and the mock said so
   before the ruling was made.

   THE WARM TINT, NOT THE GOLD MARK. `#f9f2e6` and `#8a6a2c` are the
   warm family at hue 36–40 that `SPEC-palette-audit.md` §1 identifies
   as the accent — the same family, two steps quieter, so the pill
   reads as belonging without competing with the mark itself. Both are
   already in the palette; no new colour is introduced, which matters
   while §4 row 18's freeze is unbuilt.

   IT STAYS HIDDEN ON THE SEVEN SCREENS THAT NEVER CAPTURE. The pill
   answers *what must I fill in before I can record*, and a screen with
   nothing to fill in has no such question. Only `.s-openpoint` and
   `.s-upload` show it. */
:is(.s-record,.s-reconsider,.s-moments,.s-moments-board,.s-compare,.s-firstsession,.s-home) .reqd{display:none}
/* `var(--meta)`, NOT 9.5px. The mock used a literal and `test-shell`
   refused it on arrival: *no stylesheet rule sets a literal font size*,
   with eight named wordmark exemptions and no others. That assertion is
   why the type scale has not drifted in seventeen days, and the pill
   does not get to be the ninth exception — the four sizes plus mono
   are the whole scale, and a chip is small because of its padding and
   its letter-spacing rather than because of a size nobody else uses.

   SECOND VALUE COPIED OUT OF THE MOCK AND REFUSED BY THE PRODUCT, after
   the two greys above. A mock is drawn to be looked at and nothing
   checks it; the product is checked. Both faults were mine and both
   were caught the moment they crossed. */
:is(.s-openpoint,.s-upload) .reqd{display:inline-block;font-size:var(--meta);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:#8a6a2c;background:#f9f2e6;
  border-radius:3px;padding:2px 5px;line-height:1;margin-left:7px;vertical-align:middle}
/* THE CHECKLIST IN THE RIGHT PANE, built with option B. */
.s-openpoint .check{margin:8px 0 0;padding:0;list-style:none}
.s-openpoint .check li{font-size:var(--meta);color:#666d7a;margin:0 0 3px;
  display:flex;gap:6px;align-items:baseline}
/* THESE TWO GREYS CAME FROM MY OWN MOCK AND FAILED CONTRAST. Caught by
   `test-shell` the moment they reached the product: #b0b7bd at 2.03:1
   and #8c959d at 3.04:1 against a 4.5:1 rule, and #b0b7bd falls to
   1.87:1 on a hover state.

   THE MOCK WAS WRONG AND THE SUITE WAS RIGHT. `MOCK-raise-gate.html`
   is drawn to be looked at and nothing checks its colours; the product
   has computed the contrast of every text colour in the stylesheet
   since 22 August. Copying a value out of a mock is how an unchecked
   file's fault becomes a checked file's fault, and the only reason it
   did not ship is that the assertion existed first.

   BOTH NOW USE COLOURS ALREADY IN THE PALETTE: the dot takes the same
   quiet grey as the list text, and a completed item takes the mid ink.
   No new value is introduced, which matters while row 18's freeze is
   unbuilt. */
.s-openpoint .check .m{color:#666d7a}
.s-openpoint .check li.done{color:#5e6469}
.s-openpoint .check li.done .m{color:#3d6b52}

/* The instruction. Four states, and never empty (§3): at the one moment
   a person is most likely to wonder whether they are finished, the
   screen must not stop speaking. `--lead` at 16px, because this is what
   the person reads. */
:is(.s-openpoint) .oplede{margin:0 0 22px;max-width:568px}
:is(.s-openpoint) .oplede .l1{display:block;font-size:var(--lead);color:#16191c;line-height:1.45}
:is(.s-openpoint) .oplede .l2{display:block;font-size:var(--body);color:#666d7a;line-height:1.5;margin-top:4px}
/* =====================================================================
   SLICE 2 — THE FOUR CHIPS. OPEN-POINT-SCREEN.md §4.

   The candidates exist to make the record faster and they arrived as
   more rows of permanent prose, which is the worst offender in the
   whole screen: a thing that costs visible mass in order to save
   keystrokes, for an audience that reads visible mass as duration.

   So they go behind four chips, one per source, and nothing opens until
   one is clicked. The four are constant — a source with nothing behind
   it is greyed with a zero rather than removed, so the row does not
   reflow as things are placed and the person learns one shape rather
   than a different one per field. A greyed chip also says what Pohja
   has not got, which a missing chip does not.

   THE ROW ITSELF WAITS. Until at least one chip has something there is
   no row at all: four greyed zeros under six fields announced what
   Pohja lacks twenty-four times.

   One height and one radius, per §12.9. The rest of that ruling is
   slice 4 and is not rolled out here.
   ===================================================================== */
:is(.s-openpoint) .pchips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;max-width:568px}
:is(.s-openpoint) .pchip{display:inline-flex;align-items:center;gap:7px;height:28px;
  padding:0 12px;border:1px solid #8c96a1;border-radius:13px;background:#fff;
  font-family:'Inter',sans-serif;font-size:var(--meta);color:#434a52;cursor:pointer}
:is(.s-openpoint) .pchip:hover:not(:disabled){border-color:#16191c;color:#16191c}
:is(.s-openpoint) .pchip.on{background:#eceef0;border-color:#16191c;color:#16191c;font-weight:500}
:is(.s-openpoint) .pchip:disabled{border-color:#dfe3e5;color:#8c96a1;cursor:default}
:is(.s-openpoint) .pchip .n{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a}
:is(.s-openpoint) .pchip.on .n{color:#16191c}
/* The way in. With no transcript the Spoken chip reads `add` rather than
   a greyed zero, and sits where the person is already looking at the
   moment they notice Pohja has nothing spoken to offer them. Three
   labels for a standing control failed before this one. */
:is(.s-openpoint) .pchip.wayin{border-color:#b8883a;color:#8a6420}
:is(.s-openpoint) .pchip.wayin .n{color:#8a6420}
/* The list opens INLINE, beneath the chips, never in a floating window.
   A window is a mode: it covers the field being written into and has to
   be dismissed as well as opened. */
:is(.s-openpoint) .pcandopen{margin:10px 0 0;max-width:568px}

/* =====================================================================
   THE PRECEDENT PANE. 16 August 2026.

   Two rules, both confirmed in a browser against a replica built from
   these same declarations rather than reasoned from the file.

   ── 1. THE APPLICATION STOPS SHORT OF THE WINDOW ───────────────────

   .ts-reopen (thinking-surface.css) is position:fixed, right:0, top:50%,
   z-index:59, background:#ffffff, 30px wide, centred on the VIEWPORT.
   The right pane's right edge and the window's right edge are the same
   coordinate, so all 30px of that handle sits over pane content. Any
   precedent line inside the handle's vertical band is painted over.

   MEASURED, 16 August, at 1434x947: right pane 300px ending at 1434,
   handle from x=1404 to 1434 — "pane runs 30px past the handle's left
   edge", two findings covered. With this rule: "pane clears the handle
   by 2px", none covered.

   This is not a wrap fault and not a min-content blowout. Both tracks
   are sound. The text is laid out correctly and then covered, which is
   why three sessions looking for a wrap rule found nothing. The defect
   carried in OPEN-POINT-SCREEN.md §14.3 since 13 August is this and
   nothing else; §14.3 and the tab-overlap fault are one fault.

   WHY THE APPLICATION AND NOT THE PANE. Reserving on .pane.right costs
   32px from the tightest column on the screen and has to be repeated on
   all nine, because the handle is on all nine. Reserving here is one
   rule, keeps every grid track at its ruled proportion, and restores
   what FORMATTING-MASTER §10 asks for: the handle sits BESIDE the
   application rather than on it. <div class="screen W"> is one element,
   so this reaches every screen.

   WHY 1200px AND NOT 1180. The block at line ~1392 is scoped above
   1180px on a stated invariant: 230 + 638 + 300 is 1168, which can
   never exceed the window it sits in. Reserving 32px makes that floor
   1200. Scoped here so the invariant stays true rather than being
   quietly broken by 20px.

   THE RESIDUAL, STATED. Below 1200px there is no reservation and the
   handle still overlaps. Between 1180 and 1200 that is a 20px band. It
   is not fixed here because fixing it means moving --mid, which is the
   measure floor FORMATTING-MASTER §3 protects, and that is a change to
   the master rather than a patch on a screen.

   ── 2. THREE FINDINGS, NOT ONE BLOCK OF SIX LINES ──────────────────

   .metav is margin:0 and .metasub is margin:2px 0 0, so the gaps down
   the precedent list run 0, 2px, 0, 2px, 0, 2px — no more space between
   findings than within one. Three findings read as one block, on a
   panel whose entire point is that these are separate things each with
   a different person to speak to.

   THE EXCEPTION IS AN ADJACENT SIBLING, NOT :first-of-type. Every child
   of the block is a <p> and the first one is the "Precedent" label, so
   .metav:first-of-type asks for an element that is both the first <p>
   and carries .metav — which nothing is. Written that way it never
   fires and the first finding is pushed away from its own label. Caught
   in a browser on 16 August after being proposed, shipped into a mock,
   and photographed without anybody noticing.

   SCOPED TO THIS PANE DELIBERATELY. .metav and .metasub are shared
   across the whole right pane; widening them would push Owner and
   Provenance apart as well. The identical run-together defect sits on
   .s-record, .s-moments, .s-moments-board, .s-upload and
   .s-firstsession — a deliberate pass, not a widened selector.
   ===================================================================== */
@media (min-width: 1200px) {
  #app > .screen { padding-right: 32px }
}

.s-openpoint .pohja-precedent .metav{margin-top:12px}
.s-openpoint .pohja-precedent .metal + .metav{margin-top:0}

/* =====================================================================
   ONE MEASURE, ACROSS THE WHOLE WRITABLE COLUMN. 16 August 2026.
   FORMATTING-MASTER §3.

   Found by Gerry: the decision field and the reasoning field were
   different widths. The shape editor was the one that was right — it was
   built to §3 and capped at 568px — while `.fieldbox` was width:100% and
   took the whole pane.

   FOUR ELEMENTS IN THAT COLUMN HONOURED THE MEASURE AND ELEVEN DID NOT:
   the instruction, the chip row and the candidate list were capped; the
   fields, their hints, the grounds, the title, the question, the gate
   line and the permanence note were not. Nobody noticed while everything
   uncapped was the same width as everything else uncapped — it took one
   capped element sitting beside an uncapped one to make it visible.

   That is what §3 exists to prevent: not a width, a DISAGREEMENT about
   width. A ragged right edge down a column somebody is reading and
   writing in is the fault, and it is why the measure is stated in pixels
   rather than left to each element's container.

   THE PANE KEEPS ITS OWN WIDTH. This caps the content, not the column —
   the right pane and the grid tracks are untouched. Applied to the open
   point screen only; the same rule wants applying to the record and
   reconsider screens, and that is its own pass rather than a widened
   selector here.
   ===================================================================== */
/* ONE CLASS PER RULE, not a comma list. SUMMARY.txt records why: a long
   comma list puts the class in the middle of the selector, and the
   resolver the suites use only counts a rule where the class is the last
   thing before the brace. The contrast pass was written twice for this
   reason on 14 August; this block was written wrong the same way and the
   assertion caught it. */
:is(.s-openpoint) .fieldbox{max-width:568px}
:is(.s-openpoint) .auth{max-width:568px}
:is(.s-openpoint) .pcandonly{max-width:568px}
:is(.s-openpoint) .addrow{max-width:568px}
:is(.s-openpoint) .opstate{max-width:568px}

/* =====================================================================
   THE SHAPE EDITOR. Slice 3, 16 August 2026.
   OPEN-POINT-SCREEN.md §5 and §12.3.

   A placed shape is the sentence, with the fixed words as text and each
   gap as an inline field. Brackets are never shown: the label is drawn
   by CSS on an empty gap, which means it is a PROMPT and not content —
   it cannot be recorded by accident and it is not in the element's text.

   THE GAP IS INLINE, AND THAT IS THE WHOLE POINT. An <input> sized to
   its content is an inline-block, and an inline-block wider than its
   container overflows rather than wrapping — which is how a long answer
   escapes its shape and crosses into the right pane (§14.1). An inline
   span wraps at spaces like any other text, and overflow-wrap:anywhere
   breaks an unbroken string rather than stretching the line.

   FONT SIZE IS CONSTANT. Locked: the size of the text a person writes
   into is a subliminal editorial instruction, not a legibility choice.
   13px here is the same 13px as .fieldbox, so placing a shape does not
   quietly tell somebody this answer matters less than the one above it.
   ===================================================================== */
.s-openpoint .pshape{
  max-width:568px;
  box-sizing:border-box;
  font-family:Inter,sans-serif;
  font-size:var(--body);
  line-height:1.7;
  color:#16191c;
  background:#fff;
  border:1px solid #8c96a1;
  border-radius:6px;
  padding:7px 9px;
  overflow-wrap:anywhere;
}
.s-openpoint .pshape-t{white-space:pre-wrap}
/* A gap holds a phrase, not an essay. Capped at roughly twelve lines so
   the shape can never push the fields below it off the screen — the
   audience principle this screen is built on is that visible mass reads
   as duration. Everything typed is kept and reachable by scrolling; the
   way out sits outside this box and stays put. */
.s-openpoint .pshape-body{max-height:220px;overflow-y:auto;overflow-x:hidden}
.s-openpoint .pshape-pre,
.s-openpoint .pshape-g{
  display:inline;
  outline:none;
  overflow-wrap:anywhere;
}
/* Grey on a dotted underline, so it reads as somewhere to write rather
   than as a code token. #646e79 is the ruled placeholder value at
   4.50:1; #8c96a1 is the ruled control boundary at 3.00:1. */
.s-openpoint .pshape-g{
  border-bottom:1px dotted #8c96a1;
  padding-bottom:1px;
  min-width:2px;
}
.s-openpoint .pshape-g:empty::before{
  content:attr(data-gap);
  color:#666d7a;
}
.s-openpoint .pshape-g:focus{border-bottom-color:#b8883a}
.s-openpoint .pshape-pre:focus{background:#fbfaf7}

/* The way out. Quiet, and the same part of speech as everything else
   the person can do here. */
.s-openpoint .pshapeout{margin:6px 0 0;font-size:var(--meta);display:flex;gap:14px}
/* The clear sits under the field it clears, quiet, in the same treatment
   as the shape's two ways out — one shape for one job. Hidden until the
   field has something in it (§7), so an empty form carries no extra ink. */
.s-openpoint .fieldout{margin:6px 0 0;font-size:var(--meta);max-width:568px}
.s-openpoint .fieldclear{font-family:inherit;font-size:var(--meta);border:0;background:none;
  padding:0;color:#666d7a;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:#c9ced3}
.s-openpoint .fieldclear:hover{color:#16191c;text-decoration-color:#16191c}
.s-openpoint .fieldclear:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-openpoint .pshapeout button{
  font-family:inherit;
  font-size:var(--meta);
  border:0;
  background:none;
  padding:0;
  color:#666d7a;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:#c9ced3;
}
.s-openpoint .pshapeout button:hover{color:#16191c;text-decoration-color:#16191c}
.s-openpoint .pshapeout button:focus-visible{outline:2px solid #b8883a;outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════
   THE DECISIONS TABLE. Ruled by Gerry 22 August 2026 (STATE.md §4.4),
   built 23 August. Replaces the left-rail list on `#decisions`.

   WHY. The rail works at twenty records and fails at a hundred: no
   search within, no filter, no grouping, and the only way to DR-0060
   is to scroll past sixty others or already know the number. A
   structural or civil consultancy will hold a thousand.

   WHAT IT MUST NOT ACQUIRE, and this is the part that erodes first:
   no priority, no importance, no relevance score, no "recommended",
   no severity colour. The function chips are ALPHABETICAL. Ordering
   them by record count was tried on 22 August and refused, because it
   ranks — on a screen whose own footer says "Counted, not ranked" —
   and putting Facilities first because it holds four says Facilities
   matters most. The counts stay, because a count is a fact. The order
   was the claim.

   ── TWO COLOURS FROM THE MOCK ARE NOT HERE, AND WHY ────────────────

   MOCK-decisions-table.html was built standalone and never ran past
   test-shell. Two of its values are illegal as text on this product:

     #a8adb2 at 2.26:1 — carried the chip counts, the month counts and
     "no positions recorded". All three are text somebody reads, and
     two of them are the counts the ruling calls facts worth seeing.
     Replaced with #666d7a at 4.52:1.

     #b8883a at 3.17:1 — carried the count on a SELECTED chip. It is
     in test-shell's CONTRAST_EXEMPT, but as "the gold attention mark
     on ::after, ruled legal as a GRAPHICAL OBJECT". Using it for a
     numeral would have been new text riding an exemption written for
     something else — which is exactly how 3.00:1 calendar headers
     shipped for three days under `.pchip:disabled`'s exemption. The
     exemption map is keyed by hex and cannot tell the two uses apart,
     so the suite would have stayed green. Replaced with #5e6469.

   AND THE SELECTED CHIP'S TINT IS MEASURED AGAINST, NOT AGAINST WHITE.
   test-shell assumes a white ground, so it would not have caught this:
   on #fdf9f3 both #666d7a and #976f2f fall to 4.31 and 4.32:1. The
   selected chip therefore takes #16191c for its label and #5e6469 for
   its count, which are 16.83:1 and 5.72:1 ON THE TINT.
   ═══════════════════════════════════════════════════════════════════ */
/* TWO PANES, AND THE LEFT ONE IS NOT THE RAIL. §4.4 removes the rail —
   the LIST of records down the side. It does not remove navigation, and
   chrome() puts Home, Raise an open point and Sign out into `.pane.left`
   on every screen without a full rail. Built without one, this screen
   silently lost all three, and a pilot user on #decisions could not sign
   out at all. Found by test-raise, which asserts the way in exists on
   every destination screen.

   So the pane is here and holds navigation only: chrome() fills it and
   no hydrator puts a record in it. `.pane.mid` is the table, and is also
   what emptyPane() writes into, which is the second half of the same
   fault. */
.s-decisions-table .W .panes{display:grid;grid-template-columns:230px minmax(0,1fr)}
.s-decisions-table .W .pane.left{border-right:1px solid #e8eaec;min-height:470px}
.s-decisions-table .W .pane.mid{padding:22px 26px 70px;min-width:0}
.s-decisions-table .W .dthead{margin:0 0 18px}
.s-decisions-table .W .dth1{font-size:var(--title);font-weight:400;color:#16191c;margin:0 0 3px}
.s-decisions-table .W .dtsub{font-size:var(--body);color:#666d7a;margin:0}
.s-decisions-table .W .dtsub b{font-weight:500;color:#2e3439}

.s-decisions-table .W .dtbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.s-decisions-table .W .dtfind{flex:1;min-width:240px;position:relative;display:block}
.s-decisions-table .W .dtfind input{width:100%;font-family:inherit;font-size:var(--body);
  color:#2e3439;padding:9px 12px 9px 30px;border:1px solid #e8eaec;border-radius:6px;background:#fff}
.s-decisions-table .W .dtfind input:focus{outline:2px solid #b8883a;outline-offset:-1px;border-color:transparent}
.s-decisions-table .W .dtfind svg{position:absolute;left:10px;top:10px;color:#666d7a}
/* 13px, the system's radius for anything you press — .pseg, .btn,
   .authopt, .roleopt, .tag and .rtag all use it. 3px is reserved for
   containers and marks, 6px for panels. A first draft of the mock used
   3px, which was wrong twice: the wrong radius and the wrong category
   of object. Gerry caught it — pills read as one soft row, squares read
   as twelve boxes competing with the table beneath them. */
.s-decisions-table .W .dtseg{display:flex;gap:6px}
.s-decisions-table .W .dtseg button{font-family:inherit;font-size:var(--body);height:36px;
  padding:0 15px;border:1px solid #e0e4e6;background:#fff;color:#666d7a;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1;border-radius:13px}
.s-decisions-table .W .dtseg button[aria-pressed=true]{background:#eceef0;border-color:#16191c;
  color:#16191c;font-weight:500}
.s-decisions-table .W .dtfold{font-family:inherit;font-size:var(--body);height:36px;padding:0 15px;
  border:1px solid #e0e4e6;background:#fff;color:#666d7a;cursor:pointer;border-radius:13px}
.s-decisions-table .W .dtseg button:focus-visible,
.s-decisions-table .W .dtfold:focus-visible,
.s-decisions-table .W .fchip:focus-visible{outline:2px solid #b8883a;outline-offset:2px}

.s-decisions-table .W .fns{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:6px;margin:0 0 16px}
.s-decisions-table .W .fchip{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:inherit;font-size:var(--meta);color:#666d7a;background:#fff;border:1px solid #e8eaec;
  border-radius:13px;padding:7px 13px;cursor:pointer;text-align:left}
.s-decisions-table .W .fchip b{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);
  font-weight:400;color:#666d7a}
.s-decisions-table .W .fchip[aria-pressed=true]{color:#16191c;border-color:#b8883a;background:#fdf9f3}
.s-decisions-table .W .fchip[aria-pressed=true] b{color:#5e6469}
.s-decisions-table .W .fchip:hover{border-color:#d5dade}

.s-decisions-table .W table{width:100%;border-collapse:collapse;table-layout:fixed}
.s-decisions-table .W th{font-size:var(--meta);letter-spacing:.14em;text-transform:uppercase;
  color:#666d7a;font-weight:400;text-align:left;padding:0 14px 8px 0;border-bottom:1px solid #e8eaec;
  white-space:nowrap}
.s-decisions-table .W td{font-size:var(--body);color:#2e3439;padding:14px 14px 14px 0;
  vertical-align:top;border-bottom:1px solid #f4f6f6;line-height:1.5}
.s-decisions-table .W tr.drow{cursor:pointer}
.s-decisions-table .W tr.drow:hover td{background:#fafbfb}
.s-decisions-table .W tr.sup td{color:#666d7a}
/* MONTH BANDS. Chronology is the one grouping that ranks nothing — it
   is the order the organisation actually decided in. THE BAND IS THE
   CONTROL: the heading is the thing you are folding, so it is the thing
   you press, and no separate affordance sits beside it. */
.s-decisions-table .W tr.mrow td{padding:20px 0 5px;border-bottom:1px solid #e8eaec;background:#fff}
.s-decisions-table .W .mbtn{display:inline-flex;align-items:center;gap:9px;background:none;border:0;
  padding:4px 0;cursor:pointer;font-family:inherit;color:inherit}
.s-decisions-table .W .mbtn:focus-visible{outline:2px solid #b8883a;outline-offset:3px;border-radius:2px}
.s-decisions-table .W .mcar{color:#666d7a;transition:transform .14s ease;flex:none}
.s-decisions-table .W .mbtn[aria-expanded=false] .mcar{transform:rotate(-90deg)}
.s-decisions-table .W .mbtn[aria-expanded=false] .m{color:#666d7a}
.s-decisions-table .W tr.mrow .m{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);
  letter-spacing:.10em;text-transform:uppercase;color:#16191c}
.s-decisions-table .W tr.mrow .mn{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a}

.s-decisions-table .W .c-ref{width:150px}
.s-decisions-table .W .c-pos{width:250px}
.s-decisions-table .W .c-who{width:170px}
.s-decisions-table .W .c-when{width:82px;font-family:'IBM Plex Mono',monospace;
  font-size:var(--mono);color:#666d7a}
.s-decisions-table .W .ref{font-size:var(--mono);
  color:#666d7a;display:block}
.s-decisions-table .W .st{font-size:var(--meta);display:block;margin-top:2px;color:#666d7a}
.s-decisions-table .W .st.sup{color:#666d7a}
.s-decisions-table .W .lin{font-family:'IBM Plex Mono',monospace;font-size:var(--meta);
  color:#666d7a;display:block;margin-top:2px}
.s-decisions-table .W .ttl{display:block;color:#16191c;font-weight:500}
.s-decisions-table .W tr.sup .ttl{font-weight:400;color:#666d7a}
.s-decisions-table .W .dec{display:block;margin-top:3px}
/* The FUNCTION is the strong word here, not the verdict. A conventional
   record says who decided; this column says who thought about it, which
   is the thing Pohja holds that a wiki does not. */
.s-decisions-table .W .p{display:block;font-size:var(--meta);color:#666d7a;margin-bottom:3px;
  padding-left:9px;position:relative}
.s-decisions-table .W .p i{font-style:normal;color:#16191c;font-weight:500;margin-right:5px}
.s-decisions-table .W .p:before{content:'';position:absolute;left:0;top:5px;width:4px;height:4px;
  border-radius:50%;background:#c9ced3}
.s-decisions-table .W .p.cond:before{background:#b8883a}
.s-decisions-table .W .p.dis:before{background:#8a3d46}
.s-decisions-table .W .p.dis i{color:#8a3d46}
.s-decisions-table .W .nopos{font-size:var(--meta);color:#666d7a}
.s-decisions-table .W .who{display:block;color:#2e3439}
.s-decisions-table .W .fn{display:block;font-size:var(--meta);color:#666d7a}
.s-decisions-table .W .dtfoot{margin-top:18px;font-size:var(--meta);color:#666d7a}
.s-decisions-table .W .dtempty{padding:40px 0;color:#666d7a;font-size:var(--body)}
@media (max-width:900px){
  .s-decisions-table .W .c-pos,.s-decisions-table .W .c-who{display:none}
}

/* THE RAIL, WHEN IT IS THE TABLE'S OWN RESULT SET. Ruled by Gerry
   23 August 2026 — option B. The counter says where you are in the set
   YOU built, not in the whole record. See hydrateRecord. */
.s-record .W .railwhere{font-size:var(--meta);color:#666d7a;margin:0;padding:0 16px 10px;
  line-height:1.45}
.s-record .W .railwhere b{font-weight:500;color:#16191c}
.s-record .W .railback{font-family:inherit;font-size:var(--meta);border:0;background:none;padding:0;
  color:#666d7a;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#c9ced3;display:block;margin-top:4px}
.s-record .W .railback:hover{color:#16191c;text-decoration-color:#16191c}
.s-record .W .railback:focus-visible{outline:2px solid #b8883a;outline-offset:2px}


/* ═══════════════════════════════════════════════════════════════════
   THE PEOPLE PAGE. Ruled by Gerry 23 August 2026, built the same day,
   mocked in `MOCK-people.html` against the real Cambrian roster first.

   WHAT THE PAGE IS FOR, because the old one had no answer and drifted:
   maintain the people-and-function structure, and make organisational
   gaps immediately visible. It is administration, not memory
   exploration.

   THREE LEVELS, ANSWERING THREE DIFFERENT QUESTIONS, and the whole
   design is that they do not mix:

     What needs fixing?      the attention panel, from
                             GET /people/onboarding-gaps
     How is it structured?   the function bands
     Who is in it?           the people rows

   ── WHAT WAS REFUSED, so it is not re-proposed ──────────────────────

   ALL BANDS COLLAPSED BY DEFAULT. Right on Decisions, where you arrive
   knowing what you are looking for. Wrong here: a page whose job is
   finding what is broken, opening on a view that shows nothing wrong
   because it shows nothing at all.

   REMOVING THE FUNCTION CHIPS because the bands group by function. They
   are different controls — a chip composes with the search box and a
   band does not.

   A BAND FOR PEOPLE WITH NO FUNCTION, sitting alphabetically among the
   real ones. A person with no function is a fault to fix, not a group
   to browse. It has a band, but pinned above the alphabetical run, in
   body type rather than mono caps, and NOT PRESSABLE — you cannot fold
   away the thing that needs fixing. That last part is also a fix: a
   foldable exception pushed `shut.size` past the function count and
   jammed Collapse all permanently.

   ── COLOUR ──────────────────────────────────────────────────────────
   Every text colour clears 4.5:1 against white AND against the two
   tints used here, checked per site rather than per hex. #8a6529 rather
   than the product's usual #976f2f on the attention panel: #976f2f
   reads 4.53:1 on white and 4.36:1 on #fdfaf5, and test-shell assumes
   a white ground so it would not have caught that.
   ═══════════════════════════════════════════════════════════════════ */
/* THE SAME PANE THE DECISIONS TABLE NEEDED, AND FOR THE SAME REASON —
   which is why it is worth saying twice. chrome() builds Home, Raise an
   open point AND Sign out into `.pane.left` on every screen without a
   full rail. Built without one, this screen silently lost all three and
   a pilot user on #people could not sign out. Caught by test-raise on
   the first run, having been caught by test-raise once already today. */
.s-people .W .panes{display:grid;grid-template-columns:230px minmax(0,1fr)}
.s-people .W .pane.left{border-right:1px solid #e8eaec;min-height:470px}
.s-people .W .pane.mid{padding:22px 26px 70px;min-width:0}
/* THE SCREEN IS NOT CAPPED. Ruled by Gerry 24 August 2026, after four
   attempts at a width and one piece of arithmetic that settled it.

   THE ARITHMETIC, BECAUSE IT IS THE WHOLE ARGUMENT. A People row holds
   about 338px of information — a 255px address, which is the widest
   thing in it, and an 83px status. The pane on a 1450px window is about
   1398px. SO ROUGHLY A THOUSAND PIXELS ARE EMPTY WHATEVER IS DONE, and
   the only question is WHERE the emptiness sits:

     inside the row, between a name and its own status — or
     after the row, as trailing space on the right.

   A CAP PUTS IT AFTER. Stretching puts it inside. There is no third
   option that keeps a short name beside its status AND reaches the
   right-hand edge, because the row has nothing else to carry: the
   function is already in the band head, the address is already there,
   and the status is one word.

   AND A TABLE DOES NOT ESCAPE IT EITHER, which `MOCK-people-table.html`
   claimed and was wrong about. `width:100%` with Status fixed at 220px
   gives the Person column 1178px to hold 255px of text — the same gap,
   drawn with a border. The Decisions table works because its middle
   column carries a whole sentence that fills the space. A person row
   carries a name.

   GERRY RULED THE STRETCH, HAVING SEEN BOTH: the content fills the pane
   and its right edge meets the navigation strip, which sits at
   `right:26px` — the same inset as this pane's own padding, so the two
   edges agree without a number being chosen for either.

   THE COST IS ACCEPTED RATHER THAN HIDDEN. The status tags sit at the
   right margin, a long way from the names. That is the thing four
   earlier attempts were trying to remove, and it is on the record here
   so nobody re-fixes it by accident in a month. */
.s-people .W .pphead{margin:0 0 20px}
.s-people .W .pph1{font-size:var(--title);font-weight:400;color:#16191c;margin:0 0 3px}
.s-people .W .ppsub{font-size:var(--body);color:#666d7a;margin:0 0 14px}
/* THE COUNT SITS UNDER THE SEARCH, ruled by Gerry 9 September 2026 from
   MOCK-people-search.html: a person arrives here with a task, not a
   question about totals, so the field is the act and the count is what
   the act changes. The bar's bottom margin closes up to meet it. */
.s-people .W .ppsub b{font-weight:500;color:#2e3439}

/* The attention panel. A panel, so 6px. Gold marks attention and is
   used ONCE — a page where everything is marked has marked nothing. */
.s-people .W .gaps{border:1px solid #e6dcc6;background:#fdfaf5;border-radius:6px;
  padding:14px 16px;margin:0 0 20px}
.s-people .W .gapsh{font-size:var(--body);font-weight:500;color:#16191c;margin:0 0 8px;
  display:flex;align-items:center;gap:8px}
.s-people .W .gdot{width:7px;height:7px;border-radius:50%;background:#b8883a;flex:none}
.s-people .W .grow{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-top:1px solid #f0e7d6}
.s-people .W .grow:first-of-type{border-top:0}
.s-people .W .gwhat{flex:1;color:#2e3439}
.s-people .W .gwhat b{font-weight:500;color:#16191c}
.s-people .W .gwhy{font-size:var(--meta);color:#666d7a;display:block;margin-top:2px}
.s-people .W .gfix{font-family:inherit;font-size:var(--meta);border:0;background:none;padding:0;
  color:#8a6529;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#dcc9a4;white-space:nowrap}
.s-people .W .gfix:hover{color:#16191c}
.s-people .W .gfix:focus-visible{outline:2px solid #b8883a;outline-offset:2px;border-radius:3px}
.s-people .W .gclear{font-size:var(--body);color:#666d7a;margin:0}

.s-people .W .ppbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
/* The clear control, in the capture screen's own treatment — one shape
   for one job. `attachClear` places it under the field inside the label. */
.s-people .W .fieldout{margin:6px 0 0;font-size:var(--meta)}
.s-people .W .fieldclear{font-family:inherit;font-size:var(--meta);border:0;background:none;
  padding:0;color:#666d7a;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:#c9ced3}
.s-people .W .fieldclear:hover{color:#16191c;text-decoration-color:#16191c}
.s-people .W .fieldclear:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
/* ── MANAGING PEOPLE, 10 September 2026, from MOCK-people-manage.html ──
   The Memory Owner's controls. Values are the screen's own: the field box
   is the search box's, the primary is the product's own action colour and
   never the needs-you gold, the secondary is the bar's segment button, and
   a refusal is the departed tag's red. */
.s-people .W .addact{font-family:inherit;font-size:var(--body);border:0;background:none;padding:0 2px;
  color:#16191c;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#c9ced3;white-space:nowrap}
.s-people .W .addact:hover{text-decoration-color:#16191c}
.s-people .W .addact:focus-visible{outline:2px solid #b8883a;outline-offset:2px;border-radius:3px}
.s-people .W .prow[role=button]{cursor:pointer}
.s-people .W .prow[role=button]:hover{background:#fafbfb}
.s-people .W .prow[role=button]:focus-visible{outline:2px solid #b8883a;outline-offset:-2px}
.s-people .W .prow.pmopen{background:#fafbfb}
.s-people .W .pmbeneath{margin:0 0 8px 26px;padding:14px 16px;border:1px solid #e8eaec;border-radius:6px;
  background:#fff;max-width:720px}
.s-people .W .pmadd{margin:0 0 12px 0}
.s-people .W .pmgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.s-people .W .pmfield{display:block}
.s-people .W .pml{display:block;font-size:var(--meta);color:#666d7a;margin:0 0 4px}
.s-people .W .pmin{width:100%;font-family:inherit;font-size:var(--body);color:#2e3439;padding:8px 10px;
  border:1px solid #e0e4e6;border-radius:6px;background:#fff;box-sizing:border-box}
.s-people .W .pmin:focus{outline:2px solid #b8883a;outline-offset:-1px;border-color:transparent}
.s-people .W .pmhint{font-size:var(--meta);color:#666d7a;margin:8px 0 0;line-height:1.5;max-width:620px}
.s-people .W .pmhint.must{color:#2e3439}
.s-people .W .pmrow2{display:flex;align-items:center;gap:12px;margin:12px 0 0;flex-wrap:wrap}
.s-people .W .pmsave{font-family:inherit;font-size:var(--body);height:36px;padding:0 16px;border-radius:13px;
  border:1px solid #976f2f;background:#976f2f;color:#fff;cursor:pointer}
.s-people .W .pmsave:focus-visible,.s-people .W .pmsecondary:focus-visible,.s-people .W .pmquiet:focus-visible,
.s-people .W .pmdrop:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-people .W .pmsecondary{font-family:inherit;font-size:var(--body);height:36px;padding:0 15px;border-radius:13px;
  border:1px solid #e0e4e6;background:#fff;color:#434a52;cursor:pointer}
.s-people .W .pmquiet{font-family:inherit;font-size:var(--meta);border:0;background:none;padding:0;color:#666d7a;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9ced3}
.s-people .W .pmcheck{display:flex;gap:9px;align-items:flex-start;margin:10px 0 0;font-size:var(--body);color:#16191c}
.s-people .W .pmcheck input{margin:3px 0 0}
.s-people .W .pmcheck small{display:block;font-size:var(--meta);color:#666d7a}
.s-people .W .pmrefuse{font-size:var(--meta);color:#8a3d46;margin:8px 0 0;max-width:620px}
.s-people .W .pmsep{border-top:1px solid #f0f2f3;margin:14px 0 0;padding-top:12px}
.s-people .W .pmsl{font-size:var(--meta);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#666d7a;margin:0 0 6px}
.s-people .W .pmdrop{display:block;width:100%;font-family:inherit;font-size:var(--body);color:#5e6469;background:#fff;
  border:1px dashed #c9ced3;border-radius:6px;padding:12px;cursor:pointer;margin:8px 0 0}
.s-people .W .pmdone{font-size:var(--body);color:#2e3439;margin:0 0 10px}
.s-people .W .pmspeak{margin:0;white-space:nowrap}
@media (max-width:760px){.s-people .W .pmgrid{grid-template-columns:1fr}}
.s-people .W .ppfind{flex:1;min-width:240px;position:relative;display:block}
.s-people .W .ppfind input{width:100%;font-family:inherit;font-size:var(--body);color:#2e3439;
  padding:9px 12px 9px 30px;border:1px solid #e8eaec;border-radius:6px;background:#fff}
.s-people .W .ppfind input:focus{outline:2px solid #b8883a;outline-offset:-1px;border-color:transparent}
.s-people .W .ppfind svg{position:absolute;left:10px;top:10px;color:#666d7a}
.s-people .W .ppseg{display:flex;gap:6px}
.s-people .W .ppseg button,.s-people .W .ppfold{font-family:inherit;font-size:var(--body);height:36px;
  padding:0 15px;border:1px solid #e0e4e6;background:#fff;color:#666d7a;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1;border-radius:13px}
.s-people .W .ppseg button[aria-pressed=true]{background:#eceef0;border-color:#16191c;color:#16191c;font-weight:500}
.s-people .W .ppseg button:focus-visible,.s-people .W .ppfold:focus-visible,
.s-people .W .ppchip:focus-visible{outline:2px solid #b8883a;outline-offset:2px}

.s-people .W .ppfns{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:6px;margin:0 0 18px}
.s-people .W .ppchip{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:inherit;font-size:var(--meta);color:#666d7a;background:#fff;border:1px solid #e8eaec;
  border-radius:13px;padding:7px 13px;cursor:pointer;text-align:left}
.s-people .W .ppchip b{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);font-weight:400;color:#666d7a}
.s-people .W .ppchip[aria-pressed=true]{color:#16191c;border-color:#b8883a;background:#fdf9f3}
.s-people .W .ppchip[aria-pressed=true] b{color:#5e6469}
.s-people .W .ppchip:hover{border-color:#d5dade}

/* ONE MEASURE PER BAND. Ruled by Gerry 24 August 2026, after seeing the
   screen on a live instance: "is there too much white space in the
   centre of this screen".

   THERE WAS, AND IT WAS NEITHER WHITE SPACE NOR IN THE CENTRE. Nothing
   capped this column — not `.pane.mid`, not `.W` — so it was as wide as
   the window, `.pname` took `flex:1` and grew into all of it, and the
   never-wrapping status tags were pushed to the far margin. The row had
   not gained whitespace; ITS TWO ENDS HAD BEEN PULLED APART. On a
   1,568px window that is roughly 950px between a person and their own
   status, across 22 rows of equal height with the tags in one column —
   which is the condition under which somebody reads the wrong row's
   status. A legibility fault, not a taste one.

   TWO WRONG TURNS BEFORE THIS, BOTH RECORDED BECAUSE THE SECOND IS THE
   INSTRUCTIVE ONE.

   First: capping the page at 1000px. Necessary and NOT SUFFICIENT —
   `flex:1` pushes the tags to the far edge of WHATEVER container
   exists, so a smaller container just made a smaller hole.

   Second, and this is the one worth keeping: moving the tags in but
   leaving the rules and the band count at full width. That gave every
   band THREE COMPETING RIGHT EDGES and read as unstructured. The
   original screen had ONE strong edge and its only fault was that the
   edge sat 1,286px from the content. THE FIX WAS TO MOVE THE EDGE IN,
   not to abandon it — a far edge is at least an edge.

       Keep the tags. Move the width.

   So the BAND carries the measure. Its head, its rules and every row
   terminate on the same line, and the tags right-align to it.

   540px = a 270px name block + about 227px for the worst-case tag pair
   (`Leads 2 functions` beside `Left · 14 March 2026`) + the gap. Those
   are arithmetic off this stylesheet and the roster, not measurements:
   jsdom resolves no layout, so nothing in this project can measure a
   width, and `tests/test-people.mjs` can only assert that these rules
   RESOLVE — never how wide anything ended up. A browser pass is still
   the only thing that sees this. */
.s-people .W .pband{border-top:1px solid #e8eaec;padding-top:14px;margin-top:14px}
.s-people .W .pbtn{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  padding:4px 0;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.s-people .W .pbtn.static{cursor:default}
.s-people .W .pbtn:focus-visible{outline:2px solid #b8883a;outline-offset:3px;border-radius:3px}
.s-people .W .pcar{color:#666d7a;transition:transform .14s ease;flex:none}
.s-people .W .pbtn[aria-expanded=false] .pcar{transform:rotate(-90deg)}
.s-people .W .pbname{font-size:var(--mono);letter-spacing:.10em;
  text-transform:uppercase;color:#16191c}
.s-people .W .pbcount{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;margin-left:auto}
/* The fact only a band can carry: whether there is somebody to speak
   to. Not a head count. */
.s-people .W .pblead{font-size:var(--meta);color:#666d7a}
.s-people .W .pblead.none{color:#8a3d46}
@media (prefers-reduced-motion:reduce){.s-people .W .pcar{transition:none}}

/* Not a function, so it does not look like one. */
.s-people .W .pband.unassigned{border-top:0;padding-top:0;margin-top:0;margin-bottom:4px}
/* The mirror gap's one line. Function names, not rows — the band
   carries no `.prow`, so `apply()` cannot count it to nought and hide
   it. Inset to the same 26px a person's row uses, so it reads as
   belonging to its band rather than floating under it. */
.s-people .W .nobodyinline{font-size:var(--body);color:#666d7a;margin:0;
  padding:10px 0 10px 26px;line-height:1.5}
.s-people .W .pband.unassigned .pbname{font-family:'Inter',sans-serif;font-size:var(--body);
  letter-spacing:0;text-transform:none;font-weight:500;color:#8a3d46}

.s-people .W .prow{display:flex;align-items:center;gap:12px;padding:10px 0 10px 26px;
  border-bottom:1px solid #f4f6f6}
/* NOT `width:270px`, DELIBERATELY. A fixed width would truncate an
   address longer than the corpus holds, and an address is the one field
   on this row somebody would copy in order to contact the person —
   `justina.petrauskaite@cambrian.example` is already 37 characters and
   a 250px draft cut it to `...@cambrian.examp…` on screen. `min-width`
   holds the shared edge for every normal row and lets an unusually long
   address push its own tags right, so the layout degrades one row at a
   time rather than losing data. */
.s-people .W .pname{flex:0 1 auto;min-width:270px;margin-right:auto;color:#16191c}
/* ONE LINE, RULED BY GERRY AFTER FOUR ATTEMPTS AT THE WIDTH — see §6 of
   HANDOVER-24-august. The address used to sit BENEATH the name on its
   own line, which cost a second line on all twenty-four rows: about
   480px of height off one roster, for a field that is 37 characters at
   its longest and had a whole line to itself.

   THE PHONE IS DRAWN HERE FOR THE FIRST TIME. `people.phone` has
   existed since the vCard import, is filled by it, and has been
   returned by `GET /people` all along — the screen simply never drew
   it. It is the one field on this row somebody needs when the answer to
   “speak to whoever holds this” is a person who does not answer email.

   MONO FOR BOTH, because both are identifiers somebody copies rather
   than prose somebody reads, and a proportional font makes a digit
   string hard to check against another. */
.s-people .W .pmail,
.s-people .W .pphone{font-family:'IBM Plex Mono',monospace;font-size:var(--meta);
  color:#666d7a;margin-left:10px}
.s-people .W .pphone{white-space:nowrap}
.s-people .W .ptag{font-size:var(--meta);color:#666d7a;white-space:nowrap}
.s-people .W .ptag.lead{color:#16191c;font-weight:500}
.s-people .W .ptag.gone{color:#8a3d46}
/* AN ACT THE PRODUCT CANNOT PERFORM, DRAWN AS ONE IT CANNOT PERFORM.
   Ruled by Gerry 25 August 2026: rather than build the inbound-email
   import on a guess, ask the pilot testers whether they want it.

   THE CHIP IS `disabled`, NOT STYLED TO LOOK DISABLED. A control that
   names an act the product cannot do is the fault §4.3 item 4b records
   — and the honest form of it is not to hide the idea but to draw it
   unpressable and say so in words beside it. `#8c96a1` is already
   exempt in `test-shell` as a disabled control, ruled, so this needs no
   new exemption.

   THE QUESTION IS THE POINT. `SPEC-inbound-email.md` §3 is ruled and
   costs real work — a migration, a route, a queue and a DNS change
   that only Gerry can make. Asking first is cheaper than building and
   finding out. */
/* THE NEGOTIATION CHRONOLOGY. Quiet, because it is a list of facts in
   order rather than a feed — and the kind and the issue carry the
   scanning, not colour. 6px is the field radius from test-shell's
   closed set; this is a region, not a control. */
.s-record .negmove{padding:9px 0;border-bottom:1px solid #f4f6f6}
.s-record .negmove:last-child{border-bottom:0}
.s-record .negmovehead{margin:0 0 3px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.s-record .negkind{font-size:var(--meta);
  letter-spacing:.06em;color:#434a52}
.s-record .negon{font-size:var(--meta);color:#16191c;font-weight:500}
.s-record .negwhen{font-size:var(--meta);color:#666d7a;margin-left:auto}
.s-record .negmovebody{margin:0;font-size:var(--body);color:#434a52;line-height:1.55;max-width:568px}
/* THE RENEWAL REMINDER'S CONTROLS. Step 5, 1 September 2026.

   `.cmpch` AND ITS CHILDREN ARE NOT REDECLARED — the Ask composer's
   rules are scoped `.pohja-composer .cmpch`, and this screen is not
   inside that panel, so they are repeated here for `.s-record` with
   IDENTICAL values. Copied out of this file, not retyped from memory.

   THE TICK IS A BUTTON, NOT A CHECKBOX INPUT. Every other control on
   this screen is one, `aria-pressed` carries the state, and a native
   checkbox would be the only input on the page with a browser's own
   ideas about size and colour. 3px, because a tick is a small square
   that is deliberately not a chip — the one place in the closed set
   that value is right. */
.s-record .tickrow{display:flex;align-items:flex-start;gap:9px;margin:2px 0 0}
.s-record .tickbox{width:15px;height:15px;flex:none;margin-top:2px;border-radius:3px;
  border:1px solid #8c96a1;background:#fff;cursor:pointer;padding:0;
  font-size:var(--mono);line-height:1;color:transparent;
  display:inline-flex;align-items:center;justify-content:center}
.s-record .tickbox.on{background:#16191c;border-color:#16191c;color:#fff}
.s-record .tickbox:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-record .ticklab{font-size:var(--body);color:#16191c;line-height:1.35}
.s-record .remindbody{margin:14px 0 0}
.s-record .remindqlab{margin-top:14px}
.s-record .cmpchans{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:6px;margin:2px 0 0}
.s-record .cmpch{display:flex;align-items:center;gap:10px;text-align:left;
  font-family:'Inter',sans-serif;font-size:var(--body);background:#fff;border:1px solid #e8eaec;
  border-radius:13px;padding:8px 12px;cursor:pointer;color:#2e3439}
.s-record .cmpch:hover{border-color:#c9ced3}
.s-record .cmpch:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-record .cmpch.picked{background:#fdfaf5;border-color:#e6dcc6}
.s-record .cmpch.picked b{font-weight:500}
.s-record .cmpch b{font-weight:500;color:#16191c;display:block;line-height:1.3}
.s-record .cmpch span{display:block;font-size:var(--meta);color:#666d7a}

/* ── THE VOCABULARY THE RECORD SHELL BORROWS ─────────────────────────
   Ruled by Gerry, 1 September 2026, after looking at the spacing on the
   negotiation screen and finding it inconsistent.

   IT WAS NOT INCONSISTENT VALUES. IT WAS NO VALUES AT ALL. Six of the
   classes that screen writes had NO rule scoped to `.s-record`, so they
   fell back to the browser: `optitle` drew as a bare `<h3>` at 15.795px
   weight 700 with 0.83em margins instead of the sheet's title face, and
   `opask` and `fieldhint` drew as bare `<p>` at 13.5px in `#111316`
   with 1em margins — A HINT IN THE SAME SIZE AND THE SAME COLOUR AS
   BODY PROSE. Every gap that looked designed (7, 12, 18, 22px) came
   from a class declared here; every gap that looked wrong (13.5,
   15.795px) came from one that was not.

   THE VALUES ARE COPIED FROM `.s-openpoint`, NOT INVENTED. Those
   declarations were ruled when that screen was built and the classes
   are the same classes; inventing a second set would put two answers in
   the sheet for one question.

   AND THIS IS NOT ONLY THE NEGOTIATION SCREEN. `fieldhint` is written
   by NINE hydrators and `optitle` by SEVEN, and the record shell is
   borrowed by the value, derived, Memory Owner, ask, seeding and
   adoption screens as well. Declaring them here fixes all of them at
   once, which is why it is two rules rather than a patch on one
   screen. */
.s-record h3.optitle{font-size:var(--title);font-weight:500;letter-spacing:-.014em;margin:0 0 6px;
  color:#16191c;line-height:1.3;max-width:568px}
.s-record .opask{font-size:var(--body);color:#434a52;margin:0 0 20px;max-width:568px}
.s-record .fieldhint{font-size:var(--body);color:#666d7a;margin:6px 0 0;max-width:568px}
.s-record .addrow{display:flex;align-items:center;gap:9px;margin-top:9px}
.s-record .addbtn{font-size:var(--body);color:#434a52;background:none;
  border-radius:13px;height:24px;padding:0 12px;cursor:pointer;
  display:inline-flex;align-items:center;line-height:1}
.s-record .addbtn:hover{background:#faf6ee}
/* The chronology container declares its own spacing rather than leaving
   it to whatever wraps it. Its rows carry the rule between them. */
.s-record .negchrono{margin:0}
/* N4 · BEFORE IT RENEWS, and N7 · HOW THIS NEGOTIATION HAS CHANGED.
   13 September 2026. EVERY VALUE IS COPIED FROM A RULE ALREADY IN THIS
   SHEET rather than chosen: the body size and the 568px measure from
   `.s-record .fieldhint`, the two text colours from the pair that already
   clear 4.5:1 on every ground this product draws on. No literal font size,
   no new grey, no new gold. */
.s-record .remwho{font-size:var(--body);color:#16191c;margin:0;max-width:568px}
.s-record .remq{font-size:var(--body);color:#16191c;margin:4px 0 0;max-width:568px}
/* THE THREE HINT LINES CARRY `fieldhint` FOR SIZE AND COLOUR and declare
   only their own spacing. Declared rather than left to inherit alone because
   `test-shell` is right that an undeclared class falls back to the browser
   and every check in that file then reads past it — it caught all three. */
.s-record .remlead{margin-top:8px}
.s-record .remwait{margin-top:8px}
.s-record .remby{margin-top:10px}
.s-record .negchanges{margin:0}
/* Both values on one line, the byline under it — the shape `.negchrono`
   already uses, so a reader meets one pattern rather than two. */
.s-record .negchg{margin:0 0 10px;max-width:568px}
.s-record .negchgwhat{display:block;font-size:var(--body);color:#16191c}
.s-record .negchgwho{display:block;font-size:var(--meta);color:#666d7a;margin-top:2px}
/* THE CHIP ROW'S BOTTOM MARGIN, ADDED ABOVE ON `.negchips` ITSELF
   rather than as a second rule here. Measured at ZERO between the chips
   and the `Which side of this` label: the chip row carried a top margin
   and no bottom one, `.seclab` carries a bottom margin and no top one,
   so a chip row butted straight into the next section label and the
   chips read as belonging to the section BELOW them.

   FIXED THERE RATHER THAN BY GIVING `.seclab` A TOP MARGIN, and that is
   deliberate: `.s-record .sec` already carries `margin-bottom:22px`, so
   a top margin on every section label would double up against it
   everywhere else on the record screen — including the decision record,
   which has not been rendered and looked at in this session. The
   narrower fix is the one that can be checked. */

/* WHERE THIS ENDED. Step 5a, 1 September 2026. Two rules, both built
   from tokens and colours already in this sheet — no literal size and
   no new grey.

   `.negended` is the closure read back: reading colour, not the quieter
   grey a hint takes, because it is the answer to the question the
   section asks.
   `.negnote` is the open count stated BEFORE the act. It takes the
   inset treatment `.note` already uses elsewhere rather than looking
   like another hint, because a person is meant to act on it rather than
   read past it. */
.s-record .negended{margin:2px 0 10px;font-size:var(--body);color:#2e3439;
  line-height:1.55;max-width:568px}
.s-record .negnote{margin:2px 0 12px;padding:8px 12px;background:#f8f9fa;
  border-left:2px solid #c9ced3;font-size:var(--body);color:#434a52;
  line-height:1.55;max-width:568px}
/* THE THREE CLOSING BUTTONS SIZE TO THEIR WORDS, NOT TO 186px. Rendered
   first at the sheet's standard button width, where three of them plus
   their gaps overflow the middle pane and wrap TWO AND ONE - which reads
   as two options and an afterthought, and the afterthought was Lapsed,
   which P8 records as how most negotiations actually end. The mock draws
   one row and this is what one row costs. Nothing else on the screen
   uses this width, so the override is scoped to the row. */
.s-record .endrow{margin-top:2px}
.s-record .endrow .btn{width:auto;min-width:0;padding:0 20px}
/* The adoption control. 13px — an action, from test-shell's closed
   set. Quiet, because taking a record on is an ordinary act and not
   the subject of the screen. */
.s-record .adoptrow{display:flex;align-items:center;gap:14px;padding:11px 0;
  border-bottom:1px solid #f4f6f6}
.s-record .adoptrow:last-child{border-bottom:0}
.s-record .adoptbody{flex:1;min-width:0}
.s-record .adopttitle{margin:0;font-size:var(--body);color:#16191c}
.s-record .adoptmeta{margin:2px 0 0;font-family:'IBM Plex Mono',monospace;
  font-size:var(--meta);color:#666d7a}
.s-record .adoptbtn{font-family:'Inter',sans-serif;font-size:var(--meta);height:24px;
  padding:0 11px;border-radius:13px;border:1px solid #e8eaec;background:#fff;
  color:#434a52;cursor:pointer;margin:7px 0 0}
.s-record .adoptbtn:hover{background:#f4f6f7;color:#16191c}
.s-record .adoptbtn:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-record .adoptbtn:disabled{color:#8c96a1;cursor:not-allowed}
/* THE SEEDING GRID. Built 26 August 2026, presentation A. REDESIGNED
   the same day after Gerry looked at it in a browser.

   WHAT WAS WRONG, AND IT WAS ONE ROOT CAUSE WITH THREE SYMPTOMS.
   `.fieldbox` IS DEFINED ONLY UNDER `.s-openpoint`. This screen borrows
   the record shell, so every cell here got NO field styling at all —
   only the shared border-colour override, which made it look intended.
   A bare `<textarea>` falls back to the browser's default, WHICH IS
   MONOSPACE, so the grid rendered in Plex Mono; with no height set the
   long placeholders overflowed and every cell grew a scrollbar; and
   with no padding the text sat against the border.

   Borrowing a class that does not exist on your screen fails silently
   and looks deliberate — the same shape as a rail mark keyed off a
   `data-rail` value with no entry behind it. THE FIELDS ARE DEFINED
   HERE NOW, not inherited from a screen this one is not.

   AND THE PLACEHOLDERS ARE GONE. The column headers already say "What
   was decided", "Why, if anyone remembers" and "When"; repeating that
   in every cell said the same thing four times per column and, on three
   empty rows, read as though the grid were already full of data. The
   header is the label. A cell is empty until somebody types in it. */
/* `.fieldbox` ON THE RECORD SHELL. Added 26 August 2026, and it is the
   root cause of two separate "this screen is a mess" reports.

   THE CLASS IS DEFINED ONLY UNDER `.s-openpoint` AND `.s-upload`.
   THIRTEEN CLIENT ROUTES BORROW THE RECORD SHELL, and every field on
   every one of them was getting nothing but the shared border-colour
   override — which is why they looked intended rather than unstyled. A
   bare `<textarea>` then falls back to the browser default, WHICH IS
   MONOSPACE, with no height and no padding.

   Found on the seeding grid, fixed there in isolation, and then found
   AGAIN on `#newnegotiation` an hour later. A per-screen fix would have
   left the other eleven waiting to be discovered one report at a time,
   which is the §8 fault this file records twice. Defined once, here. */
.s-record .fieldbox{width:100%;max-width:568px;box-sizing:border-box;
  font-family:'Inter',sans-serif;font-size:var(--body);color:#16191c;background:#fff;
  border:1px solid #d5dade;border-radius:6px;padding:9px 11px;line-height:1.55}
.s-record textarea.fieldbox{min-height:76px;resize:vertical}
.s-record .fieldbox::placeholder{color:#8c96a1}
.s-record .fieldbox:focus{outline:2px solid #16191c;outline-offset:1px;border-color:#16191c}
.s-record .seedtable{width:100%;border-collapse:collapse;margin:18px 0 0;table-layout:fixed}
.s-record .seedtable th{text-align:left;vertical-align:bottom;font-family:'Inter',sans-serif;font-size:var(--meta);
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#5e6469;
  padding:0 12px 8px 0;border-bottom:1px solid #e8eaec}
.s-record .seedtable th:last-child{padding-right:0}
/* THE ACT COLUMN IS WIDER THAN IT LOOKS IT NEEDS TO BE. "needs a
   decision" beside a chip is two objects on one line, and at 15% the
   status wrapped INTO the When cell and overlapped its border. */
.s-record .seedtable th.c-what{width:30%}
.s-record .seedtable th.c-why{width:32%}
.s-record .seedtable th.c-when{width:14%}
.s-record .seedtable th.c-act{width:24%}
.s-record .seedtable td{vertical-align:top;padding:9px 12px 9px 0;
  border-bottom:1px solid #f4f6f6}
.s-record .seedtable td:last-child{padding-right:0}
.s-record .seedtable tr.aside td{background:#fbfbfc}
/* THE FIELDS, DEFINED RATHER THAN BORROWED. Inter explicitly, because
   the browser default for a textarea is monospace and this screen has
   no base rule to override it. */
.s-record .seedfield{width:100%;box-sizing:border-box;font-family:'Inter',sans-serif;
  font-size:var(--body);color:#16191c;background:#fff;border:1px solid #d5dade;
  border-radius:6px;padding:8px 10px;line-height:1.5}
.s-record .seedfield::placeholder{color:#8c96a1}
.s-record .seedfield:focus{outline:2px solid #16191c;outline-offset:1px;border-color:#16191c}
/* AUTO-GROWING, SO NOTHING SCROLLS INSIDE A CELL. A scrollbar inside a
   grid cell hides the end of a sentence somebody just typed, which on a
   screen built for a room is the one thing it cannot do. */
.s-record textarea.seedcell{min-height:42px;height:42px;resize:none;overflow:hidden}
.s-record .seedwhen{font-variant-numeric:tabular-nums}
.s-record .seedasidetitle{margin:0 0 7px;font-size:var(--body);color:#5e6469}
.s-record .seedasidewhy{font-size:var(--meta)}
/* Status first, then the act, side by side and NEVER WRAPPING INTO THE
   CELL BESIDE THEM. Stacking adds a line of height to every row and a
   workshop grid runs to forty. */
/* ALIGNED TO THE FIELD, NOT TO THE TOP OF THE CELL. The first version
   used a fixed top padding, so status and chip floated against the top
   edge of a 42px input and drifted further the moment a cell grew. */
.s-record .seedrowact{display:flex;align-items:center;gap:10px;min-height:42px}
/* A FACT, NOT A CONTROL. No border, no background, not pressable — the
   treatment `current` and `superseded` already get on the Decisions
   table. 4.5:1 on white at both weights. */
.s-record .seedflag{font-size:var(--meta);
  color:#434a52;white-space:nowrap}
.s-record .seedflag.q{color:#666d7a}
/* THE ACT. A chip, and pressable, exactly like the adoption control. */
.s-record .seedchip{flex:none;font-family:'Inter',sans-serif;font-size:var(--meta);height:24px;
  padding:0 11px;border-radius:13px;border:1px solid #d5dade;background:#fff;
  color:#434a52;cursor:pointer;white-space:nowrap}
.s-record .seedchip:hover{background:#f4f6f7;color:#16191c}
.s-record .seedchip:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-openpoint .seedpick,.s-record .seedpick{display:flex;align-items:center;gap:7px;
  flex-wrap:wrap;margin:9px 0 0}
.s-openpoint .seedpicklab,.s-record .seedpicklab{font-size:var(--meta);color:#666d7a;
  margin-right:2px}
.s-openpoint .seedchip{font-family:'Inter',sans-serif;font-size:var(--meta);height:24px;
  padding:0 11px;border-radius:13px;border:1px solid #d5dade;background:#fff;
  color:#434a52;cursor:pointer;white-space:nowrap}
.s-openpoint .seedchip:hover{background:#f4f6f7;color:#16191c}
.s-openpoint .seedchip:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-openpoint .seedchip[aria-pressed="true"]{border-color:#16191c;color:#16191c}
.s-record .seedchip[aria-pressed="true"]{border-color:#16191c;color:#16191c}
.s-record .seedstrip{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:16px 0 0;padding-top:14px;border-top:1px solid #e8eaec}
.s-record .seedcount{margin:0;font-size:var(--body);color:#16191c}
.s-record .seedstripnote{margin:3px 0 0;flex-basis:100%;font-size:var(--meta);
  color:#666d7a;line-height:1.6;max-width:568px}
.s-record .seedacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.s-record .seedrefusal{flex-basis:100%;margin:6px 0 0;font-size:var(--body);color:#8a3a3a}
.s-record .seeddone{margin:20px 0 0}
.s-record .seeddoneline{margin:0 0 14px;font-size:var(--lead);color:#16191c;max-width:568px}
.s-record .seedrefusedhead{margin:18px 0 7px;font-size:var(--body);color:#16191c}
.s-record .seedrefusedrow{margin:0 0 5px;
  font-size:var(--meta);color:#666d7a}
.s-people .W .ppsoon{display:flex;align-items:flex-start;gap:12px;margin:14px 0 0;
  padding:12px 14px;border:1px dashed #e0e4e6;border-radius:6px}
.s-people .W .ppsoonchip{flex:none;font-family:'Inter',sans-serif;font-size:var(--meta);
  height:24px;padding:0 11px;border-radius:13px;border:1px solid #e8eaec;
  background:#fff;color:#8c96a1;cursor:not-allowed}
.s-people .W .ppsoonnote{margin:0;font-size:var(--meta);color:#666d7a;line-height:1.6}
.s-people .W .ppsoonnote b{font-weight:500;color:#16191c}
/* The lead control, under its band header. Quiet by default — it is
   administration beside a fact, not the subject of the row. */
.s-people .W .pbedit{padding:6px 0 2px 26px}
.s-people .W .pbeditlab{font-size:var(--meta);color:#666d7a;display:inline-flex;
  align-items:center;gap:8px}
.s-people .W .pbpick{font-family:'Inter',sans-serif;font-size:var(--meta);
  padding:3px 7px;border-radius:6px;border:1px solid #e8eaec;background:#fff;color:#434a52}
.s-people .W .pbpick:focus-visible{outline:2px solid #b8883a;outline-offset:2px}
.s-people .W .ppfoot{margin-top:22px;font-size:var(--meta);color:#666d7a;line-height:1.6}
.s-people .W .ppempty{padding:34px 0;color:#666d7a;font-size:var(--body)}


/* ═══════════════════════════════════════════════════════════════════
   CHROME STYLING FOR THE TWO SCREENS ADDED ON 23 AUGUST.

   EVERY nav rule in this stylesheet is scoped per screen —
   `.s-record .pohja-mark`, `.s-home .nav`, and so on for nine screens.
   There are ZERO unscoped nav rules. So a NEW screen inherits nothing:
   the wordmark renders as a raw underlined link, the ask field as an
   unstyled input, and the emblem SVG expands unconstrained into a tall
   gold bar.

   That is exactly what `#people` and `#decisions` looked like on the
   live instance, and no suite could have caught it: jsdom builds a DOM
   and resolves no cascade, so every assertion reads which words reach
   the screen and none reads how any of it looks. STATE.md has said so
   about `test-layout` since it was written; this is the first time it
   cost a whole screen.

   Cloned from `.s-record` rather than rewritten, so the two new screens
   are identical to the eight that were already right, and a future
   change to the record screen's chrome is a change to one block that
   somebody can find by searching for the selector.
   ═══════════════════════════════════════════════════════════════════ */
.s-decisions-table .W .nav{display:flex;align-items:center;background:#f8f9fa;padding:9px 18px;
  border-bottom:1px solid #e8eaec;min-height:56px}
.s-people .W .nav{display:flex;align-items:center;background:#f8f9fa;padding:9px 18px;
  border-bottom:1px solid #e8eaec;min-height:56px}
.s-decisions-table .W .nav{justify-content:space-between}
.s-people .W .nav{justify-content:space-between}
.s-decisions-table .W .askfield{display:flex;align-items:center;gap:9px;width:288px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;
  cursor:text;box-sizing:border-box}
.s-people .W .askfield{display:flex;align-items:center;gap:9px;width:288px;height:34px;
  padding:0 10px 0 11px;background:#fff;border:1px solid #dfe3e5;border-radius:6px;
  cursor:text;box-sizing:border-box}
.s-decisions-table .W .askfield:hover{border-color:#c9ced3}
.s-people .W .askfield:hover{border-color:#c9ced3}
.s-decisions-table .W .askico{flex:none;color:#666d7a}
.s-people .W .askico{flex:none;color:#666d7a}
.s-decisions-table .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.s-people .W .askph{flex:1;font-size:var(--body);color:#666d7a;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.s-decisions-table .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.s-people .W .askkey{flex:none;font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#666d7a;
  border:1px solid #e8eaec;border-radius:3px;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.s-decisions-table .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-people .W .navleftgrp{display:flex;align-items:center;gap:20px}
.s-decisions-table .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;
  border:1px solid #dfe3e5;background:#fff;color:#434a52;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.s-people .W .backbtn{flex:none;width:32px;height:32px;border-radius:50%;
  border:1px solid #dfe3e5;background:#fff;color:#434a52;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.s-decisions-table .W .backbtn:hover{background:#f4f6f7;border-color:#c9ced3;color:#16191c}
.s-people .W .backbtn:hover{background:#f4f6f7;border-color:#c9ced3;color:#16191c}
.s-decisions-table .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-people .pohja-mark{--pohja-scale:1;position:relative;display:inline-block;
  padding-bottom:calc(14px*var(--pohja-scale));line-height:1;cursor:pointer}
.s-decisions-table .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-people .pohja-mark__row{display:flex;align-items:flex-end;gap:calc(10px*var(--pohja-scale))}
.s-decisions-table .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-people .pohja-mark__text{display:flex;flex-direction:column;line-height:1}
.s-decisions-table .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-people .pohja-mark__name{font-family:'Jost','Inter',sans-serif;font-weight:300;
  font-size:calc(16px*var(--pohja-scale));letter-spacing:.26em;color:#16191c;line-height:1.05}
.s-decisions-table .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-people .pohja-mark__sub{font-family:'Inter',sans-serif;font-weight:300;
  font-size:calc(7px*var(--pohja-scale));letter-spacing:.24em;text-transform:uppercase;
  color:#666d7a;margin-top:3px}
.s-decisions-table .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-people .pohja-mark__emblem{flex:none;width:calc(26px*var(--pohja-scale));
  height:calc(42px*var(--pohja-scale));margin-bottom:calc(-3px*var(--pohja-scale))}
.s-decisions-table .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-people .pohja-mark__line{position:absolute;left:0;right:0;bottom:0;height:1px;background:#b8883a}
.s-decisions-table .W .nav{flex:none}
.s-people .W .nav{flex:none}


/* ===================================================================
   THE NEGOTIATIONS LANDING PAGE. Built 9 September 2026 from
   MOCK-negotiations-grouped.html, to STATE.md §9.1 and §9.2.

   SCOPED TO .nglist, WHICH ONLY THIS HYDRATE CREATES. The route reuses
   screen:record, so anything scoped to .s-record would leak onto the
   fifteen other destinations sharing that shell.

   NO STICKY GROUP HEAD. Ruled 9 September: it would be the first
   sticky element in Pohja and a reviewer held it unnecessary at nine
   records. One declaration to add if twenty ever arrives.

   NO GOLD ANYWHERE. §9.2 — #b8883a means "this needs you" and this is
   a list on which Pohja refuses to say which row deserves attention.
   =================================================================== */
.s-record .nglist{max-width:1000px}
.s-record .ngh1{font-size:var(--title);font-weight:400;color:#16191c;margin:0 0 3px}
.s-record .ngsub{font-size:var(--body);color:#666d7a;margin:0 0 22px}
.s-record .ngsub b{font-weight:500;color:#2e3439}
/* THE HISTORICAL CANVAS. §9.1 — a continuous ground behind a whole
   group, no radius, no border, never a tint on a row. Padding not
   margin on the head: a margin-top collapses through the wrapper and
   opens a gap the ground cannot paint. */
.s-record .nggrp.closed{background:#f9f2e6;margin:0;padding:0 0 6px}
.s-record .nggrp.closed .nggh{background:#f9f2e6}
.s-record .nggrp.closed .ngrow:last-child{border-bottom:0}
.s-record .nggh{display:flex;align-items:baseline;gap:10px;margin:0;
  padding:30px 2px 9px;border-bottom:1px solid #2e3439;background:#fff}
.s-record .nggrp:first-child .nggh{padding-top:14px}
.s-record .nggn{font-size:var(--lead);font-weight:400;color:#16191c;margin:0}
.s-record .nggc{font-size:var(--meta);color:#666d7a}
.s-record .ngrow{padding:14px 2px 15px;border-bottom:1px solid #e8eaec}
.s-record .ngref{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);
  font-weight:500;color:#5e6469;margin:0 0 3px}
.s-record .ngtitle{font-size:var(--lead);font-weight:400;color:#16191c;margin:0;line-height:1.35}
.s-record .ngmeta{font-size:var(--meta);color:#666d7a;margin:5px 0 0}
.s-record .ngmeta span+span::before{content:" \00b7 "}
/* THE UNRESOLVED ISSUE. One line in the row's own ink — that darkness
   is the whole of its emphasis. No mark, no tint, no panel. */
.s-record .ngunres{font-size:var(--meta);color:#2e3439;margin:6px 0 0}
.s-record .ngunres b{font-weight:500}
.s-record .ngvis{font-size:var(--meta);color:#5e6469;margin:6px 0 0}
.s-record .ngfoot{font-size:var(--meta);color:#5e6469;margin:22px 0 0;line-height:1.6;max-width:640px}
.s-record .ngempty{font-size:var(--body);color:#5e6469;padding:20px 0;max-width:640px;line-height:1.55}
/* THE DISCLOSURE. §9.3 — a text trigger, never an icon; hover plus
   focus and click, because hover alone is unreachable on touch and by
   keyboard. Explanation only: no number ever goes behind it. */
.s-record .nggd,.s-people .nggd,.s-decisions-table .nggd{position:relative;display:inline-block}
.s-record .nggdt,.s-people .nggdt,.s-decisions-table .nggdt{font:inherit;font-size:var(--meta);color:#5e6469;background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px}
.s-record .nggdt:hover,.s-people .nggdt:hover,.s-decisions-table .nggdt:hover,.s-record .nggdt:focus-visible,.s-people .nggdt:focus-visible,.s-decisions-table .nggdt:focus-visible{color:#2e3439}
.s-record .nggdt:focus-visible{outline:2px solid #5e6469;outline-offset:3px;border-radius:3px}
.s-record .nggdp,.s-people .nggdp,.s-decisions-table .nggdp{position:absolute;left:0;top:calc(100% + 7px);z-index:5;width:290px;
  background:#fff;border:1px solid #e8eaec;border-radius:6px;padding:10px 12px;
  font-size:var(--meta);color:#2e3439;line-height:1.55;
  box-shadow:0 1px 3px rgba(0,0,0,.06);display:none}
.s-record .nggd:hover .nggdp,.s-people .nggd:hover .nggdp,.s-decisions-table .nggd:hover .nggdp,.s-record .nggd:focus-within .nggdp,.s-people .nggd:focus-within .nggdp,.s-decisions-table .nggd:focus-within .nggdp,.s-record .nggd[data-open="1"] .nggdp,.s-people .nggd[data-open="1"] .nggdp,.s-decisions-table .nggd[data-open="1"] .nggdp{display:block}

/* ===================================================================
   THE §18 SUMMARY TABLE, built 9 September 2026 from
   MOCK-negotiation-summary-table.html, to NEGOTIATION-SPEC-v2-rebuilt
   §18 and STATE.md §9.1.

   NOT A TABLE OF COLUMNS. §18 draws it as one, but six columns of
   which three are em-dashes on the row that matters is a wide way of
   showing an absence. The mock stacks each issue instead and the
   em-dash becomes a sentence — "No decision recorded." — which carries
   the same weight Gerry gave it on 18 August: five movements, no
   decision, and that IS the record rather than a gap in it.

   THE SORT CREATES THE SETS, which is why the canvas fits here. §18
   puts movements-without-a-decision at the top; that sort produces
   exactly two groups, Not decided and Decided, and Decided is what no
   longer speaks for the organisation.
   =================================================================== */
/* THE HOST THE SETS ARE WRITTEN INTO. Declared because test-shell is
   right that an undeclared class falls back to the browser and every
   other check reads past it — including this file's own. */
.s-record .ngsummary{display:block}
.s-record .ngset{margin:0}
.s-record .ngset.settled{background:#f9f2e6;padding:0 0 6px}
.s-record .ngset.settled .ngseth{background:#f9f2e6}
.s-record .ngset.settled .ngtrow:last-child{border-bottom:0}
.s-record .ngseth{display:flex;align-items:baseline;gap:10px;margin:0;
  padding:22px 2px 8px;border-bottom:1px solid #2e3439;background:#fff}
.s-record .ngsethn{font-size:var(--lead);font-weight:400;color:#16191c;margin:0}
.s-record .ngsethc{font-size:var(--meta);color:#666d7a}
.s-record .ngtrow{padding:13px 2px 14px;border-bottom:1px solid #e8eaec}
.s-record .ngtissue{font-size:var(--lead);font-weight:400;color:#16191c;margin:0;line-height:1.35}
.s-record .ngtmeta{font-size:var(--meta);color:#666d7a;margin:4px 0 0}
.s-record .ngtmeta span+span::before{content:" \00b7 "}
/* WHERE IT STANDS, in the row's own ink. Darker than the meta line
   above it, and that is the whole of its emphasis. */
.s-record .ngtstands{font-size:var(--meta);color:#2e3439;margin:6px 0 0}
.s-record .ngtstands b{font-weight:500}
.s-record .ngtlast{font-size:var(--meta);color:#5e6469;margin:5px 0 0;line-height:1.55;max-width:640px}
.s-record .ngtnote{font-size:var(--meta);color:#5e6469;margin:14px 0 0;max-width:640px;line-height:1.6}

/* ── HOME: THE DAY DRAWN, AND THE ONE MEETING INSIDE ITS WINDOW ──────
   Ruled by Gerry 14 September 2026 on `MOCK-home-quiet.html`. The teal is
   the alert colour ruled on 12 September and appears here on ONE thing: the
   meeting inside its window, which is also the control. Nothing else on the
   day wears it, and on a day with nothing inside its window the screen draws
   none of it. */
/* THE BAND IS A BAND, not a bar floating over a hairline. 14 September 2026,
   after Gerry saw the first build: the meeting sat above a rule with nothing
   holding it, the hours hung underneath, and the whole thing read as three
   unrelated marks. The ground carries the day; the bars sit IN it. */
/* THE LINE, NOT A BAND — 14 September 2026. Gerry, with three pictures side
   by side: *the line instead of the band behind loses the meeting squares.*
   A filled ground and a filled lozenge are the same object at two shades, so
   the day read as one long bar with darker patches in it. A hairline with the
   blocks sitting ON it separates the day from the things in it. Hours above
   the line, now below it, so the two rows cannot collide. */
/* ── THE TIMELINE, TO THE DRAWING — 14 September 2026 ─────────────────
   Built to `MOCK-home-quiet.html`'s band, item by item: hours above the line,
   a faint gridline under each, one hairline for the day, meetings straddling
   it, now as a gold hairline with a dot ON the line and its label beneath.
   **Hours above and now below is what makes the suppression rule unnecessary**
   — they are on different sides of the axis and cannot meet.

   NO NEW VALUES. Both greys, the neutral, the gold and the teal are already
   in the client; the type is the micro size in the product's own family; the
   radius is 3px, which the scheme reserves for a small square that is
   deliberately not a control — a meeting on the day is not pressable, the
   named line beneath it is. */
.s-home .hometl{position:relative;height:74px;margin:16px 0 2px}
.s-home .hometl::before{content:'';position:absolute;left:0;right:0;top:30px;height:1px;
  background:#dfe3e5}
.s-home .hometlgrid{position:absolute;top:16px;width:1px;height:14px;background:#eceef0}
.s-home .hometlb{position:absolute;top:24px;height:14px;background:#c9ced3;border-radius:3px;
  box-shadow:0 0 0 1px #fff}
.s-home .hometlb.on{background:#0f6b5c}
.s-home .hometlnow{position:absolute;top:13px;width:1px;height:25px;background:#b8883a}
.s-home .hometlstar{position:absolute;width:17px;height:18px;transform:translateX(-50%)}
.s-home .hometick{position:absolute;top:0;font-size:var(--micro);color:#a8b0b7;
  transform:translateX(-50%);white-space:nowrap}
.s-home .hometicknow{position:absolute;top:59px;font-size:var(--micro);color:#8c96a1;
  transform:translateX(-50%);white-space:nowrap}
.s-home .homelive{display:flex;gap:11px;align-items:center;padding:11px 0 0}
.s-home .homelivewhat{flex:1 1 auto;color:#16191c}
.s-home .homelivewho{display:block;font-size:var(--meta);color:#666d7a}

/* THE DATE AND THE COUNT SHARE A LINE, as they do in the drawing: two blocks
   stacked made the day take two lines to say one thing. */
.s-home .greet{display:inline}
.s-home .greetsub{display:inline;margin-left:11px}

/* ── A VERDICT BESIDE WHAT POHJA READ — 16 September 2026 ─────────────
   Ruled A on MOCK-comparison-verdict.html. The markup is the template
   #tpl-rfp-cell in index.html. What a person recorded sits under the
   reading, separated by one hairline; nothing is drawn where nobody acted.
   No colour carries the verdict — compliant and not compliant are words. */
.s-compare .W td .rfpcell .vd{margin-top:9px;padding-top:8px;border-top:1px solid #e8eaec;width:100%}
.s-compare .W td .rfpcell .vdword{margin:0;font-size:var(--body);font-weight:500;color:#16191c}
.s-compare .W td .rfpcell .vdby{margin:2px 0 0;font-size:var(--meta);color:#666d7a}
.s-compare .W td .rfpcell .vdnote{margin:3px 0 0;font-size:var(--meta);color:#2e3439}
.s-compare .W td .rfpcell .vdacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.s-compare .W td .rfpcell .vdbtn{font-size:var(--meta);padding:5px 10px}
.s-compare .W td .rfpcell .vderr{margin:6px 0 0;font-size:var(--meta);color:#16191c}

/* ── A REQUEST FOR PROPOSAL, END TO END — 16 September 2026 ──────────
   Ruled 1A, 2A, 3B on MOCK-rfp-flow.html. Markup in index.html
   (#tpl-cmp-kind, #tpl-cmp-supplier, #tpl-rfp-records, #tpl-rfp-cell). */
.s-upload .cmpkind{margin:0 0 14px}
.s-upload .cmpkindlab{margin:0 0 6px;font-size:var(--meta);color:#666d7a}
.s-upload .fsupplier .flabel{min-width:52px}
.s-compare .W .rfprecords{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:0 0 12px;margin:0 0 12px;border-bottom:1px solid #e8eaec}
.s-compare .W .rfprline{margin:0;font-size:var(--body);color:#434a52}
.s-compare .W .rfprline a{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#434a52}
.s-compare .W .rfprhint{flex-basis:100%;margin:0;font-size:var(--meta);color:#666d7a}
.s-compare .W .rfprerr{flex-basis:100%;margin:0;font-size:var(--meta);color:#16191c}
.s-compare .W td .rfpcell .vdraise{margin-top:8px}
.s-compare .W td .rfpcell .vdrec{font-family:'IBM Plex Mono',monospace;font-size:var(--mono);color:#434a52}

/* The meeting line on a thread opened from the Asks list — 16 September 2026. */
.s-record .W .ameet{margin:0 0 10px;font-size:var(--body);color:#2e3439}
.s-record .W .ameet .ameetjoin{color:#16191c;font-weight:500}
.s-record .W .ameet .ameetstate{color:#434a52}

/* Which meeting a row is: its day, time and people — 16 September 2026. Reads as
   the rest of the row's meta line. */
.s-record .W .ameetrow{color:inherit}
/* A meeting whose transcript has arrived — ruled teal, 16 September 2026. */
.s-record .W .atranscript{display:inline-block;background:#0f6b5c;color:#fff;font-weight:500;
  border-radius:13px;padding:0 8px;margin-left:5px;line-height:1.6}
/* Where the transcript stands, under the meeting line on a list thread — 16 September 2026. */
.s-record .W .ameet .ameetnote{display:block;margin-top:3px;font-size:var(--meta);color:#666d7a}
/* The transcript is in: a teal dot above that meeting's chip on Home's day line,
   a link to its Ask — 16 September 2026. */
.s-home .hometltx{position:absolute;top:15px;width:6px;height:6px;border-radius:50%;
  background:#0f6b5c;transform:translateX(-50%);z-index:2}
/* A SIX-PIXEL DOT IS A TARGET NOBODY CAN HIT, AND IT WAS UNDER THE HOUR LABEL.
   Found by Gerry, 16 September 2026, at 15:04: pressing the 14:45 meeting's dot
   gave a text cursor. The hour labels are drawn after the chips and dots, so
   *15:00* sat on top of the dot and took the press — measured in a browser: the
   element under the dot's centre was the label. The labels, gridlines, now-line,
   star and time are markings, so they no longer take the pointer; and the dot
   answers a press anywhere within nine pixels of its centre. */
.s-home .hometltx::after{content:'';position:absolute;left:-6px;top:-6px;width:18px;height:18px;border-radius:50%}
.s-home .hometick,.s-home .hometicknow,.s-home .hometlgrid,.s-home .hometlnow,.s-home .hometlstar{pointer-events:none}
.s-home .hometlb{z-index:1}
/* Edit on a person's row, for the Memory Owner — ruled 16 September 2026. The
   thread's Keep shape: a chip is a chip. */
.s-people .W .peditchip{flex:none;margin-left:auto;font-family:'Inter',sans-serif;font-size:var(--meta);font-weight:500;
  border-radius:13px;border:1px solid #dfe3e5;background:#fff;color:#434a52;height:24px;padding:0 11px;
  display:inline-flex;align-items:center;cursor:pointer;white-space:nowrap}
.s-people .W .peditchip:hover{background:#f4f6f7;border-color:#c9ced3}