/* RegenDataHub office — the one stylesheet. office-v0.4, 21 October 2026.
   The looks pass (I-11, D-080) and the round's patterns (D-083, D-086) over v0.3's classes.
   Every colour, size and step is a token from tokens.css (unchanged since v0.3: no token changes value);
   nothing here is a raw colour. Server-rendered HTML applies these classes; no JS is required.
   No text-transform anywhere: Turkish runs a third longer and never goes uppercase.
   Read with design-ledger.md §4 (the patterns) and §5 (what changed against v0.3, rule by rule). */

/* ---------- base ---------- */
.office { font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ink);
  background: var(--surface); -webkit-font-smoothing: antialiased; margin: 0;
  /* dial 8, paper to the bottom: the page's ground is paper down to the window's foot */
  min-height: 100vh; display: flex; flex-direction: column; }
.office * { box-sizing: border-box; }
/* dial 5, quieter links: the underline stays (accent on ink is 2.8:1, so colour alone cannot mark a link),
   in a half-tone, 3px lower; full colour under the pointer */
.office a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, var(--surface-panel)); }
.office a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
/* dial 4: a link inside a sentence reaches 24px tall without moving the text (no specificity: any pattern's own padding wins) */
:where(.office) a { padding-block: 4px; }
.office a.btn { text-decoration: none; }
.office a.btn-primary, .office a.btn-primary:hover { color: var(--on-accent); }
.office a.btn-secondary, .office a.btn-secondary:hover { color: var(--ink); }
.office a.btn-danger, .office a.btn-danger:hover { color: var(--state-bad); }
.office a.hit, .office a.hit:hover, .office .inbox a.n, .office .inbox a.line, .office .counts a, .office .queue a, .office a.guide { text-decoration: none; }
.office a.hit { color: var(--ink); }
.office a.btn-quiet { text-decoration: underline; }
.office :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.office code, .office .code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; white-space: nowrap; }
.office .code-chip { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-secondary); background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 1px 6px; white-space: nowrap; }
/* dial 1, type one step up: the page title 22 → 24 */
.office h1 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 var(--space-2); }
.office h2 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 var(--space-3); }
.office p { margin: 0 0 var(--space-3); }
.office .muted { color: var(--ink-muted); }
.office .secondary { color: var(--ink-secondary); }
.office .small { font-size: 13px; line-height: 18px; }
/* dial 1: labels 12 → 13 */
.office .label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-secondary); }
.office .nowrap { white-space: nowrap; }
.office .num { font-variant-numeric: tabular-nums; }

/* ---------- header, shape A (D-083, D-087): two rows, then the group's pages as tabs; no JS ---------- */
/* tier-1: the name, then who-and-where with the organisation switch (D-083 F).
   tier-2: the six groups by job, and the plane's door set apart by position and outline (D-073, D-083). */
.office-header { background: var(--surface-panel); border-bottom: 1px solid var(--border); }
.office-header .tier-1 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); min-height: 48px;
  padding: 0 20px 0 var(--space-6); max-width: var(--content-max); margin: 0 auto; }
.office-header .product { font-weight: 600; font-size: 16px; line-height: 22px; color: var(--ink); text-decoration: none; letter-spacing: 0.005em; }
.office-header .who { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-secondary); }
.office-header .who a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-2); }
/* H5: the person's name opens the account, so it looks like a link */
.office-header .who .person { color: var(--accent); }
.office-header .who .sep { color: var(--ink-muted); }
.office-header .who .role { display: inline-block; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 1px var(--space-2); margin: 0 var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.office-header .org-switch { font: inherit; font-size: 14px; line-height: 20px; color: var(--ink); background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); min-height: 40px; padding: 0 var(--space-2); }   /* AP2 */
.office-header .lang { font-size: 14px; }
.office-header .tier-2 { border-top: 1px solid var(--border); }
.office-header .tier-2 .in { display: flex; align-items: stretch; flex-wrap: wrap; padding: 0 20px; max-width: var(--content-max); margin: 0 auto; }
.office-header .nav { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.office-header .nav li { margin: 0; }
/* dial 4, targets: a group link is 52px tall */
.office-header .nav a { display: flex; align-items: center; min-height: 52px; padding: 3px var(--space-3) 0; text-decoration: none;
  color: var(--ink-secondary); font-size: 15px; line-height: 22px; border-bottom: 3px solid transparent; white-space: nowrap; }
.office-header .nav a:hover { color: var(--ink); }
.office-header .nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
/* the plane's door: last, set apart, outlined, a new tab (NAV-2, D-073) */
.office-header .plane { margin-left: auto; display: flex; align-items: center; padding-left: var(--space-4); }
.office-header .plane a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--ink); text-decoration: none;
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.office-header .plane a:hover { background: var(--surface-sunken); }
/* the group's pages as tabs: 46px; the current one computed from the path (BD3, D-053), tinted and underlined in ink;
   the seam to the group bar a border-strong line (BD4, D-054) */
.office-header .subnav { background: var(--surface-panel); border-top: 1px solid var(--border-strong); }
.office-header .subnav ul { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 20px; max-width: var(--content-max); margin: 0 auto; list-style: none; }
.office-header .subnav li { margin: 0; }
.office-header .subnav a { display: flex; align-items: center; min-height: 46px; padding: 2px var(--space-3) 0; font-size: 14px; line-height: 20px;
  text-decoration: none; color: var(--ink-secondary); border-bottom: 2px solid transparent; white-space: nowrap; }
.office-header .subnav a:hover { color: var(--ink); }
.office-header .subnav a[aria-current="page"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); background: var(--surface-accent-tint); }
/* "you are here" is words and position (D-083): no section colours */

/* below 1100px (a tablet, a narrowed laptop window; not a phone): the rows wrap, the groups take their own line */
@media (max-width: 1100px) {
  .office-header .tier-1 { padding: 0 var(--space-3) 0 var(--space-5); }
  .office-header .tier-2 .in, .office-header .subnav ul { padding: 0 var(--space-3); }
  .office-header .nav a { min-height: 48px; }
  .office-header .plane { margin-left: 0; padding: var(--space-2) 0; flex-basis: 100%; }
}

/* ---------- page frame ---------- */
.office-main { width: 100%; flex: 1 0 auto; max-width: var(--content-max); margin: 0 auto; padding: 28px var(--space-6) var(--space-7); min-width: 0; }
.office-main .page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); margin-bottom: 20px; }
.office-main .page-head > div:first-child { min-width: 0; }
.office-main .page-head .line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.office-main .page-head .line h1 { margin: 0; }
.office-main .page-head .actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.office-main .lede { color: var(--ink-secondary); margin: 6px 0 0; }
.office-footer { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid var(--border); font-size: 13px; line-height: 18px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.office-footer .code { color: var(--ink-muted); }
.office .stack > * + * { margin-top: var(--space-5); }
/* main column and a 320px rail, for any page that is not a record */
.office .with-rail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.office .rail-stack { display: grid; gap: var(--space-5); align-content: start; }
@media (max-width: 1100px) { .office-main { padding: var(--space-5) var(--space-5) var(--space-6); } }
@media (max-width: 900px) { .office .with-rail, .record { grid-template-columns: minmax(0, 1fr); } }

/* ---------- where am I (T-7): every record page names its list above its title, a way back ---------- */
.office .crumbs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; line-height: 18px; color: var(--ink-secondary); margin: 0 0 6px; }
.office .crumbs a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- the edit beside the thing it edits (E1, T-10): a link beside a record's name; it leaves the verb row ---------- */
.office .edit-beside { font-size: 14px; display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; }

/* ---------- the job line (T-2, T-5): a job's first screen says what the job is and what comes next ---------- */
.office .job-line { max-width: 780px; color: var(--ink-secondary); margin: 6px 0 0; }

/* ---------- the step strip (T-5, L2, C3, C7): every multi-step job names its steps under the title ---------- */
/* An ol of three; the current step carries aria-current="step" and the words "you are here"; a done step a ✓ and "done".
   The number and the words carry the meaning; the tint only sorts. Not the loader's vertical .steps below. */
.office .job-steps { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.office .job-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3); row-gap: 2px; padding: 14px 18px; margin: 0; border-right: 1px solid var(--border); }
.office .job-steps li:last-child { border-right: 0; }
.office .job-steps .step-n { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 14px;
  border: 1px solid var(--border-strong); font-size: 14px; font-weight: 600; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.office .job-steps .step-h { font-weight: 600; display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.office .job-steps .step-w { font-size: 13px; font-weight: 600; }
.office .job-steps .step-d { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.office .job-steps li[aria-current="step"] { background: var(--surface-accent-tint); }
.office .job-steps li[aria-current="step"] .step-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.office .job-steps li[aria-current="step"] .step-w { color: var(--accent); }
.office .job-steps li.done .step-n { border-color: var(--state-good); color: var(--state-good); }
.office .job-steps li.done .step-w { color: var(--state-good); }
@media (max-width: 900px) {
  .office .job-steps { grid-template-columns: minmax(0, 1fr); }
  .office .job-steps li { border-right: 0; border-bottom: 1px solid var(--border); }
  .office .job-steps li:last-child { border-bottom: 0; }
}

/* ---------- the next step, kept in view (L2, C3, C7: the Sıradaki adım panel), one per page ---------- */
/* After Check, or after Create, the page lands on this panel (its id is the fragment the build redirects to) and the
   next verb is the page's one primary, inside it. The readiness rows may follow in the same panel. */
.office .next-step { background: var(--surface-panel); border: 2px solid var(--accent); border-radius: var(--radius-md); scroll-margin-top: var(--space-5); }
.office .next-step > .next-step-head { display: flex; align-items: baseline; gap: var(--space-3); padding: 14px 20px 0; }
.office .next-step > .next-step-head h2 { margin: 0; }
.office .next-step > .next-step-body { padding: var(--space-3) 20px 20px; display: grid; gap: 14px; }
.office .next-step.quiet { border-width: 1px; border-color: var(--border-strong); }   /* before the first step is done */

/* ---------- readiness rows (_readiness.html; D-064): a mark, a key, the state ---------- */
.office .readiness { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.office .readiness li { display: grid; grid-template-columns: 28px 200px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: 10px 20px; margin: 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.office .readiness li:last-child { border-bottom: 0; }
.office .readiness .mark { font-weight: 600; text-align: center; }
.office .readiness .mark.ok { color: var(--state-good); }
.office .readiness .mark.no { color: var(--ink-muted); }
.office .readiness .key { color: var(--ink-secondary); font-weight: 500; font-size: 13px; }
@media (max-width: 600px) { .office .readiness li { grid-template-columns: 28px minmax(0, 1fr); } .office .readiness li > :last-child { grid-column: 2; } }

/* ---------- panels: white objects on paper ---------- */
.panel { background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-md); }
.panel-body { padding: 20px; }
.panel-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.panel-head h2 { margin: 0; }
.panel-head .aside { margin-left: auto; font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
/* an empty section still holds its place and says so in one sentence, full ink (T-9) */
.panel-empty { padding: var(--space-4) 20px; font-size: 14px; line-height: 20px; color: var(--ink); }

/* ---------- status words (dial 6): the word printed, the mood tinted; sans, not mono ---------- */
.status { display: inline-block; font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 500; padding: 1px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.status-good { color: var(--state-good); background: var(--state-good-bg); }
.status-wait { color: var(--state-wait); background: var(--state-wait-bg); }
.status-bad { color: var(--state-bad); background: var(--state-bad-bg); }
.status-revise { color: var(--state-revise); background: var(--state-revise-bg); }
.status-ended { color: var(--state-ended); background: var(--state-ended-bg); }
/* a status with the sentence that says what it means and what comes next (T-9) */
.office .status-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: var(--space-3) 0 0; font-size: 14px; line-height: 20px; }

/* ---------- buttons (dial 7): 40px (AP2), one primary per page, never full width, 8px apart ---------- */
.btn { font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; min-height: 40px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: var(--surface-panel); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-sunken); }
.btn-danger { background: var(--surface-panel); color: var(--state-bad); border-color: var(--state-bad); }
.btn-danger:hover { background: var(--state-bad-bg); }
.btn-quiet { background: transparent; color: var(--accent); border-color: transparent; padding-left: var(--space-2); padding-right: var(--space-2); text-decoration: underline; text-underline-offset: 3px; font-weight: 400; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.btn-row .then { font-size: 14px; line-height: 20px; color: var(--ink-secondary); }   /* "Next: …" beside a verb */
/* a record's verb row (BC3): left; the seam to the plane (Overview · Data) at its right end */
.btn-row.record-verbs { margin: 0 0 var(--space-4); }
.btn-row .seam { margin-left: auto; display: flex; gap: var(--space-1); align-items: center; font-size: 14px; }
.btn-row .seam a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }

/* ---------- forms (AP1): label above, help below, one field per row; edges at 3:1 (dial 3) ---------- */
.form { max-width: var(--form-max); display: grid; gap: 18px; }
.field { display: grid; gap: 6px; margin: 0; min-width: 0; }
.form > .field, .form > .field-row, .form > details { margin: 0; }
.field label, .field .label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-secondary); display: flex; align-items: center; gap: 2px; min-height: 24px; }
.field .help { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.input, .select, .textarea { font: inherit; font-size: 15px; line-height: 22px; color: var(--ink); background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); width: 100%; min-height: 40px; }
.input.code { font-family: var(--font-mono); font-size: 14px; }
.textarea { min-height: 66px; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235c574f' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 22px; min-height: 40px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
/* the date a box holds, in words with its weekday, full ink (UF-2, D-068) */
.office .date-words { font-size: 13px; line-height: 18px; color: var(--ink); margin: 0; }
/* the ? beside a field (UR-5, _help.html): a details/summary, no script */
.office .field-help { display: inline-flex; }
.office .field-help > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; cursor: pointer; }
.office .field-help > summary::-webkit-details-marker { display: none; }
.office .field-help > summary span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 9px; border: 1px solid var(--border-strong); font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.office .field-help[open] > summary span { background: var(--ink); border-color: var(--ink); color: var(--surface-panel); }
.office .field-help-open { font-size: 13px; line-height: 18px; color: var(--ink-secondary); background: var(--surface); border-radius: var(--radius-sm); padding: var(--space-2) 10px; }
/* a choice of one among a few, as radios */
.office .choice { display: flex; gap: 10px; align-items: center; min-height: 40px; font-size: 15px; line-height: 22px; }
.office .choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.office fieldset.choices { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.office fieldset.choices > legend { padding: 0; margin-bottom: var(--space-1); }

/* a fold for fields most people leave as they are (C6): one summary line with its help, the fields inside */
.office details.fold { border: 1px solid var(--border); border-radius: var(--radius-md); }
.office details.fold > summary { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: 0 14px; cursor: pointer; font-weight: 500; list-style: none; }
.office details.fold > summary::-webkit-details-marker { display: none; }
.office details.fold > summary::before { content: "▸"; color: var(--ink-secondary); width: 12px; }
.office details.fold[open] > summary::before { content: "▾"; }
.office details.fold > summary .help { font-weight: 400; margin-left: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.office details.fold > .fold-body { padding: 6px 14px 18px; display: grid; gap: 18px; }

/* The reason + verb pairing: one pattern, ~15 pages. */
.reason-act { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: var(--space-2); align-items: end; max-width: var(--form-max); }
.reason-act .field { margin: 0; }
.reason-act .btn-row { padding-bottom: 1px; }
.reason-act.wide { grid-template-columns: 1fr; }
.reason-act.wide .btn-row { padding-top: var(--space-2); }

/* dry run / commit pair */
.dry-commit { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.dry-commit .then { font-size: 14px; color: var(--ink-secondary); }

/* ---------- message states (one sentence) ---------- */
.msg { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; font-size: 14px; line-height: 20px; background: var(--surface-panel); display: flex; gap: 10px; align-items: baseline; }
.msg .k { font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.msg-refusal { background: var(--state-bad-bg); border-color: var(--state-bad); color: var(--ink); }
.msg-refusal .k { color: var(--state-bad); }
.msg-warning { background: var(--state-wait-bg); border-color: transparent; }
.msg-warning .k { color: var(--state-wait); }
.msg-ok { background: var(--state-good-bg); border-color: var(--state-good); }
.msg-ok .k { color: var(--state-good); }
.msg-dry { background: var(--state-revise-bg); border-color: var(--state-revise); }
.msg-dry .k { color: var(--state-revise); }
.msg-empty { color: var(--ink-secondary); background: transparent; border-style: dashed; }
.msg-holding { background: var(--surface-sunken); color: var(--ink-secondary); }
.msg-holding .k { color: var(--ink-secondary); }

/* ---------- tables: filters and rows in one panel; a wide table scrolls in its own box (dial 10) ---------- */
.filters { display: flex; gap: 12px var(--space-4); align-items: flex-end; flex-wrap: wrap; padding: var(--space-4) 20px; background: var(--surface-panel); border-bottom: 1px solid var(--border); }
.filters .field { margin: 0; flex: 0 1 180px; }
.filters .field.wide { flex-basis: 300px; }
.filters .input, .filters .select { font-size: 14px; line-height: 20px; }
.filters .count { margin-left: auto; font-size: 13px; color: var(--ink-secondary); align-self: center; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.table-wrap { background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.filters + .table-wrap { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table th { text-align: left; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-secondary); padding: 12px 12px 10px; border-bottom: 1px solid var(--border-strong); background: var(--surface-panel); white-space: nowrap; vertical-align: bottom; }
.table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
.table th:first-child, .table td:first-child { padding-left: 20px; }
.table th:last-child, .table td:last-child { padding-right: 20px; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface); }
.table tr[aria-selected="true"] td { background: var(--surface-accent-tint); }
.table td.code, .table td .code { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.table .r, .table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.table .row-link { font-weight: 500; }
.table td.check, .table th.check { width: 44px; padding-right: 0; }
.table .when { white-space: nowrap; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.table td.zero { color: var(--ink-muted); }          /* dial 9: a 0 in a count column, never a value */
.table td.wrap { white-space: normal; min-width: 220px; }
.table td .sub { display: block; font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.table td.row-verb { text-align: right; }
.table td.row-verb .btn { min-height: 28px; margin: -4px 0; }
/* dial 4: every link in a table reaches 24px without moving the text */
.table a:not(.btn) { display: inline-block; padding: 3px 0; margin: -3px 0; }
.table td.r a:not(.btn) { min-width: 24px; text-align: right; }
.table-foot { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-2) 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-secondary); background: var(--surface-panel); }
.table-foot .pages { margin-left: auto; display: flex; gap: var(--space-3); }
/* the bulk bar: one reason, the verbs in a row, under the rows */
.bulk-bar { display: flex; flex-wrap: wrap; gap: var(--space-2) 20px; align-items: flex-end; padding: var(--space-4) 20px; border-top: 1px solid var(--border); background: var(--surface-accent-tint); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.bulk-bar .selected { font-size: 15px; font-weight: 600; padding-bottom: 9px; white-space: nowrap; }
.bulk-bar .field { flex: 1 1 300px; }
.bulk-bar .help { flex-basis: 100%; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.bulk-bar .help a { display: inline-block; padding: 3px 0; margin: -3px 0; }

/* ---------- record pages ---------- */
.record { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.record .main > * + * { margin-top: var(--space-5); }
.record .rail > * + * { margin-top: var(--space-5); }
.record .rail .panel-body { font-size: 14px; line-height: 20px; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--space-3); row-gap: 10px; margin: 0; font-size: 14px; line-height: 20px; }
.kv dt { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-secondary); }
.kv dd { margin: 0; min-width: 0; }
.kv dd .sub { display: block; font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.kv-2 { grid-template-columns: max-content 1fr max-content 1fr; }
.record-head { display: flex; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; }
.record-head .id { font-family: var(--font-mono); font-size: 16px; }
.record-head .crumbs { font-size: 13px; color: var(--ink-secondary); width: 100%; }
.recorded { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.recorded th { text-align: left; font-size: 13px; font-weight: 500; color: var(--ink-secondary); padding: 12px 12px 10px 20px; border-bottom: 1px solid var(--border-strong); }
.recorded td { padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--border); vertical-align: top; }
.recorded tr:last-child td { border-bottom: 0; }
.recorded td:first-child { color: var(--ink); width: 50%; }
.recorded .unit { color: var(--ink-secondary); }
.recorded .concept-code, .office .concept-code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-secondary); display: block; }
.thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.thumb { width: var(--thumb); height: 135px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-sunken); display: block; overflow: hidden; position: relative; }
.thumb .cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: 12px; line-height: 16px; padding: var(--space-1) var(--space-2); background: var(--surface-panel); color: var(--ink-secondary); font-family: var(--font-mono); }
.audio { display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); max-width: 480px; }
.audio .play { width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-panel); }
.audio .track { flex: 1; height: 4px; background: var(--surface-sunken); border-radius: 2px; position: relative; }
.audio .track i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--accent); border-radius: 2px; }
.audio .len { font-size: 13px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.history { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 20px; }
.history li { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); padding: 10px 0; margin: 0; border-bottom: 1px solid var(--border); }
.history li:last-child { border-bottom: 0; }
.history .when { color: var(--ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.history .why { color: var(--ink-secondary); display: block; font-size: 13px; }
/* verdicts: one primary, two exits sharing one reason (D-044) */
.verdicts { display: grid; gap: 14px; max-width: var(--form-max); }
.verdicts .btn-row { gap: var(--space-3); justify-content: flex-start; }
.verdicts .exits { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; font-size: 14px; }
.verdicts .exits .lead { color: var(--ink-secondary); margin-right: var(--space-1); }
.verdicts .exits a, .verdicts .exits button { font: inherit; font-size: 14px; background: none; border: 0; min-height: 36px; padding: 0 var(--space-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.verdicts .exits .revise { color: var(--state-revise); }
.verdicts .exits .reject { color: var(--state-bad); }
details.more > summary { cursor: pointer; color: var(--accent); font-size: 13px; list-style: none; min-height: 24px; display: inline-flex; align-items: center; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "▸ "; color: var(--ink-secondary); }
details.more[open] > summary::before { content: "▾ "; }
details.more > div { margin-top: var(--space-3); }

/* ---------- the map (T-3, T-4, L5): an edge you can see; the tools and the drawing bar off it ---------- */
/* #map, #draw-map and #task-map keep their height in office-built.css; v0.4 gives them the 3:1 edge */
.office #map, .office #draw-map, .office #task-map, .office .map-frame { border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
/* the tools sit above the map as words, not icons (no icon set in this release): one pressed at a time */
.office .draw-tools { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: 0 0 var(--space-2); }
.office .draw-tools .label { margin-right: var(--space-1); }
.office .draw-tool { display: inline-flex; align-items: center; font: inherit; font-size: 14px; font-weight: 500; min-height: 40px; padding: 0 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--surface-panel); color: var(--ink); cursor: pointer; white-space: nowrap; }
.office .draw-tool[aria-pressed="true"] { background: var(--surface-accent-tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* each tool's hint says how it is drawn: drag / click each corner */
.office .draw-hint { font-size: 14px; line-height: 20px; color: var(--ink); margin: 0 0 10px; }
.office .draw-hint b { font-weight: 600; }
/* the shape being drawn: its bar under the map, never over it */
.office .draw-bar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: 10px 0 0; padding: 10px var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); font-size: 14px; line-height: 20px; }
.office .draw-bar .draw-say { margin-right: auto; }
/* how the map is moved: the wheel scrolls the page, Ctrl/⌘ + wheel zooms (to-architect §6, reverses UR-10) */
.office .map-note { font-size: 13px; line-height: 18px; color: var(--ink-secondary); margin: var(--space-2) 0 0; }

/* ---------- Home: the guides first (T-2), then chapters that follow the header (D-083) ---------- */
.office .section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); }
.office .section-head h2 { margin: 0; }
.office .guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); }
.office .guide { display: grid; gap: 6px; align-content: start; background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) 20px 18px; color: var(--ink); min-height: 112px; }
.office .guide:hover { border-color: var(--border-strong); }
.office .guide .guide-name { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 50%, var(--surface-panel)); }
.office .guide .guide-line { color: var(--ink-secondary); font-size: 14px; line-height: 20px; }
.office .chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.office .chapters .panel-head h2 a { color: var(--ink); text-decoration: none; }
.office .chapters .panel-head h2 a:hover { text-decoration: underline; }
@media (max-width: 900px) { .office .guides, .office .chapters { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the inbox: what waits leads, a zero is quiet and keeps its place (dial 9) ---------- */
.inbox { list-style: none; margin: 0; padding: 0; }
.inbox li { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 20px; margin: 0; border-bottom: 1px solid var(--border); }
.inbox li:last-child { border-bottom: 0; }
.inbox .n { font-size: 28px; line-height: 32px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; text-decoration: none; }
.inbox .n.zero { color: var(--ink-muted); font-weight: 400; }
.inbox .what { font-weight: 500; }
.inbox .what a { text-decoration: none; color: var(--ink); }
.inbox .what a:hover { text-decoration: underline; }
.inbox .since { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.inbox .verb { font-size: 14px; }
/* v0.4: the whole line is the link (a.line), 56px tall */
.inbox li.line-item { display: block; padding: 0; }
.inbox a.line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 20px; color: var(--ink); min-height: 56px; }
.inbox a.line:hover { background: var(--surface); }
.inbox a.line .what { font-weight: 500; }
.inbox a.line .go { color: var(--accent); font-size: 14px; }
.inbox li.zero a.line .n, .inbox li.zero a.line .what { color: var(--ink-muted); font-weight: 400; }
.verdict-line { display: flex; gap: var(--space-4); align-items: baseline; padding: var(--space-2) 0; }
.verdict-line .k { width: 90px; font-size: 13px; font-weight: 500; color: var(--ink-secondary); }
.verdict-line .mark { font-family: var(--font-mono); font-size: 13px; }
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.counts a { display: block; padding: var(--space-4) 20px; border-right: 1px solid var(--border); text-decoration: none; color: var(--ink); min-height: 88px; }
.counts a:last-child, .counts.two a:nth-child(2n) { border-right: 0; }
.counts.two a:nth-child(n+3) { border-top: 1px solid var(--border); }
.counts .n { font-size: 24px; line-height: 30px; font-weight: 500; font-variant-numeric: tabular-nums; display: block; }
.counts .n.zero { color: var(--ink-muted); font-weight: 400; }
.counts .cap { font-size: 14px; line-height: 20px; color: var(--ink-secondary); display: block; margin-top: 2px; }
.counts a:hover .cap { color: var(--accent); }
.office .linklist { list-style: none; margin: 0; padding: var(--space-2) 0; }
.office .linklist li { margin: 0; }
.office .linklist a { display: flex; align-items: center; min-height: 40px; padding: 0 20px; }
.reserved { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-4); color: var(--ink-secondary); font-size: 14px; line-height: 20px; }

/* ---------- the one-time code ---------- */
.otc { text-align: center; padding: var(--space-7) var(--space-5); }
.otc .code-large { font-family: var(--font-mono); font-size: 40px; line-height: 48px; letter-spacing: 0.12em; user-select: all; display: inline-block; padding: var(--space-3) var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-panel); }
.otc .once { margin-top: var(--space-4); color: var(--ink-secondary); }

/* ---------- figure (a chart with its provenance) ---------- */
.figure { margin: 0; }
.figure .fig-title { font-size: 15px; line-height: 22px; font-weight: 500; margin-bottom: var(--space-1); }
.figure .fig-sub { font-size: 13px; line-height: 18px; color: var(--ink-secondary); margin-bottom: var(--space-3); }
.figure svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.figure .grid { stroke: var(--chart-grid); stroke-width: 1; }
.figure .axis-text { fill: var(--ink-secondary); font-size: 12px; }
.figure .val { fill: var(--ink); font-size: 12px; font-weight: 500; }
.figure .s1 { fill: var(--chart-series-1); } .figure .s2 { fill: var(--chart-series-2); } .figure .s3 { fill: var(--chart-series-3); } .figure .s4 { fill: var(--chart-series-4); }
.figure .l1 { stroke: var(--chart-series-1); } .figure .l2 { stroke: var(--chart-series-2); }
.figure figcaption { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-2); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.legend { display: flex; gap: var(--space-4); font-size: 13px; color: var(--ink-secondary); margin-bottom: var(--space-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* ---------- public pages ---------- */
.public { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.public .band { border-bottom: 1px solid var(--border); padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-4); }
.public .band .lang { margin-left: auto; font-size: 14px; }
.public .centre { max-width: 420px; margin: 0 auto; padding: var(--space-7) var(--space-4); width: 100%; }
.public .centre h1 { font-size: 24px; line-height: 30px; }
.public .centre .form { max-width: none; }

/* ---------- loaders: numbered steps, vertical (paper entry, file loads) ---------- */
.steps { counter-reset: step; display: grid; gap: var(--space-5); }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); }
.step::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: 14px; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--ink-secondary); background: var(--surface-panel); margin-top: 2px; }
.step.done::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.step.wait { opacity: .55; }
.step h2 { margin-bottom: var(--space-1); }
.step .lede { margin-bottom: var(--space-3); }
.mapping { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mapping span { font-family: var(--font-mono); font-size: 12px; line-height: 18px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-secondary); }
.mapping span.unknown { background: var(--state-wait-bg); color: var(--state-wait); }
.segments { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-5); }
.segments a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4); font-size: 14px; line-height: 20px; text-decoration: none; color: var(--ink-secondary); background: var(--surface-panel); border-right: 1px solid var(--border-strong); }
.segments a:last-child { border-right: 0; }
.segments a[aria-current="page"] { background: var(--surface-accent-tint); color: var(--ink); font-weight: 500; }

/* ---------- verification desk (drawn, not built: D-007) ---------- */
.desk { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.queue { list-style: none; margin: 0; padding: 0; }
.queue li { border-bottom: 1px solid var(--border); }
.queue li:last-child { border-bottom: 0; }
.queue a { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: 10px var(--space-4); text-decoration: none; color: var(--ink); font-size: 14px; line-height: 20px; }
.queue a:hover { background: var(--surface); }
.queue li[aria-current="true"] a { background: var(--surface-accent-tint); border-left: 3px solid var(--accent); padding-left: 13px; }
.queue .lb { font-family: var(--font-mono); font-size: 13px; }
.queue .lbl { grid-column: 1; color: var(--ink-secondary); font-size: 13px; }
.queue .n { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.queue .done .lb { color: var(--ink-secondary); }
.queue .done .lbl::before { content: "✓ "; color: var(--state-good); }
.desk-nav { display: flex; gap: var(--space-3); align-items: center; font-size: 13px; color: var(--ink-secondary); }
.desk-nav kbd { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 4px; background: var(--surface-panel); }
.recorded.compact td { padding: 6px var(--space-3); }
.recorded.compact td:first-child { width: 50%; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* ---------- find page (drawn, not built: Q-12) ---------- */
.find-group { margin-bottom: var(--space-5); }
.find-group h2 { display: flex; gap: var(--space-3); align-items: baseline; }
.find-group h2 .n { font-weight: 400; color: var(--ink-secondary); font-size: 13px; }
.hit { display: grid; grid-template-columns: 200px 1fr auto; gap: var(--space-4); padding: 10px var(--space-4); border-bottom: 1px solid var(--border); font-size: 14px; line-height: 20px; align-items: baseline; text-decoration: none; color: var(--ink); }
.hit:last-child { border-bottom: 0; }
.hit .kind { font-size: 13px; color: var(--ink-secondary); }
.hit mark { background: var(--state-wait-bg); color: inherit; padding: 0 2px; border-radius: 2px; }
.hit:hover { background: var(--surface); color: var(--ink); }
.hit > span:first-child { font-weight: 500; }
.hit .code { color: var(--ink); }

/* ---------- reading aids declared by the protocol ---------- */
.pairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.pair { display: grid; gap: 4px; }
.pair .thumb { width: 100%; height: 96px; }
.pair .cap-row { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-secondary); font-family: var(--font-mono); }
.pair .then { color: var(--ink-secondary); }
.score { display: grid; grid-template-columns: max-content 1fr max-content; gap: var(--space-2) var(--space-3); align-items: center; font-size: 14px; line-height: 20px; }
.score .bar { height: 8px; background: var(--surface-sunken); border-radius: 4px; position: relative; }
.score .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chart-series-1); border-radius: 4px; }
.score .bar b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--chart-series-2); }
.score .v { font-variant-numeric: tabular-nums; text-align: right; }
.score .k { color: var(--ink-secondary); }
.checks p { margin: 0 0 var(--space-2); display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2); align-items: baseline; }
.checks p:last-child { margin: 0; }
.qa-summary { display: grid; grid-template-columns: repeat(4, 1fr); }
.qa-summary div { padding: var(--space-3) var(--space-4); border-right: 1px solid var(--border); }
.qa-summary div:last-child { border-right: 0; }
.qa-summary .n { font-size: 24px; line-height: 30px; font-weight: 500; font-variant-numeric: tabular-nums; display: block; }
.qa-summary .cap { font-size: 13px; line-height: 18px; color: var(--ink-secondary); }

/* ---------- controls do not print (D-071) ---------- */
@media print {
  .office-header, .btn-row, .draw-tools, .draw-bar, .job-steps { display: none !important; }
  .office { min-height: 0; display: block; }
}