/* BASE.CSS — extracted from agent_vocabulary.html (Phase 1)
   See docs/data-model.md for component ownership.

   Phase-8 §white-on-white bug fix: removed the phase-1 wrapper residue
   (`<!DOCTYPE html>` ... `<style>` opening tag) that had survived the
   monolith split. That wrapper lived at the top of this file as if it
   were CSS — anything stricter than chromium's lenient CSS parser
   (stripers / linters / strict cache-busted reloads) would silently
   invalidate the `:root { ... }` token block, leaving --ink/--surface
   undefined. In the degraded state `var(--surface)` and `var(--ink)`
   resolved to user-agent defaults, making `.node-bg` fills transparent
   and `.node-label` text default-black-on-dark-bg → "white-on-white".
   Robustness wipe: file is pure CSS from line 1, indented consistently. */

/* ============================================================================
   Phase-9: DARK-MODE-ONLY palette. Light theme has been removed;
       the :root block is the single source of truth for all theme tokens.
       WCAG AA thresholds (informational): 4.5:1 normal body text,
       3.0:1 large bold (≥14px+700) or graphical UI.
       Cluster palette vars are graphical-only by design (SVG strokes,
       gradients, decorative elements). For text-on-colored-bg where AA
       body text is required, use the --chip-* palette below.
       ============================================================================ */
    :root {
      --bg: #1a1a22;              /* LUM 0.0107 — page surface */
      --surface: #24242e;         /* LUM 0.0183 — raised card surface */
      --border: #3a3a45;          /* LUM 0.0436 — hairline border */
      --border-strong: #555568;   /* LUM 0.0943 — emphasized border */
      --ink: #e0e0e0;             /* 13.10:1 on --bg — primary text */
      --ink-dim: #9a9a9a;         /*  6.15:1 on --bg — dimmed text (same as --muted, used as interaction dim) */
      --ink-faint: #6b6b72;       /*  3.50:1 on --bg — very faint labels (AA-large only) */
      --muted: #9a9a9a;           /*  6.15:1 on --bg — secondary text */
      --soft: #2a2a36;            /* LUM 0.0241 — recessed surface (badges, soft-chips) */
      --paper: #ffffff;           /* modal card bg / light text — high contrast on dark */
      --surface-2: #2a2a36;       /* subtle raised surface (same as --soft) */

      --pre-action:  #7b8df0;     /* graphical-only — white-on-bg fails AA body (3.04:1) */
      --async:       #4dc4a8;     /* graphical-only — white-on-bg fails AA body (2.15:1) */
      --validation:  #d4a04a;     /* graphical-only — white-on-bg fails AA body (2.36:1) */
      --recovery:    #d47288;     /* graphical-only — white-on-bg fails AA body (3.20:1) */

      /* Relationship palette — graphical-only (SVG lines, edge labels). */
      --rel-causes:     #e05545;
      --rel-blocks:     #b04a3d;
      --rel-leads-to:   #4a80c8;
      --rel-informs:    #8a8aa0;
      --rel-requires:   #9a5ab5;
      --rel-enables:    #70aa4e;
      --rel-pairs-with: #c05592;
      --rel-remedies:   #3a9890;

      /* ---- Cross-theme-stable chip palette (AA-safe for white-on-bg).
         Use for any UI surface with white text on colored background.
         Distinct from cluster palette which is graphical-only. */
      --chip-mint:    #1f7a72; /* 5.14:1 white-on-bg */
      --chip-navy:    #3a4ea8; /* 7.34:1 white-on-bg */
      --chip-amber:   #8a5a1f; /* 5.89:1 white-on-bg */
      --chip-red:     #922b21; /* 8.11:1 white-on-bg */

      /* ---- Dormant group colors (activated Phase 9).
         Previously placeholder — now assigned to concepts in ontology.js. */
      --planning:        #5ec0e0;
      --security:        #c455c4;
      --reasoning:       #d4c44a;
      --observability:   #76b6c4;

      /* ---- Scale palette (difficulty / status — NOT group identity).
         Decoupled from --chip-* so a navy pill means "pre-action group"
         and a copper pill means "intermediate difficulty" without semantic
         collision. All pass AA (≥4.5:1 white-on-bg). */
      --scale-low:    #1f6b52; /*  6.36:1 white-on-bg — beginner / easy */
      --scale-mid:    #8a5520; /*  6.21:1 white-on-bg — intermediate */
      --scale-high:   #a04040; /*  6.52:1 white-on-bg — advanced / hard */
    }

    .legend { background: rgba(36,36,46,0.92); }
    .build-mode .graph-pane::after { background: rgba(36,36,46,0.92); }
    .node-bg { fill: var(--surface); }
    .preview-box { background: #0d0d14; color: #c8c8d0; }
    .export-toast.success { background: #1a3a24; color: #8ad4a0; border-color: #2a5a34; }
    .export-toast.error { background: #3a1a20; color: #d48a90; border-color: #5a2a30; }
    .topbar input[type="search"]:focus { box-shadow: 0 0 0 3px rgba(224,224,224,0.10); }
    .bsection-body textarea:focus { box-shadow: 0 0 0 3px rgba(224,224,224,0.10); }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--ink);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* Phase-8 §6.4 offline indicator.
       Fixed-top banner above the topbar (z-index 10000). Hidden by [hidden]
       attribute by default; flips visible when navigator.onLine === false.
       Reuses --recovery palette so it harmonizes with the cluster colors
       already on the topbar. role="status" + aria-live="polite" on the
       element itself (index.html) avoids focus stealing and announces only
       the text change. */
    .offline-banner {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 10000;
      background: var(--recovery);
      color: var(--bg);
      text-align: center;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }



/* ============================================================================
   Phase-7 a11y polish — quick wins #1 + #2: skip-link + :focus-visible ring.
   Both are project-wide CSS; no JS, no HTML structure changes.
   - Skip-link resolves WCAG 2.4.1 (Bypass Blocks, Level A): first Tab keystroke
     lands on the link, Enter jumps to <main id="main-content">. Hidden via
     position: absolute + top: -40px + large z-index so it doesn't take layout
     space when unfocused. Visible-when-focused via :focus-visible rule (rather
     than :focus) so the mouse-click path doesn't show it accidentally.
   - :focus-visible resolves WCAG 2.4.7 (Focus Visible, Level AA). The selector
     matches ONLY keyboard nav (Tab key) per browser heuristics; mouse-clicks
     do NOT trigger the ring so visual UI stays quiet for mouse users. Browser
     support: Chrome 86+, Firefox 85+, Safari 15.4+, Edge 86+.
   Cluster palette --pre-action is reused as the ring color so keyboard focus
   stays on-brand with the cluster color the graph already uses.
   ============================================================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 9999;
  background: var(--ink);
  color: var(--surface);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  /* Reviewer-pass fix: zero-duration reveal -- the 0.18s slide was distracting
     for keyboard users. Keyboard nav should feel snappy. */
  transition: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
}
*:focus-visible {
  /* Reviewer-pass fix: removed `border-radius: 3px`. The CSS outline does NOT
     honour border-radius on inline / replaced elements; leaving the line in
     produced visual noise without behavior change. Outline + offset is the
     canonical focus-visible ring per WCAG 2.4.7 (Focus Visible, Level AA). */
  outline: 2px solid var(--pre-action);
  outline-offset: 2px;
}

/* Phase-8 §A: OB listbox row focus-visible — slim 2-ring lift so the focused
   row reads distinctly from hovered rows. Works alongside the global
   *:focus-visible outline above (which OB rows also inherit). */
.browser-row:focus-visible {
  box-shadow: 0 0 0 1px var(--surface), 0 0 0 3px var(--pre-action);
  outline: none; /* override the *:focus-visible outline with the 2-ring lift */
}
