:root{
  /* ---- dark, the default and the one a technician uses in a cooler ---- */
  --bg:#070C16; --pnl:#0E1626; --pnl2:#16223C; --pnl3:#0A1120;
  --line:#1E2C4A; --line2:#2A3B5F;
  --tx:#E9EEF9; --tx2:#B7C4DC; --tx3:#7A8AA8; --ph:#5E6E8C;
  /* 'not set' — dimmer than --tx3 on purpose, but still readable.
     It used to be --line2, a BORDER colour, which came out at 1.6:1. */
  --txoff:#7684A2;
  --pri:#2A62F0; --pri2:#7FA8FF;
  --good:#22C55E; --risk:#F87171; --warn:#FBBF24; --na:#8496B6;

  /* text that sits ON a filled control — never the same as --tx */
  --onpri:#fff; --onpri-dim:#EAF1FF; --onpri2:#06122B;
  --ongood:#04240F; --onrisk:#3A0709; --onna:#0B1220;

  /* state washes: a tint, its border, and the text that reads on it */
  --goodbg:rgba(34,197,94,.14);  --goodbd:rgba(34,197,94,.42); --goodtx:#8DF0B4;
  --riskbg:rgba(248,113,113,.11);--riskbg2:rgba(248,113,113,.06);
  --riskbd:rgba(248,113,113,.34);--riskbd2:rgba(248,113,113,.26);--risktx:#F2A6A6;
  --warnbg:rgba(251,191,36,.15); --warnbg2:rgba(251,191,36,.12);
  --warnbg3:rgba(251,191,36,.30);--warnbd:rgba(251,191,36,.5);  --warntx:#FFD79A;
  --pribg:rgba(42,98,240,.17);   --pribg2:rgba(42,98,240,.12);
  --pribd:rgba(42,98,240,.5);    --pritx:#B9CDFF; --pritx2:#9DB6FF;

  /* cooler and freezer chips — the only place type is carried by colour */
  --coolbg:#0B2E44; --cooltx:#7FD0F0; --coolbd:#17516E;
  --frzbg:#14264A;

  --zebra:rgba(255,255,255,.017);
  --footbg:rgba(14,22,38,.92);
  --scrimbg:rgba(3,7,15,.72);
  --scorebg:#0C1A34; --scorebd:#22437F;
  --swbg:#12304A;    --swbd:#24587A;
  --markgoodbg:#0E3D24; --markgoodbd:#1C6B40;
  --markwarnbg:#432B06; --markwarnbd:#7A5410;

  --shadow:none;
  --r:10px;
}

/* ---------------------------------------------------------------- light ---
   Every value below is an override of a token above, so the rest of this
   stylesheet is written once. If a colour is not here, it does not change.

   Two rules govern the choices. Panels get LIGHTER as they come forward on
   dark and DARKER as they come forward on light, so depth still reads; and
   the state washes are strengthened, because a 14% tint that is legible over
   near-black disappears over white. */
:root[data-theme=light]{
  --bg:#F4F6FA; --pnl:#FFFFFF; --pnl2:#EDF1F7; --pnl3:#F7F9FC;
  --line:#DCE3ED; --line2:#C6D0DE;
  --tx:#0F1B2E; --tx2:#3C4C63; --tx3:#556480; --ph:#8494A8;
  --txoff:#64748E;
  --pri:#1B4FD8; --pri2:#1B4FD8;
  /* Darker than the dark theme's, deliberately: a colour readable on
     near-black is not readable on white. Each of these clears 4.5:1
     against #FFF, which is where they actually get used as text. */
  --good:#0E8341; --risk:#C42B2B; --warn:#A46806; --na:#5F7089;

  --onpri:#fff; --onpri-dim:#DCE7FF; --onpri2:#fff;
  --ongood:#fff; --onrisk:#fff; --onna:#fff;

  --goodbg:rgba(18,146,74,.12);  --goodbd:rgba(18,146,74,.40); --goodtx:#0B6B36;
  --riskbg:rgba(208,47,47,.09);  --riskbg2:rgba(208,47,47,.06);
  --riskbd:rgba(208,47,47,.34);  --riskbd2:rgba(208,47,47,.26);--risktx:#A32020;
  --warnbg:rgba(184,116,7,.13);  --warnbg2:rgba(184,116,7,.10);
  --warnbg3:rgba(184,116,7,.30); --warnbd:rgba(184,116,7,.42); --warntx:#8A5605;
  --pribg:rgba(27,79,216,.10);   --pribg2:rgba(27,79,216,.07);
  --pribd:rgba(27,79,216,.38);   --pritx:#123A9E; --pritx2:#123A9E;

  --coolbg:#E4F2FB; --cooltx:#0E5C86; --coolbd:#B6DCF0;
  --frzbg:#E7ECFB;

  --zebra:rgba(15,27,46,.022);
  --footbg:rgba(255,255,255,.92);
  --scrimbg:rgba(15,27,46,.34);
  --scorebg:#EEF3FE; --scorebd:#BFD0F4;
  --swbg:#D8E2EE;    --swbd:#BCCADB;
  --markgoodbg:#DFF3E7; --markgoodbd:#9FD4B4;
  --markwarnbg:#FBEFD8; --markwarnbd:#E2C489;

  /* On dark, a raised panel is separated by being lighter than the page. On
     white there is nowhere lighter to go, so the same job is done with a
     shadow rather than by darkening the card, which would invert the depth. */
  --shadow:0 1px 2px rgba(15,27,46,.05), 0 1px 8px rgba(15,27,46,.04);
}

/* The one structural difference between the themes: panels earn a shadow. */
.card,.tile,.sheet,.rail,header,footer,.toast{box-shadow:var(--shadow)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:row;
}
.pane{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;
  padding-top:env(safe-area-inset-top)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mut{color:var(--tx3)}

/* ---------- header ---------- */
header{
  flex:0 0 auto; background:var(--pnl); border-bottom:1px solid var(--line);
  padding:12px 20px 10px; display:flex; flex-direction:column; gap:10px;
}
.hrow{display:flex;align-items:center;gap:16px}
.title{font-size:20px;font-weight:700;letter-spacing:-.2px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title small{display:block;font-size:12px;font-weight:500;color:var(--tx3);letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:2px}

.units{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.units::-webkit-scrollbar{display:none}
.unit{
  min-height:48px;padding:6px 16px;border-radius:8px;background:var(--pnl2);
  border:1px solid var(--line2); color:var(--tx2); font-size:14px; font-weight:600;
  display:flex;flex-direction:column;justify-content:center;white-space:nowrap;flex:0 0 auto;
}
.unit .u2{font-size:11px;font-weight:600;color:var(--tx3);margin-top:1px}
.unit[aria-selected=true]{background:var(--pri);border-color:var(--pri);color:var(--onpri)}
.unit[aria-selected=true] .u2{color:var(--onpri-dim)}
.unit.done{border-color:var(--goodbd)}

.stats{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.stat{text-align:right;line-height:1.2}
.stat b{display:block;font-size:19px;font-weight:700;letter-spacing:-.3px}
.stat span{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px}

.btn{
  min-height:48px;padding:0 18px;border-radius:9px;font-size:14.5px;font-weight:650;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--pnl2);border:1px solid var(--line2);color:var(--tx);flex:0 0 auto;
}
.btn:active{transform:translateY(1px)}
.btn.green{background:var(--good);border-color:var(--good);color:var(--ongood)}
.btn.blue{background:var(--pri);border-color:var(--pri);color:var(--onpri)}
.btn:disabled{opacity:.4}

/* progress bar */
.pbar{height:5px;border-radius:3px;background:var(--pnl2);overflow:hidden;display:flex}
.pbar i{display:block;height:100%}

/* ---------- list ---------- */
main{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 20px 120px}
.cat{
  display:flex;align-items:center;gap:12px;background:var(--pnl3);border:1px solid var(--line);
  border-radius:8px;padding:9px 14px;margin:16px 0 8px;position:sticky;top:0;z-index:5;
}
.cat:first-child{margin-top:0}
.cat h2{font-size:14px;font-weight:700;margin:0;flex:1;letter-spacing:-.1px}
.cat .n{color:var(--pri2);font-weight:800;margin-right:2px}
.cat.off{opacity:.5}
.cat .meta{font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums}
.cat .allgood{min-height:44px;padding:0 14px;font-size:12.5px;border-radius:8px;
  background:var(--goodbg);border:1px solid var(--goodbd);color:var(--goodtx);font-weight:650}

.row{
  display:flex;align-items:center;gap:14px;padding:5px 14px;border-radius:9px;
  border:1px solid transparent;margin-bottom:4px;
}
.row:nth-child(odd){background:var(--zebra)}
.row.bad{background:var(--riskbg);border-color:var(--riskbd)}
.row.na{opacity:.5}
.row .nm{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.1px}
.row .nm em{display:block;font-style:normal;font-size:12.5px;font-weight:500;color:var(--tx3);
  margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.bad .nm em{color:var(--risktx)}

.seg{display:flex;gap:8px;flex:0 0 auto}
.seg button{
  width:58px;height:48px;border-radius:9px;background:var(--pnl2);border:1px solid var(--line2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:10.5px;font-weight:700;color:var(--tx3);letter-spacing:.2px;
}
.seg button svg{width:19px;height:19px;stroke-width:2.4}
.seg button[aria-pressed=true][data-s=good]{background:var(--good);border-color:var(--good);color:var(--ongood)}
.seg button[aria-pressed=true][data-s=bad]{background:var(--risk);border-color:var(--risk);color:var(--onrisk)}
.seg button[aria-pressed=true][data-s=na]{background:var(--na);border-color:var(--na);color:var(--onna)}

/* uh-oh detail */
.detail{margin:-2px 0 9px;padding:12px 14px;background:var(--riskbg2);
  border:1px solid var(--riskbd2);border-left:3px solid var(--risk);border-radius:9px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.detail input[type=text]{
  flex:1;min-width:220px;min-height:44px;padding:0 13px;border-radius:8px;background:var(--pnl3);
  border:1px solid var(--line2);color:var(--tx);font:inherit;font-size:14.5px}
.detail input::placeholder{color:var(--ph)}
.detail input:focus{outline:none;border-color:var(--pri)}
.tog{min-height:44px;padding:0 14px;border-radius:8px;background:var(--pnl2);
  border:1px solid var(--line2);font-size:13.5px;font-weight:650;display:flex;align-items:center;gap:8px}
.tog[aria-pressed=true]{background:var(--warnbg);border-color:var(--warnbd);color:var(--warn)}
.credit{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx3);
  min-height:44px;padding:0 12px;background:var(--pnl3);border:1px solid var(--line2);border-radius:8px}
.credit input{width:120px;accent-color:var(--warn)}
.credit b{color:var(--warn);font-variant-numeric:tabular-nums;min-width:26px;text-align:right}

/* ---------- footer / sheet ---------- */
footer{
  position:fixed;left:0;right:0;bottom:0;background:var(--footbg);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;z-index:20;
}
.tabs{display:flex;gap:6px;flex:1}
.tab{min-height:44px;padding:0 18px;border-radius:8px;font-size:14px;font-weight:650;color:var(--tx3);
  display:flex;align-items:center}
.tab[aria-selected=true]{background:var(--pnl2);color:var(--tx)}

.scrim{position:fixed;inset:0;background:var(--scrimbg);z-index:30;display:none}
.scrim.on{display:block}
.sheet{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--pnl);
  border-left:1px solid var(--line);z-index:31;transform:translateX(100%);
  transition:transform .22s ease;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top)}
.sheet.on{transform:none}
.sheet header{background:none;border-bottom:1px solid var(--line);padding:14px 22px;
  flex-direction:row;align-items:center;gap:12px}
.sheet .body{flex:1;overflow-y:auto;padding:18px 22px 22px}
.sheet .foot{border-top:1px solid var(--line);padding:14px 22px calc(14px + env(safe-area-inset-bottom));
  display:flex;gap:10px}

.big{font-size:56px;font-weight:800;letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums}
.band{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.ul{list-style:none;margin:16px 0 0;padding:0}
.ul li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.ul li b{margin-left:auto;font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.ul li span{font-size:12px;color:var(--tx3)}
canvas{width:100%;height:150px;background:var(--pnl3);border:1px dashed var(--line2);border-radius:10px;
  touch-action:none;display:block}
.k{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);font-weight:700;
  margin:20px 0 6px}
.k:first-child{margin-top:0}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(14px);
  background:var(--pnl2);border:1px solid var(--line2);border-radius:10px;padding:11px 18px;
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:40}
.toast.on{opacity:1;transform:translateX(-50%)}

@media (max-width:820px){
  .row{flex-wrap:wrap}
  .stats{display:none}
  header{padding:10px 14px}
  main{padding:12px 14px 130px}
}

/* ---------- sync / connectivity ---------- */
.sync{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650;
  padding:0 12px;min-height:34px;border-radius:8px;background:var(--pnl2);
  border:1px solid var(--line2);color:var(--tx3);flex:0 0 auto;white-space:nowrap}
.sync .dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:0 0 auto}
.sync[data-s=offline]{background:var(--warnbg2);border-color:var(--warnbd);color:var(--warn)}
.sync[data-s=offline] .dot{background:var(--warn)}
.sync[data-s=pending]{background:var(--pribg2);border-color:var(--pribd);color:var(--pri2)}
.sync[data-s=pending] .dot{background:var(--pri2)}
.sync[data-s=syncing] .dot{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}

.boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--tx3);font-size:14px;z-index:60}
.boot.off{display:none}

/* key (critical) items — the checks that carry the most weight */
.nm .keyitem{display:inline-block;vertical-align:2px;margin-left:8px;font-style:normal;
  font-size:9.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;color:var(--warntx);
  background:var(--warnbg);border:1px solid var(--warnbd)}

/* header title doubles as the location switcher */
button.title{text-align:left;padding:0;background:none;border:0;min-width:0}
button.title:active{opacity:.7}
button.title span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.title small::after{content:' ⌄';font-size:13px;opacity:.8}

/* today list */
.site{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:13px 14px;border-radius:10px;background:var(--pnl2);border:1px solid var(--line2);
  margin-bottom:8px;min-height:64px}
.site[aria-current=true]{border-color:var(--pri);background:var(--pribg)}
.site .sn{flex:1;min-width:0;font-size:16px;font-weight:650}
.site .sn em{display:block;font-style:normal;font-size:12.5px;font-weight:500;
  color:var(--tx3);margin-top:2px}
.site b{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.site .off{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--good);background:var(--goodbg);border:1px solid var(--goodbd);
  padding:3px 7px;border-radius:5px}

/* ===================== app shell / router chrome ===================== */
main{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
footer{display:none}
.pad{padding:16px 20px 120px;max-width:1100px;margin:0 auto}
.pad.center{display:flex;align-items:center;justify-content:center;min-height:100%}
header:empty{display:none}

.iconbtn{width:44px;height:44px;border-radius:10px;background:var(--pnl2);
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.iconbtn svg{width:20px;height:20px}

/* ===================== cards, tiles, lists ===================== */
.card{background:var(--pnl);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin-bottom:14px}
.card .ttl{font-size:18px;font-weight:700;letter-spacing:-.2px}
.row-between{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.row-end{display:flex;align-items:flex-end;gap:14px;margin-bottom:4px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:14px}
.grid2 div span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tx3);font-weight:700;margin-bottom:3px}
.grid2 div b{font-size:16px;font-weight:650}

.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.tile{background:var(--pnl);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tile b{display:block;font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.05;
  font-variant-numeric:tabular-nums}
.tile b .of{font-size:17px;font-weight:600;color:var(--tx3);letter-spacing:0}
.tile span{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);
  font-weight:700}

.site.static{cursor:default}
.site .go{display:flex;align-items:center;color:var(--tx3);flex:0 0 auto}
.site .go svg{width:18px;height:18px}
.site .sc{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums;flex:0 0 auto}

.tag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  padding:3px 7px;border-radius:5px;flex:0 0 auto;
  color:var(--tx3);background:var(--pnl);border:1px solid var(--line2)}
.tag.good{color:var(--goodtx);background:var(--goodbg);border-color:var(--goodbd)}
.tag.warn{color:var(--warntx);background:var(--warnbg);border-color:var(--warnbd)}
.tag.pri {color:var(--pritx);background:var(--pribg);border-color:var(--pribd)}

/* ===================== forms ===================== */
.search{width:100%;min-height:48px;padding:0 14px;border-radius:10px;background:var(--pnl2);
  border:1px solid var(--line2);color:var(--tx);font:inherit;font-size:15px;margin-bottom:6px}
.search:focus{outline:none;border-color:var(--pri)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0 6px}
.fields label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tx3);font-weight:700}
.fields input{width:100%;min-height:48px;margin-top:5px;padding:0 13px;border-radius:9px;
  background:var(--pnl3);border:1px solid var(--line2);color:var(--tx);font:inherit;font-size:17px;
  font-variant-numeric:tabular-nums}
.fields input:focus{outline:none;border-color:var(--pri)}

.ta{width:100%;min-height:96px;padding:12px 14px;border-radius:10px;background:var(--pnl3);
  border:1px solid var(--line2);color:var(--tx);font:inherit;font-size:15px;resize:vertical}
.ta.tall{min-height:150px}
.ta:focus{outline:none;border-color:var(--pri)}

.credit.wide{width:100%;justify-content:space-between;min-height:52px}
.credit.wide input{flex:1;margin:0 12px}

.spark{width:100%;height:26px;margin-top:12px;display:block}

.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.big-btn{flex:1;min-height:56px;font-size:15.5px}

.big-seg{gap:10px}
.big-seg button{flex:1;width:auto;height:64px;font-size:12px}
.big-seg button svg{width:22px;height:22px}

/* ===================== sign-in / complete ===================== */
.signin{width:min(460px,100%)}
.logo{font-size:30px;font-weight:800;letter-spacing:-1px}
.logo b{color:var(--pri2)}
.donecard{width:min(520px,100%);text-align:center}
.donetick{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;
  background:var(--goodbg);border:1px solid var(--goodbd);
  display:flex;align-items:center;justify-content:center;color:var(--good)}
.donetick svg{width:38px;height:38px;stroke-width:2.6}
.donecard .band{margin-top:2px}

@media (max-width:820px){
  .stats3{grid-template-columns:1fr;gap:8px}
  .pad{padding:12px 14px 130px}
}


/* ===================== two-column screens ===================== */
.cols{display:grid;gap:20px;align-items:start}
.cols-32{grid-template-columns:3fr 2fr}
.cols-23{grid-template-columns:2fr 3fr}
.cols .k:first-child{margin-top:0}

.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}

.site.sm{min-height:56px;padding:10px 14px}
.site .badge{width:38px;height:38px;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--pnl);border:1px solid var(--line2);
  font-size:16px;font-weight:800;color:var(--pri2)}

@media (max-width:980px){
  .cols-32,.cols-23{grid-template-columns:1fr}
  .stats4{grid-template-columns:repeat(2,1fr)}
  header .tabs{margin-left:0}
}
@media (max-width:820px){
  header .tab{padding:0 12px;font-size:13px}
}

/* ===================== left rail (spec F-01…F-11 chrome) ===================== */
.rail{flex:0 0 214px;width:214px;background:var(--pnl);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;padding:18px 12px calc(14px + env(safe-area-inset-bottom));
  padding-top:calc(18px + env(safe-area-inset-top));overflow-y:auto}
.rail .brand{font-size:21px;font-weight:800;letter-spacing:-.6px;padding:0 10px 18px}
.rail .brand b{color:var(--pri2)}
.rail .rl{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 12px;
  border-radius:10px;color:var(--tx3);font-size:15px;font-weight:650;text-align:left;
  border:1px solid transparent;position:relative}
.rail .rl svg{width:21px;height:21px;flex:0 0 auto}
.rail .rl span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .rl[aria-selected=true]{background:var(--pri);color:var(--onpri);border-color:var(--pri)}
.rail .rl:not([aria-selected=true]):active{background:var(--pnl2)}
.rail .rb{font-style:normal;font-size:11px;font-weight:800;min-width:20px;height:20px;
  border-radius:10px;background:var(--pri2);color:var(--onpri2);display:flex;
  align-items:center;justify-content:center;padding:0 5px}
.rail .rl[aria-selected=true] .rb{background:var(--onpri);color:var(--pri)}

@media (max-width:900px){
  .rail{flex-basis:74px;width:74px;padding:14px 10px;align-items:center}
  .rail .brand{font-size:15px;padding:0 0 14px}
  .rail .rl{justify-content:center;padding:0;width:52px}
  .rail .rl span{display:none}
  .rail .rb{position:absolute;top:5px;right:4px}
}

/* ===================== spec column ratios ===================== */
.cols-31{grid-template-columns:3fr 1fr}
.cols-13{grid-template-columns:1fr 3fr}
.cols-11{grid-template-columns:1fr 1fr}
.cols-111{grid-template-columns:repeat(3,1fr);gap:12px}

/* ---- F-05 ---- */
.uicon{width:38px;height:38px;border-radius:9px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:17px;border:1px solid var(--line2)}
.uicon.cl{background:var(--coolbg);color:var(--cooltx);border-color:var(--coolbd)}
.uicon.fz{background:var(--frzbg);color:var(--pritx2);border-color:var(--line2)}
.grid1{display:grid;gap:12px}
.grid1 div span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tx3);font-weight:700;margin-bottom:3px}
.grid1 div b{font-size:15.5px;font-weight:650}
/* Serviced for Summer is a control, not a label — it is the tech's call on the
   day, and only offered on a June or July visit. */
.summer{margin-top:14px;padding:11px 13px;background:var(--coolbg);border:1px solid var(--coolbd);
  border-radius:9px;display:flex;gap:12px;align-items:center;font-size:13.5px;
  width:100%;min-height:52px;color:var(--tx);text-align:left;cursor:pointer;
  font:inherit;font-size:13.5px}
.summer{flex-wrap:wrap}
.summer > span:first-child{flex:1 1 120px;min-width:0}
.summer .swrow{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.summer b{color:var(--tx3);font-weight:750;flex:0 0 auto;width:26px;text-align:right}
.summer .sw{flex:0 0 auto;width:42px;height:24px;border-radius:12px;position:relative;
  background:var(--swbg);border:1px solid var(--swbd);transition:background .15s,border-color .15s}
.summer .sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:var(--tx3);transition:transform .15s,background .15s}
.summer:active{filter:brightness(1.12)}
.summer.on{background:var(--warnbg2);border-color:var(--warnbd)}
.summer.on b{color:var(--warn)}
.summer.on .sw{background:var(--warnbg3);border-color:var(--warnbd)}
.summer.on .sw::after{transform:translateX(18px);background:var(--warn)}
.card.quiet{background:var(--pnl3)}
.cmt{padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--tx2)}
.cmt:first-child{border-top:0;padding-top:0}
.cmt b{display:inline-block;min-width:52px;color:var(--tx3);font-weight:700}

/* ---- F-06 ---- */
.readcard{text-align:left;display:block;width:100%;margin:0}
.readcard.on{border-color:var(--pri);background:var(--pribg2)}
.readcard .big{font-size:44px;letter-spacing:-1.5px}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;
  max-width:520px}
.keypad .key{min-height:74px;border-radius:11px;background:var(--pnl2);border:1px solid var(--line2);
  font-size:22px;font-weight:650;color:var(--tx);font-variant-numeric:tabular-nums}
.keypad .key:active{background:var(--pri);border-color:var(--pri);color:var(--onpri)}

/* ---- F-07 ---- */
.unitlbl{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:1.1px;
  font-weight:700;flex:0 0 auto}
.tabs2{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.tb{min-height:44px;padding:0 16px;border-radius:9px;font-size:14px;font-weight:650;
  color:var(--tx3);display:flex;align-items:center}
.tb[aria-selected=true]{background:var(--pnl2);color:var(--tx);border:1px solid var(--line2)}
.dist{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12.5px}
.dist span{flex:0 0 52px;color:var(--tx3);font-weight:650}
.dist i{flex:1;height:8px;border-radius:4px;background:var(--pnl3);overflow:hidden;display:block}
.dist i b{display:block;height:100%}
.dist u{flex:0 0 24px;text-align:right;text-decoration:none;font-variant-numeric:tabular-nums;
  color:var(--tx2);font-weight:700}
.scorebox{margin:14px 0 4px;padding:12px;background:var(--scorebg);border:1px solid var(--scorebd);
  border-radius:10px;text-align:center}
.scorebox .sv{font-size:30px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.btnrow.col{flex-direction:column}
.btnrow.col .big-btn{width:100%;flex:none}

@media (max-width:1100px){
  .cols-31,.cols-13,.cols-11{grid-template-columns:1fr}
  .cols-111{grid-template-columns:1fr}
}

/* readings unit picker sits in a narrow column — keep names on one line */
.site.tight{padding:10px 12px;gap:10px}
.site.tight .sn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site .tick{flex:0 0 auto;font-size:15px;color:var(--tx3);width:22px;text-align:center}
.site .tick.on{color:var(--good)}
.cols-13{grid-template-columns:minmax(230px,1fr) 3fr}

/* ===================== F-01 sign in ===================== */
.signin-wrap{width:min(1000px,100%);align-items:start}
.brandblock{text-align:center;padding:22px 0 26px}
.brandblock .logo{font-size:32px;font-weight:800;letter-spacing:-.8px}
.brandblock .logo b{color:var(--pri)}
.sp{letter-spacing:2.6px;margin-top:4px;font-size:12px;font-weight:650}
.fld{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tx3);font-weight:700;margin-bottom:14px}
.fld input{display:block;width:100%;min-height:52px;margin-top:6px;padding:0 14px;
  border-radius:10px;background:var(--pnl3);border:1px solid var(--line2);color:var(--tx);
  font:inherit;font-size:16px;text-transform:none;letter-spacing:0}
.fld input:focus{outline:none;border-color:var(--pri)}
.mark{width:38px;height:38px;border-radius:9px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:16px;border:1px solid var(--line2);
  background:var(--pnl);color:var(--tx3)}
.mark.good{background:var(--markgoodbg);border-color:var(--markgoodbd);color:var(--goodtx)}
.mark.warn{background:var(--markwarnbg);border-color:var(--markwarnbd);color:var(--warntx)}
.mark.pri {background:var(--frzbg);border-color:var(--line2);color:var(--pritx2)}
.mark.ok  {background:var(--frzbg);border-color:var(--line2);color:var(--tx2)}
.chips{display:flex;gap:8px;flex-wrap:wrap}

/* ===================== rail footer ===================== */
.railfoot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.who{padding:0 12px 10px}
.who span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--tx3);font-weight:700}
.who b{font-size:14px;font-weight:650;color:var(--tx2)}
.rl.out{color:var(--tx3)}
.rl.out:active{background:var(--riskbg);color:var(--risk)}
@media (max-width:900px){ .who{display:none} }

/* brand assets — the real logo, recoloured for a dark background */
.rail .brand{padding:2px 10px 18px}
.rail .brand img{width:62px;height:auto;display:block}
.brandblock .lockup{width:min(340px,100%);height:auto;display:block;margin:0 auto}
@media (max-width:900px){ .rail .brand{padding:0 0 14px} .rail .brand img{width:40px;margin:0 auto} }

/* rail brand: full lockup when the rail is wide, shield alone when collapsed */
.rail .brand img.lock{width:100%;height:auto;display:block}
.rail .brand img.mk{display:none}
@media (max-width:900px){
  .rail .brand img.lock{display:none}
  .rail .brand img.mk{display:block;width:40px;margin:0 auto}
}

/* the check name is a button (it opens the detail screen); buttons centre
   their text and stretch children, so both defaults have to be undone */
.row .nm{display:block;text-align:left;padding:0;background:none;border:0;align-self:center}
.row .nm .keyitem{vertical-align:1px}

/* the reading pad and its actions share one width, so the block reads as a
   keypad rather than a row of stretched bars */
.padcol{max-width:520px}
.readcard .big{font-size:40px}

/* readings: keypad column at a fixed comfortable width, context beside it */
.readgrid{display:grid;grid-template-columns:520px minmax(220px,1fr);gap:20px;align-items:start}
.readgrid .padcol{max-width:520px}
.readgrid .readcard .big{font-size:38px}
/* unit names may wrap to two lines — truncating a unit name is worse */
.site.tight .sn{white-space:normal}
.site.tight .sn em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cols-13{grid-template-columns:minmax(250px,1fr) 3fr}
@media (max-width:1180px){ .readgrid{grid-template-columns:1fr} }

/* a lone action spans the row rather than sitting half-width */
.btnrow .wide-btn{flex:1 1 100%}

/* ---- F-04 location rows: panel counts live in the middle of the row ----
   The name column is a fixed share and the metric block a fixed width, so the
   numbers line up as columns down the list instead of drifting with the length
   of each school's name. On an iPad-width pane the labels wrap to two lines
   rather than shrinking the numbers. */
.site.metrics .sn{flex:0 1 40%;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.site.metrics .sn em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site .mid{display:flex;gap:18px;flex:0 0 auto;margin-right:auto}
.site .mid .cell{display:flex;flex-direction:column;align-items:center;width:104px}
.site .mid .cell b{font-size:27px;font-weight:750;line-height:1.05;
  font-variant-numeric:tabular-nums;color:var(--tx)}
.site .mid .cell i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--tx3);margin-top:3px;white-space:nowrap}

@media (max-width:1150px){
  .site .mid .cell i span{display:block;margin-top:1px}
  .site .mid{gap:14px}
  .site .mid .cell{width:76px}
  .site .mid .cell b{font-size:23px}
}

/* one reading card, not two — a unit that takes no humidity reading */
.cols-1{grid-template-columns:1fr}

/* the stored FileMaker category name, kept visible under the plainer heading */
.cat h2 em{display:block;font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.3px;color:var(--tx3);margin-top:2px}

/* "Other" is opt-in — one quiet control per category rather than a dead row */
.addother{display:block;width:100%;min-height:44px;margin:2px 0 4px;
  background:transparent;border:1px dashed var(--line2);border-radius:9px;
  color:var(--tx3);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.addother:hover{color:var(--tx2);border-color:var(--tx3)}

/* A phone number a technician can tap. Underlined rather than coloured only,
   so it reads as a link on a screen that is mostly numbers. */
.tel{color:var(--pri2);text-decoration:underline;text-underline-offset:3px}
.tel:active{opacity:.6}