/* War Room — Oxide-language foundation
 * Cool near-black canvas, mint accent, hairlines, IBM Plex Mono.
 * Dark only. Chart series colors live in JS and stay semantic.
 */

:root {
  color-scheme: dark;

  /* Global UI density — 100% browser zoom is the designed size */
  --ui-scale: 1;

  /* ── Surfaces (Oxide console) ─────────────────────────── */
  --c-bg: #0b0e12;
  --c-surface: #131519;
  --c-surface-2: #181a1d;
  --c-surface-3: #1f2124;
  --c-elevated: #1f2124;
  --c-hover: #1f2124;

  /* ── Borders ──────────────────────────────────────────── */
  --c-border: #303235;
  --c-border-strong: #3a3c3f;
  --c-border-soft: rgba(255, 255, 255, 0.05);

  /* ── Text ─────────────────────────────────────────────── */
  --c-text: #dedede;
  --c-text-2: #bababb;
  --c-text-3: #818284;
  --c-text-inv: #0b0e12;

  /* ── Accent (Oxide mint) ──────────────────────────────── */
  --c-accent: #00d892;
  --c-accent-hover: #37e6a8;
  --c-accent-soft: rgba(0, 216, 146, 0.12);
  --c-accent-ring: rgba(0, 216, 146, 0.35);
  --c-accent-fill: #002923;
  --c-accent-fill-hover: #003e32;

  /* ── Δ glyph (compare mark) ───────────────────────────── */
  --c-delta: oklch(0.74 0.17 305);
  --delta-mark-size: 1.7rem; /* lg — hero Δ in chrome & chart headings */
  --delta-col-size: var(--t-16); /* md — column-header Δ glyph */
  --delta-value-size: var(--t-14); /* sm — signed Δ numbers in cells */

  /* ── Status (data, not chrome) ────────────────────────── */
  --c-pos: #00d892;
  --c-pos-soft: rgba(0, 216, 146, 0.12);
  --c-pos-border: rgba(0, 216, 146, 0.35);
  --c-neg: #f0605d;
  --c-neg-soft: rgba(240, 96, 93, 0.12);
  --c-neg-border: rgba(240, 96, 93, 0.35);
  --c-warn: #eab308;
  --c-warn-soft: rgba(234, 179, 8, 0.12);
  --c-warn-border: rgba(234, 179, 8, 0.35);
  --c-info: #3d9cf5;
  --c-info-soft: rgba(61, 156, 245, 0.12);
  --c-info-border: rgba(61, 156, 245, 0.35);

  /* ── NOW scrape badge — Oxide primary (teal fill + mint) ─ */
  --lane-today: #002923;
  --lane-today-soft: rgba(0, 41, 35, 0.85);
  --lane-today-text: #00d892;
  --lane-today-border: #00d892;

  /* ── RANGE / TARGET / PROPERTIES — gray hairline; mint when open ─ */
  --lane-horizon: transparent;
  --lane-horizon-soft: var(--c-hover);
  --lane-horizon-text: var(--c-text);
  --lane-horizon-border: var(--c-border);

  --lane-target: var(--c-accent);
  --lane-target-soft: var(--c-accent-soft);
  --lane-target-text: var(--c-accent);
  --lane-target-border: var(--c-accent);

  --lane-selected: transparent;
  --lane-selected-text: var(--c-text);
  --lane-selected-border: var(--c-border);

  --lane-mark-text-shadow: none;

  /* ── Space scale ──────────────────────────────────────── */
  --s-1: calc(4px * var(--ui-scale));
  --s-2: calc(8px * var(--ui-scale));
  --s-3: calc(12px * var(--ui-scale));
  --s-4: calc(16px * var(--ui-scale));
  --s-5: calc(20px * var(--ui-scale));
  --s-6: calc(24px * var(--ui-scale));
  --s-7: calc(32px * var(--ui-scale));
  --s-8: calc(40px * var(--ui-scale));

  /* ── Radius (Oxide console 2px) ───────────────────────── */
  --r-sm: 2px;
  --r-md: 2px;
  --r-lg: 2px;
  --r-xl: 2px;
  --r-pill: 2px;

  /* ── Elevation: hairline, not drop shadow ─────────────── */
  --sh-hairline: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --sh-1: var(--sh-hairline);
  --sh-2: var(--sh-hairline);
  --sh-3: 0 8px 24px rgba(0, 0, 0, 0.42);

  --ease-oxide: 100ms ease-out;
  --ease-expand: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expand-fade: 1s ease;

  /* ── Type ─────────────────────────────────────────────── */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: var(--font-mono);

  --t-10: calc(10px * var(--ui-scale));
  --t-11: calc(11px * var(--ui-scale));
  --t-12: calc(12px * var(--ui-scale));
  --t-13: calc(13px * var(--ui-scale));
  --t-14: calc(14px * var(--ui-scale));
  --t-16: calc(16px * var(--ui-scale));
  --t-20: calc(16px * var(--ui-scale));
  --t-26: calc(20px * var(--ui-scale));
  --t-32: calc(26px * var(--ui-scale));

  --t-label-size: var(--t-11);
  --t-label-weight: 400;
  --t-label-tracking: 0.04em;

  /* ── Layout chrome ────────────────────────────────────── */
  --app-header-h: 36px;
  --room-filter-panel-width: calc(360px * 0.88 * 0.75 * 1.15 * var(--ui-scale));
  --room-filter-panel-collapsed-width: calc(22px * var(--ui-scale));
  --room-filter-panel-inset-x: calc(10px * 0.88 * 0.75 * var(--ui-scale));
  /* Same strip as room ] checkmark rails — overlay scrollbars live here */
  --room-filter-color-gutter: var(--s-3);
  --control-h: calc(32px * var(--ui-scale));
  --chart-portfolio-h: 40vh;

  --prop-chrome-h: 32px;
  --prop-chrome-pad-y: 1px;
  --prop-chrome-pad-x: 8px;
  --prop-chrome-label-h: 10px;
  --prop-chrome-value-h: 18px;
  --prop-chrome-label-size: var(--t-10);
  --prop-chrome-value-size: 12px;
  --prop-chrome-radius: var(--r-sm);
  --prop-chrome-border: 1px solid var(--c-border);
  --prop-chrome-bg: transparent;
  --prop-chrome-bg-hover: transparent;
  --prop-chrome-bg-active: var(--sel-bg-active);
  --prop-chrome-border-active: var(--sel-border-active);

  /* Selectable chrome: rest / hover / selected / selected+hover — identical everywhere */
  --sel-border: 1px solid transparent;
  --sel-border-hover: 1px solid var(--c-accent);
  --sel-border-active: 1px solid transparent;
  --sel-bg-active: color-mix(in srgb, var(--c-accent) 22%, var(--c-surface-3));
  --sel-fg: var(--c-text-2);
  --sel-fg-hover: var(--c-text);
  --sel-fg-active: var(--c-accent);

  /* Shared day-column plot (JS publishes px) */
  --day-plot-left: 2.5rem;
  --day-plot-right: 0px;

  /* ── Chart chrome ─────────────────────────────────────── */
  --chart-bg: var(--c-bg);
  --chart-tick: var(--c-text-3);
  --chart-title: var(--c-text);
  --chart-grid: rgba(48, 50, 53, 0.45);
  --chart-grid-daily: rgba(48, 50, 53, 0.22);
  --chart-focus: var(--c-accent);

  /* ── LOS availability strip density (monochrome) ─────── */
  --los-fill-min: var(--chart-bg);
  --los-fill-max: var(--c-surface-3);

  /* ── Legacy aliases ───────────────────────────────────── */
  --x-bg-primary: var(--c-bg);
  --x-bg-secondary: var(--c-surface);
  --x-bg-elevated: var(--c-surface-2);
  --x-text-primary: var(--c-text);
  --x-text-secondary: var(--c-text-2);
  --x-text-muted: var(--c-text-3);
  --x-border: var(--c-border);
  --x-border-light: var(--c-border-strong);
  --x-accent: var(--c-accent);
  --x-accent-hover: var(--c-accent-hover);
  --x-success: var(--c-pos);
  --x-error: var(--c-neg);
  --x-warning: var(--c-warn);

  --ui-font: var(--font-sans);
  --ui-font-size: var(--t-12);
  --ui-font-size-sm: var(--t-12);
  --ui-radius: var(--r-sm);
  --ui-radius-sm: var(--r-sm);
  --ui-radius-pill: var(--r-sm);
  --ui-gap: var(--s-3);
  --ui-border-color: var(--c-border);
  --ui-border: 1px solid var(--c-border);
  --ui-page-bg: var(--c-bg);
  --ui-bg: var(--c-surface);
  --ui-bg-muted: var(--c-surface);
  --ui-bg-subtle: var(--c-surface-2);
  --ui-bg-elevated: var(--c-surface-2);
  --ui-surface: var(--c-surface);
  --ui-text: var(--c-text);
  --ui-text-muted: var(--c-text-2);
  --ui-text-dim: var(--c-text-3);
  --ui-primary: var(--c-accent);
  --ui-primary-hover: var(--c-accent-hover);
  --ui-primary-soft: var(--c-accent-soft);
  --ui-link: var(--c-accent);
  --ui-danger: var(--c-neg);
  --ui-control-h: var(--control-h);
  --ui-shadow: var(--sh-1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--t-12);
  line-height: 1.45;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  color: var(--c-text);
  font-weight: 500;
  line-height: 1.25;
}

h1, .text-h1 { font-size: var(--t-32); font-weight: 500; }
h2, .text-h2 { font-size: var(--t-26); font-weight: 500; }
h3, .text-h3 { font-size: var(--t-20); font-weight: 500; }
h4 { font-size: var(--t-16); }
h5 { font-size: var(--t-14); }
h6 { font-size: var(--t-13); }

p {
  margin: 0 0 1em;
  color: var(--c-text-2);
  max-width: 70ch;
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover {
  color: var(--c-accent-hover);
  text-decoration: underline;
}

strong, b {
  font-weight: 500;
  color: var(--c-text);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--c-accent-ring);
  outline-offset: 2px;
}

::selection {
  background: var(--c-accent-fill);
  color: var(--c-accent);
}

/* Utility type */
.text-body { font-size: var(--t-14); font-weight: 400; line-height: 1.45; }
.text-secondary { font-size: var(--t-13); color: var(--c-text-2); }
.text-muted { font-size: var(--t-12); color: var(--c-text-3); }
.text-button {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  font-weight: 400;
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  line-height: 1;
}
.text-label {
  font-family: var(--font-mono);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  color: var(--c-text-3);
  font-feature-settings: "calt" 0;
}
.text-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "calt" 0;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (max-width: 900px) {
  :root {
    --app-header-h: calc(88px * var(--ui-scale));
  }
}