/* Björn's Snow Fleet — brand look. Dark, high contrast, glove-sized targets. */
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(/fonts/Barlow-normal-400.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(/fonts/Barlow-normal-500.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(/fonts/Barlow-normal-600.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(/fonts/Barlow-normal-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/fonts/BarlowCondensed-normal-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-style:italic;font-display:swap;src:url(/fonts/BarlowCondensed-italic-800.woff2) format("woff2")}
:root{
  --black:#05070A;--night:#0A0E13;--panel:#10161D;--panel2:#161E27;--line:#222C38;--line2:#2E3A48;
  --snow:#EEF4F8;--sub:#AEB9C5;--mute:#7D8B99;
  --cyan:#56E1FF;--blue:#1D9BFF;--amber:#FFB224;--ink:#080C11;
  --ok:#2BD67B;--warn:#FFB224;--bad:#FF4D5E;
  --r:22px;--cond:"Barlow Condensed",Barlow,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--black);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;font-family:Barlow,-apple-system,system-ui,sans-serif;color:var(--snow);font-size:17px;line-height:1.4;
  background:radial-gradient(120% 420px at 50% -120px,#0B2238 0%,rgba(5,7,10,0) 70%),var(--black);background-repeat:no-repeat}
img{max-width:100%}
a{color:var(--cyan)}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:8px}

/* app frame */
.app{max-width:480px;margin:0 auto;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.mode-screen .app,.mode-bare .app{height:100vh;height:100dvh;overflow:hidden}
.body{flex:1;display:flex;flex-direction:column;padding:6px 20px max(22px,env(safe-area-inset-bottom));min-height:0}
.mode-page .body{padding-bottom:40px}
.spacer{flex:1;min-height:12px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) 20px 10px;flex:none;position:relative;z-index:20}
.logo{display:flex;align-items:center;min-height:56px}
.logo img{height:31px;width:auto;display:block}
.top-actions{display:flex;gap:10px;align-items:center}
.icon-btn,.ask-btn{height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.ask-btn{padding:0 18px 0 14px;border:1px solid rgba(86,225,255,.45);background:rgba(86,225,255,.08);color:var(--cyan);font:800 italic 22px var(--cond);text-transform:uppercase;letter-spacing:.04em;gap:7px}
.spark{font-style:normal;font-size:18px}
.menu{position:static}
.menu>summary{list-style:none;width:56px;background:var(--panel);border:1px solid var(--line)}
.menu>summary::-webkit-details-marker{display:none}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:21px;height:2.5px;border-radius:2px;background:var(--snow);position:relative;content:""}
.menu-btn span::before{position:absolute;top:-7px}.menu-btn span::after{position:absolute;top:7px}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:30}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;background:var(--night);border-top-left-radius:30px;border-top-right-radius:30px;border:1px solid var(--line);border-bottom:0;padding:12px 20px max(24px,env(safe-area-inset-bottom));z-index:31;max-height:88vh;overflow:auto}
.grab{width:44px;height:5px;border-radius:9px;background:var(--line2);margin:0 auto 8px}
.sheet-who{font:600 13px Barlow;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;padding:4px 0 6px}
.sheet-item{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--snow);font:600 19px Barlow;cursor:pointer;text-align:left;text-decoration:none}
.sheet form{margin:0;padding:0;background:none;border:0}
.sheet form .sheet-item{border-bottom:0}
.ic{width:40px;height:40px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;font-size:19px;color:var(--cyan);flex:none}

/* type */
.eyebrow{font-family:var(--cond);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:14px;color:var(--cyan)}
.eyebrow.red{color:var(--bad)}.eyebrow.amber{color:var(--amber)}
.h1{font-family:var(--cond);font-weight:800;font-style:italic;text-transform:uppercase;font-size:44px;line-height:.95;letter-spacing:.005em}
.h2{font-family:var(--cond);font-weight:800;font-style:italic;text-transform:uppercase;font-size:30px;line-height:1}
.p{font-size:17px;line-height:1.4;color:var(--sub)}
.p.snow{color:var(--snow)}.p.small{font-size:15px}
.red{color:var(--bad)}
.center{text-align:center}
.mt-s{margin-top:6px}.mt{margin-top:12px}.mt-l{margin-top:22px}
.hint{font-size:17px;color:var(--sub);margin-top:8px}
.alert{background:rgba(255,77,94,.12);border:1px solid rgba(255,77,94,.45);color:#FFD6DA;border-radius:16px;padding:12px 14px;font-weight:600;margin:10px 0}
.offline{background:var(--amber);color:var(--ink);font-weight:700;text-align:center;padding:10px 16px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:76px;border-radius:var(--r);border:0;font-family:var(--cond);font-weight:800;font-style:italic;text-transform:uppercase;font-size:28px;letter-spacing:.02em;cursor:pointer;color:var(--ink);text-decoration:none;flex:none;
  background:linear-gradient(100deg,var(--cyan),var(--blue) 75%);box-shadow:0 14px 40px rgba(29,155,255,.28)}
.btn.amber{background:var(--amber);box-shadow:0 14px 40px rgba(255,178,36,.25)}
.btn.ghost{background:transparent;color:var(--snow);box-shadow:none;border:1.5px solid var(--line2);min-height:64px;font-size:24px}
.btn:disabled{opacity:.6}
.back{background:none;border:0;color:var(--sub);font:600 17px Barlow;cursor:pointer;min-height:56px;min-width:88px;padding:0;align-self:flex-start;text-align:left;flex:none}

/* cards */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:28px;padding:22px;margin-top:14px;flex:none}
.card.grow{flex:1}
.center-card{display:flex;flex-direction:column;justify-content:center}
.danger-card{border-color:rgba(255,77,94,.5);background:linear-gradient(180deg,rgba(255,77,94,.16),var(--panel))}
.card.rows{padding:2px 20px}
.card.rows.tight{margin-top:10px}
.storm{display:flex;align-items:center;gap:14px;background:rgba(255,178,36,.1);border:1px solid rgba(255,178,36,.35);border-radius:20px;padding:13px 16px;flex:none}
.storm b{color:var(--amber);font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:14px;display:block}
.storm div{font-size:17px;font-weight:600}
.dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--mute)}
.dot.ok{background:var(--ok)}.dot.warn,.dot.amber{background:var(--amber)}.dot.bad{background:var(--bad)}.dot.mute{background:var(--line2)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-family:var(--cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:14px}
.chip.ok{background:rgba(43,214,123,.12);color:var(--ok)}.chip.warn{background:rgba(255,178,36,.12);color:var(--amber)}.chip.bad{background:rgba(255,77,94,.12);color:var(--bad)}
.unit-big{font-family:var(--cond);font-weight:800;font-style:italic;font-size:112px;line-height:.82;letter-spacing:-.01em}
.row{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--snow);text-decoration:none}
.row:last-child{border:0}
.row .t{font:600 17px Barlow}.row .s{font:500 14px Barlow;color:var(--mute)}
.chev{margin-left:auto;color:var(--mute);font-size:26px}
.count{margin-left:auto;font-family:var(--cond);font-weight:800;font-style:italic;font-size:28px}

/* progress */
.progrow{display:flex;justify-content:space-between;font:600 14px Barlow;color:var(--mute)}
.prog{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:6px 0 2px;flex:none}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:99px}
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

/* stepper */
.flow{flex:1;display:flex;flex-direction:column;min-height:0}
.step,.step .view{display:flex;flex-direction:column}
.js .step{display:none;flex:1;min-height:0}
.js .step.on{display:flex}
.js .step .view{display:none;flex:1;min-height:0}
.js .step .view.on{display:flex}
html:not(.js) .js-only{display:none!important}
.js .nojs{display:none!important}
html:not(.js) .step{border-bottom:1px solid var(--line);padding:18px 0}
.q{font-family:Barlow;font-weight:700;font-size:32px;line-height:1.15;letter-spacing:-.005em}
.q-sm{font-size:28px;margin-top:4px}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:none}
.yn label{height:150px;border-radius:28px;font-family:var(--cond);font-weight:800;font-style:italic;font-size:44px;text-transform:uppercase;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative}
.yn small{font:600 14px Barlow;font-style:normal;text-transform:none;opacity:.8}
.yn input,.seg input,.name-tile input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.yn .yes{background:var(--ok);color:#03200F}
.yn .no{background:var(--panel2);color:var(--snow);border:1.5px solid var(--line2)}
.yn label:has(input:checked){outline:3px solid var(--snow);outline-offset:3px}
.cam{flex:1;min-height:200px;border-radius:28px;overflow:hidden;position:relative;margin-top:12px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55)),radial-gradient(80% 60% at 50% 40%,#2A3542 0%,#11171E 70%)}
.cam input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:3}
.cam .frame{position:absolute;inset:22px;border:2px dashed rgba(86,225,255,.45);border-radius:20px}
.cam .cam-hint{position:absolute;top:34px;left:12px;right:12px;text-align:center;font:600 16px Barlow;color:var(--snow);z-index:1}
.cam .preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shutter{width:92px;height:92px;border-radius:50%;background:var(--snow);border:7px solid rgba(255,255,255,.25);background-clip:padding-box;margin-bottom:24px;position:relative;z-index:2}
.cam.has-photo .frame,.cam.has-photo .cam-hint{display:none}
.thumbs{display:flex;gap:10px;margin-top:12px;flex:none}
.thumbs div{flex:1;height:56px;border-radius:14px;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;font:600 14px Barlow;color:var(--mute)}
.thumbs .done{background:linear-gradient(135deg,#1E3C2C,#123022);color:var(--ok);border-color:rgba(43,214,123,.4)}
.readout-wrap{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:8px 0 0}
.readout{width:100%;background:none;border:0;color:var(--snow);text-align:center;font-family:var(--cond);font-weight:800;font-style:italic;font-size:80px;line-height:1;padding:4px 0;-moz-appearance:textfield}
.readout::placeholder{color:#3A4654}
.readout::-webkit-outer-spin-button,.readout::-webkit-inner-spin-button{-webkit-appearance:none}
.fu-error{color:var(--amber);font:600 15px Barlow;margin-top:10px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:none}
.pad button{height:62px;border-radius:18px;background:var(--panel2);border:1px solid var(--line);color:var(--snow);font:600 28px Barlow;cursor:pointer}
.pad-gap{display:block}
.fu-head{display:flex;gap:14px;align-items:center;margin:2px 0 4px;flex:none}
.fu-photo{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--line);flex:none}
.fu-q{font:700 17px Barlow;margin:12px 0 6px}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;flex:none}
.seg.grid3{grid-template-columns:repeat(3,1fr)}
.seg-opt{min-height:56px;border-radius:16px;background:var(--panel2);border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 8px;font:600 15px/1.15 Barlow;cursor:pointer;position:relative}
.seg-opt:has(input:checked){background:linear-gradient(100deg,var(--cyan),var(--blue) 80%);border-color:transparent;color:var(--ink);font-weight:700}
.note{display:block;margin-top:12px;flex:none}
.note textarea{width:100%;min-height:64px;border-radius:18px;background:var(--panel);border:1px solid var(--line);padding:14px;font:500 16px Barlow;color:var(--snow);resize:none}
.note textarea::placeholder{color:var(--mute)}
.bad-pick{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.done-ring{width:150px;height:150px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:radial-gradient(circle,rgba(43,214,123,.25),rgba(43,214,123,.05) 70%);border:3px solid var(--ok);font-size:72px;color:var(--ok);flex:none}
.done-ring.bad{border-color:var(--bad);color:var(--bad);background:radial-gradient(circle,rgba(255,77,94,.22),rgba(255,77,94,.04) 70%)}
.done-ring.calm{width:110px;height:110px;font-size:46px;border-color:var(--cyan);color:var(--cyan);background:radial-gradient(circle,rgba(86,225,255,.2),rgba(86,225,255,.03) 70%)}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:none}
.ph{height:170px;border-radius:18px;background:linear-gradient(135deg,#2B3744,#151C24);border:1px solid var(--line);position:relative;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph span{position:absolute;left:10px;bottom:10px;font:700 12px Barlow;letter-spacing:.06em;text-transform:uppercase;color:var(--snow);background:rgba(0,0,0,.55);padding:5px 8px;border-radius:8px}
.saving{position:fixed;inset:0;background:rgba(5,7,10,.85);display:grid;place-items:center;z-index:50;font:800 italic 34px var(--cond);text-transform:uppercase;color:var(--snow)}

/* login */
.login{flex:1;display:flex;flex-direction:column;min-height:0}
.login-names,.login-pin{flex:1;display:flex;flex-direction:column;min-height:0;padding-top:max(36px,env(safe-area-inset-top))}
.login-pin[hidden],.login-names[hidden]{display:none}
.login-logo{width:250px;height:auto;margin:10px auto 6px;display:block}
.login .eyebrow{margin-bottom:30px}
/* Sign-in: blue night, our tractor + blower, falling snow (Björn, 8 Nov 2026) */
.mode-bare{background:linear-gradient(180deg,#0E3560 0%,#08213F 45%,#04101F 100%) fixed,var(--black)}
.mode-bare::before,.mode-bare::after{content:"";position:fixed;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:5}
.mode-bare::before{background-image:radial-gradient(1.3px 1.3px at 77px 202px,rgba(255,255,255,0.73) 55%,transparent),radial-gradient(1.1px 1.1px at 48px 187px,rgba(255,255,255,0.71) 55%,transparent),radial-gradient(1.9px 1.9px at 109px 19px,rgba(255,255,255,0.54) 55%,transparent),radial-gradient(1.4px 1.4px at 123px 46px,rgba(255,255,255,0.7) 55%,transparent),radial-gradient(1.1px 1.1px at 63px 114px,rgba(255,255,255,0.72) 55%,transparent),radial-gradient(1.6px 1.6px at 31px 295px,rgba(255,255,255,0.71) 55%,transparent),radial-gradient(1.0px 1.0px at 113px 23px,rgba(255,255,255,0.7) 55%,transparent),radial-gradient(1.1px 1.1px at 214px 73px,rgba(255,255,255,0.69) 55%,transparent),radial-gradient(1.6px 1.6px at 92px 52px,rgba(255,255,255,0.71) 55%,transparent),radial-gradient(1.6px 1.6px at 190px 49px,rgba(255,255,255,0.7) 55%,transparent),radial-gradient(1.1px 1.1px at 30px 105px,rgba(255,255,255,0.68) 55%,transparent),radial-gradient(1.5px 1.5px at 160px 238px,rgba(255,255,255,0.71) 55%,transparent),radial-gradient(1.5px 1.5px at 153px 127px,rgba(255,255,255,0.78) 55%,transparent),radial-gradient(1.7px 1.7px at 124px 41px,rgba(255,255,255,0.71) 55%,transparent);background-size:260px 300px;animation:snow-a 11s linear infinite}
.mode-bare::after{background-image:radial-gradient(2.9px 2.9px at 175px 373px,rgba(255,255,255,0.74) 55%,transparent),radial-gradient(3.1px 3.1px at 37px 60px,rgba(255,255,255,0.76) 55%,transparent),radial-gradient(2.4px 2.4px at 175px 77px,rgba(255,255,255,0.92) 55%,transparent),radial-gradient(2.8px 2.8px at 342px 39px,rgba(255,255,255,0.86) 55%,transparent),radial-gradient(3.0px 3.0px at 160px 174px,rgba(255,255,255,0.83) 55%,transparent),radial-gradient(3.0px 3.0px at 296px 408px,rgba(255,255,255,0.74) 55%,transparent),radial-gradient(3.4px 3.4px at 138px 242px,rgba(255,255,255,0.83) 55%,transparent),radial-gradient(2.3px 2.3px at 374px 359px,rgba(255,255,255,0.69) 55%,transparent),radial-gradient(3.0px 3.0px at 348px 420px,rgba(255,255,255,0.74) 55%,transparent);background-size:380px 420px;animation:snow-b 7s linear infinite;filter:blur(.4px)}
@keyframes snow-a{from{background-position:0 0}to{background-position:60px 300px}}
@keyframes snow-b{from{background-position:0 0}to{background-position:-50px 420px}}
@media (prefers-reduced-motion:reduce){.mode-bare::before,.mode-bare::after{animation:none}}
.mode-bare .login-names{padding-top:0}
.login-hero{position:relative;margin:-6px -20px 18px;height:min(46vh,400px);flex:none;overflow:hidden}
.login-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;filter:saturate(.8) brightness(.85);-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 98%);mask-image:linear-gradient(180deg,#000 50%,transparent 98%)}
.login-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,53,96,.35) 0%,rgba(14,53,96,0) 30%,rgba(6,24,48,.55) 70%,rgba(6,24,48,0) 100%),radial-gradient(60% 40% at 50% 85%,rgba(4,16,31,.6),transparent 70%)}
.login-hero::after{content:"";position:absolute;inset:0;background:rgba(29,155,255,.16);mix-blend-mode:color;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 98%);mask-image:linear-gradient(180deg,#000 50%,transparent 98%)}
.login-mark{position:absolute;left:0;right:0;bottom:4px;z-index:2;text-align:center}
.login-hero .login-logo{width:170px;margin:0 auto}
.login-title{font:800 italic 92px/.85 var(--cond);text-transform:uppercase;letter-spacing:.02em;color:#fff;text-shadow:0 2px 24px rgba(29,155,255,.55)}
.mode-bare .name-tile{background:rgba(10,40,75,.7);border-color:rgba(86,225,255,.25)}
@media (max-height:700px){.login-hero{height:38vh}.login-title{font-size:72px}}
.login .h2{margin-bottom:14px}
.names{border:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.names.dense{grid-template-columns:1fr 1fr 1fr;gap:10px}
.name-tile{min-height:84px;border-radius:22px;background:var(--panel);border:1px solid var(--line);color:var(--snow);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;padding:8px;text-align:center}
.names.dense .name-tile{min-height:72px}
.name-tile .nm{font:700 19px/1.1 Barlow}
.names.dense .nm{font-size:16px}
.name-tile small{font:600 12px Barlow;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.name-tile:has(input:checked){border-color:var(--cyan);background:rgba(86,225,255,.1)}
.pin-field{display:block;margin:18px 0 12px;font-weight:600}
.pin-field input{display:block;width:100%;margin-top:6px;height:60px;border-radius:16px;background:var(--panel);border:1px solid var(--line);color:var(--snow);font-size:24px;padding:0 16px;letter-spacing:.3em}
.pins{display:flex;justify-content:center;gap:16px;margin:16px 0 8px}
.pins i{width:18px;height:18px;border-radius:50%;border:2px solid var(--sub)}
.pins i.f{background:var(--cyan);border-color:var(--cyan)}

/* fleet grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;flex:none}
.tile{border-radius:20px;padding:12px 12px 10px;height:104px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);background:var(--panel);color:var(--snow);text-decoration:none}
.grid.dense .tile{height:88px}
.tile b{font-family:var(--cond);font-weight:800;font-style:italic;font-size:38px;line-height:.9}
.tile span{font:700 12.5px Barlow;letter-spacing:.04em;text-transform:uppercase}
.tile.ok{background:linear-gradient(160deg,rgba(43,214,123,.22),rgba(43,214,123,.06));border-color:rgba(43,214,123,.45)}.tile.ok span{color:var(--ok)}
.tile.warn{background:linear-gradient(160deg,rgba(255,178,36,.22),rgba(255,178,36,.06));border-color:rgba(255,178,36,.45)}.tile.warn span{color:var(--amber)}
.tile.bad{background:linear-gradient(160deg,rgba(255,77,94,.25),rgba(255,77,94,.07));border-color:rgba(255,77,94,.5)}.tile.bad span{color:var(--bad)}
.legend{display:flex;gap:16px;font:600 14px Barlow;color:var(--sub);margin-top:14px;flex-wrap:wrap}
.legend em{font-style:normal;display:flex;align-items:center;gap:6px}

/* ---------- Longer pages (managers, mechanic lists, admin) in the same look ---------- */
.mode-page main>h1:first-child{font-family:var(--cond);font-weight:800;font-style:italic;text-transform:uppercase;font-size:38px;line-height:1;margin:6px 0 14px}
.mode-page h2{font-family:var(--cond);font-weight:800;font-style:italic;text-transform:uppercase;font-size:26px;line-height:1.05;margin:22px 0 10px}
.mode-page h3{font:700 18px Barlow;margin-bottom:4px}
.mode-page p{color:var(--sub);margin:6px 0}
.mode-page article{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:22px;padding:18px;margin:12px 0}
.mode-page article.danger{border-color:rgba(255,77,94,.5)}
.mode-page article.warning,.mode-page p.warning{border-color:rgba(255,178,36,.45);color:var(--amber)}
.mode-page .lede{font-size:18px;color:var(--snow)}
.mode-page .muted{color:var(--mute)}
.mode-page .eyebrow{display:block;margin-bottom:4px}
.mode-page form{display:flex;flex-direction:column;gap:12px;margin:10px 0}
.mode-page label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--snow)}
.mode-page input:not([type=radio]):not([type=checkbox]):not([type=hidden]),.mode-page select,.mode-page textarea{width:100%;min-height:56px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);color:var(--snow);font:500 17px Barlow;padding:12px 14px}
.mode-page textarea{min-height:90px}
.mode-page input[type=file]{padding:14px}
.mode-page fieldset{border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.mode-page legend{font-weight:700;padding:0 6px}
.mode-page button:not(.sheet-item):not(.back),.mode-page a.button{display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:18px;border:0;padding:0 18px;font:800 italic 22px var(--cond);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);background:linear-gradient(100deg,var(--cyan),var(--blue) 75%);text-decoration:none;cursor:pointer;margin:8px 0}
.mode-page a.button{background:var(--panel2);color:var(--snow);border:1px solid var(--line2)}
.mode-page a.quiet{color:var(--cyan)}
.mode-page .actions{display:flex;flex-wrap:wrap;gap:8px}
.mode-page .actions a.button{flex:1 1 40%;margin:0}
.mode-page .tiles,.mode-page .stack{display:flex;flex-direction:column}
.mode-page .badge{display:inline-block;padding:5px 12px;border-radius:999px;font:700 13px var(--cond);letter-spacing:.08em;text-transform:uppercase;background:var(--panel2);color:var(--sub);margin:4px 4px 4px 0}
.mode-page .badge.amber{background:rgba(255,178,36,.14);color:var(--amber)}
.mode-page .badge.red{background:rgba(255,77,94,.14);color:var(--bad)}
.mode-page .badge.green{background:rgba(43,214,123,.14);color:var(--ok)}
.mode-page .unit.red{border-color:rgba(255,77,94,.5)}.mode-page .unit.amber{border-color:rgba(255,178,36,.5)}.mode-page .unit.green{border-color:rgba(43,214,123,.5)}
.mode-page .storm-banner{background:rgba(255,178,36,.1);border:1px solid rgba(255,178,36,.35);border-radius:20px;padding:14px 16px}
.mode-page .storm-banner strong{font:800 italic 34px var(--cond)}
.mode-page .facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.mode-page .facts p{background:var(--panel);border-radius:14px;padding:10px;margin:0;font-size:14px}
.mode-page .facts strong{display:block;color:var(--snow);font-size:16px}
.mode-page details{border:1px solid var(--line);border-radius:18px;padding:0 14px;margin:10px 0;background:var(--panel)}
.mode-page summary{min-height:56px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.mode-page .menu>summary{min-height:56px;padding:0}
.mode-page .menu{border:0;margin:0;padding:0;background:none}
.mode-page .proof{max-width:100%;border-radius:14px;margin-top:8px;display:block}
.mode-page .photos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode-page pre{white-space:pre-wrap;font-size:13px;color:var(--sub)}
.mode-page .answers{display:flex;gap:8px;flex-wrap:wrap}
.mode-page .answer{flex:1 1 30%;flex-direction:row;align-items:center;justify-content:center;min-height:56px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);position:relative}
.mode-page .answer input{position:absolute;opacity:0}
.mode-page .answer:has(input:checked){border-color:var(--cyan);background:rgba(86,225,255,.12)}
.mode-page .evidence[hidden]{display:none}
.mode-page ul{padding-left:20px;color:var(--sub)}
.mode-page .person{flex-direction:row}

/* follow-ups after a No */
.code{font:700 13px Barlow;color:var(--mute);letter-spacing:.08em;margin-bottom:6px}
.ph.banner{height:170px;flex:none;margin-top:6px}
.ph.banner img{position:absolute;inset:0}
.fu-photo.small{width:64px;height:64px}
.yn.pick label.opt{background:var(--panel2);color:var(--snow);border:1.5px solid var(--line2);font-size:38px}
.yn.pick label.word{font:700 21px/1.15 Barlow;text-transform:none;font-style:normal;padding:10px;text-align:center}
.logged{display:flex;gap:14px;align-items:flex-start;background:rgba(255,178,36,.1);border:1px solid rgba(255,178,36,.4);border-radius:20px;padding:16px 18px;flex:none}
.logged>span{font-size:22px;color:var(--amber)}
.logged b{display:block;font:700 18px Barlow;color:var(--amber)}
.logged p{color:var(--sub);font-size:15px;margin-top:4px}
.sub-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;color:var(--sub);font:600 16px Barlow;text-decoration:none;flex:none}
.sub-link span{color:var(--amber)}

/* ---------- shared bits for Dave / Dima / problems (Nov 2026, to the approved mockup) ---------- */
.dot.info{background:var(--blue)}.dot.cyan{background:var(--cyan)}
.chip.info{background:rgba(29,155,255,.14);color:var(--blue)}
.snow{color:var(--snow)}.mute{color:var(--mute)}.cyan{color:var(--cyan)}
.small{font-size:15px}
.fill{flex:1;display:flex;flex-direction:column;min-height:0}
.banner{display:flex;gap:12px;align-items:flex-start;border-radius:18px;padding:13px 15px;font:600 15px/1.35 Barlow;flex:none}
.banner.ok{background:rgba(43,214,123,.12);border:1px solid rgba(43,214,123,.4);color:#BDF5D6}
.banner.bad{background:rgba(255,77,94,.13);border:1px solid rgba(255,77,94,.5);color:#FFD0D5}
.banner.info{background:rgba(29,155,255,.1);border:1px solid rgba(29,155,255,.4);color:#CFE8FF}
.banner.warn{background:rgba(255,178,36,.1);border:1px solid rgba(255,178,36,.4);color:#FFE3AE}
.banner .ico{font-size:20px;line-height:1.1}
.banner small{display:block;font:500 13px Barlow;opacity:.85;margin-top:2px}
.big-time{font:800 italic 54px/1 var(--cond);text-align:center}
.big-time.cyan{color:var(--cyan);margin-top:6px}.big-time.mute{color:var(--mute)}
.big-time.pin{letter-spacing:.2em;font-size:64px}
.lbl{font:700 13px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:14px 0 8px}
.target{font:600 14px Barlow;color:var(--sub);text-align:center;min-height:18px}
.sevtag{display:inline-block;align-self:flex-start;margin-top:12px;font:700 13px var(--cond);letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid}
.sevtag.do_not_operate,.sev-do_not_operate{color:var(--bad)}.sevtag.do_not_operate{border-color:rgba(255,77,94,.4)}
.sevtag.fix_before_next_storm,.sev-fix_before_next_storm{color:var(--amber)}.sevtag.fix_before_next_storm{border-color:rgba(255,178,36,.4)}
.sevtag.monitor,.sev-monitor{color:var(--blue)}.sevtag.monitor{border-color:rgba(29,155,255,.4)}
.code{font:700 13px var(--cond);letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.readout.sm{font-size:64px}
.pad.sm button{height:56px;font-size:24px}
/* tiles */
.grid.mini{gap:8px;margin-top:10px}
.grid.mini .tile{height:76px}
.grid.mini .tile b{font-size:30px}
.tile.pickable{position:relative;cursor:pointer}
.tile.pickable input{position:absolute;opacity:0;pointer-events:none}
.tile.pickable span{color:var(--mute)}
.tile.pickable.held{opacity:.75}
.tile.pickable:has(input:checked){border-color:var(--cyan);background:linear-gradient(160deg,rgba(86,225,255,.25),rgba(29,155,255,.08))}
.tile.pickable:has(input:checked) span{color:var(--cyan)}
/* choices (pick one, vertical) */
.choices{display:flex;flex-direction:column;gap:12px;flex:none}
.choices label,.choices button{min-height:84px;border-radius:24px;border:1.5px solid var(--line2);background:var(--panel2);color:var(--snow);font:800 italic 30px var(--cond);text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:relative;text-align:left;gap:10px}
.choices.tight label,.choices.tight button{min-height:62px;font-size:24px}
.choices small{font:600 14px Barlow;font-style:normal;text-transform:none;color:var(--sub);text-align:right}
.choices input{position:absolute;opacity:0;pointer-events:none}
.choices .good{background:var(--ok);color:#03200F;border-color:var(--ok)}
.choices .good small{color:#0B4A28}
.choices .pick,.choices label:has(input:checked){border-color:var(--cyan);box-shadow:0 0 0 3px rgba(86,225,255,.25)}
/* readings cells */
.cells{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;flex:none}
.cells.one{grid-template-columns:1fr}
.cells.eight{gap:8px}
.cell{min-height:74px;border-radius:18px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding:6px 14px;position:relative}
.cells.eight .cell{min-height:60px}
.cell small{font:700 12px var(--cond);letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.cell input{background:none;border:0;color:var(--snow);font:800 italic 30px/1 var(--cond);width:100%;padding:2px 0;-moz-appearance:textfield;min-height:36px}
.cell input::placeholder{color:#3A4654}
.cell input::-webkit-outer-spin-button,.cell input::-webkit-inner-spin-button{-webkit-appearance:none}
.cell span{position:absolute;right:12px;bottom:12px;color:var(--mute);font:600 14px Barlow}
.cell.on,.cell:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(86,225,255,.2)}
/* fields */
.field-l{display:flex;flex-direction:column;gap:6px;margin-top:12px;font:700 13px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);flex:none}
.field-in{min-height:58px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);color:var(--snow);font:500 18px Barlow;padding:12px 14px;width:100%;text-transform:none;letter-spacing:0}
.field{min-height:56px;border-radius:18px;background:var(--panel);border:1px solid var(--line);padding:14px 16px;font:500 16px/1.4 Barlow;color:var(--snow);flex:none}
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px;flex:none}
.qchips label,.qchips button,.qchips>span{min-height:56px;display:inline-flex;align-items:center;padding:0 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font:600 15px Barlow;color:var(--snow);cursor:pointer;position:relative}
.qchips input{position:absolute;opacity:0;pointer-events:none}
.qchips label:has(input:checked),.qchips .on{border-color:var(--cyan);color:var(--cyan)}
.qchips.center-row{justify-content:center}
.qchips .pickdt input{position:absolute;inset:0;opacity:0;width:100%}
.sig{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:110px;border-radius:20px;border:1.5px dashed var(--line2);padding:12px 16px;margin-top:12px;flex:none}
.sig input{background:none;border:0;color:var(--snow);font:800 italic 34px var(--cond);min-height:48px}
.sig small{font:600 13px Barlow;color:var(--mute)}
.card.kvs{padding:6px 18px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font:500 15.5px Barlow}
.kv:last-child{border:0}.kv span{color:var(--mute)}.kv b{font-weight:600;text-align:right}
.card.tight{padding:14px 16px;margin-top:10px}
.row.slim{min-height:40px;padding:6px 0}
.row.toggle-row{cursor:pointer}
.toggle{appearance:none;-webkit-appearance:none;width:58px;height:34px;border-radius:99px;background:var(--panel2);border:1px solid var(--line2);position:relative;flex:none;margin-left:auto;cursor:pointer}
.toggle::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--mute);transition:left .15s}
.toggle:checked{background:var(--ok);border-color:var(--ok)}.toggle:checked::after{left:28px;background:#fff}
.row.toggle-row{min-height:64px}
/* yes/no as links/forms */
.yn.short label,.yn.short button,.yn.short a{height:96px;font-size:30px}
.yn a,.yn button{height:150px;border-radius:28px;font:800 italic 44px var(--cond);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;border:0;cursor:pointer;width:100%}
.yn a.no,.yn button.no{background:var(--panel2);color:var(--snow);border:1.5px solid var(--line2)}
.yn button.yes,.yn a.yes{background:var(--ok);color:#03200F}
.yn button.yes.danger{background:var(--bad);color:#fff}
.yn .yes-form{display:contents}
.yn.pick label.word small{font-style:normal}
.yn small{display:block}
/* serial plates */
.serials{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;flex:none}
.serial-opt{min-height:60px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);display:flex;flex-direction:column;justify-content:center;padding:6px 12px;cursor:pointer;position:relative}
.serial-opt input{position:absolute;opacity:0}
.serial-opt span{font:600 14px Barlow;color:var(--mute)}
.serial-opt b{font:800 italic 22px var(--cond);color:var(--snow);margin-left:2px}
.serial-opt small{font:600 12px Barlow;color:var(--mute)}
.serial-opt:has(input:checked){border-color:var(--cyan)}
.serial-big{font:700 22px Barlow;margin-top:4px;letter-spacing:.02em}
.serial-big b{color:var(--cyan)}
.tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;flex:none}
.tpick{height:56px;border-radius:16px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;font:800 italic 24px var(--cond);cursor:pointer;position:relative}
.tpick input{position:absolute;opacity:0}
.tpick.taken{background:#0E1A14;color:#3E6B52;cursor:default}
.tpick:has(input:checked){background:linear-gradient(100deg,var(--cyan),var(--blue));color:var(--ink);border-color:transparent}
/* job services */
.pick-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;flex:none}
.pick-row{min-height:64px;border-radius:20px;border:1.5px solid var(--line2);background:var(--panel2);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 18px;cursor:pointer;position:relative}
.pick-row input{position:absolute;opacity:0}
.pick-row span{font:700 18px Barlow}.pick-row small{font:600 13px Barlow;color:var(--sub);text-align:right}
.pick-row:has(input:checked){background:var(--ok);border-color:var(--ok);color:#03200F}
.pick-row:has(input:checked) small{color:#0B4A28}
.sub-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;color:var(--sub);font:600 16px Barlow;text-decoration:none;background:none;border:0;cursor:pointer;width:100%;flex:none}
.sub-link.red{color:var(--bad)}
.sub-link input{width:20px;height:20px}
.dealer-fields{margin-top:6px}
/* problem chat */
.chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:0;overflow:hidden;padding:10px 0}
.bub{max-width:88%;padding:12px 15px;border-radius:20px;font:500 15.5px/1.4 Barlow}
.bub.me{align-self:flex-end;background:linear-gradient(100deg,var(--cyan),var(--blue));color:var(--ink);border-bottom-right-radius:6px;font-weight:600}
.bub.ai{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:6px}
.bub .src{display:block;margin-top:8px;font:600 12.5px Barlow;color:var(--cyan)}
.help-form .askbar{display:flex;gap:10px;align-items:center}
.help-form .in{flex:1;min-height:60px;border-radius:20px;background:var(--panel);border:1px solid var(--line);padding:0 16px;font:500 17px Barlow;color:var(--snow)}
.help-form .round{width:60px;height:60px;border-radius:20px;border:0;background:linear-gradient(100deg,var(--cyan),var(--blue));color:var(--ink);font-size:24px;cursor:pointer}
.skip{display:block;width:100%;min-height:56px;background:none;border:0;color:var(--sub);font:600 15px Barlow;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.src{font:600 12.5px Barlow;color:var(--cyan);margin-top:8px}
video.ph{width:100%;object-fit:cover}
.ph.banner{display:block}
a.ph{display:block}
/* scrolling list pages in the new look (menu pages) */
.mode-page.list main>h1:first-child{display:none}
.mode-page.list .card.rows,.mode-page.list .card{margin-top:12px}
.mode-page.list .row{min-height:60px}
.mode-page.list p{margin:4px 0}
.hist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mode-page .hrow{margin:0;border-radius:16px}
.mode-page .hrow summary{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 0}
.hrow .t{font:600 16px Barlow}.hrow .s{font:500 13px Barlow;color:var(--mute)}
/* Ask AI inside the shell */
.ask-screen.ask-in-shell{height:auto;flex:1;min-height:0;max-width:none;margin:0;background:none;display:flex;flex-direction:column}
.ask-in-shell .banner{margin-bottom:10px}
.ask-in-shell .ask-unit{height:56px}
.ask-in-shell .chip{height:56px}
/* the Ask module's round camera button also has class "cam"; keep it a button, not a camera frame */
.ask-in-shell .round.cam{flex:none;min-height:0;height:64px;width:64px;margin:0;display:grid;place-items:center;border-radius:20px;overflow:visible;background:var(--panel2);border:1px solid var(--line)}
/* short multi-screen forms */
.wizard{flex:1;display:flex;flex-direction:column;min-height:0}
.wizard>.view{display:flex;flex-direction:column}
.js .wizard>.view{display:none;flex:1;min-height:0}
.js .wizard>.view.on{display:flex}
a.back{display:flex;align-items:center;text-decoration:none}
.readout-wrap .readout{width:auto;max-width:78%;flex:none;field-sizing:content;min-width:1.2ch}
.readout:focus,.readout:focus-visible{outline:none}
.more-items{flex:none;margin-bottom:6px}
.more-items summary{min-height:56px;display:flex;align-items:center;color:var(--sub);font:600 16px Barlow;cursor:pointer}
.more-items .qchips{max-height:240px;overflow:auto}
.yn a.word{font-size:28px;line-height:1;text-align:center;padding:0 10px}
.shift-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none}
.shift-row button{height:64px;border-radius:20px;background:var(--panel2);border:1.5px solid var(--line2);color:var(--snow);font:800 italic 26px var(--cond);cursor:pointer}
.cell .sign{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);color:var(--snow);font:600 24px Barlow;cursor:pointer}