/* ═══════════════════════════════════════════════════════════════
   MIRA CONSOLE — Canonical theme palette
   Saved 2026-05-04 by Olli. Source-of-truth for all UI colors.
   Inspiration: sunlit Finnish fell landscape.
   See ../THEME.md for usage rules and examples.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --canvas: #F4EFE6;
  --canvas-deep: #E8E0D2;
  --canvas-deeper: #DDD2BE;
  --ink: #1F2A24;
  --ink-muted: #5A655E;
  /* WCAG AA: 4.6:1 against parchment background (was #8B958E = 3.4:1). */
  --ink-faint: #6F7A73;

  --mira-pine: #3E5C4A;
  --mira-pine-soft: #7DA48E;
  /* Darker pine for hover/active states — replaces hardcoded #345040 */
  --mira-pine-deep: #345040;
  --mira-stream: #7BA8C0;
  --mira-amber: #C8975B;

  /* Semantic aliases */
  --accent: var(--mira-pine);
  --accent-deep: var(--mira-pine-deep);
  --accent-warm: #FF9966;
  --bark: #8B7355;

  --success: #5C8C6E;
  --warning: #D4A65A;
  --danger: #B5685E;

  --border: rgba(139, 115, 85, 0.30);
  --border-soft: rgba(139, 115, 85, 0.18);

  /* Surfaces used by chat/konsoli/palvelin/kartta — re-mapped per theme */
  --surface-shadow: rgba(31, 42, 36, 0.04);
  --surface-shadow-mid: rgba(31, 42, 36, 0.08);
  --surface-shadow-strong: rgba(31, 42, 36, 0.18);
  --hover-tint: rgba(139, 115, 85, 0.08);
  --hover-tint-soft: rgba(139, 115, 85, 0.06);
  --grid-line: rgba(139, 115, 85, 0.25);

  --display: 'Fraunces', Georgia, serif;
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Menlo', ui-monospace, monospace;

  /* Spacing scale (used by mieli + future modules).
     NOTE: --space-1..4 values are frozen — .jsx inline styles reference them. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* Typography scale */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 0.9375rem;
  --font-lg: 1.125rem;
  --leading-tight: 1.3;
  --leading-normal: 1.5;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Elevation — derived from --surface-shadow*, adapts per theme */
  --shadow-sm: 0 1px 2px var(--surface-shadow-mid);
  --shadow-md: 0 4px 14px var(--surface-shadow-mid);

  /* Accent tints — subtle backgrounds/badges derived from accent colors */
  --tint-pine: rgba(62, 92, 74, 0.10);
  --tint-success: rgba(92, 140, 110, 0.12);
  --tint-warning: rgba(212, 166, 90, 0.14);
  --tint-danger: rgba(181, 104, 94, 0.12);
  --tint-amber: rgba(200, 151, 91, 0.14);
  --tint-stream: rgba(123, 168, 192, 0.16);
  --tint-warm: rgba(255, 153, 102, 0.14);

  /* Focus/glow rings derived from accent colors */
  --ring-pine: rgba(62, 92, 74, 0.22);
  --ring-success: rgba(92, 140, 110, 0.22);
  --ring-danger: rgba(181, 104, 94, 0.22);

  /* Channel/source category hues (aivot channel badges, source tags) */
  --ch-voice: #7850B4;
  --ch-voice-tint: rgba(120, 80, 180, 0.15);
  --ch-telegram: #3C8CDC;
  --ch-telegram-tint: rgba(60, 140, 220, 0.15);
  --ch-whatsapp: #22965A;
  --ch-whatsapp-tint: rgba(34, 150, 90, 0.15);
  --ch-slack: #B4508C;
  --ch-slack-tint: rgba(180, 80, 140, 0.15);
  --ch-email: #DC8C3C;
  --ch-email-tint: rgba(220, 140, 60, 0.15);

  /* Text/icons placed on photos or dark scrims — theme-invariant on purpose */
  --ink-on-dark: #F4EFE6;

  /* Mieli-näkymän semanttiset tokenit */
  --mind-status-hold: var(--mira-amber);
  --mind-status-return: var(--mira-pine);
  --mind-status-challenge: var(--danger);
  --mind-status-surface: var(--ink-faint);
  --mind-quote-border: var(--border);
  --mind-rail-bg: var(--canvas-deep);
  --mind-meta-fg: var(--ink-faint);
}

[data-theme="dark"] {
  --canvas: #1A1F1B;
  --canvas-deep: #232A24;
  --canvas-deeper: #2D352E;
  --ink: #E8E0D2;
  --ink-muted: #B8BFB5;
  --ink-faint: #7B857D;
  --bark: #A89070;
  --border: rgba(220, 210, 195, 0.20);
  --border-soft: rgba(220, 210, 195, 0.10);

  /* Dark-mode-friendly tints — light-on-dark instead of dark-on-light */
  --surface-shadow: rgba(0, 0, 0, 0.28);
  --surface-shadow-mid: rgba(0, 0, 0, 0.40);
  --surface-shadow-strong: rgba(0, 0, 0, 0.55);
  --hover-tint: rgba(220, 210, 195, 0.08);
  --hover-tint-soft: rgba(220, 210, 195, 0.05);
  --grid-line: rgba(220, 210, 195, 0.10);

  /* Pine-soft is a light green — keep readable on dark */
  --mira-pine-soft: #9BC2A8;
  --accent: var(--mira-pine-soft);
  /* Dark mode: hover/active state slightly brighter (inverse of light) */
  --mira-pine-deep: #B0D6BC;
  --accent-deep: var(--mira-pine-deep);

  /* Accent tints + rings — light-on-dark variants */
  --tint-pine: rgba(155, 194, 168, 0.12);
  --tint-success: rgba(92, 140, 110, 0.20);
  --tint-warning: rgba(212, 166, 90, 0.20);
  --tint-danger: rgba(181, 104, 94, 0.22);
  --tint-amber: rgba(200, 151, 91, 0.20);
  --tint-stream: rgba(123, 168, 192, 0.20);
  --tint-warm: rgba(255, 153, 102, 0.18);
  --ring-pine: rgba(155, 194, 168, 0.32);
  --ring-success: rgba(92, 140, 110, 0.35);
  --ring-danger: rgba(181, 104, 94, 0.35);

  /* Channel hues brightened for dark canvas */
  --ch-voice: #A98BE0;
  --ch-voice-tint: rgba(169, 139, 224, 0.20);
  --ch-telegram: #6FB3EC;
  --ch-telegram-tint: rgba(111, 179, 236, 0.20);
  --ch-whatsapp: #4CC088;
  --ch-whatsapp-tint: rgba(76, 192, 136, 0.20);
  --ch-slack: #D07BAE;
  --ch-slack-tint: rgba(208, 123, 174, 0.20);
  --ch-email: #EBA55C;
  --ch-email-tint: rgba(235, 165, 92, 0.20);
}

/* ── Matrix / Operator Grid -teema (opt-in, Asetukset → Ulkoasu) ───────
   Tweak 03 (2026-09-19): lähes musta vihertävä pohja, HILLITTY
   vihertävä harmaa-lime (#9FDB9F, flat ei hehkuva — ei neon-vihreää joka
   sattuu silmiin pitkissä teksteissä), ohuet 1px lime-reunat paneeleilla,
   mono-fontti nav/napit/otsikot/data — pitkä proosa sans.
   Vain token-overridet samalla mallilla kuin [data-theme="dark"] —
   spacing/radius/typography-scale periytyvät :rootista, alusta-agnostinen.
   24.7. Olli: neon (#4AFF4A/#00FF41) himmennetty luettavaksi; rail-badge
   punainen → vihreä (styles.css). */
[data-theme="matrix"] {
  --canvas: #070B07;
  --canvas-deep: #0B130C;
  --canvas-deeper: #142316;
  /* Lukupinnan teksti on neutraali vaalea. Lime kuuluu chromeen ja tilaan. */
  --ink: #E5EFE5;
  --ink-muted: #A9BDAA;
  --ink-faint: #7E927F;

  /* Hillitty aksentti + varjostukset */
  --mira-pine: #2FD964;
  --mira-pine-soft: #6FBF6F;
  /* Hover/aktiviteetti vaaleampana (dark-teeman malli) */
  --mira-pine-deep: #4FBF5F;

  /* Semantic aliases */
  --accent: var(--mira-pine);
  --accent-deep: var(--mira-pine-deep);
  --accent-warm: #A8C86A;
  --bark: #57785A;

  /* Matrix-lokaalit: otsikoiden lime + aktiivitilan
     tummanvihreä täyttö/reuna (eDEX MAIN SHELL -malli).
     24.7. Imagine-renderit: otsikot kirkkaammaksi (#B4FFB8). */
  --mx-heading: #B4FFB8;
  --mx-active-fill: #0E2A12;
  --mx-active-border: rgba(159, 219, 159, 0.45);

  --success: #4FE07A;
  --warning: #D7E35C;
  --danger: #FF6B5E;

  /* Ohuet paneelireunat — hillitty lime alfa (eDEX: joka paneeli kehystetty) */
  --border: rgba(47, 217, 100, 0.50);
  --border-soft: rgba(47, 217, 100, 0.29);

  /* Surfaces — mustat varjot kuten dark-teemassa (näkymättömiä mustalla) */
  --surface-shadow: rgba(0, 0, 0, 0.28);
  --surface-shadow-mid: rgba(0, 0, 0, 0.40);
  --surface-shadow-strong: rgba(0, 0, 0, 0.55);
  --hover-tint: rgba(47, 217, 100, 0.10);
  --hover-tint-soft: rgba(47, 217, 100, 0.06);
  --grid-line: rgba(47, 217, 100, 0.22);

  /* Monospace-vivahde otsikoissa (--display) — body-tekstin --ui ei muutu */
  --display: 'Menlo', ui-monospace, monospace;

  /* Accent tints — vihreäsävyiset light-on-dark -variantit */
  --tint-pine: rgba(47, 217, 100, 0.12);
  --tint-success: rgba(79, 224, 122, 0.16);
  --tint-warning: rgba(215, 227, 92, 0.16);
  --tint-danger: rgba(255, 107, 94, 0.16);
  --tint-amber: rgba(168, 200, 106, 0.14);
  --tint-stream: rgba(0, 229, 160, 0.16);
  --tint-warm: rgba(168, 200, 106, 0.16);

  /* Focus rings (flat rengas, ei blur-hehkua) */
  --ring-pine: rgba(47, 217, 100, 0.35);
  --ring-success: rgba(79, 224, 122, 0.35);
  --ring-danger: rgba(255, 107, 94, 0.35);

  /* Kanavat vihreän skaalalla, erotettavissa sävyssä/kirkkaudessa:
     voice (hillitty, ei neon #00FF41) → minttu → omenanvihreä → smaragdi → keltavihreä
     I-11: ainoa jäänne-neon himmennetty eDEX v2 -palettiin. */
  --ch-voice: #5EDC72;
  --ch-voice-tint: rgba(94, 220, 114, 0.16);
  --ch-telegram: #00E5A0;
  --ch-telegram-tint: rgba(0, 229, 160, 0.16);
  --ch-whatsapp: #A4F43C;
  --ch-whatsapp-tint: rgba(164, 244, 60, 0.16);
  --ch-slack: #2FBF71;
  --ch-slack-tint: rgba(47, 191, 113, 0.18);
  --ch-email: #D7E35C;
  --ch-email-tint: rgba(215, 227, 92, 0.16);
}

/* eDEX-otsikot: vielä kirkkaampi lime. :where() = 0-spesifisyys, joten
   komponenttien omat värisäännöt (esim. h3-labelit ink-faintilla) voittavat. */
[data-theme="matrix"] :where(h1, h2) {
  color: var(--mx-heading);
}

/* eDEX-mono: otsikot, nav, napit, tabit, status, tagit/badget, data-labelit.
   Kellot/numerot/data-arvot jo --mono/--display-tokenien tai .mono-luokan
   kautta. Noottien body ja pitkä proosa pysyvät --ui:lla (sans).
   :where() = 0-spesifisyys: komponenttien omat fonttisäännöt voittavat. */
[data-theme="matrix"] :where(h1, h2, h3) {
  font-family: var(--display);
}
[data-theme="matrix"] button,
[data-theme="matrix"] .rail-tooltip,
[data-theme="matrix"] .rail-mobile-label,
[data-theme="matrix"] .rail-section-label,
[data-theme="matrix"] .drawer-item-label,
[data-theme="matrix"] .drawer-section-title,
[data-theme="matrix"] .status-state,
[data-theme="matrix"] .chip,
[data-theme="matrix"] .badge,
[data-theme="matrix"] .conv-source-badge,
[data-theme="matrix"] .metric-label {
  font-family: var(--mono);
}

/* eDEX MAIN SHELL -aktiivitila: tummanvihreä täyttö + kirkas lime-teksti +
   ohut reuna. Flat — ei glow/blur-hehkua missään.
   aivot-tab: reuna inset-box-shadow'lla (ei border-muutosta) — base-tabin
   2px underline-malli + margin-bottom:-1px pysyy, ei layout-shiftiä
   (Grok delta-review 2026-07-23). */
[data-theme="matrix"] .aivot-tab.is-active {
  background: var(--mx-active-fill);
  color: var(--ink);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--mx-active-border);
}
[data-theme="matrix"] .rail-btn[aria-current="page"] {
  background: var(--mx-active-fill);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--mx-active-border);
}

/* Operator Grid: ruudukko on rakenne, ei efekti. CRT-scanlinet ja muu
   elokuvarekvisiitta eivät kuulu lukupintaan. */
[data-theme="matrix"] body::before { content: none; }
[data-theme="matrix"] body::after {
  top: 0;
  bottom: 0;
  height: auto;
  opacity: .18;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
}
[data-theme="matrix"] .rail,
[data-theme="matrix"] .status-header {
  background-image: linear-gradient(90deg, rgba(47, 217, 100, .045), transparent 16px);
}
[data-theme="matrix"] :where(.card, .panel, .metric, .metric-tile, .aivot-panel) {
  /* Peruskomponenttien säännöt latautuvat theme.css:n jälkeen. !important
     pitää Operator Gridin 0 px -muodon myös niiden radius-tokenien yli. */
  border-radius: 0 !important;
}
[data-theme="matrix"] button,
[data-theme="matrix"] input,
[data-theme="matrix"] select,
[data-theme="matrix"] textarea {
  border-radius: 0;
}
[data-theme="matrix"] .app :where(.rail-logo, .status-avatar, .chat-hero-avatar, .msg-avatar, .chip, .badge, .toast, dialog) {
  border-radius: 0 !important;
}
[data-theme="matrix"] .rail-logo::after,
[data-theme="matrix"] .status-avatar::after {
  border-radius: 0;
}
/* Operator Gridissä käyttöliittymän geometria on aina kulmikas. Yleissääntö
   kattaa myös näkymäkohtaiset komponentit ja pseudo-elementtien kehät. */
[data-theme="matrix"] .app *,
[data-theme="matrix"] .app *::before,
[data-theme="matrix"] .app *::after {
  border-radius: 0 !important;
}
[data-theme="matrix"] input[type="checkbox"] {
  border-radius: 0 !important;
}
[data-theme="matrix"] .rail-btn[aria-current="page"] .rail-tooltip {
  color: var(--ink);
}
[data-theme="matrix"] .conv-tab-btn.is-active,
[data-theme="matrix"] .btn-mini.is-active {
  background: var(--mx-active-fill);
  border-color: var(--mx-active-border);
  color: var(--ink);
}
/* Ensisijainen asetusnappi: flat lime-täyttö + tumma teksti (ei hehkua).
   Border eksplisiittisesti 1px solid — .aset-btn:llä ei ole perustyylejä,
   joten pelkkä border-color jättäisi selaimen default-outset-reunan. */
[data-theme="matrix"] .aset-btn:not(.aset-btn-secondary) {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--canvas);
}

/* Avatar kuuluu samaan kulmikkaaseen järjestelmään. Ei glow'ta. */
[data-theme="matrix"] .chat-hero-avatar,
[data-theme="matrix"] .status-avatar,
[data-theme="matrix"] .msg-avatar {
  border: 2px solid var(--mira-pine);
  box-shadow: none;
}

/* Matrix on konsolin oletusteema — nämä vastaavat styles.css:n dark-sääntöjä,
   joita matrix ei muutoin peri (ne on scopettu [data-theme="dark"]-selektoriin):
   1) color-scheme: dark — ilman tätä :rootin color-scheme: light jäisi voimaan
      ja natiivit kontrollit (checkbox, radio, select-nuoli, number-spinner)
      renderöityisivät vaaleina lähes mustalla pohjalla.
   2) range-track — Firefox/WebKit eivät tummenna trackkia pelkällä
      color-schemellä (styles.css:849-852, sama peruste kuin darkilla).
   3) .chip-tausta — chip jäi "unthemed patch" -näköiseksi kortin päällä
      (styles.css:769-775, sama peruste kuin darkilla). */
[data-theme="matrix"] { color-scheme: dark; }
[data-theme="matrix"] input[type="range"]::-moz-range-track { background: var(--canvas-deeper); }
[data-theme="matrix"] input[type="range"]::-webkit-slider-runnable-track { background: var(--canvas-deeper); }
[data-theme="matrix"] .chip { background: var(--canvas-deeper); }

/* Tweak 04 — chatin aktiivinen kirjoitustila. Selain hallitsee tekstialueen
   todellista caretia; tämä tekee siitä Matrix-limen ja jättää fokuksen
   kulmikkaaksi. Mahdollinen custom-caret vaatii myöhemmin contenteditable-
   editorin, ei textarea-pseudoelementtiä joka ei seuraisi kirjoituskohtaa. */
[data-theme="matrix"] .composer {
  border-radius: 0;
}
[data-theme="matrix"] .composer-input {
  font-family: var(--mono);
  caret-color: var(--accent);
}
[data-theme="matrix"] .composer:focus-within {
  box-shadow: inset 3px 0 0 var(--accent);
}