/*
 * The one stylesheet. Pages carry no style element and no style attribute: the Content-Security-Policy allows
 * styles from this origin only (style-src 'self'), and a source scan fails on either.
 *
 * The look is moving from DESIGN.md's look A, "Refined binder", to look B, "Tidewater" (the founder adopted it on 2026-10-10;
 * docs/design/tidewater/), one step at a time in implementation.md's order. Since step 2 the tokens and the typefaces are
 * Tidewater's: the :root below is tokens.json's light theme, as tokens.css compiles it, and the type is Bricolage Grotesque for
 * names, titles and counts and Figtree for everything else. The rules after it are still look A's: a band in the accent carries
 * every page's masthead, with the association's name in capitals over a short rule, and for staff the workspace's tabs cut into
 * its foot, the open one white and joined to the sheet below; white sheets lie on the ground; section headings are small
 * capitals with a hairline to the edge; counts stand in a ledger of ruled rows. Those rules read look A's variable names, which
 * the alias block in :root points at Tidewater's tokens, until each component moves to Tidewater's oc-* classes (step 3 on).
 * WCAG 2.2 AA is the floor every page meets, not what sets the look: contrast of 4.5:1 for text and 3:1 for controls,
 * a focus ring that is always visible and never covered, targets of 44 px, pages that reflow at 320 px and at 200% zoom,
 * and no motion for anyone who asks for less.
 */

/*
 * Bricolage Grotesque and Figtree, served from this origin (wwwroot/lib/bricolage-grotesque/README.md and
 * wwwroot/lib/figtree/README.md), each in its latin and latin-ext subsets. Each unicode-range is Google Fonts' range for its
 * subset, the lines Archivo's rules carried, so a browser fetches a latin-ext file only for a character outside latin. Each
 * weight range is the font's own axis. Neither font has a width axis, so neither rule declares a font-stretch. Bricolage also has
 * an optical-size axis (opsz 12 to 96), which each display rule pins for its role, as tokens.css does: 48 for a page's title (h1),
 * 72 for the association's and the firm's names and for the ledger's counts.
 */

/* Bricolage Grotesque, latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../lib/bricolage-grotesque/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bricolage Grotesque, latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../lib/bricolage-grotesque/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Figtree, latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../lib/figtree/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Figtree, latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../lib/figtree/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Tidewater's tokens: tokens.json's light theme, as docs/design/tidewater/tokens.css compiles it. Light ships first; the dark
     theme the tokens also define is offered later. The association's colour (--assoc, --assoc-strong) is navy until the server
     sets one of the palette's classes beside .host-association (below), never by a style attribute. */
  --canvas: #F6F3EC;
  --canvas-2: #EDE8DD;
  --surface: #FFFFFF;
  --surface-2: #FAF8F3;
  --line: #E6E0D4;
  --line-card: #D9D1C2;
  --line-strong: #CFC7B8;
  --control-line: #857E72;
  --ink: #132430;
  --ink-2: #3D4D58;
  --ink-3: #5A6770;
  --brand: #1C5D72;
  --brand-strong: #144859;
  --brand-tint: #E1EEEE;
  --on-brand: #FFFFFF;
  --chrome: #132430;
  --on-chrome: #FFFFFF;
  --on-chrome-2: rgba(255, 255, 255, 0.72);
  --chrome-line: rgba(255, 255, 255, 0.12);
  --chrome-hover: rgba(255, 255, 255, 0.06);
  --chrome-active: rgba(255, 255, 255, 0.12);
  --chrome-accent: #A9D3CF;
  --ink-on-accent: #132430;
  --focus: var(--brand);
  --assoc: #23465E;
  --assoc-strong: #1A3549;
  --on-assoc: #FFFFFF;
  --on-assoc-2: rgba(255, 255, 255, 0.8);
  --assoc-line: rgba(255, 255, 255, 0.18);
  --dune: #826236;
  --seaglass: #A9D3CF;
  --shore: #E3D7C1;
  --info: #245AA6;
  --info-bg: #E8EFFA;
  --attn: #8A5300;
  --attn-bg: #FBEFD9;
  --bad: #A63A2B;
  --bad-bg: #FBE8E4;
  --quiet: #55626B;
  --quiet-bg: #EEF0EE;
  --shadow-sm: 0 1px 2px rgba(19, 36, 48, 0.06);
  --shadow-md: 0 1px 2px rgba(19, 36, 48, 0.05), 0 6px 16px rgba(19, 36, 48, 0.07);
  --shadow-lg: 0 16px 40px rgba(19, 36, 48, 0.16);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --control-height: 44px;
  --control-height-lg: 52px;
  --sidebar-width: 272px;
  --topbar-height: 64px;
  --content-max: 1180px;
  --measure: 68ch;
  --font-display: "Bricolage Grotesque", Figtree, system-ui, sans-serif;
  --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;

  /*
   * Look A's names, aliased so today's rules keep their structure and take Tidewater's palette and type. Each points at the
   * Tidewater token that does its job. They go away as the components move to Tidewater's oc-* classes (PR 3 onward,
   * implementation.md's step 3 on): a rule that moves reads the Tidewater token itself, and an alias no rule reads any more is deleted.
   * Look A's ink, ink-2, ink-3, control-line, focus, the four state pairs, radius-sm, radius-md, radius-pill and the measure share
   * Tidewater's names, so they take Tidewater's values above and need no alias. Look A's radius-lg (10 px) and radius-xl (12 px,
   * the sheets) also shared names; their rules now read radius-md and radius-lg, Tidewater's control and card radii.
   *
   * The accent is the band's colour, which links and the open tab's count still take: the association's colour on its host and
   * the chrome's ink on OneCustodian's own (.host-association and .host-platform, below). Words on it take on-assoc and
   * on-assoc-2, white at 80%; on the chrome these are white too. The buttons no longer take it (oc-btn, PR 3): the primary
   * button is ink on every host. Look A's brass rules become line-strong, a sand rule: Tidewater draws no brass, and brass on its
   * navy falls below 3:1. Sheets take Tidewater's card edge and shadow. The notices are oc-notice (PR 3); --notice-bg, a well of
   * canvas-2, is still the folded limits' and the open Decline's panel, so it still shows in a side column, which is surface-2.
   */
  --accent-platform: var(--chrome);
  --accent: var(--assoc);
  --on-accent: var(--on-assoc);
  --on-accent-2: var(--on-assoc-2);
  --on-accent-3: var(--on-assoc-2);
  --accent-line: var(--assoc-line);
  --brass: var(--line-strong);
  --brass-ink: var(--dune);
  --ground: var(--canvas);
  --ground-2: var(--canvas-2);
  --sheet: var(--surface);
  --side: var(--surface-2);
  --notice-bg: var(--canvas-2);
  --note-bg: var(--surface-2);
  --stamp-bg: var(--surface-2);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --select: var(--brand-tint);
  --font: var(--font-sans);
  --space-xxs: var(--space-1);
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-ml: var(--space-5);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-10);
  --space-3xl: var(--space-12);
  --space-5xl: var(--space-16);
  --shadow-sheet: 0 0 0 1px var(--line-card), var(--shadow-sm);
  --shadow-welcome: var(--shadow-md);

  /* Look A's own, with no Tidewater counterpart yet; they keep their values until their rules move. */
  --space-4xl: 56px;
  --radius-xs: 4px;
  --radius-tab: 9px;

  /* The type scale. The small capitals (stamp labels, table headings, section headings) step up from 11 px; the working
     text runs 13 to 17 px; the page's title is 34 px; the association's name and the ledger's counts are 46 px. The
     association an upload goes to keeps its own step, clearly above a section heading and below the title (ADR-0011 §4). */
  --text-stamp: 0.6875rem;
  --text-caps: 0.71875rem;
  --text-kicker: 0.78125rem;
  --text-caption: 0.8125rem;
  --text-small: 0.875rem;
  --text-label: 0.9375rem;
  --text-index: 0.96875rem;
  --text-body: 1rem;
  --text-lede: 1.0625rem;
  --text-title: 1.125rem;
  --text-name: 1.375rem;
  --text-subhead: 1.5rem;
  --text-headline: 2.125rem;
  --text-headline-phone: 1.75rem;
  --text-firm: 2.125rem;
  --text-sign: 2.875rem;
  --text-sign-phone: 1.875rem;
  --text-count: 2.875rem;
  --text-count-phone: 2.375rem;

  /* The shadow at the edge of whatever scrolls sideways: dark on a sheet, light on the band. */
  --edge-shadow: rgba(23, 33, 43, 0.16);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-state: 150ms;

  /* The content column's side inset: 32 px, 24 px below 1080 px, 16 px below 760 px. */
  --inset: 32px;

  /* The frame's two widths, and the wide sheet's breakout (the frame, below). */
  --frame: 1200px;
  --frame-wide: 1664px;
  --breakout: 64rem;
}

/* The accent of the host's band, set on the body from the host the request arrived on. */
.host-platform {
  --accent: var(--accent-platform);
}

.host-association {
  --accent: var(--assoc);
}

/*
 * An association's own colour (the founder's decisions of 2026-10-03 and, carrying them into Tidewater, 2026-10-10; DESIGN.md,
 * the Server-Chosen Colour Rule): a class on the body beside .host-association, which the server takes from the palette
 * (BandColours) on a page that names the association, and which sets the Tidewater pair .host-association reads, on the same
 * element so the class's values are the ones read. Each passes BandColoursTests' guard: on-assoc and on-assoc-2 at 4.5:1 on
 * the colour and on its strong step, the rule under the name at 3:1, and the colour as link text at 4.5:1 on every light ground.
 * .band-navy repeats the default, Tidewater's navy, for the sign and colour page's swatch alone, which must not take the
 * association's current colour; no body carries it. The six others keep look A's values.
 */
.band-navy {
  --assoc: #23465E;
  --assoc-strong: #1A3549;
}

.band-spruce {
  --assoc: #0E4245;
  --assoc-strong: #0A3032;
}

.band-forest {
  --assoc: #24432A;
  --assoc-strong: #1A301E;
}

.band-oxblood {
  --assoc: #6B1E2E;
  --assoc-strong: #4D1621;
}

.band-plum {
  --assoc: #4A2545;
  --assoc-strong: #351B32;
}

.band-walnut {
  --assoc: #523420;
  --assoc-strong: #3B2517;
}

.band-slate {
  --assoc: #2E3A44;
  --assoc-strong: #212A31;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A column, so the footer sits at the foot of a short page. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

::selection {
  color: var(--ink);
  background: var(--select);
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-sm);
  color: var(--ink);
  text-wrap: balance;
}

/* The page's title, with its lede under it. */
h1 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 48;
  font-size: var(--text-headline);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--text-title);
  font-weight: 650;
  line-height: 1.35;
}

h3 {
  font-size: var(--text-body);
  font-weight: 650;
  line-height: 1.4;
}

* + h2 {
  margin-top: var(--space-xl);
}

* + h3 {
  margin-top: var(--space-lg);
}

p,
ul,
ol,
dl,
form,
fieldset {
  margin: 0 0 var(--space-md);
}

ul,
ol {
  padding-left: 1.25rem;
}

li + li {
  margin-top: var(--space-xxs);
}

dt {
  font-weight: 600;
}

dd {
  margin: 0 0 var(--space-sm);
}

strong,
b {
  font-weight: 650;
}

/* A link in running text keeps its underline; lists of links, the band and the ledger draw their own cue instead. */
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* One focus ring everywhere: 2 px of --focus (brand), 2 px out; white on the band, ink on its open tab. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Where focus is moved for a screen reader (the main element, a result, a heading), not a control to operate. */
[tabindex="-1"]:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: -999rem;
  z-index: 10;
  padding: var(--space-xs) var(--space-md);
  font-weight: 600;
  color: var(--ink);
  background: var(--sheet);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: var(--space-md);
}

/* The "Test site" ribbon (_TestSiteRibbon.cshtml; nonprod alone): one thin line across the top of the page, in its flow, so it
   covers nothing and takes no focus. Its words wrap at 320 px. The attention pair, 5.56:1. Never printed. */
.test-site-ribbon {
  margin: 0;
  padding: var(--space-1) var(--space-4);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  color: var(--attn);
  background: var(--attn-bg);
  border-bottom: 1px solid var(--line-strong);
}

@media print {
  .test-site-ribbon {
    display: none;
  }
}

/* ---------- The frame: column, band, footer ---------- */

/*
 * Two widths of page (the wide-sheet design, approved 2026-10-06). The frame follows the tab row (the founder's choice of
 * 2026-10-08): every page that draws the staff workspace's tabs, an association's or the Manage area's, carries .frame-wide on
 * its body, set by its layout, and its column is 1664 px, a 1600 px sheet inside the usual insets: the band's contents, the
 * page and the footer together, so the band, the firm's name and the tabs never move from tab to tab. On such a page a
 * workspace sheet is marked .sheet-wide (every sheet on a workspace page carries it) and takes the whole column; anything else
 * in the page keeps a reading page's 1136 px from a 1440 px screen up, left-aligned under the tabs, so the open tab still joins
 * its sheet. A page without the tabs (an owner's page, sign-in, an error) keeps the 1200 px column. The ground still shows
 * either side on a wide screen. Below 1200 px the two are the same: the column fills the screen.
 */
.frame-wide {
  --frame: var(--frame-wide);
}

/* With no weight, so a sheet's own narrower width (a form's 52rem, a message's 40rem) still wins. */
:where(.frame-wide .wrap.page) > :where(:not(.sheet-wide)) {
  max-width: calc(1200px - 2 * var(--inset));
}

/* Up to a 1440 px screen a reading sheet held at 1136 px stops 80-240 px short of the band's right edge and reads as a
   misalignment: it fills the column there, as on a reading page today; above it, the gap is deliberate (as the ledger's). */
@media (max-width: 90rem) {
  :where(.frame-wide .wrap.page) > :where(:not(.sheet-wide)) {
    max-width: none;
  }
}

.wrap {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--inset);
}

.page {
  padding-block: var(--space-xl) 0;
}

/* A page with no band: its one sheet sits in the middle, a little way down, and has no footer under it. */
.page-solo {
  padding-top: clamp(var(--space-2xl), 12vh, 112px);
  padding-bottom: var(--space-4xl);
}

.page-solo .oc-card {
  margin-inline: auto;
}

/*
 * The band (look A): every page's masthead, in the accent. Its top row is the section's name, or for staff the firm's mark
 * and the way back to the Portfolio, with the person and Sign out at the right. Then the sign: the association's name in
 * expanded capitals over the brass rule, with "Managed by" and the firm at the right (on manage., the firm's own name). For
 * staff the workspace's tabs are cut into its foot; with no tabs it closes on a brass rule.
 */
.masthead {
  --focus: var(--on-accent);
  --edge-shadow: rgba(255, 255, 255, 0.3);
  color: var(--on-accent);
  background: var(--accent);
}

.masthead:not(:has(nav a[aria-current="page"])) {
  border-bottom: 3px solid var(--brass);
}

.masthead a {
  color: var(--on-accent);
  text-decoration: none;
}

/* The top row: the section's name at left (NAV-2), or the firm's mark and the way back (NAV-3); the person and Sign out at
   right. It wraps on the narrowest phones rather than run off the screen. */
.mast-top,
.workspace-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-lg);
  min-height: 52px;
  padding-block: var(--space-xxs);
  font-size: var(--text-small);
  color: var(--on-accent-2);
  border-bottom: 1px solid var(--accent-line);
}

/* The band of a page that names nobody is its top row alone, closed by the brass. */
.mast-top:last-child {
  border-bottom: 0;
}

.masthead-name,
.masthead .brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--on-accent);
}

/* OneCustodian's mark beside its name on its own hosts (DESIGN.md, Logo): at the top row's left on manage., where the sidebar's
   brand row goes in step 6, and in the public frame's band. The mark is 24 px, its drawing the file's, with 10 px clear beside it,
   more than the quarter of the tile the logo asks for; the name is set plainly in the display face, as the Logo card and the
   sidebar's brand row (bundle.css, .oc-brandbar) set it. The band's names without the mark keep the top row's face. */
.masthead .brand,
.masthead-name a {
  gap: 10px;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 24;
  font-size: 15px;
  letter-spacing: -0.005em;
}

.masthead-name a {
  display: inline-flex;
  align-items: center;
}

.brand-mark {
  flex: none;
}

/* Where the right-hand group wraps (a long name, or the language control beside Help, at 390 px and below), each of its lines keeps
   to the right, Sign out last at the edge, with a small gap between the lines; every target keeps its 44 px (the finish review of
   #409). */
.mast-who,
.workspace-user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xxs) 18px;
  margin-left: auto;
}

.mast-person,
.workspace-person {
  min-width: 0;
  color: var(--on-accent-2);
  overflow-wrap: anywhere;
}

/* On manage., while the daily e-mail is on, the name leads to the person's own page (ADR-0018 2.8): underlined words in the band,
   as Sign out is drawn, with its 44 px target. The Help link (AI-01) is drawn the same way, on both hosts. */
.masthead a.workspace-person,
.masthead .band-help {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: var(--on-accent);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.masthead a.workspace-person:hover,
.masthead a.workspace-person[aria-current="page"],
.masthead .band-help:hover,
.masthead .band-help[aria-current="page"] {
  text-decoration-color: var(--on-accent);
}

/* On the help list itself, the Help link is set heavier than Sign out, so the band shows which page this is (the finish review of
   #409, finding 1). */
.masthead .band-help[aria-current="page"] {
  font-weight: 650;
}

/* The firm's placeholder mark and ‹ Portfolio, at the top row's left for company staff on an association's host. */
.workspace-bar .workspace-name {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
}

/* The firm's first letter, until firms can give a logo (DESIGN.md). */
.logo-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: var(--text-caption);
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1;
  color: var(--on-accent);
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
}

.masthead .workspace-up {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  min-height: 44px;
  color: var(--on-accent-2);
  transition: color var(--duration-state) var(--ease);
}

.masthead .workspace-up:hover {
  color: var(--on-accent);
}

.workspace-up .ic {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

/* Sign out: underlined words in the band, the 44 px target kept. The markup's class="oc-btn" is pinned whole by
   SignOutTests, and is drawn as this link button here on purpose: change neither to match the other. */
.masthead .sign-out {
  flex: none;
  margin: 0;
}

.masthead .sign-out button {
  min-height: 44px;
  padding: 0 2px;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--on-accent);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  background: none;
  border-color: transparent;
}

.masthead .sign-out button:hover:not(:disabled) {
  text-decoration-color: var(--on-accent);
  background: none;
  border-color: transparent;
}

/* The language control (ADR-0023 §2; the Spanish owner pages' SP-02): the other language's name as underlined words, the 44 px
   target kept. In the band it leads the top row's right side, and on the live front page it stands at the top of the entrance band,
   drawn in both as Sign out is; on a page with no band (the error page, the sign-in refusal, the neutral front page) it stands at the
   top right, in the accent with a link's underline, as a link on the ground is drawn. */
.language {
  flex: none;
  margin: 0;
}

.language button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  background: none;
  border-color: transparent;
}

.language button:hover:not(:disabled) {
  text-decoration-thickness: 2px;
  background: none;
  border-color: transparent;
}

.masthead .language button,
.entrance .language button {
  color: var(--on-accent);
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 4px;
}

.masthead .language button:hover:not(:disabled),
.entrance .language button:hover:not(:disabled) {
  text-decoration-color: var(--on-accent);
  text-decoration-thickness: 1px;
}

.language-top {
  display: flex;
  justify-content: flex-end;
  padding-block: var(--space-xxs);
}

/* The sign row: the association's name, which leads to its front page, over the brass rule; "Managed by" and the firm at
   right, with the firm's badge on its line, so it reads as the firm's and never the person's above (compliance's read of
   #253). On manage. the row holds the firm's own name. */
.mast-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-xl);
  padding-block: 34px 30px;
}

/* The whole recorded name, never split into a name and a subtitle (compliance's read of the look A comps): it wraps in
   balanced lines, and a long one (.sign-long, chosen by the server from its length) is set a step smaller. The last guard
   breaks inside a word rather than run off a phone. */
.sign,
.mast-main .workspace-name {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 72;
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.sign {
  flex: 1 1 24rem;
  max-width: 100%;
  font-size: var(--text-sign);
}

.sign-long {
  font-size: var(--text-firm);
}

/* The brass rule under the name: a border, so forced colours keep it. */
.sign::after,
.mast-main .workspace-name::after {
  content: "";
  display: block;
  width: 64px;
  margin-top: var(--space-md);
  border-top: 2px solid var(--brass);
}

.masthead .sign a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}

/* A name on the sign (the company's own short name, the founder's decision of 2026-10-03): the brass rule moves under it, and the
   whole recorded name stands under the rule in its own case, at a size anyone can read, never left out, never split. */
.sign-named::after {
  content: none;
}

.sign-whole {
  display: block;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--on-accent-2);
}

.sign-whole::before {
  content: "";
  display: block;
  width: 64px;
  margin: var(--space-md) 0 12px;
  border-top: 2px solid var(--brass);
}

/* On manage.: the firm's mark beside its name, the name a step smaller than an association's, as the Portfolio comp sets it. */
.mast-main .workspace-name {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--space-md);
  font-size: var(--text-firm);
}

.mast-main .workspace-name::after {
  grid-column: 1 / -1;
  width: 56px;
  margin-top: 14px;
}

.mast-main .logo-mark {
  width: 40px;
  height: 40px;
  font-size: var(--text-title);
  letter-spacing: 0;
}

/* "Managed by" over the firm's name, with the badge beside the name where it fits and under it where it does not. */
.masthead .managed {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-xs) 10px;
  max-width: 32rem;
  margin: 0 0 0 auto;
  font-size: var(--text-caption);
  color: var(--on-accent-3);
  text-align: end;
}

.masthead .managed b {
  display: block;
  margin-top: 2px;
  font-size: var(--text-body);
  font-weight: 650;
  color: var(--on-accent);
  overflow-wrap: anywhere;
}

/* The company's identity badge, on the owners' section alone: a ring in the band with a drawn check, a class of its own
   because it is no record's state. */
.masthead .badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 2px 11px 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-accent);
  text-align: start;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-pill);
}

.masthead .badge::before {
  content: "";
  flex: none;
  width: 5px;
  height: 9px;
  margin: -2px 1px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/*
 * The workspace's tabs, cut into the band's foot: the open one white and joined to the sheet below. They scroll sideways
 * on a phone rather than wrap; site.js brings the open one into view, and the padding keeps it off the edge's cover. A
 * ring drawn outside a tab would be clipped by the scroller, so it is drawn inside: white on the band, ink on the open tab.
 */
.workspace nav {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--space-md);
}

.workspace nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace nav li {
  display: flex;
  flex: none;
  margin: 0;
}

.workspace nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 46px;
  padding: 0 18px;
  font-size: var(--text-label);
  font-weight: 550;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  border-radius: var(--radius-tab) var(--radius-tab) 0 0;
  transition: background-color var(--duration-state) var(--ease), color var(--duration-state) var(--ease);
}

.workspace nav a:hover {
  color: var(--on-accent);
  background: rgba(255, 255, 255, 0.08);
}

.workspace nav a:focus-visible {
  outline-offset: -3px;
}

.workspace nav a[aria-current="page"] {
  --focus: var(--ink);
  font-weight: 650;
  color: var(--ink);
  background: var(--sheet);
}

/* Where the page opens with something other than a sheet (the review queue's title, the site flag), the open tab takes
   the ground's colour, so it opens onto the ground as it opens onto a sheet elsewhere. Without :has() it stays white. */
body:has(> header + main > .page > :first-child:not(.oc-card)) .workspace nav a[aria-current="page"] {
  background: var(--ground);
}

/* The review queue's count on its tab: uploads awaiting review in this association, shown from one. */
.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
  color: var(--on-accent);
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
}

.workspace nav a[aria-current="page"] .count-pill {
  background: var(--accent);
}

/* Under a band whose tabs have one open, the page starts at the band's foot, and a sheet that opens it is joined to that tab: square
   top corners and no gap. Anything else that opens such a page keeps the usual gap; under a band with no tab open, the band closes
   on its brass rule and every sheet keeps its gap and its corners. */
header:has(nav a[aria-current="page"]) + main > .page {
  padding-top: 0;
}

header:has(nav a[aria-current="page"]) + main > .page > :first-child {
  margin-top: var(--space-xl);
}

/* A joined sheet draws Tidewater's card edge on its sides and foot only, so no line runs between the open tab and the sheet it
   joins. It sets the value .oc-card draws, never box-shadow itself, so the print and forced-colours rules that take a sheet's shadow
   away (box-shadow: none, with less weight than this selector) still do. */
header:has(nav a[aria-current="page"]) + main > .page > .oc-card:first-child {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  --shadow-sheet: -1px 0 0 var(--line-card), 1px 0 0 var(--line-card), 0 1px 0 var(--line-card), var(--shadow-sm);
}

header:has(nav a[aria-current="page"]) + main > .page > .sheet-split:first-child > .sheet-side {
  border-top-right-radius: 0;
}

/* The footer: the association's name at left where there is one, the service's small print at right. */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding-block: 28px var(--space-xl);
  font-size: var(--text-caption);
  color: var(--ink-3);
}

/* The service's small print after OneCustodian's 16 px mark (DESIGN.md, Footer and Logo), with 6 px clear, more than a quarter of
   the tile. */
.foot-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Cards ---------- */

/*
 * Tidewater's card (docs/design/tidewater/components/bundle.css, Card): surface on the canvas, radius-lg, shadow-sm, 32 px in (24 px on
 * a phone), 24 px between cards. Its line-card edge is drawn as a 1 px ring (--shadow-sheet) rather than bundle.css's border, so the
 * open tab of look A's band can join the card it opens without a box changing size (the joined rule above, until PR 6's app shell),
 * and print and forced colours take it with the shadow. The widths and the split stay look A's layout classes beside it:
 * sheet-narrow, sheet-form, sheet-wide, and sheet-split with its sheet-main and sheet-side.
 */
.oc-card {
  --card-inset: var(--space-8);
  padding: var(--space-8);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
}

.oc-card + .oc-card {
  margin-top: var(--space-6);
}

.oc-card > :last-child,
.sheet-main > :last-child,
.sheet-side > :last-child,
.oc-notice > :last-child,
.oc-empty > :last-child,
section > :last-child,
td > :last-child,
th > :last-child {
  margin-bottom: 0;
}

/* A short message: a sign-in problem, no access. */
.sheet-narrow {
  max-width: 40rem;
}

/* A form's sheet, as wide as the upload comp's form column. */
.sheet-form {
  max-width: 52rem;
}

/* A sheet with a side column (look A): the main column, then a quieter one beside it, a rule between. They stack below 1080 px. */
.sheet-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  padding: 0;
}

.sheet-main {
  --card-inset: var(--space-4xl);
  min-width: 0;
  padding: var(--space-3xl) var(--space-4xl) 52px;
}

.sheet-side {
  --card-inset: 44px;
  min-width: 0;
  padding: var(--space-3xl) 44px 52px;
  background: var(--side);
  border-left: 1px solid var(--rule);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/*
 * Inside a wide sheet, three widths, each set by what is read there, in the sheet's own block flow:
 * - the reading measure: a paragraph, a list, a heading or an empty state stops at 70ch, as a lede or a hint (64ch) already does. The
 *   whole selector is inside :where(), so it has no weight and every width a component sets (a lede's, a hint's, a notice's
 *   72ch) still wins;
 * - today's sheet width, 64rem: a ledger and the Portfolio's lines, so a count stays near its label, and filed records' two
 *   notes side by side, so their lines stay as long as they are today;
 * - the sheet's whole width: tables, the import grid, and a section heading's hairline.
 */
:where(.sheet-wide) :where(p, ul, ol, h1, h2, h3, .oc-empty) {
  max-width: var(--measure);
}

.sheet-wide :is(.ledger, .work-lines, .filed-notes) {
  max-width: var(--breakout);
}

/* Where the sheet is barely wider than 64rem (to a 1440 px screen) or the ledger sits in a split sheet's main column, a capped
   ledger stops 70-90 px short of the hairlines and tables and reads as a misalignment: it runs the full width there, as today. */
@media (max-width: 90rem) {
  .sheet-wide :is(.ledger, .work-lines) {
    max-width: none;
  }
}

.sheet-wide .sheet-main .ledger {
  max-width: none;
}

.sheet-wide .kicker {
  max-width: none;
}

/* The page's lede, under its title. */
.lede {
  max-width: 64ch;
  font-size: var(--text-lede);
  color: var(--ink-2);
}

/* The way back, small, above a page's title: the accent's words after a chevron, which moves back on hover. */
.back {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-small);
}

.back a {
  display: inline-block;
  padding-block: var(--space-xxs);
  font-weight: 600;
  text-decoration: none;
}

.back a:hover {
  text-decoration: underline;
}

.back a::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.5em;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(-0.1em) rotate(45deg);
  transition: transform var(--duration-state) var(--ease);
}

.back a:hover::before {
  transform: translate(-3px, -0.1em) rotate(45deg);
}

/* ---------- Section headings, the ledger, lists of links ---------- */

/*
 * A section heading (look A): brass-ink capitals with a hairline running to the edge, where a page names one (.kicker),
 * and the front page's records-pages heading. Never drawn on a heading by where it stands. The hairline is a border, so
 * forced colours keep it. A heading too long to keep the hairline's least length beside it on one line (a phone's) gives
 * the hairline a line of its own under it, full width, never a short stub at the edge.
 */
.kicker,
.inside h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) 14px;
  margin: 44px 0 var(--space-sm);
  font-size: var(--text-kicker);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-ink);
}

/* At the top of a padded box (a sheet, its columns, the recording form's section, the warnings acknowledged at filing) a
   heading needs no space above it. Anywhere else its 44 px set it off from what comes before, collapsing with its section's
   own margin. */
:is(.oc-card, .sheet-main, .sheet-side, .recording, .publish-findings) > .kicker:first-child,
:is(.oc-card, .sheet-main, .sheet-side) > section:first-child > .kicker:first-child {
  margin-top: 0;
}

.kicker::after,
.inside h2::after {
  content: "";
  flex: 1 1 var(--space-lg);
  min-width: var(--space-lg);
  border-top: 1px solid var(--rule);
}

/*
 * The ledger (look A): counts in ruled rows under an ink rule, each its label, the count in wide figures and the link to
 * the page that does the work, with an arrow that moves on hover. A count of none is a 0, never a verdict.
 */
.ledger {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.ledger > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 12.5rem);
  align-items: center;
  gap: var(--space-xs) 28px;
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.ledger-label {
  font-size: var(--text-lede);
  font-weight: 550;
}

.ledger-count {
  min-width: 64px;
  font-size: var(--text-count);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 72;
  font-weight: 600;
  line-height: 1;
  text-align: right;
}

/* The ledger's link, and the same link where a page draws one outside a ledger (.arrow-link: the Portfolio's records after its
   table). */
.ledger a,
.arrow-link {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 44px;
  font-size: var(--text-label);
  font-weight: 650;
  text-align: end;
  text-decoration: none;
}

.ledger a:hover,
.arrow-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The arrow: its shaft, then its head, both after the words, both borders so forced colours keep them. */
.ledger a::before,
.ledger a::after,
.arrow-link::before,
.arrow-link::after {
  content: "";
  flex: none;
  transition: transform var(--duration-state) var(--ease);
}

.ledger a::before,
.arrow-link::before {
  order: 1;
  width: 14px;
  margin-left: 10px;
  border-top: 1.8px solid currentColor;
}

/* The head, turned, reaches past its own box; 2 px at its right keep its point inside the column (the design review of #284). */
.ledger a::after,
.arrow-link::after {
  order: 2;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  margin-left: -9px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
}

.ledger a:hover::before,
.arrow-link:hover::before {
  transform: translateX(3px);
}

.ledger a:hover::after,
.arrow-link:hover::after {
  transform: translateX(3px) rotate(45deg);
}

.ledger + .hint {
  max-width: 62ch;
  margin-top: 18px;
}

/*
 * A list of links (look A): ruled rows with no underline, each with a chevron that moves on hover. Named .index where a page
 * draws one, and the look of every list in a navigation inside a sheet, the front page's welcome card among them.
 */
.index,
.oc-card nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.index, .oc-card nav > ul) > li {
  margin: 0;
}

:is(.index, .oc-card nav > ul) a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 52px;
  padding: 10px 0;
  font-size: var(--text-index);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color var(--duration-state) var(--ease);
}

:is(.index, .oc-card nav > ul) a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: var(--space-xxs);
  border-top: 1.8px solid var(--ink-3);
  border-right: 1.8px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform var(--duration-state) var(--ease), border-color var(--duration-state) var(--ease);
}

:is(.index, .oc-card nav > ul) a:hover {
  color: var(--accent);
}

:is(.index, .oc-card nav > ul) a:hover::after {
  border-color: currentColor;
  transform: translateX(3px) rotate(45deg);
}

/* A link with a chevron, not in running text: the accent's words, no underline until hover. */
.link-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  font-size: var(--text-label);
  font-weight: 600;
  text-decoration: none;
}

.link-cue::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-state) var(--ease);
}

.link-cue:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.link-cue:hover::after {
  transform: translateX(3px) rotate(45deg);
}

/* ---------- Fields and forms ---------- */

/*
 * Tidewater's fields (docs/design/tidewater/components/bundle.css, Field): a field stacks its label, its hint (oc-hint), its error
 * (oc-error) and its control (oc-input, oc-select) in one column at most 560 px wide. Where it departs from bundle.css, so today's
 * markup stands: a field keeps look A's space under it, so the last field before a form's buttons keeps its gap (bundle.css spaces
 * fields only from each other), and its children lose their own margins, as bundle.css's base rule does for it; a field's label is
 * the label and legend elements' own look, since labels also stand outside a field (a check's sentence, the find row, the import
 * grid), which their own rules draw; a select keeps this origin's chevron; a textarea keeps room above and below its text; the
 * invalid look covers a select too; and an error outside a field (a group of boxes, a reminder's days) is drawn as one inside.
 * A hint outside a field is look A's .hint, below, the general small print.
 */
/* One column that never grows past the card, whatever a control's own width would ask for. */
.oc-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  max-width: 560px;
  margin: 0 0 var(--space-6);
}

.oc-field > * {
  margin: 0;
}

label,
legend {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}

.oc-field .oc-hint {
  margin-top: -4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-3);
}

/* A refused fact's reason, above its control and named by it (aria-describedby), as the error summary links to it. */
.oc-error {
  max-width: 64ch;
  margin: var(--space-4) 0 var(--space-2);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--bad);
}

.oc-field .oc-error {
  margin: 0;
}

/* Look A's small print, wherever a hint is not a field's. */
.hint {
  max-width: 64ch;
  font-size: var(--text-small);
  color: var(--ink-3);
}

input,
select,
textarea,
button {
  font: inherit;
}

.oc-input,
.oc-select {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--control-line);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--ink);
  font: 400 15px/22px var(--font-sans);
  caret-color: var(--brand);
}

textarea.oc-input {
  padding-block: 10px;
}

.oc-input::placeholder {
  color: var(--ink-3);
}

.oc-input:hover,
.oc-select:hover {
  border-color: var(--ink-3);
}

.oc-input:focus-visible,
.oc-select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--brand);
}

/* On a phone a control's words are 16 px, so the browser does not zoom the page in when it takes focus (iOS Safari does under
   16 px); the import grid's cells are oc-inputs and oc-selects too. Never by the viewport's maximum-scale or user-scalable. */
@media (max-width: 760px) {
  .oc-input,
  .oc-select {
    font-size: 16px;
    line-height: 24px;
  }
}

/* A date, and the board notice's start time beside it: 220 px, tabular figures. */
.oc-input--date {
  max-width: 220px;
  font-variant-numeric: tabular-nums;
}

/* A second label inside one field, as the board notice's date and start time share a group: clear of the control above it. */
.oc-field > input + label {
  margin-top: var(--space-sm);
}

/* The native control with a chevron of this origin's (a data: address would be refused by img-src 'self'). */
.oc-select {
  appearance: none;
  padding-right: 40px;
  background-image: url(chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

/* After the control rules, and as specific as them and their hover, so an invalid control stays red. */
:is(.oc-input, .oc-select)[aria-invalid="true"],
:is(.oc-input, .oc-select)[aria-invalid="true"]:hover {
  border-color: var(--bad);
  box-shadow: inset 0 0 0 1px var(--bad);
}

/* A file field: the native file input inside a dashed panel. */
.oc-dropzone {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1.5px dashed var(--control-line);
  border-radius: var(--radius-lg);
}

/* Tidewater's icons (docs/design/tidewater/assets/Icons): a 24 px outline drawn in the text's colour, inlined from the set, 20 px. */
.oc-icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The panel's upload mark, above the native control: 28 px, in brand. It has no words, so it is hidden from a screen reader. */
.oc-dropzone .oc-icon {
  width: 28px;
  height: 28px;
  color: var(--brand);
}

input[type="file"] {
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-small);
  color: var(--ink-3);
}

/* The native control's own button, drawn as the secondary button (oc-btn). */
input[type="file"]::file-selector-button {
  min-height: var(--control-height);
  margin-right: var(--space-sm);
  padding: 0 var(--space-5);
  font: 600 14px/20px var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-state) var(--ease), border-color var(--duration-state) var(--ease);
}

input[type="file"]::file-selector-button:hover {
  border-color: var(--ink);
  background: var(--surface-2);
}

/* On a phone the panel and the native control's own button come in at the sides, so the button and its "No file chosen" both read
   in full at 320 px. After the button's own rule, which it narrows. */
@media (max-width: 760px) {
  .oc-dropzone {
    padding: var(--space-5) var(--space-3);
  }

  input[type="file"]::file-selector-button {
    margin-right: var(--space-2);
    padding: 0 var(--space-3);
  }
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: var(--space-xs);
  padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--brand);
}

/* A checkbox or a radio button with its full-sentence label (bundle.css's oc-check, in brand), the sentence a label's own weight. */
.oc-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

.oc-check + .oc-check {
  margin-top: var(--space-sm);
}

/* A long label wraps at a readable measure, as a hint does. */
.oc-check > span {
  max-width: 64ch;
}

/*
 * The fields for one role (copy item 18), a section under a hairline whose legend says whom they are for, a step above a
 * field's label. The legend floats, so it sits under the rule, inside the padding, rather than in a gap in the border.
 */
.for-role {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}

.for-role > legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-sm);
  font-size: var(--text-title);
  font-weight: 650;
}

.for-role > legend + * {
  clear: left;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-ml);
}

/* Where a form's answer arrives, below the form. */
:is(#import-result, #intake-result, #grant-result) > :first-child {
  margin-top: var(--space-xl);
}

/* A radio button's or a checkbox's hint, under its label and in line with the label's text (the box, 20 px, and the
   gap, 12 px). */
.check-hint {
  margin: 2px 0 var(--space-md) 32px;
}

/* A confirmation that answers a whole form, set apart from the group above it (HOA-11's copies form). */
.confirm-all {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}

/* ---------- Buttons ---------- */

/*
 * Tidewater's buttons (docs/design/tidewater/components/bundle.css, Button). Every button is an oc-btn, 44 px tall at least:
 * oc-btn alone is the secondary button; oc-btn--primary, the one way forward on a surface, is ink with white words on every host
 * (brand is for links and focus only, and the association's colour fills its own header alone); oc-btn--ink is the same fill,
 * kept as the named class for the decisive staff act (filing an upload) and the owners' Find. A link that must stay a link but
 * reads as a button (sign in, the reviewer's download, ADR-0011 §10) carries the same classes. A disabled one is canvas-2 with
 * ink-3 words, whatever its kind.
 */
.oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border: 1px solid var(--control-line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: 600 14px/20px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-state) var(--ease), border-color var(--duration-state) var(--ease), color var(--duration-state) var(--ease);
}

.oc-btn:hover {
  border-color: var(--ink);
  background: var(--surface-2);
  color: var(--ink);
}

.oc-btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.oc-btn--primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--surface);
}

/* The same fill as the primary on purpose (bundle.css): the named class for the decisive staff act and the owners' Find, so that
   either can change alone. */
.oc-btn--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.oc-btn--ink:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--surface);
}

/* The front page's single call to action, 52 px. */
.oc-btn--lg {
  min-height: var(--control-height-lg);
  padding: 0 var(--space-6);
  font-size: 15px;
}

/* A row of buttons: a table row's or a list item's pair of actions. */
.oc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* A page's actions paragraph holding more than one button is the same row: a gap between the buttons on one line, and between the lines
   where they wrap on a phone (the contracts register's "Record a contract" and the draft list beside it, BC-11). */
.actions:has(> .oc-btn + .oc-btn) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Last of the kinds, so that a disabled button of any kind looks disabled whatever rule above it matched. */
.oc-btn[disabled],
.oc-btn[aria-disabled="true"] {
  background: var(--canvas-2);
  border-color: var(--canvas-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

/* Once the grant form's answer offers a confirm, Confirm is the way forward and Check is drawn as the secondary button. */
.sheet-form:has(.confirm) #grant-form .oc-btn--primary:not(:disabled) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--control-line);
}

.sheet-form:has(.confirm) #grant-form .oc-btn--primary:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--ink);
}

/* htmx is told not to inject its own indicator styles (a style element the policy refuses); these replace them. */
.htmx-indicator {
  display: none;
  font-size: var(--text-small);
  color: var(--ink-3);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline;
}

/* ---------- Notices ---------- */

/*
 * Tidewater's notices (docs/design/tidewater/components/bundle.css, Notice): a panel with a drawn mark, then words that state the
 * situation in full; the state is always said in the words, and the colour only supports it. oc-notice is neutral (a result, a
 * status), oc-notice--attn something to look at before going on, oc-notice--bad the error summary at the top of a form, linking
 * each field's error. Two departures from bundle.css, so that today's markup stands as it is: the panel keeps block flow, with its
 * mark drawn here (::before) in the space its padding leaves at the left, rather than a flex row of an inline SVG and one wrapper
 * around the words, so that a notice of a heading and paragraphs needs no wrapper; and its heading may be an h2 as well as an h3.
 */
.oc-notice {
  position: relative;
  max-width: 72ch;
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-4) 48px;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* The neutral mark: look A's ring, in the icon's place (20 px in, on the first line's centre). */
.oc-notice::before,
.binder-page .site-notice::before {
  content: "";
  position: absolute;
  top: 20px;
  left: var(--space-5);
  width: 16px;
  height: 16px;
  border: 1.6px solid var(--ink-2);
  border-radius: 50%;
}

.oc-notice strong {
  color: var(--ink);
  font-weight: 650;
}

.oc-notice :is(h2, h3) {
  margin: 0 0 2px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 650;
  color: var(--ink);
}

/* Background facts, such as a site still in preview: Tidewater's info mark, an "i" in a ring, in --info. */
.oc-notice--info {
  background: var(--info-bg);
  border-color: transparent;
}

.oc-notice--info::before {
  border-color: var(--info);
  color: var(--info);
  background:
    linear-gradient(currentColor 0 0) center 2.4px / 1.6px 1.6px no-repeat,
    linear-gradient(currentColor 0 0) center 5.2px / 1.6px 5px no-repeat;
}

/* Something to look at before going on: Tidewater's alert, a triangle (its 1.6 px stroke cut out of a filled one) with its
   exclamation mark under it (::after). A support address breaks rather than run out of the box, as in the error summary. */
.oc-notice--attn {
  overflow-wrap: anywhere;
  background: var(--attn-bg);
  border-color: transparent;
}

.oc-notice--attn::before,
.oc-notice--attn::after {
  top: 20px;
  left: 19px;
  width: 18px;
  height: 16px;
  color: var(--attn);
}

.oc-notice--attn::before {
  border: 0;
  border-radius: 0;
  background: currentColor;
  clip-path: polygon(evenodd, 50% 0, 100% 100%, 0 100%, 50% 0, 50% 20.4%, 15.2% 90%, 84.8% 90%, 50% 20.4%);
}

.oc-notice--attn::after {
  content: "";
  position: absolute;
  background:
    linear-gradient(currentColor 0 0) center 6px / 1.6px 4.4px no-repeat,
    linear-gradient(currentColor 0 0) center 11.8px / 1.6px 1.6px no-repeat;
}

/* The error summary: Tidewater's crossed circle, the refused pill's mark. */
.oc-notice--bad {
  overflow-wrap: anywhere;
  background: var(--bad-bg);
  border-color: var(--bad);
}

.oc-notice--bad::before {
  border-color: var(--bad);
  color: var(--bad);
  background:
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) center / 7px 7px no-repeat;
}

.oc-notice--bad ul {
  margin-top: var(--space-2);
}

.oc-notice--bad li a {
  font-weight: 600;
  color: var(--bad);
}

/* Forced colours replace the fills the info mark, the alert and the cross are drawn with: these marks keep the text's colour. */
@media (forced-colors: active) {
  .oc-notice--info::before,
  .oc-notice--attn::before,
  .oc-notice--attn::after,
  .oc-notice--bad::before {
    forced-color-adjust: none;
    color: CanvasText;
  }
}

/* What is missing and what to do about it; never "no issues". */
.oc-empty {
  margin: 0 0 var(--space-4);
  padding: var(--space-6);
  color: var(--ink-2);
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

/* A step that asks for a confirmation, inside a sheet: a section under a hairline rather than a panel. */
.confirm {
  max-width: 72ch;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}

/* Straight after a look A table, whose last row already ends in a hairline (a Tidewater table's last row has none, so a
   confirmation after one keeps its own). */
.table-wrap + .confirm {
  padding-top: 0;
  border-top: 0;
}

/* ---------- Tables ---------- */

/*
 * A table may scroll sideways inside its sheet on a narrow screen; the page around it reflows. The caption stays as
 * wide as what shows, so it is never cut off at the edge. Look A's wrapper (.table-wrap) is the import page's grid and guides' and
 * the public documents'; every other table is Tidewater's (.oc-table-wrap, below), which shares these.
 */
:is(.table-wrap, .oc-table-wrap) {
  margin: 0 0 var(--space-lg);
  overflow-x: auto;
  container-type: inline-size;
}

/*
 * Whatever scrolls sideways (a table, the workspace tabs on a phone) shows that there is more: a soft shadow at an
 * edge, and two covers in the colour behind it that scroll with the content and hide each shadow at its own end.
 */
:is(.table-wrap, .oc-table-wrap),
.workspace nav {
  --cover: var(--sheet);
  background:
    linear-gradient(to right, var(--cover) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--cover) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--edge-shadow), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--edge-shadow), transparent) right center / 14px 100% no-repeat scroll;
}

.workspace nav {
  --cover: var(--accent);
}

.oc-notice:not(.oc-notice--attn, .oc-notice--bad) :is(.table-wrap, .oc-table-wrap) {
  --cover: var(--surface-2);
}

:is(.table-wrap, .oc-table-wrap) caption {
  max-width: 100cqi;
}

:is(.table-wrap, .oc-table-wrap):not(:first-child) > table > caption,
.oc-card > table:not(:first-child) > caption {
  padding-top: 44px;
}

.oc-notice :is(.table-wrap, .oc-table-wrap) > table > caption {
  padding-top: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* A table's name, as a section heading reads: brass-ink capitals, with a section heading's space above it where something
   comes before the table (but not inside a notice). */
caption {
  padding-bottom: 18px;
  font-size: var(--text-kicker);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-ink);
  text-align: left;
}

/* Ruled rows: the headings in small capitals over an ink rule, each row on a hairline. */
th,
td {
  padding: 18px 18px 18px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

th:last-child,
td:last-child {
  padding-right: 0;
}

th {
  font-weight: 600;
}

thead th {
  padding-top: 0;
  padding-bottom: 10px;
  vertical-align: bottom;
  font-size: var(--text-caps);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid var(--ink);
}

td ul {
  margin: 0;
}

/* A ruled row's title (a record, a person, an association): the cell's first link, bold and in ink, underlined in the
   accent on hover only, as the comps draw it. */
td > a:first-child:not(.oc-btn),
th[scope="row"] > a:first-child {
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
}

td > a:first-child:not(.oc-btn):hover,
th[scope="row"] > a:first-child:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

dl.values {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--space-md);
  margin: 0 0 var(--space-sm);
  font-size: var(--text-small);
}

dl.values dt {
  font-weight: 400;
  color: var(--ink-3);
}

dl.values dd {
  margin: 0;
}

/* A portal address is one long word to a browser: it may break anywhere rather than push a table off a narrow screen. */
.address {
  overflow-wrap: anywhere;
}

/* In look A's stacking tables (the import page's grid and its column guide), a long unbroken word may break anywhere, as an
   address does, rather than push the table past its card. The date stays whole (.date). */
.table-stack td {
  overflow-wrap: anywhere;
}

/* A date is read whole: never broken at its hyphens. */
.date {
  white-space: nowrap;
}

/* A count read as one phrase ("4 of 5 recorded", the conflict matters' list) is kept on one line (the design finish review of #508). */
.oc-table td.count {
  white-space: nowrap;
}

/*
 * Tidewater's tables (docs/design/tidewater/components/bundle.css, Table; README, "Tables"): ruled rows, the headings in 12 px ink-3
 * on surface-2 over a line-card rule, each row on a line hairline, the last row closed by the card; hover fills surface-2.
 * oc-table--columns adds column rules (five columns or more: the Portfolio), oc-table--compact tightens a long manager list (people,
 * the import's results), and oc-table--stack stacks each row into a block on a phone (below). Where it departs from bundle.css, so
 * today's markup stands: a row's title is still its first link, drawn by look A's rule above; a body row's heading (th scope="row")
 * is a cell's padding and rule in ink rather than a column heading's look; it resets the capitals and spacing look A's headings
 * set, since look A's table rules stay for the import page and the public documents; a stacked cell sets its heading above its
 * value rather than beside it, as look A's people list did, since a cell holds a title, lines and forms, not one short value; and
 * the heads do not stick, since a wrapper that scrolls sideways is the scroll area they would stick to, and it never scrolls down.
 */
.oc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.oc-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: bottom;
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-card);
}

.oc-table td,
.oc-table tbody th {
  padding: var(--space-4);
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

.oc-table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.oc-table td > strong:first-child {
  font-weight: 650;
  color: var(--ink);
}

.oc-table tbody tr:last-child > :is(td, th) {
  border-bottom: 0;
}

.oc-table tbody tr:hover > :is(td, th) {
  background: var(--surface-2);
}

.oc-table td small {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
}

.oc-table :is(td, th).num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.oc-table--columns :is(td, th) + :is(td, th) {
  border-left: 1px solid var(--line);
}

.oc-table--columns thead th + th {
  border-left-color: var(--line-card);
}

.oc-table--compact {
  font-size: 13px;
}

.oc-table--compact thead th {
  padding: var(--space-2) var(--space-3);
}

.oc-table--compact :is(td, tbody th) {
  padding: 10px var(--space-3);
}

.oc-table--compact .oc-pill {
  min-height: 24px;
  padding-block: 3px;
  font-size: 12px;
}

/* A stacking table's long unbroken file name or title may break anywhere, as an address does, rather than push the list past its
   card. The date stays whole (.date). */
.oc-table--stack td {
  overflow-wrap: anywhere;
}

/* A citation breaks only at its spaces: break-word keeps the column's least width at its longest word, so on a desktop the Law column
   never narrows to a few characters (the design finish review of #507). Stacked, each cell has the row's width. */
.oc-table--stack td.cite {
  overflow-wrap: break-word;
}

/* ---------- State pills: a word and a drawn mark, never colour alone ---------- */

/*
 * Tidewater's state pills (docs/design/tidewater/components/bundle.css, StatePill): a state's words and its drawn mark on a tinted
 * pill, 28 px tall, so no state rests on colour alone; oc-pill alone is the quiet pair. Two departures from bundle.css, so that
 * today's markup stands as it is: the mark is drawn here (::before), chosen by the pill's modifier as bundle.css's inline SVG would
 * be, so a quiet state names its slashed circle (oc-pill--quiet). A pill keeps to one line, fully round, as bundle.css draws it;
 * the one state that is a sentence (the interrupted upload) wraps, through oc-pill--wrap, whose corners are half the one-line
 * height, since --radius-pill would squash a wrapped pill into a capsule, with its mark on its first line.
 */
.oc-pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 28px;
  padding: 5px var(--space-3) 5px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--quiet-bg);
  color: var(--quiet);
}

/* The interrupted upload's sentence, which may run to more than one line. */
.oc-pill--wrap {
  white-space: normal;
  border-radius: 14px;
}

/* The mark's ring, which every mark below fills or crosses. */
.oc-pill::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}

/* Receiving, the malware scan, the content check, a date coming up: a clock. */
.oc-pill--info {
  background: var(--info-bg);
  color: var(--info);
}

.oc-pill--info::before {
  background:
    linear-gradient(currentColor 0 0) 5.6px 1.8px / 1.6px 4.6px no-repeat,
    linear-gradient(currentColor 0 0) 5.6px 5.6px / 3.8px 1.6px no-repeat;
}

/* Waiting for a person: a half-filled circle. */
.oc-pill--attn {
  background: var(--attn-bg);
  color: var(--attn);
}

.oc-pill--attn::before {
  background: linear-gradient(90deg, transparent 50%, currentColor 50%);
}

/* Filed as an official record, not yet published ("filed but not published"): a full disc, one step on from the half-filled mark
   of review, in the same pair. Tidewater's set has no mark for it; this one is look A's, kept. */
.oc-pill--filed {
  background: var(--attn-bg);
  color: var(--attn);
}

.oc-pill--filed::before {
  background: currentColor;
}

/* Refused, failed, interrupted: a crossed circle. */
.oc-pill--bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.oc-pill--bad::before {
  background:
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) center / 7px 7px no-repeat;
}

/* Declined, set aside, taken down, no e-mail: a slashed circle, in the quiet pair. */
.oc-pill--quiet::before {
  background: linear-gradient(-45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px));
}

/* Done (published, recorded, signed in): ink on white inside a line-strong ring, with a drawn check. No state is green. */
.oc-pill--done {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.oc-pill--done::before {
  background: linear-gradient(-45deg, transparent 0 60%, currentColor 60% 68%, transparent 68%) 3px 4px / 8px 8px no-repeat,
    linear-gradient(45deg, transparent 0 58%, currentColor 58% 66%, transparent 66%) 0 6px / 6px 6px no-repeat;
}

/* Never shown: a record under a never-post key, served to nobody (ADR-0011 §8): a barred circle, in the quiet pair. Tidewater's set
   has no mark for it; this one is look A's, kept. */
.oc-pill--never::before {
  background: linear-gradient(currentColor 0 0) center / 8px 1.6px no-repeat;
}

/* The plain ring: a closed request ("Closed on {date}", never the check, which would read as the platform approving the
   association's answer), and a state its list does not name, which never takes another state's look. No fill, the words' own
   colour. Tidewater has no such pill; this is look A's, kept. */
.oc-pill--plain {
  background: none;
  color: inherit;
}

/* ---------- The pages ---------- */

/* The association an upload goes to, prominent, so nobody uploads to the wrong one (ADR-0011 §4). */
.association-name {
  display: grid;
  gap: 2px;
  margin: 0 0 var(--space-lg);
  font-size: var(--text-name);
  font-weight: 650;
  line-height: 1.25;
}

.association-name .hint {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--ink-2);
}

/* ---------- The people list (look A) ---------- */

/*
 * Composed from look A's comp (docs/design/look-a/a-people.dc.html): the title and lede at left with "Add a person" beside
 * them, level with the lede's last line, and under them the ruled table and its footnotes. Where the two do not fit side by
 * side (a phone, a narrow window) the button wraps under the lede. The rest is the shared ruled table, its rows stacking on
 * a phone as the uploads' do, and the shared state pills.
 */
.people-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin: 0 0 var(--space-xl);
}

.people-head > div {
  flex: 1 1 28rem;
  min-width: 0;
}

.people-head .lede,
.people-head .actions {
  margin-bottom: 0;
}

.people-head .ic {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

/* A person with more than one role: each role's lines under the last, closer than paragraphs. The last keeps the shared
   reset (td > :last-child). */
.people td > p:not(:last-child) {
  margin-bottom: var(--space-xs);
}

/* The footnotes under the table read as one group. The last keeps the sheet's reset (.oc-card > :last-child). */
.people > .hint:not(:last-child) {
  margin-bottom: var(--space-xs);
}

/* ---------- The person page ---------- */

/* A name is a person's own text, at any length: it may break anywhere rather than run past the sheet. */
.person-name {
  overflow-wrap: anywhere;
}

/* The pill under the name, with its label. */
.person-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin: 0 0 var(--space-lg);
}

/* The roles, one under another between hairlines: each role's lines at the left and its remove form at the right, which
   drops under the lines where the two do not fit side by side (a phone). */
.roles {
  max-width: 72ch;
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.roles > li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.role-lines {
  display: grid;
  gap: 2px;
}

.role-lines > p {
  margin: 0;
}

.role-name {
  font-size: var(--text-label);
  font-weight: 600;
}

/* A role of history alone keeps its lines, quieter, so that who had access when stays readable (ADR-0010 §6). */
.role-removed .role-name {
  color: var(--ink-2);
}

/* The way to the confirm step, at the row's right. */
.role-action {
  margin: 0;
}

/* The re-send, under the invitation line it answers (ADR-0010 §10 (6) item 4). */
.role-lines > .resend {
  margin: var(--space-xs) 0 0;
}

/* A recorded address is one long word to a browser: it may break anywhere rather than push the row past the sheet. */
.role-lines bdi {
  overflow-wrap: anywhere;
}

/* On a phone a role's actions stack under its lines at the row's whole width, the re-send above Remove, one size. 600px, not the
   page's 760px: up to about 700px a row whose lines are short still fits Remove beside them, and the stack is forced (flex-basis)
   so that a button is never stretched while it sits beside the lines. */
@media (max-width: 600px) {
  .roles .role-lines,
  .roles .role-action {
    flex-basis: 100%;
  }

  .roles .resend button,
  .roles .role-action > a.oc-btn {
    width: 100%;
  }
}

/* The confirm step, inside its role's row (copy item 20): the whole row's width, under a lighter gap than a sheet's own
   confirm takes, with the prompt at a readable measure above the form. */
.roles .confirm {
  flex-basis: 100%;
  max-width: none;
  margin-top: var(--space-xs);
  padding-top: var(--space-md);
}

.roles .confirm > p {
  max-width: 64ch;
  margin: 0 0 var(--space-md);
}

/* Cancel, beside the button: DESIGN.md's link button, an inline action at the small size. */
.roles .confirm .form-actions > a {
  font-size: var(--text-small);
}

/* The way to an open term's end (step-2 PR-22), under its date, as the re-send sits under its line; "Invite again" is a .resend.
   On a phone it takes the row's width, as the roles' other actions do. */
.role-lines > .term-action {
  margin: var(--space-xs) 0 0;
}

@media (max-width: 600px) {
  .roles .term-action > a.oc-btn {
    width: 100%;
  }
}

/* The address edit (step-2 PR-22), under the roles, as the calendar link section sits: its way in, or its step at a readable measure. */
.person-address {
  max-width: 72ch;
  margin: 0 0 var(--space-lg);
}

.person-address > .hint {
  max-width: 64ch;
}

.person-address .confirm {
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
}

@media (max-width: 600px) {
  .person-address .role-action > a.oc-btn {
    width: 100%;
  }
}

/* The person's calendar link for meetings (OF-05), under the roles: its dates close together, as a role's are, then End with its hint
   above it at a readable measure; on a phone the button takes the sheet's width, as the roles' actions do. */
.person-calendar-link {
  max-width: 72ch;
  margin: 0 0 var(--space-lg);
}

.person-calendar-link > p {
  margin: 0 0 2px;
}

.end-calendar-link {
  margin-top: var(--space-sm);
}

.end-calendar-link > .hint {
  max-width: 64ch;
  margin: 0 0 var(--space-xs);
}

@media (max-width: 600px) {
  .end-calendar-link button {
    width: 100%;
  }
}

/* The director's lines and documents on file (DC-08), under the Person page's "Director certificates": between hairlines, as the
   roles are, each line its name, its state, its reasons and the folded "What the law says"; each document its link and dates.
   "Documents on file" stands apart from the lines above it (the design review of #320, fix 4). */
.person-certificates .cert-on-file-heading {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: 1.125rem;
  font-weight: 650;
}

/* "Add certificate" clear of the status link under it (fix 6). */
.person-certificates .role-action {
  margin-bottom: var(--space-sm);
}

/* An overdue line's pill (DC-08; fix 1): the finding's flag (.finding-what) in place of the half-filled mark, so a recorded
   document dated late is never told from one not recorded by colour alone (ADR-0016: missing data distinguishable from overdue). */
.oc-pill.oc-pill--flag::before {
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(currentColor 0 0) 2px 1px / 1.6px 14px no-repeat,
    linear-gradient(currentColor 0 0) 3.6px 1px / 10px 7px no-repeat;
}

/* Forced colours drop the flag's fills, so its pole and cloth are drawn as borders. */
@media (forced-colors: active) {
  .oc-pill.oc-pill--flag::before {
    width: 12px;
    height: 14px;
    margin-left: 2px;
    background: none;
    border-top: 7px solid CanvasText;
    border-left: 2px solid CanvasText;
  }
}

.cert-lines,
.cert-on-file {
  max-width: 72ch;
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.cert-lines > li,
.cert-on-file > li {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.cert-lines p {
  margin: 0;
}

/* Each document's title in ink, as a ruled row's title is (DESIGN.md's Accent Rule; fix 3), the accent on hover. */
.cert-on-file > li > a {
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.cert-on-file > li > a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* "What the law says": folded under its line, drawn as the calendar's folded rules are (.calendar-rules-more), with the browser's own
   disclosure marker, so it reads as something to open, at a touch target's height. */
.cert-law > summary {
  min-height: 44px;
  padding-block: 10px;
  font-weight: 600;
  cursor: pointer;
}

.cert-law > p {
  max-width: 64ch;
  margin: 0 0 var(--space-xs);
}

/* ---------- The review queue ---------- */

/*
 * The queue on the ground, joined to the chosen upload's sheet as the binder's dividers are (DESIGN.md, "Index
 * Dividers"), with the uploads still being checked under it. The sheet comes between the two groups in the page's
 * order, so on a phone, where everything stacks, it follows the queue directly.
 */
.review-h {
  margin-bottom: var(--space-lg);
}

/* The poll's notice, under the review queue or the Overview's sheet (ADR-0011 §7, the note of 2026-10-10). */
.queue-poll > .oc-notice {
  margin-top: var(--space-xl);
}

.review {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "awaiting detail"
    "pending detail";
  align-items: start;
}

/* Nothing waiting for review, so no sheet: the queue alone, in one column. */
.review-empty {
  grid-template-columns: minmax(0, 340px);
  grid-template-areas:
    "awaiting"
    "pending";
}

.review-awaiting {
  grid-area: awaiting;
}

.review-pending {
  grid-area: pending;
  margin-top: var(--space-xl);
}

.queue-h {
  margin: 0 0 var(--space-xs);
  padding-left: var(--space-md);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-3);
}

.q-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.q-list > li + li {
  margin-top: 0;
}

.q-item,
.q-waiting {
  display: grid;
  gap: 3px;
  padding: var(--space-md) var(--space-ml) var(--space-md) var(--space-md);
}

.q-item {
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  transition: background-color var(--duration-state) var(--ease);
}

.q-item:hover {
  background: var(--ground-2);
}

/* The chosen upload: white and 1 px under the sheet, so it and the sheet read as one piece, as an open tab and its sheet do. */
.q-item[aria-current="true"] {
  position: relative;
  z-index: 2;
  margin-right: -1px;
  background: var(--sheet);
}

.q-title {
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.q-item[aria-current="true"] .q-title {
  font-weight: 650;
}

.q-meta {
  font-size: var(--text-caption);
  color: var(--ink-3);
}

/* Shown on a phone only, where the chosen upload's sheet follows the queue rather than sitting beside it. */
.q-shown {
  display: none;
}

.q-waiting p {
  max-width: 60ch;
  margin: var(--space-xxs) 0 0;
  font-size: var(--text-caption);
  color: var(--ink-2);
  text-wrap: pretty;
}

.detail {
  position: relative;
  z-index: 1;
  grid-area: detail;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--space-md);
  padding: var(--space-xl) var(--space-2xl);
}

/*
 * A row's block inside a sheet's section (the building file's condominiums, a contract's bids): the sheet already insets it, so it takes
 * the section's full width at every size, with no stray indent at 1280 and no narrow column at 320 (the design finish review of #503).
 * The review queue's sheet, itself a card, keeps its own padding.
 */
.oc-card > section > .detail {
  padding-inline: 0;
}

/*
 * Every part of the sheet takes a line of its own but two: the File button and a closed Decline, which share one where
 * they fit, as in the comp. The Accept form's parts lay out as the sheet's own (display: contents); the form has no name,
 * so it has no role for that to take away, and it still posts what it holds. Open, Decline's panel takes its own line.
 */
.detail > *,
.detail > form > * {
  flex: 0 0 100%;
  min-width: 0;
}

.detail > form {
  display: contents;
}

.detail > form > .d-actions,
.detail > form + .decline:not([open]) {
  flex-basis: auto;
}

.detail > h2 {
  margin: 0;
  font-size: var(--text-subhead);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md) 28px;
  margin: var(--space-ml) 0 0;
  padding-block: var(--space-md);
  border-block: 1px solid var(--rule);
}

.facts .fact-wide {
  grid-column: 1 / -1;
}

.facts dt,
.checked-against dt {
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--ink-3);
}

.facts dd,
.checked-against dd {
  margin: 2px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.d-lines {
  margin-top: var(--space-md);
}

/* A record page's corrections, one item each under the dated sentence, read as its lines are. */
.d-lines p,
.d-lines ul {
  max-width: 64ch;
  margin: 0 0 var(--space-xs);
  font-size: var(--text-small);
  color: var(--ink-2);
  text-wrap: pretty;
}

.detail .oc-notice--attn {
  margin: var(--space-lg) 0 0;
}

/* What a post did, on the ground above the queue rather than on a sheet: white under a hairline, so it shows. A neutral notice
   only: an error summary that answers a post (oc-notice--bad result) keeps its own look. */
.result {
  margin-bottom: var(--space-lg);
}

.oc-notice.result:not(.oc-notice--attn, .oc-notice--bad) {
  padding-left: 52px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.oc-notice.result:not(.oc-notice--attn, .oc-notice--bad)::before {
  content: "";
  position: absolute;
  top: 18px;
  left: var(--space-ml);
  width: 20px;
  height: 20px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}

/* Filed as an official record, not yet published: the full ochre disc of its pill. */
.result-filed::before {
  color: var(--attn);
  background: currentColor;
}

/* Declined: the slashed circle of its pill. */
.result-declined::before {
  color: var(--quiet);
  background: linear-gradient(-45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px));
}

/* The refusal again, above the File button, for whoever reads down to it. */
.d-refused {
  max-width: 64ch;
  margin: var(--space-lg) 0 0;
  font-weight: 600;
  color: var(--bad);
}

.d-refused + .d-actions {
  margin-top: var(--space-sm);
}

/* A certificate's facts' reasons, listed under the refusal they belong to (DC-07). */
.d-refused + ul.d-refused {
  margin-top: var(--space-xs);
}

/* A numbered step (DESIGN.md, "Steps"): a brass ring on the stamp's paper with a brass-ink numeral, filled with ink once
   the step is done. */
.step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0 var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--rule);
}

.step-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: var(--text-caption);
  font-weight: 650;
  color: var(--brass-ink);
  background: var(--stamp-bg);
  border: 1px solid var(--brass);
  border-radius: 50%;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

/* The download, done when the platform has this person's download of this version on record. */
.step.is-done .step-n {
  color: var(--sheet);
  background: var(--ink);
  border-color: var(--ink);
}

/* The warnings once every box in the step is ticked, the checklist once every required box is, and a certificate's facts once
   every required field reads valid. At least one box must be ticked, so the warnings' step, which holds none when the list is
   empty, never fills: an empty list is never a done state. The ring fills on what the page can know: the statements that hold
   only for some dates are not counted, and which of them the dates entered ask stays the server's check (DC-07). A rule of its
   own, so a browser without :has() still draws the download's. */
.step-acks:has(input:checked):not(:has(input:not(:checked))) .step-n,
.step-checklist:has(input:checked):not(:has(input[required]:not(:checked))) .step-n,
.step-facts:has(:required):not(:has(:invalid)) .step-n {
  color: var(--sheet);
  background: var(--ink);
  border-color: var(--ink);
}

.step h3 {
  margin: 3px 0 0;
  font-size: var(--text-title);
}

.step > div > p {
  max-width: 64ch;
  margin: var(--space-xxs) 0 0;
  color: var(--ink-2);
  text-wrap: pretty;
}

.step-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.step-body > * {
  margin: 0;
}

.step-body > p {
  max-width: 64ch;
  text-wrap: pretty;
}

/* A director certificate's facts (DC-07): each field the step's whole width, so a control is as wide as any other and never
   only as wide as its hint; the controls keep their own caps. A field's label sits clear of the control above it. */
.step-facts .step-body {
  gap: var(--space-md);
}

.step-facts .step-body > .oc-field {
  justify-self: stretch;
}

/* The hours at the date fields' width: a number of a few figures; the provider number keeps the full width. */
.step-facts #hours {
  max-width: 220px;
}

/* A refused fact's reason, above its control and named by it (aria-describedby), as the error summary links to it. */
.field-error {
  max-width: 64ch;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--bad);
}

/* A hint under a checked-against fact, as the suggested title under a certificate's title (DC-07): a hint's weight, not a fact's. */
.checked-against dd.hint {
  max-width: 64ch;
  margin-top: var(--space-xxs);
  font-weight: 400;
}

.opened {
  font-weight: 600;
}

.findings {
  width: 100%;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.findings > li + li {
  margin-top: 0;
}

.finding {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule);
}

.finding > * {
  margin: 0;
}

/* The help and the box under the words they belong to, level with them rather than with the mark. */
.finding > :not(.finding-what) {
  margin-left: 26px;
}

.finding-what {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* The finding mark (DESIGN.md: ochre): a drawn flag, beside the words that say what it marks. */
.finding-what::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background:
    linear-gradient(var(--attn) 0 0) 2px 1px / 1.6px 14px no-repeat,
    linear-gradient(var(--attn) 0 0) 3.6px 1px / 10px 7px no-repeat;
}

.finding-what b {
  display: block;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink-3);
}

/* What the content check looks for and does not: shown with the warnings, and just the same without any. */
.limits {
  width: 100%;
  padding: 14px var(--space-md);
  font-size: var(--text-small);
  color: var(--ink-2);
  background: var(--notice-bg);
  border-radius: var(--radius-md);
}

.limits h4 {
  margin: 0 0 var(--space-xxs);
  font-size: var(--text-small);
  font-weight: 650;
  color: var(--ink);
}

.limits ul {
  margin: 0 0 var(--space-sm);
}

.limits > :last-child {
  margin-bottom: 0;
}

.checked-against {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) 28px;
}

.checked-against dd {
  margin: 0;
}

.checklist {
  display: grid;
  gap: var(--space-sm);
}

.checklist .oc-check + .oc-check {
  margin-top: 0;
}

/* Under its statement, level with the words rather than the box. */
.checklist .hint {
  margin: calc(-1 * var(--space-xxs)) 0 0 32px;
}

.d-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
}

.decline {
  margin-top: var(--space-sm);
}

.decline[open] {
  margin-top: var(--space-lg);
  padding: var(--space-md) 18px;
  background: var(--notice-bg);
  border-radius: var(--radius-md);
}

/* The disclosure's own control is the secondary button (oc-btn, Buttons); the browser's marker is replaced by a
   chevron drawn in the text's colour, which turns up while the panel is open. The Publish page's folded limits
   (.limits-disclosure) are drawn the same way. */
.decline summary,
.limits-disclosure summary {
  gap: 10px;
  list-style: none;
}

.decline summary::-webkit-details-marker,
.limits-disclosure summary::-webkit-details-marker {
  display: none;
}

.decline summary::after,
.limits-disclosure summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-state) var(--ease);
}

.decline[open] summary::after,
.limits-disclosure[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.decline[open] summary,
.limits-disclosure[open] summary {
  margin-bottom: var(--space-sm);
}

.decline form {
  margin: 0;
}

.decline p {
  max-width: 64ch;
  font-size: var(--text-small);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- The owners' section: the binder (S3-11a) ---------- */

/*
 * DESIGN.md's binder, composed from the look A comps (binder-owners, a-phone-owners): the categories of the posting list as
 * index dividers on the ground, under compliance's group headings, a white sheet with the chosen one's records, and a filing
 * stamp framed in brass on every row. The current divider turns white and joins its sheet, as the review queue's current
 * upload does. No script: a divider is a link, so the sheet a phone shows is a page of its own (.binder-open), with its way
 * back (DESIGN.md, "The Drill-In Rule"). Every rule is scoped to the section; its narrower screens are in "Narrower screens"
 * below.
 */
/* What every page of the section must say (the preview, the company's identity, why nothing can be downloaded), in one
   panel on the ground: white under a hairline, since the ground's own fill would not show there, with the notice's drawn
   ring before its words. */
/* As wide as the binder below it, so the preview's line and the identity notice read as one line on a wide screen. */
.binder-page .site-notice {
  position: relative;
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md) var(--space-sm) 42px;
  font-size: 0.90625rem;
  color: var(--ink-2);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}

/* The notice's own ring (.oc-notice::before), placed for this panel's tighter padding. */
.binder-page .site-notice::before {
  top: 15px;
  left: var(--space-md);
}

.binder-page .site-notice p {
  max-width: 72ch;
  margin: 0;
}

.binder-page .site-notice p + p {
  margin-top: var(--space-xs);
}

.binder-page .site-notice b {
  font-weight: 650;
}

/* The sheet runs the index's whole height, so whichever divider is open, low in the list too, meets it; the sheet's words
   stay at its top and the rest is plain white page (the founder's report on nonprod after #263). */
.binder-page .binder {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: stretch;
  margin-top: 28px;
}

/* Room under the last divider, so an open one there meets the sheet's straight edge above its rounded corner. */
.binder-page .binder-index {
  min-width: 0;
  padding-bottom: var(--space-xl);
}

/* The section's title, at the comp's index heading size, above its search. */
.binder-index .binder-title {
  margin: 0 0 18px;
  font-size: 1.3125rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

/* The search: its label, then the field and its ink button on one line; the field's mark drawn beside it. */
.binder-page .find {
  display: grid;
  gap: 6px;
  margin: 0 var(--space-lg) var(--space-lg) 0;
}

.binder-page .find label {
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--ink-2);
}

.binder-page .find-row {
  position: relative;
  display: flex;
  gap: var(--space-xs);
}

.binder-page .find-row input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 38px;
}

/* A magnifying glass: a ring and its handle, drawn in the hint's colour where the field's text begins. */
.binder-page .find-row::before,
.binder-page .find-row::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.binder-page .find-row::before {
  top: 14px;
  left: 13px;
  width: 12px;
  height: 12px;
  border: 1.6px solid var(--ink-3);
  border-radius: 50%;
}

.binder-page .find-row::after {
  top: 26px;
  left: 23px;
  width: 6px;
  height: 1.6px;
  background: var(--ink-3);
  transform: rotate(45deg);
  transform-origin: left center;
}

.binder-page .find-row button {
  flex: none;
}

/* The field's description while search reads the documents' text (DS-W-03): under the field, in the grid's own gap. */
.binder-page .find .hint {
  margin: 0;
}

/* The search again, on the results' own page: a phone's alone, where the index is a page away. */
.binder-sheet .results-find {
  display: none;
}

.binder-index .tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.binder-index .tabs li + li {
  margin-top: 0;
}

/* A group's heading: the section heading's brass-ink capitals and hairline, at the comp's index size, over its dividers.
   The hairline is the comp's strong rule at 60% over the ground, still a border, so forced colours draw it. */
.binder-index .kicker {
  gap: var(--space-xs) 10px;
  margin: var(--space-lg) var(--space-lg) 6px var(--space-sm);
  font-size: var(--text-caps);
}

.binder-index .kicker::after {
  border-top-color: color-mix(in srgb, var(--rule-strong) 60%, var(--ground));
}

/* A divider's count sits on its label's first line, however many lines the label wraps to (the comp's baseline). */
.binder-index .tab {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px var(--space-ml) 9px var(--space-sm);
  font-size: 0.90625rem;
  line-height: 1.38;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  transition: background-color var(--duration-state) var(--ease), color var(--duration-state) var(--ease);
}

.binder-index .tab:hover {
  color: var(--ink);
  background: var(--ground-2);
}

.binder-index .tab-label {
  flex: 1 1 auto;
  min-width: 0;
  text-wrap: pretty;
}

.binder-index .tab-count {
  flex: none;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink-2);
}

.binder-index .tab-count-zero {
  font-weight: 400;
  color: var(--ink-3);
}

/* A category the site does not carry yet says so in words, under its title, where a count would read as "none". */
.binder-index .tab-not-carried {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--ink-3);
}

/* "More from the association" (trace-matrix REC-VOL-718): last, and set apart from the six groups by space and a rule they do
   not have between them, so it never reads as a seventh group. The rule is on its heading, so it takes the heading's inset
   measure at every width (the finish review of #274); a border, so forced colours keep it. */
.binder-index .binder-more {
  margin-top: var(--space-xl);
}

.binder-index .binder-more > .kicker {
  margin-top: 0;
  padding-top: var(--space-lg);
  border-top: 2px solid var(--rule-strong);
}

/* The current divider: white and 1 px under the sheet, in the accent, so it and the sheet read as one piece. */
.binder-index .tab[aria-current="page"] {
  position: relative;
  z-index: 2;
  margin-right: -1px;
  font-weight: 650;
  color: var(--accent);
  background: var(--sheet);
}

.binder-page .binder-sheet {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Shown on a phone only, where the sheet is a page of its own. The Notices page's sheet keeps its way back everywhere. */
.binder-sheet .back {
  display: none;
}

.binder-sheet .page-h {
  margin: 0;
  font-size: var(--text-headline);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.binder-sheet .page-ref {
  max-width: 64ch;
  margin: 10px 0 0;
  color: var(--ink-2);
}

/* A lede's details, in the page's note type (DS-W-06 under DS-W-05, DS-07's finish review): its own paragraph straight after the lede,
   a smaller gap, and never smaller or lighter than the page's other notes (compliance on #501). */
.binder-sheet .page-ref--note {
  margin-top: 6px;
  font-size: var(--text-small);
  color: var(--ink-3);
}

/* The binder's ruled rows, on the Notices page's sheet too (the design review of #193, 1); a search's refusal or failure notice
   (DS-07) takes the same gap under the heading. */
:is(.binder-sheet, .notices-sheet) :is(.oc-empty, .oc-notice) {
  margin-top: 26px;
}

:is(.binder-sheet, .notices-sheet) .oc-empty p + p {
  font-size: var(--text-small);
  color: var(--ink-3);
}

:is(.binder-sheet, .notices-sheet) .docs {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

:is(.binder-sheet, .notices-sheet) .docs li + li {
  margin-top: 0;
}

:is(.binder-sheet, .notices-sheet) .doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xxs) 28px;
  padding-block: var(--space-ml);
  border-bottom: 1px solid var(--rule);
}

:is(.binder-sheet, .notices-sheet) .doc-title {
  font-size: 1.09375rem;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

:is(.binder-sheet, .notices-sheet) a.doc-title:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

:is(.binder-sheet, .notices-sheet) .doc-meta {
  margin: 5px 0 0;
  font-size: var(--text-small);
  color: var(--ink-3);
}

/* The category's link after the size: quiet, its underline a strong rule until it is pointed at. */
.binder-sheet .doc-meta a {
  color: var(--ink-2);
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}

.binder-sheet .doc-meta a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* A notice's meeting facts, small, in the row's main column under its category: each label over its value, as many a line
   as fit. Not the filing stamp, which says when a record was received and added. */
.notices-sheet .notice-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-ml);
  margin: var(--space-xs) 0 0;
  font-size: var(--text-small);
}

.notices-sheet .notice-facts dt {
  color: var(--ink-3);
}

.notices-sheet .notice-facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

/* The filing stamp (DESIGN.md): brass-ink small capitals, right-aligned tabular dates, framed in a 1 px brass line on
   the stamp's warm paper. */
.binder-sheet .stamp {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 22px;
  width: 12.25rem;
  margin: 0;
  padding: var(--space-xs) 14px 9px;
  font-size: 0.84375rem;
  line-height: 1.45;
  background: var(--stamp-bg);
  border: 1px solid var(--brass);
  border-radius: var(--radius-xs);
}

/* The rows have no role of their own, so display: contents takes nothing from a screen reader. */
.binder-sheet .stamp div {
  display: contents;
}

.binder-sheet .stamp dt {
  align-self: center;
  font-size: var(--text-stamp);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-ink);
}

.binder-sheet .stamp dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/* Where a search found a word inside a document (DS-07): the pages of the file, under the row's kind and category, a step darker
   than that line so it reads as the answer to the search, never as a fact of the record. */
.binder-sheet .doc-found {
  margin: 4px 0 0;
  font-size: var(--text-small);
  color: var(--ink-2);
}

.binder-sheet .page-foot {
  max-width: 62ch;
  margin: 22px 0 0;
  font-size: var(--text-small);
  color: var(--ink-3);
}

/* ---------- The filed records (S3-11a) ---------- */

/* The Manager's list and a record's page: the list's rows, the facts, and the history, oldest first. */
.records-table .record-link {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The one line beside a record's state in the list: under its pill, at the table's reading size. */
.records-table td p {
  max-width: 60ch;
  margin: 6px 0 0;
  font-size: var(--text-small);
  color: var(--ink-2);
  text-wrap: pretty;
}

.record-sheet .record-h {
  margin-bottom: var(--space-xs);
  overflow-wrap: anywhere;
}

/* Four facts a row where the sheet is wide; the narrower screens step down to two, then to what fits. */
.record-sheet .facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-lg);
}

/* The download and the way to Publish, side by side where they fit, each its own 44 px target. */
.record-sheet .record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
}

.record-sheet .history {
  margin-top: var(--space-xl);
}

.record-sheet .history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.record-sheet .history-list li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 17rem);
  gap: var(--space-xxs) var(--space-md);
  margin: 0;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule);
}

.record-sheet .history-what {
  text-wrap: pretty;
}

.record-sheet .history-by {
  font-size: var(--text-small);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.record-sheet .history-by .hint {
  margin-right: var(--space-xxs);
}

/* ---------- The filed records list (look A) ---------- */

/*
 * Composed from look A's comp (docs/design/look-a/a-filed.dc.html): the title and lede, the dates' two notes side by side,
 * then the ruled table. Each record's name is the row's title at the lede's size (the shared rule draws it in ink, the accent
 * on hover), its category under it; the dates sit at the table's 15 px; under each pill its one line, quieter. On a phone the
 * notes stack, and the rows stack into blocks (.oc-table--stack), under the ink rule the hidden headings took
 * with them. Scoped to this page, because the records requests' list shares .records-table and keeps its own measures.
 */

/* The manager's information line (row MGR-INFO) reads with the lede, beside the obligations and never above them. */
.filed-records .manager-info {
  color: var(--ink-2);
}
.filed-records .manager-info p { margin: 0; }
.filed-records .manager-info p + p { margin-top: var(--space-xxs); }

/* The two notes on what a date to post by is and is not: side by side under the lede, each on the note's quiet panel. */
.filed-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 22px 0 30px;
}

.filed-notes .hint {
  max-width: none;
  margin: 0;
  padding: 14px var(--space-md);
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--note-bg);
  border-radius: var(--radius-md);
}

/* The table 30 px under what comes before it, but close under the filter's line, which says what the list holds. */
.filed-records .oc-table-wrap {
  margin-top: 30px;
}

.filed-records .filter-line + .oc-table-wrap {
  margin-top: 0;
}

/* "Received or created" on one line, as the comp sets the headings. */
.filed-records thead th {
  white-space: nowrap;
}

.filed-records td {
  font-size: var(--text-label);
}

.filed-records .record-link {
  font-size: var(--text-lede);
}

.filed-records .record-category {
  display: block;
  margin-top: var(--space-xxs);
  font-size: var(--text-small);
  color: var(--ink-3);
}

/* The line under a record's pill: its date to post by, its reason or its never-post line. */
.filed-records td p {
  margin-top: var(--space-xs);
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .filed-notes {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The stacked rows under a 2 px ink rule, as the phone comps set a stacked list, on the first edge once the headings hide. */
  .filed-records .oc-table--stack {
    border-top: 2px solid var(--ink);
  }
}

/* ---------- Records requests (RR-04) ---------- */

/* An option's own statement or fields, under its label and in line with the label's text, as a .check-hint is. */
.check-sub {
  margin: var(--space-sm) 0 var(--space-md) 32px;
}

/* A request's items, in the requester's order, each one's state after its words. */
.request-items li + li {
  margin-top: var(--space-sm);
}

.request-items .item-words {
  overflow-wrap: anywhere;
}

.request-items .item-state {
  margin-left: var(--space-sm);
  color: var(--ink-3);
}

/* On an item's own page its answer is a fact of its own: "Open" has no words before it to stand off from. */
.facts dd.request-items .item-state {
  margin-left: 0;
}

/* ---------- Records requests: answers and checklists (RR-05) ---------- */

/* An item's answer under its words, each part on a line of its own; the link to the item's page last. */
.request-items .item-answer,
.request-items .item-answer-more,
.request-items .item-action {
  display: block;
}

.request-items .item-answer {
  margin-top: var(--space-xxs);
}

.request-items .item-answer-more {
  color: var(--ink-3);
}

.request-items .item-place {
  overflow-wrap: anywhere;
}

/* Words for a screen reader alone, kept out of sight as the binder keeps its title, so that twenty links read apart. */
.item-number {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The answers an item's page links to, one a line. */
.record-actions-list li + li {
  margin-top: var(--space-xs);
}

/* A checklist's text, its lines and indents kept as composed and as stored (A7): never interpreted, never reflowed into one. */
.checklist-text {
  max-width: 70ch;
  padding: var(--space-md);
  border: 1px solid var(--rule);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A stored checklist prints alone: no workspace bar, no masthead, no way back, no footer. */
@media print {
  body:has(.checklist-sheet) .workspace,
  body:has(.checklist-sheet) .masthead,
  body:has(.checklist-sheet) footer,
  .checklist-sheet .back,
  .checklist-sheet .lede {
    display: none;
  }

  .checklist-sheet .checklist-text {
    max-width: none;
    padding: 0;
    border: 0;
  }
}

/* ---------- Records requests: request uploads (RR-06) ---------- */

/* The review queue's request uploads: their own heading after the filing uploads, then each request's under its received date. */
.queue-sub {
  margin-top: var(--space-lg);
}

.queue-request {
  margin: var(--space-md) 0 var(--space-xxs);
  padding-left: var(--space-md);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-2);
}

/* The requester's words, which can be one long unbroken string, wrap wherever they must. */
.q-meta.item-words,
.request-uploads .item-words,
.detail .item-words {
  overflow-wrap: anywhere;
}

/* The status page's request uploads, after the uploads to be filed, each request's table under its own caption. */
.request-uploads {
  margin-top: var(--space-xl);
}

.request-uploads .oc-table-wrap + .oc-table-wrap {
  margin-top: var(--space-lg);
}

/* ---------- Records requests: release and take-back (RR-07) ---------- */

/* Each file the release page offers is a ruled block of its own: its title, its item, its download, the box that chooses it,
   then what a release asks of it. The title is the association's name for the file, which can be one long unbroken string. */
.release-file {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

.release-file-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-title);
  overflow-wrap: anywhere;
}

.release-file .item-words {
  overflow-wrap: anywhere;
}

.release-file h3 {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: var(--text-body);
}

/* What a file's form asks, a step below the box that chooses it; the line after the linked statement, a step below its box. A
   box's own hint keeps its place under the box's words (.check-hint). */
.release-file > .oc-check + p:not(.check-hint),
.release-file ~ .confirm + .hint {
  margin-top: var(--space-sm);
}

/* A field error (DESIGN.md, "Inputs / Fields"): in Refusal Red, above the control it names, which points to it with
   aria-describedby (the design review of #282). */
.field-error {
  max-width: 64ch;
  margin: var(--space-md) 0 var(--space-xs);
  font-weight: 600;
  color: var(--bad);
}

/* A request's files, and an item's, as a ruled ledger: a hairline above and under each, its links side by side where they fit,
   each its own 44 px target (the design review of #282). */
.request-items:is(.request-files, .item-files) {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.request-items:is(.request-files, .item-files) > li {
  margin: 0;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule);
}

.file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-ml);
}

.file-actions .item-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The first part after a form page's facts, a step below them. */
.sheet-form.record-sheet .facts + * {
  margin-top: var(--space-lg);
}

/* The item's facts straight under the request's in brief (_RequestSummary): one hairline between them, never two stacked. */
.sheet-form.record-sheet .facts + .facts {
  margin-top: 0;
  border-top: 0;
}

/* ---------- Records requests: the owner's side (RR-08) ---------- */

/* The owner's own records requests: a list of links (look A's index), each row its title over its count, its first item's own
   words and its state's pill. The words are clipped here alone, on one line, the whole text still in the page (the design review
   of #299, 8). */
.owner-requests {
  margin-top: var(--space-lg);
  border-top: 2px solid var(--ink);
}

.owner-requests .row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.owner-requests .row-title {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.owner-requests .row-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  min-width: 0;
  margin-top: var(--space-xxs);
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--ink-3);
}

.owner-requests .row-count,
.owner-requests .row-sep {
  flex: none;
}

.owner-requests .row-first {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-requests .row-state {
  display: block;
  margin-top: var(--space-xs);
  font-weight: 400;
}

/* An item's answer beneath its words, the pill of an open one included, and the copies' list under its section heading's own
   hairline, with no second rule (the design review of #299, 5 and 6). */
.owner-items .item-answer {
  margin-top: var(--space-xxs);
}

.owner-request-sheet .request-items.request-files {
  border-top: 0;
}

/* The checklists given, each whole row a link (7), and the line to write to the association in place of the withdrawal. */
.owner-checklists {
  margin-top: var(--space-xs);
}

.owner-request-sheet .owner-in-writing {
  max-width: 64ch;
  margin-top: var(--space-lg);
}

/* A choice refused: the fieldset carries the state, a rule in Refusal Red beside it and its field error under the legend, never
   each radio (the design review of #299, 3). */
.fieldset-invalid {
  padding-left: var(--space-sm);
  border-left: 2px solid var(--bad);
}

.fieldset-invalid > .oc-error {
  margin-top: 0;
}

/* The way to the form and the form's own facts, a step below the lede, and the first field a step below the facts. */
.owner-requests-sheet .actions,
.owner-request-sheet .owner-facts,
.owner-request-sheet .owner-facts + .oc-field {
  margin-top: var(--space-lg);
}

/* A checklist printed from the owner's page prints alone, the owners' section's notice panel left out too. */
@media print {
  body:has(.checklist-sheet) .binder-h {
    display: none;
  }
}

/* ---------- The upload page (look A) ---------- */

/*
 * Composed from look A's comp (docs/design/look-a/a-upload.dc.html): in the split sheet's main column the title, the association
 * and the lede, then the form as ruled rows under an ink rule; in its side column "What happens next", beside the filing form
 * alone (copy-review.md section 3). The records-request upload, and a page that draws no form, have no panel and keep one column
 * at a form's width (.upload-solo, as the front page's .welcome-solo does). Below 1080 px the panel goes under the main column,
 * behind the split sheet's rule. The recording and transcript forms, where drawn, follow in a sheet of their own
 * (.upload-recordings), after the panel. The association's name keeps its own prominent step (ADR-0011 §4), not the comp's
 * small line.
 */
.upload-solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 52rem;
}

/* The records-request upload's request and item: its lede clear of the facts' closing rule rather than flush under it. */
.upload .facts {
  margin-bottom: var(--space-ml);
}

/* The form: each field a ruled row under the ink rule. Both forms carry the id, so the request's takes the rows too. */
.upload #intake-form {
  margin-top: 30px;
  border-top: 2px solid var(--ink);
}

.upload #intake-form .oc-field {
  max-width: none;
  margin: 0;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}

.upload #intake-form .oc-field > :is(.oc-input:not(.oc-input--date), .oc-select, .oc-dropzone) {
  max-width: 560px;
}

.upload #intake-form .oc-field > .oc-hint {
  max-width: 70ch;
}

/* The board notice's date and time share a fieldset: its legend comes out of the border, into the row like any label. */
.upload #intake-form fieldset.oc-field > legend {
  float: left;
  width: 100%;
  margin: 0;
}

/* The notices' note under their questions: a ruled row of its own, quieter than a field's. Its rule runs the form's width, as
   the fields' rules do, while its words keep a field hint's measure. */
.upload #category-fields > .hint {
  max-width: none;
  margin: 0;
  padding-block: var(--space-md);
  padding-right: max(0px, calc(100% - 70ch));
  border-bottom: 1px solid var(--rule);
}

.upload #intake-form .form-actions {
  padding-top: 26px;
}

/* The panel's steps: each label over its sentence, beside the steps' brass ring on the stamp's paper (.step-n) with its
   numeral, at the 26 px the design system draws a real sequence at (the review's own steps are 30 px). The numeral is for the
   eye alone: the ordered list gives a screen reader the count and the order. */
.upload-next ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.upload-next li {
  position: relative;
  margin: 0;
  padding: 0 0 18px 40px;
  font-size: var(--text-label);
  color: var(--ink-2);
}

.upload-next b {
  display: block;
  color: var(--ink);
}

.upload-next .step-n {
  position: absolute;
  top: -2px;
  left: 0;
  width: 26px;
  height: 26px;
}

.upload-next .hint {
  margin-bottom: var(--space-xs);
}

/* The recording and transcript forms, in a sheet of their own under the PDF form's: the sheet's padding and the 32 px between
   sheets stand in for the first section's hairline and space. */
.upload-recordings > .recording:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- The recording form (RI-08) ---------- */

/* Its own section on the upload page, under a hairline after the PDF form and its answer. */
.recording {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
}

/* The bar and the share sent beside its label, at a field's measure; wraps under the label on a phone. */
.recording-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  max-width: 540px;
  margin-top: var(--space-lg);
}

.recording-progress progress {
  flex: 1 1 12rem;
  min-width: 0;
  height: 12px;
  accent-color: var(--ink);
}

/* Empty until the script says something, and always present so that its words are read out: no space while empty. */
.recording-line:empty {
  margin: 0;
}

/* The answer, below the form, as the PDF form's arrives. */
.recording .recording-line + .oc-notice--bad,
.recording .recording-line + .oc-notice--bad + .oc-notice {
  margin-top: var(--space-lg);
}

/* ---------- The publishing setting ---------- */

/* What a save came to, at the lede's measure rather than the notices' wider one, so the sheet keeps one column. */
.publishing .oc-notice:not(.oc-notice--attn) {
  max-width: 64ch;
}

/* On this sheet a saved or unchanged result takes the notices' quiet fill and edge, keeping its mark and heading: a result is
   white because the review queue draws it on the ground. */
.publishing .oc-notice.result:not(.oc-notice--attn, .oc-notice--bad) {
  background: var(--surface-2);
  border-color: var(--line);
}

/* The checkbox's sentence at its hints' measure. */
.setting .oc-check > span {
  max-width: 60ch;
}

/* Saved, or nothing needed saving: a drawn check inside the result's ring, as the "done" pill (.oc-pill--done) carries one,
   its two strokes as heavy as the ring. A short stroke down to the right, then a long one up to the right, each on its
   own tile's diagonal. */
.result-done::before {
  color: var(--ink);
  background:
    linear-gradient(45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 3px 9px / 3px 3px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) 6px 5px / 7px 7px no-repeat;
}

/* Two hints under one checkbox read as one note: the first gives up the space that ends a checkbox's group. */
.setting .check-hint:has(+ .check-hint) {
  margin-bottom: 0;
}

/* The changes, below the form: each on a line of its own under a hairline, as DESIGN.md's document rows are (18 px),
   newest first, and never numbered, which would read as a ranking. */
.setting-history {
  margin-top: var(--space-2xl);
}

.setting-history ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.setting-history li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs) var(--space-md);
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.setting-history .date {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* A recorded address is one long word to a browser: it may break anywhere rather than push the sheet wider. */
.setting-history bdi {
  overflow-wrap: anywhere;
}

/* ---------- The firm's reminder leads (DG-10) ---------- */

/* The settings sheet's two sections, publishing then reminders, each headed a step below the page's title; the first set off from
   the title by space, the second by a rule across the sheet. */
.publishing-settings {
  margin-top: var(--space-xl);
}

.reminder-settings {
  margin-top: var(--space-4xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--rule);
}

.publishing-settings > h2,
.reminder-settings > h2 {
  margin-top: 0;
  font-size: var(--text-subhead);
  line-height: 1.25;
}

/* Each kind: its label, OneCustodian's setting under it, then its two choices on one line where they fit. */
.reminder-kind {
  margin: 0 0 var(--space-lg);
}

.reminder-kind > legend {
  max-width: 64ch;
  margin-bottom: 2px;
}

.reminder-kind > .hint {
  margin: 0 0 var(--space-xs);
}

.reminder-kind > .hint:last-child {
  margin: var(--space-xs) 0 0;
}

.reminder-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-xl);
}

/* The number's field sits between its radio button and its words, all on the field's centre line. */
.reminder-choices .oc-check + .oc-check {
  margin-top: 0;
}

.reminder-days {
  align-items: center;
}

.reminder-days > input[type="number"] {
  width: 6.5rem;
  min-width: 0;
}

/* Its words read as "No reminder" does, a choice's label and not a field's. */
.reminder-days > label {
  font-weight: 400;
  cursor: pointer;
}

.reminder-form .form-actions {
  margin-top: var(--space-xl);
}

/* ---------- The Publish page (S3-11c) ---------- */

/*
 * A filed record's Publish step (ADR-0011 §8), on a sheet as wide as a form's (.sheet-form), which is about the review
 * sheet's width, where these steps were drawn: the record's facts, then the download as the review queue draws its steps,
 * and either the warnings acknowledged at filing with the one confirmation under a hairline (.confirm), or the warnings
 * and the checklist as numbered steps. Every rule is scoped to the page.
 */

/* The confirmation's hairline across the sheet, as the steps' rules run; its words keep the lede's measure. */
.publish-sheet .confirm {
  max-width: none;
}

.publish-sheet .confirm > p {
  max-width: 64ch;
}

/* The steps' headings a level up from the review sheet's, whose h2 is the upload's title: here the page's own is the h1. */
.publish-sheet .step h2,
.publish-findings h2 {
  margin: 3px 0 0;
  font-size: var(--text-title);
}

.publish-sheet .limits h3 {
  margin: 0 0 var(--space-xxs);
  font-size: var(--text-small);
  font-weight: 650;
  color: var(--ink);
}

/* Which form this is, at the lede's measure, above the steps. */
.publish-form-intro {
  max-width: 64ch;
  margin: var(--space-lg) 0 0;
}

/* The warnings acknowledged at filing, read-only: between the download's hairline and the confirmation's. */
.publish-findings {
  padding-block: var(--space-lg) 0;
}

.publish-findings > p {
  max-width: 64ch;
  margin: var(--space-xxs) 0 0;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* On the sheet a result takes the notices' quiet fill, keeping its mark, as the publishing setting's does. */
.publish-sheet .oc-notice.result:not(.oc-notice--attn, .oc-notice--bad) {
  background: var(--surface-2);
  border-color: var(--line);
}

.publish-sheet .oc-notice {
  margin-top: var(--space-lg);
}

/* ---------- The Take Down page (S3-11d) ---------- */

/*
 * A record's Take Down step (ADR-0011 §8), on the Publish page's sheet (.sheet-form): the record's facts, the reasons, and
 * the ink button alone under the confirmation's hairline, which runs across the sheet as the Publish page's does. What the
 * post did, or why it did nothing, sits on the sheet as the Publish page's notices do. Every rule is scoped to the page.
 */
.takedown-sheet form {
  margin-top: var(--space-lg);
}

.takedown-sheet .confirm {
  max-width: none;
}

/* The button is all the confirmation holds, so the hairline's own space is the gap above it. */
.takedown-sheet .confirm > .d-actions {
  margin-top: 0;
}

.takedown-sheet .oc-notice.result:not(.oc-notice--attn, .oc-notice--bad) {
  background: var(--surface-2);
  border-color: var(--line);
}

.takedown-sheet .oc-notice {
  margin-top: var(--space-lg);
}

/* ---------- The Re-file page (S3-11e) ---------- */

/*
 * A record's Re-file step (ADR-0011 §8), on the Take Down page's sheet: the record's facts, then the categories it may move
 * to as radio buttons in two groups, the posting list's and the never-post keys', each under a legend a step below the
 * form's, and the note for the record as it stands with the ink button under the confirmation's hairline, which runs across
 * the sheet. What the post did, or why it did nothing, sits on the sheet as the Take Down page's notices do. Every rule is
 * scoped to the page.
 */
.refile-sheet form {
  margin-top: var(--space-lg);
}

.refile-sheet .refile-group {
  margin-top: var(--space-md);
}

.refile-sheet .refile-group + .refile-group {
  margin-top: var(--space-xl);
}

.refile-sheet .refile-group > legend {
  font-size: var(--text-small);
  font-weight: 650;
}

.refile-sheet .refile-group > .hint {
  max-width: 64ch;
  margin: 0 0 var(--space-sm);
}

/* The statute's citation never breaks inside itself: where the line runs out, it moves to the next line whole. */
.refile-sheet .cite {
  white-space: nowrap;
}

.refile-sheet .confirm {
  max-width: none;
}

.refile-sheet .confirm > p {
  max-width: 64ch;
}

.refile-sheet .oc-notice.result:not(.oc-notice--attn, .oc-notice--bad) {
  background: var(--surface-2);
  border-color: var(--line);
}

.refile-sheet .oc-notice {
  margin-top: var(--space-lg);
}

/* ---------- The Portfolio, the firm's daily screen (NAV-4) ---------- */

/*
 * "Waiting for a person": each kind of work is a block: a ledger row with its label and its whole count, one hairline, the
 * kind's lines packed under it at the row's full width, then the kind's closing rule. A line is an association's name, its
 * count over its dates, and the link to the page that does the work, with the ledger's arrow. The take-downs and the closed
 * requests after the table use the same lines, their sentences or rows under the count.
 */
/* A kind's row has no link of its own, so its count stands at the row's end. */
.portfolio-work .ledger > li {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: var(--space-xs);
}

.work-lines {
  grid-column: 1 / -1;
  margin: var(--space-xxs) 0 0;
  padding: 0;
  list-style: none;
}

.work-lines > li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 12.5rem);
  align-items: start;
  gap: var(--space-xxs) 28px;
  margin: 0;
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--rule);
}

.work-lines > li + li {
  border-top: 0;
}

.work-name {
  padding-top: 10px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.work-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  font-size: var(--text-small);
  color: var(--ink-2);
}

.work-count {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}

/* A 14-day line's association (CAL-10b), above the rule's title in the line's middle column. */
.work-facts > .work-name {
  padding-top: 0;
  font-size: var(--text-body);
  color: var(--ink);
}

.work-facts ul {
  margin: var(--space-xxs) 0 0;
  padding: 0;
  list-style: none;
}

.work-facts li {
  margin: 0;
}

.work-facts li a {
  display: inline-block;
  padding-block: var(--space-xs);
  font-weight: 600;
}

.work-facts li + li {
  margin-top: 2px;
}

/* "Coming up", the 14-day list (CAL-10b): the same three columns as every line, its date where the others have their name, then the
   association over the rule's title, then the link to its Calendar. */
.work-date {
  padding-top: 10px;
  font-weight: 650;
}

.queue-count {
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}

/* The associations' table, as the comp rules it: each name a title link at the table's size, the address quieter, units
   right-aligned, and each state a word beside a drawn mark, a dot or a ring, both borders so forced colours keep them. */
.portfolio .num {
  text-align: right;
}

.portfolio .address {
  font-size: var(--text-small);
  color: var(--ink-2);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}

.mark::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mark.dot::before {
  border: 4px solid var(--ink);
}

.mark.ring {
  color: var(--ink-2);
}

.mark.ring::before {
  border: 1.5px solid var(--ink-3);
}

/* Filed records filtered to one state (NAV-4): the line that says what the list holds, just above it. */
.filter-line {
  margin: var(--space-lg) 0 var(--space-sm);
  font-weight: 550;
  color: var(--ink);
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1080px) {
  :root {
    --inset: 24px;
  }

  /* The side column would leave the main one too narrow for the ledger's three parts, so the two stack. */
  .sheet-split {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .sheet-side {
    border-left: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .review {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .review-empty {
    grid-template-columns: minmax(0, 280px);
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The binder: a narrower index, and the stamp as a strip under the title, its dates left-aligned. The group headings
     give back half their right margin, so "Board and management" keeps one line beside its hairline. */
  .binder-page .binder {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .binder-index .kicker {
    margin-right: var(--space-sm);
  }

  .binder-sheet .doc {
    grid-template-columns: minmax(0, 1fr);
  }

  .binder-sheet .doc .stamp {
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: none;
    justify-self: start;
    gap: 0 18px;
    width: auto;
    margin-top: var(--space-xs);
  }

  .binder-sheet .doc .stamp dd {
    text-align: left;
  }

  /* A record's facts, two a row as the review's are. */
  .record-sheet .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --inset: 16px;
  }

  h1 {
    font-size: var(--text-headline-phone);
  }

  .page {
    padding-block: var(--space-md) 0;
  }

  /* After .page, which would otherwise take the solo page's space above its sheet. */
  .page-solo {
    padding-block: var(--space-2xl);
  }

  .oc-card {
    --card-inset: var(--space-6);
    padding: var(--space-6);
  }

  .sheet-split {
    padding: 0;
  }

  .sheet-main,
  .sheet-side {
    --card-inset: var(--space-ml);
    padding: 28px var(--space-ml) var(--space-xl);
  }

  /* The ledger's link drops under its label and count. */
  .ledger > li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xs) var(--space-md);
  }

  .ledger a,
  .arrow-link {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: start;
  }

  .ledger-count {
    font-size: var(--text-count-phone);
  }

  /* A Portfolio line: the association's name and its count on one row, then its dates or rows, then its link. */
  .work-lines > li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--space-md);
  }

  .work-name {
    padding-top: 0;
    align-self: baseline;
  }

  .work-facts {
    display: contents;
  }

  .work-count,
  .work-facts > .work-name {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
  }

  .work-facts > span:not(.work-count, .work-name),
  .work-facts > ul,
  .work-lines > li > a {
    grid-column: 1 / -1;
  }

  /* A 14-day line: its date and the association on one row, then the rule's title, then the link. */
  .coming-lines > li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .work-date {
    padding-top: 0;
    align-self: baseline;
  }

  /* A table scrolls to its card's own edge rather than to an invisible line inside it: out by the card's inset (--card-inset, a
     plain card's or a split card's column's), and back in by as much. */
  .oc-card :is(.table-wrap, .oc-table-wrap) {
    margin-inline: calc(-1 * var(--card-inset));
    padding-inline: var(--card-inset);
  }

  /* A table of many columns keeps them wide enough to read, and scrolls sideways as a whole. */
  .table-wide > table {
    min-width: 36rem;
  }

  /*
   * Look A's stacking table (the import page's grid and its column guide) stacks each row into one block on a phone, its cells
   * in their own order. Its parts carry their roles in the markup, so display: block cannot drop them, and the column headings
   * stay in the page for a screen reader, out of sight. Every other table stacks as oc-table--stack, below.
   */
  .table-stack > table,
  .table-stack caption,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
  }

  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table-stack tr {
    padding-block: var(--space-md);
    border-bottom: 1px solid var(--rule);
  }

  .table-stack td {
    padding: 0;
    border: 0;
  }

  .table-stack td + td {
    margin-top: var(--space-xs);
  }

  /* A cell whose words need their heading once the headings are out of sight (the date): the heading, shown before
     it. The empty alternative keeps a screen reader, which hears the column heading already, from hearing it twice. */
  .table-stack td[data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    margin-right: var(--space-xs);
    font-size: var(--text-small);
    color: var(--ink-3);
  }

  /* The import page's column guide: every cell's heading on its own line above its value, as a stacked oc-table sets it. */
  .column-guide td[data-label]::before {
    display: block;
    margin: 0 0 2px;
  }

  th,
  td {
    padding-right: var(--space-sm);
  }

  /*
   * Tidewater's stacked table: each row one block, its cells in their own order, each cell after the first under its column's
   * heading (data-label), which stands above its value. The parts carry their ARIA roles in the markup, so display: block cannot
   * drop the table's meaning, and the column headings stay in the page for a screen reader, out of sight; the label's empty
   * alternative keeps a screen reader, which hears the column heading already, from hearing it twice.
   */
  .oc-table--stack,
  .oc-table--stack caption,
  .oc-table--stack tbody,
  .oc-table--stack tr,
  .oc-table--stack td,
  .oc-table--stack tbody th {
    display: block;
    width: 100%;
  }

  .oc-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .oc-table--stack tr {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--line);
  }

  .oc-table--stack tbody tr:last-child {
    border-bottom: 0;
  }

  .oc-table--stack :is(td, tbody th),
  .oc-table--stack :is(td, th).num {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .oc-table--stack td + td,
  .oc-table--stack th + td {
    margin-top: var(--space-2);
  }

  .oc-table--stack td[data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--ink-3);
  }

  .oc-table--stack.oc-table--columns :is(td, th) + :is(td, th) {
    border-left: 0;
  }

  /* Each value under its name, so a table of three columns still fits a phone. */
  dl.values {
    grid-template-columns: 1fr;
    gap: 0;
  }

  dl.values dd {
    margin-bottom: 6px;
  }

  .mast-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-block: var(--space-lg) 22px;
  }

  /* The name steps down with the screen, so a long word such as "Condominium" fits 320 px without breaking. In the stacked
     row its flex basis would be a height, so it takes none. */
  .sign {
    flex: none;
    font-size: clamp(1.375rem, 7.4vw, var(--text-sign-phone));
  }

  .sign-long,
  .mast-main .workspace-name {
    font-size: clamp(1.25rem, 6.4vw, 1.625rem);
  }

  .mast-main .logo-mark {
    width: 32px;
    height: 32px;
    font-size: var(--text-label);
  }

  .masthead .managed {
    justify-content: flex-start;
    margin-left: 0;
    text-align: start;
  }

  /* The top row's gaps close on a phone, so the section's name, the language control, the person and Sign out keep one row at
     390 px (the design review of #405); below 360 px they close further. */
  .mast-top,
  .workspace-bar {
    column-gap: var(--space-md);
  }

  .mast-who,
  .workspace-user {
    column-gap: 12px;
  }

  .workspace nav a {
    min-height: 42px;
    padding: 0 14px;
    font-size: var(--text-small);
  }

  /* The tabs scroll here. A cover at their start edge, sticky inside the scroller before the tabs and shaped as the end
     edge's (opaque for its first 30%), fades what has scrolled under it. At rest it covers only its own width. */
  .workspace nav::before {
    content: "";
    position: sticky;
    left: 0;
    z-index: 1;
    flex: none;
    width: var(--space-md);
    background: linear-gradient(to right, var(--cover) 30%, transparent);
    pointer-events: none;
  }

  /* The review queue stacks: the queue, the chosen upload's sheet, then the uploads still being checked. */
  .review {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "awaiting"
      "detail"
      "pending";
    gap: var(--space-md);
  }

  .review.review-empty {
    grid-template-areas:
      "awaiting"
      "pending";
  }

  .review-pending {
    margin-top: var(--space-xs);
  }

  /* Each group a white list, as DESIGN.md's phone-width queue is: the one place a list takes the sheet's shadow. */
  .q-list {
    gap: 0;
    overflow: hidden;
    background: var(--sheet);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sheet);
  }

  .q-list > li + li {
    border-top: 1px solid var(--rule);
  }

  .q-item {
    border-radius: 0;
  }

  .q-item[aria-current="true"] {
    margin-right: 0;
    background: var(--ground);
    box-shadow: none;
  }

  .q-item[aria-current="true"] .q-shown {
    display: block;
    margin-top: 6px;
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--ink-2);
  }

  /* Inside the item, since the list clips a ring drawn outside it. */
  .q-item:focus-visible {
    outline-offset: -2px;
  }

  /* A step's words take the sheet's whole width: only its heading sits beside its number. The wrapper has no role of
     its own, so display: contents takes nothing from a screen reader. */
  .step > div {
    display: contents;
  }

  .step > div > * {
    grid-column: 1 / -1;
  }

  .step > div > :is(h2, h3) {
    grid-column: 2;
    align-self: center;
    margin: 0;
  }

  .step > div > p {
    margin-top: var(--space-xs);
  }

  /* Two facts a row where two fit at a readable width, one where they do not (the narrowest phones). */
  .facts {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }

  /* The binder becomes two pages: the index until a divider, "Recently added" or a search is chosen, then the sheet alone
     with its way back (DESIGN.md, "The Drill-In Rule"). */
  .binder-page .binder {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-md);
  }

  .binder-page .binder:not(.binder-open) .binder-sheet,
  .binder-page .binder-open .binder-nav {
    display: none;
  }

  /* The sheet's page keeps the page's one h1, out of sight and in the page, for a screen reader (senior review n9). */
  .binder-page .binder-open .binder-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .binder-page .find {
    margin-right: 0;
  }

  .binder-sheet .results-find {
    display: grid;
    margin: var(--space-md) 0 0;
  }

  /* No sheet stands beside the index here, so nothing needs the room under its last divider. */
  .binder-page .binder-index {
    padding-bottom: 0;
  }

  /* The dividers stay rows on the ground, as the phone comp draws them, never white boxes floating on it (the design
     review of #263): rounded all round, since no sheet stands beside them, and a touch target tall (12 px above and
     below a 20 px line). */
  .binder-index .tab {
    padding-block: var(--space-sm);
    border-radius: var(--radius-md);
  }

  /* The index is a page of its own here, with no sheet to join, so the current divider stays a row like the others. */
  .binder-index .tab[aria-current="page"] {
    margin-right: 0;
    font-weight: inherit;
    color: var(--ink-2);
    background: transparent;
  }

  .binder-index .tab[aria-current="page"]:hover {
    color: var(--ink);
    background: var(--ground-2);
  }

  /* The sheet's way back: the site's small back link (Sheets), shown here at a touch target's height. */
  .binder-sheet .back {
    display: block;
  }

  .binder-sheet .back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--text-label);
    font-weight: 600;
  }

  .binder-sheet .page-h {
    font-size: var(--text-headline-phone);
  }

  /* A record's facts as many a row as fit, and its history's parts one under another. */
  .record-sheet .facts {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }

  .record-sheet .history-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Below 360 px the top row's gaps close up, so the firm's mark, ‹ Portfolio, the person and Sign out keep one line at 320 px. */
@media (max-width: 359px) {
  .mast-top,
  .workspace-bar {
    column-gap: var(--space-sm);
  }

  .mast-who,
  .workspace-user,
  .workspace-bar .workspace-name {
    column-gap: 10px;
  }
}

/* ---------- Preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation: none !important;
  }
}

/* Windows high contrast and the like: the system's colours, with borders where shadows and fills carried shape. */
@media (forced-colors: active) {
  .oc-card,
  .oc-notice,
  .oc-pill,
  .count-pill {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  .oc-select {
    appearance: auto;
    background-image: none;
  }

  /* The band's fill is gone, so a rule marks where it ends; the open tab is boxed and underlined, the others are words. */
  .masthead {
    border-bottom: 1px solid CanvasText;
  }

  .workspace nav a[aria-current="page"] {
    border: 1px solid CanvasText;
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }

  :is(.table-wrap, .oc-table-wrap),
  .workspace nav {
    background: none;
  }

  /* Panels the quiet fill set apart, and the chosen upload and the current divider, which their white set apart. */
  .limits,
  .decline[open],
  .q-item[aria-current="true"],
  .binder-index .tab[aria-current="page"] {
    border: 1px solid CanvasText;
  }
}

/* ---------- The live front page and the site page (S3-12) ---------- */

/*
 * The association's front page once its site is public (ADR-0011 §9; DESIGN.md, "The public front page"), composed from look
 * A's comp (docs/design/look-a/a-front.dc.html): the entrance band in the association's colour, closed by the brass rule,
 * with the whole recorded name over its own brass rule at left and "Managed by" at right, both at the band's foot; then the
 * welcome card, a split sheet that overlaps the band by 28 px, the way into the owners' section in its main column and, in its
 * quieter side column (the comp's .w-side), the "Notices" link for everyone and a Manager's pages; then the footer's small
 * print. Below 1080 px the side column goes under the main one, and below 760 px the band's two parts stack too.
 * No "what owners find inside" list (trace matrix item 22), and no identity badge (compliance's read of the look A comps).
 */
.entrance {
  --focus: var(--on-accent);
  color: var(--on-accent);
  background: var(--accent);
  border-bottom: 3px solid var(--brass);
}

.entrance a {
  color: var(--on-accent);
}

/* The name and "Managed by" share the band's foot. The name never shrinks below its longest word, so where that word leaves
   no room beside it, "Managed by" goes under the name rather than the word breaking. */
.entrance-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-2xl);
  padding-block: 120px var(--space-5xl);
}

.entrance-sign {
  flex: 1 1 24rem;
  max-width: 100%;
  margin: 0;
  /* The band's colour, as .managed b takes it: the h1 rule's --ink would put dark type on the association's colour. */
  color: var(--on-accent);
  font-size: clamp(2.5rem, 6.4vw, 5.5rem);
  font-weight: 600;
  font-variation-settings: 'opsz' 72;
  line-height: 1.02;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* The brass rule under the name, as the band's sign has. */
.entrance-sign::after {
  content: "";
  display: block;
  width: 96px;
  margin-top: 26px;
  border-top: 2px solid var(--brass);
}

/* A name on the sign, as on the band: the rule under it, then the whole recorded name, in the heading, in its own case. */
.entrance-named::after {
  content: none;
}

.entrance-whole {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--on-accent-2);
}

.entrance-whole::before {
  content: "";
  display: block;
  width: 96px;
  margin: 26px 0 var(--space-md);
  border-top: 2px solid var(--brass);
}

/* At the right, its words right-aligned, as the band's "Managed by" is; a measure of its own, so that a long company name or
   the identity notice wraps rather than crowding the name. */
.entrance .managed {
  max-width: 30ch;
  margin: 0 0 0 auto;
  font-size: var(--text-caption);
  color: var(--on-accent-3);
  text-align: end;
}

.entrance .managed b {
  display: block;
  margin-top: var(--space-xxs);
  font-size: var(--text-lede);
  font-weight: 650;
  color: var(--on-accent);
  overflow-wrap: anywhere;
}

/* The identity notice while the company does not hold the badge: the line's second line, in its muted colour, with no box. */
.entrance .managed-note {
  display: block;
  margin-top: var(--space-xs);
}

/* The welcome card: the system's split sheet (.sheet-split, its columns, their rule and their stacking below 1080 px), with
   what the comp adds: the front page's lift, over the band's foot by 28 px, and the comp's paddings. It fills the content
   column, so its main column is about the comp's 760 px beside the 384 px side column. */
.welcome {
  margin-top: -28px;
  margin-bottom: var(--space-4xl);
  box-shadow: var(--shadow-welcome);
}

/* Nothing for the side column (no Notices link, which everyone has while the records pages are on, and no Manager's pages):
   one column at the comp's 760 px, with no empty side column held open. */
.welcome-solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

.welcome-sheet {
  padding: 44px 54px 46px;
}

.welcome-sheet h2 {
  margin: 0;
  font-size: 1.875rem;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.welcome-sheet .lede {
  max-width: 56ch;
  margin-top: 10px;
  font-size: 1.0625rem;
}

/* The page's one call to action, oc-btn--lg (Tidewater: the front page's single call to action), its words centred when they wrap. */
.welcome-sheet .actions {
  margin-top: 28px;
}

.welcome-sheet .actions a {
  text-align: center;
}

/* A line icon on the 24 px grid, 20 px, in the text's colour (DESIGN.md: 1.6 stroke, round caps and joins): the sign-in's lock. */
.ic {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.welcome-sheet .hint {
  max-width: 60ch;
}

/* The card's side column (the comp's .w-side, a .sheet-side): the comp's padding. */
.inside {
  padding: 44px 40px 46px;
}

/* The "Notices" link (trace matrix 22; the design review of #193, 3): first in the side column, for everyone, one ruled row
   at the subhead's size with a chevron, a touch target's height at least. */
.inside-notices {
  margin: 0;
  font-size: var(--text-subhead);
  font-weight: 650;
  line-height: 1.2;
  border-block: 1px solid var(--rule);
}

.inside-notices a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 44px;
  padding-block: var(--space-sm);
  color: var(--ink);
  text-decoration: none;
}

.inside-notices a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.inside-notices a::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}

.inside-notices + nav,
.inside nav + nav {
  margin-top: var(--space-xl);
}

/* A Manager's pages: each list under a section heading (above) as a list of links (the index's look, above), with the
   heading's own space under it, as the Overview's side column has. */
.inside h2 {
  margin-top: 0;
}

.front-foot {
  justify-content: space-between;
}

/* The flag on the Manage pages of a public site whose own conditions no longer all hold (ADR-0011 §9), above the page's sheet. */
.site-flag {
  max-width: none;
}

.site-flag ul {
  margin: var(--space-xs) 0;
  padding-left: var(--space-ml);
}

/* The site page's two steps, each under a heading a step below the page's, on the Take Down page's sheet. */
.site-sheet .site-step {
  margin-top: var(--space-xl);
}

.site-sheet .site-step .oc-notice--attn h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-label);
}

.site-sheet .site-step .oc-notice--attn ul {
  margin: 0;
  padding-left: var(--space-ml);
}

.site-sheet form {
  margin-top: var(--space-lg);
}

.site-sheet .oc-notice {
  margin-top: var(--space-lg);
}

/* Below 1080 px the split sheet puts the side column under the main one, behind its rule, and the card keeps the comp's
   760 px. That rule stands above the Notices link, so the link's row draws no second one, and the column starts closer. */
@media (max-width: 1080px) {
  .welcome {
    max-width: 760px;
  }

  .inside {
    padding-top: var(--space-sm);
  }

  .inside > .inside-notices:first-child {
    border-top: 0;
  }
}

/* The comp's phone: the name, then "Managed by" under it at left; the card's columns at the comp's phone padding. A name with
   a word longer than SiteFrame.ShortWordLength keeps the fluid phone size, so that the word fits 320 px whole (the Whole Name
   Rule); a name of short words (.entrance-short) is set larger, toward the comp's 44 px: about 33 px at 320 and 40 px at 390,
   where the widest seven-letter word, "WWWWWWW", is 280 and 342 px of the 288 and 358 px there. */
@media (max-width: 760px) {
  .entrance-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding-block: var(--space-5xl) var(--space-4xl);
  }

  .entrance-sign {
    flex: none;
    font-size: clamp(1.5rem, 7.4vw, 2.375rem);
  }

  .entrance-short .entrance-sign {
    font-size: clamp(2rem, 10.2vw, 2.75rem);
  }

  .entrance-whole {
    font-size: var(--text-lede);
  }

  .entrance .managed {
    margin-left: 0;
    text-align: start;
  }

  .welcome {
    margin-bottom: var(--space-2xl);
  }

  .welcome-sheet {
    padding: 28px var(--space-ml) 30px;
  }

  .inside {
    padding: var(--space-sm) var(--space-ml) 28px;
  }

  .welcome-sheet h2 {
    font-size: 1.625rem;
  }

  .welcome-sheet .actions a {
    width: 100%;
  }
}

/* ---------- An association's Overview (NAV-3) ---------- */

/*
 * The Manager's landing page on an association's host, look A's reference page (docs/design/look-a/Main.dc.html, and
 * a-phone-overview.dc.html on a phone): one sheet joined to its tab, the ledger of what waits in its main column and, in the
 * side column, where the site stands and the pages the tabs leave out. The components are the sheet's split, the section
 * headings, the ledger and the index (above); the rules here are the comp's own measures on top of them.
 */

/* The ledger and the state box stand 18 px under their section headings, as the comp sets them. The heading's own 12 px
   below it and a smaller top margin here would collapse to 12, not add up. */
.overview .kicker + .ledger {
  margin-top: 18px;
}

/* The state box's words at the comp's 15 px (the design system's state box), its ring still on the first line. */
.overview .oc-notice {
  margin: 18px 0 0;
  font-size: var(--text-label);
}

/* The site page's second line, under the state line while the site is public (compliance's read of #253). */
.overview-site-note {
  max-width: 62ch;
  margin: var(--space-sm) 0 0;
  font-size: var(--text-small);
  color: var(--ink-2);
}

/* The site page and the owners' section: a secondary button and a link with its chevron, side by side where they fit. */
.overview-site-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-ml);
  margin: 18px 0 0;
}

/* The owners' link keeps its 44 px target, but lays out at its words' height, as the comp's link does. */
.overview-site-links .link-cue {
  margin-block: -11px;
}

/* On a phone each line's link drops under its label and count (the shared ledger, above). It keeps its 44 px target, and
   the row closes around it, so its words sit as near the count and the rule as the phone comp draws them. */
@media (max-width: 760px) {
  .overview .ledger > li {
    row-gap: 0;
    padding-bottom: var(--space-sm);
  }
}

/* ---------- The compliance calendar (CAL-09) ---------- */

/*
 * An association's calendar, composed from look A's split sheet, ledger, section headings and ruled tables (there is no
 * calendar comp). Each item's title leads its row; compliance's sentence and the forms follow it, then its law and its
 * sources, quieter, at the table's reading size; its state keeps its word on one line. The next twelve months are one table,
 * each month a heading row over its rows. The facts and lines to check are ruled rows, as the index's are, with no bullets.
 */
.calendar-table .calendar-title {
  margin: 0;
  font-size: 1.03125rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.calendar-table td p.hint,
.calendar-lines .hint {
  max-width: 62ch;
  margin: 6px 0 0;
  font-size: var(--text-small);
  color: var(--ink-2);
  text-wrap: pretty;
}

.calendar-table td p:not(.calendar-title):not(.hint) {
  max-width: 62ch;
  margin: 6px 0 0;
}

.calendar-sources {
  color: var(--ink-3);
}

.calendar-sources a {
  text-decoration-color: var(--rule-strong);
}

/* A month's heading row in the next twelve months' table. */
.calendar-month {
  padding: 28px 0 10px;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

/* A date's page: its facts, then the removal under no second hairline (the facts' last row ends in one). */
.sheet-form dl.facts + .confirm {
  margin-top: var(--space-ml);
  padding-top: 0;
  border-top: 0;
}

.calendar-rules-more {
  margin: var(--space-md) 0 0;
}

.calendar-rules-more > summary {
  min-height: 44px;
  padding-block: 10px;
  font-weight: 600;
  cursor: pointer;
}

.calendar-lines,
.calendar-rules {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.calendar-lines > li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.calendar-lines > li:first-child {
  padding-top: 0;
}

/* Inside a notice the panel's own edge closes the list: no rule and no gap under its last line (the design finish review of #507). */
.oc-notice .calendar-lines > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* The affidavits page's line under its kinds, which names the ones the list leaves out: the To check panel that may follow keeps its
   distance, so the line never reads as the panel's caption (the design finish review of #507). It is its section's last child, so this
   outranks the section's reset (section > :last-child). */
section > .hint.affidavits-left-out {
  margin-bottom: var(--space-6);
}

.calendar-lines > li > p {
  margin: 0;
}

.calendar-lines > li > p + p {
  margin-top: 6px;
}

.calendar-rules > li {
  margin: 4px 0 0;
  font-size: var(--text-small);
}

.calendar .sheet-side h3 {
  margin: var(--space-ml) 0 0;
  font-size: 1rem;
}

/*
 * An open date's reminder (DG-11), last in its row's cell under a hairline: its state at the table's reading size in ink, then the
 * controls, each button its full 44 px, the form for a date's own reminder folded as the calendar's rules are, and what was done,
 * quieter, as the sources are.
 */
.calendar-reminder {
  max-width: 62ch;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}

.calendar-table td .calendar-reminder p.calendar-reminder-state {
  margin: 6px 0 0;
  font-size: var(--text-small);
  color: var(--ink);
}

.calendar-table td .calendar-reminder p.calendar-reminder-state:first-child {
  margin-top: 0;
}

.calendar-reminder-act {
  margin-top: var(--space-sm);
}

.calendar-reminder-buttons {
  display: grid;
  justify-items: start;
  gap: var(--space-xs);
}

.calendar-reminder-snoozes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

.calendar-reminder-add {
  margin-top: var(--space-sm);
}

.calendar-reminder-add > summary {
  min-height: 44px;
  padding-block: 10px;
  font-weight: 600;
  cursor: pointer;
}

.calendar-reminder-add .form-actions {
  margin-top: var(--space-md);
}

/* The number of days, under its choice and in line with its words, as a radio button's hint is (.check-hint). */
.calendar-reminder-days {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin: 6px 0 0 32px;
}

.calendar-table td .calendar-reminder .calendar-reminder-days p {
  margin: 0;
}

.calendar-reminder-days input {
  max-width: 120px;
}

.calendar-reminder-history {
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--ink-3);
}

.calendar-reminder-history > li + li {
  margin-top: 4px;
}

/* On a phone the reminder's buttons stack at the cell's whole width, one size, as a role's actions do (.roles, 600px):
   up to 760px the cell already spans the row and the buttons fit side by side. */
@media (max-width: 600px) {
  .calendar-reminder button {
    width: 100%;
  }
}

/* On a phone a stacked row puts the date beside its state, over what the rule asks; a month's heading row runs across. */
@media (max-width: 760px) {
  .calendar-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
  }

  .calendar-table td {
    min-width: 0;
  }

  .calendar-table td + td {
    margin-top: 0;
  }

  /* At 320 px the date and "Nothing recorded" do not fit one line side by side, so the state's words may wrap here, with the
     wrapping pill's corners (oc-pill--wrap). */
  .calendar-table .oc-pill {
    white-space: normal;
    border-radius: 14px;
  }

  .calendar-table td:nth-child(3) {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
  }

  .calendar-table td:nth-child(2) {
    grid-column: 1 / -1;
  }

  .oc-table--stack th[scope="rowgroup"] {
    display: block;
    grid-column: 1 / -1;
  }
}

/* ---------- The sign and color page ---------- */

/*
 * Where the managing company's staff set the name on the sign and the band's color (the founder's decision of 2026-10-03): the
 * system's form, with each color's radio beside a swatch of the band in that color, its brass foot and all. The label names the
 * color, so no choice rests on the swatch, and forced colors leave the swatch as it is, since it is the color it stands for.
 */
.colour-choices .oc-check {
  align-items: center;
}

.swatch {
  flex: none;
  width: 44px;
  height: 28px;
  background: var(--assoc);
  border-bottom: 3px solid var(--brass);
  border-radius: var(--radius-xs);
  forced-color-adjust: none;
}

/* The log of changes under the form (the founder's decision of 2026-10-04): each entry's time, what changed and who stand one under
   another at every width, so "By" never stands beside only part of an entry (compliance's design note on #301). Scoped to this
   page's sheet: the publishing setting's one-row entries keep .setting-history as it is. */
.sign-setting .setting-history li {
  flex-direction: column;
}

/* ---------- The import page: the template and the column guide ---------- */

/* The template's link, drawn as the secondary button, with its hint under it, before the file field. */
.import-template {
  margin: 0 0 var(--space-xl);
}

.import-template .hint {
  margin: var(--space-xs) 0 0;
}

/* A column's name is what the header must say, so it never breaks inside itself; its name on the page goes under it. The grid's
   cell labels reuse the class for their plain label, over its mark. */
.column-guide .column-name,
.grid-table .column-name {
  display: block;
  overflow-wrap: normal;
}

.column-guide .column-name + .hint,
.grid-table .hint {
  display: block;
}

.column-guide :is(th, td):nth-child(2) {
  white-space: nowrap;
}

/* The example's headings are the file's own names, so they keep their capitals, unspaced, as a spreadsheet shows them. The
   grid's are plain labels in sentence case, as a field's label is. */
.example-row thead th,
.grid-table thead th {
  text-transform: none;
  letter-spacing: 0;
}

.example-row td:first-child {
  min-width: 13rem;
}

/* On a phone the example's name takes less of the width, so more of the row shows before it scrolls; it never stacks. */
@media (max-width: 760px) {
  .example-row td:first-child {
    min-width: 9rem;
  }
}

/* ---------- The import page: the grid ---------- */

/* Rows and columns closer than a list's, so ten rows of eight read as one grid. Each cell holds its own label, so a label
   out of sight never reaches past the grid's box. */
.grid-table :is(th, td) {
  padding-block: var(--space-xs);
  padding-right: var(--space-xs);
}

.grid-table td {
  position: relative;
}

.grid-table tbody th {
  vertical-align: middle;
  white-space: nowrap;
}

/* A heading is the column's plain label, in a field label's ink and weight at the small size, and its mark (Required,
   Optional, Blank for no) is a small tag under it, "Required" drawn a step stronger. */
.grid-head {
  display: block;
  font-size: var(--text-small);
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}

.grid-need {
  display: inline-block;
  margin-top: 6px;
  padding: 0 6px;
  font-size: var(--text-caps);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
}

.grid-need-required {
  color: var(--ink-2);
  border-color: var(--control-line);
}

/* The example row: the guide's example as words, at a hint's size and in its ink, as the example's blank cells are, so it
   reads apart from the cells to fill. */
.grid-example td {
  vertical-align: middle;
  font-size: var(--text-small);
  color: var(--ink-3);
}

/* A cell's label: out of sight where the column headings show, in the page for a screen reader. Its row's name is always
   out of sight, because the row's heading shows it. */
.grid-label,
.grid-label-row {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The sentence about rows that open one by one is shown only where they do (below). */
.grid-reveal-hint {
  display: none;
}

/* A laptop's screen: each column as wide as what it holds rather than its heading, whose label may take up to three lines, and
   the name takes the rest, so the table's least width, 64rem, fits the sheet at 1280 with nothing scrolling (design's ruling on
   #314; the founder kept it for laptops on 2026-10-06). Where the sheet is narrower the grid scrolls inside its box with the
   edge shadow, as a spreadsheet does, and is never squeezed. A list keeps its chevron closer, so the column shows the whole of
   a choice. A wider screen sizes the columns again, below. */
@media (min-width: 761px) {
  .grid-table > table {
    table-layout: fixed;
    min-width: 64rem;
  }

  /* Each column by its class, which names the file's column; Name has no width of its own. */
  .grid-table thead .grid-col-row {
    width: 5rem;
  }

  .grid-table thead .grid-col-Statute {
    width: 8.5rem;
  }

  .grid-table thead .grid-col-UnitCount {
    width: 5rem;
  }

  .grid-table thead .grid-col-HasTimeshareUnits {
    width: 5.5rem;
  }

  .grid-table thead .grid-col-ExternalReference {
    width: 6.5rem;
  }

  .grid-table thead .grid-col-SunbizDocumentNumber {
    width: 7.5rem;
  }

  /* As wide as its label's longest word, "Condominiums" (100 px), which cannot break; "operated" goes under it. */
  .grid-table thead .grid-col-CondominiumCount {
    width: 6.875rem;
  }

  .grid-table thead .grid-col-PortalAddress {
    width: 7.75rem;
  }

  .grid-table :is(input, select) {
    min-width: 0;
  }

  .grid-table select {
    padding-right: 32px;
    background-position: right 8px center;
  }
}

/* On a phone each row is a block under its heading, and each cell's label stands above it, as a field's does: its plain label,
   then its mark. */
@media (max-width: 760px) {
  .grid-table tbody th {
    display: block;
    padding: 0 0 var(--space-xs);
    font-size: var(--text-label);
    font-weight: 650;
    border: 0;
  }

  .grid-table td + td {
    margin-top: var(--space-sm);
  }

  .grid-label {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 6px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .grid-label .hint {
    display: inline;
  }

  /* The example row: each field on one line, its column's plain label before it, closer together than the cells to fill. The
     empty alternative keeps a screen reader, which hears the column heading already, from hearing it twice. */
  .grid-example td[data-label]::before {
    display: inline;
    content: attr(data-label) ": ";
    content: attr(data-label) ": " / "";
    margin: 0;
  }

  .grid-example td {
    padding-block: 0;
  }

  .grid-example td + td {
    margin-top: 4px;
  }

  .grid-example .hint {
    display: inline;
  }

  /* Ten rows of eight make a long page on a phone, so a row shows once it, or the row above it, holds anything typed or
     chosen. The example is the body's first row and Row 1 its second, which always shows. A row that holds something always
     shows, a whole page's written-back rows too. The rows out of sight still post, blank, and are skipped as blank rows are.
     Where :has() is not supported every row shows, and the sentence that says they open one by one does not. A problem's line,
     which the grid's script puts under a row a preview found a problem in, always shows, and the row after it opens as the row
     after a filled one does. */
  @supports selector(:has(*)) {
    .grid-table tbody tr:nth-child(n+3):not(.grid-problem-line):not(:has(input:not(:placeholder-shown), option:checked:not([value=""]))):not(tr:has(input:not(:placeholder-shown), option:checked:not([value=""])) + tr):not(tr:has(input:not(:placeholder-shown), option:checked:not([value=""])) + .grid-problem-line + tr) {
      display: none;
    }

    .grid-reveal-hint {
      display: block;
    }
  }
}

/* ---------- The import page: the grid's frozen header and columns, its script's tools, a preview's problems ---------- */

/*
 * Where the grid scrolls sideways inside its box, on a screen narrower than its least width (64rem) or at a larger text size,
 * its header row and its Row and Name columns stay in sight as it scrolls, as a spreadsheet's frozen panes do (the founder's
 * decision 18 of 2026-10-07). A header row stays in sight only inside a box that scrolls up and down itself, so there the box
 * is at most 80% of the screen's height (80vh), and the rows scroll inside it. Where the grid fits its box, as on a laptop at
 * 1280, none of this applies. The box around the grid's box is the query's container, since a box cannot ask its own width.
 */
@media (min-width: 761px) {
  .grid-box {
    container: grid-box / inline-size;
  }

  @container grid-box (width < 64rem) {
    .grid-table {
      max-height: 80vh;
    }

    /* Sticky cells and collapsed borders paint badly together in Chromium (the rows show through the header), so the frozen
       grid keeps separate borders with no spacing: with bottom borders only it looks the same. */
    .grid-table > table {
      border-collapse: separate;
      border-spacing: 0;
    }

    .grid-table thead :is(th, td),
    .grid-table tbody tr:not(.grid-problem-line) > :nth-child(-n+2) {
      position: sticky;
      z-index: 1;
      background: var(--sheet);
    }

    .grid-table thead :is(th, td) {
      top: 0;
      z-index: 2;
    }

    .grid-table thead :is(th, td):nth-child(-n+2) {
      z-index: 3;
    }

    .grid-table tr > :first-child {
      left: 0;
    }

    /* Name, after the row headings' column (5rem, 4.5rem with DBPR's column), with the edge shadow the rows scroll under. */
    .grid-table tr > :nth-child(2) {
      left: 5rem;
      box-shadow: 10px 0 10px -10px var(--edge-shadow);
    }

    .grid-table-dbpr tr > :nth-child(2) {
      left: 4.5rem;
    }

    /* A problem's sentence stays in sight under its row as the grid scrolls sideways, over the box's edge shadow, as the frozen
       cells are: the line's space under it is the sentence's own, so the shadow shows nowhere around it. */
    .grid-problem-line td {
      padding-bottom: 0;
    }

    .grid-problem-line .field-error {
      position: sticky;
      left: 0;
      padding-bottom: var(--space-xs);
      background: var(--sheet);
    }
  }
}

/* The grid's tools start the table's block: set apart from DBPR's search above as the search is from the hint above it. */
.grid-tools {
  margin-top: var(--space-xl);
}

/* The script's tools over the grid: the switch (once a preview finds a problem), how to paste, and a refused paste's words. */
.grid-tools .oc-check {
  margin-bottom: var(--space-sm);
  font-size: var(--text-label);
}

/* Empty until a paste is refused: an empty block's margins fold into its neighbours', so it takes no room. */
.grid-paste-problem {
  margin: 0 0 var(--space-md);
}

/* A row a preview found a problem in: its heading in the refusal's red, and under it a line of its own with the problem's
   sentence, which the cell it is about names (aria-describedby); that cell is drawn as an invalid control is. */
.grid-row-problem > th {
  color: var(--bad);
}

.grid-row-problem > :is(th, td) {
  border-bottom: 0;
}

.grid-problem-line td {
  padding-top: 0;
}

.grid-problem-line .field-error {
  margin: 0;
}

/* On a phone each row is a block with its own rule under it: a row with a problem keeps its sentence under its last field. */
@media (max-width: 760px) {
  .grid-table tr.grid-row-problem {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* "Show only rows with problems": every other row out of sight, the example kept. They still post, as rows out of sight do. */
.grid-problems-only tbody tr:not(.grid-example, .grid-row-problem, .grid-problem-line) {
  display: none;
}

/* ---------- The import page: DBPR's registry (CAL-13a) ---------- */

/* The search above the grid: its box and its button on one line where they fit, the button never squeezed. */
.registry-search {
  margin: var(--space-xl) 0 0;
}

/* The search's heading sits under the grid's section heading (design's fix 3 on #326): a title, not a kicker. */
.registry-search > h3 {
  font-size: var(--text-title);
}

.registry-find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-ml);
  margin-top: 6px;
}

.registry-find input {
  flex: 1 1 18rem;
}

.registry-results {
  margin-top: var(--space-lg);
}

/* Each result's button names its association for a screen reader alone, so twenty "Add to the table" read apart. */
.registry-add-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.registry-results td:last-child {
  white-space: nowrap;
}

/* A county, a number and a date are read whole: they break at their spaces, if at all, never inside a word. */
.registry-results td {
  overflow-wrap: normal;
}

/* What an add or a fill did, row by row, above the grid it filled. */
.registry-filled ul {
  margin: 0 0 var(--space-sm);
}

/* DBPR's lines beside a row of the preview: DBPR's, set apart from the file's own values above them by a hairline, as the
   binder's ruled lines are, and never by a stripe in the margin (design's fix 2 on #326). */
.dbpr-lines {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}

.dbpr-lines p,
.dbpr-lines ul {
  margin: 0 0 var(--space-xs);
}

/* With the switch on the grid has a ninth column, DBPR's number, and still never scrolls at 1280 (#314's ruling; design's fix 1
   on #326): the table keeps its least width, 64rem, and the room comes from the fixed columns, the row headings 4.5rem,
   ExternalReference 5.5rem, SunbizDocumentNumber, PortalAddress and DbprManagingEntityNumber 6.5rem each, 55.375rem of fixed
   columns in all, so Name, the one flexible column, keeps about 8.625rem. The columns keep their order. */
@media (min-width: 761px) {
  .grid-table-dbpr thead .grid-col-row {
    width: 4.5rem;
  }

  .grid-table-dbpr thead .grid-col-ExternalReference {
    width: 5.5rem;
  }

  .grid-table-dbpr thead .grid-col-SunbizDocumentNumber {
    width: 6.5rem;
  }

  .grid-table-dbpr thead .grid-col-PortalAddress {
    width: 6.5rem;
  }

  .grid-table-dbpr thead .grid-col-DbprManagingEntityNumber {
    width: 6.5rem;
  }
}

/*
 * A wide screen, where the wide sheet has room for it (the founder's choice of 2026-10-06: laptops keep the sizing above): each
 * column as wide as its label's longest word or what it holds, whichever is wider, plus the cell's 8 px and, where the label is
 * the wider, about 6 px more, so two labels never run together (measured in Archivo: "Timeshare units" 105 px, "Condominiums"
 * 100, "Declared units" 95; the list's "718 Condo" 125; a ten-character DBPR number 128; an eleven-character Sunbiz number 137;
 * a 20-character portal address 169). Name, the one flexible column, takes the rest: 22.5rem in a 1600 px sheet. The fixed
 * columns come to 70.75rem, and the table's least width, 88.75rem, keeps Name at 18rem at least, with the DBPR column; without
 * it the fixed columns are 62.25rem and Name keeps 26.5rem at least. The screen's width at which this starts, 101rem (1,616
 * px), leaves the sheet room for that least width with a classic scrollbar beside the page (the sheet's room is the screen less
 * 172 px of insets and padding, less the scrollbar's 17), so the grid never scrolls sideways here at a 16px root font size.
 * This block outranks the DBPR block above only by coming after it; keep it last.
 */
@media (min-width: 101rem) {
  .grid-table > table {
    min-width: 88.75rem;
  }

  .grid-table thead .grid-col-row {
    width: 4.75rem;
  }

  .grid-table thead .grid-col-Statute {
    width: 8.5rem;
  }

  .grid-table thead .grid-col-UnitCount {
    width: 6.875rem;
  }

  .grid-table thead .grid-col-HasTimeshareUnits {
    width: 7.5rem;
  }

  .grid-table thead .grid-col-ExternalReference {
    width: 7rem;
  }

  .grid-table thead .grid-col-SunbizDocumentNumber {
    width: 9.25rem;
  }

  .grid-table thead .grid-col-CondominiumCount {
    width: 7.125rem;
  }

  .grid-table thead .grid-col-PortalAddress {
    width: 11.25rem;
  }

  .grid-table thead .grid-col-DbprManagingEntityNumber {
    width: 8.5rem;
  }
}

/* ---------- The draft list of contracts and bids (BC-11) ---------- */

/* The association's name under the draft's title, so a printed draft says whose it is once the band is left out: at the lede's size and
   in its ink, below the section headings, so it names the association and never reads as a second title (the design finish review of
   #510). */
.contracts-list-sheet .draft-association {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-lede);
  font-weight: 600;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* Each list a step below what comes before it: its heading is its section's first child, which the headings' own step (* + h2) does
   not reach. */
.contracts-list-sheet section {
  margin-top: var(--space-xl);
}

/* The count of the bids left off sits a step under the list it follows. */
.contracts-list-sheet .draft-not-listed {
  margin-top: var(--space-md);
}

/* The draft prints alone: no workspace bar, no masthead, no way back and no site footer, on white, the sheet's own padding, corners and
   shadow dropped, whether or not the browser prints backgrounds. The introduction and the count of bids on contracts with no closing date
   stay on the screen and never reach paper, so a printout uploaded as it is carries the title, the association's name, the draft's date
   and the two lists alone (security's note on #510; the orchestrator's ruling; compliance's R-1 and R-2). Each table prints as a table, never stacked, though a printed page is narrower than the 760 px under which a
   screen stacks it: its headings shown, each cell in its column with its rule and no label of its own, and nothing scrolled. A row is not
   split across pages, and a heading stays with its list. */
@media print {
  body:has(.contracts-list-sheet) .workspace,
  body:has(.contracts-list-sheet) .masthead,
  body:has(.contracts-list-sheet) footer,
  .contracts-list-sheet .back,
  .contracts-list-sheet .lede,
  .contracts-list-sheet .draft-not-listed {
    display: none;
  }

  body:has(.contracts-list-sheet) {
    background: none;
  }

  .contracts-list-sheet {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .contracts-list-sheet .oc-table-wrap {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .contracts-list-sheet .oc-table--stack {
    display: table;
  }

  .contracts-list-sheet .oc-table--stack thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .contracts-list-sheet .oc-table--stack tbody {
    display: table-row-group;
  }

  .contracts-list-sheet .oc-table--stack tr {
    display: table-row;
    padding-block: 0;
    break-inside: avoid;
  }

  .contracts-list-sheet .oc-table--stack td {
    display: table-cell;
    width: auto;
    margin-top: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
  }

  .contracts-list-sheet .oc-table--stack td[data-label]::before {
    content: none;
  }

  .contracts-list-sheet h2 {
    break-after: avoid;
  }
}

/* ---------- The evidence packs (EP-09) ---------- */

/*
 * The staff pages on the association's host (ADR-0020; the plan's EP-09): the packs' list, the form that makes one, and a pack's
 * page, a reading page drawn from the stored content. The pack keeps the reading measure, its sections under the section headings,
 * its records and requests as ruled entries each under its short reference, and its fingerprint whole where it fits and broken
 * anywhere where it does not. Printed, a pack prints alone, with the footer compliance gives every printed page (EP-W-I06).
 */

/* The Overview's link, with compliance's line under it, the row's rule under both. */
.index-noted {
  border-bottom: 1px solid var(--rule);
}

.index > .index-noted > a {
  min-height: 44px;
  padding-bottom: 2px;
  border-bottom: 0;
}

.index-noted > .index-note {
  margin: 0;
  padding: 0 var(--space-lg) var(--space-sm) 0;
  font-size: var(--text-small);
  color: var(--ink-3);
}

/* The form's sections, each a box with its heading as its label and its hint under it. */
.evidence-sections {
  margin: var(--space-lg) 0 var(--space-xl);
}

.evidence-section + .evidence-section {
  margin-top: var(--space-xs);
}

.evidence-section .oc-check > span {
  font-weight: 600;
}

/* The pack: its head, the association's name at the subhead's size, and the firm's line, closed by an ink rule. */
.evidence-pack p,
.evidence-pack ul {
  max-width: var(--measure);
}

.pack-head {
  max-width: var(--measure);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--ink);
}

.pack-head h1 {
  margin-bottom: var(--space-xs);
}

.pack-association {
  margin: 0;
  font-size: var(--text-subhead);
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pack-prepared {
  margin: var(--space-xs) 0 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.pack-wide p {
  margin: 0 0 var(--space-sm);
  color: var(--ink-2);
}

/* The build's commit is 40 characters with no break: it breaks anywhere rather than run past a phone's sheet. */
.pack-about {
  margin: var(--space-md) 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.pack-about li + li {
  margin-top: var(--space-xxs);
}

/* The integrity line: a box on the stamp's paper, framed by the brass line, as the filing stamp is. */
.pack-integrity {
  max-width: var(--measure);
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) 18px;
  background: var(--stamp-bg);
  border: 1px solid var(--brass);
  border-radius: var(--radius-xs);
  font-size: var(--text-small);
  color: var(--ink-2);
}

.pack-integrity p {
  margin: 0 0 var(--space-xs);
}

.pack-integrity > :last-child {
  margin-bottom: 0;
}

.pack-fingerprint {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* A section: its heading, lede, rules and sources, then its blocks. */
.pack-section {
  margin-top: var(--space-xl);
}

.pack-rules,
.pack-sources {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-small);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.pack-section > p:not([class]),
.pack-entry p {
  margin: 0 0 var(--space-sm);
}

.pack-subhead {
  margin: var(--space-lg) 0 var(--space-xs);
  font-size: var(--text-body);
  font-weight: 650;
}

.pack-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-sm) var(--space-lg);
  max-width: var(--measure);
  margin: 0 0 var(--space-sm);
}

.pack-facts dt {
  font-size: var(--text-caption);
  color: var(--ink-3);
}

.pack-facts dd {
  margin: 2px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pack-items {
  margin: 0 0 var(--space-sm);
  padding-left: var(--space-ml);
}

.pack-items li + li {
  margin-top: var(--space-xxs);
}

/* The end notes: each citation once, its number in its own text, so no marker is drawn; a long citation breaks anywhere at 320 px. */
.pack-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

.pack-notes li + li {
  margin-top: var(--space-xxs);
}

/* The listed records and requests: ruled entries under a 2 px ink rule, each under its short reference in ink at 650, as a ruled
   row's title is (brass ink is kept for small capitals). The reference keeps its own case, lower-case hexadecimal as compliance's
   EP-W-H18 has it, so it is never transformed. */
.pack-entries {
  max-width: var(--measure);
  margin: var(--space-md) 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.pack-entry {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.pack-entry .pack-ref {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-label);
  font-weight: 650;
  color: var(--ink);
}

.pack-entry .pack-subhead {
  margin-top: var(--space-sm);
  font-size: var(--text-small);
}

.pack-entry > :last-child,
.pack-entry .pack-items:last-child {
  margin-bottom: 0;
}

.evidence-made-by {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  font-size: var(--text-small);
  color: var(--ink-3);
}

/* The share links (EP-10), under the maker, for staff and never printed: the part's heading as a section's, the list as the packs' list
   is drawn, each link's end in its own cell, and the form's fieldsets as the make form's. */
.evidence-links {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 2px solid var(--ink);
}

.evidence-links .lede,
.evidence-links .hint,
.evidence-links .shown-once {
  max-width: var(--measure);
}

.evidence-links-h {
  margin: var(--space-lg) 0 var(--space-xs);
  font-size: var(--text-body);
  font-weight: 650;
}

/* A maker's address may be one long word: it alone breaks anywhere; every other word stays whole, and "End the link" never breaks. */
.evidence-links-table td {
  overflow-wrap: normal;
}

.evidence-links-table bdi {
  overflow-wrap: anywhere;
}

.evidence-links-table form {
  margin: 0;
}

.evidence-links-table button {
  white-space: nowrap;
}

.evidence-link-form {
  max-width: var(--measure);
}

/* The end column's heading, for a screen reader alone: the cells hold the buttons that name it. */
.evidence-links-unseen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The share link's opening page (EP-10): one form, revealed by its script, the history note under it. */
.evidence-pack-open .form-actions {
  margin-top: var(--space-md);
}

/* EP-W-O10 under the two buttons (EP-10b), set a little apart from them. */
.evidence-pack-open .form-actions + .hint {
  margin-top: var(--space-sm);
}

/* The footer of every printed page (EP-W-I06): never on the screen. */
.pack-print-footer {
  display: none;
}

/* "Download as PDF" above the pack (EP-09b), with compliance's line on the PDF's tagging under it, at the caption's size. */
.pack-download {
  max-width: var(--measure);
  margin: 0 0 var(--space-lg);
}

.pack-download p {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-small);
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .pack-association {
    font-size: var(--text-name);
  }

  .pack-integrity {
    padding-inline: var(--space-sm);
  }
}

/* A pack prints alone: no workspace bar, no masthead, no way back, no notice, no PDF's link, no maker and no site footer; the sheet's
   own padding and rule dropped; and compliance's footer on every printed page: a fixed line at the foot of the page area, which the browser draws
   on every page, with 12 mm kept for it at the foot of each page by the pack's body's padding, repeated on every page's fragment
   (box-decoration-break: clone). An entry is not split across pages where it fits on one, and a heading stays with what follows it. */
@media print {
  @page {
    margin: 16mm 14mm;
  }

  body:has(.evidence-pack-sheet) .workspace,
  body:has(.evidence-pack-sheet) .masthead,
  body:has(.evidence-pack-sheet) footer,
  .evidence-pack-sheet .back,
  .evidence-pack-sheet > .oc-notice:not(.oc-notice--attn, .oc-notice--bad),
  .evidence-pack-sheet .pack-download,
  .evidence-pack-sheet .evidence-made-by,
  .evidence-pack-sheet .evidence-links {
    display: none;
  }

  .evidence-pack-sheet {
    padding: 0;
    box-shadow: none;
  }

  .evidence-pack > .pack-body {
    padding-bottom: 12mm;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .evidence-pack > .pack-print-footer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 8pt;
    color: var(--ink-2);
  }

  .evidence-pack > .pack-print-footer p {
    max-width: none;
    margin: 0;
  }

  .pack-entry,
  .pack-integrity,
  .pack-facts {
    break-inside: avoid;
  }

  .pack-section .kicker,
  .pack-subhead,
  .pack-ref {
    break-after: avoid;
  }
}

/* ---------- The public pages (ADR-0024; PP-03) ---------- */

/*
 * The public frame, on the apex and www. alone: OneCustodian's own band in the ink (.host-platform), naming nobody, then one
 * reading sheet per document, and a footer of the documents served here, the service status page and the support line. A
 * document's words keep the reading measure; its tables may run wider, and scroll inside their region on a narrow screen.
 */
.public-document {
  max-width: 64rem;
}

/* A document of prose alone keeps a narrower sheet, with no blank half beside its words (the design review of #407, fix 7). */
.public-document:not(:has(.table-wrap)) {
  max-width: 48rem;
}

.public-document > :is(p, ul, ol, h2, h3, h4, nav, .oc-notice) {
  max-width: var(--measure);
}

/* A draft's banner, under the title: the notice panel, its two lines tight together. */
.public-document .draft-banner p {
  margin: 0;
}

.public-document .draft-banner p + p {
  margin-top: var(--space-xxs);
}

/* The file's hash: 64 hex digits, which break anywhere rather than run out of the panel on a phone. */
.draft-hash {
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

/* An approved version's line under the title: the version and its dates, quiet. */
.document-version {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
  font-size: var(--text-small);
  color: var(--ink-2);
}

/* A document's table keeps columns wide enough to read, and scrolls inside its region where the screen is narrower. */
.public-document .table-wrap table {
  min-width: 44rem;
}

/* The other versions, at the sheet's foot: each list under its section heading (.kicker), whose hairline makes the break, and the
   system's list of links, held to the measure. */
.document-versions {
  margin-top: var(--space-xl);
}

/* The footer: the documents and the status page in a row that wraps, then the support line, in the footer's small print (as .foot). */
.public-foot {
  padding-block: 28px var(--space-xl);
  font-size: var(--text-caption);
  color: var(--ink-3);
}

.public-foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
}

.public-foot li + li {
  margin-top: 0;
}

/* Each link a 24 px target at least (WCAG 2.2, 2.5.8), its underline kept: running words, not the index's rows. */
.public-foot ul a {
  display: inline-block;
  padding-block: var(--space-xxs);
}

.public-foot p {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The apex's front page in the public frame: the documents under their heading, the index's rows. */
.public-front nav {
  margin-top: var(--space-xl);
}

/* A public page prints as its sheet alone, the draft's banner kept, ruled, since a printer drops the panel's colour. */
@media print {
  .public-page .masthead,
  .public-page .skip-link,
  .public-foot nav {
    display: none;
  }

  .public-page .oc-card {
    padding: 0;
    box-shadow: none;
  }

  .public-page .draft-banner {
    border: 1px solid var(--ink);
  }

  .public-document .table-wrap {
    overflow: visible;
  }

  .public-document .table-wrap table {
    min-width: 0;
  }
}
/* ---------- The help pages (AI-01) ---------- */

/* An article's body, at the reading measure. The label marker, a label the page shows quoted word for word, is set in the body's own
   face at the label's weight, never a code face: the words are the page's own. */
.help-article {
  max-width: var(--measure);
}

.help-article code {
  font-family: inherit;
  font-size: inherit;
  font-weight: 650;
  color: var(--ink);
}

/* ---------- The personal page's calendar link ---------- */

/* Under the daily e-mail, set off by space and a rule across the sheet, as the settings page's second section is. */
section + .calendar-link {
  margin-top: var(--space-4xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--rule);
}

/* The link, shown once (ADR-0018 4.2), in the warning box: its address as text, never a link a browser follows, broken anywhere so it
   never runs out of the box at 320 px, and selected whole by one click or tap, for a reader whose browser cannot copy it with the button. */
.shown-once-value code {
  overflow-wrap: anywhere;
  user-select: all;
}

/* "The link is copied.", a little apart from the button above it. */
.shown-once [data-copied] {
  margin-top: var(--space-xs);
}

/* With no script or no clipboard the copy button stays hidden: its empty row then takes no space. The status line stays, a live region
   (the design finish review of #435, 2). */
.shown-once .form-actions:not(:has(> :not([hidden]))) {
  display: none;
}

/* ---------- The owners' calendar link page (OF-03) ---------- */

/* Its paragraphs at the measure the lede and the hints keep (DESIGN.md: 62 to 70 characters; the design finish review of #435, 3). The h1
   alone: the personal page's calendar link has the same id on an h2, and keeps its own measure. */
h1#calendar-link-title ~ p:not(.hint) {
  max-width: 64ch;
}

/* ---------- The API keys page (API-04) ---------- */

/* Its two sections, the list then the form, each headed a step below the page's title: the first set off from the lede by space, the
   second by a rule across the sheet, as the settings page's two are. */
.api-keys-list {
  margin-top: var(--space-xl);
}

.api-key-make {
  margin-top: var(--space-4xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--rule);
}

.api-keys-list > h2,
.api-key-make > h2 {
  margin-top: 0;
  font-size: var(--text-subhead);
  line-height: 1.25;
}

/* A live key's End button, under "Not ended" in the same cell, a little apart from it (the design finish review of #433). */
.api-keys td form {
  margin-top: var(--space-xs);
}

/* On a desktop the narrow "Last used" column keeps its heading and "Not used yet" on one line each; on a phone the rows stack. */
@media (min-width: 761px) {
  .api-keys th:nth-child(4),
  .api-keys td:nth-child(4) {
    white-space: nowrap;
  }
}