@import '/src/brand/editorial-wordmark.css';
@import '/src/brand/tokens.css';
/* ============================================================================
   splatlas-ui.css — the Splatlas Atlas design system, EXTRACTED from the live
   app (atlas.html inline styles + cesium-map.js), tokenised so factory pages
   (business / town / estate) inherit the exact chrome the atlas ships.

   Shared identity lives in src/brand/tokens.css. These aliases retain existing
   component contracts and keep semantic status/data colors independent.
   ========================================================================== */

:root {
  /* Brand palette (atlas.html :root — from the brand sheet) */
  --brand: var(--site-accent);
  --brand-hi: var(--site-accent);
  --brand-deep: var(--site-surface);
  --ink: var(--site-bg);

  /* Navy-glass chrome (the #control-panel / #brand / #seg-2d3d surfaces) */
  --glass: rgba(16, 20, 16, 0.90);
  --glass-strong: rgba(16, 20, 16, 0.92);
  --glass-soft: rgba(16, 20, 16, 0.82);
  --hairline: rgba(var(--site-line-rgb), 0.14);
  --hairline-soft: rgba(var(--site-line-rgb), 0.10);
  --hairline-strong: rgba(var(--site-line-rgb), 0.22);
  --card: rgba(255, 255, 255, 0.022);
  --card-h: rgba(255, 255, 255, 0.015);

  /* Ink (atlas text colours) */
  --text: var(--site-text);
  --text-bright: var(--site-text);
  --label: var(--site-muted);          /* uppercase micro-labels */
  --muted: var(--site-muted);
  --dim: var(--site-muted);

  /* Status / data colours (atlas natives) */
  --civ: #00ff88;            /* civilian aircraft green — doubles as OPEN */
  --mil: #ff4444;            /* military red */
  --amber: #ffaa00;          /* airport amber — doubles as HOURS UNKNOWN */
  --fence: #ff8800;          /* geofence orange (drawGeofence) */
  --fence-label: #ffb060;
  --ok: #5fe39a;             /* ob-loading.ready green */
  --ok-bg: rgba(80, 220, 140, 0.16);
  --ok-line: rgba(80, 220, 140, 0.45);
  --warn: #ffb84d;           /* ob-loading.loading amber */
  --warn-bg: rgba(255, 170, 60, 0.16);
  --warn-line: rgba(255, 170, 60, 0.4);

  /* Type (atlas.html @font-face + body) */
  --font: var(--site-font);
  --font-ui: var(--site-font);
  --font-mono: 'SF Mono', Menlo, monospace;

  /* Depth + shape */
  --blur: blur(12px);
  --blur-panel: blur(16px);
  --r-card: 11px;
  --r-seg: 9px;
  --r-btn: 6px;
  --shadow-float: 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-lt: 0 8px 30px rgba(0, 0, 0, .5);
}

/* ── Base (atlas body) ────────────────────────────────────────────────────── */
.splatlas-ui {
  background: var(--site-bg);
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.splatlas-ui * { box-sizing: border-box; }
.splatlas-ui :focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }

/* visionOS gaze-pinch: chrome is non-selectable (atlas rule) */
.spx-chrome { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ── Top bar (atlas #brand) ───────────────────────────────────────────────── */
.spx-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1100; color: var(--site-text);
  font-size: 13px; background: var(--glass-strong); padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.spx-topbar .sub { color: var(--site-muted); font-size: 11px; }
@media (max-width: 820px) { .spx-topbar .sub { display: none; } }

/* ── Ghost button (atlas .btn-ghost) ──────────────────────────────────────── */
.btn-ghost {
  font: 600 10px var(--font-ui); padding: 4px 10px; border-radius: var(--r-btn); cursor: pointer;
  background: rgba(var(--site-accent-rgb), 0.10); color: var(--brand-hi);
  border: 1px solid rgba(var(--site-accent-rgb), 0.32); transition: background .12s ease;
}
.btn-ghost:hover { background: rgba(var(--site-accent-rgb), 0.20); }
.btn-ghost.active { background: var(--brand); color: var(--site-bg); border-color: var(--brand); }

/* ── Segmented toggle (atlas #seg-2d3d) ───────────────────────────────────── */
.spx-seg {
  display: flex; background: var(--glass-soft); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-seg); overflow: hidden;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-float);
}
.spx-seg button {
  background: none; border: none; color: var(--muted); font: 700 12px var(--font-ui);
  padding: 7px 16px; cursor: pointer; transition: all .12s ease;
}
.spx-seg button.active { background: var(--brand); color: var(--site-bg); }

/* ── Nav cluster (atlas #nav-controls) ────────────────────────────────────── */
.spx-nav {
  display: flex; flex-direction: column; background: var(--glass-soft);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-card); overflow: hidden;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-float);
}
.spx-nav button {
  background: none; border: none; color: var(--text); font: 600 17px var(--font-ui);
  width: 42px; height: 38px; cursor: pointer; transition: background .12s ease;
}
.spx-nav button:hover { background: rgba(var(--site-accent-rgb), 0.18); color: #fff; }
.spx-nav button + button { border-top: 1px solid var(--hairline); }

/* ── Docked side panel (atlas #control-panel) ─────────────────────────────── */
.spx-panel {
  position: absolute; top: 46px; right: 0; bottom: 0; width: 344px;
  background: var(--glass); color: var(--text);
  border-left: 1px solid var(--hairline); font-size: 12px;
  -webkit-backdrop-filter: var(--blur-panel); backdrop-filter: var(--blur-panel);
  z-index: 1000; display: flex; flex-direction: column; overflow: hidden;
}
.spx-panel-header {
  padding: 11px 14px; display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px solid var(--hairline-soft);
}
.spx-stat-row { display: flex; gap: 20px; }
.spx-stat-row > span { display: flex; flex-direction: column; line-height: 1.1; }
.stat-value { color: var(--brand-hi); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--label); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; margin-top: 2px; }

/* ── Layer chips (atlas #layer-status .lchip) ─────────────────────────────── */
.spx-chips {
  display: flex; flex-wrap: wrap; gap: 11px; padding: 9px 14px;
  border-bottom: 1px solid var(--hairline-soft); background: var(--card-h);
}
.lchip {
  background: none; border: none; padding: 0 0 3px; margin: 0; cursor: pointer;
  font-size: 14px; line-height: 1; filter: grayscale(1) opacity(0.28);
  border-bottom: 2px solid transparent; transition: all .14s ease;
}
.lchip.on { filter: none; border-bottom-color: var(--brand); }
.lchip:hover { transform: translateY(-1px); filter: grayscale(0.2) opacity(0.92); }

/* ── Carded sections (atlas .ctl-card) ────────────────────────────────────── */
.ctl-card { background: var(--card); border: 1px solid var(--hairline-soft); border-radius: var(--r-card); padding: 10px 12px; }
.ctl-card-h { font-size: 9.5px; color: var(--label); text-transform: uppercase; letter-spacing: .11em; margin-bottom: 8px; }
.ctl-row { display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: center; }

/* ── List tabs + table (atlas #list-tabs / #ac-list-section) ──────────────── */
.spx-tabs { display: flex; gap: 6px; margin: 2px 0 8px; }
.spx-tabs button {
  flex: 1; background: rgba(255, 255, 255, 0.04); color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 7px; padding: 6px;
  font: 600 11px var(--font-ui); cursor: pointer;
}
.spx-tabs button.active { background: rgba(var(--site-accent-rgb), 0.16); color: var(--brand-hi); border-color: rgba(var(--site-accent-rgb), 0.5); }
.spx-list table { width: 100%; border-collapse: collapse; }
.spx-list th { color: var(--label); text-align: left; font-weight: normal; font-size: 10px; }
.spx-list td { padding: 3px 5px; }
.spx-list td a { cursor: pointer; color: var(--site-muted); text-decoration: none; }

/* ── Status pills (atlas #ob-loading loading/ready) ───────────────────────── */
.spx-pill { font: 700 11px var(--font-ui); padding: 4px 10px; border-radius: var(--r-btn); display: inline-flex; align-items: center; gap: 6px; }
.spx-pill.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.spx-pill.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.spx-pill.dim { background: rgba(255, 255, 255, 0.04); color: var(--muted); border: 1px solid var(--hairline); }
@keyframes spxFlash { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.spx-pill.flash { animation: spxFlash .7s infinite; }

/* ── Spatial lower-third (atlas #lower-third) ─────────────────────────────── */
.spx-lower-third {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(0);
  z-index: 1060; display: flex; align-items: stretch;
  background: var(--glass-strong); border: 1px solid var(--hairline-strong); border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow-lt);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-family: var(--font); color: var(--text-bright); max-width: 92vw;
  opacity: 1; transition: transform .34s cubic-bezier(.2, .85, .25, 1), opacity .3s ease;
  pointer-events: none;
}
.spx-lower-third.hidden { transform: translateX(-50%) translateY(160%); opacity: 0; }
.spx-lower-third .lt-accent { background: var(--brand); color: var(--site-bg); font-size: 22px; display: flex; align-items: center; padding: 0 16px; }
.spx-lower-third .lt-main { padding: 9px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 130px; border-right: 1px solid var(--hairline); }
.spx-lower-third .lt-callsign { font-size: 22px; font-weight: 800; letter-spacing: .4px; line-height: 1.04; }
.spx-lower-third .lt-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.spx-lower-third .lt-stats { display: flex; }
.spx-lower-third .lt-stats > div { padding: 9px 18px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--hairline-soft); }
.spx-lower-third .lt-stats > div:last-child { border-right: none; }
.spx-lower-third .lt-l { font-size: 9px; color: var(--label); text-transform: uppercase; letter-spacing: .09em; }
.spx-lower-third .lt-v { font-size: 17px; font-weight: 700; color: var(--brand-hi); font-variant-numeric: tabular-nums; }

/* ── Corner legend box (atlas #alt-legend register) ───────────────────────── */
.spx-legend {
  background: rgba(0, 0, 0, 0.85); border: 1px solid #333; border-radius: 4px;
  padding: 8px 12px 8px 10px; font-size: 11px; display: flex; flex-direction: column;
}
.spx-legend .legend-title { color: #888; margin-bottom: 6px; font-size: 10px; text-transform: uppercase; }

/* ── Inputs (atlas controls-section) ──────────────────────────────────────── */
.splatlas-ui select {
  font-size: 11px; background: rgba(255, 255, 255, 0.05); color: var(--text);
  border: 1px solid rgba(var(--site-line-rgb), 0.2); border-radius: var(--r-btn); padding: 3px 7px;
}
.splatlas-ui input[type=checkbox] { accent-color: var(--brand-hi); width: 14px; height: 14px; margin: 0; flex: none; }
.splatlas-ui input[type=range] { accent-color: var(--brand); }