/* ---- LIGHT (default) ---- */
:root{
  --bg:#F5F4F0; --map:#EDEBE4; --grid:#E2DFD6;
  --ink:#22242A; --ink-2:#5A5E68; --panel:#FFFFFF; --panel-2:#F1EFEA;
  --line:#D8D4C9;
  --orange:#F26D21; --amber:#D98F1F; --green:#2E9150; --pink:#E64980; --blue:#3D7FC4;
  --planned:#9A958A; --white-mark:#FFFFFF; --red:#D14343;
  --accent:#F26D21; --accent-ink:#FFFFFF;
  --shadow:0 -8px 30px rgba(20,20,25,.18);
  --sc:1;          /* UI size scale */
  --stroke:1;      /* map line-weight multiplier */
}
/* ---- DARK ---- */
@media (prefers-color-scheme: dark){:root{
  --bg:#16181C; --map:#1B1D21; --grid:#22252B;
  --ink:#EDEDEA; --ink-2:#9CA0A8; --panel:#1F2126; --panel-2:#26292F;
  --line:#33373F;
  --orange:#F97F35; --amber:#E8A33D; --green:#3FA860; --pink:#F06595; --blue:#4A90D9;
  --planned:#6C7078; --white-mark:#E8E8E4; --red:#E05B5B;
  --accent:#F97F35; --accent-ink:#FFFFFF;
  --shadow:0 -8px 30px rgba(0,0,0,.5);
}}
:root[data-mode="light"]{
  --bg:#F5F4F0; --map:#EDEBE4; --grid:#E2DFD6;
  --ink:#22242A; --ink-2:#5A5E68; --panel:#FFFFFF; --panel-2:#F1EFEA; --line:#D8D4C9;
  --orange:#F26D21; --amber:#D98F1F; --green:#2E9150; --pink:#E64980; --blue:#3D7FC4;
  --planned:#9A958A; --white-mark:#FFFFFF; --red:#D14343;
  --accent:#F26D21; --accent-ink:#FFFFFF; --shadow:0 -8px 30px rgba(20,20,25,.18); --stroke:1;
}
:root[data-mode="dark"]{
  --bg:#16181C; --map:#1B1D21; --grid:#22252B;
  --ink:#EDEDEA; --ink-2:#9CA0A8; --panel:#1F2126; --panel-2:#26292F; --line:#33373F;
  --orange:#F97F35; --amber:#E8A33D; --green:#3FA860; --pink:#F06595; --blue:#4A90D9;
  --planned:#6C7078; --white-mark:#E8E8E4; --red:#E05B5B;
  --accent:#F97F35; --accent-ink:#FFFFFF; --shadow:0 -8px 30px rgba(0,0,0,.5); --stroke:1;
}
/* ---- SUN (max contrast for direct sunlight) ---- */
:root[data-mode="sun"]{
  --bg:#FFFFFF; --map:#FFFFFF; --grid:#D9D9D9;
  --ink:#000000; --ink-2:#333333; --panel:#FFFFFF; --panel-2:#ECECEC; --line:#8A8A8A;
  --orange:#D24200; --amber:#9A5B00; --green:#0A6B1E; --pink:#B3005B; --blue:#0047B3;
  --planned:#4A4A4A; --white-mark:#FFFFFF; --red:#C40000;
  --accent:#D24200; --accent-ink:#FFFFFF; --shadow:0 -8px 30px rgba(0,0,0,.25); --stroke:1.5;
}
/* ---- NIGHT-VIZ (neon green on black) ---- */
:root[data-mode="night"]{
  --bg:#000000; --map:#050805; --grid:#0F1A0F;
  --ink:#E9FFE9; --ink-2:#7FCf7F; --panel:#0A0F0A; --panel-2:#111811; --line:#204020;
  --orange:#FF8A3D; --amber:#E0C000; --green:#39FF14; --pink:#FF4FA3; --blue:#4CC9FF;
  --planned:#5B8F5B; --white-mark:#E9FFE9; --red:#FF4D4D;
  --accent:#39FF14; --accent-ink:#00230A; --shadow:0 -8px 30px rgba(0,0,0,.7); --stroke:1.4;
}
/* ---- size scale ---- */
:root[data-scale="s"]{--sc:.9}
:root[data-scale="m"]{--sc:1}
:root[data-scale="l"]{--sc:1.18}
:root[data-scale="xl"]{--sc:1.4}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0; font-family:Roboto,"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink);
  overflow:hidden; touch-action:none; user-select:none; overscroll-behavior:none}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-variant-numeric:tabular-nums}
button{font-family:inherit}

/* test-version bar */
:root{--tbh:calc(env(safe-area-inset-top,0px) + 34px)}
#testbar{position:fixed; top:0; left:0; right:0; z-index:60; height:var(--tbh);
  padding:env(safe-area-inset-top,0px) 10px 0; background:var(--red); color:#fff;
  display:flex; align-items:center; gap:8px}
#testbar .tbtxt{flex:1; font-size:calc(11px * var(--sc)); font-weight:700; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#feedbackBtn{background:#fff; color:var(--red); border:none; border-radius:5px; font-weight:800;
  font-size:calc(11px * var(--sc)); padding:5px 10px; cursor:pointer; white-space:nowrap; flex:none}

/* header */
#hdr{position:fixed; top:var(--tbh); left:0; right:0; z-index:30; background:var(--panel);
  border-bottom:1px solid var(--line); padding:8px 14px}
.hrow{display:flex; align-items:center; gap:8px}
.hproj{font-weight:700; font-size:calc(15px * var(--sc)); letter-spacing:.02em}
.hsub{font-size:calc(11px * var(--sc)); color:var(--ink-2)}
.chip{font-size:calc(10px * var(--sc)); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:4px; border:1px solid var(--line); color:var(--ink-2);
  background:none; cursor:pointer}
.chip.spin{animation:spin 1s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.chip.warn{color:#fff; background:var(--amber); border-color:transparent}
.chip.bad{color:#fff; background:var(--red); border-color:transparent}
.chip.ok{color:var(--green); border-color:var(--green)}
.spacer{flex:1}
.prog{margin-top:8px}
.prog-lbl{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-2); margin-bottom:4px}
.prog-lbl b{color:var(--ink); font-weight:600}
.bar{height:5px; background:var(--panel-2); border-radius:2px; overflow:hidden; display:flex}
.bar i{display:block; height:100%; width:0}
.bar .jet{background:var(--green)} .bar .drl{background:var(--amber)}
.banner{margin-top:8px; font-size:12px; font-weight:600; padding:7px 10px; border-radius:6px}
.banner.bad{background:var(--red); color:#fff}
.banner.warn{background:var(--amber); color:#fff}

/* map */
#map{position:fixed; inset:0; background:var(--map); display:block; cursor:grab}

/* long-press ghost */
#lpGhost{position:fixed; width:54px; height:54px; border-radius:50%; border:2px solid var(--orange);
  pointer-events:none; display:none; z-index:25; transform:translate(-50%,-50%)}
#lpGhost i{position:absolute; inset:6px; border-radius:50%; background:var(--orange); opacity:.25;
  transform:scale(0); transition:transform .55s linear}
#lpGhost.on i{transform:scale(1)}

/* side buttons */
.sidebtns{position:fixed; right:10px; z-index:20; display:flex; flex-direction:column; gap:8px}
.sidebtns button{width:calc(42px * var(--sc)); height:calc(42px * var(--sc)); border-radius:8px; background:var(--panel);
  border:1px solid var(--line); color:var(--ink); font-size:calc(16px * var(--sc)); font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.12)}
.sidebtns button.on{border-color:var(--accent); color:var(--accent)}

/* popovers */
.pop{position:fixed; z-index:35; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); display:none; padding:10px 12px}
.pop.open{display:block}
#legend{min-width:150px; font-size:11px}
#legend h4{margin:6px 0; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
#legend h4:first-child{margin-top:0}
.lrow{display:flex; align-items:center; gap:8px; padding:2.5px 0}
.sw{width:18px; height:0; border-top:3px solid; border-radius:2px}
.sw.dash{border-color:var(--planned); border-top-style:dashed}
.sw.amber{border-color:var(--amber)} .sw.green{border-color:var(--green)} .sw.orange{border-color:var(--orange)}
.dot{width:10px; height:10px; border-radius:50%; border:2px solid}
.dot.d0{border-color:var(--planned)} .dot.d1{border-color:var(--white-mark); background:var(--white-mark)}
.dot.d2{border-color:var(--amber); background:var(--amber)} .dot.d3{border-color:var(--blue); background:var(--blue)}
.dot.d4{border-color:var(--green); background:var(--green)} .dot.df{border-color:var(--pink)}

#ctx{min-width:200px; padding:0; overflow:hidden}
#ctx button{display:flex; gap:10px; align-items:center; width:100%; padding:calc(12px * var(--sc)) 14px; background:none;
  border:none; border-bottom:1px solid var(--line); font-size:calc(13.5px * var(--sc)); color:var(--ink); cursor:pointer; text-align:left}
#ctx button:last-child{border-bottom:none}
#ctx button.ctxsep{padding:calc(5px * var(--sc)) 14px; background:var(--panel-2);
  font-size:calc(10px * var(--sc)); text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-2); cursor:default; opacity:1}
#ctx button.ctxsep .ic{width:8px; height:8px}
#ctx .ic{width:12px; height:12px; border-radius:3px; flex:none}

/* bottom sheet */
#sheet{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--panel);
  border-radius:14px 14px 0 0; box-shadow:var(--shadow); transform:translateY(105%);
  transition:transform .25s ease; max-height:80vh; overflow-y:auto; padding:6px 16px calc(env(safe-area-inset-bottom,0px) + 22px);
  touch-action:pan-y}
#sheet.open{transform:translateY(0)}
.grab{width:36px; height:4px; border-radius:2px; background:var(--line); margin:6px auto 10px}
.stitle{display:flex; align-items:baseline; gap:10px; margin-bottom:2px}
.stitle h3{margin:0; font-size:calc(17px * var(--sc)); font-weight:700}
.stitle .sub{font-size:calc(11px * var(--sc)); color:var(--ink-2)}
.sec{margin-top:14px}
.sec h5{margin:0 0 8px; font-size:calc(10px * var(--sc)); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.st-chip{padding:calc(7px * var(--sc)) calc(14px * var(--sc)); border-radius:20px; border:1.5px solid var(--line);
  font-size:calc(12.5px * var(--sc)); font-weight:600; background:none; color:var(--ink-2); cursor:pointer}
.st-chip.on{color:#fff; border-color:transparent}
.st-chip.on.c-grey{background:var(--planned)}
.st-chip.on.c-amber{background:var(--amber)}
.st-chip.on.c-blue{background:var(--blue)}
.st-chip.on.c-green{background:var(--green)}
.st-chip.on.c-pink{background:var(--pink)}
.st-chip.on.c-orange{background:var(--orange)}
.st-chip.on.c-accent{background:var(--accent); color:var(--accent-ink)}
.checks{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px}
.ck{display:flex; align-items:center; gap:9px; padding:calc(9px * var(--sc)) 10px; border:1px solid var(--line);
  border-radius:8px; font-size:calc(13px * var(--sc)); cursor:pointer}
.ck input{width:calc(17px * var(--sc)); height:calc(17px * var(--sc)); accent-color:var(--green); margin:0}
.frow{display:flex; gap:10px; align-items:flex-end}
.fld{flex:1}
.fld label{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:4px}
.fld input,.fld select{width:100%; padding:calc(9px * var(--sc)) 10px; border:1px solid var(--line); border-radius:8px;
  font-size:calc(15px * var(--sc)); background:var(--panel-2); color:var(--ink)}
.loopout{font-size:12px; color:var(--ink-2); padding-bottom:10px; white-space:nowrap}
.loopout b{color:var(--green); font-size:15px}
.syncnote{display:flex; gap:7px; align-items:center; margin-top:8px; font-size:11.5px; color:var(--ink-2)}
.syncnote .sdot{width:7px; height:7px; border-radius:50%; background:var(--green); flex:none}
.syncnote .sdot.pink{background:var(--pink)}
.btnrow{display:flex; gap:10px; margin-top:18px}
.btn{flex:1; padding:calc(12px * var(--sc)); border-radius:9px; border:none; font-size:calc(14px * var(--sc)); font-weight:700; cursor:pointer}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.ghost{background:none; border:1.5px solid var(--line); color:var(--ink)}
.btn.flag{background:none; border:1.5px solid var(--pink); color:var(--pink)}
.btn.danger{background:none; border:1.5px solid var(--red); color:var(--red)}
.btn:disabled{opacity:.45; cursor:default}
.photos{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.photos img{width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}
.photos .addph{width:64px; height:64px; border-radius:8px; border:1.5px dashed var(--line); background:none;
  color:var(--ink-2); font-size:22px; cursor:pointer}
.list{margin:0; padding:0; list-style:none}
.list li{display:flex; gap:10px; align-items:center; padding:10px 2px; border-bottom:1px solid var(--line); font-size:13px}
.list li:last-child{border-bottom:none}
.list .tag{font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:3px; color:#fff}
.tag.bad{background:var(--red)} .tag.warn{background:var(--amber)} .tag.ok{background:var(--green)}
.tag.pink{background:var(--pink)} .tag.grey{background:var(--planned)}
.mut{font-size:11px; color:var(--ink-2)}

/* modal */
#modal{position:fixed; inset:0; z-index:50; background:rgba(10,10,14,.55); display:none;
  align-items:center; justify-content:center; padding:20px}
#modal.open{display:flex}
.mcard{background:var(--panel); border-radius:12px; padding:18px; max-width:380px; width:100%; max-height:80vh; overflow-y:auto}
.mcard h3{margin:0 0 4px; font-size:15px}
.mcard .sub{font-size:11px; color:var(--ink-2); margin-bottom:10px}
.mcard pre{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:12px;
  font-size:12px; line-height:1.55; overflow-x:auto; margin:0; user-select:text}

#toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(90px); z-index:60;
  background:var(--ink); color:var(--bg); font-size:13px; padding:10px 18px; border-radius:20px;
  transition:transform .25s ease; max-width:88vw; text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}

/* home screen */
.homebtn{font-size:calc(15px * var(--sc)); padding:4px 10px}
#home{position:fixed; inset:0; z-index:46; background:var(--bg); display:none;
  flex-direction:column; padding:calc(var(--tbh) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
#home.open{display:flex}
.home-head{display:flex; align-items:center; gap:10px; margin-bottom:14px}
#projList{flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:10px; min-height:60px}
.projcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px;
  cursor:pointer; display:flex; flex-direction:column; gap:8px}
.projcard.active{border-color:var(--accent)}
.projcard .prow{display:flex; align-items:baseline; gap:10px}
.projcard .pname{font-weight:700; font-size:calc(15px * var(--sc)); flex:1}
.projcard .pstats{display:flex; gap:14px; font-size:calc(11.5px * var(--sc)); color:var(--ink-2); flex-wrap:wrap}
.projcard .pstats b{color:var(--ink)}
.projcard .bar{margin-top:2px}
.projcard .pact{display:flex; gap:8px; justify-content:flex-end}
.home-actions{display:flex; gap:10px; margin-top:14px; flex:none}
.home-actions .btn{flex:1}

/* home panels: appearance, links */
.home-panel{margin-top:14px; padding:12px 14px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; flex:none}
.home-panel h4{margin:0 0 8px; font-size:calc(10px * var(--sc)); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.small{font-size:calc(10.5px * var(--sc))}
.seg-row{display:flex; gap:6px}
.seg-row button{flex:1; padding:calc(9px * var(--sc)) 4px; border:1.5px solid var(--line); border-radius:8px;
  background:none; color:var(--ink-2); font-size:calc(12.5px * var(--sc)); font-weight:700; cursor:pointer}
.seg-row button.on{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.home-links{display:flex; flex-direction:column; gap:8px; margin-top:12px; flex:none}
.linkbtn{text-align:left; padding:calc(12px * var(--sc)) 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink); font-size:calc(13.5px * var(--sc)); font-weight:600; cursor:pointer}

/* help viewer */
.help-search{width:100%; padding:calc(10px * var(--sc)) 12px; border:1px solid var(--line); border-radius:8px;
  font-size:calc(15px * var(--sc)); background:var(--panel-2); color:var(--ink); margin-bottom:10px}
.help-toc{display:flex; flex-direction:column; gap:2px; margin-bottom:6px}
.help-toc a{padding:8px 10px; border-radius:7px; color:var(--ink); text-decoration:none; font-size:calc(13.5px * var(--sc)); cursor:pointer}
.help-toc a:hover{background:var(--panel-2)}
.help-body h2{font-size:calc(16px * var(--sc)); margin:18px 0 6px; scroll-margin-top:8px}
.help-body h3{font-size:calc(13.5px * var(--sc)); margin:12px 0 4px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em}
.help-body p,.help-body li{font-size:calc(13.5px * var(--sc)); line-height:1.6; color:var(--ink)}
.help-body mark{background:var(--accent); color:var(--accent-ink); border-radius:3px; padding:0 2px}
.help-hidden{display:none}

/* spec tooltips */
#maptip{position:fixed; z-index:44; display:none; max-width:280px; background:var(--panel);
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px;
  padding:8px 10px; font-size:calc(11.5px * var(--sc)); box-shadow:0 4px 14px rgba(0,0,0,.25);
  pointer-events:none; color:var(--ink)}
#maptip ul{margin:5px 0 0; padding-left:16px}
#maptip li{margin:2px 0; color:var(--ink-2)}
.specbox{margin-top:12px; border:1px solid var(--line); border-radius:9px; padding:9px 12px}
.specbox summary{font-size:calc(12.5px * var(--sc)); font-weight:700; cursor:pointer; color:var(--ink)}
.specbox ul{margin:8px 0 4px; padding-left:18px}
.specbox li{font-size:calc(12.5px * var(--sc)); line-height:1.5; color:var(--ink); margin:3px 0}

/* comments */
.dot.dc{border-color:var(--amber); background:var(--panel); border-radius:4px}

/* comments */
.dot.dc{border-color:var(--amber); background:var(--panel); border-radius:4px}

/* page spin wheel */
.wheelwrap{position:relative; margin-top:10px}
.wheelband{position:absolute; left:0; right:0; top:50%; height:38px; transform:translateY(-50%);
  border-top:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent); pointer-events:none; border-radius:6px}
.wheel{height:190px; overflow-y:auto; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(transparent, #000 28%, #000 72%, transparent);
  mask-image:linear-gradient(transparent, #000 28%, #000 72%, transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel .wi{height:38px; display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center; font-size:17px; font-weight:600; color:var(--ink-2)}
.wheel .wi.cur{color:var(--ink); font-size:19px}
.wheel .pad{height:76px}

.fab{position:fixed; left:12px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); z-index:20;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:calc(11px * var(--sc)) calc(15px * var(--sc));
  font-size:calc(12.5px * var(--sc)); font-weight:700; color:var(--ink); display:flex; gap:8px; align-items:center;
  cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.15)}
.fab2{left:auto; right:12px; background:var(--accent); border-color:transparent; color:var(--accent-ink)}

/* feedback + tickets */
.fb-shot{width:100%; border:1px solid var(--line); border-radius:8px; margin:8px 0; max-height:200px; object-fit:contain; background:var(--panel-2)}
.ticket{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px}
.ticket .tr{display:flex; gap:8px; align-items:center}
.ticket .tr .tid{font-size:calc(11px * var(--sc)); color:var(--ink-2)}
.ticket .ttext{font-size:calc(13px * var(--sc)); margin:4px 0}
.tag.open{background:var(--blue)} .tag.triaged{background:var(--amber)}
.tag.progress{background:var(--accent); color:var(--accent-ink)} .tag.done{background:var(--green)}
.tag.bug{background:var(--red)} .tag.feature{background:var(--blue)} .tag.other{background:var(--planned)}
.textarea{width:100%; padding:calc(9px * var(--sc)) 10px; border:1px solid var(--line); border-radius:8px;
  font-size:calc(15px * var(--sc)); background:var(--panel-2); color:var(--ink); font-family:inherit}