/* blocks.css — THE PAGE GRAMMAR'S BLOCKS (APP-FACTORY.md §5 "The page grammar", "Responsive behavior"; [AF-36],
   [AF-40], [AF-64]; C6 p-grammar; AF-DESIGN-SYSTEM.md §3.1–§3.2, §3.6; [AF-111], [AF-112], [AF-114]; d-shell, d-tokens).
   One sheet for the blocks' structure: every value a semantic or component token (AF-TOKENS.md), so a theme is a theme;
   the FOUR breakpoints are CONTAINER queries on each block's own width (the `block` container every .af-block root
   declares), on the page's (`af-page`, the .af-page root) or on the shell's (`shell`) — never a width media query. The
   compact rule under each block is that block's definition of itself at compact ([AF-36]), the extra-wide rule its
   definition at 1440 and up ([AF-111] (2)), stated once and inherited by every page in every app. Input modality rides
   the one media feature that is not a width — `(pointer: coarse)` — so a touch screen gets the touch floor at every width
   (§3.2). `.af-*` is the grammar's prefix; `.syn-*` is the carried component vocabulary the blocks compose. The host
   links this sheet after components.css. */

.af-page { display: block; }   /* the container is app.css's one declaration ([AF-435]) */
.af-block { container: block / inline-size; display: block; min-width: 0; }
.af-block + .af-block { margin-top: var(--af-block-block-margin-top, var(--space-4)); }
.af-block-title { margin: var(--af-block-title-margin, 0 0 var(--block-title-gap)); font: var(--af-block-title-font, var(--type-heading)); color: var(--af-block-title-color, var(--text-ink)); overflow-wrap: anywhere; }   /* a body block's own heading ([AF-154]): the heading rung, no card around it */
.af-block[inert] { opacity: var(--af-block-inert-opacity, .6); }
.af-sr-only { position: absolute; width: var(--af-sr-only-width, var(--shape-border-width)); height: var(--af-sr-only-height, var(--shape-border-width)); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- the shell as a block (§3.1): nav and main in a grid whose areas the variant names, on logical properties ------- */
.af-appshell { container: shell / inline-size; min-height: 100vh; isolation: isolate; }
/* AF-2026 ([AF-2056]; [AF-1027]): THE CANVAS CARRIES THE APP'S MARK — one place for every page of either renderer: the
   theme's --canvas-image (one background layer, `none` by the package) drawn on the shell's canvas beneath everything the shell
   holds, so every plane covers it; fixed to the viewport, still, no node (decoration: nothing to hide from assistive technology),
   no hit target. A colour written into the layer is cleared, and a layer the browser cannot read draws nothing: the canvas's colour
   is surface.canvas alone. */
.af-appshell::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--canvas-image, none); background-attachment: fixed; background-color: transparent; }
.af-appshell-grid { display: grid; min-height: 100vh; grid-template-areas: "nav main"; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.af-appshell-nav { grid-area: nav; min-width: 0; }
.af-appshell-main { grid-area: main; min-width: 0; position: relative; }
.af-appshell[data-variant="rail-end"] > .af-appshell-grid { grid-template-areas: "main nav"; grid-template-columns: minmax(0, 1fr) auto; }
/* p-door (row 138; [AF-318]): THE ASIDE at the far edge beside the main and after the nav, whatever its placement — the
   grid gains the area only when the slot is filled; below wide the slot leaves the flow (what it holds is a sheet). */
.af-appshell-aside { grid-area: aside; min-width: 0; }
/* d-rail-800 (row 222; [AF-453]): the aside's column is a wide fact. Below wide the slot is out of the flow, and these rules outranked the
   per-breakpoint areas: a theme whose wide is a rail kept "main nav aside" under its medium top bar, the bar's row took the main's width, the page wrapped by the letter. */
@container shell (width >= 1024px) {
    .af-appshell > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "nav main aside"; grid-template-columns: auto minmax(0, 1fr) auto; }
    .af-appshell[data-variant="rail-end"] > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "main nav aside"; grid-template-columns: minmax(0, 1fr) auto auto; }
    .af-appshell[data-variant="top-bar"] > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "nav nav" "main aside"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
    .af-appshell[data-variant="bottom-bar"] > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "main aside" "nav nav"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; }
}
@container shell (max-width: 1023px) {
    .af-appshell-aside { display: contents; }
}
.af-appshell[data-variant="top-bar"] > .af-appshell-grid, .af-appshell[data-variant="bottom-bar"] > .af-appshell-grid { grid-template-columns: minmax(0, 1fr); }
.af-appshell[data-variant="top-bar"] > .af-appshell-grid { grid-template-areas: "nav" "main"; grid-template-rows: auto minmax(0, 1fr); }
.af-appshell[data-variant="bottom-bar"] > .af-appshell-grid { grid-template-areas: "main" "nav"; grid-template-rows: minmax(0, 1fr) auto; }
/* a bar lays the carried rail horizontally; the bottom bar is the grid's last row, never positioned over the page ([AF-138]:
   a sticky bar's links overlapped the content at the viewport's bottom, A2's target-size). At compact the grid is the
   viewport's height and the main scrolls inside it (the compact scroll container, below), so the bar is pinned in the thumb
   zone with nothing beneath it (§3.6 #1; p-shell2, [AF-138] amended). */
.af-appshell[data-variant="top-bar"] .af-appshell-nav .syn-rail, .af-appshell[data-variant="bottom-bar"] .af-appshell-nav .syn-rail { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--af-appshell-variant-top-bar-appshell-nav-rail-gap, var(--space-2)); padding: var(--af-appshell-variant-top-bar-appshell-nav-rail-padding, var(--space-2) var(--space-4)); border-inline-end: 0; border-block-end: var(--af-appshell-variant-top-bar-appshell-nav-rail-border-block-end, var(--shape-border-width) solid var(--rule-page)); overflow: visible; }
.af-appshell[data-variant="top-bar"] .af-appshell-nav .aptive-rail-group, .af-appshell[data-variant="bottom-bar"] .af-appshell-nav .aptive-rail-group { display: contents; }   /* d-harbor (2): the groups' entries flow as one wrapping row of the bar */
.af-appshell[data-variant="top-bar"] .af-appshell-nav .syn-rail-spacer, .af-appshell[data-variant="bottom-bar"] .af-appshell-nav .syn-rail-spacer { display: none; }
.af-appshell[data-variant="top-bar"] .af-appshell-nav .syn-rail-head, .af-appshell[data-variant="bottom-bar"] .af-appshell-nav .syn-rail-head { padding: 0; }
.af-appshell[data-variant="top-bar"] .af-appshell-nav .syn-rail-item, .af-appshell[data-variant="bottom-bar"] .af-appshell-nav .syn-rail-item { padding: var(--af-appshell-variant-top-bar-appshell-nav-rail-item-padding, var(--space-1) var(--space-2)); }
.af-appshell[data-variant="top-bar"] .af-appshell-nav .aptive-rail-grouplabel, .af-appshell[data-variant="bottom-bar"] .af-appshell-nav .aptive-rail-grouplabel { padding: var(--kit-variant-top-bar-appshell-nav-aptive-rail-grouplabel-padding, 0 var(--space-1) 0 var(--space-3)); }
.af-appshell[data-variant="top-bar"] .af-appshell-nav .syn-rail-foot, .af-appshell[data-variant="bottom-bar"] .af-appshell-nav .syn-rail-foot { display: flex; width: auto; flex: none; border: 0; padding: 0; margin: 0; }
.af-appshell[data-variant="bottom-bar"] .af-appshell-nav .syn-rail { border-block-end: 0; border-block-start: var(--af-appshell-variant-bottom-bar-appshell-nav-rail-border-block-start, var(--shape-border-width) solid var(--rule-page)); }
.af-appshell[data-variant="rail-start"] .af-appshell-nav .syn-rail { border-inline-end: var(--af-appshell-variant-rail-start-appshell-nav-rail-border-inline-end, var(--shape-border-width) solid var(--rule-page)); border-right: 0; }
.af-appshell[data-variant="rail-end"] .af-appshell-nav .syn-rail { border-inline-start: var(--af-appshell-variant-rail-end-appshell-nav-rail-border-inline-start, var(--shape-border-width) solid var(--rule-page)); border-right: 0; }
/* the chrome per breakpoint is the theme's (ShellBlock.Defaults, stamped data-at-*): the same four shapes, keyed on the shell's own width */
/* p-public ([AF-211], [AF-212]): THE PUBLIC DENSITY'S CHROME — a head (the app's name, the identity as a name) and a
   bar of the page's navGroup entries (four at most, More for the rest), each its glyph over its word, the active one by its word's weight
   and a tinted pill; a bottom bar at compact puts the head above the page and the entries beneath it (the nav slot's children are the
   grid's items); a top bar lays the head and the entries in one row; a rail stacks them. Every entry stands at the touch floor. */
.af-appshell[data-density="public"] .af-appshell-nav { display: flex; flex-direction: column; }
.af-bar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--af-bar-head-gap, var(--space-3)); padding: var(--af-bar-head-padding, var(--space-1) var(--space-4)); min-block-size: var(--target-min); background: var(--af-bar-head-background, var(--surface-rail)); border-block-end: var(--af-bar-head-border-block-end, var(--shape-border-width) solid var(--rule-page)); }
.af-bar-brand { font: var(--af-bar-brand-font, var(--type-heading)); color: var(--af-bar-brand-color, var(--text-ink)); text-decoration: var(--af-bar-brand-text-decoration, none); }
/* AF-2109 ([AF-2222]; Harbor's Brand entry): THE APP'S MARK where the name was (the host's Brand) — each of the app's images stands at
   the widths it is stamped for: AF-2280 ([AF-1070]) the stacked lock-up from medium up in the bar and the rail (the one-line lock-up the
   sign-in's and the door's, `is-whole`, at every width), the symbol at compact and in the folded rail; an app with no stacked file keeps
   AF-2109's rule (the lock-up at wide, the wordmark at medium and in a rail); the dark scheme takes the dark file. A lock-up stands by its
   METRICS (`is-measured`, its fit stamped by Brand from the theme's metrics.json): sized by its cap, its box the span from the cap top to
   the last baseline — the file above and below hangs outside it — so whatever centres the box centres the letters, never a nudge. The
   knobs: the head's cap 20 px ([AF-1075] (2): the stacked form's minimum), the whole lock-up's 26, the symbol's box 24. */
.af-brand { display: flex; align-items: center; min-inline-size: 0; --af-brand-cap: var(--af-brand-head-cap, 20px); }   /* a block, never on a line's baseline: its box is the span whatever holds it */
.af-brand.is-whole { --af-brand-cap: var(--af-brand-whole-cap, 26px); }
.af-brand-mark { display: none; block-size: var(--af-brand-symbol-block-size, 24px); inline-size: auto; }
.af-brand-mark.is-measured { block-size: var(--af-brand-mark-is-measured-block-size, calc(var(--af-brand-cap) * (var(--af-brand-above) + var(--af-brand-span) + var(--af-brand-below)))); margin-block: var(--af-brand-mark-is-measured-margin-block, calc(var(--af-brand-cap) * var(--af-brand-above) * -1) calc(var(--af-brand-cap) * var(--af-brand-below) * -1)); }
.af-brand-mark.is-wide { display: block; }
@container shell (width < 640px) { .af-brand-mark.is-wide { display: none; } .af-brand-mark.is-compact { display: block; } }
@container shell (width >= 640px) and (width < 1024px) { .af-brand-mark.is-wide { display: none; } .af-brand-mark.is-medium { display: block; } }
@container shell (width >= 1024px) and (width < 1440px) {
    :where(.af-appshell[data-at-wide^="rail"] .syn-rail) .af-brand-mark.is-wide { display: none; }
    :where(.af-appshell[data-at-wide^="rail"] .syn-rail) .af-brand-mark.is-medium { display: block; }
}
@container shell (width >= 1440px) {
    :where(.af-appshell[data-at-extra-wide^="rail"] .syn-rail) .af-brand-mark.is-wide { display: none; }
    :where(.af-appshell[data-at-extra-wide^="rail"] .syn-rail) .af-brand-mark.is-medium { display: block; }
}
.syn-rail.is-collapsed .syn-rail-head:has(.af-brand) { display: flex; justify-content: center; }   /* the folded rail keeps a head only for a mark; with none it stays the rail's own (Synergy's) */
.syn-rail.is-collapsed .syn-rail-head:has(.af-brand) .aptive-rail-mark { display: none; }
.syn-rail.is-collapsed .af-brand-mark { display: none; }
.syn-rail.is-collapsed .af-brand-mark.is-folded { display: block; }
:root.dark .af-brand-mark.is-light, :root:not(.dark) .af-brand-mark.is-dark { display: none; }
.af-bar-who { display: inline-flex; align-items: center; gap: var(--af-bar-who-gap, var(--space-2)); }
.af-bar-identity { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--target-min); min-inline-size: var(--target-min); font: var(--af-bar-identity-font, var(--type-body)); color: var(--af-bar-identity-color, var(--text-muted)); text-decoration: var(--af-bar-identity-text-decoration, none); }
/* p-public2 (row 58; Ken's ruling (13)): Sign out — a link in the accent beside the name, 48 px tall (the Public floor is 44; his word for this link is 48), no glyph, the only link in the chrome */
.af-bar-signout { display: inline-flex; align-items: center; min-block-size: max(var(--target-min), 48px); padding-inline: var(--af-bar-signout-padding-inline, var(--space-2) 0); color: var(--af-bar-signout-color, var(--accent-action)); font: var(--af-bar-signout-font, var(--type-body)); font-weight: var(--af-bar-signout-font-weight, var(--type-heading-weight)); text-decoration: var(--af-bar-signout-text-decoration, none); }
.af-bar { background: var(--af-bar-background, var(--surface-rail)); }
.af-bar-entries { list-style: none; margin: 0; padding: var(--af-bar-entries-padding, var(--space-1) var(--space-2)); display: flex; gap: var(--af-bar-entries-gap, var(--space-1)); }
.af-bar-entries > li { flex: 1 1 0; min-width: 0; }
.af-bar-entry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--af-bar-entry-gap, var(--space-1)); min-block-size: var(--target-min); padding: var(--af-bar-entry-padding, var(--space-1) var(--space-2)); border-radius: var(--af-bar-entry-border-radius, var(--shape-radius-control)); color: var(--af-bar-entry-color, var(--text-body)); text-decoration: var(--af-bar-entry-text-decoration, none); font: var(--af-bar-entry-font, var(--type-caption)); }
.af-bar-entry.is-active { background: var(--af-bar-entry-is-active-background, none); color: var(--af-bar-entry-is-active-color, var(--text-ink)); cursor: default; }   /* [AF-1039]: the current entry is a place, not an act — ink, bold, its rule in ink; never the accent */
.af-bar-entry.is-active .af-bar-word { font-weight: var(--af-bar-entry-is-active-bar-word-font-weight, var(--type-heading-weight)); }
.af-bar-entry[href]:hover, .af-bar-entry[href]:focus-visible { color: var(--af-bar-entry-href-hover-color, var(--accent-action)); }   /* [AF-1039] (2): the other entries are links, the accent on hover and focus alone */
.af-bar-word { max-inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-bar-more { position: relative; }
.af-bar-more > summary { list-style: none; cursor: pointer; }
.af-bar-more > summary::-webkit-details-marker { display: none; }
.af-bar-more > ul { list-style: none; margin: 0; padding: var(--af-bar-more-ul-padding, var(--space-2)); position: absolute; inset-inline-end: 0; inset-block-end: 100%; min-inline-size: var(--af-bar-more-ul-min-inline-size, var(--panel-width-narrow)); background: var(--af-bar-more-ul-background, var(--surface-raised)); border: var(--af-bar-more-ul-border, var(--shape-border-width) solid var(--border-default)); border-radius: var(--af-bar-more-ul-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-bar-more-ul-box-shadow, var(--elevation-overlay)); z-index: 10; }
.af-bar-more > ul .af-bar-entry { flex-direction: row; justify-content: flex-start; font: var(--af-bar-more-ul-bar-entry-font, var(--type-body)); }
.af-appshell[data-density="public"][data-variant="top-bar"] .af-appshell-nav { flex-direction: row; flex-wrap: wrap; align-items: center; }
.af-appshell[data-density="public"][data-variant="top-bar"] .af-bar-head { flex: none; border-block-end: 0; }
.af-appshell[data-density="public"][data-variant="top-bar"] .af-bar { flex: 1 1 auto; }
.af-appshell[data-density="public"][data-variant="top-bar"] .af-bar-entries > li { flex: none; }
.af-appshell[data-density="public"][data-variant="top-bar"] .af-bar-entry { flex-direction: row; font: var(--af-appshell-density-public-variant-top-bar-bar-entry-font, var(--type-body)); }
.af-appshell[data-density="public"][data-variant="top-bar"] .af-bar-more > ul { inset-block-end: auto; inset-block-start: 100%; }

@container shell (width < 640px) {
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] > .af-appshell-grid { grid-template-areas: "band" "head" "main" "nav"; grid-template-rows: auto auto minmax(0, 1fr) auto; }
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-appshell-nav { display: contents; }
    /* row 240 ([AF-511]; J2a my-light-360, J2b my-documents-light-360): the band, then the head on the page's own canvas with no rule, then the page, then the bar under a hairline */
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-band { grid-area: band; }
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-head { grid-area: head; background: none; border-block-end: 0; }
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar { grid-area: nav; border-block-start: var(--af-appshell-density-public-at-compact-bottom-bar-bar-at-to640-border-block-start, var(--shape-border-width) solid var(--border-hairline)); }
    /* row 219 ([AF-437] (4); J2b's 360): a bottom bar's entries are its equal tiles, the glyph over the word — the top-bar rules above, unscoped, sized them to their content and drew the page 26 px past a 360 phone */
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-entries > li { flex: 1 1 0; }
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-entry { flex-direction: column; font: var(--kit-appshell-density-public-at-compact-bottom-bar-bar-entry-at-to640-font, var(--type-caption)); }
    /* row 240 ([AF-512]; every J2b comp, the only comps of the three-tab bar): the active pill is on the glyph, the word beneath it in the accent; the tile draws no fill */
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-entries > li > .af-bar-entry, .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-more > summary { padding: 0; }
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-entries > li > .af-bar-entry.is-active, .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-more > summary.is-active { background: none; }
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-entries > li > .af-bar-entry > .syn-icon, .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-more > summary > .syn-icon { box-sizing: content-box; padding: var(--kit-at-compact-bottom-bar-bar-entries-li-bar-entry-icon-at-to640-padding, var(--space-1) var(--space-4)); border-radius: var(--kit-at-compact-bottom-bar-bar-entries-li-bar-entry-icon-at-to640-border-radius, var(--shape-radius-pill)); }
    .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-entries > li > .af-bar-entry.is-active > .syn-icon, .af-appshell[data-density="public"][data-at-compact="bottom-bar"] .af-bar-more > summary.is-active > .syn-icon { background: var(--kit-bottom-bar-bar-entries-li-bar-entry-is-active-icon-at-to640-background, none); }
    .af-appshell[data-density="public"][data-at-compact="top-bar"] .af-appshell-nav { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .af-appshell[data-at-compact="rail-start"] > .af-appshell-grid { grid-template-areas: "nav main"; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .af-appshell[data-at-compact="rail-end"] > .af-appshell-grid { grid-template-areas: "main nav"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); }
    .af-appshell[data-at-compact="top-bar"] > .af-appshell-grid { grid-template-areas: "nav" "main"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .af-appshell[data-at-compact="bottom-bar"] > .af-appshell-grid { grid-template-areas: "main" "nav"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--af-appshell-at-compact-top-bar-appshell-nav-rail-at-to640-gap, var(--space-2)); padding: var(--af-appshell-at-compact-top-bar-appshell-nav-rail-at-to640-padding, var(--space-2) var(--space-4)); border-inline: 0; border-block-end: var(--af-appshell-at-compact-top-bar-appshell-nav-rail-at-to640-border-block-end, var(--shape-border-width) solid var(--rule-page)); overflow: visible; }
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .aptive-rail-group, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .aptive-rail-group { display: contents; }   /* d-harbor (2): the groups' entries flow as one wrapping row of the bar */
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail-spacer, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-spacer { display: none; }
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail-head, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-head { padding: 0; }
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail-item, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-item { padding: var(--af-appshell-at-compact-top-bar-appshell-nav-rail-item-at-to640-padding, var(--space-1) var(--space-2)); }
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail-item, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-item { min-inline-size: var(--target-min); min-block-size: var(--target-min); justify-content: center; }   /* the compact bar: icons at the touch floor */
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail-label, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-label, .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .aptive-rail-grouplabel, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .aptive-rail-grouplabel { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; clip-path: inset(50%); }   /* the title stays for assistive technology */
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .aptive-rail-grouplabel, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .aptive-rail-grouplabel { padding: var(--kit-at-compact-top-bar-appshell-nav-aptive-rail-grouplabel-at-to640-padding, 0 var(--space-1) 0 var(--space-3)); }
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail-foot, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-foot { display: flex; width: auto; flex: none; border: 0; padding: 0; margin: 0; }
    .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail { border-block-end: 0; border-block-start: var(--af-appshell-at-compact-bottom-bar-appshell-nav-rail-at-to640-border-block-start, var(--shape-border-width) solid var(--rule-page)); }
    .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail-foot-id, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-foot-id, .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail-spacer, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-spacer { display: none; }   /* p-top-bar (row 181): the compact bar keeps the avatar, its menu the way to Sign out */
    .af-appshell[data-at-compact="top-bar"] .af-appshell-n .syn-rail-head, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-n .syn-rail-head, .af-appshell[data-at-compact="top-bar"] .af-appshell-nav .syn-rail-head, .af-appshell[data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-head { padding: 0; }
    /* the compact scroll container (p-shell2; [AF-138] amended; §3.6 #1): under a bottom bar the grid is the viewport's height
       (dvh where the browser has it, so the phone's retracting chrome never hides the bar), the main is the scroller and the
       bar is the grid's row outside it — pinned, in view at every scroll position, over nothing */
    .af-appshell[data-at-compact="bottom-bar"] > .af-appshell-grid { height: 100vh; height: 100dvh; min-height: 0; }
    .af-appshell[data-at-compact="bottom-bar"] > .af-appshell-grid > .af-appshell-main { overflow-y: auto; overscroll-behavior: contain; }
}
@container shell (width >= 640px) and (width < 1024px) {
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-appshell-nav { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-head { flex: none; border-block-end: 0; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar { flex: 1 1 auto; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-entries > li { flex: none; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-entry { flex-direction: row; font: var(--af-appshell-density-public-at-medium-top-bar-bar-entry-at-from640-to1024-font, var(--type-body)); }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-more > ul { inset-block-end: auto; inset-block-start: 100%; }
    .af-appshell[data-at-medium="rail-start"] > .af-appshell-grid { grid-template-areas: "nav main"; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .af-appshell[data-at-medium="rail-end"] > .af-appshell-grid { grid-template-areas: "main nav"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); }
    .af-appshell[data-at-medium="top-bar"] > .af-appshell-grid { grid-template-areas: "nav" "main"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .af-appshell[data-at-medium="bottom-bar"] > .af-appshell-grid { grid-template-areas: "main" "nav"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail, .af-appshell[data-at-medium="bottom-bar"] .af-appshell-nav .syn-rail { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-at-from640-to1024-gap, var(--space-2)); padding: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-at-from640-to1024-padding, var(--space-2) var(--space-4)); border-inline: 0; border-block-end: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-at-from640-to1024-border-block-end, var(--shape-border-width) solid var(--rule-page)); overflow: visible; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .aptive-rail-group, .af-appshell[data-at-medium="bottom-bar"] .af-appshell-nav .aptive-rail-group { display: contents; }   /* d-harbor (2): the groups' entries flow as one wrapping row of the bar */
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-spacer, .af-appshell[data-at-medium="bottom-bar"] .af-appshell-nav .syn-rail-spacer { display: none; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-head, .af-appshell[data-at-medium="bottom-bar"] .af-appshell-nav .syn-rail-head { padding: 0; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-item, .af-appshell[data-at-medium="bottom-bar"] .af-appshell-nav .syn-rail-item { padding: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-item-at-from640-to1024-padding, var(--space-1) var(--space-2)); }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .aptive-rail-grouplabel, .af-appshell[data-at-medium="bottom-bar"] .af-appshell-nav .aptive-rail-grouplabel { padding: var(--kit-at-medium-top-bar-appshell-nav-aptive-rail-grouplabel-at-from640-to1024-padding, 0 var(--space-1) 0 var(--space-3)); }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .aptive-rail-grouplabel, .af-appshell[data-at-medium="bottom-bar"] .af-appshell-nav .aptive-rail-grouplabel { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; clip-path: inset(50%); }   /* at medium the bar keeps its rows for the entries; the group names stay for assistive technology */
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-foot, .af-appshell[data-at-medium="bottom-bar"] .af-appshell-nav .syn-rail-foot { display: flex; width: auto; flex: none; border: 0; padding: 0; margin: 0; }
    .af-appshell[data-at-medium="bottom-bar"] .af-appshell-nav .syn-rail { border-block-end: 0; border-block-start: var(--af-appshell-at-medium-bottom-bar-appshell-nav-rail-at-from640-to1024-border-block-start, var(--shape-border-width) solid var(--rule-page)); }
}
@container shell (width >= 1024px) and (width < 1440px) {
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-appshell-nav { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-head { flex: none; border-block-end: 0; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar { flex: 1 1 auto; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-entries > li { flex: none; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-entry { flex-direction: row; font: var(--af-appshell-density-public-at-wide-top-bar-bar-entry-at-from1024-to1440-font, var(--type-body)); }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-more > ul { inset-block-end: auto; inset-block-start: 100%; }
    .af-appshell[data-at-wide="rail-start"] > .af-appshell-grid { grid-template-areas: "nav main"; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .af-appshell[data-at-wide="rail-end"] > .af-appshell-grid { grid-template-areas: "main nav"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); }
    .af-appshell[data-at-wide="top-bar"] > .af-appshell-grid { grid-template-areas: "nav" "main"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .af-appshell[data-at-wide="bottom-bar"] > .af-appshell-grid { grid-template-areas: "main" "nav"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail, .af-appshell[data-at-wide="bottom-bar"] .af-appshell-nav .syn-rail { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-at-from1024-to1440-gap, var(--space-2)); padding: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-at-from1024-to1440-padding, var(--space-2) var(--space-4)); border-inline: 0; border-block-end: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-at-from1024-to1440-border-block-end, var(--shape-border-width) solid var(--rule-page)); overflow: visible; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .aptive-rail-group, .af-appshell[data-at-wide="bottom-bar"] .af-appshell-nav .aptive-rail-group { display: contents; }   /* d-harbor (2): the groups' entries flow as one wrapping row of the bar */
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-spacer, .af-appshell[data-at-wide="bottom-bar"] .af-appshell-nav .syn-rail-spacer { display: none; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-head, .af-appshell[data-at-wide="bottom-bar"] .af-appshell-nav .syn-rail-head { padding: 0; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-item, .af-appshell[data-at-wide="bottom-bar"] .af-appshell-nav .syn-rail-item { padding: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-item-at-from1024-to1440-padding, var(--space-1) var(--space-2)); }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .aptive-rail-grouplabel, .af-appshell[data-at-wide="bottom-bar"] .af-appshell-nav .aptive-rail-grouplabel { padding: var(--kit-at-wide-top-bar-appshell-nav-aptive-rail-grouplabel-at-from1024-to1440-padding, 0 var(--space-1) 0 var(--space-3)); }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-foot, .af-appshell[data-at-wide="bottom-bar"] .af-appshell-nav .syn-rail-foot { display: flex; width: auto; flex: none; border: 0; padding: 0; margin: 0; }
    .af-appshell[data-at-wide="bottom-bar"] .af-appshell-nav .syn-rail { border-block-end: 0; border-block-start: var(--af-appshell-at-wide-bottom-bar-appshell-nav-rail-at-from1024-to1440-border-block-start, var(--shape-border-width) solid var(--rule-page)); }
}
@container shell (width >= 1440px) {
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-appshell-nav { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-head { flex: none; border-block-end: 0; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar { flex: 1 1 auto; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-entries > li { flex: none; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-entry { flex-direction: row; font: var(--kit-appshell-density-public-at-extra-wide-top-bar-bar-entry-at-from1440-font, var(--type-body)); }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-more > ul { inset-block-end: auto; inset-block-start: 100%; }
    .af-appshell[data-at-extra-wide="rail-start"] > .af-appshell-grid { grid-template-areas: "nav main"; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .af-appshell[data-at-extra-wide="rail-end"] > .af-appshell-grid { grid-template-areas: "main nav"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); }
    .af-appshell[data-at-extra-wide="top-bar"] > .af-appshell-grid { grid-template-areas: "nav" "main"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .af-appshell[data-at-extra-wide="bottom-bar"] > .af-appshell-grid { grid-template-areas: "main" "nav"; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail, .af-appshell[data-at-extra-wide="bottom-bar"] .af-appshell-nav .syn-rail { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-at-from1440-gap, var(--space-2)); padding: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-at-from1440-padding, var(--space-2) var(--space-4)); border-inline: 0; border-block-end: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-at-from1440-border-block-end, var(--shape-border-width) solid var(--rule-page)); overflow: visible; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .aptive-rail-group, .af-appshell[data-at-extra-wide="bottom-bar"] .af-appshell-nav .aptive-rail-group { display: contents; }   /* d-harbor (2): the groups' entries flow as one wrapping row of the bar */
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-spacer, .af-appshell[data-at-extra-wide="bottom-bar"] .af-appshell-nav .syn-rail-spacer { display: none; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-head, .af-appshell[data-at-extra-wide="bottom-bar"] .af-appshell-nav .syn-rail-head { padding: 0; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-item, .af-appshell[data-at-extra-wide="bottom-bar"] .af-appshell-nav .syn-rail-item { padding: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-item-at-from1440-padding, var(--space-1) var(--space-2)); }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .aptive-rail-grouplabel, .af-appshell[data-at-extra-wide="bottom-bar"] .af-appshell-nav .aptive-rail-grouplabel { padding: var(--kit-extra-wide-top-bar-appshell-nav-aptive-rail-grouplabel-at-from1440-padding, 0 var(--space-1) 0 var(--space-3)); }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-foot, .af-appshell[data-at-extra-wide="bottom-bar"] .af-appshell-nav .syn-rail-foot { display: flex; width: auto; flex: none; border: 0; padding: 0; margin: 0; }
    .af-appshell[data-at-extra-wide="bottom-bar"] .af-appshell-nav .syn-rail { border-block-end: 0; border-block-start: var(--af-appshell-at-extra-wide-bottom-bar-appshell-nav-rail-at-from1440-border-block-start, var(--shape-border-width) solid var(--rule-page)); }
}

/* d-demo-fix (row 193; the 188 answer of 23:28 EST, (b); J3a): THE RECORD PAGE'S ACT ROW — the primary leading; every disabled act's reason
   is its tooltip and aria-description (row 196, [AF-393]: no line beneath the row). d-ops-faces (row 228, AF-85, [AF-456]; J3a's
   head): the title row wraps, so the row stands at the end while the line holds it and the heading both, else beneath at the start edge; no rule
   parts the head from the body; every act the control's face at J3a's height, its glyph at J3a's size; the disabled face stays [AF-400]'s */
.af-shell-actrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--af-shell-actrow-gap, var(--space-2)); flex: 0 0 auto; max-width: 100%; }
.af-shell-titlerow:has(> .af-shell-actrow) { flex-wrap: wrap; align-items: flex-start; row-gap: var(--af-shell-titlerow-has-shell-actrow-row-gap, var(--space-4)); }
.af-shell-actrow .syn-btn.af-action, .af-shell-actrow .af-overflow-toggle { box-sizing: border-box; height: auto; min-height: max(var(--act-row-height), var(--target-min)); padding: var(--af-shell-actrow-btn-action-padding, 0 var(--space-4)); gap: var(--af-shell-actrow-btn-action-gap, var(--space-2)); font: var(--af-shell-actrow-btn-action-font, var(--type-control)); border-radius: var(--af-shell-actrow-btn-action-border-radius, var(--shape-radius-control)); white-space: nowrap; }
.af-shell-actrow .syn-btn.af-action svg, .af-shell-actrow .af-overflow-toggle svg { width: var(--af-shell-actrow-btn-action-svg-width, var(--act-row-glyph)); height: var(--af-shell-actrow-btn-action-svg-height, var(--act-row-glyph)); }
.af-shell-actrow .syn-btn.af-action:not(.is-primary):not(:disabled), .af-shell-actrow .af-overflow-toggle.is-more { color: var(--af-shell-actrow-btn-action-not-is-primary-not-disabled-color, var(--text-ink)); }

/* d-demo-fix (row 193; FD's tour rail; [AF-318]): from wide THE ASIDE IS A FULL-HEIGHT COLUMN beside the whole frame — under the band,
   beside the bar as well as the main, at every placement — so the tour rail starts where the band ends (it stood under the top bar at
   y 121) and its foot is the viewport's (the host sizes it); the per-breakpoint areas above drew no aside area at all */
@container shell (width >= 1024px) and (width < 1440px) {
    .af-appshell[data-at-wide="rail-start"] > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "nav main aside"; grid-template-columns: auto minmax(0, 1fr) auto; }
    .af-appshell[data-at-wide="rail-end"] > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "main nav aside"; grid-template-columns: minmax(0, 1fr) auto auto; }
    .af-appshell[data-at-wide="top-bar"] > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "nav aside" "main aside"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
}
@container shell (width >= 1440px) {
    .af-appshell[data-at-extra-wide="rail-start"] > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "nav main aside"; grid-template-columns: auto minmax(0, 1fr) auto; }
    .af-appshell[data-at-extra-wide="rail-end"] > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "main nav aside"; grid-template-columns: minmax(0, 1fr) auto auto; }
    .af-appshell[data-at-extra-wide="top-bar"] > .af-appshell-grid:has(> .af-appshell-aside) { grid-template-areas: "nav aside" "main aside"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
}

/* d-demo-fix (row 193): a rail at the inline end beside the full-height aside opens its person's menu toward the main — the tour rail now
   runs to the viewport's foot, where the menu stood over it (RailRoomConformance: *Profile* under the rail) */
@container shell (width >= 1024px) and (width < 1440px) {
    .af-appshell[data-at-wide="rail-end"] .af-appshell-nav .aptive-rail-who > .aptive-rail-acts { inset-inline: auto 0; }
}
@container shell (width >= 1440px) {
    .af-appshell[data-at-extra-wide="rail-end"] .af-appshell-nav .aptive-rail-who > .aptive-rail-acts { inset-inline: auto 0; }
}

/* p-top-bar (AF row 181; [AF-359]; J1a's bar, J2a's bar): THE TOP BAR'S FACE, from medium up — one row on the plane with a
   bottom rule; the wordmark (and the mark beside it when no chair runs), the entries as words with no glyph, the ACTIVE ENTRY UNDERLINED
   (never a pill), the person at the far end. The staff bar: no group label, the identity the name then the avatar, its menu (Profile,
   Sign out) dropping below it. The claimant bar: the head's parts flow into the row, the person last. A rail keeps its tint
   (components.css). Stated once per breakpoint the theme may set a top bar at. */
@container shell (width >= 640px) and (width < 1024px) {
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail { flex-wrap: wrap; padding-block: 0; min-block-size: calc(var(--target-min) + var(--space-4)); gap: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-at-from640-to1024-gap-2, var(--space-2)); background: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-at-from640-to1024-background, var(--surface-plane)); }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-head { padding-inline-end: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-head-at-from640-to1024-padding-inline-end, var(--space-4)); gap: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-head-at-from640-to1024-gap, var(--space-3)); }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-item { align-self: stretch; padding: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-item-at-from640-to1024-padding-2, 0 var(--space-3)); border: 0; border-block-end: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-item-at-from640-to1024-border-block-end, var(--block-edge-thin) solid transparent); border-radius: 0; background: none; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-item:hover { background: none; border-radius: 0; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-item .syn-icon { display: none; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-label { font: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-label-at-from640-to1024-font, var(--type-body)); color: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-label-at-from640-to1024-color, var(--text-muted)); }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-item.is-active, .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-item.is-active:hover { background: none; border-block-end-color: var(--kit-at-medium-top-bar-appshell-nav-rail-item-is-active-at-from640-to1024-border-block-end-color, var(--text-ink)); }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-item.is-active .syn-rail-label { color: var(--kit-top-bar-appshell-nav-rail-item-is-active-rail-label-at-from640-to1024-color, var(--text-ink)); font-weight: var(--kit-top-bar-appshell-nav-rail-item-is-active-rail-label-at-from640-to1024-font-weight, var(--type-heading-weight)); }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .aptive-rail-group { display: contents; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .aptive-rail-grouplabel { display: none; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .aptive-rail-who { margin-inline-start: auto; }
    .af-appshell[data-density="standard"][data-at-medium="top-bar"] .af-appshell-nav .syn-rail { min-block-size: var(--kit-density-standard-at-medium-top-bar-appshell-nav-rail-at-from640-to1024-min-block-size, var(--space-7)); }   /* d-rail-800 ([AF-454]): Standard's 24 target drew a 40 bar; J3a draws it as tall as J1a's */
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-foot { flex-direction: row-reverse; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail .syn-rail-item.is-held .aptive-rail-chip { display: none; }   /* d-rail-800 ([AF-454]): a held entry at medium is its muted word and its title, as the 800 comps draw it; the reason stays with assistive technology */
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-foot-id { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; clip-path: inset(50%); }   /* d-rail-800 (row 222; [AF-454]; J1a's and J3a's 800 comps): at medium the person is the avatar, the name stays for assistive technology; the bar wraps before the page scrolls */
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .aptive-rail-who > .aptive-rail-acts { inset-block: 100% auto; inset-inline: auto 0; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-appshell-nav { align-items: stretch; background: var(--kit-appshell-density-public-at-medium-top-bar-appshell-nav-at-from640-to1024-background, var(--surface-plane)); border-block-end: var(--kit-appshell-density-public-at-medium-top-bar-appshell-nav-at-from640-to1024-border-block-end, var(--shape-border-width) solid var(--border-hairline)); padding-inline: var(--kit-appshell-density-public-at-medium-top-bar-appshell-nav-at-from640-to1024-padding-inline, var(--space-4)); gap: var(--kit-appshell-density-public-at-medium-top-bar-appshell-nav-at-from640-to1024-gap, 0 var(--space-4)); }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-band { flex-basis: var(--af-appshell-density-public-at-medium-top-bar-bar-band-at-from640-to1024-flex-basis, calc(100% + 2 * var(--space-4))); margin-inline: var(--af-appshell-density-public-at-medium-top-bar-bar-band-at-from640-to1024-margin-inline, calc(-1 * var(--space-4))); }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-head { display: contents; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-brand { align-self: center; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar { order: 1; flex: 0 1 auto; display: flex; background: none; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-who { order: 2; margin-inline-start: auto; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-entries { padding-block: 0; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-entry { height: 100%; box-sizing: border-box; min-block-size: calc(var(--target-min) + 2 * var(--space-1)); border-radius: 0; border-block-end: var(--af-appshell-density-public-at-medium-top-bar-bar-entry-at-from640-to1024-border-block-end, var(--block-edge-thin) solid transparent); }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-entry .syn-icon { display: none; }
    .af-appshell[data-density="public"][data-at-medium="top-bar"] .af-bar-entry.is-active { background: none; border-block-end-color: var(--kit-density-public-at-medium-top-bar-bar-entry-is-active-at-from640-to1024-border-block-end-color, var(--text-ink)); }
}
@container shell (width >= 1024px) and (width < 1440px) {
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail { flex-wrap: nowrap; padding-block: 0; min-block-size: calc(var(--target-min) + var(--space-4)); gap: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-at-from1024-to1440-gap-2, var(--space-2)); background: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-at-from1024-to1440-background, var(--surface-plane)); }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-head { padding-inline-end: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-head-at-from1024-to1440-padding-inline-end, var(--space-4)); gap: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-head-at-from1024-to1440-gap, var(--space-3)); }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-item { align-self: stretch; padding: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-item-at-from1024-to1440-padding-2, 0 var(--space-3)); border: 0; border-block-end: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-item-at-from1024-to1440-border-block-end, var(--block-edge-thin) solid transparent); border-radius: 0; background: none; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-item:hover { background: none; border-radius: 0; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-item .syn-icon { display: none; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-label { font: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-label-at-from1024-to1440-font, var(--type-body)); color: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-label-at-from1024-to1440-color, var(--text-muted)); }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-item.is-active, .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-item.is-active:hover { background: none; border-block-end-color: var(--kit-at-wide-top-bar-appshell-nav-rail-item-is-active-at-from1024-to1440-border-block-end-color, var(--text-ink)); }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-item.is-active .syn-rail-label { color: var(--kit-top-bar-appshell-nav-rail-item-is-active-rail-label-at-from1024-to1440-color, var(--text-ink)); font-weight: var(--kit-top-bar-appshell-nav-rail-item-is-active-rail-label-at-from1024-to1440-font-weight, var(--type-heading-weight)); }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .aptive-rail-group { display: contents; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .aptive-rail-grouplabel { display: none; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .aptive-rail-who { margin-inline-start: auto; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-foot { flex-direction: row-reverse; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .aptive-rail-who > .aptive-rail-acts { inset-block: 100% auto; inset-inline: auto 0; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-appshell-nav { align-items: stretch; background: var(--af-appshell-density-public-at-wide-top-bar-appshell-nav-at-from1024-to1440-background, var(--surface-plane)); border-block-end: var(--af-appshell-density-public-at-wide-top-bar-appshell-nav-at-from1024-to1440-border-block-end, var(--shape-border-width) solid var(--border-hairline)); padding-inline: var(--af-appshell-density-public-at-wide-top-bar-appshell-nav-at-from1024-to1440-padding-inline, var(--space-5)); gap: var(--af-appshell-density-public-at-wide-top-bar-appshell-nav-at-from1024-to1440-gap, 0 var(--space-4)); }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-band { flex-basis: var(--af-appshell-density-public-at-wide-top-bar-bar-band-at-from1024-to1440-flex-basis, calc(100% + 2 * var(--space-5))); margin-inline: var(--af-appshell-density-public-at-wide-top-bar-bar-band-at-from1024-to1440-margin-inline, calc(-1 * var(--space-5))); }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-head { display: contents; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-brand { align-self: center; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar { order: 1; flex: 0 1 auto; display: flex; background: none; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-who { order: 2; margin-inline-start: auto; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-entries { padding-block: 0; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-entry { height: 100%; box-sizing: border-box; min-block-size: calc(var(--target-min) + 2 * var(--space-1)); padding-inline: var(--af-appshell-density-public-at-wide-top-bar-bar-entry-at-from1024-to1440-padding-inline, var(--space-3)); border-radius: 0; border-block-end: var(--af-appshell-density-public-at-wide-top-bar-bar-entry-at-from1024-to1440-border-block-end, var(--block-edge-thin) solid transparent); }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-entry .syn-icon { display: none; }
    .af-appshell[data-density="public"][data-at-wide="top-bar"] .af-bar-entry.is-active { background: none; border-block-end-color: var(--kit-density-public-at-wide-top-bar-bar-entry-is-active-at-from1024-to1440-border-block-end-color, var(--text-ink)); }
}
@container shell (width >= 1440px) {
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail { flex-wrap: nowrap; padding-block: 0; min-block-size: calc(var(--target-min) + var(--space-4)); gap: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-at-from1440-gap-2, var(--space-2)); background: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-at-from1440-background, var(--surface-plane)); }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-head { padding-inline-end: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-head-at-from1440-padding-inline-end, var(--space-4)); gap: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-head-at-from1440-gap, var(--space-3)); }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-item { align-self: stretch; padding: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-item-at-from1440-padding-2, 0 var(--space-3)); border: 0; border-block-end: var(--af-appshell-at-extra-wide-top-bar-appshell-nav-rail-item-at-from1440-border-block-end, var(--block-edge-thin) solid transparent); border-radius: 0; background: none; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-item:hover { background: none; border-radius: 0; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-item .syn-icon { display: none; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-label { font: var(--kit-appshell-at-extra-wide-top-bar-appshell-nav-rail-label-at-from1440-font, var(--type-body)); color: var(--kit-appshell-at-extra-wide-top-bar-appshell-nav-rail-label-at-from1440-color, var(--text-muted)); }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-item.is-active, .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-item.is-active:hover { background: none; border-block-end-color: var(--kit-at-extra-wide-top-bar-appshell-nav-rail-item-is-active-at-from1440-border-block-end-color, var(--text-ink)); }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-item.is-active .syn-rail-label { color: var(--kit-top-bar-appshell-nav-rail-item-is-active-rail-label-at-from1440-color, var(--text-ink)); font-weight: var(--kit-top-bar-appshell-nav-rail-item-is-active-rail-label-at-from1440-font-weight, var(--type-heading-weight)); }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .aptive-rail-group { display: contents; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .aptive-rail-grouplabel { display: none; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .aptive-rail-who { margin-inline-start: auto; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-foot { flex-direction: row-reverse; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .aptive-rail-who > .aptive-rail-acts { inset-block: 100% auto; inset-inline: auto 0; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-appshell-nav { align-items: stretch; background: var(--kit-density-public-at-extra-wide-top-bar-appshell-nav-at-from1440-background, var(--surface-plane)); border-block-end: var(--kit-density-public-at-extra-wide-top-bar-appshell-nav-at-from1440-border-block-end, var(--shape-border-width) solid var(--border-hairline)); padding-inline: var(--kit-density-public-at-extra-wide-top-bar-appshell-nav-at-from1440-padding-inline, var(--space-5)); gap: var(--kit-density-public-at-extra-wide-top-bar-appshell-nav-at-from1440-gap, 0 var(--space-4)); }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-band { flex-basis: var(--kit-appshell-density-public-at-extra-wide-top-bar-bar-band-at-from1440-flex-basis, calc(100% + 2 * var(--space-5))); margin-inline: var(--kit-appshell-density-public-at-extra-wide-top-bar-bar-band-at-from1440-margin-inline, calc(-1 * var(--space-5))); }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-head { display: contents; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-brand { align-self: center; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar { order: 1; flex: 0 1 auto; display: flex; background: none; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-who { order: 2; margin-inline-start: auto; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-entries { padding-block: 0; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-entry { height: 100%; box-sizing: border-box; min-block-size: calc(var(--target-min) + 2 * var(--space-1)); padding-inline: var(--kit-appshell-density-public-at-extra-wide-top-bar-bar-entry-at-from1440-padding-inline, var(--space-3)); border-radius: 0; border-block-end: var(--kit-appshell-density-public-at-extra-wide-top-bar-bar-entry-at-from1440-border-block-end, var(--block-edge-thin) solid transparent); }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-entry .syn-icon { display: none; }
    .af-appshell[data-density="public"][data-at-extra-wide="top-bar"] .af-bar-entry.is-active { background: none; border-block-end-color: var(--kit-public-at-extra-wide-top-bar-bar-entry-is-active-at-from1440-border-block-end-color, var(--text-ink)); }
}

/* ---- actions: the row, the compact overflow, the touch target, the reason, the undo ----------------------------- */
.af-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-actions-gap, var(--space-2)); position: relative; }
.af-overflow-toggle { display: none; align-items: center; justify-content: center; gap: var(--af-overflow-toggle-gap, var(--space-1)); cursor: pointer; }   /* AF-2070: the face is its seat's, the secondary's (Harbor: *More* is a secondary with its chevron) */
/* d-a11y (AF-DESIGN-SYSTEM.md §3.2 "24 px elsewhere"; WCAG 2.5.8): the Standard floor on every seat a finger lands on, at every
   width; the compact rule below and the density profiles raise it to the profile's --target-min */
.af-action, .af-tab, .af-board-card, .af-cal-eventbtn, .af-board-chip, .af-board-more, .af-side-toggle, .af-overflow-toggle { min-height: 24px; }
.af-overflow-toggle { min-width: 24px; }

.af-act { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--af-act-gap, var(--space-2)); min-width: 0; }
/* d-faces-fix (row 198, [AF-400]; J1b exam-dbq-id, J3a ops-appointments-id): THE ACT'S DISABLED FACE, from the theme's tokens at
   every density — the faint label on every act; a primary a pale wash with no edge or shadow (J1b's *Sign and submit*), every other act its
   hairline outline on the plane (J3a's *Reschedule · Cancel · Mark as no-show*); never the ink seat's border-default field (a dark slate
   block under Harbor, the review's #2), and no hover lift on an act that does nothing.
   AF-2032 ([AF-2093]; Harbor's Button preview as CWD-4 corrected it, `.btn[disabled]`): EVERY disabled act is the INSET FILL WITH NO
   FRAME — the hairline outline on the plane that [AF-400] gave the secondaries is struck; the faint label stays */
.af-act .af-action:disabled, .af-act .af-action:disabled:hover { color: var(--af-act-action-disabled-color, var(--text-faint)); background: var(--af-act-action-disabled-background, var(--surface-inset)); border-color: var(--af-act-action-disabled-border-color, transparent); box-shadow: none; opacity: var(--af-act-action-disabled-opacity, 1); cursor: default; }
.af-act .af-action.is-primary:disabled, .af-act .af-action.is-primary:disabled:hover, .af-shell-head .af-act .af-action.is-primary:disabled, .af-shell-head .af-act .af-action.is-primary:disabled:hover { background: var(--af-act-action-is-primary-disabled-background, var(--surface-inset)); border-color: transparent; }
/* d-exam-faces (row 210 (f), [AF-414]; the audit's #13): THE DISABLED PRIMARY'S LABEL IS THE MUTED INK — J1b's *Sign and submit*
   reads #515d61 on its wash (Harbor's text.muted, its glyph with it), a word still to be read; the faint ink (#8b9497) stays the secondaries'
   (J3a's *Reschedule*), and on the wash it read as an act that is not there */
.af-act .af-action.is-primary:disabled, .af-act .af-action.is-primary:disabled:hover { color: var(--af-act-action-is-primary-disabled-color, var(--text-muted)); }
/* §3.6 #2 — disabled with a reason: row 196 ([AF-393]) makes the reason the act's tooltip and aria-description (ActionButton) — never a
   paragraph in the head or under a row; the one face a reason has is a staff card's shared line (row 236, [AF-483]: .af-card-reason below) */
/* d-act-confirm (row 236, [AF-482]; J1a's *Mark as no-show*, no comp draws it open): AN ACT THAT CONFIRMS IN PLACE, one <details> and no script. The first press holds
   both its words in one cell, so its box never changes, and opening it moves nothing: the second press, in the ink seat, hangs beneath it as *More*'s menu does, or follows it where the
   acts stack or run from the start edge (the card, below). It is never under the pointer that pressed the first, so a double click opens and closes and never posts. */
.af-confirm { position: relative; display: inline-flex; min-width: 0; }
.af-confirm > summary { list-style: none; cursor: pointer; }
.af-confirm > summary::-webkit-details-marker { display: none; }
.af-confirm-face { display: inline-grid; justify-items: center; align-items: center; gap: inherit; }
.af-confirm-rest, .af-confirm-back { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: inherit; }
.af-confirm-back { visibility: hidden; }
.af-confirm[open] .af-confirm-rest { visibility: hidden; }
.af-confirm[open] .af-confirm-back { visibility: visible; }
.af-confirm-yes { position: absolute; inset-block-start: 100%; margin-block-start: var(--af-confirm-yes-margin-block-start, var(--space-1)); inset-inline-end: 0; z-index: 1; white-space: nowrap; }   /* beneath it whatever the theme declares: the offset is no token's to lose */
/* AF-2032 ([AF-2093]; Harbor's Button preview): THE REST OF THE BUTTON'S FACES, one face each for both renderers — the link face is
   `.is-link` (one rule with the row's *Open ›*, `.is-rowlink`, below); THE RAREST ACT, `.is-block`, last and full width in the ink
   outline (its weight is its place, never a tone); THE REASON LINE, `.af-act-reason`, one muted line beneath disabled acts (one rule
   with a staff card's, `.af-card-reason`; [AF-393] keeps it out of a head) */
.af-act:has(> .is-block) { display: flex; inline-size: 100%; }
.syn-btn.af-action.is-block { flex: 1 1 auto; justify-content: center; inline-size: 100%; }
/* §3.6 #3 — undo is revert, offered for ten seconds after a reversible act lands */
.af-undo { font: var(--af-undo-font, var(--type-caption)); }
@container block (width < 640px) {
    .af-overflow-toggle { display: inline-flex; }
    /* touch targets at compact ([AF-36]): every seat a finger lands on */
    .af-action, .af-tab, .af-board-card, .af-cal-eventbtn, .af-board-chip, .af-board-more, .af-side-toggle { min-height: var(--target-min); }
    .af-overflow-toggle { min-width: var(--target-min); }
}
/* input modality (§3.2; [AF-111] (2)): a coarse pointer gets the touch floor at every width — the one media feature that is not a width */
@media (pointer: coarse) {
    .af-action, .af-tab, .af-board-card, .af-cal-eventbtn, .af-board-chip, .af-board-more, .af-side-toggle { min-height: var(--target-min); }
    .af-overflow-toggle { min-width: var(--target-min); }
    .af-board-card:hover, .af-tab:hover { color: inherit; border-color: var(--af-board-card-hover-at-coarse-border-color, var(--border-default)); }   /* no hover-only affordance on touch */
}
/* THE DENSITY PROFILES (AF-DESIGN-SYSTEM.md §3.1a; [AF-114] (1)): the multipliers live in tokens.css's DERIVED section, where the
   package applies them to the ladder and the space scale ([AF-131]; the token file sets --target-min per density,
   AF-TOKENS.md §2 "Target"); here, the behavior selections the blocks honor — Clinical's and Public's one-tap targets at every width, Public's one column always,
   Dense's row actions on hover and on focus. */
[data-density="clinical"] .af-action, [data-density="clinical"] .af-tab, [data-density="clinical"] .af-board-card, [data-density="clinical"] .af-cal-eventbtn,
[data-density="public"] .af-action, [data-density="public"] .af-tab, [data-density="public"] .af-board-card, [data-density="public"] .af-cal-eventbtn { min-height: var(--target-min); }
[data-density="public"] .af-fieldgrid, [data-density="public"] .af-fieldgrid[data-variant="dense"] { grid-template-columns: minmax(0, 1fr); }   /* one column always */
[data-density="dense"] .af-list-rowactions { display: none; }
[data-density="dense"] .syn-listgrid-row:hover .af-list-rowactions, [data-density="dense"] .syn-listgrid-row:focus-within .af-list-rowactions { display: flex; }

/* ---- menu (AF-2070, Batch A; UI-SHELL §7, CWD-4 2026-11-09; [AF-2092]): the anchored popover every dropdown shares ------ */
/* The anchor and the plane (Menu.razor; menu.js opens it): 4 px below the anchor, start-aligned, end-aligned at the end of its row,
   above a rail's foot; no caret — the hairline edge and the shadow place it. The plane: surface-raised, 8 px radius (Ken's number,
   tighter than a control's 12: a list, not a card), the hairline edge (in dark the shadow alone does not lift it, so the edge is never
   optional), Harbor's second shadow layer, 4 px inside, 14 rem at least. The items: rows at max(target-min, 40 px), 8 px inside radius,
   body ink, a 20 px glyph slot at the start filled or empty so the words align, hover surface-hover, focus Harbor's ring; a separator
   a hairline with 4 px above and below; a destructive item the Attention ink ([AF-2094]). One face for both renderers. */
.af-menu-anchor { position: relative; display: inline-flex; }
.af-menu { position: absolute; z-index: 20; inset-block-start: var(--af-menu-inset-block-start, calc(100% + var(--af-menu-gap, 4px))); inset-inline-start: 0; display: grid; align-content: start; box-sizing: border-box; min-inline-size: var(--af-menu-min-inline-size, 14rem); padding: var(--af-menu-padding, 4px); background: var(--af-menu-background, var(--surface-raised)); color: var(--af-menu-color, var(--text-body)); border: var(--af-menu-border, var(--shape-border-width) solid var(--border-hairline)); border-radius: var(--af-menu-border-radius, 8px); box-shadow: var(--af-menu-box-shadow, var(--elevation-raised)); }
.af-menu[hidden] { display: none; }
.af-menu[data-align="end"] { inset-inline: auto 0; }
.af-menu[data-side="above"] { inset-block: var(--af-menu-side-above-inset-block, auto calc(100% + var(--af-menu-gap, 4px))); }
.af-menu-item { display: flex; align-items: center; gap: var(--af-menu-item-gap, var(--space-2)); box-sizing: border-box; inline-size: 100%; min-block-size: var(--af-menu-item-min-block-size, 40px); padding-block: 0; padding-inline: var(--af-menu-item-padding-inline, var(--space-2) var(--space-3)); margin: 0; border: 0; border-radius: var(--af-menu-item-border-radius, 8px); background: none; color: var(--af-menu-item-color, var(--text-body)); font: var(--af-menu-item-font, var(--type-body)); text-align: start; text-decoration: var(--af-menu-item-text-decoration, none); white-space: nowrap; cursor: pointer; }
.af-menu-item:hover, .af-menu-item:focus-visible { background: var(--af-menu-item-hover-background, var(--surface-hover)); color: var(--af-menu-item-hover-color, var(--text-ink)); text-decoration: var(--af-menu-item-hover-text-decoration, none); }
.af-menu-item:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-width)); }
.af-menu-item[aria-checked="true"] { color: var(--af-menu-item-checked-color, var(--text-ink)); font-weight: var(--af-menu-item-checked-font-weight, var(--type-heading-weight)); }
.af-menu-item[data-tone="destructive"], .af-menu-item[data-tone="destructive"]:hover { color: var(--af-menu-item-destructive-color, var(--state-attention-text)); }
.af-menu-glyph { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--af-menu-glyph-inline-size, 20px); block-size: var(--af-menu-glyph-block-size, 20px); color: var(--af-menu-glyph-color, var(--text-ink)); }
.af-menu-item[data-tone="destructive"] .af-menu-glyph { color: inherit; }
.af-menu-sep { block-size: var(--af-menu-sep-block-size, var(--shape-border-width)); margin-block: var(--af-menu-sep-margin-block, 4px); margin-inline: var(--af-menu-sep-margin-inline, var(--space-2)); background: var(--af-menu-sep-background, var(--border-hairline)); }
/* an act row's *More*: its acts are the items — a row each, the act's own face quieted to the item's (no edge, the start edge) */
.af-menu[role="menu"] .af-act { display: flex; }
.af-menu[role="menu"] .af-action { flex: 1 1 auto; justify-content: flex-start; white-space: nowrap; border-color: transparent; background: none; box-shadow: none; }
.af-menu[role="menu"] .af-action:not(:disabled):hover { background: var(--af-menu-overflow-menu-action-hover-background, var(--surface-hover)); }
/* the compact overflow ([AF-36]): above compact the acts stand in the row (no plane, no role); at compact the plane is the menu */
.af-menu[data-menu-inline] { display: contents; }
@container block (width < 640px) {
    .af-menu[data-menu-inline] { display: grid; }
    .af-menu[data-menu-inline][hidden] { display: none; }
}
/* Clinical's and Public's one-tap rows: the item takes the profile's target where it is taller than 40 (44, 48) */
[data-density="clinical"] .af-menu-item, [data-density="public"] .af-menu-item { min-block-size: var(--target-min); }
/* the who-menu (NavRail): the person is the trigger — the rail's foot a full-width row, the bar's end its avatar */
.aptive-rail-who { display: flex; }
.aptive-rail-who > .af-menu-trigger { font: inherit; }

/* ---- page shell ----------------------------------------------------------------------------------------------- */
/* d-today-faces (row 237, [AF-518]; 221's routed (c), CP-221 (a); J0, J1a, J1b, J1c, J2a, J2b, J3a): NO RULE PARTS A HEAD FROM ITS BODY, on any variant or density: no comp draws one */
.af-shell-head { display: flex; flex-direction: column; gap: var(--af-shell-head-gap, var(--space-2)); margin-bottom: var(--af-shell-head-margin-bottom, var(--space-5)); }
.af-breadcrumb { display: flex; align-items: center; gap: var(--af-breadcrumb-gap, var(--space-1)); color: var(--af-breadcrumb-color, var(--text-tertiary)); }   /* p-top-bar (row 181): the chevron leads the trail */
.af-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--af-breadcrumb-ol-gap, var(--space-1)); list-style: none; margin: 0; padding: 0; font: var(--af-breadcrumb-ol-font, var(--type-label)); color: var(--af-breadcrumb-ol-color, var(--text-tertiary)); }
.af-breadcrumb a.af-crumb { color: inherit; text-decoration: var(--af-breadcrumb-a-crumb-text-decoration, none); }   /* d-tour-fix (row 207): a crumb the host lands is a link, in the trail's ink */
.af-breadcrumb a.af-crumb:hover { color: var(--af-breadcrumb-a-crumb-hover-color, var(--accent-action)); text-decoration: var(--af-breadcrumb-a-crumb-hover-text-decoration, underline); }
.af-breadcrumb li + li::before { content: "/"; margin-right: var(--af-breadcrumb-li-li-before-margin-right, var(--space-1)); color: var(--af-breadcrumb-li-li-before-color, var(--text-rider)); }
.af-shell-titlerow { display: flex; align-items: center; justify-content: space-between; gap: var(--af-shell-titlerow-gap, var(--space-3)); }   /* never wraps the actions beneath the title (§3.6 #1; [AF-121]): the title wraps its words instead */
/* d-head (row 132; [AF-308]): THE TITLE KEEPS A FLOOR OF ITS MEASURE beside many acts. Compass's DBQ page at 1200 drew
   *Back (Thoracolumbar Spine) Conditions DBQ* letter by letter beside seven acts: the acts box was `flex: none` (its whole
   max-content, the disabled act's reason sentence included), the heading took what was left and `overflow-wrap: anywhere` broke
   the title mid-word. Now the title's box is never narrower than 20ch of its own face nor than its longest word (`break-word`
   breaks only a word wider than the whole box; it never shrinks the box to a letter), the heading carries that floor as its
   content minimum, and the acts shrink to the remainder and wrap WITHIN THEIR OWN BOX at the row's end edge — every act drawn,
   the primary last on the last line (§3.6 #1). A count rule (fold the acts at every width) was rejected: [AF-188] folds by
   count, never by fit, and an act folded for fit is a hidden act; the 640 toggle below stands. The floor is ABOVE COMPACT only:
   the 640 block below returns both minimums to 0 (row 135). */
.af-shell-title { font: var(--af-shell-title-font, var(--type-title)); letter-spacing: var(--af-shell-title-letter-spacing, var(--type-title-tracking)); color: var(--af-shell-title-color, var(--text-ink)); margin: 0; flex: 1 1 auto; min-width: var(--af-shell-title-min-width, calc(var(--empty-text-max) / 2)); overflow-wrap: break-word; }
.af-shell-heading { flex: 1 1 auto; min-width: min-content; display: flex; flex-direction: column; gap: var(--af-shell-heading-gap, var(--space-1)); }
/* d-today (row 144; [AF-324], [AF-326]): the title's glyph under Clinical (the page's icon, muted, inline before the word);
   the SEGMENTED slot at the title row's end edge — a leading pills Tabs' list (J1a's Day · Week) */
.af-shell-title .syn-icon { vertical-align: middle; margin-inline-end: var(--af-shell-title-icon-margin-inline-end, var(--space-2)); color: var(--af-shell-title-icon-color, var(--text-muted)); }   /* the glyph centred on the title line, no drawn offset */
.af-shell-segmented { flex: 0 0 auto; margin-inline-start: auto; }
.af-shell-segmented .af-tabs { margin: 0; }
/* the records page's subline ([AF-152]; [AF-139] (a)): the subject's name in ink at the heading rung, the identifier in the mono face one notch below body */
.af-shell-subline { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--af-shell-subline-gap, var(--space-3)); min-width: 0; }
.af-shell-subtitle { font: var(--af-shell-subtitle-font, var(--type-heading)); color: var(--af-shell-subtitle-color, var(--text-ink)); overflow-wrap: anywhere; }
.af-shell-subtitle[data-face="day"] { font: var(--af-shell-subtitle-face-day-font, var(--type-body)); color: var(--af-shell-subtitle-face-day-color, var(--text-muted)); }   /* row 237 ([AF-518]; J1a's *Thu Oct 30, 2026 · Eastern time*): a day names no subject */
.af-shell-identifier { font: var(--af-shell-identifier-font, var(--type-identifier)); color: var(--af-shell-identifier-color, var(--text-muted)); overflow-wrap: anywhere; }   /* the mono notch, a derived rung ([AF-187]) */
.af-shell-caption { margin: var(--af-shell-caption-margin, var(--space-1) 0 0); font: var(--af-shell-caption-font, var(--type-body)); color: var(--af-shell-caption-color, var(--text-body)); overflow-wrap: anywhere; }   /* the caption line under the subline ([AF-166]) */
.af-shell-actions { flex: 0 1 auto; margin-inline-start: auto; justify-content: flex-end; }   /* shrinks to what the title's floor leaves (never below its widest act) and wraps its acts at the end edge (row 132) */
/* p-shell (row 125; A6, §3.6 #1): the head's acts share one height by ALIGNMENT, never a number — a row act's content-box seat under the
   24 px floor stood 36 px beside the 30 px primary and the centred row dropped the primary 3 px on every page with a secondary; border-box
   makes the seat's box its own, and stretch gives every act the row's cross size (the primary's 30 px; the 44 px floor under touch, where
   min-height still governs every act, the overflow toggle included) */
.af-shell-actions .af-action { box-sizing: border-box; align-self: stretch; }
.af-side-head .af-act .af-action { box-sizing: border-box; }   /* d-dbq-head (row 231 (4)): the placed act's box is the head's acts' */
/* d-nits (row 202; the review's #1, #5; J1b exam-dbq-id, J3a ops-appointments-id): THE HEAD'S SECONDARIES AT THE CONTROL RUNG'S WEIGHT —
   every act in the head's row and *More* read the theme's control face (Harbor's 600, J1b's semibold *Open the packet*), never the row-act
   seat's 500; the seat keeps its field and edge */
:is(.af-shell-actions, .af-shell-actrow, .af-side-head) .syn-btn.af-action:not(.is-primary) { font-weight: var(--kit-shell-actrow-side-head-btn-action-not-is-primary-font-weight, var(--type-control-weight)); }
.af-beside { margin-top: var(--af-beside-margin-top, var(--space-2)); }   /* a shell act placed beside a field ([AF-168]): beneath the control it reads */
.af-fieldro-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--af-fieldro-items-gap, var(--block-mark-gap)); font: var(--af-fieldro-items-font, var(--type-body)); color: var(--af-fieldro-items-color, var(--text-ink)); }   /* a readonly collection, one line per item ([AF-170]) */
/* p-contract (row 155; [AF-339]): a readonly field's glyph before its label, the card label's gap; an enum member's glyph before its word */
.af-fieldro-label { display: flex; align-items: center; gap: var(--af-fieldro-label-gap, var(--space-2)); }
.af-fieldro-label .syn-icon { flex: none; }
.syn-value > .syn-icon { vertical-align: middle; margin-inline-end: var(--syn-value-icon-margin-inline-end, var(--space-1)); }
.af-needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--af-needs-gap, var(--block-mark-gap)); }   /* a list of needs at rest, one line per need (row 100; [AF-253]) */
/* row 94: a field's help template — one composed line in body ink: beneath a figure or a stacked date, beside a plain value */
.af-field-help { font: var(--af-field-help-font, var(--type-body)); color: var(--af-field-help-color, var(--text-body)); }
.af-field-help.is-beside { margin-inline-start: var(--af-field-help-is-beside-margin-inline-start, var(--space-2)); }
.af-figure-slot .af-field-help, .af-date-slot .af-field-help, .af-field-help.is-beneath { display: block; margin-top: var(--af-figure-slot-field-help-margin-top, var(--space-1)); }
/* row 97: the state word in the Decision card's label line, in its tone; a Muted outcome mutes the card's figure too */
.af-section-state { font: var(--af-section-state-font, var(--type-caption)); font-weight: var(--af-section-state-font-weight, var(--font-semibold)); color: var(--af-section-state-color, var(--text-muted)); }
.af-section-state[data-tone="success"] { color: var(--af-section-state-tone-success-color, var(--state-success-text)); }
.af-section-state[data-tone="attention"] { color: var(--af-section-state-tone-attention-color, var(--state-attention-text)); }
.af-section-state[data-tone="warning"] { color: var(--af-section-state-tone-warning-color, var(--state-warning-text)); }
.af-section-state[data-tone="info"] { color: var(--af-section-state-tone-info-color, var(--state-info-text)); }
.af-section[data-state-tone="muted"] .af-figure, .af-section[data-state-tone="muted"] .af-date-day, .af-section[data-state-tone="muted"] .af-date-time { color: var(--af-section-state-tone-muted-figure-color, var(--text-muted)); }
.af-shell-status { font: var(--af-shell-status-font, var(--type-label)); padding: var(--af-shell-status-padding, var(--space-2) var(--space-3)); border-radius: var(--af-shell-status-border-radius, var(--radius-sm)); background: var(--af-shell-status-background, var(--bg-secondary)); color: var(--af-shell-status-color, var(--text-muted)); }
.af-shell-status.is-preview { background: var(--af-shell-status-is-preview-background, var(--state-info-tint)); color: var(--af-shell-status-is-preview-color, var(--text-ink)); }
.af-shell-status.is-construction { background: var(--af-shell-status-is-construction-background, var(--warning-tint)); color: var(--af-shell-status-is-construction-color, var(--text-ink)); }
.af-shell-chip { font: var(--af-shell-chip-font, var(--type-label)); letter-spacing: var(--af-shell-chip-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-shell-chip-text-transform, var(--type-label-transform)); padding: var(--af-shell-chip-padding, var(--badge-inset)); border-radius: var(--af-shell-chip-border-radius, var(--shape-radius-pill)); background: var(--af-shell-chip-background, var(--state-info)); color: var(--af-shell-chip-color, var(--text-on-ink)); margin-right: var(--af-shell-chip-margin-right, var(--space-2)); }
.af-shell-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--af-shell-cols-gap, var(--space-6)); align-items: start; }
.af-shell-cols.has-panel { grid-template-columns: var(--af-shell-cols-has-panel-grid-template-columns, minmax(0, 1fr) var(--panel-width-wide)); }
/* d-panels-cards (row 215 (a), [AF-421]; J1b README: the compliance panel `narrow` beside the form, 320 at 1200 and 256 at 800):
   the narrow side panel is its own column, never the folded face's 240 (that stays --panel-width-narrow) */
.af-shell-cols.has-panel:has(> .af-side[data-variant="narrow"]) { grid-template-columns: var(--af-shell-cols-has-panel-has-side-variant-narrow-grid-template-columns, minmax(0, 1fr) var(--panel-width-side-narrow)); }
.af-shell-main { min-width: 0; }
/* the body layouts (§3.1): reading — a centered measure; two-pane — the first block beside the rest; panel-start — the panel's column first (logical) */
.af-shell-cols[data-layout="reading"] > .af-shell-main { max-inline-size: var(--af-shell-cols-layout-reading-shell-main-max-inline-size, 72ch); margin-inline: auto; width: 100%; }   /* d-tokens: --measure-reading */
/* row 237 ([AF-521]; J1a's exam-today, exam-requests-id and its packet at 1200): under Clinical a `reading` page is one centred column, its head and body on J1a's measure; at medium the page's gutter is the density's (J1a at 800, CP-221 (h)) */
[data-density="clinical"] .af-shell-cols[data-layout="reading"] > .af-shell-main { max-inline-size: var(--kit-density-clinical-af-shell-cols-layout-reading-shell-main-max-inline-size, var(--measure-clinical)); }
[data-density="clinical"] .af-shell:has(> .af-shell-cols[data-layout="reading"]) > .af-shell-head { max-inline-size: var(--af-shell-has-shell-cols-layout-reading-shell-head-max-inline-size, var(--measure-clinical)); margin-inline: auto; width: 100%; box-sizing: border-box; }
@container af-page (640px <= width < 1024px) { [data-density="clinical"] .af-page-body { padding-inline: var(--kit-density-clinical-af-page-body-at-to1024-padding-inline, var(--space-gutter)); } }
.af-shell-cols[data-layout="two-pane"] > .af-shell-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--af-shell-cols-layout-two-pane-shell-main-gap, var(--space-6)); align-items: start; }
.af-shell-cols[data-layout="two-pane"] > .af-shell-main > .af-block:first-child { grid-row: 1 / span 99; position: sticky; inset-block-start: var(--kit-shell-cols-layout-two-pane-shell-main-block-first-child-inset-block-start, var(--space-4)); }
.af-shell-cols[data-layout="two-pane"] > .af-shell-main > .af-block + .af-block { margin-top: 0; }
.af-shell-cols[data-layout="two-pane"] > .af-shell-main > .af-block:nth-child(n + 3) { margin-top: var(--kit-cols-layout-two-pane-shell-main-block-nth-child-n-3-margin-top, var(--space-4)); }
.af-shell-cols.has-panel[data-layout="panel-start"] { grid-template-columns: var(--af-shell-cols-has-panel-layout-panel-start-grid-template-columns, var(--panel-width-wide) minmax(0, 1fr)); }
.af-shell-cols.has-panel[data-layout="panel-start"] > .af-side { order: -1; }
@container af-page (width >= 1440px) {
    .af-shell-cols.has-panel { grid-template-columns: var(--af-shell-cols-has-panel-at-from1440-grid-template-columns, minmax(0, 1fr) calc(var(--panel-width-wide) * 1.25)); }
    .af-shell-cols.has-panel[data-layout="panel-start"] { grid-template-columns: var(--af-shell-cols-has-panel-layout-panel-start-at-from1440-grid-template-columns, calc(var(--panel-width-wide) * 1.25) minmax(0, 1fr)); }
    .af-shell-cols[data-layout="two-pane"] > .af-shell-main { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@container af-page (width < 1024px) {
    .af-shell-cols.has-panel { grid-template-columns: var(--af-shell-cols-has-panel-at-to1024-grid-template-columns, minmax(0, 1fr) var(--panel-width)); }
    .af-shell-cols.has-panel:has(> .af-side[data-variant="narrow"]) { grid-template-columns: var(--af-shell-cols-has-panel-has-side-variant-narrow-at-to1024-grid-template-columns, minmax(0, 1fr) var(--panel-width-side-narrow-medium)); }
    .af-shell-cols.has-panel[data-layout="panel-start"] { grid-template-columns: var(--af-shell-cols-has-panel-layout-panel-start-at-to1024-grid-template-columns, var(--panel-width) minmax(0, 1fr)); }
    .af-shell-cols[data-layout="two-pane"] > .af-shell-main { grid-template-columns: minmax(0, 1fr); }
    .af-shell-cols[data-layout="two-pane"] > .af-shell-main > .af-block:first-child { grid-row: auto; position: static; }
    .af-shell-cols[data-layout="two-pane"] > .af-shell-main > .af-block + .af-block { margin-top: var(--af-shell-cols-layout-two-pane-shell-main-block-block-at-to1024-margin-top, var(--space-4)); }
}
@container af-page (width < 640px) {
    .af-shell-cols.has-panel, .af-shell-cols.has-panel:has(> .af-side[data-variant="narrow"]), .af-shell-cols.has-panel[data-layout="panel-start"] { grid-template-columns: minmax(0, 1fr); }
    .af-shell-cols.has-panel[data-layout="panel-start"] > .af-side { order: 0; }
    /* d-anatomy ([AF-188]): with the first secondary in the row at every width, the head's acts are their own row beneath
       the title at compact on EVERY page — the primary at that row's end edge, never a title shattered beside two acts and a toggle */
    .af-shell-titlerow { flex-wrap: wrap; }
    .af-shell-actions { flex: 1 1 100%; margin-inline-start: 0; justify-content: flex-end; }
    .af-shell-segmented { flex: 1 1 100%; margin-inline-start: 0; }   /* d-today: the segmented control full width beneath the subline at compact */
    .af-shell-segmented .af-tabs[data-variant="pills"] .af-tablist { display: flex; }   /* outranks the pills rule's inline-flex */
    .af-shell-segmented .af-tab { flex: 1 1 0; }
    /* d-head2 (row 135; [AF-308] amended): THE TITLE'S FLOOR STOPS HERE. With the acts on their own row the title has the whole
       width and no act to hold the floor against — yet 20ch of the title's face is wider than a 320–360 px page under CI's fonts
       (v0.1.27's publish: thirteen facts at 360 and A5 at 320 red on Linux, green on Windows), so at compact the title and the
       heading give the floor back and the title wraps its words; a word wider than the page breaks as `break-word` lets it */
    .af-shell-title, .af-shell-heading { min-width: 0; }
}

/* ---- side panel: a column beside the body; a bottom sheet at compact (measured on the page) ------------------- */
.af-side { border: var(--af-side-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-side-border-radius, var(--shape-radius-plane)); background: var(--af-side-background, var(--surface-plane)); }
.af-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--af-side-head-gap, var(--space-2)); padding: var(--af-side-head-padding, var(--space-3) var(--space-4)); border-bottom: var(--af-side-head-border-bottom, var(--shape-border-width) solid var(--border-hairline)); }
.af-side-title { font: var(--af-side-title-font, var(--type-body)); color: var(--af-side-title-color, var(--text-ink)); margin: 0; }
.af-side-toggle { display: none; background: var(--af-side-toggle-background, var(--surface-plane)); border: var(--af-side-toggle-border, var(--shape-border-width) solid var(--border-default)); border-radius: var(--af-side-toggle-border-radius, var(--radius-sm)); color: var(--af-side-toggle-color, var(--text-body)); font: var(--af-side-toggle-font, var(--type-caption)); padding: var(--af-side-toggle-padding, var(--space-1) var(--space-3)); cursor: pointer; }
.af-side-face, .af-side-body { padding: var(--af-side-face-padding, var(--space-4)); }   /* the face (p-grammar4 [AF-163]): the panel's first block, shown on the closed sheet */
.af-side-face + .af-side-body { padding-top: 0; }
@container af-page (width < 640px) {
    .af-side { position: sticky; bottom: 0; border-radius: var(--af-side-at-to640-border-radius, var(--shape-radius-sheet) var(--shape-radius-sheet) 0 0); box-shadow: var(--af-side-at-to640-box-shadow, var(--elevation-overlay)); z-index: 2; }
    .af-side-toggle { display: inline-flex; align-items: center; text-decoration: var(--af-side-toggle-at-to640-text-decoration, none); }
    .af-side:not(.is-open) .af-side-body, .af-side:not(.is-open) .af-side-face .af-meter-rows { display: none; }   /* the face keeps the meter's track; its rows open with the sheet */
    /* d-dbq-head (row 231 (5)): a sticky sheet taller than the screen has no way to its top, however the page scrolls; it scrolls within itself */
    .af-side.is-open:not([data-variant="narrow"]) { max-block-size: var(--af-side-is-open-not-variant-narrow-at-to640-max-block-size, var(--panel-sheet-max)); overflow-y: auto; }
}
/* folded (p-grammar4 [AF-165]): while the viewer or the sheet is open beside the page the panel keeps its face alone at every
   width — the toggle opens the rest in place */
.af-side.is-folded .af-side-toggle { display: inline-flex; align-items: center; text-decoration: var(--af-side-is-folded-side-toggle-text-decoration, none); }
.af-side.is-folded:not(.is-open) .af-side-body, .af-side.is-folded:not(.is-open) .af-side-face .af-meter-rows { display: none; }
.af-shell-cols.has-panel:has(> .af-side.is-folded) { grid-template-columns: var(--af-shell-cols-has-panel-has-side-is-folded-grid-template-columns, minmax(0, 1fr) var(--panel-width-narrow)); }
@container af-page (width < 640px) { .af-shell-cols.has-panel:has(> .af-side.is-folded) { grid-template-columns: minmax(0, 1fr); } }   /* d-clinical-compact (row 232): below 640 the strip is a row, or the viewer open at 360 wraps the page by the letter */

/* d-dbq-head (row 231 (4), (5); [AF-478]; J1b exam-dbq-id at 1200, 800, 360, -packet): THE NARROW PANEL. Beside the form it is the heading and
   any placed act on one line ABOVE one card, the card drawn behind the face and the rest, so the aside itself is no plane. Folded beside the packet it is
   one card on one line above the form: the heading, the segments, the figure, *Show*. Under a 640 page it is the same card at the head of the body, in
   the page's flow, never a sheet pinned over the form: the heading, the figure and *Show*; the segments; the rows when open; the placed act. */
@container af-page (width >= 640px) {
    .af-side[data-variant="narrow"]:not(.is-folded) { display: grid; grid-template-columns: minmax(0, 1fr); background: none; border: 0; border-radius: 0; box-shadow: none; }
    .af-side[data-variant="narrow"]:not(.is-folded)::before { content: ""; grid-area: 2 / 1 / span 2; background: var(--af-side-variant-narrow-not-is-folded-before-at-from640-background, var(--surface-plane)); border: var(--af-side-variant-narrow-not-is-folded-before-at-from640-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-side-variant-narrow-not-is-folded-before-at-from640-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-side-variant-narrow-not-is-folded-before-at-from640-box-shadow, var(--elevation-plane)); }
    .af-side[data-variant="narrow"]:not(.is-folded) > .af-side-head { grid-area: 1 / 1; box-sizing: content-box; min-block-size: var(--target-min); padding: var(--af-side-variant-narrow-not-is-folded-side-head-at-from640-padding, 0 0 var(--space-2)); border-bottom: 0; }
    .af-side[data-variant="narrow"]:not(.is-folded) > .af-side-face { grid-area: 2 / 1; min-width: 0; }
    .af-side[data-variant="narrow"]:not(.is-folded) > .af-side-body { grid-area: 3 / 1; min-width: 0; }
    .af-side[data-variant="narrow"].is-folded { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-side-variant-narrow-is-folded-at-from640-gap, var(--space-2) var(--space-4)); padding: var(--af-side-variant-narrow-is-folded-at-from640-padding, var(--space-3) var(--space-4)); }
    .af-side[data-variant="narrow"].is-folded :is(.af-side-head, .af-side-face, .af-meter, .af-meter-census) { display: contents; }
    .af-side[data-variant="narrow"].is-folded .af-meter-segments { order: 1; flex: 1 1 0; min-width: 0; }
    .af-side[data-variant="narrow"].is-folded .af-meter-figure { order: 2; }
    .af-side[data-variant="narrow"].is-folded .af-side-toggle { order: 3; }
    .af-side[data-variant="narrow"].is-folded .af-meter-rows { order: 4; flex: 1 1 100%; margin: 0; }
    .af-side[data-variant="narrow"].is-folded .af-side-body { order: 5; flex: 1 1 100%; padding: 0; }
    .af-side[data-variant="narrow"].is-folded .af-side-head > .af-act { order: 6; margin-inline-start: auto; }
    .af-side[data-variant="narrow"].is-folded:not(.is-open) .af-side-head > .af-act:has(> [aria-expanded="false"]) { display: none; }   /* J1b -packet: no act on the closed strip */
    .af-shell-cols.has-sheet.has-panel:has(> .af-side[data-variant="narrow"]) { grid-template-columns: var(--kit-shell-cols-has-sheet-has-panel-has-side-variant-narrow-at-from640-grid-template-columns, minmax(0, 1fr) var(--panel-width-side-narrow)); grid-template-rows: auto 1fr; row-gap: var(--kit-shell-cols-has-sheet-has-panel-has-side-variant-narrow-at-from640-row-gap, var(--space-4)); }   /* J1b -remarks: the sheet takes the panel's column, the panel folded beneath it */
    .af-shell-cols.has-sheet.has-panel:has(> .af-side[data-variant="narrow"]) > .af-shell-main { grid-row: 1 / span 2; }
    .af-shell-cols.has-sheet.has-panel:has(> .af-side[data-variant="narrow"]) > :is(.af-sheet, .af-side) { grid-column: 2; margin-top: 0; }
    .af-shell-cols.has-sheet .af-side[data-variant="narrow"].is-folded .af-meter-segments { display: none; }
    .af-shell-cols.has-sheet .af-side[data-variant="narrow"].is-folded { column-gap: var(--af-shell-cols-has-sheet-side-variant-narrow-is-folded-at-from640-column-gap, var(--space-2)); }
    .af-shell-cols.has-sheet .af-side[data-variant="narrow"].is-folded .af-side-toggle { margin-inline-start: auto; }
}
@container af-page (640px <= width < 1024px) {
    .af-shell-cols.has-sheet.has-panel:has(> .af-side[data-variant="narrow"]) { grid-template-columns: var(--kit-shell-cols-has-sheet-has-panel-has-side-variant-narrow-at-to1024-grid-template-columns, minmax(0, 1fr) var(--panel-width-side-narrow-medium)); }
}
@container af-page (width < 640px) {
    .af-shell-cols.has-panel > .af-side[data-variant="narrow"] { order: -1; position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--af-shell-cols-has-panel-side-variant-narrow-at-to640-gap, var(--space-2) var(--space-3)); padding: var(--af-shell-cols-has-panel-side-variant-narrow-at-to640-padding, var(--space-3) var(--space-4)); border-radius: var(--af-shell-cols-has-panel-side-variant-narrow-at-to640-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-shell-cols-has-panel-side-variant-narrow-at-to640-box-shadow, var(--elevation-plane)); }
    .af-side[data-variant="narrow"] :is(.af-side-head, .af-side-face, .af-meter, .af-meter-census) { display: contents; }
    .af-side[data-variant="narrow"] .af-meter-figure { order: 1; }
    .af-side[data-variant="narrow"] .af-side-toggle { order: 2; margin-inline-start: auto; }
    .af-side[data-variant="narrow"] .af-meter-segments { order: 3; flex: 1 1 100%; }
    .af-side[data-variant="narrow"] .af-meter-rows { order: 4; flex: 1 1 100%; margin: 0; }
    .af-side[data-variant="narrow"] .af-side-body { order: 5; flex: 1 1 100%; padding: 0; }
    .af-side[data-variant="narrow"] .af-side-head > .af-act { order: 6; margin-inline-start: auto; }
    .af-side[data-variant="narrow"] .af-side-head .af-act .syn-btn.af-action { min-height: var(--target-min); padding-inline: 0; background: none; border-color: transparent; box-shadow: none; color: var(--af-side-variant-narrow-side-head-act-btn-action-at-to640-color, var(--accent-action)); }
    .af-side[data-variant="narrow"] .af-meter-figure { margin: 0; align-items: baseline; gap: var(--af-side-variant-narrow-meter-figure-at-to640-gap, var(--space-1)); }
    .af-side[data-variant="narrow"] .af-meter-count { font: var(--af-side-variant-narrow-meter-count-at-to640-font, var(--type-body)); font-weight: var(--af-side-variant-narrow-meter-count-at-to640-font-weight, var(--type-heading-weight)); }
}
/* the strip's words, wherever it is drawn: the heading at its rung, *Show* the accent's text act; folded, the figure on the line */
.af-side[data-variant="narrow"] .af-side-title { font: var(--af-side-variant-narrow-side-title-font, var(--type-heading)); }
.af-side[data-variant="narrow"] .af-side-toggle { min-inline-size: var(--target-min); justify-content: flex-end; padding: 0; background: none; border: 0; color: var(--af-side-variant-narrow-side-toggle-color, var(--accent-action)); font: var(--af-side-variant-narrow-side-toggle-font, var(--type-control)); }   /* a text act keeps a whole target, its word at the end edge */
.af-side[data-variant="narrow"].is-folded .af-meter-figure { margin: 0; align-items: baseline; gap: var(--af-side-variant-narrow-is-folded-meter-figure-gap, var(--space-1)); }
.af-side[data-variant="narrow"].is-folded .af-meter-count { font: var(--af-side-variant-narrow-is-folded-meter-count-font, var(--type-body)); font-weight: var(--af-side-variant-narrow-is-folded-meter-count-font-weight, var(--type-heading-weight)); }
.af-shell-cols.has-panel:not(.has-sheet):has(> .af-side[data-variant="narrow"].is-folded) { grid-template-columns: minmax(0, 1fr); }   /* J1b -packet: above the form and the viewer, across them */
.af-shell-cols.has-panel:not(.has-sheet) > .af-side[data-variant="narrow"].is-folded { order: -1; }
.af-side[data-variant="narrow"] .af-side-face > :not(.af-meter) { flex: 1 1 100%; min-inline-size: 0; }   /* d-clinical-compact (row 232): a face that is no meter takes its own line of the strip; with no basis it wrapped by the letter */

/* the field sheet (p-grammar4 [AF-169]; d-clinical-compact, row 232, [AF-487]; J1b's -remarks): a sheet over one field beside the body while open — from 640 up it takes the
   panel's column (320 at wide, 256 at medium), the panel folded beneath it, its title above an accent-edged plane; below 640 a bottom sheet over the page's scrim */
.af-shell-cols.has-sheet, .af-shell-cols.has-sheet.has-panel, .af-shell-cols.has-sheet.has-panel:has(> .af-side) { grid-template-columns: var(--af-shell-cols-has-sheet-grid-template-columns, minmax(0, 1fr) var(--panel-width-side-narrow)); }
.af-shell-cols.has-sheet.has-panel { grid-template-rows: auto minmax(0, 1fr); row-gap: var(--af-shell-cols-has-sheet-has-panel-row-gap, var(--space-4)); }
.af-shell-cols.has-sheet > .af-shell-main { grid-row: 1 / span 2; }
.af-shell-cols.has-sheet > :is(.af-sheet, .af-side) { grid-column: 2; }
.af-sheet { display: flex; flex-direction: column; gap: var(--af-sheet-gap, var(--space-2)); min-width: 0; box-shadow: none; }
.af-sheet-plane { display: flex; flex-direction: column; gap: var(--af-sheet-plane-gap, var(--space-3)); min-width: 0; padding: var(--af-sheet-plane-padding, var(--space-4)); border: var(--af-sheet-plane-border, var(--shape-border-width) solid var(--border-emphasis)); border-radius: var(--af-sheet-plane-border-radius, var(--shape-radius-plane)); background: var(--af-sheet-plane-background, var(--surface-plane)); box-shadow: var(--af-sheet-plane-box-shadow, var(--elevation-plane)); }
.af-sheet-title { display: flex; align-items: center; gap: var(--af-sheet-title-gap, var(--space-2)); margin: 0; font: var(--af-sheet-title-font, var(--type-heading)); color: var(--af-sheet-title-color, var(--text-ink)); }
.af-sheet .syn-field-label { position: absolute; inline-size: var(--af-sheet-field-label-inline-size, var(--shape-border-width)); block-size: var(--af-sheet-field-label-block-size, var(--shape-border-width)); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the sheet's title is its field's name; the label stays for assistive technology */
.af-sheet textarea.syn-input:not(.syn-wrapentry) { min-block-size: calc(var(--target-min) * 5); }
.af-sheet-foot { display: flex; justify-content: flex-end; }
.af-sheet-hide { display: inline-flex; align-items: center; min-block-size: var(--target-min); padding-inline: var(--af-sheet-hide-padding-inline, var(--space-2)); margin-inline-end: var(--af-sheet-hide-margin-inline-end, calc(-1 * var(--space-2))); border: 0; background: none; color: var(--af-sheet-hide-color, var(--accent-action)); font: var(--af-sheet-hide-font, var(--type-control)); text-decoration: var(--af-sheet-hide-text-decoration, none); cursor: pointer; }
.af-sheet-hide:hover { text-decoration: var(--af-sheet-hide-hover-text-decoration, underline); }
.af-sheet-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-sheet-chips-gap, var(--space-2)); }
.af-sheet-chips-label { flex: 1 1 100%; font: var(--af-sheet-chips-label-font, var(--type-label)); letter-spacing: var(--af-sheet-chips-label-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-sheet-chips-label-text-transform, var(--type-label-transform)); color: var(--af-sheet-chips-label-color, var(--text-tertiary)); }
.af-sheet-chip { display: inline-flex; align-items: center; gap: var(--af-sheet-chip-gap, var(--space-1)); min-height: var(--target-min); padding: var(--af-sheet-chip-padding, 0 var(--space-3)); border: var(--af-sheet-chip-border, var(--shape-border-width) solid transparent); border-radius: var(--af-sheet-chip-border-radius, var(--shape-radius-pill)); background: var(--af-sheet-chip-background, var(--surface-inset)); color: var(--af-sheet-chip-color, var(--text-ink)); font: var(--af-sheet-chip-font, var(--type-label)); cursor: pointer; }
@container af-page (width < 1024px) {
    .af-shell-cols.has-sheet, .af-shell-cols.has-sheet.has-panel, .af-shell-cols.has-sheet.has-panel:has(> .af-side) { grid-template-columns: var(--af-shell-cols-has-sheet-at-to1024-grid-template-columns, minmax(0, 1fr) var(--panel-width-side-narrow-medium)); }
}
@container af-page (width < 640px) {
    .af-shell-cols.has-sheet, .af-shell-cols.has-sheet.has-panel, .af-shell-cols.has-sheet.has-panel:has(> .af-side) { grid-template-columns: minmax(0, 1fr); }
    .af-shell-cols.has-sheet.has-panel { grid-template-rows: none; }
    .af-shell-cols.has-sheet > .af-shell-main { grid-row: auto; }
    .af-shell-cols.has-sheet > .af-side { grid-column: auto; }
    .af-shell-cols.has-sheet > .af-sheet { grid-column: auto; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20; max-block-size: var(--af-shell-cols-has-sheet-sheet-at-to640-max-block-size, 70dvh); overflow: auto; box-sizing: border-box; gap: var(--af-shell-cols-has-sheet-sheet-at-to640-gap, var(--space-3)); padding: var(--af-shell-cols-has-sheet-sheet-at-to640-padding, var(--space-5) var(--space-4) var(--space-3)); border-radius: var(--af-shell-cols-has-sheet-sheet-at-to640-border-radius, var(--shape-radius-sheet) var(--shape-radius-sheet) 0 0); background: var(--af-shell-cols-has-sheet-sheet-at-to640-background, var(--surface-plane)); box-shadow: var(--af-shell-cols-has-sheet-sheet-at-to640-box-shadow, var(--scrim-spread)); }
    .af-shell-cols.has-sheet > .af-sheet::before { content: ""; align-self: center; flex: none; inline-size: var(--af-shell-cols-has-sheet-sheet-before-at-to640-inline-size, var(--space-7)); block-size: var(--af-shell-cols-has-sheet-sheet-before-at-to640-block-size, var(--space-1)); margin-block-end: var(--af-shell-cols-has-sheet-sheet-before-at-to640-margin-block-end, var(--space-1)); border-radius: var(--af-shell-cols-has-sheet-sheet-before-at-to640-border-radius, var(--shape-radius-pill)); background: var(--af-shell-cols-has-sheet-sheet-before-at-to640-background, var(--border-strong)); }
    .af-shell-cols.has-sheet > .af-sheet .af-sheet-plane { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}

/* the collapsed side-by-side viewer ([AF-165]): the blocks beside it stand alone until the act opens it */
.af-docviewer.is-collapsed > .af-block + .af-block { margin-top: var(--af-docviewer-is-collapsed-block-block-margin-top, var(--space-4)); }

/* ---- field grid: 2 group columns at wide and medium (dense 3 at wide), 1 at compact, 3 (dense 4) at extra-wide ---- */
.af-fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--af-fieldgrid-gap, var(--space-4) var(--space-6)); }
.af-fieldgrid[data-variant="dense"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--af-fieldgrid-variant-dense-gap, var(--space-3) var(--space-5)); }
.af-fieldgroup { min-width: 0; }
/* p-host-fix (CI 41088945424, Linux only): inside a field grid's column the carried 132 px label yields to the value — a
   210 px column at medium left the control 68 px, and a phone shattered to three lines under the runner's wider fallback face
   (no Source Sans 3 there); the label column follows the label's text up to two fifths of the row, in any face */
.af-fieldgrid .syn-identity-grid.is-admin > .syn-ef { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
.af-fieldgrid .syn-ef-label { width: auto; }
.af-fieldgroup.is-span-2 { grid-column: 1 / -1; }
.af-fieldgroup-title { font: var(--af-fieldgroup-title-font, var(--type-label)); letter-spacing: var(--af-fieldgroup-title-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-fieldgroup-title-text-transform, var(--type-label-transform)); color: var(--af-fieldgroup-title-color, var(--text-tertiary)); margin: var(--af-fieldgroup-title-margin, 0 0 var(--space-2)); }
/* d-readonly (row 153; [AF-337]; J1a's request page): THE READONLY GROUP AS HARBOR DRAWS IT — the heading outside the plane at
   the block title's rung in the ink (*Status*, *History*: one heading treatment per page, [AF-139] (1)), the plane the card's (surface,
   edge, radius, elevation, inset); inside, one label/value geometry per plane — the plane is the two columns, a field and a repeated
   item take them (subgrid), so every value starts at one x; a Wide field and the exchange keep their own faces. At compact the label
   stands above its value. */
.af-fieldgrid[data-variant="readonly"] .af-fieldgroup-title { font: var(--af-fieldgrid-variant-readonly-fieldgroup-title-font, var(--type-heading)); margin: var(--af-fieldgrid-variant-readonly-fieldgroup-title-margin, 0 0 var(--block-title-gap)); letter-spacing: normal; text-transform: var(--af-fieldgrid-variant-readonly-fieldgroup-title-text-transform, none); color: var(--af-fieldgrid-variant-readonly-fieldgroup-title-color, var(--text-ink)); }
/* d-demo-fix (row 193, [AF-386]; J3a): a page's section card titles its plane at the heading rung, as a read-only group does — the
   10 px chrome label stays the component's own (a modal's, a profile's); J3a's *When and where*, *Open times*, *Status* at 18/600 */
:is(.af-block.af-section, [data-block="section"]) > .syn-section-card > .syn-section-head .syn-section-title { font: var(--kit-block-section-section-card-section-head-section-title-font, var(--type-heading)); letter-spacing: normal; text-transform: var(--kit-block-section-section-card-section-head-section-title-text-transform, none); color: var(--kit-block-section-section-card-section-head-section-title-color, var(--text-ink)); }
.af-fieldgrid[data-variant="readonly"] .af-fieldgroup-plane { padding: var(--af-fieldgrid-variant-readonly-fieldgroup-plane-padding, var(--space-4) var(--space-5)); background: var(--af-fieldgrid-variant-readonly-fieldgroup-plane-background, var(--surface-plane)); border: var(--af-fieldgrid-variant-readonly-fieldgroup-plane-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-fieldgrid-variant-readonly-fieldgroup-plane-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-fieldgrid-variant-readonly-fieldgroup-plane-box-shadow, var(--elevation-plane)); min-width: 0; }
.af-fieldgrid[data-variant="readonly"] .af-fieldgroup-plane > .syn-identity-gridwrap > .syn-identity-grid,
.af-fieldgrid[data-variant="readonly"] .af-repeat:not([data-variant="exchange"]) > .af-fieldgroup-plane { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); column-gap: var(--kit-fieldgroup-plane-identity-gridwrap-identity-grid-column-gap, var(--space-4)); }
.af-fieldgrid[data-variant="readonly"] .af-fieldro:not(.is-wide):not(.is-bare),
.af-fieldgrid[data-variant="readonly"] .af-repeat:not([data-variant="exchange"]) .af-repeat-item { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; }
.af-fieldgrid[data-variant="readonly"] .af-fieldro.is-wide, .af-fieldgrid[data-variant="readonly"] .af-repeat-item > .af-repeat-actions, .af-fieldgrid[data-variant="readonly"] .af-repeat-none { grid-column: 1 / -1; }
@container block (width < 640px) {
    .af-fieldgrid[data-variant="readonly"] .af-fieldgroup-plane > .syn-identity-gridwrap > .syn-identity-grid,
    .af-fieldgrid[data-variant="readonly"] .af-repeat:not([data-variant="exchange"]) > .af-fieldgroup-plane { grid-template-columns: minmax(0, 1fr); }
    .af-fieldgrid[data-variant="readonly"] .af-fieldro:not(.is-bare) { display: flex; flex-direction: column; align-items: stretch; gap: var(--af-fieldgrid-variant-readonly-fieldro-not-is-bare-at-to640-gap, var(--space-1)); }
}
/* d-nits (row 202; the review's #17; J1b exam-dbq-id-sign at 1200, 800 and 360): under the review layout the start pane's readonly plane —
   the signer of record — keeps its two columns (label · value) at every width; the pane is narrower than the block's 640 fold at 1200 */
.af-review-start .af-fieldgrid[data-variant="readonly"] .af-fieldgroup-plane > .syn-identity-gridwrap > .syn-identity-grid { grid-template-columns: minmax(max-content, 1fr) minmax(0, 2fr); column-gap: var(--kit-fieldgroup-plane-identity-gridwrap-identity-grid-column-gap-2, var(--space-4)); }   /* J1b: the labels a third of the plane */
.af-review-start .af-fieldgrid[data-variant="readonly"] .af-fieldro:not(.is-wide):not(.is-bare) { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; column-gap: var(--kit-variant-readonly-fieldro-not-is-wide-not-is-bare-column-gap, var(--space-4)); }
/* d-exam-faces2 (row 225, [AF-493]; J1a's contentions, J1c's licenses at 1200 and 800): AN ITEM NAMED BY ITS FIRST FIELD — the name's value alone at the heading
   rung, its facts the plane's two columns beneath it (`named`), or the name a fixed column beside them, so every plane on the page keeps one x (`named-beside`, the
   labels' column the card fact's); a hairline between items. Under a 640 block the name stands over its facts. */
.af-fieldgrid[data-variant="readonly"] .af-repeat:is([data-variant="named"], [data-variant="named-beside"]) .af-repeat-item { align-items: start; row-gap: 0; padding-block: var(--kit-is-variant-named-variant-named-beside-repeat-item-padding-block, var(--space-4)); border-top-color: var(--kit-is-variant-named-variant-named-beside-repeat-item-border-top-color, var(--border-hairline)); }
.af-fieldgrid[data-variant="readonly"] .af-repeat:is([data-variant="named"], [data-variant="named-beside"]) .af-repeat-item:first-of-type { padding-block-start: 0; }
.af-fieldgrid[data-variant="readonly"] .af-repeat:is([data-variant="named"], [data-variant="named-beside"]) .af-repeat-item:last-of-type { padding-block-end: 0; }
.af-repeat-name { grid-column: 1 / -1; min-width: 0; }
.af-repeat-name :is(.syn-ef-control, .syn-value, .af-fieldro-derived) { font: var(--af-repeat-name-is-ef-control-value-fieldro-derived-font, var(--type-heading)); color: var(--af-repeat-name-is-ef-control-value-fieldro-derived-color, var(--text-ink)); }
.af-repeat-facts { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; min-width: 0; }
.af-fieldgrid[data-variant="readonly"] .af-repeat[data-variant="named-beside"] > .af-fieldgroup-plane { grid-template-columns: var(--kit-readonly-repeat-variant-named-beside-fieldgroup-plane-grid-template-columns, var(--repeat-name) var(--card-label) minmax(0, 1fr)); }
.af-repeat[data-variant="named-beside"] .af-repeat-name { grid-column: 1; }
.af-repeat[data-variant="named-beside"] .af-repeat-facts { grid-column: 2 / -1; }
@container block (width < 640px) {
    .af-fieldgrid[data-variant="readonly"] .af-repeat[data-variant="named-beside"] > .af-fieldgroup-plane { grid-template-columns: minmax(0, 1fr); }
    .af-repeat[data-variant="named-beside"] .af-repeat-name, .af-repeat[data-variant="named-beside"] .af-repeat-facts { grid-column: 1 / -1; }
}
/* p-acts ([AF-128]): a repeated group — one row of label/value pairs per item, separated by the hairline */
.af-repeat-item { display: flex; flex-wrap: wrap; gap: var(--af-repeat-item-gap, var(--space-2) var(--space-4)); padding: var(--af-repeat-item-padding, var(--space-2) 0); border-top: var(--af-repeat-item-border-top, var(--shape-border-width) solid var(--border-default)); }
.af-repeat-item > .syn-ef { flex: 1 1 0; min-width: 0; }
.af-repeat-item:first-of-type { border-top: 0; }
.af-repeat-none { color: var(--af-repeat-none-color, var(--text-muted)); font: var(--af-repeat-none-font, var(--type-body)); margin: 0; }
/* p-acts ([AF-129]): a cell's tone — the column's EmphasisWhen per row; the word is the cell's own text (A7) */
.syn-listgrid-cell[data-tone="attention"] { color: var(--syn-listgrid-cell-tone-attention-color, var(--state-warning-text)); background: var(--syn-listgrid-cell-tone-attention-background, var(--attention-tint)); }
.syn-listgrid-cell[data-tone="warning"] { color: var(--syn-listgrid-cell-tone-warning-color, var(--state-warning-text)); background: var(--syn-listgrid-cell-tone-warning-background, var(--warning-tint)); }
.syn-listgrid-cell[data-tone="success"] { color: var(--syn-listgrid-cell-tone-success-color, var(--state-success)); }
.syn-listgrid-cell[data-tone="muted"] { color: var(--syn-listgrid-cell-tone-muted-color, var(--text-muted)); }
.syn-listgrid-cell[data-tone="info"] { color: var(--syn-listgrid-cell-tone-info-color, var(--state-info-text)); background: var(--syn-listgrid-cell-tone-info-background, var(--state-info-tint)); }
/* a readonly field's tone ([AF-155]): the value wears it, the label stays the label treatment ([AF-139] (1)) */
/* d-exam-faces2 (row 225, [AF-496]; J1a's *Required*, J1c's *Current*): the word wears its tone's ink at the heading's weight, the flag before an Attention word and
   no tint behind it (the portal's band, is-flag, keeps its own); a value's own ink yields to the tone, which a field's tone never reached before */
.af-fieldro[data-tone] .syn-ef-control .syn-value { color: inherit; font-weight: inherit; }
.af-fieldro[data-tone="attention"]:not(.is-flag) .syn-ef-control { color: var(--af-fieldro-tone-attention-not-is-flag-ef-control-color, var(--state-attention-text)); font-weight: var(--af-fieldro-tone-attention-not-is-flag-ef-control-font-weight, var(--type-heading-weight)); }
.af-fieldro[data-tone="attention"] .syn-ef-control:has(> .syn-icon) { display: flex; align-items: center; gap: var(--af-fieldro-tone-attention-ef-control-has-icon-gap, var(--space-2)); }
.af-fieldro[data-tone="warning"] .syn-ef-control { color: var(--af-fieldro-tone-warning-ef-control-color, var(--state-warning-text)); background: var(--af-fieldro-tone-warning-ef-control-background, var(--warning-tint)); }
.af-fieldro[data-tone="success"] .syn-ef-control { color: var(--af-fieldro-tone-success-ef-control-color, var(--state-success-text)); font-weight: var(--af-fieldro-tone-success-ef-control-font-weight, var(--type-heading-weight)); }
.af-fieldro[data-tone="muted"] .syn-ef-control { color: var(--af-fieldro-tone-muted-ef-control-color, var(--text-muted)); }
.af-fieldro[data-tone="info"] .syn-ef-control { color: var(--af-fieldro-tone-info-ef-control-color, var(--state-info-text)); background: var(--af-fieldro-tone-info-ef-control-background, var(--state-info-tint)); }
.af-fieldgrid > .af-proposals { grid-column: 1 / -1; }
@container block (width >= 1440px) {
    .af-fieldgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .af-fieldgrid[data-variant="dense"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container block (width < 1024px) {
    .af-fieldgrid, .af-fieldgrid[data-variant="dense"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container block (width < 640px) {
    .af-fieldgrid, .af-fieldgrid[data-variant="dense"] { grid-template-columns: minmax(0, 1fr); }
}

/* ---- list: the bulk bar, the selected row, the row actions in the row's end cell (d-flag-row, row 146) ------------- */
.af-list-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-list-bulk-gap, var(--space-2)); padding: var(--af-list-bulk-padding, 0 0 var(--space-2)); }
.af-list-count { font: var(--af-list-count-font, var(--type-label)); color: var(--af-list-count-color, var(--text-muted)); margin-right: var(--af-list-count-margin-right, var(--space-2)); }
.af-list .syn-listgrid-row.is-selected > td { background: var(--af-list-listgrid-row-is-selected-td-background, var(--accent-muted)); }
/* d-panels-cards (row 215 (c), [AF-423]; J1a exam-requests-id-packet; the audit's #16 item 2): A PAGE'S TABLE IS ITS PLANE —
   the plane's edge and shadow, never the softened grid's border-default frame; the head on the plane (no band) over a hairline, no column
   rule between heads; the row's first cell (the name) at the heading weight in the ink; the cells on the row's middle. Inside a plane already it draws no frame of its own.
   The Synergy directories and the pipeline keep the softened grid (they are not `.af-list`). */
.af-list .syn-listgrid.syn-listgrid-dx { border-color: var(--af-list-listgrid-listgrid-dx-border-color, var(--plane-edge)); box-shadow: var(--af-list-listgrid-listgrid-dx-box-shadow, var(--elevation-plane)); }
:is(.af-section, .af-side, .af-card-slot) .af-list .syn-listgrid.syn-listgrid-dx { border: 0; border-radius: 0; box-shadow: none; }
.af-list .syn-listgrid.syn-listgrid-dx .syn-listgrid-head, .af-list .syn-listgrid.syn-listgrid-dx th.syn-listgrid-th, .af-list .syn-listgrid.syn-listgrid-dx th.syn-listgrid-filler { background-color: var(--af-list-listgrid-listgrid-dx-listgrid-head-background-color, var(--surface-plane)); }
/* AF-2035 (Harbor's ListBlock grid) with [AF-1031] (3): the header row on the plane over a hairline, and between heading cells the faint
   hairline that marks the grab (visible without hover, never before the first); the body rows hairline-ruled, no column rule */
.af-list .syn-listgrid.syn-listgrid-dx th.syn-listgrid-th, .af-list .syn-listgrid.syn-listgrid-dx th.syn-listgrid-filler { border-left-color: var(--af-list-listgrid-listgrid-dx-th-listgrid-th-border-left-color, var(--border-hairline)); border-bottom-color: var(--af-list-listgrid-listgrid-dx-th-listgrid-th-border-bottom-color, var(--border-hairline)); }
.af-list .syn-listgrid.syn-listgrid-dx th.syn-listgrid-th:first-child { border-left-width: 0; }
.af-list .syn-listgrid.syn-listgrid-dx td.syn-listgrid-cell:first-child { color: var(--kit-list-listgrid-listgrid-dx-td-listgrid-cell-first-child-color, var(--text-ink)); }   /* AF-2035: the row's first cell in the ink at the body weight (Harbor's `td.ink`; one bold line per unit is the card's, not the grid's) */
.af-list .syn-listgrid.syn-listgrid-dx td.syn-listgrid-cell { vertical-align: middle; }   /* J1a: a row's words and its *Open ›* on the row's middle, a two-line type beside them */
.af-list-footer { margin: var(--af-list-footer-margin, var(--space-2) 0 0); font: var(--af-list-footer-font, var(--type-label)); color: var(--af-list-footer-color, var(--text-muted)); }   /* the footer line, a template over the record */
/* the lens strip (d-lenses [AF-223]; Harbor: chips are pills with an inset fill when neutral, the accent on the selected
   filter alone): the pills wrap at compact as the comp draws them; the one in view wears the accent's tint, ink and edge */
.af-lenses { display: flex; flex-wrap: wrap; gap: var(--af-lenses-gap, var(--space-2)); margin: var(--af-lenses-margin, 0 0 var(--space-3)); }
/* AF-2033 (Harbor's Chip; [AF-2175]): THE CHIP'S ONE FACE — a pill on the inset fill with no frame, the label rung in the ink, the
   target's height; the lens strip, a list's filter pills and the board's filter chips are this face, each rule below keeps its own layout only */
.af-chip, .af-lens, .af-board-filterchip { display: inline-flex; align-items: center; gap: var(--af-chip-gap, var(--space-1)); min-height: var(--target-min); padding: var(--af-chip-padding, 0 var(--space-3)); border: var(--af-chip-border, var(--shape-border-width) solid transparent); border-radius: var(--af-chip-border-radius, var(--shape-radius-pill)); background: var(--af-chip-background, var(--surface-inset)); color: var(--af-chip-color, var(--text-ink)); font: var(--af-chip-font, var(--type-label)); text-decoration: var(--af-chip-text-decoration, none); white-space: nowrap; cursor: pointer; }
.af-chip:hover, .af-lens:hover, .af-board-filterchip:hover { background: var(--af-chip-hover-background, var(--surface-hover)); }
.af-lens.is-current { background: var(--af-lens-is-current-background, var(--accent-action)); color: var(--af-lens-is-current-color, var(--text-on-accent)); }   /* the lens in view wears the accent (Harbor) */
.af-lens.is-current:hover { background: var(--af-lens-is-current-hover-background, var(--accent-action-hover)); }
.af-repeat-actions { margin-top: var(--af-repeat-actions-margin-top, var(--space-1)); justify-content: flex-end; }   /* a repeated item's acts, at its end edge ([AF-159]) */
/* the exchange ([AF-160]): a question and an answer per item — the question muted, the answer heavier behind a left rule, then one line */
.af-repeat[data-variant="exchange"] .af-repeat-item { display: flex; flex-direction: column; gap: var(--af-repeat-variant-exchange-repeat-item-gap, var(--space-1)); padding-block: var(--af-repeat-variant-exchange-repeat-item-padding-block, var(--space-2)); }
.af-repeat[data-variant="exchange"] .af-repeat-item > .syn-ef { flex: none; }   /* d-readonly: a part takes its content's height — the 30 px floor under a zero basis let a wrapped question run under its answer at 360 */
.af-repeat[data-variant="exchange"] .af-repeat-item + .af-repeat-item { border-top: var(--af-repeat-variant-exchange-repeat-item-repeat-item-border-top, var(--shape-border-width) solid var(--border-hairline)); }
.af-fieldro.is-bare { display: block; }
.af-fieldro.is-bare .syn-ef-control { font: var(--af-fieldro-is-bare-ef-control-font, var(--type-body)); }
.af-exchange-q .syn-ef-control { color: var(--af-exchange-q-ef-control-color, var(--text-muted)); }
.af-exchange-a { border-inline-start: var(--af-exchange-a-border-inline-start, var(--block-edge) solid var(--border-strong)); padding-inline-start: var(--af-exchange-a-padding-inline-start, var(--space-3)); }
.af-exchange-a .syn-ef-control { color: var(--af-exchange-a-ef-control-color, var(--text-ink)); font-weight: var(--af-exchange-a-ef-control-font-weight, var(--type-heading-weight)); }
.af-exchange-when { display: flex; flex-wrap: wrap; gap: var(--af-exchange-when-gap, var(--space-3)); }
.af-exchange-when .syn-ef-control { font: var(--af-exchange-when-ef-control-font, var(--type-label)); color: var(--af-exchange-when-ef-control-color, var(--text-tertiary)); }

/* ---- the cards face ([AF-186]; Ken's walk of /exam/today; the comp exam-today-light-1200.drawn.png): the card from the
   view's columns — the lead unit under one edge, the heading with its chip, the facts label-beside-value centered on each other,
   the acts stacked at the end edge with one reason beneath; three fixed columns so every card keeps one geometry ([AF-139] (a));
   the acts beneath as a row below wide, one column at compact (a side column that cannot hold its type collapses, never wraps) */
.af-cards { container: af-cards / inline-size; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--af-cards-gap, var(--space-4)); }   /* row 237: the card's own edge, queried of its list alone, as the board column's ([AF-271]) */
.af-card { display: grid; grid-template-columns: var(--af-card-grid-template-columns, var(--card-lead-measure) minmax(0, 1fr)); grid-template-areas: "lead body"; gap: var(--af-card-gap, var(--space-3) var(--space-5)); padding: var(--af-card-padding, var(--space-5)); background: var(--af-card-background, var(--surface-plane)); border: var(--af-card-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-card-border-radius, var(--shape-radius-plane)); min-width: 0; }
:where([data-density="clinical"]) .af-card { padding: var(--kit-where-density-clinical-af-card-padding, var(--space-gutter)); }   /* row 237 ([AF-521]; J1a, J1c): the density's own inset, 24 in every comp above the phone ([AF-468]'s named miss) */
.af-card.has-acts { grid-template-columns: var(--af-card-has-acts-grid-template-columns, var(--card-lead-measure) minmax(0, 1fr) var(--card-acts)); grid-template-areas: "lead body acts"; }
.af-card.has-slot { grid-template-areas: "lead body" "slot slot"; }   /* p-public ([AF-209]): the card's slot — a tracker or a ladder over the row — full width beneath, under a hairline */
.af-card.has-acts.has-slot { grid-template-areas: "lead body acts" "slot slot slot"; }
.af-card-slot { grid-area: slot; min-width: 0; padding-top: var(--af-card-slot-padding-top, var(--space-3)); border-top: var(--af-card-slot-border-top, var(--shape-border-width) solid var(--border-hairline)); }
.af-card-slot .af-block { margin: 0; }
.af-card.is-selected { background: var(--af-card-is-selected-background, var(--accent-muted)); }
.af-card-lead { grid-area: lead; display: flex; flex-direction: column; align-items: flex-start; gap: var(--af-card-lead-gap, var(--space-1)); min-width: 0; }   /* the parts of one fact share one edge */
.af-card-figure { font: var(--af-card-figure-font, var(--type-title)); color: var(--af-card-figure-color, var(--text-ink)); font-variant-numeric: var(--af-card-figure-font-variant-numeric, var(--type-numerals)); overflow-wrap: anywhere; }
.af-card.is-featured .af-card-figure { font: var(--af-card-is-featured-card-figure-font, var(--type-figure)); }   /* featured (row 237, [AF-519], amending [AF-157]; J1a draws the three alike): every card's figure one rung larger */
.af-card-figure[data-figure="text"] { font: var(--af-card-figure-figure-text-font, var(--type-heading)); }
.af-card-figure .syn-value { font: inherit; color: inherit; }   /* the figure's face reaches a field's own value (FieldValue's R6 kept a plain field's figure at the fact size) */   /* d-my-fixes (row 217, [AF-436]): a text figure — a name, a condition — at the heading rung (J2a's *Vertigo*); a clock and a date keep theirs */
.af-card-caption { font: var(--af-card-caption-font, var(--type-caption)); color: var(--af-card-caption-color, var(--text-muted)); }
/* p-public ([AF-210]): the STACKED decision form — the relative reading as a caption, the day as the figure, the time with its
   zone at the heading rung, the duration in body; each part one line ([AF-187] (9)); the prose day one line in body */
.af-date-decision { display: flex; flex-direction: column; align-items: flex-start; gap: var(--af-date-decision-gap, var(--space-1)); font: var(--af-date-decision-font, var(--type-body)); color: var(--af-date-decision-color, var(--text-ink)); }
.af-date-decision > span { white-space: nowrap; }
.af-date-rel { font: var(--af-date-rel-font, var(--type-caption)); color: var(--af-date-rel-color, var(--text-muted)); }
.af-date-day { font: var(--af-date-day-font, var(--type-figure)); font-variant-numeric: var(--af-date-day-font-variant-numeric, var(--type-numerals)); }
.af-date-time { font: var(--af-date-time-font, var(--type-heading)); }
.af-date-zone { font: var(--af-date-zone-font, var(--type-body)); color: var(--af-date-zone-color, var(--text-muted)); }
.af-date-until { font: var(--af-date-until-font, var(--type-body)); }
.af-card-figure .af-date-decision { font: var(--af-card-figure-date-decision-font, var(--type-body)); }
.af-date-slot .syn-ef-control { padding: 0; }
/* p-public2 (row 53): a field at the FIGURE rung — the label in the label treatment above, the value as the figure (the modal's Amount) */
.af-figure-slot { display: flex; flex-direction: column; gap: var(--af-figure-slot-gap, var(--space-1)); }
.af-figure-slot .syn-ef-control { padding: 0; }
.af-figure { font: var(--af-figure-font, var(--type-figure)); letter-spacing: var(--type-figure-tracking, normal); color: var(--af-figure-color, var(--text-ink)); font-variant-numeric: var(--af-figure-font-variant-numeric, tabular-nums); }
.syn-listgrid-cell .af-date-decision { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--syn-listgrid-cell-date-decision-column-gap, var(--space-2)); }   /* in a grid cell the parts sit in one line at body size */
.syn-listgrid-cell .af-date-day, .syn-listgrid-cell .af-date-time { font: var(--syn-listgrid-cell-date-day-font, var(--type-body)); }
.af-card-state { font: var(--af-card-state-font, var(--type-body)); color: var(--af-card-state-color, var(--text-ink)); margin-top: var(--af-card-state-margin-top, var(--space-2)); }
.af-card-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: var(--af-card-body-gap, var(--space-3)); }
.af-card-heading { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-card-heading-gap, var(--space-2)); font: var(--af-card-heading-font, var(--type-heading)); color: var(--af-card-heading-color, var(--text-ink)); overflow-wrap: anywhere; }   /* the card's one bold line */
.af-card-chip { display: inline-flex; align-items: center; gap: var(--af-card-chip-gap, var(--space-1)); font: var(--af-card-chip-font, var(--type-label)); letter-spacing: var(--af-card-chip-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-card-chip-text-transform, var(--type-label-transform)); padding: var(--af-card-chip-padding, var(--badge-inset)); border-radius: var(--af-card-chip-border-radius, var(--shape-radius-pill)); background: var(--af-card-chip-background, var(--state-info-tint)); color: var(--af-card-chip-color, var(--state-info-text)); }
.af-card-facts { margin: 0; display: flex; flex-direction: column; gap: var(--af-card-facts-gap, var(--space-2)); }
.af-card-fact { display: grid; grid-template-columns: var(--af-card-fact-grid-template-columns, var(--card-label) minmax(0, 1fr)); gap: var(--af-card-fact-gap, var(--space-3)); align-items: center; }   /* label and value centered on each other */
.af-card-label { display: flex; align-items: center; gap: var(--af-card-label-gap, var(--space-2)); font: var(--af-card-label-font, var(--type-label)); letter-spacing: var(--af-card-label-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-card-label-text-transform, var(--type-label-transform)); color: var(--af-card-label-color, var(--text-tertiary)); }   /* the label treatment, and nothing else wears it */
.af-card-label .syn-icon { flex: none; }
.af-card-value { margin: 0; font: var(--af-card-value-font, var(--type-body)); color: var(--af-card-value-color, var(--text-ink)); overflow-wrap: break-word; }   /* row 237 ([AF-520]; CP-221 (g)): *Interprete / r* broke inside the word */
.af-ref { font: inherit; color: var(--af-ref-color, var(--accent-action-active)); text-decoration: var(--af-ref-text-decoration, none); }   /* a reference as its label, linking to its page (row 87 (a)) */
.af-ref:hover, .af-ref:focus-visible { text-decoration: var(--af-ref-hover-text-decoration, underline); }
.af-card-value[data-tone="attention"], .af-card-state[data-tone="attention"] { color: var(--af-card-value-tone-attention-color, var(--state-warning-text)); }   /* a tone as text color only, the word beside it (A7) */
.af-card-value[data-tone="warning"], .af-card-state[data-tone="warning"] { color: var(--af-card-value-tone-warning-color, var(--state-warning-text)); }
.af-card-value[data-tone="success"] { color: var(--af-card-value-tone-success-color, var(--state-success-text)); }   /* row 237 ([AF-520]; J1a's *Packet received*): a word's ink, as Warning's beside it */
.af-card-state[data-tone="success"] { color: var(--af-card-state-tone-success-color, var(--state-success)); }
[data-density="clinical"] .af-card-fact:first-child .af-card-value, [data-density="clinical"] .af-card-value[data-tone]:not([data-tone="muted"]) { font-weight: var(--kit-density-clinical-af-card-fact-first-child-card-value-font-weight, var(--type-heading-weight)); }   /* row 237 ([AF-520]; J1a, J1c): what she is there to examine, and the one toned word */
[data-density="clinical"] .af-card-value .syn-value:not(.syn-mono) { font-weight: inherit; }
.af-card-value[data-tone="muted"], .af-card-state[data-tone="muted"] { color: var(--af-card-value-tone-muted-color, var(--text-muted)); }
.af-card-value[data-tone="info"], .af-card-state[data-tone="info"] { color: var(--af-card-value-tone-info-color, var(--state-info-text)); }
.af-card-acts { grid-area: acts; display: flex; flex-direction: column; align-items: stretch; gap: var(--af-card-acts-gap, var(--space-2)); min-width: 0; }
.af-card-acts .af-act { display: flex; }
.af-card-acts .af-action { flex: 1 1 auto; justify-content: center; }
.af-card-acts .af-action.is-primary.syn-seat-commit-pair-bordered { font-weight: var(--af-card-acts-action-is-primary-seat-commit-pair-bordered-font-weight, var(--type-heading-weight)); }   /* d-today ([AF-325]): the card's bordered primary says so by weight, and its chevron trails */
/* d-act-confirm (row 236, [AF-484]; J1a exam-today, measured): a staff card's acts as the comp draws them, the label at --card-act-size in the control rung's weight (the seat's 500 on
   no act) and each act the 44 floor and its edge (46 tall, no padding above or below); *Open ›* edged in border.default (#6c777a, #8b9497), never the seat's teal; the closed edge on the plane
   its own token, since the plane is not the canvas the head's closed acts stand on. A confirm stacks with the stack. */
.af-card-acts .af-action { font-weight: var(--af-card-acts-action-font-weight, var(--type-control-weight)); }
.af-card-acts:where(:not([data-density="public"] *)) .syn-btn.af-action { font-size: var(--af-card-acts-where-not-density-public-btn-action-font-size, calc(var(--card-act-size) * min(var(--density-type), 1))); min-height: max(var(--act-row-height), var(--target-min)); padding: var(--af-card-acts-where-not-density-public-btn-action-padding, 0 var(--space-4)); gap: var(--af-card-acts-where-not-density-public-btn-action-gap, var(--space-2)); }
.af-card-acts .af-action.is-primary.syn-seat-commit-pair-bordered:not(:disabled) { border-color: var(--kit-is-primary-seat-commit-pair-bordered-not-disabled-border-color, var(--border-default)); }
.af-card-acts .af-act .af-action:not(.is-primary):disabled, .af-card-acts .af-act .af-action:not(.is-primary):disabled:hover { border-color: var(--af-card-acts-act-action-not-is-primary-disabled-border-color, var(--act-disabled-edge-plane)); }
.af-card-acts .af-confirm { display: block; flex: 1 1 auto; }
.af-card-acts .af-confirm > summary { display: flex; }
.af-card-acts .syn-btn.af-confirm-yes { position: static; display: flex; box-sizing: border-box; width: 100%; min-height: calc(max(var(--act-row-height), var(--target-min)) + 2 * var(--shape-border-width)); margin-block-start: var(--af-card-acts-btn-confirm-yes-margin-block-start, var(--space-2)); border: var(--af-card-acts-btn-confirm-yes-border, var(--shape-border-width) solid transparent); white-space: normal; }   /* a button does not fill its block by itself; one height with the acts beside it */
/* d-act-confirm (row 236, [AF-483]; J1a's *Available after 9:00 am*): the closed acts' one reason, centred beneath them in a stack, after them on their row at medium */
.af-card-reason, .af-act-reason { margin: 0; font: var(--af-card-reason-font, var(--type-caption)); color: var(--af-card-reason-color, var(--text-muted)); text-align: center; }
.af-act-reason { text-align: start; }   /* beneath a row of acts at its start edge, as Harbor draws it; a card's shared line stays centred beneath its stack */
/* row 237 ([AF-521]; J1a's 976): the stack holds in the Clinical measure, so the card's row starts below it and not at the 1024 block; [AF-422]'s touring page (880) stays the row.
   The one edge of the card list's own, beside [AF-111] (2)'s three as the board column's is */
@container af-cards (width < 976px) {
    .af-card.has-acts { grid-template-columns: var(--af-card-has-acts-at-to976-grid-template-columns, var(--card-lead-measure) minmax(0, 1fr)); grid-template-areas: "lead body" "acts acts"; }
    .af-card.has-acts.has-slot { grid-template-areas: "lead body" "acts acts" "slot slot"; }
    .af-card-acts { flex-direction: row; flex-wrap: wrap; align-items: center; padding-top: var(--af-card-acts-at-to976-padding-top, var(--space-3)); border-top: var(--af-card-acts-at-to976-border-top, var(--shape-border-width) solid var(--border-hairline)); }
    .af-card-acts .af-act { display: inline-flex; }
    .af-card-acts .af-action { flex: none; }
    .af-card-acts .af-confirm { display: inline-flex; flex-wrap: wrap; align-items: flex-start; gap: var(--af-card-acts-confirm-at-to976-gap, var(--space-2)); flex: none; }
    .af-card-acts .af-confirm > summary { display: inline-flex; }
    .af-card-acts .af-confirm::details-content { display: contents; }
    .af-card-acts .af-confirm:not([open])::details-content { display: none; }
    .af-card-acts .syn-btn.af-confirm-yes { width: auto; margin: 0; white-space: nowrap; }
    .af-card-reason { text-align: start; }
}
/* d-panels-cards (row 215 (b), [AF-422]; J1a exam-today at 800; the audit's *a lonely Open under a divider*): the card's
   leading primary and the rest are two groups, layout-neutral in the stack (wide, compact, Public); between 640 and 1024 — the touring
   width among them — the primary stands at the card's top end beside the heading and the rest are a row under the hairline, so a card
   whose one act is *Open* draws no rule beneath its facts; a portal (Public) card keeps its one stack */
.af-card-open, .af-card-rest { display: contents; }
@container af-cards (640px <= width < 976px) {
    .af-card:where(:not([data-density="public"] *)).has-acts:has(.af-card-open) { grid-template-columns: var(--af-card-where-not-density-public-has-acts-has-card-open-at-to976-grid-template-columns, var(--card-lead-measure) minmax(0, 1fr) auto); grid-template-areas: "lead body open" "acts acts acts"; }
    .af-card:where(:not([data-density="public"] *)).has-acts.has-slot:has(.af-card-open) { grid-template-areas: "lead body open" "acts acts acts" "slot slot slot"; }
    .af-card:where(:not([data-density="public"] *)).has-acts:has(.af-card-open):not(:has(.af-card-rest)) { grid-template-areas: "lead body open"; }
    .af-card:where(:not([data-density="public"] *)).has-acts.has-slot:has(.af-card-open):not(:has(.af-card-rest)) { grid-template-areas: "lead body open" "slot slot slot"; }
    .af-card-acts:where(:not([data-density="public"] *)):has(> .af-card-open) { display: contents; }
    .af-card-open:where(:not([data-density="public"] *)) { grid-area: open; align-self: start; display: flex; }
    .af-card-rest:where(:not([data-density="public"] *)) { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-card-rest-where-not-density-public-at-to976-gap, var(--space-2)); padding-top: var(--af-card-rest-where-not-density-public-at-to976-padding-top, var(--space-3)); border-top: var(--af-card-rest-where-not-density-public-at-to976-border-top, var(--shape-border-width) solid var(--border-hairline)); }
}
@container block (width < 640px) {
    .af-card, .af-card.has-acts { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "body" "acts"; }
    .af-card.has-slot { grid-template-areas: "lead" "body" "slot"; }
    .af-card.has-acts.has-slot { grid-template-areas: "lead" "body" "acts" "slot"; }
    .af-card-lead { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--af-card-lead-at-to640-column-gap, var(--space-2)); }
    .af-card-figure { flex: 1 1 100%; }
    .af-card-state { margin-top: 0; font: var(--af-card-state-at-to640-font, var(--type-caption)); }
    .af-card-caption + .af-card-state::before { content: "· "; color: var(--af-card-caption-card-state-before-at-to640-color, var(--text-muted)); }   /* d-today: the caption and the state share one line at compact, a dot between (the comp's "to 10:00 am · Scheduled") */
    .af-card-acts { flex-direction: column; align-items: stretch; }
    .af-card-acts .af-act { display: flex; }
    .af-card-acts .af-action { flex: 1 1 auto; }
    .af-card-acts .af-confirm { display: block; flex: 1 1 auto; }
    .af-card-acts .af-confirm > summary { display: flex; }
    .af-card-acts .syn-btn.af-confirm-yes { width: 100%; margin-block-start: var(--af-card-acts-btn-confirm-yes-at-to640-margin-block-start, var(--space-2)); white-space: normal; }
    .af-card-reason { text-align: center; }
    /* row 237 ([AF-520]; J1a exam-today-light-360, CP-221 (g)): a staff card's phone inset, and the hairline between the primary and the rest, never above the primary */
    .af-card:where(:not([data-density="public"] *)) { padding: var(--af-card-where-not-density-public-at-to640-padding, var(--space-4)); }
    .af-card-fact { grid-template-columns: var(--af-card-fact-at-to640-grid-template-columns, var(--card-label-compact) minmax(0, 1fr)); }   /* J1a holds *Hearing loss and tinnitus* on one line beside its label */
    .af-card-lead:where(:not([data-density="public"] *)) { column-gap: var(--af-card-lead-where-not-density-public-at-to640-column-gap, var(--space-1)); }
    .af-card-state:where(:not([data-density="public"] *)) { font-weight: var(--af-card-state-where-not-density-public-at-to640-font-weight, var(--type-heading-weight)); }
    .af-card-state .syn-value { font: inherit; }   /* *to 10:00 am · Scheduled*: one caption line; a plain field's own face gives way */
    .af-card-acts:where(:not([data-density="public"] *)):has(> .af-card-open) { padding-top: 0; border-top: 0; }
    .af-card-open:where(:not([data-density="public"] *)) + .af-card-rest { display: flex; flex-direction: column; align-items: stretch; gap: var(--af-card-open-where-not-density-public-card-rest-at-to640-gap, var(--space-2)); margin-block-start: var(--af-card-open-where-not-density-public-card-rest-at-to640-margin-block-start, var(--space-1)); padding-top: var(--af-card-open-where-not-density-public-card-rest-at-to640-padding-top, var(--space-3)); border-top: var(--af-card-open-where-not-density-public-card-rest-at-to640-border-top, var(--shape-border-width) solid var(--border-hairline)); }
}

/* ---- toolbar -------------------------------------------------------------------------------------------------- */
.af-toolbar { padding: var(--af-toolbar-padding, var(--space-2) 0); }
.af-toolbar.is-sticky { position: sticky; top: 0; background: var(--af-toolbar-is-sticky-background, var(--surface-canvas)); z-index: 1; }

/* ---- tabs: the strip scrolls at compact (a declared horizontal-scroll contract) --------------------------------- */
.af-tablist { display: flex; gap: var(--af-tablist-gap, var(--space-1)); border-bottom: var(--af-tablist-border-bottom, var(--shape-border-width) solid var(--rule-page)); overflow-x: auto; scrollbar-width: auto; }
.af-tab { font: var(--af-tab-font, var(--type-caption)); color: var(--af-tab-color, var(--text-muted)); background: none; border: 0; border-bottom: var(--af-tab-border-bottom, var(--tab-underline) solid transparent); margin-bottom: var(--af-tab-margin-bottom, calc(-1 * var(--shape-border-width))); padding: var(--af-tab-padding, var(--space-2) var(--space-3)); cursor: pointer; white-space: nowrap; }
.af-tab-count { color: var(--af-tab-count-color, var(--text-faint)); font-variant-numeric: var(--af-tab-count-font-variant-numeric, tabular-nums); }   /* row 95: the count after the label, as a section title's "· N" */
.af-tab:hover { color: var(--af-tab-hover-color, var(--text-ink)); }
.af-tab.is-active { color: var(--af-tab-is-active-color, var(--text-ink)); border-bottom-color: var(--af-tab-is-active-border-bottom-color, var(--accent-action)); }
.af-tab:disabled { color: var(--af-tab-disabled-color, var(--text-faint)); cursor: default; }
/* d-today (row 144; [AF-326]): PILLS ARE THE SEGMENTED CONTROL — one track (the inset surface), the segment in view raised
   on the plane surface with the plane's elevation, the rest quiet in the muted ink; the control rung (J1a's Day · Week) */
.af-tabs[data-variant="pills"] .af-tablist { display: inline-flex; border-bottom: 0; gap: var(--af-tabs-variant-pills-tablist-gap, var(--space-1)); padding: var(--af-tabs-variant-pills-tablist-padding, var(--space-1)); background: var(--af-tabs-variant-pills-tablist-background, var(--segment-track)); border-radius: var(--af-tabs-variant-pills-tablist-border-radius, var(--shape-radius-control)); }
.af-tabs[data-variant="pills"] .af-tab { font: var(--af-tabs-variant-pills-tab-font, var(--type-control)); color: var(--af-tabs-variant-pills-tab-color, var(--text-muted)); border: 0; border-radius: var(--af-tabs-variant-pills-tab-border-radius, var(--shape-radius-control)); margin: 0; padding: var(--af-tabs-variant-pills-tab-padding, var(--space-1) var(--space-5)); text-align: center; }
.af-tabs[data-variant="pills"] .af-tab.is-active { background: var(--af-tabs-variant-pills-tab-is-active-background, var(--segment-active)); color: var(--af-tabs-variant-pills-tab-is-active-color, var(--text-ink)); box-shadow: var(--af-tabs-variant-pills-tab-is-active-box-shadow, var(--segment-active-shadow)); }
.af-tabpanel { padding-top: var(--af-tabpanel-padding-top, var(--space-4)); }
.af-tabpanels.is-framed .af-tabpanel { padding-top: 0; }   /* the panels under the shell's head when the list sits in the title row */

/* ---- modal body ----------------------------------------------------------------------------------------------- */
.af-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--af-modal-actions-gap, var(--space-2)); margin-top: var(--af-modal-actions-margin-top, var(--space-4)); padding-top: var(--af-modal-actions-padding-top, var(--space-3)); border-top: var(--af-modal-actions-border-top, var(--shape-border-width) solid var(--border-hairline)); }

/* ---- banner: the four tones from the tokens ------------------------------------------------------------------- */
.af-banner { display: flex; align-items: flex-start; gap: var(--af-banner-gap, var(--space-3)); padding: var(--af-banner-padding, var(--space-3) var(--space-4)); border: var(--af-banner-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-banner-border-radius, var(--shape-radius-plane)); background: var(--af-banner-background, var(--surface-plane)); color: var(--af-banner-color, var(--text-body)); font: var(--af-banner-font, var(--type-body)); }   /* AF-2036 (Harbor's Banner): on the plane, no frame, the sentence in body ink; the tone is the glyph's */
.af-banner-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.af-banner.tone-attention { background: var(--af-banner-tone-attention-background, var(--attention-tint)); border-color: var(--af-banner-tone-attention-border-color, var(--attention-seam)); }   /* the page's one tint ([AF-213]), its seam and its ink [AF-374]'s (the shared rule below); red is for a thing late or refused ([AF-1043]) */
.af-banner.tone-warning .af-banner-text { color: var(--af-banner-tone-warning-banner-text-color, var(--state-warning-text)); font-weight: var(--af-banner-tone-warning-banner-text-font-weight, var(--type-heading-weight)); }   /* Harbor: the word in its tone, no tint ([AF-1043]: waiting on the person, nothing late) */
.af-banner > .syn-icon { flex: none; }
.af-banner.tone-attention > .syn-icon { color: var(--af-banner-tone-attention-icon-color, var(--state-attention)); }
.af-banner.tone-warning > .syn-icon { color: var(--af-banner-tone-warning-icon-color, var(--state-warning)); }
.af-banner.tone-success > .syn-icon { color: var(--af-banner-tone-success-icon-color, var(--state-success)); }
.af-banner.tone-info > .syn-icon { color: var(--af-banner-tone-info-icon-color, var(--state-info)); }
.af-banner.tone-muted > .syn-icon { color: var(--af-banner-tone-muted-icon-color, var(--text-muted)); }
.af-banner.tone-muted { color: var(--af-banner-tone-muted-color, var(--text-muted)); }
/* the Info tone ([AF-161], [AF-1043]): a fact that asks nothing — the plane, the info glyph, the sentence in body ink */
.af-banner[data-variant="inline"] { background: var(--af-banner-variant-inline-background, var(--banner-inline-surface)); border: 0; border-left: var(--af-banner-variant-inline-border-left, var(--block-edge) solid var(--banner-inline-edge)); border-radius: 0; padding: var(--af-banner-variant-inline-padding, var(--space-1) 0 var(--space-1) var(--space-4)); }   /* the plane and the edge are the theme's two tokens (AF-TOKENS.md §3, [AF-215]) */
.af-banner[data-variant="inline"].tone-attention { border-left-color: var(--af-banner-variant-inline-tone-attention-border-left-color, var(--attention-mark)); }
/* p-public2 (row 52): an inline banner's act that goes somewhere reads as a LINK beneath the sentence — the accent, its glyph, no field, no border */
.af-banner[data-variant="inline"]:has(.af-banner-link) { flex-wrap: wrap; }
.af-banner[data-variant="inline"] .af-banner-link { flex-basis: 100%; display: inline-flex; align-items: center; gap: var(--af-banner-variant-inline-banner-link-gap, var(--space-1)); padding-inline: 0; background: transparent; border: 0; color: var(--af-banner-variant-inline-banner-link-color, var(--accent-action)); font: var(--af-banner-variant-inline-banner-link-font, var(--type-body)); font-weight: var(--af-banner-variant-inline-banner-link-font-weight, var(--type-heading-weight)); min-block-size: var(--target-min); }
/* d-flag-row (row 146; [AF-329]; J2a `my-light-1200`, `-800`): THE BAND'S ACT IS BORDERED IN THE BANNER'S OWN INK, never
   filled — the plane's surface as its field, the tone's text as its border and word; an Attention sentence wears the heading weight (the
   word is the carrier, A7). Under Public the act is the band's whole width beneath the sentence; at Standard it keeps the row's end. */
.af-banner.tone-attention .af-banner-text { font-weight: var(--af-banner-tone-attention-banner-text-font-weight, var(--type-heading-weight)); }
.af-banner .af-banner-act { color: inherit; background: var(--af-banner-banner-act-background, var(--surface-plane)); border-color: currentColor; font: var(--af-banner-banner-act-font, var(--type-body)); font-weight: var(--af-banner-banner-act-font-weight, var(--type-heading-weight)); }
.af-banner .af-banner-act:not(:disabled):hover { background: var(--af-banner-banner-act-not-disabled-hover-background, var(--surface-hover)); }
[data-density="public"] .af-banner:has(.af-banner-act) { flex-wrap: wrap; }
[data-density="public"] .af-banner .af-act:has(.af-banner-act) { flex-basis: 100%; display: flex; }
[data-density="public"] .af-banner .af-banner-act { flex: 1 1 auto; justify-content: center; }
/* p-public ([AF-213]): the page's ONE Attention tint — a later Attention in reading order wears the word in the tone's ink alone */
.af-banner.tone-attention[data-tint="word"] { background: var(--af-banner-tone-attention-tint-word-background, var(--surface-plane)); border-color: var(--af-banner-tone-attention-tint-word-border-color, var(--plane-edge)); }
.af-banner[data-variant="inline"].tone-attention[data-tint="word"] { border-left-color: var(--af-banner-variant-inline-tone-attention-tint-word-border-left-color, var(--banner-inline-edge)); }
.syn-listgrid-cell[data-tone="attention"][data-tint="word"] { background: transparent; }
.af-fieldro[data-tone="attention"][data-tint="word"] .syn-ef-control { background: transparent; }
.af-banner[data-variant="inline"].tone-warning { border-left-color: var(--af-banner-variant-inline-tone-warning-border-left-color, var(--state-warning)); }
.af-banner[data-variant="inline"].tone-success { border-left-color: var(--af-banner-variant-inline-tone-success-border-left-color, var(--state-success)); }
.af-banner[data-variant="inline"].tone-info { border-left-color: var(--af-banner-variant-inline-tone-info-border-left-color, var(--state-info)); }
/* the Public canvas (p-public [AF-215]; Compass's DESIGN-PROFILE.md §9): a block has a heading and a plane, or is prose in the flow — the Muted inline
   banner draws no plane, no edge and no inline padding; the toned ones keep their mark (the rules above). A theme that wants a plane under Public
   sets the two tokens in its own [data-density="public"] block, linked after this sheet. */
[data-density="public"] { --banner-inline-surface: transparent; --banner-inline-edge: transparent; }
[data-density="public"] .af-banner[data-variant="inline"].tone-muted { padding-inline: 0; }
/* the proposal variant (p-grammar4 [AF-167]; §3.6 #9): the AI band — the mark, the heading, each suggestion's value, source line and two acts */
.af-banner.is-proposal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--af-banner-is-proposal-gap, var(--space-2)); border: var(--af-banner-is-proposal-border, var(--shape-border-width) solid var(--accent-ai-border)); border-radius: var(--af-banner-is-proposal-border-radius, var(--shape-radius-control)); background: var(--af-banner-is-proposal-background, var(--surface-plane)); color: var(--af-banner-is-proposal-color, var(--text-ink)); }
.af-banner.is-proposal .af-banner-text { font: var(--af-banner-is-proposal-banner-text-font, var(--type-heading)); }
.af-banner.is-proposal .af-proposal-body { padding-top: var(--af-banner-is-proposal-proposal-body-padding-top, var(--space-2)); border-top: var(--af-banner-is-proposal-proposal-body-border-top, var(--shape-border-width) solid var(--border-hairline)); }

/* ---- empty state ---------------------------------------------------------------------------------------------- */
/* AF-2037 (Harbor's EmptyState): a plane, start-aligned, the icon above in the muted ink, the sentence in body ink; `quiet` is one plain
   muted sentence with no plane (an empty group keeps its heading). One component: every list, board and timeline draws this block. */
.af-empty { display: grid; justify-items: start; align-content: start; gap: var(--af-empty-gap, var(--space-2)); padding: var(--af-empty-padding, var(--space-4)); text-align: start; background: var(--af-empty-background, var(--surface-plane)); border: var(--af-empty-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-empty-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-empty-box-shadow, var(--elevation-plane)); color: var(--af-empty-color, var(--text-body)); }
.af-empty-icon { display: inline-flex; color: var(--af-empty-icon-color, var(--text-muted)); }
.af-empty-text { margin: 0; font: var(--af-empty-text-font, var(--type-body)); color: var(--af-empty-text-color, var(--text-body)); max-width: var(--af-empty-text-max-width, var(--empty-text-max)); }
.af-empty[data-variant="quiet"] { background: transparent; border: 0; box-shadow: none; padding: 0; gap: var(--af-empty-variant-quiet-gap, var(--space-2)); }
.af-empty[data-variant="quiet"] .af-empty-text { font: var(--af-empty-variant-quiet-empty-text-font, var(--type-body)); color: var(--af-empty-variant-quiet-empty-text-color, var(--text-muted)); }

/* the decision form ([AF-187]; §3.6 #7): a date's two parts each sit on one line — a break falls between them, never inside */
.af-time-rel, .af-time-abs, .af-time-part { white-space: nowrap; }

/* ---- case ladder ([AF-1037], [AF-1041]; Harbor's CaseLadder as CWD-4 corrected it, Compass CP-395 — the pixel baseline): A CHECKLIST ON
   ONE HAIRLINE — each stop's top edge is the line and its 18 px stop sits on it at the stop's start; the walked path `border-strong`, the
   path ahead the hairline, the line ending at the last stop; a done stop a filled ink dot with an 11 px check in `text-on-ink`, the current
   an 8 px ink dot in a 2 px ink ring with its verb bold, a stop ahead hollow; the timing in words beneath every stop, breaking only between
   its parts (the middle dot stays with the first); no tone but the overdue words (the flag beside them). The row wraps at the 7.5 rem floor
   and never shrinks the type; under 640 the ladder stacks — a rail of stops down the inline start, the connector each stop's own edge. --- */
.af-ladder-steps { display: flex; flex-wrap: wrap; gap: var(--af-ladder-steps-gap, var(--space-3) 0); list-style: none; margin: 0; padding: 0; }
.af-ladder-step { position: relative; flex: 1 1 var(--ladder-step-min); min-width: var(--af-ladder-step-min-width, var(--ladder-step-min)); display: grid; align-content: start; gap: var(--af-ladder-step-gap, var(--block-mark-gap)); padding: var(--af-ladder-step-padding, var(--space-3) var(--space-2) 0 0); border-top: var(--af-ladder-step-border-top, var(--block-edge-thin) solid var(--border-hairline)); font: var(--af-ladder-step-font, var(--type-body)); color: var(--af-ladder-step-color, var(--text-body)); }
.af-ladder-step[data-state="closed"] { border-top-color: var(--af-ladder-step-state-closed-border-top-color, var(--border-strong)); }
.af-ladder-step:last-child { border-top-color: transparent; }
.af-ladder-mark { position: absolute; top: var(--af-ladder-mark-top, calc(-1 * var(--ladder-stop) / 2 - var(--block-edge-thin) / 2)); inset-inline-start: 0; box-sizing: border-box; width: var(--af-ladder-mark-width, var(--ladder-stop)); height: var(--af-ladder-mark-height, var(--ladder-stop)); border-radius: var(--af-ladder-mark-border-radius, var(--shape-radius-pill)); background: var(--af-ladder-mark-background, var(--surface-plane)); border: var(--af-ladder-mark-border, var(--block-edge-thin) solid var(--border-default)); }
.af-ladder-step[data-state="closed"] .af-ladder-mark { background: var(--af-ladder-step-state-closed-ladder-mark-background, var(--text-ink)); border-color: var(--af-ladder-step-state-closed-ladder-mark-border-color, var(--text-ink)); }
.af-ladder-step[data-state="closed"] .af-ladder-mark::after { content: ""; position: absolute; inset: 0; background: var(--af-ladder-step-state-closed-ladder-mark-after-background, var(--text-on-ink)); -webkit-mask: var(--ladder-check) center / var(--ladder-check-size) var(--ladder-check-size) no-repeat; mask: var(--ladder-check) center / var(--ladder-check-size) var(--ladder-check-size) no-repeat; }   /* [AF-1041] (2): the check, a shape */
.af-ladder-step[aria-current] .af-ladder-mark { border-color: var(--af-ladder-step-aria-current-ladder-mark-border-color, var(--text-ink)); background: var(--af-ladder-step-aria-current-ladder-mark-background, radial-gradient(circle, var(--text-ink) 0 4px, transparent 4.5px)); }   /* an 8 px ink dot inside the 2 px ink ring */
.af-ladder-name { color: var(--af-ladder-name-color, var(--text-body)); overflow-wrap: normal; }   /* a stage name never breaks inside a word */
.af-ladder-step[aria-current] .af-ladder-name { font-weight: var(--af-ladder-step-aria-current-ladder-name-font-weight, var(--font-semibold)); color: var(--af-ladder-step-aria-current-ladder-name-color, var(--text-ink)); }
.af-ladder-due { display: flex; flex-wrap: wrap; column-gap: var(--af-ladder-due-column-gap, 0.3em); align-items: center; font-size: var(--af-ladder-due-font-size, calc(var(--type-caption-size) * var(--density-type))); line-height: var(--af-ladder-due-line-height, 1.4); color: var(--af-ladder-due-color, var(--text-muted)); }
.af-ladder-due > .af-time-part { white-space: nowrap; }   /* breaks between the relative and the absolute part, never inside */
.af-ladder-step[aria-current] .af-ladder-due { color: var(--af-ladder-step-aria-current-ladder-due-color, var(--text-body)); }
.af-ladder-due.tone-attention, .af-ladder-step[aria-current] .af-ladder-due.tone-attention { color: var(--af-ladder-due-tone-attention-color, var(--state-attention-text)); }   /* [AF-1038] (3): the flag beside its words, the tone on the words alone */
.af-ladder-due .syn-icon { width: var(--af-ladder-due-icon-width, 1em); height: var(--af-ladder-due-icon-height, 1em); vertical-align: var(--af-ladder-due-icon-vertical-align, -0.1em); }
.af-ladder-outstanding { font-size: var(--af-ladder-outstanding-font-size, calc(var(--type-caption-size) * var(--density-type))); color: var(--af-ladder-outstanding-color, var(--text-muted)); }
.af-ladder-none, .af-timeline-none, .af-meter-none { margin: 0; font: var(--af-ladder-none-font, var(--type-label)); color: var(--af-ladder-none-color, var(--text-tertiary)); }
@container block (width < 640px) {
    .af-ladder-steps { display: grid; gap: 0; }
    .af-ladder-step { min-width: 0; border-top: 0; border-inline-start: var(--af-ladder-step-at-to640-border-inline-start, var(--block-edge-thin) solid var(--border-hairline)); padding: var(--af-ladder-step-at-to640-padding, 0 0 var(--space-3) var(--space-4)); }
    .af-ladder-step[data-state="closed"] { border-inline-start-color: var(--af-ladder-step-state-closed-at-to640-border-inline-start-color, var(--border-strong)); }
    .af-ladder-step:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
    .af-ladder-mark { top: var(--af-ladder-mark-at-to640-top, var(--block-edge-thin)); inset-inline-start: var(--af-ladder-mark-at-to640-inset-inline-start, calc(-1 * var(--ladder-stop) / 2 - var(--block-edge-thin) / 2)); }
}

/* ---- timeline ------------------------------------------------------------------------------------------------- */
.af-timeline-entries { list-style: none; margin: 0; padding: var(--af-timeline-entries-padding, 0 0 0 var(--space-5)); border-left: var(--af-timeline-entries-border-left, var(--block-edge-thin) solid var(--border-default)); }
.af-timeline-entry { --af-tone: var(--border-strong); position: relative; padding: var(--af-timeline-entry-padding, 0 0 var(--space-4)); display: flex; flex-direction: column; gap: var(--af-timeline-entry-gap, var(--block-mark-gap)); }
.af-timeline-entry:last-child { padding-bottom: 0; }
/* row 177 ([AF-353] (1)): the mark's seat is the rail, centred on its edge — the gutter less half the mark and half the rail; the
   unitless `--radius-edge: 0` this offset once added made the calc invalid, so `left` fell to auto and the mark sat over the date's first letter */
.af-timeline-mark { position: absolute; left: var(--af-timeline-mark-left, calc(-1 * var(--space-5) - var(--block-mark-size) / 2 - var(--block-edge-thin) / 2)); top: var(--af-timeline-mark-top, var(--space-1)); width: var(--af-timeline-mark-width, var(--block-mark-size)); height: var(--af-timeline-mark-height, var(--block-mark-size)); border-radius: var(--af-timeline-mark-border-radius, var(--shape-radius-pill)); background: var(--af-timeline-mark-background, var(--af-tone)); }
.af-timeline-entry.tone-attention { --af-tone: var(--attention-mark); }
.af-timeline-entry.tone-warning { --af-tone: var(--state-warning); }
.af-timeline-entry.tone-success { --af-tone: var(--state-success); }
.af-timeline-entry.tone-muted { --af-tone: var(--border-default); }
.af-timeline-entry.tone-info { --af-tone: var(--state-info); }
.af-timeline-at { font: var(--af-timeline-at-font, var(--type-label)); letter-spacing: var(--af-timeline-at-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-timeline-at-text-transform, var(--type-label-transform)); color: var(--af-timeline-at-color, var(--text-tertiary)); }
.af-timeline-title { font: var(--af-timeline-title-font, var(--type-body)); color: var(--af-timeline-title-color, var(--text-ink)); overflow-wrap: anywhere; }
.af-timeline-detail { margin: 0; font: var(--af-timeline-detail-font, var(--type-label)); color: var(--af-timeline-detail-color, var(--text-muted)); }
.af-timeline-actor { font: var(--af-timeline-actor-font, var(--type-label)); color: var(--af-timeline-actor-color, var(--text-tertiary)); }
.af-timeline[data-variant="dense"] .af-timeline-entry { flex-direction: row; align-items: baseline; gap: var(--af-timeline-variant-dense-timeline-entry-gap, var(--space-3)); padding-bottom: var(--af-timeline-variant-dense-timeline-entry-padding-bottom, var(--space-2)); }
.af-timeline[data-variant="dense"] .af-timeline-at { flex: none; min-width: var(--af-timeline-variant-dense-timeline-at-min-width, var(--timeline-at-min)); }
/* d-ops-faces (row 228, [AF-456]; 213's routed line; J3a's and J1a's History): THE HISTORY — the plane of the read-only cards, a row per event
   with a hairline beneath it (the last's too), the day in its own column, the event, its detail and its actor on one line; the empty sentence at the
   plane's start edge. At compact the day stands above its event. */
.af-timeline[data-variant="history"] .af-timeline-entries, .af-timeline[data-variant="history"] > .af-empty { background: var(--af-timeline-variant-history-timeline-entries-background, var(--surface-plane)); border: var(--af-timeline-variant-history-timeline-entries-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-timeline-variant-history-timeline-entries-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-timeline-variant-history-timeline-entries-box-shadow, var(--elevation-plane)); }
.af-timeline[data-variant="history"] .af-timeline-entries { padding: var(--af-timeline-variant-history-timeline-entries-padding, var(--space-1) var(--space-5)); }
.af-timeline[data-variant="history"] .af-timeline-entry { display: grid; grid-template-columns: var(--af-timeline-variant-history-timeline-entry-grid-template-columns, var(--timeline-history-at) minmax(0, 1fr)); align-items: baseline; gap: var(--af-timeline-variant-history-timeline-entry-gap, var(--block-mark-gap) var(--space-4)); padding: var(--af-timeline-variant-history-timeline-entry-padding, var(--space-2) 0); border-bottom: var(--af-timeline-variant-history-timeline-entry-border-bottom, var(--shape-border-width) solid var(--border-hairline)); }
.af-timeline[data-variant="history"] .af-timeline-at, .af-timeline[data-variant="history"] .af-timeline-actor, .af-timeline[data-variant="history"] .af-timeline-detail { font: var(--af-timeline-variant-history-timeline-at-font, var(--type-label)); font-weight: var(--af-timeline-variant-history-timeline-at-font-weight, var(--font-regular)); color: var(--af-timeline-variant-history-timeline-at-color, var(--text-muted)); }
.af-timeline[data-variant="history"] > .af-empty { display: flex; flex-direction: row; align-items: flex-start; padding: var(--af-timeline-variant-history-empty-padding, var(--space-4) var(--space-5)); text-align: start; }
.af-timeline[data-variant="history"] > .af-empty .af-empty-text { max-width: none; }
@container block (width < 640px) {
    .af-timeline[data-variant="history"] .af-timeline-entry { grid-template-columns: minmax(0, 1fr); }
}

/* ---- status board: columns by state; a stacked list with a stage picker at compact ----------------------------- */
/* d-board (AF-C-1 rows 89–93; [AF-269]–[AF-273]): the filter plane, the tiles, the stage strip, the 220 px column
   that scrolls sideways under the plane, the two-line card (three stacked under 270 px), the fade-in. */
.af-board-subline { margin: var(--af-board-subline-margin, 0 0 var(--space-3)); font: var(--af-board-subline-font, var(--type-body)); color: var(--af-board-subline-color, var(--text-muted)); }
.af-board-plane { background: var(--af-board-plane-background, var(--surface-plane)); border: var(--af-board-plane-border, var(--shape-border-width) solid transparent); border-radius: var(--af-board-plane-border-radius, var(--shape-radius-plane)); padding: var(--af-board-plane-padding, var(--space-3) var(--space-4)); margin-bottom: var(--af-board-plane-margin-bottom, var(--space-4)); box-shadow: var(--af-board-plane-box-shadow, var(--elevation-plane)); }
.af-board-planehead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-board-planehead-gap, var(--space-2) var(--space-3)); margin-bottom: var(--af-board-planehead-margin-bottom, var(--space-3)); }
.af-board-helper { flex: 1; min-width: 0; margin: 0; font: var(--af-board-helper-font, var(--type-label)); color: var(--af-board-helper-color, var(--text-muted)); }
.af-board-helper-short { display: none; }
.af-show-everything { display: inline-flex; align-items: center; min-height: var(--target-min); padding: var(--af-show-everything-padding, 0 var(--space-3)); font: var(--af-show-everything-font, var(--type-control)); color: var(--af-show-everything-color, var(--text-ink)); text-decoration: var(--af-show-everything-text-decoration, underline); border-radius: var(--af-show-everything-border-radius, var(--shape-radius-control)); }
.af-board-filterchip.is-active { border-color: var(--af-board-filterchip-is-active-border-color, var(--text-ink)); }   /* pressed: the ink ring, never teal (Harbor's metric) */
/* row 179: the chip's glyph before its words (J3a's `map-pin`), the words one line — a long choice ends in an ellipsis, never a wrap */
.af-board-filterchip > svg { flex: none; }
.af-board-filterword { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-board-filterplane { background: var(--af-board-filterplane-background, var(--surface-plane)); border: var(--af-board-filterplane-border, var(--shape-border-width) solid var(--border-default)); border-radius: var(--af-board-filterplane-border-radius, var(--shape-radius-control)); box-shadow: var(--af-board-filterplane-box-shadow, var(--elevation-overlay)); padding: var(--af-board-filterplane-padding, var(--space-2)); }
.af-board-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.af-board-option { display: flex; align-items: center; gap: var(--af-board-option-gap, var(--space-2)); min-height: var(--target-min); padding: var(--af-board-option-padding, 0 var(--space-2)); border-radius: var(--af-board-option-border-radius, var(--shape-radius-control)); color: var(--af-board-option-color, var(--text-ink)); font: var(--af-board-option-font, var(--type-body)); text-decoration: var(--af-board-option-text-decoration, none); white-space: nowrap; }
.af-board-option:hover { background: var(--af-board-option-hover-background, var(--surface-hover)); }
.af-board-option > span:nth-child(2) { flex: 1; }
.af-board-option-box { display: inline-flex; align-items: center; justify-content: center; width: var(--af-board-option-box-width, var(--block-mark-size)); height: var(--af-board-option-box-height, var(--block-mark-size)); border: var(--af-board-option-box-border, var(--shape-border-width) solid var(--border-strong)); border-radius: var(--af-board-option-box-border-radius, var(--radius-sm)); color: transparent; flex: none; }
.af-board-option.is-checked .af-board-option-box { background: var(--af-board-option-is-checked-board-option-box-background, var(--text-ink)); border-color: var(--af-board-option-is-checked-board-option-box-border-color, var(--text-ink)); color: var(--af-board-option-is-checked-board-option-box-color, var(--surface-plane)); }
/* the tiles (row 89): a metric with a filter is a tile; pressed, the ink ring — never the accent, a filter is not an act */
.af-board-plane .af-metrics { margin: 0; }
.af-metrics.is-filters .syn-metricbar { gap: var(--af-metrics-is-filters-metricbar-gap, var(--space-3)); padding: 0; }
/* AF-2038 (Harbor's MetricStripBlock): a tile is FIXED — the figure rung above its label, never stretched to share the row, the inset fill,
   the 2 px ring transparent until pressed (ink, never teal); the tone on the figure and its word ([AF-1043]: overdue Attention, at risk Warning) */
.af-metrics.is-filters .syn-metric.is-filter { display: inline-grid; align-content: start; justify-items: start; gap: var(--af-metrics-is-filters-metric-is-filter-gap, var(--block-mark-gap)); flex: none; min-width: var(--af-metrics-is-filters-metric-is-filter-min-width, var(--metric-tile-min)); min-height: var(--target-min); padding: var(--af-metrics-is-filters-metric-is-filter-padding, var(--space-3) var(--space-4)); background: var(--af-metrics-is-filters-metric-is-filter-background, var(--surface-inset)); border-radius: var(--af-metrics-is-filters-metric-is-filter-border-radius, var(--shape-radius-control)); border: var(--af-metrics-is-filters-metric-is-filter-border, var(--block-edge-thin) solid transparent); color: var(--af-metrics-is-filters-metric-is-filter-color, var(--text-ink)); text-align: start; text-decoration: var(--af-metrics-is-filters-metric-is-filter-text-decoration, none); font: var(--af-metrics-is-filters-metric-is-filter-font, var(--type-body)); }
.af-metrics.is-filters .syn-metric.is-filter .syn-metric-value { font: var(--af-metrics-is-filters-metric-is-filter-metric-value-font, var(--type-figure)); color: var(--af-metrics-is-filters-metric-is-filter-metric-value-color, var(--text-ink)); }   /* row 188: the figure rung, the largest type after the title (J3a) */
.af-metrics.is-filters .syn-metric.is-filter .syn-metric-label { font: var(--af-metrics-is-filters-metric-is-filter-metric-label-font, var(--type-label)); letter-spacing: normal; text-transform: var(--af-metrics-is-filters-metric-is-filter-metric-label-text-transform, none); color: var(--af-metrics-is-filters-metric-is-filter-metric-label-color, var(--text-muted)); margin: 0; }
/* row 188: the figure and its word wear the tile's tone — overdue Attention, at risk Warning, paused Muted; on time and reworks none */
.af-metrics.is-filters .syn-metric.is-filter[data-tone="attention"] :is(.syn-metric-value, .syn-metric-label) { color: var(--kit-is-filter-tone-attention-is-metric-value-metric-label-color, var(--state-attention-text)); }
.af-metrics.is-filters .syn-metric.is-filter[data-tone="warning"] :is(.syn-metric-value, .syn-metric-label) { color: var(--kit-is-filter-tone-warning-is-metric-value-metric-label-color, var(--state-warning-text)); }
.af-metrics.is-filters .syn-metric.is-filter[data-tone="muted"] :is(.syn-metric-value, .syn-metric-label) { color: var(--kit-is-filter-tone-muted-is-metric-value-metric-label-color, var(--text-muted)); }
.af-metrics.is-filters .syn-metric.is-filter.is-pressed { border-color: var(--af-metrics-is-filters-metric-is-filter-is-pressed-border-color, var(--text-ink)); }
.af-metrics.is-filters > .af-show-everything { margin-top: var(--af-metrics-is-filters-show-everything-margin-top, var(--space-2)); }
/* the stage strip (row 90): a toggle per state on one track; on, the dot filled; off, no column and "Not shown" */
.af-board-stages { display: flex; align-items: flex-start; margin-top: var(--af-board-stages-margin-top, var(--space-4)); position: relative; overflow-x: auto; }
.af-board-stages::before { content: ""; position: absolute; left: 0; right: 0; top: var(--af-board-stages-before-top, calc(var(--block-mark-size) / 2)); border-top: var(--af-board-stages-before-border-top, var(--shape-border-width) solid var(--track-rest)); }
.af-board-stage { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--af-board-stage-gap, var(--space-1)); padding: var(--af-board-stage-padding, 0 var(--space-2) var(--space-1) 0); color: var(--af-board-stage-color, var(--text-ink)); text-decoration: var(--af-board-stage-text-decoration, none); font: var(--af-board-stage-font, var(--type-body)); min-height: var(--target-min); }
.af-board-stage-dot { display: block; width: var(--af-board-stage-dot-width, var(--block-mark-size)); height: var(--af-board-stage-dot-height, var(--block-mark-size)); border-radius: var(--af-board-stage-dot-border-radius, var(--shape-radius-pill)); background: var(--af-board-stage-dot-background, var(--surface-plane)); border: var(--af-board-stage-dot-border, var(--shape-border-width) solid var(--border-strong)); box-sizing: border-box; }
.af-board-stage.is-on .af-board-stage-dot { background: var(--af-board-stage-is-on-board-stage-dot-background, var(--text-ink)); border-color: var(--af-board-stage-is-on-board-stage-dot-border-color, var(--text-ink)); }
.af-board-stage-name { white-space: normal; overflow-wrap: break-word; }   /* d-demo-fix (row 193, [AF-369]): a rung narrower than its word and count wraps the count beneath — *Scheduled 174* ran into *Exam held 58* at 123 px */
.af-board-stage-sub { font: var(--af-board-stage-sub-font, var(--type-label)); color: var(--af-board-stage-sub-color, var(--text-tertiary)); white-space: nowrap; }
.af-board-stage-sub.tone-attention { color: var(--af-board-stage-sub-tone-attention-color, var(--state-attention-text)); }   /* row 188: overdue is Attention's ink on the whole board (J3a) */
.af-board-chips { display: none; }
.af-board-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
/* d-board-j3a (row 213; [AF-431] (3)): THE CUE WHEN THE COLUMNS OVERFLOW. More columns than the width scroll sideways inside
   the board (row 91); the edge with more beyond it fades over --space-8 — the end at the start, both mid-way, the start at the end — read
   from the scroller's own position (a scroll timeline, no script, no clock: a board that fits has no timeline, so no fade) */
@property --af-board-cue-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --af-board-cue-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes af-board-cue {
    0% { --af-board-cue-start: 0px; --af-board-cue-end: var(--space-8); }
    3%, 97% { --af-board-cue-start: var(--space-8); --af-board-cue-end: var(--space-8); }
    100% { --af-board-cue-start: var(--space-8); --af-board-cue-end: 0px; }
}
@supports (animation-timeline: scroll()) {
    .af-board-scroll {
        animation-name: af-board-cue; animation-fill-mode: both; animation-timeline: scroll(self inline);
        mask-image: linear-gradient(to right, transparent, var(--text-ink) var(--af-board-cue-start), var(--text-ink) calc(100% - var(--af-board-cue-end)), transparent);
    }
}
.af-board-columns { display: grid; grid-template-columns: var(--af-board-columns-grid-template-columns, repeat(var(--af-states, 1), minmax(var(--board-column-min-width), 1fr))); gap: var(--af-board-columns-gap, var(--space-3)); }
.af-board-columns.is-head { margin-bottom: var(--af-board-columns-is-head-margin-bottom, var(--space-2)); }
.af-board-colhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--af-board-colhead-gap, var(--space-2)); font: var(--af-board-colhead-font, var(--type-body)); font-weight: var(--af-board-colhead-font-weight, var(--font-semibold)); color: var(--af-board-colhead-color, var(--text-ink)); margin: 0; padding-bottom: var(--af-board-colhead-padding-bottom, var(--space-2)); border-bottom: var(--af-board-colhead-border-bottom, var(--shape-border-width) solid var(--rule-column)); min-width: 0; overflow-wrap: anywhere; }   /* row 188: the column's name in ink, its count at the end, a rule beneath; the column has no well (J3a) */
.af-board-colhead .af-board-count { font-weight: var(--af-board-colhead-board-count-font-weight, var(--font-regular)); }
.af-board-count { color: var(--af-board-count-color, var(--text-tertiary)); margin-left: var(--af-board-count-margin-left, var(--space-1)); }
.af-board-column { container: af-board-column / inline-size; min-height: var(--af-board-column-min-height, var(--board-column-min)); min-width: 0; max-height: var(--af-board-column-max-height, var(--board-column-max)); overflow-y: auto; }   /* row 165: a column scrolls under the fixed head, the board the viewport's height */
.af-board-cards { list-style: none; margin: 0; padding: var(--af-board-cards-padding, var(--space-1)); display: flex; flex-direction: column; gap: var(--af-board-cards-gap, var(--space-2)); }
.af-board-card { display: block; width: 100%; text-align: left; background: var(--af-board-card-background, var(--surface-plane)); border: var(--af-board-card-border, var(--shape-border-width) solid transparent); box-shadow: var(--af-board-card-box-shadow, var(--elevation-plane)); border-radius: var(--af-board-card-border-radius, var(--shape-radius-control)); padding: var(--af-board-card-padding, var(--space-2) var(--space-3)); font: var(--af-board-card-font, var(--type-body)); color: var(--af-board-card-color, var(--text-ink)); cursor: pointer; overflow-wrap: anywhere; }
/* row 188: borderless on the page — the column draws no well, a card and the plane no edge in light (the shadow is the edge, J3a);
   in dark the theme's plane edge ([AF-254]: the shadow alone does not separate a plane from a near-black canvas) */
.dark :is(.af-board-card, .af-board-plane) { border-color: var(--kit-is-af-board-card-board-plane-border-color, var(--plane-edge)); }
/* row 177 ([AF-353] (2)): a card arrives by the fade only while the circuit fills its column — a static shell's column shown again
   (hidden at compact, then wide) never replays it and never draws faded */
.af-board-column.is-filling .af-board-card { animation: af-arrive var(--motion-duration-base) var(--motion-easing); }
.af-board-card:hover { border-color: var(--af-board-card-hover-border-color, var(--border-emphasis)); text-decoration: var(--af-board-card-hover-text-decoration, none); }   /* row 194: a card is a link — the hover is its edge, never the underline a link draws */
/* row 213 ([AF-431] (2); J3a ops-board 1200): the label first in ink at the semibold, the identifier beside it in the mono face
   and muted; ONE EMPHASIS a card — the word at the line's end, at the label rung, semibold in its tone (quiet when it has none); the facts
   muted and the date tertiary beneath */
.af-board-card.is-lines { display: flex; flex-direction: column; gap: var(--af-board-card-is-lines-gap, var(--space-1)); }
.af-board-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--af-board-line-gap, var(--space-1) var(--space-2)); min-width: 0; }   /* a part that does not fit takes the next line, never a shattered word */
.af-board-lead { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--af-board-lead-gap, 0 var(--space-2)); min-width: 0; max-width: 100%; }
.af-board-who { font-weight: var(--af-board-who-font-weight, var(--font-semibold)); color: var(--af-board-who-color, var(--text-ink)); white-space: nowrap; }
.af-board-id { font: var(--af-board-id-font, var(--type-identifier)); color: var(--af-board-id-color, var(--text-muted)); white-space: nowrap; }
.af-board-word { margin-left: auto; font: var(--af-board-word-font, var(--type-label)); color: var(--af-board-word-color, var(--text-muted)); white-space: nowrap; }
.af-board-card[data-tone] .af-board-word { font-weight: var(--af-board-card-tone-board-word-font-weight, var(--font-semibold)); }
.af-board-card[data-tone="attention"] .af-board-word { color: var(--af-board-card-tone-attention-board-word-color, var(--state-attention-text)); background: var(--af-board-card-tone-attention-board-word-background, var(--state-attention-tint)); padding: var(--af-board-card-tone-attention-board-word-padding, 0 var(--space-1)); border-radius: var(--af-board-card-tone-attention-board-word-border-radius, var(--radius-sm)); }
.af-board-card[data-tone="attention"][data-tint="word"] .af-board-word { background: transparent; padding: 0; }
.af-board-card[data-tone="warning"] .af-board-word { color: var(--af-board-card-tone-warning-board-word-color, var(--state-warning-text)); }
.af-board-card[data-tone="muted"] .af-board-word { color: var(--af-board-card-tone-muted-board-word-color, var(--text-muted)); }
.af-board-card[data-tone="success"] .af-board-word { color: var(--af-board-card-tone-success-board-word-color, var(--state-success)); }
.af-board-card[data-tone="info"] .af-board-word { color: var(--af-board-card-tone-info-board-word-color, var(--state-info-text)); }
.af-board-facts { color: var(--af-board-facts-color, var(--text-muted)); font: var(--af-board-facts-font, var(--type-label)); }
.af-board-date { margin-left: auto; color: var(--af-board-date-color, var(--text-tertiary)); font: var(--af-board-date-font, var(--type-label)); white-space: nowrap; }
/* row 213 (J3a ops-board 800 and 1600; [AF-271]'s edge, the column its own container, its inset on the list): a column under 270 px stacks the parts — the label and the
   identifier, the facts, the word, the date — each at the line's start; the lines lend their parts to the card */
@container af-board-column (width < 270px) {
    .af-board-card.is-lines { align-items: flex-start; }
    .af-board-card.is-lines .af-board-line { display: contents; }
    .af-board-card.is-lines .af-board-word { order: 1; margin-left: 0; }
    .af-board-card.is-lines .af-board-date { order: 2; margin-left: 0; }
}
.af-board-cardslot { margin-top: var(--af-board-cardslot-margin-top, var(--space-1)); padding-inline: var(--af-board-cardslot-padding-inline, var(--space-1)); }   /* the card slot ([AF-140]): the row's block beneath its card */
/* row 142: "n more" at a column's foot — the column's filter (a link) or the next N in place (a button); one quiet face for both */
.af-board-more { display: flex; width: 100%; align-items: center; justify-content: center; margin-top: var(--af-board-more-margin-top, var(--space-2)); padding: var(--af-board-more-padding, 0 var(--space-2)); background: transparent; border: 0; border-radius: var(--af-board-more-border-radius, var(--radius-sm)); font: var(--af-board-more-font, var(--type-label)); color: var(--af-board-more-color, var(--text-ink)); text-decoration: var(--af-board-more-text-decoration, underline); cursor: pointer; }
/* row 165: a column still filling after the circuit opens — one quiet line at its foot, gone when the column is whole */
.af-board-loading { margin: var(--af-board-loading-margin, var(--space-2) 0 0); text-align: center; font: var(--af-board-loading-font, var(--type-label)); color: var(--af-board-loading-color, var(--text-tertiary)); }
.af-board-lane { margin-top: var(--af-board-lane-margin-top, var(--space-3)); }
.af-board-lanehead { font: var(--af-board-lanehead-font, var(--type-label)); color: var(--af-board-lanehead-color, var(--text-muted)); margin: var(--af-board-lanehead-margin, 0 0 var(--space-1)); }
@keyframes af-arrive { from { opacity: 0; } to { opacity: 1; } }
/* d-demo-fix (row 193; Ken's words of 05:05, [AF-353] (2) widened): a banner arrives by the fade only when a circuit brings it — the proposal
   a door returns — never on a render; a static page's banner (Mary's letter on /my) drew faded */
.af-banner.is-proposal { animation: af-arrive var(--motion-duration-base) var(--motion-easing); }
/* the reduced-motion rule lives in components.css: blocks.css states its breakpoints as container queries and admits one media feature, the pointer */
@container block (width >= 1440px) {
    .af-board-columns { gap: var(--af-board-columns-at-from1440-gap, var(--space-4)); }
    .af-cal-day { min-height: var(--af-cal-day-at-from1440-min-height, calc(var(--cal-day-min) * 1.4)); }
}
@container block (width < 640px) {
    .af-board-helper-long { display: none; }
    .af-board-helper-short { display: inline; }
    .af-metrics.is-filters .syn-metricbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .af-metrics.is-filters .syn-metric.is-filter { flex: none; white-space: normal; }
    /* row 179 (J3a 360): the plane is one grid of two — the word "Filters", the figures two by two, each filter's chip as the next tile
       (the facility tile the sixth), "Show everything" across; the head and the strip lend their children to it */
    .af-board-plane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--af-board-plane-at-to640-gap, var(--space-3)); }
    .af-board-planehead, .af-board-plane > .af-metrics, .af-board-plane > .af-metrics > .syn-metricbar { display: contents; }
    .af-board-plane > .af-metrics { container-type: normal; }   /* a container with no box answers no query: the bar inside reads the board's width */
    .af-board-helper { grid-column: 1 / -1; }
    .af-board-plane .syn-metric { order: 1; }
    .af-board-filter { order: 2; display: flex; min-width: 0; }
    .af-board-filterchip { flex: 1; min-width: 0; padding: var(--af-board-filterchip-at-to640-padding, var(--space-3)); background: var(--af-board-filterchip-at-to640-background, var(--surface-inset)); border-color: transparent; border-radius: var(--af-board-filterchip-at-to640-border-radius, var(--shape-radius-control)); }
    .af-board-filterchip.is-active { border-color: var(--af-board-filterchip-is-active-at-to640-border-color, var(--text-ink)); }
    .af-board-filterword { flex: 1; text-align: left; }
    .af-board-planehead > .af-show-everything { order: 3; grid-column: 1 / -1; justify-self: start; }
    .af-board-stages { display: none; }
    .af-board-chips { display: flex; gap: var(--af-board-chips-at-to640-gap, var(--space-2)); overflow-x: auto; margin-bottom: var(--af-board-chips-at-to640-margin-bottom, var(--space-3)); padding-bottom: var(--af-board-chips-at-to640-padding-bottom, var(--space-1)); }
    .af-board-chip { flex: none; display: inline-flex; align-items: center; min-height: var(--target-min); padding: var(--af-board-chip-at-to640-padding, 0 var(--space-3)); border: var(--af-board-chip-at-to640-border, var(--shape-border-width) solid var(--border-strong)); border-radius: var(--af-board-chip-at-to640-border-radius, var(--shape-radius-pill)); background: var(--af-board-chip-at-to640-background, var(--surface-plane)); color: var(--af-board-chip-at-to640-color, var(--text-ink)); font: var(--af-board-chip-at-to640-font, var(--type-control)); cursor: pointer; white-space: nowrap; }
    .af-board-chip.is-picked { background: var(--af-board-chip-is-picked-at-to640-background, var(--text-ink)); border-color: var(--af-board-chip-is-picked-at-to640-border-color, var(--text-ink)); color: var(--af-board-chip-is-picked-at-to640-color, var(--surface-plane)); }
    .af-board-chip.is-picked .af-board-count { color: inherit; }
    .af-board-columns { grid-template-columns: minmax(0, 1fr); }
    .af-board-columns.is-head { display: none; }
    .af-board-column:not(.is-picked) { display: none; }
    .af-board-column { max-height: none; overflow-y: visible; }   /* row 165: the stacked list at compact is the page's, unchanged */
}

/* ---- calendar: month grid / week columns / day lanes; the agenda at compact ------------------------------------ */
.af-cal-strip { display: flex; align-items: center; gap: var(--af-cal-strip-gap, var(--space-2)); margin-bottom: var(--af-cal-strip-margin-bottom, var(--space-3)); }
.af-cal-label { flex: 1; min-width: 0; margin: 0; font: var(--af-cal-label-font, var(--type-heading)); color: var(--af-cal-label-color, var(--text-ink)); overflow-wrap: anywhere; }
.af-cal-prev, .af-cal-next, .af-cal-today { display: inline-flex; align-items: center; justify-content: center; background: var(--af-cal-prev-background, var(--surface-plane)); border: var(--af-cal-prev-border, var(--shape-border-width) solid var(--border-default)); border-radius: var(--af-cal-prev-border-radius, var(--radius-sm)); color: var(--af-cal-prev-color, var(--text-body)); font: var(--af-cal-prev-font, var(--type-caption)); padding: var(--af-cal-prev-padding, var(--space-1) var(--space-2)); cursor: pointer; }
.af-cal-month { display: grid; border: var(--af-cal-month-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-cal-month-border-radius, var(--shape-radius-plane)); overflow: hidden; background: var(--af-cal-month-background, var(--surface-plane)); }
.af-cal-dow, .af-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.af-cal-dow span { font: var(--af-cal-dow-span-font, var(--type-label)); letter-spacing: var(--af-cal-dow-span-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-cal-dow-span-text-transform, var(--type-label-transform)); color: var(--af-cal-dow-span-color, var(--text-tertiary)); padding: var(--af-cal-dow-span-padding, var(--space-2)); text-align: center; background: var(--af-cal-dow-span-background, var(--bg-secondary)); }
.af-cal-day { min-height: var(--af-cal-day-min-height, var(--cal-day-min)); min-width: 0; padding: var(--af-cal-day-padding, var(--space-1) var(--space-2)); border-top: var(--af-cal-day-border-top, var(--shape-border-width) solid var(--border-hairline)); border-left: var(--af-cal-day-border-left, var(--shape-border-width) solid var(--border-hairline)); }
.af-cal-day:first-child { border-left: 0; }
.af-cal-day.is-outside { background: var(--af-cal-day-is-outside-background, var(--bg-secondary)); color: var(--af-cal-day-is-outside-color, var(--text-rider)); }
.af-cal-date { display: inline-block; min-width: var(--af-cal-date-min-width, var(--cal-date-min)); text-align: center; font: var(--af-cal-date-font, var(--type-label)); color: inherit; }
.af-cal-day.is-today .af-cal-date { background: var(--af-cal-day-is-today-cal-date-background, var(--accent-action)); color: var(--af-cal-day-is-today-cal-date-color, var(--text-on-ink)); border-radius: var(--af-cal-day-is-today-cal-date-border-radius, var(--shape-radius-pill)); }
.af-cal-dayname { margin-left: var(--af-cal-dayname-margin-left, var(--space-1)); font: var(--af-cal-dayname-font, var(--type-label)); color: var(--af-cal-dayname-color, var(--text-muted)); }   /* row 235: a week's columns name their weekday at every width; the month's grid has its own head row */
.af-cal-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--af-cal-events-gap, var(--block-mark-gap)); }
.af-cal-eventbtn { display: flex; align-items: baseline; gap: var(--af-cal-eventbtn-gap, var(--space-1)); width: 100%; min-width: 0; text-align: left; background: var(--af-cal-eventbtn-background, var(--accent-muted)); border: 0; border-left: var(--af-cal-eventbtn-border-left, var(--block-edge) solid var(--accent-action)); border-radius: var(--af-cal-eventbtn-border-radius, var(--radius-sm)); padding: var(--af-cal-eventbtn-padding, var(--block-mark-gap) var(--space-2)); font: var(--af-cal-eventbtn-font, var(--type-label)); color: var(--af-cal-eventbtn-color, var(--text-ink)); cursor: pointer; }
.af-cal-eventlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-cal-time { flex: none; color: var(--af-cal-time-color, var(--text-muted)); }
.af-cal-eventbtn.is-elsewhere { flex-wrap: wrap; }   /* row 235 (a): an event in another zone says so on its own line */
.af-cal-zone { flex-basis: 100%; font: var(--af-cal-zone-font, var(--type-caption)); color: var(--af-cal-zone-color, var(--text-muted)); }
.af-cal-more { font: var(--af-cal-more-font, var(--type-label)); color: var(--af-cal-more-color, var(--text-tertiary)); padding-left: var(--af-cal-more-padding-left, var(--space-2)); }
.af-cal-week-view { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--af-cal-week-view-gap, var(--space-2)); }
.af-cal-daycol, .af-cal-lane { min-width: 0; border: var(--af-cal-daycol-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-cal-daycol-border-radius, var(--shape-radius-control)); padding: var(--af-cal-daycol-padding, var(--space-2)); background: var(--af-cal-daycol-background, var(--surface-plane)); }
.af-cal-daycol.is-today { border-color: var(--af-cal-daycol-is-today-border-color, var(--accent-action)); }
.af-cal-dayhead { margin: var(--af-cal-dayhead-margin, 0 0 var(--space-2)); font: var(--af-cal-dayhead-font, var(--type-label)); color: var(--af-cal-dayhead-color, var(--text-muted)); }
.af-cal-dayhead .af-cal-date { font: var(--af-cal-dayhead-cal-date-font, var(--type-body)); color: var(--af-cal-dayhead-cal-date-color, var(--text-ink)); }
.af-cal-lanehead { margin: var(--af-cal-lanehead-margin, var(--space-2) 0 var(--space-1)); font: var(--af-cal-lanehead-font, var(--type-label)); letter-spacing: var(--af-cal-lanehead-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-cal-lanehead-text-transform, var(--type-label-transform)); color: var(--af-cal-lanehead-color, var(--text-tertiary)); overflow-wrap: anywhere; }
.af-cal-lane > .af-cal-lanehead { margin-top: 0; }
.af-cal-count { color: var(--af-cal-count-color, var(--text-rider)); }
.af-cal-day-view { display: grid; grid-template-columns: var(--af-cal-day-view-grid-template-columns, repeat(var(--af-lanes, 1), minmax(0, 1fr))); gap: var(--af-cal-day-view-gap, var(--space-3)); }
@container block (width < 1024px) {
    .af-cal-day { min-height: var(--af-cal-day-at-to1024-min-height, var(--cal-day-min-medium)); }
    .af-cal-day-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container block (width < 640px) {
    /* row 235 (d): the head holds one line. The label leads the strip at the body's size, sized to its text beside the controls, so it breaks only
       where the block cannot hold it whole (A5's enlarged text); a day's long label takes the first row and the controls the second, together at their end. */
    .af-cal-strip { flex-wrap: wrap; gap: var(--af-cal-strip-at-to640-gap, var(--space-1)); }
    .af-cal-label { order: -1; flex: 1 1 auto; font: var(--af-cal-label-at-to640-font, var(--type-body)); font-weight: var(--af-cal-label-at-to640-font-weight, var(--type-heading-weight)); }
    .af-cal-prev { margin-inline-start: auto; }
    .af-cal[data-variant="day"] .af-cal-label { flex-basis: 100%; }
    .af-cal-dow { display: none; }
    .af-cal-month { display: block; border: 0; background: transparent; overflow: visible; }
    .af-cal-week { display: contents; }
    .af-cal-day { display: block; min-height: 0; margin-bottom: var(--af-cal-day-at-to640-margin-bottom, var(--space-2)); padding: var(--af-cal-day-at-to640-padding, var(--space-2) var(--space-3)); border: var(--af-cal-day-at-to640-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-cal-day-at-to640-border-radius, var(--shape-radius-control)); background: var(--af-cal-day-at-to640-background, var(--surface-plane)); }
    .af-cal-day.is-empty, .af-cal-day.is-outside { display: none; }
    .af-cal-week.is-empty { display: none; }   /* an agenda week with no event hides whole: a grid row whose every cell is hidden is an empty row (A2) */
    .af-cal-week-view, .af-cal-day-view { grid-template-columns: minmax(0, 1fr); }
    .af-cal-daycol.is-empty { display: none; }
    .af-cal-eventlabel { white-space: normal; }
}

/* ---- stepper: the strip, one step at a time, the review, the nav ---------------------------------------------- */

/* p-public ([AF-209]): the TRACKER face of a stepper with a valueFrom — a vertical rail of marks and names, done rungs filled,
   the current rung the unit's one bold line at body size, its sentence beneath; the page-level stepper and the card's slot alike */
/* d-ladder-track (row 208, [AF-420]; J2a `my`, Ken 12:26): ONE TRACK behind the dots, on their axis — each step's
   ::before runs from its dot's centre to the next dot's (the step's top space and half its first line, at both ends), so it crosses
   the whole step, its note included; the walked part in the ink, the part ahead the hairline; every dot stands above it inside the
   tracker's own stacking context (a hollow dot masks it in the plane's fill), on its name's first line; J2a's 12 px dot, the current
   one 18, a hollow one's ring at the border weight */
.af-tracker { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; isolation: isolate; }
.af-tracker-step { --af-tone: var(--border-default); position: relative; display: grid; grid-template-columns: var(--af-tracker-step-grid-template-columns, var(--stepper-mark-column) minmax(0, 1fr)); column-gap: var(--af-tracker-step-column-gap, var(--space-3)); align-items: start; padding-block: var(--af-tracker-step-padding-block, var(--space-1)); font: var(--af-tracker-step-font, var(--type-body)); color: var(--af-tracker-step-color, var(--text-muted)); }
.af-tracker-step::before { content: ""; position: absolute; inset-inline-start: var(--af-tracker-step-before-inset-inline-start, calc((var(--stepper-mark-column) - var(--block-edge-thin)) / 2)); inline-size: var(--af-tracker-step-before-inline-size, var(--block-edge-thin)); top: var(--af-tracker-step-before-top, calc(var(--space-1) + 0.5lh)); bottom: var(--af-tracker-step-before-bottom, calc(-1 * (var(--space-1) + 0.5lh))); border-inline-start: var(--af-tracker-step-before-border-inline-start, var(--block-edge-thin) solid var(--border-hairline)); }   /* an edge, not a fill: forced colours keep it */
.af-tracker-step:last-child::before { display: none; }
.af-tracker-mark { position: relative; z-index: 1; justify-self: center; box-sizing: border-box; width: var(--af-tracker-mark-width, var(--stepper-mark-size)); height: var(--af-tracker-mark-height, var(--stepper-mark-size)); margin-top: var(--af-tracker-mark-margin-top, calc((1lh - var(--stepper-mark-size)) / 2)); border-radius: var(--af-tracker-mark-border-radius, var(--shape-radius-pill)); border: var(--af-tracker-mark-border, var(--shape-border-width) solid var(--af-tone)); background: var(--af-tracker-mark-background, var(--surface-plane)); }
.af-tracker-step.is-done { --af-tone: var(--text-ink); }
.af-tracker-step.is-done .af-tracker-mark, .af-tracker-step.is-current .af-tracker-mark { background: var(--af-tracker-step-is-done-tracker-mark-background, var(--af-tone)); }
.af-tracker-step.is-done::before { border-inline-start-color: var(--af-tracker-step-is-done-before-border-inline-start-color, var(--text-ink)); }
.af-tracker-step.is-current { --af-tone: var(--text-ink); color: var(--af-tracker-step-is-current-color, var(--text-ink)); }
.af-tracker-step.is-current .af-tracker-mark { width: var(--af-tracker-step-is-current-tracker-mark-width, var(--stepper-mark-current)); height: var(--af-tracker-step-is-current-tracker-mark-height, var(--stepper-mark-current)); margin-top: var(--af-tracker-step-is-current-tracker-mark-margin-top, calc((1lh - var(--stepper-mark-current)) / 2)); }
.af-tracker-step.is-current .af-tracker-name { font-weight: var(--af-tracker-step-is-current-tracker-name-font-weight, var(--type-heading-weight)); }   /* the unit's one bold line, at body size (Ken's word, J2a) */
.af-tracker-name { overflow-wrap: anywhere; }
.af-tracker-body { grid-column: 2; padding-block: var(--af-tracker-body-padding-block, var(--space-1) var(--space-2)); color: var(--af-tracker-body-color, var(--text-ink)); }
.af-tracker-body .af-banner[data-variant="inline"] { padding: 0; border: 0; }   /* the sentence beneath the rung is prose in the flow, not a band */
.af-tracker-body .af-banner[data-variant="inline"].tone-muted { color: inherit; }   /* row 233 (J2a `my`): the rung's sentence draws the body's ink; the muted word is a band's. A toned note keeps its tone */
.af-tracker-body .af-banner[data-variant="inline"] > .syn-icon { display: none; }   /* J2a: the sentence under the rung wears no glyph */
.af-stepper-strip { display: flex; gap: var(--af-stepper-strip-gap, var(--space-2)); list-style: none; margin: var(--af-stepper-strip-margin, 0 0 var(--space-3)); padding: 0; }
.af-stepper-mark { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--af-stepper-mark-gap, var(--space-2)); padding-top: var(--af-stepper-mark-padding-top, var(--space-2)); border-top: var(--af-stepper-mark-border-top, var(--block-edge) solid var(--border-default)); font: var(--af-stepper-mark-font, var(--type-label)); color: var(--af-stepper-mark-color, var(--text-tertiary)); }
.af-stepper-mark.is-done { border-top-color: var(--af-stepper-mark-is-done-border-top-color, var(--state-success)); color: var(--af-stepper-mark-is-done-color, var(--text-muted)); }
.af-stepper-mark.is-current { border-top-color: var(--af-stepper-mark-is-current-border-top-color, var(--accent-action)); color: var(--af-stepper-mark-is-current-color, var(--text-ink)); }
.af-stepper-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--af-stepper-num-width, var(--stepper-num-size)); height: var(--af-stepper-num-height, var(--stepper-num-size)); border: var(--af-stepper-num-border, var(--shape-border-width) solid currentColor); border-radius: var(--af-stepper-num-border-radius, var(--shape-radius-pill)); font: var(--af-stepper-num-font, var(--type-label)); }
.af-stepper-num:empty { display: none; }
.af-stepper-label { overflow-wrap: anywhere; }
.af-stepper-count { display: none; margin: var(--af-stepper-count-margin, 0 0 var(--space-2)); font: var(--af-stepper-count-font, var(--type-label)); color: var(--af-stepper-count-color, var(--text-muted)); }
.af-stepper-title { margin: var(--af-stepper-title-margin, 0 0 var(--block-title-gap)); font: var(--af-stepper-title-font, var(--type-heading)); color: var(--af-stepper-title-color, var(--text-ink)); }
.af-stepper-review { list-style: none; margin: 0; padding: 0; }
.af-stepper-review li { display: flex; align-items: center; justify-content: space-between; gap: var(--af-stepper-review-li-gap, var(--space-2)); padding: var(--af-stepper-review-li-padding, var(--space-2) 0); border-bottom: var(--af-stepper-review-li-border-bottom, var(--shape-border-width) solid var(--border-hairline)); font: var(--af-stepper-review-li-font, var(--type-body)); color: var(--af-stepper-review-li-color, var(--text-ink)); }
.af-stepper-nav { display: flex; justify-content: space-between; gap: var(--af-stepper-nav-gap, var(--space-2)); margin-top: var(--af-stepper-nav-margin-top, var(--space-4)); padding-top: var(--af-stepper-nav-padding-top, var(--space-3)); border-top: var(--af-stepper-nav-border-top, var(--shape-border-width) solid var(--border-hairline)); }
@container block (width < 640px) {
    .af-stepper-mark:not(.is-current) .af-stepper-label { display: none; }
    .af-stepper-mark:not(.is-current) { flex: 0 0 24px; }
    .af-stepper-count { display: block; }
}

/* ---- completeness meter ---------------------------------------------------------------------------------------- */
.af-meter-ringwrap { display: flex; align-items: center; gap: var(--af-meter-ringwrap-gap, var(--space-3)); }
/* p-shell2-fix (CI 41116244517, the runner's wider fallback face at 200 % text): in a narrow slot — a board card, a side panel — the
   carried meter wraps its label beneath the track instead of overflowing the block (A5; the carried sheet's row keeps nowrap) */
.af-meter .syn-cmeter { flex-wrap: wrap; }
.af-meter .syn-cmeter-label { white-space: normal; }
.af-meter-ring { flex: none; }
.af-meter-track { fill: none; stroke: var(--af-meter-track-stroke, var(--border-default)); stroke-width: var(--af-meter-track-stroke-width, 4); }
.af-meter-fill { fill: none; stroke: var(--af-meter-fill-stroke, var(--accent-action)); stroke-width: var(--af-meter-fill-stroke-width, 4); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.af-meter-label { font: var(--af-meter-label-font, var(--type-label)); color: var(--af-meter-label-color, var(--text-muted)); font-variant-numeric: var(--af-meter-label-font-variant-numeric, tabular-nums); }
.af-meter-gaps { margin: var(--af-meter-gaps-margin, var(--space-2) 0 0); padding-left: var(--af-meter-gaps-padding-left, var(--space-4)); font: var(--af-meter-gaps-font, var(--type-label)); color: var(--af-meter-gaps-color, var(--text-muted)); }
/* the detail variant (p-grammar4 [AF-162]): the score's questions as rows — the question in ink, the verdict word under it in its
   tone, a one-line reason in body ink; an open row is the act (a link filling the row, a chevron at its end), a passed row a reading */
.af-meter-rows { list-style: none; margin: var(--af-meter-rows-margin, var(--space-3) 0 0); padding: 0; counter-reset: af-meter-row; }
.af-meter-row { --af-tone: var(--text-muted); counter-increment: af-meter-row; display: flex; align-items: baseline; gap: var(--af-meter-row-gap, var(--space-2)); padding: var(--af-meter-row-padding, var(--space-2) 0); border-top: var(--af-meter-row-border-top, var(--shape-border-width) solid var(--border-hairline)); font: var(--af-meter-row-font, var(--type-body)); color: var(--af-meter-row-color, var(--text-ink)); }   /* d-dbq-head (row 231 (4), J1b): the number on the question's first line */
.af-meter-row::before { content: counter(af-meter-row); flex: none; min-width: var(--af-meter-row-before-min-width, var(--space-4)); font: var(--af-meter-row-before-font, var(--type-caption)); color: var(--af-meter-row-before-color, var(--text-tertiary)); font-variant-numeric: var(--af-meter-row-before-font-variant-numeric, tabular-nums); }
.af-meter-rowact { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--af-meter-rowact-gap, var(--space-2)); color: inherit; text-decoration: var(--af-meter-rowact-text-decoration, none); min-height: var(--target-min); }
.af-meter-rowact > svg { flex: none; color: var(--af-meter-rowact-svg-color, var(--accent-action)); }
.af-meter-rowbody { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: var(--af-meter-rowbody-gap, var(--block-mark-gap)); }
.af-meter-question { overflow-wrap: anywhere; }
.af-meter-verdict { font: var(--af-meter-verdict-font, var(--type-caption)); color: var(--af-meter-verdict-color, var(--af-tone)); }
.af-meter-reason { font: var(--af-meter-reason-font, var(--type-caption)); color: var(--af-meter-reason-color, var(--text-body)); overflow-wrap: anywhere; }
.af-meter-row.tone-attention { --af-tone: var(--state-attention-text); }
.af-meter-row.tone-warning { --af-tone: var(--state-warning-text); }
.af-meter-row.tone-success { --af-tone: var(--state-success-text); }
.af-meter-row.tone-info { --af-tone: var(--state-info-text); }

/* ---- questionnaire (p-grammar2): the component's own sheet draws it; the block root frames the sign act ---------- */
.af-questionnaire-sign { font: var(--af-questionnaire-sign-font, var(--type-label)); color: var(--af-questionnaire-sign-color, var(--text-muted)); margin: var(--af-questionnaire-sign-margin, 0 0 var(--space-2)); }

/* ---- document viewer (p-grammar2): the viewer's own sheet draws the faces; side-by-side stacks at compact -------- */
.af-docviewer-none { font: var(--af-docviewer-none-font, var(--type-label)); color: var(--af-docviewer-none-color, var(--text-muted)); margin: 0; }
.af-docviewer .syn-docv.is-side-by-side .syn-docv-companion { min-width: 0; }
@container block (width < 640px) {
    .af-docviewer .syn-docv.is-side-by-side .syn-docv-body { flex-direction: column; }
}

/* p-public2 (row 57): an act's post-state — the Success line under the title, the design's inline banner in a plane of its own */
.af-done { margin-block: var(--af-done-margin-block, var(--space-2) var(--space-3)); }
.af-done .af-banner[data-variant="inline"] { background: var(--af-done-banner-variant-inline-background, var(--surface-plane)); border-radius: var(--af-done-banner-variant-inline-border-radius, var(--shape-radius-plane)); padding: var(--af-done-banner-variant-inline-padding, var(--space-3) var(--space-4)); font-weight: var(--af-done-banner-variant-inline-font-weight, var(--type-heading-weight)); color: var(--af-done-banner-variant-inline-color, var(--state-success)); }
/* p-public2 (row 56): the questionnaire's post-send face — Sent in Success, the sentence and the way back in a plane */
.af-questionnaire-sent { display: flex; flex-direction: column; gap: var(--af-questionnaire-sent-gap, var(--space-2)); padding: var(--af-questionnaire-sent-padding, var(--space-4)); background: var(--af-questionnaire-sent-background, var(--surface-plane)); border-radius: var(--af-questionnaire-sent-border-radius, var(--shape-radius-plane)); }
.af-sent-word { margin: 0; font: var(--af-sent-word-font, var(--type-body)); font-weight: var(--af-sent-word-font-weight, var(--type-heading-weight)); color: var(--af-sent-word-color, var(--state-success)); }
.af-questionnaire-sent .af-empty { padding: 0; }

/* ---- signature (p-grammar2): the intent, the pad or the typed name, the act; held reads as a line ---------------- */
.af-signature-held { font: var(--af-signature-held-font, var(--type-label)); color: var(--af-signature-held-color, var(--text-muted)); margin: var(--af-signature-held-margin, 0 0 var(--space-2)); }
.af-signature-post { display: flex; flex-direction: column; gap: var(--af-signature-post-gap, var(--space-3)); }
.af-signature-name { display: grid; gap: var(--af-signature-name-gap, var(--space-2)); }   /* d-exam-faces2 ([AF-494]; J1b): the typed name and its helper */
.af-signature-help { margin: 0; font: var(--af-signature-help-font, var(--type-label)); color: var(--af-signature-help-color, var(--text-muted)); }
/* d-exam-faces2 ([AF-494]; J1b exam-dbq-id-sign at 1200 and 800): THE DOCUMENT ROW — the glyph, the title over its line, *Open* at the end; the title wraps
   before *Open* ever leaves the line */
.af-docrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--af-docrow-column-gap, var(--space-4)); padding: var(--af-docrow-padding, var(--space-2) var(--space-4)); border: var(--af-docrow-border, var(--shape-border-width) solid var(--border-default)); border-radius: var(--af-docrow-border-radius, var(--shape-radius-control)); }
.af-docrow-words { display: grid; gap: var(--af-docrow-words-gap, var(--space-1)); min-width: 0; }
.af-docrow-title { font: var(--af-docrow-title-font, var(--type-body)); font-weight: var(--af-docrow-title-font-weight, var(--type-heading-weight)); color: var(--af-docrow-title-color, var(--text-ink)); overflow-wrap: anywhere; }
.af-docrow-line { font: var(--af-docrow-line-font, var(--type-label)); color: var(--af-docrow-line-color, var(--text-muted)); }
.af-docrow-open { display: inline-flex; align-items: center; gap: var(--af-docrow-open-gap, var(--space-1)); min-height: var(--target-min); font: var(--af-docrow-open-font, var(--type-body)); font-weight: var(--af-docrow-open-font-weight, var(--type-heading-weight)); color: var(--af-docrow-open-color, var(--accent-action)); text-decoration: var(--af-docrow-open-text-decoration, none); white-space: nowrap; }
.af-docrow-open:hover { text-decoration: var(--af-docrow-open-hover-text-decoration, underline); }
.af-signature-typed { display: flex; flex-direction: column; gap: var(--af-signature-typed-gap, var(--space-1)); font: var(--af-signature-typed-font, var(--type-label)); color: var(--af-signature-typed-color, var(--text-muted)); }
.af-signature-typed input { width: var(--af-signature-typed-input-width, min(100%, var(--meter-width))); }
.af-signature-live .syn-signature-pad { max-width: 100%; }
/* p-public2 (row 54): the consent block's two faces — the document whole and the footnote on the review step; the record (Signed … in
   Success), the words behind a disclosure, the consequence in the label treatment and the one act on the signed face */
.af-signature { display: flex; flex-direction: column; gap: var(--af-signature-gap, var(--space-3)); }
.af-signature-document { margin-block-end: var(--af-signature-document-margin-block-end, var(--space-1)); }
.af-signature-footnote { margin: 0; font: var(--af-signature-footnote-font, var(--type-label)); color: var(--af-signature-footnote-color, var(--text-muted)); text-align: center; }
.af-signature-signed { margin: 0; font: var(--af-signature-signed-font, var(--type-body)); font-weight: var(--af-signature-signed-font-weight, var(--type-heading-weight)); color: var(--af-signature-signed-color, var(--state-success)); }
.af-signature-words > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--af-signature-words-summary-gap, var(--space-1)); min-block-size: var(--target-min); color: var(--af-signature-words-summary-color, var(--accent-action)); font: var(--af-signature-words-summary-font, var(--type-body)); font-weight: var(--af-signature-words-summary-font-weight, var(--type-heading-weight)); }
.af-signature-words > summary::-webkit-details-marker { display: none; }
.af-signature-consequence { margin: 0; font: var(--af-signature-consequence-font, var(--type-label)); color: var(--af-signature-consequence-color, var(--text-muted)); }
.af-signature-act { align-self: stretch; }
/* p-public2 (row 55): the choice before the signature — a radio row per option at the touch floor, the fact beneath its label, the chosen one in the accent's tint */
.af-signature-choice { display: flex; flex-direction: column; gap: var(--af-signature-choice-gap, var(--space-2)); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.af-signature-option { display: flex; flex-direction: column; gap: var(--af-signature-option-gap, var(--space-1)); padding: var(--af-signature-option-padding, var(--space-2) var(--space-3)); border: var(--af-signature-option-border, var(--shape-border-width) solid var(--border-emphasis)); border-radius: var(--af-signature-option-border-radius, var(--shape-radius-control)); background: var(--af-signature-option-background, var(--surface-plane)); }
.af-signature-option.is-chosen, .af-signature-option:has(input:checked) { background: var(--af-signature-option-is-chosen-background, var(--surface-plane)); border-color: var(--af-signature-option-is-chosen-border-color, var(--text-ink)); box-shadow: var(--af-signature-option-is-chosen-box-shadow, var(--choice-ink-ring)); }   /* AF-2308: ink */
.af-signature-option-label { position: relative; display: flex; align-items: center; gap: var(--af-signature-option-label-gap, var(--space-2)); min-block-size: var(--target-min); font: var(--af-signature-option-label-font, var(--type-body)); color: var(--af-signature-option-label-color, var(--text-ink)); cursor: pointer; }
.af-signature-option-label input { position: absolute; opacity: var(--af-signature-option-label-input-opacity, 0); width: var(--af-signature-option-label-input-width, var(--shape-border-width)); height: var(--af-signature-option-label-input-height, var(--shape-border-width)); margin: 0; }   /* the native radio hidden, the ring drawn — the questionnaire's pattern */
.af-signature-option-label::before { content: ""; width: var(--af-signature-option-label-before-width, var(--q-radio-size)); height: var(--af-signature-option-label-before-height, var(--q-radio-size)); border-radius: 50%; border: var(--af-signature-option-label-before-border, var(--shape-border-width) solid var(--radio-rest)); flex: none; box-sizing: border-box; }
.af-signature-option-label:has(input:checked)::before { background: var(--af-signature-option-label-has-input-checked-before-background, var(--text-ink)); border-color: var(--af-signature-option-label-has-input-checked-before-border-color, var(--text-ink)); box-shadow: var(--af-signature-option-label-has-input-checked-before-box-shadow, var(--radio-dot-inset)); }
.af-signature-option-label:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--accent-action); outline-offset: var(--focus-ring-width); }
.af-signature-option-desc { font: var(--af-signature-option-desc-font, var(--type-label)); color: var(--af-signature-option-desc-color, var(--text-muted)); padding-inline-start: var(--af-signature-option-desc-padding-inline-start, calc(var(--space-2) + var(--q-radio-size))); }   /* under the word, past the ring */

/* ---- skeleton loading (§3.6 #6): the block's footprint while it loads; nothing moves when the data arrives ------- */
.af-skeleton { display: flex; flex-direction: column; gap: var(--af-skeleton-gap, var(--space-2)); min-block-size: var(--af-skeleton-min-block-size, calc(var(--space-8) * 3)); padding: var(--af-skeleton-padding, var(--space-3) 0); }
.af-skeleton-bar { display: block; height: var(--af-skeleton-bar-height, var(--space-3)); border-radius: var(--af-skeleton-bar-border-radius, var(--shape-radius-control)); background: var(--af-skeleton-bar-background, var(--surface-inset)); }
.af-skeleton-bar:nth-child(2) { width: 100%; }
.af-skeleton-bar:nth-child(3) { width: 72%; }
.af-skeleton-bar:nth-child(4) { width: 48%; }
.af-skeleton[data-block="page-shell"] { min-block-size: var(--af-skeleton-block-page-shell-min-block-size, calc(var(--space-8) * 2)); }
.af-skeleton[data-block="banner"], .af-skeleton[data-block="toolbar"], .af-skeleton[data-block="metric-strip"] { min-block-size: var(--af-skeleton-block-banner-min-block-size, calc(var(--space-8) * 1.5)); flex-direction: row; align-items: center; }
.af-skeleton[data-block="banner"] .af-skeleton-bar, .af-skeleton[data-block="toolbar"] .af-skeleton-bar, .af-skeleton[data-block="metric-strip"] .af-skeleton-bar { flex: 1 1 0; height: var(--af-skeleton-block-banner-skeleton-bar-height, var(--space-6)); }
.af-skeleton[data-block="list"], .af-skeleton[data-block="status-board"], .af-skeleton[data-block="calendar"], .af-skeleton[data-block="document-viewer"] { min-block-size: var(--af-skeleton-block-list-min-block-size, calc(var(--space-8) * 7.5)); }
.af-skeleton[data-block="field-grid"], .af-skeleton[data-block="section-card"], .af-skeleton[data-block="questionnaire"], .af-skeleton[data-block="stepper"] { min-block-size: var(--af-skeleton-block-field-grid-min-block-size, calc(var(--space-8) * 5)); }
.af-skeleton[data-block="empty-state"] { min-block-size: var(--af-skeleton-block-empty-state-min-block-size, calc(var(--space-8) * 3.75)); align-items: center; }
.af-skeleton[data-block="empty-state"] .af-skeleton-bar { width: 40%; }

/* ---- the proposal face ([AF-72]; §3.6 #9): a suggestion looks like one, beside its field, never in it — the AI identity's tokens ([AF-117]) */
.af-proposals { list-style: none; margin: var(--af-proposals-margin, var(--space-3) 0 0); padding: 0; display: flex; flex-direction: column; gap: var(--af-proposals-gap, var(--space-2)); }
.af-proposal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--af-proposal-gap, var(--space-3)); align-items: start; padding: var(--af-proposal-padding, var(--space-3)); border: var(--af-proposal-border, var(--shape-border-width) dashed var(--accent-ai-border)); border-radius: var(--af-proposal-border-radius, var(--shape-radius-control)); background: var(--af-proposal-background, var(--accent-ai-tint)); }
.af-proposal-mark { display: inline-flex; align-items: center; gap: var(--af-proposal-mark-gap, var(--space-1)); font: var(--af-proposal-mark-font, var(--type-label)); letter-spacing: var(--af-proposal-mark-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-proposal-mark-text-transform, var(--type-label-transform)); color: var(--af-proposal-mark-color, var(--accent-ai)); white-space: nowrap; }
.af-proposal-body { display: flex; flex-direction: column; gap: var(--af-proposal-body-gap, var(--block-mark-gap)); min-width: 0; }
.af-proposal-field { font: var(--af-proposal-field-font, var(--type-caption)); color: var(--af-proposal-field-color, var(--text-tertiary)); }
.af-proposal-value { font: var(--af-proposal-value-font, var(--type-body)); color: var(--af-proposal-value-color, var(--text-ink)); overflow-wrap: anywhere; }
.af-proposal-why { font: var(--af-proposal-why-font, var(--type-caption)); color: var(--af-proposal-why-color, var(--text-muted)); }
.af-proposal-source { font: var(--af-proposal-source-font, var(--type-caption)); color: var(--af-proposal-source-color, var(--text-tertiary)); }
.af-proposal-acts { display: flex; gap: var(--af-proposal-acts-gap, var(--space-2)); }
/* t-press-acts (row 249; AF-293; [AF-531]): Dismiss is the <summary> of its own <details>: the browser opens it, and an open one takes its proposal away, and the band with the last. */
.af-proposal-dismiss > summary { list-style: none; cursor: pointer; }
.af-proposal-dismiss > summary::-webkit-details-marker { display: none; }
.af-proposal-body:has(.af-proposal-dismiss[open]) { display: none; }
.af-banner.is-proposal:not(:has(.af-proposal-dismiss:not([open]))) { display: none; }
@container block (width < 640px) {
    .af-proposal { grid-template-columns: minmax(0, 1fr); }
}

/* ---- time, oriented (§3.6 #7): relative first, absolute beside ------------------------------------------------- */
.af-time { font: var(--af-time-font, var(--type-caption)); color: var(--af-time-color, var(--text-muted)); }
.af-time-rel { color: var(--af-time-rel-color, var(--text-ink)); }
.af-time-sep { color: var(--af-time-sep-color, var(--text-faint)); }
/* row 96 ([AF-296]): options as slot-led radio rows in two groups, the picked option's outcome beside the rows — beneath at compact */
/* d-form-faces2 (AF row 214; [AF-429]; AF-132): the rows span their card — the body stretches across the field
   (the Field's control row sized it to its content: ~280 of an 890 card) — and a pick restyles its row and its outcome with no
   circuit: each row carries its own outcome, shown while its input is checked; from a 640 block it stands at the top of the
   second column beside a hairline (J3a: the preference beside the rows), placed in that column's area out of the rows' flow */
.af-options { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.af-options-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--af-options-body-gap, var(--space-3)); align-self: stretch; inline-size: 100%; }
@container block (width >= 640px) {
    .af-options-body:has(.af-option-outcome):not(:has(.af-options-aside)) { position: relative; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--af-options-body-has-option-outcome-not-has-options-aside-at-from640-column-gap, var(--space-6)); align-items: start; }
    .af-options-body:has(.af-option-outcome):not(:has(.af-options-aside))::after { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; margin-inline-start: var(--kit-body-has-option-outcome-not-has-options-aside-after-at-from640-margin-inline-start, calc(var(--space-6) / -2)); border-inline-start: var(--kit-body-has-option-outcome-not-has-options-aside-after-at-from640-border-inline-start, var(--shape-border-width) solid var(--border-hairline)); }
    .af-options-body:not(:has(.af-options-aside)) .af-option-outcome { position: absolute; grid-column: 2; grid-row: 1; inset-block-start: 0; inset-inline: 0; padding-inline-start: 0; }
}
/* d-ops-faces2 (AF row 246; [AF-514]; J3a's mock: 1.6fr and 1fr, a 32 gap, the hairline at the second column's edge and 32 inside it; stacked at 800, where the
   mock's isWide has ended, so the wide edge of the shell, the package's nearest of its three): the aside's column is level with the field's label, the outcome in the grid's second row beneath it (an absolute child placed in a grid area), whatever the aside wraps to */
@container shell (width >= 1024px) {
    .af-options-body:has(.af-options-aside) { position: relative; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: var(--af-options-body-has-options-aside-at-from1024-grid-template-rows, auto minmax(calc(var(--space-6) * 3), 1fr)); gap: var(--af-options-body-has-options-aside-at-from1024-gap, 0 var(--space-5)); align-items: start; }
    .af-options-body:has(.af-options-aside)::after { content: ""; grid-column: 2; grid-row: 1 / -1; align-self: stretch; border-inline-start: var(--af-options-body-has-options-aside-after-at-from1024-border-inline-start, var(--shape-border-width) solid var(--border-hairline)); }
    .af-options-body:has(.af-options-aside) > .af-options-groups { grid-column: 1; grid-row: 1 / -1; }
    .af-options-body > .af-options-aside { grid-column: 2; grid-row: 1; padding-inline-start: var(--af-options-body-options-aside-at-from1024-padding-inline-start, var(--space-5)); }
    .af-options-body:has(.af-options-aside) .af-option-outcome { position: absolute; grid-column: 2; grid-row: 2; inset-block-start: var(--af-options-body-has-options-aside-option-outcome-at-from1024-inset-block-start, var(--space-2)); inset-inline: var(--af-options-body-has-options-aside-option-outcome-at-from1024-inset-inline, var(--space-5) 0); padding-inline-start: 0; }
}
.af-options-aside-label { margin: 0; font: var(--af-options-aside-label-font, var(--type-label)); color: var(--af-options-aside-label-color, var(--text-muted)); }
.af-options-aside-value { margin: var(--af-options-aside-value-margin, var(--space-1) 0 0); font: var(--af-options-aside-value-font, var(--type-heading)); color: var(--af-options-aside-value-color, var(--text-ink)); }
.af-options-aside-caption { margin: var(--af-options-aside-caption-margin, var(--space-1) 0 0); font: var(--af-options-aside-caption-font, var(--type-caption)); color: var(--af-options-aside-caption-color, var(--text-muted)); }
.af-options-label { display: block; font: var(--af-options-label-font, var(--type-label)); color: var(--af-options-label-color, var(--text-muted)); }
.af-options-groups { display: flex; flex-direction: column; gap: var(--af-options-groups-gap, var(--space-3)); }
.af-options-group + .af-options-group { border-top: var(--af-options-group-options-group-border-top, var(--shape-border-width) solid var(--border-hairline)); padding-top: var(--af-options-group-options-group-padding-top, var(--space-3)); }
.af-options > .syn-ef-label { display: block; margin-block-end: var(--af-options-ef-label-margin-block-end, var(--space-2)); }
.af-options-heading { margin: var(--af-options-heading-margin, 0 0 var(--space-2)); font: var(--af-options-heading-font, var(--type-label)); font-weight: var(--af-options-heading-font-weight, var(--font-semibold)); letter-spacing: var(--af-options-heading-letter-spacing, var(--type-label-tracking)); text-transform: var(--af-options-heading-text-transform, var(--type-label-transform)); color: var(--af-options-heading-color, var(--text-muted)); }
.af-options-group[data-tone="success"] .af-options-heading { color: var(--af-options-group-tone-success-options-heading-color, var(--state-success-text)); }
.af-options-group[data-tone="warning"] .af-options-heading { color: var(--af-options-group-tone-warning-options-heading-color, var(--state-warning-text)); }
.af-options-empty { margin: 0; padding: var(--af-options-empty-padding, var(--space-2) var(--space-3)); border: var(--af-options-empty-border, var(--shape-border-width) dashed var(--border-default)); border-radius: var(--af-options-empty-border-radius, var(--shape-radius-control)); font: var(--af-options-empty-font, var(--type-body)); color: var(--af-options-empty-color, var(--text-body)); }
.af-option { display: flex; flex-direction: column; gap: var(--af-option-gap, var(--space-1)); padding: var(--af-option-padding, var(--space-2) var(--space-3)); border: var(--af-option-border, var(--shape-border-width) solid var(--border-default)); border-radius: var(--af-option-border-radius, var(--shape-radius-control)); background: var(--af-option-background, var(--surface-plane)); }
.af-option + .af-option { margin-top: var(--af-option-option-margin-top, var(--space-2)); }
/* AF-2308 (CWD-9's request 2; [AF-1082] 1): a chosen option is ink, never the accent — the accent is the page's act alone */
.af-option:has(input:checked) { background: var(--af-option-has-input-checked-background, var(--surface-plane)); border-color: var(--af-option-has-input-checked-border-color, var(--text-ink)); box-shadow: var(--af-option-has-input-checked-box-shadow, var(--choice-ink-ring)); }
.af-option-label { position: relative; display: flex; align-items: center; gap: var(--af-option-label-gap, var(--space-2)); min-block-size: var(--target-min); font: var(--af-option-label-font, var(--type-heading)); color: var(--af-option-label-color, var(--text-ink)); cursor: pointer; }
.af-option-note { font: var(--af-option-note-font, var(--type-caption)); color: var(--af-option-note-color, var(--text-muted)); }
.af-option-note::before { content: " · "; }
.af-option-label input { position: absolute; opacity: var(--af-option-label-input-opacity, 0); width: var(--af-option-label-input-width, var(--shape-border-width)); height: var(--af-option-label-input-height, var(--shape-border-width)); margin: 0; }   /* the native radio hidden, the ring drawn — the signature choice's pattern */
.af-option-label::before { content: ""; width: var(--af-option-label-before-width, var(--type-heading-size)); height: var(--af-option-label-before-height, var(--type-heading-size)); border-radius: 50%; border: var(--af-option-label-before-border, calc(var(--shape-border-width) * 2) solid var(--border-default)); flex: none; box-sizing: border-box; }   /* J3a's mock: an 18 ring in border.default, a 2 edge */
.af-option-label:has(input:checked)::before { background: var(--af-option-label-has-input-checked-before-background, var(--text-ink)); border-color: var(--af-option-label-has-input-checked-before-border-color, var(--text-ink)); box-shadow: var(--af-option-label-has-input-checked-before-box-shadow, var(--radio-dot-inset)); }
.af-option-label:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--accent-action); outline-offset: var(--focus-ring-width); }
.af-option-sub { font: var(--af-option-sub-font, var(--type-body)); color: var(--af-option-sub-color, var(--text-body)); padding-inline-start: var(--af-option-sub-padding-inline-start, calc(var(--space-2) + var(--type-heading-size))); }
.af-option-outcome { display: none; margin: 0; padding-inline-start: var(--af-option-outcome-padding-inline-start, calc(var(--space-2) + var(--type-heading-size))); font: var(--af-option-outcome-font, var(--type-body)); font-weight: var(--af-option-outcome-font-weight, var(--font-semibold)); color: var(--af-option-outcome-color, var(--text-body)); }
.af-option:has(input:checked) .af-option-outcome { display: block; }
.af-option-outcome[data-tone="success"] { color: var(--af-option-outcome-tone-success-color, var(--state-success-text)); }
.af-option-outcome[data-tone="warning"] { color: var(--af-option-outcome-tone-warning-color, var(--state-warning-text)); }
/* d-form-schema (AF row 209; [AF-417]; Compass's 12:37 lines 1, 2): the picker's commit sits with the pick — every row carries
   its copy and only the checked row's shows, so the act follows the pick with no circuit; beneath the rows while nothing is picked */
.af-option-commit { display: none; padding-inline-start: var(--af-option-commit-padding-inline-start, calc(var(--space-2) + var(--type-heading-size))); padding-top: var(--af-option-commit-padding-top, var(--space-1)); }
.af-option:has(input:checked) .af-option-commit { display: flex; flex-wrap: wrap; gap: var(--af-option-has-input-checked-option-commit-gap, var(--space-2)); }
.af-options-rest { display: flex; flex-wrap: wrap; gap: var(--af-options-rest-gap, var(--space-2)); }
.af-options-body:has(.af-option input:checked) .af-options-rest { display: none; }
/* d-form-schema (AF row 209; [AF-416]): a card over another record carries its own Save at its foot, beneath a hairline —
   at the end edge on a staff page; the plane's width on the portal, as J2a's acts are (Confirm, Get directions) */
.af-section-acts { display: flex; justify-content: flex-end; gap: var(--af-section-acts-gap, var(--space-2)); margin-top: var(--af-section-acts-margin-top, var(--space-4)); padding-top: var(--af-section-acts-padding-top, var(--space-3)); border-top: var(--af-section-acts-border-top, var(--shape-border-width) solid var(--border-hairline)); }
[data-density="public"] .af-section-acts { border-top: 0; padding-top: 0; }
[data-density="public"] .af-section-acts .syn-btn { flex: 1 1 auto; justify-content: center; font: var(--kit-density-public-af-section-acts-btn-font, var(--type-body)); font-weight: var(--kit-density-public-af-section-acts-btn-font-weight, var(--type-heading-weight)); }
[data-density="public"] .af-section-acts .af-act { display: flex; flex: 1 1 auto; }   /* CP-217: a named Save stands in its act's span */

/* ==== d-examiner (AF row 187; [AF-376]) — THE EXAMINER'S PAGE ANATOMY AS J1a/J1c DRAW IT ========================= */
/* (1) THE LADDER ON ITS PLANE ([AF-1037]; Harbor's CaseLadder): the heading (*Status*) outside, the stops on the plane at its padding;
   a side panel's ladder keeps the panel's plane. */
.af-ladder[data-variant="default"] > .af-ladder-steps { padding: var(--af-ladder-variant-default-ladder-steps-padding, var(--space-4)); background: var(--af-ladder-variant-default-ladder-steps-background, var(--surface-plane)); border: var(--af-ladder-variant-default-ladder-steps-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-ladder-variant-default-ladder-steps-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-ladder-variant-default-ladder-steps-box-shadow, var(--elevation-plane)); }
.af-side .af-ladder[data-variant="default"] > .af-ladder-steps { padding: 0; background: none; border: 0; box-shadow: none; }
/* (2) [AF-377] THE STATE AS THE CARD'S LEAD (J1c's My exams): the state word at the heading rung in its column's tone — Warning
   as text (*Returned by QA*), Attention as text on its tint (*VA finding*) — and its date beneath as the caption. */
.af-card-figure[data-figure="state"] { font: var(--af-card-figure-figure-state-font, var(--type-heading)); }
.af-card-figure[data-tone="warning"] { color: var(--af-card-figure-tone-warning-color, var(--state-warning-text)); }
.af-card-figure[data-tone="attention"] { color: var(--af-card-figure-tone-attention-color, var(--state-attention-text)); background: var(--af-card-figure-tone-attention-background, var(--attention-tint)); padding: var(--af-card-figure-tone-attention-padding, 0 var(--space-1)); border-radius: var(--af-card-figure-tone-attention-border-radius, var(--shape-radius-control)); }
.af-card-figure[data-tone="success"] { color: var(--af-card-figure-tone-success-color, var(--state-success)); }
.af-card-figure[data-tone="muted"] { color: var(--af-card-figure-tone-muted-color, var(--text-muted)); }
/* (3) [AF-378] THE FIGURE CARD (J1c): a metric that filters nothing is a card on the plane — the word over the figure over the
   sub, cards side by side (standing's *Expires next*, *Rework rate*, *Satisfaction*); one alone is the summary card, the figure, the
   word and the sub on one baseline (My exams' *3* *DBQs need you* *1 returned by QA · 1 VA finding · 1 draft*). */
.af-metrics[data-variant="default"]:not(.is-filters) > .syn-metricbar { display: flex; flex-wrap: wrap; gap: var(--af-metrics-variant-default-not-is-filters-metricbar-gap, var(--space-4)); }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric { flex: 1 1 auto; min-width: var(--af-metrics-variant-default-not-is-filters-metric-min-width, min(100%, var(--toolbar-search-min))); max-width: 100%; display: flex; flex-direction: column; gap: var(--af-metrics-variant-default-not-is-filters-metric-gap, var(--space-1)); padding: var(--af-metrics-variant-default-not-is-filters-metric-padding, var(--space-4) var(--space-5)); background: var(--af-metrics-variant-default-not-is-filters-metric-background, var(--surface-plane)); border: var(--af-metrics-variant-default-not-is-filters-metric-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-metrics-variant-default-not-is-filters-metric-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-metrics-variant-default-not-is-filters-metric-box-shadow, var(--elevation-plane)); }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric-label { margin: 0; font: var(--af-metrics-variant-default-not-is-filters-metric-label-font, var(--type-caption)); text-transform: var(--af-metrics-variant-default-not-is-filters-metric-label-text-transform, none); letter-spacing: normal; color: var(--af-metrics-variant-default-not-is-filters-metric-label-color, var(--text-muted)); }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric-value { font: var(--af-metrics-variant-default-not-is-filters-metric-value-font, var(--type-figure)); letter-spacing: normal; color: var(--af-metrics-variant-default-not-is-filters-metric-value-color, var(--text-ink)); font-variant-numeric: var(--af-metrics-variant-default-not-is-filters-metric-value-font-variant-numeric, var(--type-numerals)); }
/* d-demo-fix (row 193, [AF-378]): a figure card holds its value — a long one wraps inside the card, never runs over its neighbour (the bar's
   nowrap is the inline strip's; the 03:3x matrix saw standing's *in 20 business days · Tue Dec 1* 522 px wide in a 243 card).
   d-faces-fix (row 198, [AF-401]; J1c exam-standing): THE CARD TAKES ITS VALUE'S MEASURE — each card's basis is its content
   (flex 1 1 auto, above), so *in 42 days* stands on one line in a card wider than its neighbours, the date in the sub beneath; a value
   wider than its share of the line takes a line of its own (the card spans the strip), so a figure wraps only past the strip's whole
   measure, balanced, at most two lines at the figure rung — never three in a third of the row (the review's #22) */
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric { white-space: normal; overflow-wrap: break-word; }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric-value { text-wrap: balance; }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric-sub { margin: 0; font: var(--af-metrics-variant-default-not-is-filters-metric-sub-font, var(--type-caption)); color: var(--af-metrics-variant-default-not-is-filters-metric-sub-color, var(--text-muted)); }
.af-metrics[data-variant="default"]:not(.is-filters) > .syn-metricbar > .syn-metric:only-child { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--kit-default-not-is-filters-metricbar-metric-only-child-column-gap, var(--space-3)); }
.af-metrics[data-variant="default"]:not(.is-filters) > .syn-metricbar > .syn-metric:only-child .syn-metric-value { order: -1; }
.af-metrics[data-variant="default"]:not(.is-filters) > .syn-metricbar > .syn-metric:only-child .syn-metric-label { font: var(--kit-not-is-filters-metricbar-metric-only-child-metric-label-font, var(--type-heading)); color: var(--kit-not-is-filters-metricbar-metric-only-child-metric-label-color, var(--text-ink)); }
.af-metrics[data-variant="default"]:not(.is-filters) > .syn-metricbar > .syn-metric:only-child .syn-metric-sub { font: var(--kit-not-is-filters-metricbar-metric-only-child-metric-sub-font, var(--type-body)); color: var(--kit-not-is-filters-metricbar-metric-only-child-metric-sub-color, var(--text-body)); }
/* d-cards-dates (row 211 (d), audit #20, [AF-411]; J1c exam-standing: *in 42 days* in ink, the green kept for the words): good
   news never colours a figure card's figure — under success or info the figure stays in ink (this beats the strip's own [AF-201] tone rule,
   which colours the figure of a tile and a stacked cell); the sub keeps the tone's words, and a problem (attention, warning) still colours both */
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric:is([data-tone="success"], [data-tone="info"]) .syn-metric-value { color: var(--kit-filters-metric-is-tone-success-tone-info-metric-value-color, var(--text-ink)); }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric[data-tone="attention"] :is(.syn-metric-value, .syn-metric-sub) { color: var(--kit-metric-tone-attention-is-metric-value-metric-sub-color, var(--state-attention-text)); }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric[data-tone="success"] .syn-metric-sub { color: var(--kit-default-not-is-filters-metric-tone-success-metric-sub-color, var(--state-success-text)); }
/* d-panels-cards (row 215 (d), [AF-424]; J1c exam-standing: *Dec 11, 2026 · Virginia license, audiology* in the body ink,
   *Everything else is current.* beneath it in green at the heading weight): a card with a status line gives the tone to that line and
   its sub keeps the body ink — the one green sentence on the card */
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric-status { margin-top: var(--af-metrics-variant-default-not-is-filters-metric-status-margin-top, var(--space-2)); font: var(--af-metrics-variant-default-not-is-filters-metric-status-font, var(--type-body)); font-weight: var(--af-metrics-variant-default-not-is-filters-metric-status-font-weight, var(--type-heading-weight)); }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric[data-tone="success"] .syn-metric-status { color: var(--kit-not-is-filters-metric-tone-success-metric-status-color, var(--state-success-text)); }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric[data-tone="info"] .syn-metric-status { color: var(--kit-default-not-is-filters-metric-tone-info-metric-status-color, var(--state-info-text)); }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric:has(> .syn-metric-status) .syn-metric-sub { font: var(--kit-not-is-filters-metric-has-metric-status-metric-sub-font, var(--type-body)); color: var(--kit-not-is-filters-metric-has-metric-status-metric-sub-color, var(--text-body)); }
/* d-exam-faces2 (row 225, [AF-495]; J1c exam-standing at 1200 and 800): A STRIP'S GROUPS — each run of figure cards under its heading, *Expires next* beside
   *My work* three to two, each card its top on the heading's line below and its own height; under a 640 block one above the other */
.af-metric-groups { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--af-metric-groups-gap, var(--space-5)); align-items: start; }
.af-metric-group { min-width: 0; }
.af-metric-group > .syn-metricbar { display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--af-metric-group-metricbar-gap, var(--space-4)); padding: 0; }
.af-metrics[data-variant="default"]:not(.is-filters) .af-metric-group .syn-metric { flex: 1 1 0; min-width: 0; }
.af-metrics[data-variant="default"]:not(.is-filters) .syn-metric:has(> .syn-metric-value:empty) .syn-metric-sub { font: var(--kit-not-is-filters-metric-has-metric-value-empty-metric-sub-font, var(--type-body)); color: var(--kit-not-is-filters-metric-has-metric-value-empty-metric-sub-color, var(--text-body)); }   /* J1c's *No survey results yet.*: the sentence alone, in the body ink */
@container block (width < 640px) { .af-metric-groups { grid-template-columns: minmax(0, 1fr); } }
/* (4) [AF-379] THE CENSUS CARD (J1a's packet): the figure and its words, a segment per item in the decoration accent as each
   is met, the banner that follows the meter drawn inside the card's foot on the plane, in its tone's words. */
.af-meter-census { padding: var(--af-meter-census-padding, var(--space-4) var(--space-5)); background: var(--af-meter-census-background, var(--surface-plane)); border: var(--af-meter-census-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-meter-census-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-meter-census-box-shadow, var(--elevation-plane)); }
.af-meter-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--af-meter-figure-gap, var(--space-2)); margin: var(--af-meter-figure-margin, 0 0 var(--space-3)); }
.af-meter-count { font: var(--af-meter-count-font, var(--type-figure)); color: var(--af-meter-count-color, var(--text-ink)); font-variant-numeric: var(--af-meter-count-font-variant-numeric, var(--type-numerals)); white-space: nowrap; }
.af-meter-words { font: var(--af-meter-words-font, var(--type-body)); color: var(--af-meter-words-color, var(--text-body)); }
.af-meter-segments { display: flex; gap: var(--af-meter-segments-gap, var(--space-1)); }
.af-meter-segment { flex: 1 1 0; min-width: 0; height: var(--af-meter-segment-height, var(--space-2)); border-radius: var(--af-meter-segment-border-radius, var(--shape-radius-control)); background: var(--af-meter-segment-background, var(--meter-rest)); }
.af-meter-segment.is-met { background: var(--decoration-accent, var(--accent-action)); }
.af-meter:has(> .af-meter-census):has(+ .af-banner) > .af-meter-census { border-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; padding-bottom: var(--af-meter-has-meter-census-has-banner-meter-census-padding-bottom, var(--space-2)); }
.af-meter:has(> .af-meter-census) + .af-banner { margin-top: 0; padding: var(--af-meter-has-meter-census-banner-padding, var(--space-2) var(--space-5) var(--space-4)); background: var(--af-meter-has-meter-census-banner-background, var(--surface-plane)); border: var(--af-meter-has-meter-census-banner-border, var(--shape-border-width) solid var(--plane-edge)); border-top: 0; border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--af-meter-has-meter-census-banner-border-end-start-radius, var(--shape-radius-plane)); border-end-end-radius: var(--af-meter-has-meter-census-banner-border-end-end-radius, var(--shape-radius-plane)); box-shadow: var(--af-meter-has-meter-census-banner-box-shadow, var(--elevation-plane)); }
/* (5) [AF-380] A LIST'S FILTER PILLS (J1a's packet): Harbor's chips with their counts, inset when off, the chip's own tone on
   its tint when pressed or when it carries one (*Not arrived 3* in Warning), the ink ring on a pressed neutral one. */
.af-chips { display: flex; flex-wrap: wrap; gap: var(--af-chips-gap, var(--space-2)); margin: var(--af-chips-margin, 0 0 var(--space-3)); }
.af-chip-count { color: var(--af-chip-count-color, var(--text-muted)); font-variant-numeric: var(--af-chip-count-font-variant-numeric, var(--type-numerals)); }
.af-chip[data-tone="warning"] { background: var(--af-chip-tone-warning-background, var(--warning-tint)); color: var(--af-chip-tone-warning-color, var(--state-warning-text)); }
.af-chip[data-tone="warning"] .af-chip-count { color: inherit; }
.af-chip.is-pressed { border-color: var(--af-chip-is-pressed-border-color, var(--text-ink)); }
/* (4, detail) the compliance card (J1b): the detail meter with words is the census over its rows in one plane — a segment per question in
   its verdict's tone; inside a side panel the panel is the plane. */
.af-meter-segment.tone-warning { background: var(--af-meter-segment-tone-warning-background, var(--state-warning)); }
.af-meter-segment.tone-attention { background: var(--af-meter-segment-tone-attention-background, var(--attention-mark)); }
.af-meter:has(> .af-meter-census + .af-meter-rows) > .af-meter-census { border-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; padding-bottom: var(--af-meter-has-meter-census-meter-rows-meter-census-padding-bottom, var(--space-2)); }
.af-meter-census + .af-meter-rows { margin: 0; padding: var(--af-meter-census-meter-rows-padding, 0 var(--space-5) var(--space-4)); background: var(--af-meter-census-meter-rows-background, var(--surface-plane)); border: var(--af-meter-census-meter-rows-border, var(--shape-border-width) solid var(--plane-edge)); border-top: 0; border-end-start-radius: var(--af-meter-census-meter-rows-border-end-start-radius, var(--shape-radius-plane)); border-end-end-radius: var(--af-meter-census-meter-rows-border-end-end-radius, var(--shape-radius-plane)); box-shadow: var(--af-meter-census-meter-rows-box-shadow, var(--elevation-plane)); }
.af-side .af-meter-census, .af-side .af-meter-census + .af-meter-rows { padding-inline: 0; background: none; border: 0; box-shadow: none; }
/* ---- p-shell-faces (AF row 189; [AF-372], [AF-373]; Cowork's 22:5x matrix, "181's family") ---------------
   (1) AN ACT READS THE THEME'S CONTROL SIZE — the comps' 16 at 1200 on every examiner and claimant page — and never more: the seat table
   (components.css, Synergy's chrome px, 11.5 and 12) keeps each act's face, field and weight; the size is the control rung's, scaled by the
   density only where the density asks it smaller (Dense's .92), never above the theme's (Clinical's and Public's 1.12 are type for reading).
   (3) A PLANE'S FACE IS ITS SHADOW: plane.edge is none in light (tokens.css), so a plane that drew only its edge takes the plane shadow — a
   rule of zero weight (:where), so a sheet's own overlay shadow at compact stands. (4) THE SHELL PAINTS ITS DENSITY'S CANVAS: row 186 drew it
   (`.af-appshell[data-density="public"]`, below); the staff shell shows the root's, the same token; the band above reads surface.rail. (2) THE STAFF TOP BAR KEEPS ITS WORDS WHILE A TOUR RUNS: the host sets the nav's 56 form (a rail's face) whenever a
   tour runs, at every width, so in a top-bar placement it undoes itself — the wordmark, the words, the person — and the entries
   read the body rung at the comp's 16 under the same density rule as the acts. */
.syn-btn.af-action, .af-form-acts .syn-btn { font-size: var(--syn-btn-action-font-size, calc(var(--type-control-size) * min(var(--density-type), 1))); }   /* d-demo-fix (row 193): the form's footer is acts too — 12 px at v0.1.52 */
:where(.af-card, .af-side, .af-sheet, .af-board-card, .af-cal-month, .af-cal-daycol, .af-cal-lane, .af-cal-day) { box-shadow: var(--kit-sheet-board-card-cal-month-cal-daycol-cal-lane-cal-day-box-shadow, var(--elevation-plane)); }
/* (6) ATTENTION IS state.attention ON EVERY DENSITY (row 186's routed line; [AF-374]): the tint, the seam and the mark are the
   attention role's (tokens.css); the ink the Attention tone wears beside them is the attention text, never Synergy's amber warning text —
   a search hit's highlight is the hit wash, amber, and stays so (the document viewer's sheets) */
.af-banner.tone-attention, .syn-listgrid-cell[data-tone="attention"], .af-fieldro[data-tone="attention"] .syn-ef-control, .af-board-card[data-tone="attention"] .af-board-word,
.af-card-value[data-tone="attention"], .af-card-state[data-tone="attention"], .af-board-stage-sub.tone-attention { color: var(--af-banner-tone-attention-color-2, var(--state-attention-text)); }
@container shell (width >= 640px) and (width < 1024px) {
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail-label { font-size: var(--af-appshell-at-medium-top-bar-appshell-nav-rail-label-at-from640-to1024-font-size, calc(var(--type-body-size) * min(var(--density-type), 1))); }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-head { display: flex; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-item { display: flex; gap: var(--kit-medium-top-bar-appshell-nav-rail-is-collapsed-rail-item-at-from640-to1024-gap, var(--space-2)); }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-label { display: inline-flex; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-foot-id { display: flex; }
    .af-appshell[data-at-medium="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .aptive-rail-chip { display: inline; }
}
@container shell (width >= 1024px) and (width < 1440px) {
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail-label { font-size: var(--af-appshell-at-wide-top-bar-appshell-nav-rail-label-at-from1024-to1440-font-size, calc(var(--type-body-size) * min(var(--density-type), 1))); }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-head { display: flex; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-item { display: flex; gap: var(--kit-wide-top-bar-appshell-nav-rail-is-collapsed-rail-item-at-from1024-to1440-gap, var(--space-2)); }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-label { display: inline-flex; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-foot-id { display: flex; }
    .af-appshell[data-at-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .aptive-rail-chip { display: inline; }
}
@container shell (width >= 1440px) {
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail-label { font-size: var(--kit-appshell-at-extra-wide-top-bar-appshell-nav-rail-label-at-from1440-font-size, calc(var(--type-body-size) * min(var(--density-type), 1))); }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-head { display: flex; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-item { display: flex; gap: var(--kit-wide-top-bar-appshell-nav-rail-is-collapsed-rail-item-at-from1440-gap, var(--space-2)); }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-label { display: inline-flex; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-foot-id { display: flex; }
    .af-appshell[data-at-extra-wide="top-bar"] .af-appshell-nav .syn-rail.is-collapsed .aptive-rail-chip { display: inline; }
}
/* ---- d-claimant (AF row 186; Cowork's 23:00 ⚑ (A); J2a `my-light-1200`, `my-appointment-id-light-1200`; [AF-365]–[AF-368]):
   THE CLAIMANT'S PAGE ANATOMY ON THE PUBLIC CANVAS. (1) The frame paints the density's own canvas (the theme's warm paper under
   [data-density="public"], never the staff grey-blue), and a reading page's head joins its body in ONE centred column at the portal's
   measure — the title, the breadcrumb and the caption over the cards, no rule beneath. (2) The page's one Attention on a readonly field
   is the flag banner: the tint's plane across the card, the flag, the words in the tone's ink. (3) A card fact stands its label (glyph
   and word) over its value, the value under the word, its help line beneath (*Where* — the clinic, then its street). (4) The acts in a
   portal card and beside a field are the body's size at the heading weight, stacked full width, the primary filled and first. (5) The
   Attention tone on the portal reads its own family (state.attention: J2a's pink band, its ink), the band's one act bordered in it. */
.af-appshell[data-density="public"] { background: var(--af-appshell-density-public-background, var(--surface-canvas)); }
[data-density="public"] .af-shell:has(> .af-shell-cols[data-layout="reading"]) > .af-shell-head { max-inline-size: var(--af-shell-has-shell-cols-layout-reading-shell-head-max-inline-size-2, 40rem); margin-inline: auto; width: 100%; box-sizing: border-box; margin-block-end: var(--af-shell-has-shell-cols-layout-reading-shell-head-margin-block-end, var(--space-4)); }
[data-density="public"] .af-shell-cols[data-layout="reading"] > .af-shell-main { max-inline-size: var(--kit-density-public-af-shell-cols-layout-reading-shell-main-max-inline-size, 40rem); }
[data-density="public"] .af-shell-caption { margin-block-start: 0; color: var(--kit-density-public-af-shell-caption-color, var(--text-muted)); }
[data-density="public"] .af-fieldro.is-flag { display: block; }
[data-density="public"] .af-fieldro.is-flag .syn-ef-control { display: flex; align-items: center; gap: var(--kit-density-public-af-fieldro-is-flag-ef-control-gap, var(--space-2)); padding: var(--kit-density-public-af-fieldro-is-flag-ef-control-padding, var(--space-3) var(--space-4)); border-radius: var(--kit-density-public-af-fieldro-is-flag-ef-control-border-radius, var(--shape-radius-control)); background: var(--kit-density-public-af-fieldro-is-flag-ef-control-background, var(--state-attention-tint)); color: var(--kit-density-public-af-fieldro-is-flag-ef-control-color, var(--state-attention-text)); font-weight: var(--kit-density-public-af-fieldro-is-flag-ef-control-font-weight, var(--type-heading-weight)); }
[data-density="public"] .af-fieldro.is-flag .syn-ef-control .syn-icon { flex: none; }
[data-density="public"] .af-card-fact { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--kit-density-public-af-card-fact-column-gap, var(--space-2)); row-gap: var(--kit-density-public-af-card-fact-row-gap, var(--space-1)); align-items: center; }
[data-density="public"] .af-card-label { display: contents; }
[data-density="public"] .af-card-value { grid-column: 2; }
[data-density="public"] .af-card-fact:not(:has(.af-card-label > .syn-icon)) .af-card-value { grid-column: 1 / -1; }
.af-card-help { display: block; }
[data-density="public"] .af-card-acts .af-action, [data-density="public"] .af-beside .af-action { font: var(--kit-density-public-af-card-acts-action-font, var(--type-body)); font-weight: var(--kit-density-public-af-card-acts-action-font-weight, var(--type-heading-weight)); justify-content: center; }
[data-density="public"] .af-beside { display: flex; flex-direction: column; align-items: stretch; gap: var(--kit-density-public-af-beside-gap, var(--space-2)); margin-top: var(--kit-density-public-af-beside-margin-top, var(--space-4)); }
[data-density="public"] .af-beside .af-act { display: flex; }
[data-density="public"] .af-beside .af-act:has(.is-primary) { order: -1; }
[data-density="public"] .af-beside .af-action { flex: 1 1 auto; }
[data-density="public"] .af-banner.tone-attention:not([data-tint="word"]) { background: var(--kit-density-public-af-banner-tone-attention-not-tint-word-background, var(--state-attention-tint)); border-color: transparent; color: var(--kit-density-public-af-banner-tone-attention-not-tint-word-color, var(--state-attention-text)); }
[data-density="public"] .af-card, [data-density="public"] .af-card.has-acts { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "body" "acts"; }
[data-density="public"] .af-card.has-slot, [data-density="public"] .af-card.has-acts.has-slot { grid-template-areas: "lead" "body" "acts" "slot"; }
[data-density="public"] .af-card-acts { flex-direction: column; align-items: stretch; padding-top: 0; border-top: 0; }
[data-density="public"] .af-card-acts .af-act { display: flex; }
[data-density="public"] .af-card-acts .af-action { flex: 1 1 auto; }
[data-density="public"] .af-card-acts .af-confirm { display: block; flex: 1 1 auto; }
[data-density="public"] .af-card-acts .af-confirm > summary { display: flex; }
[data-density="public"] .af-card-acts .syn-btn.af-confirm-yes { width: 100%; margin-block-start: var(--kit-density-public-af-card-acts-btn-confirm-yes-margin-block-start, var(--space-2)); white-space: normal; }
[data-density="public"] .af-card-acts a.af-action:not(.is-primary):not([data-leaves]) { justify-content: flex-start; background: none; border-color: transparent; color: var(--kit-public-af-card-acts-a-action-not-is-primary-not-leaves-color, var(--accent-action)); padding-inline: 0; }
/* d-nits (row 202; the review's #25; J2b my-documents): A ONE-LINE CARD HUGS ITS CONTENT — a portal card with no body whose act is the row's
   *Open ›* is one row, the lead at the start and the link at its end on the lead's middle; no empty body track, no gap above the act */
[data-density="public"] .af-card.has-acts:not(.has-slot):has(> .af-card-body:empty):has(> .af-card-acts .is-rowlink) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lead acts"; align-items: center; padding-block: var(--kit-has-slot-has-card-body-empty-has-card-acts-is-rowlink-padding-block, var(--space-4)); }
[data-density="public"] .af-card.has-acts:not(.has-slot):has(> .af-card-acts .is-rowlink) > .af-card-body:empty { display: none; }
[data-density="public"] .af-card.has-acts:not(.has-slot):has(> .af-card-body:empty):has(> .af-card-acts .is-rowlink) .af-card-figure { display: flex; align-items: center; }   /* the words on the link's middle, no title-rung strut beneath them */
/* (6) the 22:5x matrix's lines: a navigating act beside a field reads as the comp's link (*Back to your appointment*); a readonly
   collection on the portal is a bulleted list (*What to bring*). d-portal-lists (row 219 (2), [AF-437]; Ken's word over
   J2b's ink word): the portal's *New* chip is TONED — the accent's tint and ink, the word in sentence case at the label step and the
   heading's weight (the portal's palette is the accent and Attention; Info reads the accent there) */
[data-density="public"] .af-card-chip { background: var(--kit-density-public-af-card-chip-background, var(--accent-muted)); color: var(--kit-density-public-af-card-chip-color, var(--accent-action)); font: var(--kit-density-public-af-card-chip-font, var(--type-label)); font-weight: var(--kit-density-public-af-card-chip-font-weight, var(--type-heading-weight)); letter-spacing: normal; text-transform: var(--kit-density-public-af-card-chip-text-transform, none); }
/* d-portal-lists (row 219 (1), [AF-437]; J2b my-documents; retires Compass's CP-215 tokens.css rule): A PORTAL LIST OF ROW
   LINKS IS ONE PLANE OF COMPACT ROWS — the renderer marks it `is-rows` (a lead, a heading, the row's link and nothing else): no card per
   row; the heading first at the body's size and the heading's weight, the lead beneath in body type and the body's ink with its chip
   beside it, *Open ›* at the row's end on the row's middle, a hairline between rows */
[data-density="public"] .af-cards.is-rows { gap: 0; padding: var(--kit-density-public-af-cards-is-rows-padding, var(--space-1) var(--space-4)); background: var(--kit-density-public-af-cards-is-rows-background, var(--surface-plane)); border: var(--kit-density-public-af-cards-is-rows-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--kit-density-public-af-cards-is-rows-border-radius, var(--shape-radius-plane)); box-shadow: var(--kit-density-public-af-cards-is-rows-box-shadow, var(--elevation-plane)); }
[data-density="public"] .af-cards.is-rows > .af-card.has-acts { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body acts" "lead acts"; gap: var(--kit-density-public-af-cards-is-rows-card-has-acts-gap, 0 var(--space-3)); align-items: center; padding: var(--kit-density-public-af-cards-is-rows-card-has-acts-padding, var(--space-3) 0); background: none; border: 0; border-radius: 0; box-shadow: none; }
[data-density="public"] .af-cards.is-rows > .af-card + .af-card { border-top: var(--kit-density-public-af-cards-is-rows-card-card-border-top, var(--shape-border-width) solid var(--border-hairline)); }
[data-density="public"] .af-cards.is-rows .af-card-lead { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--kit-density-public-af-cards-is-rows-card-lead-gap, 0 var(--space-2)); }
[data-density="public"] .af-cards.is-rows .af-card-figure { flex: 0 1 auto; font: var(--kit-density-public-af-cards-is-rows-card-figure-font, var(--type-body)); color: var(--kit-density-public-af-cards-is-rows-card-figure-color, var(--text-body)); }   /* the compact card's whole line for its figure gives way: *New* beside the sent line at 360 */
[data-density="public"] .af-cards.is-rows .af-card-heading { font: var(--kit-density-public-af-cards-is-rows-card-heading-font, var(--type-body)); font-weight: var(--kit-density-public-af-cards-is-rows-card-heading-font-weight, var(--type-heading-weight)); }
[data-density="public"] .af-cards.is-rows :is(.af-card-heading, .af-card-figure) .syn-value { font: inherit; color: inherit; }   /* a plain field's own face gives way to the part it sits in */
[data-density="public"] .af-cards.is-rows .af-card-acts { align-self: center; padding: 0; border: 0; }
/* (row 219 (2); J2b my-documents *Your uploads to VA*, my-mileage-light-360-empty): an empty group on the portal is the group's plane
   with its one sentence in body type at the start edge, its glyph before it — never the dashed, centred empty face */
[data-density="public"] :is(.af-list.is-cards, .af-timeline) > .af-empty { display: flex; flex-direction: row; align-items: flex-start; gap: var(--kit-density-public-is-af-list-is-cards-timeline-empty-gap, var(--space-3)); padding: var(--kit-density-public-is-af-list-is-cards-timeline-empty-padding, var(--space-4)); text-align: start; background: var(--kit-density-public-is-af-list-is-cards-timeline-empty-background, var(--surface-plane)); border: var(--kit-density-public-is-af-list-is-cards-timeline-empty-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--kit-density-public-is-af-list-is-cards-timeline-empty-border-radius, var(--shape-radius-plane)); box-shadow: var(--kit-density-public-is-af-list-is-cards-timeline-empty-box-shadow, var(--elevation-plane)); }
[data-density="public"] :is(.af-list.is-cards, .af-timeline) > .af-empty .af-empty-text { font: var(--kit-public-is-af-list-is-cards-timeline-empty-empty-text-font, var(--type-body)); color: var(--kit-public-is-af-list-is-cards-timeline-empty-empty-text-color, var(--text-body)); max-width: none; }
[data-density="public"] :is(.af-list.is-cards, .af-timeline) > .af-empty .af-empty-icon { display: flex; color: var(--kit-public-is-af-list-is-cards-timeline-empty-empty-icon-color, var(--text-muted)); }
/* (row 219 (3), [AF-438]; J2b my-mileage-*-request): a create form's two acts — the commit first, then the way back,
   bordered; at the end in a staff row (the way back before the commit); on the portal stacked full width under the card at the
   body's size and the heading's weight, no rule and no pinned bar */
.af-form-acts.is-create .af-form-cancel { order: -1; }
[data-density="public"] .af-form-acts.is-create { position: static; flex-direction: column; align-items: stretch; gap: var(--kit-density-public-af-form-acts-is-create-gap, var(--space-4)); padding: 0; border-top: 0; background: none; }
[data-density="public"] .af-form:has(.af-shell-cols[data-layout="reading"]) > .af-form-acts.is-create { max-inline-size: var(--kit-form-has-shell-cols-layout-reading-form-acts-is-create-max-inline-size, 40rem); margin-inline: auto; width: 100%; box-sizing: border-box; }   /* the column the card stands in, never the page's width */
[data-density="public"] .af-form-acts.is-create .syn-btn { flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--target-min); padding-block: 0; font: var(--kit-density-public-af-form-acts-is-create-btn-font, var(--type-body)); font-weight: var(--kit-density-public-af-form-acts-is-create-btn-font-weight, var(--type-heading-weight)); }
[data-density="public"] .af-form-acts.is-create .af-form-cancel { order: 0; background: var(--kit-density-public-af-form-acts-is-create-form-cancel-background, var(--surface-plane)); border-color: var(--kit-density-public-af-form-acts-is-create-form-cancel-border-color, var(--border-default)); color: var(--kit-density-public-af-form-acts-is-create-form-cancel-color, var(--text-ink)); text-decoration: var(--kit-density-public-af-form-acts-is-create-form-cancel-text-decoration, none); }
[data-density="public"] .af-beside a.af-action:not(.is-primary):not([data-leaves]) { justify-content: flex-start; background: none; border-color: transparent; color: var(--kit-public-af-beside-a-action-not-is-primary-not-leaves-color, var(--accent-action)); padding-inline: 0; }
[data-density="public"] .af-fieldro-items { list-style: disc; padding-inline-start: var(--kit-density-public-af-fieldro-items-padding-inline-start, var(--space-5)); }
[data-density="public"] .af-fieldgrid[data-variant="readonly"] .af-beside { grid-column: 1 / -1; }
[data-density="public"] .af-fieldro-derived { font: var(--kit-density-public-af-fieldro-derived-font, var(--type-body)); }
[data-density="public"] .af-fieldro.is-flag .af-fieldro-derived { font-weight: var(--kit-density-public-af-fieldro-is-flag-fieldro-derived-font-weight, var(--type-heading-weight)); }
/* ---- d-portal-cards (row 226; J2a my-light-1200, -360, my-appointment-id-light-1200, -360; J2b my-documents-light-360, my-mileage-light-360-empty): the portal's cards.
   (1) AF-175, [AF-491]: a card and a readonly plane are inset by the rung the page's compact gutter and the rows' plane read, at every width (the comp's 20 at
   1200 and at 360); under Public that rung is 22.5 px, so the inset stands beside Ken's gutter question from row 217: one rung, one answer. A fact's value and its help
   line are one size, the body's, whether the value is a reference (R6 through FieldValue), a derivation or a sentence.
   (2) AF-176: a card with nothing but its figure and a slot draws no empty row and no rule between them (*Vertigo*).
   (3) AF-81, [AF-490]: the lines of a card (a blank label): no label, one line's pitch, the first at the heading's weight, a space before the next labelled field.
   (4) AF-82, [AF-489]: an act's help line in the body's type; a row link in a stack under a primary stands at the stack's start (*See my appointment*).
   (5) AF-177, [AF-492]: at compact a portal head's acts stand beneath the body at its width, the disabled primary's reason beneath them. */
[data-density="public"] .af-card { padding: var(--kit-density-public-af-card-padding, var(--space-4)); }
[data-density="public"] .af-fieldgrid[data-variant="readonly"] .af-fieldgroup-plane { padding: var(--kit-public-af-fieldgrid-variant-readonly-fieldgroup-plane-padding, var(--space-4)); }
[data-density="public"] .af-card-value .syn-value:not(.syn-mono) { font: inherit; }
[data-density="public"] .af-fieldro .syn-value:not(.syn-mono) { font: var(--kit-density-public-af-fieldro-value-not-mono-font, var(--type-body)); }
[data-density="public"] .af-card.has-slot:not(.has-acts):has(> .af-card-body:empty) { grid-template-areas: "lead" "slot"; row-gap: var(--af-card-has-slot-not-has-acts-has-card-body-empty-row-gap, var(--space-2)); }
[data-density="public"] .af-card.has-slot:not(.has-acts) > .af-card-body:empty { display: none; }
[data-density="public"] .af-card.has-slot:not(.has-acts):has(> .af-card-body:empty) > .af-card-slot { padding-top: 0; border-top: 0; }
[data-density="public"] .af-fieldro.is-line { padding-block: 0; min-height: 0; }
[data-density="public"] .af-fieldro.is-line:not(.is-line + .is-line) :is(.syn-value, .af-fieldro-derived) { font-weight: var(--kit-is-line-not-is-line-is-line-is-value-fieldro-derived-font-weight, var(--type-heading-weight)); }
[data-density="public"] .af-fieldgroup-plane > .syn-identity-gridwrap > .syn-identity-grid:has(> .af-fieldro.is-line) { row-gap: 0; }
[data-density="public"] .syn-identity-grid:has(> .af-fieldro.is-line) > .af-fieldro + .af-fieldro:not(.is-line) { margin-block-start: var(--kit-grid-has-fieldro-is-line-fieldro-fieldro-not-is-line-margin-block-start, var(--space-3)); }
[data-density="public"] .af-fieldro.is-flag .syn-ef-control { padding-inline: var(--kit-density-public-af-fieldro-is-flag-ef-control-padding-inline, var(--space-3)); }
[data-density="public"] .af-fieldgrid[data-variant="readonly"] .af-beside { margin-top: var(--kit-density-public-af-fieldgrid-variant-readonly-beside-margin-top, var(--space-3)); }
[data-density="public"] :is(.af-card-acts, .af-beside) .syn-btn.af-action:not(.is-rowlink), [data-density="public"] .af-banner .af-banner-act { box-sizing: border-box; padding-block: 0; min-height: var(--target-min); }   /* one height, the density's floor */
[data-density="public"] .af-banner:has(.af-banner-act) { align-items: flex-start; }   /* J2a: the flag on the sentence's first line */
.af-act-help { flex-basis: 100%; font: var(--af-act-help-font, var(--type-caption)); color: var(--af-act-help-color, var(--text-muted)); }
[data-density="public"] .af-act-help { flex: none; font: var(--kit-density-public-af-act-help-font, var(--type-body)); color: var(--kit-density-public-af-act-help-color, var(--text-body)); }
[data-density="public"] .af-card-acts:has(> .af-card-open) > .af-card-rest .af-act:has(> .is-rowlink) { justify-content: flex-start; }
/* row 240 (J2a my-light-1200, -360): a row link in a card with a slot stands at the card's start with or without a primary above it; only a card of one line keeps it at the end. The tracker in a card: a done rung's name in the body's ink, the names 36 from the card's edge, a rung's sentence one line under its name; the decision's time at the heading's size in the body's weight. */
[data-density="public"] .af-card.has-slot .af-card-acts .af-act:has(> .is-rowlink) { justify-content: flex-start; }
[data-density="public"] .af-page-body { padding-block-start: var(--kit-density-public-af-page-body-padding-block-start, var(--space-3)); }   /* the title under the chrome: the compact rung at every width (J2a, J2b) */
[data-density="public"] .af-card-label .syn-icon { inline-size: var(--kit-density-public-af-card-label-icon-inline-size, var(--card-fact-glyph)); block-size: var(--kit-density-public-af-card-label-icon-block-size, var(--card-fact-glyph)); }
[data-density="public"] .af-tracker-step { column-gap: var(--kit-density-public-af-tracker-step-column-gap, var(--space-2)); }
[data-density="public"] .af-tracker-step.is-done { color: var(--kit-density-public-af-tracker-step-is-done-color, var(--text-body)); }
[data-density="public"] .af-tracker-body { padding-block: 0; }
[data-density="public"] .af-date-time { font-weight: var(--kit-density-public-af-date-time-font-weight, var(--type-body-weight)); }
.af-shell-actreason { display: none; margin: 0; font: var(--af-shell-actreason-font, var(--type-body)); color: var(--af-shell-actreason-color, var(--text-muted)); text-align: center; }
@container af-page (width < 640px) {
    [data-density="public"] .af-shell:has(> .af-shell-head .af-shell-actions) { display: flex; flex-direction: column; gap: var(--kit-density-public-af-shell-has-shell-head-shell-actions-at-to640-gap, var(--space-2)); }
    [data-density="public"] .af-shell:has(> .af-shell-head .af-shell-actions) > .af-shell-head,
    [data-density="public"] .af-shell:has(> .af-shell-head .af-shell-actions) > .af-shell-head > .af-shell-titlerow { display: contents; }
    [data-density="public"] .af-shell-cols:has(~ .af-shell-actions), [data-density="public"] .af-shell:has(> .af-shell-head .af-shell-actions) > .af-shell-cols { margin-top: var(--kit-density-public-af-shell-cols-has-shell-actions-at-to640-margin-top, var(--space-2)); }
    [data-density="public"] .af-shell-titlerow > .af-shell-actions { order: 1; flex: none; display: flex; flex-direction: column; align-items: stretch; width: 100%; margin-block-start: var(--kit-density-public-af-shell-titlerow-shell-actions-at-to640-margin-block-start, var(--space-3)); }
    [data-density="public"] .af-shell-actions .af-act { display: flex; }
    [data-density="public"] .af-shell-actions .af-action { flex: 1 1 auto; justify-content: center; font: var(--kit-density-public-af-shell-actions-action-at-to640-font, var(--type-body)); font-weight: var(--kit-density-public-af-shell-actions-action-at-to640-font-weight, var(--type-heading-weight)); }
    [data-density="public"] .af-shell-actreason { display: block; order: 2; }
}
/* ---- d-ops (row 188; J3a, Jordan's pages): the clock's figure card, the Decision card's read column -------------------- */
/* the clock as a card: a readonly field at the figure rung wears its tone on the figure itself (overdue Attention, at risk Warning,
   paused Muted), no tint bar behind a word at the figure rung; an empty label draws nothing — the group's heading names it */
.af-fieldro:has(> .syn-ef-control > .af-figure) > .syn-ef-control { background: transparent; }
.af-fieldro[data-tone="attention"] .af-figure { color: var(--af-fieldro-tone-attention-figure-color, var(--state-attention-text)); }
.af-fieldro[data-tone="warning"] .af-figure { color: var(--af-fieldro-tone-warning-figure-color, var(--state-warning-text)); }
.af-fieldro[data-tone="muted"] .af-figure { color: var(--af-fieldro-tone-muted-figure-color, var(--text-muted)); }
/* the Decision card (`template: "value"`): the stacked date on the start half, the read slots as a label column on the end half;
   one column at compact. The value's help line sits beneath it, muted (J3a: *In person* over *Audio diagnostic · In a booth*) */
.syn-identity-grid:has(> .af-date-slot:first-child):has(> .af-value-slot) > .af-date-slot { grid-column: 1; grid-row: 1 / span 6; }
.syn-identity-grid:has(> .af-date-slot:first-child):has(> .af-value-slot) > .af-value-slot { grid-column: -2; }   /* the last column: the end half at two, the one column at compact */
.syn-identity-grid:has(> .af-value-slot) .af-date-slot .syn-fv-vacant { font: var(--syn-identity-grid-has-value-slot-date-slot-fv-vacant-font, var(--type-figure)); color: var(--syn-identity-grid-has-value-slot-date-slot-fv-vacant-color, var(--text-muted)); }   /* *No time yet* at the figure rung */
.af-value-slot .af-fieldro-derived { font: var(--af-value-slot-fieldro-derived-font, var(--type-r6)); color: var(--af-value-slot-fieldro-derived-color, var(--text-ink)); }   /* d-ops-faces2 (row 246; [AF-515]): what a derivation yields reads as a field's own value does in the slot */
.af-value-slot .af-field-help { display: block; margin: var(--af-value-slot-field-help-margin, var(--space-1) 0 0); color: var(--af-value-slot-field-help-color, var(--text-muted)); }
/* the line beneath, never beside: the clock's figure over *by 3 days*, the Decision card's vacancy over its hint, a value over its muted line */
.af-fieldro:has(> .syn-ef-control > .af-figure) > .syn-ef-control,
.syn-identity-grid:has(> .af-value-slot) > .af-date-slot > .syn-ef-control,
.af-value-slot > .syn-ef-control { display: flex; flex-direction: column; align-items: flex-start; }

/* d-examiner2 (AF row 192; J1b's sign page at 800 and 1200): THE REVIEW LAYOUT — the leading banners over two panes, the start pane's
   blocks stacked (the signer of record, the compliance census), the end pane *What you are signing* at the heading rung over one
   plane holding the document's row, the certification and the typed name at full width; 2:3 at wide, 1:1 under 1024, stacked
   under 640. Tokens only. */
.af-review { display: grid; gap: var(--af-review-gap, var(--space-5)); }
.af-review > .af-block + .af-block, .af-review-start > .af-block + .af-block, .af-review-plane > .af-block + .af-block { margin-top: 0; }
.af-review-panes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--af-review-panes-gap, var(--space-5)); align-items: start; }
.af-review-start { display: grid; gap: var(--af-review-start-gap, var(--space-5)); align-content: start; min-width: 0; }
.af-review-end { min-width: 0; }
.af-review-title { margin: var(--af-review-title-margin, 0 0 var(--block-title-gap)); font: var(--af-review-title-font, var(--type-heading)); color: var(--af-review-title-color, var(--text-ink)); }
.af-review-plane { display: grid; gap: var(--af-review-plane-gap, var(--space-5)); border: var(--af-review-plane-border, var(--shape-border-width) solid var(--plane-edge)); border-radius: var(--af-review-plane-border-radius, var(--shape-radius-plane)); background: var(--af-review-plane-background, var(--surface-plane)); box-shadow: var(--af-review-plane-box-shadow, var(--elevation-plane)); padding: var(--af-review-plane-padding, var(--space-4)); }   /* d-exam-faces2: J1b's one inset on every side */
.af-review-start .af-fieldgrid { grid-template-columns: minmax(0, 1fr); }
.af-review-plane .af-signature-post { display: grid; gap: var(--af-review-plane-signature-post-gap, var(--space-5)); max-width: none; }
.af-review-plane .syn-signature-intent { font: var(--af-review-plane-signature-intent-font, var(--type-body)); }
.af-review-plane .af-signature-typed { font: var(--af-review-plane-signature-typed-font, var(--type-label)); color: var(--af-review-plane-signature-typed-color, var(--text-muted)); gap: var(--af-review-plane-signature-typed-gap, var(--space-2)); }
.af-review-plane .af-signature-typed input { width: 100%; min-height: calc(var(--target-min) * 1.2); font: var(--af-review-plane-signature-typed-input-font, var(--type-body)); }
/* d-demo-fix (row 193, [AF-384]): 2:3 down to the compact edge — the sign page beside the tour rail measured ~880 and drew 1:1 (373 / 335) */
@container af-page (width < 640px) { .af-review-panes { grid-template-columns: minmax(0, 1fr); } }

/* d-demo-fix2 (row 196; AF-108; [AF-394]; J1b's head): *MORE ▾* — a fourth secondary and beyond fold behind the head's
   own act at every width (the first two stay in the row); its menu drops from it, one act a line, and opens in both shells — the Menu's
   plane and script since AF-2070 (the menu section above) */
.af-more { display: contents; }
.af-more.is-more { display: inline-flex; position: relative; align-self: stretch; }
.af-overflow-toggle.is-more { display: inline-flex; gap: var(--af-overflow-toggle-is-more-gap, var(--space-1)); box-sizing: border-box; }
/* a head that folds behind *More* holds at most two secondaries, the toggle and the primary: above compact they keep together as ONE row —
   beside the title while title and row share the line (J1b at 1200), else the row's own line beneath it, the primary at its end edge (J1b at
   800; the touring 880) — and only a line too narrow for the row itself (200 % text, 400 % zoom: A5, WCAG 1.4.4 and 1.4.10) wraps its acts;
   never a page that scrolls for the look of one row */
@container af-page (width >= 640px) {
    .af-shell-titlerow:has(.af-more.is-more) { flex-wrap: wrap; }
    .af-shell-actions:has(> .af-more.is-more) { flex: 0 0 auto; max-width: 100%; }
}
/* d-exam-faces (row 210 (d), [AF-415]; the audit's #6 and #10, J1b exam-dbq-id at 1200 and 800): EVERY HEAD'S ACTS KEEP TOGETHER
   above compact, with or without *More* — Compass's DBQ head (*Open the packet · Medical opinion · Sign and submit*, no fourth secondary) shrank
   its acts' box beside the title, so *Sign and submit* fell to a second row and the title wrapped to two lines beside the rail; now the row stands
   beside the title while both share the line, else on its own line beneath it, and the title keeps its words on one line whenever the line
   holds them; a line too narrow for the row itself still wraps its acts (A5, WCAG 1.4.4 and 1.4.10) */
@container af-page (width >= 640px) {
    .af-shell-titlerow:has(> .af-shell-actions) { flex-wrap: wrap; row-gap: var(--af-shell-titlerow-has-shell-actions-at-from640-row-gap, var(--space-4)); }
    .af-shell-titlerow:has(> .af-shell-actions):has(.af-shell-subline, .af-shell-caption) { align-items: flex-start; }   /* J1b: on the title's line, never centred on the heading's three */
    /* d-dbq-head (row 231 (3), [AF-479]; J1b at 800, J3a's mock): the title row's space-between gives the row the end edge beside the title and the
       start edge on its own line beneath the caption, the primary last; no auto margin, which would hold it at the end edge there too */
    .af-shell-titlerow > .af-shell-actions { flex: 0 0 auto; max-width: 100%; margin-inline-start: 0; justify-content: flex-start; }
}

/* d-demo-fix2 (row 196; [AF-395]; J1a's packet, J2a's letters): A ROW'S NAVIGATION ACT IS ONE FACE — *Open ›* a text link
   in the accent at the row's end, its chevron trailing; no box, no fill, no bar — on a card and on a list row, in every density.
   The card that holds the page's Attention keeps its ink seat (J2a's unopened letter: ActionButton names no row link there). */
.syn-btn.af-action:is(.is-rowlink, .is-link) { flex: none; align-self: center; justify-content: flex-end; gap: var(--syn-btn-action-is-rowlink-gap, var(--space-1)); min-width: 0; padding-inline: 0; background: none; border-color: transparent; box-shadow: none; color: var(--syn-btn-action-is-rowlink-color, var(--accent-action)); font: var(--syn-btn-action-is-rowlink-font, var(--type-control)); font-weight: var(--syn-btn-action-is-rowlink-font-weight, var(--type-heading-weight)); text-decoration: var(--syn-btn-action-is-rowlink-text-decoration, none); }
.syn-btn.af-action:is(.is-rowlink, .is-link):hover { background: none; text-decoration: var(--syn-btn-action-is-rowlink-hover-text-decoration, underline); }
.af-card-acts .af-act:has(> .is-rowlink) { order: 99; justify-content: flex-end; }
.af-card-acts .syn-btn.af-action.is-rowlink, [data-density="public"] .af-card-acts .syn-btn.af-action.is-rowlink { flex: none; justify-content: flex-end; }

/* d-clinical-compact (AF row 232; CP-251 (10), (11); [AF-485], [AF-486]; J1b's and J1a's 360) — CLINICAL'S COMPACT CHROME, from the rail's own
   markup (the top bar's above 640: nothing is drawn twice but the acts): the wordmark, the mark and the person on a head above the page; the entries as equal tiles, each its glyph over its
   word, on the bar beneath it, the active one by its ink and weight (J1a draws no pill); the compact bar of *Saved · Save · the primary* pinned above them, inside the page's scroller, in the
   flow at the page's end, so it never lies over the page's last content. Standard's and Public's compact chrome do not read these rules. */
.af-actbar { display: none; }
.af-appshell { --chrome-head: calc(var(--target-min) + var(--space-3)); }
@container shell (width < 640px) {
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] > .af-appshell-grid { position: relative; grid-template-areas: "head" "main" "nav"; grid-template-rows: var(--kit-density-clinical-at-compact-bottom-bar-appshell-grid-at-to640-grid-template-rows, var(--chrome-head) minmax(0, 1fr) auto); }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav { grid-area: nav; }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail { gap: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-at-to640-gap, var(--space-1)); padding: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-at-to640-padding, var(--space-1) var(--space-2)); background: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-at-to640-background, var(--surface-plane)); }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-head { position: absolute; inset-block-start: 0; inset-inline: 0; box-sizing: border-box; block-size: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-head-at-to640-block-size, var(--chrome-head)); padding-inline: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-head-at-to640-padding-inline, var(--space-4)); gap: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-head-at-to640-gap, var(--space-3)); background: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-head-at-to640-background, var(--surface-plane)); border-block-end: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-head-at-to640-border-block-end, var(--shape-border-width) solid var(--rule-page)); }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .aptive-rail-who { position: absolute; inset-block-start: 0; inset-inline-end: var(--kit-at-compact-bottom-bar-appshell-nav-aptive-rail-who-at-to640-inset-inline-end, var(--space-4)); display: flex; align-items: center; block-size: var(--kit-at-compact-bottom-bar-appshell-nav-aptive-rail-who-at-to640-block-size, var(--chrome-head)); }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .aptive-rail-who > .aptive-rail-acts { inset-block: 100% auto; inset-inline: auto 0; }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-foot-id { display: inline; position: absolute; inline-size: 0; block-size: 0; overflow: hidden; clip-path: inset(50%); }   /* the person is the avatar; the name stays for assistive technology */
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-item { flex: 1 1 0; flex-direction: column; justify-content: center; gap: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-item-at-to640-gap, var(--space-1)); min-inline-size: 0; padding: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-item-at-to640-padding, var(--space-1)); border: 0; border-radius: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-item-at-to640-border-radius, var(--shape-radius-control)); background: none; box-shadow: none; }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-item .syn-icon { width: var(--kit-at-compact-bottom-bar-appshell-nav-rail-item-icon-at-to640-width, calc(var(--space-5) / var(--density-space))); height: var(--kit-at-compact-bottom-bar-appshell-nav-rail-item-icon-at-to640-height, calc(var(--space-5) / var(--density-space))); }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; align-items: center; font: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-label-at-to640-font, var(--type-caption)); color: var(--kit-clinical-at-compact-bottom-bar-appshell-nav-rail-label-at-to640-color, var(--text-muted)); white-space: nowrap; }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-item.is-active, .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-item.is-active:hover { background: none; box-shadow: none; }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail-item.is-active .syn-rail-label { color: var(--kit-bottom-bar-appshell-nav-rail-item-is-active-rail-label-at-to640-color, var(--text-ink)); font-weight: var(--kit-bottom-bar-appshell-nav-rail-item-is-active-rail-label-at-to640-font-weight, var(--type-heading-weight)); }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail .syn-rail-item.is-held .aptive-rail-chip { display: none; }   /* as at medium ([AF-454]): its muted word, its title, its assistive reason */
    /* in a chair too the head stands: the 56 form is a rail's, and the band above carries the mark */
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] .af-appshell-nav .syn-rail.is-collapsed .syn-rail-head { display: flex; }
    /* a focused page (J1b's signature at 360): the head stands, the entries do not */
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"]:has([data-nav="none"]) .af-appshell-nav .aptive-rail-group { display: none; }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"]:has([data-nav="none"]) .af-appshell-nav .syn-rail { padding: 0; border: 0; min-block-size: 0; }
    /* the sheet open (J1b's -remarks at 360): it covers the bars, so neither takes a keyboard's focus behind it, and the page's end scrolls clear of it */
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"]:has(.af-sheet) .af-appshell-nav .aptive-rail-group { visibility: hidden; }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] > .af-appshell-grid > .af-appshell-main:has(.af-sheet) { padding-block-end: var(--kit-bottom-bar-appshell-grid-appshell-main-has-sheet-at-to640-padding-block-end, 70dvh); scroll-padding-block-end: 70dvh; }
    .af-appshell[data-density="clinical"] .af-shell:has(.af-sheet) > .af-actbar { display: none; }

    /* the compact bar: the primary last, its neighbour beside it while both read whole, else each its own row (J1b's opinion) */
    .af-appshell[data-density="clinical"] .af-actbar { position: sticky; inset-block-end: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-appshell-density-clinical-actbar-at-to640-gap, var(--space-2)); margin-inline: var(--af-appshell-density-clinical-actbar-at-to640-margin-inline, calc(-1 * var(--space-4))); margin-block-end: var(--af-appshell-density-clinical-actbar-at-to640-margin-block-end, calc(-1 * var(--space-3))); padding: var(--af-appshell-density-clinical-actbar-at-to640-padding, var(--space-2) var(--space-4) var(--space-3)); background: var(--af-appshell-density-clinical-actbar-at-to640-background, var(--surface-plane)); border-block-start: var(--af-appshell-density-clinical-actbar-at-to640-border-block-start, var(--shape-border-width) solid var(--rule-page)); }
    .af-appshell[data-density="clinical"] .af-actbar:not(:has(.af-action)) { display: none; }
    .af-actbar-saved { flex: 1 1 100%; font: var(--af-actbar-saved-at-to640-font, var(--type-caption)); color: var(--af-actbar-saved-at-to640-color, var(--text-muted)); }
    .af-actbar .af-act { display: flex; flex: 1 1 auto; min-inline-size: 0; }
    .af-actbar .af-act:has(> .is-primary) { flex-grow: 100; }
    .af-actbar .syn-btn.af-action { flex: 1 1 auto; box-sizing: border-box; height: auto; min-block-size: var(--target-min); justify-content: center; gap: var(--af-actbar-btn-action-at-to640-gap, var(--space-2)); padding: var(--af-actbar-btn-action-at-to640-padding, 0 var(--space-4)); border-radius: var(--af-actbar-btn-action-at-to640-border-radius, var(--shape-radius-control)); font: var(--af-actbar-btn-action-at-to640-font, var(--type-control)); white-space: nowrap; }
    .af-actbar .syn-btn.af-action:not(.is-primary) { background: var(--af-actbar-btn-action-not-is-primary-at-to640-background, var(--surface-plane)); border: var(--af-actbar-btn-action-not-is-primary-at-to640-border, var(--shape-border-width) solid var(--border-default)); color: var(--af-actbar-btn-action-not-is-primary-at-to640-color, var(--text-ink)); }
    .af-actbar:has(> .af-act > .af-action:not(.is-primary)) > .af-actbar-save { display: none; }   /* a way back holds the seat: the walk keeps its *Save* (J1b's opinion) */
    /* the one primary in one place: what the bar draws, the head and the walk do not */
    .af-appshell[data-density="clinical"] .af-shell-head .af-act:has(> .af-in-bar) { display: none; }
    .af-appshell[data-density="clinical"] .af-shell-actions:not(:has(> .af-act:not(:has(> .af-in-bar)), > .af-more)) { display: none; }
    .af-appshell[data-density="clinical"] .af-shell:has(> .af-actbar .af-actbar-saved) .syn-q-walk .syn-q-saved { display: none; }
    .af-appshell[data-density="clinical"] .af-shell:has(> .af-actbar > .af-actbar-save):not(:has(> .af-actbar > .af-act > .af-action:not(.is-primary))) .syn-q-walk .syn-q-save { display: none; }
    /* a page shorter than the viewport still has the bar on the bottom bar (J1b's signature): the walk down to the shell gives it the scroller's height, and the bar the rest */
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] > .af-appshell-grid > .af-appshell-main:has(.af-actbar .af-action) { display: flex; flex-direction: column; }
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] > .af-appshell-grid > .af-appshell-main :has(.af-actbar .af-action) { display: flex; flex-direction: column; flex: 1 0 auto; box-sizing: border-box; inline-size: 100%; }
    .af-appshell[data-density="clinical"] .af-actbar { margin-block-start: auto; }
    .af-appshell[data-density="clinical"] .af-shell-cols:has(~ .af-actbar .af-action) { margin-block-end: var(--kit-appshell-density-clinical-shell-cols-has-actbar-action-at-to640-margin-block-end, var(--space-4)); }
    /* the focused field stands clear of the bar: a scroll to it (a Tab, a chip's note) stops above it; WCAG 2.4.11. The Form footer gives way to the bar: only one bar pins */
    .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] > .af-appshell-grid > .af-appshell-main:has(.af-actbar .af-action):not(:has(.af-sheet)) { scroll-padding-block-end: calc(var(--target-min) * 3 + var(--space-5)); }
    .af-appshell[data-density="clinical"] .af-form:has(.af-actbar .af-action) > .af-form-acts { position: static; }
    .af-appshell[data-density="clinical"] .af-form:has(> .af-form-acts) .af-actbar { margin-block-end: 0; }
    /* the panel is no second pinned sheet under the bar: it stands at the body's head (J1b's compliance strip) */
    .af-appshell[data-density="clinical"] .af-shell-cols.has-panel > .af-side { position: static; order: -1; border-radius: var(--af-appshell-density-clinical-shell-cols-has-panel-side-at-to640-border-radius, var(--shape-radius-plane)); box-shadow: var(--af-appshell-density-clinical-shell-cols-has-panel-side-at-to640-box-shadow, var(--elevation-plane)); }

    /* a viewport too short to pin the bars (a keyboard that takes the layout's height; a short window): nothing is pinned, the document scrolls, the bars stand at the page's two ends, and the focused field has the whole viewport */
    @media (height < 30rem) {
        .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] > .af-appshell-grid { height: auto; min-height: 100dvh; }
        .af-appshell[data-density="clinical"][data-at-compact="bottom-bar"] > .af-appshell-grid > .af-appshell-main { overflow-y: visible; }
        .af-appshell[data-density="clinical"] .af-actbar { position: static; }
    }
}

/* d-clinical-compact (AF row 232; CP-251 (11); [AF-488]; J1b's -packet): THE PACKET OPEN — from 640 up the form at the start, the viewer at the end, two equal columns with the
   viewer's head on the step's row; the panel folded to a strip above them, under the page's banner; below 640 the viewer over the form. Each page shows whole; none scrolls inside a fixed box. */
.af-docviewer-head { display: flex; align-items: center; gap: var(--af-docviewer-head-gap, var(--space-2)); min-block-size: max(1lh, var(--target-min)); margin-block-end: var(--af-docviewer-head-margin-block-end, var(--space-2)); font: var(--af-docviewer-head-font, var(--type-heading)); }   /* d-dbq-form (AF row 230, [AF-503]): the step's row at the target, as the stage head, so the two planes share one top */
.af-docviewer-title { margin: 0; min-inline-size: 0; font: var(--af-docviewer-title-font, var(--type-heading)); color: var(--af-docviewer-title-color, var(--text-ink)); }
.af-docviewer-head > .af-act { margin-block: var(--af-docviewer-head-act-margin-block, calc(-1 * var(--space-2))); margin-inline-start: auto; }
.af-docviewer-head .syn-btn.af-docviewer-hide { min-block-size: var(--target-min); padding-inline: 0; border: 0; background: none; box-shadow: none; color: var(--af-docviewer-head-btn-docviewer-hide-color, var(--accent-action)); font: var(--af-docviewer-head-btn-docviewer-hide-font, var(--type-control)); white-space: nowrap; }
.af-docviewer-head .syn-btn.af-docviewer-hide:hover { background: none; text-decoration: var(--af-docviewer-head-btn-docviewer-hide-hover-text-decoration, underline); }
.af-docviewer-head .syn-btn.af-docviewer-hide svg { display: none; }
/* AF-2031 ([AF-1042] (5), (6a); CWD-4's DOC-VIEWER §1, §7): THE VIEWER'S HEAD, one plane with the toolbar and the page — the kind in the label
   rung, the title the plane's one ink value, the provenance pill beside it (*From VA* on inset; *From the Veteran* in category 8 on its tint,
   Ken 19:33), the facts in the caption rung, the notice in body ink; the acts in the action accent at its end. The failed face: the glyph in
   Attention (its one use on the page), the sentence, the line whose phone never breaks, *Try again* and *Download PDF*. */
.af-docv-head { display: flex; align-items: flex-start; gap: var(--af-docv-head-gap, var(--space-5)); padding: var(--af-docv-head-padding, var(--space-4) var(--space-5)); }
.af-docv-headwords { display: flex; flex-direction: column; gap: var(--af-docv-headwords-gap, var(--space-1)); min-inline-size: 0; flex: 1 1 auto; }
.af-docv-kind { font: var(--af-docv-kind-font, var(--type-label)); color: var(--af-docv-kind-color, var(--text-muted)); }
.af-docv-titleline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--af-docv-titleline-gap, var(--space-2) var(--space-3)); }
.af-docv-title { margin: 0; font: var(--af-docv-title-font, var(--type-heading)); color: var(--af-docv-title-color, var(--text-ink)); overflow-wrap: anywhere; }
.af-docv-from { display: inline-flex; align-items: center; min-block-size: var(--af-docv-from-min-block-size, 22px); padding: var(--af-docv-from-padding, 0 var(--space-3)); border-radius: var(--shape-radius-pill, 999px); background: var(--af-docv-from-background, var(--surface-inset)); color: var(--af-docv-from-color, var(--text-body)); font: var(--af-docv-from-font, var(--type-caption)); font-weight: var(--af-docv-from-font-weight, 500); white-space: nowrap; }
.af-docv-from.is-marked { background: var(--category-8-tint, var(--surface-inset)); color: var(--category-8, var(--text-ink)); }
.af-docv-facts { font: var(--af-docv-facts-font, var(--type-caption)); color: var(--af-docv-facts-color, var(--text-muted)); font-variant-numeric: var(--af-docv-facts-font-variant-numeric, tabular-nums); }
.af-docv-notice { margin: var(--af-docv-notice-margin, var(--space-2) 0 0); font: var(--af-docv-notice-font, var(--type-body)); color: var(--af-docv-notice-color, var(--text-body)); }
.af-docv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-docv-acts-gap, var(--space-2) var(--space-5)); margin-inline-start: auto; }
.af-docv-act { display: inline-flex; align-items: center; gap: var(--af-docv-act-gap, var(--space-2)); min-block-size: var(--target-min); padding: 0; border: 0; background: none; color: var(--af-docv-act-color, var(--accent-action)); font: var(--af-docv-act-font, var(--type-control)); text-decoration: var(--af-docv-act-text-decoration, none); white-space: nowrap; cursor: pointer; }
.af-docv-act:hover { text-decoration: var(--af-docv-act-hover-text-decoration, underline); }
.af-docv-failglyph { color: var(--af-docv-failglyph-color, var(--state-attention)); display: inline-flex; }
.af-docv-failsentence, .af-docv-waitsentence { margin: 0; font: var(--af-docv-failsentence-font, var(--type-heading)); color: var(--af-docv-failsentence-color, var(--text-ink)); }
.af-docv-failline, .af-docv-waitline { margin: 0; font: var(--af-docv-failline-font, var(--type-body)); color: var(--af-docv-failline-color, var(--text-body)); }
.af-docv-phone { white-space: nowrap; }   /* Ken 19:33: the number unbreakable */
.af-docv-failacts, .af-docv-waitacts { display: flex; flex-wrap: wrap; gap: var(--af-docv-failacts-gap, var(--space-3)); }
/* the module's canvas (the device's pixels, its CSS size set by the module) and pdf.js's invisible text layer over it — made by the
   script, so unscoped; the text layer's own rules are pdf.js 4.10's (its geometry reads --scale-factor, set on the strip) */
.syn-docv-page > .syn-docv-canvas { position: absolute; inset: 0 auto auto 0; display: block; }
.syn-docv-page > .textLayer { position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: var(--syn-docv-page-textlayer-opacity, 1); line-height: var(--syn-docv-page-textlayer-line-height, 1); text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0; }
.syn-docv-page > .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.syn-docv-page > .textLayer > :not(.markedContent), .syn-docv-page > .textLayer .markedContent span:not(.markedContent) { z-index: 1; }
.syn-docv-page > .textLayer span.markedContent { top: 0; height: 0; }
.syn-docv-page > .textLayer ::selection { background: var(--syn-docv-page-textlayer-selection-background, color-mix(in srgb, var(--accent-action) 25%, transparent)); }
.syn-docv-page > .textLayer br::selection { background: transparent; }
.syn-docv-page > .syn-docv-box { z-index: 2; }
.dark .syn-docv-measure { --docv-ground: var(--surface-canvas); }   /* CWD-4 §3: in dark the plane is the page's ground */
.af-docviewer-none + * { margin-block-start: var(--af-docviewer-none-margin-block-start, var(--space-4)); }
.af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager { display: flex; flex-direction: column; height: auto; border: 0; border-radius: 0; background: none; }
.af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager > .syn-docv-bar { flex-wrap: nowrap; justify-content: space-between; min-block-size: 0; padding: var(--kit-docviewer-variant-side-by-side-docv-has-pager-docv-bar-padding, var(--space-2) var(--space-3)); border-block-end: var(--kit-docviewer-variant-side-by-side-docv-has-pager-docv-bar-border-block-end, var(--shape-border-width) solid var(--border-hairline)); border-radius: var(--kit-docviewer-variant-side-by-side-docv-has-pager-docv-bar-border-radius, var(--shape-radius-plane) var(--shape-radius-plane) 0 0); background: var(--kit-docviewer-variant-side-by-side-docv-has-pager-docv-bar-background, var(--surface-plane)); }
.af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager > .syn-docv-body { display: contents; }
.af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-lane { display: none; }
.af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-measure { overflow: hidden; border-radius: var(--kit-variant-side-by-side-docv-has-pager-docv-measure-border-radius, 0 0 var(--shape-radius-plane) var(--shape-radius-plane)); background: var(--kit-variant-side-by-side-docv-has-pager-docv-measure-background, var(--surface-plane)); box-shadow: var(--kit-variant-side-by-side-docv-has-pager-docv-measure-box-shadow, var(--elevation-plane)); }
.af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; grid-template-rows: auto auto; gap: 0; padding: 0; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: auto; }
.af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-page { box-sizing: border-box; inline-size: var(--kit-docviewer-variant-side-by-side-docv-has-pager-docv-page-inline-size, calc(100% - 2 * var(--space-3))); margin: var(--kit-docviewer-variant-side-by-side-docv-has-pager-docv-page-margin, var(--space-3)); border: var(--kit-docviewer-variant-side-by-side-docv-has-pager-docv-page-border, var(--shape-border-width) solid var(--border-hairline)); box-shadow: none; scroll-snap-align: start; scroll-margin: var(--space-3); }
.af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-pagenum, .af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-indicator { display: none; }
.af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-companion { order: 1; overflow: visible; min-inline-size: 0; border: 0; }
.syn-docv-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--syn-docv-pager-gap, var(--space-2)); padding: var(--syn-docv-pager-padding, var(--space-3)); background: var(--syn-docv-pager-background, var(--surface-inset)); font: var(--syn-docv-pager-font, var(--type-caption)); color: var(--syn-docv-pager-color, var(--text-muted)); }
.syn-docv-pagestep { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-inline-size: var(--target-min); min-block-size: var(--target-min); border: var(--syn-docv-pagestep-border, var(--shape-border-width) solid var(--border-default)); border-radius: var(--syn-docv-pagestep-border-radius, var(--shape-radius-control)); background: var(--syn-docv-pagestep-background, var(--surface-plane)); color: var(--syn-docv-pagestep-color, var(--text-ink)); }
.syn-docv-pagestep.is-off { visibility: hidden; }
.af-docviewer-pick { position: relative; flex: 1 1 0; min-inline-size: 0; }
.af-docviewer-pick > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--af-docviewer-pick-summary-gap, var(--space-2)); box-sizing: border-box; min-block-size: var(--target-min); padding-inline: var(--af-docviewer-pick-summary-padding-inline, var(--space-3)); border: var(--af-docviewer-pick-summary-border, var(--shape-border-width) solid var(--border-default)); border-radius: var(--af-docviewer-pick-summary-border-radius, var(--shape-radius-control)); background: var(--af-docviewer-pick-summary-background, var(--surface-plane)); color: var(--af-docviewer-pick-summary-color, var(--text-ink)); font: var(--af-docviewer-pick-summary-font, var(--type-body)); cursor: pointer; list-style: none; }
.af-docviewer-pick > summary::-webkit-details-marker { display: none; }
.af-docviewer-picked { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-docviewer-pick > ul { position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 3; margin: var(--af-docviewer-pick-ul-margin, var(--space-1) 0 0); padding: var(--af-docviewer-pick-ul-padding, var(--space-1)); list-style: none; border: var(--af-docviewer-pick-ul-border, var(--shape-border-width) solid var(--border-default)); border-radius: var(--af-docviewer-pick-ul-border-radius, var(--shape-radius-control)); background: var(--af-docviewer-pick-ul-background, var(--surface-raised)); box-shadow: var(--af-docviewer-pick-ul-box-shadow, var(--elevation-overlay)); }
.af-docviewer-pick > ul :is(a, button) { display: flex; align-items: center; box-sizing: border-box; inline-size: 100%; min-block-size: var(--target-min); padding-inline: var(--af-docviewer-pick-ul-is-a-button-padding-inline, var(--space-3)); border: 0; border-radius: var(--af-docviewer-pick-ul-is-a-button-border-radius, var(--shape-radius-control)); background: none; color: var(--af-docviewer-pick-ul-is-a-button-color, var(--text-ink)); font: var(--af-docviewer-pick-ul-is-a-button-font, var(--type-body)); text-align: start; text-decoration: var(--af-docviewer-pick-ul-is-a-button-text-decoration, none); cursor: pointer; }
.af-docviewer-pick > ul :is(a, button):hover { background: var(--af-docviewer-pick-ul-is-a-button-hover-background, var(--surface-hover)); }
.af-docviewer-pick > ul [aria-current="true"] { font-weight: var(--af-docviewer-pick-ul-aria-current-true-font-weight, var(--type-heading-weight)); }
.syn-docv-pdf { flex: none; margin-inline-start: auto; color: var(--syn-docv-pdf-color, var(--accent-action)); font: var(--syn-docv-pdf-font, var(--type-control)); }
@container af-page (width >= 640px) {
    .af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--space-gutter, var(--space-6)); align-items: start; }
    .af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager > .af-docviewer-head { grid-column: 2; grid-row: 1; }
    .af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager > .syn-docv-bar { grid-column: 2; grid-row: 2; }
    .af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-measure { grid-column: 2; grid-row: 3; }
    .af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-companion { grid-column: 1; grid-row: 1 / span 3; }
    .af-shell-cols.has-panel:has(.syn-docv.has-pager) { grid-template-columns: minmax(0, 1fr); row-gap: var(--af-shell-cols-has-panel-has-docv-has-pager-at-from640-row-gap, var(--space-4)); }
    .af-shell-cols.has-panel:has(.syn-docv.has-pager) > .af-shell-main { display: contents; }
    .af-shell-cols.has-panel:has(.syn-docv.has-pager) > .af-shell-main > .af-banner { order: -2; }
    .af-shell-cols.has-panel:has(.syn-docv.has-pager) > .af-side { order: -1; }
}
@container af-page (width < 640px) {
    .af-docviewer[data-variant="side-by-side"] .syn-docv.has-pager .syn-docv-companion { margin-block-start: var(--kit-variant-side-by-side-docv-has-pager-docv-companion-at-to640-margin-block-start, var(--space-4)); }
}

/* ===================== AF-2070 BATCH A — the faces every block shares (s-kitfaces; Harbor as CWD-4 corrected it) =====================
   (2) VACANT VALUES ALWAYS IN THE BODY FACE: the vacancy word (*None*, *No time yet*) is a word, never data — an identifier-kind field's
   mono face (and its notch-smaller size) stops at a vacant value, which reads in the face and size of the values around it (Ken read the
   mono *None* as "a variety of font sizes"). The figure slot's *No time yet* keeps its rung (its own rule, more specific). */
.syn-fv-vacant { font-family: var(--syn-fv-vacant-font-family, var(--type-family)); }
.syn-value.syn-mono:has(> .syn-fv-vacant) { font: var(--syn-value-mono-has-fv-vacant-font, var(--type-body)); }
.syn-ef-ro.is-mono.is-empty, .syn-ef-idle.is-mono.is-empty { font-family: var(--syn-ef-ro-is-mono-is-empty-font-family, var(--type-family)); }
/* (6) AF-2071 ([AF-1042] (4)): a scroller the kit declares keeps its gutter stable, so a bar arriving never reflows its content; the bar
   itself shows everywhere (app.css's `*` rule). The page's own scroller (html; the compact bottom bar's main) is the browser's. */
.af-side.is-open, .af-sheet, .syn-modal-body, .syn-panelhost-body, .syn-bb-measure, .syn-solrel, .syn-solr-measure, .syn-res-measure, .syn-res-dlscroll, .syn-soln { scrollbar-gutter: stable; }
/* (6a) AF-2071 ([AF-1042] (6a)): an act that opens a new tab says so — `arrow-up-right` after its word (ActionButton, the document row,
   the viewer's PDF link), *opens in a new tab* for the reader in the act's own name (`.af-sr-only`) */
.af-newtab { display: inline-flex; flex: none; margin-inline-start: var(--af-newtab-margin-inline-start, var(--space-1)); }