/* ═══════════════════════════════════════════════════════════════════════
   oi.css — Orbital Intelligence unified design system
   ──────────────────────────────────────────────────────────────────────
   Single source of truth for tokens, primitives, and component library.
   Loaded BEFORE app.css so legacy class-based styles automatically
   inherit the new palette without template rewrites.

   Design language: Apple Maps × Google Maps × mission console.
     - Hairlines, not borders. Glass, not panels.
     - One accent (cyan). Semantic colors for state only.
     - Tabular numerics everywhere the eye will compare values.
     - Spring motion on content, ease on controls.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces — 5-step ramp, each +~4% luminance ─────────────────── */
  --oi-bg-0: #07080b;   /* deep space / page outer */
  --oi-bg-1: #0d0e13;   /* page / sidebar */
  --oi-bg-2: #14151b;   /* card */
  --oi-bg-3: #1c1d25;   /* input, hover */
  --oi-bg-4: #252730;   /* pressed, strong hover */

  /* ── Translucent materials for overlays ──────────────────────────── */
  --oi-glass:        rgba(13, 14, 19, 0.78);
  --oi-glass-strong: rgba(13, 14, 19, 0.92);

  /* ── Neutral panel surfaces — match FADA / Zenith sidebar (pure
     neutral gray, no blue cast). Used by side-rails + top chrome. ──── */
  --oi-panel:              #171717;                /* solid drawers / side-rails (FADA sidebar) */
  --oi-panel-glass:        rgba(20, 20, 20, 0.72);  /* navbar / subnav / status glass */
  --oi-panel-glass-strong: rgba(23, 23, 23, 0.90);

  /* ── Hairlines ───────────────────────────────────────────────────── */
  --oi-line:        rgba(255, 255, 255, 0.07);
  --oi-line-strong: rgba(255, 255, 255, 0.14);

  /* ── Text — 3 levels is plenty ───────────────────────────────────── */
  --oi-text:   rgba(255, 255, 255, 0.94);
  --oi-text-2: rgba(255, 255, 255, 0.62);
  --oi-text-3: rgba(255, 255, 255, 0.40);

  /* ── One accent + semantic colors ────────────────────────────────────
     Brand accent is amber (FADA / mission-console HUD). Data-viz colors
     (orbit class etc.) stay independent below so the accent shift never
     muddies the cyan = LEO convention on the globe. ─────────────────── */
  --oi-accent:     #ff5622;   /* FADA / Zenith brand orange */
  --oi-accent-dim: rgba(255, 86, 34, 0.22);
  --oi-accent-glow: rgba(255, 86, 34, 0.12);

  --oi-green:  #32d74b;
  --oi-yellow: #ffd60a;
  --oi-amber:  #ff9f0a;   /* HUD warning / active tracking */
  --oi-red:    #ff453a;

  /* ── Category accents (orbit class, network, etc.) ───────────────── */
  --oi-cat-leo:  #64d2ff;
  --oi-cat-meo:  #bf5af2;
  --oi-cat-geo:  #ff9f40;
  --oi-cat-heo:  #ff6b9d;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --oi-r-xs: 4px;
  --oi-r-sm: 6px;
  --oi-r:    10px;
  --oi-r-lg: 14px;
  --oi-r-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --oi-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --oi-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --oi-fast: 120ms;
  --oi-med:  220ms;
  --oi-slow: 420ms;

  /* ── Type ────────────────────────────────────────────────────────── */
  --oi-font-ui:   Arial, 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', ui-sans-serif, system-ui, sans-serif;   /* match FADA / Zenith (Arial / system sans) */
  --oi-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;   /* match FADA / Zenith system mono */

  /* ── Elevation ───────────────────────────────────────────────────── */
  --oi-shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --oi-shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.4);
  --oi-shadow-3: 0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 48px rgba(0,0,0,0.6);

  /* ══════════════════════════════════════════════════════════════════
     LEGACY ALIASES
     Do NOT reference these in new code. They exist so the existing
     app.css classes and map.html inline styles pick up the new tokens.
     ══════════════════════════════════════════════════════════════════ */

  /* app.css legacy (--bg-*, --text-*, --accent, etc.) */
  --bg-base:        var(--oi-bg-1);
  --bg-surface:     var(--oi-bg-2);
  --bg-elevated:    var(--oi-bg-3);
  --bg-hover:       var(--oi-bg-3);
  --bg-input:       var(--oi-bg-3);
  --border:         var(--oi-line);
  --border-bright:  var(--oi-line-strong);
  --text-primary:   var(--oi-text);
  --text-secondary: var(--oi-text-2);
  --text-muted:     var(--oi-text-3);
  --accent:         var(--oi-accent);
  --accent-dim:     var(--oi-accent-dim);
  --accent-glow:    var(--oi-accent-glow);
  --green:     var(--oi-green);
  --green-dim: rgba(50, 215, 75, 0.22);
  --yellow:    var(--oi-yellow);
  --yellow-dim: rgba(255, 214, 10, 0.22);
  --red:       var(--oi-red);
  --red-dim:   rgba(255, 69, 58, 0.22);
  --purple:    var(--oi-cat-meo);
  --orange:    var(--oi-cat-geo);
  --font-mono: var(--oi-font-mono);
  --font-ui:   var(--oi-font-ui);
  --radius:    var(--oi-r-sm);
  --radius-lg: var(--oi-r);
  --transition: var(--oi-fast) var(--oi-ease);

  /* map.html legacy (--m-*) */
  --m-bg-0: var(--oi-bg-0);
  --m-bg-1: var(--oi-bg-1);
  --m-bg-2: var(--oi-bg-2);
  --m-bg-3: var(--oi-bg-3);
  --m-bg-4: var(--oi-bg-4);
  --m-hair:        var(--oi-line);
  --m-hair-strong: var(--oi-line-strong);
  --m-text:   var(--oi-text);
  --m-text-2: var(--oi-text-2);
  --m-text-3: var(--oi-text-3);
  --m-accent: var(--oi-accent);
  --m-green:  var(--oi-green);
  --m-yellow: var(--oi-yellow);
  --m-orange: var(--oi-cat-geo);
  --m-red:    var(--oi-red);
  --m-purple: var(--oi-cat-meo);
  --m-blue:   var(--oi-accent);
  --m-pink:   var(--oi-cat-heo);
  --m-r:    var(--oi-r);
  --m-r-sm: var(--oi-r-sm);
  --m-r-lg: var(--oi-r-lg);
  --m-ease:   var(--oi-ease);
  --m-spring: var(--oi-spring);
}

/* ═════════════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY + TABULAR NUMBERS
   ═════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--oi-font-ui);
  font-feature-settings: "ss01", "cv01", "cv11";
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.oi-tabular,
.oi-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.oi-mono {
  font-family: var(--oi-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ═════════════════════════════════════════════════════════════════════
   PAGE HEADER — use on every content page
   ═════════════════════════════════════════════════════════════════════ */

.oi-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 18px;
}
.oi-page-head .oi-page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--oi-text);
  margin: 0;
  line-height: 1.1;
}
.oi-page-head .oi-page-sub {
  font-size: 13px;
  color: var(--oi-text-2);
  margin-top: 4px;
  letter-spacing: -0.005em;
}
.oi-page-head .oi-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   CARD — flat, hairline, 14px padding
   ═════════════════════════════════════════════════════════════════════ */

.oi-card {
  background: var(--oi-bg-2);
  border: 1px solid var(--oi-line);
  border-radius: var(--oi-r);
  padding: 16px;
  box-shadow: var(--oi-shadow-1);
}
.oi-card--pad-lg { padding: 20px; }
.oi-card--pad-sm { padding: 12px; }
.oi-card--glass {
  background: var(--oi-glass);
  border-color: var(--oi-line-strong);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  box-shadow: var(--oi-shadow-2);
}
.oi-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.oi-card__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oi-text-3);
  margin: 0;
}

/* ═════════════════════════════════════════════════════════════════════
   STAT — label + large tabular value
   ═════════════════════════════════════════════════════════════════════ */

.oi-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.oi-stat__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oi-text-3);
}
.oi-stat__value {
  font-family: var(--oi-font-mono);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--oi-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.oi-stat__value--lg { font-size: 28px; }
.oi-stat__value--accent { color: var(--oi-accent); }
.oi-stat__sub {
  font-size: 11px;
  color: var(--oi-text-3);
}

.oi-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

/* ═════════════════════════════════════════════════════════════════════
   PILL — floating glass chip with optional dot
   ═════════════════════════════════════════════════════════════════════ */

.oi-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--oi-glass);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  border: 1px solid var(--oi-line-strong);
  border-radius: var(--oi-r-pill);
  font-size: 11px;
  color: var(--oi-text-2);
  box-shadow: var(--oi-shadow-2);
  white-space: nowrap;
}
.oi-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oi-green);
  box-shadow: 0 0 0 3px rgba(50, 215, 75, 0.2);
  animation: oi-pulse 2.2s infinite;
}
.oi-pill__dot--yellow { background: var(--oi-yellow); box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.2); }
.oi-pill__dot--red    { background: var(--oi-red);    box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.2); }
.oi-pill__dot--accent { background: var(--oi-accent); box-shadow: 0 0 0 3px rgba(255, 86, 34, 0.2); }
.oi-pill__label {
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 10px;
  color: var(--oi-green);
  text-transform: uppercase;
}

@keyframes oi-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(0.92); opacity: 0.6; }
}

/* ═════════════════════════════════════════════════════════════════════
   BADGE — small uppercase category chip
   ═════════════════════════════════════════════════════════════════════ */

.oi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--oi-r-xs);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--oi-bg-3);
  color: var(--oi-text-2);
  border: 1px solid var(--oi-line);
  font-variant-numeric: tabular-nums;
}
.oi-badge--accent { color: var(--oi-accent); background: var(--oi-accent-glow); border-color: var(--oi-accent-dim); }
.oi-badge--green  { color: var(--oi-green);  background: rgba(50, 215, 75, 0.12); border-color: rgba(50, 215, 75, 0.3); }
.oi-badge--yellow { color: var(--oi-yellow); background: rgba(255, 214, 10, 0.12); border-color: rgba(255, 214, 10, 0.3); }
.oi-badge--red    { color: var(--oi-red);    background: rgba(255, 69, 58, 0.12); border-color: rgba(255, 69, 58, 0.3); }
.oi-badge--solid  { color: #001e2e; background: var(--oi-accent); border-color: transparent; }

/* ═════════════════════════════════════════════════════════════════════
   BUTTONS — filled, ghost, icon
   ═════════════════════════════════════════════════════════════════════ */

.oi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--oi-r-sm);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--oi-fast) var(--oi-ease),
              color var(--oi-fast) var(--oi-ease),
              border-color var(--oi-fast) var(--oi-ease),
              filter var(--oi-fast) var(--oi-ease),
              transform 80ms var(--oi-ease);
  user-select: none;
  white-space: nowrap;
}
.oi-btn:active { transform: scale(0.97); }
.oi-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.oi-btn--primary {
  background: var(--oi-accent);
  color: #001e2e;
}
.oi-btn--primary:hover { filter: brightness(1.08); text-decoration: none; }

.oi-btn--ghost {
  background: transparent;
  color: var(--oi-text-2);
  border-color: var(--oi-line-strong);
}
.oi-btn--ghost:hover {
  background: var(--oi-bg-3);
  color: var(--oi-text);
  text-decoration: none;
}

.oi-btn--danger {
  background: transparent;
  color: var(--oi-red);
  border-color: var(--oi-line);
}
.oi-btn--danger:hover {
  background: rgba(255, 69, 58, 0.1);
  border-color: var(--oi-red);
  text-decoration: none;
}

.oi-btn--sm { padding: 5px 10px; font-size: 11px; }
.oi-btn--lg { padding: 10px 18px; font-size: 13px; }

.oi-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--oi-r-sm);
  background: transparent;
  color: var(--oi-text-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--oi-fast) var(--oi-ease),
              color var(--oi-fast) var(--oi-ease);
}
.oi-icon-btn:hover { background: var(--oi-bg-3); color: var(--oi-text); }
.oi-icon-btn svg { width: 16px; height: 16px; }

/* ═════════════════════════════════════════════════════════════════════
   INPUT — dark, cyan focus ring
   ═════════════════════════════════════════════════════════════════════ */

.oi-input,
.oi-select,
.oi-textarea {
  width: 100%;
  background: var(--oi-bg-3);
  border: 1px solid var(--oi-line);
  color: var(--oi-text);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  border-radius: var(--oi-r-sm);
  outline: none;
  transition: border-color var(--oi-fast) var(--oi-ease),
              box-shadow var(--oi-fast) var(--oi-ease);
}
.oi-input:focus,
.oi-select:focus,
.oi-textarea:focus {
  border-color: var(--oi-accent);
  box-shadow: 0 0 0 3px var(--oi-accent-glow);
}
.oi-input::placeholder { color: var(--oi-text-3); }

.oi-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oi-text-3);
  margin-bottom: 6px;
}

/* ═════════════════════════════════════════════════════════════════════
   TABLE — dense rows, no borders, hover row
   ═════════════════════════════════════════════════════════════════════ */

.oi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--oi-text);
}
.oi-table thead th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oi-text-3);
  border-bottom: 1px solid var(--oi-line);
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 1;
}
.oi-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--oi-line);
  vertical-align: middle;
}
.oi-table tbody tr { transition: background var(--oi-fast) var(--oi-ease); }
.oi-table tbody tr:hover { background: var(--oi-bg-3); }
.oi-table tbody tr:last-child td { border-bottom: none; }
.oi-table .oi-num,
.oi-table td.num {
  text-align: right;
  font-family: var(--oi-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ═════════════════════════════════════════════════════════════════════
   TABS — underline, not boxed
   ═════════════════════════════════════════════════════════════════════ */

.oi-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--oi-line);
  margin-bottom: 16px;
}
.oi-tabs__item {
  position: relative;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--oi-text-2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--oi-fast) var(--oi-ease);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.oi-tabs__item:hover { color: var(--oi-text); text-decoration: none; }
.oi-tabs__item.is-active { color: var(--oi-text); }
.oi-tabs__item.is-active::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 2px;
  background: var(--oi-accent);
  border-radius: 2px 2px 0 0;
}

/* ═════════════════════════════════════════════════════════════════════
   SHEET — floating glass panel (for detail cards, filters)
   ═════════════════════════════════════════════════════════════════════ */

.oi-sheet {
  background: var(--oi-glass-strong);
  backdrop-filter: saturate(1.4) blur(24px);
  -webkit-backdrop-filter: saturate(1.4) blur(24px);
  border: 1px solid var(--oi-line-strong);
  border-radius: var(--oi-r);
  box-shadow: var(--oi-shadow-3);
  overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════════════
   KEY–VALUE GRID — 2-col tight grid for detail pages
   ═════════════════════════════════════════════════════════════════════ */

.oi-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.oi-kv {
  background: var(--oi-bg-2);
  border: 1px solid var(--oi-line);
  border-radius: var(--oi-r-sm);
  padding: 10px 12px;
}
.oi-kv__k {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oi-text-3);
  margin-bottom: 4px;
}
.oi-kv__v {
  font-family: var(--oi-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--oi-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  word-break: break-word;
}

/* Legacy aliases for the old detail-page markup. Existing pages can keep
   using `.detail-grid`/`.detail-item`/`.detail-key`/`.detail-val`; new pages
   should use `.oi-kv-grid`/`.oi-kv` directly. */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.detail-item {
  background: var(--oi-bg-2);
  border: 1px solid var(--oi-line);
  border-radius: var(--oi-r-sm);
  padding: 10px 12px;
}
.detail-key {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--oi-text-3); margin-bottom: 4px;
}
.detail-val {
  font-family: var(--oi-font-mono); font-size: 13px; font-weight: 500;
  color: var(--oi-text); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; word-break: break-word;
}

/* ═════════════════════════════════════════════════════════════════════
   ORBIT-RING — keplerian-element strip used on satellite + ground-station
   detail pages. A horizontal scrolling row of compact param chips.
   ═════════════════════════════════════════════════════════════════════ */
.orbit-ring {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px;
}
.orbit-ring::-webkit-scrollbar { display: none; }
.orbit-param {
  flex-shrink: 0;
  min-width: 84px;
  padding: 10px 14px;
  background: var(--oi-bg-2);
  border: 1px solid var(--oi-line);
  border-radius: var(--oi-r-sm);
  text-align: center;
}
.orbit-param-label,
.orbit-param-key {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--oi-text-3); margin-bottom: 4px;
}
.orbit-param-value,
.orbit-param-val {
  font-family: var(--oi-font-mono); font-size: 14px; font-weight: 600;
  color: var(--oi-text); font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* ═════════════════════════════════════════════════════════════════════
   MODAL — full-screen dim backdrop + centred glass sheet.
   Markup pattern:
     <div class="oi-modal" id="x" hidden>
       <div class="oi-modal__sheet">…</div>
     </div>
   Toggle with `el.hidden = false/true`. No inline display: flex needed.
   ═════════════════════════════════════════════════════════════════════ */
.oi-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.oi-modal[hidden] { display: none; }
.oi-modal__sheet {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--oi-glass-strong);
  backdrop-filter: saturate(1.4) blur(24px);
  -webkit-backdrop-filter: saturate(1.4) blur(24px);
  border: 1px solid var(--oi-line-strong);
  border-radius: var(--oi-r);
  box-shadow: var(--oi-shadow-3);
  padding: 20px;
}
.oi-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--oi-line);
}
.oi-modal__title {
  font-size: 14px; font-weight: 600;
  color: var(--oi-text);
  letter-spacing: -0.01em;
}
.oi-modal__actions {
  display: flex; gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

/* ═════════════════════════════════════════════════════════════════════
   PERMISSION PILL — small toggle chip used on the roles form. Wraps a
   hidden checkbox; clicking the label toggles. Activated state goes to
   accent. Used as: <label class="oi-perm">…<input type="checkbox">…</label>
   ═════════════════════════════════════════════════════════════════════ */
.oi-perm {
  display: inline-flex;
  align-items: center; gap: 5px;
  padding: 6px 10px;
  background: var(--oi-bg-2);
  border: 1px solid var(--oi-line);
  border-radius: var(--oi-r-sm);
  font-size: 12px;
  color: var(--oi-text-2);
  cursor: pointer;
  transition: all var(--oi-fast) var(--oi-ease);
}
.oi-perm:hover {
  color: var(--oi-text);
  border-color: var(--oi-line-strong);
  background: var(--oi-bg-3);
}
.oi-perm:has(input:checked) {
  color: var(--oi-accent);
  background: var(--oi-accent-glow);
  border-color: var(--oi-accent-dim);
}
.oi-perm input { margin: 0; accent-color: var(--oi-accent); }

/* ═════════════════════════════════════════════════════════════════════
   SKELETON — shimmer-bar loader. Replaces the rotating .spinner where
   we want a calmer "this section is hydrating" affordance.
   ═════════════════════════════════════════════════════════════════════ */
.oi-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--oi-bg-2);
  border-radius: var(--oi-r-sm);
}
.oi-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 45%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.06) 55%,
    transparent 100%);
  animation: oi-skel 1.6s infinite ease-in-out;
}
@keyframes oi-skel {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.oi-skeleton--text  { height: 12px; margin: 6px 0; }
.oi-skeleton--row   { height: 32px; margin: 4px 0; }
.oi-skeleton--card  { height: 88px; }
.oi-skeleton--chart { height: 180px; }

/* ═════════════════════════════════════════════════════════════════════
   TOOLTIP — dark, 11px
   ═════════════════════════════════════════════════════════════════════ */

.oi-tooltip {
  position: absolute;
  padding: 4px 8px;
  background: var(--oi-glass-strong);
  border: 1px solid var(--oi-line-strong);
  border-radius: var(--oi-r-xs);
  font-size: 11px;
  color: var(--oi-text);
  box-shadow: var(--oi-shadow-2);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1000;
}

/* ═════════════════════════════════════════════════════════════════════
   UTILITY
   ═════════════════════════════════════════════════════════════════════ */

.oi-hairline { border-top: 1px solid var(--oi-line); }
.oi-divider  { height: 1px; background: var(--oi-line); margin: 16px 0; }
.oi-stack-2  { display: flex; flex-direction: column; gap: 2px; }
.oi-stack-4  { display: flex; flex-direction: column; gap: 4px; }
.oi-stack-8  { display: flex; flex-direction: column; gap: 8px; }
.oi-row      { display: flex; align-items: center; gap: 8px; }
.oi-row-sb   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oi-spacer   { flex: 1; }

/* Hide on mobile / hide on desktop visibility helpers */
.oi-hide-mobile  { }
.oi-only-mobile  { display: none !important; }
.oi-scroll-x     { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ═════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet (≤900) and phone (≤600)
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .oi-page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .oi-page-head .oi-page-title { font-size: 20px; }
  .oi-page-head .oi-page-actions { flex-wrap: wrap; }

  .oi-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .oi-tabs::-webkit-scrollbar { display: none; }
  .oi-tabs__item { flex-shrink: 0; }

  .oi-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }
  .oi-table { min-width: 640px; }

  .oi-kv-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .oi-stat-grid { grid-template-columns: 1fr 1fr; }
  .oi-stat__value { font-size: 20px; }
  .oi-stat__value--lg { font-size: 24px; }

  .oi-card { padding: 14px; }
  .oi-card--pad-lg { padding: 16px; }
}

@media (max-width: 600px) {
  .oi-hide-mobile { display: none !important; }
  .oi-only-mobile { display: initial !important; }

  .oi-page-head .oi-page-title { font-size: 18px; }
  .oi-kv-grid   { grid-template-columns: 1fr; }
  .oi-stat-grid { grid-template-columns: 1fr 1fr; }

  .oi-btn { padding: 8px 12px; font-size: 12px; }
  .oi-btn--sm { padding: 6px 10px; }
}

/* Larger hit targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .oi-btn, .oi-icon-btn { min-height: 36px; }
  .oi-tabs__item { padding: 12px 14px; }
  .oi-table tbody td { padding: 12px; }
}

/* ═════════════════════════════════════════════════════════════════════
   FILTER DRAWER — right-side sticky panel for list pages
   Mirrors the map's right panel: dense mono labels, HUD sections.
   ═════════════════════════════════════════════════════════════════════ */

.oi-workroom {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 10px;
  align-items: flex-start;
}
.oi-workroom > .oi-workroom-main { min-width: 0; }

.oi-drawer {
  position: sticky;
  top: 12px;
  background: var(--oi-panel);
  border: 1px solid var(--oi-line);
  padding: 0;
  overflow: hidden;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}
.oi-drawer::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--oi-accent);
}
.oi-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--oi-line);
  background: var(--oi-bg-1);
  flex-shrink: 0;
}
.oi-drawer-title {
  font-family: var(--oi-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oi-text);
}
.oi-drawer-title::before { content: '▸ '; color: var(--oi-accent); }
.oi-drawer-reset {
  font-family: var(--oi-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--oi-line-strong);
  color: var(--oi-text-2);
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: color var(--oi-fast), border-color var(--oi-fast);
}
.oi-drawer-reset:hover { color: var(--oi-accent); border-color: var(--oi-accent); }
.oi-drawer-body {
  overflow-y: auto;
  padding: 4px 0;
  flex: 1;
}
.oi-drawer-body::-webkit-scrollbar { width: 4px; }
.oi-drawer-body::-webkit-scrollbar-thumb { background: var(--oi-line-strong); border-radius: 2px; }
.oi-drawer-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--oi-line);
}
.oi-drawer-section:last-child { border-bottom: none; }
.oi-drawer-section-title {
  font-family: var(--oi-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oi-accent);
  margin-bottom: 10px;
}
.oi-drawer-field { margin-bottom: 10px; }
.oi-drawer-field:last-child { margin-bottom: 0; }
.oi-drawer-field label {
  display: block;
  font-family: var(--oi-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oi-text-3);
  margin-bottom: 4px;
}
.oi-drawer-field input,
.oi-drawer-field select {
  width: 100%;
  background: var(--oi-bg-3);
  border: 1px solid var(--oi-line);
  color: var(--oi-text);
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12px;
  border-radius: var(--oi-r-xs);
  outline: none;
  transition: border-color var(--oi-fast), box-shadow var(--oi-fast);
}
.oi-drawer-field input:focus,
.oi-drawer-field select:focus {
  border-color: var(--oi-accent);
  box-shadow: 0 0 0 3px var(--oi-accent-glow);
}
.oi-drawer-field .two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* Mobile: drawer collapses into a bottom sheet / accordion */
@media (max-width: 900px) {
  .oi-workroom { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .oi-drawer {
    position: static;
    max-height: none;
    order: 2;
  }
  .oi-workroom > .oi-workroom-main { order: 1; }
}

/* The HUD ticker bar moved to a bottom status strip — see .oi-status in nav.css */

/* ═════════════════════════════════════════════════════════════════════
   HUD — defence-intel layer
   Corner brackets, scanlines, grid bg, HUD labels, data bars.
   Apply to any container. Designed to read as a mission/ops console.
   ═════════════════════════════════════════════════════════════════════ */

/* Corner brackets — 4 L-shaped marks around a container */
.oi-bracketed {
  position: relative;
}
.oi-bracketed::before,
.oi-bracketed::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--oi-accent);
  pointer-events: none;
}
.oi-bracketed::before {
  top: -1px; left: -1px;
  border-right: none;
  border-bottom: none;
}
.oi-bracketed::after {
  bottom: -1px; right: -1px;
  border-left: none;
  border-top: none;
}
.oi-bracketed > .oi-bracketed-br,
.oi-bracketed > .oi-bracketed-tl {
  /* consumers can place corner children too (decorative) */
  position: absolute; pointer-events: none;
}
/* Variant: 4 corners */
.oi-bracketed--4::before,
.oi-bracketed--4::after,
.oi-bracketed--4 > .oi-bracketed-tr,
.oi-bracketed--4 > .oi-bracketed-bl {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--oi-accent);
  pointer-events: none;
}
.oi-bracketed--4 > .oi-bracketed-tr {
  top: -1px; right: -1px;
  border-left: none;
  border-bottom: none;
}
.oi-bracketed--4 > .oi-bracketed-bl {
  bottom: -1px; left: -1px;
  border-right: none;
  border-top: none;
}
.oi-bracketed--amber::before,
.oi-bracketed--amber::after,
.oi-bracketed--amber > .oi-bracketed-tr,
.oi-bracketed--amber > .oi-bracketed-bl { border-color: var(--oi-amber); }

/* Scanline overlay — ultra-subtle horizontal lines over a surface */
.oi-scanline {
  position: relative;
}
.oi-scanline::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(255, 255, 255, 0.018) 2px 3px
  );
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Dot grid background — use on page-level or card-level surfaces */
.oi-grid-bg {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 0 0;
}

/* Crosshair / reticle marks on container edges */
.oi-reticle {
  position: relative;
}
.oi-reticle::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 8px; height: 1px;
  background: var(--oi-accent);
  transform: translateY(-50%);
}
.oi-reticle::after {
  content: '';
  position: absolute;
  top: 50%; right: 0;
  width: 8px; height: 1px;
  background: var(--oi-accent);
  transform: translateY(-50%);
}

/* HUD tag label — bracketed uppercase pill `[ TAG ]` */
.oi-hud-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--oi-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oi-accent);
  padding: 2px 6px;
  border: 1px solid var(--oi-accent-dim);
  border-radius: 2px;
  background: var(--oi-accent-glow);
  white-space: nowrap;
}
.oi-hud-tag::before { content: '['; color: var(--oi-accent); }
.oi-hud-tag::after  { content: ']'; color: var(--oi-accent); }
.oi-hud-tag--amber  { color: var(--oi-amber); border-color: rgba(255,159,10,0.28); background: rgba(255,159,10,0.1); }
.oi-hud-tag--amber::before, .oi-hud-tag--amber::after { color: var(--oi-amber); }
.oi-hud-tag--green  { color: var(--oi-green); border-color: rgba(50,215,75,0.28); background: rgba(50,215,75,0.1); }
.oi-hud-tag--green::before, .oi-hud-tag--green::after { color: var(--oi-green); }
.oi-hud-tag--red    { color: var(--oi-red);   border-color: rgba(255,69,58,0.28); background: rgba(255,69,58,0.1); }
.oi-hud-tag--red::before, .oi-hud-tag--red::after { color: var(--oi-red); }
.oi-hud-tag--dim    { color: var(--oi-text-3); border-color: var(--oi-line); background: transparent; }
.oi-hud-tag--dim::before, .oi-hud-tag--dim::after { color: var(--oi-text-3); }

/* Ticker — blinking indicator dot next to text */
.oi-ticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--oi-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oi-green);
}
.oi-ticker::before {
  content: '';
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 1px;
  animation: oi-blink 1.2s steps(2) infinite;
}
.oi-ticker--amber { color: var(--oi-amber); }
.oi-ticker--red   { color: var(--oi-red); }
@keyframes oi-blink { 50% { opacity: 0.2; } }

/* Data bar — a horizontal value bar with optional label/value ends */
.oi-bar {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.oi-bar__label {
  color: var(--oi-text-2);
  font-family: var(--oi-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oi-bar__track {
  position: relative;
  height: 6px;
  background: var(--oi-bg-3);
  border-radius: 2px;
  overflow: hidden;
}
.oi-bar__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--oi-accent-dim), var(--oi-accent));
  border-radius: 2px;
  transition: width var(--oi-med) var(--oi-ease);
}
.oi-bar__value {
  text-align: right;
  font-family: var(--oi-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--oi-text);
  letter-spacing: -0.01em;
}

/* Signal dots — a row of small dots, first N filled */
.oi-signal {
  display: inline-flex; gap: 2px; align-items: flex-end;
}
.oi-signal__bar {
  width: 3px;
  background: var(--oi-bg-4);
  border-radius: 1px;
}
.oi-signal__bar:nth-child(1) { height: 4px; }
.oi-signal__bar:nth-child(2) { height: 6px; }
.oi-signal__bar:nth-child(3) { height: 9px; }
.oi-signal__bar:nth-child(4) { height: 12px; }
.oi-signal__bar.is-on { background: var(--oi-green); }

/* HUD accent underline for headers */
.oi-hud-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--oi-accent), transparent 60%);
  margin: 0 0 14px;
}

/* Stat — HUD variant with bracket corners */
.oi-stat--hud {
  position: relative;
  background: var(--oi-bg-2);
  border: 1px solid var(--oi-line);
  padding: 14px 16px 12px;
  border-radius: var(--oi-r-sm);
}
.oi-stat--hud::before,
.oi-stat--hud::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--oi-accent);
  pointer-events: none;
}
.oi-stat--hud::before { top: 4px; left: 4px;  border-right: none; border-bottom: none; }
.oi-stat--hud::after  { bottom: 4px; right: 4px; border-left: none;  border-top: none; }
.oi-stat--hud .oi-stat__label { color: var(--oi-accent); font-family: var(--oi-font-mono); }

/* Code-style readout block — dense mono data */
.oi-readout {
  background: var(--oi-bg-0);
  border: 1px solid var(--oi-line);
  border-radius: var(--oi-r-sm);
  padding: 12px 14px;
  font-family: var(--oi-font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: var(--oi-accent);
  overflow-x: auto;
  white-space: pre;
  position: relative;
}
.oi-readout::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--oi-accent);
  border-radius: 2px 0 0 2px;
}

/* HUD page header — title with thin accent rule under it */
.oi-page-head--hud { padding-bottom: 4px; border-bottom: none; }
.oi-page-head--hud .oi-page-title { font-family: var(--oi-font-mono); letter-spacing: 0.04em; text-transform: uppercase; font-size: 18px; font-weight: 700; }
.oi-page-head--hud .oi-page-sub { font-family: var(--oi-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oi-text-3); }

/* Enhanced tabs for HUD */
.oi-tabs--hud .oi-tabs__item { font-family: var(--oi-font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }

/* Angled-cut corner panel (for a notched mission-card look) */
.oi-notched {
  --oi-notch: 10px;
  clip-path: polygon(
    var(--oi-notch) 0,
    100% 0,
    100% calc(100% - var(--oi-notch)),
    calc(100% - var(--oi-notch)) 100%,
    0 100%,
    0 var(--oi-notch)
  );
}

/* HUD accent bars — vertical, for the left side of panels */
.oi-panel--hud {
  position: relative;
  background: var(--oi-bg-2);
  border: 1px solid var(--oi-line);
  border-left: 2px solid var(--oi-accent);
  border-radius: 0 var(--oi-r-sm) var(--oi-r-sm) 0;
  padding: 14px 16px;
}
.oi-panel--hud.oi-panel--amber { border-left-color: var(--oi-amber); }
.oi-panel--hud.oi-panel--green { border-left-color: var(--oi-green); }
.oi-panel--hud.oi-panel--red   { border-left-color: var(--oi-red); }

/* Responsive collapse for HUD primitives */
@media (max-width: 600px) {
  .oi-bar { grid-template-columns: 90px 1fr 50px; gap: 8px; font-size: 10px; }
  .oi-hud-tag { font-size: 8px; padding: 2px 5px; }
  .oi-page-head--hud .oi-page-title { font-size: 15px; }
}