/* Fortkeep themes. html[data-theme] is set by app.js from More > Appearance:
   night   (default) Night Ops: dark, emerald accent, Inter + JetBrains Mono, rounded cards
   light   the light version of Night Ops
   mammoth optional retro theme for the 90s kids: 8-bit navy, orange and yellow, pixel fonts, chunky outlines
   Every font is served from /fonts (no third-party requests); a theme's fonts load only when it is used. */
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/jetbrains-mono.woff2) format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:Atkinson;src:url(fonts/atkinson.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Pixelify;src:url(fonts/pixelify.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Silkscreen;src:url(fonts/silkscreen.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Silkscreen;src:url(fonts/silkscreen-bold.woff2) format('woff2');font-weight:700;font-display:swap}

:root,html[data-theme="night"]{--bg:#0A0C0F;--bg2:#0E1115;--card:#12161B;--card-hi:#161B21;--ink:#E8ECEF;--mute:#8B95A1;--line:#1F2730;
  --brand:#34D399;--brand-ink:#062A1C;--brand2:rgba(52,211,153,.12);--glow:rgba(52,211,153,.45);
  --warn:#FBBF24;--warn-bg:rgba(251,191,36,.12);--bad:#F87171;--bad-bg:rgba(248,113,113,.12);--ok:#34D399;--ok-bg:rgba(52,211,153,.12);
  --bar:#0A0C0F;--bar-ink:#E8ECEF;--shadow:0 10px 30px rgba(0,0,0,.35);--radius:18px;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark}
html[data-theme="light"]{--bg:#F3F5F4;--bg2:#ECEFED;--card:#FFFFFF;--card-hi:#FFFFFF;--ink:#0F1A14;--mute:#5B6B62;--line:#E1E7E3;
  --brand:#059669;--brand-ink:#FFFFFF;--brand2:#D9F5E8;--glow:rgba(5,150,105,.35);
  --warn:#B45309;--warn-bg:#FEF3C7;--bad:#C62828;--bad-bg:#FDE8E6;--ok:#047857;--ok-bg:#D1FAE5;
  --bar:#0F1A14;--bar-ink:#F3F5F4;--shadow:0 8px 24px rgba(15,26,20,.08);color-scheme:light}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
/* Sizes are in rem so the whole app grows with More > Appearance > Text size (and with the phone's own text size where
   the browser passes it on: <meta name=text-scale>). Standard is sized for phones: 17px body, nothing under 12px. */
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}html[data-text="large"]{font-size:112.5%}html[data-text="xl"]{font-size:125%}
body{font:1.0625rem/1.5 var(--sans)}
a{color:var(--brand)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* top bar */
.top{position:sticky;top:0;z-index:5;display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--bar);background:color-mix(in srgb,var(--bar) 92%,transparent);
  color:var(--bar-ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;flex:none}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font:800 0.8125rem var(--mono);letter-spacing:.02em}
.brand .pxmark{display:none;width:26px;height:26px;color:var(--brand)}
.brand b{display:block;font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;line-height:1}
.brand span{font:700 0.6562rem var(--mono);color:var(--mute);letter-spacing:.16em;text-transform:uppercase}
.top select{max-width:46%;min-width:0;width:auto;background:transparent;color:var(--bar-ink);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font:600 1rem var(--mono)}
main{overflow-x:clip;max-width:760px;margin:0 auto;padding:14px 16px calc(6.5rem + env(safe-area-inset-bottom));outline:none}

/* bottom tabs */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:5;display:grid;grid-template-columns:repeat(var(--n,4),1fr);
  background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{background:none;border:0;color:var(--mute);font:600 0.8125rem var(--sans);padding:9px 0 10px;min-height:3.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}
.tabs button svg{width:1.5rem;height:1.5rem}
.tabs button.on{color:var(--brand)}
.ico{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:none}

/* type */
h1{font-size:1.625rem;font-weight:900;letter-spacing:-.025em;line-height:1.1;margin:6px 0 12px}
h2{font-size:1.125rem;font-weight:800;letter-spacing:-.01em;margin:18px 0 8px}
h3{font-size:1rem;font-weight:700;margin:12px 0 6px}
.eyebrow{font:700 0.7812rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.mute{color:var(--mute)}.small{font-size:0.9375rem}

/* surfaces */
.card{background:linear-gradient(180deg,var(--card-hi),var(--card));border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.hero{background:radial-gradient(120% 140% at 100% 0,var(--brand2),transparent 55%),linear-gradient(180deg,var(--card-hi),var(--card));border-color:var(--line)}
.hero .mute{color:var(--mute)}

/* forms */
label{display:block;font-size:1rem;font-weight:600;margin:12px 0 5px;color:var(--ink)}
input,select,textarea{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:1rem;background:var(--bg2);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
input[type=date],input[type=time]{appearance:none;-webkit-appearance:none;min-height:46px;text-align:left}
input::-webkit-date-and-time-value{text-align:left}
textarea{min-height:80px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row>*{flex:1}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.grid2>*{min-width:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:13px 18px;
  font:800 1rem var(--sans);letter-spacing:-.005em;cursor:pointer;background:var(--brand);color:var(--brand-ink);text-decoration:none;transition:transform .08s}
.btn:active{transform:scale(.98)}
.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.bad{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.btn.block{width:100%}.btn.small{padding:7px 11px;font-size:1rem;border-radius:11px}
.btn[disabled]{opacity:.55;cursor:wait}
.check{display:flex;gap:10px;align-items:center;font-weight:500;margin:8px 0}.check input{width:22px;height:22px;flex:none;accent-color:var(--brand)}
.pill{display:inline-block;font:700 0.75rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--brand2);color:var(--brand);white-space:nowrap}
.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.bad{background:var(--bad-bg);color:var(--bad)}.pill.ok{background:var(--ok-bg);color:var(--ok)}

/* lists */
.dl{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.dl:last-child{border-bottom:0}.dl .when{text-align:right;white-space:nowrap}.dl .when b{display:block;font:800 1.25rem var(--mono)}
.task{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}.task input[type=checkbox]{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--brand)}
.task.done .t{text-decoration:line-through;color:var(--mute)}.task .t{font-weight:600}
.task select{width:auto;padding:4px 6px;font-size:1rem;margin-top:4px}
.month{font:700 0.7812rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin:18px 0 4px}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.chips.wrap{flex-wrap:wrap;overflow:visible}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:7px 13px;font:600 0.9375rem var(--sans);white-space:nowrap;cursor:pointer}
.chip.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.items{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.it{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.it img,.it .noimg{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:var(--bg2)}
.it .meta{flex:1;min-width:0}.it .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.slots.one{grid-template-columns:1fr}
.slot{position:relative;border:2px dashed var(--line);border-radius:14px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;font-size:0.9375rem;color:var(--mute);overflow:hidden;cursor:pointer;background:var(--card)}
.slots.one .slot{aspect-ratio:4/3}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.slot input{position:absolute;inset:0;opacity:0;cursor:pointer}
.slot b{font-size:1.625rem}
.photos{display:flex;gap:6px;overflow-x:auto}.photos figure{margin:0;flex:none;text-align:center;font-size:0.7812rem;color:var(--mute)}
.photos img{width:96px;height:96px;object-fit:cover;border-radius:12px;display:block}
.ai{background:var(--brand2);border-radius:12px;padding:9px 11px;font-size:0.9375rem;margin:8px 0}
.empty{text-align:center;padding:30px 10px;color:var(--mute)}

/* sheets, toast */
dialog{border:0;border-radius:22px 22px 0 0;padding:0;width:100%;max-width:760px;max-height:92vh;max-height:92dvh;margin:auto auto 0;background:var(--bg);color:var(--ink);border-top:1px solid var(--line)}
html:has(dialog[open]){overflow:hidden}
dialog{overscroll-behavior:contain}
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}#sheetBody{padding:18px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.sheethead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.x{background:none;border:0;font-size:1.625rem;color:var(--mute);cursor:pointer}
#toast{position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:12px;
  font-weight:600;font-size:0.9375rem;opacity:0;transition:.2s;pointer-events:none;z-index:30;max-width:90%;box-shadow:var(--shadow)}
#toast.show{opacity:1}
.pack li{margin:8px 0}.verify{font-size:0.7812rem;font-weight:700;color:var(--warn)}

/* camera (always dark) */
dialog.cam{margin:0;max-width:none;width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;background:#000;color:#fff;padding:0;border:0;
  display:none;flex-direction:column;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
dialog.cam[open]{display:flex}
.camtop{display:flex;gap:8px;align-items:center}.camtop select{flex:1;background:#1c1c1c;color:#fff;border-color:#333}
.camhv{display:flex;gap:6px;align-items:center;margin:0;font-size:0.9375rem;white-space:nowrap;color:#fff}.camhv input{width:20px;height:20px}
.cam .x{color:#fff}
.camview{position:relative;flex:1;min-height:0;border-radius:16px;overflow:hidden;background:#111}
.camview video{width:100%;height:100%;object-fit:cover}.camview.flash::after{content:"";position:absolute;inset:0;background:#fff;opacity:.7}
.camstep{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.6);padding:6px 10px;border-radius:10px;font-weight:700}
.camcode{position:absolute;right:10px;top:10px;background:rgba(5,150,105,.9);padding:4px 8px;border-radius:8px;font:600 0.875rem var(--mono)}
.camcode:empty,.camstep:empty{display:none}
.camguide{position:absolute;left:20%;right:20%;top:30%;bottom:30%;border:3px dashed rgba(255,255,255,.8);border-radius:12px;pointer-events:none;transition:border-color .15s}
.camguide.wait{border-color:#ffb547}.camguide.good{border:3px solid #34D399;box-shadow:0 0 0 9999px rgba(0,0,0,.25)}
.camauto{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;border:1px solid #555;border-radius:99px;padding:6px 12px;font-size:0.875rem}
.camauto[aria-pressed="true"]{border-color:#34D399}
.camdbg{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.7);color:#0f0;font:11px monospace;padding:3px 6px;border-radius:6px}.camdbg:empty{display:none}
.camtip{margin:0;font-size:0.9375rem;color:#ccc;text-align:center;min-height:2.6em}
.camthumbs{display:flex;gap:6px;justify-content:center;min-height:48px}.camthumbs img{width:48px;height:48px;object-fit:cover;border-radius:8px}
.cambar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.cambar #c_undo{justify-self:start}.cambar #c_torch{justify-self:end}
.cam .btn.sec{color:#fff;border-color:#444}
.shutter{width:76px;height:76px;border-radius:50%;border:5px solid #fff;background:#e9e9e9;cursor:pointer;box-shadow:0 0 0 3px #000 inset}
.shutter:active{transform:scale(.94)}
.camstatus{text-align:center;font-size:0.875rem;color:#bbb}
.camnote{margin:4px 0 0;font-size:0.9375rem;color:#ffd58a;text-align:center}
.ai.retake{background:var(--warn-bg);color:var(--warn)}
.obchip{background:var(--warn);color:#1a1200;font:700 0.7812rem var(--mono);padding:3px 8px;border-radius:99px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bar{height:6px;background:var(--bg2);border-radius:99px;overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:var(--brand);border-radius:99px}
.bad-t{color:var(--bad)}

/* delivery day */
.line{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:8px}
.line.received{border-color:var(--ok)}.line.missing,.line.damaged{border-color:var(--bad);background:var(--bad-bg)}
.ln-main{flex:1;min-width:0}.ln-btns{display:flex;gap:4px;flex:none}
.lb{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:11px;padding:10px 9px;font:inherit;font-size:0.875rem;font-weight:700;cursor:pointer;min-width:44px}
.lb.on.ok{background:var(--ok);color:var(--brand-ink);border-color:var(--ok)}.lb.on.bad{background:var(--bad);color:#fff;border-color:var(--bad)}
.formtext{white-space:pre-wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;font-size:1rem}
@media (max-width:420px){.ln-btns .lb{padding:10px 6px;font-size:0.8125rem}}
@media (min-width:700px){.items{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* easy mode: next-step list, glowing hints, help button */
.step{display:flex;gap:10px;align-items:flex-start;padding:8px 0}.step .tick{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:0.875rem;color:var(--brand-ink)}
.step.done .tick{background:var(--ok);border-color:var(--ok)}.step.done b{color:var(--mute);font-weight:600}
.helpbtn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--bar-ink);font:700 0.9375rem var(--mono);cursor:pointer}
.glow{animation:glow 1.6s ease-in-out infinite;position:relative;z-index:2}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px var(--glow),0 0 18px 6px var(--glow)}}
#coach{position:fixed;left:12px;right:12px;bottom:calc(5.5rem + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;z-index:20;background:var(--ink);color:var(--bg);
 border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:0.9375rem;box-shadow:var(--shadow)}
#coach span{flex:1}#coach .btn{flex:none}
@media (prefers-reduced-motion:reduce){.glow{animation:none;box-shadow:0 0 0 4px var(--glow)}}
.nudge{border-color:var(--brand);background:var(--brand2)}
dialog.viewer{margin:0;max-width:none;width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;padding:0;background:var(--bg);display:none;flex-direction:column;border:0}
dialog.viewer[open]{display:flex}
.vbar{display:flex;gap:8px;align-items:center;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));background:var(--bar);color:var(--bar-ink);border-bottom:1px solid var(--line)}
.vbar b{flex:1;font-size:1rem}
#vFrame{flex:1;width:100%;border:0;background:#fff}
.trust{display:inline-flex;gap:6px;align-items:center;font-size:0.8125rem;color:var(--ok);background:var(--ok-bg);border-radius:99px;padding:4px 11px;margin:4px 0 8px}
.cam-trust{background:transparent;color:#9fd8b6;justify-content:center;display:flex}

/* owner card */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:8px 0}
.stats div{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:9px;font-size:0.8125rem;color:var(--mute)}
.stats b{display:block;font:800 1.25rem var(--mono);color:var(--ink)}
.tablewrap{overflow-x:auto;margin:8px 0}.tablewrap table{border-collapse:collapse;width:100%}
.tablewrap th,.tablewrap td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.tablewrap td.num{text-align:right}

/* ---------- TODAY (home) ---------- */
.count{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.ring{width:5.75rem;height:5.75rem;position:relative;flex:none}
.ring svg{width:5.75rem;height:5.75rem;transform:rotate(-90deg)}
.ring .track{stroke:var(--bg2)}.ring .fill{stroke:var(--brand);filter:drop-shadow(0 0 6px var(--glow));transition:stroke-dashoffset .8s ease}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 1.875rem var(--mono);margin-top:-8px}
.ring span{position:absolute;left:0;right:0;bottom:18px;text-align:center;font:700 0.6875rem var(--mono);letter-spacing:.14em;color:var(--mute)}
.count h3{margin:0 0 4px;font-size:1.0625rem}.count p{margin:0;font-size:0.875rem;color:var(--mute)}
.mission{position:relative;overflow:hidden;border-radius:22px;padding:18px;margin-bottom:12px;background:var(--brand);color:var(--brand-ink)}
.mission::after{content:"";position:absolute;right:-34px;top:-34px;width:130px;height:130px;border-radius:50%;border:18px solid rgba(255,255,255,.12);pointer-events:none;z-index:0}
.mission>*{position:relative;z-index:1}
.mission .eyebrow{color:inherit;opacity:.75}
.mission h2{margin:6px 0 4px;font-size:1.375rem;font-weight:900;letter-spacing:-.02em;color:inherit}
.mission p{margin:0 0 14px;font-size:0.9375rem;font-weight:500}
.mission .mrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mission .go{display:inline-flex;gap:8px;align-items:center;border:0;background:var(--brand-ink);color:var(--brand);border-radius:13px;padding:11px 16px;font:800 0.9375rem var(--sans);cursor:pointer}
html[data-theme="light"] .mission .go{background:#fff;color:#065F46}
.mission .streak{font:800 0.8125rem var(--mono)}
.mission.urgent{background:var(--warn);color:#1a1200}.mission.urgent .go{background:#1a1200;color:var(--warn)}
.mission.done{background:linear-gradient(180deg,var(--card-hi),var(--card));color:var(--ink);border:1px solid var(--brand)}
.mission.done .go{background:var(--brand);color:var(--brand-ink)}.mission.done::after{border-color:var(--brand2)}
.tstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.tstats>div{background:linear-gradient(180deg,var(--card-hi),var(--card));border:1px solid var(--line);border-radius:16px;padding:12px}
.tstats b{display:block;font:800 1.3125rem var(--mono);letter-spacing:-.02em;white-space:nowrap}
.tstats span{font-size:0.7812rem;color:var(--mute);font-weight:600}
.upcoming .dl{padding:11px 0;align-items:center}
.upcoming .dl em{font:700 0.8125rem var(--mono);font-style:normal;color:var(--warn)}
.remindcta{display:flex;gap:12px;align-items:center}
.remindcta p{margin:0;flex:1;font-size:0.9375rem}
.remindcta .ico{width:22px;height:22px;color:var(--brand)}
/* the retro countdown (Mammoth theme only) */
.cdown{margin:6px 0 16px}
.cd-row{display:flex;gap:14px;align-items:center;margin-top:8px}
.cd-row .big{font:700 5.25rem/0.82 Pixelify,monospace;color:#FFEC27;text-shadow:4px 4px 0 #7E2553;letter-spacing:-.02em}
.cd-l{font:700 0.8125rem Silkscreen,monospace;text-transform:uppercase;color:var(--mute);line-height:1.5}
.cd-l em{display:block;font:700 1rem Silkscreen,monospace;font-style:normal;color:var(--ink);margin:2px 0}
.xp{display:flex;gap:8px;align-items:center;margin-top:14px;font:700 0.75rem Silkscreen,monospace;color:var(--mute)}
.xp .cells{flex:1;display:grid;grid-template-columns:repeat(20,1fr);gap:3px;padding:2px;border:3px solid #000;background:#0F1733}
.xp .cells i{height:10px;background:#1D2B53}.xp .cells i.on{background:#00E436}.xp .cells i.hot{background:#FFA300}

/* tap targets (Oct 7, Pixel 7 Pro test): everything you tap is at least 44px tall, main buttons 48px (Android: 48dp) */
.btn{min-height:3rem;padding:.75em 1.1em}.btn.small{min-height:2.75rem;padding:.5em .95em}
.top select{min-height:2.75rem}.helpbtn{width:2.75rem;height:2.75rem}
.chip{min-height:2.75rem;padding:.5em 1em}.mission .go{min-height:2.75rem;padding:.6em 1.1em}
.x{min-width:2.75rem;min-height:2.75rem}.lb{min-height:2.75rem}
.check{min-height:2.75rem}.task{min-height:2.75rem}
.vbar .btn.small{min-height:2.5rem}
/* small phones: keep room for the move picker (with big text the FK mark stands in for the name) */
@media (max-width:380px){.brand span{display:none}.top select{min-width:28%}
  html[data-text="large"] .brand b,html[data-text="xl"] .brand b{display:none}}
.camauto{min-height:2.5rem}
/* =====================================================================================================
   MAMMOTH: the optional retro theme. Everything below only applies with html[data-theme="mammoth"].
   ===================================================================================================== */
html[data-theme="mammoth"]{
  --bg:#1D2B53;--bg2:#0F1733;--card:#0F1733;--card-hi:#0F1733;--ink:#FFF1E8;--mute:#A9B1D3;--line:#000;
  --brand:#FFA300;--brand-ink:#1D2B53;--brand2:rgba(255,163,0,.16);--glow:rgba(255,236,39,.5);
  --warn:#FFEC27;--warn-bg:rgba(255,236,39,.14);--bad:#FF004D;--bad-bg:rgba(255,0,77,.16);--ok:#00E436;--ok-bg:rgba(0,228,54,.14);
  --bar:#0F1733;--bar-ink:#FFF1E8;--shadow:6px 6px 0 #000;--radius:0px;
  --sans:Atkinson,system-ui,sans-serif;--mono:Pixelify,monospace;--px:Silkscreen,monospace;color-scheme:dark}
html[data-theme="mammoth"] body{font-size:1.0625rem;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:100% 4px}
html[data-theme="mammoth"] svg.ico,html[data-theme="mammoth"] .tabs svg,html[data-theme="mammoth"] .brand svg{shape-rendering:crispEdges}
html[data-theme="mammoth"] .top{background:#0F1733;border-bottom:4px solid #000;backdrop-filter:none}
html[data-theme="mammoth"] .brand .mark{display:none}html[data-theme="mammoth"] .brand .pxmark{display:block}
html[data-theme="mammoth"] .brand b{font:700 1rem var(--px)}html[data-theme="mammoth"] .brand span{display:none}
html[data-theme="mammoth"] .top select{border:2px solid #29ADFF;color:#29ADFF;border-radius:0;font:600 1rem var(--mono);text-overflow:ellipsis}
html[data-theme="mammoth"] .helpbtn{border-radius:0;border:2px solid #29ADFF;color:#29ADFF;font:700 1.0625rem var(--mono)}
html[data-theme="mammoth"] .tabs{background:#0F1733;border-top:4px solid #000;backdrop-filter:none}
html[data-theme="mammoth"] .tabs button{font:700 0.7812rem var(--px);text-transform:uppercase;color:#8794C4;gap:5px}
html[data-theme="mammoth"] .tabs button.on{color:#FFEC27}
html[data-theme="mammoth"] h1{font:800 1.625rem/1.15 var(--sans);letter-spacing:0}
html[data-theme="mammoth"] .eyebrow,html[data-theme="mammoth"] .month{font:700 0.7812rem var(--px);letter-spacing:0;color:var(--brand)}
html[data-theme="mammoth"] .card,html[data-theme="mammoth"] .it,html[data-theme="mammoth"] .line{background:#0F1733;border:3px solid #000;border-radius:0;box-shadow:4px 4px 0 #000,inset 0 0 0 2px #2B3C70}
html[data-theme="mammoth"] input,html[data-theme="mammoth"] select,html[data-theme="mammoth"] textarea{border:3px solid #5A6FB5;border-radius:0}
/* buttons use the rounder pixel font in normal case: Silkscreen is kept for short labels (tabs, eyebrows, pills) */
html[data-theme="mammoth"] .btn{border:3px solid #000;border-radius:0;box-shadow:4px 4px 0 #000;font:700 1rem var(--mono);letter-spacing:.02em}
html[data-theme="mammoth"] .btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
html[data-theme="mammoth"] .btn.sec{background:#0F1733;color:var(--ink);border-color:#000}
html[data-theme="mammoth"] .btn.bad{background:#0F1733;color:var(--bad);border-color:#000}
html[data-theme="mammoth"] .chip,html[data-theme="mammoth"] .pill,html[data-theme="mammoth"] .lb,html[data-theme="mammoth"] .trust,
html[data-theme="mammoth"] .it img,html[data-theme="mammoth"] .it .noimg,html[data-theme="mammoth"] dialog,html[data-theme="mammoth"] #toast,
html[data-theme="mammoth"] .stats div,html[data-theme="mammoth"] .slot,html[data-theme="mammoth"] .ai{border-radius:0}
html[data-theme="mammoth"] .chip{border:3px solid #000}
html[data-theme="mammoth"] .pill{font:700 0.7812rem var(--px)}
html[data-theme="mammoth"] .it .noimg{background:repeating-linear-gradient(45deg,#1D2B53 0 6px,#16224A 6px 12px);border:3px solid #2B3C70}
html[data-theme="mammoth"] .dl .when b,html[data-theme="mammoth"] .stats b{font:700 1.375rem var(--mono);color:#29ADFF}
html[data-theme="mammoth"] .mission{border-radius:0;background:#FFA300;color:#1D2B53;border:3px solid #000;box-shadow:4px 4px 0 #000}
html[data-theme="mammoth"] .mission::after{display:none}
html[data-theme="mammoth"] .mission .eyebrow{color:#1D2B53;opacity:1}
html[data-theme="mammoth"] .mission h2{font:800 1.375rem/1.15 var(--sans)}
html[data-theme="mammoth"] .mission p{font-size:1rem;font-weight:600}
html[data-theme="mammoth"] .mission .go{background:#1D2B53;color:#FFEC27;border:3px solid #000;border-radius:0;font:700 1rem var(--mono);box-shadow:inset -3px -3px 0 #0F1733,inset 3px 3px 0 #2B3C70}
html[data-theme="mammoth"] .mission .streak{font:700 1.375rem var(--mono);color:#7E2553}
html[data-theme="mammoth"] .mission.urgent{background:#FFEC27}
html[data-theme="mammoth"] .mission.done{background:#0F1733;color:var(--ink);outline:3px dashed #FFA300;outline-offset:-6px}
html[data-theme="mammoth"] .mission.done .eyebrow{color:#FFA300}html[data-theme="mammoth"] .mission.done .streak{color:#00E436}
html[data-theme="mammoth"] .tstats>div{background:#0F1733;border:3px solid #000;border-radius:0;box-shadow:3px 3px 0 #000}
html[data-theme="mammoth"] .tstats b{font:700 1.5rem var(--mono);color:#29ADFF}
html[data-theme="mammoth"] .tstats span{font:700 0.7812rem var(--px);text-transform:uppercase;color:#C2C3C7}
html[data-theme="mammoth"] .upcoming .dl{border-bottom:2px dotted #2B3C70}
html[data-theme="mammoth"] .upcoming .dl em{font:700 1.125rem var(--mono);color:#29ADFF}
html[data-theme="mammoth"] .upcoming .dl em.near{color:#FFEC27}html[data-theme="mammoth"] .upcoming .dl em.soon{color:#FF004D}
html[data-theme="mammoth"] .step .tick{border-radius:0}