/*
 * shell.css — the Rams chrome (UI-SPEC §Shell Layout & Register Bands).
 * -----------------------------------------------------------------------
 * Every value is a token reference (var(--color-*) / var(--spacing-*) /
 * var(--type-*)); the only literals are the machined-border geometry the
 * UI-SPEC enumerates (1px/2px rules, 8px lamp/gantry/notch, 40x40 plate,
 -2px hit slop, 320px card max-width, 20px dot as SVG r=10). Zero
 * roundedness (the one `border-radius: 0` reset pins MapLibre's chrome),
 * zero transition/animation — state changes are instant hard swaps.
 *
 * D-10 / PX-02: NO MapLibre rule participates in theme slots. The map
 * style is Rams-constant; only --shell-bg / --shell-on-surface re-slot
 * behind [data-tg-theme].
 */

/* tokens.css wins; mockups lose. Value discipline per theme/src/components.css lines 9-15. */
@import "@araharah/theme/dist/rams.css";

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--shell-bg);
  color: var(--shell-on-surface);
  font: var(--type-body-md);
  overflow: hidden;
}

/* PX-02 dark-slot activation (extends theme.css's media-query default) */
[data-tg-theme="light"] { --shell-bg: var(--color-surface); --shell-on-surface: var(--color-on-surface); }
[data-tg-theme="dark"]  { --shell-bg: var(--color-surface-dark); --shell-on-surface: var(--color-inverse-on-surface); }
[data-tg-theme="dark"] .card { background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); border-color: var(--color-inverse-on-surface); }
[data-tg-theme="dark"] .card-header { border-bottom-color: var(--color-inverse-on-surface); color: var(--color-inverse-on-surface); }
/* NO MapLibre rule here, by design (D-10 / RESEARCH Pitfall 7). */

/* Research Open Question 1 — WebGL2 absent: shell renders over a Rams-tinted field */
body[data-map="absent"] main { background: var(--color-surface-dim); }

/* map register: full-bleed, the dominant surface */
main { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; }
/* MapLibre's stylesheet lands AFTER shell.css in the bundle (map.ts imports
   it at module scope), so the Rams chip override needs the #map-scoped
   specificity to win the cascade — flat matte-black chip, no translucency. */
#map .maplibregl-ctrl-attrib { border-radius: 0; background: var(--color-matte-black); color: var(--color-pure-white); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); text-transform: uppercase; }
#map .maplibregl-ctrl-attrib a { color: var(--color-pure-white); }
#map .maplibregl-ctrl-attrib-button { background-color: var(--color-matte-black); }

/* top register: status strip */
.strip {
  position: absolute; top: calc(var(--safe-top, 0px) + var(--spacing-space-sm)); left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--spacing-space-sm) var(--spacing-space-md);
  min-height: 32px;
  background: var(--color-matte-black); color: var(--color-inverse-on-surface);
  font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); text-transform: uppercase;
}
.strip .left { display: flex; align-items: center; gap: var(--spacing-space-xs); }
.strip .lamp { width: 8px; height: 8px; border: 1px solid var(--color-pure-white); }
.strip .lamp[data-state="acquiring"], .strip .lamp[data-state="validating"], .strip .lamp[data-state="awaiting"] { background: var(--color-signal-orange); }
.strip .lamp[data-state="live"] { background: var(--color-olive-green); }
.strip .lamp[data-state="lost"], .strip .lamp[data-state="denied"] { background: var(--color-functional-red); }
.strip .telemetry { font: var(--type-label-sm); }

/* center register: boot / denied / lost card */
.card-stack { position: absolute; left: var(--spacing-margin); right: var(--spacing-margin); top: 50%; transform: translateY(-50%); max-width: 320px; margin-inline: auto; }
.card .gantry { width: 8px; height: 8px; border: 1px solid var(--color-matte-black); }
.card .gantry[data-fill="on"] { background: var(--color-signal-orange); }
.card-actions { display: flex; gap: var(--spacing-space-sm); padding-top: var(--spacing-space-sm); }

/* bottom register: recenter control (40x40 plate, >=44x44 hit target) */
.recenter {
  position: absolute; right: var(--spacing-margin); bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm));
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0;
  background: var(--color-matte-black); color: var(--color-pure-white);
  display: flex; align-items: center; justify-content: center;
  z-index: 2; /* above MapLibre's own chrome; the attrib chip lives bottom-left */
}
.recenter::after { content: ""; position: absolute; inset: -2px; }
.recenter .notch { width: 8px; height: 8px; background: var(--color-signal-orange); }
.recenter[data-follow="free"] .notch { display: none; }
/* UI-SPEC §Follow/Recenter Control, third notch state: live-but-LOST (no fix).
   soft-beige, NOT red — red is reserved for the strip/degraded registers; the notch
   reads "unlocked, not error" (RESEARCH Pitfall 8 orange discipline). */
.recenter[data-fix="lost"] .notch { background: var(--color-soft-beige); }
.recenter:active { background: var(--color-signal-orange); color: var(--color-matte-black); }

/* position marker (DOM Marker children) */
.pos-accuracy { fill: var(--color-matte-black); fill-opacity: 0.06; stroke: var(--color-matte-black); stroke-opacity: 0.30; stroke-width: 1; }
.pos-dot { fill: var(--color-matte-black); }
.pos-cone { fill: var(--color-signal-orange); }
.pos-group[data-stale="true"] { opacity: 0.4; }

/* No CSS transition or animation anywhere — state changes are instant hard swaps. */

/* DEBUG-ROUND probe — on-screen category-only telemetry for the device-matrix
   loop (no dev-tools in a phone webview). Removed at the exit. Layout-only
   positioning; the label typography is the existing label-sm token. */
.diag-probe { position: absolute; left: var(--spacing-margin); bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm)); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); color: var(--color-soft-beige); z-index: 10; pointer-events: none; }