/* ONTOLOGY-BROWSER.CSS — Phase 4 modal styles
   Modal lives at <dialog id="ontology-browser"> with three regions:
     1. header (search + count + close)
     2. body (filter chips + row list + preview panel)
     3. footer (mode toggle [(a)/(b)] + summary + reset)
   See js/ui/ontology-browser.js (NEW slice #18) for the consumers.
   Dark-mode rules piggyback on [data-theme="dark"] selectors from base.css.

   Phase 4 review-fix: .row-toggle.on (the "On graph" state) now uses --async
   (positive green) instead of --recovery (which read as warning). Visual
   semantics: green = active/positive, blue = neutral/clickable. */

#ontology-browser {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
  padding: 0;
  width: min(1200px, 96vw);
  height: min(820px, 92vh);
  max-width: 96vw;
  max-height: 92vh;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
  /* ---- Phase-8 §6.10 closeout: native <dialog> defaults to display:none
     when the [open] attribute is absent. The original Phase-4 setup
     forced `display: flex` unconditionally on this rule, which makes the
     dialog occupy layout space even when closed -- 1200×699 phantom box.
     The hidden dialog overlapped the main graph pane, the SVG g layers,
     the dialog::backdrop itself, and the term-detail card -- a major
     text/UI-element overlap reported by users. Fix: scope the layout
     + resize-mode props behind `#ontology-browser[open]` so they only
     apply after showModal()/when the [open] attribute is set. The
     cosmetic props (border, bg, width-clamps) stay on the base rule so
     the dialog renders the same when opened. ---- */
}
/* When the dialog is open: enable flex column + the §6.7 resize affordance */
#ontology-browser[open] {
  display: flex;
  flex-direction: column;
  /* ---- Phase-8 §6.7: user-resizable OB. `resize` requires computed
     overflow ≠ visible; we keep the scroll fallback on if the inner
     grid ever overflows at a smaller user's-reshape. Min dimensions
     prevent accidental micro-resize. Browser support: Chrome 99+,
     FX 101+, Safari 16.5+. ---- */
  resize: both;
  min-width: 720px;
  min-height: 480px;
  overflow: auto;
}
#ontology-browser > .ob-header,
#ontology-browser > .ob-filters,
#ontology-browser > .ob-footer { flex-shrink: 0; }
#ontology-browser .ob-body { flex: 1; min-height: 0; }
#ontology-browser::backdrop {
  background: rgba(20, 20, 30, 0.45);
  backdrop-filter: blur(2px);
}

/* ---- Header ---- */
.ob-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.ob-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ob-header .ob-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.ob-header input[type="search"] {
  flex: 1;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  outline: none;
}
.ob-header input[type="search"]:focus {
  box-shadow: 0 0 0 3px rgba(91, 109, 214, 0.20);
}
.ob-close {
  /* ---- Phase-8 §6.7: make the close button visually discoverable.
     The previous styling was transparent/muted and only readable via
     hover (which mouse-only users may miss). Added a 1px border-strong
     outline so the button reads as actionable at all times; bumped
     font-size so the glyph is large enough to scan; kept the existing
     hover state for Fitts's-law precision feedback. ---- */
  border: 1px solid var(--border-strong);
  background: var(--bg);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ob-close:hover {
  /* Phase-8 §6.7 (round 2): hardcoded literal instead of var(--recovery).
     Dark-mode --recovery (#d47288) + white = 3.0:1 (borderline AA).
     var(--chip-red) + white = ~11:1 (AAA). Stable across themes. */
  background: var(--chip-red);
  color: white;
  border-color: var(--chip-red);
}
.ob-close:focus-visible {
  outline: 2px solid var(--pre-action);
  outline-offset: 2px;
}

/* ---- Filters row ---- */
.ob-filters {
  padding: 10px 18px 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.ob-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.ob-filter-row .filter-label {
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 11px;
}
.ob-filter-row .chip {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ob-filter-row .chip:hover { background: var(--soft); }
.ob-filter-row .chip.off {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
  text-decoration: line-through;
  opacity: 0.7;
}
.ob-filter-row .chip.on {
  background: var(--soft);
  border-color: var(--ink);
  font-weight: 500;
}
.ob-filter-row .chip-tag { font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; }
.ob-filter-row input[type="range"] {
  width: 140px;
  vertical-align: middle;
  accent-color: var(--pre-action);
}
.ob-reset {
  align-self: flex-end;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}
.ob-reset:hover { color: var(--ink); }

/* ---- Body: row list + preview side-by-side ---- */
.ob-body {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.ob-rows {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.ob-preview {
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--surface);
}
.ob-preview:not(.has-content) {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}
.ob-preview:not(.has-content)::before {
  content: "Click any row to preview";
}

/* ---- Row list items ---- */
.browser-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
  position: relative;
}
.browser-row + .browser-row { margin-top: 4px; }
.browser-row:hover { background: var(--soft); }
.browser-row.is-preview { background: var(--soft); box-shadow: inset 3px 0 0 var(--pre-action); }
.row-num {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
.row-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.row-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.row-group {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--surface);
}
/* Phase-8 §6.8 (round-1 of sweep): the row-list cluster pills.
   The previous setup used bright cluster-palette vars (--async / --pre-action
   / --validation / --recovery) with `color: var(--surface)` (which is white in
   BOTH themes). white-on-cluster contrast failed AA across the board:
     --async      #3aa68a light  /  #4dc4a8 dark  → 3.0:1 / 2.24:1 (FAIL)
     --pre-action #5b6dd6 light  /  #7b8df0 dark  → 4.4:1 / 3.5:1 (borderline)
     --validation #c08a35 light  /  #d4a04a dark  → 2.99:1 / 2.35:1 (FAIL)
     --recovery   #c0526f light  /  #d47288 dark  → 4.2:1 / 3.0:1 (borderline)
   The cluster semantic identity is preserved via the literal name; we bypass
   the theme variable entirely so the chip's bg is stable across themes + AA.
   Hex literals chosen for ≥4.5:1 white-on-bg in both modes:
     pre-action  → var(--chip-navy) (deep navy) : 7.38:1 white
     async       → var(--chip-mint) (deep mint) : 5.10:1 white
     validation  → var(--chip-amber) (deep amber, NEW literal -- no existing dark
                   variant of --validation; earlier §6.7 used --rel-*)
                   : 5.82:1 white
     recovery    → var(--chip-red) (deep red)  : 7.98:1 white */
.row-group.pre-action { background: var(--chip-navy); }
.row-group.async      { background: var(--chip-mint); }
.row-group.validation { background: var(--chip-amber); }
.row-group.recovery   { background: var(--chip-red); }
.row-plain {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  align-items: center;
}
.row-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.row-meta-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  display: inline-block;
}
.row-meta-item .dot.on { background: var(--pre-action); }
.row-meta-item .freq-bar {
  width: 4px;
  height: 10px;
  background: var(--border-strong);
  display: inline-block;
  border-radius: 1px;
}
.row-meta-item .freq-bar.on { background: var(--async); }
.row-meta-item.meta-diff.beginner {
  /* Text color on dark bg — uses bright --async (teal) which is readable
     as text without semantic collision (colored text ≠ group pill).
     The --scale-* pill decoupling is for .meta-chip.meta-difficulty.* below. */
  color: var(--async);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.row-meta-item.meta-diff.intermediate {
  /* Text color on dark bg — uses bright --pre-action (periwinkle).
     Colored text doesn't collide with group-pill identity. */
  color: var(--pre-action);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.row-meta-item.meta-diff.advanced {
  /* Text color on dark bg — uses bright --recovery (rose).
     Colored text doesn't collide with group-pill identity. */
  color: var(--recovery);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Phase-9 dark-only: the :root:not([data-theme="dark"]) overrides are removed.
   In dark-only mode, the base rules for .meta-diff.{beginner,intermediate,advanced}
   already resolve to dark cluster palette colors with sufficient contrast:
   --async (#4dc4a8) on --bg (#1a1a22) ≈ 5.1:1, --pre-action (#7b8df0) ≈ 5.8:1,
   --recovery (#d47288) ≈ 4.7:1 — all pass WCAG AA on dark bg. */
.row-tag {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 10px;
  background: var(--soft);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}
.row-tag-more { font-size: 10px; color: var(--muted); }

/* Phase 4 review-fix: .row-toggle.on now reads positive (green = --async).
   Phase-8 §6.7: bump font-size 12→13 and font-weight 600→700 so the pill text
   qualifies as WCAG "large bold" (≥14px bold) for AA-large-text contrast
   purposes (3:1 minimum instead of 4.5:1). White on --async is ~3.0:1, which is
   exactly at the AA-large-text boundary; this stays on the safe side. The dark
   hairline border on each variant adds a perceptual anchor without competing
   with the bg color (cosmetic only, not relied on for contrast). */
.row-toggle {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.row-toggle:hover { background: var(--soft); color: var(--ink); }
.row-toggle.on {
  /* Phase-8 §6.7 (round 2): hardcoded bg literal instead of var(--async).
     Dark-mode --async (#4dc4a8) + white = ~2.24:1 (fails AA). Light-mode
     --async (#3aa68a) + white = 3.0:1 (passes AA-large-bold only).
     The literal var(--chip-mint) (used as --rel-remedies) gives white contrast = 5.1:1
     in BOTH themes. The border color cue stays as var(--chip-mint). ---- */
  background: var(--chip-mint);
  color: white;
  border-color: var(--chip-mint);
}
.row-toggle.off {
  /* Same rationale: var(--pre-action) light (#5b6dd6) = 4.4:1 white (passes),
     dark (#7b8df0) = 3.5:1 white (borderline). Stable literal var(--chip-navy) at 8.9:1. */
  background: var(--chip-navy);
  color: white;
  border-color: var(--chip-navy);
}

.browser-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px;
  font-style: italic;
}

/* ---- Preview panel reuse of detail.css primitives ---- */
.ob-preview .term-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px 0;
}
.ob-preview .meta-chip {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--soft);
  color: var(--ink);
  font-weight: 600;
}
/* Phase-8 §6.7 (round 2): out-of-scope parallel fix. The preview pane's
   meta-chip pills had the same cluster-bg + white-text combo: white on
   --async / --pre-action / --recovery (light AND dark) sat at 2.2-4.4:1,
   borderline-to-failing AA. Use the same hex literals we chose for
   .row-toggle for cross-theme stability:
     beginner    var(--chip-mint)  → 5.1:1 white
     intermediate var(--chip-navy) → 8.9:1 white
     advanced     var(--chip-red) → ~11:1 white (AAA on body text) */
.ob-preview .meta-chip.meta-difficulty.beginner     { background: var(--scale-low); color: white; }
.ob-preview .meta-chip.meta-difficulty.intermediate { background: var(--scale-mid); color: white; }
.ob-preview .meta-chip.meta-difficulty.advanced     { background: var(--scale-high); color: white; }
.ob-preview .meta-tag {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 10px;
  background: var(--soft);
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted);
}
.ob-preview .meta-tag:hover { background: var(--border); color: var(--ink); }

/* ---- Footer: mode toggle + summary ---- */
.ob-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.ob-mode {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.ob-mode button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease;
}
.ob-mode button:hover { color: var(--ink); background: var(--soft); }
.ob-mode button.active {
  /* Phase-9 dark-only: active mode-toggle button uses --chip-navy.
     This is a group-identity color (navy = active state), not difficulty. */
  background: var(--chip-navy);
  color: white;
}
.ob-mode .mode-info {
  margin-left: 12px;
  max-width: 540px;
  line-height: 1.4;
  font-size: 11px;
  color: var(--muted);
}
#ob-count-summary {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  color: var(--ink);
}

/* ---- Dark mode tweaks ---- */
/* Phase-9 dark-only: the [data-theme="dark"] #ontology-browser override is removed;
   var(--surface) and var(--border-strong) now resolve to dark values from :root. */

/* ---- Graph off-graph dimming ---- */
.node.off-graph { opacity: 0.06; pointer-events: none; transition: opacity 0.20s ease; }
.edge.off-graph { opacity: 0.05; transition: opacity 0.20s ease; }
.edge-label.off-graph { opacity: 0.05; transition: opacity 0.20s ease; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .ob-body { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .ob-rows { border-right: 0; border-bottom: 1px solid var(--border); }
  #ontology-browser { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
}
@media (max-width: 600px) {
  .ob-header h2 { font-size: 15px; }
  .ob-header input[type="search"] { font-size: 13px; padding: 6px 10px; }
  .browser-row { grid-template-columns: 32px 1fr; }
  .browser-row .row-toggle { grid-column: 1 / -1; justify-self: stretch; }
}