/* The office pages' own stylesheet (web/office.py). Design A, "Ledger": paper and ink, one navy accent ("navy look",
   approved 11-06; the same tokens as the office site). Served at /static/office.css by a fixed route. System fonts only
   (Charter on Mac and iOS, then Sitka, Cambria, Georgia). No imports, no web fonts, no images, no outside requests.
   Every text size is 16px or more. The header mark is inline SVG (office.MARK_SVG) that keeps its own navy and white. */
:root {
  --paper: #F4F6FA; --paper-2: #E9EEF5; --sheet: #FFFFFF;
  --ink: #0F1B2D; --ink-2: #2B3648; --ink-3: #46526A;
  --accent: #13294B; --accent-dark: #0C1C36; --accent-tint: #E3EAF5; --accent-press: #081426;
  --rule: #D3DBE6; --foot-text: #DCE4F0;
  --red: #A1251B; --red-tint: #FAEAE6;
  --gold: #E9C46A;
  /* 11-07 looks: these defaults are Provly Navy; /static/office-themes.css (web/office_themes.py) sets each look */
  --on-accent: #FFFFFF; --ok: #1E7B4F; --warn: #A86400; --foot-bg: #0F1B2D;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 74rem; --gut: 1.25rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.125rem; line-height: 1.65; overflow-wrap: break-word; }
svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); margin: 0; }
p, ul, ol, dl, figure { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
main:focus:not(:focus-visible) { outline: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; display: block !important; }
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--mono); letter-spacing: .01em; }

/* Skip link */
.skip { position: absolute; left: var(--gut); top: -20rem; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; background: var(--ink); color: var(--paper); padding: .5rem 1rem; border-radius: 4px; font-weight: 600; }
.skip:hover { color: var(--paper); }
.skip:focus { top: .5rem; }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; z-index: 20; }
.head-row { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; min-height: 44px; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 1.9rem; height: 1.9rem; flex: none; }
.brand-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; line-height: 1; letter-spacing: -.005em; }
.office-tag { font-size: 1rem; color: var(--ink-2); border-left: 1px solid var(--rule); padding-left: .9rem; white-space: nowrap; }
.office-nav { margin-left: auto; }
.office-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.office-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; color: var(--ink); text-decoration: none; font-weight: 500; border-radius: 3px; }
.office-nav a:hover { background: var(--paper-2); color: var(--ink); }
.office-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); color: var(--accent-dark); font-weight: 600; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: 0 1.5rem; border-radius: 4px; border: 1px solid transparent; font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out; touch-action: manipulation; }
.btn { background: var(--paper-2); color: var(--ink); }       /* 11-07: plain buttons follow the look; the kinds below override */
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dark); color: var(--on-accent); }
.btn-primary:active { background: var(--accent-press); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--paper-2); color: var(--ink); }
.btn-sm { min-height: 44px; padding: 0 1rem; }
.btn-danger { background: var(--sheet); color: var(--red); border: 1.5px solid var(--red); }
.btn-danger:hover { background: var(--red-tint); color: var(--red); }
.link-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0; background: none; border: 0; color: var(--accent); font-family: var(--sans); font-size: 1rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
.link-btn:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; }

/* Footer */
.site-footer { background: var(--foot-bg); color: var(--foot-text); padding: 2.75rem 0; font-size: 1rem; }
.site-footer p + p { margin-top: .35rem; }
.site-footer a { color: var(--foot-text); }
.site-footer :focus-visible { outline-color: var(--gold); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.foot-brand { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: var(--foot-text); margin-bottom: .6rem; }

/* Page frame */
.office-main { padding: 2.5rem 0 4.5rem; }
.crumbs { font-size: 1rem; color: var(--ink-2); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.crumbs li + li::before { content: "/"; margin: 0 .45rem; color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.page-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--ink); }
.page-title h1 { font-weight: 400; font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; }
.page-title > div:first-child { flex: 1 1 22rem; }
.page-sub { color: var(--ink-2); margin-top: .5rem; }
.page-title h2 { font-weight: 400; font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); line-height: 1.2; letter-spacing: -.01em; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.5rem; margin-top: 2rem; align-items: start; }
.layout-one { max-width: 48rem; margin-top: 2rem; }
.layout > div > .card + .card, .layout-one > .card + .card { margin-top: 1.5rem; }
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; padding: 2rem; }
.card + .card { margin-top: 1.5rem; }
.card h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.card h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.35; margin-top: 1.5rem; }
.card-lede { color: var(--ink-2); margin-top: .4rem; }
.card > p + p { margin-top: .75rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 1.75rem; }

/* Messages */
.alert { display: flex; gap: .7rem; align-items: flex-start; background: var(--red-tint); border: 1px solid #E7B9B1; border-left: 3px solid var(--red); padding: .9rem 1rem; border-radius: 3px; color: var(--ink); font-weight: 600; margin: 1.25rem 0; }
.alert .i { color: var(--red); margin-top: .2rem; }
.notice { display: flex; gap: .7rem; align-items: flex-start; background: #DDEBD2; border: 1px solid #A9C99A; border-left: 3px solid #24521B; padding: .9rem 1rem; border-radius: 3px; color: var(--ink); margin: 1.25rem 0; }
.notice .i { color: #24521B; margin-top: .2rem; }
.notice h2 { font-size: 1.1875rem; }
.notice p + p { margin-top: .4rem; }
.warn { display: flex; gap: .7rem; align-items: flex-start; background: var(--red-tint); border: 1px solid #E7B9B1; padding: .9rem 1rem; border-radius: 3px; margin-top: 1rem; }
.warn .i { color: var(--red); margin-top: .2rem; }

/* Stepper */
.stepper { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: 1.75rem; }
.stepper li { border-top: 3px solid var(--rule); padding-top: .6rem; font-size: 1rem; color: var(--ink-2); display: flex; gap: .4rem; align-items: flex-start; }
.stepper li.done { border-top-color: var(--accent); color: var(--ink); }
.stepper li.done .i { color: var(--accent); }
.stepper li.now { border-top-color: var(--ink); color: var(--ink); font-weight: 700; }
.stepper .i { width: 1.1em; height: 1.1em; margin-top: .2rem; }
.stepper-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.5rem; }
.stepper-2 { counter-reset: st; }
.stepper-2 li { counter-increment: st; align-items: center; gap: .6rem; }
.stepper-2 li:not(.done)::before { content: counter(st); display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--rule); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--ink-2); background: var(--sheet); }
.stepper-2 li.now::before { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.stepper-2 .i { margin-top: 0; }
.step-count { display: none; font-size: 1rem; color: var(--ink-2); margin-top: 1rem; }

/* Forms */
.form-note { display: flex; gap: .75rem; align-items: flex-start; background: var(--paper-2); border-left: 4px solid var(--accent); padding: 1.1rem 1.25rem; margin-bottom: 2rem; color: var(--ink); }
.form-note .i { color: var(--accent-dark); margin-top: .2rem; }
.card h2 + .form-note { margin-top: 1rem; }
.field { border: 0; margin: 0; padding: 2rem 0; border-top: 1px solid var(--rule); min-width: 0; }
.field:first-of-type { border-top: 0; padding-top: .25rem; }
.card-lede + .field, .form-note + .field, .card-lede + fieldset.field { padding-top: 1.25rem; }
.field legend, .field .flabel { font-family: var(--serif); font-size: 1.3125rem; font-weight: 700; line-height: 1.35; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; width: 100%; }
/* Floated legends render as normal blocks: no gap, no broken rule, no notch in the error bar */
.field legend { float: left; width: 100%; margin-bottom: .75rem; }
.field legend + * { clear: both; }
.field legend.sr-only { float: none; }
.field legend.sr-only + * { clear: none; }
.req { font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1; color: var(--red); }
.opt { font-family: var(--sans); font-size: 1rem; font-weight: 400; line-height: 1; color: var(--ink-2); }
.help { color: var(--ink-2); margin-top: .5rem; font-size: 1.0625rem; line-height: 1.55; max-width: 40rem; }
.select { display: block; width: 100%; max-width: 34rem; min-height: 52px; margin-top: .75rem; padding: .7rem 2.6rem .7rem .9rem; font-family: var(--sans); font-size: 1.125rem; line-height: 1.35; color: var(--ink); background-color: var(--sheet);
  /* a plain CSS chevron: two thin gradient strokes, so the page loads no image and the CSP stays img-src 'self' */
  background-image: linear-gradient(45deg, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: right 1.3rem center, right .85rem center; background-size: .45rem .45rem, .45rem .45rem; background-repeat: no-repeat;
  -webkit-appearance: none; appearance: none; border: 1px solid var(--ink-3); border-radius: 8px; cursor: pointer; text-overflow: ellipsis; }
.select:hover { border-color: var(--ink-2); }
.select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.num { display: block; width: 100%; max-width: 12rem; min-height: 52px; margin-top: .75rem; padding: .7rem .9rem; font-family: var(--sans); font-size: 1.125rem; color: var(--ink); background: var(--sheet); border: 1px solid var(--ink-3); border-radius: 3px; }
.num:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.code-in { display: block; width: 100%; max-width: 22rem; min-height: 48px; margin-top: .6rem; padding: .6rem .85rem; font-family: var(--mono); font-size: 1.125rem; letter-spacing: .06em; color: var(--ink); background: var(--sheet); border: 1px solid var(--ink-3); border-radius: 3px; }
.code-in:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-top: 1.75rem; border-top: 2px solid var(--ink); margin-top: .5rem; }
.submit-note { color: var(--ink-2); flex-basis: 100%; margin-top: .25rem; }

/* Check boxes (the whole row is the label) */
.checks { display: grid; gap: .75rem; margin-top: 1.25rem; }
.check { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; min-height: 52px; transition: border-color .18s ease-out, background-color .18s ease-out; }
.check:hover { border-color: var(--ink-3); }
.check input { width: 1.6rem; height: 1.6rem; margin: .1rem 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.check:has(input:checked) { background: var(--accent-tint); border-color: var(--accent); }
.check:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.k-title { display: block; font-weight: 600; line-height: 1.4; }
.check--danger { margin-top: 1rem; }
.check--danger:has(input:checked) { background: var(--red-tint); border-color: var(--red); }
.check--danger input { accent-color: var(--red); }

/* Picked choices (the chart step) */
.picked { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.5rem; margin: 0 0 1.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--rule); }
.picked div { padding: .45rem 0; }
.picked dt { font-size: 1rem; color: var(--ink-2); }
.picked dd { margin: 0; font-weight: 600; }
.empty-note { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; }
.empty-note .i { margin-top: .2rem; flex: none; }

/* Summary aside */
.sum h2 { font-size: 1.25rem; }
.sum dl { margin-top: .75rem; }
.sum dl div { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .6rem 0; border-top: 1px solid var(--rule); }
.sum dt { color: var(--ink-2); font-size: 1rem; }
.sum dd { margin: 0; font-weight: 600; }
.sum .text-link { margin-top: .75rem; justify-content: flex-start; text-align: left; line-height: 1.3; padding-top: .55rem; padding-bottom: .55rem; }
.sum-note { font-size: 1rem; color: var(--ink-2); margin-top: .9rem; }

/* Status chips */
.chip { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.25; padding: .32rem .6rem; border-radius: 3px; border: 1px solid transparent; max-width: 19rem; text-align: left; }
.chip .i { width: 1.05em; height: 1.05em; stroke-width: 2; }
.chip--wait { background: var(--accent-tint); color: var(--accent-dark); border: 1px dashed #5B6B88; }
.chip--ready { background: #F7E6C3; color: #6B3F00; border-color: #E2C17F; }
.chip--confirmed { background: #DDEBD2; color: #24521B; border-color: #A9C99A; }
.chip--erased { background: var(--paper-2); color: var(--ink-2); border-color: var(--rule); }
.page-title .chip { max-width: none; }

/* Case list */
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1.5rem; }
.legend li { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; color: var(--ink-2); }
.legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.legend .chip { max-width: none; }
.code-help { display: flex; gap: .55rem; align-items: flex-start; }
.code-help .i { margin-top: .2rem; color: var(--ink-3); }
.cases { width: 100%; border-collapse: collapse; margin-top: 1.75rem; background: var(--sheet); border: 1px solid var(--rule); }
.cases caption { text-align: left; }
.cases th { text-align: left; font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--ink); padding: .9rem 1rem; border-bottom: 2px solid var(--ink); background: var(--paper-2); }
.cases td { padding: 1rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.cases tbody tr:hover { background: var(--paper); }
.cases .code { font-family: var(--mono); font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.cases .svc { font-weight: 600; }
.cases .sub { display: block; color: var(--ink-2); font-size: 1rem; font-weight: 400; margin-top: .15rem; }
.cases .next form { margin: 0; }
.cases .next .sub { margin-top: 0; }
.foot-note { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-2); margin-top: 1.25rem; font-size: 1rem; }
.foot-note .i { margin-top: .2rem; color: var(--ink-3); }
.empty { color: var(--ink-2); margin-top: 1.5rem; }
.new-case { margin-top: 3rem; }

/* Sign-off */
.crit-wide { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.crit-wide th { text-align: left; font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--ink); padding: .6rem .75rem .6rem 0; border-bottom: 2px solid var(--ink); }
.crit-wide td { padding: .85rem .75rem .85rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.crit-wide tr.gap td { background: var(--red-tint); }
.crit-wide tr.gap td:first-child { box-shadow: inset 3px 0 0 var(--red); padding-left: .75rem; }
.crit-note { display: block; color: var(--ink-2); font-size: 1rem; margin-top: .2rem; }
.shown { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent-dark); font-weight: 700; white-space: nowrap; }
.notshown { display: inline-flex; align-items: center; gap: .3rem; color: var(--red); font-weight: 700; white-space: nowrap; }
.asked { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.locked { background: var(--paper-2); border-style: dashed; }
.locked h2 { display: flex; align-items: center; gap: .55rem; color: var(--ink-2); }
.done-card .ok-line { display: flex; gap: .6rem; align-items: flex-start; font-weight: 700; color: #24521B; margin-top: .75rem; }
.done-card .ok-line .i { margin-top: .15rem; }
.erase h2 { font-size: 1.15rem; }

/* The agreement text */
.agreement { margin-top: 1rem; max-height: 32rem; overflow: auto; padding: 1.25rem 1.5rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; }
.agreement > * + * { margin-top: .9rem; }
.agreement h1, .agreement h2, .agreement h3 { font-size: 1.1875rem; line-height: 1.35; margin-top: 1.25rem; }
.agreement ul, .agreement ol { padding-left: 1.25rem; }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .layout .sum { order: -1; }
}
@media (max-width: 820px) {
  .office-tag { display: none; }
}
@media (max-width: 640px) {
  .brand-name { white-space: nowrap; font-size: 1.1rem; }
  .brand-mark { width: 1.7rem; height: 1.7rem; }
  .head-row { gap: .75rem; }
  .office-nav a { white-space: nowrap; padding: 0 .6rem; }
  .picked { grid-template-columns: 1fr; }
  .select { max-width: none; }
  .chip { max-width: 17rem; }
  .card { padding: 1.4rem 1.15rem; }
  .stepper li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stepper li .i { display: none; }
  .stepper li { padding-top: 0; border-top-width: 5px; }
  .step-count { display: block; }
  .stepper-2 { margin-bottom: 0; }
  .layout-one .step-count { margin: .75rem 0 1.25rem; }
  .btn, .submit-row .btn { width: 100%; }
  .text-link { width: auto; }
  /* The case list becomes cards */
  .cases, .cases tbody { display: block; width: 100%; }
  .cases { border: 0; background: transparent; }
  .cases thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cases tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem .75rem; align-items: center; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; padding: 1rem 1rem .6rem; margin-top: .75rem; }
  .cases td { display: block; border: 0; padding: 0; }
  .cases td.c-code { grid-column: 1; grid-row: 1; }
  .cases td.c-stage { grid-column: 1; grid-row: 2; justify-self: start; }
  .cases td.c-svc, .cases td.c-plan, .cases td.c-next { grid-column: 1 / -1; }
  .cases td.c-svc { padding-top: .4rem; border-top: 1px solid var(--rule); }
  .cases td.c-plan { display: flex; justify-content: space-between; gap: 1rem; }
  .cases td[data-label]::before { content: attr(data-label); flex: none; white-space: nowrap; font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.6; color: var(--ink); }
  .cases td.c-next > div { text-align: right; }
  .cases td.c-svc::before { display: none; }
  .cases td.c-next { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .crit-wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .crit-wide, .crit-wide tbody, .crit-wide tr, .crit-wide td { display: block; width: 100%; }
  .crit-wide tr { border-bottom: 1px solid var(--rule); padding: .6rem 0; }
  .crit-wide td { border: 0; padding: .2rem 0; }
  .crit-wide td:nth-child(2), .crit-wide td:nth-child(3) { display: inline-flex; width: auto; margin-right: 1.25rem; vertical-align: middle; }
  .crit-wide td:nth-child(3):has(.crit-note) { display: block; margin-top: .2rem; }
  .crit-wide tr.gap { background: var(--red-tint); box-shadow: inset 3px 0 0 var(--red); padding-left: .75rem; }
  .crit-wide tr.gap td { background: transparent; box-shadow: none; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .chip, .check { border: 1px solid CanvasText; }
  .brand-mark { forced-color-adjust: none; }
}

/* 11-07: per-person sign-in (web/office_accounts.py): text boxes, the two-step key, the signed-in menu */
.text-input { display: block; width: 100%; max-width: 34rem; min-height: 52px; margin-top: .75rem; padding: .7rem .9rem; font-family: var(--sans); font-size: 1.125rem; line-height: 1.35; color: var(--ink); background-color: var(--sheet); border: 1px solid var(--ink-2); border-radius: 6px; }
.text-input:hover { border-color: var(--ink); }
.text-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem; letter-spacing: .06em; margin: .5rem 0 1rem; overflow-wrap: anywhere; }
.help code, .key code { font-size: 1rem; overflow-wrap: anywhere; }
.steps-list { margin: 0 0 .5rem; padding-left: 1.25rem; }
.office-nav .who { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; }
.office-nav form { display: inline; }
.office-nav form .btn { min-height: 44px; }

/* 11-07: with sign-in on, the menu has more items; on smaller screens it takes its own row and wraps */
@media (max-width: 820px) {
  .head-row { flex-wrap: wrap; row-gap: 0; padding-bottom: .4rem; }
  .office-nav { margin-left: 0; width: 100%; }
  .office-nav ul { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .office-nav .who { display: none; }
}

/* ---- answer cards (11-07): each question shows every answer; a card is one radio button, the whole card is its label ---- */
.field.q legend { align-items: center; gap: .35rem .7rem; margin-bottom: 1rem; }
.qn { display: inline-grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.choices--one { grid-template-columns: minmax(0, 1fr); }
.choice { display: flex; gap: .85rem; align-items: flex-start; min-height: 56px; padding: .95rem 1.05rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 27, 45, .06); cursor: pointer; transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out; }
.choice:hover { border-color: var(--ink-3); box-shadow: 0 4px 14px -8px rgba(15, 27, 45, .35); }
.choice input { -webkit-appearance: none; appearance: none; display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; margin: .12rem 0 0; border: 2px solid var(--ink-3); border-radius: 50%; background: var(--sheet); cursor: pointer; }
.choice input::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .12s ease-out; }
.choice input:checked { border-color: var(--accent); }
.choice input:checked::before { transform: scale(1); }
.choice:has(input:checked) { background: var(--accent-tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.c-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.c-title { font-weight: 600; line-height: 1.35; color: var(--ink); }
.c-sub { font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.choice--later { background: var(--paper); box-shadow: none; }
.choice--later .c-title { font-weight: 500; color: var(--ink-2); }
.choice-group { margin: 1.4rem 0 .6rem; font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.field.q legend + .choice-group { margin-top: 0; }
@media (max-width: 640px) {
  .choices { grid-template-columns: minmax(0, 1fr); }
  .qn { width: 1.9rem; height: 1.9rem; }
  .stepper-2 li:not(.done)::before { display: none; }       /* the "Step 1 of 2" line says it on a phone */
}
@media (prefers-reduced-motion: reduce) { .choice, .choice input::before { transition: none; } }
@media (forced-colors: active) {
  .choice { border: 1px solid CanvasText; }
  .choice input { -webkit-appearance: auto; appearance: auto; }
  .choice input::before { display: none; }
  .qn { border: 1px solid CanvasText; }
}

/* ---- the front-desk sign (11-07): big words on screen; on paper only the sign prints, one letter-size page ---- */
.poster-link { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.wwb { margin-top: 2rem; }
.wwb th[scope='row'] { width: 32%; vertical-align: top; padding-right: 1.25rem; }
.made { margin: 0; padding-left: 1.1rem; }
.made li + li { margin-top: .4rem; }
.poster-tools .btn { margin-top: 1rem; }
.poster { max-width: 44rem; margin: 2.5rem 0 3rem; padding: 3rem 2.75rem; background: var(--sheet); border: 1px solid var(--rule); border-top: 10px solid var(--ink); border-radius: 10px; text-align: center; }
.poster h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.poster-big { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 700; line-height: 1.25; color: var(--ink); margin: 1.5rem 0 0; }
.poster-line { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.4; color: var(--ink-2); margin: .75rem 0 0; }
.poster-qr { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 2.25rem auto 0; max-width: 34rem; text-align: left; }
.poster-qr .qr { flex: none; width: 9.5rem; height: 9.5rem; }
.poster-qr p { margin: 0; font-size: 1.125rem; line-height: 1.45; color: var(--ink-2); }
.poster-foot { margin: 2.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1rem; color: var(--ink-2); }
@media (max-width: 640px) {
  .poster { padding: 2rem 1.25rem; }
  .poster-qr { flex-direction: column; text-align: center; }
}
@media print {
  @page { size: letter; margin: .6in; }
  html, body { background: #fff; }
  .skip, .site-header, .site-footer, .poster-tools { display: none; }
  .office-main .wrap { max-width: none; padding: 0; }
  .poster { max-width: none; margin: 0; padding: .5in .4in; border: 2pt solid #000; border-top: 14pt solid #000; border-radius: 0; break-inside: avoid; }
  .poster h2 { font-size: 3.85rem; color: #000; }
  .poster-big { font-size: 2.35rem; color: #000; }
  .poster-line { font-size: 1.65rem; color: #000; }
  .poster-qr { margin-top: .45in; gap: .35in; max-width: none; }
  .poster-qr .qr { width: 2.1in; height: 2.1in; }
  .poster-qr p { font-size: 1.35rem; color: #000; }
  .poster-foot { font-size: 1rem; color: #000; border-top-color: #000; margin-top: .45in; }
}

/* ---- the first-time tour and the Help tab (11-07) ---- */
.tour-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .9rem; max-width: 48rem; }
.tour-step { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 1.25rem 1.35rem; }
.tour-step .qn { margin-top: .1rem; }
.tour-step h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--serif); font-size: 1.3125rem; line-height: 1.3; }
.tour-step h3 .i { color: var(--accent); flex: none; }
.tour-step p { margin: .35rem 0 0; color: var(--ink-2); }
.rules-card { max-width: 48rem; margin-top: 1.5rem; }
.rules-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.rules-list li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; }
.rules-list .i { color: var(--accent); margin-top: .25rem; flex: none; }
.tour-go { max-width: 48rem; margin-top: 1.5rem; flex-wrap: wrap; }
.tour-link { margin-top: 1.25rem; }
.answer { max-width: 48rem; margin-top: 1.5rem; border-left: 6px solid var(--accent); }
.answer-q { font-weight: 700; margin: .5rem 0 0; }
.faq-list { margin-top: 2.5rem; }
.faq-list h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.faq { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; margin-top: .6rem; }
.faq summary { min-height: 52px; display: flex; align-items: center; padding: .8rem 1.1rem; font-weight: 600; cursor: pointer; }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.faq[open] summary { border-bottom: 1px solid var(--rule); }
.faq .steps-list, .faq p { margin-left: 1.1rem; margin-right: 1.1rem; }
.faq p:last-child { margin-bottom: 1rem; }
.help-contact { margin-top: 2rem; }
.welcome { max-width: 48rem; border-top: 6px solid var(--accent); }
.welcome h2 { font-size: 1.5rem; }

/* ---- 11-07 Settings: menu layouts, larger text and the theme cards. Colours come from /static/office-themes.css. ---- */
.nav-group { display: none; }
html.text-big { font-size: 1.125rem; }
.themes { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.theme-card { align-items: center; }
.swatch { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 8px; border: 1px solid var(--rule); }
.settings .card + .card { margin-top: 1.5rem; }
.soon p { color: var(--ink-2); margin-top: .5rem; }
html.layout-compact .office-main { padding: 1.5rem 0 3rem; }
html.layout-compact .card { padding: 1.25rem 1.4rem; }
html.layout-compact .field { padding: 1.25rem 0; }
html.layout-compact .choice { min-height: 48px; padding: .7rem .9rem; }
html.layout-compact .page-title { padding-bottom: 1rem; }
html.layout-compact .head-row { min-height: 3.5rem; }
@media (min-width: 1024px) {
  html.layout-side body { display: grid; grid-template-columns: 17rem minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100vh; }
  html.layout-side .site-header { grid-column: 1; grid-row: 1 / span 2; border-bottom: 0; border-right: 1px solid var(--rule); }
  html.layout-side .head-row { position: sticky; top: 0; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.5rem 1rem; max-width: none; }
  html.layout-side .office-tag { border-left: 0; padding-left: 0; }
  html.layout-side .office-nav { margin-left: 0; }
  html.layout-side .office-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  html.layout-side .office-nav a { width: 100%; }
  html.layout-side .office-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
  html.layout-side .nav-group { display: block; margin: 1rem .8rem .25rem; font-size: 1rem; font-weight: 700; color: var(--ink-2); }
  html.layout-side .office-nav .who { padding: 0 .8rem; }
  html.layout-side .office-main, html.layout-side .site-footer { grid-column: 2; }
}

/* 11-08 (Evan's pick A): the case page shows one step per screen */
.stepper.steps5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.links-line { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .5rem 0 1rem; }
.links-line .quiet { color: var(--ink-2); }
.one-step { max-width: 44rem; }
.nav-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
.nav-row .btn { min-height: 48px; }
.action-bar { position: sticky; bottom: 0; background: var(--sheet); border-top: 1px solid var(--rule); padding: .75rem 0 .25rem; margin-top: 1rem; }
.big-check .check { padding: 1rem; border: 1px solid var(--rule); border-radius: 8px; margin-bottom: .6rem; background: var(--sheet); }
.quiet { color: var(--ink-2); }
details.fold { margin: .5rem 0 1rem; }
details.fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--accent); }

/* V12 (11-08) F3: the physician step's ok-line outside the done card; F4: the packet fold keeps a disclosure marker. */
.one-step .ok-line { display: flex; gap: .6rem; align-items: flex-start; font-weight: 700; color: #24521B; margin: .25rem 0 .75rem; }
.one-step .ok-line .i { margin-top: .15rem; flex: none; }
details.fold > summary::before { content: "\25B8"; margin-right: .5rem; font-size: 1.1rem; line-height: 1; }
details.fold[open] > summary::before { content: "\25BE"; }