:root{
  /* Torquay Academy — deep maroon anchor on a warm wine-black ground */
  --bg:#150911; --panel:#241019; --panel-2:#2b1420; --line:#3a2029;
  --ink:#F7EEF1; --muted:#B79AA4;
  --maroon:#8A1A4D; --maroon-2:#6f1440; --accent:#D23A6C; --rose:#EBA7BE;
  /* semantic status — a restrained traffic light, tuned to the palette */
  --on:#3BB273; --watch:#E6A93C; --act:#E24B5B;
  /* the eight Torquay Academy houses — official palette */
  --house-brunel:#3954A5; --house-christie:#88CDEA; --house-darwin:#ED2226;
  --house-fawcett:#FDE900; --house-harrison:#F78F1E; --house-kitson:#139C4C;
  --house-nearne:#54C3BD; --house-pengelly:#6F439A;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1500px 1000px at 84% -10%, rgba(210,58,108,.10), transparent 60%),
    radial-gradient(1200px 820px at -12% 116%, rgba(138,26,77,.13), transparent 55%),
    #140a10;
  color:var(--ink);
  font-family:'Open Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
button{font-family:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------------- 16:9 stage (letterboxed, scales to any projector) ------- */
#app{ width:100vw; height:100vh; display:flex; align-items:center; justify-content:center }
.stage{
  position:relative;
  width:min(100vw, 177.78vh);
  height:min(56.25vw, 100vh);
  background:var(--bg);
  container-type:size;
  overflow:hidden;
  box-shadow:0 0 0 1px #000, 0 40px 120px -40px #000;
}

/* ===================== LOGIN GATE ======================================== */
.login{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:50;
  background:
    radial-gradient(120cqw 80cqh at 78% -10%, rgba(56,189,248,.10), transparent 60%),
    var(--bg);
}
.login.hidden{display:none}
.login-card{width:38cqw; padding:5cqh 3cqw}
.brand-pulse{display:flex; gap:.55cqw; margin-bottom:3.2cqh}
.brand-pulse i{height:1.2cqh; flex:1; border-radius:2px; background:var(--line); display:block}
.brand-pulse i:nth-child(1){background:var(--on)}
.brand-pulse i:nth-child(3){background:var(--watch)}
.brand-pulse i:nth-child(5){background:var(--act)}
.brand-pulse i:nth-child(7){background:var(--accent)}
.login h1{font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:4.6cqw;
  line-height:.98; letter-spacing:-.02em; margin-bottom:1.2cqh}
.login .sub{color:var(--muted); font-size:1.35cqw; margin-bottom:4cqh; max-width:30cqw; line-height:1.5}
.field{margin-bottom:1.8cqh}
.field label{display:block; font-size:1cqw; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.8cqh}
.field input{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:1.5cqh 1.1cqw; font-size:1.6cqw; font-family:'Open Sans',sans-serif;
  border-radius:6px; transition:border-color .15s;
}
.field input:focus{border-color:var(--accent); outline:none}
.signin{
  margin-top:1cqh; width:100%; background:var(--ink); color:#0c141d; border:none;
  padding:1.7cqh; font-size:1.5cqw; font-weight:700; border-radius:6px; letter-spacing:.01em;
  transition:transform .12s, background .15s;
}
.signin:hover{background:#fff}
.signin:active{transform:translateY(1px)}
.login-msg{min-height:2.4cqh; margin-top:1.6cqh; font-size:1.25cqw; color:var(--act)}
/* themed replacement for the browser's native "please fill in this field"
   bubble — anchored under the offending field, flips with the theme vars */
.field{position:relative}
.fieldbubble{position:absolute; left:0; top:calc(100% + 1cqh); z-index:20;
  display:flex; align-items:center; gap:.8cqw; text-align:left;
  background:var(--panel-2); color:var(--ink); border:1px solid var(--act);
  border-radius:8px; padding:.9cqh 1.1cqw; font-size:1.2cqw; line-height:1.25;
  box-shadow:0 .8cqh 2.2cqh rgba(0,0,0,.35); animation:fbpop .12s ease-out}
.fieldbubble::before{content:''; position:absolute; left:2cqw; top:-.75cqh; width:1.3cqh; height:1.3cqh;
  background:var(--panel-2); border-left:1px solid var(--act); border-top:1px solid var(--act); transform:rotate(45deg)}
/* placed above the field instead (caret points down) — used where a checklist
   sits directly below the input */
.fieldbubble.above{top:auto; bottom:calc(100% + 1cqh)}
.fieldbubble.above::before{top:auto; bottom:-.75cqh;
  border-left:none; border-top:none; border-right:1px solid var(--act); border-bottom:1px solid var(--act)}
.fieldbubble .fb-i{flex:none; width:1.7cqw; height:1.7cqw; border-radius:5px; background:var(--act); color:#fff;
  font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.25cqw; line-height:1}
@keyframes fbpop{from{opacity:0; transform:translateY(-.5cqh)} to{opacity:1; transform:none}}
/* live password checklist — each rule fills green with a CSS-drawn tick when met */
.pwrules{list-style:none; margin:1.4cqh 0 2cqh; padding:0; display:grid; gap:.7cqh; text-align:left}
.pwrules li{position:relative; padding-left:2.4cqw; font-size:1.15cqw; color:var(--muted); transition:color .15s}
.pwrules li::before{content:''; position:absolute; left:0; top:.1cqh; width:1.4cqw; height:1.4cqw;
  border:1px solid var(--line); border-radius:50%; box-sizing:border-box; transition:background .15s, border-color .15s}
.pwrules li.ok{color:var(--on)}
.pwrules li.ok::before{background:var(--on); border-color:var(--on)}
.pwrules li.ok::after{content:''; position:absolute; left:.5cqw; top:.28cqh; width:.34cqw; height:.68cqw;
  border:solid var(--bg); border-width:0 .17cqw .17cqw 0; transform:rotate(45deg); box-sizing:border-box}
.login-mode{margin-top:3.4cqh; font-size:1.05cqw; color:var(--muted); display:flex; align-items:center; gap:.7cqw}
.login-admin{margin-top:1.4cqh; font-size:1.05cqw}
.login-admin a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:color .15s, border-color .15s}
.login-admin a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.dot{width:.7cqw; height:.7cqw; border-radius:50%; background:var(--watch)}
.dot.live{background:var(--on)}

/* ===================== DECK ============================================== */
.deck{position:absolute; inset:0; z-index:10}
.deck.hidden{display:none}

.slide{position:absolute; inset:0; display:flex; flex-direction:column;
  padding:5cqh 4.2cqw 3.4cqh;
  opacity:0; visibility:hidden; transform:translateX(2.2cqw);
  transition:opacity .5s ease, transform .5s ease, visibility .5s;
}
.slide.active{opacity:1; visibility:visible; transform:none}
@media (prefers-reduced-motion:reduce){
  .slide{transition:opacity .2s; transform:none}
}

/* header band ----------------------------------------------------------- */
.head{display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:1px solid var(--line); padding-bottom:2cqh; margin-bottom:2.6cqh}
.kicker{font-family:'Open Sans',sans-serif; font-size:1.15cqw; letter-spacing:.06em;
  color:var(--muted); text-transform:uppercase}
.kicker b{color:var(--ink); font-weight:600}
.kicker .wk{color:var(--accent)}
.title{font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:4.4cqw;
  line-height:.96; letter-spacing:-.02em; margin-top:1.1cqh}
.title small{display:block; font-family:'Open Sans'; font-weight:500; font-size:1.25cqw;
  color:var(--muted); letter-spacing:0; margin-top:.7cqh}
/* homework provider logo, left of the title (kicker line stays full-width
   above); rounded to match .pcard (8px) */
.head-l{display:flex; align-items:center; gap:1.6cqw; margin-top:1.1cqh}
.head-l .title{margin-top:0}
.hw-logo{height:9cqh; width:auto; flex:none; border-radius:8px; object-fit:contain}
.navcluster{display:flex; align-items:center; gap:1.4cqw}
.fcount{font-family:'Open Sans',sans-serif; font-size:1.2cqw; color:var(--muted); white-space:nowrap}
.fcount b{color:var(--ink); font-weight:600}

/* form-pulse ribbon (the signature) ------------------------------------- */
.pulse-wrap{display:flex; align-items:center; gap:2cqw; margin-bottom:2.4cqh}
.pulse{display:flex; gap:.45cqw; flex:1}
.pulse i{flex:1; height:2.2cqh; border-radius:2px; background:var(--line); display:block;
  transition:background .4s}
.pulse i.on{background:var(--on)} .pulse i.watch{background:var(--watch)} .pulse i.act{background:var(--act)}
.summary{display:flex; gap:1.6cqw; font-size:1.2cqw; color:var(--muted); white-space:nowrap;
  font-family:'Open Sans',sans-serif}
.summary b{font-weight:600}
.summary .on b{color:var(--on)} .summary .watch b{color:var(--watch)} .summary .act b{color:var(--act)}

/* roster of data bars --------------------------------------------------- */
.roster{flex:1; display:flex; flex-direction:column; justify-content:space-between}
.row{display:grid; grid-template-columns:13cqw 1fr 5cqw; align-items:center; gap:1.4cqw}
.row .name{font-size:1.55cqw; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .name .sn{color:var(--muted); font-weight:400}
.track{height:1.5cqh; background:#0d1622; border:1px solid var(--line); border-radius:3px; overflow:hidden}
.fill{height:100%; border-radius:2px 0 0 2px; transition:width .5s ease, background-color .3s}
.fill.on{background:var(--on)} .fill.watch{background:var(--watch)} .fill.act{background:var(--act)}
.fill.h-brunel{background:var(--house-brunel)} .fill.h-christie{background:var(--house-christie)}
.fill.h-darwin{background:var(--house-darwin)} .fill.h-fawcett{background:var(--house-fawcett)}
.fill.h-harrison{background:var(--house-harrison)} .fill.h-kitson{background:var(--house-kitson)}
.fill.h-nearne{background:var(--house-nearne)} .fill.h-pengelly{background:var(--house-pengelly)}
.val{font-family:'Open Sans',sans-serif; font-size:1.7cqw; font-weight:500; text-align:right; font-variant-numeric:tabular-nums}
.val.on{color:var(--on)} .val.watch{color:var(--watch)} .val.act{color:var(--act)}
.val .u{font-size:.95cqw; color:var(--muted); margin-left:.25cqw}

/* pupil data cards ------------------------------------------------------ */
/* --cs is a per-container scale set by fitCards(): a big group's cards shrink to
   fit the slide instead of overflowing. Defaults to 1 (small groups unchanged). */
.cards{--cs:1; flex:1; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:calc(1.1cqh * var(--cs)) 1.6cqw; align-content:stretch; min-height:0}
.pcard{background:var(--panel); border:1px solid var(--line); border-left:.4cqw solid var(--line);
  border-radius:8px; padding:0 1.4cqw; display:flex; flex-direction:column; justify-content:center; gap:calc(.9cqh * var(--cs)); min-width:0}
.pcard.on{border-left-color:var(--on)} .pcard.watch{border-left-color:var(--watch)} .pcard.act{border-left-color:var(--act)}
.pcard.h-brunel{border-left-color:var(--house-brunel)} .pcard.h-christie{border-left-color:var(--house-christie)}
.pcard.h-darwin{border-left-color:var(--house-darwin)} .pcard.h-fawcett{border-left-color:var(--house-fawcett)}
.pcard.h-harrison{border-left-color:var(--house-harrison)} .pcard.h-kitson{border-left-color:var(--house-kitson)}
.pcard.h-nearne{border-left-color:var(--house-nearne)} .pcard.h-pengelly{border-left-color:var(--house-pengelly)}
.pcard .prow{display:flex; align-items:baseline; justify-content:space-between; gap:1cqw}
.pcard .name{font-size:calc(1.7cqw * var(--cs)); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcard .name .sn{color:var(--muted); font-weight:400}
.pcard .val{font-family:'Open Sans',sans-serif; font-size:calc(1.9cqw * var(--cs)); font-weight:500;
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
.pcard .val.on{color:var(--on)} .pcard .val.watch{color:var(--watch)} .pcard .val.act{color:var(--act)}
.pcard .val .u{font-size:calc(.85cqw * var(--cs)); color:var(--muted); margin-left:.25cqw}
.pcard .track{height:calc(1cqh * var(--cs))}
/* 3- and 4-across variants for fuller lists (fitCards shrinks fonts to match) */
.cards.three{grid-template-columns:1fr 1fr 1fr}
.cards.four{grid-template-columns:repeat(4,1fr)}
.pcard .name .rank{font-family:'Open Sans',sans-serif; color:var(--muted); font-weight:600; margin-right:.5cqw}

/* band slides ----------------------------------------------------------- */
.bandtag{align-self:flex-start; font-family:'Open Sans',sans-serif; font-size:1.25cqw;
  letter-spacing:.04em; padding:.7cqh 1.1cqw; border-radius:6px; border:1px solid var(--line);
  color:var(--muted); white-space:nowrap; margin-top:1.1cqh}
.bandtag.on{color:var(--on); border-color:var(--on)}
.bandtag.watch{color:var(--watch); border-color:var(--watch)}
.bandtag.act{color:var(--act); border-color:var(--act)}
.band-rule{font-size:1.2cqw; color:var(--muted); border-left:.35cqw solid var(--line);
  padding:.4cqh 1cqw; margin-top:1.8cqh}
.band-rule.on{border-left-color:var(--on)} .band-rule.watch{border-left-color:var(--watch)} .band-rule.act{border-left-color:var(--act)}
.band-empty{flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:2.2cqw; font-weight:500; color:var(--muted); border:1px dashed var(--line); border-radius:12px; padding:3cqh}
.band-empty.act{color:var(--on)}
.motto{font-family:'Open Sans',sans-serif; font-size:.95cqw; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); text-align:right}

/* house bar chart ------------------------------------------------------- */
.chart{flex:1; display:flex; align-items:flex-end; gap:1.4cqw; padding:2cqh .5cqw 0; min-height:0}
.barcol{flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.7cqh}
.barcol .bv{font-family:'Open Sans',sans-serif; font-size:1.2cqw; color:var(--muted)}
.barcol.lead .bv{color:var(--ink); font-weight:600}
.barcol .bar{width:72%; min-height:.4cqh; border-radius:5px 5px 0 0; background:var(--accent)}
.barcol .bl-mascot{height:18cqh; width:auto; max-width:100%; object-fit:contain; flex:none}
/* Kitson's artwork fills its frame more than the others — scale it down from
   the centre so its visual centre lines up with the other mascots (transform
   doesn't change its layout box, so the bars stay aligned too) */
.barcol .bl-mascot.h-kitson{transform:scale(.88); transform-origin:center}

/* agenda: morning routine + equipment chips ----------------------------- */
.routine{display:flex; flex-wrap:wrap; gap:.6cqw; margin-bottom:1.4cqh}
.routine span{font-family:'Open Sans',sans-serif; font-size:1.05cqw; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:.5cqh .8cqw}
.equip{display:flex; flex-wrap:wrap; align-items:center; gap:.5cqw; margin-bottom:2.2cqh}
.equip .el{font-size:.9cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:.3cqw}
.equip span:not(.el){font-size:1cqw; color:var(--muted); border:1px dashed var(--line); border-radius:4px; padding:.35cqh .7cqw}

/* ---- equipment (slide 2): roll-in carousel, two items at a time ------ */
.eqstage{flex:1; position:relative; overflow:hidden; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4cqh}
.eqpair{display:flex; align-items:center; justify-content:center; gap:10cqw; min-height:42cqh}
.eqslot{display:flex; flex-direction:column; align-items:center; gap:2.5cqh}
.eqcap{font-size:2.8cqw; font-weight:800; color:var(--ink); text-align:center;
  opacity:0; transition:opacity .45s ease}
.eqcap.show{opacity:1}
.eqimg{height:34cqh; width:auto; max-width:32cqw; object-fit:contain}
.eqhint{font-family:'Open Sans',sans-serif; font-size:1.3cqw; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
/* skip button — jumps past the carousel to the next slide */
.eqskip{position:absolute; right:4.2cqw; bottom:8cqh; z-index:6;
  background:var(--maroon, var(--accent)); color:#fff; border:none; border-radius:8px;
  padding:1.1cqh 2cqw; font-family:'Open Sans',sans-serif; font-size:1.3cqw; font-weight:700;
  letter-spacing:.02em; box-shadow:0 8px 22px -14px #000; transition:background .15s}
.eqskip:hover{background:var(--accent)}
.eqimg.rollin{animation:eqRollIn .8s cubic-bezier(.15,.7,.25,1) both}
.eqimg.rollout{animation:eqRollOut .55s ease-in both}
@keyframes eqRollIn{
  0%{transform:translateX(85vw) rotate(600deg); opacity:0}
  55%{opacity:1}
  100%{transform:translateX(0) rotate(0); opacity:1}
}
@keyframes eqRollOut{
  0%{transform:translateX(0) rotate(0); opacity:1}
  100%{transform:translateX(-85vw) rotate(-600deg); opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .eqimg.rollin,.eqimg.rollout{animation-duration:.01ms}
}

/* ---- equipment check (slide 3): spreadsheet register ----------------- */
.eqcheck{flex:1; display:flex; flex-direction:column; min-height:0}
.eqwrap{flex:1; overflow:auto; border:1px solid var(--line); border-radius:10px}
.eqtable{border-collapse:separate; border-spacing:0; width:100%; font-size:1cqw}
.eqtable th,.eqtable td{padding:.5cqh .55cqw; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line); text-align:center; white-space:nowrap}
.eqtable thead th{position:sticky; top:0; z-index:2; background:var(--panel);
  color:var(--muted); font-weight:600; font-size:.85cqw; letter-spacing:.02em}
.eqtable .need{color:var(--accent); font-weight:700}
.eqtable .corner{position:sticky; left:0; top:0; z-index:3; background:var(--panel); text-align:left}
.eqtable .rowh{position:sticky; left:0; z-index:1; background:var(--panel);
  text-align:left; font-weight:600; color:var(--ink); font-size:.95cqw}
.eqtable tbody tr:nth-child(even) td,.eqtable tbody tr:nth-child(even) .rowh{background:rgba(255,255,255,.025)}
.eqtable td.has{background:rgba(226,75,91,.16)}
.eqtable select{width:100%; min-width:2.4cqw; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:5px; padding:.3cqh .2cqw;
  font-family:'Open Sans',sans-serif; font-size:.95cqw; text-align:center}
.eqtable td.has select{border-color:var(--act); color:var(--act); font-weight:700}
.eqbar{display:flex; align-items:center; gap:1.4cqw; margin-top:1.4cqh}
.eqbar .spacer{flex:1}
.eqnote{font-size:1.1cqw; color:var(--muted)}
.eqnote.ok{color:var(--on)} .eqnote.warn{color:var(--watch)} .eqnote.err{color:var(--act)}
.eqsend{background:var(--maroon, var(--accent)); color:#fff; border:none; border-radius:8px;
  padding:1cqh 1.8cqw; font-size:1.15cqw; font-weight:700; font-family:'Open Sans',sans-serif; cursor:pointer}
.eqsend:hover{background:var(--accent)}
.eqsend[disabled]{opacity:.5; cursor:default}
.eqclear{background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:8px;
  padding:1cqh 1.4cqw; font-size:1.1cqw; font-weight:600; font-family:'Open Sans',sans-serif; cursor:pointer}
.eqclear:hover{color:var(--ink); border-color:var(--muted)}

/* footer / progress ----------------------------------------------------- */
.foot{display:flex; align-items:center; justify-content:space-between; margin-top:2.4cqh}
.dots{display:flex; gap:.7cqw}
.dots button{width:.85cqw; height:.85cqw; padding:0; border-radius:50%; border:none;
  background:var(--line); transition:background .2s, transform .2s}
.dots button.on{background:var(--accent); transform:scale(1.15)}
.legend{font-family:'Open Sans',sans-serif; font-size:1cqw; color:var(--muted); display:flex; gap:1.4cqw}
.legend span{display:inline-flex; align-items:center; gap:.5cqw}
.legend i{width:.9cqw; height:.9cqw; border-radius:2px; display:inline-block}
.progress{position:absolute; left:0; bottom:0; height:.45cqh; background:var(--accent); width:0;
  transition:width .25s linear; opacity:.85}

/* ---- agenda (slide 1) ------------------------------------------------- */
.agenda{flex:1; display:grid; grid-template-columns:1.1fr 1fr; gap:3cqw; align-items:stretch}
/* min-width:0 stops a long code from stretching its grid track past its share */
.agenda .lead, .agenda .rota{min-width:0}
/* 13cqw suits short codes ("7B"); fitFormMark() shrinks longer ones inline to
   fit the column on one line. nowrap keeps the measure/fit accurate (no mid-code
   line breaks); min-width:0 above stops nowrap text from stretching the track. */
.agenda .lead .form-mark{font-family:Arial,Helvetica,sans-serif; font-weight:800;
  font-size:13cqw; line-height:.85; letter-spacing:-.04em; white-space:nowrap}
.agenda .lead .tutor{font-size:2.3cqw; font-weight:600; margin-top:1.4cqh}
.agenda .lead .wkbadge{display:inline-block; margin-top:2.6cqh; font-family:'Open Sans',sans-serif;
  font-size:1.3cqw; letter-spacing:.1em; color:var(--accent); border:1px solid var(--line);
  padding:.7cqh 1cqw; border-radius:4px}
.agenda .rota{display:flex; flex-direction:column; justify-content:center}
.agenda .rota .lbl{font-size:2.6cqw; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.15; margin-bottom:2.8cqh}
.actlist{display:flex; flex-direction:column}
.actitem{font-size:1.9cqw; font-weight:600; color:var(--ink); line-height:1.35;
  padding:1.5cqh 0; border-top:1px solid var(--line)}
.actitem:last-child{border-bottom:1px solid var(--line)}
.actempty{font-size:1.4cqw; color:var(--muted); padding:2cqh 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.rota-item{display:flex; gap:1.4cqw; padding:1.7cqh 0; border-top:1px solid var(--line)}
.rota-item:last-child{border-bottom:1px solid var(--line)}
.rota-item .mk{width:.4cqw; flex:none; border-radius:2px; background:var(--accent)}
.rota-item.now .mk{background:var(--on)}
.rota-item .when{font-family:'Open Sans',sans-serif; font-size:1.2cqw; color:var(--muted); width:7cqw; flex:none; padding-top:.2cqh}
.rota-item .what b{display:block; font-size:1.8cqw; font-weight:600}
.rota-item .what span{font-size:1.25cqw; color:var(--muted)}

/* ---- attendance (slide 6) hero --------------------------------------- */
.att{flex:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:3.4cqw}
.att .hero{display:flex; flex-direction:column; justify-content:center}
.att .hero .big{font-family:'Open Sans',sans-serif; font-weight:500; font-size:11cqw; line-height:.85; letter-spacing:-.03em}
.att .hero .big .pc{font-size:4cqw; color:var(--muted)}
.att .hero .cap{font-size:1.3cqw; color:var(--muted); margin-top:1.4cqh; letter-spacing:.04em}
/* right side: roll of pupils at 100% this term */
.att .honour{display:flex; flex-direction:column; min-height:0}
.att .honour-h{font-size:1.2cqw; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.6cqh}
.att .compact{display:flex; flex-direction:column; justify-content:center; gap:.6cqh}
.att .compact .row{grid-template-columns:11cqw 1fr 4cqw}
.att .compact .row .name{font-size:1.35cqw}
.att .compact .row .val{font-size:1.45cqw}

/* ---- house (slide 7) --------------------------------------------------- */
.house-tot{display:flex; gap:1cqw; margin-bottom:2.4cqh}
.house-tot .ht{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:1.4cqh 1.2cqw; border-left:.4cqw solid var(--line)}
.house-tot .ht.h-brunel{border-left-color:var(--house-brunel)}
.house-tot .ht.h-christie{border-left-color:var(--house-christie)}
.house-tot .ht.h-darwin{border-left-color:var(--house-darwin)}
.house-tot .ht.h-fawcett{border-left-color:var(--house-fawcett)}
.house-tot .ht.h-harrison{border-left-color:var(--house-harrison)}
.house-tot .ht.h-kitson{border-left-color:var(--house-kitson)}
.house-tot .ht.h-nearne{border-left-color:var(--house-nearne)}
.house-tot .ht.h-pengelly{border-left-color:var(--house-pengelly)}
.house-tot .ht .hn{font-size:1.15cqw; color:var(--muted); letter-spacing:.06em}
.house-tot .ht .hp{font-family:'Open Sans',sans-serif; font-size:2.5cqw; font-weight:500}
.house-tot .ht.lead .hn::after{content:' · leading'; color:var(--ink)}

/* ---- announcements (slide 8) ------------------------------------------ */
/* Centred; if there are too many to fit, fitNotices() shrinks --ns so the whole
   set fits the slide (like the pupil grids) — nothing is clipped. */
.notices{--ns:1; flex:1; min-height:0; display:flex; flex-direction:column;
  gap:calc(1.4cqh * var(--ns)); justify-content:center; overflow:hidden}
.notice{display:grid; grid-template-columns:8cqw 1fr; gap:1.6cqw; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-left:.4cqw solid var(--accent);
  border-radius:6px; padding:calc(2.2cqh * var(--ns)) calc(2cqw * var(--ns))}
.notice.form{border-left-color:var(--watch)}
.notice .tag{font-family:'Open Sans',sans-serif; font-size:calc(1.15cqw * var(--ns)); letter-spacing:.08em; color:var(--muted)}
.notice.form .tag{color:var(--watch)}
.notice .body{font-size:calc(1.75cqw * var(--ns)); line-height:1.35}

/* ---- birthdays slide -------------------------------------------------- */
/* natural-height cards, vertically centred (so one birthday doesn't balloon to
   fill the slide). Name styled like other slides; age in the accent colour. */
.bdays{flex:1; display:flex; flex-direction:column; gap:1.6cqh; justify-content:center; overflow:hidden}
.bday{background:var(--panel); border:1px solid var(--line); border-left:.4cqw solid var(--on);
  border-radius:8px; padding:2.4cqh 2.6cqw; font-size:2.4cqw; line-height:1.2}
.bday.weekend{border-left-color:var(--watch)}
.bday .sn{color:var(--muted); font-weight:400}
.bday b{font-weight:600; color:var(--on)}
.bday.weekend b{color:var(--watch)}

/* ---- top-right controls ---------------------------------------------- */
.controls{position:absolute; top:2.4cqh; right:2.6cqw; z-index:20; display:flex; gap:.8cqw; align-items:center}
.controls button{background:rgba(24,36,51,.7); border:1px solid var(--line); color:var(--muted);
  border-radius:5px; padding:.9cqh 1cqw; font-size:1cqw; backdrop-filter:blur(4px); transition:color .15s, border-color .15s}
.controls button:hover{color:var(--ink); border-color:var(--accent)}
/* tutor-group picker (any teacher can pick any group — for cover) */
.formpick-wrap{display:inline-flex; align-items:center; gap:.5cqw}
.formpick-lbl{font-size:.85cqw; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.formpick{background:rgba(36,16,25,.7); border:1px solid var(--line); color:var(--ink);
  border-radius:5px; padding:.85cqh .9cqw; font-family:'Open Sans',sans-serif; font-size:1cqw; font-weight:600;
  backdrop-filter:blur(4px); cursor:pointer; transition:color .15s, border-color .15s}
.formpick:hover{border-color:var(--accent)}
.formpick:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(210,58,108,.14)}
.formpick option{background:var(--panel); color:var(--ink)}
.conn{display:inline-flex; align-items:center; gap:.5cqw; font-family:'Open Sans',sans-serif;
  font-size:.95cqw; color:var(--muted); padding-right:.4cqw}
.conn .d{width:.7cqw; height:.7cqw; border-radius:50%; background:var(--watch)}
.conn .d.live{background:var(--on)}
.paused-tag{position:absolute; top:2.4cqh; left:2.6cqw; z-index:20; font-family:'Open Sans',sans-serif;
  font-size:1cqw; letter-spacing:.12em; color:var(--watch); border:1px solid var(--line);
  background:rgba(24,36,51,.7); padding:.7cqh .9cqw; border-radius:5px; display:none}
.paused-tag.show{display:block}

/* ========================================================================
   TORQUAY ACADEMY re-skin — maroon anchor, editorial type, house accents.
   Layered after the base rules so these win on equal specificity.
   ======================================================================== */

/* atmosphere: warm maroon light bleeding into a wine-black stage --------- */
.stage{
  background:
    radial-gradient(130cqw 92cqh at 84% -24%, rgba(210,58,108,.13), transparent 55%),
    radial-gradient(105cqw 82cqh at -14% 120%, rgba(138,26,77,.17), transparent 55%),
    var(--bg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 30px 90px -55px #000;
}

/* login ----------------------------------------------------------------- */
.login{
  background:
    radial-gradient(115cqw 88cqh at 80% -12%, rgba(210,58,108,.16), transparent 60%),
    linear-gradient(178deg, #1c0d15 0%, var(--bg) 70%);
}
.login-card{width:41cqw; padding:3.6cqh 3cqw; text-align:center}
.ta-logo{height:13cqh; width:auto; display:block; margin:0 auto 2.2cqh}
.tagline{font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:500;
  font-size:2.5cqw; color:var(--rose); letter-spacing:.004em; margin-bottom:.6cqh; text-align:center}
.login h1{font-size:3.6cqw; font-weight:600; line-height:.98; letter-spacing:-.018em;
  margin-bottom:1.2cqh; color:var(--ink); text-align:center}
.login .sub{color:var(--muted); font-size:1.22cqw; margin:0 auto 3.4cqh; max-width:26cqw; line-height:1.55; text-align:center}
/* form controls stay left-aligned beneath the centred brand header */
.login form,.login-mode,.login-admin{text-align:left}
.field label{text-align:left}
.field label{color:var(--muted)}
.field input{border-radius:7px}
.field input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(210,58,108,.14)}
/* the big group selector on the choose-a-group page */
.groupsel{width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:1.5cqh 1.1cqw; font-size:1.7cqw; font-family:'Open Sans',sans-serif; font-weight:600;
  border-radius:7px; cursor:pointer; transition:border-color .15s}
.groupsel:hover{border-color:var(--accent)}
.groupsel:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(210,58,108,.14)}
.groupsel option{background:var(--panel); color:var(--ink); font-weight:600}
.signin{
  margin-top:.4cqh; width:100%; background:var(--maroon); color:#fff; border:none;
  font-family:'Open Sans',sans-serif; padding:1.6cqh; font-size:1.4cqw; font-weight:700;
  border-radius:8px; letter-spacing:.02em; box-shadow:0 12px 30px -14px var(--maroon);
  transition:background .16s, transform .12s, box-shadow .16s;
}
.signin:hover{background:var(--accent); box-shadow:0 14px 36px -12px var(--accent)}
.signin:active{transform:translateY(1px)}
.values{margin-top:2.8cqh; font-family:'Open Sans',sans-serif; font-size:1.2cqw;
  letter-spacing:.22em; text-transform:uppercase; color:var(--rose); text-align:center}
.login-admin a:hover{color:var(--rose); border-bottom-color:var(--rose)}

/* persistent brand mark, tucked into the top-right controls ------------- */
.controls{gap:1.1cqw}
.controls .ta-brand{height:5.4cqh; width:auto; opacity:.9; align-self:center;
  pointer-events:none}
.controls button{background:rgba(36,16,25,.72)}
.controls button:hover{border-color:var(--accent); color:var(--ink)}

/* header + type polish -------------------------------------------------- */
.title{font-weight:600; letter-spacing:-.02em}
.kicker b{color:var(--rose)}
.bandtag{background:rgba(0,0,0,.18)}

/* the star, borrowed from the logo, for a form that's fully on track ----- */
.band-empty.act::before{content:"\2605"; display:block; color:var(--on);
  font-size:3cqw; line-height:1; margin-bottom:1.4cqh}

/* layout fixes ---------------------------------------------------------- */
/* band label now sits as a chip beneath the header rule (was colliding with
   the top-right controls when right-aligned inside the header) */
.bandtag{display:inline-block; align-self:flex-start; margin:.2cqh 0 1.8cqh}
/* agenda rota: let the period label size to its text so "Registration"
   can't overlap the task description */
.rota-item .when{width:auto; min-width:6cqw; white-space:nowrap; padding-right:1.4cqw}

/* login chrome: connection status parked bottom-right; head-of-year a button top-right */
.login-mode{position:absolute; right:2.6cqw; bottom:2.4cqh; margin:0; font-size:1.05cqw}
.login-admin{position:absolute; top:2.4cqh; right:2.6cqw; margin:0}
.login-admin a{display:inline-flex; align-items:center; gap:.55cqw; border:1px solid var(--line);
  background:rgba(36,16,25,.55); color:var(--ink); padding:1.1cqh 1.5cqw; border-radius:8px;
  font-family:'Open Sans',sans-serif; font-size:1.05cqw; font-weight:600; letter-spacing:.01em;
  backdrop-filter:blur(4px); transition:border-color .15s, background .15s, color .15s, transform .12s}
.login-admin a:hover{border-color:var(--accent); background:rgba(210,58,108,.14); color:#fff;
  border-bottom-color:var(--accent)}
.login-admin a:active{transform:translateY(1px)}
/* sign-in type toggle — Tutor board / Head of year */
.loginswitch{display:flex; gap:.4cqw; margin-bottom:2.4cqh; padding:.4cqh;
  background:var(--panel); border:1px solid var(--line); border-radius:9px}
.ls-opt{flex:1; border:none; background:transparent; color:var(--muted);
  font-family:'Open Sans',sans-serif; font-weight:600; font-size:1.15cqw; letter-spacing:.01em;
  padding:1cqh .8cqw; border-radius:6px; transition:background .15s, color .15s}
.ls-opt:hover:not(.active){color:var(--ink)}
.ls-opt.active{background:var(--maroon); color:#fff; box-shadow:0 6px 16px -10px var(--maroon)}
/* keep autofilled inputs on-theme (browsers force a light background otherwise) */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 1000px var(--panel) inset;
  caret-color:var(--ink); border:1px solid var(--line)}
/* large display numerals sit with the titles in Arial */
.att .hero .big{font-family:Arial,Helvetica,sans-serif}

/* ========================================================================
   LIGHT THEME — set data-theme="light" on <html> (see theme.js).
   Dark (the block above) is the default and is left untouched. Light is a
   plain white ground with black text: we re-point the palette variables and
   override the handful of places that hard-code a dark colour. Selectors are
   prefixed with [data-theme="light"] so they win on both order and specificity.
   ======================================================================== */
[data-theme="light"]{
  --bg:#ffffff; --panel:#f3f0f2; --panel-2:#eae5e9; --line:#d8d0d6;
  --ink:#141014; --muted:#6b616a;
  /* brand maroon/accent read well on white and stay; rose is too pale on white,
     so borrow the maroon for the accented text that used it */
  --rose:#8A1A4D;
  /* status colours darkened for legible text on white (they also back the
     fills/bars, where the deeper tone is fine) */
  --on:#1E8A55; --watch:#B07400; --act:#CE3040;
}
[data-theme="light"] body{
  background:
    radial-gradient(1500px 1000px at 84% -10%, rgba(210,58,108,.06), transparent 60%),
    radial-gradient(1200px 820px at -12% 116%, rgba(138,26,77,.05), transparent 55%),
    #ffffff;
}
[data-theme="light"] .stage{
  background:
    radial-gradient(130cqw 92cqh at 84% -24%, rgba(210,58,108,.06), transparent 55%),
    radial-gradient(105cqw 82cqh at -14% 120%, rgba(138,26,77,.05), transparent 55%),
    var(--bg);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 30px 90px -55px rgba(0,0,0,.35);
}
[data-theme="light"] .login{
  background:
    radial-gradient(115cqw 88cqh at 80% -12%, rgba(210,58,108,.08), transparent 60%),
    linear-gradient(178deg, #ffffff 0%, #f6f3f5 70%);
}
/* the logo is white-on-dark; on white swap in the black version (keeps the
   element's own sizing/filters). Covers the sign-in/group-pick brand mark
   (.ta-logo) and the board's top-right mark (.ta-brand). */
[data-theme="light"] img.ta-logo,
[data-theme="light"] img.ta-brand{content:url('talogoblack.png')}
/* data bar / progress-track wells (were near-black) */
[data-theme="light"] .track{background:#ece7eb}
/* top-right board controls + pickers (were translucent dark) */
[data-theme="light"] .controls button,
[data-theme="light"] .formpick,
[data-theme="light"] .paused-tag{background:rgba(255,255,255,.72)}
[data-theme="light"] .login-admin a{background:rgba(255,255,255,.55)}
[data-theme="light"] .theme-switch--corner{background:rgba(255,255,255,.6)}
/* equipment register: zebra striping flips from white-on-dark to dark-on-white */
[data-theme="light"] .eqtable tbody tr:nth-child(even) td,
[data-theme="light"] .eqtable tbody tr:nth-child(even) .rowh{background:rgba(0,0,0,.03)}
/* the low-opacity black overlay reads as murky grey on white; lift it */
[data-theme="light"] .bandtag{background:rgba(0,0,0,.05)}
/* hamburger dropdown on white */
[data-theme="light"] .menu-pop{background:rgba(255,255,255,.97)}
[data-theme="light"] .menu-pop .menu-item:hover{background:rgba(0,0,0,.05)}

/* ---- light / dark switch --------------------------------------------------
   A checkbox styled as a sliding toggle (checked = light). Sizing is in `em`
   off a cqw font-size, so the track, thumb and slide distance scale together
   with the stage. Sits inline in the board's top-right controls; the
   --corner modifier parks it top-left on the sign-in / group-pick pages. */
.theme-switch{font-size:1cqw; display:inline-flex; align-items:center; gap:.7em;
  cursor:pointer; user-select:none; color:var(--muted)}
.theme-switch input{position:absolute; width:1px; height:1px; opacity:0; margin:0}
.tt-track{position:relative; flex:none; width:2.4em; height:1.3em; border-radius:999px;
  background:var(--panel); border:1px solid var(--line);
  transition:background .2s, border-color .2s}
.tt-thumb{position:absolute; top:.15em; left:.15em; width:1em; height:1em; border-radius:50%;
  background:var(--muted); transition:transform .2s, background .2s}
.theme-switch input:checked + .tt-track{background:var(--accent); border-color:var(--accent)}
.theme-switch input:checked + .tt-track .tt-thumb{background:#fff; transform:translateX(1.1em)}
.theme-switch:hover .tt-track{border-color:var(--accent)}
.theme-switch input:focus-visible + .tt-track{outline:2px solid var(--accent); outline-offset:2px}
.tt-label{font-family:'Open Sans',sans-serif; font-weight:600; font-size:1em;
  letter-spacing:.02em; min-width:2.4em}
.theme-switch--corner{position:absolute; top:2.4cqh; left:2.6cqw; z-index:60;
  background:rgba(36,16,25,.55); border:1px solid var(--line); border-radius:999px;
  padding:.75cqh 1.1cqw; backdrop-filter:blur(4px)}

/* ========================================================================
   TOP-RIGHT CONTROLS — redesign.
   A single row: [ live status · Full screen · hamburger ], with the brand
   logo tucked beneath it (right-aligned, 120% of its old size). The hamburger
   opens a menu holding Change group, the theme switch, then Sign out (last).
   ======================================================================== */
.controls{flex-direction:column; align-items:flex-end; gap:1.2cqh}
.ctrl-row{display:flex; align-items:center; gap:.9cqw}
.controls .ta-brand{height:11.05cqh; align-self:flex-end}   /* 13cqh − 15% */

/* hamburger button + icon (reuses the .controls button pill look) */
.menu{position:relative; display:inline-flex}
.menu-btn{display:inline-flex; align-items:center; justify-content:center}
.burger{position:relative; display:block; width:1.7cqw; height:1.25cqh}
.burger span{position:absolute; left:0; width:100%; height:.24cqh; border-radius:2px;
  background:currentColor}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:50%; transform:translateY(-50%)}
.burger span:nth-child(3){bottom:0}

/* dropdown panel */
.menu-pop{position:absolute; top:calc(100% + .9cqh); right:0; z-index:40;
  display:flex; flex-direction:column; min-width:13cqw; padding:.6cqh;
  background:rgba(36,16,25,.94); border:1px solid var(--line); border-radius:11px;
  backdrop-filter:blur(10px); box-shadow:0 20px 55px -22px #000}
.menu-pop[hidden]{display:none}
/* menu rows — flat inside the panel (override the .controls button pill) */
.menu-pop .menu-item{display:flex; align-items:center; gap:.7cqw; width:100%;
  justify-content:flex-start; text-align:left; background:transparent; border:none;
  color:var(--ink); font-family:'Open Sans',sans-serif; font-size:1.1cqw; font-weight:600;
  letter-spacing:.01em; padding:1.05cqh 1cqw; border-radius:7px; cursor:pointer;
  backdrop-filter:none; transition:background .15s, color .15s}
.menu-pop .menu-item:hover{background:rgba(255,255,255,.07); color:var(--ink)}
.menu-pop .theme-switch{font-size:1cqw}   /* keep the switch scale independent of the row text */

/* ========================================================================
   FEEDBACK / BUG-REPORT MODAL — opened from the hamburger menu; posts to the
   send-feedback edge function. Custom overlay (not <dialog>) so it lives inside
   the .stage container and its cq units resolve like everything else.
   ======================================================================== */
.modal{position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px)}
.modal[hidden]{display:none}
.modal-card{position:relative; width:46cqw; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:3.2cqh 2.6cqw; box-shadow:0 30px 80px -30px #000}
.modal-card h2{font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:2.4cqw;
  letter-spacing:-.01em; margin-bottom:.6cqh}
.modal-sub{color:var(--muted); font-size:1.2cqw; line-height:1.5; margin-bottom:2cqh; max-width:36cqw}
.modal-x{position:absolute; top:1.4cqh; right:1.2cqw; background:transparent; border:none;
  color:var(--muted); font-size:2.4cqw; line-height:1; cursor:pointer; padding:.2cqh .5cqw}
.modal-x:hover{color:var(--ink)}
.fb-type{display:flex; gap:.4cqw; margin-bottom:1.6cqh; padding:.4cqh;
  background:var(--bg); border:1px solid var(--line); border-radius:9px}
.fb-opt{flex:1; border:none; background:transparent; color:var(--muted); font-family:'Open Sans',sans-serif;
  font-weight:600; font-size:1.15cqw; padding:1cqh .8cqw; border-radius:6px; cursor:pointer;
  transition:background .15s, color .15s}
.fb-opt:hover:not(.active){color:var(--ink)}
.fb-opt.active{background:var(--maroon); color:#fff; box-shadow:0 6px 16px -10px var(--maroon)}
.modal-card textarea{width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:1.2cqh 1cqw; font-family:'Open Sans',sans-serif; font-size:1.25cqw;
  line-height:1.5; resize:vertical; min-height:12cqh}
.modal-card textarea::placeholder{color:var(--muted)}
.modal-card textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(210,58,108,.14)}
.modal-foot{display:flex; align-items:center; gap:1cqw; margin-top:1.8cqh}
.modal-foot .spacer{flex:1}
.fb-note{font-size:1.1cqw; color:var(--muted)}
.fb-note.ok{color:var(--on)} .fb-note.err{color:var(--act)}
.modal-cancel{background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:8px;
  padding:1cqh 1.6cqw; font-size:1.15cqw; font-weight:600; font-family:'Open Sans',sans-serif; cursor:pointer}
.modal-cancel:hover{color:var(--ink); border-color:var(--muted)}
.modal-send{background:var(--maroon); color:#fff; border:none; border-radius:8px;
  padding:1cqh 2cqw; font-size:1.15cqw; font-weight:700; font-family:'Open Sans',sans-serif; cursor:pointer}
.modal-send:hover{background:var(--accent)}
.modal-send[disabled]{opacity:.5; cursor:default}

/* ========================================================================
   SPLASH — one-off 3s animated intro on the board after a group is picked
   (JS in deck.html removes it at 3s). Theme-aware: the palette variables and
   the black-logo swap keep it right in both light and dark. Sits above all.
   ======================================================================== */
.splash{position:absolute; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120cqw 90cqh at 50% 6%, rgba(210,58,108,.14), transparent 60%),
    radial-gradient(90cqw 70cqh at 50% 120%, rgba(138,26,77,.14), transparent 55%),
    var(--bg);
  animation:splash-out .5s ease 2.5s forwards}
.splash[hidden]{display:none}
.splash-inner{display:flex; flex-direction:column; align-items:center; gap:2.6cqh}
.splash-logo{height:26cqh; width:auto;
  animation:splash-logo-in .8s cubic-bezier(.2,.7,.2,1) both}
.splash-bar{display:flex; gap:.5cqw; width:24cqw}
.splash-bar i{flex:1; height:.8cqh; border-radius:2px; transform:scaleX(0); transform-origin:left;
  animation:splash-bar .5s ease both}
.splash-bar i:nth-child(1){background:var(--house-brunel);   animation-delay:.35s}
.splash-bar i:nth-child(2){background:var(--house-christie); animation-delay:.42s}
.splash-bar i:nth-child(3){background:var(--house-darwin);   animation-delay:.49s}
.splash-bar i:nth-child(4){background:var(--house-fawcett);  animation-delay:.56s}
.splash-bar i:nth-child(5){background:var(--house-harrison); animation-delay:.63s}
.splash-bar i:nth-child(6){background:var(--house-kitson);   animation-delay:.70s}
.splash-bar i:nth-child(7){background:var(--house-nearne);   animation-delay:.77s}
.splash-bar i:nth-child(8){background:var(--house-pengelly); animation-delay:.84s}
.splash-tag{font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:500;
  font-size:2.6cqw; color:var(--rose); letter-spacing:.01em;
  animation:splash-tag-in 1s ease .8s both}
[data-theme="light"] .splash-logo{content:url('talogoblack.png')}

@keyframes splash-logo-in{from{opacity:0; transform:translateY(2cqh) scale(.84)} to{opacity:1; transform:none}}
@keyframes splash-bar{to{transform:scaleX(1)}}
@keyframes splash-tag-in{from{opacity:0; transform:translateY(1cqh)} to{opacity:1; transform:none}}
@keyframes splash-out{to{opacity:0; visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .splash-logo,.splash-bar i,.splash-tag{animation:none; opacity:1; transform:none}
  .splash{animation:splash-out .3s ease 2.7s forwards}
}