/* Zalynto Pit -- same "Pit Wall" tokens as the desktop app (zalynto_pitwall.qss). */
:root{
  color-scheme: dark;
  --base:#0E1116; --surface:#151A21; --raised:#1C222B; --raised-2:#232A34; --field:#0A0D11;
  --line:#232A33; --edge:#2B333E; --text:#ECE9E3; --muted:#8D939C; --faint:#5C636D;
  --accent:#F2994A; --accent-2:#FFAD5C;
  --green:#4CC38A; --green-bg:#15352A; --yellow:#E8C547; --yellow-bg:#352F14;
  --red:#E5534B; --red-bg:#3D1C1B; --blue:#5B9BE6; --blue-bg:#16283D;
  --ui: Arial, "Segoe UI", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Roboto Mono", monospace;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--base);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;}
#app{min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;position:relative;}

/* bundled (the CSP allows no outside fonts); a phone has no Plex Mono of its own */
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-Medium.ttf) format("truetype");}
@font-face{font-family:"IBM Plex Mono";font-weight:600 700;font-display:swap;src:url(fonts/IBMPlexMono-SemiBold.ttf) format("truetype");}

/* ---- header: Zalynto brand strip (website look) + where you are + session clock ---- */
.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);}
.brandbar{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  background:#0A1420;position:relative;}
.brandbar::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,#0090E7 0 75%,#E8342B 75% 100%);}
.brandbar img{width:24px;height:24px;border-radius:5px;display:block;}
.brandbar .wm{font-weight:700;font-size:16px;letter-spacing:.14em;color:#F5F7FA;}
.brandbar .app{font-weight:700;font-size:11px;letter-spacing:.16em;color:#fff;background:#0090E7;border-radius:4px;padding:3px 6px 2px;}
.grow{flex:1;}
.bar{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;}
.clock{display:flex;align-items:center;gap:8px;margin:0 14px 10px;padding:7px 10px;border-radius:10px;
  background:var(--raised);border:1px solid var(--edge);font-size:13px;color:var(--muted);}
.clock b{color:var(--text);font-weight:700;}
.clock .mono{color:var(--text);font-size:14px;}
.clock .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none;}
.clock.live{border-color:var(--green);background:var(--green-bg);}
.clock.live .dot{background:var(--green);}
.tracktemp{display:grid;grid-template-columns:auto auto 1fr 76px auto;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;}
.tracktemp .last{font-size:18px;font-weight:600;}
.tracktemp .ago{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tracktemp input{width:100%;min-width:0;background:var(--field);border:1px solid var(--edge);border-radius:10px;color:var(--text);
  font-family:var(--mono);font-size:16px;padding:8px;text-align:center;}
.tracktemp input:focus{outline:2px solid var(--accent);}
.bar .back{background:none;border:0;color:var(--text);font-size:24px;line-height:1;padding:4px 8px 4px 0;cursor:pointer;}
.bar .ttl{flex:1;min-width:0;}
.bar .ttl b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar .ttl span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.net{font-family:var(--mono);font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid var(--edge);
  background:var(--raised);color:var(--green);white-space:nowrap;cursor:pointer;}
.net.off{color:#fff;background:var(--red);border-color:var(--red);}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.06em;font-size:15px;}
.brand img{width:26px;height:26px;border-radius:6px;}
.screen{flex:1;padding:14px 14px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;}
.lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.empty{color:var(--muted);font-size:14px;line-height:1.5;text-align:center;padding:30px 10px;}

/* ---- login / pick ---- */
.login{padding:32px 20px;display:flex;flex-direction:column;gap:14px;}
.login h2{margin:14px 0 2px;font-size:22px;}
.login p{margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.5;}
.field{display:flex;flex-direction:column;gap:6px;}
.field input,.field select,.field textarea{background:var(--field);border:1px solid var(--edge);color:var(--text);
  border-radius:10px;padding:13px 12px;font-size:16px;font-family:var(--ui);width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);}
.field select:disabled{color:var(--faint);}
.btn{border:0;border-radius:12px;padding:15px 14px;font-size:16px;font-weight:700;cursor:pointer;font-family:var(--ui);}
.btn:disabled{opacity:.5;cursor:default;}
.btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
.btn-primary{background:var(--accent);color:#1A1208;}
.btn-primary:active{background:var(--accent-2);}
.btn-ghost{background:var(--raised);color:var(--text);border:1px solid var(--edge);}
.btn-green{background:var(--green);color:#06140D;}
.btn-small{padding:9px 12px;font-size:14px;border-radius:10px;}
.hint{font-size:12px;color:var(--faint);text-align:center;line-height:1.5;}
.err{background:var(--red-bg);border:1px solid var(--red);color:#F3C5C2;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.4;}
.info{background:var(--raised);border:1px solid var(--edge);color:var(--muted);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45;}

/* ---- countdown ---- */
.next{background:var(--raised);border:1px solid var(--edge);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;}
.next.due{background:var(--red-bg);border-color:var(--red);}
.next.soon{background:#3A2716;border-color:var(--accent);}
.next .big{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.next .txt{flex:1;font-size:13px;color:var(--muted);line-height:1.35;}
.next .txt b{color:var(--text);font-size:15px;display:block;}

/* ---- set cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;
  grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;cursor:pointer;text-align:left;color:var(--text);
  font-family:var(--ui);width:100%;}
.card:active{background:var(--raised);}
.card .on{grid-row:span 2;font-family:var(--mono);font-size:24px;font-weight:600;min-width:74px;}
.card .on small{display:block;font-size:10px;color:var(--muted);font-family:var(--ui);font-weight:400;letter-spacing:.08em;}
.card .set{font-size:17px;font-weight:700;overflow-wrap:anywhere;}
.card .meta{font-size:12px;color:var(--muted);}
.card.isdone{opacity:.55;}
.chip{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;white-space:nowrap;grid-row:span 2;align-self:center;}
.chip.plan{background:var(--raised-2);color:var(--muted);}
.chip.heat{background:#3A2716;color:var(--accent);}
.chip.done{background:var(--green-bg);color:var(--green);}
.chip.late{background:var(--red-bg);color:var(--red);}

/* ---- detail ---- */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px;}
.hero .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.kv div{background:var(--raised);border-radius:10px;padding:8px 10px;}
.kv b{display:block;font-family:var(--mono);font-size:18px;margin-top:2px;}
.car{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.car .tyre{background:var(--field);border:1px solid var(--edge);border-radius:12px;padding:10px;text-align:center;}
.car .tyre span{font-size:11px;color:var(--muted);letter-spacing:.08em;}
.car .tyre b{display:block;font-family:var(--mono);font-size:30px;font-weight:600;color:var(--accent);}
.car .tyre b.none{color:var(--faint);}
.car .tyre input{width:100%;margin-top:4px;background:var(--base);border:1px solid var(--edge);border-radius:8px;color:var(--text);
  font-family:var(--mono);font-size:24px;text-align:center;padding:6px 4px;}
.car .tyre input:focus{outline:2px solid var(--accent);}
.sub{font-size:12px;color:var(--muted);text-align:center;line-height:1.4;}
.section{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;}
.section h3{margin:0;font-size:14px;}
.stamp{font-size:13px;color:var(--green);}
.inline{display:flex;gap:8px;align-items:center;}
.inline input{flex:1;min-width:0;background:var(--field);border:1px solid var(--edge);border-radius:10px;color:var(--text);
  font-family:var(--mono);font-size:20px;padding:10px 12px;}
.inline input:focus{outline:2px solid var(--accent);}
.warn{background:var(--red-bg);border:1px solid var(--red);color:#F3C5C2;border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.4;}

/* ---- bottom action + toast ---- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(transparent,var(--base) 30%);display:flex;gap:8px;max-width:560px;margin:0 auto;}
.dock .btn{flex:1;}
.toast{position:fixed;left:14px;right:14px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:9;max-width:532px;margin:0 auto;
  background:var(--raised-2);border:1px solid var(--accent);border-radius:12px;padding:12px 14px;font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);}
.toast.bad{border-color:var(--red);}
@media (prefers-reduced-motion:no-preference){ .toast{animation:drop .2s ease-out;} @keyframes drop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}} }

/* ---- sections (bottom tabs) ---- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;max-width:560px;margin:0 auto;
  background:var(--surface);border-top:1px solid var(--line);padding:0 0 env(safe-area-inset-bottom,0px);}
.tabs button{flex:1;background:none;border:0;color:var(--muted);font:700 14px var(--ui);padding:15px 4px 14px;cursor:pointer;
  position:relative;border-top:3px solid transparent;}
.tabs button.on{color:var(--text);border-top-color:#0090E7;}
.badge{display:inline-block;min-width:18px;margin-left:6px;padding:1px 5px;border-radius:999px;background:var(--red);color:#fff;
  font:700 11px var(--ui);vertical-align:1px;}
.badge[hidden]{display:none;}
.grp{margin:6px 2px 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.grp span{color:var(--faint);margin-left:4px;}

/* ---- jobs ---- */
.job{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;}
.job.isdone{opacity:.55;}
.check{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--edge);background:var(--field);color:#06140D;
  font:700 18px var(--ui);cursor:pointer;margin-top:1px;}
.check.on{background:var(--green);border-color:var(--green);}
.check:disabled{opacity:.5;}
.jtxt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.jtxt b{font-size:16px;overflow-wrap:anywhere;}
.jtxt .meta,.meta{font-size:12px;color:var(--muted);}
.cmt{font-size:13px;color:var(--text);opacity:.8;overflow-wrap:anywhere;}

/* ---- issues ---- */
.seg{display:flex;background:var(--raised);border:1px solid var(--edge);border-radius:12px;padding:3px;}
.seg button{flex:1;background:none;border:0;color:var(--muted);font:700 14px var(--ui);padding:9px;border-radius:9px;cursor:pointer;}
.seg button.on{background:var(--raised-2);color:var(--text);}
.icard{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;text-align:left;width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--text);font-family:var(--ui);cursor:pointer;}
.icard.new{border-color:#0090E7;}
.icard .num{color:var(--muted);font-size:14px;padding-top:1px;}
.icard .ititle{font-size:16px;font-weight:700;overflow-wrap:anywhere;}
.icard .chips,.icard .meta{grid-column:2;}
.icard.nonum{grid-template-columns:1fr;}
.icard.nonum .chips,.icard.nonum .meta{grid-column:1;}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chips .chip{grid-row:auto;text-transform:capitalize;}
.prio-low{background:var(--raised-2);color:var(--muted);}
.prio-normal{background:var(--blue-bg);color:var(--blue);}
.prio-high{background:#3A2716;color:var(--accent);}
.prio-critical{background:var(--red-bg);color:var(--red);}
.st-open{background:var(--raised-2);color:var(--text);}
.st-in_progress{background:var(--yellow-bg);color:var(--yellow);}
.st-fixed,.st-verified{background:var(--green-bg);color:var(--green);}
.st-wont_fix{background:var(--raised-2);color:var(--faint);}
.desc{margin:0;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;}
.desc.muted{color:var(--faint);}
.stbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.stbtns button{background:var(--raised);border:1px solid var(--edge);color:var(--text);border-radius:10px;padding:11px 8px;
  font:700 14px var(--ui);cursor:pointer;}
.stbtns button.on{background:#0090E7;border-color:#0090E7;color:#fff;}
.jline{display:grid;grid-template-columns:18px 1fr;gap:2px 8px;font-size:14px;}
.jline .meta{grid-column:2;}
.jline.isdone{opacity:.6;}
.ev{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--line);font-size:14px;overflow-wrap:anywhere;}
.ev:first-of-type{border-top:0;}
.ev-comment span:last-child{color:var(--text);}
.section textarea,.field textarea{width:100%;background:var(--field);border:1px solid var(--edge);color:var(--text);border-radius:10px;
  padding:11px 12px;font:16px var(--ui);resize:vertical;}
.section textarea:focus{outline:2px solid var(--accent);border-color:var(--accent);}

/* ---- setup (view only) ---- */
.setupbar{display:grid;gap:8px;}
.setupcat h3{font-size:15px;}
.setupcat h4{margin:6px 0 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid var(--line);}
.srow .sl{font-size:14px;color:var(--text);min-width:0;overflow-wrap:anywhere;}
.srow .unit{font-size:11px;color:var(--faint);margin-left:2px;}
.srow b{font-family:var(--mono);font-size:16px;font-weight:600;text-align:right;overflow-wrap:anywhere;}
.srow b .nil,.srow b.nil{color:var(--faint);font-weight:400;}
.srow.corners{flex-direction:column;align-items:stretch;gap:6px;}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.cgrid div{background:var(--field);border:1px solid var(--edge);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;align-items:center;}
.cgrid span{font-size:10px;letter-spacing:.08em;color:var(--muted);}
.cgrid b{text-align:center;}
.chg{color:var(--accent);}
.srow s,.cgrid s{font-family:var(--mono);font-size:12px;color:var(--faint);}
.srow:not(.corners) s{margin-left:8px;}
.srow.diff .sl{color:var(--accent-2);}

/* notifications on/off (pick screen) */
.pushbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
.pushbox p{margin:0;font-size:13px;color:var(--faint);line-height:1.45;}
.pushbox .btn{align-self:flex-start;}