/* ─────────────────────────────────────────────────────────────────────────────
   kgs-mdt — terminal UI   (2026 refresh)

   House style, unchanged in spirit: dark, translucent, understated. Panels are
   see-through glass over a blurred world, never opaque slabs. Accent colour
   comes from the department, so LSPD and LSMS read as the same product with
   different paint.

   What changed in this pass:
     · design tokens (radii, easing, elevation) instead of scattered literals
     · backdrop blur now carries saturate() — that saturation lift is what makes
       glass read as glass instead of as flat grey
     · hairline gradient edges + layered elevation instead of one hard border
     · micro-interactions: press states, focus-visible rings, hover lift
     · motion on a single easing curve, and a prefers-reduced-motion escape
     · ambient accent wash behind the surface for depth (very low, deliberately)

   Every class name is preserved — the bundle is not touched by this file.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --accent:#4a9eff;
  --bg:rgba(12,16,24,.82);
  --panel:rgba(255,255,255,.035);
  --panel-hi:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08);
  --text:#e6ecf5;
  --dim:#8b97a8;
  --blur:18px;
  --red:#ff4d4f;
  --amber:#ffa940;
  --green:#52c41a;
  --violet:#b37feb;

  /* ── tokens ─────────────────────────────────────────────────────────────── */
  --r-xs:6px;  --r-sm:9px;  --r-md:12px;  --r-lg:16px;  --r-xl:22px;
  --hairline:rgba(255,255,255,.10);
  --hairline-hi:rgba(255,255,255,.20);
  --surface:rgba(16,21,30,.72);
  --surface-2:rgba(16,21,30,.94);
  --ease:cubic-bezier(.22,.61,.36,1);      /* standard */
  --ease-out:cubic-bezier(.16,1,.3,1);     /* entrances, springy */
  --elev-1:0 1px 2px rgba(0,0,0,.28);
  --elev-2:0 10px 30px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.04) inset;
  --elev-3:0 24px 60px rgba(0,0,0,.52), 0 1px 0 rgba(255,255,255,.05) inset;
  --dur:.16s;

  /* ── DEVICE FRAME ─────────────────────────────────────────────────────────
     The terminal is a TABLET, not the whole screen. FiveM draws a resource's
     ui_page on a transparent fullscreen overlay, so "tablet sized" means
     bounding this box inside that overlay — the world stays visible around it
     and the terminal reads as a device in the player's hands.

     ONE source of truth for the geometry: the boot screen and the desktop both
     read --tab-*, so they cannot flash two different sizes during handover, and
     every size preset below only has to change these few values.

     Sized in LAYOUT px on purpose — deliberately NOT transform:scale(). Every
     pointer calculation in this app works in layout px (window drags compare
     clientX against offsetLeft; the map's cursor-anchored zoom subtracts the
     stage's bounding rect). A scale transform would silently put those in
     different units and break dragging and zoom-anchoring together.

     The player chooses from these in MDT -> Settings -> Terminal size, which
     sets body[data-size]. Every preset listed in SIZES (app-v9.js) MUST have a
     rule here; the contract check fails if one is missing, so the dropdown can
     never offer a size that does nothing. */
  --tab-w:min(1216px,92vw);   /* standard: 16:10 tablet (the default) */
  --tab-h:min(760px,84vh);
  --tab-r:var(--r-lg);
  --tab-shadow:0 26px 70px rgba(0,0,0,.55),
               0 0 0 1px rgba(255,255,255,.03),
               0 1px 0 rgba(255,255,255,.06) inset;
}

/* ── terminal size presets (mirror of SIZES in app-v9.js) ─────────────────── */
body[data-size="compact"]{
  --tab-w:min(1024px,90vw); --tab-h:min(640px,82vh);
}
body[data-size="standard"]{
  --tab-w:min(1216px,92vw); --tab-h:min(760px,84vh);
}
body[data-size="large"]{
  --tab-w:min(1440px,94vw); --tab-h:min(900px,88vh);
}
body[data-size="full"]{
  /* the old wall-to-wall behaviour, for anyone who prefers it. No bezel, no
     rounded corners, no bloom — at full screen all three read as a bug. */
  --tab-w:100vw; --tab-h:100vh; --tab-r:0; --tab-shadow:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font:13.5px/1.5 "Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  color:var(--text);
  background:transparent;
  user-select:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}
/* Ambient depth. Two very low-opacity washes: an accent bloom top-left and a
   vignette. Anything stronger stops being understated and starts being a
   gradient wallpaper. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1100px 620px at 12% -10%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 62%),
    radial-gradient(900px 700px at 108% 112%, rgba(120,90,220,.05), transparent 60%),
    radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.34) 100%);
}
.hidden{display:none !important}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}

/* Focus rings are keyboard-only, so they never clutter the mouse experience. */
:focus{outline:none}
:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 72%,transparent);
  outline-offset:2px;border-radius:var(--r-xs);
}
::selection{background:color-mix(in srgb,var(--accent) 34%,transparent);color:#fff}

/* Thin scrollbars that only assert themselves on hover. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.07);border-radius:10px;
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}

/* ── boot ─────────────────────────────────────────────────────────────────── */
.boot{
  /* same box as .desktop: booting looks like the tablet powering on, and the
     handover to the desktop cannot jump. Still hidden by default — the page is
     live during the loading screen and must not paint over it. */
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--tab-w);height:var(--tab-h);
  display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 44%, rgba(9,13,20,.88), rgba(4,6,10,.96));
  backdrop-filter:blur(8px) saturate(120%);
  border:1px solid var(--border);border-radius:var(--tab-r);overflow:hidden;
  box-shadow:var(--tab-shadow);
  z-index:200;animation:fade .22s var(--ease-out);
}
.boot.out{opacity:0;pointer-events:none;transition:opacity .26s var(--ease)}
.boot-inner{text-align:center;position:relative}
.boot-crest{
  font:700 46px/1 "Inter",sans-serif;letter-spacing:.14em;color:var(--accent);
  margin-bottom:16px;
  text-shadow:0 0 34px color-mix(in srgb,var(--accent) 45%,transparent);
}
.boot-title{font-size:16px;letter-spacing:.30em;text-transform:uppercase;color:var(--text);opacity:.96}
.boot-sub{font-size:11px;letter-spacing:.16em;color:var(--dim);margin-top:7px;text-transform:uppercase}
.boot-bar{
  width:236px;height:2px;background:rgba(255,255,255,.07);
  margin:22px auto 12px;border-radius:2px;overflow:hidden;
}
.boot-bar i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 45%,transparent), var(--accent));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);
  animation:load 1.05s var(--ease) forwards;
}
.boot-status{font-size:10px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
/* Which bundle is actually running. Exists purely so a stale CEF cache is
   obvious at a glance instead of being misdiagnosed as a code bug. */
.boot-build{
  margin-top:16px;font-size:9px;letter-spacing:.22em;color:var(--dim);opacity:.4;
  font-variant-numeric:tabular-nums;
}
/* Denied-access state: shown when the server refuses the session. */
.boot.denied .boot-crest{color:var(--red);text-shadow:0 0 34px color-mix(in srgb,var(--red) 40%,transparent)}
.boot.denied .boot-bar i{background:var(--red);animation:none;width:100%;opacity:.5}
@keyframes load{to{width:100%}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ── desktop ──────────────────────────────────────────────────────────────── */
.desktop{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--tab-w);height:var(--tab-h);
  display:grid;z-index:1;
  grid-template-columns:66px 1fr;
  grid-template-rows:1fr 42px;
  grid-template-areas:"dock surface" "task task";
  background:var(--bg);
  backdrop-filter:blur(var(--blur)) saturate(130%);
  /* device bezel: hairline edge, inner glass highlight, outer bloom */
  border:1px solid var(--border);border-radius:var(--tab-r);overflow:hidden;
  box-shadow:var(--tab-shadow);
  animation:fade .22s var(--ease-out);
}

/* dock */
.dock{
  grid-area:dock;display:flex;flex-direction:column;align-items:center;
  padding:15px 0;gap:6px;
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.14));
}
.dock-brand{margin-bottom:15px}
.dock-crest{
  display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  color:var(--accent);font-weight:700;font-size:11px;letter-spacing:.06em;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 16%,transparent),
             0 1px 0 rgba(255,255,255,.06) inset;
}
.dock-apps{display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto;width:100%;align-items:center}
.dock-app{
  width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--dim);transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
  position:relative;
}
.dock-app:hover{background:var(--panel-hi);color:var(--text);transform:translateY(-1px)}
.dock-app:active{transform:scale(.96)}
.dock-app.on{background:var(--panel-hi);color:var(--accent)}
.dock-app.on::before{
  content:"";position:absolute;left:-15px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent);
}
.dock-app svg{width:20px;height:20px;stroke-width:1.6}
.dock-app .badge{
  position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--red);color:#fff;font-size:9px;font-weight:700;
  display:grid;place-items:center;line-height:1;
  box-shadow:0 0 0 2px rgba(10,14,20,.75), 0 0 12px color-mix(in srgb,var(--red) 50%,transparent);
  font-variant-numeric:tabular-nums;
}
.dock-foot{width:100%;display:grid;place-items:center}
.dock-status{
  display:grid;place-items:center;gap:3px;width:46px;padding:8px 0;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--border);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dock-status:hover{background:var(--panel-hi)}
.dock-status .dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px currentColor;animation:breathe 3.4s var(--ease) infinite;
}
.dock-status span:last-child{font-size:8.5px;letter-spacing:.06em;color:var(--dim)}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}

/* surface */
.surface{grid-area:surface;position:relative;overflow:hidden}
.hint{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:6px;color:var(--dim)}
.hint-title{font-size:14.5px;color:var(--text);opacity:.5;letter-spacing:.04em;font-weight:500}
.hint-body{font-size:11.5px}

/* taskbar */
.taskbar{
  grid-area:task;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 15px;border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.28));
  backdrop-filter:blur(12px) saturate(120%);
}
.task-left{display:flex;align-items:baseline;gap:7px;min-width:0}
.who{font-size:11.5px;letter-spacing:.03em}
.who-sub{font-size:10px;color:var(--dim);letter-spacing:.08em}
.task-mid{display:flex;gap:5px;justify-content:center;overflow:hidden;max-width:46vw}
.task-win{
  padding:5px 12px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--border);
  font-size:10.5px;letter-spacing:.05em;color:var(--dim);white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.task-win:hover{background:var(--panel-hi);color:var(--text)}
.task-win.focus{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent);
  background:color-mix(in srgb,var(--accent) 11%,transparent);
}
.task-right{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.clock{font-size:12px;letter-spacing:.09em;font-variant-numeric:tabular-nums;color:var(--dim)}
.btn-quiet{
  padding:5px 13px;border-radius:var(--r-sm);border:1px solid var(--border);
  font-size:10.5px;letter-spacing:.06em;color:var(--dim);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.btn-quiet:hover{color:var(--red);border-color:color-mix(in srgb,var(--red) 34%,transparent);background:color-mix(in srgb,var(--red) 8%,transparent)}

/* ── windows ──────────────────────────────────────────────────────────────── */
.win{
  position:absolute;min-width:340px;min-height:200px;
  display:flex;flex-direction:column;
  background:var(--surface);
  backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--elev-3);
  overflow:hidden;animation:pop .18s var(--ease-out);
}
@keyframes pop{from{opacity:0;transform:scale(.982) translateY(4px)}to{opacity:1;transform:none}}
/* Hairline highlight along the top edge — the cheap trick that makes a flat
   panel look like it has thickness. */
.win::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.055), transparent 22%);
}
.win.focus{
  border-color:color-mix(in srgb,var(--accent) 24%,transparent);
  box-shadow:var(--elev-3), 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent);
}
.win-head{
  display:flex;align-items:center;gap:9px;padding:10px 13px;
  border-bottom:1px solid var(--border);cursor:grab;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
}
.win-head:active{cursor:grabbing}
.win-title{font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--text);opacity:.9;font-weight:500}
.win-tag{
  font-size:9.5px;letter-spacing:.08em;color:var(--dim);
  padding:2px 8px;border-radius:var(--r-xs);background:var(--panel);border:1px solid var(--border);
}
.win-btns{margin-left:auto;display:flex;gap:2px}
.win-btn{width:23px;height:23px;border-radius:var(--r-xs);color:var(--dim);font-size:13px;line-height:1;transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.win-btn:hover{background:var(--panel-hi);color:var(--text)}
.win-btn[data-act="close"]:hover{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.win-body{flex:1;overflow:auto;padding:13px}

/* ── generic bits ─────────────────────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:8px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:8px}
.muted{color:var(--dim)}
.tiny{font-size:10.5px}
.mono{font-variant-numeric:tabular-nums}
.sep{height:1px;background:var(--border);margin:12px 0}

.inp{
  width:100%;padding:8px 11px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.045);border:1px solid var(--border);
  font-size:12px;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.inp:focus{
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
.inp::placeholder{color:var(--dim)}
textarea.inp{resize:vertical;min-height:78px;line-height:1.55}

.btn{
  padding:7px 14px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--panel);font-size:11.5px;letter-spacing:.04em;white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease-out);
}
.btn:hover{background:var(--panel-hi)}
.btn:active{transform:scale(.975)}
.btn.primary{
  background:color-mix(in srgb,var(--accent) 17%,transparent);
  border-color:color-mix(in srgb,var(--accent) 36%,transparent);color:var(--accent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 12%,transparent);
}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 25%,transparent)}
.btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.btn.danger:hover{background:color-mix(in srgb,var(--red) 14%,transparent)}
.btn:disabled{opacity:.35;cursor:not-allowed}

.pill{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;
  font-size:10px;letter-spacing:.05em;border:1px solid var(--border);background:var(--panel);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}

table{width:100%;border-collapse:collapse}
th{
  position:sticky;top:0;z-index:1;
  text-align:left;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);font-weight:500;padding:0 9px 8px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(16,21,30,.86), rgba(16,21,30,.62));
  backdrop-filter:blur(6px);
}
td{padding:9px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.045)}
tr.clickable{cursor:pointer;transition:background var(--dur) var(--ease)}
tr.clickable:hover td{background:rgba(255,255,255,.04)}
tr.clickable:active td{background:rgba(255,255,255,.055)}

.empty{padding:28px 12px;text-align:center;color:var(--dim);font-size:11.5px}

/* call list */
.calls{display:flex;flex-direction:column;gap:7px}
.call{
  display:grid;grid-template-columns:4px 1fr auto;gap:11px;align-items:center;
  padding:10px 12px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--border);cursor:pointer;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease);
}
.call:hover{
  background:var(--panel-hi);transform:translateX(2px);
  border-color:var(--hairline-hi);
}
.call:active{transform:translateX(2px) scale(.995)}
.call .bar{width:4px;height:30px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 40%,transparent)}
.call .t{font-size:12.5px}
.call .s{font-size:10.5px;color:var(--dim);margin-top:2px}
.call .meta{text-align:right;font-size:10px;color:var(--dim);letter-spacing:.05em}
.call.p1 .bar{background:var(--red);box-shadow:0 0 10px color-mix(in srgb,var(--red) 45%,transparent)}
.call.p2 .bar{background:var(--amber);box-shadow:0 0 10px color-mix(in srgb,var(--amber) 40%,transparent)}
.call.p4 .bar{background:var(--dim);box-shadow:none}

/* map */
.mapwrap{display:grid;grid-template-columns:1fr 236px;gap:12px;height:100%}
.mapstage{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:rgba(0,0,0,.30);border:1px solid var(--border);min-height:340px;
}
/* JS positions this from the projection (map zoom/pan); this rule is only the
   pre-first-paint fallback size. */
.mapimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Detail sheets (level of detail). At/above LOD_ZOOM the map swaps the single
   base image for an 8x8 grid of z7 sheets — 3x the linear detail, so individual
   roads and blocks are legible. Only on-stage sheets are shown, so the decoded
   cost tracks the panel rather than the world. */
.mapsheets{position:absolute;inset:0;pointer-events:none}
.mapsheet{position:absolute;display:block}
.mapstage{cursor:grab}
.mapstage.grabbing{cursor:grabbing}
.mapgrid{
  display:none;            /* was a placeholder grid for the blank stage; real map art now */
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px;
}
.postlayer{position:absolute;inset:0;pointer-events:none}
/* Postal codes printed on the map. Sized to be READ, not just hinted at: a code
   you cannot read is worse than no overlay, because it costs a screen refresh to
   find out. 11px semibold on a translucent chip reads over both the pale desert
   and the dark forest in the satellite art — a bare text-shadow did not.
   The cull cell in MapApp.drawPostals floors at exactly this footprint (34x15),
   so zoomed in every code in view is drawn and none of them overlap.
   No backdrop-filter here on purpose: at low zoom up to ~85 of these are live at
   once and per-element blur is the one effect that turns a pan into a slideshow. */
.plabel{
  position:absolute;transform:translate(-50%,-50%);
  font-size:11px;font-weight:600;letter-spacing:.05em;line-height:1;
  color:rgba(238,244,252,.94);font-variant-numeric:tabular-nums;
  padding:2px 5px;border-radius:4px;
  background:rgba(8,12,18,.46);
  border:1px solid rgba(255,255,255,.08);
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  white-space:nowrap;
}
.maplayer{position:absolute;inset:0}
.blip{
  position:absolute;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;
  border:2px solid rgba(0,0,0,.55);
  box-shadow:0 0 10px color-mix(in srgb,currentColor 45%,transparent);
}
.blip.me{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 34%,transparent), 0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}
.blip-label{
  position:absolute;transform:translate(-50%,-190%);
  font-size:9.5px;letter-spacing:.06em;padding:2px 6px;border-radius:var(--r-xs);
  background:rgba(0,0,0,.62);backdrop-filter:blur(4px);white-space:nowrap;color:var(--text);
  border:1px solid rgba(255,255,255,.07);
}
.callblip{
  position:absolute;transform:translate(-50%,-50%);
  width:15px;height:15px;border-radius:3px;
  border:2px solid rgba(0,0,0,.5);
  box-shadow:0 0 10px color-mix(in srgb,currentColor 45%,transparent);
}
/* Layer toggles (map postals etc). Understated: a dim chip, accent only when on. */
.chip{
  display:block;width:100%;margin-bottom:8px;padding:5px 8px;
  font:inherit;font-size:9.5px;letter-spacing:.14em;
  color:var(--dim);background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.chip:hover{background:var(--panel-hi)}
.chip.on{
  color:var(--text);
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 10%,transparent);
}
.unitpanel{display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.unitrow{
  padding:8px 10px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--border);cursor:pointer;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease);
}
.unitrow:hover{background:var(--panel-hi);transform:translateX(2px);border-color:var(--hairline-hi)}
.unitrow.stale{opacity:.45}
.unitrow .n{display:flex;align-items:center;gap:6px;font-size:11.5px}
.unitrow .d{font-size:10px;color:var(--dim);margin-top:2px;display:flex;gap:8px}

/* Postal chip — the 4-digit code units and dispatch read to each other over the
   radio, so it should be findable at a glance without shouting. Accent-tinted
   and low-contrast, consistent with the glass-panel house style. */
.postal{
  color:var(--accent);font-weight:600;letter-spacing:.04em;
  padding:0 5px;border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
}

/* toast */
.toast{
  /* anchored to the tablet's bottom edge, not the screen's — otherwise a toast
     floats in the world underneath the device */
  position:fixed;bottom:calc(50% - var(--tab-h)/2 + 54px);left:50%;
  transform:translate(-50%,16px);
  padding:10px 18px;border-radius:var(--r-md);font-size:12px;
  background:var(--surface-2);border:1px solid var(--border);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--elev-3);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease-out);
  z-index:300;max-width:60vw;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:color-mix(in srgb,var(--red) 40%,transparent);color:var(--red)}
.toast.ok{border-color:color-mix(in srgb,var(--green) 40%,transparent);color:var(--green)}

/* person profile */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.field{display:flex;flex-direction:column;gap:2px}
.field label{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.field .v{font-size:12.5px}
.flags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}

/* ── settings ───────────────────────────────────────────────────────────────── */
.lab{font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--dim);font-weight:500}

select.inp{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px;
  /* chevron drawn from gradients: no image asset, so nothing to 404 in CEF */
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select.inp option{background:#0e131b;color:var(--text)}

/* screen-versus-terminal, drawn to scale. Subtle on purpose — it should read as
   a translucent overlay, not a chart. */
.sizepreview{
  position:relative;height:94px;margin-top:14px;border-radius:var(--r-sm);
  border:1px solid var(--border);overflow:hidden;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 6px, transparent 6px 12px);
}
.sizepreview b{
  position:absolute;border-radius:4px;
  background:color-mix(in srgb,var(--accent) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 18%,transparent);
  transition:all .18s var(--ease-out);
}

/* ── accessibility ────────────────────────────────────────────────────────────
   Everything above is decoration. Nobody should be made ill by a CAD terminal. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}