/* CrimeMaps mobile SPA — shell + tokens (copper-on-ink HUD).
   Extracted/synthesized from the mobile city.html token superset so all
   three views (Home/Stats/AI) share one design language + theme flip. */

:root{
  --bg:#0A0806;--bg2:#141009;--bg3:#1F1915;--line:#33291E;--line2:#2C241D;
  --txt:#F0E7DA;--muted:#A0937F;--faint:#6B5F50;
  --copper:#E08A4E;--copperhi:#F4A465;--ember:#CC5B2C;
  --maple:#C0474F;--aurora:#45A793;--signal:#DE4638;
  --glass:rgba(16,12,8,.80);--overlay-bg:rgba(0,0,0,.5);
  --btn-text:#0A0806;
}
body[data-theme="light"]{
  --bg:#FAF6F0;--bg2:#FFFFFF;--bg3:#F0EAE0;--line:#D9D0C2;--line2:#CFC5B5;
  --txt:#1a1714;--muted:#6f6a5e;--faint:#a29b8c;
  --copper:#C9743F;--copperhi:#B05F2E;--ember:#CC5B2C;
  --maple:#A9444B;--aurora:#2F8478;--signal:#C23B32;
  --glass:rgba(255,255,255,.88);--overlay-bg:rgba(0,0,0,.4);
  --btn-text:#FFFFFF;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);-webkit-font-smoothing:antialiased;transition:background .2s}
body[data-theme="light"]{background:var(--bg)}

/* full-screen device shell */
.device{width:100%;height:100dvh;position:relative;background:var(--bg);overflow:hidden}

/* view switching — only one view visible at a time, no reloads */
.view{position:absolute;inset:0;display:none;overflow:hidden}
.view.active{display:block}
.view.active.is-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(20px + env(safe-area-inset-top)) 16px calc(80px + env(safe-area-inset-bottom));scrollbar-width:none}
.view.active.is-scroll::-webkit-scrollbar{display:none}

/* theme toggle — top right (persistent across views) */
.theme-btn{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:60;width:36px;height:36px;border-radius:10px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--txt);transition:all .14s}
.theme-btn:hover{border-color:var(--copper);color:var(--copper)}

/* 3-tab bottom bar (persistent) */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:60;height:calc(64px + env(safe-area-inset-bottom));background:var(--glass);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-decoration:none;transition:color .14s;cursor:pointer}
.tabbar a.on{color:var(--copper)}
.tabbar a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}

/* shared building blocks used by views */
.mono{font-family:'Space Mono',monospace}
.serif{font-family:'Newsreader',Georgia,serif}
.kicker{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
h1.view-h{font-family:'Newsreader',serif;font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--txt);margin-bottom:6px}
.deck{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:20px}

/* generic HUD glass panel + chips (reused by Stats/AI) */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px}
.glass{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:12px}
.seg{display:flex;overflow:hidden;border:1px solid var(--line);border-radius:10px}
.seg button{flex:1;padding:8px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:transparent;border:none;border-right:1px solid var(--line);cursor:pointer;transition:all .14s}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--copper);color:var(--btn-text);font-weight:700}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--muted);background:none;transition:all .14s}
.chip.on{border-color:var(--copper);background:rgba(224,138,78,.14);color:var(--txt)}
.chip .sw{width:8px;height:8px;border-radius:2px}

/* slim loading spinner for async view mounts */
.spin{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--copper);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}