/* Blue Obsidian Solutions — Employee Survey. One stylesheet, no build.

   PROVENANCE. The token sheet below and the brand files under static/ were vendored
   on 2026-10-24 from the BOS-owned repository BlueObsidianSolutions/bos-sewp-site
   (default branch prod, commit b542d925e98dad424969a4761c3b626bc73afd0e):
     assets/css/site.css .... the colour tokens and --font-display, values unchanged
                              (--font-body keeps Montserrat first with its own fallback list;
                              --ok, --shell and --gap are this site's own)
     assets/fonts/*.woff2 ... bebas-neue-v16-latin-400, montserrat-v31-latin-wght
                              (the SHA-256 of each is in fonts/LICENSE.md)
     assets/fonts/LICENSE.md  adapted, not copied: the OFL text, source URLs and hashes are that
                              repository's; the notice lines the font files carry are added, and its
                              "Updating a font" paragraph is replaced by this site's procedure
     assets/img/bos-mark.png  copied byte for byte (the brand owner's standalone mark, 197x325)
                              sha256 3a5e0dd0dcf694ff2c8e207d72330ee64a469f2bd18e4414c2068bd5c074aa91
     assets/img/favicon-32.png copied byte for byte
                              sha256 e3e771a196ac376b56547b344ac9f34ed8ad4b6924af2d216c895949f42804b7
     assets/img/bos-lockup-stacked-inverse.png  copied byte for byte (the stacked lockup with the
                              white wordmark, for navy surfaces, 652x513; the landing hero only,
                              owner ruling R41)
                              sha256 52bdaa2be07737178619050d1b1600e88cb22aa47760ee61569949569803d74a
   Fonts are self-hosted OFL: see fonts/LICENSE.md. static_test.go pins every hash named here.

   COLOUR PROVENANCE. --brand-* are quoted from that repository's
   brand/brand-guidelines.md (MEASURED-PROVISIONAL, completed 2026-07-31). --corp-*
   were read on 2026-09-15 from the corporate site's theme (blueobsidian.solutions,
   Squarespace) as that repository's assets/css/site.css recorded them: accent
   hsl(50.24 99.19% 51.37%) = #fed608, darkAccent hsl(233.18 52.38% 16.47%) = #141940,
   "black" hsl(0 0% 35%) = #595959; every other neutral there is derived for that site.
   --ok and everything below :root is this site's own.

   CONTRAST (from that record, binding): yellow is text only on navy, never on white;
   white and --on-dark-soft are the text on navy; navy is the text on yellow.

   BRAND RULE FOR THE MARK (same record, "Usage rules"; owner ruling R41): a standalone mark
   in a masthead is at most 32 px tall and its visible text carries the name; the mark is
   never set beside typed company text. The stacked white lockup is the only sanctioned
   composition on a navy surface, and it needs clear space of half the mark's width on every
   side (0.132 of the lockup's own width) and, as a judgement, 300 px of width. */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/bebas-neue-v16-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/montserrat-v31-latin-wght.woff2") format("woff2"); }
:root {
  --brand-navy: #2b3488; --brand-yellow: #fed608; --brand-yellow-mid: #ecc618; --brand-blue-pale: #bfe4f3; --brand-ink: #333333;
  --corp-navy: #141940; --corp-navy-deep: #0d1130; --corp-grey: #d8d8d8; --corp-black: #595959;
  --paper: #ffffff; --paper-2: #f4f4f4; --line: #e2e2e2; --line-strong: #bdbdbd;
  --ink: var(--brand-ink); --ink-soft: var(--corp-black); --on-dark: #ffffff; --on-dark-soft: #c9cce6;
  --danger: #8c1d18; --ok: #1f6b3a;
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shell: 56rem; --gap: 1rem;
}
/* Role layer (S13, R64). Colours are the BOS sheet above. Spacing, radii and motion are
   Arcadia's non-brand values, vendored by value from brand/design-tokens.css lines 40-51
   (Arcadia v1.5) and the brand/prototypes modal and drawer curve. --line-control is this
   site's own: 3.69:1 on white and 3.35:1 on the page, for input and option edges. */
:root {
  --line-control: #858585; --danger-surface: #fbeae9; --danger-edge: rgb(140 29 24 / .3);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem;
  --duration-instant: 150ms; --duration-default: 200ms; --duration-emphatic: 300ms; --duration-out: 120ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-enter: cubic-bezier(.2, .7, .3, 1);
  --shadow-card: 0 1px 2px rgb(20 25 64 / .06);
  --z-sticky: 5;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* The role layer's sources by path, read on 2026-10-26 (design-language brief §1.2, §4, §10.1): --radius-*,
   --duration-instant, --duration-default, --duration-emphatic and --easing-default are brand/design-tokens.css
   lines 40-51; --easing-enter is the curve of the modal in brand/prototypes/it-assets-register-modal.html (line 29)
   and of the drawer and the modal in brand/prototypes/clearance-workflows.html (lines 102 and 139); the --space-*
   steps are the 0.25rem scale brand/README.md names under "Spacing scale"; --duration-out is the 120 ms of
   Foundation/ui's tooltip fade (src/index.css line 23). This site's own: --danger-surface (the error surface the
   sheet already used), --danger-edge (--danger at 30 %, the edge of an error banner, line and notice), --shadow-card
   (Tailwind's shadow-sm, tinted navy) and --z-sticky (the progress band, under the skip link's 10). The [hidden]
   reset keeps a screen the flow hides hidden whatever display its class sets;
   .sr-only is Tailwind's, so the name carries over when the survey moves into Arcadia. */
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; } /* phone pass: no text inflation on iOS landscape */
/* phone pass: a column, so the footer sits at the bottom of a short page (receipt, error, gate) */
body { margin: 0; font: 400 1rem/1.55 var(--font-body); color: var(--ink); background: var(--paper-2); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
/* phone pass: the focused skip link is navy on the yellow (11.9:1), not the default link blue */
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: var(--brand-yellow); color: var(--corp-navy); font-weight: 600; padding: .5rem; z-index: 10; }
/* phone pass: width 100% keeps the shell full width now that body is a column (auto side margins would shrink-wrap it) */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gap); }
.topbar { background: var(--corp-navy); color: var(--on-dark); }
.topbar__inner { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--on-dark); text-decoration: none; }
/* R41: the mark alone (the brand record caps a masthead mark at 32 px), the site's own name as its text */
.brand__mark { height: 32px; width: auto; }
.brand__name { font: 400 1.4rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
/* phone pass: `main` is also .shell, whose padding shorthand zeroed the vertical padding asked for here */
main.shell { flex: 1 0 auto; padding-block: 1.5rem 3rem; }
/* phone pass: overflow-wrap on headings, so one long word wraps instead of widening the page */
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--corp-navy); margin: 0 0 .5rem; overflow-wrap: break-word; }
h1 { font-size: 2.4rem; line-height: 1.05; } h2 { font-size: 1.5rem; }
.hero { margin: 1rem 0 1.5rem; } .lede { color: var(--ink-soft); font-size: 1.05rem; } .intro { color: var(--ink-soft); }
/* R41: the landing hero is a navy panel carrying the stacked white lockup. The record's clear space (half the
   mark's width) is 0.132 of the lockup's width on every side, 39.6 px at the 300 px cap. The panel pads 2.5rem
   (40 px) above and below and 10.5% of its own width at the sides, and the lockup fills the rest up to 300 px,
   so all four sides keep at least 0.132 of the lockup's width from the narrowest phone up to the cap. */
.hero__brand { background: var(--corp-navy); border-radius: .5rem; padding: 2.5rem 10.5%; }
.hero__lockup { display: block; width: 100%; max-width: 18.75rem; height: auto; margin: 0 auto; }
.hero--brand { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 48rem) { .hero--brand { grid-template-columns: 24rem 1fr; column-gap: 2rem; } }
/* S13 (R64): a card, a door and a questionnaire section without scripts are on the role radius; the S13 section
   below gives the card and the door the card shadow */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; margin: 0 0 1.25rem; }
.card--mandatory { border-left: .4rem solid var(--brand-yellow); }
.card--receipt .receipt { font: 400 2.2rem/1 var(--font-display); letter-spacing: .1em; color: var(--corp-navy); }
.doors { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin: 0 0 1.25rem; }
@media (min-width: 40rem) { .doors { grid-template-columns: 1fr 1fr; } }
.door { display: block; background: var(--corp-navy); color: var(--on-dark); padding: 1.25rem; border-radius: var(--radius-lg); text-decoration: none; }
.door h2 { color: var(--brand-yellow); } .door p { color: var(--on-dark-soft); margin: 0; }
/* phone pass: a yellow ring around a navy block sits on the pale page (1.4:1), so keyboard focus
   gets the navy ring with a yellow band between it and the block; hover keeps the yellow outline */
.door:hover { outline: 3px solid var(--brand-yellow); outline-offset: 2px; }
.door:focus-visible { outline: 3px solid var(--corp-navy); outline-offset: 3px; box-shadow: 0 0 0 3px var(--brand-yellow); }
.statement p { margin: 0 0 .75rem; } .statement h2 { font-size: 1.2rem; margin-top: 1rem; }
.statement table { border-collapse: collapse; width: 100%; font-size: .95rem; } .statement td, .statement th { border: 1px solid var(--line); padding: .4rem .5rem; text-align: left; vertical-align: top; }
/* R40: renderStatement wraps every table in .table-scroll, a focusable labelled region. On a phone the region
   scrolls and the table stays a table. The cells are transparent and the region's four backgrounds are the
   scroll cue: the "local" covers travel with the content and hide a shadow at either end, the "scroll" shadows
   stay on the box edges, so a shadow shows only on a side that has more to read. The cell floor is low and
   the cells break anywhere, so a three-column table has a chance to fit whole and a five-column one visibly scrolls. */
.table-scroll { max-width: 100%; margin: 0 0 .75rem; overflow-x: auto;
  background:
    linear-gradient(to right, var(--paper), rgb(255 255 255 / 0)) left center / 1.75rem 100% no-repeat local,
    linear-gradient(to left, var(--paper), rgb(255 255 255 / 0)) right center / 1.75rem 100% no-repeat local,
    linear-gradient(to right, rgb(20 25 64 / .3), rgb(20 25 64 / 0)) left center / .9rem 100% no-repeat scroll,
    linear-gradient(to left, rgb(20 25 64 / .3), rgb(20 25 64 / 0)) right center / .9rem 100% no-repeat scroll; }
.statement td, .statement th { min-width: 4.5rem; overflow-wrap: anywhere; }
.statement th:first-child, .statement td:first-child { min-width: 6.25rem; overflow-wrap: normal; } /* the row labels ("Custodian", "Platform administrators") keep their words whole, at every width */
.statement tr:has(> :nth-child(4)) > * { min-width: 7.5rem; overflow-wrap: normal; } /* a table of four or more columns cannot fit a phone whole, so its words stay whole ("Administrators" is not cut) and the region scrolls */
@media (max-width: 40rem) { .statement table { font-size: .88rem; } .statement td, .statement th { padding: .35rem .3rem; } }
/* S5 (the console) uses .notice; it is a banner */
.banner, .notice { padding: .75rem 1rem; border-radius: .4rem; margin: 0 0 1rem; }
.banner--info, .notice { background: var(--brand-blue-pale); color: var(--corp-navy); } .banner--error, .error { background: var(--danger-surface); color: var(--danger); padding: .5rem .75rem; border-radius: .4rem; }
.banner--noscript { border-left: .4rem solid var(--brand-yellow); }
.banner--restored .btn { margin: .25rem 0 0; } /* the restored-answers note's "Not yours?" button (app.js); the text before it ends in a space */
/* S13 (R64): without scripts each section of the questionnaire is a card like the statement's, with its radius and
   shadow, so the long page is one system; the flow takes the card off the section (the S13 section below) */
.qsection { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; margin: 0 0 1.25rem; box-shadow: var(--shadow-card); }
/* phone pass: a fieldset's min-width is min-content, which can push a narrow page sideways */
.item { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 1rem 0; min-width: 0; }
/* phone pass: a floated legend is laid out as plain content, so the separator above each item is not cut by it */
.item legend { float: left; width: 100%; font-weight: 600; padding: 0; margin-bottom: .5rem; } .item legend + * { clear: both; }
.item--error { border-left: .3rem solid var(--danger); padding-left: .75rem; }
.req { color: var(--danger); }
.likert, .options { display: grid; gap: .35rem; grid-template-columns: 1fr; }
/* phone pass: six columns need about 46rem (the longest label, "Strongly disagree", will not break narrower), so the grid stacks below 48rem */
@media (min-width: 48rem) { .likert { grid-template-columns: repeat(6, 1fr); } }
.likert label, .options label, .consent { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem; border: 1px solid var(--line); border-radius: .4rem; cursor: pointer; }
.likert label:has(input:checked), .options label:has(input:checked) { border-color: var(--corp-navy); background: var(--brand-blue-pale); }
.likert .cannot { color: var(--ink-soft); }
/* S5's campaign form and roster upload use date and file inputs. S13 (R64, §3.3 of the design-language brief): the
   edge is the control edge, at least 3:1 on every page, the long form's and the console's too, on the role radius */
input[type="text"], input[type="password"], input[type="date"], input[type="file"], textarea, select { width: 100%; font: inherit; padding: .55rem .65rem; border: 1px solid var(--line-control); border-radius: var(--radius-md); }
textarea { resize: vertical; }
/* phone pass: the summary is the tap target of every note, so it has height of its own. S13 (R64): it reads as a
   secondary action, navy and underlined on hover where the pointer can hover, and keeps that look when the flow
   changes its words; on a coarse pointer it is 44 px tall (.65rem above and below its 1.55 lines of .95rem). The
   hover and the touch height are nested in this rule, because the selector is pinned to a single rule. */
.note summary { cursor: pointer; color: var(--corp-navy); font-size: .95rem; margin-top: .5rem; padding-block: var(--space-2); text-underline-offset: .16em; @media (hover: hover) { &:hover { text-decoration: underline; } } @media (pointer: coarse) { padding-block: .65rem; } }
.help, .meta { color: var(--ink-soft); font-size: .9rem; }
.btn { display: inline-block; font: 600 .95rem/1 var(--font-body); padding: .75rem 1.25rem; border-radius: 999px; border: 2px solid var(--corp-navy); color: var(--corp-navy); background: transparent; cursor: pointer; text-decoration: none; }
.btn--primary { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--corp-navy); }
.btn--small { padding: .4rem .8rem; font-size: .85rem; }
.actions { margin: 1.5rem 0; }
.inline label { display: block; font-weight: 600; margin-bottom: .35rem; }
.inline-form { display: inline; margin-left: .5rem; }
/* S13 (R64, fix item 10): a form whose own field is a text field (the console's two phrases) starts its line with no
   margin, so the field's full width starts at the card's edge and does not run .5rem past it */
.inline-form:has(> input[type="text"]) { margin-left: 0; }
.status__list { list-style: none; padding: 0; margin: 0; } .status__list li { padding: .5rem 0; border-top: 1px solid var(--line); }
.foot { background: var(--corp-navy-deep); color: var(--on-dark-soft); padding: 1.5rem 0; font-size: .9rem; margin-top: 2rem; }
table.admin { width: 100%; border-collapse: collapse; } table.admin th, table.admin td { border-bottom: 1px solid var(--line); padding: .5rem; text-align: left; }
/* phone pass: three equal columns left the third label clipped at 320 px; the tiles now wrap when narrow */
.counts { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); } .counts div { background: var(--corp-navy); color: var(--on-dark); border-radius: .5rem; padding: 1rem; text-align: center; overflow-wrap: anywhere; }
.counts strong { display: block; font: 400 2.4rem/1 var(--font-display); color: var(--brand-yellow); }
.saved { color: var(--ok); font-size: .9rem; } .saved--error { color: var(--danger); }

/* ---- Phone-width pass, 2026-10-24, and fix round 1 (additions; every rule above that differs from the brief is marked "phone pass", R40, R41 or by its S5 comment) ---- */
a { color: var(--corp-navy); text-underline-offset: .16em; }
img { max-width: 100%; }
code { font-size: .9em; overflow-wrap: anywhere; }
.card > :first-child, .qsection > :first-child { margin-top: 0; } .card > :last-child, .qsection > :last-child { margin-bottom: 0; }
.statement ul, .statement ol { margin: 0 0 .75rem; padding-left: 1.25rem; }
table.admin td, table.admin th { overflow-wrap: anywhere; } /* a long email must not widen the page */
/* The ring is navy on the pale page and yellow on the navy bars. A radio or box draws its ring round its whole label, so the input keeps no ring of its own inside it. */
:focus-visible { outline: 3px solid var(--corp-navy); outline-offset: 2px; }
.topbar :focus-visible, .foot :focus-visible { outline-color: var(--brand-yellow); }
.likert label:has(input:focus-visible), .options label:has(input:focus-visible), .consent:has(input:focus-visible) { outline: 3px solid var(--corp-navy); outline-offset: 2px; }
.likert label:has(input:focus-visible) input, .options label:has(input:focus-visible) input, .consent:has(input:focus-visible) input { outline: none; }
.likert label:has(input:disabled), .options label:has(input:disabled), .consent:has(input:disabled) { cursor: default; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--corp-navy); flex: none; margin: .2rem 0 0; }
.consent:has(input:checked) { border-color: var(--corp-navy); background: var(--brand-blue-pale); }
.btn--primary:hover { background: var(--brand-yellow-mid); border-color: var(--brand-yellow-mid); }
.inline .btn { margin-top: .75rem; } .closing { color: var(--ink-soft); margin: 1.25rem 0 0; }
/* S13 (R64): on a coarse pointer a small button ("Answer it" on the review among them) is 44 px tall: .825rem above
   and below its .85rem line, inside the 2 px border; a fine pointer keeps the small size */
@media (pointer: coarse) { .btn--small { padding-block: .825rem; } }

/* ---- S13 (R64), 2026-10-26: the questionnaire flow and the page polish. Spec §17; the values are the
   design-language brief's (docs/superpowers/specs/2026-10-26-survey-design-language.md, cited by section below).
   app.js section 7 builds the flow and marks the form is-flow while it runs, so every questionnaire rule here is
   scoped to .qform.is-flow or to an element only the flow adds: without scripts the page is the long form above,
   as it was. Every animation and transition sits inside @media (prefers-reduced-motion: no-preference). This section
   comes before the paper sheet, which stays the last word in print. Pinned by static_flow_test.go. ---- */

/* Buttons (§3.1): .btn and .btn--primary keep their shape; a plain one takes a navy tint on hover, and .btn--ghost is
   the quiet secondary (Back): navy text, its border shown on hover and on focus. The focus ring is still the
   outline above. */
.btn:not(.btn--primary):hover { background: rgb(20 25 64 / .06); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn--ghost { border-color: transparent; }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--corp-navy); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--duration-default) var(--easing-default), border-color var(--duration-default) var(--easing-default), color var(--duration-default) var(--easing-default); }
  .btn:active { transform: scale(.99); }
}

/* Cards (§3.2, §10.2.12): every card and door with the one card shadow, on the role radius their own rules above
   now name. Their padding and margins, the landing's spacing among them, are as they were (R41, R51). */
.card, .door { box-shadow: var(--shadow-card); }

/* Fields (§3.3): the control edge and the role radius are the field rule's own (above); focus stays the outline. In
   the flow a free-text answer opens tall enough to invite a few lines. */
.qform.is-flow textarea { min-height: 7.5rem; }

/* Banners (§3.7): as they were, on the error surface their rule above now names, with an edge on the error ones.
   While the flow runs, its band says in its own words what the page's error banner says, so the banner steps aside. */
.banner--error, .error { border: 1px solid var(--danger-edge); }
.banner.is-flow-hidden { display: none; }

/* Reading measure (§2, §10.2.12): the statements' text and a card's paragraphs stop near 70 characters a line. */
.statement p, .statement ul, .statement ol, .card > p { max-width: 70ch; }

/* The screens (§3.2, §7). Each screen is a card: the opening screen, a section's chapter card, a question (its
   fieldset) and the review, one at a time. The section wrapper gives up its own card; a section's title and intro
   sit on its chapter card (the engine moves them there). Where the band sticks (from 30rem of height, below) the
   scroll margin clears it: 6.5rem below 48rem, where the progress line wraps to two lines, and 5.5rem from 48rem.
   While the notice of a refused submit shows, the band is taller (measured: 206 px at 320, 186 px at 390, 145 px at
   768, 139 px from 1024), so the margin is 13.5rem below 48rem and 9.5rem from 48rem until the last mark is answered
   and the notice goes. Where the band does not stick, it scrolls away with the page and a screen is brought to just
   under the top. A question is the legend in navy; the required mark keeps its colour. */
.qform.is-flow .qsection { min-width: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.qform.is-flow .flow__screen { min-width: 0; margin: 0; padding: var(--space-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); scroll-margin-top: var(--space-2); }
@media (min-width: 48rem) { .qform.is-flow .flow__screen { padding: var(--space-8); } }
@media (min-height: 30rem) {
  .qform.is-flow .flow__screen { scroll-margin-top: 6.5rem; }
  .flow:has(.flow__notice:not([hidden])) ~ .qform.is-flow .flow__screen { scroll-margin-top: 13.5rem; }
}
@media (min-height: 30rem) and (min-width: 48rem) {
  .qform.is-flow .flow__screen { scroll-margin-top: 5.5rem; }
  .flow:has(.flow__notice:not([hidden])) ~ .qform.is-flow .flow__screen { scroll-margin-top: 9.5rem; }
}
.qform.is-flow .flow__screen > :first-child { margin-top: 0; }
.qform.is-flow .flow__screen > :last-child { margin-bottom: 0; }
.qform.is-flow .item.item--error { border-left: .3rem solid var(--danger); }
.qform.is-flow .item legend { margin-bottom: var(--space-4); font-size: 1.15rem; font-weight: 600; line-height: 1.35; color: var(--corp-navy); text-wrap: pretty; }

/* The opening screen and the chapter cards (§2, §3.6): "Section s of S" as a navy eyebrow, the title in the display
   face, the intro in the soft ink (.intro already is), and the chip as a pale pill on a line set as the page's
   other meta lines are. */
.flow__count { margin: 0 0 var(--space-3); font: 600 .8rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--corp-navy); }
.qform.is-flow .flow__chapter h2, .qform.is-flow .flow__review h2 { margin: 0 0 var(--space-3); font-size: 2rem; line-height: 1.05; }
.flow__intro p:has(> .chip) { color: var(--ink-soft); font-size: .9rem; }
.chip { display: inline-block; padding: .3rem .75rem; border-radius: 999px; background: var(--brand-blue-pale); color: var(--corp-navy); font-size: .85rem; font-weight: 600; }

/* Choices (§3.4): native radios and boxes inside their labels. In the flow each option is a row of at least 44 px
   with the control edge, navy on hover where the pointer can hover, and checked as before (navy edge, pale fill);
   Cannot say keeps its quieter ink and the plain edge. From 48rem the scale is six columns, each option a tile with
   its radio over its words: with the row's padding the longest word ("disagree") would not fit six columns of the
   40rem card. */
.qform.is-flow .likert, .qform.is-flow .options { gap: var(--space-2); }
.qform.is-flow .likert label, .qform.is-flow .options label, .qform.is-flow .consent { min-height: 2.75rem; padding: .75rem 1rem; align-items: center; border-color: var(--line-control); border-radius: var(--radius-md); }
.qform.is-flow .likert input, .qform.is-flow .options input, .qform.is-flow .consent input { margin: 0; }
.qform.is-flow .likert .cannot { border-color: var(--line); }
@media (hover: hover) { .qform.is-flow .likert label:hover, .qform.is-flow .options label:hover, .qform.is-flow .consent:hover { border-color: var(--corp-navy); } }
.qform.is-flow .likert label:has(input:checked), .qform.is-flow .options label:has(input:checked), .qform.is-flow .consent:has(input:checked) { border-color: var(--corp-navy); }
@media (min-width: 48rem) { .qform.is-flow .likert label { flex-direction: column; justify-content: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-1); font-size: .9rem; line-height: 1.3; text-align: center; } }
@media (prefers-reduced-motion: no-preference) {
  .qform.is-flow .likert label, .qform.is-flow .options label, .qform.is-flow .consent { transition: border-color var(--duration-instant) var(--easing-default), background-color var(--duration-instant) var(--easing-default); }
}

/* The band (§3.5, §7): the progress above the form while the flow runs, on the page colour so the card scrolls under
   it, sticky at the top of the page under the skip link where the viewport is at least 30rem tall; on a shorter one
   (a 400 % zoom, a phone on its side) it scrolls away with the page, so it never covers the question. One segment
   per section: the share answered (--fill, set by the engine through the style object) fills the grey track in navy,
   a done section is full, and the section in view shows its share on the pale track; never yellow on white. The
   segments are decoration (aria-hidden): the line under them is what is read, with the section's title above it as
   the eyebrow (§2), and on the by-name page "Draft saved." beside it, at the line's end where there is room and
   under it otherwise, taking no room while it is empty. "Draft saved." is held to one line, so the band grows by one
   line at most while it shows; a sentence section 3 sets in its error style (saved--error: the session over, the page
   out of date or expired, a save that failed) wraps whole instead, so it can be read entire on a phone, and the band
   is a line or two taller while it shows (the controller's ruling in the fix round). The notice after a refused
   submit is the error line at its most compact (small type, tight lines), so the band grows as little as it can; the
   engine hides it once every marked question is answered. */
.flow { background: var(--paper-2); padding: var(--space-3) 0 var(--space-2); }
@media (min-height: 30rem) { .flow { position: sticky; top: 0; z-index: var(--z-sticky); } }
.flow__bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.flow__bar-seg { height: .375rem; border-radius: 999px; background: var(--line); overflow: hidden; position: relative; }
.flow__bar-seg::after { content: ""; display: block; height: 100%; background: var(--corp-navy); transform-origin: left center; transform: scaleX(var(--fill, 0)); }
.flow__bar-seg--current { background: var(--brand-blue-pale); }
.flow__bar-seg--done::after { transform: scaleX(1); }
.flow__eyebrow { margin: var(--space-2) 0 0; font: 400 1rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.flow__line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: var(--space-3); margin: var(--space-2) 0 0; }
.flow__meta { margin: 0; font-size: .875rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.flow__line .saved { min-width: 0; margin: 0; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow__line .saved.saved--error { white-space: normal; overflow: visible; }
.flow__notice { margin: var(--space-2) 0 0; padding: .5rem .75rem; border: 1px solid var(--danger-edge); border-radius: .4rem; background: var(--danger-surface); color: var(--danger); font-size: .875rem; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) { .flow__bar-seg::after { transition: transform var(--duration-emphatic) var(--easing-default); } }

/* Back and Next (§3.6, §7): real buttons in a row under the screen, Back on the left and Next always on the right,
   each at least 44 px, as is the submit on the review. Never fixed to the viewport, where a phone's keyboard would
   cover the field. */
.qform.is-flow .flow__nav { display: flex; justify-content: space-between; gap: var(--space-3); margin: var(--space-5) 0; }
.flow__nav .btn, .flow__review .actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 6.5rem; }
.flow__review .actions .btn { line-height: 1.25; } /* the submit's label wraps to two lines at 320 to 360 px */
.flow__nav .btn--primary { margin-left: auto; }

/* The review (§3.6's review rail, §10.3): a row per section over a hairline ("Leadership overall · 11 of 11"); the
   questions that still need an answer in the required mark's colour and the open questions left blank in soft
   italics, each with its Answer it button at the end of its row; the nudge in the soft ink; then the questionnaire's
   closing paragraph, when the set has one, over a hairline in the body ink as the words just above the submit, and
   the submit. The engine marks the two lists: flow__needs is Needs attention, flow__open the open questions left
   blank. A row's button keeps its own colour and, through the button's font shorthand, upright type. */
.flow__review h3 { margin: var(--space-5) 0 var(--space-2); font: 600 1rem/1.3 var(--font-body); color: var(--corp-navy); }
.flow__review ul { margin: 0; padding: 0; list-style: none; }
.flow__review li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.flow__review li > .btn { flex: none; }
.flow__review .flow__needs li { color: var(--danger); }
.flow__review .flow__open li { color: var(--ink-soft); font-style: italic; }
.flow__nudge { margin: var(--space-5) 0 0; color: var(--ink-soft); }
.flow__review .closing { max-width: 70ch; margin: var(--space-6) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink); }
.flow__review .closing + .actions { margin-top: 0; }

/* The section rail (§3.6), from 64rem only: an 11rem rail beside a card of at most 40rem, centred in the shell, the
   segmented bar giving way to it and the band's lines over the card's column. The rail sticks beside the screens
   only where the viewport is also at least 36rem tall, and is then drawn over the band, whose part beside it is
   empty; on a shorter one it scrolls with the page. Nodes are 1.75rem rings in the control edge; the section in view
   is navy with a dot; a done one is filled navy with a white check drawn by two borders, and the button's hidden
   words say "(done)"; the line under a done section is navy. */
.flow-rail { display: none; }
@media (min-width: 64rem) {
  .qform.is-flow { display: grid; grid-template-columns: 11rem minmax(0, 40rem); column-gap: var(--space-6); align-items: start; justify-content: center; }
  .flow-rail { display: block; grid-row: 1 / span 99; }
  .flow__bar { display: none; }
  .flow { display: grid; grid-template-columns: 11rem minmax(0, 40rem); column-gap: var(--space-6); justify-content: center; }
  .flow > * { grid-column: 2; }
}
@media (min-width: 64rem) and (min-height: 36rem) { .flow-rail { position: sticky; top: var(--space-6); z-index: calc(var(--z-sticky) + 1); } }
.flow-rail ol { list-style: none; margin: 0; padding: 0; }
.flow-rail li { position: relative; }
.flow-rail li:not(:last-child)::before { content: ""; position: absolute; left: .8125rem; top: 1.75rem; height: calc(100% - .875rem); width: 2px; border-radius: 2px; background: var(--line); }
.flow-rail li.is-done:not(:last-child)::before { background: var(--corp-navy); }
.flow-rail button { display: flex; align-items: center; gap: .75rem; padding: 0 0 1.75rem; border: 0; background: none; font: inherit; font-size: .8125rem; line-height: 1.3; color: var(--ink-soft); text-align: left; cursor: pointer; }
.flow-rail .dot { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border: 2px solid var(--line-control); border-radius: 50%; background: var(--paper); }
.flow-rail [aria-current="step"] { color: var(--corp-navy); font-weight: 600; }
.flow-rail [aria-current="step"] .dot { border-color: var(--corp-navy); }
.flow-rail [aria-current="step"] .dot::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--corp-navy); }
.flow-rail .is-done .dot { border-color: var(--corp-navy); background: var(--corp-navy); }
.flow-rail .is-done .dot::after { content: ""; width: .3rem; height: .6rem; margin-top: -.15rem; border: solid var(--on-dark); border-width: 0 2px 2px 0; border-radius: 0; background: none; transform: rotate(45deg); }

/* Moving between screens (§4): a short fade and slide in the reading direction on the prototypes' curve, nothing
   moving more than 1rem; Back reverses it; a section's check pops in. Only for a reader who has not asked for
   reduced motion: under reduce the engine swaps at once and nothing here runs. */
@keyframes step-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }
@keyframes step-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-.75rem); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-1rem); } to { opacity: 1; transform: none; } }
@keyframes step-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(.75rem); } }
@keyframes done-pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .qform.is-flow .flow__screen.is-entering { animation: step-in var(--duration-default) var(--easing-enter) both; }
  .qform.is-flow .flow__screen.is-leaving { animation: step-out var(--duration-out) var(--easing-default) both; }
  .qform.is-flow[data-dir="back"] .flow__screen.is-entering { animation-name: step-in-back; }
  .qform.is-flow[data-dir="back"] .flow__screen.is-leaving { animation-name: step-out-back; }
  .flow-rail .is-done .dot::after { animation: done-pop var(--duration-default) var(--easing-enter) both; }
}

/* On paper a card keeps no shadow, as the sheet below keeps no background. */
@media print { .card, .door, .qform.is-flow .flow__screen { box-shadow: none; } }
/* ---- end of S13 (R64) ---- */

/* Paper: no backgrounds, dark text, no copy button, and a statement table printed whole (the receipt and the custody rule are what gets printed). The white lockup would vanish, so the hero panel is left out. */
@media print {
  body { background: #fff; color: #000; display: block; min-height: 0; }
  .topbar, .foot, .door, .counts div { background: none; color: #000; }
  .topbar { border-bottom: 1px solid #000; }
  .brand, .door h2, .door p, .counts strong, .foot { color: #000; }
  .table-scroll { overflow: visible; background: none; }
  .statement td, .statement th { overflow-wrap: normal; }
  .hero__brand, .skip, noscript { display: none; }
  [data-copy] { display: none; }
  .qsection { box-shadow: none; } /* a card keeps no shadow on paper (the S13 section's rule), the long form's sections too */
}