/* Calm Register — TurboRegister visual system (from the Claude Design handoff, docs/calm-register.md).
   Tokens and themes live on <html class="tr t-light|t-dark b-<theme> [tone-strong]">.
   The "bridge" below applies them to the app's existing class names, so screens restyle
   without their markup changing. Load this file after every other stylesheet. */

/* ── Tokens: light (default) ── */
.tr{
  --font:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  --bg:#F4F5F2;--surface:#FFFFFF;--surface-2:#F1F3EF;--surface-3:#E6EAE5;
  --line:#E1E5E0;--line-strong:#C6CEC8;
  --ink:#14201F;--ink-2:#36433F;--muted:#56635F;
  --shadow:0 1px 2px rgba(20,32,31,.04),0 12px 32px -20px rgba(20,32,31,.22);
  --shadow-pop:0 20px 48px -14px rgba(20,32,31,.28);
  --scrim:rgba(10,18,17,.42);
  --brand:#0F766E;--brand-hover:#0B625B;--brand-ink:#0A5A53;--brand-soft:#E0EFEC;--on-brand:#FFFFFF;
  --ok-bg:#DDF0E8;--ok-ink:#0A5B46;
  --warn-bg:#FAEACF;--warn-ink:#7C430A;
  --absent:#A3451C;--absent-hover:#8C3A16;--on-absent:#FFFFFF;
  --danger:#B42318;--danger-hover:#991D13;--danger-ink:#9A1D14;--danger-soft:#FBE8E6;
  --t-sand:#F3EBDB;--t-sand-ink:#664712;
  --t-sage:#E1ECE2;--t-sage-ink:#2B5435;
  --t-lilac:#EBE6F5;--t-lilac-ink:#4A3A76;
  --t-sky:#E0EAF4;--t-sky-ink:#214E79;
  --t-rose:#F5E4E1;--t-rose-ink:#77332D;
  color-scheme:light;
}
/* ── Tokens: dark ── */
.tr.t-dark{
  --bg:#0B1211;--surface:#121B1A;--surface-2:#172221;--surface-3:#1F2C2A;
  --line:#22302D;--line-strong:#35463F;
  --ink:#E6EEEC;--ink-2:#C1CDCA;--muted:#93A39F;
  --shadow:none;--shadow-pop:0 20px 48px -12px rgba(0,0,0,.65);
  --scrim:rgba(0,0,0,.6);
  --brand:#4CC2B3;--brand-hover:#6CD0C3;--brand-ink:#7DD8CC;--brand-soft:#11322E;--on-brand:#05211E;
  --ok-bg:#11322A;--ok-ink:#85DBBF;
  --warn-bg:#33270F;--warn-ink:#F0C27B;
  --absent:#E8895D;--absent-hover:#F09B73;--on-absent:#230E04;
  --danger:#C2352B;--danger-hover:#AC2D24;--danger-ink:#F4A49C;--danger-soft:#3A1715;
  --t-sand:#29231A;--t-sand-ink:#EBD3A3;
  --t-sage:#1A2820;--t-sage-ink:#ABD7B5;
  --t-lilac:#231F31;--t-lilac-ink:#CBBDF1;
  --t-sky:#172533;--t-sky-ink:#A9CAEC;
  --t-rose:#2D1D1B;--t-rose-ink:#F0B6AE;
  color-scheme:dark;
}

/* ── School themes (from calm-themes.css) ── */
.tr.t-light.b-teal{--brand:#0F766E;--brand-hover:#0B625B;--brand-ink:#0A5A53;--brand-soft:#E0EFEC;--on-brand:#FFFFFF}
.tr.t-dark.b-teal{--brand:#4CC2B3;--brand-hover:#6CD0C3;--brand-ink:#7DD8CC;--brand-soft:#11322E;--on-brand:#05211E}
.tr.t-light.b-harbour{--brand:#1F4F8F;--brand-hover:#193F73;--brand-ink:#1B4479;--brand-soft:#E3EBF5;--on-brand:#FFFFFF;--bg:#F3F5F8;--surface-2:#EEF1F5;--surface-3:#E3E8EF;--line:#DEE3EA;--line-strong:#C3CBD6;--ink:#141B26;--ink-2:#354050;--muted:#556071}
.tr.t-dark.b-harbour{--brand:#8DB4F0;--brand-hover:#A6C5F4;--brand-ink:#A9C7F5;--brand-soft:#16263D;--on-brand:#0A1A33;--bg:#0B1018;--surface:#121925;--surface-2:#172030;--surface-3:#1F2A3C;--line:#222D3E;--line-strong:#34425A;--ink:#E6ECF4;--ink-2:#C2CCD9;--muted:#93A0B2}
.tr.t-light.b-olive{--brand:#3D6650;--brand-hover:#325443;--brand-ink:#335945;--brand-soft:#E3EDE6;--on-brand:#FFFFFF;--bg:#F4F4EF;--surface-2:#EFF0E9;--surface-3:#E5E7DE;--line:#E0E2D9;--line-strong:#C8CCBF;--ink:#191E1A;--ink-2:#3A423C;--muted:#5A635B}
.tr.t-dark.b-olive{--brand:#8FC4A4;--brand-hover:#A6D2B7;--brand-ink:#A9D4B9;--brand-soft:#15291F;--on-brand:#0B2016;--bg:#0E120F;--surface:#151B17;--surface-2:#1A221C;--surface-3:#222C25;--line:#26302A;--line-strong:#37443B;--ink:#E7EDE8;--ink-2:#C4CEC6;--muted:#97A49A}
.tr.t-light.b-plum{--brand:#6B3F6E;--brand-hover:#59345C;--brand-ink:#5E3761;--brand-soft:#F1E7F1;--on-brand:#FFFFFF;--bg:#F6F4F5;--surface-2:#F2EFF1;--surface-3:#E8E3E7;--line:#E4DFE3;--line-strong:#CDC5CC;--ink:#1E1820;--ink-2:#423A44;--muted:#635A64}
.tr.t-dark.b-plum{--brand:#D9A8DB;--brand-hover:#E4BEE5;--brand-ink:#E6C0E7;--brand-soft:#2E1A2F;--on-brand:#2A0E2B;--bg:#110D11;--surface:#191419;--surface-2:#1F1920;--surface-3:#282129;--line:#2C242D;--line-strong:#3F3440;--ink:#EEE7EE;--ink-2:#D2C6D2;--muted:#A597A6}
.tr.t-light.b-sandstone{--brand:#7E5219;--brand-hover:#6A4515;--brand-ink:#6C4615;--brand-soft:#F5EBDC;--on-brand:#FFFFFF;--bg:#F7F4EE;--surface-2:#F2EEE6;--surface-3:#E8E2D7;--line:#E5DFD3;--line-strong:#CEC5B5;--ink:#211B12;--ink-2:#463D30;--muted:#665C4D}
.tr.t-dark.b-sandstone{--brand:#E3B676;--brand-hover:#ECC68E;--brand-ink:#EDC892;--brand-soft:#2E2312;--on-brand:#2A1A05;--bg:#12100C;--surface:#1A1712;--surface-2:#201C16;--surface-3:#29241D;--line:#2D2820;--line-strong:#40392E;--ink:#F1ECE4;--ink-2:#D6CEC2;--muted:#A99F90}
.tr.t-light.b-indigo{--brand:#4049B5;--brand-hover:#353DA0;--brand-ink:#343C9C;--brand-soft:#E6E8F8;--on-brand:#FFFFFF;--bg:#F4F4F8;--surface-2:#EFF0F5;--surface-3:#E4E6EE;--line:#E0E1EA;--line-strong:#C7C9D6;--ink:#16172A;--ink-2:#383A50;--muted:#595B71}
.tr.t-dark.b-indigo{--brand:#9AA4FF;--brand-hover:#B3BBFF;--brand-ink:#B6BDFF;--brand-soft:#1E2244;--on-brand:#0E1236;--bg:#0D0E16;--surface:#14151F;--surface-2:#191B28;--surface-3:#222433;--line:#262838;--line-strong:#383B50;--ink:#E8E9F4;--ink-2:#C6C8DA;--muted:#9A9DB4}
.tr.t-light.b-slate{--brand:#3B5670;--brand-hover:#304860;--brand-ink:#314A62;--brand-soft:#E3EAF1;--on-brand:#FFFFFF;--bg:#F4F5F6;--surface-2:#EFF1F3;--surface-3:#E4E7EA;--line:#E0E3E6;--line-strong:#C7CDD3;--ink:#161B20;--ink-2:#37404A;--muted:#58616B}
.tr.t-dark.b-slate{--brand:#9EBBD6;--brand-hover:#B5CCE2;--brand-ink:#B9CFE4;--brand-soft:#1A2633;--on-brand:#0D1A26;--bg:#0D1013;--surface:#14181C;--surface-2:#191E23;--surface-3:#21272D;--line:#252B32;--line-strong:#363E47;--ink:#E7EBEF;--ink-2:#C5CCD3;--muted:#99A3AD}
.tr.t-light.b-charcoal{--brand:#2B3033;--brand-hover:#1B1F21;--brand-ink:#2B3033;--brand-soft:#E9EAEA;--on-brand:#FFFFFF;--bg:#F5F5F4;--surface-2:#F0F0EF;--surface-3:#E5E5E3;--line:#E2E2E0;--line-strong:#C9C9C6;--ink:#18191A;--ink-2:#3A3C3E;--muted:#5C5F61}
.tr.t-dark.b-charcoal{--brand:#E4E6E7;--brand-hover:#F4F5F5;--brand-ink:#ECEEEF;--brand-soft:#26292B;--on-brand:#141617;--bg:#0E0F10;--surface:#161718;--surface-2:#1B1D1E;--surface-3:#242628;--line:#282A2C;--line-strong:#3A3D40;--ink:#ECEDEE;--ink-2:#CBCDCF;--muted:#9EA1A4}
.tr.t-light.tone-strong{--ink:#0B1110;--ink-2:#222B29;--muted:#3C4744}
.tr.t-dark.tone-strong{--ink:#F6F9F8;--ink-2:#DFE7E5;--muted:#BAC7C3}

/* ── Bridge: the app's older token names follow the new ones ── */
.tr{
  --card:var(--surface);--brand2:var(--brand-soft);--brand-softer:var(--surface-2);--brand-shadow:transparent;
  --ok:var(--ok-ink);--okbg:var(--ok-bg);--warn:var(--warn-ink);--warnbg:var(--warn-bg);--bad:var(--danger-ink);
  /* Sides: men's sky blue, women's rose (soft pink) */
  --men-bg:var(--t-sky);--men-border:color-mix(in srgb,var(--t-sky-ink) 18%,transparent);--men-chip:var(--t-sky);--men-ink:var(--t-sky-ink);--men-strong:var(--t-sky-ink);
  --women-bg:var(--t-rose);--women-border:color-mix(in srgb,var(--t-rose-ink) 18%,transparent);--women-chip:var(--t-rose);--women-ink:var(--t-rose-ink);--women-strong:var(--t-rose-ink);
  --mixed-chip:var(--surface-3);--mixed-ink:var(--ink-2);
}

/* ── Base ── */
html.tr body{font-family:var(--font);background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
html.tr h1,html.tr .page-heading h1{font-size:30px;line-height:1.15;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
html.tr h2{font-weight:650;letter-spacing:-.01em;color:var(--ink)}
html.tr h3{font-weight:650;color:var(--ink)}
html.tr p{color:inherit}
html.tr .page-heading p,html.tr .workspace-note,html.tr .workspace-muted,html.tr .muted{color:var(--muted)}
html.tr :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
html.tr ::selection{background:var(--brand-soft);color:var(--ink)}

/* ── App shell ── */
html.tr .app{background:var(--bg)}
html.tr .sidebar{background:var(--surface);border-right:1px solid var(--line);color:var(--ink)}
html.tr .brand-copy #programmeName{color:var(--ink)}
html.tr .sidebar-tools{color:var(--muted)}
html.tr .shell-toggle{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
html.tr .nav-button{color:var(--ink-2);border-radius:12px;font-weight:550}
html.tr .nav-button .nav-icon,html.tr .nav-button svg{color:var(--muted)}
html.tr .nav-button:hover{background:var(--surface-2);color:var(--ink)}
html.tr .nav-button.active,html.tr .nav-button.active:hover{background:var(--brand-soft);color:var(--brand-ink);font-weight:650}
html.tr .nav-button.active .nav-icon,html.tr .nav-button.active svg{color:var(--brand-ink)}
html.tr .classes-nav-submenu>div{border-left:1px solid var(--line)}
html.tr .nav-sub-button{color:var(--muted);border-radius:10px}
html.tr .nav-sub-button:hover{background:var(--surface-2);color:var(--ink)}
html.tr .nav-sub-button.active,html.tr .nav-sub-button[aria-current]{background:var(--brand-soft);color:var(--brand-ink);font-weight:650}
html.tr .account{background:var(--surface-2);border:0;border-radius:16px;color:var(--ink)}
html.tr .account span,html.tr .account label{color:var(--muted)}
html.tr .app-credit{color:var(--muted)}
html.tr .topbar{background:var(--bg);border-bottom:1px solid var(--line)}
html.tr .content{color:var(--ink)}
html.tr .nav-backdrop{background:var(--scrim)}

/* ── Surfaces ── */
html.tr .card,html.tr .modal-card,html.tr .login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);color:var(--ink)}
html.tr .modal{background:var(--scrim)}
html.tr .modal-card{box-shadow:var(--shadow-pop)}
html.tr .modal-close{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
html.tr .login-shell{background:var(--bg)}
html.tr .toast{background:var(--ink);color:var(--bg)}

/* ── Form controls ── */
html.tr input:not([type=checkbox]):not([type=radio]):not([type=range]),html.tr select,html.tr textarea{background-color:var(--surface);border:1px solid var(--line-strong);border-radius:12px;color:var(--ink)}
html.tr input::placeholder,html.tr textarea::placeholder{color:var(--muted);opacity:1}
html.tr input:focus,html.tr select:focus,html.tr textarea:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-soft)}
html.tr .content label,html.tr .modal-content label{color:var(--ink-2)}
html.tr input[type=checkbox],html.tr input[type=radio]{accent-color:var(--brand)}

/* ── Buttons ── */
html.tr .primary{background:var(--brand);color:var(--on-brand);border:1px solid transparent;border-radius:12px;box-shadow:none;font-weight:600}
html.tr .primary:hover{background:var(--brand-hover)}
html.tr .secondary,html.tr .small-button,html.tr .modal-actions>button:not(.primary),html.tr .contact-link{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);border-radius:12px}
html.tr .secondary:hover,html.tr .small-button:hover,html.tr .contact-link:hover{background:var(--surface-2);border-color:var(--muted);color:var(--ink)}
html.tr .ghost{background:transparent;color:var(--ink-2);border-color:transparent}
html.tr .ghost:hover{background:var(--surface-2);color:var(--ink)}
html.tr .danger,html.tr .fire-launch{background:var(--danger-soft);color:var(--danger-ink);border:1px solid color-mix(in srgb,var(--danger) 45%,transparent)}
html.tr .danger:hover,html.tr .fire-launch:hover{background:var(--danger);color:#fff}
html.tr .danger-outline{background:transparent;border:1px solid var(--danger);color:var(--danger-ink)}
html.tr .danger-outline:hover{background:var(--danger-soft)}
html.tr .link-button{color:var(--brand-ink)}
html.tr button:disabled{opacity:.5}

/* ── Segmented controls and pills ── */
html.tr .segmented{background:var(--surface-3);border-radius:14px;padding:4px;border:0}
html.tr .segmented button,html.tr .segmented label span{color:var(--ink-2);border-radius:10px;font-weight:600}
html.tr .segmented button:hover{color:var(--ink)}
html.tr .segmented button.active,html.tr .award-pills label:has(input:checked) span{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,32,31,.10),0 0 0 1px var(--line)}
.tr.t-dark .segmented{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.tr.t-dark .segmented button.active{background:var(--surface-3);box-shadow:0 0 0 1px var(--line-strong)}
html.tr .pill{border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
html.tr #syncStatus.sync-online{color:var(--ok-ink);background:var(--surface)}
html.tr #syncStatus.sync-offline{background:var(--surface-2);color:var(--ink-2)}
html.tr #syncStatus.sync-local{background:var(--warn-bg);color:var(--warn-ink)}
html.tr #syncStatus.sync-failed{background:var(--danger-soft);color:var(--danger-ink)}

/* ── Tables ── */
html.tr table{color:var(--ink)}
html.tr th{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
html.tr td{border-color:var(--line)}
html.tr tbody tr:hover td{background:var(--surface-2)}

/* ── Summary tiles (Check-in and others) ── */
html.tr .summary-grid>*{border:0;box-shadow:none;border-radius:18px}
html.tr .summary-grid>*:nth-child(5n+1){background:var(--t-sky);color:var(--t-sky-ink)}
html.tr .summary-grid>*:nth-child(5n+2){background:var(--t-rose);color:var(--t-rose-ink)}
html.tr .summary-grid>*:nth-child(5n+3){background:var(--t-sage);color:var(--t-sage-ink)}
html.tr .summary-grid>*:nth-child(5n+4){background:var(--t-lilac);color:var(--t-lilac-ink)}
html.tr .summary-grid>*:nth-child(5n+5){background:var(--t-sand);color:var(--t-sand-ink)}
html.tr .summary-grid>* *{color:inherit}

/* ── Common lists and cards ── */
html.tr .class-item{color:var(--ink);border-radius:12px}
html.tr .class-item:hover{background:var(--surface-2)}
html.tr .class-item.active{background:var(--brand-soft);color:var(--brand-ink)}
html.tr .class-item small,html.tr .class-item span{color:inherit}
html.tr .student-card,html.tr .class-card,html.tr .workspace-class-card{border-color:var(--line);color:var(--ink)}
html.tr .student-card{background:var(--surface)}
html.tr .student-meta{color:var(--muted)}
html.tr .student-name{color:var(--ink)}
html.tr .touch-icon{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-2)}
html.tr .touch-icon:hover{border-color:var(--muted);color:var(--ink)}
html.tr .touch-icon.present.active{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
html.tr .touch-icon.absent.active{background:var(--absent);border-color:var(--absent);color:var(--on-absent)}
html.tr .books-ready{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
html.tr .books-ready.checked{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
html.tr .books-head{background:var(--surface-2);color:var(--muted)}
html.tr .books-row{border-color:var(--line)}
html.tr .books-none,html.tr #subjectAssignments .empty{background:transparent;border-color:var(--line-strong);color:var(--muted)}
html.tr .book-summary.resource-totals span{background:var(--ok-bg);color:var(--ok-ink)}
html.tr .books-due{color:var(--warn-ink)}
html.tr .books-done{color:var(--ok-ink)}

/* ── Logo: white tile in dark mode so dark logos stay visible ── */
.tr.t-dark .brand-mark.has-logo{background:#fff;border-color:transparent}

@media (prefers-reduced-motion:reduce){html.tr *{transition:none!important;animation:none!important}}

/* ── Check-in details ── */
html.tr .register-head{background:var(--surface);border-color:var(--line);color:var(--ink)}
html.tr .class-item b{background:var(--surface-3);color:var(--ink-2)}
html.tr .class-item.active b{background:var(--surface);color:var(--brand-ink)}
html.tr .touch-icon.payment.paid{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}

/* ── Screen surfaces that had fixed light colours ── */
html.tr thead,html.tr .account-scroll thead{background:var(--surface-2)}
html.tr .page-heading select,html.tr .section-picker select,html.tr .calendar-year-picker select,html.tr .content select{background-color:var(--surface);color:var(--ink);border-color:var(--line-strong)}
html.tr :is(.account-action,.offer-action,.icon-button,.room-edit-icon,.staff-hours-icon){background:var(--surface);border-color:var(--line-strong);color:var(--ink-2)}
html.tr :is(.account-action,.offer-action,.icon-button):hover{background:var(--surface-2);color:var(--ink)}
html.tr .books-admin-list li,html.tr .directory-row{background:var(--surface);border-color:var(--line);color:var(--ink)}
html.tr .directory-row:hover{background:var(--surface-2)}
/* Admissions board */
html.tr .kanban-col{background:var(--surface-2);border-color:var(--line)}
html.tr .application-card{background:var(--surface);border-color:var(--line);color:var(--ink)}
html.tr .application-warning,html.tr .staff-warning,html.tr .warning-link{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}
html.tr .application-availability.space,html.tr .class-today-chip,html.tr .staff-login-status.ready{background:var(--ok-bg);color:var(--ok-ink)}
/* Classes, rooms */
html.tr .class-room-chip,html.tr .room-capacity-badge,html.tr .room-purpose-icon,html.tr .staff-role-badge{background:var(--surface-3);color:var(--ink-2);border-color:transparent}
html.tr .room-row{background:var(--surface);border-color:var(--line)}
/* Staff and profile */
html.tr .staff-card,html.tr .hours-overview,html.tr .payroll-summary{background:var(--surface);border-color:var(--line);color:var(--ink)}
/* Term Times */
html.tr .calendar-month{background:var(--surface);border-color:var(--line);color:var(--ink)}
html.tr .calendar-key.nonteaching{background:var(--surface-3);color:var(--ink-2)}
html.tr .calendar-key.eid{background:var(--t-lilac);color:var(--t-lilac-ink)}
/* Timetables: subject colours stay, softened onto the surface in dark mode */
html.tr .timetable-grid-head,html.tr .timetable-time{background:var(--surface-2);color:var(--muted)}
.tr.t-dark .timetable-chip{background:color-mix(in srgb,var(--chip-bg,currentColor) 0%,var(--surface-3));color:var(--ink);border-color:var(--line-strong)}
/* Settings › Appearance preview and swatches */
html.tr .appearance-swatch,html.tr .appearance-logo-preview,html.tr .appearance-preview{background:var(--surface);border-color:var(--line);color:var(--ink)}
html.tr .appearance-preview-side{background:var(--surface-2)}
html.tr .appearance-preview-main{color:var(--ink)}
html.tr .appearance-preview-main p,html.tr .appearance-preview-side small{color:var(--muted)}
html.tr .appearance-preview-nav{color:var(--muted)}
.tr.t-dark .appearance-logo-preview img,html.tr.t-dark .appearance-preview-brand img{background:#fff;border-radius:6px}
html.tr .kanban-col h3 span{background:var(--surface);color:var(--ink-2)}
html.tr .admissions-board .application-card.has-space{border-color:color-mix(in srgb,var(--ok-ink) 45%,transparent);box-shadow:0 0 0 2px var(--ok-bg)}

/* ── Phase 2: app shell ── */
/* Phosphor icons drawn as a mask so they take the text colour (<i class="ph ph-sun">). */
html.tr .ph{display:inline-block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ph) center/contain no-repeat;mask:var(--ph) center/contain no-repeat}
html.tr .ph-sun{--ph:url(icons/sun.svg)}html.tr .ph-moon{--ph:url(icons/moon.svg)}html.tr .ph-bell{--ph:url(icons/bell.svg)}
html.tr .ph-fire{--ph:url(icons/fire.svg)}html.tr .ph-lock-key{--ph:url(icons/lock-key.svg)}html.tr .ph-magnifying-glass{--ph:url(icons/magnifying-glass.svg)}
html.tr .ph-list{--ph:url(icons/list.svg)}html.tr .ph-sign-out{--ph:url(icons/sign-out.svg)}html.tr .ph-caret-down{--ph:url(icons/caret-down.svg)}
/* Sidebar icons: same markup, Phosphor glyphs; the current page uses the duotone version. */
html.tr .nav-button .nav-icon svg{display:none}
html.tr .nav-button .nav-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
html.tr .nav-button .nav-icon::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--ph) center/contain no-repeat;mask:var(--ph) center/contain no-repeat}
html.tr .nav-button[data-view=checkin]{--ph:url(icons/user-check.svg)}
html.tr .nav-button[data-view=admissions]{--ph:url(icons/clipboard-text.svg)}
html.tr .nav-button[data-view=directory]{--ph:url(icons/users-three.svg)}
html.tr .nav-button[data-view=classes]{--ph:url(icons/chalkboard-teacher.svg)}
html.tr .nav-button[data-view=staff]{--ph:url(icons/identification-badge.svg)}
html.tr .nav-button[data-view=my_staff]{--ph:url(icons/user-circle.svg)}
html.tr .nav-button[data-view=admin]{--ph:url(icons/briefcase.svg)}
html.tr .nav-button[data-view=terms]{--ph:url(icons/calendar-dots.svg)}
html.tr .nav-button[data-view=settings]{--ph:url(icons/gear-six.svg)}
html.tr .nav-button[data-view=payroll]{--ph:url(icons/currency-gbp.svg)}
html.tr .nav-button.active[data-view=checkin]{--ph:url(icons/user-check-duotone.svg)}
html.tr .nav-button.active[data-view=admissions]{--ph:url(icons/clipboard-text-duotone.svg)}
html.tr .nav-button.active[data-view=directory]{--ph:url(icons/users-three-duotone.svg)}
html.tr .nav-button.active[data-view=classes]{--ph:url(icons/chalkboard-teacher-duotone.svg)}
html.tr .nav-button.active[data-view=staff]{--ph:url(icons/identification-badge-duotone.svg)}
html.tr .nav-button.active[data-view=my_staff]{--ph:url(icons/user-circle-duotone.svg)}
html.tr .nav-button.active[data-view=admin]{--ph:url(icons/briefcase-duotone.svg)}
html.tr .nav-button.active[data-view=terms]{--ph:url(icons/calendar-dots-duotone.svg)}
html.tr .nav-button.active[data-view=settings]{--ph:url(icons/gear-six-duotone.svg)}
html.tr .nav-button{min-height:44px}
html.tr .sidebar{gap:22px}
/* Light / dark toggle in the top bar */
html.tr .mode-toggle{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;padding:0}
html.tr .mode-toggle:hover{background:var(--surface-2);color:var(--ink)}
/* iPad widths: the sidebar becomes an 84px icon rail */
@media (min-width:901px) and (max-width:1199px){
 html.tr .app{grid-template-columns:84px minmax(0,1fr)}
 html.tr .app .sidebar{padding:20px 12px;align-items:center}
 html.tr .app .brand{padding:0}
 html.tr .app .brand-copy,html.tr .app .sidebar-tools>span,html.tr .app .nav-label,html.tr .app .account,html.tr .app .sidebar-credit,html.tr .app .classes-nav-submenu,html.tr .app .nav-class-chevron{display:none}
 html.tr .app .sidebar-tools{padding:0}
 html.tr .app .nav-button{width:56px;min-height:48px;justify-content:center;padding:0}
}

/* ── Phase 3: Check-in student cards (V2Checkin) ── */
html.tr .student-card{display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:none;transition:border-color .15s,background-color .15s}
html.tr .student-card[data-student-card]:hover{background:var(--surface-2);box-shadow:none}
html.tr .student-card[data-student-card]:has(.student-name:focus-visible){background:var(--surface-2);box-shadow:0 0 0 2px var(--brand)}
html.tr .student-card:has(.touch-icon.present.active){border-color:var(--brand);background:var(--brand-soft)}
html.tr .student-card:has(.touch-icon.absent.active){border-color:var(--absent)}
html.tr .st-head{display:flex;align-items:center;gap:12px;min-width:0}
html.tr .st-text{flex:1;min-width:0}
html.tr .student-card .student-name{display:block;max-width:100%;font-size:15px;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.tr .student-card .student-meta{font-size:12.5px;color:var(--muted)}
html.tr .avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;font-weight:650;font-size:14px;letter-spacing:.01em;background:var(--brand-soft);color:var(--brand-ink)}
html.tr .avatar.side-mens{background:var(--t-sky);color:var(--t-sky-ink)}
html.tr .avatar.side-womens{background:var(--t-rose);color:var(--t-rose-ink)}
/* Fee chip */
html.tr .student-card .fee{margin-left:0;display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:650;white-space:nowrap;background:var(--warn-bg);color:var(--warn-ink)}
html.tr .student-card .fee.paid{background:var(--ok-bg);color:var(--ok-ink)}
html.tr .student-card .fee.paid::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url(icons/check.svg) center/contain no-repeat;mask:url(icons/check.svg) center/contain no-repeat}
html.tr .student-card .fee.review{background:var(--surface-3);color:var(--ink-2)}
/* Present / Absent / payment */
html.tr .student-card .attendance-buttons{display:flex;gap:8px;margin-top:0}
html.tr .student-card .attendance-buttons .touch-icon{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 10px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font-weight:650;font-size:14px}
html.tr .student-card .attendance-buttons .touch-icon svg{width:18px;height:18px}
html.tr .student-card .attendance-buttons .touch-icon:hover{border-color:var(--muted);color:var(--ink)}
html.tr .student-card .attendance-buttons .touch-icon.present.active{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
html.tr .student-card .attendance-buttons .touch-icon.absent.active{background:var(--absent);border-color:var(--absent);color:var(--on-absent)}
html.tr .student-card .attendance-buttons .touch-icon.payment{flex:none;width:48px;padding:0}
html.tr .student-card .attendance-buttons .touch-icon.payment.paid{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
/* Register grid: cards with gaps instead of ruled rows */
html.tr .student-grid,html.tr .register-grid{gap:12px}
html.tr .student-grid{padding:16px;gap:12px;border:0}
html.tr .student-card .attendance-buttons .touch-icon.with-label{width:auto;min-width:0;flex:1 1 0}

/* Sidebar: long labels (e.g. "Staff Management") never collide with the chevron */
html.tr .nav-button{gap:10px}
html.tr .nav-button .nav-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.tr .nav-button .nav-class-chevron{width:22px;height:22px;flex:0 0 22px;margin-left:4px;border-radius:6px}
html.tr .nav-button .nav-class-chevron svg{width:16px;height:16px}
/* Design spec: 264px sidebar on wide screens */
@media (min-width:1200px){html.tr .app:not(.sidebar-collapsed){grid-template-columns:264px minmax(0,1fr)}html.tr .app:not(.sidebar-collapsed) .sidebar{padding-inline:14px}}

/* ── Phase 6: Settings › Appearance (V2Appearance) ── */
html.tr.t-dark.logo-tile-off .brand-mark.has-logo{background:var(--surface-2)}
html.tr .ph-check{--ph:url(icons/check.svg)}html.tr .ph-info{--ph:url(icons/info.svg)}html.tr .ph-upload-simple{--ph:url(icons/upload-simple.svg)}html.tr .ph-trash{--ph:url(icons/trash.svg)}html.tr .ph-circle-half{--ph:url(icons/circle-half.svg)}
html.tr .ph-user-check{--ph:url(icons/user-check.svg)}html.tr .ph-chalkboard-teacher{--ph:url(icons/chalkboard-teacher.svg)}html.tr .ph-briefcase{--ph:url(icons/briefcase.svg)}
.appearance-settings .ap-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:28px;align-items:start;margin-top:8px}
.appearance-settings .ap-fields{display:flex;flex-direction:column;gap:28px;min-width:0}
.appearance-settings .fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.appearance-settings .fieldset legend{padding:0;margin-bottom:12px;font-size:16px;font-weight:650;color:var(--ink)}
.appearance-settings .hint{font-size:13px;color:var(--muted);margin:-6px 0 0}
.appearance-settings .note{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);margin:0}
.appearance-settings .note .ph{width:18px;height:18px;color:var(--brand-ink);margin-top:1px}
/* Logo */
.ap-logo-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
.ap-logo-pair{display:flex;flex-direction:column;align-items:center;gap:6px}
.ap-logo-pair small{color:var(--muted);font-size:12.5px}
.logo-tile{width:88px;height:88px;border-radius:20px;display:grid;place-items:center;flex:none;border:1px solid var(--line)}
.logo-tile.light{background:#fff;border-color:#E1E5E0}
.logo-tile.dark{background:#0B1211;border-color:#22302D}
.logo-tile img{width:64px;height:64px;object-fit:contain;display:block}
.logo-tile .ap-tile-on{display:grid;place-items:center;width:72px;height:72px;border-radius:14px;background:#fff}
.logo-tile .ap-tile-on img{width:60px;height:60px}
.ap-nologo{font-size:12px;color:#6b7774}
.ap-logo-actions{flex:1 1 240px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ap-logo-buttons{display:flex;flex-wrap:wrap;gap:8px}
.appearance-upload,.ap-remove{display:inline-flex;align-items:center;gap:8px}
.appearance-settings .check{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:550;color:var(--ink-2)}
.appearance-settings .check input{width:20px;height:20px;margin:0}
/* Theme cards */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:12px}
.theme-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;color:var(--ink)}
.theme-card:hover{border-color:var(--line-strong)}
.theme-card.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.theme-card input{position:absolute;opacity:0;width:1px;height:1px}
.theme-card:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.theme-card .tc-check{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;display:none;place-items:center;background:var(--brand);color:var(--on-brand)}
.theme-card.on .tc-check{display:grid}
.theme-card .tc-check .ph{width:14px;height:14px}
.tc-preview{display:grid;grid-template-columns:1fr 1fr;height:64px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.tc-half{display:flex;flex-direction:column;justify-content:space-between;padding:8px;background:var(--bg)}
.tc-bar{height:6px;border-radius:3px;background:var(--line-strong);width:70%}
.tc-row{display:flex;align-items:center;gap:6px}
.tc-pill{height:16px;flex:1;border-radius:6px;background:var(--brand)}
.tc-soft{width:16px;height:16px;border-radius:6px;background:var(--brand-soft);flex:none}
.tc-name{font-weight:650;font-size:14.5px;line-height:1.2}
.tc-desc{font-size:12.5px;color:var(--muted);line-height:1.35}
/* Light / dark choice and text */
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mode-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink);font-weight:600;font-size:13.5px;min-height:44px}
.mode-card input{position:absolute;opacity:0;width:1px;height:1px}
.mode-card:hover{border-color:var(--line-strong)}
.mode-card.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.mode-card:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.mode-card .ph{width:24px;height:24px}
.radio-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-weight:550;color:var(--ink)}
.radio-row.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.radio-row input{width:18px;height:18px;margin:0;accent-color:var(--brand)}
/* Live previews */
.ap-previews{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px}
.ap-preview{display:grid;grid-template-columns:110px 1fr;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:var(--font);font-size:12px}
.ap-pv-side{background:var(--surface);border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:4px}
.ap-pv-brand{display:flex;align-items:center;gap:6px;margin-bottom:8px;min-width:0}
.ap-pv-brand strong{font-size:11.5px;line-height:1.2;overflow-wrap:anywhere}
.ap-pv-logo{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;flex:none}
.ap-pv-logo.tile{background:#fff}
.ap-pv-logo img{width:20px;height:20px;object-fit:contain}
.ap-pv-dot{width:22px;height:22px;border-radius:7px;background:var(--brand);flex:none}
.ap-pv-nav{display:flex;align-items:center;gap:6px;padding:6px;border-radius:8px;color:var(--ink-2);font-weight:550}
.ap-pv-nav .ph{width:14px;height:14px}
.ap-pv-nav.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:650}
.ap-pv-main{padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ap-pv-head{display:flex;justify-content:space-between;align-items:center}
.ap-pv-head strong{font-size:13px}
.ap-pv-chip{padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-weight:650;font-size:10.5px}
.ap-pv-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ap-pv-tile{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:10px}
.ap-pv-tile b{font-size:16px}
.ap-pv-tile.sage{background:var(--t-sage);color:var(--t-sage-ink)}
.ap-pv-tile.sand{background:var(--t-sand);color:var(--t-sand-ink)}
.ap-pv-card{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.ap-pv-av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--t-lilac);color:var(--t-lilac-ink);font-weight:650;font-size:10px}
.ap-pv-card b{flex:1;font-size:12px}
.ap-pv-tick{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--brand);color:var(--on-brand)}
.ap-pv-tick .ph{width:13px;height:13px}
.ap-pv-btns{display:flex;gap:6px}
.ap-pv-save{padding:6px 12px;border-radius:9px;background:var(--brand);color:var(--on-brand);font-weight:650}
.ap-pv-cancel{padding:6px 12px;border-radius:9px;border:1px solid var(--line-strong);color:var(--ink)}
@media(max-width:1000px){.appearance-settings .ap-layout{grid-template-columns:1fr}.ap-previews{position:static;flex-direction:row;flex-wrap:wrap}.ap-preview{flex:1 1 280px}}
@media(max-width:480px){.mode-grid{grid-template-columns:1fr}}

/* ── Phase 4: Classes › Subjects & Books (V2SubjectsBooks) ── */
/* Stat strip */
html.tr .book-summary.books-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px}
html.tr .book-summary.books-summary span{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;min-height:0;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:550}
html.tr .book-summary.books-summary span strong{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
html.tr .book-summary.books-summary span.attn{background:var(--warn-bg);border-color:transparent;color:var(--warn-ink)}
html.tr .book-summary.books-summary span.attn strong{color:var(--warn-ink)}
html.tr .book-summary.books-summary span.done{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink)}
html.tr .book-summary.books-summary span.done strong{color:var(--ok-ink)}
/* Cards: classes with books span the full width; empty classes sit two to a row */
html.tr .books-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:16px}
html.tr .books-card{display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
html.tr .books-card:has(.books-table){grid-column:1/-1}
html.tr .books-card.mens,html.tr .books-card.womens{background:var(--surface)}
html.tr .books-card-head{margin:0;gap:12px 16px}
html.tr .books-card-head h2{font-size:19px}
html.tr .books-card-meta{margin-top:6px;font-size:13px;color:var(--muted)}
html.tr .books-card .class-side-chip{min-height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:650;display:inline-flex;align-items:center}
html.tr .books-card-actions .secondary{min-height:40px}
/* Table */
html.tr .books-table{border:1px solid var(--line);border-radius:16px;overflow:hidden}
html.tr .books-row{padding:12px 16px;border-top:1px solid var(--line);gap:12px}
html.tr .books-row:first-child,html.tr .books-head+.books-row{border-top:0}
html.tr .books-head{position:static;background:var(--surface-2);border-radius:0;padding:10px 16px;font-size:12.5px;font-weight:600;color:var(--muted)}
html.tr .books-head+.books-row{border-top:1px solid var(--line)}
html.tr .books-subject{font-weight:650;color:var(--ink)}
html.tr .books-title strong{font-weight:600;color:var(--ink)}
html.tr .books-title small{font-size:12.5px;color:var(--muted)}
html.tr .books-num{font-weight:600}
html.tr .books-row.empty-book{background:var(--surface-2)}
html.tr .books-row.empty-book .books-title{color:var(--muted)}
html.tr .books-method-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:6px;background:var(--surface-3);color:var(--ink-2);font-size:11px;font-weight:650;letter-spacing:.02em;vertical-align:1px}
html.tr .books-ready{min-height:36px;border-radius:10px}
html.tr .books-actions .small-button{min-height:36px}
html.tr .books-none{font-size:13.5px;color:var(--muted)}
html.tr .books-filters .secondary,html.tr .books-toolbar .segmented{min-height:44px}
html.tr .books-manage-note{color:var(--muted)}

/* ── Phase 7: sweep ── */
/* Icons that replace old text glyphs */
html.tr .checkin-filter-wrap .ph{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--muted);pointer-events:none}
html.tr #directoryAddMenu .ph,html.tr [aria-haspopup] .ph-caret-down{width:14px;height:14px;vertical-align:-2px;margin-left:4px}
html.tr .fee.paid::before{content:"";display:inline-block;width:14px;height:14px;margin-right:4px;vertical-align:-2px;background:currentColor;-webkit-mask:url(icons/check.svg) center/contain no-repeat;mask:url(icons/check.svg) center/contain no-repeat}
html.tr .student-card .fee.paid::before{margin-right:0}
html.tr .fee.paid{color:var(--ok-ink)}
html.tr .fee.due{color:var(--warn-ink)}

/* Fire roll-call: tokens so it reads in every theme and in dark mode */
html.tr .fire-quick-card{border-radius:16px;color:var(--ink)}
html.tr .fire-quick-card.total{background:var(--t-sage);color:var(--t-sage-ink);border-left-color:var(--t-sage-ink)}
html.tr .fire-quick-card.mens{background:var(--t-sky);color:var(--t-sky-ink);border-left-color:var(--t-sky-ink)}
html.tr .fire-quick-card.womens{background:var(--t-rose);color:var(--t-rose-ink);border-left-color:var(--t-rose-ink)}
html.tr .fire-quick-card *{color:inherit}
html.tr .fire-banner.live{background:var(--ok-bg);color:var(--ok-ink);border-color:transparent}
html.tr .fire-banner.offline{background:var(--danger-soft);color:var(--danger-ink);border-color:transparent}
html.tr .fire-banner.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}
html.tr .fire-start{background:var(--surface-2);border-color:var(--line)}
html.tr .fire-primary{background:var(--danger);color:#fff;border-radius:12px}
html.tr .fire-primary:hover{background:var(--danger-hover)}
html.tr .fire-empty{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 35%,transparent);color:var(--ink)}
html.tr .fire-pupil{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
html.tr .fire-pupil.accounted{background:var(--ok-bg);border-color:var(--ok-ink)}
html.tr .fire-pupil-text small,html.tr .fire-class h3 span{color:var(--muted)}
html.tr .fire-tick{background:var(--surface);border-color:var(--line-strong)}
html.tr .fire-scope{color:var(--ink-2)}
html.tr .fire-end-confirm{background:var(--danger-soft);border-color:var(--danger)}
html.tr .fire-footer{border-color:var(--line)}
html.tr .back-to-top{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-strong);box-shadow:var(--shadow-pop)}
html.tr .back-to-top:hover{background:var(--surface-2);color:var(--ink)}
html.tr .staff-login-status.needed{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}

/* QA fixes (dark mode contrast) */
html.tr .application-card small,html.tr .application-applied-date{color:var(--muted)}
html.tr .directory-tabs button{color:var(--ink-2)}
html.tr .directory-tabs button.active{color:var(--brand-ink);background:var(--brand-soft)}
html.tr .staff-teaching-subjects span{background:var(--surface-3);color:var(--ink-2)}
html.tr .books-admin-list.subjects li,html.tr .books-admin-list li{background:var(--surface);border-color:var(--line);color:var(--ink)}
html.tr .books-admin-list small,html.tr .subject-catalogue-label small{color:var(--muted)}
html.tr #adminBooks .books-admin-list.subjects > li{background:var(--surface);border-color:var(--line);color:var(--ink)}
html.tr .payroll-outstanding dd{color:var(--brand-ink)}
html.tr .mobile-register-summary{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:14px}

/* Settings › Payroll access */
.payroll-access-settings .pa-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:28px;align-items:start;margin-top:8px}
.payroll-access-settings h3{font-size:16px;margin:0 0 10px}
.pa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pa-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pa-row.revoked{background:var(--surface-2);color:var(--muted)}
.pa-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.pa-who strong{color:var(--ink)}
.pa-who small{color:var(--ink-2);font-size:13px}
.pa-who .pa-meta{color:var(--muted);font-size:12px}
.pa-tag{font-size:12px;font-weight:650;color:var(--muted)}
.pa-empty{padding:16px;border:1px dashed var(--line-strong);border-radius:14px;color:var(--muted);margin:0}
.pa-toggle{margin-top:10px}
.pa-form{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:16px;background:var(--surface-2)}
.pa-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.pa-form .pa-cap{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pa-form .pa-cap legend{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;padding:0}
.pa-form .radio-row{flex-direction:row}
.pa-form .primary{align-self:flex-start}
@media(max-width:900px){.payroll-access-settings .pa-layout{grid-template-columns:1fr}}

/* Allergy pill: icon plus the allergy in words (student-safety.js). */
html.tr .safety-toggle.with-text{width:auto;max-width:240px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;font-size:.82rem;font-weight:700;line-height:1.1}
html.tr .safety-toggle.with-text .safety-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* "Back to …" chip (return-chip.js): bottom centre, above everything but dialogs' own controls. */
.return-chip{position:fixed;left:50%;bottom:22px;z-index:1200;display:flex;align-items:center;gap:2px;padding:4px;border-radius:14px;background:var(--ink);color:var(--surface);box-shadow:var(--shadow-pop,0 10px 30px rgba(0,0,0,.25));transform:translate(-50%,16px);opacity:0;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.return-chip.show{opacity:1;transform:translate(-50%,0)}
.return-chip button{background:transparent;border:0;color:inherit;min-height:40px;border-radius:10px;cursor:pointer;font:inherit}
.return-chip-go{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-weight:600;min-width:0}
.return-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.return-chip-close{padding:6px 12px;font-size:1.2rem;opacity:.7}
.return-chip button:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
.return-chip button:focus-visible{outline:2px solid var(--brand-soft);outline-offset:1px}
@media print{.return-chip{display:none}}
/* Admin section tabs: same squarer segmented shape as Classes › Timetables, on one row where they fit. */
html.tr #content .segmented.calm-finance-tabs{border-radius:14px}
html.tr #content .segmented.calm-finance-tabs button{border-radius:10px}

/* Dark-mode fixes from the 15 Oct visual check (UI_CHECK_2026-10-15.md items 1, 2, 4, 5). */
/* 1 + 4: form fields in dialogs and on pages (refresh.css paints them light with an ID selector). */
html.tr #modalContent input:not([type=checkbox]):not([type=radio]):not([type=range]),html.tr #modalContent select,html.tr #modalContent textarea,
html.tr #content input:not([type=checkbox]):not([type=radio]):not([type=range]),html.tr #content select,html.tr #content textarea,
html.tr .login-card input{background-color:var(--surface);color:var(--ink);border-color:var(--line-strong)}
html.tr .modal-close{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
/* 2: teacher picker on Staff hours and Classes > Timetables. */
html.tr .teacher-dropdown{color:var(--muted)}
html.tr .teacher-dropdown details>summary{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
html.tr .teacher-dropdown summary:focus-visible{outline-color:var(--brand)}
html.tr .teacher-dropdown-panel{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-pop,0 12px 35px rgba(0,0,0,.25))}
html.tr .teacher-dropdown-panel button{background:var(--surface-2);color:var(--ink-2)}
html.tr .teacher-dropdown-panel button:hover{background:var(--surface-3);color:var(--ink)}
html.tr .teacher-dropdown-panel button.active{background:var(--brand-soft);color:var(--brand-ink)}
/* 5: keep the Fire button on the top row on small phones (it stays visible: it is a safety control). */
@media (max-width:400px){html.tr #fireButton{padding:7px 10px;font-size:12px;white-space:nowrap;min-width:0}}
@media (max-width:900px){.sw-toolbar .teacher-dropdown-panel{left:0;right:auto}}