@import url("https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600&family=Saira+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================= TOKENS */
:root {
  --k-void:#080807;--k-base:#111010;--k-panel:#191716;--k-panel-2:#201d1b;--k-panel-3:#282422;
  --k-line:#2c2927;--k-line-strong:#3d3835;--k-line-hot:#5a4a40;
  --k-fg-1:#eae5dd;--k-fg-2:#a49d94;--k-fg-3:#6c655e;--k-fg-4:#474240;
  --k-rust:#c2552c;--k-rust-hi:#e0703f;--k-rust-dim:#7c3a1e;--k-rust-wash:rgba(194,85,44,.14);
  --k-alert:#c04039;--k-caution:#c9982f;--k-secure:#5f9070;--k-cold:#5a8098;
  --k-alert-wash:rgba(192,64,57,.14);--k-caution-wash:rgba(201,152,47,.13);
  --k-secure-wash:rgba(95,144,112,.13);--k-cold-wash:rgba(90,128,152,.13);
  --k-scrim:rgba(4,4,4,.72);

  --font-core:"Saira",system-ui,sans-serif;
  --font-label:"Saira Condensed","Saira",system-ui,sans-serif;
  --font-data:"JetBrains Mono",ui-monospace,monospace;
  --fs-micro:10px;--fs-label:11px;--fs-caption:12px;--fs-body:14px;--fs-title:20px;--fs-display:30px;
  --tr-label:.16em;--tr-data:.04em;
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --dur-instant:80ms;--dur-fast:120ms;--dur-base:180ms;--dur-slow:320ms;
  --sh-overlay:0 24px 64px rgba(0,0,0,.65);
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  background:var(--k-base); color:var(--k-fg-1);
  font:400 var(--fs-body)/1.5 var(--font-core);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
::selection { background:var(--k-rust-dim); color:var(--k-fg-1); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--k-void); }
::-webkit-scrollbar-thumb { background:var(--k-line-strong); border:2px solid var(--k-void); }
::-webkit-scrollbar-thumb:hover { background:var(--k-line-hot); }

.label { font-family:var(--font-label); font-size:var(--fs-label); font-weight:600;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--k-fg-3); }
.data { font-family:var(--font-data); font-size:var(--fs-caption); letter-spacing:var(--tr-data); color:var(--k-fg-2); }
.mono { font-family:var(--font-data); letter-spacing:var(--tr-data); }
.rust { color:var(--k-rust); }

/* ============================================================= FRAME */
#frame { display:flex; flex-direction:column; height:100%; }

.classbar {
  height:20px; flex:0 0 20px; display:flex; align-items:center; justify-content:center; gap:24px;
  background:repeating-linear-gradient(-45deg,var(--k-void),var(--k-void) 8px,#0d0c0b 8px,#0d0c0b 16px);
  border-bottom:1px solid var(--k-line);
  font-family:var(--font-label); font-size:var(--fs-micro); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--k-rust);
}
.classbar .sep { color:var(--k-fg-4); }

.topbar {
  height:44px; flex:0 0 44px; display:flex; align-items:center; gap:14px;
  padding:0 16px; background:var(--k-base); border-bottom:1px solid var(--k-line);
}
.wordmark { font-family:var(--font-label); font-weight:700; font-size:16px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--k-fg-1); }
.wordmark span { color:var(--k-rust); }
.subtitle { font-family:var(--font-label); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--k-fg-3); }
.topbar .spacer { flex:1; }
.session { display:flex; align-items:center; gap:10px; }

.body { flex:1; display:flex; min-height:0; }

/* Left nav rail */
.rail { width:64px; flex:0 0 64px; background:var(--k-void); border-right:1px solid var(--k-line);
  display:flex; flex-direction:column; align-items:center; padding-top:8px; gap:2px; }
.rail button {
  width:56px; height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:transparent; border:1px solid transparent; color:var(--k-fg-3);
  font-family:var(--font-label); font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:var(--dur-fast) var(--ease-out);
}
.rail button svg { width:20px; height:20px; stroke:currentColor; }
.rail button:hover { color:var(--k-fg-1); background:var(--k-panel); }
.rail button.active { color:var(--k-rust); background:var(--k-panel-2);
  border-left:2px solid var(--k-rust); }

.workarea { flex:1; min-width:0; position:relative; overflow:hidden; }
.tabpane { position:absolute; inset:0; overflow:auto; display:none; }
.tabpane.active { display:block; }

/* Bottom status strip */
.statusstrip {
  height:24px; flex:0 0 24px; display:flex; align-items:center; gap:0;
  background:var(--k-void); border-top:1px solid var(--k-line);
  font-family:var(--font-data); font-size:var(--fs-micro); letter-spacing:.04em; color:var(--k-fg-3);
  overflow:hidden;
}
.statusstrip .cell { padding:0 12px; height:100%; display:flex; align-items:center; gap:6px;
  border-right:1px solid var(--k-line); white-space:nowrap; }
.statusstrip .cell b { color:var(--k-fg-2); font-weight:500; }
.statusstrip .spacer { flex:1; border-right:none; }

/* ============================================================= STATUS DOT */
.dot { width:6px; height:6px; flex:0 0 6px; background:var(--k-fg-3); display:inline-block; }
.dot.secure { background:var(--k-secure); }
.dot.caution { background:var(--k-caution); }
.dot.alert { background:var(--k-alert); }
.dot.cold { background:var(--k-cold); }
.dot.rust { background:var(--k-rust); }
.dot.pulse { animation:pulse 1.8s var(--ease-out) infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ============================================================= DOSSIER GRID */
.dossier { padding:16px; display:grid; gap:1px; background:var(--k-line);
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }
.dossier.single { grid-template-columns:1fr; }

.panel { background:var(--k-panel); border:1px solid var(--k-line); }
.panel > header {
  height:34px; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--k-panel-2); border-bottom:1px solid var(--k-line);
}
.panel > header .idx { font-family:var(--font-data); font-size:var(--fs-micro); color:var(--k-fg-4); }
.panel > header h2 { font-family:var(--font-label); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--k-fg-2); flex:1; }
.panel > header .tag { font-family:var(--font-label); font-size:9px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--k-fg-3); padding:2px 6px; border:1px solid var(--k-line-strong); }
.panel .body { display:block; padding:6px 0; }

/* key/value rows */
.kv { display:flex; align-items:baseline; gap:12px; padding:5px 12px; }
.kv:hover { background:var(--k-panel-2); }
.kv dt { flex:0 0 132px; font-family:var(--font-label); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--k-fg-3); }
.kv dd { flex:1; min-width:0; font-family:var(--font-data); font-size:var(--fs-caption);
  letter-spacing:.03em; color:var(--k-fg-1); word-break:break-word; }
.kv dd.muted { color:var(--k-fg-4); }
.kv dd.wash { color:var(--k-fg-2); }
.kv dd.hi { color:var(--k-rust-hi); }
.kv dd.secure { color:var(--k-secure); }
.kv dd.caution { color:var(--k-caution); }
.kv dd.alert { color:var(--k-alert); }

.raw { font-family:var(--font-data); font-size:11px; color:var(--k-fg-2); line-height:1.6;
  padding:8px 12px; white-space:pre-wrap; word-break:break-all; }
.raw .hkey { color:var(--k-cold); }

.subject-id { padding:12px; }
.subject-id .sig { font-family:var(--font-data); font-size:22px; letter-spacing:.08em; color:var(--k-rust-hi); }
.subject-id .cap { margin-top:4px; }

/* meter */
.meter { height:8px; background:var(--k-void); border:1px solid var(--k-line); position:relative; overflow:hidden; }
.meter > i { position:absolute; inset:0 auto 0 0; background:var(--k-rust); transition:width var(--dur-slow) var(--ease-out); }
.meter.secure > i { background:var(--k-secure); }
.meter.caution > i { background:var(--k-caution); }
.meter.cold > i { background:var(--k-cold); }
.meter::after { content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(0,0,0,.4) 9px,rgba(0,0,0,.4) 10px); }

/* ============================================================= BUTTONS */
.btn {
  height:34px; padding:0 14px; display:inline-flex; align-items:center; gap:8px;
  background:var(--k-panel-2); color:var(--k-fg-1); border:1px solid var(--k-line-strong);
  font-family:var(--font-label); font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:var(--dur-fast) var(--ease-out); user-select:none;
}
.btn svg { width:16px; height:16px; stroke:currentColor; }
.btn:hover { border-color:var(--k-line-hot); background:var(--k-panel-3); }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--k-rust); border-color:var(--k-rust); color:#120a06; }
.btn.primary:hover { background:var(--k-rust-hi); border-color:var(--k-rust-hi); }
.btn:disabled { opacity:.38; cursor:not-allowed; }
.btn.sm { height:26px; padding:0 10px; font-size:10px; }

/* ============================================================= PIN GATE */
#gate {
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:var(--k-scrim); backdrop-filter:blur(3px);
}
#gate.hidden { display:none; }
.gate-noise { position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg,transparent 0 47px,rgba(194,85,44,.03) 47px 48px),
                   repeating-linear-gradient(90deg,transparent 0 47px,rgba(194,85,44,.03) 47px 48px);
  pointer-events:none; }
.pindialog {
  position:relative; width:340px; background:var(--k-panel); border:1px solid var(--k-line-strong);
  box-shadow:var(--sh-overlay); animation:rise var(--dur-base) var(--ease-out); }
@keyframes rise { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.pindialog > header { height:34px; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--k-panel-2); border-bottom:1px solid var(--k-line); }
.pindialog > header h2 { font-family:var(--font-label); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--k-fg-1); }
.pindialog .inner { padding:20px 20px 16px; }
.pindialog .prompt { font-size:13px; color:var(--k-fg-2); margin-bottom:16px; }
.pincells { display:flex; gap:8px; justify-content:center; margin-bottom:6px; }
.pincell { width:38px; height:46px; border:1px solid var(--k-line-strong); background:var(--k-void);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-data); font-size:20px; color:var(--k-rust-hi); }
.pincell.filled { border-color:var(--k-rust-dim); }
.pincell.active { border-color:var(--k-rust); }
.pinerror { height:16px; text-align:center; font-family:var(--font-label); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--k-alert); margin:6px 0 12px; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.key { height:48px; background:var(--k-panel-2); border:1px solid var(--k-line-strong); color:var(--k-fg-1);
  font-family:var(--font-data); font-size:18px; cursor:pointer; transition:var(--dur-instant) var(--ease-out); }
.key:hover { background:var(--k-panel-3); border-color:var(--k-line-hot); }
.key:active { transform:translateY(1px); background:var(--k-rust-dim); }
.key.fn { font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--k-fg-3); }
.pinhint { margin-top:12px; text-align:center; font-family:var(--font-data); font-size:10px; color:var(--k-fg-4); }

/* ============================================================= GEO / MAP TAB */
.geo { display:flex; height:100%; }
.map-wrap { position:relative; flex:1; min-width:0; }
#map { position:absolute; inset:0; background:var(--k-void); }
.geo-side { width:320px; flex:0 0 320px; border-left:1px solid var(--k-line);
  background:var(--k-base); overflow-y:auto; display:flex; flex-direction:column; }
.geo-side .panel { border:none; border-bottom:1px solid var(--k-line); }
.geo-actions { display:flex; gap:8px; padding:12px; flex-wrap:wrap; }
.geo-actions .btn { flex:1; justify-content:center; min-width:120px; }

.big-readout { padding:10px 12px 14px; }
.big-readout .coord { font-family:var(--font-data); font-size:20px; color:var(--k-fg-1); letter-spacing:.02em; }
.big-readout .coord.pending { color:var(--k-fg-4); }
.acq-state { display:flex; align-items:center; gap:8px; padding:8px 12px; }
.acq-state .txt { font-family:var(--font-label); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; }

.legend { display:flex; gap:16px; padding:8px 12px; flex-wrap:wrap; }
.legend .item { display:flex; align-items:center; gap:6px; font-family:var(--font-label); font-size:10px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--k-fg-3); }
.legend .swatch { width:10px; height:10px; border-radius:50%; }

/* Leaflet dark theme overrides */
.leaflet-container { background:var(--k-void); font-family:var(--font-data); outline:none; }
.leaflet-tile { filter:contrast(1.06) brightness(.9) saturate(.85); }
.leaflet-control-zoom a { background:var(--k-panel-2)!important; color:var(--k-fg-1)!important;
  border-color:var(--k-line-strong)!important; }
.leaflet-control-zoom a:hover { background:var(--k-panel-3)!important; }
.leaflet-control-attribution { background:rgba(8,8,7,.7)!important; color:var(--k-fg-4)!important;
  font-family:var(--font-data)!important; font-size:9px!important; }
.leaflet-control-attribution a { color:var(--k-fg-3)!important; }
.leaflet-bar { border:1px solid var(--k-line-strong)!important; box-shadow:none!important; }
.leaflet-popup-content-wrapper { background:var(--k-panel)!important; color:var(--k-fg-1)!important;
  border:1px solid var(--k-line-strong)!important; border-radius:1px!important; box-shadow:var(--sh-overlay)!important; }
.leaflet-popup-tip { background:var(--k-panel)!important; border:1px solid var(--k-line-strong)!important; }
.leaflet-popup-content { margin:10px 12px!important; font-family:var(--font-data)!important; font-size:11px!important; }
.leaflet-popup-content .ptitle { font-family:var(--font-label); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; font-size:10px; color:var(--k-rust); display:block; margin-bottom:4px; }
.grid-overlay { position:absolute; inset:0; pointer-events:none; z-index:400;
  background-image:repeating-linear-gradient(0deg,transparent 0 47px,rgba(90,128,152,.06) 47px 48px),
                   repeating-linear-gradient(90deg,transparent 0 47px,rgba(90,128,152,.06) 47px 48px);
  mix-blend-mode:screen; }

/* GPS marker (pulsing crosshair) */
.gps-marker { width:18px; height:18px; }
.gps-marker::before,.gps-marker::after { content:""; position:absolute; background:var(--k-rust); }
.gps-marker::before { left:8px; top:0; width:2px; height:18px; }
.gps-marker::after { top:8px; left:0; height:2px; width:18px; }
.gps-ring { position:absolute; inset:-6px; border:1px solid var(--k-rust); border-radius:50%;
  animation:ring 1.8s var(--ease-out) infinite; }
@keyframes ring { 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.6);opacity:0} }
.cf-marker { width:14px; height:14px; border:2px solid var(--k-cold); border-radius:50%;
  background:rgba(90,128,152,.25); }

.scan-note { padding:10px 12px; font-size:12px; color:var(--k-fg-3); line-height:1.5; }
.scan-note code { font-family:var(--font-data); color:var(--k-caution); font-size:11px; }

/* ============================================================= DOMINT TAB */
.domint { display:flex; flex-direction:column; height:100%; }
.domint-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; flex:0 0 auto;
  background:var(--k-base); border-bottom:1px solid var(--k-line); }
.domint-bar .label { color:var(--k-fg-3); flex:0 0 auto; }
.dom-input { flex:0 1 440px; height:34px; padding:0 12px; background:var(--k-void);
  border:1px solid var(--k-line-strong); color:var(--k-fg-1);
  font-family:var(--font-data); font-size:13px; letter-spacing:.04em; }
.dom-input:focus { outline:none; border-color:var(--k-rust); }
.dom-input::placeholder { color:var(--k-fg-4); }
.domint-bar .spacer { flex:1; }
#dom-status { color:var(--k-fg-3); white-space:nowrap; }

.stagestrip { display:flex; flex-wrap:wrap; gap:1px; flex:0 0 auto;
  background:var(--k-line); border-bottom:1px solid var(--k-line); }
.stage-chip { flex:1 1 auto; min-width:130px; display:flex; align-items:center; gap:8px;
  padding:8px 12px; background:var(--k-base); font-family:var(--font-label); font-size:10px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--k-fg-4);
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.stage-chip .n { font-family:var(--font-data); color:var(--k-fg-4); }
.stage-chip.running { color:var(--k-caution); background:var(--k-panel); }
.stage-chip.done { color:var(--k-secure); }
.stage-chip.error { color:var(--k-alert); }

#dom-report { flex:1; overflow:auto; align-content:start; }
.domint-empty { grid-column:1 / -1; padding:56px 16px; text-align:center; color:var(--k-fg-3);
  background:var(--k-panel); line-height:1.6; }
.domint-empty .big { font-family:var(--font-label); font-size:20px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--k-fg-2); margin-bottom:8px; }
.panel > header .st { margin-right:2px; }

/* ============================================================= DEVICE TAB */
.device-bar .btn { flex:0 0 auto; }
#dev-status { color:var(--k-fg-3); white-space:nowrap; }
.device-readout { display:flex; align-items:baseline; gap:14px; padding:10px 16px; flex:0 0 auto;
  background:var(--k-void); border-bottom:1px solid var(--k-line); flex-wrap:wrap; }
.device-readout .orient { font-family:var(--font-data); font-size:22px; letter-spacing:.06em;
  color:var(--k-rust-hi); text-transform:uppercase; }
.device-readout .geom { font-family:var(--font-data); font-size:var(--fs-caption); color:var(--k-fg-2); }
.device-readout .spacer { flex:1; }
#dev-copystatus { color:var(--k-fg-3); }
#dev-report { flex:1; overflow:auto; align-content:start; }
.panel.wide { grid-column:1 / -1; }

/* container-query probe strip: the dashed box IS the container under test */
.cq-probe { container-type:inline-size; container-name:probe; margin:6px 12px 8px;
  border:1px dashed var(--k-line-hot); }
.cq-probe span { display:flex; justify-content:space-between; gap:12px; padding:5px 10px;
  font-family:var(--font-data); font-size:11px; color:var(--k-fg-2); border-bottom:1px solid var(--k-line); }
.cq-probe span::after { content:"NOT MATCHED"; font-family:var(--font-label); font-weight:600;
  letter-spacing:.14em; color:var(--k-alert); }
@container probe (min-width: 200px) { .cq-probe .cq-classic::after { content:"MATCHED"; color:var(--k-secure); } }
@container probe (width >= 200px)   { .cq-probe .cq-range::after   { content:"MATCHED"; color:var(--k-secure); } }
.cq-probe .cqw-bar { width:50cqw; height:8px; margin:6px 0; background:var(--k-rust); }
.cq-probe .cqw-bar::after { content:none; }

.dev-log { font-family:var(--font-data); font-size:11px; line-height:1.6; color:var(--k-fg-2);
  padding:8px 12px; white-space:pre-wrap; word-break:break-word; max-height:34vh; overflow-y:auto; }
.dev-log .t { color:var(--k-fg-4); }
.dev-log .src { color:var(--k-cold); }
.dev-log .or { color:var(--k-rust-hi); }
.dev-dump { display:block; width:calc(100% - 24px); margin:8px 12px; height:180px; resize:vertical;
  background:var(--k-void); border:1px solid var(--k-line-strong); color:var(--k-fg-2);
  font-family:var(--font-data); font-size:10px; line-height:1.5; padding:8px; }
.dev-dump:focus { outline:none; border-color:var(--k-rust); }

@media (max-width:820px) {
  .dossier { grid-template-columns:minmax(0,1fr); padding:8px; }
  .domint-bar { flex-wrap:wrap; gap:8px; padding:10px 12px; }
  .device-readout { padding:8px 12px; gap:10px; }
  .device-readout .orient { font-size:18px; }
  .geo { flex-direction:column; }
  .geo-side { width:100%; flex:0 0 auto; max-height:45%; border-left:none; border-top:1px solid var(--k-line); }
  .map-wrap { flex:1 1 55%; min-height:300px; }
  .kv dt { flex-basis:110px; }
}