/* ============================================================
   TRANSPORTATION OPERATIONS ACADEMY: PLATFORM STYLES
   Look: busplanner.com (DESIGN.md section 2 and 3). Light only: no dark mode,
   no theme switch. Montserrat 400/500/600/700, self-hosted from static/fonts.
   Navy #00274C type on white, gold #FCBA30 pill buttons, flat cards with a
   #D0D4E4 hairline and no shadows, nothing under 16px anywhere.

   Rules for area builders
   - New CSS uses the --toa-* and --bp-* tokens. The legacy names at the end of
     the token block still work so older area CSS keeps rendering.
   - Never hardcode brand hex in area CSS; never add box-shadow, gradients,
     font-weight above 700, uppercase micro labels or font sizes under 16px.
   - Append area CSS ONLY inside your marked block at the end of this file.
   - Buttons never wrap (white-space: nowrap) and never go below 16px.
   - Status colour always comes with an icon or a word (see .pill, .alert).

   Sections
     1. Tokens and fonts        6. Header and footer
     2. Base                    7. Console layout
     3. Typography              8. Portal and public layout, tab bar
     4. Layout primitives       9. Kiosk and projector base
     5. Components              10. Responsive, motion, print
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS AND FONTS
   ------------------------------------------------------------ */
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/montserrat-400.woff") format("woff"), url("../fonts/montserrat-400.ttf") format("truetype");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/montserrat-500.woff") format("woff"), url("../fonts/montserrat-500.ttf") format("truetype");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/montserrat-600.woff") format("woff"), url("../fonts/montserrat-600.ttf") format("truetype");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/montserrat-700.woff") format("woff"), url("../fonts/montserrat-700.ttf") format("truetype");
}

:root{
  color-scheme: light;

  /* ---- Brand (busplanner.com measured values) ---- */
  --bp-navy:#00274C;          /* all text, headings, icons */
  --bp-gold:#FCBA30;          /* primary button fill, focus accent, gold rules */
  --bp-gold-hover:#E9A81F;    /* primary button hover (navy on it = 7.2:1) */
  --bp-white:#FFFFFF;

  /* ---- Surfaces ---- */
  --bp-surface:#FFFFFF;       /* page ground (portal, public, kiosk, projector) */
  --bp-surface-gray:#F2F2F2;  /* console content ground, table head, stat tiles */
  --bp-surface-cream:#FFEFCC; /* selected answer, "next step" card, highlight row */
  --bp-surface-blue:#ECF6FF;  /* info alert fill */

  /* ---- Text ---- */
  --bp-text:#00274C;          /* 15.1:1 on white */
  --bp-text-slate:#333843;    /* secondary text only, 11.8:1 on white, 10.3:1 on cream */
  --bp-text-muted:#484D67;    /* console table meta only, 8.3:1 on white, 7.4:1 on #F2F2F2 */
  --bp-text-invert:#FFFFFF;   /* text on navy, deep green or deep red fills */

  /* ---- Lines ---- */
  --bp-line:#D0D4E4;          /* card and table hairlines (decorative) */
  --bp-line-soft:#E6E9F0;     /* dividers inside a card */
  --toa-line-control:#8A93A6; /* 2px border of inputs, answer rows, secondary buttons: 3.1:1 on white */

  /* ---- Status: text on soft fill, all >= 7.8:1 ---- */
  --toa-ok-text:#14532D;   --toa-ok-soft:#E3F6E7;   --toa-ok-line:#1F7A3D;   --toa-ok-strong:#146C2E;
  --toa-warn-text:#5C3D00; --toa-warn-soft:#FFF3D6; --toa-warn-line:#FCBA30;
  --toa-bad-text:#8A1C14;  --toa-bad-soft:#FBE7E5;  --toa-bad-line:#B3261E;  --toa-bad-strong:#9B1C14;
  --toa-info-text:#00274C; --toa-info-soft:#ECF6FF; --toa-info-line:#D0D4E4;
  --toa-neutral-text:#333843; --toa-neutral-soft:#F2F2F2; --toa-neutral-line:#D0D4E4;

  /* ---- Type ---- */
  --bp-font:"Montserrat", Arial, Helvetica, sans-serif;
  --bp-fw-normal:400; --bp-fw-medium:500; --bp-fw-semi:600; --bp-fw-bold:700;  /* 700 is the ceiling */
  --toa-lh-body:1.5; --toa-lh-head:1.25; --toa-lh-btn:1.2;

  /* Attendee portal and public pages (rem so browser text zoom works) */
  --toa-p-body:1.25rem;       /* 20px everywhere */
  --toa-p-secondary:1.125rem; /* 18px: dates, instructors, help text, labels */
  --toa-p-min:1rem;           /* 16px floor: tab labels, footer, fine print */
  --toa-p-h1:clamp(1.75rem, 1.43rem + 1.36vw, 2.5rem);   /* 28 -> 40 */
  --toa-p-h2:clamp(1.5rem, 1.34rem + 0.68vw, 1.875rem);  /* 24 -> 30 */
  --toa-p-h3:1.375rem;        /* 22px card titles */
  --toa-p-question:1.5rem;    /* 24px test question */
  --toa-p-btn:1.25rem;        /* 20px button label */

  /* Staff console */
  --toa-c-body:1.125rem;      /* 18px */
  --toa-c-secondary:1rem;     /* 16px: table cells, labels, pills, hints */
  --toa-c-h1:clamp(1.75rem, 1.5rem + 1vw, 2.25rem);      /* 28 -> 36 */
  --toa-c-h2:1.5rem;          /* 24px */
  --toa-c-h3:1.25rem;         /* 20px */
  --toa-c-btn:1.125rem;       /* 18px */
  --toa-c-stat:2.25rem;       /* 36px stat number */

  /* ---- Shape ---- */
  --bp-r-pill:999px;          /* every button, pill, tab */
  --bp-r-card:32px;           /* portal and public cards */
  --toa-r-dense:20px;         /* console cards, tables, alerts */
  --toa-r-control:12px;       /* inputs, answer rows, rating buttons */

  /* ---- Size ---- */
  --toa-btn-h:56px;           /* portal buttons, console primary buttons */
  --toa-btn-h-min:48px;       /* smallest button anywhere, including table rows */
  --toa-tap:48px;             /* smallest tap target anywhere, including text links */
  --toa-input-h:56px;
  --toa-header-h:72px;        /* portal and console header, phone */
  --toa-header-h-lg:88px;     /* from 768px */
  --toa-tabbar-h:72px;
  --toa-logo-h:52px;          /* header logo, phone */
  --toa-logo-h-lg:64px;       /* header logo, from 768px */
  --toa-gutter:16px;          /* phone side gutter; 24px from 768px, 32px from 1280px */
  --toa-max-portal:720px;     /* portal reading column */
  --toa-max-console:1320px;

  /* ---- Spacing ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
  --sp-8:48px; --sp-9:64px;

  /* ---- Focus ---- */
  --toa-focus:3px solid #00274C;   /* outline, offset 3px, on every focusable element */

  /* ---- Legacy aliases (keep area CSS working) ---- */
  --navy:var(--bp-navy); --gold:var(--bp-gold); --gold-deep:var(--bp-gold-hover);
  --accent:var(--bp-gold); --accent-hover:var(--bp-gold-hover); --on-accent:var(--bp-navy);
  --steel:var(--bp-navy);            /* steel is retired: it now paints navy */
  --cream:var(--bp-surface-cream);
  --green:var(--toa-ok-line); --green-deep:var(--toa-ok-strong); --danger-raw:var(--toa-bad-line);
  --white:#FFFFFF; --grey-50:#F2F2F2; --grey-100:#F2F2F2; --grey-300:var(--bp-line);
  --grey-500:var(--bp-text-muted); --grey-700:var(--bp-text-muted);
  --bg:var(--bp-surface); --surface:var(--bp-surface); --surface-2:var(--bp-surface-gray);
  --surface-cream:var(--bp-surface-cream); --band-navy:var(--bp-navy);
  --ink:var(--bp-text); --body:var(--bp-text); --meta:var(--bp-text-slate); --muted:var(--bp-text-slate);
  --ink-invert:#FFFFFF; --body-invert:#FFFFFF;
  --success:var(--toa-ok-text); --success-soft:var(--toa-ok-soft); --success-line:var(--toa-ok-line);
  --warning:var(--toa-warn-text); --warning-soft:var(--toa-warn-soft); --warning-line:var(--toa-warn-line);
  --danger:var(--toa-bad-text); --danger-soft:var(--toa-bad-soft); --danger-line:var(--toa-bad-line);
  --info:var(--toa-info-text); --info-soft:var(--toa-info-soft); --info-line:var(--toa-info-line);
  --neutral:var(--toa-neutral-text); --neutral-soft:var(--toa-neutral-soft);
  --line:var(--bp-line); --line-soft:var(--bp-line-soft); --line-strong:var(--toa-line-control);
  --tint-04:#F2F2F2; --tint-08:#F2F2F2;
  --shadow-card:none; --shadow-lift:none;
  --ring:var(--bp-navy);
  --r-card:var(--bp-r-card); --r-md:var(--toa-r-dense); --r-btn:var(--bp-r-pill); --r-pill:var(--bp-r-pill);
  --target:var(--toa-tap); --gutter:var(--toa-gutter);
  --font:var(--bp-font);

  /* ---- Extra legacy names still used by area blocks ---- */
  --navy-2:#04315C;
  --mono:ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (min-width:768px){ :root{ --toa-gutter:24px; } }
@media (min-width:1280px){ :root{ --toa-gutter:32px; } }

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; font-size:100%; hyphens:manual; -webkit-hyphens:manual; }
html,body{ margin:0; padding:0; overflow-x:clip; }
body{
  font-family:var(--bp-font); font-size:1rem; font-weight:400; line-height:var(--toa-lh-body);
  color:var(--bp-text); background:var(--bp-surface);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}
body.portal{ font-size:var(--toa-p-body); }
body.console{ font-size:var(--toa-c-body); background:var(--bp-surface-gray); }
img,svg,video{ display:block; max-width:100%; }
.icon{ display:inline-block; flex:none; vertical-align:middle; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5{ color:var(--bp-text); font-weight:700; line-height:var(--toa-lh-head); letter-spacing:normal; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
strong,b{ color:inherit; font-weight:700; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--bp-gold); color:var(--bp-navy); }

:focus-visible{ outline:var(--toa-focus); outline-offset:3px; }
main:focus{ outline:none; }

.skip-link{
  position:absolute; top:-80px; left:16px; z-index:300; padding:12px 20px; min-height:var(--toa-tap);
  background:var(--bp-navy); color:#fff; font-weight:700; border-radius:0 0 12px 12px; text-decoration:none;
}
.skip-link:focus{ top:0; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ------------------------------------------------------------
   3. TYPOGRAPHY (portal sizes by default; console sizes under body.console)
   ------------------------------------------------------------ */
h1,.t-h1{ font-size:var(--toa-p-h1); }
h2,.t-h2{ font-size:var(--toa-p-h2); }
h3,.t-h3{ font-size:var(--toa-p-h3); }
h4,.t-h4{ font-size:var(--toa-p-body); }
body.console h1, body.console .t-h1{ font-size:var(--toa-c-h1); }
body.console h2, body.console .t-h2{ font-size:var(--toa-c-h2); }
body.console h3, body.console .t-h3{ font-size:var(--toa-c-h3); }
body.console h4, body.console .t-h4{ font-size:var(--toa-c-body); }
.lede{ font-size:inherit; line-height:var(--toa-lh-body); color:var(--bp-text); max-width:62ch; }
/* Eyebrows are retired (DESIGN 4 and 5). Until a screen drops its eyebrow it renders as a
   plain 16px line: no uppercase, no letter-spacing, no gold dash. */
.eyebrow{ display:block; margin-bottom:var(--sp-2); font-size:1rem; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--bp-text-slate); }
.muted{ color:var(--bp-text-slate); }
.small{ font-size:1rem; }
body.portal .small{ font-size:var(--toa-p-secondary); }
.secondary-text{ font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
body.console .secondary-text{ font-size:var(--toa-c-secondary); }
.mono{ font-family:var(--mono); font-size:1rem; letter-spacing:0; }
.nowrap{ white-space:nowrap; }
/* Text link: navy 600, underlined at rest; padding gives a 48px tall tap area without moving text. */
.link{
  color:var(--bp-navy); font-weight:600; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; padding-block:calc((var(--toa-tap) - 1.22em) / 2);
}
@media (hover:hover) and (pointer:fine){ .link:hover{ text-decoration-thickness:2px; } }
/* A text link on its own line (e.g. "Use a Different Email"): a full 48px row. */
.text-link{
  display:inline-flex; align-items:center; min-height:var(--toa-tap);
  color:var(--bp-navy); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
@media (hover:hover) and (pointer:fine){ .text-link:hover{ text-decoration-thickness:2px; } }
.link-plain{ color:inherit; text-decoration:none; }
@media (hover:hover) and (pointer:fine){ .link-plain:hover{ text-decoration:underline; } }

/* ------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ------------------------------------------------------------ */
.stack > * + *{ margin-top:var(--sp-4); }
.row{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); align-items:center; }
.card-grid{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.info-grid{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); margin-top:var(--sp-6); }
.stat-row{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:var(--sp-4); }
.inline-form{ display:inline-flex; margin:0; }
.stack-form > * + *{ margin-top:var(--sp-4); }

/* ------------------------------------------------------------
   5. COMPONENTS
   ------------------------------------------------------------ */

/* 5.1 Cards: flat, 1px hairline, no shadow. Portal 32px radius, console 20px. */
.card{
  background:var(--bp-surface); border:1px solid var(--bp-line); border-radius:var(--bp-r-card);
  box-shadow:none; padding:var(--sp-6);
}
body.console .card{ border-radius:var(--toa-r-dense); padding:var(--sp-6); }
.card + .card{ margin-top:var(--sp-5); }
/* Cards laid out by a grid or flex parent never take the stacking margin. */
:is(.card-grid,.info-grid,.stat-row,.pp-merge-grid,.pp-two-forms,.exam-runs,.exam-review,.fix-list,
    .portal-days,.portal-tasks,.certs-person-grid,.ci-devices-grid,.ci-device-list,.mail-forms) > .card + .card{ margin-top:0; }
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
/* "Next step" card: cream, no border, holds the screen's one primary button. */
.card-next{ background:var(--bp-surface-cream); border-color:var(--bp-surface-cream); }
/* Done card: test finished, certificate ready. */
.card-done{ background:var(--toa-ok-soft); border:2px solid var(--toa-ok-line); color:var(--toa-ok-text); }
.card-done > .icon:first-child{ color:var(--toa-ok-line); }
.card-done h2,.card-done h3{ color:var(--toa-ok-text); }
.narrow-card{ max-width:560px; margin:var(--sp-7) auto; }
.narrow-card > .icon{ color:var(--bp-navy); margin-bottom:var(--sp-3); }
.narrow-card h1{ margin-bottom:var(--sp-3); }
.narrow-card .lede{ margin-bottom:var(--sp-2); }
.narrow-card .alert{ margin:var(--sp-4) 0; }
.hero-card{ padding:var(--sp-7) 0 var(--sp-4); max-width:720px; }
.hero-card h1{ margin-bottom:var(--sp-4); }
.hero-card .muted{ margin-top:var(--sp-3); }
.info-card .icon{ color:var(--bp-navy); margin-bottom:var(--sp-3); }
.info-card h2{ margin-bottom:var(--sp-2); }
.staff-link{ margin-top:var(--sp-7); }

/* 5.2 Page header */
.page-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.page-header-text{ min-width:0; }
.page-title{ font-size:var(--toa-p-h1); }
body.console .page-title{ font-size:var(--toa-c-h1); }
.page-subtitle{ margin-top:6px; color:var(--bp-text-slate); max-width:62ch; }
.page-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* 5.3 Buttons: fully round pills, labels never wrap, never below 16px.
   Primary gold (one per screen), Secondary white with a 2px border, Danger white with red. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--toa-btn-h-min); min-width:120px; padding:0 24px;
  font-family:inherit; font-size:var(--toa-c-btn); font-weight:600; line-height:var(--toa-lh-btn); letter-spacing:normal;
  white-space:nowrap; text-decoration:none; text-align:center; cursor:pointer;
  border-radius:var(--bp-r-pill); border:2px solid transparent; box-shadow:none;
  background:var(--bp-white); color:var(--bp-navy);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn .icon{ width:22px; height:22px; }
body.portal .btn{ min-height:var(--toa-btn-h); padding:0 28px; font-size:var(--toa-p-btn); }
body.console .btn-primary{ min-height:var(--toa-btn-h); }
.btn[disabled],.btn[aria-disabled="true"]{ cursor:not-allowed; }
.btn-primary{ background:var(--bp-gold); border-color:var(--bp-gold); color:var(--bp-navy); }
@media (hover:hover) and (pointer:fine){ .btn-primary:hover{ background:var(--bp-gold-hover); border-color:var(--bp-gold-hover); } }
.btn-secondary{ background:var(--bp-white); color:var(--bp-navy); border-color:var(--toa-line-control); }
@media (hover:hover) and (pointer:fine){ .btn-secondary:hover{ background:var(--bp-surface-gray); border-color:var(--bp-navy); } }
.btn-danger{ background:var(--bp-white); color:var(--toa-bad-text); border-color:var(--toa-bad-line); }
@media (hover:hover) and (pointer:fine){ .btn-danger:hover{ background:var(--toa-bad-soft); } }
/* Legacy: .btn-ghost and .btn-sm are retired (DESIGN 3.3). Old markup still renders:
   ghost looks like Secondary, sm is the normal size. Do not use them in new markup. */
.btn-ghost{ background:var(--bp-white); color:var(--bp-navy); border-color:var(--toa-line-control); }
@media (hover:hover) and (pointer:fine){ .btn-ghost:hover{ background:var(--bp-surface-gray); border-color:var(--bp-navy); } }
.btn-lg{ min-height:var(--toa-btn-h); padding:0 28px; }
.btn-block{ width:100%; }

/* 5.4 Forms */
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-weight:600; color:var(--bp-text); font-size:var(--toa-p-secondary); }
body.console .field-label{ font-size:var(--toa-c-secondary); }
.field-optional{ font-weight:400; color:var(--bp-text-slate); }
.field-hint{ font-size:var(--toa-p-secondary); color:var(--bp-text-slate); display:block; }
body.console .field-hint{ font-size:var(--toa-c-secondary); }
/* Field error: sits directly above its input (the ui.field macros put it there). */
.field-error{
  display:flex; align-items:flex-start; gap:8px; margin:0; padding:10px 14px;
  font-size:var(--toa-p-secondary); font-weight:600; line-height:1.4; color:var(--toa-bad-text);
  background:var(--toa-bad-soft); border-left:2px solid var(--toa-bad-line); border-radius:0 var(--toa-r-control) var(--toa-r-control) 0;
}
body.console .field-error{ font-size:var(--toa-c-secondary); }
.field-error .icon{ flex:none; margin-top:2px; }
.input{
  width:100%; min-height:var(--toa-input-h); padding:0 16px;
  font-size:var(--toa-p-body); color:var(--bp-text); background:var(--bp-white);
  border:2px solid var(--toa-line-control); border-radius:var(--toa-r-control);
}
body.console .input{ font-size:var(--toa-c-body); }
@media (hover:hover) and (pointer:fine){ .input:hover{ border-color:var(--bp-navy); } }
.input:focus-visible{ outline:var(--toa-focus); outline-offset:3px; border-color:var(--bp-navy); }
.has-error .input,.input[aria-invalid="true"]{ border-color:var(--toa-bad-line); }
.textarea{ min-height:120px; padding:12px 16px; resize:vertical; line-height:var(--toa-lh-body); }
.select{ appearance:auto; }
.field-check{ flex-direction:row; align-items:center; gap:12px; min-height:var(--toa-tap); }
.field-check label{ font-weight:600; color:var(--bp-text); display:flex; flex-direction:column; justify-content:center; min-height:var(--toa-tap); cursor:pointer; }
.check{ width:28px; height:28px; margin:0; accent-color:var(--bp-navy); flex:none; cursor:pointer; }
.code-input,.input[autocomplete="one-time-code"]{
  font-size:1.75rem; font-weight:600; letter-spacing:.2em; text-align:center; font-variant-numeric:tabular-nums;
}
@media (min-width:768px){ body.portal .code-input, body.portal .input[autocomplete="one-time-code"]{ max-width:320px; } }

/* 5.5 Tables (console): scroll inside their own box, never the page */
.table-box{
  position:relative; /* keeps .sr-only cells inside the scroll box */
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--bp-surface); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); box-shadow:none;
}
.table-box:focus-visible{ outline-offset:2px; }
.table{ width:100%; border-collapse:collapse; font-size:var(--toa-c-secondary); color:var(--bp-text); }
.table th,.table td{ padding:12px 16px; height:56px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--bp-line-soft); }
.table th{ font-size:var(--toa-c-secondary); font-weight:600; letter-spacing:normal; text-transform:none; color:var(--bp-text); background:var(--bp-surface-gray); white-space:nowrap; }
.table tbody th{ background:transparent; }
.table td.meta,.table .meta{ color:var(--bp-text-muted); }
.table tbody tr:last-child td,.table tbody tr:last-child th{ border-bottom:0; }
@media (hover:hover) and (pointer:fine){ .table tbody tr:hover td{ background:#FAFAFA; } }
.table td.num,.table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.table a:not(.btn){ color:var(--bp-navy); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.table .btn{ min-height:var(--toa-btn-h-min); }
/* Opt-in: the first column stays put while the table scrolls sideways. */
.table-sticky tr > :first-child{ position:sticky; left:0; z-index:1; background:var(--bp-surface); }
.table-sticky thead tr > :first-child{ background:var(--bp-surface-gray); }
/* Opt-in: under 768px each row becomes a stacked list item (no sideways tables on phones).
   Give each td a data-label to show its column name. */
@media (max-width:767px){
  .table-stack thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td, .table-stack tbody th{ display:block; width:100%; }
  .table-stack tr{ padding:12px 16px; border-bottom:1px solid var(--bp-line-soft); }
  .table-stack td, .table-stack tbody th{ height:auto; padding:2px 0; border:0; }
  .table-stack td[data-label]::before{ content:attr(data-label) ": "; font-weight:600; }
}
.table-empty{ padding:var(--sp-6); text-align:center; }

/* 5.6 Status pills: icon + word, never colour alone. A pill is never a button. */
.pill{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 14px;
  font-size:1rem; font-weight:600; line-height:1.2; white-space:nowrap;
  border-radius:var(--bp-r-pill); border:1px solid transparent;
}
body.portal .pill{ min-height:36px; }
.pill .icon{ width:16px; height:16px; }
.pill-success{ color:var(--toa-ok-text); background:var(--toa-ok-soft); border-color:var(--toa-ok-line); }
.pill-warning{ color:var(--toa-warn-text); background:var(--toa-warn-soft); border-color:var(--toa-warn-line); }
.pill-danger{ color:var(--toa-bad-text); background:var(--toa-bad-soft); border-color:var(--toa-bad-line); }
.pill-info{ color:var(--toa-info-text); background:var(--toa-info-soft); border-color:var(--toa-info-line); }
.pill-neutral{ color:var(--toa-neutral-text); background:var(--toa-neutral-soft); border-color:var(--toa-neutral-line); }

/* 5.7 Alerts and banners: full border in the tone's line colour, 24px icon */
.flash-stack{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.alert{
  display:flex; gap:12px; align-items:flex-start; padding:16px 20px;
  font-size:var(--toa-p-secondary); line-height:var(--toa-lh-body);
  border-radius:var(--toa-r-dense); border:1px solid transparent;
}
body.console .alert{ font-size:var(--toa-c-secondary); }
.alert > .icon{ width:24px; height:24px; margin-top:1px; }
.alert-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.alert-title{ font-size:inherit; font-weight:700; color:inherit; }
.alert-success{ background:var(--toa-ok-soft); border-color:var(--toa-ok-line); color:var(--toa-ok-text); }
.alert-warning{ background:var(--toa-warn-soft); border-color:var(--toa-warn-line); color:var(--toa-warn-text); }
.alert-danger{ background:var(--toa-bad-soft); border-color:var(--toa-bad-line); color:var(--toa-bad-text); }
.alert-info{ background:var(--toa-info-soft); border-color:var(--toa-info-line); color:var(--toa-info-text); }
.alert-neutral{ background:var(--toa-neutral-soft); border-color:var(--toa-neutral-line); color:var(--toa-neutral-text); }
.alert a:not(.btn){ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* 5.8 Empty states: one sentence and, when there is one, one button. No icon chip. */
.empty-state{
  text-align:center; padding:var(--sp-8) var(--sp-5);
  background:var(--bp-surface); border:1px solid var(--bp-line); border-radius:var(--bp-r-card);
}
body.console .empty-state{ border-radius:var(--toa-r-dense); }
.empty-icon{ display:flex; justify-content:center; color:var(--bp-navy); margin-bottom:var(--sp-3); }
.empty-title{ font-size:var(--toa-c-h3); }
.empty-text{ margin:6px auto 0; max-width:48ch; color:var(--bp-text-slate); }
.empty-action{ margin-top:var(--sp-5); }

/* 5.9 Stat tiles (console): sentence-case label, big number */
.stat{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; background:var(--bp-surface-gray); border-radius:var(--toa-r-dense); min-width:0; }
body.console .card .stat{ background:var(--bp-surface-gray); }
.stat-label{ font-size:1rem; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--bp-text-slate); }
.stat-value{ font-size:var(--toa-c-stat); font-weight:700; color:var(--bp-text); letter-spacing:normal; font-variant-numeric:tabular-nums; line-height:1.15; }
.stat-note{ font-size:1rem; color:var(--bp-text-slate); }
.today-flag{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-3); min-height:32px; font-weight:600; color:var(--toa-warn-text); background:var(--toa-warn-soft); border:1px solid var(--toa-warn-line); padding:0 14px; border-radius:var(--bp-r-pill); font-size:1rem; }

/* 5.10 Progress: 12px bar, navy fill, always paired with words */
.bar{ height:12px; border-radius:var(--bp-r-pill); background:var(--bp-surface-gray); border:1px solid var(--bp-line); overflow:hidden; }
.bar-fill{ display:block; height:100%; width:var(--p,0%); border-radius:inherit; background:var(--bp-navy); }
/* Progress dots (legacy; the test page replaces them with a list) */
.progress-dots{ display:flex; flex-wrap:wrap; gap:8px; }
.progress-dots .dot{ width:16px; height:16px; border-radius:50%; background:var(--bp-surface-gray); border:2px solid var(--toa-line-control); }
.progress-dots .dot-done{ background:var(--bp-navy); border-color:var(--bp-navy); }
.progress-dots .dot-current{ background:var(--bp-gold); border-color:var(--bp-navy); }
.progress-dots .dot-flag{ background:var(--toa-bad-soft); border-color:var(--toa-bad-line); }
/* Score: words and numbers only (the ring and its gradient are gone, DESIGN 3.7). */
.score-ring{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; flex:none; }
.score-ring .score-val{ font-size:1.75rem; font-weight:700; line-height:1.2; color:var(--bp-text); }
.score-ring .score-lbl{ font-size:1rem; font-weight:600; color:var(--bp-text-slate); }

/* 5.11 Agenda list (shared by console and portal): time on its own line, then title,
   then instructor. The current class gets a cream fill with no indentation change. */
.day-heading{ font-size:var(--toa-p-secondary); margin:var(--sp-5) 0 var(--sp-2); color:var(--bp-text); }
.agenda-list{ display:flex; flex-direction:column; border-top:1px solid var(--bp-line-soft); }
.agenda-item{ display:flex; flex-direction:column; gap:2px; padding:12px 0; border-bottom:1px solid var(--bp-line-soft); }
.agenda-time{ font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-text); font-variant-numeric:tabular-nums; }
.agenda-title{ font-size:var(--toa-p-body); font-weight:700; color:var(--bp-text); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.agenda-who{ font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.agenda-item.is-now{ background:var(--bp-surface-cream); margin-inline:-12px; padding-inline:12px; border-radius:12px; }
body.console .agenda-time{ font-size:var(--toa-c-secondary); }
body.console .agenda-title{ font-size:var(--toa-c-body); }
body.console .agenda-who{ font-size:var(--toa-c-secondary); }

/* 5.12 Disclosure (details) used by menus and "More actions" */
.disclosure > summary{ list-style:none; cursor:pointer; }
.disclosure > summary::-webkit-details-marker{ display:none; }

/* ------------------------------------------------------------
   6. HEADER AND FOOTER (DESIGN 3.1, 3.2)
   ------------------------------------------------------------ */
.site-header{
  background:var(--bp-white); border-bottom:1px solid var(--bp-line); box-shadow:none;
}
.site-header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  min-height:var(--toa-header-h); padding:0 var(--toa-gutter); margin:0 auto;
}
.brand{
  display:inline-flex; align-items:center; gap:12px; min-height:var(--toa-tap); min-width:0;
  color:var(--bp-navy); text-decoration:none;
}
.brand-logo{ height:var(--toa-logo-h); width:auto; flex:none; }
.brand-name{ font-size:1.0625rem; font-weight:700; line-height:1.2; color:var(--bp-navy); }
@media (min-width:480px){
  .brand-br{ display:none; }
  .brand-name{ font-size:1.25rem; white-space:nowrap; }
}
@media (min-width:768px){
  .site-header-inner{ min-height:var(--toa-header-h-lg); }
  .brand-logo{ height:var(--toa-logo-h-lg); }
}

/* Presented by BusPlanner */
.site-footer{
  background:var(--bp-white); border-top:1px solid var(--bp-line);
  padding:var(--sp-6) var(--toa-gutter); font-size:1rem; color:var(--bp-text-slate);
}
.site-footer p{ margin:0; }
.presented-by{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.presented-by-label{ font-size:1rem; font-weight:400; color:var(--bp-text-slate); }
.presented-by-logo{ height:24px; width:auto; }
@media (min-width:768px){ .presented-by-logo{ height:28px; } }
.footer-lines{ display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-2); }
.footer-lines .text-link, .footer-lines a{ color:var(--bp-navy); }
.footer-note{ margin-top:var(--sp-3); color:var(--bp-text-slate); }

/* ------------------------------------------------------------
   7. CONSOLE LAYOUT (white header with the nav row from 1024px, Menu panel below)
   ------------------------------------------------------------ */
.console-header{ position:sticky; top:0; z-index:50; }
.console-header .site-header-inner{ max-width:none; }
.console-nav{ display:none; }
.console-nav > ul{ display:flex; align-items:center; gap:4px; }
.console-nav a,.nav-more > summary{
  display:inline-flex; align-items:center; gap:6px; min-height:var(--toa-tap); padding:0 12px;
  font-size:var(--toa-c-body); font-weight:600; color:var(--bp-navy); text-decoration:none; white-space:nowrap;
  border-bottom:3px solid transparent; border-top:3px solid transparent;
}
@media (hover:hover) and (pointer:fine){ .console-nav a:hover,.nav-more > summary:hover{ border-bottom-color:var(--bp-line); } }
.console-nav a[aria-current="page"],.nav-more.is-current > summary{ border-bottom-color:var(--bp-gold); }
.nav-more{ position:relative; }
.nav-more > summary .icon{ transition:transform .15s ease; }
.nav-more[open] > summary .icon{ transform:rotate(180deg); }
.nav-more-panel,.staff-menu-panel{
  position:absolute; top:calc(100% + 8px); z-index:60; min-width:260px;
  background:var(--bp-white); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); padding:8px;
}
.nav-more-panel{ left:0; }
.nav-more-panel a{ display:flex; width:100%; min-height:var(--toa-tap); padding:0 12px; border:0; border-radius:12px; }
@media (hover:hover) and (pointer:fine){ .nav-more-panel a:hover{ background:var(--bp-surface-gray); } }
.nav-more-panel a[aria-current="page"]{ background:var(--bp-surface-cream); }
.console-header-end{ display:flex; align-items:center; gap:var(--sp-3); flex:none; }
.staff-menu{ position:relative; display:none; }
.staff-menu > summary{
  display:inline-flex; align-items:center; gap:8px; min-height:var(--toa-tap); padding:0 16px; max-width:260px;
  border:2px solid var(--toa-line-control); border-radius:var(--bp-r-pill);
  font-size:var(--toa-c-secondary); font-weight:600; color:var(--bp-navy); background:var(--bp-white);
}
@media (hover:hover) and (pointer:fine){ .staff-menu > summary:hover{ border-color:var(--bp-navy); } }
.staff-menu > summary span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staff-menu-panel{ right:0; width:300px; display:flex; flex-direction:column; gap:var(--sp-3); padding:16px; }
.staff-name{ font-weight:700; color:var(--bp-text); }
.staff-email{ display:block; max-width:100%; font-size:1rem; color:var(--bp-text-slate); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staff-chip{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; min-width:0; }
.menu-toggle{ min-width:0; padding:0 12px; gap:6px; font-size:1rem; }
@media (max-width:419px){
  .console-header .site-header-inner{ gap:10px; }
  .console-header .brand{ gap:8px; }
  .console-header .brand-name{ font-size:1rem; }
  .menu-toggle{ padding:0 10px; gap:4px; }
  .menu-toggle .icon{ width:20px; height:20px; }
}
/* Menu panel (under 1024px): full-width white panel, 56px rows */
.console-menu-panel{ border-top:1px solid var(--bp-line); background:var(--bp-white); padding:8px var(--toa-gutter) 16px; max-height:calc(100vh - var(--toa-header-h)); overflow-y:auto; }
html.js .console-menu-panel{ display:none; }
html.js .console-menu-panel.is-open{ display:block; }
.console-menu-panel ul{ display:flex; flex-direction:column; }
.console-menu-panel a{
  display:flex; align-items:center; min-height:56px; padding:0 12px; border-radius:12px;
  font-size:var(--toa-c-body); font-weight:600; color:var(--bp-navy); text-decoration:none;
}
@media (hover:hover) and (pointer:fine){ .console-menu-panel a:hover{ background:var(--bp-surface-gray); } }
.console-menu-panel a[aria-current="page"]{ background:var(--bp-surface-cream); }
.menu-label{ margin:var(--sp-4) 12px var(--sp-1); font-size:1rem; font-weight:600; color:var(--bp-text-slate); }
.menu-staff{ margin-top:var(--sp-4); padding:var(--sp-4) 12px 0; border-top:1px solid var(--bp-line-soft); display:flex; flex-direction:column; gap:var(--sp-3); align-items:flex-start; }
@media (min-width:1024px){
  .console-nav{ display:block; flex:1 1 auto; min-width:0; }
  .staff-menu{ display:block; }
  .menu-toggle{ display:none; }
  .console-menu-panel, html.js .console-menu-panel.is-open{ display:none; }
  .console-header .site-header-inner{ gap:var(--sp-5); }
}
/* The console header holds the logo, five links, More and the staff menu: the name next to
   the logo goes to two lines from 1280px and one line from 1440px; 1024 to 1279 shows the
   logo alone (the logo artwork carries the name). */
@media (min-width:1024px) and (max-width:1279px){
  .console-header .brand-name{ display:none; }
}
@media (min-width:1280px) and (max-width:1439px){
  .console-header .brand-br{ display:inline; }
  .console-header .brand-name{ font-size:1.0625rem; white-space:normal; }
}
.console-main{
  width:100%; max-width:var(--toa-max-console); margin:0 auto; min-width:0;
  padding:var(--sp-7) var(--toa-gutter) var(--sp-8);
}
.console-footer{ background:transparent; }
.console-footer-inner{ max-width:var(--toa-max-console); margin:0 auto; }
.console-footer.site-footer{ padding-left:0; padding-right:0; }
.console-footer .console-footer-inner{ padding:0 var(--toa-gutter); }
.dev-flag{ display:flex; align-items:flex-start; gap:8px; margin-top:var(--sp-3); font-size:1rem; font-weight:400; color:var(--bp-text-slate); }
.dev-flag .icon{ flex:none; margin-top:3px; }

/* ------------------------------------------------------------
   8. PORTAL AND PUBLIC LAYOUT (20px body; bottom tab bar under 900px)
   ------------------------------------------------------------ */
.portal-header{ position:static; }
.portal-header .site-header-inner{ max-width:1080px; }
.portal-topnav{ display:none; gap:var(--sp-2); }
.portal-topnav a{
  display:inline-flex; align-items:center; min-height:var(--toa-tap); padding:0 12px;
  font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-navy); text-decoration:none; white-space:nowrap;
  border-bottom:3px solid transparent; border-top:3px solid transparent;
}
@media (hover:hover) and (pointer:fine){ .portal-topnav a:hover{ border-bottom-color:var(--bp-line); } }
.portal-topnav a[aria-current="page"]{ border-bottom-color:var(--bp-gold); }
/* The footer sits at the bottom of short pages. */
body.portal{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.portal-main{ flex:1 0 auto; padding:var(--sp-6) 0 var(--sp-8); }
body.portal:not(.no-tabbar):not(.public) .portal-main{ padding-bottom:var(--sp-8); }
.portal-container{ max-width:calc(var(--toa-max-portal) + 2 * var(--toa-gutter)); margin:0 auto; padding:0 var(--toa-gutter); }
.portal-title{ margin-bottom:var(--sp-2); }
.signout-row{ margin-top:var(--sp-6); }
.portal-footer{ text-align:center; }
.portal-footer .presented-by{ justify-content:center; }
.portal-footer .footer-lines{ align-items:center; }
/* Portal phones: the fixed tab bar sits under the footer, so the page ends above it. */
body.portal.has-tabbar{ padding-bottom:calc(var(--toa-tabbar-h) + env(safe-area-inset-bottom)); }

/* Public pages: no header, the large logo sits at the top of the page. */
.public-logo{ display:block; margin:var(--sp-7) auto var(--sp-5); height:96px; width:auto; }
.public-logo-lg{ height:140px; }
@media (min-width:768px){
  .public-logo{ height:120px; }
  .public-logo-lg{ height:180px; }
}
body.public .portal-main{ padding-top:0; }

/* Tab bar (portal phones): three tabs, 28px icon over a 16px label, gold bar on the current one */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:repeat(3,1fr);
  min-height:calc(var(--toa-tabbar-h) + env(safe-area-inset-bottom));
  padding:0 0 env(safe-area-inset-bottom);
  background:var(--bp-white); border-top:1px solid var(--bp-line); box-shadow:none;
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:var(--toa-tabbar-h); padding:4px 2px; min-width:0;
  font-size:1rem; font-weight:600; line-height:1.2; color:var(--bp-navy); text-decoration:none; white-space:nowrap;
  border-top:3px solid transparent;
}
.tabbar a .icon{ width:28px; height:28px; }
.tabbar a[aria-current="page"]{ border-top-color:var(--bp-gold); background:var(--bp-white); }
.tabbar a:focus-visible{ outline-offset:-3px; }
@media (min-width:900px){
  .portal-topnav{ display:flex; }
  .tabbar{ display:none; }
  body.portal.has-tabbar{ padding-bottom:0; }
}

/* ------------------------------------------------------------
   9. KIOSK AND PROJECTOR BASE (white screen, huge navy type, no footer)
   ------------------------------------------------------------ */
body.kiosk{ background:var(--bp-white); color:var(--bp-text); font-size:1.5rem; }
.kiosk-shell{ min-height:100vh; display:flex; flex-direction:column; }
.kiosk-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
  min-height:88px; padding:12px clamp(16px,3vw,40px);
  background:var(--bp-white); border-bottom:1px solid var(--bp-line);
}
.kiosk-brand{ display:flex; align-items:center; gap:14px; font-weight:700; font-size:1.5rem; line-height:1.2; color:var(--bp-navy); }
.kiosk-brand .brand-logo{ height:64px; width:auto; }
.kiosk-main{ flex:1; display:flex; flex-direction:column; padding:clamp(16px,3vw,40px); }
.kiosk-center{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--sp-4); }
.kiosk-title{ color:var(--bp-navy); font-size:clamp(3.5rem,7vw,6rem); letter-spacing:normal; line-height:1.05; }
.kiosk-sub{ font-size:clamp(1.5rem,2.6vw,2rem); color:var(--bp-text-slate); max-width:32ch; }
body.kiosk .btn{ font-size:1.5rem; min-height:var(--toa-btn-h); }
body.kiosk .input{ font-size:1.5rem; }
@media (max-width:560px){ .kiosk-brand{ font-size:1.125rem; } .kiosk-brand .brand-logo{ height:52px; } }

/* ------------------------------------------------------------
   10. RESPONSIVE, MOTION, PRINT
   ------------------------------------------------------------ */
@media (max-width:767px){
  .card{ padding:var(--sp-6); }
  .narrow-card{ margin:var(--sp-5) auto; }
  .page-header{ align-items:flex-start; }
}
@media (min-width:768px){
  body.portal .card{ padding:var(--sp-7); }
}
/* Portal phones: primary and secondary buttons are full width; pairs stack, primary first.
   The test's Previous/Next pair stays side by side (.q-nav). */
@media (max-width:639px){
  body.portal .btn-primary, body.portal .btn-secondary, body.portal .btn-ghost{ width:100%; }
  body.portal .actions{ flex-direction:column; align-items:stretch; }
  body.portal .inline-form:has(> .btn-primary, > .btn-secondary, > .btn-ghost){ display:flex; width:100%; }
  body.portal .q-nav{ flex-direction:row; }
  body.portal .q-nav .btn{ width:auto; flex:1 1 0; min-width:0; }
  .actions .btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media print{
  .console-header,.console-menu-panel,.tabbar,.site-header,.site-footer,.skip-link{ display:none !important; }
  body,body.console{ background:#fff; color:#000; }
}

/* ============================================================
   AREA BLOCKS (first build). Kept working under the new tokens; the redesign
   blocks at the end of the file take over as screens are reworked.
   ============================================================ */

/* === people === */
/* Spacing helpers */
.pp-gap{ margin-top:var(--sp-3); }
.pp-note{ display:flex; align-items:center; gap:6px; }
.pp-break{ overflow-wrap:anywhere; word-break:break-word; }
.pp-stats{ margin:0 0 var(--sp-5); }
.pp-quick{ margin:0 0 var(--sp-5); }
.pp-section{ margin-top:var(--sp-6); }
.pp-section-title{ margin-bottom:var(--sp-3); }
.pp-subhead{ font-size:1rem; margin:var(--sp-5) 0 var(--sp-2); }
.pp-pills{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pp-plain-list{ display:flex; flex-direction:column; gap:var(--sp-2); padding-left:1.1em; list-style:disc; }
.pp-plain-list li::marker{ color:var(--gold-deep); }

/* Forms */
.pp-form h2{ margin-top:var(--sp-2); }
.pp-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.pp-grid-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); }
.pp-fieldset{ border:1px solid var(--line-soft); border-radius:var(--r-md); padding:var(--sp-4); margin:0; min-width:0; }
.pp-fieldset > * + *{ margin-top:var(--sp-3); }
.pp-fieldset legend{ font-weight:700; color:var(--ink); padding:0 6px; }
.pp-checks{ display:flex; flex-direction:column; gap:var(--sp-3); }
.pp-check-grid{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); }
.pp-fb-row{ display:flex; align-items:center; gap:var(--sp-3); }
.pp-fb-row .check{ margin:0; }
.pp-fb-row .input{ flex:1; min-width:0; }
.pp-file{ padding:9px 12px; }
.pp-num{ max-width:120px; }
.pp-inline-assign{ margin-top:var(--sp-5); display:flex; flex-direction:column; gap:6px; }
.pp-inline-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.pp-inline-row .input{ flex:1 1 220px; min-width:0; width:auto; }
.pp-two-forms{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); margin-top:var(--sp-5); }
.pp-btn-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }

/* Key-value list */
.pp-kv{ display:grid; gap:var(--sp-3) var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); margin:var(--sp-4) 0 0; }
.pp-kv div{ min-width:0; }
.pp-kv dt{ font-size:1rem; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--meta); }
.pp-kv dd{ margin:2px 0 0; color:var(--ink); overflow-wrap:anywhere; }

/* Details (collapsible forms) */
.pp-details{ margin-top:var(--sp-3); border-top:1px solid var(--line-soft); padding-top:var(--sp-2); }
.pp-details > summary{
  cursor:pointer; min-height:var(--target); display:flex; align-items:center; gap:8px;
  font-weight:700; color:var(--ink); list-style:none; border-radius:var(--r-md); padding:0 4px;
}
.pp-details > summary::-webkit-details-marker{ display:none; }
.pp-details > summary::before{ content:"+"; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--ink); font-weight:700; flex:none; }
.pp-details[open] > summary::before{ content:"\2212"; }
@media (hover:hover) and (pointer:fine){ .pp-details > summary:hover{ background:var(--tint-04); } }
.pp-details > form, .pp-details > .pp-danger-zone{ margin-top:var(--sp-3); }
details.card.pp-details{ padding-top:var(--sp-4); }
.pp-danger-zone{ padding-top:var(--sp-3); border-top:1px dashed var(--line); }

/* Schedule editor */
.pp-banner{ display:flex; flex-direction:column; gap:var(--sp-3); align-items:flex-start; margin-bottom:var(--sp-5); }
.pp-banner .alert{ width:100%; }
.pp-class-list{ display:flex; flex-direction:column; margin-top:var(--sp-3); border-top:1px solid var(--line-soft); }
.pp-class{ padding:var(--sp-3) 0; border-bottom:1px solid var(--line-soft); scroll-margin-top:80px; }
.pp-class-head{ display:flex; gap:var(--sp-3); align-items:flex-start; justify-content:space-between; }
.pp-class-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pp-class-time{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; font-size:1rem; }
.pp-class-title{ font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.pp-class-tools{ display:flex; gap:4px; flex:none; }
.pp-class-form{ padding:var(--sp-4); background:var(--surface-2); border-radius:var(--r-md); }
.pp-add{ margin-top:var(--sp-4); }

/* People list */
.pp-filters{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); align-items:end; margin-bottom:var(--sp-5); }
.pp-filter-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.pp-bulkbar{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.pp-bulk-controls{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; flex:1 1 320px; justify-content:flex-end; }
.pp-bulk-controls .select{ flex:1 1 200px; width:auto; min-width:0; max-width:360px; }
.pp-check-col{ width:52px; }
.pp-check-col .check{ margin:0; display:block; }
.pp-academies{ display:flex; flex-wrap:wrap; gap:4px; min-width:150px; }
.pp-people-table td{ white-space:nowrap; }
.pp-people-table td.pp-acad-cell{ white-space:normal; }

/* Person page */
.pp-person-head{ margin-bottom:var(--sp-5); }
.pp-person-head .page-title{ overflow-wrap:anywhere; }
.pp-enrollments{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-3); }
.pp-enrollment{ border:1px solid var(--line-soft); border-radius:var(--r-md); padding:var(--sp-4); background:var(--surface); scroll-margin-top:80px; }
.pp-enrollment > * + *{ margin-top:var(--sp-3); }
.pp-enr-head{ display:flex; justify-content:space-between; gap:var(--sp-3); align-items:flex-start; }
.pp-badge-line{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--ink); }
.pp-code{ overflow-wrap:anywhere; word-break:break-all; letter-spacing:.04em; }
.pp-email-list, .pp-session-list, .pp-match-list, .pp-dup-list{ display:flex; flex-direction:column; margin-top:var(--sp-3); border-top:1px solid var(--line-soft); }
.pp-email-list li, .pp-session-list li, .pp-match-list li, .pp-dup-list li{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); align-items:center; justify-content:space-between;
  padding:var(--sp-3) 0; border-bottom:1px solid var(--line-soft); min-width:0;
}
.pp-email-list li > span:first-child{ flex:1 1 180px; min-width:0; color:var(--ink); font-weight:600; }
.pp-session-list li > div, .pp-dup-list li > div:first-child{ display:flex; flex-direction:column; min-width:0; flex:1 1 220px; }
.pp-ua{ color:var(--ink); font-weight:600; overflow-wrap:anywhere; }
.pp-warn-card .alert{ margin-bottom:var(--sp-2); }

/* Login code */
.pp-login-code{
  font-size:clamp(40px,12vw,64px); font-weight:700; letter-spacing:.2em; color:var(--ink);
  background:var(--surface-2); border:2px dashed var(--line-strong); border-radius:var(--r-card);
  padding:var(--sp-4) var(--sp-3); margin:var(--sp-5) 0; text-align:center; overflow-wrap:anywhere;
}

/* Merge */
.pp-merge-grid{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); margin-bottom:var(--sp-5); }
.pp-merge-grid .card + .card{ margin-top:0; }
.pp-merge-name{ font-size:20px; font-weight:700; color:var(--ink); margin-top:var(--sp-3); overflow-wrap:anywhere; }
.pp-dup-group .pp-btn-row{ justify-content:flex-end; }

/* Roster preview */
.pp-preview-form > .card + .card{ margin-top:var(--sp-5); }
.pp-result{ min-width:220px; }
.pp-result .pill{ margin-right:4px; }
.pp-decision{ margin-top:6px; min-width:220px; }
.pp-row-problem td{ background:var(--danger-soft); }
.pp-row-possible td{ background:var(--warning-soft); }

/* Badges */
.pp-step{ border-left:4px solid var(--gold); }
.pp-actions-cell{ white-space:nowrap; }
.pp-actions-cell .inline-form{ vertical-align:middle; }
.pp-badge-table td{ white-space:nowrap; }
.pp-badge-table .pp-code{ font-size:1rem; word-break:normal; overflow-wrap:normal; }

@media (max-width:560px){
  .pp-class-head{ flex-direction:column; }
  .pp-class-tools{ align-self:flex-start; }
  .pp-bulk-controls{ justify-content:stretch; }
  .pp-bulk-controls .select{ max-width:none; }
  .pp-enrollment{ padding:var(--sp-3); }
  .pp-inline-row .btn{ flex:1 1 auto; }
}
/* === end people === */

/* === checkin === */
/* Console: board, roll call, devices */
.ci-tabs{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-5); }
.ci-tab{ display:inline-flex; align-items:center; min-height:var(--target); padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--ink); font-weight:700; font-size:16px; text-decoration:none; white-space:nowrap; background:var(--surface); }
@media (hover:hover) and (pointer:fine){ .ci-tab:hover{ background:var(--tint-04); } }
.ci-tab[aria-current="page"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.ci-counts{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.ci-count{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; min-height:var(--target); border-radius:var(--r-md); background:var(--surface-2); color:var(--ink); text-decoration:none; border:2px solid transparent; }
@media (hover:hover) and (pointer:fine){ .ci-count:hover{ border-color:var(--line-strong); } }
.ci-count.is-current{ border-color:var(--accent); background:var(--surface-cream); }
.ci-of{ font-size:16px; font-weight:600; color:var(--muted); }
.ci-live{ margin:var(--sp-3) 0 var(--sp-5); }
.ci-live .icon{ vertical-align:-2px; margin-right:4px; }
.ci-kiosks{ margin-bottom:var(--sp-5); }
.ci-kiosks summary{ cursor:pointer; min-height:var(--target); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.ci-kiosk-list{ list-style:none; padding:0; margin:var(--sp-4) 0 0; display:grid; gap:var(--sp-4); }
.ci-mode-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); }
.ci-mode-form .field-label{ flex-basis:100%; }
.ci-mode-form .select{ flex:1 1 200px; min-width:0; }
.ci-toolbar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.ci-toolbar h2{ flex:1 1 100%; }
.ci-search{ flex:1 1 260px; min-width:0; }
.ci-filter{ display:flex; flex-wrap:wrap; gap:var(--sp-2); border:0; padding:0; margin:0; }
.ci-radio{ display:inline-flex; align-items:center; gap:8px; min-height:var(--target); padding:0 12px; border-radius:var(--r-md); border:1px solid var(--line); cursor:pointer; font-weight:600; white-space:nowrap; }
.ci-radio input{ width:20px; height:20px; accent-color:var(--steel); }
.ci-kind{ border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.ci-actions{ text-align:right; white-space:nowrap; }
.ci-btn{ min-height:var(--target); padding:8px 16px; }
.table-box:has(.ci-table){ position:relative; } /* keeps .sr-only headers inside the scroll box */
.ci-table tr.ci-flash td{ background:var(--success-soft); transition:background .6s ease; }
.ci-none{ margin-top:var(--sp-4); }
.ci-form-card{ max-width:640px; }
.ci-gap{ margin-top:var(--sp-6); }
.ci-intro{ margin-bottom:var(--sp-5); }
.ci-progress{ font-size:20px; margin:0; }
.ci-ticks{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.ci-tick-form{ margin:0; }
.ci-tick{ width:100%; display:flex; align-items:center; gap:var(--sp-4); min-height:64px; padding:10px 16px; border-radius:var(--r-md); border:2px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
@media (hover:hover) and (pointer:fine){ .ci-tick:hover{ border-color:var(--line-strong); } }
.ci-tick:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.ci-tick[disabled]{ cursor:default; }
.ci-tick-box{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:2px solid var(--line-strong); color:transparent; }
.ci-tick-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ci-tick-name{ font-weight:700; font-size:18px; overflow-wrap:anywhere; }
.ci-tick-meta{ font-size:1rem; color:var(--muted); }
.ci-tick-state{ flex:0 0 auto; font-size:1rem; font-weight:600; color:var(--muted); text-align:right; }
.ci-tick-row.is-in .ci-tick{ border-color:var(--success-line); background:var(--success-soft); }
.ci-tick-row.is-in .ci-tick-box{ background:var(--success-line); border-color:var(--success-line); color:var(--navy); }
.ci-tick-row.is-in .ci-tick-state{ color:var(--success); }
.ci-tick-row.is-failed .ci-tick{ border-color:var(--danger-line); background:var(--danger-soft); }
.ci-tick-row.is-failed .ci-tick-state{ color:var(--danger); font-weight:700; }
.ci-error{ margin-top:var(--sp-4); color:var(--danger); font-weight:700; }
@media (max-width:560px){
  .ci-tick{ flex-wrap:wrap; }
  .ci-tick-state{ flex-basis:100%; text-align:left; padding-left:56px; }
}
.ci-devices-grid{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); align-items:start; }
.ci-device-list{ min-width:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.ci-filter-form .row .select{ flex:1 1 200px; min-width:0; }
.ci-pair-code{ font-size:clamp(44px,9vw,72px); font-weight:700; letter-spacing:.12em; color:var(--ink); margin:var(--sp-3) 0; font-variant-numeric:tabular-nums; }
.ci-pair-url{ overflow-wrap:anywhere; font-weight:700; color:var(--ink); }
.ci-retired summary{ cursor:pointer; min-height:var(--target); display:flex; align-items:center; font-weight:700; }
.ci-retired-list{ list-style:none; padding:0; margin:var(--sp-3) 0 0; display:grid; gap:var(--sp-3); }

/* Printable sign-in sheet */
body.ci-print-page{ background:var(--white); color:var(--navy); color-scheme:light; }
body.ci-print-page .btn-ghost{ color:var(--navy); border-color:var(--grey-300); }
.ci-print-bar{ display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:flex-end; padding:var(--sp-4) var(--gutter); }
.ci-sheet{ max-width:960px; margin:0 auto; padding:0 var(--gutter) var(--sp-8); }
.ci-sheet-head h1{ font-size:28px; margin:4px 0 6px; color:var(--navy); }
.ci-sheet-eyebrow{ font-size:1rem; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--steel); margin:0; }
.ci-sheet-note{ font-size:1rem; }
.ci-sheet-table{ width:100%; border-collapse:collapse; margin-top:var(--sp-4); font-size:1rem; color:var(--navy); }
.ci-sheet-table th,.ci-sheet-table td{ border:1px solid var(--grey-500); padding:8px 10px; text-align:left; height:38px; }
.ci-sheet-table thead th{ background:var(--grey-100); }
.ci-sheet-table .ci-col-n{ width:40px; text-align:right; }
.ci-sheet-table .ci-col-sig{ width:36%; }
.ci-sheet-foot{ font-size:1rem; margin-top:var(--sp-3); color:var(--grey-700); }
@media print{
  .ci-print-bar{ display:none !important; }
  .ci-sheet{ max-width:none; padding:0; }
  .ci-sheet-table{ font-size:12pt; }
  .ci-sheet-table tr{ break-inside:avoid; }
  .ci-sheet-table thead{ display:table-header-group; }
}

/* Kiosk pairing + scanner app (dark navy, huge type) */
.ki-pair-form{ display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-4); width:min(100%,420px); margin-top:var(--sp-5); }
.ki-label{ font-weight:700; font-size:24px; color:var(--ink); text-align:left; }
body.kiosk .ki-code-input{ font-size:44px; letter-spacing:.3em; text-align:center; min-height:76px; font-variant-numeric:tabular-nums; }
.ki-pair-msg{ min-height:1.5em; font-size:24px; color:var(--ink); }
.ki-pair-msg.is-bad{ color:var(--danger); font-weight:700; }
.ki-header-status{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); }
.ki-mode{ margin:0; padding:10px 18px; border-radius:var(--r-md); background:var(--gold); color:var(--navy); font-weight:700; font-size:clamp(20px,2.4vw,30px); letter-spacing:-0.01em; }
.ki-mode.is-rs{ background:var(--surface-cream); border:2px solid var(--gold); }
.ki-mode.is-paused{ background:var(--danger-raw); color:var(--white); }
.ki-net{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--r-pill); font-weight:700; font-size:18px; border:2px solid currentColor; }
.ki-net.is-online{ color:var(--green); }
.ki-net.is-offline{ color:var(--warning); background:var(--warning-soft); }
.ki-queue{ font-size:20px; color:var(--meta); white-space:nowrap; }
.ki-queue.has-items{ color:var(--warning); font-weight:700; }
.ki-queue strong{ font-variant-numeric:tabular-nums; }
.ki-fs{ min-height:var(--target); }
.ki-app{ flex:1; display:flex; flex-direction:column; gap:var(--sp-5); }
.ki-signedout{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); padding:18px 22px; border-radius:var(--r-card); background:var(--danger-raw); color:var(--white); font-size:24px; }
.ki-signedout[hidden]{ display:none; }
.ki-signedout p{ margin:0; flex:1 1 300px; }

.ki-wrongday{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); padding:18px 22px; border-radius:var(--r-card); background:var(--gold); color:var(--navy); font-size:24px; }
.ki-wrongday[hidden]{ display:none; }
.ki-wrongday p{ margin:0; flex:1 1 300px; }
.ki-stage{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:24px; padding:clamp(20px,4vw,56px); min-height:52vh; transition:background .15s ease; }
.ki-idle{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.ki-idle[hidden],.ki-result[hidden]{ display:none; }
.ki-idle-icon{ color:var(--navy); }
.ki-result{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); max-width:100%; }
.ki-result-icon{ display:none; }
.ki-stage.is-green .ki-icon-green,.ki-stage.is-amber .ki-icon-amber,.ki-stage.is-red .ki-icon-red,.ki-stage.is-wait .ki-icon-wait{ display:inline-flex; }
.ki-result-word{ margin:0; font-size:clamp(22px,2.6vw,32px); font-weight:700; text-transform:none; letter-spacing:normal; }
.ki-name{ margin:0; font-size:clamp(48px,8vw,120px); font-weight:700; letter-spacing:-0.03em; line-height:1.02; overflow-wrap:anywhere; }
.ki-name[hidden],.ki-district[hidden]{ display:none; }
.ki-district{ margin:0; font-size:clamp(22px,3vw,40px); font-weight:600; }
.ki-message{ margin:var(--sp-2) 0 0; font-size:clamp(26px,3.6vw,48px); font-weight:700; line-height:1.2; max-width:26ch; }
.ki-stage.is-green{ background:var(--toa-ok-strong); color:var(--white); }
.ki-stage.is-amber{ background:var(--gold); color:var(--navy); }
.ki-stage.is-red{ background:var(--toa-bad-strong); color:var(--white); }
.ki-stage.is-wait{ background:var(--navy-2); color:var(--white); }
.ki-manual{ align-self:center; width:min(100%,640px); }
.ki-manual summary{ list-style:none; display:flex; justify-content:center; width:max-content; margin:0 auto; cursor:pointer; }
.ki-manual summary::-webkit-details-marker{ display:none; }
.ki-manual-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-top:var(--sp-4); }
.ki-manual-form .ki-label{ flex-basis:100%; }
.ki-manual-input{ flex:1 1 280px; min-width:0; min-height:60px; text-transform:uppercase; letter-spacing:.06em; }
.ki-attention{ align-self:center; width:min(100%,640px); padding:14px 18px; border-radius:var(--r-card); border:2px solid var(--gold); }
.ki-attention[hidden]{ display:none; }
.ki-attention-title{ font-size:24px; color:var(--warning); margin:0 0 var(--sp-2); }
.ki-attention ul{ margin:0; padding-left:1.2em; font-size:18px; }
.ki-foot{ margin:0; text-align:center; font-size:20px; color:var(--meta); }
@media (max-width:560px){
  .ki-header-status{ gap:var(--sp-2); }
  .ki-fs{ display:none; }
}
/* === end checkin === */

/* === exams === */
/* Attendee test page */
.exam-head{ margin-bottom:var(--sp-4); }
.exam-head h1{ margin-bottom:var(--sp-2); }
.exam-who{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:16px; color:var(--body); }
.exam-who .inline-form{ align-items:center; gap:4px; }
.exam-notyou{ color:var(--muted); }
.exam-signout{ text-decoration:underline; text-underline-offset:3px; min-height:var(--target); }
.exam .alert{ margin-bottom:var(--sp-4); }
.exam .alert[hidden]{ display:none; }
.exam-state-card{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.exam-state-card > .icon{ color:var(--steel); }
.exam-state-card .lede{ margin:0 auto; }
.exam-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.sync-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; min-height:36px; border-radius:var(--r-pill); font-size:1rem; font-weight:700; color:var(--success); background:var(--success-soft); border:1px solid color-mix(in srgb, var(--success-line) 45%, transparent); }
.sync-chip.is-pending{ color:var(--warning); background:var(--warning-soft); border-color:color-mix(in srgb, var(--warning-line) 55%, transparent); }
.sync-chip.is-pending .icon{ display:none; }
.sync-chip.is-pending::before{ content:"!"; display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--warning); color:var(--surface); font-size:1rem; font-weight:700; }
.exam-count{ font-size:1rem; font-weight:700; color:var(--meta); font-variant-numeric:tabular-nums; }
.exam-jump{ margin-bottom:var(--sp-4); }
.exam-chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:6px; }
.exam-chip{ position:relative; width:100%; min-height:var(--target); display:grid; place-items:center; border-radius:var(--r-md); border:2px solid var(--line-strong); background:var(--surface); color:var(--ink); font-weight:700; font-size:16px; cursor:pointer; }
@media (hover:hover) and (pointer:fine){ .exam-chip:hover{ border-color:var(--ink); } }
.exam-chip.is-done{ background:var(--success-soft); border-color:var(--success-line); }
.exam-chip.is-done::after{ content:""; position:absolute; top:5px; right:5px; width:8px; height:4px; border-left:2px solid var(--success); border-bottom:2px solid var(--success); transform:rotate(-45deg); }
.exam-chip[aria-current="step"]{ border-color:var(--ink); box-shadow:inset 0 -4px 0 var(--gold); }
.exam-chip-all .icon{ color:var(--ink); }
html.js .q-screen[hidden], .exam-all[hidden]{ display:none; }
.exam-screens .card + .card{ margin-top:var(--sp-5); }
.q-fieldset{ border:0; margin:0; padding:0; min-width:0; }
.q-legend{ display:flex; flex-direction:column; gap:var(--sp-2); padding:0; margin-bottom:var(--sp-4); width:100%; }
.q-num{ font-size:1rem; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--meta); }
.q-num:focus{ outline:none; }
.q-stem{ font-size:clamp(19px,2.6vw,22px); font-weight:700; color:var(--ink); line-height:1.35; letter-spacing:-0.01em; }
.q-options{ display:flex; flex-direction:column; gap:var(--sp-3); }
.opt-card{ position:relative; display:flex; align-items:center; gap:14px; min-height:60px; padding:12px 16px; border:2px solid var(--line-strong); border-radius:var(--r-card); background:var(--surface); cursor:pointer; color:var(--ink); font-weight:600; line-height:1.35; }
@media (hover:hover) and (pointer:fine){ .opt-card:hover{ border-color:var(--steel); } }
.opt-input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.opt-letter{ flex:none; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--surface-2); color:var(--ink); font-weight:700; font-size:17px; border:2px solid var(--line-strong); }
.opt-text{ flex:1; min-width:0; overflow-wrap:anywhere; }
.opt-card:has(.opt-input:checked){ border-color:var(--navy); background:var(--info-soft); box-shadow:inset 0 0 0 1px var(--navy); }
/* Sibling selectors work without :has() (older district browsers): the letter
   and the "Selected" word always show the choice; :has() adds the card frame. */
.opt-input:checked + .opt-letter{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.opt-input:focus-visible + .opt-letter{ outline:3px solid var(--ring); outline-offset:3px; }
.opt-sel{ display:none; flex:none; font-size:1rem; font-weight:700; color:var(--ink); }
.opt-input:checked ~ .opt-sel{ display:inline; }
.opt-card:has(.opt-input:focus-visible){ outline:3px solid var(--ring); outline-offset:3px; }
.opt-card:has(.opt-input:focus-visible) .opt-letter{ outline:none; }
.opt-card:has(.opt-input:disabled){ cursor:not-allowed; opacity:.7; }
.q-nav{ display:flex; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-5); }
.q-nav .btn{ flex:1 1 0; }
.exam-all h2{ margin-bottom:var(--sp-2); }
.exam-all h2:focus{ outline:none; }
.exam-all-list{ display:flex; flex-direction:column; margin-top:var(--sp-4); border-top:1px solid var(--line-soft); }
.exam-all-item{ width:100%; display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; min-height:56px; padding:10px 4px; background:none; border:0; border-bottom:1px solid var(--line-soft); text-align:left; cursor:pointer; color:var(--ink); }
@media (hover:hover) and (pointer:fine){ .exam-all-item:hover{ background:var(--tint-04); } }
.exam-all-num{ font-weight:700; color:var(--meta); }
.exam-all-stem{ font-size:16px; font-weight:600; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.exam-all-ans{ font-weight:700; font-size:1rem; white-space:nowrap; }
.exam-back{ margin-top:var(--sp-6); }
/* Review (attendee + console previews) */
.exam-result-head{ display:flex; gap:var(--sp-5); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.exam-result .muted{ margin-top:var(--sp-3); }
.exam-review{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-5); }
.exam-review .card + .card{ margin-top:0; }
.review-head{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.review-options{ display:flex; flex-direction:column; gap:8px; margin:var(--sp-3) 0; }
.review-opt{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:8px 12px; border-radius:var(--r-md); border:1.5px solid var(--line-soft); color:var(--ink); font-weight:600; }
.review-opt .opt-letter{ width:32px; height:32px; font-size:1rem; }
.review-opt .opt-text{ flex:1 1 180px; }
.review-opt.is-correct{ border-color:var(--success-line); background:var(--success-soft); }
.review-opt.is-chosen:not(.is-correct){ border-color:var(--danger-line); background:var(--danger-soft); }
.review-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.tag{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-pill); font-size:1rem; font-weight:700; white-space:nowrap; background:var(--neutral-soft); color:var(--neutral); }
.tag-correct{ background:var(--success-soft); color:var(--success); }
.tag-you{ background:var(--info-soft); color:var(--info); }
.review-room{ font-weight:700; color:var(--meta); font-size:1rem; }
/* Console */
.exam-picker{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.exam-picker .field{ flex:1 1 260px; min-width:0; }
.exam-runs{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr)); }
.exam-runs .card + .card{ margin-top:0; }
.exam-run-card .actions{ margin-top:var(--sp-4); }
.exam-flag{ display:flex; align-items:center; gap:6px; margin-top:var(--sp-3); font-weight:700; color:var(--warning); }
.exam-crumb{ font-size:1rem; color:var(--muted); margin-bottom:var(--sp-2); }
.exam-links{ margin-top:var(--sp-3); }
.exam-goto{ display:inline-flex; gap:8px; align-items:center; }
.exam-goto .input{ width:auto; }
.exam-slide-preview{ padding:var(--sp-4); border-radius:var(--r-md); background:var(--surface-2); margin-top:var(--sp-3); }
.sync-summary{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin:var(--sp-3) 0 var(--sp-4); }
.sync-summary li{ display:inline-flex; align-items:center; gap:8px; }
.sync-status{ font-weight:700; white-space:nowrap; }
.sync-status::before{ margin-right:6px; font-weight:700; }
.sync-synced{ color:var(--success); }
.sync-synced::before{ content:"\2713"; }
.sync-unsynced{ color:var(--warning); }
.sync-unsynced::before{ content:"!"; }
.sync-not_seen{ color:var(--warning); }
.sync-not_seen::before{ content:"?"; }
.sync-not_started{ color:var(--muted); }
.sync-not_started::before{ content:"\00B7"; }
.exam-row-actions{ display:flex; gap:6px; flex-wrap:nowrap; }
.fix-list{ display:flex; flex-direction:column; gap:var(--sp-4); }
.fix-list .card + .card{ margin-top:0; }
.fix-item .q-stem{ font-size:18px; margin-top:4px; }
.fix-form-wrap{ margin-top:var(--sp-3); }
.fix-form-wrap > summary{ list-style:none; display:inline-flex; }
.fix-form-wrap > summary::-webkit-details-marker{ display:none; }
.fix-form{ margin-top:var(--sp-4); padding:var(--sp-4); border-radius:var(--r-md); background:var(--surface-2); }
.fix-fieldset{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; min-width:0; }
.fix-choice{ display:flex; align-items:center; gap:10px; min-height:var(--target); font-weight:600; color:var(--ink); cursor:pointer; }
.fix-choice input{ width:22px; height:22px; accent-color:var(--navy); flex:none; }
.paper-grid{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); margin-top:var(--sp-4); }
.paper-row{ display:grid; grid-template-columns:44px 1fr; gap:4px 10px; align-items:center; }
.paper-now{ grid-column:2; }
.grade-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:var(--sp-3); color:var(--muted); }
.grade-legend span{ display:inline-flex; align-items:center; gap:4px; }
.grade-table th.grade-q, .grade-table td.grade-cell{ text-align:center; padding:8px 6px; white-space:nowrap; }
.grade-table tbody th.grade-name{ white-space:nowrap; font-size:1rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); position:sticky; left:0; background:var(--surface); z-index:1; }
.grade-cell.is-right{ color:var(--success); }
.grade-cell.is-wrong{ color:var(--danger); }
.grade-cell.is-void{ color:var(--muted); }
.grade-link{ display:inline-flex; align-items:center; gap:3px; min-height:32px; padding:0 4px; text-decoration:none; color:inherit; font-weight:700; border-radius:6px; }
@media (hover:hover) and (pointer:fine){ .grade-link:hover{ background:var(--tint-08); } }
.grade-mark{ font-size:1rem; color:var(--meta); }
.grade-flag{ display:inline-flex; color:var(--warning); vertical-align:middle; }
.grade-table tr.is-cancelled{ opacity:.65; }
.bank-q{ padding:var(--sp-4) 0; border-top:1px solid var(--line-soft); }
.bank-exam details > summary{ list-style:none; display:inline-flex; margin-top:var(--sp-2); }
.bank-exam details > summary::-webkit-details-marker{ display:none; }
/* Projector (full screen, dark navy, huge type, no names) */
body.projector .kiosk-main{ padding:clamp(16px,3vw,48px); }
.proj-meta{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; font-size:24px; font-weight:600; color:var(--ink); }
.proj-online{ display:inline-flex; align-items:center; gap:6px; color:var(--green); }
.proj-online.is-offline{ color:var(--warning); }
.proj{ flex:1; display:flex; flex-direction:column; }
.proj-slide[hidden]{ display:none !important; }
/* Slide sizes follow the smaller of width and height (720p and XGA projectors cannot scroll);
   projector.js lowers --proj-scale further if a long question still overflows. */
body.projector{ --proj-scale:1; }
.proj-question{ display:flex; flex-direction:column; gap:calc(clamp(8px,min(2vw,2.6vh),28px) * var(--proj-scale)); max-width:1400px; width:100%; margin:0 auto; }
.proj-qnum{ font-size:calc(clamp(16px,min(2vw,3vh),28px) * var(--proj-scale)); font-weight:700; letter-spacing:normal; text-transform:none; color:var(--ink); }
.proj-stem{ color:var(--ink); font-size:calc(clamp(20px,min(3.6vw,5.5vh),56px) * var(--proj-scale)); line-height:1.15; letter-spacing:-0.02em; }
.proj-options{ display:flex; flex-direction:column; gap:calc(clamp(6px,min(1.4vw,1.8vh),20px) * var(--proj-scale)); }
.proj-opt{ padding:calc(clamp(6px,min(1.2vw,1.6vh),18px) * var(--proj-scale)) clamp(14px,1.6vw,24px); border-radius:20px; background:var(--white); border:2px solid var(--line); }
.proj-opt.is-correct{ border:4px solid var(--green); background:var(--success-soft); }
.proj-opt-head{ display:flex; align-items:center; gap:16px; font-size:calc(clamp(16px,min(2.2vw,3.4vh),34px) * var(--proj-scale)); font-weight:600; color:var(--ink); }
.proj-opt .opt-letter{ width:calc(clamp(32px,min(3.4vw,5vh),56px) * var(--proj-scale)); height:calc(clamp(32px,min(3.4vw,5vh),56px) * var(--proj-scale)); font-size:calc(clamp(16px,min(2vw,3vh),30px) * var(--proj-scale)); background:var(--surface-2); color:var(--ink); border-color:var(--line-strong); }
.proj-opt.is-correct .opt-letter{ background:var(--green); color:var(--white); border-color:var(--green); }
.proj-opt-text{ flex:1; min-width:0; }
.proj-opt-tag{ font-size:.8em; font-weight:700; color:var(--success); text-transform:none; letter-spacing:normal; }
.proj-opt-tag:empty{ display:none; }
.proj-opt.is-correct .proj-opt-tag::before{ content:"\2713\00A0"; }
.proj-opt-num{ font-variant-numeric:tabular-nums; min-width:3.2em; text-align:right; }
.proj-bar{ height:calc(clamp(8px,min(1vw,1.4vh),16px) * var(--proj-scale)); margin-top:calc(8px * var(--proj-scale)); border-radius:8px; background:var(--surface-2); overflow:hidden; }
.proj-bar-fill{ display:block; height:100%; width:var(--p,0%); background:var(--navy); border-radius:inherit; }
.proj-opt.is-correct .proj-bar-fill{ background:var(--green); }
.proj-pct{ font-size:calc(clamp(20px,min(2.8vw,4.2vh),44px) * var(--proj-scale)); font-weight:700; color:var(--ink); }
.proj-big{ font-size:clamp(64px,12vw,180px); font-weight:700; color:var(--ink); letter-spacing:-0.03em; line-height:1; }
/* === end exams === */

/* === portal === */
.portal-hello{ margin-bottom:var(--sp-5); }
.portal-chip{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-3); padding:4px 12px; border-radius:var(--r-pill); background:var(--surface-cream); color:var(--ink); font-size:1rem; font-weight:700; }
.portal-chip .icon{ color:var(--gold-deep); }
.portal-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.portal-card-head h2{ margin:2px 0 4px; }
.portal-checkin{ flex:none; }
.portal-today .t-h4,.portal-upcoming .t-h4{ margin:var(--sp-5) 0 var(--sp-2); }
.portal-left{ margin-top:var(--sp-2); }
.portal-left-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.portal-left-list li{ display:flex; align-items:flex-start; gap:10px; min-height:var(--target); padding:10px 14px; background:var(--surface-2); border-radius:var(--r-md); }
.portal-left-list li .icon{ flex:none; margin-top:3px; color:var(--steel); }
.portal-left-list .link{ display:inline-flex; align-items:center; min-height:var(--target); margin:-10px 0; }
.portal-alldone{ display:flex; align-items:center; gap:8px; margin-top:var(--sp-4); padding:12px 14px; border-radius:var(--r-md); background:var(--success-soft); color:var(--success); font-weight:700; }
.portal-alldone span{ color:var(--ink); }
.portal-tasks{ display:grid; gap:var(--sp-3); margin-top:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.portal-task{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:14px 16px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--surface); }
.portal-task-icon{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--surface-2); color:var(--steel); flex:none; }
.portal-task-body{ flex:1 1 140px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.portal-task-title{ font-size:17px; }
.portal-task-action{ flex:none; }
.portal-rs{ margin-top:var(--sp-5); padding:14px 16px; border-left:4px solid var(--gold); background:var(--surface-cream); border-radius:var(--r-md); }
.portal-rs h3{ display:flex; align-items:center; gap:8px; margin:0 0 6px !important; }
.portal-sched-h{ margin-top:var(--sp-6) !important; }
.portal-agenda{ list-style:none; margin:0; padding:0; }
.portal-agenda .agenda-item.is-now{ background:var(--surface-cream); margin-inline:-12px; padding-inline:12px; }
.portal-dates{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); margin:4px 0 0; }
.portal-facts{ display:grid; gap:var(--sp-3); margin:var(--sp-5) 0 var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.portal-facts > div{ padding:12px 14px; background:var(--surface-2); border-radius:var(--r-md); min-width:0; }
.portal-facts dt{ font-size:1rem; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--meta); }
.portal-facts dd{ margin:2px 0 0; color:var(--ink); font-weight:600; overflow-wrap:anywhere; }
.portal-facts-row{ margin-bottom:0; }
.portal-rsvp{ margin-top:var(--sp-3); }
.portal-after-grid{ display:grid; gap:var(--sp-4); margin-top:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.portal-after-block h3{ display:flex; align-items:center; gap:8px; margin-bottom:var(--sp-2); }
.portal-mini-list{ list-style:none; margin:0 0 var(--sp-3); padding:0; }
.portal-mini-list li{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); padding:8px 0; border-bottom:1px solid var(--line-soft); }
.portal-mini-list strong{ font-variant-numeric:tabular-nums; }
.portal-next{ border-left:4px solid var(--steel); }
.portal-switch{ display:flex; gap:var(--sp-2); overflow-x:auto; margin:var(--sp-3) 0 var(--sp-4); padding-bottom:4px; }
.portal-switch-item{ flex:none; display:flex; flex-direction:column; justify-content:center; min-height:var(--target); padding:8px 14px; border:1.5px solid var(--line); border-radius:var(--r-md); text-decoration:none; color:var(--ink); background:var(--surface); }
.portal-switch-item[aria-current="page"]{ border-color:var(--ink); box-shadow:inset 0 -3px 0 var(--gold); }
.portal-switch-name{ font-weight:700; font-size:1rem; white-space:nowrap; }
.portal-switch-date{ font-size:1rem; color:var(--muted); white-space:nowrap; }
.portal-days{ display:grid; gap:var(--sp-4); margin:var(--sp-4) 0; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.portal-days .card + .card{ margin-top:0; }
.portal-day h2{ display:flex; flex-direction:column; gap:2px; margin-bottom:var(--sp-3); }
.portal-checks{ list-style:none; margin:0; padding:0; }
.portal-check{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); flex-wrap:wrap; min-height:var(--target); padding:6px 0; border-bottom:1px solid var(--line-soft); }
.portal-check:last-child{ border-bottom:0; }
.portal-check-label{ font-weight:600; color:var(--ink); }
.portal-certcheck{ margin-top:var(--sp-5); }
.portal-certrow{ padding:var(--sp-4) 0; border-bottom:1px solid var(--line-soft); }
.portal-certrow h3{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.portal-certrow p{ margin:8px 0 0; }
.portal-missing{ list-style:none; margin:var(--sp-2) 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.portal-missing li{ display:flex; align-items:center; gap:8px; color:var(--ink); }
.portal-missing .icon{ color:var(--warning); flex:none; }
.portal-privacy{ display:flex; align-items:flex-start; gap:10px; margin:var(--sp-3) 0 var(--sp-4); padding:12px 14px; border-radius:var(--r-md); background:var(--info-soft); color:var(--info); }
.portal-privacy .icon{ flex:none; margin-top:3px; }
.portal-privacy span{ color:var(--ink); }
.portal-topic-list{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.portal-topic-list li{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); }
.portal-topic-list .icon{ color:var(--steel); flex:none; }
.portal-review{ margin-top:var(--sp-4); }
.portal-review summary,.portal-linkedin summary{ cursor:pointer; min-height:var(--target); display:flex; align-items:center; font-weight:700; color:var(--ink); }
.portal-qs{ margin:var(--sp-3) 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:var(--sp-3); }
.portal-q{ padding:12px 14px; border:1px solid var(--line-soft); border-radius:var(--r-md); }
.portal-q p{ margin:4px 0 0; }
.portal-q-stem{ color:var(--ink); }
.portal-q-line{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.portal-more{ margin-top:var(--sp-5); }
.portal-history{ list-style:none; margin:var(--sp-4) 0 0; padding:0; }
.portal-history > li + li{ margin-top:var(--sp-4); }
.portal-cert .actions{ margin-top:var(--sp-4); }
.portal-linkedin{ margin-top:var(--sp-4); border-top:1px solid var(--line-soft); padding-top:var(--sp-2); }
.portal-copy-list{ margin:var(--sp-3) 0 0; }
.portal-copy-row{ padding:10px 0; border-bottom:1px solid var(--line-soft); }
.portal-copy-row dt{ font-size:1rem; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--meta); }
.portal-copy-row dd{ margin:4px 0 0; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.portal-copy-value{ color:var(--ink); font-weight:600; overflow-wrap:anywhere; min-width:0; }
.portal-copy-row .btn{ flex:none; }
.portal-form-grid .actions{ grid-column:1 / -1; }
@media (min-width:700px){
  .portal-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
  .portal-form-grid > * + *{ margin-top:0; }
}
.portal-emails{ list-style:none; margin:var(--sp-3) 0 var(--sp-2); padding:0; }
.portal-emails li{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.portal-email{ font-weight:700; color:var(--ink); overflow-wrap:anywhere; min-width:0; margin-right:auto; }
.portal-email-forms{ display:grid; gap:var(--sp-5); margin-top:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.portal-verify{ margin-top:var(--sp-4); padding:var(--sp-4); border-radius:var(--r-md); background:var(--surface-cream); }
.portal-verify h3{ overflow-wrap:anywhere; margin-bottom:4px; }
.portal-verify .inline-form{ margin-top:var(--sp-2); }
.portal-devices{ list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.portal-device{ display:flex; flex-wrap:wrap; align-items:center; gap:8px var(--sp-3); padding:10px 0; border-bottom:1px solid var(--line-soft); }
.portal-device-text{ display:flex; flex-direction:column; flex:1 1 200px; min-width:0; }
.portal-device-name{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); }
.portal-login-help{ margin-top:var(--sp-5); }
.portal-code-for{ overflow-wrap:anywhere; }
/* outbox (console) */
.mail-status .alert{ margin-bottom:var(--sp-3); }
.mail-stats{ margin-bottom:var(--sp-5); }
.mail-actions{ margin-bottom:var(--sp-6); }
.mail-forms{ display:grid; gap:var(--sp-6); margin-top:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.mail-section{ margin-top:var(--sp-6); }
.mail-section .table-box{ position:relative; } /* keeps .sr-only headers from widening the page */
.mail-section-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.mail-filter{ display:flex; flex-wrap:wrap; gap:4px; }
.mail-filter a[aria-current="true"]{ background:var(--tint-08); box-shadow:inset 0 -3px 0 var(--gold); }
.mail-error{ display:inline-flex; align-items:center; gap:4px; color:var(--danger); }
.mail-row-actions{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mail-preview{ width:min(720px, calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:var(--body); box-shadow:var(--shadow-lift); }
.mail-preview::backdrop{ background:rgba(0,20,40,.55); }
.mail-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:12px 16px; border-bottom:1px solid var(--line-soft); }
.mail-preview-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.mail-preview-frame{ display:block; width:100%; height:min(70vh, 760px); border:0; background:#fff; }
/* === end portal === */

/* === feedback === */
/* Portal form */
.fb-head{ margin-bottom:var(--sp-4); }
.fb-head h1{ margin-bottom:4px; }
.fb-days{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.fb-day-link{
  display:inline-flex; align-items:center; gap:6px; min-height:var(--target); padding:8px 16px;
  border:1.5px solid var(--line-strong); border-radius:var(--r-pill);
  font-size:16px; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap;
}
@media (hover:hover) and (pointer:fine){ .fb-day-link:hover{ border-color:var(--ink); background:var(--tint-04); } }
.fb-day-link[aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.fb-day-link .icon{ color:currentColor; }
.fb-progress h2{ margin-bottom:var(--sp-3); }
.fb-progress .bar{ height:10px; margin-bottom:var(--sp-3); }
.fb-notice{
  display:flex; gap:12px; align-items:flex-start; margin:var(--sp-5) 0;
  padding:14px 16px; border-radius:var(--r-md);
  background:var(--info-soft); border:1px solid var(--info-line); border-left-width:5px; color:var(--ink);
}
.fb-notice .icon{ color:var(--info); margin-top:2px; }
.fb-notice p{ font-size:16px; line-height:1.55; }

.fb-section{ padding:0; overflow:hidden; }
.fb-section + .fb-section{ margin-top:var(--sp-4); }
.fb-summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); min-height:64px; cursor:pointer; list-style:none;
}
.fb-summary::-webkit-details-marker{ display:none; }
details.fb-section > .fb-summary::after{
  content:""; flex:none; width:10px; height:10px; margin-left:4px;
  border-right:2.5px solid var(--meta); border-bottom:2.5px solid var(--meta);
  transform:rotate(45deg) translateY(-3px); transition:transform .15s ease;
}
details.fb-section[open] > .fb-summary::after{ transform:rotate(-135deg) translateY(-3px); }
@media (hover:hover) and (pointer:fine){ details.fb-section > .fb-summary:hover{ background:var(--tint-04); } }
.fb-summary-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.fb-class-title{ font-weight:700; color:var(--ink); font-size:18px; line-height:1.3; }
.fb-class-meta{ font-size:1rem; color:var(--muted); }
.fb-state{ flex:none; }
.fb-locked .fb-summary{ cursor:default; }
.fb-locked .fb-class-title{ color:var(--meta); }
.fb-body{ padding:0 var(--sp-5) var(--sp-5); border-top:1px solid var(--line-soft); }
.fb-day .fb-body{ border-top:0; padding-top:0; }
.fb-day > h2{ padding:var(--sp-5) var(--sp-5) var(--sp-3); }
.fb-day .field + .field{ margin-top:var(--sp-4); }
.fb-missed{ padding:var(--sp-4) 0; border-bottom:1px solid var(--line-soft); }
.fb-missed .check{ width:26px; height:26px; }
.fb-missed label{ font-size:17px; }

.fb-item{ border:0; margin:0; padding:var(--sp-5) 0 0; min-width:0; }
.fb-q{ float:left; width:100%; padding:0; margin:0 0 var(--sp-3); font-weight:700; color:var(--ink); font-size:17px; line-height:1.4; }
.fb-scale{ clear:both; display:grid; grid-template-columns:1fr; gap:6px; }
.fb-choice{ position:relative; display:block; cursor:pointer; }
.fb-choice input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.fb-choice-box{
  display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 12px 6px 6px;
  border:1.5px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface);
  color:var(--ink); font-weight:600; font-size:16px; line-height:1.2;
  transition:border-color .12s ease, background-color .12s ease;
}
.fb-num{
  display:inline-grid; place-items:center; flex:none; width:34px; height:34px; border-radius:8px;
  background:var(--surface-2); color:var(--ink); font-weight:700; font-size:17px;
}
@media (hover:hover) and (pointer:fine){ .fb-choice:hover .fb-choice-box{ border-color:var(--steel); } }
.fb-choice input:focus-visible + .fb-choice-box{ outline:3px solid var(--ring); outline-offset:2px; }
.fb-choice input:checked + .fb-choice-box{
  background:var(--accent); border-color:var(--ink); border-width:2px; color:var(--on-accent); font-weight:700;
}
.fb-choice input:checked + .fb-choice-box .fb-num{ background:var(--navy); color:var(--gold); }
.fb-choice input:checked + .fb-choice-box::after{
  content:""; margin-left:auto; flex:none; width:8px; height:15px; margin-right:6px;
  border-right:3px solid currentColor; border-bottom:3px solid currentColor; transform:rotate(45deg) translateY(-2px);
}
@media (min-width:600px){
  .fb-scale{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .fb-choice-box{
    flex-direction:column; justify-content:center; gap:6px; min-height:92px; padding:10px 6px;
    text-align:center; font-size:1rem;
  }
  .fb-choice input:checked + .fb-choice-box::after{ display:none; }
  .fb-choice input:checked + .fb-choice-box .fb-word{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
}
html.js .fb-items-off{ display:none; }
html.js .fb-improve-off{ display:none; }
.fb-improve{ padding-top:var(--sp-5); }
.fb-save{ min-height:1.5em; margin-top:var(--sp-3); color:var(--muted); font-weight:600; }
.fb-save[data-tone="success"]{ color:var(--success); }
.fb-save[data-tone="warning"]{ color:var(--warning); }
.fb-save[data-tone="danger"]{ color:var(--danger); }
.fb-actions{ margin-top:var(--sp-6); }
@media (max-width:560px){
  .fb-summary{ padding:var(--sp-4); }
  .fb-body{ padding:0 var(--sp-4) var(--sp-4); }
  .fb-day > h2{ padding:var(--sp-4) var(--sp-4) var(--sp-3); }
  .fb-summary{ flex-wrap:wrap; }
}

/* Console */
.fb-picker{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-5); padding:var(--sp-4) var(--sp-5); }
.fb-picker .field{ flex:1 1 260px; min-width:0; }
.fb-daytabs{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-5) 0; }
.fb-daytab{
  display:flex; flex-direction:column; gap:2px; min-height:var(--target); padding:8px 16px;
  border:1.5px solid var(--line-strong); border-radius:var(--r-md); text-decoration:none; color:var(--ink);
}
@media (hover:hover) and (pointer:fine){ .fb-daytab:hover{ border-color:var(--ink); background:var(--tint-04); } }
.fb-daytab[aria-current="page"]{ border-color:var(--ink); background:var(--tint-08); box-shadow:inset 0 -3px 0 var(--gold); }
.fb-daytab-name{ font-weight:700; }
.fb-daytab-meta{ font-size:1rem; color:var(--muted); white-space:nowrap; }
.fb-openday .card-head{ flex-wrap:wrap; }
.fb-openday .card-head > div{ flex:1 1 260px; min-width:0; }
.fb-classlist{ margin-top:var(--sp-4); border-top:1px solid var(--line-soft); }
.fb-classlist li{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.fb-classlist-title{ font-weight:600; color:var(--ink); min-width:0; }
.fb-stats{ margin:var(--sp-5) 0 var(--sp-6); }
.fb-section-title{ margin-bottom:var(--sp-3); }
.fb-exports{ margin-top:var(--sp-6); }
.fb-result .stat-row{ margin-bottom:var(--sp-4); }
.fb-result .table-box{ box-shadow:none; }
.fb-sub{ font-size:16px; margin:var(--sp-5) 0 var(--sp-2); }
.fb-agree{ display:flex; align-items:center; gap:10px; min-width:140px; }
.fb-agree-num{ font-weight:700; color:var(--ink); min-width:3.2em; font-variant-numeric:tabular-nums; }
.fb-agree .bar{ flex:1; }
.fb-comments{ display:flex; flex-direction:column; gap:var(--sp-2); }
.fb-comment{ padding:10px 14px; border-left:3px solid var(--gold); background:var(--surface-2); border-radius:0 var(--r-md) var(--r-md) 0; }
.fb-comment-text{ color:var(--ink); white-space:pre-line; overflow-wrap:anywhere; }
.fb-comment-text + .fb-comment-text{ margin-top:6px; }
.fb-comment-who{ margin-top:4px; color:var(--muted); }
.fb-taglist{ display:flex; flex-wrap:wrap; gap:6px; margin:var(--sp-3) 0 0; }
.fb-taglist li{ font-size:1rem; font-weight:600; color:var(--ink); background:var(--surface-2); padding:4px 10px; border-radius:var(--r-pill); }
/* === end feedback === */

/* === certs === */
.certs-academy-pick{ display:flex; gap:var(--sp-2); align-items:center; }
.certs-academy-pick .select{ min-height:var(--target); max-width:min(100%,320px); }
.certs-stats{ margin-bottom:var(--sp-5); }
.certs-steps{ margin-bottom:var(--sp-5); }
.certs-step-list{ list-style:none; margin:var(--sp-3) 0 0; padding:0; counter-reset:certstep; }
.certs-step-list > li{
  counter-increment:certstep; display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5);
  align-items:center; justify-content:space-between; padding:var(--sp-4) 0; border-top:1px solid var(--line-soft);
}
.certs-step-list > li:first-child{ border-top:0; }
.certs-step-text{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.certs-step-text strong::before{ content:counter(certstep) ". "; color:var(--meta); }
.certs-step-text .pill{ margin-right:var(--sp-1); }
.certs-report{ margin-bottom:var(--sp-5); border-left:4px solid var(--warning-line); }
.certs-report-list{ list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.certs-report-list li{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); align-items:center; padding:var(--sp-2) 0; border-top:1px solid var(--line-soft); }
.certs-board-head{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-3); }
.certs-filter{ flex:0 1 320px; margin:0; }
.certs-board .table-box{ position:relative; } /* keeps the sr-only header inside the scroll box */
.certs-table td{ vertical-align:top; }
.certs-sub{ display:block; margin-top:2px; }
.certs-missing{ min-width:200px; }
.certs-missing ul{ margin:0; padding-left:1.1em; font-size:1rem; }
.certs-actions{ text-align:right; }
.certs-cancelled td{ opacity:.7; }
.certs-none{ margin-top:var(--sp-3); }
.certs-back{ margin-bottom:var(--sp-3); }
.certs-person-grid{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:start; }
.certs-person-grid .card + .card{ margin-top:0; }
.certs-checklist,.certs-missing-list{ list-style:none; margin:var(--sp-3) 0; padding:0; }
.certs-checklist li{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; padding:4px 0; }
.certs-missing-list li{ display:flex; gap:var(--sp-2); align-items:flex-start; padding:4px 0; }
.certs-missing-list li .icon{ flex:0 0 auto; margin-top:4px; color:var(--danger); }
.certs-subhead{ margin-top:var(--sp-5); }
.certs-cert-list{ margin-top:var(--sp-7); }
.certs-cert-list > h2{ margin-bottom:var(--sp-4); }
.certs-cert + .certs-cert{ margin-top:var(--sp-4); }
.certs-facts{ margin:var(--sp-4) 0 0; display:grid; gap:var(--sp-2); }
.certs-facts > div{ display:grid; grid-template-columns:minmax(90px,140px) 1fr; gap:var(--sp-3); }
.certs-facts dt{ font-weight:700; color:var(--meta); }
.certs-facts dd{ margin:0; overflow-wrap:anywhere; }
.certs-revoke{ margin-top:var(--sp-4); }
.certs-revoke summary{ cursor:pointer; min-height:var(--target); display:flex; align-items:center; font-weight:700; color:var(--danger); }
.certs-verify .certs-verify-status{ margin:var(--sp-4) 0 var(--sp-2); }
.certs-verify .mono{ overflow-wrap:anywhere; }
.certs-audit-filters{ margin-bottom:var(--sp-4); }
.certs-filter-grid{ display:grid; gap:var(--sp-3) var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.certs-filter-grid .field{ margin:0; }
.certs-count{ margin-bottom:var(--sp-2); }
.certs-audit-table td{ vertical-align:top; }
.certs-detail{ min-width:220px; max-width:420px; }
.certs-json{ display:block; font-family:var(--mono); font-size:1rem; color:var(--meta); white-space:pre-wrap; overflow-wrap:anywhere; margin-top:2px; }
.certs-pager{ margin-top:var(--sp-4); justify-content:center; }
.certs-exports{ margin-top:var(--sp-5); }
@media (max-width:640px){
  .certs-step-list > li .row{ width:100%; }
  .certs-actions{ text-align:left; }
}
/* === end certs === */

/* ============================================================
   REDESIGN BLOCKS (DESIGN.md section 12). Each builder appends ONLY inside
   its own block. Blocks later in the file win over the older area blocks
   above; fold an old area rule into your block when you rework its screen.
   ============================================================ */

/* === attendee === */
/* Attendee portal screens (DESIGN.md section 4). Body 20px, secondary 18px slate, nothing under
   16px; one gold button per screen; flat cards. Rules here override the older exams, portal and
   feedback area rules above for the attendee screens. */

/* ---- Shared page pieces ---- */
body.portal h1{ margin-bottom:var(--sp-2); }
body.portal h2{ font-size:var(--toa-p-h3); margin-bottom:var(--sp-3); }
body.portal h3{ font-size:var(--toa-p-body); margin-bottom:var(--sp-2); }
body.portal .card p + p{ margin-top:var(--sp-3); }
.att-hello{ margin-bottom:var(--sp-6); }
.att-hello h1{ font-size:var(--toa-p-h1); }
.att-secondary{ font-size:var(--toa-p-secondary); color:var(--bp-text-slate); line-height:var(--toa-lh-body); }
.att-lead{ font-size:var(--toa-p-body); color:var(--bp-text); line-height:var(--toa-lh-body); }
.att-block{ margin-top:var(--sp-5); }
.att-hello + .att-block, .att-hello + .card, .att-switch + .att-block{ margin-top:0; }
.att-note{ margin-top:var(--sp-2); font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.att-alt{ margin-top:var(--sp-4); }
.att-big{ font-size:var(--toa-p-h3); font-weight:700; overflow-wrap:anywhere; }
.att-icon-head{ display:flex; align-items:flex-start; gap:12px; }
.att-icon-head > .icon{ flex:none; margin-top:.1em; }
.att-footer-links{ display:flex; flex-wrap:wrap; gap:0 var(--sp-5); margin-top:var(--sp-6); }
.att-linkbutton{ background:none; border:0; padding:0; font:inherit; font-weight:600; cursor:pointer; color:var(--bp-navy); }
.att-linkbutton.text-link{ min-height:var(--toa-tap); }
/* Cards stacked in the column: 20px apart whatever sits between them. */
.portal-container > .card + .card, .portal-container .att-block + .card, .portal-container .card + .att-block{ margin-top:var(--sp-5); }
.att-neutral-card{ background:var(--toa-neutral-soft); border-color:var(--toa-neutral-line); color:var(--toa-neutral-text); }
.att-problem-card{ background:var(--toa-bad-soft); border:2px solid var(--toa-bad-line); color:var(--toa-bad-text); }
.att-problem-card h2{ color:var(--toa-bad-text); }
.att-warn-card{ background:var(--toa-warn-soft); border:2px solid var(--toa-warn-line); color:var(--toa-warn-text); }
.att-neutral-card p, .att-problem-card p, .att-warn-card p{ color:inherit; }
.card-done p, .card-done strong{ color:var(--toa-ok-text); }
.card-done .icon{ color:var(--toa-ok-line); }
.att-warn-card .icon{ color:var(--toa-warn-text); }
.att-problem-card .icon{ color:var(--toa-bad-line); }

/* Status row: an icon and words, never colour alone (DESIGN 3.6, 3.7). */
.att-row{ display:flex; align-items:flex-start; gap:12px; font-size:var(--toa-p-body); line-height:var(--toa-lh-body); }
.att-row > .icon{ flex:none; margin-top:.15em; }
.att-row-success{ color:var(--toa-ok-text); }
.att-row-success > .icon{ color:var(--toa-ok-line); }
.att-row-warning{ color:var(--toa-warn-text); }
.att-row-danger{ color:var(--toa-bad-text); }
.att-row-danger > .icon{ color:var(--toa-bad-line); }
.att-row-neutral{ color:var(--toa-neutral-text); }
.att-row-info{ color:var(--bp-text); }
.card-next .att-row-neutral{ color:var(--bp-text-slate); }

/* Footer links on portal and public pages: a full 48px tap row (DESIGN 3.2). */
body.portal .site-footer a.link{ display:inline-flex; align-items:center; min-height:var(--toa-tap); padding-block:0; }
body.portal .footer-lines{ gap:0; }

/* Button labels never wrap or spill: on narrow phones with a large text setting the label
   size follows the screen width (20px at 320px at normal size), never under 16px. */
@media (max-width:479px){
  body.portal .btn{ font-size:max(16px, min(var(--toa-p-btn), 6.25vw)); padding-inline:20px; }
}
/* Tab labels: 16px, growing with the text setting only while three labels still fit side by side. */
.tabbar a{ font-size:max(16px, min(1rem, 5vw)); }
/* 320px class phones: a button inside a card has about 230px, so card buttons drop their
   optional icon and the label follows the width a little more ("Download Certificate"). */
@media (max-width:359px){
  body.portal .card .btn{ font-size:max(16px, min(var(--toa-p-btn), 5.6vw)); padding-inline:16px; }
  body.portal .card .btn > .icon{ display:none; }
}

/* ---- Public pages (landing, badge, sign in, code, errors) ---- */
.att-public{ max-width:560px; margin:0 auto; text-align:left; }
.att-public h1{ font-size:var(--toa-p-h1); margin-bottom:var(--sp-3); }
.att-public .att-lead{ margin-bottom:var(--sp-2); }
.att-public .actions{ margin-top:var(--sp-5); }
.att-public .att-secondary{ margin-top:var(--sp-4); }
.att-public .alert{ margin:var(--sp-3) 0 var(--sp-4); }
.att-staff{ margin-top:var(--sp-7) !important; padding-top:var(--sp-4); border-top:1px solid var(--bp-line-soft); }
.att-form{ margin-top:var(--sp-5); }
.att-form .actions{ margin-top:var(--sp-4); }
.att-email-line{ overflow-wrap:anywhere; }
.att-email-line strong{ color:var(--bp-text); }
.att-resend .actions{ margin-top:var(--sp-3); }
.att-error{ padding-top:var(--sp-2); }
@media (min-width:640px){ .att-public .btn-primary{ min-width:220px; } }

/* ---- Public pages, everything centered (owner 2026-09-29: "make sure everything is centered") ---- */
.att-public{ text-align:center; }
.att-public .actions{ justify-content:center; }
.att-public .alert{ text-align:left; }
.att-public.att-center{ max-width:440px; }
.att-center .field{ align-items:stretch; text-align:center; }
.att-center .field-label, .att-center .field-hint, .att-center .field-error{ text-align:center; }
.att-center [data-code-input]{ text-align:center; letter-spacing:.2em; align-self:center; width:min(100%, 280px); }
.att-center .att-shared{ width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; }
.att-center .att-shared{ flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--sp-2); }
.att-center .att-shared .check{ margin-top:0; }
.att-center .att-shared label{ align-items:center; text-align:center; }

/* ---- Today ---- */
.att-checkin{
  display:flex; align-items:flex-start; gap:12px; padding:16px 20px; margin-bottom:var(--sp-5);
  font-size:var(--toa-p-body); line-height:var(--toa-lh-body); color:var(--toa-warn-text);
  background:var(--toa-warn-soft); border:1px solid var(--toa-warn-line); border-radius:var(--toa-r-dense);
}
.att-checkin > .icon{ flex:none; margin-top:.15em; }
.card + .att-checkin, .att-block + .att-checkin{ margin-top:var(--sp-5); }
.att-checkin.is-done{ color:var(--toa-ok-text); background:var(--toa-ok-soft); border-color:var(--toa-ok-line); }
.att-checkin.is-done > .icon{ color:var(--toa-ok-line); }
.att-todo h2{ margin-bottom:var(--sp-4); }
.att-todo-list{ display:flex; flex-direction:column; gap:var(--sp-4); }
.att-todo-item .btn{ width:100%; }
.att-todo-item .att-note{ color:var(--bp-text); }
@media (min-width:640px){ .att-todo-item .btn{ width:auto; min-width:280px; } }
.att-schedule{ margin-top:var(--sp-7); }
.att-schedule h2{ margin-bottom:var(--sp-3); }
.att-schedule .agenda-list{ border-top:1px solid var(--bp-line-soft); }
.att-schedule .agenda-item{ padding:14px 0; }
.att-schedule .agenda-item.is-now{ margin-inline:-8px; padding-inline:8px; border-radius:var(--toa-r-dense); border-bottom-color:transparent; }
.agenda-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.att-earlier > summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:56px; cursor:pointer;
  list-style:none; font-size:var(--toa-p-body); font-weight:600; color:var(--bp-text); border-top:1px solid var(--bp-line-soft);
}
.att-earlier > summary::-webkit-details-marker{ display:none; }
.att-fake-link{ color:var(--bp-navy); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.att-earlier:not([open]) [data-when-open], .att-earlier[open] [data-when-closed]{ display:none; }
.att-earlier > .agenda-list{ margin-bottom:0; }
.att-earlier + .agenda-list{ border-top:1px solid var(--bp-line-soft); }
.att-dates{ font-size:var(--toa-p-body); font-weight:600; margin-top:calc(-1 * var(--sp-2)); }
.att-facts{ display:flex; flex-direction:column; gap:var(--sp-3); margin:var(--sp-5) 0; }
.att-facts > div{ display:flex; flex-direction:column; gap:2px; }
.att-facts dt{ font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-text-slate); }
.att-facts dd{ margin:0; font-size:var(--toa-p-body); color:var(--bp-text); overflow-wrap:anywhere; }
.att-ask{ font-weight:600; }
.att-pillrow{ margin-bottom:var(--sp-2); }
.att-plans{ display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.att-plans .text-link{ font-size:var(--toa-p-secondary); }
.att-after-name{ font-weight:600; }
.att-after-list{ margin:var(--sp-4) 0 0; padding-left:1.2em; list-style:disc; }
.att-after-list li + li{ margin-top:var(--sp-1); }

/* ---- Academy select (only for people on more than one Academy) ---- */
.att-switch{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin:0 0 var(--sp-5); }
.att-switch .field{ flex:1 1 260px; min-width:0; }
.att-switch.is-auto .att-switch-go{ display:none; }

/* ---- Tests tab ---- */
.att-test h2{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px; }
.att-h-date{ font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-text-slate); }
.att-score{ font-size:1.75rem; font-weight:700; line-height:1.25; color:var(--bp-text); }
.att-score + .att-secondary{ margin-top:var(--sp-1) !important; }
.att-test .actions{ margin-top:var(--sp-4); }
.att-topics-h{ margin-top:var(--sp-5); }
.att-topics{ padding-left:1.2em; list-style:disc; }
.att-topics li + li{ margin-top:var(--sp-1); }
.att-topics li::marker{ color:var(--bp-navy); }

/* ---- Certificate tab ---- */
.att-checklist{ display:flex; flex-direction:column; margin-top:var(--sp-4); border-top:1px solid var(--bp-line-soft); }
.att-check{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--bp-line-soft); font-size:var(--toa-p-body); line-height:var(--toa-lh-body); }
.att-check > .icon{ flex:none; margin-top:.15em; }
.att-check-success{ color:var(--toa-ok-text); }
.att-check-success > .icon{ color:var(--toa-ok-line); }
.att-check-warning{ color:var(--toa-warn-text); }
.att-check-neutral{ color:var(--toa-neutral-text); }
.att-check-danger{ color:var(--toa-bad-text); }
.att-check-danger > .icon{ color:var(--toa-bad-line); }
.att-cert .actions{ margin-top:var(--sp-4); }
.att-linkedin{ margin-top:var(--sp-3); }
.att-linkedin > summary{ list-style:none; }
.att-linkedin > summary::-webkit-details-marker{ display:none; }
.att-linkedin-body{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--bp-line-soft); }
.att-copy-list{ margin:var(--sp-3) 0 0; }
.att-copy-row{ padding:12px 0; border-bottom:1px solid var(--bp-line-soft); }
.att-copy-row dt{ font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-text-slate); }
.att-copy-row dd{ margin:4px 0 0; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.att-copy-value{ font-size:var(--toa-p-secondary); color:var(--bp-text); font-weight:600; overflow-wrap:anywhere; min-width:0; flex:1 1 160px; }
body.portal .att-copy-btn{ width:auto; min-width:120px; flex:none; }
@media (max-width:639px){ body.portal .att-linkedin > summary.btn{ width:100%; } }

/* ---- My Details ---- */
.att-disclosure{ margin-top:var(--sp-2); }
.att-disclosure > summary{ cursor:pointer; list-style:none; }
.att-disclosure > summary::-webkit-details-marker{ display:none; }
.att-disclosure .att-form{ margin-top:var(--sp-2); margin-bottom:var(--sp-4); }
.att-emails{ display:flex; flex-direction:column; margin-bottom:var(--sp-4); border-top:1px solid var(--bp-line-soft); }
.att-emails li{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:12px 0; border-bottom:1px solid var(--bp-line-soft); }
.att-email{ font-weight:600; overflow-wrap:anywhere; min-width:0; }
.att-email-change > summary{ list-style:none; }
.att-email-change > summary::-webkit-details-marker{ display:none; }
.att-email-change[open] > summary{ display:none; }
.att-inline{ margin-top:var(--sp-4); padding:var(--sp-5); background:var(--bp-surface-cream); border-radius:var(--toa-r-dense); }
.att-inline h3, .att-inline p, .att-block .alert{ overflow-wrap:anywhere; }
.att-inline .att-form{ margin-top:var(--sp-4); }
.att-email-change .att-inline{ margin-top:0; }
.att-cancel{ margin-top:var(--sp-2); }
.att-radios{ border:0; margin:0; padding:0; min-width:0; }
.att-radios legend{ padding:0; margin-bottom:var(--sp-2); }
.att-radio{ display:flex; align-items:center; gap:12px; min-height:var(--toa-tap); padding:4px 0; cursor:pointer; font-size:var(--toa-p-secondary); color:var(--bp-text); }
.att-radio input{ width:28px; height:28px; margin:0; flex:none; accent-color:var(--bp-navy); }
.att-devices{ display:flex; flex-direction:column; margin-top:var(--sp-4); border-top:1px solid var(--bp-line-soft); }
.att-device{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-4) 0; border-bottom:1px solid var(--bp-line-soft); }
.att-device .inline-form{ width:100%; }
@media (min-width:640px){ .att-device .inline-form{ width:auto; } }
.att-signout{ margin-top:var(--sp-7); }

/* ---- Past Academies ---- */
.att-history{ display:flex; flex-direction:column; gap:var(--sp-5); }
.att-history .card + .card{ margin-top:0; }
.att-hist p + p, .att-hist .att-secondary + p{ margin-top:var(--sp-3); }

/* ---- Test, question view (DESIGN 4.8) ---- */
.exam-h1{ font-size:var(--toa-p-h1); margin-bottom:var(--sp-5); }
.exam .alert{ margin-bottom:var(--sp-4); }
.exam [hidden]{ display:none !important; }
.exam-top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px var(--sp-4);
  margin-bottom:var(--sp-4); font-size:var(--toa-p-secondary); font-weight:600; line-height:1.4;
}
.exam-where{ color:var(--bp-text); }
.exam-save{ display:inline-flex; align-items:center; gap:6px; min-height:28px; color:var(--toa-ok-text); }
.exam-save[data-mode="saving"]{ color:var(--bp-text-slate); }
.exam-save[data-mode="offline"]{ color:var(--toa-warn-text); background:var(--toa-warn-soft); padding:6px 12px; border-radius:var(--toa-r-control); flex-basis:100%; }
.exam-save-icon{ display:inline-flex; flex:none; }
.exam-save-icon .icon{ width:20px; height:20px; }
.exam-spinner{ display:inline-block; width:18px; height:18px; border-radius:50%; border:2.5px solid var(--bp-line); border-top-color:var(--bp-navy); animation:exam-spin .8s linear infinite; }
@keyframes exam-spin{ to{ transform:rotate(360deg); } }
.q-screen{ background:none; border:0; padding:0; }
.q-legend{ display:block; padding:0; margin:0 0 var(--sp-5); width:100%; }
body.portal .q-stem, .q-stem{ overflow-wrap:anywhere; font-size:var(--toa-p-question); font-weight:700; line-height:1.35; letter-spacing:normal; color:var(--bp-text); margin:0; }
.q-stem:focus{ outline:none; }
.q-stem:focus-visible{ outline:var(--toa-focus); outline-offset:3px; }
.q-options{ display:flex; flex-direction:column; gap:var(--sp-3); }
.opt-card{
  min-height:64px; gap:14px; padding:12px 16px; border:2px solid var(--toa-line-control); border-radius:var(--toa-r-control);
  background:var(--bp-white); font-size:var(--toa-p-body); font-weight:500; line-height:1.35; color:var(--bp-text);
}
@media (hover:hover) and (pointer:fine){ .opt-card:hover{ border-color:var(--bp-navy); } }
.opt-letter{ width:40px; height:40px; font-size:1.125rem; font-weight:700; background:var(--bp-white); border:2px solid var(--toa-line-control); color:var(--bp-text); }
.opt-card:has(.opt-input:checked){ border:3px solid var(--bp-navy); padding:11px 15px; background:var(--bp-surface-cream); box-shadow:none; }
.opt-input:checked + .opt-letter{ background:var(--bp-navy); color:var(--bp-white); border-color:var(--bp-navy); }
.opt-sel{ align-items:center; gap:4px; font-size:1rem; font-weight:600; color:var(--bp-text); }
.opt-input:checked ~ .opt-sel{ display:inline-flex; }
.opt-card:has(.opt-input:disabled){ opacity:1; }
.q-nav{ display:flex; gap:var(--sp-3); margin-top:var(--sp-5); }
.q-nav .btn{ flex:1 1 0; min-width:0; }
/* Previous and Next sit side by side at 50%. When a label cannot fit beside the other (the
   last question's "See All Answers" on a 320px phone or at large text sizes) the pair wraps,
   the gold button on top, each full width; labels never wrap. */
body.portal .q-nav{ flex-wrap:wrap-reverse; }
body.portal .q-nav .btn{ flex:1 1 0; min-width:max-content; }
.q-nav .btn[aria-disabled="true"]{ color:var(--bp-text-slate); border-color:var(--bp-line); background:var(--bp-white); }
.exam-seeall{ margin-top:var(--sp-4); }
.exam-who{ margin-top:var(--sp-7); padding-top:var(--sp-4); border-top:1px solid var(--bp-line-soft); font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.exam-who strong{ color:var(--bp-text); }
.exam-who .inline-form{ display:flex; }
.exam-who .text-link{ font-size:var(--toa-p-secondary); }

/* ---- Test, All Questions view (DESIGN 4.9) ---- */
.exam-all h1{ font-size:var(--toa-p-h1); margin-bottom:var(--sp-4); }
.exam-all h1:focus{ outline:none; }
.exam-all h1:focus-visible{ outline:var(--toa-focus); outline-offset:3px; }
.att-status-card .actions{ margin-top:var(--sp-4); }
.att-status-card .att-icon-head{ font-size:var(--toa-p-body); }
.exam-all-list{ display:flex; flex-direction:column; margin-top:var(--sp-5); border-top:1px solid var(--bp-line-soft); }
.exam-all-item{
  width:100%; display:flex; flex-direction:column; align-items:stretch; gap:4px; min-height:64px; padding:12px 4px;
  background:none; border:0; border-bottom:1px solid var(--bp-line-soft); text-align:left; cursor:pointer; color:var(--bp-text); font:inherit;
}
@media (hover:hover) and (pointer:fine){ .exam-all-item:hover{ background:var(--bp-surface-gray); } }
.exam-all-stem{ display:block; font-size:var(--toa-p-secondary); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; }
.exam-all-num{ font-weight:700; color:var(--bp-text); }
.exam-all-ans{ display:flex; align-items:center; gap:6px; font-size:var(--toa-p-secondary); font-weight:600; white-space:normal; color:var(--bp-text); overflow-wrap:anywhere; }
.exam-all-ans.is-open{ color:var(--toa-warn-text); }
.exam-all-ans .icon{ flex:none; }

/* ---- Test, locked and review (DESIGN 4.7, 4.10) ---- */
.exam-state-card{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); text-align:left; }
.exam-state-card > .icon{ color:currentColor; }
.exam-state-card .actions{ margin-top:var(--sp-2); width:100%; }
.exam-result .att-secondary{ margin-top:var(--sp-2); }
.exam-review{ display:flex; flex-direction:column; gap:var(--sp-5); margin-top:var(--sp-5); }
.review-num{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-text); }
body.portal .review-stem{ font-size:var(--toa-p-h3); line-height:1.35; margin:var(--sp-2) 0 0; }
.review-options{ gap:var(--sp-2); margin:var(--sp-4) 0; }
.review-opt{ padding:10px 14px; border:2px solid var(--bp-line); border-radius:var(--toa-r-control); font-size:var(--toa-p-body); font-weight:500; color:var(--bp-text); background:var(--bp-white); }
.review-opt .opt-letter{ width:36px; height:36px; font-size:1rem; }
.review-opt.is-correct{ border-color:var(--toa-ok-line); background:var(--toa-ok-soft); }
.review-opt.is-chosen:not(.is-correct){ border-color:var(--toa-bad-line); background:var(--toa-bad-soft); }
.review-tags{ gap:8px; }
.review-tags .pill{ font-size:1rem; padding:0 14px; }
.review-tags .pill-success{ color:var(--toa-ok-text); background:var(--toa-ok-soft); border-color:var(--toa-ok-line); }
.review-tags .pill-danger{ color:var(--toa-bad-text); background:var(--bp-white); border-color:var(--toa-bad-line); }
.review-tags .pill-info{ color:var(--toa-info-text); background:var(--bp-white); border-color:var(--bp-navy); }
.review-room{ font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-text); }

/* ---- Feedback (DESIGN 4.11) ---- */
.fb-days{ display:flex; gap:0; margin:0 0 var(--sp-5); border:2px solid var(--toa-line-control); border-radius:var(--bp-r-pill); overflow:hidden; width:max-content; max-width:100%; }
.fb-day-link{ min-height:var(--toa-tap); padding:0 22px; border:0; border-radius:0; font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-navy); display:inline-flex; align-items:center; }
.fb-day-link + .fb-day-link{ border-left:2px solid var(--toa-line-control); }
.fb-day-link[aria-current="page"]{ background:var(--bp-navy); color:var(--bp-white); }
.fb-progress{ margin-bottom:var(--sp-5); }
.fb-progress-words{ font-size:var(--toa-p-body); font-weight:600; margin-bottom:var(--sp-2); }
.fb-progress .bar{ height:12px; margin:0; }
.fb-section + .fb-section{ margin-top:var(--sp-4); }
.fb-summary{ min-height:72px; padding:var(--sp-4) var(--sp-5); gap:var(--sp-3); flex-wrap:wrap; }
details.fb-section > .fb-summary::after{ content:none; display:none; }
@media (hover:hover) and (pointer:fine){ details.fb-section > .fb-summary:hover{ background:var(--bp-surface-gray); } }
.fb-summary-text{ flex:1 1 200px; }
.fb-class-title{ font-size:var(--toa-p-h3); font-weight:700; line-height:1.3; color:var(--bp-text); }
.fb-class-meta{ font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.fb-missed-note{ font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.fb-toggle{ white-space:nowrap; font-size:var(--toa-p-body); font-weight:600; color:var(--bp-navy); text-decoration:underline; text-underline-offset:3px; }
details.fb-section:not([open]) .fb-toggle-open, details.fb-section[open] .fb-toggle-closed{ display:none; }
.fb-body{ padding:0 var(--sp-5) var(--sp-5); border-top:1px solid var(--bp-line-soft); }
.fb-q{ font-size:var(--toa-p-body); font-weight:700; line-height:1.4; color:var(--bp-text); }
.fb-choice-box{ min-height:56px; border:2px solid var(--toa-line-control); border-radius:var(--toa-r-control); font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-text); }
.fb-num{ width:40px; height:40px; font-size:1.125rem; border-radius:50%; background:var(--bp-surface-gray); color:var(--bp-text); }
@media (hover:hover) and (pointer:fine){ .fb-choice:hover .fb-choice-box{ border-color:var(--bp-navy); } }
.fb-choice input:checked + .fb-choice-box{ background:var(--bp-gold); border-color:var(--bp-navy); color:var(--bp-navy); }
.fb-choice input:checked + .fb-choice-box .fb-num{ background:var(--bp-navy); color:var(--bp-white); }
@media (min-width:600px){ .fb-choice-box{ min-height:96px; font-size:1rem; } }
.fb-missed{ padding:var(--sp-4) 0 0; border-bottom:0; margin-top:var(--sp-4); border-top:1px solid var(--bp-line-soft); }
.fb-missed label{ font-size:var(--toa-p-body); }
.fb-save{ min-height:1.5em; margin-top:var(--sp-3); font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-text-slate); }
.fb-save[data-tone="success"]{ color:var(--toa-ok-text); }
.fb-save[data-tone="warning"]{ color:var(--toa-warn-text); }
.fb-save[data-tone="danger"]{ color:var(--toa-bad-text); }
.fb-later{ margin-top:var(--sp-5); font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.fb-later + .fb-section{ margin-top:var(--sp-5); }
.fb-day > h2{ padding:var(--sp-5) var(--sp-5) var(--sp-3); margin:0; }
.fb-actions{ margin-top:var(--sp-6); }
@media (max-width:560px){
  .fb-summary{ padding:var(--sp-4); }
  .fb-body{ padding:0 var(--sp-4) var(--sp-4); }
  .fb-day > h2{ padding:var(--sp-4) var(--sp-4) var(--sp-3); }
}
/* === end attendee === */

/* === host-day === */
/* Host day-of screens (DESIGN.md 5.3, 5.4, 5.9 to 5.14): Academy page (Today, Get Ready),
   tests list, test page and its tabs, Check Answers, Present the Review, the check-in
   board and Kiosks & Projectors. Console sizes: body 18px, secondary 16px, nothing smaller. */

/* Shared bits */
.hd-crumb{ margin:0 0 var(--sp-2); font-size:var(--toa-c-secondary); }
.hd-crumb .link{ display:inline-flex; align-items:center; gap:6px; }
.hd-head{ margin-bottom:var(--sp-5); }
.hd-line{ margin:var(--sp-3) 0 0; font-size:var(--toa-c-body); color:var(--bp-text); max-width:72ch; }
.hd-line:first-child{ margin-top:0; }
.hd-note{ margin:var(--sp-3) 0 0; font-size:var(--toa-c-secondary); color:var(--bp-text-slate); display:flex; gap:8px; align-items:flex-start; max-width:72ch; }
.hd-note > .icon{ flex:none; margin-top:2px; }
.hd-gap{ margin-top:var(--sp-4); }
.hd-section-title{ margin:var(--sp-7) 0 var(--sp-3); }
.hd-picker{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin:0 0 var(--sp-5); }
.hd-picker .field{ flex:1 1 260px; min-width:0; max-width:520px; }
.hd-inline-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-top:var(--sp-4); }
.hd-inline-form .field{ flex:1 1 220px; min-width:0; }
.hd-form-card{ max-width:720px; }
.hd-form-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.hd-clip{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }

/* Segmented control (Academy tabs, Check Answers views, day switch): 48px, current is navy.
   Scrolls inside its own row on phones; the page never scrolls sideways. */
.hd-seg{
  display:flex; gap:4px; width:max-content; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 0 var(--sp-5); padding:4px; background:var(--bp-white); border:1px solid var(--bp-line); border-radius:var(--bp-r-pill);
}
.hd-seg-item{
  flex:none; display:inline-flex; align-items:center; min-height:var(--toa-tap); padding:0 20px;
  border-radius:var(--bp-r-pill); font-size:var(--toa-c-secondary); font-weight:600; color:var(--bp-navy);
  text-decoration:none; white-space:nowrap;
}
@media (hover:hover) and (pointer:fine){ .hd-seg-item:hover{ background:var(--bp-surface-gray); } }
.hd-seg-item[aria-current="page"]{ background:var(--bp-navy); color:var(--bp-white); }
/* Phones: every tab stays in sight, laid out evenly (never a row with one item left over):
   two equal columns; three items stack as one column; an odd last item takes the full row. */
@media (max-width:559px){
  .hd-seg{ display:grid; grid-template-columns:1fr 1fr; width:100%; overflow:visible; border-radius:var(--toa-r-dense); }
  .hd-seg:has(> .hd-seg-item:nth-child(3):last-child){ grid-template-columns:1fr; }
  .hd-seg > .hd-seg-item:last-child:nth-child(odd):not(:nth-child(3)){ grid-column:1 / -1; }
  .hd-seg-item{ justify-content:center; padding:0 14px; min-width:0; }
}

/* Test page tab strip: text tabs with the gold underline, like the header nav. */
.hd-tabs{ margin:var(--sp-6) 0 var(--sp-5); border-bottom:1px solid var(--bp-line); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.hd-tabs ul{ display:flex; gap:var(--sp-5); list-style:none; margin:0; padding:0; width:max-content; }
.hd-tab{
  display:inline-flex; align-items:center; min-height:var(--toa-tap); padding:0 2px; margin-bottom:-1px;
  font-size:var(--toa-c-body); font-weight:600; color:var(--bp-navy); text-decoration:none; white-space:nowrap;
  border-bottom:3px solid transparent;
}
@media (hover:hover) and (pointer:fine){ .hd-tab:hover{ border-bottom-color:var(--bp-line); } }
.hd-tab[aria-current="page"]{ border-bottom-color:var(--bp-gold); }
/* Phones and tablets: the five tabs wrap onto two rows so none hides off the edge. */
@media (max-width:767px){
  .hd-tabs{ overflow:visible; padding-bottom:var(--sp-2); }
  .hd-tabs ul{ flex-wrap:wrap; width:auto; gap:0 var(--sp-5); }
  .hd-tab{ margin-bottom:0; }
}

/* Chips (filters): 48px, one line, scroll inside their row on phones. */
.hd-chips{ display:flex; gap:var(--sp-2); overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; border:0; margin:0; padding:2px; min-width:0; }
.hd-chip, .hd-chip-radio > span{
  flex:none; display:inline-flex; align-items:center; min-height:var(--toa-tap); padding:0 18px;
  border-radius:var(--bp-r-pill); border:2px solid var(--toa-line-control); background:var(--bp-white);
  font-size:var(--toa-c-secondary); font-weight:600; color:var(--bp-navy); text-decoration:none; white-space:nowrap; cursor:pointer;
}
@media (hover:hover) and (pointer:fine){ .hd-chip:hover, .hd-chip-radio > span:hover{ border-color:var(--bp-navy); } }
.hd-chip[aria-current="page"], .hd-chip-radio input:checked + span{ background:var(--bp-surface-cream); border-color:var(--bp-navy); }
.hd-chip-radio{ flex:none; display:inline-flex; position:relative; }
.hd-chip-radio input{ position:absolute; opacity:0; width:1px; height:1px; }
.hd-chip-radio input:focus-visible + span{ outline:var(--toa-focus); outline-offset:3px; }

/* Lists of rows (Didn't Submit, Other Academies, By Person on phones, Who's Missing) */
.hd-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; border-top:1px solid var(--bp-line-soft); }
.hd-list-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--bp-line-soft); min-height:72px; }
.hd-list-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 240px; }
.hd-list-name{ font-size:var(--toa-c-body); font-weight:600; color:var(--bp-text); margin:0; overflow-wrap:anywhere; }
.hd-list-facts{ font-size:var(--toa-c-secondary); color:var(--bp-text-slate); }
.hd-block + .hd-block{ margin-top:var(--sp-5); }
.hd-block h2{ margin-bottom:var(--sp-2); }
.hd-empty .hd-line{ margin:0; }
.hd-done{ display:flex; flex-direction:column; gap:var(--sp-2); }
.hd-done p{ margin:0; font-size:var(--toa-c-body); }
.hd-others{ margin-top:var(--sp-7); }

/* Next step card (test page and Today) */
.hd-next{ margin-bottom:var(--sp-5); }
.hd-next h2{ margin-bottom:var(--sp-2); }
.hd-next-sentence{ margin:0; font-size:1.25rem; font-weight:600; color:var(--bp-text); max-width:60ch; }
.hd-next-actions{ margin-top:var(--sp-4); }
.hd-warn-line{ display:flex; gap:8px; align-items:flex-start; margin:var(--sp-3) 0 0; font-size:var(--toa-c-secondary); font-weight:600; color:var(--toa-warn-text); }
.hd-warn-line .icon{ flex:none; margin-top:1px; }
.hd-late-alert{ margin-bottom:var(--sp-5); }
.hd-late-alert .link{ align-self:flex-start; }

/* Steps (Get Ready checklist and Today run sheet) */
.hd-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.hd-step{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--sp-4); align-items:start;
  background:var(--bp-white); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); padding:var(--sp-5) var(--sp-6);
}
.hd-step-n{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:2px solid var(--bp-navy); color:var(--bp-navy); font-size:1.125rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.hd-step-body{ min-width:0; }
.hd-step-head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); }
.hd-step-title{ font-size:var(--toa-c-h3); margin:0; }
.hd-step-line{ margin:var(--sp-2) 0 0; font-size:var(--toa-c-body); color:var(--bp-text); max-width:70ch; }
.hd-step .actions{ margin-top:var(--sp-4); }
.hd-step.is-problem{ border:2px solid var(--toa-bad-line); }
.hd-step.is-problem .hd-step-n{ border-color:var(--toa-bad-line); color:var(--toa-bad-text); }
.hd-step.is-done, .hd-step.is-complete{ background:var(--bp-white); }
.hd-step.is-done{ padding-block:var(--sp-3); align-items:center; }
.hd-step.is-done .hd-step-n, .hd-step.is-complete .hd-step-n{ background:var(--toa-ok-soft); border-color:var(--toa-ok-line); color:var(--toa-ok-text); }
.hd-step-fold{ margin:0; font-size:var(--toa-c-body); color:var(--bp-text); }
@media (max-width:639px){
  .hd-step{ grid-template-columns:minmax(0,1fr); gap:var(--sp-2); padding:var(--sp-4); }
  .hd-step.is-done{ grid-template-columns:44px minmax(0,1fr); gap:var(--sp-3); }
  .hd-step .actions > .btn, .hd-step .actions > .inline-form, .hd-step .actions > .inline-form .btn,
  .hd-next-actions > .btn, .hd-next-actions > .inline-form, .hd-next-actions > .inline-form .btn{ width:100%; }
}

/* Academy page: Schedule and Details tabs */
.hd-day{ font-size:var(--toa-c-body); margin:var(--sp-6) 0 var(--sp-2); }
.hd-kv{ display:grid; gap:0; margin:var(--sp-4) 0 0; border-top:1px solid var(--bp-line-soft); }
.hd-kv > div{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--bp-line-soft); }
.hd-kv dt{ font-size:var(--toa-c-secondary); font-weight:600; color:var(--bp-text); }
.hd-kv dd{ margin:0; font-size:var(--toa-c-body); color:var(--bp-text); overflow-wrap:anywhere; }
@media (max-width:639px){ .hd-kv > div{ grid-template-columns:minmax(0,1fr); gap:2px; } }

/* Tests list: one row per test */
.hd-rows{ list-style:none; margin:0; padding:0; background:var(--bp-white); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); }
.hd-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--sp-2) var(--sp-5); align-items:center;
  padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--bp-line-soft); min-height:88px;
}
.hd-row:last-child{ border-bottom:0; }
.hd-row-main{ min-width:0; }
.hd-row-title{ font-size:var(--toa-c-h3); margin:0; }
.hd-row-title a{ color:var(--bp-navy); }
.hd-row-facts{ margin:4px 0 0; font-size:var(--toa-c-secondary); color:var(--bp-text-slate); }
.hd-row-status{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:flex-end; }
.hd-row-link{ grid-column:1 / -1; margin:0; font-size:var(--toa-c-secondary); }
@media (max-width:767px){
  .hd-row{ grid-template-columns:minmax(0,1fr); padding:var(--sp-4); }
  .hd-row-status{ justify-content:flex-start; }
  .hd-row-action .btn{ width:100%; }
}

/* Who's Answering */
.hd-summary{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin:var(--sp-3) 0 var(--sp-4); padding:0; }
.hd-summary li{ display:inline-flex; align-items:center; gap:8px; font-size:var(--toa-c-body); }
.hd-sync-table tbody th{ font-weight:600; white-space:nowrap; }
/* Phones: name, district, then status, answered and last seen on one wrapping line. */
@media (max-width:767px){
  .table-stack.hd-sync-table td{ display:inline-flex; align-items:center; width:auto; min-height:36px; margin:4px 16px 0 0; vertical-align:middle; }
  .table-stack.hd-sync-table td:first-of-type{ display:block; width:100%; min-height:0; margin:0; }
  .table-stack.hd-sync-table td .pill{ margin-top:0; }
}

/* Check Answers: Needs Attention */
.hd-late{ padding:var(--sp-4) 0; border-bottom:1px solid var(--bp-line-soft); }
.hd-late > p{ margin:0; }
.hd-late-answer{ font-size:var(--toa-c-body); margin-top:4px !important; }
.hd-neutral-line{ display:flex; align-items:center; gap:6px; margin-top:var(--sp-2) !important; font-size:var(--toa-c-secondary); font-weight:600; color:var(--toa-neutral-text); }
.hd-late-form{ margin-top:var(--sp-3); }
.hd-late-form .field{ max-width:none; }
.hd-late-form .actions{ margin-top:var(--sp-3); }

/* Check Answers: By Question */
.hd-qlist{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.hd-q{ background:var(--bp-white); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); }
.hd-q > summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px var(--sp-4);
  padding:var(--sp-4) var(--sp-5); min-height:64px; border-radius:var(--toa-r-dense);
}
.hd-q > summary::-webkit-details-marker{ display:none; }
@media (hover:hover) and (pointer:fine){ .hd-q > summary:hover{ background:#FAFAFA; } }
.hd-q-num{ font-size:var(--toa-c-secondary); font-weight:700; color:var(--bp-text); margin:0; }
.hd-q-stem{ grid-column:1; font-size:var(--toa-c-body); color:var(--bp-text); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.hd-q[open] .hd-q-stem{ -webkit-line-clamp:unset; display:block; }
.hd-q-stat{ grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; gap:var(--sp-3); font-size:var(--toa-c-body); white-space:nowrap; }
.hd-q-bar{ width:140px; flex:none; }
.hd-q-key{ grid-column:1; font-size:var(--toa-c-secondary); color:var(--bp-text-slate); }
.hd-q-more{ grid-column:2; justify-self:end; color:var(--bp-navy); transition:transform .15s ease; }
.hd-q[open] .hd-q-more{ transform:rotate(180deg); }
.hd-q-body{ padding:0 var(--sp-5) var(--sp-5); border-top:1px solid var(--bp-line-soft); }
.hd-q-opts{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.hd-q-opts li{ display:flex; flex-direction:column; gap:4px; padding:var(--sp-3) var(--sp-4); border:1px solid var(--bp-line-soft); border-radius:var(--toa-r-control); }
.hd-q-opts li.is-correct{ border:2px solid var(--toa-ok-line); background:var(--toa-ok-soft); }
.hd-q-opt{ font-size:var(--toa-c-body); font-weight:600; color:var(--bp-text); }
.hd-q-names{ font-size:var(--toa-c-secondary); color:var(--bp-text); margin:var(--sp-2) 0 0; line-height:1.9; }
@media (max-width:767px){
  .hd-q > summary{ grid-template-columns:minmax(0,1fr); }
  .hd-q-stat, .hd-q-more{ grid-column:1; grid-row:auto; }
  .hd-q-more{ justify-self:start; }
}

/* Check Answers: By Person. Name, Score and Status stay put while the questions scroll. */
.hd-person-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.hd-person-bar .hd-chips{ flex:1 1 auto; }
.hd-legend{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin:var(--sp-3) 0 var(--sp-4); font-size:var(--toa-c-secondary); color:var(--bp-text); }
.hd-legend span{ display:inline-flex; align-items:center; white-space:pre; }
.hd-legend .icon{ margin-right:4px; }
.hd-grade{ font-size:var(--toa-c-secondary); }
.hd-grade .hd-g-name{ position:sticky; left:0; z-index:2; width:200px; min-width:200px; max-width:200px; white-space:normal; background:var(--bp-white); }
.hd-grade .hd-g-score{ position:sticky; left:200px; z-index:2; width:104px; min-width:104px; background:var(--bp-white); white-space:nowrap; font-weight:600; }
.hd-grade .hd-g-status{ position:sticky; left:304px; z-index:2; width:180px; min-width:180px; background:var(--bp-white); box-shadow:none; border-right:1px solid var(--bp-line); }
.hd-grade thead .hd-g-name, .hd-grade thead .hd-g-score, .hd-grade thead .hd-g-status{ background:var(--bp-surface-gray); z-index:3; }
.hd-grade tbody th.hd-g-name{ font-weight:600; }
.hd-grade tbody th.hd-g-name a{ overflow-wrap:anywhere; }
.hd-g-sub{ display:block; font-size:var(--toa-c-secondary); font-weight:400; color:var(--bp-text-slate); }
.hd-g-flag{ display:inline-flex; vertical-align:middle; color:var(--toa-warn-text); }
.hd-g-q{ text-align:center !important; min-width:72px; }
.hd-g-void{ display:block; font-weight:400; color:var(--bp-text-slate); }
.hd-g-cell{ text-align:center !important; white-space:nowrap; font-weight:700; }
.hd-g-cell .icon{ vertical-align:-4px; }
.hd-g-cell.is-right{ color:var(--toa-ok-text); }
.hd-g-cell.is-wrong{ color:var(--toa-bad-text); }
.hd-g-cell.is-void{ color:var(--bp-text-slate); }
.hd-g-mark{ margin-left:2px; color:var(--bp-text); }
.hd-g-none{ color:var(--bp-text-muted); font-weight:700; }
.hd-grade tr.is-cancelled th, .hd-grade tr.is-cancelled td{ color:var(--bp-text-slate); }
.hd-person-list{ display:none; }
@media (max-width:767px){
  .table-box:has(.hd-grade){ display:none; }
  .hd-person-list{ display:block; }
}

/* Fix a Question and one person's answers */
.hd-fix-list{ margin-top:var(--sp-4); }
.hd-fix-stem{ margin:4px 0 0; font-size:var(--toa-c-h3); font-weight:700; line-height:var(--toa-lh-head); color:var(--bp-text); }
.hd-effect{ margin:0; padding:var(--sp-3) var(--sp-4); border-radius:var(--toa-r-control); background:var(--toa-warn-soft); border:1px solid var(--toa-warn-line); color:var(--toa-warn-text); font-weight:600; font-size:var(--toa-c-body); }
.fix-form-wrap > summary.btn{ list-style:none; }
body.console .fix-form{ background:var(--bp-surface-gray); border-radius:var(--toa-r-dense); }
body.console .fix-choice{ font-size:var(--toa-c-body); }
body.console .fix-choice input{ width:24px; height:24px; }
body.console .review-opt{ font-size:var(--toa-c-body); border-width:1px; border-color:var(--bp-line); }
body.console .review-opt.is-correct{ border:2px solid var(--toa-ok-line); }
body.console .review-opt.is-chosen:not(.is-correct){ border:2px solid var(--toa-bad-line); }
body.console .tag{ min-height:32px; padding:0 12px; font-weight:600; border:1px solid var(--bp-line); }
body.console .tag-correct{ color:var(--toa-ok-text); background:var(--bp-white); border-color:var(--toa-ok-line); }
body.console .tag-you{ color:var(--bp-navy); background:var(--bp-white); border-color:var(--bp-navy); }

/* Paper Tests: big letter buttons, searchable person picker */
.hd-paper-list{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:flex; flex-direction:column; }
.hd-paper-q{ padding:var(--sp-4) 0; border-top:1px solid var(--bp-line-soft); }
.hd-paper-q fieldset{ border:0; margin:0; padding:0; min-width:0; }
.hd-paper-q legend{ font-size:var(--toa-c-body); color:var(--bp-text); padding:0; margin-bottom:var(--sp-3); }
.hd-paper-num{ font-weight:700; }
.hd-letters{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.hd-letter{ position:relative; display:inline-flex; }
.hd-letter input{ position:absolute; opacity:0; width:1px; height:1px; }
.hd-letter > span:not(.sr-only){
  display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; cursor:pointer;
  border:2px solid var(--toa-line-control); background:var(--bp-white); color:var(--bp-navy); font-size:1.25rem; font-weight:700;
}
@media (hover:hover) and (pointer:fine){ .hd-letter > span:not(.sr-only):hover{ border-color:var(--bp-navy); } }
.hd-letter input:checked + span{ background:var(--bp-navy); border-color:var(--bp-navy); color:var(--bp-white); }
.hd-letter input:focus-visible + span{ outline:var(--toa-focus); outline-offset:3px; }
.hd-paper-now{ margin:var(--sp-2) 0 0; font-size:var(--toa-c-secondary); color:var(--bp-text-slate); }
.hd-paper-search{ max-width:520px; margin-top:var(--sp-3); }
.hd-pick-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; border-top:1px solid var(--bp-line-soft); max-height:560px; overflow-y:auto; }
.hd-pick{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px var(--sp-3); align-items:center; min-height:64px; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--bp-line-soft); text-decoration:none; color:var(--bp-text); }
@media (hover:hover) and (pointer:fine){ .hd-pick:hover{ background:var(--bp-surface-gray); } }
.hd-pick .hd-list-name{ text-decoration:underline; text-underline-offset:3px; }

/* Check-in board: tap to check in */
.hd-counts{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2) var(--sp-5); margin:0 0 var(--sp-3); }
.hd-count-big{ margin:0; font-size:1.5rem; font-weight:600; color:var(--bp-text); }
.hd-count-big strong{ font-size:var(--toa-c-stat); font-weight:700; font-variant-numeric:tabular-nums; }
.hd-count-left{ margin:0; font-size:var(--toa-c-body); font-weight:600; color:var(--bp-text-slate); }
.hd-kiosk-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px var(--sp-3); margin:0 0 var(--sp-5);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--toa-r-dense); background:var(--toa-ok-soft); border:1px solid var(--toa-ok-line); color:var(--toa-ok-text);
  font-size:var(--toa-c-body); font-weight:600;
}
.hd-kiosk-line.is-problem{ background:var(--toa-bad-soft); border-color:var(--toa-bad-line); color:var(--toa-bad-text); }
.hd-kiosk-line .link{ color:inherit; }
.hd-ci-toolbar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--sp-3) var(--sp-5); }
.hd-ci-search{ flex:1 1 320px; min-width:0; max-width:560px; }
.hd-ci-filter{ flex:0 1 auto; }
.hd-ci-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; border-top:1px solid var(--bp-line-soft); }
.hd-ci-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) 0; min-height:72px; border-bottom:1px solid var(--bp-line-soft); }
.hd-ci-row[hidden]{ display:none; }
.hd-ci-main{ display:flex; flex-direction:column; min-width:0; flex:1 1 220px; }
.hd-ci-name{ font-size:var(--toa-c-body); font-weight:600; color:var(--bp-text); overflow-wrap:anywhere; }
.hd-ci-district{ font-size:var(--toa-c-secondary); color:var(--bp-text-slate); }
.hd-ci-state{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--sp-3); flex:0 1 auto; }
.hd-ci-row.ci-flash{ background:var(--toa-ok-soft); transition:background .6s ease; }
.hd-ci-panel > summary{ list-style:none; }
.hd-ci-panel > summary::-webkit-details-marker{ display:none; }
.hd-ci-panel[open] > summary{ background:var(--bp-surface-gray); border-color:var(--bp-navy); }
.hd-ci-panel[open]{ flex-basis:100%; }
.hd-ci-form{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-top:var(--sp-3);
  padding:var(--sp-4); border-radius:var(--toa-r-dense); background:var(--bp-surface-cream);
}
.hd-reasons{ display:flex; flex-wrap:wrap; gap:var(--sp-2); border:0; margin:0; padding:0; min-width:0; flex:1 1 100%; }
.hd-reasons legend{ margin-bottom:var(--sp-2); padding:0; }
.hd-reason{ position:relative; display:inline-flex; }
.hd-reason input{ position:absolute; opacity:0; width:1px; height:1px; }
.hd-reason > span{
  display:inline-flex; align-items:center; min-height:var(--toa-tap); padding:0 20px; border-radius:var(--bp-r-pill);
  border:2px solid var(--toa-line-control); background:var(--bp-white); color:var(--bp-navy);
  font-size:var(--toa-c-secondary); font-weight:600; white-space:nowrap; cursor:pointer;
}
.hd-reason input:checked + span{ border-color:var(--bp-navy); background:var(--bp-navy); color:var(--bp-white); }
.hd-reason input:focus-visible + span{ outline:var(--toa-focus); outline-offset:3px; }
.hd-ci-other{ display:none; flex:1 1 240px; flex-direction:column; gap:6px; }
.hd-ci-other.is-open{ display:flex; }
html:not(.js) .hd-ci-other{ display:flex; }
.hd-ci-error{ flex-basis:100%; margin:0; color:var(--toa-bad-text); font-weight:600; font-size:var(--toa-c-secondary); }
.hd-ci-more{ margin-top:var(--sp-5); }
.hd-board .hd-note{ margin-top:var(--sp-4); }
@media (max-width:639px){
  .hd-ci-row{ align-items:flex-start; }
  .hd-ci-state{ justify-content:flex-start; flex-basis:100%; }
  .hd-ci-panel{ flex-basis:100%; }
  .hd-ci-panel > summary, .hd-ci-form .btn-primary{ width:100%; }
  .hd-ci-more .btn{ width:100%; }
  .hd-ci-filter{ flex:1 1 100%; flex-wrap:wrap; overflow:visible; }
  .hd-ci-filter .hd-chip-radio{ flex:1 1 auto; }
  .hd-ci-filter .hd-chip-radio > span{ flex:1 1 auto; justify-content:center; padding:0 10px; }
}

/* Kiosks & Projectors */
.hd-add-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3) var(--sp-4); }
.hd-add-form > .field{ flex:1 1 260px; min-width:0; }
.hd-add-form > .actions{ margin-top:0; flex:1 1 100%; }
.hd-add-card{ margin-bottom:var(--sp-5); }
.hd-device-grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr)); }
.hd-device-grid > .card + .card{ margin-top:0; }
.hd-device-name{ font-size:var(--toa-c-h3); margin:0; }
.hd-device .actions{ justify-content:space-between; }
.hd-device-page{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); align-items:start; }
.hd-device-page > .card + .card{ margin-top:0; }
.hd-pair-code{ margin:var(--sp-4) 0; font-size:clamp(3rem, 2rem + 4vw, 4.5rem); font-weight:700; letter-spacing:.12em; color:var(--bp-text); font-variant-numeric:tabular-nums; line-height:1.1; }
.hd-retired{ margin-top:var(--sp-7); }
.hd-retired > summary{ cursor:pointer; min-height:var(--toa-tap); display:flex; align-items:center; font-weight:600; font-size:var(--toa-c-body); }

/* Printable sign-in sheet */
.ci-sheet-logo{ display:block; height:64px; width:auto; margin-bottom:var(--sp-2); }

/* Present the Review: the remote. White, no nav, huge Previous / Next that never move. */
body.present{ background:var(--bp-white); overflow:hidden; }
.pr-main{
  box-sizing:border-box; height:100vh; height:100dvh; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:var(--sp-4); padding:var(--sp-4) var(--sp-7) var(--sp-6); overflow:hidden; max-width:1600px; margin:0 auto;
}
.pr-main:focus{ outline:none; }
.pr-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-width:0; }
.pr-top-line{ margin:0; font-size:1.25rem; font-weight:600; color:var(--bp-text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pr-exit{ flex:none; font-size:1.25rem; }
.pr-banner[hidden]{ display:none; }
.pr-banner:not([hidden]){ grid-row:2; }
.pr-center{ grid-row:3; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:var(--sp-3); min-height:0; overflow:hidden; }
.pr-count{ margin:0; font-size:clamp(1.75rem, 1.25rem + 1vw, 2.25rem); font-weight:700; color:var(--bp-text); }
.pr-stem{ margin:0; font-size:clamp(1.375rem, 1rem + 0.8vw, 1.875rem); line-height:1.4; color:var(--bp-text); max-width:60ch; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.pr-pct{ margin:0; min-height:1.5em; font-size:clamp(1.375rem, 1rem + 0.8vw, 1.875rem); font-weight:700; color:var(--bp-text); }
/* The answer choices under the question (owner 2026-09-29): letter, words, "Correct" on the right one(s), the room's share.
   The remote never scrolls its buttons, so a very long list scrolls inside this middle area only. */
.pr-center{ overflow-y:auto; justify-content:safe center; }
.pr-options{ list-style:none; margin:0; padding:0; width:min(100%, 880px); display:grid; gap:var(--sp-2); text-align:left; }
.pr-options:empty{ display:none; }
.pr-opt{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--sp-3);
  padding:6px 14px; border:2px solid var(--bp-line-soft); border-radius:14px; background:var(--bp-white);
  font-size:clamp(1.125rem, 1rem + 0.3vw, 1.375rem); line-height:1.3; color:var(--bp-text); }
.pr-opt.is-correct{ border-color:var(--green); background:var(--success-soft); }
.pr-opt-letter{ display:inline-flex; align-items:center; justify-content:center; min-width:2.1rem; height:2.1rem; border-radius:50%;
  border:2px solid var(--bp-line-soft); font-weight:700; }
.pr-opt.is-correct .pr-opt-letter{ background:var(--green); border-color:var(--green); color:#fff; }
.pr-opt-tag{ margin-left:var(--sp-2); font-weight:700; }
.pr-opt.is-correct .pr-opt-tag::before{ content:"¹3A0"; }
.pr-opt-pct{ font-weight:700; font-variant-numeric:tabular-nums; min-width:3.2em; text-align:right; }
.pr-center:has(.pr-options:not(:empty)) .pr-stem{ -webkit-line-clamp:3; }
/* Previous / Next: ordinary large pill buttons, side by side and centred (owner, 2026-09-28:
   the half-screen buttons were "too big" on a laptop). A fixed width per viewport, so the
   Next button never moves or grows when its label becomes "Show Room Average" (QA V31). */
.pr-buttons{ grid-row:4; display:flex; justify-content:center; align-items:center; gap:var(--sp-5); }
.pr-form{ display:flex; margin:0; }
.pr-btn{
  width:clamp(320px, 30vw, 380px); height:96px; white-space:nowrap;
  font-size:clamp(1.125rem, 1rem + 0.35vw, 1.5rem); gap:12px; padding:0 16px;
}
.pr-btn .icon{ width:24px; height:24px; }
.pr-no-arrow .icon{ display:none; }
@media (max-width:899px){
  .pr-main{ padding:var(--sp-3) var(--toa-gutter) var(--sp-4); gap:var(--sp-3); }
  .pr-top-line, .pr-exit{ font-size:1rem; }
  .pr-count{ font-size:1.5rem; }
  .pr-stem, .pr-pct{ font-size:1.125rem; }
  .pr-buttons{ flex-direction:column; align-items:stretch; gap:var(--sp-3); }
  .pr-form-next{ order:1; }
  .pr-form-prev{ order:2; }
  .pr-btn{ width:100%; height:80px; }
}
@media (max-height:520px){
  .pr-btn{ height:64px; }
}
/* === end host-day === */

/* === console === */
/* Rest of the console (DESIGN.md 5.2, 5.5 to 5.8, 5.15 to 5.20): All Academies, People,
   person page, roster, duplicates, Badges & Stickers, schedule editor, Feedback,
   Certificates, Downloads, Emails, Activity Log, Question Bank. Light only, 16px floor,
   flat surfaces, no left-border-only accents. */

/* Shared bits */
.c-crumb{ margin:0 0 var(--sp-1); font-size:var(--toa-c-secondary); }
.c-gap{ margin-top:var(--sp-3); }
.c-section{ margin-top:var(--sp-6); }
.c-section-title{ font-size:var(--toa-c-h2); margin-bottom:var(--sp-3); }
body.console .c-subhead{ font-size:var(--toa-c-h3); margin:var(--sp-5) 0 var(--sp-2); }
.c-meta{ font-size:var(--toa-c-secondary); color:var(--bp-text-slate); }
.c-block{ display:block; margin-top:2px; }
.c-break{ overflow-wrap:anywhere; word-break:break-word; }
.c-pills{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:var(--sp-3); }
.c-wrap{ flex-wrap:wrap; }
.c-wrap > div{ flex:1 1 260px; min-width:0; }
.c-bigline{ font-size:var(--toa-c-body); color:var(--bp-text); margin:var(--sp-5) 0; }
.page-header + .c-bigline, .c-picker + .c-bigline{ margin-top:0; }
.c-bigline strong{ font-size:1.375rem; }
.c-count{ font-size:var(--toa-c-secondary); color:var(--bp-text-slate); margin:var(--sp-4) 0 var(--sp-2); }
.c-alerts{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.c-alerts:empty{ display:none; }
.c-stats{ margin:0 0 var(--sp-5); }
body.console .c-stats .stat{ background:var(--bp-surface); border:1px solid var(--bp-line); padding:16px 20px; }
.c-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-top:var(--sp-4); }
.c-actions-cell{ white-space:nowrap; text-align:right; }
.c-actions-cell > * + *{ margin-left:var(--sp-2); }
.c-actions-cell .inline-form{ vertical-align:middle; }
.c-empty{ padding:var(--sp-7) var(--sp-6); background:var(--bp-surface); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); color:var(--bp-text); }
.c-empty p{ max-width:62ch; }
.c-bullets{ display:flex; flex-direction:column; gap:var(--sp-2); padding-left:1.2em; list-style:disc; }
.c-bullets li::marker{ color:var(--bp-navy); }
.c-num{ max-width:120px; }
/* WebKit lays a select's full option text out past its box, which widened the page on phones
   (hidden by overflow-x:clip, but it showed in full-page captures). Paint containment stops it. */
body.console select.input{ contain:paint; }
.c-section + .card, .card + .c-section{ margin-top:var(--sp-5); }

/* Row list: All Academies, Badges & Stickers index */
.c-rows{ display:flex; flex-direction:column; background:var(--bp-surface); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); }
.c-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--sp-3) var(--sp-5); align-items:center; padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--bp-line-soft); min-height:72px; }
.c-row:first-child{ border-top:0; border-radius:var(--toa-r-dense) var(--toa-r-dense) 0 0; }
.c-row:last-child{ border-radius:0 0 var(--toa-r-dense) var(--toa-r-dense); }
.c-row:only-child{ border-radius:var(--toa-r-dense); }
.c-row-live{ background:var(--bp-surface-cream); }
.c-row-main{ min-width:0; }
.c-row-title{ font-size:var(--toa-c-h3); font-weight:700; color:var(--bp-navy); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; overflow-wrap:anywhere; }
.c-row-facts{ font-size:var(--toa-c-secondary); color:var(--bp-text-slate); margin-top:2px; }
.c-row-status{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
@media (max-width:767px){
  .c-row{ grid-template-columns:1fr; gap:var(--sp-2); padding:var(--sp-4); }
  .c-row-status{ justify-content:flex-start; }
  .c-row-action .btn{ width:100%; }
}

/* Pickers and search */
.c-picker{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin:0 0 var(--sp-5); }
body.console form.card.c-picker{ padding:var(--sp-5); }
.c-picker .field{ flex:1 1 280px; min-width:0; max-width:520px; }
.c-picker .c-picker-day{ flex:0 1 220px; }
.c-search{ display:grid; gap:var(--sp-4); grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; align-items:end; margin-bottom:var(--sp-4); }
body.console form.card.c-search{ padding:var(--sp-5); }
@media (max-width:767px){ .c-search{ grid-template-columns:1fr; } .c-search .btn{ width:100%; } }
.c-chips{ display:flex; gap:var(--sp-2); overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 4px 8px; margin:0 -4px var(--sp-4); scrollbar-width:thin; }
.c-chip{
  flex:none; display:inline-flex; align-items:center; min-height:var(--toa-tap); padding:0 18px; white-space:nowrap;
  font-size:var(--toa-c-secondary); font-weight:600; color:var(--bp-navy); text-decoration:none;
  background:var(--bp-white); border:2px solid var(--toa-line-control); border-radius:var(--bp-r-pill);
}
@media (hover:hover) and (pointer:fine){ .c-chip:hover{ border-color:var(--bp-navy); } }
.c-chip[aria-current="page"]{ background:var(--bp-navy); border-color:var(--bp-navy); color:var(--bp-white); }

/* Segmented control (day switch) */
.c-seg{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; margin:0 0 var(--sp-5); background:var(--bp-white); border:1px solid var(--bp-line); border-radius:28px; }
.c-seg-item{ display:inline-flex; align-items:center; min-height:var(--toa-tap); padding:0 20px; border-radius:var(--bp-r-pill); font-weight:600; font-size:var(--toa-c-secondary); color:var(--bp-navy); text-decoration:none; white-space:nowrap; }
@media (hover:hover) and (pointer:fine){ .c-seg-item:hover{ background:var(--bp-surface-gray); } }
.c-seg-item[aria-current="page"]{ background:var(--bp-navy); color:var(--bp-white); }

/* Simple list inside a card (emails, sign-ins, classes, downloads) */
.c-list{ display:flex; flex-direction:column; margin-top:var(--sp-3); border-top:1px solid var(--bp-line-soft); }
.c-list > li{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); align-items:center; justify-content:space-between; padding:var(--sp-3) 0; border-bottom:1px solid var(--bp-line-soft); min-height:64px; }
.c-list > li:last-child{ border-bottom:0; }
.c-list-main{ flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.c-list-main > strong{ font-weight:700; }
ul.card.c-list{ margin-top:0; padding-top:var(--sp-2); padding-bottom:var(--sp-2); border-top:1px solid var(--bp-line); }
.alert + ul.card.c-list{ margin-top:var(--sp-5); }

/* Forms on console pages */
.c-inline-form{ display:flex; flex-direction:column; gap:6px; }
form.card.c-inline-form{ margin-top:var(--sp-5); }
.c-inline-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.c-inline-row .input{ flex:1 1 220px; min-width:0; width:auto; }
.c-inline-row .c-num{ flex:0 0 120px; }
.c-check-row{ display:inline-flex; align-items:center; gap:12px; min-height:var(--toa-tap); font-weight:600; cursor:pointer; }
.c-help > summary, .c-more > summary{
  display:flex; align-items:center; gap:10px; min-height:var(--toa-tap); cursor:pointer; list-style:none;
  font-weight:700; font-size:var(--toa-c-body); color:var(--bp-navy);
}
.c-help > summary::-webkit-details-marker, .c-more > summary::-webkit-details-marker{ display:none; }
.c-help > summary::after, .c-more > summary::after{
  content:""; width:10px; height:10px; margin-left:4px; flex:none;
  border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg) translateY(-3px);
  transition:transform .15s ease;
}
.c-help[open] > summary::after, .c-more[open] > summary::after{ transform:rotate(-135deg) translateY(-3px); }
body.console details.card.c-help{ padding-top:var(--sp-3); padding-bottom:var(--sp-3); }
body.console details.card.c-help[open]{ padding-bottom:var(--sp-6); }
.c-help-inline{ border-top:1px solid var(--bp-line-soft); padding-top:var(--sp-2); }
.c-reveal{ display:inline-block; }
.c-reveal > summary{ list-style:none; cursor:pointer; }
.c-reveal > summary::-webkit-details-marker{ display:none; }
.c-reveal[open] > summary{ display:none; }
.c-code{ display:inline-block; font-size:1rem; letter-spacing:.04em; overflow-wrap:anywhere; word-break:break-all; padding:12px 0; }

/* People list */
.c-bulkbar{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.c-bulkbar .c-count{ margin:0; }
.c-bulk-controls{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; flex:1 1 360px; justify-content:flex-end; }
.c-bulk-controls .select{ flex:1 1 220px; width:auto; min-width:0; max-width:380px; }
.c-name-cell{ min-width:240px; }
.c-name-line{ display:flex; align-items:center; gap:4px; }
.c-name-cell a{ font-weight:600; }
.c-name-cell .c-meta{ display:block; font-weight:400; padding-left:40px; }
.c-tick{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; margin:-8px 0 -8px -12px; flex:none; cursor:pointer; }
.c-status-cell .pill + .pill{ margin-left:6px; }
.c-select-all{ margin-top:var(--sp-2); }
.table tbody th{ font-weight:600; text-align:left; }
@media (max-width:767px){
  .c-bulk-controls{ justify-content:stretch; }
  .c-bulk-controls .select{ max-width:none; flex-basis:100%; }
  .c-bulk-controls .btn{ width:100%; }
  .c-name-cell{ min-width:0; }
  .table-stack tbody th{ font-size:var(--toa-c-body); padding-bottom:4px; }
  .table-stack .c-actions-cell{ text-align:left; padding-top:var(--sp-2); white-space:normal; }
  .table-stack .c-actions-cell > *{ margin:var(--sp-2) var(--sp-2) 0 0; }
  .table-stack td .pill{ margin-top:4px; }
  .table-sticky.table-stack tr > :first-child{ position:static; }
  /* Each cell carries its own label on phones, so the header row is not laid out at all
     (the clipped header still widened the page in WebKit). */
  .c-table.table-stack thead{ display:none; }
  .c-table.table-stack td:empty{ display:none; }
  .c-table.table-stack td.num{ text-align:left; }
  .table tr.c-row-possible{ background:var(--toa-warn-soft); }
  .table tr.c-row-problem{ background:var(--toa-bad-soft); }
}

/* Person page */
.c-person-head{ margin-bottom:var(--sp-5); }
.c-person-head .page-title{ overflow-wrap:anywhere; }
.c-place{ margin-top:var(--sp-4); scroll-margin-top:100px; }
.c-section-title + .c-place{ margin-top:0; }
.c-place .card-head{ flex-wrap:wrap; }
.c-place .card-head > div{ flex:1 1 220px; min-width:0; }
body.console .c-place-title{ font-size:var(--toa-c-h3); }
.c-place-title a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.c-status-line{ margin-top:var(--sp-3); font-size:var(--toa-c-body); }
.c-badge-line{ display:flex; flex-wrap:wrap; gap:0 var(--sp-4); align-items:center; margin-top:var(--sp-2); }
.c-more{ margin-top:var(--sp-4); border-top:1px solid var(--bp-line-soft); padding-top:var(--sp-2); }
.c-more-body{ display:flex; flex-direction:column; gap:var(--sp-4); padding-top:var(--sp-3); }
.c-more-item{ padding:var(--sp-4); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); }
.c-more-item > * + *{ margin-top:var(--sp-3); }
.c-warn-card{ border:2px solid var(--toa-warn-line); background:var(--toa-warn-soft); margin-bottom:var(--sp-5); }
.c-code-card{ text-align:left; }

/* Roster */
.c-preview-form > * + *{ margin-top:var(--sp-5); }
.c-result{ min-width:280px; }
.table .c-row-problem td, .table .c-row-problem th{ background:var(--toa-bad-soft); }
.table .c-row-possible td, .table .c-row-possible th{ background:var(--toa-warn-soft); }
.c-choice{ display:flex; flex-wrap:wrap; gap:6px; margin:var(--sp-2) 0; padding:0; border:0; min-width:0; }
.c-choice-opt{ position:relative; display:inline-flex; cursor:pointer; }
.c-choice-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.c-choice-opt span{
  display:inline-flex; align-items:center; min-height:var(--toa-tap); padding:0 18px; white-space:nowrap;
  font-weight:600; font-size:var(--toa-c-secondary); color:var(--bp-navy); background:var(--bp-white);
  border:2px solid var(--toa-line-control); border-radius:var(--bp-r-pill);
}
@media (hover:hover) and (pointer:fine){ .c-choice-opt:hover span{ border-color:var(--bp-navy); } }
.c-choice-opt input:checked + span{ background:var(--bp-navy); border-color:var(--bp-navy); color:var(--bp-white); }
.c-choice-opt input:focus-visible + span{ outline:var(--toa-focus); outline-offset:3px; }
.c-save-row{ align-items:center; }
.c-save-note{ flex:1 1 320px; font-weight:600; }

/* Duplicates and merge */
.c-dup-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); margin-top:var(--sp-4); }
.c-dup-card{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); }
.c-dup-card .btn{ align-self:flex-start; margin-top:auto; }
.c-dup-name{ font-size:var(--toa-c-h3); font-weight:700; color:var(--bp-navy); overflow-wrap:anywhere; }
.c-dup-name a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.c-facts{ display:grid; gap:var(--sp-2); margin:var(--sp-3) 0 0; }
.c-facts > div{ display:grid; grid-template-columns:minmax(96px,150px) minmax(0,1fr); gap:var(--sp-3); }
.c-facts dt{ font-size:var(--toa-c-secondary); font-weight:600; color:var(--bp-text); }
.c-facts dd{ margin:0; overflow-wrap:anywhere; }
@media (max-width:479px){ .c-facts > div{ grid-template-columns:1fr; gap:0; } .c-dup-card .btn{ width:100%; } }

/* Badges & Stickers */
.c-alert-row{ align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-5); }
.c-alert-row .alert-body{ flex:1 1 260px; }
.c-top-card > .alert{ margin-top:var(--sp-4); }
.c-top-split{ display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--bp-line-soft); }
.c-badge-table td, .c-badge-table th{ vertical-align:middle; }
.c-badge-table .pill + .c-reveal{ margin-left:var(--sp-3); }

/* Schedule editor */
.c-next{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; justify-content:space-between; margin-bottom:var(--sp-5); }
.c-next-text{ flex:1 1 280px; font-weight:600; }
.c-class-list{ display:flex; flex-direction:column; margin-top:var(--sp-3); border-top:1px solid var(--bp-line-soft); }
.c-class{ padding:var(--sp-4) 0; border-bottom:1px solid var(--bp-line-soft); scroll-margin-top:100px; }
.c-class-head{ display:flex; gap:var(--sp-4); align-items:flex-start; justify-content:space-between; }
.c-class-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.c-class-title{ font-weight:700; color:var(--bp-navy); font-size:var(--toa-c-body); overflow-wrap:anywhere; }
.c-class-main .c-pills{ margin-top:var(--sp-2); }
.c-class-main .c-pills:empty{ display:none; }
.c-class-tools{ display:flex; flex-wrap:wrap; gap:var(--sp-2); flex:none; }
.c-class-tools .btn{ min-width:0; padding:0 18px; }
.c-edit{ margin-top:var(--sp-3); }
.c-edit > summary{ list-style:none; }
.c-edit > summary::-webkit-details-marker{ display:none; }
.c-edit[open] > summary{ background:var(--bp-surface-gray); border-color:var(--bp-navy); }
.c-edit > form, .c-add > form{ margin-top:var(--sp-3); }
.c-danger-zone{ margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--bp-line-soft); }
.c-add{ margin-top:var(--sp-4); }
@media (max-width:560px){ .c-class-head{ flex-direction:column; } }

/* Feedback */
.c-comments{ display:flex; flex-direction:column; gap:var(--sp-3); }
.c-comment{ padding:var(--sp-3) var(--sp-4); background:var(--bp-surface-gray); border:1px solid var(--bp-line); border-radius:var(--toa-r-control); }
.c-comment-text{ color:var(--bp-text); white-space:pre-line; overflow-wrap:anywhere; }
.c-comment-text + .c-comment-text{ margin-top:6px; }
.c-comment .c-meta{ margin-top:4px; }
.fb-result .table-box{ margin-top:var(--sp-3); }

/* Certificates */
.c-steps{ display:flex; flex-direction:column; margin-top:var(--sp-3); counter-reset:cstep; }
.c-step{ counter-increment:cstep; display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); align-items:center; justify-content:space-between; padding:var(--sp-4) 0; border-top:1px solid var(--bp-line-soft); }
.c-step:first-child{ border-top:0; }
.c-step-text{ flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.c-step-text strong::before{ content:counter(cstep) ". "; }
.c-step-text .pill{ margin-right:var(--sp-2); }
.c-step-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.c-board-head{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-3); }
.c-board-head .c-section-title{ margin-bottom:0; }
.c-board-search{ flex:0 1 360px; min-width:0; }
.c-certs-table td, .c-certs-table th{ vertical-align:middle; }
.c-muted-row td, .c-muted-row th{ color:var(--bp-text-slate); }
.c-checklist{ display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-3) 0 0; }
.c-checklist li{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.c-checklist .pill{ min-width:112px; }
.c-cert + .c-cert{ margin-top:var(--sp-4); }
@media (max-width:640px){
  .c-step-actions{ width:100%; }
  .c-step-actions > .btn, .c-step-actions > .inline-form, .c-step-actions > .inline-form .btn{ width:100%; }
}

/* Activity Log */
.c-log{ display:flex; flex-direction:column; background:var(--bp-surface); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); }
.c-log-row{ display:grid; grid-template-columns:minmax(150px,210px) minmax(0,1fr) minmax(160px,280px); gap:4px var(--sp-5); padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--bp-line-soft); align-items:start; }
.c-log-row:first-child{ border-top:0; }
.c-log-when{ font-size:var(--toa-c-secondary); color:var(--bp-text-slate); font-variant-numeric:tabular-nums; }
.c-log-what{ overflow-wrap:anywhere; }
.c-log-who{ font-size:var(--toa-c-secondary); overflow-wrap:anywhere; }
.c-log-reason, .c-log-detail{ grid-column:2 / -1; font-size:var(--toa-c-secondary); }
.c-log-detail .certs-json{ padding:var(--sp-2) 0; }
.c-pager{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; justify-content:center; margin-top:var(--sp-5); }
@media (max-width:767px){
  .c-log-row{ grid-template-columns:1fr; padding:var(--sp-4); }
  .c-log-reason, .c-log-detail{ grid-column:auto; }
}

/* Question Bank */
.c-bank-details{ margin-top:var(--sp-3); }
.c-bank-details > summary{ list-style:none; }
.c-bank-details > summary::-webkit-details-marker{ display:none; }
.c-bank-list{ display:flex; flex-direction:column; gap:var(--sp-5); margin-top:var(--sp-5); }
.c-bank-q{ padding-top:var(--sp-4); border-top:1px solid var(--bp-line-soft); }
.c-bank-num{ font-weight:600; font-size:var(--toa-c-secondary); }
.c-bank-stem{ font-weight:700; margin:var(--sp-1) 0 var(--sp-3); }
.c-bank-options{ display:flex; flex-direction:column; gap:var(--sp-2); }
.c-bank-opt{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); min-height:56px; padding:8px 14px; border:1px solid var(--bp-line); border-radius:var(--toa-r-control); }
.c-bank-opt.is-correct{ border:2px solid var(--toa-ok-line); background:var(--toa-ok-soft); }
.c-bank-letter{ display:inline-grid; place-items:center; width:36px; height:36px; flex:none; border:2px solid var(--bp-navy); border-radius:50%; font-weight:700; }
.c-bank-text{ flex:1 1 200px; min-width:0; }

/* Emails: the preview dialog is flat like everything else. */
.mail-preview{ box-shadow:none; border-radius:var(--toa-r-dense); }
/* Older area rules still used by screens this block owns: no inset shadows, no tinted circles. */
.fb-daytab[aria-current="page"], .mail-filter a[aria-current="true"]{ box-shadow:none; }
/* === end console === */

/* === kiosk === */
/* Kiosk, pairing and projector (DESIGN.md 6). White screens, huge navy type, full-colour
   result panels that always carry an icon and words. Nothing under 24px at 1366x768.
   These rules supersede the older .ki-* rules in the checkin block and the .proj-* rules
   in the exams block. */

/* ---- Shared header (kiosk/_layout.html) ---- */
body.kiosk .kiosk-header{ min-height:88px; padding:12px clamp(16px,2.4vw,40px); gap:var(--sp-5); }
body.kiosk .kiosk-brand{ font-size:1.5rem; }
body.kiosk .kiosk-main{ padding:clamp(16px,2vw,32px) clamp(16px,2.4vw,40px); }
.ki-net-dot{ flex:none; width:14px; height:14px; border-radius:50%; background:currentColor; }

/* ---- Kiosk header: brand | day chip | connection + Full Screen ---- */
body.ki-app-body .kiosk-header{ flex-wrap:nowrap; }
body.ki-app-body .kiosk-brand{ flex:1 1 0; min-width:0; }
.ki-mode{
  flex:none; margin:0; padding:10px 28px; border-radius:var(--bp-r-pill);
  background:var(--bp-surface-cream); border:2px solid var(--bp-gold); color:var(--bp-navy);
  font-size:1.75rem; font-weight:700; line-height:1.2; letter-spacing:normal; white-space:nowrap;
}
.ki-mode.is-rs{ background:var(--bp-surface-cream); border-color:var(--bp-gold); color:var(--bp-navy); }
.ki-mode.is-paused{ background:var(--toa-bad-soft); border-color:var(--toa-bad-line); color:var(--toa-bad-text); }
.ki-header-status{ flex:1 1 0; display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:var(--sp-4); }
.ki-net{
  display:inline-flex; align-items:center; gap:10px; padding:6px 16px; border:0; border-radius:var(--bp-r-pill);
  font-size:1.5rem; font-weight:600; line-height:1.2; white-space:nowrap; color:var(--bp-navy); background:transparent;
}
.ki-net.is-online{ color:var(--bp-navy); }
.ki-net.is-online .ki-net-dot{ background:var(--toa-ok-line); }
.ki-net.is-offline{ color:var(--toa-warn-text); background:var(--toa-warn-soft); }
body.kiosk .ki-fs{ min-height:var(--toa-btn-h-min); font-size:1.5rem; }
.ki-fs[hidden]{ display:none; }
/* Under 1500px the name sets on two lines; with the long Drug & Alcohol chip it steps aside
   and the logo alone carries the brand. */
@media (max-width:1500px){
  body.ki-app-body .kiosk-brand > span{ max-width:12ch; }
  body.ki-app-body .kiosk-header:has(.ki-mode.is-rs) .kiosk-brand > span{ display:none; }
}
@media (max-width:1100px){
  body.ki-app-body .kiosk-header{ flex-wrap:wrap; }
  body.ki-app-body .kiosk-brand > span{ display:none; }
  .ki-mode{ font-size:1.5rem; }
}

/* ---- Kiosk body ---- */
.ki-app{ flex:1; display:flex; flex-direction:column; gap:var(--sp-5); }
.ki-wrongday{
  display:flex; align-items:center; gap:var(--sp-4); padding:16px 24px; border-radius:var(--toa-r-dense);
  background:var(--bp-gold); color:var(--bp-navy); font-size:1.5rem; font-weight:600; line-height:1.3;
}
.ki-wrongday{ flex-wrap:nowrap; }
.ki-wrongday[hidden]{ display:none; }
.ki-wrongday .icon{ flex:none; }
.ki-wrongday p{ margin:0; flex:1 1 0; min-width:0; }

.ki-stage{
  flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:52vh; padding:clamp(20px,3vw,40px); border-radius:var(--bp-r-card);
  background:var(--bp-white); color:var(--bp-navy); transition:background-color .15s ease;
}
.ki-idle{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.ki-idle[hidden],.ki-result[hidden]{ display:none; }
.ki-idle-logo{ display:block; height:min(200px,22vh); width:auto; }
/* With the code box open the logo steps aside and the stage gives up its reserved height,
   so the box and the footer line stay on screen at 1366x768. With the staff day banner
   showing, the logo shrinks for the same reason. */
.ki-app:has(.ki-manual[open]) .ki-idle-logo{ display:none; }
.ki-app:has(.ki-manual[open]) .ki-stage.is-idle,
.ki-app:has(.ki-wrongday:not([hidden])) .ki-stage.is-idle{ min-height:0; }
.ki-app:has(.ki-wrongday:not([hidden])) .ki-idle-logo{ height:min(120px,12vh); }
.ki-app:has(.ki-wrongday:not([hidden])){ gap:var(--sp-4); }
/* The staff list waits under the idle screen; a result panel takes the whole screen. */
.ki-app.is-showing .ki-attention{ display:none; }
.ki-idle-title{ font-size:clamp(3.5rem,7vw,6rem); line-height:1.05; color:var(--bp-navy); }
.ki-idle-sub{ font-size:2rem; line-height:1.3; color:var(--bp-navy); max-width:34ch; }

.ki-result{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); max-width:100%; }
.ki-result-head{ display:flex; align-items:center; justify-content:center; gap:var(--sp-5); margin:0; }
.ki-result-icon{ display:none; flex:none; }
.ki-stage.icon-check .ki-icon-check,.ki-stage.icon-alert .ki-icon-alert,.ki-stage.icon-wait .ki-icon-wait{ display:inline-flex; }
.ki-result-word{ font-size:3.5rem; font-weight:700; line-height:1.15; text-transform:none; letter-spacing:normal; }
.ki-stage.is-ok .ki-result-word{ font-size:2.5rem; }
.ki-name{ margin:0; font-size:clamp(4.5rem,8vw,7.5rem); font-weight:700; line-height:1.05; letter-spacing:normal; overflow-wrap:anywhere; }
.ki-district{ margin:0; font-size:2.25rem; font-weight:600; line-height:1.2; }
.ki-message{ margin:var(--sp-2) 0 0; font-size:2.5rem; font-weight:600; line-height:1.2; max-width:30ch; }
.ki-name[hidden],.ki-district[hidden],.ki-message[hidden]{ display:none; }

/* Result tones: white on deep green 6.5:1, white on navy 15:1, navy on gold 8.8:1, white on deep red 8.2:1. */
.ki-stage.is-ok{ background:var(--toa-ok-strong); color:var(--bp-white); }
.ki-stage.is-already,.ki-stage.is-saved,.ki-stage.is-wait{ background:var(--bp-navy); color:var(--bp-white); }
.ki-stage.is-wrong{ background:var(--bp-gold); color:var(--bp-navy); }
.ki-stage.is-bad{ background:var(--toa-bad-strong); color:var(--bp-white); }

/* Signed out: a red panel takes the place of the idle screen; scans still queue behind it. */
.ki-signedout{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-4);
  min-height:52vh; padding:clamp(20px,3vw,40px); border-radius:var(--bp-r-card); text-align:center;
  background:var(--toa-bad-strong); color:var(--bp-white);
}
.ki-signedout[hidden]{ display:none; }
.ki-signedout p{ flex:none; margin:0; }
.ki-panel-title{ font-size:3.5rem; line-height:1.15; color:var(--bp-white); }
.ki-panel-text{ font-size:2.5rem; font-weight:600; line-height:1.25; max-width:30ch; }
.ki-signedout .ki-pair-again{ margin-top:var(--sp-3); border-color:var(--bp-white); }
body.ki-is-signedout .ki-stage.is-idle,
body.ki-is-signedout .ki-manual{ display:none; }

/* Manual entry: a text link that opens the code box. */
.ki-manual{ align-self:center; width:min(100%,720px); text-align:center; }
.ki-manual-link{
  list-style:none; display:inline-flex; align-items:center; justify-content:center; min-height:var(--toa-tap); padding:0 8px;
  font-size:1.5rem; font-weight:600; color:var(--bp-navy); cursor:pointer;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.ki-manual-link::-webkit-details-marker{ display:none; }
@media (hover:hover) and (pointer:fine){ .ki-manual-link:hover{ text-decoration-thickness:2px; } }
.ki-manual-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-top:var(--sp-4); text-align:left; }
.ki-label{ flex-basis:100%; font-size:1.5rem; font-weight:600; color:var(--bp-navy); text-align:left; }
body.kiosk .ki-manual-input{ flex:1 1 280px; min-width:0; min-height:56px; font-size:1.5rem; text-transform:uppercase; letter-spacing:.06em; }
.ki-app.is-showing .ki-manual,.ki-app.is-showing .ki-foot{ display:none; }

.ki-attention{ align-self:center; width:min(100%,720px); padding:16px 24px; border-radius:var(--toa-r-dense); background:var(--toa-warn-soft); border:2px solid var(--bp-gold); }
.ki-attention[hidden]{ display:none; }
.ki-attention-title{ margin:0 0 var(--sp-2); font-size:1.5rem; color:var(--toa-warn-text); }
.ki-attention ul{ margin:0; padding-left:1.2em; list-style:disc; font-size:1.5rem; color:var(--toa-warn-text); }
.ki-foot{ margin:0; text-align:center; font-size:1.5rem; color:var(--bp-text-slate); }

/* ---- Pair screen (kiosk and projector) ---- */
.ki-pair{ gap:var(--sp-4); }
.ki-pair-logo{ display:block; height:min(140px,18vh); width:auto; }
.ki-pair-title{ font-size:clamp(3rem,5vw,4.5rem); }
.ki-pair-sub{ font-size:2rem; line-height:1.3; color:var(--bp-navy); }
.ki-pair-form{ display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-4); width:min(100%,440px); margin-top:var(--sp-3); }
body.kiosk .ki-code-input{ min-height:80px; font-size:3rem; font-weight:600; letter-spacing:.3em; text-align:center; font-variant-numeric:tabular-nums; }
.ki-pair-msg{ min-height:1.5em; font-size:1.5rem; color:var(--bp-navy); }
.ki-pair-msg.is-bad{ color:var(--toa-bad-text); font-weight:700; }

/* ---- Projector (exams/projector.html) ---- */
body.projector .kiosk-header{ min-height:80px; }
body.projector .kiosk-main{ padding-top:calc(clamp(12px,2.4vh,32px) * var(--proj-scale)); padding-bottom:calc(clamp(12px,2.4vh,32px) * var(--proj-scale)); }
body.projector .kiosk-brand .brand-logo{ height:56px; }
.proj-meta{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; font-size:1.5rem; font-weight:600; color:var(--bp-navy); }
.proj-online{ display:inline-flex; align-items:center; gap:10px; padding:6px 16px; border-radius:var(--bp-r-pill); color:var(--toa-warn-text); background:var(--toa-warn-soft); }
.proj-online[hidden]{ display:none; }
.proj{ flex:1; display:flex; flex-direction:column; }
.proj-slide[hidden]{ display:none !important; }
.proj-message{ gap:var(--sp-5); }
.proj-idle-logo{ display:block; height:min(240px,30vh); width:auto; }
.proj-msg-title{ font-size:clamp(3rem,5vw,5rem); line-height:1.1; color:var(--bp-navy); }
.proj-msg-sub{ font-size:2.5rem; font-weight:600; line-height:1.25; color:var(--bp-navy); max-width:32ch; }

/* Question slide. Sizes follow the viewport height (1080p reference), never under the
   projector floor at 1366x768; projector.js lowers --proj-scale only when a long
   question would otherwise run off the screen: it tightens the gaps first and never takes
   the type under 40px (question) or 32px (answers). */
body.projector{ --proj-scale:1; }
.proj-question{ display:flex; flex-direction:column; gap:calc(clamp(12px,2vh,24px) * var(--proj-scale)); max-width:1500px; width:100%; margin:0 auto; }
.proj-qnum{ font-size:max(24px, calc(clamp(24px,3vh,32px) * var(--proj-scale))); font-weight:700; line-height:1.2; letter-spacing:normal; text-transform:none; color:var(--bp-navy); }
.proj-stem{ max-width:1500px; font-size:max(40px, calc(clamp(40px,5.93vh,64px) * var(--proj-scale))); font-weight:700; line-height:1.2; letter-spacing:normal; color:var(--bp-navy); }
.proj-options{ display:flex; flex-direction:column; gap:calc(clamp(10px,1.5vh,16px) * var(--proj-scale)); margin:0; padding:0; list-style:none; }
.proj-opt{
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(120px,18%) auto; align-items:center; gap:calc(20px * var(--proj-scale));
  padding:calc(clamp(8px,1.2vh,14px) * var(--proj-scale)) 24px; border:2px solid var(--bp-line); border-radius:var(--toa-r-dense);
  background:var(--bp-white); color:var(--bp-navy);
}
.proj-opt.is-correct{ border:4px solid var(--toa-ok-line); background:var(--toa-ok-soft); padding-left:22px; padding-right:22px; }
.proj-opt .opt-letter{
  width:max(40px, calc(44px * var(--proj-scale))); height:max(40px, calc(44px * var(--proj-scale))); font-size:24px;
  background:var(--bp-surface-gray); color:var(--bp-navy); border:2px solid var(--toa-line-control);
}
.proj-opt.is-correct .opt-letter{ background:var(--toa-ok-text); color:var(--bp-white); border-color:var(--toa-ok-text); }
.proj-opt-body{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; min-width:0; }
.proj-opt-text{ font-size:max(32px, calc(clamp(32px,3.7vh,40px) * var(--proj-scale))); font-weight:600; line-height:1.2; }
.proj-opt-tag::before,.proj-opt.is-correct .proj-opt-tag::before{ content:none; }
.proj-opt-tag{ display:inline-flex; align-items:center; gap:8px; font-size:max(28px, calc(clamp(28px,3vh,32px) * var(--proj-scale))); font-weight:700; line-height:1.2; color:var(--toa-ok-text); white-space:nowrap; }
.proj-check{ width:1.1em; height:1.1em; flex:none; }
.proj-bar{ display:block; height:calc(clamp(12px,1.4vh,16px) * var(--proj-scale)); border-radius:var(--bp-r-pill); background:var(--bp-surface-gray); border:1px solid var(--bp-line); overflow:hidden; margin:0; }
.proj-bar-fill{ display:block; height:100%; width:var(--p,0%); background:var(--bp-navy); border-radius:inherit; }
.proj-opt.is-correct .proj-bar-fill{ background:var(--toa-ok-line); }
.proj-opt-num{ min-width:3.6ch; font-size:max(32px, calc(clamp(32px,3.7vh,40px) * var(--proj-scale))); font-weight:700; line-height:1.2; text-align:right; font-variant-numeric:tabular-nums; }
.proj-pct{ font-size:max(32px, calc(clamp(32px,3.7vh,40px) * var(--proj-scale))); font-weight:700; line-height:1.2; color:var(--bp-navy); }

/* Room average slide */
.proj-summary{ gap:var(--sp-5); }
.proj-sum-title{ font-size:3rem; line-height:1.15; color:var(--bp-navy); }
.proj-big{ font-size:clamp(4rem,5vw,6rem); font-weight:700; line-height:1.1; letter-spacing:normal; color:var(--bp-navy); max-width:18ch; }
/* === end kiosk === */

/* === integrator === */
/* Cross-screen fixes from the design QA run (scripts/qa_design.py, DESIGN.md 10). */

/* V6: every text link gets a 48px tall tap area from padding, without moving the text. */
.link{ padding-block:calc((var(--toa-tap) - 1.1em) / 2); }
.table a:not(.btn), .c-row-title, a.link-plain, .c-list a:not(.btn){
  padding-block:calc((var(--toa-tap) - 1.1em) / 2);
}
.text-link, .pr-exit{ min-width:var(--toa-tap); justify-content:center; }
.pr-exit{ display:inline-flex; align-items:center; min-height:var(--toa-tap); }

/* V4: display lines inside paragraphs keep the 1.5 body line height. */
.att-score, .hd-fix-stem{ line-height:var(--toa-lh-body); }

/* V39: a finished Get Ready step shows its check in an outlined circle, not a tinted chip. */
.hd-step.is-done .hd-step-n, .hd-step.is-complete .hd-step-n{ background:transparent; }

/* V9 and V10 on 320 to 399px phones: console buttons, pills and controls fit the column. */
@media (max-width:399px){
  body.console .btn{ min-width:0; max-width:100%; padding-inline:16px; font-size:1rem; }
  body.console .card{ padding:var(--sp-4); }
  body.console .pill{ max-width:100%; white-space:normal; }
  body.console .c-bulk-controls{ min-width:0; flex-basis:100%; }
  body.console .inline-form{ max-width:100%; }
  .hd-legend span{ white-space:normal; }
}
/* V9: stat tiles holding words ("Answered on Phone") get room, and a word never pushes the page wide. */
.stat-row{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stat-value{ overflow-wrap:break-word; }

/* V25: the bar is 72px plus its 1px top line; keep the footer clear of it. */
body.portal.has-tabbar{ padding-bottom:calc(var(--toa-tabbar-h) + 1px + env(safe-area-inset-bottom)); }
@media (min-width:900px){ body.portal.has-tabbar{ padding-bottom:0; } }
/* === end integrator === */

/* Persona re-check fixes (2026-09-26) */
.att-block > .alert{ margin:var(--sp-4) 0 var(--sp-5); }
.att-block > .alert + .att-email-change{ margin-top:var(--sp-5); }
/* Long question text reads better filling the line than balanced into a narrow block. */
.review-stem, .q-stem{ text-wrap:pretty; }
/* A jump to a question (#q5) lands below the sticky console header, not under it. */
body.console [id^="q"], body.console :target{ scroll-margin-top:104px; }
.fix-item > .alert{ margin-bottom:var(--sp-4); }
/* Present the Review on a phone: labels up to 28px (DESIGN 5.14), scaled down just enough that
   "Show Room Average" stays on one line at 320px; laptops use the sized buttons in host-day.
   The top line wraps instead of cutting off. */
@media (max-width:899px){ body.present .pr-btn{ font-size:clamp(1.125rem, 6.4vw, 1.75rem); padding-inline:12px; } }
@media (max-width:639px){ .pr-top-line{ white-space:normal; overflow:visible; } }
/* Their answer, counted as correct by staff: neutral, not red. */
.review-opt.is-chosen.is-counted, body.console .review-opt.is-chosen.is-counted{ border:2px solid var(--toa-line-control); background:var(--bp-white); }
/* Check-In row: the open panel's own button reads Cancel. */
.hd-ci-panel:not([open]) .hd-ci-open, .hd-ci-panel[open] .hd-ci-closed{ display:none; }

/* === attendee-test-laptop === */
/* DESIGN.md 13.4: the laptop test page. Everything that changes the layout sits inside
   @media (min-width:1024px); phones and tablets keep 4.8 to 4.10 exactly. The two rules outside
   the query: the laptop-only parts stay out of the phone page (no extra tab stops), and the
   question text never draws a focus box (it is a focus target, not a control; 13.4.3, L4). */
.exam-panel, .exam-rpanel-extra{ display:none; }
.exam-panel-all[hidden]{ display:none !important; }
.exam.is-kbd .opt-card:has(.opt-input:focus){ outline:3px solid var(--ring); outline-offset:3px; }
.exam.is-kbd .opt-card:has(.opt-input:focus) .opt-letter{ outline:none; }
.q-stem:focus, .q-stem:focus-visible,
.exam-all h1:focus, .exam-all h1:focus-visible{ outline:none; }

@media (min-width:1024px){
  /* ---- Compact test header (13.4.1): 72px, 52px logo, one-line name, no links. `is-test` comes
     from the layout; :has() covers the page until then. ---- */
  body.portal.is-test .portal-header .site-header-inner,
  body.portal:has(#exam) .portal-header .site-header-inner{
    min-height:72px; max-width:calc(var(--toa-max-portal-wide, 1120px) + 2 * var(--toa-gutter));
  }
  body.portal.is-test .portal-header .brand-logo,
  body.portal:has(#exam) .portal-header .brand-logo{ height:52px; }
  body.portal.is-test .portal-header .brand-name,
  body.portal:has(#exam) .portal-header .brand-name{ font-size:1.25rem; white-space:nowrap; }
  body.portal.is-test .portal-header .brand-br,
  body.portal:has(#exam) .portal-header .brand-br{ display:none; }
  body.portal.is-test .portal-header .site-header-inner > :not(.brand),
  body.portal:has(#exam) .portal-header .site-header-inner > :not(.brand){ display:none !important; }
  body.portal.is-test .portal-main,
  body.portal:has(#exam) .portal-main{ padding-top:16px; }
  body.portal.is-test .portal-container,
  body.portal:has(#exam) .portal-container{ max-width:calc(var(--toa-max-portal-wide, 1120px) + 2 * var(--toa-gutter)); }

  /* ---- Two columns: question (or list) and a 320px panel (13.3.2, 13.4.1) ---- */
  .exam-grid{
    display:grid; grid-template-columns:minmax(0,1fr) var(--toa-panel, 320px);
    column-gap:var(--toa-col-gap, 40px); align-items:start;
  }
  .exam-main{ min-width:0; }
  .exam-main p, .exam-main li{ max-width:72ch; }

  /* ---- Question column (13.4.3): hide the phone top line, the phone "Answering as" and the
     full-width See All Questions row; the panel carries them. ---- */
  .exam-grid--answer .exam-top,
  .exam-grid--answer .exam-who,
  .exam-grid--answer .exam-seeall{ display:none; }
  body.portal .exam-grid--answer .q-stem{ font-size:24px; font-weight:700; line-height:1.35; }
  .exam-grid--answer .q-legend{ margin-bottom:20px; }
  .exam-grid--answer .q-options{ gap:8px; }
  /* 56px rows: 40px letter circle + 2 x 6px padding + 2 x 2px border. Selected swaps 1px of
     padding for 1px of border, so nothing moves (Q8). */
  .exam-grid--answer .opt-card{
    min-height:56px; padding:6px 17px; gap:14px; border:2px solid var(--toa-line-control);
    border-radius:var(--toa-r-control); font-size:var(--toa-p-body); font-weight:500; line-height:1.35;
  }
  .exam-grid--answer .opt-card:has(.opt-input:checked){ border:3px solid var(--bp-navy); padding:5px 16px; }  /* The "Selected" slot is always laid out, so long answers never re-wrap on selection. */
  .exam-grid--answer .opt-sel{ display:inline-flex; visibility:hidden; }
  .exam-grid--answer .opt-input:checked ~ .opt-sel{ visibility:visible; }

  /* ---- Previous and Next (13.4.4): 200px minimum, not stretched, pinned to the bottom of the
     screen when the window is shorter than the question. ---- */
  body.portal .exam-grid--answer .q-nav{
    position:sticky; bottom:0; z-index:1; flex-wrap:nowrap; justify-content:space-between;
    margin-top:12px; padding:8px 0; background:var(--bp-white); border-top:1px solid var(--bp-line-soft);
  }
  body.portal .exam-grid--answer .q-nav .btn{ flex:0 0 auto; width:auto; min-width:200px; }

  /* ---- The panel (13.4.5): sticky, no card box. Its height stops at the bottom of the screen
     below the 72px header (73 with its line) and the 16px top padding, so Sign Out is never
     cut off; only the long offline line can make the panel scroll inside itself. ---- */
  .exam-panel{
    display:block; position:sticky; top:16px; min-width:0;
    padding:0 8px 8px 24px; border-left:1px solid var(--bp-line);   /* 8px keeps focus rings inside the scroll box */
    max-height:calc(100vh - 105px); overflow:auto; overscroll-behavior:contain;
  }
  .exam-panel-title{ margin:0; font-size:1.375rem; font-weight:700; line-height:1.3; color:var(--bp-text); }
  .exam-panel-sub{ margin-top:2px; font-size:var(--toa-p-secondary); font-weight:600; line-height:1.5; color:var(--bp-text); }
  .exam-tiles{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, 48px); gap:8px; }
  .exam-tiles li{ margin:0; }
  .exam-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    width:48px; height:48px; padding:0; border:2px solid var(--toa-line-control); border-radius:var(--toa-r-control);
    background:var(--bp-white); color:var(--bp-text); font:inherit; font-size:var(--toa-p-secondary); font-weight:700;
    line-height:1; font-variant-numeric:tabular-nums; cursor:pointer;
  }
  .exam-tile .icon{ display:none; width:16px; height:16px; flex:none; }
  .exam-tile.is-done{ background:var(--bp-surface-cream); border-color:var(--bp-navy); }
  .exam-tile.is-done .icon{ display:block; }
  .exam-tile[aria-current="step"]{ border:3px solid var(--bp-navy); box-shadow:inset 0 -4px 0 #FCBA30; }
  .exam-tile:focus-visible{ outline:var(--toa-focus); outline-offset:3px; }
  @media (hover:hover) and (pointer:fine){ .exam-tile:hover{ border-color:var(--bp-navy); } }
  .exam-progress{ margin-top:14px; font-size:var(--toa-p-secondary); line-height:1.5; }
  .exam-progress-line{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-weight:600; color:var(--bp-text); }
  .exam-progress-icon{ display:none; flex:none; color:var(--toa-ok-text); }
  .exam-progress.is-done .exam-progress-icon{ display:inline-flex; }
  .exam-progress.is-done [data-progress-text]{ color:var(--toa-ok-text); font-weight:700; }
  .exam-progress-note{ margin-top:2px; color:var(--bp-text); }
  .exam-progress-note:empty{ display:none; }
  .exam-panel .exam-save{ font-size:var(--toa-p-secondary); min-height:0; }
  .exam-panel .exam-save[data-mode="none"]{ display:none; }
  .exam-panel .exam-save[data-mode="offline"]{ flex-basis:100%; margin-top:6px; }
  .exam-panel-all{ margin-top:14px; }
  .exam-hint{ margin-top:10px; font-size:var(--toa-p-secondary); line-height:1.5; color:var(--bp-text-slate); }
  .exam-panel-who{
    margin-top:14px; padding-top:10px; border-top:1px solid var(--bp-line-soft);
    font-size:var(--toa-p-secondary); line-height:1.5; color:var(--bp-text-slate);
  }
  .exam-panel-who strong{ color:var(--bp-text); }
  .exam-panel-who .inline-form{ display:flex; }
  .exam-panel-who .text-link{ font-size:var(--toa-p-secondary); }
  .exam-panel--mini .exam-panel-who{ margin-top:16px; }

  /* ---- Reviewed (13.3.3): the list on the left; the score card, topics and Back to Home in
     the panel. DOM order stays the phone order. ---- */
  .exam-grid--review{
    grid-template-areas:"head panel" "list panel" "foot panel";
    grid-template-rows:auto auto 1fr;
  }
  .exam-grid--review > .exam-h1{ grid-area:head; min-width:0; }
  .exam-grid--review > .exam-review{ grid-area:list; min-width:0; margin-top:0; }
  .exam-grid--review > .exam-review-foot{ grid-area:foot; }
  .exam-grid--review > .exam-rpanel{ grid-area:panel; align-self:start; position:sticky; top:16px; min-width:0; }
  body.portal .exam-rpanel .card{ padding:var(--sp-6); }
  .exam-rpanel-extra{ display:block; margin-top:var(--sp-5); }
  .exam-rpanel-extra .att-topics-h{ margin-top:0; margin-bottom:var(--sp-2); font-size:var(--toa-p-h3); }
  .exam-rpanel-extra .att-topics{ font-size:var(--toa-p-secondary); }
  .exam-rpanel-extra .actions{ margin-top:var(--sp-5); }
  body.portal .exam-rpanel-extra .btn{ width:100%; }
}
@media (min-width:1024px) and (max-width:1279px){
  .exam-grid{ column-gap:32px; }
}
/* === end attendee-test-laptop === */

/* === attendee-laptop === */
/* DESIGN.md 13.2, 13.3, 13.5 to 13.8: laptop chrome and the year-round portal for every
   attendee screen except the test page (that is the attendee-test-laptop block). Layout
   changes sit inside @media (min-width:1024px); under 768px phones keep today's layout, with
   only the renamed words, the record and the shared-computer checkbox added. */
:root{
  --toa-max-portal-wide:1120px;
  --toa-side:360px;
  --toa-rail:300px;
  --toa-panel:320px;
  --toa-col-gap:40px;
}
@media (min-width:1024px) and (max-width:1279px){ :root{ --toa-col-gap:32px; } }

/* ---- Tab bar under 768px, header links from 768px (13.3.1; was 900px) ---- */
@media (min-width:768px){
  .portal-topnav{ display:flex; align-items:center; }
  .tabbar{ display:none; }
  body.portal.has-tabbar{ padding-bottom:0; }
}
.portal-account{ display:none; }
/* 768 to 1279px: the name next to the logo goes to two lines so the links fit on one row. */
@media (min-width:768px) and (max-width:1279px){
  .portal-header .brand-br{ display:inline; }
  .portal-header .brand-name{ white-space:normal; font-size:1.125rem; line-height:1.2; }
}

/* ---- Laptop header (13.2): Home, Tests & Scores, Certificates, then My Details and Sign Out ---- */
@media (min-width:1024px){
  .portal-header .site-header-inner{ max-width:calc(var(--toa-max-portal-wide) + 2 * var(--toa-gutter)); gap:var(--sp-5); }
  .portal-header .brand-name{ font-size:1.25rem; }
  .portal-topnav{ gap:4px; }
  .portal-topnav > a{ padding:0 10px; }
  .portal-account{ display:inline-flex; align-items:center; gap:var(--sp-5); margin-left:var(--sp-4); }
  .portal-account > a, .portal-signout{
    display:inline-flex; align-items:center; min-height:var(--toa-tap); padding:0 4px;
    font:inherit; font-size:var(--toa-p-secondary); font-weight:600; color:var(--bp-navy); white-space:nowrap;
    text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
    background:none; border:0; border-radius:4px; cursor:pointer;
  }
  .portal-account > a[aria-current="page"]{ text-decoration-color:var(--bp-gold); text-decoration-thickness:3px; }
  .portal-signout-form{ display:inline-flex; margin:0; }
  .portal-account > a:focus-visible, .portal-signout:focus-visible{ outline:var(--toa-focus); outline-offset:3px; }
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .portal-account > a:hover, .portal-signout:hover{ text-decoration-thickness:2px; }
}

/* ---- Containers (13.3.1): 1120px from 1024px; single-column pages stay a centred 720px
   column, feedback 880px, pages with .lap-grid use the full width. ---- */
@media (min-width:1024px){
  .portal-container{ max-width:calc(var(--toa-max-portal-wide) + 2 * var(--toa-gutter)); }
  .lap-one{ max-width:var(--toa-max-portal); margin:0 auto; }
  .lap-feedback{ max-width:880px; margin:0 auto; }
  .lap-wide{ width:100%; }
  .lap-main p, .lap-main li{ max-width:72ch; }
}
body.public .portal-container{ max-width:calc(var(--toa-max-portal) + 2 * var(--toa-gutter)); }

/* Cards stacked in a column: 20px apart (the older rule only saw direct container children). */
.lap-one > .card + .card, .lap-wide > .card + .card, .lap-feedback > .card + .card,
.lap-main > .card + .card, .lap-side > .card + .card, .lap-side > * + *{ margin-top:var(--sp-5); }
.lap-side > .card.att-block:first-child, .lap-side > div:first-child > .att-block:first-child{ margin-top:0; }

/* ---- The two-column grid, never three (13.3.2) ---- */
.lap-only{ display:none; }
@media (min-width:1024px){
  .lap-only{ display:block; }
  .lap-hide{ display:none; }
  .lap-grid{
    display:grid; grid-template-columns:minmax(0,1fr) var(--toa-side);
    column-gap:var(--toa-col-gap); align-items:start;
  }
  .lap-grid--rail{ grid-template-columns:var(--toa-rail) minmax(0,1fr); }
  .lap-grid--test{ grid-template-columns:minmax(0,1fr) var(--toa-panel); }
  .lap-main, .lap-side, .lap-rail{ min-width:0; }
  .lap-rail{ position:sticky; top:16px; }
  .lap-main > :first-child, .lap-side > :first-child, .lap-rail > :first-child{ margin-top:0; }
  .lap-side .card, .lap-rail .card{ padding:var(--sp-6); }
}
@media (max-width:1023px){
  .lap-side{ margin-top:var(--sp-5); }
  .lap-side:empty{ display:none; }
}

/* ---- Home, year-round (13.5): phones read greeting, upcoming, Your Totals, then the record ---- */
.yr-record-wrap{ margin-top:var(--sp-7); }
.yr-upcoming + .yr-record-wrap{ margin-top:var(--sp-7); }
.lap-main > .yr-record-wrap:first-child{ margin-top:0; }
body.portal .yr-record-wrap > h2{ font-size:var(--toa-p-h2); margin-bottom:var(--sp-4); }
@media (max-width:1023px){
  .yr-home{ display:flex; flex-direction:column; }
  .yr-home > .lap-main{ display:contents; }
  .yr-home .yr-upcoming{ order:1; }
  .yr-home > .lap-side{ order:2; margin-top:var(--sp-5); }
  .yr-home .yr-record-wrap{ order:3; }
  .yr-certs-page{ display:flex; flex-direction:column; }
  .yr-certs-page > .lap-main, .yr-certs-page > .lap-side{ display:contents; }
  .yr-certs-page .yr-need{ order:1; margin-bottom:var(--sp-5); }
  .yr-certs-page .yr-cert-group{ order:2; }
  .yr-certs-page .yr-notes{ order:3; margin-top:var(--sp-5); }
}

/* ---- Your Academy Record entries (13.5.3) ---- */
.yr-record{ display:flex; flex-direction:column; gap:var(--sp-5); margin:0; padding:0; list-style:none; }
.yr-record > li{ margin:0; }
.yr-record .card + .card{ margin-top:0; }
.yr-thanks{ display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-3); font-size:var(--toa-p-body); font-weight:700; color:var(--toa-ok-text); }
.yr-thanks .icon{ color:var(--toa-ok-line); flex:none; }
body.portal .yr-entry-h{ font-size:var(--toa-p-h3); margin-bottom:var(--sp-1); }
.yr-entry-when{ margin-top:0; }
body.portal .card .yr-days{ margin-top:var(--sp-3); }
.yr-days strong{ font-weight:700; color:var(--bp-text); }
body.portal .yr-sub{ margin-top:var(--sp-5); margin-bottom:var(--sp-2); font-size:var(--toa-p-body); font-weight:700; }
.yr-rows{ display:flex; flex-direction:column; gap:var(--sp-2); margin:0; padding:0; list-style:none; }
.yr-rows > li{ margin:0; }
.yr-cert-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-4); }
.yr-cert-row > .att-row{ flex:1 1 280px; min-width:0; }
body.portal .yr-cert-row > .btn{ flex:none; width:auto; min-width:160px; }
@media (max-width:639px){ body.portal .yr-cert-row > .btn{ width:100%; } }
.yr-empty{ font-size:var(--toa-p-body); color:var(--bp-text); padding:var(--sp-5) 0; }
.yr-skipped{ display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-5) 0 0; padding:0; list-style:none; }
.yr-summary p + p{ margin-top:var(--sp-2); }

/* ---- This Academy card (Academy day, side column from 1024px) ---- */
.yr-this-name{ font-size:var(--toa-p-body); font-weight:700; color:var(--bp-text); }
.yr-this .att-facts{ margin:var(--sp-4) 0 0; }

/* ---- Your Totals (13.5.4) ---- */
.yr-totals-list{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none; border-top:1px solid var(--bp-line-soft); }
.yr-totals-list > li{ margin:0; padding:8px 0; font-size:var(--toa-p-body); line-height:1.5; color:var(--bp-text); border-bottom:1px solid var(--bp-line-soft); }
.yr-totals-list strong{ font-weight:700; font-variant-numeric:tabular-nums; }
.yr-totals-split{ display:block; margin-top:2px; font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.yr-next{ margin-top:var(--sp-4); }

/* ---- Tests & Scores (13.6.1): heading of the chosen Academy, then the test cards ---- */
.yr-acad-head{ margin-bottom:var(--sp-5); }
body.portal .yr-acad-head h2{ font-size:var(--toa-p-h2); margin-bottom:var(--sp-1); }
.yr-acad-head .yr-days{ margin-top:var(--sp-2); font-size:var(--toa-p-body); }
body.portal h3.yr-card-h{ font-size:var(--toa-p-h3); margin-bottom:var(--sp-3); }
.att-test h3{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px; }
.yr-acad-head + .card{ margin-top:0; }
.att-test + .att-test{ margin-top:var(--sp-5); }
body.portal h4.att-topics-h{ font-size:var(--toa-p-body); margin-top:var(--sp-5); margin-bottom:var(--sp-2); }

/* Your Academies rail (from 1024px): 64px link rows, the chosen one cream with a gold bar. */
body.portal .yr-rail-h{ font-size:var(--toa-p-h3); margin-bottom:var(--sp-3); }
.yr-rail-list{ display:flex; flex-direction:column; gap:var(--sp-2); margin:0; padding:0; list-style:none; }
.yr-rail-list > li{ margin:0; }
.yr-rail-link{
  display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:64px;
  padding:10px 14px 10px 16px; border:1px solid var(--bp-line); border-left:4px solid transparent;
  border-radius:var(--toa-r-control); background:var(--bp-white); color:var(--bp-text); text-decoration:none;
}
.yr-rail-link[aria-current="page"]{ background:var(--bp-surface-cream); border-color:var(--bp-line); border-left-color:var(--bp-gold); }
.yr-rail-link:focus-visible{ outline:var(--toa-focus); outline-offset:3px; }
.yr-rail-name{ font-size:var(--toa-p-secondary); font-weight:700; line-height:1.3; color:var(--bp-navy); }
.yr-rail-dates{ font-size:var(--toa-p-secondary); line-height:1.3; color:var(--bp-text); }
.yr-rail-status{ display:inline-flex; align-items:center; gap:6px; font-size:var(--toa-p-secondary); font-weight:600; line-height:1.3; color:var(--bp-text-slate); }
.yr-rail-status .icon{ flex:none; }
.yr-rail-during{ color:var(--toa-info-text); }
.yr-rail-after .icon{ color:var(--toa-ok-line); }
@media (hover:hover) and (pointer:fine){ .yr-rail-link:hover{ border-color:var(--bp-navy); border-left-color:var(--bp-gold); } }
.att-switch .att-switch-go{ flex:none; }
/* WebKit lays a long option name out past the select box (body.scrollWidth grows on phones even
   though nothing shows); paint containment keeps it inside. The focus ring still shows. */
.att-switch .select{ contain:paint; }
/* A long unbroken word (a topic like "Investigation/Reporting") wraps instead of running past the
   card at 320px; nothing changes where words already fit. */
body.portal main{ overflow-wrap:break-word; }

/* ---- Certificates across Academies (13.6.2) ---- */
.yr-cert-group + .yr-cert-group{ margin-top:var(--sp-7); }
body.portal .yr-group-h{ font-size:var(--toa-p-h3); margin-bottom:var(--sp-4); }
.yr-cert-group > .card + .card{ margin-top:var(--sp-5); }
.yr-need > .att-lead:first-child{ margin-top:0; }
.yr-note p{ margin:0; }

/* ---- My Details, record link (13.3.3) ---- */
.yr-profile-record p + p{ margin-top:var(--sp-2); }
@media (min-width:1024px){
  .yr-profile .lap-side > .att-block{ margin-top:var(--sp-5); }
  .yr-profile .lap-side > .att-block:first-child{ margin-top:0; }
  .yr-profile .att-signout{ margin-top:var(--sp-6); }
}

/* ---- Sign in (13.7, 13.8): the shared-computer choice ---- */
.att-login-note{ margin-top:var(--sp-2) !important; }
.att-shared{ margin-top:var(--sp-4); align-items:flex-start; }
.att-shared .check{ margin-top:10px; }
.att-shared label{ gap:2px; }
.att-shared-hint{ font-size:var(--toa-p-secondary); font-weight:400; color:var(--bp-text-slate); line-height:1.5; }

/* ---- Idle warning on a shared computer (13.7) ---- */
.idle-slot:empty{ display:none; }
.idle-banner{ margin-bottom:var(--sp-5); }
.idle-banner .actions{ margin-top:var(--sp-3); }

/* ---- Feedback on laptops (13.3.4): 880px, and the rating buttons get the card's full width
   so "Strongly Disagree" sits on one line ---- */
@media (min-width:1024px){
  .lap-feedback .fb-body{ padding-left:0; padding-right:0; }
  .lap-feedback .fb-choice-box{ padding-left:2px; padding-right:2px; }
  .lap-feedback .fb-word{ white-space:nowrap; }
}

/* ---- Footer: My Details and Your Academy Record side by side ---- */
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 var(--sp-5); }
/* === end attendee-laptop === */

/* === alumni === (DESIGN 14: score framing, Invite a Colleague) */
.att-score-note{ margin-top:var(--sp-2); font-size:var(--toa-p-secondary); line-height:var(--toa-lh-body); color:var(--bp-text-slate); }
.att-score + .att-score-note{ margin-top:var(--sp-2) !important; }
.att-todo-item .att-score-note{ color:var(--bp-text-slate); }

.al-invite-h{ margin:0; font-size:var(--toa-p-h3); line-height:var(--toa-lh-head); }
body.console .al-invite-h{ font-size:1.375rem; }
.al-invite-line{ margin-top:var(--sp-3); font-size:var(--toa-p-body); line-height:var(--toa-lh-body); color:var(--bp-text); }
body.console .al-invite-line{ font-size:1.125rem; }
.al-actions{ margin-top:var(--sp-5); }
.al-actions .btn{ white-space:nowrap; }
.al-invite--hi{ background:var(--bp-surface-cream); border-color:var(--bp-surface-cream); }
.al-copied{ margin-top:var(--sp-2); font-size:var(--toa-p-secondary); font-weight:700; color:var(--toa-ok-text); }
.al-copied:empty{ display:none; }
/* Side column (from 1024px): the two buttons stack full width so neither label wraps. */
@media (min-width:1024px){
  .lap-side .al-actions{ flex-direction:column; align-items:stretch; }
  .lap-side .al-actions .btn{ width:100%; }
}
/* Year-round Home on phones and tablets: the side column opens up so Your Totals stay near
   the top and the invite goes below the record. */
@media (max-width:1023px){
  .yr-home > .lap-side.yr-side{ display:contents; }
  .yr-home > .yr-side > *{ order:2; margin-top:var(--sp-5); }
  .yr-home > .yr-side > .al-invite{ order:4; }
  .yr-home > .yr-side > :first-child{ margin-top:var(--sp-5); }
}
/* Downloads: the Alumni List choice; Add Person: the registered-only note */
.c-choice-set{ display:flex; flex-direction:column; gap:4px; margin:var(--sp-3) 0 0; padding:0; border:0; min-width:0; }
.c-choice-set legend{ margin-bottom:var(--sp-1); }
.c-add-note{ display:flex; align-items:flex-start; gap:8px; margin:0 0 var(--sp-5); }
.c-add-note .icon{ flex:none; margin-top:2px; }
/* Staff test page: the score note beside Close Test and Start Review */
.hd-score-note{ display:flex; align-items:flex-start; gap:8px; margin-top:var(--sp-4); font-size:var(--toa-c-secondary); line-height:1.5; color:var(--bp-text-slate); max-width:72ch; }
.hd-score-note .icon{ flex:none; margin-top:2px; color:var(--bp-text); }
/* === end alumni === */

/* === numbers (Academy number, desk check-in, daily check-in code; DESIGN 15, staff side) === */
/* Today: the day's code, large */
.hd-code-card{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4) var(--sp-7); margin-top:var(--sp-5); }
.hd-code-text{ flex:1 1 320px; min-width:0; }
.hd-code-text h2{ margin:0; }
.hd-code-big{ margin:0; font-size:4.5rem; line-height:1.5; font-weight:700; letter-spacing:0.08em; font-variant-numeric:tabular-nums; color:var(--bp-text); }
.hd-code-help{ margin:0; font-size:var(--toa-c-secondary); line-height:1.5; color:var(--bp-text-slate); max-width:60ch; }
.hd-code-actions{ flex:0 1 auto; }
@media (max-width:639px){
  .hd-code-big{ font-size:3.5rem; }
  .hd-code-actions{ flex:1 1 100%; }
  .hd-code-actions .btn, .hd-code-actions .inline-form{ width:100%; }
}
/* Check-In board: code line, number on each row, the desk match card */
.hd-code-line{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0 0 var(--sp-3); padding:10px 16px; border:1px solid var(--toa-ok-line); border-radius:var(--toa-r-dense); background:var(--toa-ok-soft); color:var(--toa-ok-text); font-size:var(--toa-c-secondary); font-weight:600; }
.hd-code-line .link{ color:inherit; }
.hd-code-inline{ font-size:1.25rem; letter-spacing:0.08em; font-variant-numeric:tabular-nums; }
.hd-ci-num{ font-size:var(--toa-c-secondary); font-weight:600; color:var(--bp-text); font-variant-numeric:tabular-nums; }
.hd-ci-desk{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--sp-2); }
.hd-ci-desk .hd-ci-error{ text-align:right; }
.hd-ci-match{ margin:var(--sp-4) 0 0; padding:var(--sp-5) var(--sp-6); border-radius:var(--toa-r-dense); background:var(--bp-surface-cream); display:flex; flex-direction:column; gap:4px; }
.hd-ci-match[hidden]{ display:none; }
.hd-ci-match.is-in{ background:var(--toa-ok-soft); border:2px solid var(--toa-ok-line); }
.hd-ci-match p{ margin:0; }
.hd-ci-match-num{ font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums; }
.hd-ci-match-old{ font-weight:600; font-size:var(--toa-c-secondary); color:var(--bp-text-slate); }
.hd-ci-match-name{ font-size:2rem; line-height:1.25; font-weight:700; overflow-wrap:anywhere; }
.hd-ci-match-district{ font-size:var(--toa-c-body); color:var(--bp-text-slate); }
.hd-ci-match-form{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-4); }
.hd-ci-match-form[hidden]{ display:none; }
.hd-ci-match-btn{ min-height:64px; padding:0 40px; font-size:1.375rem; }
.hd-ci-match-done{ display:flex; align-items:center; gap:10px; margin-top:var(--sp-3) !important; font-size:1.375rem; font-weight:700; color:var(--toa-ok-text); }
.hd-ci-match-done[hidden]{ display:none; }
.hd-ci-note{ margin-top:var(--sp-3); font-weight:600; }
@media (max-width:767px){
  .hd-ci-match{ padding:var(--sp-4); }
  .hd-ci-match-name{ font-size:1.625rem; }
  .hd-ci-match-btn{ width:100%; }
  .hd-ci-desk{ justify-content:flex-start; flex-basis:100%; }
  .hd-ci-desk .btn{ width:100%; }
}
/* People list and person page */
.c-people-table abbr, .c-badge-table abbr, .c-table abbr{ text-decoration:none; }
.c-num-cell{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.c-number{ margin:var(--sp-2) 0 0; font-size:var(--toa-c-body); }
.c-number-label{ font-weight:600; color:var(--bp-text-slate); }
.c-number-value{ font-size:1.5rem; font-variant-numeric:tabular-nums; margin-left:4px; }
/* Show on Screen: the code for the room (white, huge navy digits) */
body.dc-body .kiosk-main{ justify-content:center; align-items:center; text-align:center; }
.dc-header-actions{ display:flex; align-items:center; gap:var(--sp-5); margin-left:auto; }
.dc-header-actions .link{ font-size:1.5rem; font-weight:600; min-height:48px; min-width:48px; justify-content:center; display:inline-flex; align-items:center; }
.dc-screen{ display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.6vh,24px); width:100%; }
.dc-logo{ display:block; height:clamp(90px,15vh,200px); width:auto; margin:0 auto; }
.dc-title{ margin:0; font-size:clamp(2.5rem,4.6vw,5rem); line-height:1.15; font-weight:700; color:var(--bp-text); }
.dc-digits{ margin:0; font-size:min(36vh,27vw); line-height:1; font-weight:700; letter-spacing:0.06em; font-variant-numeric:tabular-nums; color:var(--bp-text); }
.dc-instr{ margin:0; font-size:clamp(2rem,3.4vw,3.75rem); line-height:1.25; font-weight:600; color:var(--bp-text); max-width:40ch; text-wrap:balance; }
@media (max-width:767px){
  .dc-header-actions .dc-fs{ display:none; }
  .dc-digits{ font-size:min(30vh,30vw); }
}
/* Print Sign: one US Letter page */
.dc-sign{ max-width:8.5in; margin:0 auto; padding:0.5in 0.6in; text-align:center; color:#00274C; }
.dc-sign-logo{ display:block; height:1.7in; width:auto; margin:0 auto; }
.dc-sign-title{ margin:0.25in 0 0; font-size:34pt; line-height:1.15; font-weight:700; }
.dc-sign-digits{ margin:0.1in 0; font-size:190pt; line-height:1; font-weight:700; letter-spacing:0.06em; font-variant-numeric:tabular-nums; }
.dc-sign-instr{ margin:0; font-size:30pt; line-height:1.25; font-weight:600; }
.dc-sign-foot{ margin:0.3in 0 0; font-size:20pt; line-height:1.3; }
.dc-sign-meta{ margin:0.25in 0 0; font-size:14pt; color:#333843; }
@media screen and (max-width:767px){
  .dc-sign{ padding:24px 16px; }
  .dc-sign-logo{ height:120px; }
  .dc-sign-title{ font-size:2rem; }
  .dc-sign-digits{ font-size:6.5rem; }
  .dc-sign-instr{ font-size:1.5rem; }
  .dc-sign-foot{ font-size:1.25rem; }
  .dc-sign-meta{ font-size:1rem; }
}
@media print{
  @page{ size:letter portrait; margin:0.4in; }
  .dc-print-bar{ display:none !important; }
  .dc-sign{ padding:0; }
}
/* Kiosk (optional desk screen): typed number, "Is This You?" confirm */
.ki-typed{ margin:var(--sp-2) 0 0; padding:8px 32px; border:3px solid var(--bp-gold); border-radius:var(--toa-r-dense); background:var(--bp-surface-cream); font-size:clamp(3rem,6vw,5rem); font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--bp-navy); }
.ki-typed[hidden]{ display:none; }
/* While a number is being typed the logo steps aside, so "No. 101" is in view at 1366x768. */
.ki-app:has(.ki-typed:not([hidden])) .ki-idle-logo{ display:none; }
.ki-stage.is-confirm{ background:var(--bp-surface-cream); color:var(--bp-navy); outline:4px solid var(--bp-gold); outline-offset:-4px; }
.ki-confirm{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-4); margin-top:var(--sp-4); }
.ki-confirm[hidden]{ display:none; }
body.kiosk .ki-confirm-btn{ min-height:72px; padding:0 48px; font-size:1.75rem; }
/* Board: code line and kiosk line side by side when there's room (the desk match stays in view at 1366x768) */
.hd-ci-lines{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:0 0 var(--sp-4); }
.hd-ci-lines > p{ flex:1 1 360px; margin:0; }
/* === end numbers === */

/* === numbers-attendee (Academy number and self check-in on Home; DESIGN 15.8) === */
/* The Academy number under the greeting: small, one line. */
.att-number{ margin-top:var(--sp-1); font-size:var(--toa-p-secondary); line-height:var(--toa-lh-body); color:var(--bp-text-slate); font-variant-numeric:tabular-nums; }
.att-number strong{ color:var(--bp-text); font-weight:700; }
.att-number-block{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--bp-line-soft); }
.att-number-block .att-secondary{ margin-top:var(--sp-1); }
.att-number-value{ font-variant-numeric:tabular-nums; letter-spacing:0.02em; }
/* Check In card: white, gold 2px edge, the one Primary on the screen while it shows. */
.att-ci{ border:2px solid var(--bp-gold); scroll-margin-top:24px; }
.portal-container .att-ci.att-block{ margin-top:0; margin-bottom:var(--sp-5); }
.att-ci h2{ margin-bottom:var(--sp-2); }
.att-ci-lead{ font-size:var(--toa-p-body); line-height:var(--toa-lh-body); color:var(--bp-text); }
.att-ci-form{ margin-top:var(--sp-4); }
.att-ci-form .field{ gap:var(--sp-2); }
.att-ci-row{ display:flex; flex-direction:column; gap:var(--sp-3); }
.att-ci-input{
  min-height:64px; padding:0 20px; font-size:2.25rem; font-weight:700; line-height:1;
  letter-spacing:0.25em; font-variant-numeric:tabular-nums; text-align:center;
}
body.portal .att-ci-btn{ min-height:64px; width:100%; font-size:var(--toa-p-btn); }
@media (min-width:640px){
  .att-ci-row{ flex-direction:row; align-items:stretch; }
  .att-ci-input{ width:12rem; flex:none; text-align:left; }
  body.portal .att-ci-btn{ width:auto; min-width:200px; }
}
#checkin.att-checkin{ scroll-margin-top:24px; }
#checkin.att-checkin:focus{ outline:none; }
#checkin.att-checkin:focus-visible{ outline:var(--toa-focus); outline-offset:3px; }
/* === end numbers-attendee === */

/* === tests-portal-2 === (team call 2026-09-28, DESIGN 16: tests wait for the instructor, the
   page updates itself, "Just finished" nudge, My Badge) */
[data-live-region] > .card + .card{ margin-top:var(--sp-5); }
/* Test page, before the instructor starts it */
.exam-wait p[role="status"]{ font-size:var(--toa-p-body); line-height:var(--toa-lh-body); font-weight:600; color:var(--toa-neutral-text); }
.exam-wait-note{ font-size:var(--toa-p-secondary); line-height:var(--toa-lh-body); color:var(--bp-text-slate); }
/* "Just finished: <class>. Rate it now." leads To Do Today */
.att-nudge{ border-left:4px solid var(--bp-gold); padding-left:var(--sp-4); }
.att-nudge-text{ max-width:none; margin:0 0 var(--sp-3); font-size:var(--toa-p-body); line-height:var(--toa-lh-body); font-weight:600; color:var(--bp-text); }
/* My Badge: the number large, a QR that holds just the number */
.att-badge h2{ margin:0 0 var(--sp-3); }
.att-badge-body{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.att-badge-text{ min-width:0; }
.att-badge-no{ margin:0; font-size:2rem; line-height:1.5; color:var(--bp-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.att-badge-no strong{ font-size:2.5rem; font-weight:700; }
.att-badge-name{ margin:var(--sp-1) 0 0; font-size:var(--toa-p-body); line-height:var(--toa-lh-body); font-weight:700; color:var(--bp-text); overflow-wrap:anywhere; }
.att-badge-text .att-secondary{ margin-top:var(--sp-1); overflow-wrap:anywhere; }
.att-badge-qr{ flex:none; width:152px; margin:0; background:var(--bp-white); }
.att-badge-qr svg{ display:block; width:100%; height:auto; }
.att-badge-help{ margin:var(--sp-4) 0 0; font-size:var(--toa-p-secondary); line-height:var(--toa-lh-body); color:var(--bp-text-slate); }
@media (max-width:1023px){
  /* Year-round Home on phones: the badge sits below the record (Academy days keep it in the side column). */
  .yr-home > .yr-side > .att-badge{ order:4; }
}
@media (max-width:359px){
  .att-badge-body{ flex-direction:column; align-items:flex-start; }
}
/* === end tests-portal-2 === */

/* === survey === (DESIGN 16: Academy Experience Survey, Show on Screen, prize draw) */
/* ---- Attendee form (/me/survey) ---- */
.sv-lead{ margin:0; font-size:var(--toa-p-body); font-weight:600; color:var(--bp-text); line-height:var(--toa-lh-body); }
.sv-notice{ margin:var(--sp-2) 0 var(--sp-5); }
.sv-form .sv-section + .sv-section{ margin-top:var(--sp-5); }
.sv-section > h2{ margin-bottom:0; }
.sv-item{ border:0; margin:0; padding:var(--sp-6) 0 0; min-width:0; }
.sv-q{ float:left; width:100%; padding:0; margin:0 0 var(--sp-3); font-size:var(--toa-p-body); font-weight:700; line-height:var(--toa-lh-head); color:var(--bp-text); }
.sv-req{ font-size:var(--toa-p-secondary); font-weight:400; color:var(--bp-text-slate); }
.sv-item .field-error{ clear:both; margin-bottom:var(--sp-3); }
.sv-scale, .sv-nps, .sv-ends{ clear:both; }
.sv-scale{ display:grid; grid-template-columns:1fr; gap:8px; }
.sv-choice{ position:relative; display:block; cursor:pointer; }
.sv-choice input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.sv-choice-box{ display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 16px 6px 8px; background:var(--bp-white);
  border:2px solid var(--toa-line-control); border-radius:var(--toa-r-control); font-size:var(--toa-p-body); font-weight:500; color:var(--bp-text); line-height:1.2; }
.sv-num{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background:var(--bp-surface-gray); font-weight:700; font-size:1.125rem; color:var(--bp-text); }
.sv-word{ min-width:0; }
@media (hover:hover) and (pointer:fine){ .sv-choice:hover .sv-choice-box{ border-color:var(--bp-navy); } }
.sv-choice input:focus-visible + .sv-choice-box{ outline:var(--toa-focus); outline-offset:3px; }
.sv-choice input:checked + .sv-choice-box{ border:3px solid var(--bp-navy); background:var(--bp-surface-cream); font-weight:700; padding:5px 15px 5px 7px; }
.sv-choice input:checked + .sv-choice-box .sv-num{ background:var(--bp-navy); color:var(--bp-gold); }
.sv-scale-3 .sv-choice-box, .sv-choice-num .sv-choice-box{ justify-content:center; padding:6px 12px; text-align:center; }
.sv-scale-3 .sv-choice input:checked + .sv-choice-box, .sv-choice-num input:checked + .sv-choice-box{ padding:5px 11px; }
.sv-item.has-error .sv-choice-box{ border-color:var(--toa-bad-line); }
.sv-ends{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px var(--sp-4); margin:0 0 var(--sp-3); font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.sv-nps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
@media (min-width:480px){ .sv-nps{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.sv-choice-num .sv-choice-box{ font-weight:700; font-variant-numeric:tabular-nums; padding:6px 0; }
.sv-choice-num input:checked + .sv-choice-box{ padding:5px 0; }
.sv-section .field{ margin-top:var(--sp-6); }
.sv-submit{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); margin-top:var(--sp-6); }
.sv-save{ margin:0; min-height:1.5em; font-size:var(--toa-p-secondary); color:var(--bp-text-slate); }
.sv-save[data-tone="success"]{ color:var(--toa-ok-text); }
.sv-save[data-tone="warning"]{ color:var(--toa-warn-text); }
.sv-save[data-tone="danger"]{ color:var(--toa-bad-text); }
.sv-thanks-big{ font-size:var(--toa-p-h2); font-weight:700; line-height:var(--toa-lh-head); }
.sv-thanks:focus{ outline:var(--toa-focus); outline-offset:3px; }
@media (min-width:480px){ .sv-scale-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:600px){
  .sv-scale{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .sv-scale.sv-scale-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sv-scale:not(.sv-scale-3) .sv-choice-box{ flex-direction:column; justify-content:center; gap:6px; padding:10px 6px; text-align:center; min-height:96px; font-size:var(--toa-p-secondary); }
  .sv-scale:not(.sv-scale-3) .sv-choice input:checked + .sv-choice-box{ padding:9px 5px; }
}
@media (min-width:768px){ .sv-nps{ grid-template-columns:repeat(11,minmax(0,1fr)); gap:6px; } }
@media (max-width:639px){ .sv-submit .btn{ width:100%; } }

/* ---- Home card (portal/_survey_card.html) ---- */
.sv-card h2{ margin-bottom:var(--sp-2); }
.sv-card .actions{ margin-top:var(--sp-4); }
.sv-card-done{ margin-top:var(--sp-5); }

/* ---- Staff page (/console/survey/<id>) ---- */
.sv-status .card-head > .sv-status-text{ flex:1 1 320px; min-width:0; }
.sv-status h2{ margin:0; }
.sv-status-line{ margin-top:var(--sp-3); }
.sv-status .c-actions{ margin-top:0; }
.sv-big{ font-size:var(--toa-c-stat); font-weight:700; line-height:1.1; margin-right:6px; font-variant-numeric:tabular-nums; }
.sv-next h2{ margin:0 0 var(--sp-2); }
.sv-winners li{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--bp-line-soft); }
.sv-res-grid{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.sv-res-grid > .card{ margin:0; }
.sv-res h3{ margin:0 0 var(--sp-2); }
.sv-avg{ margin:0 0 var(--sp-4); font-size:var(--toa-c-body); }
.sv-avg strong{ font-size:1.75rem; font-weight:700; margin-right:4px; font-variant-numeric:tabular-nums; }
.sv-dist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sv-dist li{ display:grid; grid-template-columns:minmax(6.5em,auto) minmax(0,1fr) 3ch; align-items:center; gap:var(--sp-3); font-size:var(--toa-c-secondary); }
.sv-dist-word{ white-space:nowrap; }
.sv-dist-bar{ display:block; height:12px; border-radius:999px; background:var(--bp-surface-gray); border:1px solid var(--bp-line); overflow:hidden; }
.sv-dist-fill{ display:block; height:100%; width:var(--p,0%); background:var(--bp-navy); border-radius:999px; }
.sv-dist-n{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.sv-comments{ list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.sv-comments li{ padding:var(--sp-4) 0; border-top:1px solid var(--bp-line-soft); }
.sv-comments li p{ margin:0; overflow-wrap:anywhere; }
.sv-comments li p + p{ margin-top:var(--sp-2); }
.sv-com-who{ font-weight:600; }
.sv-com-label{ font-weight:600; color:var(--bp-text-slate); margin-right:4px; }

/* ---- Show on Screen (projector) ---- */
body.sv-screen-body .kiosk-main, body.sv-win-body .kiosk-main{ justify-content:center; align-items:center; }
.sv-screen{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(24px,4vw,72px); width:100%; max-width:1760px; }
.sv-screen-words{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(8px,1.6vh,20px); min-width:0; }
.sv-screen-logo{ display:block; height:clamp(80px,14vh,190px); width:auto; }
.sv-screen-title{ margin:0; font-size:clamp(2.5rem,4.6vw,5.25rem); line-height:1.1; font-weight:700; color:var(--bp-text); }
.sv-screen-instr{ margin:0; font-size:clamp(1.75rem,3vw,3.25rem); line-height:1.25; font-weight:600; color:var(--bp-text); }
.sv-screen-link{ margin:0; font-size:clamp(2rem,3.6vw,4.25rem); line-height:1.15; font-weight:700; color:var(--bp-text); overflow-wrap:anywhere;
  padding:0.15em 0.4em; background:var(--bp-surface-cream); border-radius:var(--toa-r-dense); }
.sv-screen-count{ margin:0; font-size:clamp(1.5rem,2.2vw,2.5rem); font-weight:600; color:var(--bp-text-slate); }
.sv-screen-count span{ color:var(--bp-text); font-weight:700; font-variant-numeric:tabular-nums; }
.sv-screen-note{ margin:0; font-size:1.5rem; color:var(--toa-warn-text); background:var(--toa-warn-soft); padding:8px 16px; border-radius:var(--toa-r-dense); }
.sv-screen-qr{ display:block; width:min(66vh,44vw); height:auto; aspect-ratio:1/1; background:var(--bp-white); }
@media (max-width:899px), (orientation:portrait){
  .sv-screen{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .sv-screen-words{ align-items:center; }
  .sv-screen-qr{ width:min(80vw,48vh); }
}

/* ---- Prize draw winner (projector) ---- */
.sv-win-actions .inline-form{ margin:0; }
.sv-win{ text-align:center; width:100%; max-width:1760px; }
.sv-win-lead{ margin:0; font-size:clamp(2rem,4vw,4.25rem); font-weight:600; color:var(--bp-text-slate); }
.sv-win-name{ margin:clamp(8px,2vh,24px) 0 0; font-size:clamp(3.5rem,10vw,11rem); line-height:1.05; font-weight:700; color:var(--bp-text); overflow-wrap:anywhere; text-wrap:balance; }
.sv-win-first, .sv-win-last{ display:inline-block; }
.sv-win-district{ margin:clamp(12px,3vh,40px) 0 0; font-size:clamp(2rem,4.6vw,5rem); line-height:1.15; font-weight:600; color:var(--bp-text); }
.sv-win-meta{ margin:clamp(16px,4vh,48px) 0 0; font-size:clamp(1.25rem,1.6vw,1.75rem); color:var(--bp-text-slate); }
/* The winner reveal (a short shuffle, then the name settles) lives in the motion block (DESIGN 17). */
/* === end survey === */

/* === academy-badges === */
/* Badges & Stickers: the badge print file card (DESIGN 16, The Badge Print File). The sticker card below it
   keeps its own spacing; the reprint note sits level with the Print One Badge row. */
.ab-card .c-top-split{ align-items:end; }
.ab-note{ margin:0; max-width:52ch; }
/* === end academy-badges === */

/* === signups === */
/* Sign-Ups inbox and Alumni Import (DESIGN 16). Console look: white cards on grey, 16px floor,
   flat, 48px targets. Area groups are headed sections; the table becomes rows under 768px. */
.su-sheet{ margin-bottom:var(--sp-5); }
.su-sheet-head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); justify-content:space-between; }
.su-sheet-head h2{ margin:0; }
.su-sheet .actions{ margin-top:var(--sp-4); }
.su-conn{ margin-top:var(--sp-4); }
.su-facts{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-3); }
.su-facts > div{ display:grid; grid-template-columns:minmax(96px,160px) minmax(0,1fr); gap:var(--sp-3); }
.su-facts dt{ font-weight:700; color:var(--bp-text); }
.su-facts dd{ margin:0; min-width:0; }
.su-bulkbar{ position:sticky; top:calc(var(--toa-header-h) + 8px); z-index:5; padding:var(--sp-3) var(--sp-4);
  background:var(--bp-white); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); }
.su-bulk-status{ flex-basis:100%; margin:0; font-weight:600; color:var(--toa-bad-text); }
.su-bulk-status:empty{ display:none; }
.su-group{ margin-top:var(--sp-6); }
.su-group-head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4); margin-bottom:var(--sp-3); }
.su-group-head h2{ margin:0; overflow-wrap:anywhere; }
.su-group-head .c-meta{ margin:0; }
.su-group-all{ margin-left:auto; }
.su-result .c-meta{ margin-top:4px; }
.su-choice{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.su-choice .btn{ min-width:0; }
.su-sheet p{ overflow-wrap:anywhere; }
/* One column grid for every area group, so the groups line up down the page. */
@media (min-width:768px){
  .su-table{ table-layout:fixed; width:100%; }
  .su-table th:nth-child(1){ width:24%; } .su-table th:nth-child(2){ width:72px; }
  .su-table th:nth-child(3){ width:16%; } .su-table th:nth-child(4){ width:17%; }
  .su-table th:nth-child(5){ width:128px; }
  .su-table td, .su-table th{ overflow-wrap:anywhere; }
}
@media (max-width:1023px){ .su-bulkbar{ position:static; } }
@media (max-width:767px){
  .su-group-all{ margin-left:0; }
  .su-facts > div{ grid-template-columns:1fr; gap:2px; }
  .su-choice .btn{ flex:1 1 140px; }
}
/* === end signups === */

/* === design-clean === (DESIGN 17, 2026-09-28: the cleaner look. One card style, one radius per
   surface, flat, hairlines only where they separate content; one strong heading per screen;
   secondary text 18px on the portal and never under 16px anywhere. Overrides earlier blocks.) */

/* Portal rhythm: a little more air above the page and under the greeting, on screens tall enough
   that the Check In card still fits in the first screen (Q19). */
@media (min-height:700px){
  .portal-main{ padding-top:var(--sp-7); }
  .att-hello{ margin-bottom:var(--sp-7); }
}
.att-hello .att-secondary{ margin-top:var(--sp-2); }
body.portal .page-subtitle{ font-size:var(--toa-p-secondary); line-height:var(--toa-lh-body); }

/* Done states are a soft fill, not a heavy frame: the check and the words carry them. */
.card-done{ border:1px solid transparent; }
/* Checked in: a quiet green status line, not another box. */
.att-checkin.is-done{ border-color:transparent; background:transparent; padding:6px 10px; margin-inline:-10px; }

/* "Just finished" leads To Do Today without a side stripe (no left-border-only styles). */
.att-nudge{ border-left:0; padding-left:0; }

/* Waiting for the instructor: a small gold status dot before the words (the dot pulses only in
   the motion block). Used on Home, Tests & Scores and the test page. */
.wait-dot{
  position:relative; display:inline-block; flex:none; width:12px; height:12px; margin-top:.5em;
  border-radius:50%; background:var(--bp-gold); border:2px solid var(--toa-warn-text);
}
.att-row-wait, .card-next .att-row-wait{ color:var(--bp-text-slate); }
.exam-wait{ gap:var(--sp-3); }
.wait-status{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-size:var(--toa-p-secondary); font-weight:600; line-height:1.4; color:var(--bp-text);
}
.wait-status .wait-dot{ margin-top:0; }
.exam-wait .exam-wait-lead{ font-size:var(--toa-p-body); line-height:var(--toa-lh-body); font-weight:600; color:var(--bp-text); }

/* Your Academies rail: the chosen Academy is a cream row with a navy hairline, no side bar. */
.yr-rail-link{ border-left:1px solid var(--bp-line); }
.yr-rail-link[aria-current="page"]{ border-color:var(--bp-navy); }
@media (hover:hover) and (pointer:fine){ .yr-rail-link:hover{ border-color:var(--bp-navy); } }

/* A table inside a card does not draw a second frame. */
.card .table-box{ border-color:transparent; }

/* Console Today and Get Ready: one grouped list, hairlines between the steps, not six boxes. */
.hd-steps{ gap:0; background:var(--bp-white); border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); }
.hd-step, .hd-step.is-done, .hd-step.is-complete{ border:0; border-radius:0; background:transparent; }
.hd-step.is-problem{ border:0; }
.hd-steps > .hd-step + .hd-step{ border-top:1px solid var(--bp-line-soft); }
.hd-next{ position:relative; }
.hd-code-card + .hd-steps, .hd-next + .hd-steps{ margin-top:var(--sp-5); }

/* Who's Answering: the summary is plain counts, not a second row of pills. */
.hd-summary li strong{ font-size:var(--toa-c-h3); font-variant-numeric:tabular-nums; }
.hd-summary li + li{ padding-left:var(--sp-5); border-left:1px solid var(--bp-line); }

/* People: the two less common tools sit as quiet links under the page header. */
.c-more-links{ display:flex; flex-wrap:wrap; gap:0 var(--sp-5); margin:calc(-1 * var(--sp-4)) 0 var(--sp-4); }

/* Show on Screen pages: the header loses its rule so the code or QR stands alone. */
body.dc-body .kiosk-header, body.sv-screen-body .kiosk-header, body.sv-win-body .kiosk-header{ border-bottom-color:transparent; }
/* === end design-clean === */

/* === motion === (DESIGN 17: an opt-in motion layer; busplanner.com itself ships none.)
   Rules: transform and opacity only; 200 to 320ms on cubic-bezier(.2,.7,.3,1); every animation
   sits inside prefers-reduced-motion: no-preference, so nothing here exists for someone who asked
   for less motion. Nothing is ever hidden unless an animation is running: the load entrance is a
   pure CSS animation gated on html.m-enter (added and taken off again by the head script), the
   rest is started by static/js/motion.js, so with JavaScript off every screen is complete and
   still. No parallax, no carousels, no loops except the waiting dot. Answer options never move. */
:root{
  --m-ease:cubic-bezier(.2,.7,.3,1);
  --m-dur:280ms;
  --m-rise:12px;
  --m-step:45ms;
}
@media (prefers-reduced-motion: no-preference){

  /* 1. Cards and sections fade and rise in on page load, with a short stagger. */
  html.m-enter :is(.portal-main, .console-main, .kiosk-main)
    :is(.card, .att-hello, .att-schedule, .att-checkin, .sv-card-done, .yr-record-wrap, .yr-acad-head,
        .yr-rail, .page-header, .table-box, .hd-steps, .hd-others, .empty-state, .flash-stack > .alert,
        .c-chips, .hd-seg, .sv-screen, .dc-screen):not(.card *):not(.exam-grid--answer *):not(.att-ci){
    animation:m-rise var(--m-dur) var(--m-ease) backwards;
    animation-delay:calc(var(--m-i, 0) * var(--m-step));
  }
  html.m-enter :is(.portal-main, .console-main) :nth-child(2){ --m-i:1; }
  html.m-enter :is(.portal-main, .console-main) :nth-child(3){ --m-i:2; }
  html.m-enter :is(.portal-main, .console-main) :nth-child(4){ --m-i:3; }
  html.m-enter :is(.portal-main, .console-main) :nth-child(5){ --m-i:4; }
  html.m-enter :is(.portal-main, .console-main) :nth-child(n+6){ --m-i:5; }
  /* The main heading never waits: it is the first thing to read. */
  html.m-enter :is(.att-hello, .page-header){ --m-i:0; }

  /* 2. Buttons: a quick press everywhere, a 1px lift on mouse devices only. Individual
     transform properties (translate, scale), so no entrance or press rule fights another. */
  .btn{
    transition:background-color .15s ease, border-color .15s ease, color .15s ease,
               translate .18s var(--m-ease), scale .1s ease;
  }
  .btn:active:not([disabled]):not([aria-disabled="true"]){ scale:.97; }
  @media (hover:hover) and (pointer:fine){
    /* Not on controls pressed again and again in place: the Present remote and Previous/Next. */
    .btn:hover:not([disabled]):not([aria-disabled="true"]):not(body.present .btn):not(.q-nav .btn){ translate:0 -1px; }
    .btn:active:not([disabled]):not([aria-disabled="true"]){ translate:0 0; }
  }

  /* 3. Self check-in success: the green line settles in and its check mark draws itself
     (a cover over the icon slides away to the right: transform only). */
  .att-checkin.is-done[data-focus-me]{ position:relative; animation:m-settle 320ms var(--m-ease) backwards; }
  .att-checkin.is-done[data-focus-me]::after{
    content:""; position:absolute; left:7px; top:4px; width:30px; height:34px;
    background:var(--bp-surface); transform-origin:right center; pointer-events:none;
    animation:m-wipe 420ms var(--m-ease) 160ms both;
  }

  /* 4. Test panel: answering a question pops its tile; the Saved word fades in. */
  .exam-tile.m-pop{ animation:m-pop 260ms var(--m-ease); }
  [data-mode="saved"] [data-sync-text], [data-mode="saved"] [data-sync-icon]{ animation:m-fade 220ms var(--m-ease); }

  /* 5. Progress bars fill smoothly from the left on load. */
  html.m-enter .bar-fill{ transform-origin:left center; animation:m-fill 600ms var(--m-ease) 120ms backwards; }

  /* 6. Waiting for the instructor: a calm pulse on the status dot only (never on the words). */
  .wait-dot::after{
    content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--bp-gold);
    animation:m-dot 2.4s ease-out infinite;
  }
  /* ...and when the admin opens the test, the changed card slides in with its Start button. */
  .m-swap-in{ animation:m-rise var(--m-dur) var(--m-ease) backwards; }
  .m-swap-in .btn-primary{ animation:m-slide 320ms var(--m-ease) 80ms backwards; }

  /* 7. Prize draw: a short shuffle, then the name settles (motion.js; under 2 seconds). */
  .sv-win-name{ position:relative; }
  .sv-win-name.m-shuffling > :not(.m-shuffle){ opacity:0; }
  .m-shuffle{ position:absolute; inset:0; color:var(--bp-text); text-wrap:balance; }
  .sv-win.m-drawing .sv-win-district, .sv-win.m-drawing .sv-win-meta{ opacity:0; }
  .sv-win-district, .sv-win-meta{ transition:opacity 320ms var(--m-ease); }
  .sv-win-name.m-settle{ animation:m-settle 320ms var(--m-ease); }

  /* 8. Show on Screen: the code's digits fade in one after another on a new code. */
  .m-digit{ display:inline-block; animation:m-rise 300ms var(--m-ease) backwards; animation-delay:calc(var(--m-i, 0) * 70ms); }

  /* 9. Toasts: flash messages and banners slide in; motion.js slides them out. */
  .flash-stack > .alert, .idle-banner, .exam-lastcall:not([hidden]), .exam-lockednote:not([hidden]){
    animation:m-drop 300ms var(--m-ease) backwards;
  }
  .m-leave{ animation:m-lift 220ms var(--m-ease) forwards; }

  /* 10. Console Today: the Do This Now card glows softly once when its step changes. */
  .hd-next.m-changed::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    border:3px solid var(--bp-gold); opacity:0; animation:m-glow 1600ms ease-in-out;
  }
}
@keyframes m-rise{ from{ opacity:0; transform:translate3d(0, var(--m-rise), 0); } to{ opacity:1; transform:none; } }
@keyframes m-settle{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:none; } }
@keyframes m-wipe{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
@keyframes m-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
@keyframes m-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes m-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes m-dot{ 0%{ transform:scale(1); opacity:.9; } 70%, 100%{ transform:scale(2.2); opacity:0; } }
@keyframes m-slide{ from{ opacity:0; transform:translate3d(-12px, 0, 0); } to{ opacity:1; transform:none; } }
@keyframes m-drop{ from{ opacity:0; transform:translate3d(0, -8px, 0); } to{ opacity:1; transform:none; } }
@keyframes m-lift{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translate3d(0, -8px, 0); } }
@keyframes m-glow{ 0%{ opacity:0; } 25%{ opacity:1; } 60%{ opacity:1; } 100%{ opacity:0; } }
/* === end motion === */

/* === followups === (DESIGN 19, 2026-09-28: small follow-ups from the team-call build.)
   The projector's answer bars (.proj-bar-fill) rest at their width (--p, set once per slide by
   projector.js) and fill from the left with transform: scaleX only, like the progress bars in
   the motion block (17.2 item 6). The animation exists only inside the reduced-motion guard. */
@media (prefers-reduced-motion: no-preference){
  .proj-bar-fill{ transform-origin:left center; animation:m-fill 600ms var(--m-ease) 120ms backwards; }
}
/* === end followups === */

/* === mail-health === (DESIGN 18: the Email Health card on the Emails page, the quiet console
   banner while email is off or Microsoft is refusing it, and the code page's "see the desk"
   swap made by static/js/mailstatus.js.) */
.mail-health-banner{ margin-bottom:var(--sp-5); }
.mail-health{ margin-bottom:var(--sp-6); }
.mail-health-head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.mail-health-head .t-h3{ margin:0; }
.mail-health-lead{ margin:var(--sp-3) 0 0; }
.mail-health .c-meta{ margin-top:var(--sp-3); }
.mail-health-test{ margin-top:var(--sp-5); }
.mail-health-test .field-hint{ margin:0; }
.att-public [data-mail-hide][hidden]{ display:none !important; }
/* === end mail-health === */

/* === desk-scan === (DESIGN 20, 2026-09-28: Scan Badges. Phones: the camera large on top and
   the result right under it, readable at arm's length. From 1024px: camera left, results and
   Recent Scans right. The result fills: green #146C2E and red #9B1C14 with white text, gold
   with navy (amber), navy with white (found, nothing recorded); all at least 6.5:1.) */
html:not(.js) .sc-js{ display:none !important; }
.sc-grid [hidden], .sc-head [hidden]{ display:none !important; }
body.sc-body .console-main{ padding-top:var(--sp-5); }
.sc-head{ margin-bottom:var(--sp-4); align-items:center; }
.sc-head .page-subtitle{ margin-top:2px; }
.sc-seg{ margin:0; }
.sc-gap{ margin-bottom:var(--sp-4); }
.sc-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp-4); align-items:start; }
.sc-cam, .sc-side{ min-width:0; display:flex; flex-direction:column; gap:var(--sp-3); }

/* The camera frame: a 6px ring that takes the result's colour for 3 seconds */
.sc-frame{
  position:relative; width:100%; aspect-ratio:1 / 1; max-height:42vh; max-height:42svh; overflow:hidden;
  border-radius:var(--toa-r-dense); border:6px solid var(--bp-line); background:var(--bp-surface-gray);
}
.sc-frame.is-live{ background:#0A1622; }
.sc-frame[data-tone="success"]{ border-color:var(--toa-ok-strong); }
.sc-frame[data-tone="warning"]{ border-color:var(--bp-gold); }
.sc-frame[data-tone="danger"]{ border-color:var(--toa-bad-strong); }
.sc-frame[data-tone="info"]{ border-color:var(--bp-navy); }
.sc-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.sc-frame.is-front .sc-video{ transform:scaleX(-1); }
.sc-aim{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.sc-aim span{ width:58%; aspect-ratio:1 / 1; max-height:78%; border:3px solid rgba(255,255,255,.9); border-radius:18px; }
.sc-cam-msg{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-3); padding:var(--sp-5); text-align:center; color:var(--bp-text);
}
.sc-cam-icon{ color:var(--bp-navy); line-height:0; }
.sc-cam-text{ margin:0; max-width:34ch; font-size:var(--toa-c-body); line-height:1.45; font-weight:600; }
.sc-cam-bar{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.sc-cam-bar .btn{ flex:1 1 180px; }

/* Live count */
.sc-count{ margin:0; font-size:1.25rem; line-height:1.3; font-weight:600; color:var(--bp-text); font-variant-numeric:tabular-nums; }
.sc-count strong{ font-size:2rem; font-weight:700; }

/* The result: big, plain words; idle is a white card */
.sc-result{
  display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:132px;
  padding:var(--sp-4) var(--sp-5); border-radius:var(--toa-r-dense); border:1px solid var(--bp-line);
  background:var(--bp-white); color:var(--bp-text);
}
.sc-result p{ margin:0; overflow-wrap:anywhere; }
.sc-result-title{ font-size:1.75rem; line-height:1.2; font-weight:700; }
.sc-result-line{ font-size:1.25rem; line-height:1.35; font-weight:600; }
.sc-result-note{ font-size:1rem; line-height:1.4; font-weight:600; }
.sc-result[data-tone="idle"] .sc-result-title{ font-size:1.375rem; }
.sc-result[data-tone="idle"] .sc-result-line{ font-size:var(--toa-c-body); font-weight:400; color:var(--bp-text-slate); }
.sc-result[data-tone="success"]{ background:var(--toa-ok-strong); border-color:var(--toa-ok-strong); color:var(--bp-white); }
.sc-result[data-tone="warning"]{ background:var(--bp-gold); border-color:var(--bp-gold); color:var(--bp-navy); }
.sc-result[data-tone="danger"]{ background:var(--toa-bad-strong); border-color:var(--toa-bad-strong); color:var(--bp-white); }
.sc-result[data-tone="info"]{ background:var(--bp-navy); border-color:var(--bp-navy); color:var(--bp-white); }

/* The box: number, USB scanner or name */
.sc-type{ display:flex; flex-direction:column; gap:var(--sp-2); }
.sc-type .field-label{ margin:0; }
.sc-type .field-hint{ margin:0; }
.sc-type-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.sc-input{ flex:1 1 200px; min-width:0; width:auto; font-size:1.375rem; font-weight:600; }
.sc-type-btn{ flex:0 0 auto; }

/* Names found */
.sc-names{ display:flex; flex-direction:column; gap:var(--sp-2); }
.sc-names-status{ margin:0; font-size:var(--toa-c-secondary); font-weight:600; color:var(--bp-text-slate); }
.sc-name-list{ list-style:none; margin:0; padding:0; border:1px solid var(--bp-line); border-radius:var(--toa-r-dense); background:var(--bp-white); }
.sc-name-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-4); padding:var(--sp-3) var(--sp-4); }
.sc-name-row + .sc-name-row{ border-top:1px solid var(--bp-line-soft); }
.sc-name-main{ display:flex; flex-direction:column; min-width:0; flex:1 1 200px; }
.sc-name-name{ font-size:var(--toa-c-body); font-weight:700; overflow-wrap:anywhere; }
.sc-name-facts{ font-size:var(--toa-c-secondary); color:var(--bp-text-slate); font-variant-numeric:tabular-nums; }
.sc-name-in{ font-size:var(--toa-c-secondary); font-weight:600; color:var(--toa-ok-text); }

/* Recent Scans (this device) */
.sc-recent{ margin-top:var(--sp-2); }
.sc-recent-h{ margin:0 0 var(--sp-2); font-size:var(--toa-c-h3); }
.sc-recent-empty{ margin:0; font-size:var(--toa-c-secondary); color:var(--bp-text-slate); }
.sc-recent-list{ list-style:none; margin:0; padding:0; }
.sc-recent-item{ display:flex; gap:var(--sp-3); align-items:baseline; padding:var(--sp-2) 0; font-size:1rem; line-height:1.4; }
.sc-recent-item + .sc-recent-item{ border-top:1px solid var(--bp-line-soft); }
.sc-recent-item::before{ content:""; flex:none; width:12px; height:12px; border-radius:50%; background:var(--bp-navy); transform:translateY(1px); }
.sc-recent-item[data-tone="success"]::before{ background:var(--toa-ok-strong); }
.sc-recent-item[data-tone="warning"]::before{ background:var(--bp-gold); }
.sc-recent-item[data-tone="danger"]::before{ background:var(--toa-bad-strong); }
.sc-recent-time{ flex:none; min-width:4.5rem; color:var(--bp-text-slate); font-variant-numeric:tabular-nums; }
.sc-recent-text{ min-width:0; overflow-wrap:anywhere; }
.sc-links{ margin:0; }

@media (min-width:768px){
  .sc-frame{ max-height:50vh; max-height:50svh; }
  .sc-result-title{ font-size:2rem; }
  .sc-result-line{ font-size:1.375rem; }
}
/* Laptops: camera left, everything else right. The frame fits the first screen. */
@media (min-width:1024px){
  body.sc-body .console-main{ padding-top:var(--sp-6); }
  .sc-grid{ grid-template-columns:minmax(0, 1.35fr) minmax(360px, 1fr); gap:var(--sp-6); }
  .sc-frame{ aspect-ratio:auto; height:clamp(280px, calc(100vh - 300px), 600px); max-height:none; }
  .sc-count strong{ font-size:2.25rem; }
  .sc-result{ min-height:168px; padding:var(--sp-5) var(--sp-6); }
  .sc-result-title{ font-size:2.25rem; }
  .sc-result-line{ font-size:1.5rem; }
}
@media (max-width:767px){
  .sc-head .page-title{ font-size:1.75rem; }
  .sc-head .page-subtitle{ font-size:1rem; }
  .sc-seg{ width:100%; }
}
@media (prefers-reduced-motion: no-preference){
  .sc-result.is-new:not([data-tone="idle"]){ animation:m-settle 240ms var(--m-ease) backwards; }
}
/* Portal Home with the backup switch off: one quiet line where the Check In card was, in the
   same shape as the green "You're checked in" line. */
.att-desk-ci{
  display:flex; align-items:flex-start; gap:12px; margin:0 -10px var(--sp-5); padding:6px 10px;
  font-size:var(--toa-p-body); line-height:var(--toa-lh-body); color:var(--bp-text); scroll-margin-top:24px;
}
.att-desk-ci > .icon{ flex:none; margin-top:.15em; color:var(--bp-navy); }
/* === end desk-scan === */

/* === test-rules === (DESIGN 20, 2026-09-28: no check-in, no test; admins can reopen a closed
   test. The attendee check-in card reuses the waiting card of tests-portal-2.) */
/* Console: "Not checked in" on a person's row (Who's Answering, Check Answers by person) */
.hd-nci{ display:block; width:fit-content; max-width:100%; margin-top:var(--sp-1); padding:0 var(--sp-2);
  border-radius:999px; background:var(--toa-warn-soft); color:var(--toa-warn-text);
  font-size:var(--toa-c-secondary); line-height:1.5; font-weight:600; white-space:nowrap; }
.hd-summary li.hd-summary-nci strong{ color:var(--toa-warn-text); }
/* Attendee: the check-in card keeps the waiting card's look; the status words are the lead. */
.exam-checkin .exam-wait-lead{ max-width:40rem; }
/* === end test-rules === */

/* === evals-record === (DESIGN 20, 2026-09-28: class evaluations open when the class ends or an
   admin opens them; Your Academy Record says how many times and which dates) */
/* Attendee feedback page: a class still on is one line saying when it opens (no form). */
body.portal .fb-locked .fb-class-title{ color:var(--bp-text); }
.fb-locked .fb-summary{ cursor:default; }
.fb-opens{ display:flex; align-items:flex-start; gap:8px; margin-top:var(--sp-1); font-size:var(--toa-p-secondary);
  line-height:var(--toa-lh-body); color:var(--bp-text-slate); }
.fb-opens .icon{ flex:none; margin-top:.2em; color:var(--bp-navy); }
@media (prefers-reduced-motion: no-preference){
  .fb-section.fb-new{ animation:m-drop 320ms var(--m-ease) backwards; }
}
/* Your Academy Record: the count under the page lines, then Academies Attended as plain lines. */
.yr-count{ margin-top:var(--sp-3); font-size:var(--toa-p-body); line-height:var(--toa-lh-body); font-weight:700; color:var(--bp-text); }
.yr-attended{ margin:0 0 var(--sp-6); }
body.portal .yr-attended-h{ margin:0 0 var(--sp-2); font-size:var(--toa-p-body); font-weight:700; line-height:var(--toa-lh-head); }
.yr-attended-list{ display:flex; flex-direction:column; gap:var(--sp-2); margin:0; padding:0; list-style:none; }
.yr-attended-list > li{ margin:0; font-size:var(--toa-p-secondary); line-height:var(--toa-lh-body); color:var(--bp-text); }
.yr-attended-list strong{ font-weight:700; }
.yr-days{ overflow-wrap:anywhere; }
/* Console: where each class evaluation stands, and Open Evaluation Now (admins). */
.ev-side{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--sp-2) var(--sp-3); }
.ev-side .inline-form{ margin:0; }
.ev-side .btn{ white-space:nowrap; }
.ev-today{ margin-top:var(--sp-4); max-width:860px; }
body.console .ev-today-h{ margin:0 0 var(--sp-2); font-size:var(--toa-c-body); font-weight:700; }
.ev-note{ margin:0 0 var(--sp-2); font-size:var(--toa-c-secondary); line-height:1.5; color:var(--toa-warn-text); }
.ev-list{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none; border-top:1px solid var(--bp-line-soft); }
.ev-today .ev-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-4);
  padding:var(--sp-2) 0; border-bottom:1px solid var(--bp-line-soft); min-height:56px; }
.ev-today .ev-row:last-child{ border-bottom:0; }
.ev-main{ flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:var(--toa-c-body); color:var(--bp-text); }
.ev-main strong{ font-weight:700; overflow-wrap:anywhere; }
.ev-time{ font-size:var(--toa-c-secondary); color:var(--bp-text-slate); }
@media (max-width:639px){
  .ev-side{ width:100%; justify-content:flex-start; }
}
/* === end evals-record === */

/* === certificates === (DESIGN 20, 2026-09-28: the "No Class Number Yet" note on the Certificates board) */
.cert-classnum-alert .link{ align-self:flex-start; }
/* === end certificates === */

/* === name-tags === (DESIGN 21, 2026-09-28: Name Tags on Name Tags & Stickers. The card extends the badge card
   above it: one form, three downloads, one name tag for one person, and the instructors' title lines.) */
.nt-card .nt-agenda{ overflow-wrap:anywhere; }
.nt-card .actions .btn{ flex:0 1 auto; }
.nt-card .nt-one{ align-items:end; }
.nt-instructors{ margin-top:var(--sp-4); }
.nt-inst-row{ display:grid; gap:var(--sp-3) var(--sp-4); align-items:end; margin-top:var(--sp-4);
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) auto; }
.nt-inst-row .field{ margin:0; }
.nt-inst-name{ grid-column:1 / -1; font-size:var(--toa-c-body,1rem); color:var(--bp-text); }
@media (max-width:719px){
  .nt-inst-row{ grid-template-columns:1fr; }
  .nt-inst-row .btn{ justify-self:start; }
}
/* === end name-tags === */

/* === name-tag-output === (DESIGN 21.9 to 21.13, 2026-09-29: the output choice, the Back of the Name Tag card,
   Make Name Tags from a File, the share link card and its public page. 16px floor, no inline styles.) */
.nt-card .nt-trim, .nt-back .nt-trim, .nt-file-form .nt-trim{ margin:0; }
.nt-back-grid{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:var(--sp-5) var(--sp-6); align-items:start;
  margin-top:var(--sp-4); }
.nt-back-img{ display:block; width:300px; max-width:100%; height:auto; border:1px solid var(--toa-line-control);
  border-radius:10px; background:var(--bp-navy); }
.nt-back-body > p:first-child{ margin-top:0; }
.nt-back .nt-agenda{ overflow-wrap:anywhere; }
.nt-agenda-form .field{ margin:0; }
.nt-agenda-change{ margin-top:var(--sp-4); }
.nt-file .pp-file{ max-width:100%; }
.nt-file-form .table-box{ max-height:60vh; overflow:auto; }
.nts-create .c-inline-row{ align-items:end; }
.nts-create .field{ margin:0; min-width:12rem; }
.nts-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-4); }
.nts-item{ border:1px solid var(--toa-line-control); border-radius:12px; padding:var(--sp-4); }
.nts-item p{ margin:0 0 var(--sp-2); }
.nts-item .actions{ margin-top:var(--sp-3); }
.nts-copy .c-inline-row .input{ flex:1 1 18rem; }
.nts-copy .btn[hidden]{ display:none; }
.nts-card{ max-width:680px; margin:var(--sp-5) auto; }
.nts-card h1{ margin-bottom:var(--sp-3); }
.nts-academy, .nts-counts, .nts-trim, .nts-until{ margin:0 0 var(--sp-3); }
.nts-form{ margin-top:var(--sp-4); }
.nts-group{ margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--toa-line-control); }
.nts-group h2{ margin-bottom:var(--sp-2); }
.nts-group p{ margin:0 0 var(--sp-3); }
.nts-group .actions .btn{ flex:0 1 auto; }
body.portal .nts-card .btn{ padding-left:16px; padding-right:16px; }
@media (max-width:719px){
  .nt-back-grid{ grid-template-columns:1fr; }
  .nt-back-img{ margin:0 auto; }
}
/* === end name-tag-output === */

/* === integrate === (DESIGN 20, 2026-09-28: the integration pass. Small seams between the new pieces.) */
/* Edit Academy Details now has five groups (Basics, Where, Days and Certificates, Name Tags, Check-In):
   each group heading gets room above it, so it reads as a new group and not as the last field's caption. */
.pp-form > h2 ~ h2{ margin-top:var(--sp-6); }
/* Two notes stacked on the Certificates board (web address, class number) keep a gap between them. */
.alert + .cert-classnum-alert{ margin-top:var(--sp-3); }
/* A long button label must stay on one line inside its button on a 320 to 379px phone. Buttons made with
   a `short` label (Download Attendee Name Tags shows Attendee Name Tags) swap it in under 380px; the full
   label stays in the page and is the button's accessible name (templates/_macros.html). */
.btn-lbl-short{ display:none; }
@media (max-width:379px){
  .btn-lbl-full{ display:none; }
  .btn-lbl-short{ display:inline; }
}
/* Portal card buttons scale their text with the screen; at 320 to 359px use plain 16px so the longest
   ("Sign Out Everywhere Else") fits its card. */
@media (max-width:359px){
  body.portal main .card .btn{ font-size:1rem; }
}
/* 320 to 339px: the console header has no room for the name between the logo and the Menu button
   (the word "Transportation" ran under Menu). The logo spells the name out and carries the alt text. */
@media (max-width:339px){ .console-header .brand-name{ display:none; } }
/* Phones, before check-in: "Forgot it? Show My Badge." is in the front desk line, so the Academy number line
   under the greeting drops its own copy of the link (two jump links to one card on one small screen). */
[data-live-region]:has(.att-desk-ci) .att-number > .lap-hide{ display:none; }
/* === end integrate === */

/* === print-ahead === (DESIGN 20, 2026-09-29: admins print certificates before people finish. The Print Ahead
   card on the Certificates board, its people list, and the small "Printed Ahead" / "Approved by an Admin" marks.) */
.c-ahead-row + .c-ahead-row{ margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--bp-line-soft); }
.c-ahead-row .actions{ margin-top:var(--sp-3); }
.c-ahead-list > li{ justify-content:flex-start; padding:var(--sp-2) 0; }
.c-ahead-list .c-check-row{ align-items:flex-start; flex:1 1 260px; min-width:0; font-weight:400; }
.c-ahead-list .c-check-row .check{ margin-top:2px; }
.c-ahead-list .c-list-main > span:first-child{ font-weight:600; }
.c-ahead-list .check[disabled]{ cursor:not-allowed; opacity:.5; }
.c-marks{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:var(--sp-2); }
/* === end print-ahead === */

/* === delete-academy === (DESIGN 23, 2026-09-29: Delete This Academy. A quiet danger zone at the bottom of the
   Details tab and the confirm page. Body text 16px or more; the Delete buttons are the white danger style, never gold.) */
.del-zone{ border-color:var(--toa-bad-line); }
.del-zone .t-h3{ color:var(--toa-bad-text); }
.del-card + .del-card{ margin-top:var(--sp-5); }
.del-sub{ margin-top:var(--sp-5); }
.del-list{ margin:var(--sp-3) 0 0; padding-left:var(--sp-5); display:grid; gap:var(--sp-2); max-width:72ch; font-size:var(--toa-c-body); line-height:1.5; }
.del-list strong{ font-weight:700; }
.del-copy{ margin-bottom:var(--sp-3); }
.del-card .field-hint{ font-size:16px; }
.del-card .input{ max-width:24rem; }
/* === end delete-academy === */

/* === test-mode === (DESIGN 22, 2026-09-29: Test Mode. The slim strip on every page about the practice Academy,
   and the control panel. Body text 16px or more; no button label wraps; the strip has no button.) */
.tm-strip{ background:var(--bp-navy, #00274C); color:#fff; font-size:16px; line-height:1.4; font-weight:600;
  padding:10px var(--sp-5, 20px); display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; justify-content:center;
  text-align:center; }
.tm-strip a{ color:#fff; text-decoration:underline; white-space:nowrap; }
.tm-gap{ margin-bottom:var(--sp-4); display:grid; gap:var(--sp-3); }
.tm-intro .tm-enter{ margin-top:var(--sp-5); }
.tm-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-4); }
.tm-item{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); align-items:center; }
.tm-item .btn, .tm-person .btn{ white-space:nowrap; }
.tm-form{ margin:0; }
.tm-line{ margin:0; font-size:16px; line-height:1.5; flex:1 1 260px; min-width:0; max-width:60ch; }
.tm-steps{ margin:var(--sp-3) 0 0; padding-left:var(--sp-5); display:grid; gap:var(--sp-2); font-size:16px; line-height:1.5; max-width:72ch; }
.tm-people{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-3); }
.tm-person{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); align-items:center; justify-content:space-between;
  padding:var(--sp-3) 0; border-top:1px solid var(--bp-line-soft); }
.tm-who{ display:grid; gap:2px; min-width:0; font-size:16px; }
/* === end test-mode === */

/* === flexible-days === (DESIGN 24, 2026-09-29: Which Day Is Today? on Today, Details and Get Ready, the day line on
   Scan Badges, and the confirm page. Body text 16px or more; no button label wraps; no gold button in the card.) */
.dy-card{ margin-bottom:var(--sp-5); }
.dy-line{ margin:var(--sp-2) 0 0; font-size:var(--toa-c-body); line-height:1.5; max-width:72ch; }
.dy-today{ font-weight:600; }
.dy-card .dy-today{ margin-top:var(--sp-1); }
.sc-head + .dy-today{ margin:0 0 var(--sp-4); }
.dy-days{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-4); }
.dy-day{ display:grid; gap:6px; justify-items:center; }
.dy-btn{ white-space:nowrap; }
.dy-btn.is-current, .dy-btn.is-current:disabled{ background:var(--bp-surface-cream); border-color:var(--bp-navy); color:var(--bp-navy);
  opacity:1; cursor:default; }
.dy-btn.is-off, .dy-btn.is-off:disabled{ background:var(--bp-surface-gray); border-color:var(--bp-line); color:var(--bp-text-muted);
  cursor:not-allowed; }
.dy-date{ font-size:16px; line-height:1.3; color:var(--bp-text-slate); white-space:nowrap; }
.dy-shift{ margin-top:var(--sp-4); }
.dy-note{ margin-top:var(--sp-3); }
.dy-confirm + .dy-confirm{ margin-top:var(--sp-5); }
.dy-lead{ margin:var(--sp-2) 0 0; font-size:var(--toa-c-body); font-weight:700; line-height:1.4; }
.dy-list{ margin:var(--sp-3) 0 var(--sp-3); padding-left:var(--sp-5); display:grid; gap:var(--sp-2); max-width:72ch;
  font-size:var(--toa-c-body); line-height:1.5; }
/* === end flexible-days === */

/* === bios-and-referrals (DESIGN 26) === */
.bi-section{ margin:var(--sp-6) 0 var(--sp-4); }
.bi-grid{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.bi-name{ margin:0; }
.bi-role{ margin:var(--sp-1) 0 var(--sp-2); font-weight:700; }
.bi-bio{ margin:var(--sp-2) 0; font-size:1rem; line-height:1.5; }
.bi-contact{ display:grid; gap:var(--sp-2); margin:var(--sp-3) 0 0; }
.al-form{ margin-top:var(--sp-4); display:grid; gap:var(--sp-3); }
.al-form-h{ margin:0; }
/* === end bios-and-referrals === */

/* === door-prizes (DESIGN 25) === */
.dp-screen{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--sp-5); padding:var(--sp-7) var(--sp-4); }
.dp-lead{ margin:0; font-size:clamp(1.75rem,3vw,2.5rem); font-weight:700; color:var(--bp-text-slate); }
.dp-name{ margin:0; font-size:clamp(4rem,11vw,9rem); line-height:1.05; color:var(--bp-navy); overflow-wrap:anywhere; }
.dp-district{ margin:0; font-size:clamp(1.75rem,3.4vw,3rem); color:var(--bp-navy); }
.dp-prize{ margin:0; font-size:clamp(1.5rem,2.8vw,2.5rem); font-weight:700; color:var(--bp-navy); }
.dp-drum{ display:flex; gap:var(--sp-4); margin:0; }
.dp-drum[hidden]{ display:none; }
.dp-drum span{ width:28px; height:28px; border-radius:50%; background:var(--bp-gold); animation:dp-beat .5s ease-in-out infinite; }
.dp-drum span:nth-child(2){ animation-delay:.15s; }
.dp-drum span:nth-child(3){ animation-delay:.3s; }
.dp-pop .dp-name{ animation:dp-pop .7s cubic-bezier(.2,1.4,.4,1) 1; }
@keyframes dp-beat{ 0%,100%{ transform:scale(.6); } 50%{ transform:scale(1.35); } }
@keyframes dp-pop{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .dp-drum span, .dp-pop .dp-name{ animation:none; } }
/* === end door-prizes === */

/* === scan-out-and-tags (DESIGN 27) === */
.sc-dir{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.sc-dir-btn{ min-height:72px; padding:var(--sp-3) var(--sp-4); border:3px solid var(--bp-navy); border-radius:var(--toa-r-dense);
  background:var(--bp-white); color:var(--bp-navy); font:inherit; font-size:1.5rem; font-weight:700; line-height:1.2; white-space:nowrap; cursor:pointer; }
.sc-dir-btn[aria-pressed="true"]{ background:var(--bp-navy); color:var(--bp-white); }
.sc-grid[data-dir="out"] .sc-dir-btn[data-dir="out"][aria-pressed="true"]{ background:#6B2D7A; border-color:#6B2D7A; }
.sc-result-mode{ font-size:1rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.85; }
.sc-grid[data-dir="out"] .sc-result[data-tone="idle"]{ border-color:#6B2D7A; border-width:3px; }
.hd-ci-out{ margin-left:var(--sp-2); font-weight:600; }
html.sc-fs .console-header, html.sc-fs .site-footer, html.sc-fs .sc-head, html.sc-fs .sc-links{ display:none; }
html.sc-fs .sc-result{ min-height:220px; }
html.sc-fs .sc-result-title{ font-size:clamp(2.5rem,6vw,5rem); }
html.sc-fs .sc-result-line{ font-size:clamp(1.75rem,3.6vw,3rem); }
html.sc-fs .sc-count{ font-size:1.75rem; }
html.sc-fs .sc-count strong{ font-size:3rem; }
.nt-people .nt-added{ margin-top:var(--sp-3); }
.nt-people .nt-added li{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
/* === end scan-out-and-tags === */

/* === scan-focus-warning === */
.sc-focus-warn{ position:fixed; left:0; right:0; top:0; z-index:1000; padding:18px 16px; text-align:center;
  background:#b3261e; color:#fff; font-size:1.375rem; font-weight:700; line-height:1.3; cursor:pointer; }
.sc-focus-warn[hidden]{ display:none; }
/* === end scan-focus-warning === */

/* === remembered-academy === */
.ac-indicator{ display:flex; align-items:center; gap:var(--sp-2); margin:0; font-size:1rem; min-width:0; max-width:32rem; white-space:nowrap; }
.ac-indicator .ac-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ac-indicator .ac-label, .ac-indicator .ac-day{ flex:none; }
.ac-indicator .ac-switch{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 var(--sp-2); font-weight:700; }
/* The Academy line sits in its own slim strip under the header so it can never crowd the navigation (owner 2026-09-30). */
.ac-strip{ background:var(--bp-surface, #f4f7fb); border-bottom:1px solid var(--bp-line); padding:0 var(--toa-gutter); }
.ac-strip .ac-indicator{ max-width:none; min-height:44px; margin:0 auto; }
.console-header .brand-name{ display:none; }
@media (min-width:1500px){ .console-header .brand-name{ display:block; } }
.ac-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-3); }
.ac-list form{ margin:0; }
.ac-choice{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); width:100%; min-height:88px; padding:var(--sp-4); text-align:left; font:inherit; cursor:pointer; background:#fff; border:2px solid var(--line, #d5dbe3); border-radius:var(--radius-lg, 16px); color:inherit; }
.ac-choice:hover, .ac-choice:focus-visible{ border-color:var(--navy, #00274C); }
.ac-choice.is-current{ border-color:var(--navy, #00274C); }
.ac-choice-name{ font-size:1.25rem; font-weight:700; }
.ac-choice-meta, .ac-choice-note{ font-size:1rem; }
.ac-keep{ margin-top:var(--sp-3); }
/* === end remembered-academy === */