/* office-built.css — what the BUILT office needs that the design package does not carry.
 *
 * S-WEB-UI-1, 18 September 2026. Loaded after `tokens.css` and `office.css`, both of which are lifted
 * from `design/office-v0.3/` byte-identical and **are never edited**. Everything this file adds is
 * expressed in the package's own tokens: no hex, no colour, no spacing number that a token names.
 *
 * WHY IT HAS TO EXIST, measured in Task 0. `office.css` styles CLASSES and nothing else — `.table`,
 * `.input`, `.btn`. The office's forty-two templates were written over five months against bare
 * `<table>`, `<input>`, `<button>`, and rewriting every element in every one of them by hand is how a
 * skin session breaks a working system. So the elements are met where they are: the rules below give a
 * bare element the same declarations the package gives its classed twin, scoped under `.office` so
 * nothing leaks. A template that wants a pattern still reaches for the pattern's class; a template that
 * has not been touched yet still looks like the office rather than like 1996.
 *
 * WHERE A NEW PAGE FINDS ITS PATTERN: `design/office-v0.3/design-ledger.md` §4. Use the class. This
 * file is for what the built office already is, not a place to invent a second design language.
 */

/* --- the page frame ------------------------------------------------------------------------------- */

html, body { margin: 0; padding: 0; background: var(--surface); }
/* `office.css` sets its type on `.office`, so anything rendered outside that wrapper falls back to the
   browser's serif — measured: `document.body`'s computed family was "Times New Roman". Nothing renders
   outside the wrapper today, and this makes sure nothing ever does by accident. */
body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ink); }

/* `hidden` MUST WIN over anything this file says about display.
   Found by looking at a screenshot: `.office p.help { display: block }` overrode the browser's own
   `[hidden] { display: none }`, so BOTH of the imagery sentences — "no key is set" and "the imagery
   could not be fetched" — were visible at once, on a page using neither. The selector test cannot catch
   this: the name has a rule, and the rule is simply wrong. A picture caught it. */
.office [hidden] { display: none !important; }

/* --- bare elements, given the package's own values ------------------------------------------------ */

.office table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  background: var(--surface-panel);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 0 var(--space-5);
}
.office table th {
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--ink-secondary);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--hairline) solid var(--border);
  background: var(--surface-sunken);
  vertical-align: bottom;
}
.office table td {
  padding: 10px var(--space-3);
  border-bottom: var(--hairline) solid var(--border);
  vertical-align: top;
}
.office table tr:last-child td { border-bottom: 0; }
.office table td code { white-space: nowrap; }

/* A table used for layout rather than for rows of data — the record pages' two-column field lists —
   keeps the type but drops the panel, so a record does not read as a grid of results. */
.office .kv table, .office table.kv { border: 0; background: none; }
.office table.kv th { background: none; border-bottom: var(--hairline) solid var(--border);
                      width: 180px; white-space: normal; }

/* EVERY input a person types into -- listed by what it is NOT, because the list of what it IS was
   always going to miss one. It did: `<input name="reason">` carries no `type` attribute at all in
   eleven templates, so it matched none of the `input[type="…"]` selectors and rendered 21 px while
   everything beside it was 40. The browser walk found all eleven in one run; reading the templates
   would not have. */
.office input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.office select, .office textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  background: var(--surface-panel);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-sm);
  /* AP2 (S-WEB-UI-1b): a control is tall enough to read and to hit. The founder's point 2 -- "some text
     boxes too low". 15px text on a 22px line with 6px padding rendered 36 px; the padding is a token
     step taller now, and `min-height` catches the controls the browser sizes its own way (date pickers
     above all). The browser suite MEASURES this on every photographed page and fails under 40 px, so
     this rule cannot quietly regress. */
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
  max-width: 100%;
}
/* A reason is two lines everywhere (AP2), so a textarea must actually fit two: 2 x 22px of line, the
   padding above, and the hairline. Anything shorter makes a person type into a slot. */
.office textarea { min-height: 62px; }
.office input:focus, .office select:focus, .office textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
/* A file input is a control a person clicks, so AP2's floor applies to it too -- it was 22 px. The
   browser draws its own button inside it, so the height comes from padding rather than line-height. */
.office input[type="file"] { font-family: var(--font-sans); font-size: 14px;
  padding: var(--space-2) var(--space-3); min-height: 40px; }
.office input[type="checkbox"], .office input[type="radio"] { accent-color: var(--accent); }

/* Every write in this office pairs its verb with a reason, and the reason is prose, not a code.
   `BLOCKERS.md` #28 is the complaint that it was too narrow to read what you had typed. */
.office input[name="reason"], .office input[name="reference"] { width: 100%; max-width: var(--form-max); }

.office button, .office input[type="submit"] {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  /* AP2: the same floor for the thing you press. A 34 px button next to a 40 px input also reads as an
     afterthought, which is half of what "squeezed" meant. */
  padding: var(--space-2) var(--space-4);
  min-height: 40px;
  border-radius: var(--radius-md);
  border: var(--hairline) solid var(--border-strong);
  background: var(--surface-panel);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.office button:hover, .office input[type="submit"]:hover { border-color: var(--ink-secondary); }
.office button.btn-primary, .office button[type="submit"].primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.office button.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.office label { font-family: var(--font-sans); font-size: 15px; line-height: 22px; }
.office fieldset { border: var(--hairline) solid var(--border); border-radius: var(--radius-md);
                   padding: var(--space-4); margin: 0 0 var(--space-5); }
.office legend { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-secondary);
                 padding: 0 var(--space-2); }
.office hr { border: 0; border-top: var(--hairline) solid var(--border); margin: var(--space-5) 0; }
.office ul, .office ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.office li { margin: 0 0 var(--space-1); }

/* --- the classes the built office already names, which the package does not know about ------------- */
/* Measured in Task 0: sixteen classes and five ids were referenced by templates and matched no rule in
   any stylesheet — `.help` alone appears on most pages. That is the same class of fault that shipped a
   blank map, endemic rather than exceptional. Each one below is given the nearest ledger value. */

.office .help {                      /* help under a field, and every "the system is telling you why" line */
  font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--ink-muted);
  display: inline-block; margin: var(--space-1) 0 0;
}
.office p.help { display: block; max-width: var(--form-max); }

.office .filters {                   /* the sunken filter bar above a table (ledger §4) */
  background: var(--surface-sunken); border: var(--hairline) solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom: 0;
  padding: var(--space-3) var(--space-4); margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end;
}
.office .filters + table { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.office .filters label { font-size: 12px; line-height: 16px; color: var(--ink-secondary); }
/* AP2 applies in the filter bar too. The bar is visually quieter -- smaller type, sunken ground -- but
   a filter is still a control a person hits, and 28 px was the smallest thing in the office. */
.office .filters input, .office .filters select { font-size: 14px; line-height: 20px;
  padding: var(--space-2) var(--space-2); min-height: 40px; }
.office .filters button { min-height: 40px; }

.office .bulk {                      /* the bulk-verify bar: one reason for a set of rows */
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end;
  padding: var(--space-3) var(--space-4); background: var(--surface-sunken);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-md);
  margin: 0 0 var(--space-5);
}
.office .verify { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }

.office .header-fields { margin: 0 0 var(--space-5); }   /* a record page's head block */
.office .notes { list-style: none; padding: 0; }
.office .notes li { padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--border); }
.office .system-note { color: var(--ink-muted); }
.office .thumb { width: var(--thumb); }
.office .thumb img { width: 100%; height: auto; border-radius: var(--radius-md);
                     border: var(--hairline) solid var(--border); }
.office .totals { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0 0 var(--space-5); }
.office .invite-target { font-family: var(--font-mono); font-size: 13px; }
.office .version { color: var(--ink-muted); font-size: 13px; }
.office .tr { display: block; }                          /* the agreement's Turkish paragraph block */
.office .changed { margin: 0; padding-left: var(--space-4); }
/* AP4(a): `.ended` NO LONGER RECOLOURS A ROW'S VALUES. It used to paint every cell in
   `--state-ended` -- the same value as `--ink-muted`, which the ledger says in as many words is
   "Never for values". The founder found it on the grants list: an ended grant's dates, organisation
   and tier were all quieter than the live ones, so the hardest rows to read were the ones you go
   looking for. Every row that carries this class already prints its own state as a word (pads: the
   status; paper: the refusal; the QA block: the outcome; parties: valid_to), and the grants list now
   prints *ended* as a status word too. The class stays as a hook, and paints nothing. */
.office .ended { }

/* The night's verdict word in the header — one word, coloured by mood, and the word is always printed. */
.office .night-word { font-family: var(--font-mono); font-size: 13px; padding: 2px var(--space-2);
                      border-radius: var(--radius-sm); white-space: nowrap; }
.office .night-ok { color: var(--state-good); background: var(--state-good-bg); }
.office .night-warn { color: var(--state-wait); background: var(--state-wait-bg); }
.office .night-fail, .office .night-error { color: var(--state-bad); background: var(--state-bad-bg); }
.office .nights { list-style: none; padding: 0; }

/* --- the message states, under the name the built office already uses ------------------------------ */
/* The ledger's pattern is `.msg` with five moods (§4). The built office has said `class="message"` since
   S-WEB-1, in twenty-one templates, with `role="alert"` marking the ones that are refusals — which is a
   better signal than a class, because it is also what a screen reader acts on. So `.message` IS the
   pattern here, and the mood follows the role rather than a second class nobody would remember to set. */
.office .message {
  font-family: var(--font-sans); font-size: 15px; line-height: 22px;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: var(--hairline) solid var(--border);
  background: var(--state-good-bg); color: var(--state-good);
  margin: 0 0 var(--space-5); max-width: var(--content-max);
}
.office .message[role="alert"] { background: var(--state-bad-bg); color: var(--state-bad);
                                 border-color: var(--state-bad); }
.office .message code { color: inherit; }

/* --- the one-time enrolment code (ledger §4: `.otc` / `.code-large`) -------------------------------- */
/* Shown once, large, mono, selectable in one gesture, with the sentence that says so. */
.office .code-once {
  background: var(--surface-panel); border: var(--hairline) solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-7) var(--space-4);
  text-align: center; margin: 0 0 var(--space-5);
}
.office .enrol-code {
  font-family: var(--font-mono); font-size: 40px; line-height: 48px; letter-spacing: 0.12em;
  color: var(--ink); user-select: all; display: block;
}

/* --- small things the built office names --------------------------------------------------------- */
.office .en { color: var(--ink-muted); }          /* the English half of a pre-LANG-1 two-language block */
.office .quiet { color: var(--ink-muted); }
.office .blocks { list-style: none; padding: 0; }  /* the dashboard's blocks, each a count and a link */
.office .blocks li { padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--border); }
.office .agreement { max-width: var(--form-max); }

/* --- the maps -------------------------------------------------------------------------------------- */
/* MOVED HERE FROM `style.css`, WITH BOTH IDS, and the comment travels with it because it is the most
 * expensive lesson this office has learned. Leaflet sets no height on its container; the page must. The
 * drawing screens use a different id from the read-only map, `#draw-map` matched no rule, and both of
 * them rendered ZERO PIXELS HIGH with every asset answering 200 and no JavaScript error, because a
 * selector that matches nothing is silent. The browser test asserts the rendered height of both.
 * `#task-map` (S-WEB-5b, AX4) is the same lesson applied before the page ever shipped, not after. */
.office #map, .office #draw-map, .office #task-map {
  height: 420px; width: 100%; background: var(--surface-sunken);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-md);
  margin: 0 0 var(--space-3);
}
.office #map.no-tiles, .office #map.tiles-failed,
.office #draw-map.no-tiles, .office #draw-map.tiles-failed,
.office #task-map.no-tiles, .office #task-map.tiles-failed { background: var(--surface-sunken); }
.office #map.empty::after { content: attr(data-empty-label); display: block;
                            padding: var(--space-4); color: var(--ink-secondary); }

/* --- the header, where the built office differs from the drawn one --------------------------------- */
/* The drawn header carries a Find box; AM7 leaves it out rather than drawing a dead input, so the
 * tier-1 row has two members instead of three and the who-cluster takes the space. */
.office-header .tier-1 { gap: var(--space-4); }
.office-header .tier-1 .who { margin-left: auto; }
.office-header .who form { display: inline; margin: 0; }
.office-header .who button {
  font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400;
  background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: none;
}
.office-header .who button:hover { color: var(--accent-hover); text-decoration: underline; border: 0; }

/* Six groups and their longest Turkish labels have to fit at 1024px without wrapping into a second
 * line that hides the sub-navigation. Measured in the browser test at 1280 and at 1024, in both
 * languages. */
.office-header .nav { flex-wrap: wrap; }
.office-header .subnav ul { flex-wrap: wrap; }

/* --- forms: the built office's paragraphs-of-fields ------------------------------------------------ */
/* Most built forms are `<p><label>…<input></label></p>`, which the package's `.form .field` does not
 * describe. Given the same rhythm here so a form reads as a column of fields either way. */
.office form p { margin: 0 0 var(--space-4); max-width: var(--form-max); }
.office form p label { display: block; font-size: 12px; line-height: 16px; font-weight: 500;
                       color: var(--ink-secondary); }
.office form p label input, .office form p label select, .office form p label textarea {
  display: block; margin-top: var(--space-1); font-size: 15px; line-height: 22px; color: var(--ink);
  font-weight: 400;
}
.office form p label input[type="checkbox"], .office form p label input[type="radio"] {
  display: inline-block; margin: 0 var(--space-2) 0 0;
}
/* a row of buttons is a row, and it does not inherit the field width */
.office form p:has(button) { max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-2);
                             align-items: center; }
.office form.inline { display: inline; }
.office form.inline p { display: inline; margin: 0; }


/* ---------- AP7 (S-WEB-UI-1b): headings and sections breathe ---------------------------------------
   `BLOCKERS.md` #65, and the founder's point 1. `office.css` sets `.office h2 { margin: 0 0 space-3 }`
   -- ZERO above -- so on every signed-in page a section heading sat directly against the paragraph or
   table before it: on the landbase record page *Durum*, *Nerede olduğu*, *Rıza* and *Devir* all
   collided with what preceded them. `office.css` is lifted and never edited, so the top margin belongs
   here, in the ledger's own rhythm: `--space-5` is what §3 gives for "between sections on a record
   page".

   `:not(:first-child)` so the first heading in a panel does not push itself away from the panel's own
   padding. The browser suite asserts a non-zero gap above every `h2` that is not first in its
   container, which is exactly the shape of the defect. */
.office h2:not(:first-child),
.office h3:not(:first-child) { margin-top: var(--space-5); }

/* A table that follows prose needs the same air; without it the sentence introducing a table reads as
   part of the header row. */
.office p + table,
.office p + .table-wrap,
.office .help + table { margin-top: var(--space-3); }

/* Consecutive sections on a record page. `--space-5` again: one rhythm, not two. */
.office section + section { margin-top: var(--space-5); }

/* ---------- AP4 (S-WEB-UI-1b): text that failed the measurement, fixed with the RIGHT TOKEN ----------
   Found by the browser walk computing every rendered text node against its effective background. Two
   distinct faults, repeated across 58 nodes on 29 screens. Neither is a palette fault: the ledger's own
   named pairs all clear 4.5:1 when computed from `tokens.css`
   (`scripts/scratch/s_web_ui_1b/task0_contrast.py`). Both are a token used for something it is not for.

   1. The header's separator dot. `office.css` sets `.office-header .who .sep { color: var(--border-strong) }`
      -- a BORDER token, which the ledger holds to 3:1 precisely because it outlines rather than reads.
      As text on the panel it measured 3.75:1. `--ink-muted` is the ledger's token for exactly this kind
      of quiet secondary mark and gives 6.03:1. `office.css` is lifted and never edited, so the
      correction lives here.

   2. Leaflet's own attribution link, `#0078a8` from the vendored library's stylesheet, measured 4.04:1
      on the map's sunken ground. It is a third-party colour, not one of ours and not one the designer
      can change from `tokens.json`. `--accent` gives 4.93:1 and is the office's own link colour, so the
      attribution now reads like every other link in the office. */
.office-header .who .sep { color: var(--ink-muted); }
.office .leaflet-control-attribution,
.office .leaflet-control-attribution a { color: var(--accent); }

/* ---------- BA1-BA7 (S-WEB-5c, 20 September 2026): figures -- a table, drawn ------------------------
   The ledger's own figure pattern already covers almost everything a figure needs: `.figure`,
   `.fig-title`, `.fig-sub`, `figcaption`, `.legend` (design-ledger.md §4), and `office.css` already
   defines `.figure svg`, `.grid`, `.axis-text`, `.val`, `.s1`-`.s4`, `.l1`/`.l2` (its own "figure (a
   chart with its provenance)" block). `.marker` is the ONE class the ledger does not already name --
   BA3-1's "the land base's own value drawn as a line across them", a single reference line spanning a
   whole bar chart rather than one series among several -- borrowed from `.score .bar b`'s own
   precedent in `office.css` (an unused-until-now div-based marker-over-a-fill pattern), translated into
   the SVG stroke this session's figures actually draw, in the SAME token that pattern uses. */
.office .figure .marker { stroke: var(--chart-series-2); stroke-width: 2; }

/* ---------- S-WEB-NAV-FIX (21 September 2026): where am I, breathing room, one door per job -------- */

/* BD3: the active sub-link is now computed from the PATH (`navigation()`, longest-prefix match), not
   from the click that reached it -- and office.css's own `[aria-current="page"]` rule on `.subnav a`
   is text-weight only, no fill. The package already names the intended pair for exactly this: the
   token comment on `--surface-accent-tint` (tokens.css) says "the active navigation item"; `.segments
   a[aria-current="page"]` and `.queue li[aria-current="true"] a` (office.css) already use it for the
   same idea elsewhere. Measured: --ink on --surface-accent-tint clears 14.41:1, far past the 4.5:1
   floor. */
.office-header .subnav a[aria-current="page"] {
  background: var(--surface-accent-tint);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  margin: -2px calc(var(--space-2) * -1);
}

/* BD4: the group bar (`.tier-2`, inherits --surface-panel from `.office-header`) and the sub-menu bar
   (`.subnav`, --surface-sunken) measure 1.224:1 against each other -- effectively indistinguishable at
   a glance, which is exactly the founder's own report. No OTHER surface token in the package beats it
   (--surface-accent-tint is WORSE, 1.18:1; --surface itself, 1.119:1) -- the palette is genuinely this
   monochromatic by design (a placeholder, brand pending), so a fill is not the fix. The dividing BORDER
   is: office.css's own `.subnav` already carries `border-top: 1px solid var(--border)`; `--border-strong`
   (3.754:1 against white, already used elsewhere for the same "a clear line, not a colour" purpose --
   the role chip, the org-switch) makes that seam a real line instead of a hairline that reads the same
   as every other hairline on the page. */
.office-header .subnav { border-top: 1px solid var(--border-strong); }

/* BD2: a LIST's own create verb sits top right (§3.3) -- a record page's own verb row (BC3) stays
   left, because a record's verbs lead the page and a list's verb is an aside to the table beneath it.
   One class, applied only to the list-page button rows S-WEB-NAV built (never the record-page ones). */
.office .btn-row.list-verbs { justify-content: flex-end; }

/* BD5: a verb row breathes before what follows it -- the same --space-5 skin rule 7 already gives a
   heading, extended to a `.btn-row` immediately above a table, a map, or a filter bar (Land's Draw/
   Import sat on the map with no air below them; Campaigns' own create button sat on the table the
   same way). */
.office .btn-row + .filters,
.office .btn-row + table,
.office .btn-row + .table-wrap,
.office .btn-row + .map,
.office .btn-row + #map,
.office .btn-row + #draw-map { margin-top: var(--space-5); }

/* BD6: a table inside a `.form`-classed wrapper (results.html's own bulk-verify form, and
   landbase_verify.html's, sharing the identical shape) inherits that wrapper's own `max-width:
   var(--form-max)` (640px) -- half of `--content-max` (1280px) -- which is why the table renders
   narrower than the `.filters` bar above it (a SEPARATE, un-form-max-capped element). `.office table`
   already carries `width: 100%` (measured: true before this session); the constraint is the ANCESTOR's
   max-width, not the table's own. The reason/checkbox controls further down the SAME form legitimately
   want the narrower width the ledger's own form pattern asks for -- only the table itself is freed. */
.office form.form:has(> table) { max-width: none; }
.office form.form:has(> table) > table { max-width: var(--content-max); }

/* BI2/BI5 (S-WEB-6c-FIX): the authoring form's own two-tier row -- primary columns in one <tr>,
   secondary columns in a second, LIGHTER one beneath the same record (`.pf-secondary`), so neither
   table needs a horizontal scroll at 1280px (measured: 2076px of real overflow before this).
   Background only, never `--ink-muted` on the text -- that token is never for a VALUE (the `.ended`
   lesson, met again), and a secondary column's own typed content is still real data. `.pf-hint` is
   the one-sentence, plain-words help under a primary column's own header (BI5) or beside a
   secondary column's own inline label. */
.office .pf-secondary { background: var(--surface-sunken); }
.office .pf-secondary td { border-top: none; }
.office .pf-hint { display: block; font-weight: normal; font-size: 12px; color: var(--ink-muted); }
/* `table-layout: auto` (the package's own default, above) sizes each column from its cells' own
   MINIMUM content width -- a bare <input>/<select>'s browser default (~170px, or a <select>'s own
   longest option), which is why BI2's own row split alone still measured 1366px at 1280px (86px of
   overflow, down from 2076px): auto layout does not obey `max-width` when the sum of those minimums
   exceeds it. `table-layout: fixed` distributes the table's own (now bounded) width across its
   columns instead of reading each cell's content, and the controls below fill whatever share of a
   column that leaves them. */
.office .pf-table { table-layout: fixed; }
.office .pf-table input, .office .pf-table select { width: 100%; box-sizing: border-box; }
.office .pf-secondary label { display: block; font-size: 12px; color: var(--ink-muted); margin-bottom: 2px; }

/* ===================================================================================================
   S-WEB-C1a (Web Spec §14): a land base read in layers -- the picture (layer 1) and the score (layer 2).

   THE FIVE SCORE CLASSES (§14.4) are one custom property, `--sc`, set by the class
   `score_classes.css_class_of()` names and read by every mark that shows a class: a swatch, a map dot,
   the boundary, a bar, a trend point, a large number. Tokens only. The two warm classes are
   `--state-bad` and `--state-wait` MEANWHILE: §14.4 asks for a mid-warm step the ledger does not yet
   have (`BLOCKERS.md` #88, the architect's), and a session never picks a colour.
   `sc-none` is a value with no class (not a number, off the scale, or a scale with no zero inside it):
   drawn in the quiet border tone, with its sentence printed beside it. */
.office .sc-very_low { --sc: var(--state-bad); }
.office .sc-low { --sc: var(--state-wait); }
.office .sc-neutral { --sc: var(--state-ended); }
.office .sc-high { --sc: var(--chart-series-1); }
.office .sc-very_high { --sc: var(--accent-hover); }
.office .sc-none { --sc: var(--border-strong); }
/* #91 (S-WEB-C1b): a scale with no zero inside it -- five equal bins, the same five tokens in the same
   order (lowest = very low's token ... highest = very high's); `sc-low`/`sc-high` are shared. */
.office .sc-lowest { --sc: var(--state-bad); }
.office .sc-middle { --sc: var(--state-ended); }
.office .sc-highest { --sc: var(--accent-hover); }
.office .sc-swatch { display: inline-block; width: var(--space-3); height: var(--space-3);
  border-radius: var(--radius-sm); background: var(--sc); vertical-align: -1px; margin-right: var(--space-1); }
.office .sc-num { color: var(--sc); }
.office .sc-num.sc-none { color: var(--ink); }
.office svg .sc-point { fill: var(--sc); stroke: var(--surface-panel); stroke-width: 3; }
.office svg .sc-bar { fill: var(--sc); }
.office .sc-boundary { stroke: var(--sc); fill: var(--sc); }
.office .sc-dot { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 50%; background: var(--sc); border: 3px solid var(--surface-panel);
  color: var(--on-accent); font-size: 11px; font-weight: 600; line-height: 1; }
.office .sc-ring { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 50%; background: var(--surface-panel); border: 2px dashed var(--border-strong);
  color: var(--ink-secondary); font-size: 11px; line-height: 1; }

/* The layer bar (ledger §4 "Layered report"): under the sub-navigation, three steps, the current one
   filled. Links, never a control (T-1). */
.office .layer-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-2) var(--space-6); background: var(--surface-panel);
  border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink-secondary); }
.office .layer-bar .layer-step { display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--ink-secondary); background: var(--surface-panel); text-decoration: none; }
.office .layer-bar .layer-step.on { background: var(--surface-accent-tint); color: var(--accent);
  border-color: var(--accent); font-weight: 500; }
.office .layer-bar .layer-hint { margin-left: auto; }

/* Layer 1: the map full width, the three cards over it on a wide screen and beneath it on a narrow one
   (a 16px gutter, no sideways scroll). */
.office .picture { position: relative; }
.office #picture-map { height: 70vh; min-height: 480px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-sunken); }
.office .picture-cards { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.office .picture-card { background: var(--surface-panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column;
  gap: var(--space-2); margin: 0; }
@media (min-width: 1000px) {
  .office .picture-cards { position: absolute; inset: var(--space-4); margin: 0; pointer-events: none;
    display: block; }
  .office .picture-card { position: absolute; pointer-events: auto; z-index: 1000; }
  .office .picture-card.lb-card { left: 0; top: 0; width: 300px; }
  .office .picture-card.source-card { left: 324px; top: 0; width: 330px; }
  .office .picture-card.legend-card { right: 0; bottom: var(--space-5); }
}
.office .big-row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.office .big-num { font-size: 56px; line-height: 60px; font-weight: 500; font-variant-numeric: tabular-nums; }
.office .source-card .src { display: flex; align-items: flex-start; gap: var(--space-2); }
.office .source-card .src input { margin-top: var(--space-1); }
.office .legend-swatches { display: flex; gap: 2px; }
.office .legend-swatches .sc-swatch { width: 30px; margin: 0; border-radius: 0; }
.office .legend-ends { display: flex; justify-content: space-between; width: 158px; }
.office .site-hover { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; }

/* Layer 2: the head with its large number on the right; one tile per `score`-tier output. */
.office .score-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap; }
.office .score-head .big-row { margin-left: auto; }
.office .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.office .tile { background: var(--surface-panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column;
  gap: var(--space-2); }
.office .tile .tile-num { font-size: 28px; line-height: 32px; font-weight: 500; font-variant-numeric: tabular-nums; }
.office .trend { padding: var(--space-4); margin: var(--space-5) 0 0; }
.office .trend svg { width: 100%; max-width: 760px; height: auto; display: block; }

/* S-WEB-C1b: the boundaries-only map (figures.boundary) -- a site left out of the score is a dashed ring. */
.office svg .site-ring { fill: var(--surface-panel); stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 3 3; }

/* ===================================================================================================
   S-WEB-C1b (Web Spec §14.6): layer 3 -- the report page, and print. Tokens only.
   On screen: the blocks in a main column and the rail beside it (stacked on a narrow screen). The printed
   map (`figures.boundary`) is `.print-only`; the Leaflet map is `.screen-only`; the running header shows
   only on paper. */
.office .report { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .office .report { grid-template-columns: minmax(0, 1fr) 320px; } }
.office .report-block { margin-bottom: var(--space-5); }
.office .report-rail { background: var(--surface-panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4); align-self: start; }
.office .report-rail h2:first-child { margin-top: 0; }
.office .print-header, .office .print-only { display: none; }
.office .figure.boundary svg { width: 100%; max-width: 640px; height: auto; display: block; }

@media print {
  /* Everything that is a control or a way somewhere else is not on paper: the header, the navigation,
     the layer bar, the verb rows, the source card's checkbox, the Leaflet map, the footer. */
  .office .office-header, .office nav, .office .subnav, .office .layer-bar, .office .btn-row,
  .office .screen-only, .office #map, .office .leaflet-container, .office .source-card input,
  .office .office-footer, .office #tiles-sentence { display: none !important; }
  .office .print-only { display: block; }
  /* The running header: rendered once, fixed, and the browser repeats a fixed element on every page. */
  .office .print-header { display: block; position: fixed; top: 0; left: 0; right: 0;
    padding: var(--space-1) 0; border-bottom: 1px solid var(--border); background: var(--surface-panel);
    color: var(--ink); font-size: 11px; }
  .office .office-main { padding-top: var(--space-6); }
  .office .report { display: block; }
  /* Each block on its own page; the first follows the page's own head. */
  .office .report-block { break-before: page; page-break-before: always; }
  .office .report-block:first-child { break-before: auto; page-break-before: auto; }
  .office .report-rail { break-before: page; page-break-before: always; border: none; }
  /* A class hue survives to paper; the class word is printed beside it regardless (§14.4). */
  .office .sc-swatch, .office .sc-num, .office .sc-dot, .office svg .sc-point, .office svg .sc-bar,
  .office .sc-boundary { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .office table { page-break-inside: auto; }
  .office tr { page-break-inside: avoid; }
}
.office .report-head { margin-bottom: var(--space-4); }
/* S-WEB-C1b: a signed bar inside a table cell keeps its own drawn size (an SVG with only a viewBox has no
   width of its own in a table); a figure in a report keeps figure 1's own reading size, not the column's. */
.office .report td svg { width: 200px; height: 18px; display: block; }
.office .report .figure.panel:not(.trend) svg { width: 100%; max-width: 480px; height: auto; display: block; }
.office .report-main { min-width: 0; }

/* ===================================================================================================
   S-WEB-C5 (Web Spec §14.7 C-5): the map coloured by class -- the portfolio map on /reports and a
   campaign's layer 1. A scored land base is filled in its class (`--sc`, the fill's opacity set by
   `class_map.js`); an unscored one is an outline in `--border-strong` (`sc-none`), never omitted (CS-3). The
   cards sit beneath the map. Tokens only. */
.office #class-map { height: 60vh; min-height: 420px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-sunken); }
.office .sc-fill { stroke: var(--sc); fill: var(--sc); }
.office .sc-outline { stroke: var(--sc); }
.office .sc-swatch.sc-outline { background: none; border: 2px solid var(--sc); box-sizing: border-box; }
.office .class-map-cards { display: grid; gap: var(--space-4); margin: var(--space-4) 0 var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* The land-base picture floats its cards over its map above 1000px (`.picture-card { position: absolute }`);
   the class map's cards stay in the flow beneath it at every width. */
.office .class-map-cards .picture-card { position: static; }
.office .class-counts { font-size: 18px; line-height: 26px; }
@media print {
  .office .sc-fill, .office .sc-outline { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ===================================================================================================
   S-WEB-C3-FIX (PP-4, Web Spec §14.3): an outside source is a HATCH over the boundary -- diagonal lines in the
   class's own token -- never a fill blended into the field score's (D446). One pattern per class, defined once
   per page (`_sat_hatch_defs.html`); the map layer and the printed figure both reference them. Tokens only. */
.office .sat-hatch-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.office svg .sat-hatch-line { stroke: var(--sc); }
.office .sat-hatch-fill.sc-very_low { fill: url(#sat-hatch-sc-very_low); }
.office .sat-hatch-fill.sc-low { fill: url(#sat-hatch-sc-low); }
.office .sat-hatch-fill.sc-neutral { fill: url(#sat-hatch-sc-neutral); }
.office .sat-hatch-fill.sc-high { fill: url(#sat-hatch-sc-high); }
.office .sat-hatch-fill.sc-very_high { fill: url(#sat-hatch-sc-very_high); }
.office .sat-hatch-fill.sc-lowest { fill: url(#sat-hatch-sc-lowest); }
.office .sat-hatch-fill.sc-middle { fill: url(#sat-hatch-sc-middle); }
.office .sat-hatch-fill.sc-highest { fill: url(#sat-hatch-sc-highest); }
.office .sat-hatch-fill.sc-none { fill: url(#sat-hatch-sc-none); }
.office svg .sat-hatch { stroke: none; }
.office .sat-swatch { display: inline-block; width: var(--space-3); height: var(--space-3); margin-right: var(--space-1);
  vertical-align: -1px; border: 1px solid var(--sc);
  background: repeating-linear-gradient(45deg, var(--sc) 0 2px, transparent 2px 5px); }
.office .outside-source { margin-bottom: var(--space-5); }
.office .outside-source .tile-num { font-size: 28px; line-height: 32px; font-weight: 500; font-variant-numeric: tabular-nums; }
.office .outside-source td svg { width: 200px; height: 18px; display: block; }
.office .sat-line { display: inline-block; margin-top: var(--space-1); }
/* S-WEB-C3b (CB-2): the satellite SQUARE -- on the map (a Leaflet divIcon), in the legend, in the popup and on the
   printed map -- the satellite class's token inside a `--border-strong` outline. Only its shape says "satellite". */
.office .sat-square, .office .sat-square-swatch { box-sizing: border-box; background: var(--sc);
  border: 2px solid var(--border-strong); border-radius: 0; }
.office .sat-square-swatch { display: inline-block; width: var(--space-3); height: var(--space-3);
  margin-right: var(--space-1); vertical-align: -1px; }
.office svg .sat-square { fill: var(--sc); stroke: var(--border-strong); stroke-width: 2; }
.office .sat-popup { display: block; margin-top: var(--space-1); }
@media print {
  .office svg .sat-hatch-line, .office .sat-swatch { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .office svg .sat-square, .office .sat-square-swatch { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* T-7 (S-WEB-WS-FIX-1): the observation page's position story -- a captured point outside the radius + buffer served
   at capture is marked with the office's own waiting colours (the pair `.night-warn` already uses), no new colour. */
.office .position-story { padding-left: var(--space-5); }
.office .position-outside { color: var(--state-wait); background: var(--state-wait-bg); }

/* SCALE-1 (S-WEB-GLOSS-3): a concept that is another scale of an existing one sits indented under its parent's name, in
   the protocol's indicator list and on an observation's answers. Tokens only. */
.office .scale-of { display: inline-block; padding-left: var(--space-4); }

/* ME-5 (S-WEB-MULTI-1): the record form's "several of a list" -- one box per value, each row as tall as any other
   control (AP2's 40 px), the whole row its label's click target. */
.office .record-choices { display: flex; flex-direction: column; gap: var(--space-1); }
.office .record-choice { min-height: 40px; align-items: center; }
/* DT-2 (S-WEB-FIX-6): a typed position -- latitude, then longitude, each label above its own number box. */
.office .record-position { display: flex; flex-direction: column; gap: var(--space-1); }
.office .record-choice label { display: flex; align-items: center; min-height: 40px; flex: 1; cursor: pointer;
                               font-size: 15px; line-height: 22px; color: var(--ink); }

/* PAGE-1 (S-WEB-PAGE-1, PG-10): a long list's sentence above its table (which rows of how many -- a value, so the
   secondary ink, never the muted one) and its pager below it -- plain links, each as tall as any other control
   (AP2's 40 px), the dots between them hidden from a screen reader. Tokens only. */
.office .list-pager-status { font-size: 14px; line-height: 20px; color: var(--ink-secondary); margin: var(--space-2) 0; }
.office .list-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  margin: var(--space-3) 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.office .list-pager a, .office .list-pager .list-pager-here { display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--space-2); }
@media print {
  .office .list-pager { display: none; }
}

/* S-SURVEY-3A (SO-13): the farmer's page. The ledger has no pattern for a table that holds inputs; this is the
   build's own, tokens only. The sheet is `table-layout: fixed` -- its width the sum of its columns, so a wide survey
   scrolls sideways inside its own block (`.survey-sheet-wrap`) and the page does not; the land base's column stays at
   the left (sticky, on the panel's own surface); each cell's control takes the cell's full width and the office's
   40 px. The form frees itself of `--form-max` (a sheet is wider than a form). */
.office form.form.survey-page { max-width: none; }
.office .survey-save-bar { margin: var(--space-3) 0; align-items: center; }
/* SH-4 (S-SURVEY-3C): the correction's one reason, under the save bar while a row is in correction -- the ledger's
   Form with reason (`.reason-act`), held to the form's width. */
.office .survey-correction-reason { max-width: var(--form-max); margin-bottom: var(--space-4); }
.office .survey-block { margin-bottom: var(--space-5); }
.office .survey-sheet-wrap { overflow-x: auto; max-width: 100%; border: var(--hairline) solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-panel); }
.office .survey-sheet { table-layout: fixed; width: max-content; min-width: 100%; border-collapse: collapse;
  overflow: visible; margin: 0; }           /* `.office table`'s `overflow: hidden` would make the table its own
                                             scroll container, and the sticky column would never stick */
.office .survey-sheet col.survey-sheet-landbase { width: calc(var(--space-7) * 5); }
.office .survey-sheet col.survey-sheet-col { width: calc(var(--space-7) * 4); }
.office .survey-sheet th, .office .survey-sheet td { vertical-align: top; padding: var(--space-2); }
.office .survey-sheet th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface-panel);
  text-align: left; }
.office .survey-sheet td .field { margin: 0; }
.office .survey-sheet td .field select,
.office .survey-sheet td .field input:not([type="hidden"]):not([type="checkbox"]),
.office .survey-sheet td .field textarea { width: 100%; min-height: 40px; box-sizing: border-box; }
.office .survey-sheet td .btn { display: block; margin-bottom: var(--space-1); white-space: normal; }
.office .survey-form { margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--hairline) solid var(--border); }
.office .survey-form h2 { margin-top: 0; }

/* S-SURVEY-3B (SE-5, SE-9): the farmer's page with its map -- the record page's main column and rail
   (design-ledger.md §4, `.main` `.rail`, 320px, as `.report` above): the rows in the main column and the map in the
   rail beside them where the page is wide enough, the map above the rows where it is not (it is first in the page).
   The row's number (`.survey-row-number`) is the number its land base carries on the map. Tokens only. */
.office .survey-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .office .survey-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .office .survey-layout .survey-map { grid-column: 2; grid-row: 1; align-self: start; position: sticky;
    top: var(--space-3); }
  .office .survey-layout .survey-layout-rows { grid-column: 1; grid-row: 1; }
}
.office .survey-layout-rows { min-width: 0; }
.office .survey-map { isolation: isolate; }   /* Leaflet's panes (z 200-1000) stay inside the map, as on the client pages */
.office .survey-map h2 { margin-top: 0; }
.office .survey-row-number { display: inline-block; min-width: var(--space-5); font-variant-numeric: tabular-nums;
  font-weight: 600; }
.office .leaflet-tooltip.survey-map-number { font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 0 var(--space-1); }
.office .survey-sheet td .field { position: relative; }   /* SE-8: the hidden label stays inside the sheet's scroll block */
/* SE-8 (S-SURVEY-3B, #232): a sheet cell's own label -- read by a screen reader, shown nowhere (the column's head
   names the question for the eye). */
.office .survey-cell-label { position: absolute; width: var(--hairline); height: var(--hairline); overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; }

/* --- WF-5 (S-WEB-FIX-8): the land-base list's tick bar -- ledger §4 "Table with filters", `.bulk-bar` (office.css) over
   the table, with no reason (REASON-1); its answers are the ledger's message states (`.msg-dry`, `.msg-refusal`,
   `.msg-ok`); a refusal beside its row in the refusal ink. ------------------------------------------------------------ */
.office #manager-bar-form { margin-top: var(--space-5); }
.office #manager-bar-form .bulk-bar { flex-wrap: wrap; border: var(--hairline) solid var(--border); border-radius: var(--radius-md); }
.office .manager-bar-as { padding-bottom: var(--space-3); color: var(--ink-secondary); }
.office .manager-bar-refusal { color: var(--state-bad); }
.office input.manager-bar-tick, .office #manager-bar-all { margin: 0; }

/* --- WF-2 (S-WEB-FIX-8): a land base's boundary on the office's own maps -------------------------------------------
   The founder (13 October 2026): "Make borders of polygones easy to see, light purple or so?" A light lilac line with
   a dark edge, its fill the same lilac nearly clear, so the imagery shows through. The design package has no violet
   or lilac token (design/office-v0.3/design-ledger.md §1, read), so these TWO names are declared here with their own
   values -- the only two colours this file names, admitted by name by the tokens-only test
   (test_web_selectors.py) -- until the Designer adopts or replaces them (BLOCKERS.md #241). The map scripts read
   them from the page (`boundary.js`); no colour is written in a script. Client pages never load this sheet. */
:root {
  --map-boundary: #D9C7FF;
  --map-boundary-edge: #2A1B4A;
}

/* UF-2 (S-WEB-FIX-9): the date a box holds, in words, under it -- a value, so full ink (never --ink-muted). */
.office p.date-words { margin: var(--space-1) 0 0; color: var(--ink); max-width: var(--form-max); }
.office p.date-words:empty { margin: 0; }

/* UF-4 (S-WEB-FIX-9): where *Record on this computer* is absent from an assigned task, why -- a sentence, full ink. */
.office .why-not { color: var(--ink); }

/* UF-10 (S-WEB-FIX-9): the parked page's conflicts block, reached by the home page's link to its anchor. */
.office h2#conflicts { scroll-margin-top: var(--space-5); }

/* UR-15 (S-WEB-ROUND-2, P-1): a campaign's readiness, directly under its verb row; the task block it links to. */
.office #readiness { margin-top: var(--space-4); }
.office p#tasks { scroll-margin-top: var(--space-7); }

/* UR-17 (S-WEB-ROUND-2, P-4): *Çiftçi ekle*'s two new forms, reached by their anchors (a farmer's *Arazisine bağla*). */
.office form#link-form, .office form#register-form { margin-top: var(--space-4); scroll-margin-top: var(--space-5); }

/* UR-18 (S-WEB-ROUND-2, UX-106): the draw page's choice of one land base or several, and the block draw.js hides with the
   write button when a shape changes after *Check* (#259). */
.office #draw-will-write[hidden] { display: none; }
.office select#draw-split { max-width: var(--form-max); }

/* ---------- S-WEB-LOOKS-1 (office-v0.4, 21 October 2026): where the built office meets v0.4 -------------------
   `office.css` is v0.4's, lifted byte-identical (LK-1). The rules above this line were written against v0.3 and are
   kept; where one of them now fights v0.4's drawing, the correction is here, later in the cascade, in tokens only. */

/* The header (D-087). Log out stays a POST button (P4), so it takes the 40 px a `.who a` takes in v0.4; the switch's own
   verb is a secondary button beside the select (no script submits a select); the organisation's name, shown when there
   is nothing to switch to, sits in the row's rhythm. */
.office-header .who button { min-height: 40px; padding: 0 var(--space-2); font-size: 14px; line-height: 20px; }
.office-header .who .org-name { padding: 0 var(--space-2); }
.office-header .who .org-switch-form { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 var(--space-1); }
.office-header .who .btn { background: var(--surface-panel); border: 1px solid var(--border-strong); color: var(--ink);
  padding: 0 var(--space-3); border-radius: var(--radius-sm); }
.office-header .who .btn:hover { background: var(--surface-sunken); text-decoration: none; }
/* BD3's tint above shrank the current tab's padding to sit inside v0.3's sunken bar; v0.4 draws the tab whole. */
.office-header .subnav a[aria-current="page"] { padding: 2px var(--space-3) 0; margin: 0; border-radius: 0; }

/* The drawing (T-4): the shape's bar is drawn only while a shape is being drawn -- v0.4's `.draw-bar` is a flex row,
   which would otherwise outrank the `hidden` attribute. After *Check* the name and the code follow the map in its panel. */
.office .draw-bar[hidden] { display: none; }
.office .fields-after-map { margin-top: var(--space-4); }
/* The observation (office-v0.4 §6.9): the build's header facts stand in the 320 px rail, where a long value wraps. */
.office .rail .header-fields td, .office .rail .header-fields th { white-space: normal; overflow-wrap: anywhere; }
/* Home (D-083): the older `.office ul` indent (0,1,1) outranks v0.4's `.inbox` (0,1,0), and `section + section`'s rhythm
   pushed every chapter after the first down inside the two-column grid; v0.4's own spacing stands. */
.office ul.inbox, .office ul.history { margin: 0; padding-left: 0; }
.office .chapters > section + section, .office .guides + section { margin-top: 0; }
/* Tables and filter bars (v0.4 dial 10): the bare-element rules at the head of this file (`.office table`, `.office
   .filters`) outrank v0.4's class rules. Where a template names v0.4's own class -- `table.table`, a `.filters` bar on a
   panel -- v0.4's drawing stands: a panel's own ground, the strong rule under the heads, 20 px at the ends. */
.office table.table { border: 0; border-radius: 0; margin: 0; background: var(--surface-panel); }
.office table.table th { font-size: 13px; line-height: 18px; padding: var(--space-3) var(--space-3) 10px;
  border-bottom: 1px solid var(--border-strong); background: var(--surface-panel); white-space: nowrap; }
.office table.table td { padding: var(--space-3); white-space: nowrap; }
.office table.table th:first-child, .office table.table td:first-child { padding-left: 20px; }
.office table.table th:last-child, .office table.table td:last-child { padding-right: 20px; }
.office table.table td.wrap { white-space: normal; }
.office .panel .filters { background: var(--surface-panel); border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: var(--space-4) 20px; gap: var(--space-3) var(--space-4); }
.office .panel .filters label { font-size: 13px; line-height: 18px; }
/* v0.4's `.check` (a 40 px label holding its box, a flex row) also matches a table's `td.check`; a cell stays a cell. */
.office table td.check, .office table th.check { display: table-cell; }
/* PAGE-1's pager line and links, where a table stands in a v0.4 panel: in the panel's own 20 px margin. */
.office .panel > .list-pager-status, .office .panel > .list-pager { padding-left: 20px; padding-right: 20px; }
/* The four checks (Task 4, measured): a checkbox in a filter bar is a box, not a 40 px control (the bar's own control
   rule above reached it); the ? beside a legend keeps 24 px at the legend's 13 px type. */
.office .filters input[type="checkbox"] { min-height: 0; padding: 0; width: 18px; height: 18px; flex: none; }
.office .choices legend details.field-help > summary { font-size: 15px; }