/* The portal's look (docs/design/portal-ui-conventions.md). Shape and measurements follow Learn's
   facilitator app (the session 49 audit); every colour is a brand role from /portal/brand.css,
   never a literal here. Mobile first: the one min-width query lays the table out as a table. */

:root {
  --v-space-1: 0.5rem;
  --v-space-2: 0.75rem;
  --v-space-3: 1rem;
  /* Side insets (session 70): 1rem, capped on a narrow screen but never under 16 px, its size at
     normal text, so only a reader's larger text moves it. In rem alone, nested boxes took 32 px a
     side each at 320 px with 200% text and left the Download pill no room inside its padding. */
  --v-gutter: min(var(--v-space-3), max(16px, 4vw));
  --v-space-4: 1.5rem;
  --v-space-5: 2rem;
  --v-space-6: 3rem;
  --v-card-pad: var(--v-space-4); /* a card's own padding, and the footer's gap above and below it (session 70) */
  --v-card-inline: var(--v-gutter); /* a card's side padding, so the footer's text starts where the card's does */
  --v-radius-card: 16px;
  --v-radius-compact: 12px;
  --v-radius-pill: 999px;
  --v-target: 2.75rem; /* 44 px: Learn's tap target, kept where Learn's own pill fell short */
  --v-measure: 72rem; /* the bar's and the card's width: the session 50 audit, edges in line since 53 */
  --v-font-heading: "brand-heading", system-ui, sans-serif;
  --v-font-body: "brand-body", system-ui, sans-serif;
  --v-font-data: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --v-action-font: 600 0.9375rem/1.2 var(--v-font-heading);
  --v-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Surfaces by role, so each scheme picks its own elevation order. */
  --v-page: var(--v-background); /* under the brand's pattern, as Learn's portal paints it */
  --v-card: var(--v-surface-container-lowest);
  --v-band: color-mix(in srgb, var(--v-on-surface) 5%, var(--v-surface-container-lowest));
  --v-chip: color-mix(in srgb, var(--v-on-surface) 9%, var(--v-surface-container-lowest));
  /* Neutral greys mixed from the brand's own roles (the session 50 audit: the tonal neutrals read
     pink in light, and secondary text sat at 9:1; these land near 5.5:1). */
  --v-rule: color-mix(in srgb, var(--v-on-surface) 14%, var(--v-surface-container-lowest));
  --v-muted: color-mix(in srgb, var(--v-on-surface) 68%, var(--v-surface-container-lowest));
  --v-ring: var(--v-secondary); /* the action accent (session 80, the operator's pick): what the reader acts on */
  /* What a tile or a heading asks of the reader, as a tint. In light the full containers stacked
     370 px of saturated colour above the first row (session 62 audit, 10): half strength there. */
  --v-tint-problem: color-mix(in srgb, var(--v-error-container) 55%, var(--v-card));
  --v-tint-attention: color-mix(in srgb, var(--v-warning-container) 60%, var(--v-card));
  /* A chosen answer (N18): yes and no as quiet tints, the answer's words in ink on top. */
  --v-tint-yes: color-mix(in srgb, var(--v-success) 14%, var(--v-card));
  --v-tint-no: color-mix(in srgb, var(--v-error-container) 70%, var(--v-card));
}

:root[data-theme="dark"] {
  --v-card: var(--v-surface-container);
  --v-band: var(--v-surface-container-high);
  --v-chip: var(--v-surface-container-highest);
  --v-tint-problem: var(--v-error-container);
  --v-tint-attention: var(--v-warning-container);
  --v-tint-yes: color-mix(in srgb, var(--v-success) 22%, var(--v-card));
  --v-tint-no: color-mix(in srgb, var(--v-error-container) 80%, var(--v-card));
}

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

html {
  background-color: var(--v-page);
  background-image: var(--v-pattern);
  overflow-x: clip;
  scrollbar-gutter: stable; /* the scroll bar's room held on every page, so a taller page never shifts it 13 px (session 78) */
  color: var(--v-on-surface);
  font: 400 1rem/1.55 var(--v-font-body);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--v-outline) var(--v-page);
}

body { /* Learn's shade under the bar, over the pattern on html (its upload.css), from the brand's scrim */
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; /* the footer at the screen's foot on a short page */
  background: linear-gradient(color-mix(in srgb, var(--v-scrim) 12%, transparent), transparent 144px);
}

::selection { background: var(--v-secondary-container); color: var(--v-on-secondary-container); }

:focus-visible {
  outline: 2px solid transparent; /* forced-colours mode repaints it; a box-shadow alone would vanish */
  box-shadow: 0 0 0 4px var(--v-ring);
  border-radius: 4px;
}

.v-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.v-skip {
  position: absolute; left: var(--v-gutter); top: -10rem; z-index: 10;
  padding: var(--v-space-2) var(--v-gutter);
  background: var(--v-card); color: var(--v-on-surface);
  border-radius: var(--v-radius-compact); font-weight: 600;
}
.v-skip:focus-visible { top: var(--v-space-3); }

.v-icon {
  width: 1rem; height: 1rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* 1. Topbar: the brand's light primary in both schemes. */
.v-topbar { background: var(--v-topbar); color: var(--v-on-topbar); }
.v-topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2);
  width: min(100% - 2 * var(--v-gutter), var(--v-measure)); margin-inline: auto; min-height: 5.25rem; /* Learn's 84-87 px */
  padding-block: var(--v-space-1); /* large text wraps the controls to a second line rather than off the screen */
}
.v-topbar__mark { width: 2.5rem; height: 2.5rem; }
.v-topbar__name { min-width: 0; overflow-wrap: anywhere; font: 600 1.125rem/1.2 var(--v-font-heading); letter-spacing: -0.01em; }
.v-topbar :focus-visible { box-shadow: 0 0 0 3px var(--v-on-topbar); } /* primary on primary would vanish */

/* N7. The Appearance menu (Learn's account-menu section, session 50): one round icon at the bar's
   right showing the current choice, opening the three choices in a native popover (Esc and a
   click outside close it). The account menu grows from it once sign-in exists. */
.v-scheme { margin-left: auto; display: flex; align-items: center; }
:root:not([data-theme]) .v-scheme { display: none; } /* the script never ran: no control that does nothing */
.v-scheme .v-icon { width: 1.25rem; height: 1.25rem; }
.v-scheme-open {
  display: inline-grid; place-items: center; width: var(--v-target); height: var(--v-target); padding: 0;
  border: 1px solid color-mix(in srgb, var(--v-on-topbar) 35%, transparent); border-radius: var(--v-radius-pill);
  background: color-mix(in srgb, var(--v-on-topbar) 10%, transparent); color: var(--v-on-topbar); cursor: pointer;
  transition: background-color 160ms var(--v-ease-out);
}
.v-scheme-open:hover { background: color-mix(in srgb, var(--v-on-topbar) 20%, transparent); }
.v-scheme-open:focus-visible { border-radius: var(--v-radius-pill); }
.v-scheme-open > span { display: none; }
.v-scheme-open[data-showing="system"] .v-now--system,
.v-scheme-open[data-showing="light"] .v-now--light,
.v-scheme-open[data-showing="dark"] .v-now--dark { display: contents; }
.v-menu {
  position: fixed; inset: auto; top: 4.75rem; right: max(var(--v-gutter), calc((100vw - var(--v-measure)) / 2));
  margin: 0; min-width: min(15rem, 100vw - 2 * var(--v-space-3)); max-width: calc(100vw - 2 * var(--v-space-3)); padding: var(--v-space-1); /* on the screen at any text size: 15 rem ran 26 to 192 px off a phone's left edge */
  background: var(--v-card); color: var(--v-on-surface);
  border: 1px solid var(--v-rule); border-radius: var(--v-radius-compact);
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--v-scrim) 35%, transparent);
}
.v-menu__title {
  margin: 0; padding: var(--v-space-1) var(--v-space-2) 0.25rem;
  color: var(--v-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.v-menu button {
  display: flex; align-items: center; gap: var(--v-space-2); width: 100%; min-height: var(--v-target);
  padding: 0 var(--v-space-2); border: 0; border-radius: 8px; background: transparent; color: inherit;
  font: 500 0.9375rem/1.2 var(--v-font-body); text-align: left; cursor: pointer;
}
.v-menu button:hover { background: var(--v-chip); }
.v-menu :focus-visible { box-shadow: 0 0 0 4px var(--v-ring); } /* the page's ring: the bar's is white */
.v-menu button[aria-pressed="true"] { background: var(--v-chip); font-weight: 700; }
.v-menu button[aria-pressed="true"]::after {
  content: ""; margin-left: auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--v-secondary);
}

/* 2. The content card. */
.v-main { width: min(100% - 2 * var(--v-gutter), var(--v-measure)); margin: var(--v-space-4) auto var(--v-card-pad); flex: 1 0 auto; display: flex; flex-direction: column; }
.v-main:focus { outline: none; } /* a tabindex="-1" skip target, never a control */
.v-card {
  background: var(--v-card);
  border-radius: var(--v-radius-card);
  box-shadow: 0 4px 20px -4px color-mix(in srgb, var(--v-scrim) 18%, transparent);
  padding: var(--v-card-pad) var(--v-card-inline);
}

/* 3 and 4. Header B2 (operator, session 50): the title carries the date; one quiet line under it
   with the refresh as a plain link, underlined on hover and focus only. */
.v-intro__title {
  margin: 0; font: 700 clamp(1.25rem, 8vw, 1.625rem)/1.2 var(--v-font-heading); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; /* 320 px with 160% text: the date cannot break (session 62 audit, 15) */
  font-variant-numeric: tabular-nums;
}
.v-intro__quiet { margin: var(--v-space-1) 0 0; color: var(--v-muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.v-text-link { color: var(--v-secondary); font-weight: 700; text-decoration: none; }
.v-refresh { /* on the words' baseline; the 44 px target from padding its margins give back to the line */
  display: inline-block; padding-block: calc((var(--v-target) - 1lh) / 2); padding-inline: 0.25rem;
  margin-block: calc((var(--v-target) - 1lh) / -2); color: var(--v-secondary); font-weight: 700; text-decoration: none;
}
.v-refresh span { text-decoration: none; }
.v-text-link:hover, .v-text-link:focus-visible, .v-refresh:hover span, .v-refresh:focus-visible span { text-decoration: underline; text-underline-offset: 0.15em; }
.v-refresh .v-icon { width: 1rem; height: 1rem; margin-right: 0.25rem; vertical-align: -0.2em; }
.v-refresh.is-checking .v-icon { animation: v-turn 700ms var(--v-ease-out); }

/* N8. The store board (operator, session 51; BACKLOG's variant B): one tile per store, silent
   first, tinted by what it asks of the reader: warning container while nothing has arrived, error
   container while anything needs a look, the plain card when all is good; the icon says the level.
   Phones: one line a store (chosen from three on the lab's switcher). From 48 rem: tiles. */
.v-board { margin-top: var(--v-space-4); }
.v-board__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--v-space-3);
  margin: 0 0 var(--v-space-2); font: 700 1.125rem/1.3 var(--v-font-heading); letter-spacing: -0.01em;
}
.v-board__sum { font: 400 0.875rem/1.4 var(--v-font-body); color: var(--v-muted); font-variant-numeric: tabular-nums; }
.v-tiles {
  display: grid; gap: 0; margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--v-rule); border-radius: var(--v-radius-compact); overflow: hidden;
}
.v-tile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name state count";
  align-items: center; gap: var(--v-space-2); padding: var(--v-space-1) var(--v-space-2);
  border-bottom: 1px solid var(--v-rule); background: var(--v-card);
}
.v-tile:last-child { border-bottom: 0; }
.v-tile__name { /* two lines at most at every width; one cut off is a toggle (portal.js), in full on hover */
  grid-area: name; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.v-tile__name[aria-expanded] { /* a toggle looks like one; opening is the tap's feedback, not a flash */
  cursor: pointer; text-decoration: underline dotted var(--v-muted); text-underline-offset: 0.2em;
  -webkit-tap-highlight-color: transparent;
}
.v-tile__name[aria-expanded="true"] { display: block; }
.v-tile__count { grid-area: count; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.v-tile__count strong { font: 700 1.125rem/1 var(--v-font-heading); min-width: 1.5rem; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.v-tile__unit, .v-tile__last { display: none; color: var(--v-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v-tile__state {
  grid-area: state; display: inline-flex; align-items: center; gap: 0.375rem; justify-self: end;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap; color: var(--v-muted);
}
.v-tile__state .v-icon { width: 1rem; height: 1rem; flex: none; }
.v-tile--silent { background: var(--v-tint-attention); }
.v-tile--silent .v-tile__unit, .v-tile--silent .v-tile__last, .v-tile--silent .v-tile__state { color: var(--v-on-warning-container); }
.v-tile--silent .v-tile__count strong { color: var(--v-on-warning-container); } /* no opacity: 0.55 fell to 3.7:1 (Codex) */
.v-tile--look { background: var(--v-tint-problem); }
.v-tile--look .v-tile__unit, .v-tile--look .v-tile__last, .v-tile--look .v-tile__state { color: var(--v-on-error-container); }
/* Large text on a phone: the state line drops under the name rather than pushing the count off the
   card (60 px at 320 px with 160% text, the name squeezed to 0 px; session 62 audit, 15). In rem,
   so it follows the reader's text size, never the width alone: at 100% the line stays one line. */
.v-tiles { container-type: inline-size; }
@container (max-width: 16rem) {
  .v-tile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "state count"; row-gap: 0.125rem; }
  .v-tile__state { justify-self: start; white-space: normal; }
}
.v-tile--calm .v-tile__state { font-weight: 500; }
.v-tile--calm .v-tile__state .v-icon { color: var(--v-success); }

/* N3. The groups: what needs a look first, then what is fine (operator, session 49, look C). Each
   group is its own section with a real heading over its own table, never a heading forced into a
   table row; the tables share fixed Time and Status widths, so their columns line up. */
.v-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-4); margin-top: var(--v-space-4); } /* 24 px between every part, as the recording page: the groups' 48 px was the widest gap on the page (session 62 audit, 6) */ /* never wider than the card: its widest part spilled 32 px at 390 px with 160% text */
.v-group__head { grid-template-columns: minmax(0, 1fr); }
.v-group__head {
  display: grid; gap: var(--v-space-2);
  padding: var(--v-space-3) var(--v-gutter); border-radius: var(--v-radius-compact);
  background: var(--v-band);
}
.v-group--look .v-group__head { background: var(--v-tint-attention); color: var(--v-on-warning-container); }
.v-group__title {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-1);
  margin: 0; font: 700 1.125rem/1.3 var(--v-font-heading); letter-spacing: -0.01em;
}
.v-count {
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.5rem; padding: 0 0.5rem;
  border-radius: var(--v-radius-pill); background: var(--v-secondary-container); color: var(--v-on-secondary-container);
  font: 700 0.8125rem/1 var(--v-font-body); font-variant-numeric: tabular-nums;
}
.v-count { flex: none; } /* its min-width let the heading squeeze a four-digit count */
.v-allgood { display: inline-flex; align-items: center; gap: var(--v-space-1); margin: 0; color: var(--v-muted); }
.v-allgood .v-icon { color: var(--v-success); }
.v-fold { border-top: 1px solid var(--v-rule); }
.v-fold__line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--v-space-2); /* the hint beside its words: 1,000 px apart at 1280 (session 62 audit, 7) */
  min-height: var(--v-target); padding: var(--v-space-2) var(--v-space-1); cursor: pointer;
  color: var(--v-muted); font-size: 0.875rem; list-style: none;
}
.v-fold__line::-webkit-details-marker { display: none; }
.v-fold__hint { color: var(--v-secondary); font-weight: 700; }
.v-fold[open] .v-fold__hint { visibility: hidden; }

/* N4. Reason chips, on the heading of what needs a look: why, most frequent first, each next step
   once beside the reasons that share it (session 62; it repeated on every row). */
.v-todos { display: grid; gap: var(--v-space-1); margin: 0; padding: 0; list-style: none; }
.v-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--v-space-2); min-width: 0; }
.v-todo__why { display: flex; flex-wrap: wrap; gap: 0.25rem; min-width: 0; }
.v-todo__step { min-width: 0; font-size: 0.8125rem; line-height: 1.35; }
@media (max-width: 47.99rem) { /* a phone reads each line as running text: as pills it took 496 px and pushed the first row off the screen */
  .v-todo { display: block; font-size: 0.8125rem; line-height: 1.5; }
  .v-todo__why, .v-todo__step { display: inline; }
  .v-todo__why .v-chip { display: inline; min-height: 0; padding: 0; background: none; }
  .v-todo__why .v-chip + .v-chip::before { content: ", "; font-weight: 400; }
  .v-todo__why::after { content: " "; }
  .v-todo__why .v-chip__count { display: inline-block; min-width: 1.125rem; height: auto; margin-right: 0.25rem; line-height: 1.4; text-align: center; }
  .v-todo__step { color: inherit; }
}
@media (min-width: 48rem) {
  .v-todos { gap: var(--v-space-2); }
  .v-todo__step { font-size: 0.875rem; }
}
.v-chip {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.75rem; padding: 0 0.75rem 0 0.25rem;
  background: var(--v-card); color: var(--v-on-surface); border-radius: var(--v-radius-pill);
  font-size: 0.8125rem; font-weight: 600;
}
.v-chip__count {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3125rem;
  border-radius: var(--v-radius-pill); background: var(--v-secondary-container); color: var(--v-on-secondary-container);
  font-variant-numeric: tabular-nums;
}

/* 5. The tables: Learn's archive shape, its dependent columns folded (Learn's conventions): Time |
   Store with agent, length and reference beneath | Status | Play. A row is a sentence (variant A,
   the operator's pick of three, session 62): the store leads, one detail line under it, the audio
   view only where the sound asks for a look. Phones: each row a stacked block (N6). */
.v-table { display: block; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; } /* a phone's rows are blocks (N6), so the table is too: as a table it sized them to their content, 32 px past the card at 390 px with 160% text */
.v-table thead, .v-sr-head {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.v-table tbody { display: block; }
.v-row { /* phones: the name and the pill, the detail, the audio, then when it arrived and Play */
  display: grid; grid-template-columns: minmax(0, 1fr) fit-content(65%); /* the pill wraps rather than widen the row (session 62 audit, 15) */
  grid-template-areas: "name status" "meta meta" "audio audio" "time play" "also also";
  gap: 0.25rem var(--v-space-3); padding: var(--v-space-3) var(--v-space-1); border-bottom: 1px solid var(--v-rule);
}
.v-row:last-child { border-bottom: 0; } /* the section's end, not a rule, closes the list */
.v-row td { display: block; padding: 0; }
.v-row .v-c-status, .v-row .v-c-store { display: contents; } /* their parts place themselves, so the pill sits beside the name alone */
.v-row .v-pill { grid-area: status; justify-self: end; align-self: start; max-width: 100%; white-space: normal; } /* stretched to 43 px beside a two-line time (session 62 audit, 9) */
.v-row .v-also { grid-area: also; margin: 0; }
.v-row .v-store { grid-area: name; }
.v-row .v-c-store > .v-detail { grid-area: meta; margin: 0; }
.v-row .v-audio { grid-area: audio; margin-top: 0.25rem; }
.v-c-time { grid-area: time; align-self: center; }
/* A narrow row for the reader's text size: the pill drops under the name rather than squeeze it (a
   128-character name had 60 px beside it at 390 px with 200% text, its row 5,528 px tall). In rem,
   so it follows the text size: a 375 px phone at 100% keeps the pill beside the name. */
.v-groups { container-type: inline-size; }
@container (max-width: 19rem) {
  .v-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "status status" "meta meta" "audio audio" "time play" "also also"; }
  .v-row .v-pill { justify-self: start; }
}
.v-row td.v-c-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.375rem; } /* when it arrived and started, one line beside Play */
.v-c-play { grid-area: play; align-self: center; text-align: right; }
.v-store { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } /* the row's name at body size: 14 px under a 15 px time (session 62 audit, 2); a 128-character name, the schema's limit */
.v-detail { display: block; margin-top: 0.125rem; color: var(--v-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* a 32-character agent code, or an unbounded length, breaks rather than run 6,247 px past the row */
.v-time__clock { display: block; font-weight: 600; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v-c-time .v-detail { display: inline; margin-top: 0; }
/* The agent's name (ADR 0010; session 70, B of four): the name in ink, the code after it in the data font. */
.v-agent__name { color: var(--v-on-surface); font-weight: 600; }
.v-agent__code { font-family: var(--v-font-data); font-size: max(0.75rem, 0.9em); color: var(--v-muted); } /* never under the page's 12 px (Codex) */
.v-num { font-variant-numeric: tabular-nums; }

@media (min-width: 48rem) {
  :root { --v-card-pad: 2.5rem; --v-card-inline: 2.5rem; }
  .v-card { padding: var(--v-card-pad); }
  .v-table { display: table; table-layout: fixed; margin-top: var(--v-space-1); }
  .v-table thead:not(.v-sr-head) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .v-table tbody { display: table-row-group; }
  .v-row { display: table-row; padding: 0; border: 0; }
  .v-table th, .v-row td {
    display: table-cell; padding: var(--v-space-3) var(--v-gutter); text-align: left; vertical-align: top;
  }
  .v-table thead th {
    padding-block: var(--v-space-2); color: var(--v-muted); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--v-rule); white-space: nowrap;
  }
  .v-row td, .v-row td.v-c-time, .v-row .v-c-status, .v-row .v-c-store { display: table-cell; border-bottom: 1px solid var(--v-rule); }
  .v-row .v-c-store > .v-detail { margin-top: 0.125rem; }
  .v-time__clock { font-size: 0.9375rem; }
  .v-c-time .v-detail { display: block; }
  .v-c-play { text-align: right; }
  .v-row:last-child td { border-bottom: 0; }
  .v-tiles { gap: var(--v-space-2); border: 0; border-radius: 0; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
  .v-tile, .v-tile:last-child { /* each tile a card: the last one keeps the edge the phone's list drops */
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "last count" "state state";
    grid-template-rows: auto auto 1fr; /* a taller row's spare space sits above the state line */
    align-items: start; gap: 0.125rem var(--v-space-2); padding: var(--v-space-2) var(--v-gutter);
    border: 1px solid var(--v-rule); border-radius: var(--v-radius-compact);
  }
  .v-tile--silent, .v-tile--look, .v-tile--silent:last-child, .v-tile--look:last-child { border-color: transparent; }
  .v-tile__count strong { font-size: 1.625rem; min-width: 0; }
  .v-tile__unit, .v-tile__last { display: block; }
  .v-tile__last { grid-area: last; }
  .v-tile__state { justify-self: start; align-self: end; margin-top: 0.375rem; font-size: 0.8125rem; white-space: normal; }
  /* Widths on the columns, which fixed layout reads before any row, so both groups' tables line up
     even where the header row is hidden for the eye. */
  .v-col-time { width: 10rem; } /* "Started 28/10 23:58", a sale begun on another day, needs 124 px and the padding (it ran under the store at 7.5) */
  .v-col-status { width: 15rem; }
  .v-col-play { width: 6.5rem; }
  .v-c-time { white-space: nowrap; }
  .v-c-status { text-align: left; }
}

/* N2. The status pill, at the app's three levels. Success only confirms: the tick, never a fill. */
.v-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 1.75rem; padding: 0.125rem 0.625rem;
  border: 1px solid transparent; border-radius: var(--v-radius-pill);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.3; white-space: normal; max-width: 100%; /* wraps only when its box is narrower than its words: nowrap pushed the recording page's header 115 px past the card */
}
.v-pill > span, .v-audio__badge > span { min-width: 0; overflow-wrap: anywhere; } /* a word wider than a 320 px row at 200% text breaks inside the pill */
.v-pill--calm { border-color: var(--v-rule); color: var(--v-on-surface); }
.v-pill--calm .v-icon { color: var(--v-success); }
.v-pill--uploading .v-icon { color: var(--v-muted); } /* in flight, not yet confirmed */
.v-pill--attention { background: var(--v-warning-container); color: var(--v-on-warning-container); }
.v-pill--problem { background: var(--v-error-container); color: var(--v-on-error-container); }
.v-also { display: block; margin-top: 0.25rem; color: var(--v-muted); font-size: 0.75rem; line-height: 1.4; }

/* N5. A row new since the last check: a New tag, and one short tint that fades. */
.v-new {
  display: inline-block; margin-left: var(--v-space-1); padding: 0 0.375rem;
  background: var(--v-primary-container); color: var(--v-on-primary-container);
  border-radius: var(--v-radius-pill); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; vertical-align: 0.1em;
}
.v-new[hidden] { display: none; } /* the display above would otherwise beat the attribute */
@media (prefers-reduced-motion: no-preference) {
  .v-row.is-new, .v-row.is-new td { animation: v-arrive 2400ms var(--v-ease-out); }
}
@keyframes v-arrive { from { background-color: var(--v-primary-container); } }
@keyframes v-turn { to { transform: rotate(360deg); } }

/* N10. The audio check's view (ADR 0012; the operator's pick, session 59): a badge at the app's
   levels naming what tripped, the recording as a ribbon, the share of sound. Sound is drawn in a
   neutral ink: a brand's primary may be a red, which would read as a fault. */
:root { --v-ink: color-mix(in srgb, var(--v-on-surface) 62%, transparent); }
.v-audio { display: grid; gap: 0.3125rem; margin-top: var(--v-space-1); max-width: 26rem; }
.v-audio__badge {
  display: inline-flex; align-items: center; gap: 0.3125rem; justify-self: start;
  padding: 0.0625rem 0.5rem; border: 1px solid var(--v-rule); border-radius: var(--v-radius-pill);
  font-size: 0.75rem; font-weight: 600; line-height: 1.5; color: var(--v-on-surface);
}
.v-audio__badge .v-icon { width: 0.875rem; height: 0.875rem; }
.v-audio__trip { font-weight: 500; }
.v-audio--calm .v-audio__badge .v-icon { color: var(--v-success); }
.v-audio--attention .v-audio__badge { border-color: transparent; background: var(--v-warning-container); color: var(--v-on-warning-container); }
.v-audio--problem .v-audio__badge { border-color: transparent; background: var(--v-error-container); color: var(--v-on-error-container); }
.v-audio--quiet .v-audio__badge { color: var(--v-muted); }
.v-audio__why { color: var(--v-muted); font-size: 0.75rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.v-ribbon { display: block; width: 100%; height: 0.75rem; }
.v-ribbon__track { fill: var(--v-chip); }
.v-ribbon__sound rect { fill: var(--v-ink); } /* the badge carries the verdict's colour, never the sound */
.v-ribbon__gap { fill: none; stroke: var(--v-warning); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.v-ribbon__scale { display: flex; justify-content: space-between; gap: var(--v-space-1); color: var(--v-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.v-ribbon__mark { color: var(--v-on-warning-container); font-weight: 600; }
/* Motion: the ribbon unrolls and the badge settles as a recording arrives (the poll's is-new rows,
   N5), never on every swap. */
@media (prefers-reduced-motion: no-preference) {
  .v-row.is-new .v-ribbon__sound { transform-box: view-box; transform-origin: left; animation: v-unroll 900ms var(--v-ease-out) both; }
  .v-row.is-new .v-audio__badge { animation: v-settle 600ms var(--v-ease-out) both; }
}
@keyframes v-unroll { from { transform: scaleX(0); } }
@keyframes v-settle { from { opacity: 0; transform: translateY(2px); } }

/* 6. The empty state. */
.v-empty {
  padding: var(--v-space-6) var(--v-space-4);
  border: 1px dashed var(--v-outline); border-radius: var(--v-radius-card); text-align: center;
}
.v-card > .v-empty:not(:first-child) { margin-block-start: var(--v-space-4); }
.v-empty__title { margin: 0; font: 600 1.125rem/1.4 var(--v-font-heading); }
.v-empty__body { margin: var(--v-space-1) auto 0; max-width: 52ch; color: var(--v-muted); }

/* 7. The footer (operator, session 50, look A, Learn's): one centred note under the card. */
/* The footer (session 70's audit, B of three, the operator's pick): muted on the card's text edge, one gap token
   above and below, at the screen's foot on a short page; the maker's mark on the right. */
.v-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-space-2) var(--v-space-4);
  margin: auto 0 0; padding: var(--v-card-pad) var(--v-card-inline) 0; color: var(--v-muted); font-size: 0.8125rem; }
.v-foot--maker { justify-content: center; text-align: center; }
.v-foot--maker > .v-maker { margin-inline: 0; }
.v-maker { margin-left: auto; margin-block: calc((1.25rem - var(--v-target)) / 2); display: inline-flex; align-items: center; min-height: var(--v-target); border-radius: var(--v-radius-compact); }
.v-maker img { display: block; width: 5.625rem; height: auto; opacity: 0.55; transition: opacity 300ms var(--v-ease-out), filter 300ms var(--v-ease-out); }
.v-maker:hover img, .v-maker:focus-visible img { opacity: 1; filter: drop-shadow(0 0 8px var(--v-maker-glow)); }
.v-maker:focus-visible { box-shadow: 0 0 0 4px var(--v-ring); }
@media (prefers-reduced-motion: reduce) { .v-maker img { transition: none; } }

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

/* N16. The account menu (ADR 0011 slice 2; header 1 of three on a live switcher, session 63): a
   monogram beside Appearance opens who is signed in and their role, the pages, then Sign out, a POST
   and so a form. It sits outside .v-scheme, which hides itself where the scheme script never ran: a
   popover needs no script, and Sign out must never vanish with it. The brand's name leads home. */
.v-home { display: inline-flex; align-items: center; gap: var(--v-space-2); min-width: 0; min-height: var(--v-target); color: inherit; text-decoration: none; border-radius: var(--v-radius-compact); }
/* No hover change on the brand link (the operator, session 80): the pointer marks it as a link; the bar's
   ring answers the keyboard. */
.v-me {
  display: inline-grid; place-items: center; width: var(--v-target); height: var(--v-target); padding: 0;
  border: 0; border-radius: var(--v-radius-pill); background: transparent; cursor: pointer; margin-left: auto;
}
.v-scheme + .v-me { margin-left: 0; } /* Appearance's own auto margin already pushes both right */
:root:not([data-theme]) .v-scheme + .v-me { margin-left: auto; } /* Appearance hidden: the menu keeps the right */
.v-me:focus-visible { border-radius: var(--v-radius-pill); }
.v-me .v-mono { transition: box-shadow 160ms var(--v-ease-out); }
.v-me:hover .v-mono, .v-me:has(+ :popover-open) .v-mono { box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-on-topbar) 35%, transparent); }
.v-menu--account { min-width: min(18rem, 100vw - 2 * var(--v-space-3)); }
.v-who { display: flex; align-items: center; gap: var(--v-space-2); padding: var(--v-space-1) var(--v-space-2) var(--v-space-2); }
.v-who__text { display: grid; min-width: 0; }
.v-who__email { font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.v-who__role { color: var(--v-muted); font-size: 0.8125rem; }
.v-menu__rule { height: 1px; margin: 0.25rem var(--v-space-1); background: var(--v-rule); }
.v-menu__link {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--v-space-2);
  min-height: var(--v-target); padding: 0.375rem var(--v-space-2); border-radius: 8px; color: inherit;
  font-weight: 500; font-size: 0.9375rem; line-height: 1.2; text-decoration: none;
}
.v-menu__link:hover { background: var(--v-chip); }
.v-menu__link[aria-current="page"] { background: var(--v-chip); font-weight: 700; }
.v-menu__hint { grid-column: 2; color: var(--v-muted); font-size: 0.8125rem; font-weight: 400; }
.v-menu__form { margin: 0; }
.v-menu__form button { color: var(--v-error); }
/* A person's monogram: neutral for a grant, the brand's container for an operator, the bar's own ink in the bar. */
.v-mono {
  display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--v-chip); color: var(--v-on-surface); font: 700 0.8125rem/1 var(--v-font-heading); letter-spacing: 0.02em;
}
.v-mono--operator { background: var(--v-primary-container); color: var(--v-on-primary-container); }
.v-mono--bar { background: var(--v-on-topbar); color: var(--v-topbar); }
/* N15. A person: monogram, the address, when they last signed in. */
.v-person { display: flex; align-items: center; gap: var(--v-space-2); min-width: 0; }
.v-person__text { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; } /* the track may shrink, or break-word, which never lowers a min-content width, let a 254-character address push the row 300 px sideways (session 65) */
.v-person__email { font-weight: 600; line-height: 1.35; overflow-wrap: break-word; } /* breaks at the <wbr> after @ and before each dot first; anywhere broke "exampl|e" on a phone (session 63) */
.v-you {
  display: inline-block; margin-left: 0.25rem; padding: 0 0.375rem; border-radius: var(--v-radius-pill);
  background: var(--v-primary-container); color: var(--v-on-primary-container);
  font-size: 0.75rem; font-weight: 700; vertical-align: 0.1em;
}
.v-never { color: var(--v-on-surface); }
.v-never::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.375rem; border-radius: 50%; background: var(--v-warning); vertical-align: 0.05em; }

/* The result line after a change, and the changed row's one short tint (N5's arrival motion). */
.v-done {
  display: flex; align-items: flex-start; gap: var(--v-space-1); margin: var(--v-space-4) 0 0; padding: var(--v-space-2) var(--v-gutter);
  border: 1px solid var(--v-rule); border-radius: var(--v-radius-compact); background: var(--v-band); overflow-wrap: anywhere;
}
.v-done:focus, .v-done:focus-visible { outline: none; box-shadow: none; } /* focused for screen readers, not a control */
.v-done .v-icon { width: 1.125rem; height: 1.125rem; margin-top: 0.2em; color: var(--v-success); }
@media (prefers-reduced-motion: no-preference) {
  .v-access__row.is-changed td { animation: v-arrive 2400ms var(--v-ease-out); }
  .v-done { animation: v-settle 400ms var(--v-ease-out) both; }
}

/* N17. Controls. The primary action is the brand's fill; a quiet one is text with an icon. */
.v-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: var(--v-target);
  padding: 0 var(--v-space-4) 0 var(--v-gutter); border: 0; border-radius: var(--v-radius-pill);
  background: var(--v-primary-fill); color: var(--v-on-primary-fill); font: var(--v-action-font);
  cursor: pointer; transition: background-color 120ms var(--v-ease-out);
}
.v-action:hover { background: var(--v-primary-fill-hover); }
.v-action .v-icon { width: 1.125rem; height: 1.125rem; }
.v-quiet {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--v-target); min-width: var(--v-target);
  justify-content: center; padding: 0 var(--v-space-2); border: 0; border-radius: var(--v-radius-pill);
  background: transparent; color: var(--v-on-surface); font: var(--v-action-font); cursor: pointer;
  transition: background-color 120ms var(--v-ease-out), color 120ms var(--v-ease-out);
}
.v-quiet--outlined { border: 1px solid var(--v-outline); text-decoration: none; }
.v-quiet:hover { background: var(--v-chip); }
.v-quiet .v-icon { width: 1.125rem; height: 1.125rem; }
.v-quiet--danger { color: var(--v-muted); }
.v-quiet--danger.v-quiet--outlined { color: var(--v-error); border-color: currentColor; }
.v-quiet--danger:hover, .v-quiet--danger:focus-visible { color: var(--v-on-error-container); background: var(--v-error-container); }
.v-access-page form:not(.v-add) { margin: 0; } /* not .v-add: a bare `form` rule took its 24 px (session 63) */

/* The role as two segments: the current one marked, the other a submit. */
.v-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 0.1875rem; border: 1px solid var(--v-rule); border-radius: var(--v-radius-pill); background: var(--v-card); }
.v-seg button {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: calc(var(--v-target) - 0.375rem - 2px);
  padding: 0 var(--v-space-2); border: 0; border-radius: var(--v-radius-pill); background: transparent; color: var(--v-muted);
  font: 600 0.875rem/1.2 var(--v-font-body); cursor: pointer; transition: background-color 160ms var(--v-ease-out), color 160ms var(--v-ease-out);
}
.v-seg button:hover { color: var(--v-on-surface); background: var(--v-chip); }
.v-seg button[aria-pressed="true"] { background: var(--v-primary-container); color: var(--v-on-primary-container); cursor: default; }
.v-seg button { min-width: 0; max-width: 100%; }
.v-seg button > span { min-width: 0; overflow-wrap: anywhere; }
.v-seg .v-icon { width: 0.875rem; height: 0.875rem; stroke-width: 2.5; }
.v-seg button:focus-visible { border-radius: var(--v-radius-pill); }

/* May play: a switch that is a submit, its state in aria-pressed and the knob's side and tick. */
.v-switch {
  display: inline-flex; align-items: center; gap: var(--v-space-1); min-height: var(--v-target); padding: 0 0.25rem;
  border: 0; border-radius: var(--v-radius-pill); background: transparent; color: var(--v-on-surface);
  font: 600 0.875rem/1.2 var(--v-font-body); cursor: pointer;
}
.v-switch__track {
  position: relative; display: block; flex: none; width: 2.75rem; height: 1.625rem; border-radius: var(--v-radius-pill);
  background: var(--v-chip); box-shadow: inset 0 0 0 1px var(--v-outline); /* the off track keeps its edge in dark, where the rule fell into the card */
  transition: background-color 200ms var(--v-ease-out);
}
.v-switch__knob {
  position: absolute; top: 0.1875rem; left: 0.1875rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--v-card); color: transparent;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--v-scrim) 30%, transparent);
  transition: transform 220ms var(--v-ease-out), color 160ms var(--v-ease-out);
}
.v-switch__knob .v-icon { width: 0.75rem; height: 0.75rem; stroke-width: 3; }
.v-switch[aria-pressed="true"] .v-switch__track { background: var(--v-primary-fill); box-shadow: none; }
.v-switch[aria-pressed="true"] .v-switch__knob { transform: translateX(1.125rem); color: var(--v-primary-fill); }
.v-switch[aria-pressed="false"] .v-switch__words { color: var(--v-muted); }
.v-switch:focus-visible { border-radius: var(--v-radius-pill); }

/* Locked and fixed facts. */
.v-locked, .v-always { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; font-size: 0.875rem; }
.v-locked .v-icon { color: var(--v-primary); }
.v-always { color: var(--v-muted); font-weight: 500; }
.v-always .v-icon { color: var(--v-success); }

/* The add form: a band with the address, the role as two cards, the play tick, then Add. */
.v-add {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-3); margin-top: var(--v-space-5); padding: var(--v-space-4) var(--v-gutter);
  border-radius: var(--v-radius-compact); background: var(--v-band);
}
.v-add__title { display: inline-flex; align-items: center; gap: var(--v-space-1); margin: 0; font: 700 1.125rem/1.3 var(--v-font-heading); letter-spacing: -0.01em; }
.v-add__title .v-icon { width: 1.125rem; height: 1.125rem; color: var(--v-primary); }
.v-field { display: grid; gap: 0.375rem; min-width: 0; }
.v-field label, .v-choice legend { font-weight: 600; font-size: 0.875rem; }
.v-input {
  width: 100%; min-height: var(--v-target); padding: 0 var(--v-space-2); border: 1px solid var(--v-outline); border-radius: var(--v-radius-compact);
  background: var(--v-card); color: var(--v-on-surface); font: 400 1rem/1.4 var(--v-font-body); caret-color: var(--v-secondary);
  transition: border-color 120ms var(--v-ease-out);
}
.v-input:hover { border-color: var(--v-on-surface); }
.v-input:focus-visible { border-color: var(--v-secondary); border-radius: var(--v-radius-compact); }
.v-input[aria-invalid="true"] { border-color: var(--v-error); border-width: 2px; }
.v-choice { display: grid; gap: var(--v-space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.v-choice legend { padding: 0; margin-bottom: 0.375rem; }
.v-choice__card {
  display: flex; align-items: flex-start; gap: var(--v-space-2); min-width: 0; padding: var(--v-space-2); border: 1px solid var(--v-rule);
  border-radius: var(--v-radius-compact); background: var(--v-card); cursor: pointer;
  transition: border-color 160ms var(--v-ease-out), box-shadow 160ms var(--v-ease-out);
}
.v-choice__card:hover { border-color: var(--v-outline); }
.v-choice__card:has(:checked) { border-color: var(--v-secondary); box-shadow: inset 0 0 0 1px var(--v-secondary); }
.v-choice__card:has(:focus-visible) { box-shadow: 0 0 0 4px var(--v-ring); }
.v-choice input, .v-check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; accent-color: var(--v-primary-fill); }
.v-choice input:focus-visible, .v-check input:focus-visible { box-shadow: none; }
.v-choice__text, .v-check > span { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem; min-width: 0; } /* as .v-person__text */
.v-choice__name, .v-check__name { font-weight: 600; overflow-wrap: anywhere; }
.v-choice__meaning, .v-check__hint { color: var(--v-muted); font-size: 0.8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.v-check { display: flex; align-items: flex-start; gap: var(--v-space-2); min-height: var(--v-target); padding-top: 0.5rem; cursor: pointer; }
.v-check:has(:focus-visible) { border-radius: 4px; box-shadow: 0 0 0 4px var(--v-ring); }
.v-add > .v-action { justify-self: start; }
.v-error {
  display: flex; align-items: flex-start; gap: var(--v-space-1); margin: 0; padding: var(--v-space-2) var(--v-gutter);
  border-radius: var(--v-radius-compact); background: var(--v-error-container); color: var(--v-on-error-container); overflow-wrap: anywhere;
}
.v-error .v-icon { width: 1.125rem; height: 1.125rem; margin-top: 0.15em; }
@media (min-width: 48rem) {
  .v-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; column-gap: var(--v-space-5); padding: var(--v-space-4); }
  .v-add__title, .v-add .v-error { grid-column: 1 / -1; }
  .v-add .v-choice { grid-column: 2; grid-row: 2 / span 3; grid-template-columns: 1fr 1fr; align-content: start; }
  .v-add .v-choice legend { grid-column: 1 / -1; float: left; width: 100%; margin-bottom: 0; }
  .v-add .v-choice { row-gap: 0.375rem; } /* the field's gap under its label, so the cards meet the address's top: they sat 8 px low (operator, session 65) */
  .v-add .v-field, .v-add .v-check, .v-add > .v-action { grid-column: 1; }
}

/* The ledger (variant A). Phones: each row a block (N6's pattern); from 48 rem a table. */
.v-access { display: block; width: 100%; margin-top: var(--v-space-4); border-collapse: separate; border-spacing: 0; }
.v-access thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* a block, or its clip never applies: as a row group its 178 px header widened the page at 320 px (session 65) */
.v-access tbody { display: block; }
.v-access__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "person person" "role role" "play remove";
  gap: var(--v-space-1) var(--v-space-2); align-items: center; padding: var(--v-space-3) var(--v-space-1); border-bottom: 1px solid var(--v-rule);
}
.v-access__row:last-child { border-bottom: 0; }
.v-access__row td { display: block; padding: 0; min-width: 0; }
.v-access__person { grid-area: person; }
.v-access__role { grid-area: role; }
.v-access__play { grid-area: play; }
.v-access__remove { grid-area: remove; justify-self: end; }
.v-access__row--operator .v-access__role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--v-space-1); }
.v-access__row--operator .v-access__play { min-height: var(--v-target); display: flex; align-items: center; }
@media (min-width: 48rem) {
  .v-access { display: table; table-layout: fixed; }
  .v-access thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .v-access tbody { display: table-row-group; }
  .v-access thead th {
    padding: var(--v-space-2) var(--v-gutter); border-bottom: 1px solid var(--v-rule); color: var(--v-muted); text-align: left;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  }
  .v-access__row { display: table-row; }
  .v-access__row td { display: table-cell; padding: var(--v-space-2) var(--v-gutter); vertical-align: middle; border-bottom: 1px solid var(--v-rule); }
  .v-access__row:last-child td { border-bottom: 0; }
  .v-access__row--operator td { background: color-mix(in srgb, var(--v-primary-container) 22%, transparent); }
  .v-access__row--operator .v-access__role, .v-access__row--operator .v-access__play { display: table-cell; } /* a flex cell left the table (session 63) */
  .v-access__row--operator .v-access__role .v-detail { display: block; }
  .v-col-role { width: 15rem; }
  .v-col-may-play { width: 10rem; }
  .v-col-remove { width: 8rem; }
  .v-access__remove { text-align: right; }
}
/* Narrow in text terms (320 px at 162.5% text, 390 px at 200%): the band and the cards give their padding to the words,
   and a word breaks inside its own box only where it alone is wider than the line (session 65's sweep). */
@media (max-width: 22rem) {
  .v-add { padding-inline: var(--v-space-1); }
  .v-choice__card { flex-direction: column; padding: var(--v-space-1); gap: var(--v-space-1); } /* the radio above its words gives them the card's width */
  .v-seg { display: flex; flex-direction: column; flex-wrap: nowrap; border-radius: var(--v-radius-compact); } /* wrapped, the pill was a lopsided capsule */
  .v-seg button { justify-content: center; min-height: var(--v-target); padding-inline: 0; border-radius: calc(var(--v-radius-compact) - 0.1875rem); } /* stacked, each its own 44 px target */ /* stacked, each is the block's width: "Oversight" and its tick fit at 320 px with 200% text */
  .v-person .v-mono { display: none; } /* decorative, and its column broke the address inside its words */
  .v-access__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "person" "role" "play" "remove"; padding-inline: 0; }
  .v-access__remove { justify-self: start; } /* beside the switch, the two overlapped */
}

/* Sign-in (ADR 0011): one card, one action. */
/* N9's page is Learn's login card (its login.html and upload.css, the session 54 audit): eyebrow,
   title, lede, alert, one full-width Microsoft button; centred in the window as Learn's shell is. */
.v-main--centred {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100svh - 5.25rem - var(--v-space-4) - var(--v-space-6)); /* the window less the bar and main's margins */
}
.v-main--centred > .v-signin { margin-block: auto; padding-block: var(--v-card-pad); }
/* The centred page uses the shared footer's maker-only layout across the page measure. */
.v-main--centred > .v-foot { width: 100%; margin: 0 auto; }
.v-signin { width: 100%; max-width: 34rem; margin-inline: auto; padding: var(--v-space-6) min(var(--v-space-6), max(48px, 8vw)); border: 1px solid var(--v-rule); }
.v-eyebrow {
  margin: 0 0 var(--v-space-3); color: var(--v-primary);
  font: 600 0.75rem/1.4 var(--v-font-heading); letter-spacing: 0.08em; text-transform: uppercase;
}
.v-signin__title { margin: 0 0 var(--v-space-2); font: 600 1.625rem/1.25 var(--v-font-heading); }
.v-lede { margin: 0 0 var(--v-space-5); color: var(--v-text-body); }
.v-alert {
  margin: 0 0 var(--v-space-4); padding: var(--v-space-2) var(--v-gutter); border: 1px solid var(--v-error);
  border-radius: 10px; background: var(--v-error-container); color: var(--v-error); font-size: 0.9375rem; line-height: 1.4;
}
.v-button {
  display: flex; align-items: center; justify-content: center; gap: var(--v-space-2); width: 100%;
  min-height: 3rem; margin-top: var(--v-space-5); padding: 0.875rem 1.5rem; border: 1px solid transparent;
  border-radius: var(--v-radius-pill); background: var(--v-primary-fill); color: var(--v-on-primary-fill);
  font: 600 0.9375rem/1.55 var(--v-font-heading); /* Learn's .ms-btn: the body's line height, 53.25 px tall */
  text-decoration: none; transition: background-color 120ms var(--v-ease-out);
}
.v-alert + .v-button, .v-lede + .v-button { margin-top: 0; } /* the lede's and the alert's own space sits above it */
.v-button__mark { flex: none; display: block; }
.v-button:hover { background: var(--v-primary-fill-hover); } /* the brand's fill, as Learn's .ms-btn-primary: darker on hover */

/* N11. A recording's page and its player (ADR 0012 decision 11; Part 2 of the player plan). The
   sound is drawn in neutral ink, played solid and to come faint, as N10's ribbon is: a brand's
   primary may be a red. The playhead and the play button are the control's accent. */
@property --v-at { syntax: "<number>"; inherits: true; initial-value: 0; } /* the played share, set by player.js */
:root {
  --v-control: 3rem; /* 48 px: the player's targets (ADR 0012 decision 11) */
  --v-control-play: 3.5rem;
  --v-wave-rest: color-mix(in srgb, var(--v-on-surface) 28%, transparent);
  --v-wave-done: var(--v-on-surface);
}
.v-back {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--v-target);
  margin: calc(-1 * var(--v-space-2)) 0 var(--v-space-1) -0.375rem; padding-inline: 0.375rem;
  border-radius: var(--v-radius-compact); color: var(--v-muted); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.v-back .v-icon { width: 1.125rem; height: 1.125rem; }
.v-back:hover, .v-back:focus-visible { color: var(--v-secondary); }
.v-recording__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--v-space-2) var(--v-space-4); }
.v-recording__head .v-intro__quiet { margin-top: 0.25rem; }
.v-recording__head > div { min-width: 0; } /* a long store name breaks in the title rather than widen it 2,401 px past the card */
.v-recording__status { display: grid; justify-items: start; gap: 0.25rem; max-width: 22rem; }
.v-recording > .v-player__state { margin-top: var(--v-space-4); }
.v-player {
  display: grid; gap: var(--v-space-3); margin-top: var(--v-space-4); padding: var(--v-space-4) var(--v-gutter);
  border-radius: var(--v-radius-card); background: var(--v-band);
}
.v-player { grid-template-columns: minmax(0, 1fr); } /* the file card grew the player 154 px past the card at 320 px, 200% */
.v-player__audio { display: block; width: 100%; }
.v-player__audio:not([controls]) { display: none; } /* player.js takes over */
.v-player__ui { display: grid; gap: var(--v-space-2); }
.v-player__ui[hidden], .v-player__state[hidden] { display: none; }
.v-player__state {
  display: flex; align-items: flex-start; gap: var(--v-space-1); margin: 0; padding: var(--v-space-2) var(--v-gutter);
  border-radius: var(--v-radius-compact); background: var(--v-chip); font-size: 0.9375rem; line-height: 1.45;
}
.v-player__state .v-icon { width: 1.125rem; height: 1.125rem; margin-top: 0.15em; }
.v-player__state--attention { background: var(--v-warning-container); color: var(--v-on-warning-container); }
.v-player__state--problem { background: var(--v-error-container); color: var(--v-on-error-container); }
.v-seek {
  position: relative; height: 4rem; border-radius: var(--v-radius-compact); cursor: pointer; touch-action: none;
  transition: --v-at 240ms linear;
}
.v-seek.is-dragging { transition: none; }
.v-seek svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.v-seek__track { fill: var(--v-rule); }
.v-seek__gap { fill: none; stroke: var(--v-warning); stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* N10's longest silence */
.v-seek__rest { fill: var(--v-wave-rest); }
.v-seek__done { fill: var(--v-wave-done); clip-path: inset(0 calc((1 - var(--v-at)) * 100%) 0 0); }
.v-seek__done .v-seek__track { fill: var(--v-wave-done); }
.v-seek__head {
  position: absolute; top: 0.125rem; bottom: 0.125rem; left: calc(var(--v-at) * 100%); width: 2px; margin-left: -1px;
  border-radius: 1px; background: var(--v-secondary); pointer-events: none;
}
.v-player__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-space-2); }
.v-player__time { min-width: 6.5rem; color: var(--v-muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* the total is the device's stated length until the file's own is read: unbounded */
.v-player__time [data-now] { color: var(--v-on-surface); font-weight: 600; }
.v-player__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-1); } /* large text wraps them rather than off the screen (session 61: 358 px at 160%) */
.v-control {
  display: inline-grid; place-items: center; width: var(--v-control); height: var(--v-control); padding: 0;
  border: 1px solid var(--v-rule); border-radius: var(--v-radius-pill); background: var(--v-card); color: var(--v-on-surface);
  font: 600 0.9375rem/1 var(--v-font-heading); cursor: pointer;
  transition: background-color 120ms var(--v-ease-out), transform 120ms var(--v-ease-out);
}
.v-control:hover { background: var(--v-chip); }
.v-control:active { transform: scale(0.95); }
.v-control:focus-visible { border-radius: var(--v-radius-pill); }
.v-control .v-icon { width: 1.5rem; height: 1.5rem; }
.v-control--play { width: var(--v-control-play); height: var(--v-control-play); border-color: transparent; background: var(--v-primary-fill); color: var(--v-on-primary-fill); }
.v-control--play:hover { background: var(--v-primary-fill-hover); }
.v-control--play .v-icon { width: 1.625rem; height: 1.625rem; }
.v-control--play .v-icon + .v-icon, .v-control--play.is-playing .v-icon:first-child { display: none; }
.v-control--play.is-playing .v-icon + .v-icon { display: block; }
.v-control--speed { width: auto; min-width: var(--v-control); padding-inline: var(--v-space-2); font-variant-numeric: tabular-nums; }
.v-icon__solid { fill: currentColor; stroke: none; }
.v-icon__figure { fill: currentColor; stroke: none; font: 700 7px var(--v-font-heading); text-anchor: middle; }
.v-player__notice { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--v-muted); font-size: 0.8125rem; }
.v-player__notice .v-icon { width: 1rem; height: 1rem; }
/* N13: the file card (ADR 0013, the operator's pick of three, session 61). The whole card is one
   link to the download; the arrow drops on hover, still when motion is reduced. */
.v-icon__arrow { transition: transform 220ms var(--v-ease-out); }
.v-file {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2) var(--v-space-3);
  padding: var(--v-space-2) var(--v-gutter); border: 1px solid var(--v-rule); border-radius: var(--v-radius-compact);
  background: var(--v-card); color: inherit; text-decoration: none;
  transition: border-color 160ms var(--v-ease-out), box-shadow 160ms var(--v-ease-out);
}
.v-file:hover { border-color: var(--v-secondary); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--v-scrim) 30%, transparent); }
.v-file:focus-visible { box-shadow: 0 0 0 4px var(--v-ring); } /* after :hover, so a hovered card keeps its ring */
.v-file:hover .v-icon__arrow, .v-file:focus-visible .v-icon__arrow { transform: translateY(2px); }
.v-file__tile {
  display: grid; place-items: center; width: var(--v-control); height: var(--v-control); border-radius: var(--v-radius-compact);
  background: var(--v-primary-container); color: var(--v-on-primary-container);
}
.v-file__tile .v-icon { width: 1.25rem; height: 1.25rem; }
.v-file__tile { flex: none; }
.v-file__text { display: grid; gap: 0.125rem; min-width: 0; flex: 1 1 10rem; } /* in rem, so large text drops it under the tile */
.v-file__name { font-family: var(--v-font-data); font-size: 0.8125rem; overflow-wrap: anywhere; }
.v-file__meta { color: var(--v-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v-file__go {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--v-target); padding-inline: var(--v-gutter);
  border-radius: var(--v-radius-pill); background: var(--v-primary-fill); color: var(--v-on-primary-fill); font-weight: 600;
  min-width: 0; overflow-wrap: anywhere; text-align: center;
}
.v-file:hover .v-file__go { background: var(--v-primary-fill-hover); }
@media (max-width: 30rem) { .v-file__go { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .v-icon__arrow { transition: none; }
  .v-file:hover .v-icon__arrow, .v-file:focus-visible .v-icon__arrow { transform: none; }
}
.v-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr)); gap: var(--v-space-3) var(--v-space-4); margin: var(--v-space-4) 0 0; }
.v-facts div { min-width: 0; }
.v-facts dt { color: var(--v-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.v-facts dd { margin: 0.125rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.v-recording__audio { margin-top: var(--v-space-4); padding-top: var(--v-space-3); border-top: 1px solid var(--v-rule); }
/* One line, not two, at the detail line's size (session 70's audit, finding 3). */
.v-recording__audio .v-audio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-1) var(--v-space-2); max-width: none; }
.v-recording__audio .v-audio__why { font-size: 0.8125rem; }
@media (min-width: 48rem) {
  .v-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* two rows on purpose: who and what, then when (session 61) */
  .v-recording__status { justify-items: end; }
  .v-player { padding: var(--v-space-4); }
}

/* N11 on the arrivals page: a player's way in from a stored row, in its own column (session 62), a compact pill whose hit area
   reaches the 44 px target without making the row taller; the play disc is the player's accent. */
.v-play {
  position: relative; display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem; border-radius: var(--v-radius-pill); background: var(--v-chip);
  color: var(--v-on-surface); font-size: 0.8125rem; font-weight: 600; line-height: 1.5; text-decoration: none;
  transition: background-color 120ms var(--v-ease-out);
}
.v-play::after { content: ""; position: absolute; inset: -0.375rem -0.25rem; } /* the 44 px target */
.v-play:hover { background: var(--v-rule); }
.v-play:focus-visible { border-radius: var(--v-radius-pill); }
.v-play__disc {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--v-primary-fill); color: var(--v-on-primary-fill);
}
.v-play__disc .v-icon { width: 0.875rem; height: 0.875rem; margin-left: 1px; } /* the triangle's weight sits left of centre */
.v-audio__why::first-letter { text-transform: uppercase; } /* every reason reads as a sentence */

/* N12. The day picker (session 60): the day before, and on a past day Today and the day after, as
   quiet pills beside the title; the title keeps its place and its live swap at midnight. */
.v-intro__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-space-2) var(--v-space-3); }
.v-days { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-1); }
.v-days a {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--v-target); padding: 0 var(--v-space-2);
  border: 1px solid var(--v-rule); border-radius: var(--v-radius-pill);
  border-color: color-mix(in srgb, var(--v-secondary) 45%, transparent); color: var(--v-secondary);
  font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background-color 120ms var(--v-ease-out);
}
.v-days a:hover { background: var(--v-secondary-container); }
.v-days a:focus-visible { border-radius: var(--v-radius-pill); }
.v-days .v-icon { width: 1rem; height: 1rem; }
.v-days__step:first-child { padding-left: var(--v-space-1); }
.v-days__step:last-child:not(:first-child) { padding-right: var(--v-space-1); }
.v-days__today { background: var(--v-chip); }

/* N18. The review queue (ADR 0012 slice C; variant B of three on a live switcher, session 66). The
   tick is a row in the player under the controls; blind until answered is the server leaving the
   verdict out, so no rule here hides anything. */
.v-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-space-1) var(--v-space-2); }
.v-top .v-back { margin-bottom: 0; }
.v-left {
  display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--v-space-2); border-radius: var(--v-radius-pill);
  background: var(--v-chip); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.v-tick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2) var(--v-space-3); margin: 0; padding-top: var(--v-space-3); border-top: 1px solid var(--v-rule); }
.v-tick:first-child { padding-top: 0; border-top: 0; } /* alone under "Audio missing", nothing to divide it from */
.v-tick__ask { margin: 0; font: 700 1rem/1.3 var(--v-font-heading); }
.v-tick__answers { display: flex; flex-wrap: wrap; gap: var(--v-space-1); min-width: 0; }
.v-tick__ask[hidden], .v-tick__answers[hidden] { display: none; } /* player.js: a browser that cannot play */
.v-answer {
  display: inline-flex; align-items: center; gap: var(--v-space-1); min-height: var(--v-target); max-width: 100%; padding: 0 var(--v-gutter);
  border: 1px solid var(--v-rule); border-radius: var(--v-radius-pill); background: var(--v-card); color: var(--v-on-surface);
  font: var(--v-action-font); cursor: pointer;
  transition: background-color 160ms var(--v-ease-out), border-color 160ms var(--v-ease-out);
}
.v-answer > span { min-width: 0; overflow-wrap: anywhere; }
.v-answer .v-icon { width: 1.25rem; height: 1.25rem; flex: none; stroke-width: 2.5; }
.v-answer--yes .v-icon { color: var(--v-success); }
.v-answer--no .v-icon { color: var(--v-error); }
.v-answer--yes:hover { border-color: var(--v-success); }
.v-answer--no:hover { border-color: var(--v-error); }
.v-answer--yes[aria-pressed="true"] { border-color: var(--v-success); background: var(--v-tint-yes); box-shadow: inset 0 0 0 1px var(--v-success); }
.v-answer--no[aria-pressed="true"] { border-color: var(--v-error); background: var(--v-tint-no); box-shadow: inset 0 0 0 1px var(--v-error); }
.v-answer:focus-visible { border-radius: var(--v-radius-pill); }
.v-next { gap: 0.25rem; margin-left: auto; padding: 0 var(--v-gutter) 0 var(--v-space-4); text-decoration: none; }
.v-next--quiet { background: transparent; color: var(--v-on-surface); box-shadow: inset 0 0 0 1px var(--v-rule); }
.v-next--quiet:hover { background: var(--v-chip); }
.v-reveal { padding: var(--v-space-3) var(--v-gutter); border: 1px solid var(--v-rule); border-radius: var(--v-radius-compact); background: var(--v-card); }
.v-reveal__mark { display: flex; align-items: flex-start; gap: var(--v-space-1); margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.v-reveal__mark > span { min-width: 0; }
.v-reveal__mark .v-icon { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.15em; stroke-width: 2.5; }
.v-reveal__mark--agree .v-icon { color: var(--v-success); }
.v-reveal__mark--disagree .v-icon { color: var(--v-error); }
.v-reveal__mark--apart .v-icon { color: var(--v-warning); }
.v-reveal .v-audio { margin-top: var(--v-space-2); }
@media (prefers-reduced-motion: no-preference) { .v-reveal { animation: v-settle 400ms var(--v-ease-out) both; } }

/* The way in: a pill with its count beside the day picker, for QA alone. */
.v-queue {
  display: inline-flex; align-items: center; gap: var(--v-space-1); min-height: var(--v-target); margin-left: auto;
  padding: 0 var(--v-space-1) 0 var(--v-gutter); border: 1px solid var(--v-rule); border-radius: var(--v-radius-pill);
  border-color: color-mix(in srgb, var(--v-secondary) 45%, transparent); color: var(--v-secondary);
  font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background-color 120ms var(--v-ease-out);
}
.v-queue:not(:has(.v-queue__n)) { padding-right: var(--v-gutter); }
.v-queue:hover { background: var(--v-secondary-container); }
.v-queue:focus-visible { border-radius: var(--v-radius-pill); }
.v-queue .v-icon { width: 1.125rem; height: 1.125rem; } /* the pill's accent, inherited */
.v-queue__n {
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.375rem; border-radius: var(--v-radius-pill);
  background: var(--v-secondary-container); color: var(--v-on-secondary-container); font-variant-numeric: tabular-nums;
}

/* The queue's end: nothing left, then the agreement beside the thresholds in force. */
.v-queue-end .v-empty { padding: var(--v-space-5) var(--v-space-4); }
.v-queue-start { margin: var(--v-space-4) 0 0; }
.v-queue-order { margin-top: var(--v-space-4); }
.v-queue-order + .v-queue-start { margin-top: var(--v-space-3); } /* the order, then the Start it names */
.v-queue-start .v-action { text-decoration: none; }
/* The list (the operator's pick, session 66): numbers show the order, the oldest in the brand's fill. */
.v-queue-list { display: grid; gap: var(--v-space-1); margin: var(--v-space-4) 0 0; padding: 0; list-style: none; }
.v-queue-list__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--v-space-3); min-height: var(--v-target);
  padding: var(--v-space-2) var(--v-gutter); border: 1px solid var(--v-rule); border-radius: var(--v-radius-compact);
  background: var(--v-card); color: var(--v-on-surface); text-decoration: none;
  transition: background-color 120ms var(--v-ease-out), border-color 120ms var(--v-ease-out);
}
.v-queue-list__row:hover { background: var(--v-band); border-color: var(--v-outline); }
.v-queue-list__row:focus-visible { border-radius: var(--v-radius-compact); }
.v-queue-list__n {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--v-chip);
  font: 700 0.875rem/1 var(--v-font-heading); font-variant-numeric: tabular-nums;
}
.v-queue-list li:first-child .v-queue-list__n { background: var(--v-primary-fill); color: var(--v-on-primary-fill); }
.v-queue-list__text { display: grid; gap: 0.125rem; min-width: 0; }
.v-queue-list__store { font-weight: 600; overflow-wrap: anywhere; }
.v-queue-list__detail { color: var(--v-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v-queue-list__go .v-icon { width: 1.25rem; height: 1.25rem; color: var(--v-muted); }
.v-queue-list__row:hover .v-queue-list__go .v-icon { color: var(--v-secondary); }
.v-agree { margin-top: var(--v-space-5); }
.v-agree__title { margin: 0 0 var(--v-space-2); font: 700 1.125rem/1.3 var(--v-font-heading); }
.v-agree__none { margin: 0; color: var(--v-muted); }
.v-agree__why { margin: 0 0 var(--v-space-3); max-width: 60ch; color: var(--v-muted); overflow-wrap: anywhere; }
.v-agree__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.375rem; margin: 0; font-weight: 600; }
.v-agree__n { font: 700 2.25rem/1 var(--v-font-heading); font-variant-numeric: tabular-nums; }
.v-agree__words { flex-basis: 100%; margin-top: 0.25rem; color: var(--v-muted); font-weight: 400; font-size: 0.9375rem; }
.v-agree__bar { height: 0.5rem; margin-top: var(--v-space-2); border-radius: var(--v-radius-pill); background: var(--v-chip); overflow: hidden; }
.v-agree__fill { display: block; height: 100%; border-radius: inherit; background: var(--v-on-surface); }
.v-agree__fill--0 { width: 0; } .v-agree__fill--10 { width: 10%; } .v-agree__fill--20 { width: 20%; } .v-agree__fill--30 { width: 30%; }
.v-agree__fill--40 { width: 40%; } .v-agree__fill--50 { width: 50%; } .v-agree__fill--60 { width: 60%; } .v-agree__fill--70 { width: 70%; }
.v-agree__fill--80 { width: 80%; } .v-agree__fill--90 { width: 90%; } .v-agree__fill--100 { width: 100%; }
.v-agree__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--v-space-3); margin: var(--v-space-4) 0 0; }
.v-agree__facts div { min-width: 0; }
.v-agree__facts dt { color: var(--v-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.v-agree__facts dd { margin: 0.125rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.v-agree__rules { margin-top: var(--v-space-4); padding-top: var(--v-space-3); border-top: 1px solid var(--v-rule); color: var(--v-muted); font-size: 0.875rem; }
.v-agree__rules-title { margin: 0 0 0.25rem; color: var(--v-on-surface); font-weight: 600; }
.v-agree__rules ul { margin: 0; padding-left: 1.125rem; }
.v-agree__rules li { overflow-wrap: anywhere; }

/* N18, narrow (below 22 rem), after its base rules so it wins at equal specificity (Codex,
   session 66: inside the earlier narrow block these lost to the rules above). */
@media (max-width: 22rem) {
  /* (session 66's sweep: at 320 px with 200% text the answers' words had 6 px, and the pill
     ran 13 px past the card): the answers and Next stack at the row's width, each icon goes (the
     words carry it), and the pill wraps as a compact block. */
  .v-tick__answers, .v-next { flex: 1 1 100%; }
  .v-tick__answers { flex-direction: column; }
  .v-answer, .v-next { justify-content: center; padding-inline: var(--v-space-1); border-radius: var(--v-radius-compact); }
  .v-answer .v-icon, .v-queue > .v-icon, .v-reveal__mark .v-icon { display: none; }
  .v-reveal { padding: var(--v-space-1); } /* its words had 10 px of a 62 px box */
  .v-next--quiet { border-radius: var(--v-radius-compact); }
  .v-queue, .v-queue:not(:has(.v-queue__n)) { flex-wrap: wrap; max-width: 100%; padding: var(--v-space-1); border-radius: var(--v-radius-compact); }
  .v-queue > span { min-width: 0; overflow-wrap: anywhere; }
  .v-queue-end .v-empty { padding-inline: var(--v-space-1); } /* "Nothing left to tick" ran 60 px past its box */
  .v-empty__title, .v-empty__body { overflow-wrap: anywhere; }
  .v-queue-list__row { gap: var(--v-space-2); padding-inline: var(--v-space-2); }
  .v-queue-list__go { display: none; } /* the whole row is the link; its words need the width */
}

/* N19, the History page (session 67, variant B): a day is a row, N18's list row in shape; a day
   still to review takes the store tile's tint, never a coloured edge (the operator). */
.v-history__open { color: var(--v-on-surface); }
.v-history__group { margin-top: var(--v-space-4); }
.v-count--attention { background: var(--v-tint-attention); color: var(--v-on-warning-container); }
.v-dayrows { display: grid; gap: var(--v-space-1); margin: var(--v-space-2) 0 var(--v-space-4); padding: 0; list-style: none; }
.v-dayrow {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--v-space-3); min-height: var(--v-target);
  padding: var(--v-space-2) var(--v-gutter); border: 1px solid var(--v-rule); border-radius: var(--v-radius-compact);
  background: var(--v-card); color: var(--v-on-surface); text-decoration: none;
  transition: background-color 120ms var(--v-ease-out), border-color 120ms var(--v-ease-out);
}
a.v-dayrow:hover { background: var(--v-band); border-color: var(--v-outline); }
a.v-dayrow:focus-visible { border-radius: var(--v-radius-compact); }
.v-dayrow--open { background: var(--v-tint-attention); border-color: transparent; }
a.v-dayrow--open:hover { background: var(--v-tint-attention); border-color: var(--v-outline); }
.v-dayrow--today { border-color: var(--v-secondary); }
.v-dayrow--empty { border-style: dashed; color: var(--v-muted); }
.v-dayrow__date { display: grid; min-width: 0; }
.v-dayrow__wd { font-weight: 600; overflow-wrap: anywhere; }
.v-dayrow__dm { color: var(--v-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.v-dayrow--open .v-dayrow__dm { color: var(--v-on-warning-container); }
.v-dayrow__text { display: grid; gap: 0.375rem; min-width: 0; }
.v-dayrow__facts { font-size: 0.875rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v-dayrow__flag { color: var(--v-error); font-weight: 600; }
.v-dayrow__overdue { font-weight: 600; }
.v-dayrow__end { display: inline-flex; align-items: center; gap: var(--v-space-2); min-width: 0; }
.v-dayrow__go .v-icon { display: block; width: 1.25rem; height: 1.25rem; color: var(--v-muted); }
a.v-dayrow:hover .v-dayrow__go .v-icon { color: var(--v-secondary); }
.v-daystate { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; }
.v-daystate .v-icon { width: 1rem; height: 1rem; flex: none; }
.v-daystate--open { color: var(--v-on-warning-container); }
.v-daystate--done .v-icon { color: var(--v-success); }
.v-daystate--quiet { color: var(--v-muted); font-weight: 500; }
/* The reviewed bar (N19): server-drawn SVG, its share an attribute; neutral ink, as N10's ribbon. */
.v-reviewed { display: block; width: 100%; max-width: 20rem; height: 0.375rem; border-radius: var(--v-radius-pill); overflow: hidden; }
.v-reviewed__track { fill: var(--v-chip); }
.v-reviewed__fill { fill: var(--v-ink); }
@media (max-width: 47.99rem) { /* a phone: the date and the state on one line, the counts and bar under them */
  .v-dayrow { grid-template-columns: minmax(0, 1fr) auto; gap: 0.375rem var(--v-space-2); }
  .v-dayrow__date { display: flex; flex-wrap: wrap; gap: 0 var(--v-space-1); align-items: baseline; }
  .v-dayrow__wd { min-width: 0; } /* "Wednesday" ran 2 px past its box at 390 px with 162.5% text (session 68's sweep) */
  .v-dayrow__text { grid-column: 1 / -1; grid-row: 2; }
  .v-dayrow__end { grid-column: 2; grid-row: 1; }
  .v-reviewed { max-width: none; }
}
@media (max-width: 22rem) { /* 320 px at 200% text (session 68's sweep): the state ran 21 px past the card */
  .v-dayrow { grid-template-columns: minmax(0, 1fr); }
  .v-dayrow__text, .v-dayrow__end { grid-column: 1; grid-row: auto; }
  .v-dayrow__go { display: none; } /* the whole row is the link, as N18's list */
  .v-daystate > span, .v-days a > span { min-width: 0; overflow-wrap: anywhere; }
  .v-days a { max-width: 100%; } /* "September" ran 13 px past its pill */
}
@media (prefers-reduced-motion: reduce) { .v-dayrow { transition: none; } }

/* N18's "Not reviewed" cue on an arrivals row (session 68, variant F of six): a link in the detail
   line's own ink with the queue's glyph, the brand's colour only on hover and focus, so a page where
   most rows carry it stays calm. Its separator travels with it; on a phone it takes its own line and
   drops the separator. The hit area reaches 44 px without making the line taller. Once answered,
   the same place says "Reviewed by you" (a link back to the answer) or a colleague's "Reviewed". */
.v-cue__keep { white-space: nowrap; }
.v-cue__sep { white-space: pre; }
.v-unreviewed, .v-mine { position: relative; display: inline-flex; align-items: center; gap: 0.3125rem; color: inherit; text-decoration: none; }
.v-unreviewed::after { content: ""; position: absolute; inset: -0.875rem -0.375rem; }
.v-mine::after { content: ""; position: absolute; inset: -0.875rem -0.375rem; }
.v-unreviewed:hover, .v-unreviewed:focus-visible, .v-mine:hover, .v-mine:focus-visible { color: var(--v-secondary); }
.v-unreviewed:hover span, .v-mine:hover span, .v-unreviewed:focus-visible span, .v-mine:focus-visible span { text-decoration: underline; text-underline-offset: 2px; }
.v-unreviewed:focus-visible, .v-mine:focus-visible { border-radius: 4px; }
.v-unreviewed .v-icon, .v-mine .v-icon, .v-theirs .v-icon { width: 0.875rem; height: 0.875rem; flex: none; }
@media (max-width: 47.99rem) { .v-cue__keep { display: block; margin-top: 0.125rem; } .v-cue__sep { display: none; } }
@media (max-width: 22rem) { .v-cue__keep { white-space: normal; } .v-unreviewed > span, .v-mine > span { min-width: 0; overflow-wrap: anywhere; } }
.v-theirs { display: inline-flex; align-items: center; gap: 0.3125rem; }

/* N18 outside the queue (session 68): one quiet line under a recording's title for QA, its own
   answer and Change, or that a colleague answered. Change reaches 44 px without a taller line. */
.v-said { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; margin: 0.375rem 0 0; color: var(--v-muted); font-size: 0.875rem; }
.v-said .v-icon { width: 1rem; height: 1rem; flex: none; }
.v-said__change { position: relative; color: var(--v-secondary); font-weight: 700; text-decoration: none; } /* underlined on hover alone, as the row's links (the operator, session 68) */
.v-said__change:hover, .v-said__change:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.v-said__change::after { content: ""; position: absolute; inset: -0.75rem -0.375rem; }

/* N20. The devices page (session 78; B, list and detail, of three on a live switcher, with A's
   counted tabs and C's lost-device picker): flat inside the one card, no floating cards, dense
   rows (the operator). Revoking leads to its own confirm page. */
.v-devices__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--v-space-2) var(--v-space-4); }
.v-lost { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-1) var(--v-space-2); min-width: 0; }
.v-lost__label { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 700; font-size: 0.9375rem; }
.v-lost__label .v-icon { width: 1.125rem; height: 1.125rem; color: var(--v-error); }
.v-lost__pick { flex: 1 1 13rem; min-width: 0; max-width: 22rem; min-height: var(--v-target); padding: 0 var(--v-space-1); border: 1px solid var(--v-outline); border-radius: var(--v-radius-compact); background: var(--v-card); color: var(--v-on-surface); font: inherit; font-size: 0.875rem; }
.v-action--danger { background: var(--v-error); color: var(--v-on-error); text-decoration: none; }
.v-action--danger:hover { background: color-mix(in srgb, var(--v-error) 85%, var(--v-on-surface)); }

.v-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--v-space-1); margin-top: var(--v-space-3); border-bottom: 1px solid var(--v-rule); }
.v-tabs__tab { display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--v-target); padding: 0 var(--v-space-2); margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--v-muted); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.v-tabs__tab:hover { color: var(--v-on-surface); }
.v-tabs__tab[aria-current] { color: var(--v-secondary); border-bottom-color: var(--v-secondary); }
.v-tabs__n { min-width: 1.375rem; padding: 0.0625rem 0.375rem; border-radius: var(--v-radius-pill); background: var(--v-secondary-container); color: var(--v-on-secondary-container); font-size: 0.75rem; text-align: center; font-variant-numeric: tabular-nums; }
.v-tabs__tab--hot .v-tabs__n { background: var(--v-error-container); color: var(--v-on-error-container); }

.v-split { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); margin-top: var(--v-space-3); border: 1px solid var(--v-rule); border-radius: var(--v-radius-compact); overflow: hidden; }
.v-dlist { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--v-rule); background: var(--v-band); }
.v-dlist li + li { border-top: 1px solid var(--v-rule); }
.v-dlist__row { display: flex; justify-content: space-between; align-items: center; gap: var(--v-space-1); min-height: var(--v-target); padding: 0.5rem var(--v-space-2); color: var(--v-on-surface); text-decoration: none; }
.v-dlist__row:hover { background: var(--v-chip); }
.v-dlist__row[aria-current] { background: var(--v-card); box-shadow: inset 0 0 0 2px var(--v-secondary); }
.v-dlist__main { display: inline-flex; align-items: center; gap: var(--v-space-1); min-width: 0; }
.v-dlist__main > .v-icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--v-muted); }
.v-dlist__main .v-detail { margin: 0; font-size: 0.75rem; }
.v-dlist__side { display: inline-flex; align-items: center; gap: var(--v-space-1); flex: none; }
.v-dlist__none { display: flex; align-items: center; gap: 0.375rem; padding: var(--v-space-2); color: var(--v-muted); font-size: 0.875rem; }
.v-dlist__none .v-icon { width: 1rem; height: 1rem; color: var(--v-success); }
.v-dname { display: block; font: 700 0.9375rem/1.25 var(--v-font-heading); overflow-wrap: anywhere; }
.v-badge { padding: 0.0625rem 0.4rem; border-radius: var(--v-radius-pill); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.v-badge--problem { background: var(--v-error-container); color: var(--v-on-error-container); }
.v-badge--attention { background: var(--v-warning-container); color: var(--v-on-warning-container); }

.v-dpane { min-width: 0; padding: var(--v-space-3) var(--v-gutter); }
.v-dpane:focus { outline: none; } /* a tabindex="-1" jump target, never a control */
.v-dpane__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2); }
.v-dpane__title { margin: 0; font: 700 1.25rem/1.2 var(--v-font-heading); overflow-wrap: anywhere; }
.v-dpane__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2); padding-top: var(--v-space-2); border-top: 1px solid var(--v-rule); }
.v-dpane__acts .v-detail { margin: 0; }
.v-dfacts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.375rem var(--v-space-3); margin: var(--v-space-3) 0; font-size: 0.9375rem; }
.v-dfacts dt { color: var(--v-muted); font-weight: 600; }
.v-dfacts dd { margin: 0; overflow-wrap: anywhere; }
.v-dfacts dd .v-detail { display: inline; }
.v-dfacts code, .v-uuids code { font-size: 0.8125rem; }
.v-uuids { margin: 0.25rem 0; padding-left: var(--v-gutter); }
.v-late { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--v-error); font-weight: 600; font-size: 0.875rem; }
.v-late .v-icon { width: 1rem; height: 1rem; flex: none; }

/* The contact signal: rising bars, static, never a glowing or pulsing dot (the operator). */
.v-fresh { display: inline-flex; align-items: center; gap: 0.4rem; font-variant-numeric: tabular-nums; }
.v-fresh--silent { font-weight: 700; }
.v-fresh--never { color: var(--v-muted); }
.v-signal { width: 1rem; height: 0.875rem; flex: none; }
.v-signal__bar { fill: none; stroke: var(--v-outline); stroke-width: 1; }
.v-signal--live .v-signal__bar, .v-signal--today .v-signal__bar:nth-child(-n+2) { fill: var(--v-success); stroke: var(--v-success); }
.v-signal--silent .v-signal__bar:first-child { fill: var(--v-warning); stroke: var(--v-warning); }

.v-fold__list { margin: 0; padding: 0 0 var(--v-space-2) var(--v-gutter); font-size: 0.875rem; }
.v-fold__list li { padding: 0.125rem 0; }
.v-fold__name { font-weight: 600; }
.v-fold__list .v-detail { display: inline; }

.v-confirm { width: 100%; max-width: 42rem; margin-inline: auto; }
.v-confirm__heading { min-width: 0; }
.v-confirm__subject { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--v-space-1) var(--v-space-2); margin: var(--v-space-2) 0 0; font: 600 1.125rem/1.4 var(--v-font-heading); overflow-wrap: anywhere; }
.v-confirm__scope { color: var(--v-muted); font: 400 0.9375rem/1.5 var(--v-font-body); }
.v-confirm .v-confirm__facts { clear: both; margin-block: var(--v-space-4); }
.v-confirm__effects { display: grid; gap: var(--v-space-3); padding-block: var(--v-space-4); border-block: 1px solid var(--v-rule); }
.v-confirm__effect h2 { display: flex; align-items: center; gap: var(--v-space-1); margin: 0; font: 600 1rem/1.5 var(--v-font-heading); }
.v-confirm__effect h2 .v-icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--v-muted); }
.v-confirm__effect p { margin: var(--v-space-1) 0 0; line-height: 1.5; }
.v-confirm__go > .v-quiet { max-width: 100%; min-width: 0; padding-block: var(--v-space-1); overflow-wrap: anywhere; }
.v-confirm__context { flex-basis: 100%; margin: 0; color: var(--v-muted); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
.v-confirm__context strong { color: var(--v-on-surface); }
.v-confirm__status { flex-basis: 100%; margin: 0; color: var(--v-muted); font-size: 0.875rem; }
.v-confirm__status:empty { display: none; }
.v-action:disabled { cursor: wait; }
.v-recovery { margin: var(--v-space-2) 0 var(--v-space-4); }
.v-confirm__art { float: right; width: 4.5rem; height: 4.5rem; margin: 0 0 0 var(--v-space-2); }
.v-confirm__body { fill: var(--v-on-surface); }
.v-confirm__screen { fill: var(--v-error-container); }
.v-confirm__cam { fill: var(--v-muted); }
.v-confirm__ring, .v-confirm__strike { fill: none; stroke: var(--v-error); stroke-width: 5; stroke-linecap: round; }
.v-confirm__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2); margin-top: var(--v-space-4); }
.v-confirm__go .v-action { max-width: 100%; } /* its label carries the device's name */
.v-confirm__go .v-action > span { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .v-confirm__ring { stroke-dasharray: 139; stroke-dashoffset: 139; animation: v-draw 520ms var(--v-ease-out) 120ms forwards; }
  .v-confirm__strike { stroke-dasharray: 45; stroke-dashoffset: 45; animation: v-draw 300ms var(--v-ease-out) 560ms forwards; }
  .v-dpane { animation: v-settle 260ms var(--v-ease-out) both; }
}
@keyframes v-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 47.99rem) {
  .v-split { grid-template-columns: minmax(0, 1fr); }
  .v-dlist { border-right: 0; border-bottom: 1px solid var(--v-rule); }
}
.v-dforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: var(--v-space-2) var(--v-space-3); margin-top: var(--v-space-3); }
.v-dform { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; min-width: 0; }
.v-dform label { color: var(--v-muted); font-weight: 600; font-size: 0.875rem; }
.v-dform__row { display: flex; align-items: center; gap: var(--v-space-1); }
.v-dform__row .v-input { flex: 1 1 auto; min-width: 0; }
.v-dform__row .v-quiet { flex: none; }
@media (max-width: 22rem) { /* the devices page at 320 px with 200% text (session 79's sweep) */
  .v-dfacts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .v-dfacts dd + dt { margin-top: var(--v-space-1); }
  .v-dlist__row { flex-wrap: wrap; }
  .v-dlist__side { flex-shrink: 1; flex-wrap: wrap; min-width: 0; }
  .v-dlist__main > .v-icon { display: none; } /* "MSM001" broke as "MSM00" over "1" beside it */
  .v-dfacts .v-fresh { flex-wrap: wrap; }
  .v-confirm__art { float: none; display: block; margin: 0 0 var(--v-space-2); }
  .v-dform .v-error { flex-wrap: wrap; }
  .v-dform__row { flex-wrap: wrap; }
  .v-dpane .v-action, .v-confirm__go .v-action { padding-right: var(--v-gutter); }
  .v-dpane .v-action .v-icon, .v-confirm__go .v-action .v-icon { display: none; } /* the word carries it, as the day row's arrow (session 68) */
}
.v-dpane__head form { margin: 0 0 0 auto; }

/* N21, the agents page (session 83, ADR 0015 slice 1): the agent code, store chips, the agent form's
tick pills, the duplicate notice and the confirm page's list. Every value a token. */
a.v-action, a.v-quiet { text-decoration: none; }
.v-agents__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--v-space-2) var(--v-space-3); }
.v-agents__client { margin-left: 0.25rem; padding: 0.125rem 0.625rem; border-radius: var(--v-radius-pill); background: var(--v-secondary-container); color: var(--v-on-secondary-container); font: 600 0.875rem/1.4 var(--v-font-body); vertical-align: 0.3em; }
.v-agents__acts { display: flex; flex-wrap: wrap; gap: var(--v-space-1); align-items: center; }
.v-agents__acts form { display: flex; gap: var(--v-space-1); margin: 0; }
.v-agents__tags { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.v-unrec { color: var(--v-muted); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.v-code { display: inline-flex; gap: 0.2em; padding: 0.0625rem 0.4rem; border-radius: var(--v-radius-compact); background: var(--v-chip); color: var(--v-on-surface); font: 600 0.8125rem/1.5 var(--v-font-data); letter-spacing: 0.04em; white-space: nowrap; }
.v-code--big { font-size: 1rem; padding: 0.125rem 0.5rem; background: var(--v-secondary-container); color: var(--v-on-secondary-container); }
.v-data { font-family: var(--v-font-data); }
.v-shops { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.v-shop { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3em; max-width: 100%; padding: 0.0625rem 0.5rem; border: 1px solid var(--v-rule); border-radius: var(--v-radius-pill); font-size: 0.8125rem; overflow-wrap: anywhere; }
.v-shop__n { color: var(--v-muted); font: 600 0.75rem/1 var(--v-font-data); white-space: nowrap; }
.v-aform { display: grid; gap: var(--v-space-2); margin-top: var(--v-space-2); }
.v-aform__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--v-space-2) var(--v-space-3); align-items: start; } /* a field with an error grows alone */
.v-aform fieldset.v-field { margin: 0; padding: 0; border: 0; min-inline-size: 0; } /* a fieldset is as wide as its widest pill unless told */
.v-aform legend { padding: 0; font-weight: 600; font-size: 0.875rem; }
.v-aform .v-input { width: 100%; min-width: 0; box-sizing: border-box; } /* a native date input's own width is wider than a 320 px column at 200% text */
.v-aform__acts { display: flex; flex-wrap: wrap; gap: var(--v-space-2); align-items: center; }
.v-hint { color: var(--v-muted); font-size: 0.8125rem; font-weight: 400; }
.v-retailer { margin: 0.25rem 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--v-muted); }
.v-picks { display: flex; flex-wrap: wrap; gap: var(--v-space-1); }
.v-pick { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%; overflow-wrap: anywhere; min-height: var(--v-target); padding: 0 0.875rem 0 0.5rem; border: 1px solid var(--v-outline); border-radius: var(--v-radius-pill); cursor: pointer; font-size: 0.9375rem; }
.v-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.v-pick__box { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 2px solid var(--v-outline); border-radius: 50%; }
.v-pick__box .v-icon { width: 0.8rem; height: 0.8rem; stroke-width: 3; opacity: 0; transform: scale(0.4); }
.v-pick:has(input:checked) { border-color: var(--v-secondary); background: var(--v-secondary-container); color: var(--v-on-secondary-container); }
.v-pick:has(input:checked) .v-pick__box { border-color: var(--v-secondary); background: var(--v-secondary); color: var(--v-surface-container-lowest); }
.v-pick:has(input:checked) .v-pick__box .v-icon { opacity: 1; transform: none; }
.v-pick:has(input:focus-visible) { outline: 3px solid var(--v-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .v-pick, .v-pick__box { transition: background-color 140ms var(--v-ease-out), border-color 140ms var(--v-ease-out); }
  .v-pick__box .v-icon { transition: opacity 120ms var(--v-ease-out), transform 200ms var(--v-ease-out); }
}
.v-dup { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem var(--v-space-1); align-items: start; margin-top: var(--v-space-2); padding: var(--v-space-2); border-radius: var(--v-radius-compact); background: var(--v-warning-container); color: var(--v-on-warning-container); }
.v-dup p, .v-dup form { margin: 0; }
.v-dup > :not(.v-dup__icon) { grid-column: 2; }
.v-dup__icon .v-icon { width: 1.25rem; height: 1.25rem; margin-top: 0.1em; }
.v-gone { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--v-space-1); }
.v-gone form { margin: 0; }

/* N21's code card: what the operator hands over, shown once after an add; its slip is all that prints. */
.v-codecard { display: grid; justify-items: center; gap: 0.5rem; margin-top: var(--v-space-3); padding: var(--v-space-4) var(--v-gutter); border-radius: var(--v-radius-card); background: var(--v-secondary-container); color: var(--v-on-secondary-container); text-align: center; }
.v-codecard:focus, .v-codecard:focus-visible { outline: none; box-shadow: none; } /* focused for screen readers, not a control */
.v-codecard > * { max-width: 100%; min-width: 0; }
.v-codecard__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.v-codecard__eyebrow .v-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.v-codecard__code { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; font: 700 min(3.75rem, 12vw)/1 var(--v-font-data); letter-spacing: 0.08em; } /* sized by the screen, so six characters fit a 320 px phone at any text size */
.v-codecard__ch--gap { margin-left: 0.35em; }
.v-codecard__say { margin: 0; max-width: 46ch; text-wrap: balance; }
.v-codecard__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--v-space-1); }
@media (prefers-reduced-motion: no-preference) {
  .v-codecard__ch { display: inline-block; animation: v-rise 420ms var(--v-ease-out) both; }
  .v-codecard__ch:nth-child(2) { animation-delay: 40ms; }
  .v-codecard__ch:nth-child(3) { animation-delay: 120ms; }
  .v-codecard__ch:nth-child(4) { animation-delay: 160ms; }
  .v-codecard__ch:nth-child(5) { animation-delay: 200ms; }
  .v-codecard__ch:nth-child(6) { animation-delay: 240ms; }
}
@keyframes v-rise { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
.v-slip { display: none; }
@media print {
  body:has(.v-slip) * { visibility: hidden; }
  body:has(.v-slip) .v-slip, body:has(.v-slip) .v-slip * { visibility: visible; } /* outranks the line above (Codex) */
  .v-slip { display: block; position: absolute; top: 0; left: 0; width: 9cm; padding: 0.6cm; border: 1px dashed; font-family: var(--v-font-body); }
  .v-slip p { margin: 0 0 0.2cm; }
  .v-slip__brand { font-weight: 700; }
  .v-slip__name { font-size: 14pt; }
  .v-slip__label { font-size: 9pt; text-transform: uppercase; letter-spacing: 0.06em; }
  .v-slip__code { font: 700 28pt/1 var(--v-font-data); letter-spacing: 0.08em; }
  .v-slip__how { font-size: 9pt; }
}

/* Shared native confirmation dialog; the page remains the no-script fallback. */
:root { --v-dialog-width: 38rem; --v-dialog-backdrop: color-mix(in srgb, var(--v-scrim) 45%, transparent); }
.v-dialog { box-sizing: border-box; border: 0; border-radius: var(--v-radius-card); padding: var(--v-space-5); width: calc(100% - var(--v-space-4)); max-width: var(--v-dialog-width); max-height: calc(100dvh - var(--v-space-4)); overflow: auto; background: var(--v-card); color: var(--v-on-surface); overflow-wrap: anywhere; }
.v-dialog::backdrop { background: var(--v-dialog-backdrop); }
.v-dialog__heading { display: flex; align-items: flex-start; gap: var(--v-space-2); }
.v-dialog__heading > .v-intro__title { flex: 1; min-width: 0; }
.v-dialog__heading > .v-confirm__art { float: none; flex: none; max-width: 25%; height: auto; margin: 0; }
.v-dialog:not([open]) .v-confirm__ring, .v-dialog:not([open]) .v-confirm__strike { animation: none; }
@media (max-width: 22rem) {
  .v-dialog__heading:has(.v-confirm__art) { flex-wrap: wrap; }
  .v-dialog__heading:has(.v-confirm__art) > .v-intro__title { flex-basis: 100%; }
  .v-dialog__heading > .v-confirm__art { order: -1; margin-inline-start: auto; }
}
.v-dialog .v-intro__title { font-size: 1.5rem; line-height: 1.3; }
.v-dialog__person { display: flex; flex-direction: column; gap: var(--v-space-1); margin: var(--v-space-3) 0 var(--v-space-4); }
.v-dialog__person strong { font: 600 1.125rem/1.4 var(--v-font-heading); }
.v-dialog__person > span { color: var(--v-muted); }
.v-dialog__change { background: var(--v-tint-attention); padding: var(--v-space-3) var(--v-gutter); border-radius: var(--v-radius-compact); }
.v-dialog__change h3 { font: 600 1.125rem/1.4 var(--v-font-heading); margin: 0; text-wrap: balance; }
.v-dialog__change p { margin: var(--v-space-1) 0 0; }
.v-dialog__reassurance { padding: var(--v-space-3) 0; }
.v-dialog__reassurance p { margin: var(--v-space-2) 0; }
.v-dialog .v-confirm__go { margin-top: 0; padding-top: var(--v-space-4); border-top: 1px solid var(--v-rule); }
@media (max-width: 30rem) { .v-dialog { padding: var(--v-space-3) var(--v-gutter); } }

/* One keyboard treatment for command buttons, including the review/player controls.
   An offset outline stays visible beside any filled role, including in forced colours. */
:is(.v-action, .v-quiet, .v-button, .v-control, .v-answer, .v-seg button, .v-switch):focus-visible {
  outline: 3px solid var(--v-ring); outline-offset: 3px; box-shadow: none;
}
/* No leading icon: both sides use the responsive gutter, even in a narrow confirmation. */
.v-action:not(:has(.v-icon)) { padding-inline: var(--v-gutter); }