/* ============================================================
   AUTOMATA — the house look (Valentine Labs brand)
   Kevin, 2026-09-10: "polish and improve the layout and style ...
   buttons aligned and the same color and size in each section, mouse
   hover over buttons highlight, clicking buttons shows a visual click,
   frozen header, symmetrical placement."
   Loaded LAST so it restyles without replacing any working stylesheet.
   Rules live in the automata-look skill.
   ============================================================ */

/* ---------- fonts (bundled, so the app looks right offline) ---------- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500 800;font-display:swap;src:url('assets/fonts/Montserrat.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/SourceSerif4-400.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/SourceSerif4-400i.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexMono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/IBMPlexMono-500.woff2') format('woff2');}

/* ---------- colours: every existing token repointed to the brand ---------- */
:root{
  /* Kevin, 2026-09-20: day, whatever the Mac's Appearance is set to. This also
     keeps the Mac's own boxes (date pickers, menus, scroll bars) light, which
     is what turned the score card's %/D boxes black. */
  color-scheme: light;
  --al-paper:#F7F5F4; --al-surface:#FFFFFF; --al-mist:#EFEBEA; --al-line:#DCD5D4; --al-line-soft:#E9E4E3;
  --mist:#EFEBEA;
  --al-ink:#2B282C; --al-charcoal:#3E3A3F; --al-muted:#6F6870;
  --al-red:#D9412C; --al-red-deep:#B8321F; --al-red-tint:#FBE9E5;
  --al-ok:#2F7D55; --al-ok-tint:#E6F3EC; --al-warn:#A8620F; --al-warn-tint:#FBF0DF;
  /* Kevin 2026-09-19: house action buttons go this blue after a successful run.
     Cobalt, not teal, so it sits next to vermillion on dust. */
  --al-done:#2F62B5; --al-done-deep:#254F93; --al-done-tint:#E4ECF7;
  --al-head:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --al-body:'Source Serif 4',Georgia,"Times New Roman",serif;
  --al-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --navy:var(--al-ink); --navy-deep:var(--al-ink);
  --blue:var(--al-red); --blue-bright:var(--al-red); --blue-soft:var(--al-red-tint);
  --ink:var(--al-ink); --muted:var(--al-muted); --faint:#9A939B;
  --line:var(--al-line); --line-soft:var(--al-line-soft);
  --bg:var(--al-paper); --card:var(--al-surface); --sunken:var(--al-paper);
  --ok:var(--al-ok); --ok-soft:var(--al-ok-tint); --warn:var(--al-warn); --warn-soft:var(--al-warn-tint);
  --danger:var(--al-red-deep); --danger-soft:var(--al-red-tint);
  --shadow-xs:0 1px 2px rgba(43,40,44,.05);
  --shadow-sm:0 1px 3px rgba(43,40,44,.07),0 1px 2px rgba(43,40,44,.04);
  --shadow-md:0 6px 18px rgba(43,40,44,.08);
  --shadow-lg:0 14px 34px rgba(43,40,44,.14);
  --r-sm:8px; --r-md:10px; --r-lg:12px;
}
body{font-family:var(--al-head);color:var(--al-ink);background:var(--al-paper)}
::selection{background:rgba(217,65,44,.18)}

/* ---------- type ---------- */
.section-title-row h3,.panel h3,.obs-modal-head h2,.ready-pane h2,.board-header h2,.empty-board h2{font-family:var(--al-head);font-weight:700;color:var(--al-ink);letter-spacing:-.005em}
.section-title-row h3,.panel h3{font-size:14px}
.panel > p.muted,.rail-panel > p.muted,.survey-panel > p.muted,.compose-head .muted,.obs-home-preview{font-family:var(--al-body);font-size:14px;line-height:1.45;color:var(--al-charcoal)}
.status-line,.app-banner-sid,.count-chip,.survey-date,.date-input,.dial-num,.caseload-link-note{font-family:var(--al-mono)}
.status-line{font-size:11.5px}
.tg-picked{font-family:var(--al-body);font-style:italic}

/* ---------- cards ---------- */
.panel{border-radius:12px;border-color:var(--al-line);box-shadow:var(--shadow-xs);transition:box-shadow .2s,border-color .2s}
.panel:hover{box-shadow:var(--shadow-md)}
.picker .rail-panel,.picker .observation-panel,.picker .screening-panel{background:var(--al-surface);border:1px solid var(--al-line);border-radius:10px;padding:14px}
.survey-block{background:var(--al-paper);border-color:var(--al-line-soft);border-radius:10px;box-shadow:none}
.obs-card{border-radius:10px;border-color:var(--al-line)}

/* ---------- frozen banner ---------- */
.app-banner{box-shadow:0 1px 0 var(--al-line);border-bottom-color:var(--al-line)}
.app-banner-name{background:none;-webkit-text-fill-color:currentColor;color:var(--al-red);font-family:var(--al-head);font-weight:800;letter-spacing:.24em}
.app-banner-product{color:var(--al-muted);font-family:var(--al-head);letter-spacing:.16em}
.app-banner-identity strong{color:var(--al-ink);font-family:var(--al-head)}

/* ---------- buttons: two kinds, one size ---------- */
button{font-family:var(--al-head);border-radius:8px;color:var(--al-ink);border-color:var(--al-line);
  transition:background-color .15s,border-color .15s,color .15s,transform .12s ease,box-shadow .15s}
button:hover:not(:disabled){border-color:color-mix(in srgb,var(--al-red) 45%,var(--al-line));background:var(--al-red-tint);color:var(--al-red-deep)}
button:active:not(:disabled){transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 4px rgba(0,0,0,.14)}
button:focus-visible{outline:2px solid var(--al-red);outline-offset:2px}
button:disabled{opacity:1;cursor:not-allowed;filter:none}

.primary-btn,.merge-btn,.compose-btn,.rail-connect-btn{background:var(--al-red);color:#fff;border:1px solid var(--al-red);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.primary-btn:hover:not(:disabled),.merge-btn:hover:not(:disabled),.compose-btn:hover:not(:disabled),.rail-connect-btn:hover:not(:disabled){background:var(--al-red-deep);border-color:var(--al-red-deep);color:#fff;transform:translateY(-1px);box-shadow:0 4px 10px rgba(185,50,31,.28)}
.primary-btn:active:not(:disabled),.merge-btn:active:not(:disabled),.compose-btn:active:not(:disabled){transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 4px rgba(0,0,0,.22)}

/* one size for the everyday buttons */
.primary-btn,.rail-act,.extractor-btn,.danger-btn,.notify-team-btn,.survey-actions button,.form-actions button,.btn-row button,.obs-modal-bar button,.action-row > button,#settingsModal .settings-btn{
  min-height:36px;padding:0 14px;font-size:12.5px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.rail-act,.rail-line button.rail-act{height:36px;min-height:36px;line-height:34px}
.rail-link{height:36px;min-height:36px;border-radius:8px;border-color:var(--al-line);background:var(--al-paper);font-family:var(--al-head)}
.rail-link:focus{outline:none;border-color:var(--al-red);box-shadow:0 0 0 3px var(--al-red-tint);background:#fff}
.uploads-panel .extractor-row > .extractor-btn{min-height:36px}
.extractor-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 8px rgba(43,40,44,.08)}
.danger-btn{color:var(--al-red-deep)}

/* Merge is the one big button */
.merge-btn{min-height:54px;font-size:17px;font-weight:700;border-radius:10px;letter-spacing:.02em}
.merge-btn.is-ready{box-shadow:0 0 0 4px rgba(47,125,85,.14)}
.compose-btn{min-height:40px}
.rail-connect-btn{min-height:42px;font-size:13.5px;font-weight:700;letter-spacing:.12em}

/* locked buttons show a small padlock before their words */
.primary-btn:disabled::before,.merge-btn:disabled::before,.compose-btn:disabled::before,.rail-connect-btn:disabled::before,.extractor-btn:disabled::before{
  content:"";display:inline-block;flex:none;width:10px;height:10px;margin-right:7px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h.5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1.5 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h.5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1.5 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ripple, shake, done-pop (added by automata-look.js) */
.al-rip{position:absolute;border-radius:50%;pointer-events:none;width:12px;height:12px;transform:translate(-50%,-50%) scale(0);background:currentColor;opacity:.3;animation:alRip .55s ease-out forwards}
.primary-btn .al-rip,.merge-btn .al-rip,.compose-btn .al-rip,.rail-connect-btn .al-rip{background:#fff}
@keyframes alRip{to{transform:translate(-50%,-50%) scale(28);opacity:0}}
.al-shake{animation:alShake .38s ease}
@keyframes alShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ---------- the hover explanation ---------- */
.al-tip{position:fixed;z-index:10000;max-width:280px;padding:9px 11px;border-radius:9px;background:var(--al-ink);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.25);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s}
.al-tip.on{opacity:1;transform:none}
.al-tip b{display:block;font:700 12.5px/1.3 var(--al-head);margin-bottom:3px;color:#fff}
.al-tip span{display:block;font:400 13px/1.4 var(--al-body);color:#E9E4E3}
.al-tip em{display:flex;gap:6px;align-items:flex-start;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.14);font:600 11.5px/1.35 var(--al-head);font-style:normal;color:#FFB4A6}
.al-tip em i{flex:none;width:11px;height:11px;margin-top:1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h.5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1.5 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h.5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1.5 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.al-tip::after{content:"";position:absolute;left:var(--ax,50%);width:10px;height:10px;background:var(--al-ink);transform:translateX(-50%) rotate(45deg)}
.al-tip.below::after{top:-5px}.al-tip.above::after{bottom:-5px}

/* ---------- step strip under the banner ---------- */
.al-flow{grid-column:1/-1;display:flex;gap:6px;align-items:center;padding:7px 20px;background:#fff;border-bottom:1px solid var(--al-line);overflow-x:auto;position:relative;z-index:59}
.al-flow button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:999px;font:600 12px/1 var(--al-head);color:var(--al-muted);background:var(--al-paper);border:1px solid var(--al-line);white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .12s}
.al-flow button:hover{transform:translateY(-1px);border-color:var(--al-red)}
.al-flow button:focus-visible{outline:2px solid var(--al-red);outline-offset:2px}
.al-flow .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:500 11px/1 var(--al-mono);background:var(--al-mist);color:var(--al-muted)}
.al-flow button.done{color:var(--al-ok);background:var(--al-ok-tint);border-color:transparent}
.al-flow button.done .n{background:var(--al-ok);color:#fff}
.al-flow button.now{color:var(--al-red-deep);background:var(--al-red-tint);border-color:var(--al-red)}
.al-flow button.now .n{background:var(--al-red);color:#fff;box-shadow:0 0 0 4px rgba(217,65,44,.18);animation:alBeat 1.8s ease-in-out infinite}
@keyframes alBeat{50%{box-shadow:0 0 0 7px rgba(217,65,44,.06)}}
.al-flow .sep{flex:0 0 14px;height:2px;background:var(--al-line);border-radius:2px}
.al-flow .sep.done{background:var(--al-ok)}
.al-flash{animation:alFlash 1.1s ease}
@keyframes alFlash{0%{box-shadow:0 0 0 0 rgba(217,65,44,.5)}100%{box-shadow:0 0 0 14px rgba(217,65,44,0)}}

/* ---------- small pieces ---------- */
.count-chip{background:var(--al-red);color:#fff;font-weight:500}
.tests-given-group.is-open{background:var(--al-red-tint)}
.tg-name,.tests-given-group h4{font-family:var(--al-head);color:var(--al-charcoal)}
.tg-count{min-width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;background:var(--al-red);color:#fff;font:500 10.5px/1 var(--al-mono)}
.tg-count:empty{background:var(--al-mist)}
.tests-given-row input[type=checkbox],.check-row input[type=checkbox]{accent-color:var(--al-red)}
.tests-given-row:hover,label.check-row:hover,.student-select-option:hover,.setup-group > summary:hover{background:var(--al-red-tint)}
.file-card:hover{box-shadow:var(--shadow-md)}
#dialGrad stop{stop-color:#D9412C}
#dialGrad stop:last-child{stop-color:#E8664F}
.dial-num{color:var(--al-ink)}
select,input[type=text],input[type=url],input[type=number],input[type=password],textarea{accent-color:var(--al-red)}
input[type=text]:focus,input[type=url]:focus,input[type=number]:focus,textarea:focus,select:focus{outline:none;border-color:var(--al-red);box-shadow:0 0 0 3px var(--al-red-tint)}

/* ---------- motion ---------- */
.panel,.picker .rail-panel{animation:alRise .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes alRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel,.picker .rail-panel,.al-flow .n,.al-rip,.al-shake{animation:none!important}}

/* ---------- the progress window (same one window, new look) ---------- */
#automataMergeOverlay{width:min(640px,calc(100vw - 32px));border:0;border-radius:16px;background:#fff;color:var(--al-ink);box-shadow:0 30px 70px rgba(0,0,0,.35);font-family:var(--al-head)}
#automataMergeOverlay::backdrop{background:rgba(43,40,44,.42)}
#automataMergeOverlay header{padding:20px 22px 16px;border-bottom-color:var(--al-line)}
#automataMergeOverlay h2{font:800 21px/1.2 var(--al-head);letter-spacing:-.01em;color:var(--al-ink);margin:7px 0 4px}
#automataMergeOverlay .am-eyebrow{font:700 11px/1 var(--al-head);letter-spacing:.14em;text-transform:uppercase;color:var(--al-red)}
#automataMergeStudent{font:500 12px/1.3 var(--al-mono);color:var(--al-muted)}
#automataMergeState{font:600 10.5px/1 var(--al-head);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--al-red-tint);color:var(--al-red-deep)}
#automataMergeOverlay[data-state=complete] #automataMergeState{background:var(--al-ok-tint);color:var(--al-ok)}
#automataMergeOverlay[data-state=error] #automataMergeState{background:var(--al-warn-tint);color:var(--al-warn)}
#automataMergeOverlay .am-overview{padding:18px 22px;background:var(--al-paper)}
#automataMergeAction{font:600 14px/1.35 var(--al-head)}
#automataMergePercent{font:500 34px/1 var(--al-mono)}
#automataMergeOverlay .am-overview progress{height:10px;border-radius:999px;background:var(--al-mist)}
#automataMergeOverlay progress::-webkit-progress-bar{background:var(--al-mist);border-radius:999px}
#automataMergeOverlay progress::-webkit-progress-value{background:linear-gradient(90deg,var(--al-red),#E8664F);border-radius:999px;transition:width .35s ease}
#automataMergeOverlay[data-state=complete] progress::-webkit-progress-value{background:var(--al-ok)}
#automataMergeCount{font:500 11px/1.4 var(--al-mono);color:var(--al-muted)}
#automataMergeStages{padding:6px 14px}
#automataMergeOverlay .am-stage{border-bottom-color:var(--al-line-soft)}
#automataMergeOverlay summary{padding:12px 8px;border-radius:8px;font:700 13.5px/1.25 var(--al-head);transition:background-color .15s}
#automataMergeOverlay summary:hover{background:var(--al-paper)}
#automataMergeOverlay .am-stage-state{font:600 11px/1 var(--al-head);color:var(--al-muted)}
#automataMergeOverlay .am-stage[data-state=running] .am-stage-state{color:var(--al-red-deep)}
#automataMergeOverlay .am-stage-body{padding:0 10px 14px 18px}
#automataMergeOverlay .am-stage-body progress{height:4px}
#automataMergeOverlay li{font:500 12.5px/1.4 var(--al-head);color:var(--al-muted)}
#automataMergeOverlay li[data-state=running]{color:var(--al-ink)}
#automataMergeOverlay li[data-state=done]{color:var(--al-charcoal)}
#automataMergeOverlay li[data-state=running] .am-mark{color:var(--al-red)}
#automataMergeOverlay .am-task-state{font:500 11px/1.4 var(--al-mono)}
#automataMergeMessage{background:var(--al-red-tint);font:400 13.5px/1.4 var(--al-body);padding:12px 22px}
#automataMergeOverlay[data-state=complete] #automataMergeMessage{background:var(--al-ok-tint);color:var(--al-ok)}
#automataMergeOverlay[data-state=error] #automataMergeMessage{background:var(--al-warn-tint);color:var(--al-warn)}
#automataMergeOverlay footer{padding:12px 22px;font:500 11px/1.3 var(--al-mono)}
#automataMergeClose{background:#fff;color:var(--al-ink);border:1px solid var(--al-line);border-radius:8px;min-height:36px;font:600 12.5px/1 var(--al-head)}
#automataMergeClose:hover:not(:disabled){background:var(--al-red-tint);color:var(--al-red-deep)}
#automataMergeOverlay :focus-visible{outline-color:var(--al-red)}

/* the step strip sits inside the frozen banner, full width, as its second line */
.app-banner.al-has-flow{padding-bottom:0}
.app-banner.al-has-flow .al-flow{margin:10px -22px 0;border-top:1px solid var(--al-line);border-bottom:0}
.app-banner.al-has-flow .app-banner-brand{top:36px}
.al-help{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;margin-right:8px;border:1px solid var(--al-line);border-radius:8px;background:#fff;color:var(--al-ink);font:600 12.5px/1 var(--al-head);text-decoration:none;transition:background-color .15s,color .15s,border-color .15s,transform .12s}
.al-help:hover{background:var(--al-red-tint);color:var(--al-red-deep);border-color:color-mix(in srgb,var(--al-red) 45%,var(--al-line));transform:translateY(-1px)}
.al-help:focus-visible{outline:2px solid var(--al-red);outline-offset:2px}
.al-banner-right{position:absolute;top:14px;right:20px;z-index:3;display:flex;gap:8px;align-items:center}
.al-banner-right .al-help{margin:0}
.al-banner-right .app-banner-settings{position:static;min-height:36px;padding:0 14px;border-radius:8px;font:600 12.5px/1 var(--al-head);letter-spacing:0;text-transform:none;border-color:var(--al-line);color:var(--al-ink)}
.al-banner-right .app-banner-settings:hover{background:var(--al-red-tint);color:var(--al-red-deep)}

/* rail order: Student → Caseload → Student Data → Template → Assessment Battery → Build
   (visual order only — nothing in the page is moved, so every button keeps its wiring) */
.picker{display:flex;flex-direction:column;background:var(--al-paper)}
.picker > *{order:10}
.picker > .student-picker{order:0}
.picker > #homeCaseloadPanel{order:1}
.picker > #homeTemplatesPanel{order:2}
.picker > #testsGivenPicker{order:3}
.picker > #homeDetagPanel{order:4}
.picker > #homeGraphPanel{order:5}
.picker > #homeSummaryPanel{order:6}
.picker > #homePolishPanel{order:7}
.app-banner-sid{font-weight:500;letter-spacing:0}

/* LINKED / SELECTED icons at half size, word beside the icon (Kevin's pick) */
.rail-badge{justify-content:flex-start;gap:10px;padding:8px 10px;margin:10px 0 0;border:1px dashed var(--al-line);border-radius:8px;background:var(--al-paper)}
.rail-badge-icon{width:26px!important;height:auto}
.rail-badge-word{position:static!important;transform:none!important;opacity:1!important;box-shadow:none;background:transparent!important;color:var(--al-muted)!important;font:500 10.5px/1 var(--al-mono);letter-spacing:.06em;padding:0}
.rail-badge[data-state="selected"],.caseload-link-row[data-linked="true"] .rail-badge{border-style:solid}
.rail-badge[data-state="selected"] .rail-badge-icon{fill:#3B6FB6;stroke:#3B6FB6}
.rail-badge[data-state="selected"] .rail-badge-icon .rail-badge-fold{fill:#C9D8EE}
.rail-badge[data-state="selected"] .rail-badge-word{color:#3B6FB6!important}
.caseload-link-row[data-linked="true"] .rail-badge-icon{fill:var(--al-ok);stroke:var(--al-ok)}
.caseload-link-row[data-linked="true"] .rail-badge-word{color:var(--al-ok)!important}
.caseload-link-row[data-linked="false"] .rail-badge-word{color:var(--al-warn)!important}
.rail-badge-name,.caseload-link-url{font:600 13px/1.3 var(--al-head);color:var(--al-ink)}
/* Kevin, 2026-09-11: a file that IS linked reads green — the word and the
   filename under the icon, on the Template the same as on the Caseload. */
.rail-badge[data-state="selected"] .rail-badge-word{color:var(--al-ok)!important}
.rail-badge[data-state="selected"] .rail-badge-icon{fill:var(--al-ok);stroke:var(--al-ok)}
.rail-badge[data-state="selected"] .rail-badge-icon .rail-badge-fold{fill:#CDE8D8}
.rail-badge[data-state="selected"] ~ .rail-badge-name{color:var(--al-ok)}
.caseload-link-row[data-linked="true"] .caseload-link-url{color:var(--al-ok)}
.caseload-link-url{color:var(--al-ink);text-decoration:none}
.caseload-link-url:hover{color:var(--al-red-deep);text-decoration:underline}
.rail-line.rail-make{grid-template-columns:minmax(0,1fr)}
.rail-line.rail-make .rail-make-btn{width:100%}

/* Title Case for the two buttons whose words the app's own code resets */
#extractProvidersBtn, #homeTemplateCopyBtn { text-transform: capitalize; }

/* Review Previous Test Scores, Extract All, Insert Images (Kevin, 2026-09-10) */
.prev-review-panel {
  margin-top: 18px; padding: 16px 18px 14px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--sunken);
}
.prev-review-panel h4 { margin: 0 0 4px; }
.prev-review-panel .action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.extract-all-row, .insert-images-row { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.extract-all-row { gap: 8px; }
.extract-all-btn, #insertImagesBtn { width: 100%; }
#extractAllBtn,#extractEverythingBtn,#fillTablesBtn{background:var(--al-red);background-image:none;color:#fff;border:1px solid var(--al-red)}
#extractAllBtn:hover:not(:disabled),#extractEverythingBtn:hover:not(:disabled),#fillTablesBtn:hover:not(:disabled){background:var(--al-red-deep);border-color:var(--al-red-deep);color:#fff}
#extractAllBtn:disabled,#extractEverythingBtn:disabled,#insertImagesBtn:disabled,#fillTablesBtn:disabled{background:var(--al-mist);background-image:none;color:var(--al-muted);border-color:var(--al-line);box-shadow:none;cursor:not-allowed}
.uploads-panel .status-line:empty{display:none}

/* Finish the Report — the end of the pipeline in the middle column
   (Kevin, 2026-09-10): Generate Graphs, Compose Test Narratives, Write Summary,
   Write Discussion, Polish Report, Sign Report. */
.finish-panel > .muted { margin: 0 0 12px; }
.finish-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.finish-steps > .panel { margin: 0; display: flex; flex-direction: column; min-width: 0; box-shadow: none; }
.finish-steps > .panel .action-row { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.finish-steps > .panel .action-row > button { width: 100%; }
.finish-steps .compose-panel { margin: 0; padding: 0; border: 0; background: none; display: flex; flex-direction: column; flex: 1; }
.finish-steps .compose-head h4 { font-size: inherit; }
.finish-steps .obs-home-preview { flex: 0 0 auto; }
#homeDiscussionBtn { text-transform: capitalize; }
@media (max-width: 980px) { .finish-steps { grid-template-columns: minmax(0, 1fr); } }
.finish-steps .status-line:empty { display: none; }
.finish-steps .compose-gate:empty { display: none; }
.sign-doc-line { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 8px; }
.sign-doc-line .rail-link { width: 100%; }

/* Link + Create bars (Kevin, 2026-09-10): [link bar][copy icon][Link], Create
   below; the short link of the file in use sits in the bar, so the separate
   "made" rows are no longer shown. */
/* Kevin, 2026-09-11: Create on the left, the bar in the middle, Upload on the
   right, and the copy icon INSIDE the bar at its right end, very small. */
/* The bar is the point of the row, so the two buttons stay compact and every
   remaining pixel goes to the middle. */
.rail-line.has-copy { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
.rail-line.has-copy > .rail-act { padding-left: 7px; padding-right: 7px; min-width: 0; white-space: nowrap; font-size: 11px; letter-spacing: 0.02em; }
.rail-bar { position: relative; display: block; min-width: 0; }
.rail-bar .rail-link { width: 100%; padding-right: 30px; }
.rail-copy {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; min-height: 0; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 5px; background: transparent; color: var(--al-mist); cursor: pointer;
}
.rail-copy svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.rail-copy:hover { color: var(--al-red); background: var(--al-red-tint); }
.rail-copy.is-copied { color: var(--al-ok); background: var(--al-ok-tint, #E6F3EC); }
/* "IT SHOULD SAY INSERT URL HERE IN LIGHT GRAY THAT DISAPPEARS WHEN CLICKED." */
.rail-bar .rail-link::placeholder { color: var(--al-mist); letter-spacing: 0.04em; }
.rail-bar .rail-link:focus::placeholder { color: transparent; }
#caseloadMadeRow, #templateMadeRow { display: none !important; }

/* Student Data sits right after Caseload in the rail (Kevin, 2026-09-10). */
.picker > #homeStudentDataPanel{order:1}
#homeStudentDataPanel .action-row{display:grid;grid-template-columns:minmax(0,1fr)}
#homeStudentDataPanel .action-row > button{width:100%}

/* Teacher survey roster (Kevin, 2026-09-10): yellow = waiting, green + tick = in. */
.teacher-check.is-pending{background:#FFF4C2;border-color:#E9CF6A}
.teacher-check.is-pending .teacher-name{color:#7A5A00}
.teacher-check.is-received{background:var(--al-ok-tint);border-color:#9fd0b3}
.teacher-legend{margin:8px 0 0;font-size:12px}
.teacher-legend .lg-y{background:#FFF4C2;border:1px solid #E9CF6A;border-radius:4px;padding:0 5px;color:#7A5A00;font-weight:600}
.teacher-legend .lg-g{background:var(--al-ok-tint);border:1px solid #9fd0b3;border-radius:4px;padding:0 5px;color:var(--al-ok);font-weight:600}
.tests-given-row input:disabled{cursor:not-allowed;opacity:.55}

/* The "why is this locked" popup (Kevin, 2026-09-10). */
.al-lockpop{position:fixed;z-index:3000;display:flex;gap:10px;align-items:flex-start;max-width:320px;padding:12px 12px 12px 14px;background:var(--al-ink);color:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.28);font:13px/1.4 var(--al-head);opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;transition:opacity .16s,transform .16s}
.al-lockpop.on{opacity:1;transform:none;pointer-events:auto}
.al-lockpop i{flex:none;width:14px;height:14px;margin-top:2px;background:#FFB4A6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h.5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1.5 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h.5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1.5 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.al-lockpop b{display:block;font-weight:700;margin-bottom:2px}
.al-lockpop span{display:block;color:#EDE6E4}
.al-lockpop button{flex:none;background:none;border:0;color:#fff;opacity:.7;font-size:18px;line-height:1;padding:0 2px;cursor:pointer;min-height:0}
.al-lockpop button:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.al-lockpop{transition:none}}
button:disabled{pointer-events:none}
.al-lockpop button{pointer-events:auto}

/* Progress window (Kevin, 2026-09-10): "ONE BIG ONE THAT SHOWS WHAT ITS DOING AND
   LITTLE ONES THAT OPEN AND CLOSE FOR EACH SUBCOMPONENT". */
#automataMergeOverlay .am-overview progress{height:16px}
#automataMergeOverlay #automataMergeAction{font:700 16px/1.3 var(--al-head);color:var(--al-ink)}
#automataMergeOverlay #automataMergePercent{font-size:30px}
#automataMergeOverlay .am-stage > summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;list-style:none;cursor:pointer}
#automataMergeOverlay .am-stage > summary::-webkit-details-marker{display:none}
#automataMergeOverlay .am-stage > summary .am-stage-state{float:none;margin:0;justify-self:end}
#automataMergeOverlay .am-stage > summary progress{grid-column:1 / -1;height:6px;margin:0}
#automataMergeOverlay .am-stage[data-state=done] > summary progress::-webkit-progress-value{background:var(--al-ok)}
#automataMergeOverlay .am-stage[data-state=pending] > summary{opacity:.62}
#automataMergeOverlay .am-stage[data-state=running] > summary{background:var(--al-red-tint)}
#automataMergeOverlay .am-stage-body{padding-top:8px}

/* Kevin, 2026-09-10: "REMOVE THE SEND BUTTON" — the retired transition paste box never shows. */
#transitionFields, #transitionFields [hidden] { display: none !important; }

/* Kevin, 2026-09-11: sent / received dates on each survey name row. */
.teacher-check .teacher-dates{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.teacher-check .teacher-dates span{font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px;background:#FFF4C2;color:#7A5A00}
.teacher-check .teacher-dates .sd-got{background:#E3F4E8;color:#1E7B3C}

/* Kevin, 2026-09-11: battery domains open on hover only — not by a click, and
   they close when the pointer leaves (a ticked box no longer holds one open). */
.tests-given-group:focus-within:not(:hover):not(:has(:focus-visible)):not(.is-open) > .tg-rows{max-height:0}
.tests-given-group:focus-within:not(:hover):not(:has(:focus-visible)):not(.is-open){background:transparent}
/* Kevin, 2026-09-11: it has to LOOK expandable, so the bar keeps a pointer. */
.tg-head{cursor:pointer}

/* Kevin, 2026-09-11: the in-button progress line — after 2 s of work, a 3px
   line fills along the bottom of the button that started it. */
button.al-job{overflow:hidden}
button.al-job-rel{position:relative}
button.al-job::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--al-p,0%);background:var(--al-red);opacity:0;transition:width .3s ease,opacity .25s ease;pointer-events:none}
button.al-job.al-job-on::after{opacity:1}
button.al-job.al-job-end::after{opacity:0;transition:width .25s ease,opacity .45s ease .25s}
.primary-btn.al-job::after,.merge-btn.al-job::after,.compose-btn.al-job::after,.rail-connect-btn.al-job::after{background:#fff}
@media (prefers-reduced-motion: reduce){button.al-job::after{transition:none}}

/* Kevin, 2026-09-11: "dont allow horizontal scrolling on the main page." The
   page and its three columns only scroll up and down; anything wide shrinks
   to fit (a wide table keeps its own little scroller inside its box). */
html, body, #home-view, .app-shell { overflow-x: hidden; }
.board, .ready-pane, .picker { overflow-x: hidden !important; }
.board > *, .ready-pane > *, .picker > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.board img, .ready-pane img, .picker img { max-width: 100%; height: auto; }
.board pre, .board code { white-space: pre-wrap; word-break: break-word; }

/* Kevin, 2026-09-11: "MAKE THE FULL CHECKLIST EXPANDABLE ON HOVER." Same shape
   as the Assessment Battery domains: hover or keyboard focus opens it, and the
   button still pins it open so it does not shut while you are ticking. The
   button's own `hidden` class is what pinning removes, so a pinned list stays
   open whether or not the pointer is on it. */
.checklist-hover { position: relative; }
.checklist-hover > .full-checklist.hidden {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height .2s var(--al-ease, ease), opacity .2s;
}
.checklist-hover.is-open > .full-checklist.hidden {
  max-height: 1400px;
  overflow: auto;
  opacity: 1;
  pointer-events: auto;
}
.checklist-hover > #checklistToggle::after {
  content: "\203A";
  display: inline-block;
  margin-left: 6px;
  color: var(--al-mist);
  transition: transform .18s var(--al-ease, ease);
}
.checklist-hover.is-open > #checklistToggle::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .checklist-hover > .full-checklist.hidden { transition: none; }
  .checklist-hover > #checklistToggle::after { transition: none; }
}

/* Kevin, 2026-09-19: house action buttons stay vermillion until a successful
   run, then turn blue (not green, not teal). Set by paintRanGreen — an error
   line takes the stamp straight back off. */
button[data-done="1"],
.primary-btn[data-done="1"],
.extractor-btn[data-done="1"],
.compose-btn[data-done="1"] {
  background: var(--al-done) !important;
  border-color: var(--al-done) !important;
  color: #fff !important;
}
button[data-done="1"]:hover:not(:disabled) {
  background: var(--al-done-deep) !important;
  border-color: var(--al-done-deep) !important;
  color: #fff !important;
}
button[data-done="1"]::after { content: none; }
button.al-ran[data-done="1"]::after { content: none; }

/* Kevin, 2026-09-11: "WHY IS THE SHEET AND DOC ICON UNDER TEMPLATE AND CASELOAD
   IN A GIANT BAR AND NOT CENTERED? MAKE THE URL BAR THAT LONG WITH THE
   SHEET/DOC ICON WITH LINKED NEXT TO IT."
   The badge was a full-width dashed box with the word floating in the middle.
   It is a small pill now -- icon, LINKED, file name, all on one line -- and the
   URL bar above it keeps the whole width of the panel. */
.rail-badge {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 4px 9px !important;
  flex: none;
}
.rail-badge-icon { width: 18px !important; height: auto; }
.rail-linked-line,
.caseload-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}
.rail-linked-line > .rail-badge-name,
.caseload-link-row > .caseload-link-url {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
/* "MAKE THE CREATE AND UPLOAD BUTTONS THE SAME COLOR." */
.rail-line.has-copy > .rail-make-btn {
  background: var(--al-red);
  color: #fff;
  border: 1px solid var(--al-red);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  font-weight: 600;
}
.rail-line.has-copy > .rail-make-btn:hover:not(:disabled) {
  background: var(--al-red-deep);
  border-color: var(--al-red-deep);
  color: #fff;
}

/* ============================================================
   Design pass (2026-09-11) — presentation only.
   Kevin: same-size buttons per section, centered labels, hover +
   click, symmetry, density that fights sideways scroll. Merge stays
   the one big control. Finish the Report is one family. Splash /
   banner / footer left alone.
   ============================================================ */

/* Everyday section buttons: one height, label dead-center. Do not
   use display:flex on every button — that would un-hide [hidden]
   controls (Phone Links, retired Upload). */
.primary-btn,
.compose-btn,
.extractor-btn,
.extract-all-btn,
.rail-act,
.rail-connect-btn,
.rail-connect-copy,
.survey-actions > button,
.notify-team-btn,
.danger-btn,
.se-open-btn,
#reportSaveBtn,
#homeScreeningBtn,
#extractStudentDataBtn,
#openWriterBtn,
#pickerDeleteBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
button.hidden,
button[hidden],
.hidden > button,
.action-row > button[hidden],
.action-row > button.hidden,
#homePhoneObsBtn,
#caseloadFileUploadBtn,
#loadTemplateUrlBtn,
#uploadTemplateBtn,
#homeDetagPickBtn,
#transitionSendBtn {
  display: none !important;
}

/* Shared compact size for section actions — not Merge. Extractor
   labels wrap, so those stay min-height only. */
.primary-btn,
.compose-btn,
.extract-all-btn,
.survey-actions > button,
.notify-team-btn,
.action-row > button,
#homeScreeningBtn,
#extractStudentDataBtn {
  min-height: 38px;
  padding: 0 12px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
}
.primary-btn,
.compose-btn,
.extract-all-btn,
.survey-actions > button,
.notify-team-btn,
#homeScreeningBtn,
#extractStudentDataBtn {
  height: 38px;
  white-space: nowrap;
}
.picker .primary-btn,
.board .primary-btn,
.ready-pane .primary-btn,
.finish-steps .primary-btn,
.finish-steps .compose-btn {
  margin-bottom: 0;
}

/* Hover + press on the everyday family (vermillion, never teal). */
.extractor-btn:hover:not(:disabled),
.survey-actions > button:hover:not(:disabled),
.rail-connect-copy:hover:not(:disabled),
#openWriterBtn:hover:not(:disabled),
#reportSaveBtn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--al-red) 45%, var(--al-line));
  background: var(--al-red-tint);
  color: var(--al-red-deep);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(43, 40, 44, .08);
}
.extractor-btn:active:not(:disabled),
.survey-actions > button:active:not(:disabled),
.rail-connect-copy:active:not(:disabled),
.se-open-btn:active:not(:disabled) {
  transform: translateY(1px) scale(.98);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .14);
}

/* ---- Left rail density (Caseload → picker → data → template →
   battery → Build). Shrink padding so the column scrolls less. ---- */
.picker { padding: 12px 12px 16px; gap: 0; }
.picker > .student-picker { margin: 0 0 10px; }
.picker .rail-panel,
.picker .tests-given-picker {
  padding: 12px;
  margin: 0 0 10px;
}
.picker .rail-panel:hover,
.picker .tests-given-picker:hover { box-shadow: var(--shadow-sm); }
.student-select-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.student-select-tools > button {
  width: 100%;
  min-height: 36px;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  font-size: 12px;
}
.rail-line.has-copy {
  align-items: stretch;
}
.rail-line.has-copy > .rail-act,
.rail-line.has-copy > .rail-make-btn,
.rail-line.has-copy .rail-link {
  height: 36px;
  min-height: 36px;
  line-height: 1;
}
.rail-line.has-copy > .rail-act,
.rail-line.has-copy > .rail-make-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
}
.rail-line.has-copy > .primary-btn.rail-act {
  background: var(--al-red);
  color: #fff;
  border-color: var(--al-red);
}
.rail-line.has-copy > .primary-btn.rail-act:hover:not(:disabled) {
  background: var(--al-red-deep);
  border-color: var(--al-red-deep);
  color: #fff;
}

/* Build + Copy link: same width, same height. Build stays filled;
   Copy stays outline so it does not read as Merge. */
.rail-connect {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.rail-connect-btn,
.rail-connect-copy {
  width: 100%;
  min-height: 40px;
  height: 40px;
  margin: 0;
  box-sizing: border-box;
}
.rail-connect-btn {
  font-size: 13px;
  letter-spacing: .1em;
}
.rail-connect-copy {
  font-size: 12.5px;
  letter-spacing: .02em;
  background: #fff;
  color: var(--al-ink);
  border: 1px solid var(--al-line);
}
.rail-connect > .hidden,
.rail-connect > [hidden] { display: none !important; }

/* Assessment Battery heading + Manual Entry on one even row. */
#testsGivenPicker > .section-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
#testsGivenPicker > .section-title-row h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
#testsGivenPicker .se-open-wrap {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  z-index: 5;
}
#testsGivenPicker .se-open-btn {
  width: auto;
  min-width: 118px;
  min-height: 32px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  background: #fff;
  color: var(--al-red-deep);
  border: 1px solid var(--al-red);
}
#testsGivenPicker .se-open-btn:hover:not(:disabled) {
  background: var(--al-red-tint);
  color: var(--al-red-deep);
  border-color: var(--al-red);
}
#testsGivenPicker .se-open-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  min-width: 180px;
  max-height: 0;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  padding: 0;
  z-index: 8;
}
#testsGivenPicker .se-open-wrap:hover > .se-open-list,
#testsGivenPicker .se-open-wrap:focus-within > .se-open-list {
  max-height: 320px;
  border: 1px solid var(--al-line);
  box-shadow: var(--shadow-md);
  padding: 4px;
}

/* Observation + Adaptive: two equal cards (Screening lives above). */
.board-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.board-tools .panel .primary-btn {
  min-height: 38px;
  height: 38px;
  width: 100%;
}

/* Surveys: four actions, one size, labels centered. */
.survey-actions > button {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Uploads: extractors one family; Insert Images is full-width of
   that family — never Merge-sized. Extract All pair stay vermillion. */
.uploads-panel .extractor-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.uploads-panel .extractor-row > .extractor-btn {
  min-height: 38px;
  height: auto;
  padding: 6px 10px;
  white-space: normal;
  line-height: 1.25;
}
.insert-images-row { margin-top: 10px; }
#insertImagesBtn,
#homeGraphBtn {
  min-height: 38px;
  height: 38px;
  width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.prev-review-panel .action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.prev-review-panel .action-row > button {
  width: 100%;
  min-height: 38px;
  height: 38px;
  margin: 0;
}
.prev-review-panel .extractor-btn,
#extractPrevBtn {
  background: var(--al-red);
  color: #fff;
  border: 1px solid var(--al-red);
}
.prev-review-panel .extractor-btn:hover:not(:disabled),
#extractPrevBtn:hover:not(:disabled) {
  background: var(--al-red-deep);
  border-color: var(--al-red-deep);
  color: #fff;
}
.action-row.extract-all-row .extract-all-btn {
  min-height: 36px;
  height: auto;
  padding: 8px 12px;
  white-space: normal;
  line-height: 1.25;
}
.uploads-copy-row button {
  min-height: 38px;
  height: 38px;
  padding: 0 14px;
}

/* ---- Finish the Report: six steps, one family. Equal cards, same
   vermillion button parked on the bottom edge of each card. ---- */
.finish-panel {
  padding: 16px 16px 14px;
}
.finish-panel > .muted { margin: 0 0 12px; font-size: 13px; }
.finish-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.finish-steps > .panel {
  margin: 0;
  padding: 14px 14px 12px;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--al-paper);
  border: 1px solid var(--al-line);
  border-radius: 10px;
  box-shadow: none;
}
.finish-steps > .panel:hover { box-shadow: var(--shadow-sm); }
.finish-steps .section-title-row { margin: 0 0 6px; min-height: 0; }
.finish-steps .section-title-row h3,
.finish-steps .compose-head h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--al-ink);
  font-family: var(--al-head);
}
.finish-steps .muted,
.finish-steps .obs-home-preview,
.finish-steps .compose-head .muted {
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0 0 8px;
}
.finish-steps .compose-panel { flex: 1; }
.finish-steps > .panel .action-row,
.finish-steps .compose-panel .action-row {
  margin-top: auto;
  padding-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.finish-steps > .panel .action-row > button,
.finish-steps .compose-btn,
.finish-steps .primary-btn {
  width: 100%;
  min-height: 38px;
  height: auto;
  margin: 0;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  background: var(--al-red);
  color: #fff;
  border: 1px solid var(--al-red);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.finish-steps > .panel .action-row > button:hover:not(:disabled),
.finish-steps .compose-btn:hover:not(:disabled),
.finish-steps .primary-btn:hover:not(:disabled) {
  background: var(--al-red-deep);
  border-color: var(--al-red-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(185, 50, 31, .28);
}
.finish-steps > .panel .action-row > button:active:not(:disabled),
.finish-steps .compose-btn:active:not(:disabled),
.finish-steps .primary-btn:active:not(:disabled) {
  transform: translateY(1px) scale(.98);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22);
}
.finish-steps > .panel .action-row > button:disabled,
.finish-steps .compose-btn:disabled,
.finish-steps .primary-btn:disabled {
  background: var(--al-mist);
  color: var(--al-muted);
  border-color: var(--al-line);
  box-shadow: none;
}
#homeDiscussionBtn { text-transform: none; }
@media (max-width: 980px) {
  .finish-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Merge is the one large control in the right pane. Save/export
   under it stays a small pair. */
.ready-pane .merge-btn,
button.merge-btn {
  width: 100%;
  max-width: none;
  min-height: 54px;
  height: 54px;
  margin: 0 0 12px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sign Report: white 44px helper under Merge until Merge is complete. */
.ready-pane #homeSignPanel{
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--al-line);
  box-shadow: none;
}
.ready-pane #homeSignPanel .section-title-row h3{font-size:13px;margin:0 0 8px}
.ready-pane #homeSignPanel .action-row{margin:0}
#signReportBtn{
  width:100%;
  min-height:44px;
  height:44px;
  background:#fff;
  color:var(--al-ink);
  border:1px solid var(--al-line);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
}
#signReportBtn:hover:not(:disabled){
  background:var(--al-red-tint);
  color:var(--al-red-deep);
  border-color:var(--al-red-deep);
}
#signReportBtn:disabled{
  background:#fff;
  color:var(--al-muted);
}

.ready-pane .report-export-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  align-items: stretch;
  margin: 0 0 8px;
}
.ready-pane .report-export-row .export-control,
.ready-pane #reportSaveBtn {
  min-height: 36px;
  height: 36px;
  margin: 0;
  width: 100%;
}
.ready-pane #copyMergeDocBtn {
  min-height: 36px;
  height: 36px;
}

/* Screening / Student Data / Required Tags stay on the 38px grid. */
#homeStudentDataPanel .action-row > button,
#homeScreeningPanel .action-row > button {
  width: 100%;
  min-height: 38px;
  height: 38px;
}

/* Wide tables scroll inside their box; the page itself does not. */
.finish-steps > .panel,
.uploads-panel,
.survey-block { overflow-x: hidden; }

/* Kevin, 2026-09-11: "the expand on hover is super fast and uncontrollable. I
   asked for transitions for buttons and opening and closing, expanding and
   contracting cards."
   Battery domains wait a moment before opening (so passing over one does not
   fling it open), glide open, and linger a little before gliding shut, so the
   pointer can travel to a tick box. */
.tests-given-group{display:grid;grid-template-rows:auto 0fr;
  transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1),background-color .3s ease}
.tests-given-group.is-open{grid-template-rows:auto 1fr;
  transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1),background-color .3s ease}
.tests-given-group > .tg-rows{max-height:none !important;min-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .3s ease,transform .45s cubic-bezier(.4,0,.2,1)}
.tests-given-group.is-open > .tg-rows{opacity:1;transform:none;
  transition:opacity .35s ease .3s,transform .45s cubic-bezier(.2,.8,.2,1) .25s}
.tests-given-group > .tg-head::before{transition:transform .35s cubic-bezier(.2,.8,.2,1) .25s}

/* Buttons: every change of colour, border, lift and shadow eases. */
button,.rail-link,.al-help{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease,opacity .2s ease}

/* Folding cards (details): the inside slides and fades in when opened; the
   little arrow turns. */
details > summary{transition:background-color .2s ease,color .2s ease}
details[open] > :not(summary){animation:alUnfold .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes alUnfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Cards and rows that appear (a panel shown, a list filled) rise in gently. */
.survey-block,.obs-card{animation:alRise .34s cubic-bezier(.2,.8,.2,1) both}

/* Side windows slide in from the right over a fading backdrop. */
.obs-modal:not(.hidden) .obs-modal-panel{animation:alSlideIn .36s cubic-bezier(.2,.8,.2,1) both}
.obs-modal:not(.hidden) .obs-modal-backdrop{animation:alFade .3s ease both}
@keyframes alSlideIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes alFade{from{opacity:0}to{opacity:1}}

/* The student list and other drop-downs ease open. */
.student-select-menu:not(.hidden),#studentSelectMenu:not(.hidden){animation:alUnfold .26s cubic-bezier(.2,.8,.2,1) both}

@media (prefers-reduced-motion:reduce){
  .tests-given-group,.tests-given-group.is-open,.tests-given-group > .tg-rows,.tests-given-group.is-open > .tg-rows{transition:none}
  details[open] > :not(summary),.survey-block,.obs-card,
  .obs-modal:not(.hidden) .obs-modal-panel,.obs-modal:not(.hidden) .obs-modal-backdrop,#studentSelectMenu:not(.hidden){animation:none!important}
}

/* ---------------------------------------------------------------------------
   Uploads drop zone — Kevin, 2026-09-11: "REMOVE THE UPLOADS BUTTON AND MAKE THE
   WHOLE DRAG AND DROP AREA CLICKABLE TO OPEN A FINDER WINDOW."
   app.css gives the zone cursor:copy once it holds files, which reads as "drop
   only". The zone is now a control in both states, so it takes the pointer and a
   hover lift either way. Cards inside the tray keep their own cursor: clicking a
   card still enlarges or opens that file, it does not browse.
   --------------------------------------------------------------------------- */
#fileDropzone { cursor: pointer; }
#fileDropzone:hover { border-color: var(--vl-red, #D9412C); background: var(--vl-red-tint, #FBE9E5); }
#fileDropzone:focus-visible {
  outline: 2px solid var(--vl-red, #D9412C);
  outline-offset: 2px;
}
#fileDropzone .file-tray { cursor: default; }
#fileDropzone:not(.is-empty):hover .dropzone-hint { color: var(--vl-red-deep, #B8321F); }

/* A button that has already run: blue, and still pressable (Build stays
   disabled via .is-built). Kevin 2026-09-19 overrode the 09-11 green rule. */
button.al-ran:not(:disabled) {
  background: var(--al-done) !important;
  border-color: var(--al-done) !important;
  color: #fff !important;
}
button.al-ran:not(:disabled):hover {
  background: var(--al-done-deep) !important;
  border-color: var(--al-done-deep) !important;
  color: #fff !important;
}
button.al-ran::before {
  content: none;
}

/* Score entry: blue empty Score/95% CI, mist empty %/D, white filled. */
.se-card input.score-fld {
  transition: background-color 0.15s ease, border-color 0.15s ease;
  color: var(--ink, #2B282C);
  border: 1px solid var(--line, #DCD5D4);
  background-color: #EBF3FB;
}

.se-card input[data-metric="pct"],
.se-card input[data-metric="desc"] {
  background-color: var(--mist, var(--al-mist, #EFEBEA));
}

/* The placeholder fallback applies before binding; .filled then also handles
   whitespace-only text and input types that do not show placeholders. */
.se-card input.score-fld[placeholder]:not([type="date"]):not(:placeholder-shown):not(.score-state-bound),
.se-card input.score-fld.filled {
  background-color: #FFFFFF !important;
}

.se-card input.score-fld:focus {
  outline: 2px solid var(--red, var(--al-red, #D9412C));
  outline-offset: -1px;
  box-shadow: none;
}

/* Keep validation visible even though every populated field is white. */
.se-card .se-row.has-problem input.se-score {
  border-color: var(--danger, #B8321F);
}

.se-card .se-result {
  font: inherit;
  font-size: 12px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--r-sm);
}
.se-card .se-pct { width: 54px; text-align: center; }
.se-card input.se-desc { flex: 1 1 120px; width: 120px; }

@media (prefers-reduced-motion: reduce) {
  .se-card input.score-fld { transition: none; }
}

/* ============================================================
   Last-wins lock (2026-09-11 layout pass). Tokens and sizes here
   beat earlier 38/40/42 overrides without rewriting app.css.
   ============================================================ */
:root{
  --col-left:300px;
  --col-right:340px;
  --btn-height:36px;
  --btn-sign:44px;
  --btn-merge:54px;
}
.app-shell{
  grid-template-columns:var(--col-left) minmax(0,1fr) var(--col-right);
}

.primary-btn,.compose-btn,.extract-all-btn,.survey-actions > button,.notify-team-btn,
.action-row > button,#homeScreeningBtn,#extractStudentDataBtn,
.board-tools .panel .primary-btn{
  min-height:var(--btn-height);
  height:var(--btn-height);
}
.rail-connect-btn,.rail-connect-copy{
  min-height:var(--btn-height);
  height:var(--btn-height);
}
#signReportBtn{
  min-height:var(--btn-sign);
  height:var(--btn-sign);
}
.ready-pane .merge-btn,button.merge-btn{
  min-height:var(--btn-merge);
  height:var(--btn-merge);
}

/* Score extractors in Uploads are secondary helpers, not a second primary path. */
.uploads-panel .extractor-row > .extractor-btn{
  min-height:32px;
  height:auto;
  padding:6px 10px;
  font-size:11.5px;
  font-weight:600;
  background:#fff;
  color:var(--al-ink);
  border:1px solid var(--al-line);
}
.uploads-panel .extractor-row > .extractor-btn:hover:not(:disabled){
  background:var(--al-red-tint);
  color:var(--al-red-deep);
  border-color:var(--al-red);
}

.section-title-row h3{
  display:flex;
  align-items:center;
  gap:8px;
}
.section-title-row h3::before{
  content:"";
  flex:none;
  width:18px;
  height:18px;
  border-radius:4px;
  background:var(--al-red-tint);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--al-red) 22%,transparent);
  background-image:linear-gradient(var(--al-red),var(--al-red));
  background-size:10px 2px;
  background-repeat:no-repeat;
  background-position:center;
}

.empty-mark{
  width:24px;
  height:24px;
  margin:0 auto 10px;
  border-radius:4px;
  background:var(--al-red-tint);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--al-red) 22%,transparent);
}
.pane-empty-mark svg{width:24px;height:24px}

.finish-steps #insertImagesBtn{
  width:100%;
  min-height:var(--btn-height);
  height:auto;
  background:var(--al-red);
  color:#fff;
  border:1px solid var(--al-red);
}
.finish-steps #insertImagesBtn:hover:not(:disabled){
  background:var(--al-red-deep);
  border-color:var(--al-red-deep);
  color:#fff;
}

.ready-pane .run-automata-btn{
  width:100%;
  min-height:var(--btn-height);
  height:auto;
  margin:0 0 8px;
}
.ready-pane .run-automata-note{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.4;
}


/* ============================================================
   DESKTOP MATCHES THE PHONE — Kevin, 2026-09-19: "Same wash, font and
   glass on the desktop app." Deep Azure ombre page ground, Montserrat as
   the whole face, and the glass bevel from the phone app. Appended last,
   so nothing above is rewritten: every rule here only restyles.
   ============================================================ */

/* One face. The bundled Source Serif 4 files stay on disk, unused for now. */
:root{
  --al-body:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --al-wash-1:#8FB6FF; --al-wash-2:#C4D9FF; --al-wash-3:#F2F7FF;
  --al-edge:rgba(64,88,150,.20);
}

/* The page ground: blue at the top, running long down to near-white. */
body{
  font-family:var(--al-head);
  background-color:var(--al-wash-3);
  background-image:
    radial-gradient(70% 45% at 8% 0%, rgba(58,112,255,.34) 0%, transparent 64%),
    radial-gradient(55% 35% at 96% 14%, rgba(124,108,226,.06) 0%, transparent 62%),
    linear-gradient(178deg, var(--al-wash-1) 0%, var(--al-wash-2) 58%, var(--al-wash-3) 88%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}

/* Panels sit on the wash as white glass, lit from the top. */
.panel,.rail-panel,.survey-panel,.observation-panel,.screening-panel,.board-tools .panel{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F3F6FD 100%);
  border-color:var(--al-edge);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -2px 0 rgba(64,88,150,.10),
    0 2px 3px rgba(28,44,90,.10),
    0 12px 26px rgba(28,44,90,.14);
}
.panel:hover{
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -2px 0 rgba(64,88,150,.12),
    0 3px 6px rgba(28,44,90,.14),
    0 18px 36px rgba(28,44,90,.20);
}

/* Every button is a moulded piece: white ones domed, red ones deeper. */
/* Gloss is a background layer. Progress still uses button.al-job::after.
   Done/ran check glyphs are retired — success is cobalt, not a tick. */
button:not(.rail-badge){
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#FFFFFF 0%,#E9EEFA 100%);
  border-color:var(--al-edge);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -2px 0 rgba(64,88,150,.14),
    0 2px 4px rgba(28,44,90,.12),
    0 8px 18px rgba(28,44,90,.12);
}
button:not(.rail-badge):hover:not(:disabled){
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 -2px 0 rgba(64,88,150,.16),
    0 3px 6px rgba(28,44,90,.14),
    0 14px 28px rgba(28,44,90,.18);
}
button:not(.rail-badge):active:not(:disabled){
  box-shadow:inset 0 3px 9px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(2px) scale(.98);
}

.primary-btn,.merge-btn,.rail-act,.extractor-btn,.danger-btn,.notify-team-btn,
.survey-actions button,.form-actions button,.btn-row button,.obs-modal-bar button,
.action-row > button,#settingsModal .settings-btn{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#F2604A 0%,#D9412C 46%,#B22F1D 100%);
  border-color:#A82C1A; color:#fff;
  text-shadow:0 1px 1px rgba(90,20,10,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.20),
    0 3px 6px rgba(178,47,29,.34),
    0 12px 26px rgba(178,47,29,.26);
}
.primary-btn:hover:not(:disabled),.merge-btn:hover:not(:disabled),
.rail-act:hover:not(:disabled),.extractor-btn:hover:not(:disabled){
  color:#fff;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#F26C56 0%,#DD4730 46%,#B8321F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 4px 8px rgba(178,47,29,.38),
    0 18px 34px rgba(178,47,29,.30);
}

/* The little section icons become red chips with a gloss, like the phone. */
.section-icon,.panel-icon,.al-icon,.rail-icon{
  border-radius:10px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg,#F2604A 0%,#D9412C 48%,#B22F1D 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -3px 4px rgba(0,0,0,.26),
    0 3px 7px rgba(178,47,29,.38);
}
.section-icon svg,.panel-icon svg,.al-icon svg,.rail-icon svg{
  stroke:#fff;
  filter:drop-shadow(0 1px 1.5px rgba(90,20,10,.50));
}

/* The frozen banner and step strip float over the wash like the phone bars. */
.banner,.topbar,.step-strip,.al-steps{
  background-color:rgba(255,255,255,.76);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--al-edge);
}

@media (prefers-reduced-motion: reduce){
  .panel,button{ transition:none !important; animation:none !important; }
}


/* ============================================================
   NIGHT — Kevin, 2026-09-19: "yes give me night."
   The app follows the Mac's own Appearance setting: switch the Mac to
   Dark (or Auto) and everything below takes over. Every colour here is
   a token repoint, so app.css follows without being touched.
   ============================================================ */
/* Kevin, 2026-09-20: "put it back to the day time one and forget the night for
   now." NIGHT IS OFF. Every night block below is kept word for word, behind a
   condition that can never be true, so nothing was lost: taking night out of
   storage again means deleting the ' and (max-width: 0px)' from each of these
   lines and putting color-scheme back to 'light dark'. */
@media (prefers-color-scheme: dark) and (max-width: 0px){
  :root{
    color-scheme:dark;

    --al-paper:#14131A; --al-surface:#1C1B23; --al-mist:#252430;
    --al-line:#343342; --al-line-soft:#2A2936;
    --al-ink:#ECEAF2; --al-charcoal:#CFCBD8; --al-muted:#9A95A6;
    --al-red:#E8553F; --al-red-deep:#F27A66; --al-red-tint:#3A2320;
    --al-ok:#66BB8A; --al-ok-tint:#1E3327; --al-warn:#D9A15A; --al-warn-tint:#33281A;
    --al-done:#6B93D6; --al-done-deep:#8AADDF; --al-done-tint:#1E2A40;
    --faint:#7C7689;

    --al-wash-1:#122246; --al-wash-2:#17214A; --al-wash-3:#0E1224;
    --al-edge:rgba(255,255,255,.10);

    --shadow-xs:0 1px 2px rgba(0,0,0,.40);
    --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 8px 22px rgba(0,0,0,.50);
    --shadow-lg:0 16px 38px rgba(0,0,0,.55);
  }

  body{
    color:var(--al-ink);
    background-color:var(--al-wash-3);
    background-image:
      radial-gradient(70% 45% at 8% 0%, rgba(58,112,255,.30) 0%, transparent 64%),
      radial-gradient(55% 35% at 96% 14%, rgba(124,108,226,.14) 0%, transparent 62%),
      linear-gradient(178deg, var(--al-wash-1) 0%, var(--al-wash-2) 58%, var(--al-wash-3) 88%);
  }

  /* Panels and popups: dark glass, lit along the top edge. */
  .panel,.rail-panel,.survey-panel,.observation-panel,.screening-panel,.board-tools .panel,
  .obs-modal,.obs-modal-panel,dialog,.modal,.popover,.al-tip{
    background-image:linear-gradient(180deg,#24222C 0%,#1A1921 100%);
    border-color:var(--al-edge);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -2px 0 rgba(0,0,0,.45),
      0 2px 4px rgba(0,0,0,.45),
      0 14px 30px rgba(0,0,0,.50);
  }
  .panel:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.45),
      0 3px 6px rgba(0,0,0,.50),
      0 20px 40px rgba(0,0,0,.55);
  }

  /* Buttons keep the same moulding, lit for a dark room. */
  button:not(.rail-badge){
    color:var(--al-ink);
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(180deg,#2C2A36 0%,#201F29 100%);
    border-color:var(--al-edge);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.50),
      0 2px 4px rgba(0,0,0,.45),
      0 8px 18px rgba(0,0,0,.45);
  }
  button:not(.rail-badge):hover:not(:disabled){
    color:var(--al-red-deep);
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(180deg,#35323F 0%,#26252F 100%);
    border-color:color-mix(in srgb,var(--al-red) 55%,var(--al-edge));
  }
  button:not(.rail-badge):active:not(:disabled){
    box-shadow:inset 0 3px 9px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08);
  }

  /* Boxes you type in. */
  input,select,textarea,.link-bar input,.search-bar input{
    background-color:#201F29; color:var(--al-ink); border-color:var(--al-edge);
  }
  input::placeholder,textarea::placeholder{ color:var(--al-muted); }

  /* The frozen bars float over the night wash. */
  .banner,.topbar,.step-strip,.al-steps{
    background-color:rgba(28,27,35,.76);
    border-bottom:.5px solid var(--al-edge);
  }

  /* Anything still painted a literal white gets the night surface. */
  .card,.tile,.file-card,.upload-card,.chip,.pill,.tag,.list-row,.rail-link{
    background-color:var(--al-surface); color:var(--al-ink); border-color:var(--al-edge);
  }
  hr,.divider{ border-color:var(--al-edge); }
}


/* Kevin, 2026-09-19: "there needs to be an x over the icon of each upload to
   delete". A small X sits in the top right corner of every uploaded file.
   It is faint until the card is hovered or the X itself is focused, so the
   tray still reads as pictures rather than as a row of buttons, and it is
   always visible on a touch screen, where there is no hover. */
.file-card { position: relative; }
.file-card .file-x {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.92);
  color: var(--al-red, #B3261E);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}
.file-card:hover .file-x,
.file-card:focus-within .file-x { opacity: 1; transform: scale(1); }
.file-card .file-x:hover,
.file-card .file-x:focus-visible {
  opacity: 1;
  transform: scale(1);
  background: var(--al-red, #B3261E);
  border-color: var(--al-red, #B3261E);
  color: #fff;
}
@media (hover: none) {
  .file-card .file-x { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .file-card .file-x { transition: none; }
}

/* ============================================================
   Home layout pass — Kevin 2026-09-19
   Minimalist: buttons and field labels only. MERGE bottom-right.
   No Microsoft / Word / Doc-link chrome. No helper sentences.
   ============================================================ */
.app-shell {
  grid-template-columns: 300px minmax(0, 1fr) 260px;
}
.picker {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.picker > .panel { margin: 0; }
.caseload-title-row,
.caseload-title-row h3 { justify-content: center; text-align: center; width: 100%; }
.board { padding: 16px 18px 24px; }
.ready-pane {
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
}

/* Caseload-first: center + right stay inert until the sheet is linked (and,
   after that, until a student + template are ready). Buttons look sunken-gray
   (last-wins block), not a washed-out veil. */
#home-view[data-home-stage="caseload"] .board,
#home-view[data-home-stage="caseload"] .ready-pane,
#home-view[data-home-stage="template"] .board,
#home-view[data-home-stage="template"] .ready-pane {
  pointer-events: none;
  opacity: 1;
  filter: none;
}

/* Extra sentences stay in the DOM for tests; they are not on screen */
#home-view .panel > p.muted,
#home-view .compose-head .muted,
#home-view .obs-home-preview,
#home-view .status-line,
#home-view .smart-why,
#home-view .teacher-legend,
#home-view .caseload-link-note,
#home-view .run-automata-note,
#home-view .uploads-copy-row,
#home-view .dropzone-hint,
#home-view #reportBuiltLabel,
#home-view #homeCaseloadLinkUrl,
#home-view #homeDetagLinkWrap,
#home-view #homeDetagPreview,
#home-view #driveFolderRow,
#home-view #requiredUploadsCount,
#home-view #requiredUploads h4,
#home-view #requiredTagsPanel > p.muted,
#home-view #emptyBoard > p,
#home-view #readyEmpty,
#home-view #homeFinishPanel > p.muted,
#home-view #composeGateList,
#home-view #readyCount,
#home-view #mergeDocBar,
#home-view #mergeDocEmpty,
#home-view #mergeDocLink,
#home-view #copyMergeDocBtn,
#home-view #microsoftBox,
#home-view #microsoftSignInBtn,
#home-view #microsoftSignOutBtn,
#home-view #saveMicrosoftAppIdBtn,
#home-view #microsoftAppId,
#home-view #microsoftStatus,
#home-view #microsoftCodeRow,
#home-view #microsoftCode,
#home-view #microsoftCodeLink,
#home-view #reportExportRow,
#home-view #reportExportStatus,
#home-view #reportSaveBtn,
#home-view #reportExportFormat,
#home-view #checklistHover,
#home-view .dial-sub,
#home-view .dial-caption,
#home-view .progress-head,
#home-view .progress-track {
  display: none !important;
}

/* Card titles that only repeat the button */
.finish-steps .section-title-row,
#homeFinishPanel > .section-title-row {
  display: none !important;
}

.finish-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.finish-steps > .panel {
  margin: 0;
  padding: 12px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.finish-steps > .panel .action-row {
  margin-top: auto;
  padding-top: 0;
}
.finish-steps .house-btn,
.finish-steps .primary-btn,
.finish-steps .compose-btn,
.finish-steps .extractor-btn,
#homeDetagBtn,
#pickCaseloadBtn,
#pickTemplateBtn,
#mergeBtn,
#runAutomataBtn {
  min-height: 44px;
  height: 44px;
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ready-pane .merge-btn,
button.merge-btn {
  min-height: 44px;
  height: 44px;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 8px;
}
.home-merge-dock {
  margin-top: auto;
  padding: 8px 0 4px;
  gap: 0;
}
#signReportBtn {
  background: var(--al-red);
  color: #fff;
  border-color: var(--al-red);
}
#signReportBtn:hover:not(:disabled) {
  background: var(--al-red-deep);
  color: #fff;
  border-color: var(--al-red-deep);
}
#homeDetagBtn.is-built,
button.house-btn.is-built,
.primary-btn.is-built,
.merge-btn.is-built,
.compose-btn.is-built,
.compose-btn.is-received {
  background: var(--al-done) !important;
  border-color: var(--al-done) !important;
  color: #fff !important;
}
#createReportBtn.is-built:disabled,
#homeDetagBtn.is-built:disabled,
button.house-btn.is-built:disabled,
.primary-btn.is-built:disabled,
.merge-btn.is-built:disabled {
  opacity: 1;
  filter: none;
  cursor: not-allowed;
}
.dial-wrap { margin: 12px auto 0; }
#setupGroup { display: none !important; }
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 260px minmax(0, 1fr) 220px; }
}

/* ============================================================
   Desktop chrome aesthetics — Kevin 2026-09-19
   Hover lift/sheen, press scale, vermillion → cobalt #2F62B5 on a
   successful run. Phone glass stays; this makes it congruent.
   ============================================================ */

/* Phone-look `button:not(.rail-badge)` (type+class) was beating `.primary-btn`
   (class only), so house actions rendered as white glass with white type.
   Match that specificity so rest is vermillion and success (with !important)
   still wins. */
button.primary-btn:not(.rail-badge),
button.merge-btn:not(.rail-badge),
button.compose-btn:not(.rail-badge),
button.extractor-btn:not(.rail-badge),
button.house-btn:not(.rail-badge),
button.rail-act:not(.rail-badge),
button.rail-connect-btn:not(.rail-badge),
button.extract-all-btn:not(.rail-badge),
.survey-actions button:not(.rail-badge),
#homeRecordBtn:not(.rail-badge),
#fillTablesBtn:not(.rail-badge),
#extractPrevBtn:not(.rail-badge),
#pickCaseloadBtn:not(.rail-badge),
#pickTemplateBtn:not(.rail-badge) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#F2604A 0%,#D9412C 46%,#B22F1D 100%);
  border-color:#A82C1A;
  color:#fff;
  text-shadow:0 1px 1px rgba(90,20,10,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.20),
    0 3px 6px rgba(178,47,29,.34),
    0 12px 26px rgba(178,47,29,.26);
}
button.primary-btn:not(.rail-badge):hover:not(:disabled),
button.merge-btn:not(.rail-badge):hover:not(:disabled),
button.compose-btn:not(.rail-badge):hover:not(:disabled),
button.extractor-btn:not(.rail-badge):hover:not(:disabled),
button.house-btn:not(.rail-badge):hover:not(:disabled),
button.rail-act:not(.rail-badge):hover:not(:disabled),
.survey-actions button:not(.rail-badge):hover:not(:disabled),
#homeRecordBtn:not(.rail-badge):hover:not(:disabled) {
  color:#fff;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#F26C56 0%,#DD4730 46%,#B8321F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 4px 8px rgba(178,47,29,.38),
    0 18px 34px rgba(178,47,29,.30);
}

button:not(:disabled),
.rail-badge,
#homeTemplateBadge,
.tg-head,
#fileDropzone,
.file-card,
.section-icon,
.caseload-link-btn,
.student-select-option,
.al-flow button,
.app-banner-settings {
  cursor: pointer;
}

.house-btn:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.merge-btn:hover:not(:disabled),
.compose-btn:hover:not(:disabled),
.extractor-btn:hover:not(:disabled),
.rail-act:hover:not(:disabled),
.rail-connect-btn:hover:not(:disabled),
.extract-all-btn:hover:not(:disabled),
.survey-actions button:hover:not(:disabled),
#homeRecordBtn:hover:not(:disabled),
#pickCaseloadBtn:hover:not(:disabled),
#pickTemplateBtn:hover:not(:disabled),
#createCaseloadBtn:hover:not(:disabled),
#createTemplateBtn:hover:not(:disabled),
#useCaseloadDriveBtn:hover:not(:disabled),
#useTemplateDriveBtn:hover:not(:disabled),
#fillTablesBtn:hover:not(:disabled),
#extractPrevBtn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.house-btn:active:not(:disabled),
.primary-btn:active:not(:disabled),
.merge-btn:active:not(:disabled),
.compose-btn:active:not(:disabled),
.extractor-btn:active:not(:disabled),
.rail-act:active:not(:disabled),
.survey-actions button:active:not(:disabled),
#homeRecordBtn:active:not(:disabled) {
  transform: translateY(1px) scale(.98);
}

.rail-badge:hover,
#homeTemplateBadge:hover,
.caseload-link-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.rail-badge:active,
#homeTemplateBadge:active,
.caseload-link-btn:active {
  transform: translateY(1px) scale(.98);
}

.tg-head:hover {
  background: color-mix(in srgb, var(--al-red-tint) 70%, #fff);
  border-color: color-mix(in srgb, var(--al-red) 28%, var(--al-line-soft));
}
.tests-given-group.is-open > .tg-head:hover {
  background: var(--al-red-tint);
}

button[data-done="1"],
button.al-ran,
#homeDetagBtn.is-built,
button.house-btn.is-built,
.primary-btn.is-built,
.merge-btn.is-built,
.compose-btn.is-built,
.compose-btn.is-received,
.extractor-btn[data-done="1"],
.extract-all-btn[data-done="1"] {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #5B86D6 0%, #2F62B5 48%, #254F93 100%) !important;
  background-color: var(--al-done) !important;
  border-color: var(--al-done-deep) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(20, 40, 90, .45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.20),
    0 3px 6px rgba(47,98,181,.34),
    0 12px 26px rgba(47,98,181,.26);
}
button[data-done="1"]:hover:not(:disabled),
button.al-ran:hover:not(:disabled),
.house-btn.is-built:hover:not(:disabled),
.primary-btn.is-built:hover:not(:disabled),
.merge-btn.is-built:hover:not(:disabled),
.compose-btn.is-built:hover:not(:disabled),
.extractor-btn[data-done="1"]:hover:not(:disabled) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #6B94DE 0%, #3A70C4 48%, #2F62B5 100%) !important;
  border-color: var(--al-done-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

#createReportBtn.is-built:disabled,
#homeDetagBtn.is-built:disabled,
button.house-btn.is-built:disabled,
.primary-btn.is-built:disabled,
.merge-btn.is-built:disabled,
button.al-ran:disabled[data-done="1"] {
  opacity: 1;
  filter: none;
  cursor: not-allowed;
}

.al-flow button.done {
  color: var(--al-done-deep);
  background: var(--al-done-tint);
  border-color: transparent;
}
.al-flow button.done .n { background: var(--al-done); color: #fff; }
.al-flow .sep.done { background: var(--al-done); }

#dialGradOk stop { stop-color: #2F62B5; }
#dialGradOk stop:last-child { stop-color: #5B86D6; }

#homeFinishPanel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
.finish-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.finish-steps > .panel {
  margin: 0;
  border-radius: 12px;
}
#homeSignPanel .action-row {
  margin: 0;
  gap: 8px;
}
#homeSignPanel #signDocUrl {
  width: 100%;
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
}

.uploads-panel .extractor-row,
.uploads-panel .extract-all-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.uploads-panel .extractor-row > .extractor-btn,
.uploads-panel .extract-all-row > button,
#fillTablesBtn,
#extractPrevBtn {
  width: 100%;
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.survey-actions button,
#homeRecordBtn,
#homeAdaptiveBtn,
#homeTestingObsBtn,
.rail-act {
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
}

.board-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.board-tools > .panel {
  margin: 0;
}

.home-merge-dock {
  margin-top: auto;
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
#mergeBtn {
  width: 100%;
}

#fileDropzone.is-empty .dropzone-target {
  min-height: 72px;
  display: grid;
  place-items: center;
}
#fileDropzone.is-empty .dropzone-target::after {
  content: "Add files";
  font: 700 13px/1 var(--al-head);
  color: var(--al-muted);
  letter-spacing: .04em;
}
#fileDropzone:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  button, .rail-badge, #homeTemplateBadge, .tg-head, #fileDropzone, .caseload-link-btn {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  button:hover:not(:disabled),
  button:active:not(:disabled),
  .rail-badge:hover,
  .rail-badge:active {
    transform: none !important;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 0px) {
  button[data-done="1"],
  button.al-ran,
  #homeDetagBtn.is-built,
  button.house-btn.is-built,
  .primary-btn.is-built,
  .merge-btn.is-built,
  .compose-btn.is-built {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(180deg, #3A62B0 0%, #2F62B5 48%, #1E3F7A 100%) !important;
    border-color: #6B93D6 !important;
  }
  .tg-head:hover {
    background: #2A2936;
    border-color: var(--al-edge);
  }
}

/* ============================================================
   Designer pass — Kevin 2026-09-19 visual look
   No leftover ticks. One face (Montserrat). Title Case. Disabled =
   gray sunken; enabled = raised vermillion; success = cobalt #2F62B5.
   Last-wins. prefers-reduced-motion still respected above.
   ============================================================ */
:root {
  --al-blocked: #B4B4BC;
  --al-blocked-deep: #9A9AA3;
  --al-blocked-ink: #3F3F46;
  --al-blocked-line: #8A8A93;
}

#home-view, #writer-view, #license-view, #splash-view,
#home-view button, #writer-view button, #license-view button,
#home-view h2, #home-view h3, #home-view h4, #home-view label,
#writer-view h2, #writer-view h3, #writer-view label,
.house-btn, .primary-btn, .merge-btn, .compose-btn, .extractor-btn,
.rail-act, .survey-actions button, .al-flow button,
.student-select-option, .student-select-btn, #bannerName,
.app-banner-identity, .tg-name, .tests-given-group h4,
.panel, .rail-panel, .ready-pane, .license-card {
  font-family: var(--al-head) !important;
}

.app-banner-sid, #bannerSid, .sid-chip {
  font-family: var(--al-mono);
}

#home-view button, #writer-view button, #license-view button,
.house-btn, .primary-btn, .merge-btn, .compose-btn, .extractor-btn,
.rail-act, .rail-connect-btn, .survey-actions button {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.app-banner-product, .license-product, .al-flow button,
.section-title-row h3, .panel h3, .ready-pane h2 {
  text-transform: none;
  letter-spacing: 0;
  font-variant: normal;
}

/* Wordmark only — AUTOMATA stays a logo, not a random ALL CAPS label. */
.app-banner-name, .license-name {
  font-family: var(--al-head);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#home-view, #writer-view, #license-view,
#home-view .panel, #home-view label, #home-view h3,
#writer-view .panel, #writer-view label,
.tg-name, .student-select-option, .license-card, .license-lead,
.license-card h1, #licenseEmail {
  color: var(--al-ink);
}

/* Success is cobalt on the button. Never a ✓ / white glyph. */
button[data-done="1"]::after,
button.al-ran::before,
button.al-ran::after,
button.al-ran[data-done="1"]::after,
.primary-btn:disabled::before,
.merge-btn:disabled::before,
.compose-btn:disabled::before,
.rail-connect-btn:disabled::before,
.extractor-btn:disabled::before,
.house-btn:disabled::before,
.section.is-filled > label::after,
.toast.ok::before,
#home-view .tick::after,
#writer-view .tick::after,
.student-select-option::after,
.student-select-tools button::after,
.ready-item .tick::after,
.check-row::after,
#home-view [aria-hidden="true"].check,
#home-view .check::after {
  content: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

#home-view .tick,
#home-view .ready-item .tick,
#requiredUploads .tick,
#requiredTagsPanel .tick {
  display: none !important;
}

/* Blocked: gray, already pressed, readable dark type. Not opacity. */
button:disabled,
button[disabled],
button[aria-disabled="true"],
.is-blocked,
#home-view[data-home-stage="caseload"] .board button,
#home-view[data-home-stage="caseload"] .ready-pane button,
#home-view[data-home-stage="template"] .board button,
#home-view[data-home-stage="template"] .ready-pane button {
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed !important;
  color: var(--al-blocked-ink) !important;
  text-shadow: none !important;
  background-color: var(--al-blocked) !important;
  background-image:
    linear-gradient(180deg, #A8A8B0 0%, var(--al-blocked) 40%, var(--al-blocked-deep) 100%) !important;
  border-color: var(--al-blocked-line) !important;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  transform: translateY(2px) scale(.99);
}

button:disabled:hover,
button[disabled]:hover,
button[aria-disabled="true"]:hover,
#home-view[data-home-stage="caseload"] .board button:hover,
#home-view[data-home-stage="caseload"] .ready-pane button:hover,
#home-view[data-home-stage="template"] .board button:hover,
#home-view[data-home-stage="template"] .ready-pane button:hover {
  transform: translateY(2px) scale(.99);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  color: var(--al-blocked-ink) !important;
}

/* Enabled pops up: vermillion rest. Success cobalt only while still enabled. */
button[data-done="1"]:not(:disabled),
button.al-ran:not(:disabled),
#homeDetagBtn.is-built:not(:disabled),
button.house-btn.is-built:not(:disabled),
.primary-btn.is-built:not(:disabled),
.merge-btn.is-built:not(:disabled),
.compose-btn.is-built:not(:disabled),
.compose-btn.is-received:not(:disabled),
.extractor-btn[data-done="1"]:not(:disabled),
.extract-all-btn[data-done="1"]:not(:disabled) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #5B86D6 0%, #2F62B5 48%, #254F93 100%) !important;
  background-color: var(--al-done) !important;
  border-color: var(--al-done-deep) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(20, 40, 90, .45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.20),
    0 3px 6px rgba(47,98,181,.34),
    0 12px 26px rgba(47,98,181,.26);
  transform: none;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  button:disabled,
  button[disabled],
  button[aria-disabled="true"],
  #home-view[data-home-stage="caseload"] .board button,
  #home-view[data-home-stage="caseload"] .ready-pane button,
  #home-view[data-home-stage="template"] .board button,
  #home-view[data-home-stage="template"] .ready-pane button {
    transform: none !important;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 0px) {
  :root {
    --al-blocked: #3A3944;
    --al-blocked-deep: #2C2B34;
    --al-blocked-ink: #D4D0DC;
    --al-blocked-line: #5A5866;
  }
  button:disabled,
  button[disabled],
  button[aria-disabled="true"],
  #home-view[data-home-stage="caseload"] .board button,
  #home-view[data-home-stage="caseload"] .ready-pane button,
  #home-view[data-home-stage="template"] .board button,
  #home-view[data-home-stage="template"] .ready-pane button {
    color: var(--al-blocked-ink) !important;
    background-image:
      linear-gradient(180deg, #444350 0%, var(--al-blocked) 42%, var(--al-blocked-deep) 100%) !important;
  }
}

/* ============================================================
   Web / cloud home — Kevin 2026-09-19 08:38
   Bottom-right is MERGE only. One face. Title Case. Success
   cobalt stays cobalt after Build disables. Last-wins.
   ============================================================ */

/* MERGE stays. Everything else that used to live in that corner is gone. */
#home-view .ready-pane > #setupGroup,
#home-view .ready-pane > #readyEmpty,
#home-view #checklistHover,
#home-view #checklistToggle,
#home-view #fullChecklist,
#home-view #readyBar,
#home-view #readyCount,
#home-view #sheetSections,
#home-view #mergeDocBar,
#home-view #mergeDocEmpty,
#home-view #mergeDocLink,
#home-view #copyMergeDocBtn,
#home-view #reportExportRow,
#home-view #reportExportStatus,
#home-view #reportSaveBtn,
#home-view #reportExportFormat,
#home-view #microsoftBox,
#home-view #microsoftCodeRow,
#home-view #microsoftSignInBtn,
#home-view #microsoftSignOutBtn,
#home-view #saveMicrosoftAppIdBtn,
#home-view #microsoftAppId,
#home-view #microsoftStatus,
#home-view #microsoftCode,
#home-view #microsoftCodeLink,
#homeMergeDock > *:not(#mergeBtn) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#homeMergeDock {
  margin-top: auto;
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
#homeMergeDock #mergeBtn {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto;
  width: 100%;
}
#home-view .template-status,
#home-view #caseloadSheetStatus,
#home-view #templateStatus,
#home-view #caseloadSheetStatus.hidden,
#home-view .template-status.error {
  display: none !important;
}

/* One font. Badge words and leftover ALL CAPS labels read as Title Case. */
#splash-view, #license-view, #home-view, #writer-view,
#splash-view *, #license-view *, #home-view *, #writer-view * {
  font-family: var(--al-head) !important;
}
.splash-tagline, .splash-foot, .splash-hint,
.app-banner-product, .license-product,
.rail-badge-word, .student-select-option,
#composeNarrativesBtn, #homeCaseloadLinkWord, #homeTemplateBadgeWord,
#homeMergeDock #mergeBtn, #homeDetagBtn {
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
#homeMergeDock #mergeBtn,
#homeDetagBtn {
  text-transform: none !important;
}
.splash-name, .app-banner-name, .license-name {
  text-transform: uppercase;
}

/* Success stays cobalt even when the button is then locked (Build). */
#homeDetagBtn.is-built:disabled,
#createReportBtn.is-built:disabled,
button.house-btn.is-built:disabled,
.primary-btn.is-built:disabled,
.merge-btn.is-built:disabled,
button[data-done="1"]:disabled,
button.al-ran:disabled,
button.al-ran:disabled[data-done="1"] {
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(20, 40, 90, .45) !important;
  background-color: var(--al-done) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #5B86D6 0%, #2F62B5 48%, #254F93 100%) !important;
  border-color: var(--al-done-deep) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.20),
    0 3px 6px rgba(47,98,181,.34),
    0 12px 26px rgba(47,98,181,.26) !important;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #homeDetagBtn.is-built:disabled,
  button[data-done="1"]:disabled,
  button.al-ran:disabled {
    transform: none !important;
  }
}

/* ============================================================
   KEVIN 2026-09-19 — HOME SCREEN POLISH (write-back testing chat)
   "the student picker opens behind another window … I want the
   bottom right shit removed and merge moved to the bottom right."
   Appended last so it wins. Nothing here touches a button's ::before
   or ::after (progress line / done tick / ran mark live there).
   ============================================================ */

/* 1 · The student list sits ABOVE the cards below it. The Caseload card is
   position:relative with z-index 1, which trapped its own dropdown under the
   Template card that follows it. The card that owns the list now stacks
   highest in the rail, and the list itself sits above everything in the card. */
.picker #homeCaseloadPanel,
.picker .rail-panel:has(.student-select-menu:not(.hidden)) { z-index: 45; }
.student-select-menu { z-index: 80; }
.student-select-menu:not(.hidden) {
  box-shadow: 0 2px 4px rgba(28,44,90,.10), 0 18px 40px rgba(28,44,90,.22);
  border: 1px solid rgba(64,88,150,.26);
  border-radius: 14px;
}

/* 2 · Bottom right is the Merge button and nothing else. The Data Scraper and
   Contact buttons stay in the page for the code that knows them, but they no
   longer take the corner. */
.app-footer .data-scraper-footer-actions { display: none !important; }
#homeMergeDock {
  position: fixed;
  right: 22px;
  bottom: 12px;
  z-index: 70;                 /* above the sticky footer (60) */
  margin: 0;
  padding: 0;
  width: auto;
  min-width: 232px;
  align-items: stretch;
  gap: 6px;
  pointer-events: none;        /* the dock is a frame; only its children take clicks */
}
#homeMergeDock > * { pointer-events: auto; }
#homeMergeDock #mergeBtn {
  width: 100%;
  min-height: 46px;
  font-size: 15px;
  letter-spacing: .01em;
}
#homeMergeDock #mergeStatus {
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--al-surface) 92%, transparent);
  border: 1px solid var(--al-line);
  font-size: 12px;
  text-align: right;
}
/* the footer keeps its copyright centred now that the right cell is empty */
.app-footer { grid-template-columns: auto 1fr auto; }
.app-footer .app-footer-copy { justify-self: center; }

/* 3 · The empty board's blank white square is the AUTOMATA mark — Kevin's own
   glossy red A, untouched, on a soft glass tile. */
.empty-board .empty-mark {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: url("assets/automata-app-icon.png") center / 78% no-repeat,
              linear-gradient(180deg, #FFFFFF 0%, #F3F6FD 100%);
  border: 1px solid rgba(64,88,150,.20);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(64,88,150,.10),
              0 2px 3px rgba(28,44,90,.10), 0 14px 30px rgba(28,44,90,.16);
}
.empty-board h2 { letter-spacing: -.01em; }

/* 4 · All twelve steps fit on one line at a normal window width. The
   connectors give way first, then the chip padding; the strip still scrolls
   on a narrow window instead of cutting a step in half. */
.al-flow { gap: 4px; padding: 7px 14px; justify-content: center; }
.al-flow button { padding: 5px 9px 5px 5px; gap: 5px; font-size: 11.5px; }
.al-flow .n { width: 19px; height: 19px; font-size: 10.5px; }
.al-flow .sep { flex: 0 1 12px; min-width: 4px; }
@media (max-width: 1360px) {
  .al-flow { justify-content: flex-start; }
  .al-flow button { font-size: 11px; padding: 4px 8px 4px 4px; }
}

@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .student-select-menu:not(.hidden) { border-color: var(--al-line); box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.55); }
  .empty-board .empty-mark {
    background: url("assets/automata-app-icon.png") center / 78% no-repeat,
                linear-gradient(180deg, #2A2833 0%, #1C1B23 100%);
    border-color: var(--al-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.45);
  }
}

/* ============================================================
   KEVIN 2026-09-19 — RIGHT RAIL IS THE JOURNEY (write-back testing chat)
   "move the merge button out of the footer. make it larger and more
   prominent - its the destination. Put the progress bar upper right
   even at 0 or 5%. add all the sections to the checklist"
   + "change CHOOSE FROM GOOGLE DRIVE to SELECT TEMPLATE or SELECT
   CASELOAD. the titles should be the actual filename. once there is a
   caseload uploaded (or a single student), THEN activate the student
   picker"
   Appended last so it wins. Nothing here touches a button's ::before
   or ::after (progress line / done tick / ran mark live there).
   ============================================================ */

/* 0 · The rail is one column: progress on top, checklist filling the middle
   and scrolling on its own, Merge pinned at the foot of the rail. */
#home-view .ready-pane {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  padding: 14px 14px 14px;
  overflow: hidden !important;
  min-height: 0;
}
#home-view .ready-pane > #readyPanel { flex: 0 0 auto; }
#home-view .ready-pane > #readyEmpty { display: none !important; }
#home-view #readyPanel .dial-wrap { display: none !important; }

/* 1 · PROGRESS — upper right, from the first second, even at 0%. */
#home-view #railProgress {
  display: block !important;
  flex: 0 0 auto;
  padding: 12px 14px 11px;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FD 100%);
  border: 1px solid rgba(64,88,150,.20);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(64,88,150,.08),
              0 2px 3px rgba(28,44,90,.08), 0 10px 22px rgba(28,44,90,.10);
}
#home-view #railProgress .progress-head,
#home-view #railProgress .progress-track {
  display: flex !important;
  visibility: visible !important;
}
#home-view #railProgress .progress-head {
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
#home-view #railProgress .progress-label {
  font: 700 11px/1 var(--al-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--al-muted);
}
#home-view #railProgress .progress-pct {
  font: 800 30px/1 var(--al-head);
  letter-spacing: -.02em;
  color: var(--al-ink);
  font-variant-numeric: tabular-nums;
}
#home-view #railProgress .progress-pct i {
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  color: var(--al-muted);
  margin-left: 1px;
}
#home-view #railProgress .progress-pct.complete { color: #1f7a4d; }
#home-view #railProgress .progress-track {
  display: block !important;
  height: 12px;
  margin: 0;
  border-radius: 99px;
  background: #E1E7F3;
  box-shadow: inset 0 1px 2px rgba(28,44,90,.18);
  overflow: hidden;
}
#home-view #railProgress .progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background-color: var(--al-red);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, #E8664F 0%, #D9412C 100%);
  box-shadow: 0 0 0 0 rgba(217,65,44,0);
  transition: width 700ms cubic-bezier(.2,.8,.2,1), box-shadow 400ms ease;
}
#home-view #railProgress .progress-fill.complete {
  background-color: #1f7a4d;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, #2f9e69 0%, #1f7a4d 100%);
}
#home-view #railProgress #readyPercent {
  margin: 7px 0 0;
  min-height: 0;
  font: 600 11.5px/1.3 var(--al-head);
  color: var(--al-muted);
  font-variant-numeric: tabular-nums;
}
#home-view #railProgress.is-blank .progress-pct { color: var(--al-muted); }

/* Run AUTOMATA sits right under the bar when a student is open. */
#home-view .ready-pane #readyPanel { margin-top: 12px; }
#home-view .ready-pane #readyPanel .run-automata-btn { margin: 0; }

/* 2 · CHECKLIST — every section, always on screen, scrolls on its own. */
#home-view #railChecklist {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 12px;
}
#home-view #checklistHover,
#home-view #fullChecklist {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1;
}
#home-view #checklistToggle { display: none !important; }
#home-view #railChecklist .rail-checklist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 6px;
}
#home-view #railChecklist h3 {
  margin: 0;
  font: 700 11px/1 var(--al-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--al-muted);
}
#home-view #railChecklistCount {
  font: 700 11px/1 var(--al-head);
  color: var(--al-muted);
  font-variant-numeric: tabular-nums;
}
#home-view #checklistHover {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px 8px 4px;
  border-radius: 12px;
  border: 1px solid rgba(64,88,150,.16);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FE 100%);
  box-shadow: inset 0 1px 0 #fff;
  scrollbar-width: thin;
}
#home-view #fullChecklist { margin: 0; animation: none; }
#home-view #fullChecklist h4 {
  margin: 12px 6px 2px;
  font: 700 10.5px/1.2 var(--al-head);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--al-ink);
}
#home-view #fullChecklist > h4:first-of-type { margin-top: 4px; }
#home-view #fullChecklist h4.is-complete { color: #1f7a4d; }
#home-view #fullChecklist .section-meter { margin: 2px 6px 6px; }
#home-view #fullChecklist .checklist-summary { display: none !important; }
#home-view #fullChecklist .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 6px;
  border-radius: 8px;
  font: 500 12.5px/1.3 var(--al-head);
  color: var(--al-ink);
  cursor: default;
}
#home-view #fullChecklist label.check-row { cursor: pointer; }
#home-view #fullChecklist .check-row.is-done { color: var(--al-muted); }
#home-view #fullChecklist .check-row:hover { background: rgba(64,88,150,.06); transform: none; }
#home-view #fullChecklist .check-row > span:last-child { min-width: 0; }
#home-view #fullChecklist .tick {
  display: inline-block !important;   /* the older home rule hides every .tick */
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(64,88,150,.38);
  background: #fff;
  box-shadow: inset 0 1px 1px rgba(28,44,90,.10);
}
#home-view #fullChecklist .tick.done {
  background: #1f7a4d;
  border-color: #1f7a4d;
  box-shadow: inset 0 0 0 2.5px #fff;
}
#home-view #fullChecklist input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #1f7a4d;
}
#home-view #fullChecklist.is-blank { opacity: .55; }
#home-view #fullChecklist.is-blank input { pointer-events: none; }
#home-view #fullChecklist.is-blank .check-row:hover { background: transparent; }

/* 3 · MERGE — out of the footer, the destination at the foot of the rail. */
#home-view #homeMergeDock {
  position: static !important;
  right: auto;
  bottom: auto;
  z-index: auto;
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(64,88,150,.14);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
#home-view #homeMergeDock > .merge-eyebrow {
  display: block !important;
  visibility: visible !important;
  margin: 0 0 7px;
  text-align: center;
  font: 700 10.5px/1 var(--al-head);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--al-muted);
}
#home-view #homeMergeDock #mergeBtn,
#home-view .ready-pane .merge-btn,
#home-view button.merge-btn {
  width: 100%;
  min-height: 78px !important;
  height: auto !important;
  padding: 14px 18px;
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  border-radius: 18px !important;
}
#home-view #homeMergeDock #mergeBtn.is-ready:not(:disabled):not(.is-built) {
  animation: mergeBeckon 2.4s ease-in-out infinite;
}
@keyframes mergeBeckon {
  0%, 100% { box-shadow: 0 0 0 4px rgba(47,125,85,.14), 0 8px 22px rgba(217,65,44,.28); }
  50%      { box-shadow: 0 0 0 10px rgba(47,125,85,.06), 0 14px 32px rgba(217,65,44,.42); }
}
#home-view #homeMergeDock #mergeStatus { display: none !important; }
/* the footer keeps its copyright centred now that Merge has left it */
.app-footer { grid-template-columns: auto 1fr auto; }
.app-footer .app-footer-copy { justify-self: center; }

/* 4 · LEFT RAIL — titles are the file names; the student picker waits for a
   caseload (or one student on this computer). */
#home-view #homeCaseloadTitle.is-filename,
#home-view #homeTemplateTitle.is-filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
#home-view .picker .student-picker {
  transition: opacity 260ms ease, filter 260ms ease;
}
#home-view .picker .student-picker.is-locked {
  opacity: .42;
  filter: grayscale(.35);
  pointer-events: none;
  user-select: none;
}
#home-view .picker .student-picker.is-locked .student-select-field { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  #home-view #homeMergeDock #mergeBtn.is-ready:not(:disabled):not(.is-built) { animation: none; }
  #home-view #railProgress .progress-fill { transition: none; }
}

@media (prefers-color-scheme: dark) and (max-width: 0px) {
  #home-view #railProgress {
    background: linear-gradient(180deg, #2A2833 0%, #1C1B23 100%);
    border-color: var(--al-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.40);
  }
  #home-view #railProgress .progress-track { background: #2E2D38; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
  #home-view #checklistHover {
    background: linear-gradient(180deg, #24232C 0%, #1C1B23 100%);
    border-color: var(--al-line);
    box-shadow: none;
  }
  #home-view #fullChecklist .tick { background: #1C1B23; border-color: rgba(255,255,255,.28); box-shadow: none; }
  #home-view #fullChecklist .tick.done { box-shadow: inset 0 0 0 2.5px #1C1B23; }
  #home-view #fullChecklist .check-row:hover { background: rgba(255,255,255,.06); }
  #home-view #homeMergeDock { border-top-color: var(--al-line); }
}

/* ============================================================
   KEVIN 2026-09-19 — STATUS WINDOW under Student Demographics
   "CREATE A STATUS WINDOW UNDER THE STUDENT DEMOGRAPHICS THAT SHOWS
   WHATS GOING ON and thats where the progress bars can run."
   Appended last so it wins. No button ::before/::after here.
   ============================================================ */
#home-view #homeStatusWindow {
  display: block;
  padding: 12px 14px 10px;
}
#home-view #homeStatusWindow .status-window-head {
  display: flex !important;   /* the older rule hides card titles that repeat a button */
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
#home-view #homeStatusWindow .status-window-head h3 { margin: 0; flex: 0 0 auto; }
#home-view .status-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: #B4B4BC;
  box-shadow: 0 0 0 0 rgba(217,65,44,0);
  flex: 0 0 auto;
}
#home-view .status-pulse.is-on {
  background: var(--al-red);
}
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(217,65,44,.45); }
  100% { box-shadow: 0 0 0 9px rgba(217,65,44,0); }
}
#home-view .status-now {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 12.5px/1.3 var(--al-head);
  color: var(--al-muted);
  text-align: right;
}
#home-view .status-now.ok { color: #1f7a4d; }
#home-view .status-now.error { color: var(--al-red-deep, #B9321F); }
#home-view .status-now.warn { color: #9a6200; }

/* running jobs: one thin bar per job */
#home-view .status-jobs { display: flex; flex-direction: column; gap: 6px; }
#home-view .status-jobs:empty { display: none; }
#home-view .status-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: baseline;
  padding: 7px 10px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FD 100%);
  border: 1px solid rgba(64,88,150,.18);
  transition: opacity 320ms ease, transform 320ms ease;
}
#home-view .status-job.is-gone { opacity: 0; transform: translateY(-4px); }
#home-view .status-job-label { font: 700 12px/1.3 var(--al-head); color: var(--al-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#home-view .status-job-pct { font: 700 11px/1 var(--al-head); color: var(--al-muted); font-variant-numeric: tabular-nums; }
#home-view .status-job-track { grid-column: 1 / -1; display: block; height: 7px; border-radius: 99px; background: #E1E7F3; box-shadow: inset 0 1px 2px rgba(28,44,90,.18); overflow: hidden; }
#home-view .status-job-fill {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background-image: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 55%), linear-gradient(90deg, #E8664F 0%, #D9412C 100%);
  transition: width 260ms ease;
}
#home-view .status-job.is-done .status-job-fill { background-image: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 55%), linear-gradient(90deg, #2f9e69 0%, #1f7a4d 100%); }
#home-view .status-job.is-done .status-job-pct { color: #1f7a4d; }
#home-view .status-job.is-failed .status-job-fill { background-image: linear-gradient(90deg, #B9321F, #8E2416); }
#home-view .status-job.is-failed .status-job-pct { color: var(--al-red-deep, #B9321F); }

/* the feed: newest first, time on the left */
#home-view .status-feed {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 176px;
  overflow-y: auto;
  scrollbar-width: thin;
  border-top: 1px solid rgba(64,88,150,.12);
}
#home-view .status-feed:empty { display: none; }
#home-view .status-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 4px;
  font: 500 12px/1.35 var(--al-head);
  color: var(--al-ink);
  border-bottom: 1px solid rgba(64,88,150,.07);
}
#home-view .status-item.is-new { animation: statusIn 360ms ease-out both; }
@keyframes statusIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#home-view .status-item .status-time { color: var(--al-muted); font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap; }
#home-view .status-item .status-text { overflow-wrap: anywhere; }
#home-view .status-item.ok .status-text { color: #1f7a4d; }
#home-view .status-item.error .status-text { color: var(--al-red-deep, #B9321F); font-weight: 600; }
#home-view .status-item.warn .status-text { color: #9a6200; }

/* the big overlay runs, drawn inside the window instead of over the screen */
#home-view #homeStatusJobs > dialog#automataMergeOverlay.am-inline {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(64,88,150,.18);
  border-radius: 12px;
  box-shadow: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FD 100%);
  overflow: hidden;
  font-family: var(--al-head);
}
#home-view #homeStatusJobs > dialog#automataMergeOverlay.am-inline:not([open]) { display: none; }
#home-view dialog#automataMergeOverlay.am-inline header { padding: 10px 12px 8px; gap: 10px; }
#home-view dialog#automataMergeOverlay.am-inline header h2 { font-size: 13.5px; margin: 0; }
#home-view dialog#automataMergeOverlay.am-inline header p { margin: 2px 0 0; font-size: 11.5px; }
#home-view dialog#automataMergeOverlay.am-inline .am-eyebrow { font-size: 10px; letter-spacing: .12em; }
#home-view dialog#automataMergeOverlay.am-inline .am-overview { padding: 8px 12px 6px; }
#home-view dialog#automataMergeOverlay.am-inline .am-overview strong { font-size: 15px; }
#home-view dialog#automataMergeOverlay.am-inline #automataMergeStages { padding: 0 8px 4px; max-height: 220px; overflow-y: auto; }
#home-view dialog#automataMergeOverlay.am-inline #automataMergeMessage { margin: 0; padding: 4px 12px 8px; font-size: 11.5px; }
#home-view dialog#automataMergeOverlay.am-inline footer { padding: 6px 12px 10px; font-size: 10.5px; }

@media (prefers-color-scheme: dark) and (max-width: 0px) {
  #home-view .status-job,
  #home-view #homeStatusJobs > dialog#automataMergeOverlay.am-inline {
    background: linear-gradient(180deg, #2A2833 0%, #1C1B23 100%);
    border-color: var(--al-line);
  }
  #home-view .status-job-track { background: #2E2D38; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
  #home-view .status-feed { border-top-color: var(--al-line); }
  #home-view .status-item { border-bottom-color: rgba(255,255,255,.06); }
}

/* ============================================================
   KEVIN 2026-09-19 — LEFT RAIL SEQUENCE + THE BOARD OPENS AFTER CREATE TEMPLATE
   "After create template runs, and the students row is extracted, then the
   middle panel opens with all the individual pipeline steps."
   Appended last so it wins. No button ::before/::after here.
   ============================================================ */
/* Until the template exists and the row is in, the board is demographics
   and the Activity window only. */
#home-view[data-board="closed"] #activeBoard > .panel:not(#studentInfo):not(#homeStatusWindow),
#home-view[data-board="closed"] #activeBoard > section:not(#studentInfo):not(#homeStatusWindow),
#home-view[data-board="closed"] #activeBoard > div:not(#deleteConfirm):not(.panel) {
  display: none !important;
}
#home-view[data-board="closed"] #homeStatusWindow::after {
  content: "Create Template opens the rest of the steps here.";
  display: block;
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(47, 98, 181, .08);
  border: 1px dashed rgba(47, 98, 181, .35);
  font: 600 12px/1.35 var(--al-head);
  color: #254F93;
}
/* The two Select buttons and Create Template light blue on their own once
   their piece is in place — the same blue every finished button wears. */
#home-view #pickCaseloadBtn.is-built:not(:disabled),
#home-view #pickTemplateBtn.is-built:not(:disabled) {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(20, 40, 90, .45) !important;
  background-color: var(--al-done) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #5B86D6 0%, #2F62B5 48%, #254F93 100%) !important;
  border-color: var(--al-done-deep) !important;
  cursor: pointer !important;
}
#home-view #pickCaseloadBtn.is-built:not(:disabled):hover,
#home-view #pickTemplateBtn.is-built:not(:disabled):hover {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #6B94E0 0%, #3A6FC4 48%, #2C5AA5 100%) !important;
}

/* ============================================================
   KEVIN 2026-09-19 — SURVEY ROSTERS, MINIMALIST
   "MINIMALIST - DATE SENT, DATE RECEIVED in m/d/yy"
   One row per person: name · sent · received. Yellow while waiting,
   green once it is in (same tints as before). Appended last so it wins.
   ============================================================ */
#home-view .teacher-roster { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
#home-view .teacher-roster:empty { display: none; }
#home-view .teacher-roster .teacher-head,
#home-view .teacher-roster .teacher-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 78px;
  gap: 8px;
  align-items: center;
}
#home-view .teacher-roster .teacher-head {
  padding: 0 10px 2px;
  font: 700 10px/1 var(--al-head);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--al-muted);
}
#home-view .teacher-roster .teacher-head span:not(:first-child) { text-align: center; }
#home-view .teacher-roster .teacher-row {
  margin: 0;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(64,88,150,.14);
  background: #fff;
  cursor: default;
}
#home-view .teacher-roster .teacher-row .teacher-name {
  font: 600 12.5px/1.3 var(--al-head);
  color: var(--al-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#home-view .teacher-roster .teacher-row .teacher-dates { display: contents; }
#home-view .teacher-roster .teacher-row .teacher-dates span {
  display: block;
  margin: 0;
  padding: 2px 0;
  text-align: center;
  font: 600 12px/1.3 var(--al-head);
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  background: transparent;
  color: var(--al-ink);
}
#home-view .teacher-roster .teacher-row .teacher-dates .is-empty { color: var(--al-muted); font-weight: 500; }
#home-view .teacher-roster .teacher-row.is-pending { background: #FFF4C2; border-color: #E9CF6A; }
#home-view .teacher-roster .teacher-row.is-pending .teacher-name,
#home-view .teacher-roster .teacher-row.is-pending .sd-sent { color: #7A5A00; }
#home-view .teacher-roster .teacher-row.is-received { background: var(--al-ok-tint, #E3F4E8); border-color: #B9E0C6; }
#home-view .teacher-roster .teacher-row.is-received .teacher-name,
#home-view .teacher-roster .teacher-row.is-received .sd-got { color: #1E7B3C; }
#home-view #teacherSurveyLegend { display: none !important; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  #home-view .teacher-roster .teacher-row { background: #24232C; border-color: var(--al-line); }
  #home-view .teacher-roster .teacher-row.is-pending { background: #3A3320; border-color: #6B5A1E; }
  #home-view .teacher-roster .teacher-row.is-received { background: #1E2F26; border-color: #2E5A3E; }
}

/* Kevin, 2026-09-19: the file name lives in the panel title now — the badge
   does not repeat it. */
#home-view #homeCaseloadBadgeTitle.is-echo,
#home-view #homeTemplateBadgeTitle.is-echo { display: none !important; }

/* Kevin, 2026-09-19: the Drive fix button on the Google gate. */
#license-view #licenseDriveFixBtn {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 10px auto 0; min-height: 40px; padding: 0 18px; border-radius: 10px;
  font: 700 13px/1 var(--al-head); color: #254F93;
  background: rgba(47,98,181,.10); border: 1px solid rgba(47,98,181,.35); cursor: pointer;
}
#license-view #licenseDriveFixBtn.hidden { display: none !important; }
#license-view #licenseDriveFixBtn:hover { background: rgba(47,98,181,.18); }
#license-view .license-drive-hint { margin: 12px auto 0; max-width: 520px; font: 500 13px/1.5 var(--al-head); color: var(--al-ink); }

/* Kevin, 2026-09-19: the sign-in chip in the banner (automata-look.js). */
.al-account{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--al-line);border-radius:8px;background:#fff;color:var(--al-ink);font:600 12.5px/1 var(--al-head);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .12s}
.al-account:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(43,40,44,.12)}
.al-account:focus-visible{outline:2px solid var(--al-red);outline-offset:2px}
.al-account .al-account-dot{width:9px;height:9px;border-radius:50%;background:var(--al-muted,#6F6870);flex:none}
.al-account.is-on{background:#E6F3EC;border-color:#2F7D55;color:#2F7D55;cursor:default}
.al-account.is-on .al-account-dot{background:#2F7D55}
.al-account.is-on:hover{transform:none;box-shadow:none}
.al-account.is-off{background:#FBF0DF;border-color:#A8620F;color:#A8620F}
.al-account.is-off .al-account-dot{background:#A8620F}
.al-account.is-off:hover{background:#F6E3C3}


/* Kevin, 2026-09-19 (screenshot of the Assessment Battery: "DONT EVER SHIP
   SHIT LIKE THIS"): the night wash left the domain bars light but painted
   their names light too, the empty count circles went dark, and Manual
   Entry sat on top of the two-line title. The bars are light, so their words
   are dark whatever the page wears; an empty count shows nothing; Manual Entry
   is its own full-width row under the title, the house helper size. */
#testsGivenPicker > .section-title-row { flex-wrap: wrap; row-gap: 8px; }
#testsGivenPicker > .section-title-row h3 { flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#testsGivenPicker .se-open-wrap { flex: 1 1 100%; width: 100%; }
#testsGivenPicker .se-open-btn { width: 100%; min-height: 36px; height: 36px; }
#home-view #testsGivenList .tg-head { background: #FFFFFF; border-color: var(--al-line, #DCD5D4); color: #3E3A3F; }
#home-view #testsGivenList .tg-head::before { color: #6F6870; }
#home-view #testsGivenList .tg-name,
#home-view #testsGivenList .tests-given-group h4 { color: #3E3A3F; }
#home-view #testsGivenList .tg-picked { color: #2B282C; }
#home-view #testsGivenList .tests-given-group:not(.has-picked) .tg-picked { color: #6F6870; }
#home-view #testsGivenList .tg-count:empty { display: none; }
#home-view #testsGivenList .tg-count { background: var(--al-red, #D9412C); color: #fff; }
#home-view #testsGivenList .tests-given-group.is-open > .tg-head { background: #FBE9E5; }
#home-view #testsGivenList .tg-rows { background: #FFFFFF; border: 1px solid var(--al-line, #DCD5D4); border-top: 0; border-radius: 0 0 8px 8px; }
#home-view #testsGivenList .tests-given-row { color: #2B282C; }
#home-view #testsGivenList .tests-given-row span { color: #2B282C; }
#home-view #testsGivenList .tg-name { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A long domain name (PSYCHOLOGICAL PROCESSING) used to push its bar past the
   card's edge, day and night alike: the bar keeps to the card and the words
   trim with an ellipsis instead. */
#home-view #testsGivenList .tg-head { min-width: 0; max-width: 100%; overflow: hidden; }
#home-view #testsGivenList .tg-head .tg-name { max-width: 62%; }
#home-view #testsGivenList .tg-picked { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home-view #testsGivenList .tg-count { flex: 0 0 auto; }


/* NIGHT — Kevin, 2026-09-19: "it needs to have the same structure day or
   night!! just work on 1 and then convert it right". Night is the day page
   with its colours swapped and nothing else. The day look is the one that is
   designed; this block only repaints the surfaces that were still a literal
   daytime white when the room went dark — the banner, the footer, the Help
   button, the Assessment Battery bars and rows, Manual Entry, the Uploads
   extractors. No size, spacing, shape or position is ever set in here. */
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .app-banner { background: var(--al-surface); border-bottom-color: var(--al-line); }
  .app-banner-identity strong, .app-banner-name, #bannerName { color: var(--al-ink); }
  .app-banner-sid, .app-banner-product { color: var(--al-muted); }
  .al-help { background: var(--al-surface); color: var(--al-ink); border-color: var(--al-line); }
  .al-help:hover { background: var(--al-red-tint); color: var(--al-red-deep); }
  .app-banner-settings { background: var(--al-mist); border-color: var(--al-line); color: var(--al-ink); }
  .al-flow { background: var(--al-surface); border-bottom-color: var(--al-line); }

  .app-footer { background: var(--al-surface); border-top-color: var(--al-line); box-shadow: 0 -8px 18px rgba(0, 0, 0, .35); }
  .app-footer-copy { color: var(--al-muted); }
  /* The Valentine Labs mark is drawn dark for the daytime footer; the same
     picture is lit for the night one. */
  .app-footer-logo { filter: invert(1) hue-rotate(180deg) brightness(1.15); }

  #testsGivenPicker .se-open-btn { background: var(--al-surface); }
  #home-view #testsGivenList .tg-head { background: var(--al-surface); border-color: var(--al-line); color: var(--al-ink); }
  #home-view #testsGivenList .tg-head::before { color: var(--al-muted); }
  #home-view #testsGivenList .tg-name,
  #home-view #testsGivenList .tests-given-group h4 { color: var(--al-ink); }
  #home-view #testsGivenList .tg-picked { color: var(--al-charcoal); }
  #home-view #testsGivenList .tests-given-group:not(.has-picked) .tg-picked { color: var(--al-muted); }
  #home-view #testsGivenList .tests-given-group.is-open > .tg-head { background: var(--al-red-tint); }
  #home-view #testsGivenList .tg-rows { background: var(--al-surface); border-color: var(--al-line); }
  #home-view #testsGivenList .tests-given-row,
  #home-view #testsGivenList .tests-given-row span { color: var(--al-ink); }
  .se-row-open { background: var(--al-mist); color: var(--al-ink); border-color: var(--al-line); }

  .uploads-panel .extractor-row > .extractor-btn { background: var(--al-surface); color: var(--al-ink); border-color: var(--al-line); }
  .uploads-panel .extractor-row > .extractor-btn:hover:not(:disabled) { background: var(--al-red-tint); }
  .rail-connect-copy { background: var(--al-surface); color: var(--al-ink); border-color: var(--al-line); }
  .notify-team-btn.is-received { background-image: linear-gradient(180deg, #1E3327 0%, #182A20 100%); color: var(--al-ok); border-color: #2E5A3E; }
  #signReportBtn:disabled { background: var(--al-mist); color: var(--al-muted); border-color: var(--al-line); }
}

/* Kevin, 2026-09-20: "remove the create template button - its redundant huh -
   im narrowing in on the true pipeline". Run AUTOMATA makes the report Doc, so
   the Create Template card is off the screen for good; its parts stay in the
   page for the step strip and the pipeline to read.
   Kevin, 2026-09-24: "I want that step separate like it was" — back on screen
   as Generate Template, under the Assessment Battery, with Share Draft. */
#home-view #homeDetagPanel { display: block; }
#homeDetagPanel #shareDraftBtn { width: 100%; margin-top: 8px; }


/* ============================================================
   NIGHT REPAINT — every light background, dark text and pale border the
   day stylesheets hard-code (app.css, shell.css, score-entry.css,
   merge-overlay.css, this file ...) re-aimed at the night tokens, so the
   switch reaches every screen. Generated 2026-09-23 by the FRONT END chat;
   applies only while <html data-al-theme="night">. Brand colours (red,
   green, amber, blue) are left alone. The hand-set night rules after
   this block win any tie.
   ============================================================ */
:root[data-al-theme="night"] ::-webkit-scrollbar-thumb{background-color:var(--al-mist)}
:root[data-al-theme="night"] .app-banner{background-color:var(--al-surface)}
:root[data-al-theme="night"] .app-footer{background-color:var(--al-surface)}
:root[data-al-theme="night"] .picker{background:linear-gradient(180deg, var(--al-surface) 0%, var(--card) 180px)}
:root[data-al-theme="night"] button:hover:not(:disabled){border-color:var(--al-line)}
:root[data-al-theme="night"] .merge-btn:disabled{background-color:var(--al-mist);border-color:var(--al-line)}
:root[data-al-theme="night"] .danger-btn:hover{border-color:var(--al-line)}
:root[data-al-theme="night"] .student-select-option:hover{background-color:var(--al-mist)}
:root[data-al-theme="night"] #ellFields.is-inactive select{background-color:var(--al-mist)}
:root[data-al-theme="night"] .student-card:hover{border-color:var(--al-line)}
:root[data-al-theme="night"] .student-card.active{background-color:var(--al-surface)}
:root[data-al-theme="night"] .survey-block{background:linear-gradient(180deg, var(--al-surface), var(--sunken))}
:root[data-al-theme="night"] .teacher-check.is-pending{border-color:var(--al-line)}
:root[data-al-theme="night"] .teacher-check.is-received{border-color:var(--al-line)}
:root[data-al-theme="night"] .toggle-track{background-color:var(--al-mist)}
:root[data-al-theme="night"] .required-tags-panel .ready-item.is-done{border-color:var(--al-line)}
:root[data-al-theme="night"] .required-tags-panel .ready-item.is-waived{background-color:var(--al-mist);border-color:var(--al-line)}
:root[data-al-theme="night"] .rail-link{border-color:var(--al-line)}
:root[data-al-theme="night"] .dropzone{border-color:var(--al-line)}
:root[data-al-theme="night"] .dropzone:not(.is-empty) .dropzone-target{border-color:var(--al-line);background-color:var(--al-surface)}
:root[data-al-theme="night"] .placeholder-file{background:linear-gradient(135deg, var(--al-mist), var(--al-mist))}
:root[data-al-theme="night"] .caseload-linking-spinner{border-top-color:var(--al-line)}
:root[data-al-theme="night"] .rail-connect .rail-act{border-color:var(--al-line)}
:root[data-al-theme="night"] .template-box input[type="url"], :root[data-al-theme="night"] .template-box input[type="text"], :root[data-al-theme="night"] .template-box input[type="password"]{border-color:var(--al-line)}
:root[data-al-theme="night"] .rail-help{color:var(--muted, var(--al-charcoal))}
:root[data-al-theme="night"] .template-box select{border-color:var(--al-line)}
:root[data-al-theme="night"] .account-line.is-on{border-color:var(--al-line)}
:root[data-al-theme="night"] .account-line.needs-setup{border-color:var(--al-line)}
:root[data-al-theme="night"] .ready-note{background-color:var(--al-mist)}
:root[data-al-theme="night"] .ready-note.received{background-color:var(--al-mist)}
:root[data-al-theme="night"] .tick{border-color:var(--al-line)}
:root[data-al-theme="night"] .delete-confirm{border-color:var(--al-line)}
:root[data-al-theme="night"] .tests-given-group.is-open{background-color:var(--al-mist)}
:root[data-al-theme="night"] .tg-head{background-color:var(--al-mist)}
:root[data-al-theme="night"] .tests-given-row:hover, :root[data-al-theme="night"] label.check-row:hover{background-color:var(--al-mist)}
:root[data-al-theme="night"] .export-control, :root[data-al-theme="night"] .report-export-row select.export-control, :root[data-al-theme="night"] .report-export-row button.export-control{background:linear-gradient(180deg, var(--al-surface) 0%, var(--al-mist) 100%);border-color:var(--al-line)}
:root[data-al-theme="night"] label{color:var(--al-charcoal)}
:root[data-al-theme="night"] textarea, :root[data-al-theme="night"] input{border-color:var(--al-line)}
:root[data-al-theme="night"] .summary-preview{color:var(--al-charcoal);background-color:var(--al-surface);border-color:var(--al-line)}
:root[data-al-theme="night"] .setup-group > summary:hover{background-color:var(--al-mist)}
:root[data-al-theme="night"] .obs-msg.ok{background-color:var(--al-mist)}
:root[data-al-theme="night"] .obs-msg.err{background-color:var(--al-mist)}
:root[data-al-theme="night"] .obs-msg.info{background-color:var(--al-mist)}
:root[data-al-theme="night"] .obs-msg.warn{background-color:var(--al-mist)}
:root[data-al-theme="night"] .obs-card{background-color:var(--al-surface)}
:root[data-al-theme="night"] .obs-card > summary{background-color:var(--al-surface)}
:root[data-al-theme="night"] .obs-f input, :root[data-al-theme="night"] .obs-f select, :root[data-al-theme="night"] .obs-card-body textarea, :root[data-al-theme="night"] #obsSearch{background-color:var(--al-surface)}
:root[data-al-theme="night"] .obs-step button{background-color:var(--al-surface)}
:root[data-al-theme="night"] .obs-bar2{background-color:var(--al-mist)}
:root[data-al-theme="night"] .obs-item{border-bottom-color:var(--al-line)}
:root[data-al-theme="night"] .obs-quick button{background-color:var(--al-surface)}
:root[data-al-theme="night"] .obs-preview{background-color:var(--al-surface)}
:root[data-al-theme="night"] .obs-modal-bar{background-color:var(--al-surface)}
:root[data-al-theme="night"] .obs-ghost{background-color:var(--al-surface)}
:root[data-al-theme="night"] .ad-item{border-bottom-color:var(--al-line)}
:root[data-al-theme="night"] .ad-seg button{background-color:var(--al-surface)}
:root[data-al-theme="night"] .ad-seg button.on{background-color:var(--al-mist);color:var(--al-ink)}
:root[data-al-theme="night"] .ad-seg button[data-ad-v="N"].on{background-color:var(--al-mist)}
:root[data-al-theme="night"] .ad-seg button[data-ad-v=""].on{background-color:var(--al-mist)}
:root[data-al-theme="night"] .file-preview-panel img{background-color:var(--al-surface)}
:root[data-al-theme="night"] .sum-group h4{color:var(--al-charcoal)}
:root[data-al-theme="night"] .sum-derived{border-color:var(--al-line)}
:root[data-al-theme="night"] .sum-chart{background-color:var(--al-surface);border-color:var(--al-line)}
:root[data-al-theme="night"] .sum-source{border-color:var(--al-line);background-color:var(--al-surface)}
:root[data-al-theme="night"] .sum-source-empty{background-color:var(--al-surface);color:var(--al-charcoal)}
:root[data-al-theme="night"] .sum-verdict{border-color:var(--al-line);background-color:var(--al-surface)}
:root[data-al-theme="night"] .sum-verdict:hover{border-color:var(--al-line)}
:root[data-al-theme="night"] .rmx{border-color:var(--al-line)}
:root[data-al-theme="night"] .rmx-kpi{border-color:var(--al-line)}
:root[data-al-theme="night"] .rmx-h{border-bottom-color:var(--al-line)}
:root[data-al-theme="night"] .rmx-card{border-color:var(--al-line)}
:root[data-al-theme="night"] .rmx-chip{background-color:var(--al-mist)}
:root[data-al-theme="night"] .rmx-chip.sped{background-color:var(--al-mist)}
:root[data-al-theme="night"] .rmx-chip.cm{background-color:var(--al-mist)}
:root[data-al-theme="night"] .rmx blockquote{border-left-color:var(--al-line)}
:root[data-al-theme="night"] .rmx-grid th, :root[data-al-theme="night"] .rmx-grid td{border-color:var(--al-line)}
:root[data-al-theme="night"] .detag-paste > summary{color:var(--muted, var(--al-charcoal))}
:root[data-al-theme="night"] .compose-gate li.is-done .gate-mark{border-color:var(--al-line)}
:root[data-al-theme="night"] .compose-btn.is-received{background:linear-gradient(180deg, var(--al-mist) 0%, var(--al-mist) 100%);border-color:var(--al-line)}
:root[data-al-theme="night"] .app-banner-settings{background-color:var(--al-surface);border-color:var(--al-line)}
:root[data-al-theme="night"] .app-banner-settings:hover{background-color:var(--al-mist);border-color:var(--al-line)}
:root[data-al-theme="night"] #settingsModal .settings-input{background-color:var(--al-surface);border-color:var(--al-line)}
:root[data-al-theme="night"] #settingsModal .settings-btn{background-color:var(--al-mist);border-color:var(--al-line)}
:root[data-al-theme="night"] #settingsModal .settings-btn:hover{background-color:var(--al-mist)}
:root[data-al-theme="night"] .phone-obs-card{border-color:var(--al-line);background-color:var(--al-surface)}
:root[data-al-theme="night"] .tick, :root[data-al-theme="night"] input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input){border-color:var(--al-line);background-color:var(--al-surface)}
:root[data-al-theme="night"] .date-pick-btn{border-color:var(--al-line);background-color:var(--al-surface)}
:root[data-al-theme="night"] .rail-badge-title{color:var(--ink-2, var(--al-ink))}
:root[data-al-theme="night"] .smart-why{color:var(--ink-2, var(--al-ink))}
:root[data-al-theme="night"] .sum-table{background-color:var(--al-surface)}
:root[data-al-theme="night"] .sum-table caption{color:var(--al-ink)}
:root[data-al-theme="night"] .sum-table tr.sum-band td{background-color:var(--al-mist)}
:root[data-al-theme="night"] ::-webkit-scrollbar-thumb{background-color:var(--al-mist)}
:root[data-al-theme="night"] .picker{background:linear-gradient(180deg, var(--al-surface) 0%, var(--al-surface) 100%)}
:root[data-al-theme="night"] .survey-panel button, :root[data-al-theme="night"] .uploads-panel button{border-color:var(--al-line);background:linear-gradient(180deg, var(--al-surface) 0%, var(--al-mist) 100%)}
:root[data-al-theme="night"] .survey-panel button:hover:not(:disabled), :root[data-al-theme="night"] .uploads-panel button:hover:not(:disabled){background:linear-gradient(180deg, var(--al-mist) 0%, var(--al-mist) 100%)}
:root[data-al-theme="night"] .survey-panel button.is-awaiting, :root[data-al-theme="night"] .uploads-panel button.is-awaiting, :root[data-al-theme="night"] #notifyTeamBtn.is-awaiting, :root[data-al-theme="night"] #transitionSendBtn.is-awaiting{background:linear-gradient(180deg, var(--al-mist) 0%, #f0c56a 100%)}
:root[data-al-theme="night"] .survey-panel button.is-received, :root[data-al-theme="night"] .uploads-panel button.is-received, :root[data-al-theme="night"] .extractor-btn.is-received, :root[data-al-theme="night"] #notifyTeamBtn.is-received, :root[data-al-theme="night"] #transitionSendBtn.is-received{background:linear-gradient(180deg, var(--al-mist) 0%, var(--al-mist) 100%);border-color:var(--al-line)}
:root[data-al-theme="night"] .progress-fill::after{background:linear-gradient(90deg, transparent, var(--al-surface), transparent)}
:root[data-al-theme="night"] .writer-bar{background-color:var(--al-surface)}
:root[data-al-theme="night"] .saving-overlay{background-color:var(--al-surface)}
:root[data-al-theme="night"] .saving-card{background-color:var(--al-surface)}
:root[data-al-theme="night"] .file-card .file-icon.is-pdf{background-color:var(--al-mist)}
:root[data-al-theme="night"] .file-card .file-icon.is-image{background-color:var(--al-mist)}
:root[data-al-theme="night"] #automataMergeOverlay{border-color:var(--al-line);background:var(--card,var(--al-surface))}
:root[data-al-theme="night"] #automataMergeOverlay header{border-bottom-color:var(--al-line)}
:root[data-al-theme="night"] #automataMergeStudent{color:var(--muted,var(--al-charcoal))}
:root[data-al-theme="night"] #automataMergeOverlay .am-overview{background:var(--sunken,var(--al-surface))}
:root[data-al-theme="night"] #automataMergeOverlay progress{background:var(--line,var(--al-mist))}
:root[data-al-theme="night"] #automataMergeOverlay progress::-webkit-progress-bar{background:var(--line,var(--al-mist))}
:root[data-al-theme="night"] #automataMergeCount{color:var(--muted,var(--al-charcoal))}
:root[data-al-theme="night"] #automataMergeOverlay .am-stage{border-bottom-color:var(--al-line)}
:root[data-al-theme="night"] #automataMergeOverlay .am-stage-state{color:var(--muted,var(--al-charcoal))}
:root[data-al-theme="night"] #automataMergeOverlay .am-task-state{color:var(--muted,var(--al-charcoal))}
:root[data-al-theme="night"] #automataMergeMessage{border-top-color:var(--al-line);background:var(--blue-soft,var(--al-mist))}
:root[data-al-theme="night"] #automataMergeOverlay[data-state=error] #automataMergeMessage{background:var(--danger-soft,var(--al-mist))}
:root[data-al-theme="night"] #automataMergeOverlay[data-state=complete] #automataMergeMessage{background:var(--ok-soft,var(--al-mist))}
:root[data-al-theme="night"] #automataMergeOverlay footer{color:var(--muted,var(--al-charcoal))}
:root[data-al-theme="night"] #automataMergeClose{border-color:var(--al-line)}
:root[data-al-theme="night"] #automataCelebration{border-color:var(--al-line);background:var(--card,var(--al-surface))}
:root[data-al-theme="night"] #automataCelebration .ac-detail{color:var(--muted,var(--al-charcoal))}
:root[data-al-theme="night"] .se-head{background:linear-gradient(180deg, var(--al-surface), var(--sunken))}
:root[data-al-theme="night"] .se-btn{background-color:var(--al-surface)}
:root[data-al-theme="night"] .se-btn:hover{border-color:var(--al-line)}
:root[data-al-theme="night"] .se-open-btn:hover{background-color:var(--al-mist)}
:root[data-al-theme="night"] .se-row-open{background-color:var(--al-surface)}
:root[data-al-theme="night"] .se-mini{background-color:var(--al-surface)}
:root[data-al-theme="night"] .se-rail-item:hover{background-color:var(--al-mist)}
:root[data-al-theme="night"] .se-rail-item.is-active{background-color:var(--al-surface)}
:root[data-al-theme="night"] .se-group{background-color:var(--al-surface)}
:root[data-al-theme="night"] .se-in{background-color:var(--al-surface)}
:root[data-al-theme="night"] .se-desc.is-high{border-color:var(--al-line)}
:root[data-al-theme="night"] .se-desc.is-low{border-color:var(--al-line)}
:root[data-al-theme="night"] .se-desc.is-mid{border-color:var(--al-line)}
:root[data-al-theme="night"] .se-local{background-color:var(--al-surface)}
:root[data-al-theme="night"] .se-row.is-extracted .se-band{border-color:var(--al-line);background-color:var(--al-surface)}
:root[data-al-theme="night"] .se-from{border-color:var(--al-line)}
:root[data-al-theme="night"] .se-extract:hover{background-color:var(--al-mist)}
:root[data-al-theme="night"] .se-extract.is-received{border-color:var(--al-line)}
:root[data-al-theme="night"] .se-extract.is-received:hover{background-color:var(--al-mist)}
:root[data-al-theme="night"] .se-textarea{background-color:var(--al-surface)}
:root[data-al-theme="night"] .se-src-score{border-color:var(--al-line)}
:root[data-al-theme="night"] .se-src-formula{background-color:var(--al-mist);border-color:var(--al-line)}
:root[data-al-theme="night"] .se-src-narrative{border-color:var(--al-line)}
:root[data-al-theme="night"] .se-src-band{border-color:var(--al-line)}
:root[data-al-theme="night"] .se-open-item:hover{background:var(--al-red-tint, var(--al-mist));border-color:var(--al-line)}
:root[data-al-theme="night"] .se-open-empty{color:var(--al-muted, var(--al-charcoal))}
:root[data-al-theme="night"] .rail-link:focus{background-color:var(--al-surface)}
:root[data-al-theme="night"] .primary-btn .al-rip, :root[data-al-theme="night"] .merge-btn .al-rip, :root[data-al-theme="night"] .compose-btn .al-rip, :root[data-al-theme="night"] .rail-connect-btn .al-rip{background-color:var(--al-surface)}
:root[data-al-theme="night"] .al-flow{background-color:var(--al-surface)}
:root[data-al-theme="night"] #automataMergeOverlay{background-color:var(--al-surface)}
:root[data-al-theme="night"] #automataMergeClose{background-color:var(--al-surface)}
:root[data-al-theme="night"] .al-help{background-color:var(--al-surface)}
:root[data-al-theme="night"] .rail-copy.is-copied{background:var(--al-ok-tint, var(--al-mist))}
:root[data-al-theme="night"] .teacher-check.is-pending{background-color:var(--al-mist)}
:root[data-al-theme="night"] .teacher-check.is-received{border-color:var(--al-line)}
:root[data-al-theme="night"] .teacher-legend .lg-y{background-color:var(--al-mist)}
:root[data-al-theme="night"] .teacher-legend .lg-g{border-color:var(--al-line)}
:root[data-al-theme="night"] .teacher-check .teacher-dates span{background-color:var(--al-mist)}
:root[data-al-theme="night"] .teacher-check .teacher-dates .sd-got{background-color:var(--al-mist)}
:root[data-al-theme="night"] .primary-btn.al-job::after, :root[data-al-theme="night"] .merge-btn.al-job::after, :root[data-al-theme="night"] .compose-btn.al-job::after, :root[data-al-theme="night"] .rail-connect-btn.al-job::after{background-color:var(--al-surface)}
:root[data-al-theme="night"] .rail-connect-copy{background-color:var(--al-surface)}
:root[data-al-theme="night"] #testsGivenPicker .se-open-btn{background-color:var(--al-surface)}
:root[data-al-theme="night"] #testsGivenPicker .se-open-list{background-color:var(--al-surface)}
:root[data-al-theme="night"] #signReportBtn{background-color:var(--al-surface)}
:root[data-al-theme="night"] #signReportBtn:disabled{background-color:var(--al-surface)}
:root[data-al-theme="night"] #fileDropzone:hover{background:var(--vl-red-tint, var(--al-mist))}
:root[data-al-theme="night"] .se-card input.score-fld{color:var(--ink, var(--al-ink));border-color:var(--al-line);background-color:var(--al-mist)}
:root[data-al-theme="night"] .se-card input[data-metric="pct"], :root[data-al-theme="night"] .se-card input[data-metric="desc"]{background-color:var(--mist, var(--al-mist, var(--al-mist)))}
:root[data-al-theme="night"] .se-card input.score-fld[placeholder]:not([type="date"]):not(:placeholder-shown):not(.score-state-bound), :root[data-al-theme="night"] .se-card input.score-fld.filled{background-color:var(--al-surface) !important}
:root[data-al-theme="night"] .uploads-panel .extractor-row > .extractor-btn{background-color:var(--al-surface)}
:root[data-al-theme="night"] .panel, :root[data-al-theme="night"] .rail-panel, :root[data-al-theme="night"] .survey-panel, :root[data-al-theme="night"] .observation-panel, :root[data-al-theme="night"] .screening-panel, :root[data-al-theme="night"] .board-tools .panel{background-image:linear-gradient(180deg,var(--al-surface) 0%,var(--al-mist) 100%)}
:root[data-al-theme="night"] button:not(.rail-badge){background-image:linear-gradient(180deg, var(--al-surface) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,var(--al-surface) 0%,var(--al-mist) 100%)}
:root[data-al-theme="night"] .section-icon, :root[data-al-theme="night"] .panel-icon, :root[data-al-theme="night"] .al-icon, :root[data-al-theme="night"] .rail-icon{background-image:linear-gradient(180deg, var(--al-surface) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(180deg,#F2604A 0%,#D9412C 48%,#B22F1D 100%)}
:root[data-al-theme="night"] .banner, :root[data-al-theme="night"] .topbar, :root[data-al-theme="night"] .step-strip, :root[data-al-theme="night"] .al-steps{background-color:var(--al-surface)}
:root[data-al-theme="night"] .file-card .file-x{background-color:var(--al-surface)}
:root[data-al-theme="night"] .tg-head:hover{background:color-mix(in srgb, var(--al-red-tint) 70%, var(--al-surface))}
:root[data-al-theme="night"] .empty-board .empty-mark{background:url("assets/automata-app-icon.png") center / 78% no-repeat,
              linear-gradient(180deg, var(--al-surface) 0%, var(--al-mist) 100%)}
:root[data-al-theme="night"] #home-view #railProgress{background:linear-gradient(180deg, var(--al-surface) 0%, var(--al-mist) 100%)}
:root[data-al-theme="night"] #home-view #railProgress .progress-track{background-color:var(--al-mist)}
:root[data-al-theme="night"] #home-view #checklistHover{background:linear-gradient(180deg, var(--al-surface) 0%, var(--al-surface) 100%)}
:root[data-al-theme="night"] #home-view #fullChecklist .tick{background-color:var(--al-surface)}
:root[data-al-theme="night"] #home-view .status-job{background:linear-gradient(180deg, var(--al-surface) 0%, var(--al-mist) 100%)}
:root[data-al-theme="night"] #home-view .status-job-track{background-color:var(--al-mist)}
:root[data-al-theme="night"] #home-view #homeStatusJobs > dialog#automataMergeOverlay.am-inline{background:linear-gradient(180deg, var(--al-surface) 0%, var(--al-mist) 100%)}
:root[data-al-theme="night"] #home-view .teacher-roster .teacher-row{background-color:var(--al-surface)}
:root[data-al-theme="night"] #home-view .teacher-roster .teacher-row.is-pending{background-color:var(--al-mist)}
:root[data-al-theme="night"] #home-view .teacher-roster .teacher-row.is-received{background:var(--al-ok-tint, var(--al-mist));border-color:var(--al-line)}
:root[data-al-theme="night"] .al-account{background-color:var(--al-surface)}
:root[data-al-theme="night"] .al-account.is-on{background-color:var(--al-mist)}
:root[data-al-theme="night"] .al-account.is-off{background-color:var(--al-mist)}
:root[data-al-theme="night"] .al-account.is-off:hover{background-color:var(--al-mist)}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-head{background-color:var(--al-surface);border-color:var(--al-line);color:var(--al-ink)}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-head::before{color:var(--al-charcoal)}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-name, :root[data-al-theme="night"] #home-view #testsGivenList .tests-given-group h4{color:var(--al-ink)}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-picked{color:var(--al-ink)}
:root[data-al-theme="night"] #home-view #testsGivenList .tests-given-group:not(.has-picked) .tg-picked{color:var(--al-charcoal)}
:root[data-al-theme="night"] #home-view #testsGivenList .tests-given-group.is-open > .tg-head{background-color:var(--al-mist)}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-rows{background-color:var(--al-surface);border-color:var(--al-line)}
:root[data-al-theme="night"] #home-view #testsGivenList .tests-given-row{color:var(--al-ink)}
:root[data-al-theme="night"] #home-view #testsGivenList .tests-given-row span{color:var(--al-ink)}
:root[data-al-theme="night"] #dataScraperDialog{border-color:var(--al-line);background:var(--card,var(--al-surface));color:var(--text,var(--al-ink))}

/* ============================================================
   NIGHT MODE SWITCH — Kevin, 2026-09-23: "add a Night mode switch in
   Settings, so you turn it on yourself instead of your Mac deciding."
   The night look below is the same colours as the eight switched-off
   night blocks above (kept word for word), re-aimed at a switch: they
   apply only when <html data-al-theme="night">, which Settings > Look
   sets and remembers. The Mac's own Appearance no longer decides.
   Generated from those blocks, then the repaint pass follows.
   ============================================================ */
:root[data-al-theme="night"]{color-scheme:dark;

    --al-paper:#14131A; --al-surface:#1C1B23; --al-mist:#252430;
    --al-line:#343342; --al-line-soft:#2A2936;
    --al-ink:#ECEAF2; --al-charcoal:#CFCBD8; --al-muted:#9A95A6;
    --al-red:#E8553F; --al-red-deep:#F27A66; --al-red-tint:#3A2320;
    --al-ok:#66BB8A; --al-ok-tint:#1E3327; --al-warn:#D9A15A; --al-warn-tint:#33281A;
    --al-done:#6B93D6; --al-done-deep:#8AADDF; --al-done-tint:#1E2A40;
    --faint:#7C7689;

    --al-wash-1:#122246; --al-wash-2:#17214A; --al-wash-3:#0E1224;
    --al-edge:rgba(255,255,255,.10);

    --shadow-xs:0 1px 2px rgba(0,0,0,.40);
    --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 8px 22px rgba(0,0,0,.50);
    --shadow-lg:0 16px 38px rgba(0,0,0,.55);}
:root[data-al-theme="night"] body{color:var(--al-ink);
    background-color:var(--al-wash-3);
    background-image:
      radial-gradient(70% 45% at 8% 0%, rgba(58,112,255,.30) 0%, transparent 64%),
      radial-gradient(55% 35% at 96% 14%, rgba(124,108,226,.14) 0%, transparent 62%),
      linear-gradient(178deg, var(--al-wash-1) 0%, var(--al-wash-2) 58%, var(--al-wash-3) 88%);}
:root[data-al-theme="night"] .panel, :root[data-al-theme="night"] .rail-panel, :root[data-al-theme="night"] .survey-panel, :root[data-al-theme="night"] .observation-panel, :root[data-al-theme="night"] .screening-panel, :root[data-al-theme="night"] .board-tools .panel, :root[data-al-theme="night"] .obs-modal, :root[data-al-theme="night"] .obs-modal-panel, :root[data-al-theme="night"] dialog, :root[data-al-theme="night"] .modal, :root[data-al-theme="night"] .popover, :root[data-al-theme="night"] .al-tip{background-image:linear-gradient(180deg,#24222C 0%,#1A1921 100%);
    border-color:var(--al-edge);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -2px 0 rgba(0,0,0,.45),
      0 2px 4px rgba(0,0,0,.45),
      0 14px 30px rgba(0,0,0,.50);}
:root[data-al-theme="night"] .panel:hover{box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.45),
      0 3px 6px rgba(0,0,0,.50),
      0 20px 40px rgba(0,0,0,.55);}
:root[data-al-theme="night"] button:not(.rail-badge){color:var(--al-ink);
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(180deg,#2C2A36 0%,#201F29 100%);
    border-color:var(--al-edge);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.50),
      0 2px 4px rgba(0,0,0,.45),
      0 8px 18px rgba(0,0,0,.45);}
:root[data-al-theme="night"] button:not(.rail-badge):hover:not(:disabled){color:var(--al-red-deep);
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(180deg,#35323F 0%,#26252F 100%);
    border-color:color-mix(in srgb,var(--al-red) 55%,var(--al-edge));}
:root[data-al-theme="night"] button:not(.rail-badge):active:not(:disabled){box-shadow:inset 0 3px 9px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08);}
:root[data-al-theme="night"] input, :root[data-al-theme="night"] select, :root[data-al-theme="night"] textarea, :root[data-al-theme="night"] .link-bar input, :root[data-al-theme="night"] .search-bar input{background-color:#201F29; color:var(--al-ink); border-color:var(--al-edge);}
:root[data-al-theme="night"] input::placeholder, :root[data-al-theme="night"] textarea::placeholder{color:var(--al-muted);}
:root[data-al-theme="night"] .banner, :root[data-al-theme="night"] .topbar, :root[data-al-theme="night"] .step-strip, :root[data-al-theme="night"] .al-steps{background-color:rgba(28,27,35,.76);
    border-bottom:.5px solid var(--al-edge);}
:root[data-al-theme="night"] .card, :root[data-al-theme="night"] .tile, :root[data-al-theme="night"] .file-card, :root[data-al-theme="night"] .upload-card, :root[data-al-theme="night"] .chip, :root[data-al-theme="night"] .pill, :root[data-al-theme="night"] .tag, :root[data-al-theme="night"] .list-row, :root[data-al-theme="night"] .rail-link{background-color:var(--al-surface); color:var(--al-ink); border-color:var(--al-edge);}
:root[data-al-theme="night"] hr, :root[data-al-theme="night"] .divider{border-color:var(--al-edge);}
:root[data-al-theme="night"] button[data-done="1"], :root[data-al-theme="night"] button.al-ran, :root[data-al-theme="night"] #homeDetagBtn.is-built, :root[data-al-theme="night"] button.house-btn.is-built, :root[data-al-theme="night"] .primary-btn.is-built, :root[data-al-theme="night"] .merge-btn.is-built, :root[data-al-theme="night"] .compose-btn.is-built{background-image:
      linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(180deg, #3A62B0 0%, #2F62B5 48%, #1E3F7A 100%) !important;
    border-color: #6B93D6 !important;}
:root[data-al-theme="night"] .tg-head:hover{background: #2A2936;
    border-color: var(--al-edge);}
:root[data-al-theme="night"]{--al-blocked: #3A3944;
    --al-blocked-deep: #2C2B34;
    --al-blocked-ink: #D4D0DC;
    --al-blocked-line: #5A5866;}
:root[data-al-theme="night"] button:disabled, :root[data-al-theme="night"] button[disabled], :root[data-al-theme="night"] button[aria-disabled="true"], :root[data-al-theme="night"] #home-view[data-home-stage="caseload"] .board button, :root[data-al-theme="night"] #home-view[data-home-stage="caseload"] .ready-pane button, :root[data-al-theme="night"] #home-view[data-home-stage="template"] .board button, :root[data-al-theme="night"] #home-view[data-home-stage="template"] .ready-pane button{color: var(--al-blocked-ink) !important;
    background-image:
      linear-gradient(180deg, #444350 0%, var(--al-blocked) 42%, var(--al-blocked-deep) 100%) !important;}
:root[data-al-theme="night"] .student-select-menu:not(.hidden){border-color: var(--al-line); box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.55);}
:root[data-al-theme="night"] .empty-board .empty-mark{background: url("assets/automata-app-icon.png") center / 78% no-repeat,
                linear-gradient(180deg, #2A2833 0%, #1C1B23 100%);
    border-color: var(--al-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.45);}
:root[data-al-theme="night"] #home-view #railProgress{background: linear-gradient(180deg, #2A2833 0%, #1C1B23 100%);
    border-color: var(--al-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.40);}
:root[data-al-theme="night"] #home-view #railProgress .progress-track{background: #2E2D38; box-shadow: inset 0 1px 2px rgba(0,0,0,.5);}
:root[data-al-theme="night"] #home-view #checklistHover{background: linear-gradient(180deg, #24232C 0%, #1C1B23 100%);
    border-color: var(--al-line);
    box-shadow: none;}
:root[data-al-theme="night"] #home-view #fullChecklist .tick{background: #1C1B23; border-color: rgba(255,255,255,.28); box-shadow: none;}
:root[data-al-theme="night"] #home-view #fullChecklist .tick.done{box-shadow: inset 0 0 0 2.5px #1C1B23;}
:root[data-al-theme="night"] #home-view #fullChecklist .check-row:hover{background: rgba(255,255,255,.06);}
:root[data-al-theme="night"] #home-view #homeMergeDock{border-top-color: var(--al-line);}
:root[data-al-theme="night"] #home-view .status-job, :root[data-al-theme="night"] #home-view #homeStatusJobs > dialog#automataMergeOverlay.am-inline{background: linear-gradient(180deg, #2A2833 0%, #1C1B23 100%);
    border-color: var(--al-line);}
:root[data-al-theme="night"] #home-view .status-job-track{background: #2E2D38; box-shadow: inset 0 1px 2px rgba(0,0,0,.5);}
:root[data-al-theme="night"] #home-view .status-feed{border-top-color: var(--al-line);}
:root[data-al-theme="night"] #home-view .status-item{border-bottom-color: rgba(255,255,255,.06);}
:root[data-al-theme="night"] #home-view .teacher-roster .teacher-row{background: #24232C; border-color: var(--al-line);}
:root[data-al-theme="night"] #home-view .teacher-roster .teacher-row.is-pending{background: #3A3320; border-color: #6B5A1E;}
:root[data-al-theme="night"] #home-view .teacher-roster .teacher-row.is-received{background: #1E2F26; border-color: #2E5A3E;}
:root[data-al-theme="night"] .app-banner{background: var(--al-surface); border-bottom-color: var(--al-line);}
:root[data-al-theme="night"] .app-banner-identity strong, :root[data-al-theme="night"] .app-banner-name, :root[data-al-theme="night"] #bannerName{color: var(--al-ink);}
:root[data-al-theme="night"] .app-banner-sid, :root[data-al-theme="night"] .app-banner-product{color: var(--al-muted);}
:root[data-al-theme="night"] .al-help{background: var(--al-surface); color: var(--al-ink); border-color: var(--al-line);}
:root[data-al-theme="night"] .al-help:hover{background: var(--al-red-tint); color: var(--al-red-deep);}
:root[data-al-theme="night"] .app-banner-settings{background: var(--al-mist); border-color: var(--al-line); color: var(--al-ink);}
:root[data-al-theme="night"] .al-flow{background: var(--al-surface); border-bottom-color: var(--al-line);}
:root[data-al-theme="night"] .app-footer{background: var(--al-surface); border-top-color: var(--al-line); box-shadow: 0 -8px 18px rgba(0, 0, 0, .35);}
:root[data-al-theme="night"] .app-footer-copy{color: var(--al-muted);}
:root[data-al-theme="night"] .app-footer-logo{filter: invert(1) hue-rotate(180deg) brightness(1.15);}
:root[data-al-theme="night"] #testsGivenPicker .se-open-btn{background: var(--al-surface);}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-head{background: var(--al-surface); border-color: var(--al-line); color: var(--al-ink);}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-head::before{color: var(--al-muted);}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-name, :root[data-al-theme="night"] #home-view #testsGivenList .tests-given-group h4{color: var(--al-ink);}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-picked{color: var(--al-charcoal);}
:root[data-al-theme="night"] #home-view #testsGivenList .tests-given-group:not(.has-picked) .tg-picked{color: var(--al-muted);}
:root[data-al-theme="night"] #home-view #testsGivenList .tests-given-group.is-open > .tg-head{background: var(--al-red-tint);}
:root[data-al-theme="night"] #home-view #testsGivenList .tg-rows{background: var(--al-surface); border-color: var(--al-line);}
:root[data-al-theme="night"] #home-view #testsGivenList .tests-given-row, :root[data-al-theme="night"] #home-view #testsGivenList .tests-given-row span{color: var(--al-ink);}
:root[data-al-theme="night"] .se-row-open{background: var(--al-mist); color: var(--al-ink); border-color: var(--al-line);}
:root[data-al-theme="night"] .uploads-panel .extractor-row > .extractor-btn{background: var(--al-surface); color: var(--al-ink); border-color: var(--al-line);}
:root[data-al-theme="night"] .uploads-panel .extractor-row > .extractor-btn:hover:not(:disabled){background: var(--al-red-tint);}
:root[data-al-theme="night"] .rail-connect-copy{background: var(--al-surface); color: var(--al-ink); border-color: var(--al-line);}
:root[data-al-theme="night"] .notify-team-btn.is-received{background-image: linear-gradient(180deg, #1E3327 0%, #182A20 100%); color: var(--al-ok); border-color: #2E5A3E;}
:root[data-al-theme="night"] #signReportBtn:disabled{background: var(--al-mist); color: var(--al-muted); border-color: var(--al-line);}

/* ---------- Merge Anyway beside Merge (Kevin, 2026-09-23) ----------
   The app's own Merge Anyway row is moved here by automata-look.js when
   Merge stops on blanks. It sits right above Merge: amber note + the
   white helper button. Shown only while there is an offer. */
#homeMergeDock > #mergeAnywayDock { display: none !important; }
#homeMergeDock > #mergeAnywayDock.is-on {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#home-view #mergeAnywayDock .merge-anyway.status-job {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin: 0;
  padding: 9px 10px 10px;
  border-radius: 10px;
  background: var(--al-warn-tint);
  border: 1px solid color-mix(in srgb, var(--al-warn) 45%, var(--al-line));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12));
  animation: al-anyway-in .22s ease-out;
}
#home-view #mergeAnywayDock .merge-anyway .status-job-label {
  white-space: normal;
  color: var(--al-warn);
  font: 700 12px/1.35 var(--al-head);
}
#home-view #mergeAnywayDock .merge-anyway .status-job-label::before {
  content: 'Merge stopped \2014  ';
}
#home-view #mergeAnywayDock #mergeAnywayBtn {
  width: 100%;
  min-height: 36px;
  font: 600 12.5px/1 var(--al-head);
  color: var(--al-ink);
}
@keyframes al-anyway-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #home-view #mergeAnywayDock .merge-anyway.status-job { animation: none; } }

/* ---------- Score card Save reads live (Kevin's handoff item 4, 2026-09-23) ----------
   The white-button gloss was painting over its red, so a live Save looked
   switched off (white words on white). It now wears the same red as every
   other house action button. A locked Save still fades. */
#seSaveBtn.se-primary:not(:disabled) {
  color: #fff;
  background-color: var(--al-red);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #F2604A 0%, var(--al-red) 46%, #B22F1D 100%);
  border-color: #A82C1A;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.2),
    0 3px 6px rgba(178,47,29,.34),
    0 12px 26px rgba(178,47,29,.26);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
#seSaveBtn.se-primary:hover:not(:disabled) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #E4553F 0%, var(--al-red-deep) 60%, #9E2A19 100%);
  color: #fff;
}

/* ---------- Night polish (hand-set, last word for night) ---------- */
:root[data-al-theme="night"] { --mist: var(--al-mist); }
/* The red action buttons stay red at night, exactly as they are by day. */
:root[data-al-theme="night"] :is(.primary-btn, .merge-btn, .compose-btn, .rail-connect-btn, .settings-btn, .se-primary, .obs-modal-bar button,
  #runAutomataBtn, #mergeBtn, #boardReferralSaveBtn, #licenseSignInBtn, #pickCaseloadBtn, #useCaseloadDriveBtn, #createStudentBtn, #cancelStudentBtn,
  #pickTemplateBtn, #useTemplateDriveBtn, #uploadTemplateBtn, #extractAllBtn, #extractPrevBtn, #saveCaseBtn, #writerExtractWjBtn, #writerExtractPh3Btn,
  #writerExtractWramlBtn, #teacherSurveyBtn, #transitionNoticeBtn, #parentSurveyBtn, #parentSurveyEmailBtn, #parentSurveySmsBtn, #writerObservationBtn,
  #obsSaveBtn, #obsWriteBtn, #adSaveBtn, #adWriteBtn, #sigClearBtn, #sigUploadBtn, #sigCancelBtn, #sigApplyBtn, #impRebuildBtn, #impSaveBtn, #impWriteBtn,
  #disRebuildBtn, #disSaveBtn, #disWriteBtn, #sumRebuildBtn, #sumSaveBtn, #sumWriteBtn, #polScanBtn, #polRunBtn, #savingWaitBtn, #savingCloseAnywayBtn,
  #savingCancelQuitBtn, #ssDraftBtn, #ssSaveBtn, #aiTestBtn, #aiRefreshModelsBtn, #settingsCancelBtn, #settingsSaveBtn, #browserCrawlGo, #browserCrawlStop,
  #automataCelebrationClose, #seSaveBtn):not(:disabled):not([data-done="1"]) {
  color: #fff;
  background-color: var(--al-red);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #E8553F 0%, #C63B27 55%, #9C2C1C 100%);
  border-color: #B8321F;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.28),
    0 3px 8px rgba(0,0,0,.45),
    0 10px 24px rgba(156,44,28,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
:root[data-al-theme="night"] :is(.primary-btn, .merge-btn, .compose-btn, .settings-btn, .se-primary, .obs-modal-bar button, #runAutomataBtn, #mergeBtn, #seSaveBtn):hover:not(:disabled):not([data-done="1"]) {
  color: #fff;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #F27A66 0%, #D9412C 55%, #A8301F 100%);
}
/* Amber and green state buttons keep dark words so they read. */
:root[data-al-theme="night"] .notify-team-btn:not(.is-received) { color: #2B1D05; }
/* The Valentine Labs mark in the footer, lightened for a dark footer. */
/* The AUTOMATA wordmark in the footer switches to its white-letter version at night. */
:root[data-al-theme="night"] .app-footer-logo { content: url("assets/automata-wordmark-light.png"); filter: none; }
/* Ticked boxes stay green with a white tick at night. */
:root[data-al-theme="night"] input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input):checked,
:root[data-al-theme="night"] .tick.done { background: var(--al-ok); border-color: var(--al-ok); }
:root[data-al-theme="night"] input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input):checked::after,
:root[data-al-theme="night"] .tick.done::after { border-style: solid; border-color: #fff; border-width: 0 2px 2px 0; }

/* AUTOMATA-only branding, 2026-09-23: the corner lockup on the opening screen
   is now the flat A mark alone (the big AUTOMATA title sits right above it),
   so cap its height instead of letting it take the old wide logo width. */
.splash-company { width: auto !important; height: 46px !important; }
/* The flat A runs to deep maroon at its lower left; lift it a touch on the dark banner and sign-in card. */
:root[data-al-theme="night"] :is(.app-banner-logo, .license-logo) { filter: brightness(1.3) saturate(1.1); }

/* ============================================================
   SMALL-SCREEN FIT (Kevin's open list item 6, 2026-09-24):
   "the fold-out cards can push the button bar off the bottom on a
   13-inch MacBook."
   Two things were wrong on a short screen:
   1. The score card asked for inset:24px AND height:100%, which
      over-constrains the box — the browser cancels the gutter with
      negative margins, so the card sits flush against all four
      edges of the screen. Height is now free to fill the inset box
      and capped, so the 24px frame is real at every height and the
      card never runs past the bottom.
   2. Every pop-up window's body carried 88px of dead padding under
      the last card, because the button bar is a real row below it,
      not a floating one. That is 88px of scrolling for nothing on a
      13-inch screen.
   The bar itself stays sticky at the foot of the panel, so it is on
   screen at every window height.
   ============================================================ */
.se-shell,
.se-panel {
  height: auto;
  max-height: min(880px, 100%);
}
.obs-modal-body {
  padding-bottom: 16px;
  overscroll-behavior: contain;
}
.obs-modal-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
}

/* Activity scrollback (Kevin's open list item 7, 2026-09-24): lines kept from
   an earlier session sit quieter than the ones from this run, so the newest
   work still reads first. */
#home-view .status-item.is-earlier { opacity: .62; }
#home-view .status-item.is-earlier .status-time::after { content: ' ·'; }

/* ---------- Save PDF to Student Folder (Kevin's open list item 2) ----------
   The dock hides everything that is not Merge, because Merge is the
   destination. This one button is allowed through and sits under it, smaller,
   because it is the step straight after Merge: the finished report as a PDF,
   straight into the student's own Drive folder with no Save window. It stays
   on screen while it is locked so it can say why. */
#home-view #homeMergeDock > #savePdfBtn {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  padding: 9px 14px;
  font: 700 12.5px/1.2 var(--al-head);
  letter-spacing: .01em;
}
#home-view #homeMergeDock > #savePdfStatus {
  display: none !important;
}
#home-view #homeMergeDock > #savePdfStatus.ok,
#home-view #homeMergeDock > #savePdfStatus.warn,
#home-view #homeMergeDock > #savePdfStatus.error {
  display: block !important;
  visibility: visible !important;
  margin-top: 6px;
  font: 600 11.5px/1.35 var(--al-head);
  text-align: center;
  overflow-wrap: anywhere;
}

/* ============================================================
   LOOK PASS 2026-09-24 — visual / hierarchy polish (append-only).
   Finish buttons stay separate; Impact stays its own card; no Finish Lane.
   Does not strip the glossy house-btn moulding on true primaries.
   ============================================================ */

/* Share Draft sits under Generate Template as a secondary action — outline,
   not another vermillion primary competing for the same click. */
#homeDetagPanel #shareDraftBtn.share-draft-btn,
#homeDetagPanel .share-draft-btn {
  width: 100%;
  margin-top: 10px;
  min-height: 40px;
  padding: 0 14px;
  font: 600 13px/1 var(--al-head);
  letter-spacing: .01em;
  color: var(--al-red-deep);
  background: var(--al-surface);
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--al-red) 45%, var(--al-line));
  box-shadow: none;
  text-shadow: none;
}
#homeDetagPanel #shareDraftBtn.share-draft-btn:hover:not(:disabled) {
  color: #fff;
  background: var(--al-red);
  background-image: none;
  border-color: var(--al-red);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(185, 50, 31, .22);
  text-shadow: none;
}
#homeDetagPanel #shareDraftBtn.share-draft-btn:disabled {
  color: var(--al-muted);
  background: var(--al-mist);
  background-image: none;
  border-color: var(--al-line);
  box-shadow: none;
  cursor: not-allowed;
  text-shadow: none;
}
#homeDetagPanel #shareDraftStatus:empty { display: none; }
#homeDetagPanel #homeDetagStatus:empty { display: none; }

/* Finish family: Insert Images matches sibling primaries (class + paint). */
.finish-steps #insertImagesBtn.primary-btn,
.finish-steps #insertImagesBtn {
  width: 100%;
  min-height: 38px;
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 600;
}
.finish-steps #composeNarrativesBtn {
  text-transform: none;
  letter-spacing: .02em;
}

/* Impact stays its own equal card in the Finish grid (no demotion). */

/* Empty status lines elsewhere on Home should not reserve a blank row. */
#home-view .survey-panel .status-line:empty,
#home-view .screening-panel .status-line:empty,
#home-view .observation-panel .status-line:empty,
#home-view .uploads-panel .status-line:empty,
#home-view .rail-panel .status-line:empty,
#home-view .finish-panel .status-line:empty,
#home-view #runAutomataStatus:empty,
#home-view #mergeStatus:empty {
  display: none;
}

/* Survey secondary actions stay outline/ghost so Finish + Merge stay loudest.
   Kill glossy moulding here only — primaries keep the house gradient. */
#home-view .survey-actions > .house-btn:not(.primary-btn) {
  background: var(--al-surface);
  background-image: none;
  color: var(--al-ink);
  border: 1px solid var(--al-line);
  box-shadow: none;
  text-shadow: none;
  font-weight: 600;
}
#home-view .survey-actions > .house-btn:not(.primary-btn):hover:not(:disabled) {
  background: var(--al-red-tint);
  background-image: none;
  color: var(--al-red-deep);
  border-color: color-mix(in srgb, var(--al-red) 40%, var(--al-line));
  box-shadow: none;
  text-shadow: none;
}

/* Destination dock: Save PDF stays visibly secondary to Merge. */
#home-view #homeMergeDock > #savePdfBtn {
  background: var(--al-surface) !important;
  background-image: none !important;
  color: var(--al-red-deep) !important;
  border: 1px solid color-mix(in srgb, var(--al-red) 40%, var(--al-line)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}
#home-view #homeMergeDock > #savePdfBtn:hover:not(:disabled) {
  background: var(--al-red) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--al-red) !important;
}
#home-view #homeMergeDock > #savePdfBtn:disabled {
  color: var(--al-muted) !important;
  background: var(--al-mist) !important;
  background-image: none !important;
  border-color: var(--al-line) !important;
}

/* ---------- Save PDF to This Computer (Kevin 2026-09-26: "but also have the
   option to just save") ----------
   Sits right under Save PDF to Student Folder, same size and the same quiet
   white look, so the two PDF doors read as one pair under Merge. */
#home-view #homeMergeDock > #savePdfMacBtn,
#home-view #homeMergeDock > #copyReportLinkBtn {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 100%;
  min-height: 38px;
  margin-top: 6px;
  padding: 9px 14px;
  font: 600 12.5px/1.2 var(--al-head) !important;
  letter-spacing: .01em;
  background: var(--al-surface) !important;
  background-image: none !important;
  color: var(--al-red-deep) !important;
  border: 1px solid color-mix(in srgb, var(--al-red) 40%, var(--al-line)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#home-view #homeMergeDock > #savePdfMacBtn:hover:not(:disabled),
#home-view #homeMergeDock > #copyReportLinkBtn:hover:not(:disabled) {
  background: var(--al-red) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--al-red) !important;
}
#home-view #homeMergeDock > #savePdfMacBtn:disabled,
#home-view #homeMergeDock > #copyReportLinkBtn:disabled {
  color: var(--al-muted) !important;
  background: var(--al-mist) !important;
  background-image: none !important;
  border-color: var(--al-line) !important;
}

/* The hover box's bold name keeps the red-first-letter word on one line: the
   box's own "span = the sentence line" rule must not reach inside the name. */
.al-tip b span { display: inline; font: inherit; color: inherit; }
.al-tip b .bl-a { color: #F27A66; }

/* Kevin, 2026-09-30: "ya get rid of merge." Run AUTOMATA merges at the end of
   every press, so the Merge button is off the screen. It stays in the page,
   hidden, because Run AUTOMATA presses it for him and the finish line reads
   whether it has run. Merge Anyway (when blanks stop a merge) and the two
   Save PDF buttons stay where they are. */
#home-view #homeMergeDock #mergeBtn,
#homeMergeDock #mergeBtn,
#home-view #homeMergeDock > .merge-eyebrow {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Kevin 2026-09-30: "N of M students read ahead" under the Caseload card. */
#caseloadReadyLine.caseload-ready-line {
  margin: 8px 0 0;
  font-family: var(--al-mono);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
  color: var(--al-muted);
}
#caseloadReadyLine.caseload-ready-line[data-state="ready"] { color: var(--al-ok); }
#caseloadReadyLine.caseload-ready-line[data-state="waiting"] { color: var(--al-warn); }

/* Assessment Battery: the date each ticked test was given (Kevin 2026-09-11, built 2026-09-30). */
#home-view #testsGivenList .tests-given-row .tg-date{margin-left:auto;padding-left:8px;font-size:11.5px;font-variant-numeric:tabular-nums;color:#6F6870;white-space:nowrap}
:root[data-al-theme="night"] #home-view #testsGivenList .tests-given-row .tg-date{color:var(--al-muted)}

/* Kevin, 2026-10-01: "put the pie chart progress meter back". The round meter
   sits at the left of the upper-right Progress box; label, bar and count stay
   on its right. Shown from the first second, even at 0%. */
#home-view #railProgress {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}
#home-view #railProgress > .rail-dial { grid-column: 1; grid-row: 1 / span 3; width: 64px; height: 64px; display: block !important; }
#home-view #railProgress > .progress-head,
#home-view #railProgress > .progress-track,
#home-view #railProgress > #readyPercent { grid-column: 2; }
#home-view #railProgress .rail-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
#home-view #railProgress .rail-dial-track { stroke: #E1E7F3; }
#home-view #railProgress .rail-dial-fill {
  stroke: #D9412C;
  transition: stroke-dashoffset 700ms cubic-bezier(.2,.8,.2,1), stroke 400ms ease;
}
#home-view #railProgress .rail-dial-fill.complete { stroke: #1f7a4d; }
:root[data-al-theme="night"] #home-view #railProgress .rail-dial-track { stroke: #33313D; }
@media (prefers-reduced-motion: reduce) {
  #home-view #railProgress .rail-dial-fill { transition: none; }
}

/* Kevin, 2026-10-01: the files Extract Prior Reports read, listed under it. */
.prev-extract-files { margin: 6px 0 4px; font: 500 12px/1.45 var(--al-head); color: var(--al-ink); }
.prev-extract-files.hidden { display: none; }
.prev-extract-files .pef-head { margin: 0 0 2px; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--al-muted); }
.prev-extract-files .pef-list { margin: 0 0 4px; padding-left: 18px; }
.prev-extract-files .pef-read li::marker { color: #1f7a4d; }
.prev-extract-files .pef-skipped summary { cursor: pointer; color: var(--al-muted); font-size: 11.5px; }

/* Kevin, 2026-10-01: the version, small and quiet, on the opening screen and the banner. */
.splash-version { margin: 6px 0 0; font: 500 11px/1.3 var(--al-mono, ui-monospace, monospace); letter-spacing: .04em; color: var(--al-muted, #6F665F); text-align: center; }
.app-banner-version { margin: 1px 0 0; font: 500 9.5px/1.2 var(--al-mono, ui-monospace, monospace); letter-spacing: .04em; color: var(--al-muted, #6F665F); opacity: .85; }
.splash-version:empty, .app-banner-version:empty { display: none; }

/* Kevin, 2026-10-01: the quiet run-time line on Home. */
.run-time-line { margin: 4px 0 0; font: 500 11.5px/1.35 var(--al-head); color: var(--al-muted, #6F665F); text-align: center; }
.run-time-line.hidden { display: none; }

/* Kevin, 2026-10-01: the tiny AP IN light. */
.apin-light { display: inline-block; width: 10px; height: 10px; min-width: 10px; padding: 0; border-radius: 50%; border: 0; margin: 0 6px; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); background: #B9B4AE; cursor: default; }
.apin-light.hidden { display: none; }
.apin-light.is-grey { background: #B9B4AE; }
.apin-light.is-amber { background: #E0A12A; box-shadow: 0 0 0 3px rgba(224,161,42,.22); cursor: pointer; }
.apin-light.is-green { background: #2F9E69; box-shadow: 0 0 0 3px rgba(47,158,105,.20); }

/* Kevin, 2026-09-30: Student Snapshot — everything about a student on one page. */
.app-banner-snapshot { margin-left: 8px; padding: 2px 10px; height: 22px; border-radius: 11px; border: 1px solid var(--al-line); background: var(--al-surface); color: var(--al-ink); font-family: var(--al-head); font-size: 11px; font-weight: 600; letter-spacing: .02em; cursor: pointer; vertical-align: middle; }
.app-banner-snapshot:hover { border-color: var(--al-red); color: var(--al-red); }
.app-banner-snapshot.hidden { display: none; }
.snapshot-veil { position: fixed; inset: 0; z-index: 9000; background: rgba(43,40,44,.42); display: flex; align-items: center; justify-content: center; padding: 24px; }
.snapshot-veil.hidden { display: none; }
.snapshot-card { width: min(920px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--al-surface); color: var(--al-ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border-top: 4px solid var(--al-red); }
.snapshot-head { display: flex; gap: 18px; align-items: center; padding: 20px 24px 14px; border-bottom: 1px solid var(--al-line-soft); position: sticky; top: 0; background: var(--al-surface); }
.snapshot-photo { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; border: 2px solid var(--al-line); }
.snapshot-photo.hidden { display: none; }
.snapshot-who { flex: 1; min-width: 0; }
.snapshot-kicker { margin: 0; font-family: var(--al-head); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--al-red); }
.snapshot-who h2 { margin: 2px 0 8px; font-family: var(--al-head); font-size: 22px; }
.snapshot-links { display: flex; gap: 8px; flex-wrap: wrap; }
.snapshot-link.hidden { display: none; }
.snapshot-close { align-self: flex-start; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--al-mist); color: var(--al-ink); font-size: 20px; line-height: 1; cursor: pointer; }
.snapshot-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; padding: 18px 24px 24px; }
.snapshot-section { background: var(--al-paper); border: 1px solid var(--al-line-soft); border-radius: var(--r-md); padding: 12px 14px; }
.snapshot-section h3 { margin: 0 0 8px; font-family: var(--al-head); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--al-charcoal); }
.snapshot-section dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; }
.snapshot-section dt { color: var(--al-muted); }
.snapshot-section dd { margin: 0; overflow-wrap: anywhere; }

/* =====================================================================
   WAVE 4 — HOUSE STYLE PASS (Kevin, 2026-10-01: "the aesthetics need to
   match the house style"). The house brand is RED AND BLACK on a light
   page (Kevin, 2026-09-30: "The color scheme is supposed to be red and
   black, with the first letter of headers Red"), no shaded fills, thin red
   rules, a red-to-vermilion ombre line, Montserrat headings, Plex Mono
   dates. Applied to every screen at once, last in the file so it wins:
   - paper page and plain white cards: no blue wash, no tinted gradients
   - flat buttons, one size (36 tall; Run AUTOMATA / Merge 54; Sign 44)
   - red = a job that builds something, white = a helper,
     BLACK = it ran fine (was blue)
   - popups: white helpers on the left, the red main action on the right
   - locked = faded flat, never a grey 3D bar
   Night mode keeps its own colours; only shapes and sizes apply there.
   The :not(#hs…) links below match every button; they only make these
   rules outrank the older ones, so nothing above had to be rewritten.
   ===================================================================== */

:root:not([data-al-theme="night"]) {
  --al-done: #2B282C;
  --al-done-deep: #141214;
  --al-done-tint: #EFEBEA;
}

html:not([data-al-theme="night"]) body {
  background: var(--al-paper) !important;
  background-image: none !important;
}
html:not([data-al-theme="night"]) body :is(.panel, section.panel, .tests-given-picker):not(#hs0):not(#hs1) {
  background-image: none !important;
  background-color: var(--al-surface) !important;
}

/* the red-to-vermilion ombre line under the frozen banner */
html body .app-banner { position: sticky; }
html body .app-banner::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, #D9412C 0%, #F07A3A 100%); pointer-events: none;
}

/* ---- every house button: flat, one type ---- */
html body :is(.primary-btn, .house-btn, .extractor-btn, .compose-btn, .merge-btn, .rail-act, .rail-connect-btn, .obs-ghost,
  .notify-team-btn, .danger-btn, .settings-btn, .ds-btn, .hs-helper, .app-banner-settings, .file-preview-close,
  .obs-modal-head > button, .obs-modal-bar > button, .survey-actions button, .form-actions button, .btn-row button,
  .action-row > button):not(#hs0):not(#hs1):not(#hs2):not(#hs3) {
  background-image: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--al-head) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  filter: none !important;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease !important;
}
html body :is(.primary-btn, .house-btn, .extractor-btn, .compose-btn, .merge-btn, .rail-act, .rail-connect-btn, .obs-ghost,
  .notify-team-btn, .danger-btn, .settings-btn, .ds-btn, .hs-helper, .app-banner-settings, .file-preview-close,
  .obs-modal-head > button, .obs-modal-bar > button, .survey-actions button, .form-actions button, .btn-row button,
  .action-row > button):not(.snapshot-link):not(#hs0):not(#hs1):not(#hs2):not(#hs3) {
  min-height: 36px !important;
  height: auto !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}
html body :is(.app-banner-settings, .obs-modal-head > button, .file-preview-close):not(#hs0):not(#hs1):not(#hs2):not(#hs3) {
  height: 36px !important;
  padding: 0 14px !important;
}
html body .app-banner-snapshot { background-image: none !important; box-shadow: none !important; }

/* the big ones */
html body :is(#runAutomataBtn, #mergeBtn):not(#hs0):not(#hs1):not(#hs2):not(#hs3) {
  min-height: 54px !important;
  font-size: 17px !important;
  border-radius: 10px !important;
}
html body #signReportBtn:not(#hs0):not(#hs1):not(#hs2):not(#hs3) { min-height: 44px !important; font-size: 13px !important; }

/* ---- RED: a job that builds something ---- */
html:not([data-al-theme="night"]) body :is(.primary-btn, .compose-btn, .merge-btn, .rail-connect-btn, .ds-btn.primary, #extractPrevBtn,
  .survey-actions button, .form-actions button, .btn-row button, .action-row > button):not(.hs-helper):not(.obs-ghost):not(.danger-btn):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not([data-done="1"]):not(.is-built):not(.al-ran):not(.is-received):not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3) {
  background-color: var(--al-red) !important;
  border: 1px solid var(--al-red) !important;
  color: #fff !important;
}
html:not([data-al-theme="night"]) body :is(.primary-btn, .compose-btn, .merge-btn, .rail-connect-btn, .ds-btn.primary, #extractPrevBtn,
  .survey-actions button, .form-actions button, .btn-row button, .action-row > button):not(.hs-helper):not(.obs-ghost):not(.danger-btn):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not([data-done="1"]):not(.is-built):not(.al-ran):not(.is-received):not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3):hover {
  background-color: var(--al-red-deep) !important;
  border-color: var(--al-red-deep) !important;
}

/* Extract Prior Reports is the one extract button that builds (red). */
html:not([data-al-theme="night"]) body #extractPrevBtn:not([data-done="1"]):not(.is-built):not(.al-ran):not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4) {
  background-color: var(--al-red) !important;
  border: 1px solid var(--al-red) !important;
  color: #fff !important;
}
html:not([data-al-theme="night"]) body #extractPrevBtn:not([data-done="1"]):not(.is-built):not(.al-ran):not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):hover {
  background-color: var(--al-red-deep) !important;
}

/* ---- WHITE: a helper ---- */
html:not([data-al-theme="night"]) body :is(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn), .extractor-btn:not(#extractPrevBtn),
  .obs-ghost, .hs-helper, .notify-team-btn, .settings-btn, .app-banner-settings, .file-preview-close, .obs-modal-head > button):not([data-done="1"]):not(.is-built):not(.al-ran):not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3) {
  background-color: var(--al-surface) !important;
  border: 1px solid var(--al-line) !important;
  color: var(--al-ink) !important;
}
html:not([data-al-theme="night"]) body :is(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn), .extractor-btn:not(#extractPrevBtn),
  .obs-ghost, .hs-helper, .notify-team-btn, .settings-btn, .app-banner-settings, .file-preview-close, .obs-modal-head > button):not([data-done="1"]):not(.is-built):not(.al-ran):not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3):hover {
  background-color: var(--al-red-tint) !important;
  border-color: var(--al-red-tint) !important;
  color: var(--al-red-deep) !important;
}
html:not([data-al-theme="night"]) body .danger-btn:not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3) {
  background-color: var(--al-surface) !important;
  border: 1px solid var(--al-red) !important;
  color: var(--al-red-deep) !important;
}

/* ---- BLACK: it ran fine ---- */
html:not([data-al-theme="night"]) body :is(button[data-done="1"], button.al-ran, button.is-built, .compose-btn.is-received):not(#hs0):not(#hs1):not(#hs2):not(#hs3) {
  background-color: var(--al-ink) !important;
  border: 1px solid var(--al-ink) !important;
  color: #fff !important;
  background-image: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #fff !important;
}
html:not([data-al-theme="night"]) body :is(button[data-done="1"], button.al-ran, button.is-built, .compose-btn.is-received):not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3):hover {
  background-color: #141214 !important;
  border-color: #141214 !important;
}

/* ---- hover lifts, click sinks ---- */
html body :is(.primary-btn, .house-btn, .extractor-btn, .compose-btn, .merge-btn, .rail-act, .rail-connect-btn, .obs-ghost, .notify-team-btn,
  .settings-btn, .ds-btn, .hs-helper, .obs-modal-bar > button, .app-banner-settings, .obs-modal-head > button):not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(43, 40, 44, .14) !important;
}
html body :is(.primary-btn, .house-btn, .extractor-btn, .compose-btn, .merge-btn, .rail-act, .rail-connect-btn, .obs-ghost, .notify-team-btn,
  .settings-btn, .ds-btn, .hs-helper, .obs-modal-bar > button, .app-banner-settings, .obs-modal-head > button):not(:disabled):not(#hs0):not(#hs1):not(#hs2):not(#hs3):active {
  transform: translateY(1px) scale(.98);
  box-shadow: none !important;
}

/* ---- LOCKED: faded and flat (a finished-then-locked button stays black) ---- */
html:not([data-al-theme="night"]) body :is(.primary-btn, .house-btn, .extractor-btn, .compose-btn, .merge-btn, .rail-act, .rail-connect-btn, .obs-ghost,
  .notify-team-btn, .settings-btn, .ds-btn, .hs-helper, .obs-modal-bar > button, .survey-actions button, .form-actions button, .btn-row button,
  .action-row > button):disabled:not([data-done="1"]):not(.is-built):not(.al-ran):not(#hs0):not(#hs1):not(#hs2):not(#hs3) {
  background-color: var(--al-mist) !important;
  border: 1px solid var(--al-line) !important;
  color: var(--al-muted) !important;
  -webkit-text-fill-color: var(--al-muted) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---- the brand's red first letter: red on white, never red-on-red ---- */
html body :is(button[data-done="1"], button.al-ran, button.is-built, button:disabled) .bl-a,
html:not([data-al-theme="night"]) body :is(.primary-btn, .compose-btn, .merge-btn, .rail-connect-btn, .ds-btn.primary, #extractPrevBtn):not(.hs-helper):not(.obs-ghost) .bl-a {
  color: inherit !important;
}

/* ---- popups: helpers left, the main action right, one even row ---- */
html body .obs-modal-bar { gap: 10px !important; align-items: stretch !important; }
html body .obs-modal-bar > button { flex: 1 1 0 !important; }

/* ---- headings: a thin solid red rule instead of the dotted one ---- */
html:not([data-al-theme="night"]) body .section-title-row h3 {
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: rgba(217, 65, 44, .55) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 5px !important;
}

/* ---- brand everywhere: the flat AUTOMATA mark heads every popup ---- */
html body .obs-modal-head h2::before,
html body #dataScraperDialog .data-scraper-heading h2::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  vertical-align: -4px;
  background: url('assets/automata-mark-flat.png') center / contain no-repeat;
}
:root:not([data-al-theme="night"]) { --al-edge: rgba(43, 40, 44, .14); }

/* the progress window's Close is a plain white helper too */
html:not([data-al-theme="night"]) body #automataMergeClose:not(#hs0):not(#hs1):not(#hs2) {
  background: var(--al-surface) !important;
  background-image: none !important;
  border: 1px solid var(--al-line) !important;
  color: var(--al-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  min-height: 32px !important;
  font: 600 12.5px/1.2 var(--al-head) !important;
}
html:not([data-al-theme="night"]) body #automataMergeClose:disabled:not(#hs0):not(#hs1):not(#hs2) {
  background: var(--al-mist) !important;
  color: var(--al-muted) !important;
}

/* Kevin, 2026-10-04: "the floating logo I was talking about is the one on the
   homepage not the welcome splash". The welcome splash is back to its old
   546px gray look; the homepage mark gets the large, see-through, slow float. */
:root .empty-board .empty-mark,
:root[data-al-theme="night"] .empty-board .empty-mark {
  width: min(720px, 90%);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url("assets/automata-app-icon.png") center / contain no-repeat;
  opacity: 0.72;
  animation: homeMarkFloat 3.6s ease-in-out infinite;
}
@keyframes homeMarkFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

/* Kevin, 2026-10-03: DATA ENCRYPTED under the AUTOMATA name (data-badge.js). */
.app-banner-datalock { margin: 3px auto 0; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font: 700 9.5px/1.4 var(--al-font, Montserrat, system-ui, sans-serif); letter-spacing: .12em; }
.app-banner-datalock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.app-banner-datalock.is-encrypted { color: #1F7A4A; background: rgba(31, 122, 74, .12); }
.app-banner-datalock.is-open { color: #B3121F; background: rgba(179, 18, 31, .12); }
.app-banner-datalock[hidden] { display: none; }


/* Kevin, 2026-10-07 readability sweep: the splash line and the writer's
   small grey captions were under 3:1 on their light ground. */
.splash-foot { color: #5E5860; }
.writer-bar-sub, .writer-foot, .writer-bar-sub .bl-w, .writer-foot .bl-w { color: #6F6870; }
/* Same sweep, for Settings > Look > night (the whole app dark). */
:root[data-al-theme="night"] .bl-a:not(.bl-flip),
:root[data-al-theme="night"] .bl-f:not(.bl-flip) { color: #F27A66; }
:root[data-al-theme="night"] #splash-view { background: #14131A; }
:root[data-al-theme="night"] .splash-tagline,
:root[data-al-theme="night"] .splash-credential,
:root[data-al-theme="night"] #splashVersion,
:root[data-al-theme="night"] .splash-foot { color: #B4AFC0; }
:root[data-al-theme="night"] body #licenseDriveFixBtn:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5) { color: #8AADDF !important; }
:root[data-al-theme="night"] #teacherSurveyLegend .lg-y { color: #D9A15A; }
:root[data-al-theme="night"] body #summaryWrapper > span:not(#hs0):not(#hs1) { color: #8AADDF !important; }
:root[data-al-theme="night"] body.stones-on #home-view .count-chip:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5) { color: #1A120C !important; }

/* Night board (stones): orange buttons and counts take the board's dark ink
   (white on that orange read under 3:1). Kevin, 2026-10-07 readability sweep. */
html:not([data-al-theme="night"]) body.stones-on #home-view .primary-btn:not(:disabled):not(.danger-btn):not(.hs-helper):not(.obs-ghost):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5),
html:not([data-al-theme="night"]) body.stones-on #home-view .merge-btn:not(:disabled):not(.danger-btn):not(.hs-helper):not(.obs-ghost):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5),
html:not([data-al-theme="night"]) body.stones-on #home-view .compose-btn:not(:disabled):not(.danger-btn):not(.hs-helper):not(.obs-ghost):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5),
html:not([data-al-theme="night"]) body.stones-on #home-view .rail-connect-btn:not(:disabled):not(.danger-btn):not(.hs-helper):not(.obs-ghost):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5),
html:not([data-al-theme="night"]) body.stones-on #home-view .form-actions button:not(:disabled):not(.danger-btn):not(.hs-helper):not(.obs-ghost):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5),
html:not([data-al-theme="night"]) body.stones-on #home-view .survey-actions button:not(:disabled):not(.danger-btn):not(.hs-helper):not(.obs-ghost):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5),
html:not([data-al-theme="night"]) body.stones-on #home-view .btn-row button:not(:disabled):not(.danger-btn):not(.hs-helper):not(.obs-ghost):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5),
html:not([data-al-theme="night"]) body.stones-on #home-view .action-row > button:not(:disabled):not(.danger-btn):not(.hs-helper):not(.obs-ghost):not(.extractor-btn):not(.notify-team-btn):not(.settings-btn):not(.house-btn:not(.primary-btn):not(.compose-btn):not(.merge-btn):not(.rail-connect-btn)):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5) {
  color: #1A120C !important;
  -webkit-text-fill-color: #1A120C !important;
}
html:not([data-al-theme="night"]) body.stones-on #home-view .count-chip:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5) { color: #1A120C !important; }

/* Kevin, 2026-10-08: the "new" dot — a student the Caseload changed since they were last opened. */
.caseload-new-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.28);
  vertical-align: middle;
  flex: 0 0 auto;
}

/* Kevin, 2026-10-08: an upload spot with a file dragged over it. */
.drop-hover {
  outline: 3px dashed #22c55e !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.18) !important;
}

/* Kevin, 2026-10-08: Save PDF to Student Folder is retired (Run AUTOMATA files it). */
#home-view #homeMergeDock > #savePdfBtn.is-retired,
#savePdfBtn.is-retired { display: none !important; }
/* The Download picker: PDF, Word .docx or Word .doc, right above Download. */
#home-view #homeMergeDock > #downloadFormat {
  display: block !important;
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  padding: 6px 10px;
  font: 600 12.5px/1.2 var(--al-head);
  color: var(--al-ink, #1f2937);
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: 8px;
}
#home-view #homeMergeDock > #downloadFormat:disabled {
  color: var(--al-muted);
  background: var(--al-mist);
}

/* Kevin, 2026-10-08: "the help buttons and the buttons next to it are all
   different sizes and shapes and fonts". Sign-in chip, Help and Settings in
   the top right: one height, one shape, one font. Each keeps its own colour
   (the sign-in chip still says signed in / not signed in by colour). */
#home-view .al-banner-right { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
#home-view .al-banner-right > #bannerAccountBtn:not(#al-x1):not(#al-x2):not(#al-x3):not(#al-x4),
#home-view .al-banner-right > #caseloadHelpLink:not(#al-x1):not(#al-x2):not(#al-x3):not(#al-x4),
#home-view .al-banner-right > #settingsOpenBtn:not(#al-x1):not(#al-x2):not(#al-x3):not(#al-x4) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 10px !important;
  font: 600 13px/1 var(--al-head) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}
#home-view .al-banner-right > #caseloadHelpLink:not(#al-x1):not(#al-x2):not(#al-x3):not(#al-x4),
#home-view .al-banner-right > #settingsOpenBtn:not(#al-x1):not(#al-x2):not(#al-x3):not(#al-x4) {
  background: var(--al-surface) !important;
  background-image: none !important;
  color: var(--al-ink) !important;
  border-color: var(--al-line) !important;
}
#home-view .al-banner-right > #caseloadHelpLink:not(#al-x1):not(#al-x2):not(#al-x3):not(#al-x4):hover,
#home-view .al-banner-right > #settingsOpenBtn:not(#al-x1):not(#al-x2):not(#al-x3):not(#al-x4):hover {
  background: var(--al-red-tint) !important;
  color: var(--al-red-deep) !important;
  border-color: color-mix(in srgb, var(--al-red) 45%, var(--al-line)) !important;
}

/* Kevin, 2026-10-08: "make the text window on the student picker larger (not
   the text, just the window. right now its going off the edges)". The name
   box takes all the room in the picker, and the list that opens is solid,
   wider than the box, and wraps long names instead of running off. */
#home-view .student-select-field { gap: 4px !important; padding-right: 6px !important; min-height: 52px !important; }
#home-view .student-select-field .student-select-caret-btn { width: 32px !important; min-width: 32px !important; height: 32px !important; padding: 0 !important; }
#home-view .student-select-field input.student-select-name,
#home-view #studentSelectLabel {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
}
#home-view .student-select:has(#studentSelectMenu:not(.hidden)) { position: relative !important; z-index: 1000 !important; }
#home-view #studentSelectMenu:not(.hidden) {
  background: var(--al-surface, #1b1816) !important;
  opacity: 1 !important;
  z-index: 1000 !important;
  max-height: 440px !important;
}
#home-view #studentSelectMenu .student-select-option .student-select-name {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
/* The open list is never see-through: a faded (locked) picker comes up to full
   strength while its list is open, so nothing behind shows through it. */
#home-view .student-picker:has(#studentSelectMenu:not(.hidden)) { opacity: 1 !important; }

/* Kevin, 2026-10-08: "yes" to every button group on the home screen being one
   size, one shape and one font — "except for AUTOMATA that one should be
   bigger and red". Colours stay as they are (orange jobs, quiet helpers);
   only the size, corners and lettering are made the same everywhere. */
html body #home-view :is(button.house-btn, button.hs-helper, button.rail-act, button.extractor-btn, button.primary-btn, button.notify-team-btn, button.se-open-btn, button.se-row-open, button.share-draft-btn, button.compose-btn, .al-banner-right > *):not(#runAutomataBtn):not(.stone-head):not(.rail-badge):not(.stones-photo-tile):not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5) {
  box-sizing: border-box !important;
  min-height: 42px !important;
  height: auto !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  font-family: var(--al-head) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
/* Run AUTOMATA: the one big red button. */
html body #home-view #runAutomataBtn:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5) {
  min-height: 68px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  font-family: var(--al-head) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  background-color: #D9412C !important;
  background-image: linear-gradient(180deg, #E8553F 0%, #D9412C 55%, #B8321F 100%) !important;
  border: 1px solid #B8321F !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25) !important;
}
html body #home-view #runAutomataBtn:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):hover:not(:disabled) {
  background-image: linear-gradient(180deg, #D9412C 0%, #B8321F 100%) !important;
}
html body #home-view #runAutomataBtn:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):disabled { opacity: .6 !important; }
html body #home-view #runAutomataBtn .bl-a { color: #fff !important; }

/* Kevin, 2026-10-08: the red "Blanks left" list on the student card. */
#home-view .blanks-left { margin-top: 14px; padding: 12px; border: 1px solid #D9412C; border-radius: 10px; background: rgba(217, 65, 44, .08); }
#home-view .blanks-left-head { font: 800 12px/1.2 var(--al-head); letter-spacing: .08em; text-transform: uppercase; color: #E8553F; }
#home-view .blanks-left-note { margin: 4px 0 8px; font-size: 11.5px; color: var(--al-muted); }
#home-view .blanks-left-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 6px; align-items: center; margin-top: 6px; }
#home-view .blanks-left-name { font: 700 12px/1.2 var(--al-head); color: var(--al-ink); overflow-wrap: anywhere; }
#home-view .blanks-left-input { min-width: 0; height: 32px; padding: 0 8px; border-radius: 8px; }
#home-view .blanks-left-fill:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):not(#hs6) { min-height: 32px !important; height: 32px !important; padding: 0 12px !important; border-radius: 8px !important; background: #D9412C !important; background-image: none !important; color: #fff !important; border: 1px solid #B8321F !important; font: 700 12px/1 var(--al-head) !important; }

/* Kevin, 2026-10-08: "there is no way to scroll and there does not appear to
   be an AUTOMATA button". On a laptop-size window the right column was taller
   than the screen and could not scroll, so Run AUTOMATA sat below the edge.
   All three columns scroll on their own, and the Run AUTOMATA box sits at
   the top of its column so it is on screen without scrolling. */
html body #home-view > :is(.picker, .board, .ready-pane):not(#mv0):not(#mv1):not(#mv2):not(#mv3) {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  min-height: 0 !important;
}
html body.stones-on #home-view > .ready-pane > #stonesAuto:not(#mv0):not(#mv1):not(#mv2):not(#mv3) {
  order: -1 !important;
}

/* Kevin, 2026-10-30: "fix the buttons - they are not the same size" + "add the other
   updates to the app". Same fixes as online AUTOMATA: the Help window's six buttons
   are one size (three to a row), Download PDF / Open Doc / Copy Link fit their words,
   and the small .docx / .doc links stay readable. Long :not(#id) chains so these
   win over the Stones home sheets. */
html body .guide-card .guide-choice:not(#ol0):not(#ol1):not(#ol2):not(#ol3):not(#ol4):not(#ol5):not(#ol6):not(#ol7):not(#ol8):not(#ol9):not(#ol10):not(#ol11) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
html body .guide-card .guide-choice > button:not(#ol0):not(#ol1):not(#ol2):not(#ol3):not(#ol4):not(#ol5):not(#ol6):not(#ol7):not(#ol8):not(#ol9):not(#ol10):not(#ol11) {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}
html body .report-trio > .trio-btn:not(#ol0):not(#ol1):not(#ol2):not(#ol3):not(#ol4):not(#ol5):not(#ol6):not(#ol7):not(#ol8):not(#ol9):not(#ol10):not(#ol11) {
  padding: 0 4px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}
html body[data-al-theme="night"] .trio-link:not(#ol0):not(#ol1):not(#ol2):not(#ol3):not(#ol4):not(#ol5):not(#ol6):not(#ol7):not(#ol8):not(#ol9):not(#ol10):not(#ol11),
html[data-al-theme="night"] body .trio-link:not(#ol0):not(#ol1):not(#ol2):not(#ol3):not(#ol4):not(#ol5):not(#ol6):not(#ol7):not(#ol8):not(#ol9):not(#ol10):not(#ol11) {
  color: #F3EEE6 !important;
  opacity: 1 !important;
}