/* Nabra — final visual kit (Story 7.3, direction «غسق ونقطة» / Dusk and Dot).
   Built only on the custom properties in ../system/tokens.css: no raw colour appears in this file
   (build_visual.py fails if one does). Teacher screens may use gradients and motion (D-15);
   the reading stage S-10 uses none of the .dusk, .glow, .rv or cursor rules. */

.nv { position: relative; direction: rtl; font-family: var(--font-sans); font-size: 16px; line-height: 28px; color: var(--ink);
  background: var(--gradient-paper), var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  box-sizing: border-box; overflow: clip; }
.nv *, .nv *::before, .nv *::after { box-sizing: border-box; }
.nv [hidden] { display: none !important; }
.nv h1, .nv h2, .nv h3, .nv p, .nv ul, .nv ol, .nv dl, .nv dd, .nv figure { margin: 0; }
.nv ul, .nv ol { padding: 0; list-style: none; }
.nv a { color: var(--teal); text-decoration: none; }
.nv button { font: inherit; color: inherit; }
.nv .num { font-variant-numeric: tabular-nums; }
.nv .code { font-family: var(--font-latin); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2);
  background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 2px 6px; direction: ltr; unicode-bidi: isolate; }
.nv .muted { color: var(--ink-2); }
.nv .wrap { width: min(var(--size-content), 100% - 2 * var(--space-5)); margin-inline: auto; }
.nv .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Type roles */
.nv .t-display { font-size: 40px; line-height: 56px; font-weight: 700; }
.nv .t-h1 { font-size: 28px; line-height: 42px; font-weight: 700; }
.nv .t-h2 { font-size: 22px; line-height: 34px; font-weight: 600; }
.nv .t-h3 { font-size: 18px; line-height: 28px; font-weight: 600; }
.nv .t-small { font-size: 14px; line-height: 24px; }
.nv .t-caption { font-size: 13px; line-height: 20px; font-weight: 500; }

/* Focus: always the ring, never a glow alone (D-15, NFR-A3) */
.nv :focus { outline: none; }
.nv :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nv [data-dusk] :focus-visible { outline-color: var(--on-dusk); }

/* ---------- App bar ---------- */
.nv .appbar { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; gap: var(--space-6);
  padding-inline: max(var(--space-5), (100% - var(--size-content)) / 2);
  background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px);
  border-block-end: 1px solid var(--line); }
.nv .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 22px; font-weight: 700; color: var(--ink); }
.nv .brand svg { display: block; }
.nv .mark-bowl { stroke: var(--teal); }
.nv .mark-dot { fill: var(--amber); }
.nv .nav { display: flex; gap: var(--space-1); }
.nv .nav a { position: relative; display: inline-flex; align-items: center; min-height: var(--size-touch); padding-inline: var(--space-3);
  border-radius: var(--radius-md); color: var(--ink-2); font-weight: 600; font-size: 15px;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.nv .nav a:hover { color: var(--ink); background: var(--surface-sunken); }
.nv .nav a[aria-current="page"] { color: var(--teal); }
.nv .nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--space-3); bottom: 4px; height: 3px;
  border-radius: var(--radius-pill); background: var(--gradient-voice); }
.nv .appbar .end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); }
.nv .who { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-2); }
.nv .avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-soft); color: var(--teal); font-weight: 700; font-size: 14px; }

/* ---------- Buttons ---------- */
.nv .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-touch); padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1.5px solid transparent;
  font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard); }
.nv .btn:active { transform: translateY(1px) scale(.98); }
.nv .btn-primary { color: var(--on-teal); background: var(--gradient-primary); background-color: var(--teal); box-shadow: var(--shadow-card); }
.nv .btn-primary:hover { box-shadow: var(--glow-key); }
.nv .btn-primary:active { background: var(--teal-hover); box-shadow: var(--shadow-card); }
.nv .btn-secondary { color: var(--ink); background: var(--surface); border-color: var(--line-control); }
.nv .btn-secondary:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.nv .btn-quiet { color: var(--teal); background: transparent; padding-inline: var(--space-3); }
.nv .btn-quiet:hover { background: var(--teal-soft); }
.nv .btn-lg { min-height: 52px; font-size: 17px; padding-inline: var(--space-6); border-radius: var(--radius-md); }
.nv .btn-block { width: 100%; }
.nv .btn-sm { min-height: 36px; font-size: 14px; padding-inline: var(--space-3); }
/* on the dusk band */
.nv .btn-paper { color: var(--on-dusk-action); background: var(--dusk-action); box-shadow: var(--shadow-card); }
.nv .btn-paper:hover { box-shadow: var(--glow-dusk); }
.nv .btn-ghost { color: var(--on-dusk); background: var(--dusk-panel); border-color: var(--dusk-line); }
.nv .btn-ghost:hover { border-color: var(--on-dusk-2); background: color-mix(in srgb, var(--on-dusk) 14%, transparent); }
.nv .btn .ic { font-size: 14px; line-height: 1; }
.nv .btn[aria-busy="true"] { cursor: progress; }
.nv .btn[aria-busy="true"] .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: nv-spin 800ms linear infinite; }
@keyframes nv-spin { to { transform: rotate(-360deg); } }

/* ---------- Fields: plain on purpose (D-15) ---------- */
.nv .field { display: flex; flex-direction: column; gap: var(--space-2); }
.nv .field label { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink); }
.nv .field .hint { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.nv .input { width: 100%; min-height: 52px; padding: 0 var(--space-4); font: inherit; font-size: 17px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-control); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.nv .input::placeholder { color: var(--ink-muted); }
.nv .input:hover { border-color: var(--ink-2); }
.nv .input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--teal); }
.nv .input[dir="ltr"] { text-align: end; font-family: var(--font-latin); font-size: 16px; }
.nv .field-error .input { border-color: var(--danger); }
.nv .field-error .msg { font-size: 14px; line-height: 22px; color: var(--danger); font-weight: 600; }

/* ---------- Status ---------- */
.nv .band { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 12px; border-radius: var(--radius-pill);
  font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.nv .band .g { font-size: 12px; line-height: 1; width: 14px; text-align: center; }
.nv .band-low { background: var(--band-low-soft); color: var(--band-low); }
.nv .band-watch { background: var(--band-watch-soft); color: var(--band-watch); }
.nv .band-refer { background: var(--band-refer-soft); color: var(--band-refer); }
.nv .band-none { background: transparent; color: var(--ink-2); border: 1.5px dashed var(--line-control); padding-block: 2.5px; }
.nv .band-lg { font-size: 20px; line-height: 30px; padding: 8px 22px 8px 18px; gap: var(--space-2); }
.nv .band-lg .g { font-size: 16px; width: 20px; }
.nv .consent { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-2); }
.nv .consent .g { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.nv .consent-screening .g { background: var(--teal-soft); color: var(--teal); }
.nv .consent-research .g { background: var(--surface); color: var(--teal); border: 1.5px solid var(--teal); }
.nv .consent-none .g { background: var(--band-refer-soft); color: var(--band-refer); }
.nv .notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  background: var(--teal-soft); border-radius: var(--radius-md); font-size: 14px; line-height: 24px; color: var(--ink); }
.nv .notice svg { flex: none; margin-block-start: 4px; color: var(--teal); }
.nv .notice b { font-weight: 700; }

/* ---------- Cards ---------- */
.nv .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.nv .card-pad { padding: var(--space-5) var(--space-6); }
.nv .sec-title { display: flex; flex-direction: column; gap: 6px; }
.nv .sec-title::after { content: ""; width: 40px; height: 3px; border-radius: var(--radius-pill); background: var(--gradient-voice); }

/* ---------- The dusk band: the one identity moment per screen ---------- */
.nv .dusk { position: relative; isolation: isolate; color: var(--on-dusk); background: var(--gradient-dusk-glow), var(--gradient-dusk); }
.nv .dusk .sub { color: var(--on-dusk-2); }
.nv .dusk .panel { background: var(--dusk-panel); border: 1px solid var(--dusk-line); border-radius: var(--radius-lg); }
.nv .dusk .edge { position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: 56px; z-index: 1; color: var(--paper); pointer-events: none; }
.nv .dusk .edge path { fill: currentColor; }
/* the grain of the dusk: a very fine dot field, built from the on-dusk token */
.nv .dusk::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--on-dusk) 10%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px; mask-image: linear-gradient(to left, transparent, currentColor 70%); }

/* ---------- Session stepper ---------- */
.nv .steps { display: flex; align-items: center; gap: var(--space-2); }
.nv .steps li { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.nv .steps li + li::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--line-control); margin-inline-end: var(--space-1); }
.nv .steps .d { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
  border: 1.5px solid var(--line-control); color: var(--ink-2); background: var(--surface); }
.nv .steps .done { color: var(--ink-2); }
.nv .steps .done .d { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.nv .steps .done + li::before { background: var(--teal); }
.nv .steps .cur { color: var(--ink); }
.nv .steps .cur .d { background: var(--gradient-primary); border-color: var(--teal); color: var(--on-teal); box-shadow: 0 0 0 4px var(--teal-soft); }

/* ---------- Class list ---------- */
.nv .list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.nv .list th { text-align: start; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-2); padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.nv .list td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); vertical-align: middle; height: 68px; }
.nv .list tr:last-child td { border-block-end: 0; }
.nv .list tbody tr { position: relative; transition: background-color var(--duration-fast) var(--ease-standard); }
.nv .list tbody tr:hover { background: color-mix(in srgb, var(--teal-soft) 60%, var(--surface)); }
.nv .list tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--teal); }
.nv .list .kid { display: flex; align-items: center; gap: var(--space-3); }
.nv .list .kid b { font-weight: 600; color: var(--ink); }
.nv .list .kid a { color: inherit; }
.nv .list .kid a:hover b { color: var(--teal); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.nv .list .n { font-weight: 600; font-size: 16px; }
.nv .list .dim { color: var(--ink-muted); }
/* Row actions are always visible. Only a mouse (hover + fine pointer) folds them away until the row is hovered or focused;
   touch screens have no hover, so they never hide there. */
@media (hover: hover) and (pointer: fine) {
  .nv .list .row-act { opacity: 0; transform: translateX(-6px);
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
  .nv .list tbody tr:hover .row-act, .nv .list tbody tr:focus-within .row-act, .nv .list .row-act.always { opacity: 1; transform: none; }
}

/* band distribution on the dusk band */
.nv .dist { display: flex; flex-direction: column; gap: var(--space-4); }
.nv .dist .bar { display: flex; gap: 3px; height: 12px; }
.nv .dist .bar i { display: block; height: 100%; border-radius: var(--radius-pill); transform-origin: right center; }
.nv .dist .s-refer { background: var(--band-refer); }
.nv .dist .s-watch { background: var(--band-watch); }
.nv .dist .s-low { background: var(--band-low); }
.nv .dist .s-none { background: transparent; border: 1.5px dashed var(--on-dusk-2); }
.nv .dist dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.nv .dist dl div { display: flex; flex-direction: column; gap: 2px; padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--dusk-line); }
.nv .dist dt { font-size: 14px; line-height: 22px; color: var(--on-dusk-2); display: flex; align-items: center; gap: 6px; }
.nv .dist dt .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.nv .dist dt .sw.s-none { border-width: 1.5px; }
.nv .dist dd { font-size: 36px; line-height: 44px; font-weight: 700; color: var(--on-dusk); font-variant-numeric: tabular-nums; }
.nv .dist dd .g { font-size: 18px; margin-inline-end: 6px; color: var(--on-dusk-2); vertical-align: 6px; }

/* ---------- Marked passage ---------- */
.nv .marked { font-size: 24px; line-height: 60px; font-weight: 500; }
.nv .w { font: inherit; color: inherit; background: none; border: 0; padding: 2px 5px; margin: 0 1px; border-radius: var(--radius-sm); cursor: pointer;
  text-underline-offset: 11px; text-decoration-thickness: 2px; text-decoration-skip-ink: none;
  transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.nv .w:hover { background: var(--surface-sunken); box-shadow: 0 0 0 1.5px var(--line-control); }
.nv .w .tag { font-size: 13px; font-weight: 700; vertical-align: super; line-height: 1; margin-inline-start: 3px; display: inline-block; }
.nv .w-sub { background: var(--state-substituted-soft); color: var(--state-substituted); text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: var(--state-substituted); }
.nv .w-om { background: var(--state-omitted-soft); color: var(--state-omitted); text-decoration-line: line-through; text-decoration-color: var(--state-omitted); }
.nv .w-hes { background: var(--state-hesitated-soft); color: var(--state-hesitated); text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--state-hesitated); }
.nv .w-sc { background: var(--state-self-corrected-soft); color: var(--state-self-corrected); text-decoration-line: underline; text-decoration-style: double; text-decoration-color: var(--state-self-corrected); }
.nv .w-sub:hover, .nv .w-om:hover, .nv .w-hes:hover, .nv .w-sc:hover { box-shadow: 0 0 0 1.5px currentColor; }
.nv .w[aria-expanded="true"] { outline: 2px solid var(--focus); outline-offset: 2px; }
.nv .ins { font: inherit; display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; font-size: 15px; line-height: 24px; font-weight: 600;
  color: var(--state-inserted); background: var(--state-inserted-soft); border: 1.5px dashed var(--state-inserted); border-radius: var(--radius-pill);
  padding: 0 9px; margin: 0 3px; cursor: pointer; }
.nv .legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 14px; line-height: 24px; color: var(--ink-2); }
.nv .legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.nv .legend .w { cursor: default; font-size: 15px; line-height: 26px; padding: 0 6px; text-underline-offset: 6px; }
.nv .legend .w:hover { box-shadow: none; }

/* word detail popover */
.nv .pop[hidden] { display: none; }
.nv .pop { animation: nv-rise var(--duration-base) var(--ease-enter) both; position: absolute; z-index: 30; width: min(340px, 100% - 2 * var(--space-4)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.nv .pop::before { content: ""; position: absolute; top: -7px; inset-inline-start: var(--arrow, 36px); width: 12px; height: 12px; background: var(--surface);
  border-inline-start: 1px solid var(--line); border-block-start: 1px solid var(--line); transform: rotate(45deg); }
.nv .pop dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); font-size: 14px; line-height: 24px; }
.nv .pop dt { color: var(--ink-2); }
.nv .pop dd { font-weight: 600; }
.nv .pop .big { font-size: 22px; line-height: 34px; }
.nv .pop .off { font-size: 13px; line-height: 20px; color: var(--ink-2); background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.nv .pop .x { position: absolute; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; border-radius: var(--radius-md); border: 0;
  background: transparent; cursor: pointer; color: var(--ink-2); }
.nv .pop .x:hover { background: var(--surface-sunken); color: var(--ink); }

/* ---------- Result side ---------- */
.nv .verdict { border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); border: 1px solid var(--line); }
.nv .verdict.v-watch { background: linear-gradient(180deg, var(--band-watch-soft), var(--surface) 70%); }
.nv .verdict.v-refer { background: linear-gradient(180deg, var(--band-refer-soft), var(--surface) 70%); }
.nv .verdict.v-low { background: linear-gradient(180deg, var(--band-low-soft), var(--surface) 70%); }
.nv .verdict .why { display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; line-height: 26px; }
.nv .verdict .why li { display: flex; gap: var(--space-2); }
.nv .verdict .why li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); margin-block-start: 10px; }
.nv .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nv .metrics div { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 2px; }
.nv .metrics div:nth-child(n+4) { border-block-start: 1px solid var(--line); }
.nv .metrics div:not(:nth-child(3n+1)) { border-inline-start: 1px solid var(--line); }
.nv .metrics .v { font-size: 32px; line-height: 40px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nv .metrics .v small { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.nv .metrics .k { font-size: 13px; line-height: 20px; color: var(--ink-2); font-weight: 500; }
.nv .metrics .lead { background: var(--teal-soft); border-start-start-radius: var(--radius-lg); }
.nv .metrics .lead .v { color: var(--teal); }

.nv .norm .scale { position: relative; display: flex; height: 40px; margin-block-start: 44px; border-radius: var(--radius-sm); }
.nv .norm .seg { flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; white-space: nowrap;
  border-inline-start: 2px solid var(--surface); }
.nv .norm .seg:first-child { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.nv .norm .seg:last-of-type { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.nv .norm .lv-very_weak { background: var(--band-refer-soft); color: var(--band-refer); }
.nv .norm .lv-weak { background: var(--band-watch-soft); color: var(--band-watch); }
.nv .norm .lv-target, .nv .norm .lv-advanced, .nv .norm .lv-superior { background: var(--band-low-soft); color: var(--band-low); }
.nv .norm .lv-advanced { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--band-low) 12%, transparent) 6px 8px); }
.nv .norm .lv-superior { background-image: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--band-low) 18%, transparent) 3px 5px); }
.nv .norm .pin { position: absolute; top: -40px; transform: translateX(50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nv .norm .pin b { font-size: 13px; line-height: 18px; background: var(--ink); color: var(--surface); border-radius: var(--radius-sm); padding: 2px 8px; white-space: nowrap; }
.nv .norm .pin i { width: 2px; height: 50px; background: var(--ink); border-radius: 2px; }
.nv .norm .ticks { position: relative; height: 20px; margin-block-start: 6px; font-size: 12px; color: var(--ink-2); }
.nv .norm .ticks span { position: absolute; transform: translateX(50%); }
.nv .errs { display: flex; flex-direction: column; }
.nv .errs li { display: grid; grid-template-columns: 1fr 120px 28px; align-items: center; gap: var(--space-3); min-height: 44px; border-block-end: 1px solid var(--line); font-size: 15px; }
.nv .errs li:last-child { border-block-end: 0; }
.nv .errs .meter { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.nv .errs .meter i { display: block; height: 100%; border-radius: inherit; background: var(--ink-2); }
.nv .errs .c { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.nv .errs .na { grid-column: 2 / 4; font-size: 13px; color: var(--ink-muted); text-align: end; }

/* ---------- The cursor (fine pointer + hover only; off for reduced motion) ---------- */
.nv .pointer { display: none; }
@media (hover: hover) and (pointer: fine) {
  /* Anchored at the inline-start corner of the screen; the script moves it with transform only. */
  .nv .pointer { display: block; position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 99; pointer-events: none; width: 0; height: 0;
    transition: transform 70ms linear; will-change: transform; }
  .nv .pointer i { --s: var(--cursor-dot); position: absolute; inset-block-start: 0; inset-inline-start: 0; width: var(--s); height: var(--s);
    margin-block-start: calc(var(--s) / -2); margin-inline-start: calc(var(--s) / -2); border-radius: 50%;
    background: var(--amber); box-shadow: 0 0 0 2px var(--paper);
    transition: width var(--duration-base) var(--ease-standard), height var(--duration-base) var(--ease-standard),
      margin var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard),
      box-shadow var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), scale var(--duration-instant) var(--ease-standard); }
  .nv .pointer.hot i { --s: var(--cursor-ring); background: color-mix(in srgb, var(--teal) 10%, transparent);
    box-shadow: 0 0 0 1.5px var(--teal), 0 0 24px -4px color-mix(in srgb, var(--amber) 60%, transparent); }
  .nv .pointer.dark i { box-shadow: 0 0 0 2px var(--teal); }
  .nv .pointer.dark.hot i { background: color-mix(in srgb, var(--on-dusk) 10%, transparent); box-shadow: 0 0 0 1.5px var(--on-dusk), 0 0 28px -2px color-mix(in srgb, var(--amber) 70%, transparent); }
  .nv .pointer.press i { scale: .8; }
  .nv .pointer.off i { opacity: 0; }
}

/* ================= Round 2 components ================= */

/* Page frame and headings */
.nv .page { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-6) var(--space-8); }
.nv .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.nv .page-head .acts { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.nv .crumb { display: flex; gap: var(--space-2); font-size: 14px; line-height: 22px; color: var(--ink-2); }
.nv .crumb a { color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-control); }
.nv .dusk .crumb, .nv .dusk .crumb a { color: var(--on-dusk-2); text-decoration-color: var(--dusk-line); }
.nv .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); font-size: 15px; color: var(--ink-2); }
.nv .meta b { color: var(--ink); font-weight: 600; }
.nv .dusk .meta, .nv .dusk .meta b { color: var(--on-dusk-2); }
.nv .dusk .meta b { color: var(--on-dusk); }
.nv .center { align-items: center; text-align: center; }
.nv .narrow { width: min(760px, 100% - 2 * var(--space-5)); margin-inline: auto; }

/* A compact identity band: class and child headers (S-02, S-04, S-13) */
.nv .band-head { padding-block: var(--space-6) 80px; }
.nv .band-head .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end; }
.nv .band-head h1 { font-size: 44px; line-height: 60px; font-weight: 700; margin-block-start: var(--space-1); }
.nv .band-head .acts { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.nv .band-head + .wrap, .nv .band-head + main { margin-block-start: var(--space-4); }

/* Buttons: danger and disabled */
.nv .btn-danger { color: var(--on-danger); background: var(--danger); }
.nv .btn-danger:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
.nv .btn-danger-quiet { color: var(--danger); background: transparent; padding-inline: var(--space-3); }
.nv .btn-danger-quiet:hover { background: var(--band-refer-soft); }
.nv .btn[disabled], .nv .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.nv .spin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: nv-spin 800ms linear infinite; }

/* Messages in forms and banners */
.nv .err { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--band-refer-soft); color: var(--ink); font-size: 14px; line-height: 24px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.nv .err > .g { color: var(--danger); font-weight: 700; font-size: 15px; }
.nv .info { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--amber-soft); color: var(--ink); font-size: 14px; line-height: 24px; }
.nv .info > .g { color: var(--amber-ink); font-weight: 700; }
.nv .toast { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); font-size: 15px; }
.nv .toast > .g { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); font-weight: 700; }

/* Grade picker: a segmented control */
.nv .seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 12px; }
.nv .seg button { min-width: 56px; min-height: var(--size-touch); border: 0; border-radius: 9px; background: transparent; color: var(--ink-2);
  font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.nv .seg button:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.nv .seg button[aria-checked="true"] { background: var(--surface); color: var(--teal); box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--teal); }

/* Consent choice: radio cards; the words say what happens to the recording */
.nv .choices { display: flex; flex-direction: column; gap: var(--space-2); }
.nv .choice { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr); gap: var(--space-3); align-items: start; width: 100%; text-align: start;
  padding: var(--space-3) var(--space-4); border: 1.5px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.nv .choice:hover { border-color: var(--teal); }
.nv .choice .dot { width: 22px; height: 22px; margin-block-start: 3px; border-radius: 50%; border: 2px solid var(--line-control); display: grid; place-items: center; }
.nv .choice[aria-checked="true"] { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.nv .choice[aria-checked="true"] .dot { border-color: var(--teal); }
.nv .choice[aria-checked="true"] .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.nv .choice .g { margin-block-start: 1px; }
.nv .choice b { display: block; font-weight: 600; font-size: 16px; line-height: 26px; color: var(--ink); }
.nv .choice span.d { display: block; font-size: 14px; line-height: 22px; color: var(--ink-2); }

/* Dialogs */
.nv .scrim { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-6); background: var(--scrim);
  backdrop-filter: blur(2px); animation: nv-fade var(--duration-base) var(--ease-enter) both; }
.nv .dialog { position: relative; width: min(520px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-overlay);
  animation: nv-rise var(--duration-base) var(--ease-enter) both 60ms; }
.nv .dialog::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--space-6); height: 3px;
  border-end-start-radius: 3px; border-end-end-radius: 3px; background: var(--gradient-voice); }
.nv .dialog.wide { width: min(720px, 100%); }
.nv .dialog header { display: flex; align-items: center; gap: var(--space-3); }
.nv .dialog header .ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
/* the actions stay in reach: when a tall form scrolls (a tablet in portrait), Save and Cancel stick to the dialog's lower edge */
.nv .dialog .foot { position: sticky; inset-block-end: calc(-1 * var(--space-6)); z-index: 1; display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); padding: var(--space-4) var(--space-6) var(--space-6);
  background: var(--surface); border-block-start: 1px solid var(--line); border-end-start-radius: 20px; border-end-end-radius: 20px; }
.nv .dialog .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.nv .ico-danger { background: var(--band-refer-soft); color: var(--danger); }
.nv .ico-warn { background: var(--amber-soft); color: var(--amber-ink); }
.nv .ico-calm { background: var(--teal-soft); color: var(--teal); }
.nv .well { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 14px; }
.nv .removes { display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; }
.nv .removes li { display: flex; gap: var(--space-3); align-items: center; }
.nv .removes li::before { content: "—"; color: var(--danger); font-weight: 700; }

/* State panels: empty, error, offline, cancelled, blocked */
.nv .state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-6);
  width: min(600px, 100%); margin-inline: auto; }
.nv .state .ico { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 700; margin-block-end: var(--space-2); }
.nv .state h2 { font-size: 22px; line-height: 34px; font-weight: 700; }
.nv .state p { max-width: 46ch; color: var(--ink-2); }
.nv .state .acts { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-block-start: var(--space-3); }
.nv .state-empty .ico { background: var(--teal-soft); color: var(--teal); }
.nv .state-empty .ico svg .mark-bowl { stroke-dasharray: .06 .07; }
.nv .state-error .ico { background: var(--band-refer-soft); color: var(--danger); }
.nv .state-offline .ico { background: var(--surface-sunken); color: var(--ink-2); border: 2px dashed var(--line-control); }
.nv .state-cancelled .ico { background: var(--amber-soft); color: var(--amber-ink); }
.nv .state-blocked .ico { background: var(--band-refer-soft); color: var(--band-refer); }
.nv .state-active .ico { background: var(--amber-soft); color: var(--amber-ink); }
.nv .state-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* Skeletons: a slow shimmer from the reading start; still in reduced motion and in the still zone */
@keyframes nv-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.nv .sk { display: block; height: 14px; width: 100%; border-radius: 7px;
  background: linear-gradient(90deg, var(--surface-sunken) 30%, var(--line) 50%, var(--surface-sunken) 70%); background-size: 200% 100%;
  animation: nv-shimmer 1.6s linear infinite; }
.nv .dusk .sk { background: linear-gradient(90deg, var(--dusk-panel) 30%, var(--dusk-line) 50%, var(--dusk-panel) 70%); background-size: 200% 100%; }
.nv .sk.h20 { height: 20px; } .nv .sk.h32 { height: 32px; border-radius: 9px; } .nv .sk.h44 { height: 44px; border-radius: 10px; }
.nv .sk.h120 { height: 120px; border-radius: 12px; } .nv .sk.pill { height: 28px; width: 128px; border-radius: 999px; }
.nv .sk.w30 { width: 30%; } .nv .sk.w50 { width: 50%; } .nv .sk.w70 { width: 70%; } .nv .sk.w90 { width: 90%; }

/* S-02 class cards */
.nv .classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.nv .class-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.nv .class-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }
.nv .class-card .name { font-size: 40px; line-height: 52px; font-weight: 700; }
.nv .class-card .grade { color: var(--ink-2); font-size: 15px; }
.nv .class-card hr { width: 100%; border: 0; border-block-start: 1px solid var(--line); margin: var(--space-1) 0; }
.nv .class-card .count { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.nv .class-card .count b { color: var(--ink); font-weight: 600; }
.nv .meter-line { height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.nv .meter-line i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.nv .class-card .go { position: absolute; inset-block-start: var(--space-5); inset-inline-end: var(--space-5); color: var(--teal); font-size: 20px;
  transition: transform var(--duration-base) var(--ease-standard); }
.nv .class-card:hover .go { transform: translateX(-4px); }

/* Group headings on S-04 with open and closed folds */
.nv .grp th .gh { display: flex; align-items: center; gap: var(--space-3); }
.nv .fold { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding-inline: var(--space-3);
  border-radius: var(--radius-md); border: 1.5px solid var(--line-control); background: var(--surface); color: var(--teal); font-size: 14px; font-weight: 600; cursor: pointer; }
.nv .fold:hover { border-color: var(--teal); background: var(--teal-soft); }
.nv .fold .chev { display: inline-block; transition: transform var(--duration-base) var(--ease-standard); }
.nv .fold[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nv tr.folded-note td { height: 52px; color: var(--ink-2); font-size: 14px; }
.nv tr[hidden] { display: none; }
.nv tbody[data-open="false"] tr[data-extra] { display: none; }
.nv .fold .t-open { display: none; }
.nv .fold[aria-expanded="true"] .t-open { display: inline; }
.nv .fold[aria-expanded="true"] .t-closed { display: none; }
.nv .needs { font-size: 13px; line-height: 20px; color: var(--ink-2); }
.nv .needs a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.nv .list .cnt { color: var(--ink-2); font-weight: 500; }
.nv .list .grp th { background: var(--surface-sunken); color: var(--ink); font-size: 14px; padding-block: var(--space-2); }
.nv .list .col-n { width: 96px; }
.nv .list .col-act { width: 150px; text-align: end; }

/* S-07 pick a child */
.nv .picks { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.nv .pick { display: grid; grid-template-columns: minmax(0, 1fr) 150px 190px 24px; align-items: center; gap: var(--space-4); min-height: 68px;
  padding: var(--space-2) var(--space-5); border: 0; border-block-end: 1px solid var(--line); background: transparent; text-align: start; color: var(--ink); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard); }
.nv .pick:last-child { border-block-end: 0; }
.nv .pick:hover { background: color-mix(in srgb, var(--teal-soft) 60%, var(--surface)); }
.nv .pick .chev { color: var(--teal); font-size: 18px; }
.nv .pick.blocked { cursor: default; color: var(--ink-2); background: var(--surface-sunken); }
.nv .pick .kid { display: flex; gap: var(--space-3); align-items: center; }
.nv .pick .kid b { font-weight: 600; }
.nv .select { appearance: none; width: 100%; min-height: 52px; padding: 0 var(--space-4); font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-control); border-radius: var(--radius-md); }

/* S-08 passage cards */
.nv .chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.nv .chip .avatar { width: 28px; height: 28px; font-size: 13px; }
.nv .passages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.nv .pcard { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); text-align: start; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.nv .pcard:hover { border-color: color-mix(in srgb, var(--teal) 50%, var(--line)); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.nv .pcard[aria-checked="true"] { border-color: var(--teal); box-shadow: var(--glow-key); }
.nv .pcard .title { font-size: 22px; line-height: 40px; font-weight: 600; }
.nv .pcard .excerpt { font-size: 17px; line-height: 34px; color: var(--ink-2); min-height: 68px; }
.nv .pcard .facts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nv .ptag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken);
  color: var(--ink-2); font-size: 13px; line-height: 22px; font-weight: 600; }
.nv .ptag.teal { background: var(--teal-soft); color: var(--teal); }
.nv .pcard .sel { position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4); }
.nv .pcard[aria-checked="false"] .sel { display: none; }

/* Microphone level: columns of dots, the voice made visible */
.nv .mic { display: flex; align-items: center; justify-content: center; gap: 6px; height: 96px; }
.nv .mic i { width: 6px; border-radius: 3px; background: var(--line); }
.nv .mic i.on { background: var(--teal); }
.nv .mic-sm { height: 28px; gap: 3px; }
.nv .mic-sm i { width: 4px; }
.nv .mic-hero { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); }
.nv .ok { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 14px; border-radius: var(--radius-pill); background: var(--teal-soft);
  color: var(--teal); font-weight: 600; font-size: 14px; }

/* S-09b browser picture */
.nv .tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--line); }
.nv .tabs button { min-height: var(--size-touch); padding-inline: var(--space-4); border: 0; background: transparent; color: var(--ink-2); font-family: var(--font-latin);
  font-weight: 600; cursor: pointer; border-block-end: 3px solid transparent; margin-block-end: -1px; }
.nv .tabs button[aria-selected="true"] { color: var(--teal); border-block-end-color: var(--teal); }
.nv .howto { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-5); align-items: start; }
.nv .howto ol { display: flex; flex-direction: column; gap: var(--space-3); counter-reset: s; }
.nv .howto ol li { display: flex; gap: var(--space-3); counter-increment: s; }
.nv .howto ol li::before { content: counter(s, arabic-indic); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal); font-weight: 700; font-size: 14px; }
.nv .browser { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-sunken); direction: ltr; font-family: var(--font-latin); font-size: 12px; }
.nv .browser .bar { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.nv .browser .url { flex: 1; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-sunken); color: var(--ink-2); }
.nv .browser .lock { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--teal); box-shadow: 0 0 0 2px var(--amber); }
.nv .browser .menu { margin: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.nv .browser .menu .row { display: flex; justify-content: space-between; align-items: center; }
.nv .browser .menu .allow { color: var(--teal); font-weight: 700; }

/* S-10 the reading stage: still (D-15) */
.nv .stage { min-height: 100%; display: flex; flex-direction: column; background: var(--paper); }
.nv .stage .sheet-read { flex: 1; display: grid; place-items: center; padding: var(--space-8) var(--space-7) var(--space-7); }
.nv .reading { width: min(var(--size-reading), 100%); font-size: 32px; line-height: 72px; font-weight: 500; color: var(--ink); text-align: justify; text-align-last: start; }
.nv .reading.lg { font-size: 40px; line-height: 88px; }
.nv .recbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) max(var(--space-6), (100% - var(--size-content)) / 2);
  background: var(--surface); border-block-start: 1px solid var(--line); }
.nv .recbar .end { margin-inline-start: auto; }
.nv .recstate { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ink); }
.nv .rec-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.nv .btn-rec .rec-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-teal) 30%, transparent); }
.nv .hears { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-2); }
.nv .hears .g { color: var(--teal); font-weight: 700; }

/* S-11 processing */
.nv .listen { display: flex; align-items: center; justify-content: center; gap: 7px; height: 120px; }
.nv .listen i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 calc(var(--h) * -1) 0 var(--teal), 0 var(--h) 0 var(--teal);
  animation: nv-listen 1.4s var(--ease-standard) infinite; animation-delay: calc(var(--i) * 70ms); }
.nv .listen i.a { background: var(--amber); box-shadow: 0 calc(var(--h) * -1) 0 var(--amber), 0 var(--h) 0 var(--amber); }
@keyframes nv-listen { 50% { opacity: .35; transform: scaleY(.7); } }
.nv .proc { display: flex; flex-direction: column; gap: var(--space-4); text-align: start; }
.nv .proc li { display: flex; align-items: center; gap: var(--space-3); font-size: 16px; color: var(--ink-muted); }
.nv .proc .d { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-control); font-size: 13px; }
.nv .proc .done { color: var(--ink-2); }
.nv .proc .done .d { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.nv .proc .cur { color: var(--ink); font-weight: 600; }
.nv .proc .cur .d { border-color: var(--teal); color: var(--teal); }

/* S-12a audio control */
.nv .play .busy { display: none; align-items: center; gap: var(--space-2); }
.nv .play .idle { display: inline-flex; align-items: center; gap: var(--space-2); }
.nv .play[aria-busy="true"] .busy { display: inline-flex; }
.nv .play[aria-busy="true"] .idle { display: none; }
.nv .pop .play { align-self: flex-start; }
.nv .pop .wave { display: inline-flex; gap: 2px; align-items: center; height: 16px; }
.nv .pop .wave i { width: 2px; border-radius: 1px; background: currentColor; opacity: .7; }

/* S-13 child header, history and trend */
.nv .consent-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 12px 4px 14px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; background: var(--dusk-panel); border: 1px solid var(--dusk-line); color: var(--on-dusk); }
.nv .hist td, .nv .hist th { height: 60px; }
.nv .trend svg { display: block; width: 100%; height: auto; overflow: visible; }
.nv .trend .axis { stroke: var(--line); stroke-width: 1; }
.nv .trend .band-refer-area { fill: var(--band-refer-soft); }
.nv .trend .band-watch-area { fill: var(--band-watch-soft); }
.nv .trend .line { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nv .trend .pt { fill: var(--surface); stroke: var(--teal); stroke-width: 2.5; }
.nv .trend .pt.last { fill: var(--teal); }
.nv .trend text { font-family: var(--font-sans); font-size: 12px; fill: var(--ink-2); }
.nv .trend text.v { font-size: 13px; font-weight: 700; fill: var(--ink); }
.nv .danger-zone { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border: 1px dashed color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: var(--radius-lg); }
.nv .danger-zone p { font-size: 14px; color: var(--ink-2); }

/* S-14 the parent report: always light, flat, printable (still zone) */
.nv .sheet { width: min(var(--size-sheet), 100%); min-height: 1060px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-8) 72px var(--space-7); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.nv .sheet .top { display: flex; justify-content: space-between; align-items: center; padding-block-end: var(--space-4); border-block-end: 2px solid var(--ink); }
.nv .sheet h1 { font-size: 30px; line-height: 44px; font-weight: 700; }
.nv .sheet .who { display: block; font-size: 16px; color: var(--ink-2); }
.nv .sheet section { display: flex; flex-direction: column; gap: var(--space-1); }
.nv .sheet section h2 { font-size: 18px; line-height: 28px; font-weight: 700; }
.nv .sheet section p { font-size: 16px; line-height: 30px; }
.nv .sheet .box { padding: var(--space-4) var(--space-5); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); font-size: 15px; line-height: 28px; }
.nv .sheet .sigs { margin-block-start: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); padding-block-start: var(--space-7); }
.nv .sheet .sigs span { padding-block-start: var(--space-2); border-block-start: 1px solid var(--ink); font-size: 14px; color: var(--ink-2); }
.nv .toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.nv.still .dialog::before { display: none; }
.nv.still .nav a[aria-current="page"]::after, .nv.still .sec-title::after { background: var(--teal); }
.nv.still .appbar { backdrop-filter: none; background: var(--paper); }

/* ---------- Smaller screens: 768 px up (NFR-PO2) ---------- */
@media (max-width: 1100px) {
  .nv .appbar { gap: var(--space-4); }
  .nv .who .name { display: none; }
  .nv .classes, .nv .passages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv .band-head .row { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 900px) {
  .nv .appbar .end .btn-quiet { display: none; }
  .nv .list th, .nv .list td { padding-inline: 10px; }
  .nv .list .c-date, .nv .list .c-acc { display: none; }
  .nv .list .consent .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nv .dist dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv .pick { grid-template-columns: minmax(0, 1fr) auto 24px; }
  .nv .pick .c-consent { display: none; }
  .nv .howto { grid-template-columns: minmax(0, 1fr); }
  .nv .dialog .grid2 { grid-template-columns: minmax(0, 1fr); }
  .nv .sheet { padding-inline: var(--space-6); }
}

/* ---------- Specimen: states frozen for review (the motion board only) ---------- */
.nv .btn-primary.is-hover { box-shadow: var(--glow-key); }
.nv .btn-primary.is-press { background: var(--teal-hover); box-shadow: var(--shadow-card); transform: translateY(1px) scale(.98); }
.nv .btn-secondary.is-hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.nv .btn-secondary.is-press { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); transform: translateY(1px) scale(.98); }
.nv .btn-paper.is-hover { box-shadow: var(--glow-dusk); }
.nv .btn-paper.is-press { box-shadow: var(--shadow-card); transform: translateY(1px) scale(.98); }
.nv .btn-ghost.is-hover { border-color: var(--on-dusk-2); background: color-mix(in srgb, var(--on-dusk) 14%, transparent); }
.nv .is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.nv [data-dusk] .is-focus { outline-color: var(--on-dusk); }
.nv .input.is-focus { border-color: var(--teal); }
.nv .w.is-hover { background: var(--surface-sunken); box-shadow: 0 0 0 1.5px var(--line-control); }
.nv .w-sub.is-hover { box-shadow: 0 0 0 1.5px currentColor; background: var(--state-substituted-soft); }
.nv .curdemo { position: relative; display: inline-block; width: var(--cursor-ring); height: var(--cursor-ring); }
.nv .curdemo i { position: absolute; inset: 0; margin: auto; border-radius: 50%; width: var(--cursor-dot); height: var(--cursor-dot); background: var(--amber); box-shadow: 0 0 0 2px var(--paper); }
.nv .curdemo.hot i { width: var(--cursor-ring); height: var(--cursor-ring); background: color-mix(in srgb, var(--teal) 10%, transparent);
  box-shadow: 0 0 0 1.5px var(--teal), 0 0 24px -4px color-mix(in srgb, var(--amber) 60%, transparent); }
.nv .curdemo.press i { width: calc(var(--cursor-ring) * .8); height: calc(var(--cursor-ring) * .8); background: color-mix(in srgb, var(--teal) 10%, transparent); box-shadow: 0 0 0 1.5px var(--teal); }
.nv .curdemo.dark i { background: color-mix(in srgb, var(--on-dusk) 10%, transparent); width: var(--cursor-ring); height: var(--cursor-ring);
  box-shadow: 0 0 0 1.5px var(--on-dusk), 0 0 28px -2px color-mix(in srgb, var(--amber) 70%, transparent); }

/* ---------- The still zone: S-10 and S-14 (D-15). The builder adds .still to their root. ---------- */
.nv.still { background: var(--paper); }
.nv.still .btn-primary { background: var(--teal); }
.nv.still .btn:hover { box-shadow: none; }
.nv.still *, .nv.still *::before, .nv.still *::after { animation: none; }
.nv.still .rec-dot { animation: nv-breathe 1.6s ease-in-out infinite; }
@keyframes nv-breathe { 50% { opacity: .45; } }

/* ---------- Motion: one orchestrated moment per screen ---------- */
@keyframes nv-rise { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: none; } }
@keyframes nv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nv-drop { 0% { opacity: 0; transform: translateY(-18px); } 100% { opacity: 1; transform: none; } }
@keyframes nv-ink { from { text-decoration-color: transparent; background-color: transparent; } }
@keyframes nv-tag { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.nv .rv { animation: nv-rise var(--duration-slow) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * var(--stagger) + 120ms); }
.nv .grow { animation: nv-grow 700ms var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 90ms + 300ms); }
.nv .draw path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: nv-draw 900ms var(--ease-enter) both 200ms; }
.nv .draw circle { animation: nv-drop var(--duration-slow) var(--ease-enter) both 950ms; transform-box: fill-box; }
.nv .inking .w-sub, .nv .inking .w-om, .nv .inking .w-hes, .nv .inking .w-sc { animation: nv-ink var(--duration-slow) var(--ease-enter) both;
  animation-delay: calc(var(--i, 0) * 35ms + 350ms); }
.nv .inking .w .tag, .nv .inking .ins { animation: nv-tag var(--duration-base) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 35ms + 500ms); }
/* below the fold: reveal as it enters the view, where the browser supports scroll-driven animations */
@supports (animation-timeline: view()) {
  .nv:not(.static) .rv-scroll { animation: nv-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}

/* ---------- Reduced motion: everything above is switched off (D-15) ---------- */
@media (prefers-reduced-motion: reduce) {
  .nv *, .nv *::before, .nv *::after { animation: none !important; transition: none !important; }
  .nv .pointer { display: none !important; }
  .nv .list .row-act { opacity: 1 !important; transform: none !important; }
  .nv .btn:active { transform: none; }
}
.nv.reduce *, .nv.reduce *::before, .nv.reduce *::after { animation: none !important; transition: none !important; }
.nv.reduce .pointer { display: none !important; }
.nv.reduce .list .row-act { opacity: 1 !important; transform: none !important; }

/* ================= Screen layouts (shared by a screen's base design and its states) ================= */
/* S-01 */
.nv .s01 { display: grid; grid-template-columns: 540px minmax(0, 1fr); min-height: 832px; }
.nv .s01 .form-col { display: flex; flex-direction: column; padding: var(--space-6) var(--space-8); }
.nv .s01 .form-col .brand { font-size: 24px; }
.nv .s01 .form { margin-block: auto; display: flex; flex-direction: column; gap: var(--space-5); }
.nv .s01 .form header { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-2); }
.nv .s01 .pw { position: relative; }
.nv .s01 .pw .show { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; min-height: 44px; }
.nv .s01 .pw .input { padding-inline-end: 88px; }
.nv .s01 .foot { color: var(--ink-muted); }
.nv .s01 .dusk { margin: var(--space-4); margin-inline-start: 0; border-radius: 28px; padding: var(--space-8) var(--space-8) var(--space-7); display: flex; flex-direction: column; overflow: hidden; }
.nv .s01 .big-mark { width: 148px; height: 148px; margin-inline-start: -12px; }
.nv .s01 .big-mark .mark-bowl { stroke: var(--on-dusk); }
.nv .s01 .dusk h2 { margin-block-start: var(--space-6); max-width: 15ch; font-size: 44px; line-height: 64px; font-weight: 700; }
.nv .s01 .dusk .lede { margin-block-start: var(--space-3); max-width: 42ch; font-size: 18px; line-height: 32px; }
.nv .s01 .sample { margin-block-start: auto; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); max-width: 560px; }
.nv .s01 .sample .marked { color: var(--on-dusk); font-size: 26px; line-height: 60px; }
.nv .s01 .sample .w { cursor: default; }
.nv .s01 .sample .legend { color: var(--on-dusk-2); font-size: 13px; }
@media (max-width: 1100px) {
  .nv .s01 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nv .s01 .form-col { padding-inline: var(--space-6); }
  .nv .s01 .dusk { padding: var(--space-7) var(--space-6); }
  .nv .s01 .dusk h2 { font-size: 32px; line-height: 48px; }
  .nv .s01 .sample .marked { font-size: 20px; line-height: 48px; }
}

/* S-02 and S-04 bands */
.nv .facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font-size: 15px; line-height: 24px; }
.nv .s04 .band-head { padding-block: var(--space-6) 76px; }
.nv .s04 .band-head .row { grid-template-columns: minmax(0, 1fr) 560px; align-items: stretch; }
.nv .s04 .title { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); }
.nv .s04 .dist { padding: var(--space-4) var(--space-5); gap: var(--space-3); }
.nv .s04 .dist .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.nv .s04 .dist .top b { font-weight: 600; color: var(--on-dusk); }
.nv .s04 .dist dd { font-size: 30px; line-height: 38px; }
.nv .s04 .dist dd .g { font-size: 15px; vertical-align: 4px; }
.nv .s04 .dist dt { font-size: 13px; }
.nv .s04 main { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-3) var(--space-8); }
.nv .s04 .tools { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.nv .s04 .card { overflow: hidden; }
.nv .s04 .band-head .edge { height: 44px; }
@media (max-width: 1100px) { .nv .s04 .band-head .row { grid-template-columns: minmax(0, 1fr); } }
.nv .s02 .band-head { padding-block: var(--space-6) var(--space-7); }
.nv .s02 main { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-6) var(--space-8); }

/* S-07 · S-08 · S-09 · S-11: session pages with the stepper */
.nv .session { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-5) var(--space-8); }
.nv .session .steps-row { display: flex; justify-content: flex-start; }
.nv .center-card { width: min(680px, 100%); margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5);
  padding: var(--space-7) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-card); }
.nv .center-card .acts { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* S-12 */
.nv .s12 main { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-5) var(--space-8); }
.nv .s12 .top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.nv .s12 .acts { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.nv .s12 .grid { display: grid; grid-template-columns: minmax(0, 1fr) 432px; gap: var(--space-5); align-items: start; }
.nv .s12 .col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.nv .s12 .pass { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.nv .s12 .pass .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.nv .s12 .pass .legend { padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.nv .s12 .card-hd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; }
.nv .s12 .errs { padding: var(--space-2) var(--space-5) var(--space-3); }
.nv .s12 .norm { padding: var(--space-2) var(--space-5) var(--space-4); }
.nv .s12 .verdict .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nv .s12 .calm { font-size: 15px; color: var(--ink-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
@media (max-width: 1100px) {
  /* Stacked: the result first (band, evidence, notice, numbers), then the passage at full width */
  .nv .s12 .grid { grid-template-columns: minmax(0, 1fr); }
  .nv .s12 .grid > aside { order: -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .nv .s12 .grid > aside .verdict { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .nv .s12 .grid > aside { grid-template-columns: minmax(0, 1fr); } }

/* S-13 */
.nv .s13 .band-head { padding-block: var(--space-6) var(--space-6); }
.nv .s13 main { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-6) var(--space-8); }
.nv .s13 .grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-5); align-items: start; }
.nv .s13 .card-hd { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.nv .s13 .trend { padding: 0 var(--space-5) var(--space-5); }
@media (max-width: 1100px) { .nv .s13 .grid { grid-template-columns: minmax(0, 1fr); } }

/* S-14 */
.nv .s14 main { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-5) var(--space-8); }

/* S-14 print: only the report, on one A4 page, always light — from a light or a dark screen. The app bar, the toolbar and the cursor never print. */
@page { size: A4; margin: 0; }
@media print {
  :root:has(.s14), :root:has(.s14) body { color-scheme: light; background: none; }
  .nv:has(.s14) { min-height: 0; height: auto; background: none; }
  .nv .s14 .appbar, .nv .s14 .toolbar, .nv .pointer { display: none; }
  .nv .s14 main.wrap { width: auto; margin: 0; padding: 0; gap: 0; }
  .nv .s14 .sheet { width: 210mm; height: 296mm; min-height: 0; margin: 0; padding: 18mm 20mm 16mm; border: 0; box-shadow: none;
    break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}