/* living-evidence.css — component styles for the Living Evidence format.
   Theme tokens: light on bare :root, dark under prefers-color-scheme with
   data-theme guards so an explicit choice wins in both directions. */

:root {
  --le-paper: #faf8f4;
  --le-ink: #23211c;
  --le-muted: #7c766a;
  --le-accent: #7a4bd6;
  --le-accent-soft: #7a4bd61a;
  --le-good: #1e7d46;
  --le-bad: #b03434;
  --le-warn: #a8730a;
  --le-card: #ffffff;
  --le-border: #e4dfd4;
  --le-code: #f0ede5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --le-paper: #17161a;
    --le-ink: #e8e5df;
    --le-muted: #93908a;
    --le-accent: #a486f0;
    --le-accent-soft: #a486f024;
    --le-good: #4fbd7f;
    --le-bad: #e07a7a;
    --le-warn: #d9a441;
    --le-card: #201f24;
    --le-border: #35333a;
    --le-code: #26252b;
  }
}
:root[data-theme="dark"] {
  --le-paper: #17161a;
  --le-ink: #e8e5df;
  --le-muted: #93908a;
  --le-accent: #a486f0;
  --le-accent-soft: #a486f024;
  --le-good: #4fbd7f;
  --le-bad: #e07a7a;
  --le-warn: #d9a441;
  --le-card: #201f24;
  --le-border: #35333a;
  --le-code: #26252b;
}

/* status bar */
.le-status {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.7em 1em; border: 1px solid var(--le-border); border-radius: 10px;
  background: var(--le-card); font-size: 0.92em; color: var(--le-muted);
}
.le-status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.le-status-dot.le-on { background: var(--le-good); box-shadow: 0 0 6px var(--le-good); }
.le-status-dot.le-off { background: var(--le-muted); }

/* claims */
.le-claim {
  background: var(--le-accent-soft);
  border-bottom: 2px solid var(--le-accent);
  padding: 0 0.15em; border-radius: 3px 3px 0 0;
}
.le-chip {
  font-size: 0.62em; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.15em 0.5em; margin-left: 0.4em; border-radius: 999px;
  white-space: nowrap; vertical-align: super;
}
.le-chip-supported { background: var(--le-good); color: #fff; }
.le-chip-challenged { background: var(--le-bad); color: #fff; }
.le-chip-nuanced { background: var(--le-warn); color: #fff; }
.le-chip-stale { opacity: 0.45; text-decoration: line-through; }

/* claims rendered as a LIST (workspace mode + exported documents) rather than
   as spans inside prose — same .le-claim span, same badge, different container */
.le-claims { list-style: none; margin: 0.6em 0; padding: 0; }
.le-claim-item {
  border: 1px solid var(--le-border); border-left: 4px solid var(--le-accent);
  border-radius: 10px; background: var(--le-card);
  padding: 0.7em 0.9em; margin: 0.6em 0;
}
.le-claim-item .le-claim { background: none; border-bottom: none; padding: 0; }
.le-claim-meta { font-size: 0.78em; color: var(--le-muted); margin-top: 0.35em; }
.le-claim-empty { color: var(--le-muted); font-style: italic; font-size: 0.92em; list-style: none; }

/* empty evidence base */
.le-empty-note {
  margin: 0; padding: 1.4em 1em; text-align: center;
  border: 1px dashed var(--le-border); border-radius: 12px; background: var(--le-card);
  color: var(--le-muted); font-style: italic; font-size: 0.92em;
}

/* figures */
.le-figure {
  margin: 1.2em 0; padding: 0.9em 1em 0.6em;
  border: 1px solid var(--le-border); border-radius: 12px; background: var(--le-card);
  overflow-x: auto;
}
.le-figure figcaption { display: flex; gap: 0.7em; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.5em; font-size: 0.85em; }
.le-fig-run { font-weight: 700; color: var(--le-accent); font-variant-numeric: tabular-nums; }
.le-fig-title { font-weight: 650; color: var(--le-ink); }
.le-fig-caption { color: var(--le-muted); }
.le-figure-svg { width: 100%; height: auto; display: block; color: var(--le-ink); }

/* ledger */
.le-ledger { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--le-border); border-radius: 10px; background: var(--le-card); }
.le-ledger-row { display: flex; gap: 0.7em; padding: 0.45em 0.8em; border-bottom: 1px solid var(--le-border); font-size: 0.85em; align-items: baseline; }
.le-ledger-row:last-child { border-bottom: none; }
.le-run { color: var(--le-accent); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; width: 2.6em; }
.le-actor { flex: none; font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; padding: 0.1em 0.45em; border-radius: 4px; background: var(--le-code); color: var(--le-muted); }
.le-human .le-actor { background: var(--le-good); color: #fff; }
.le-summary { color: var(--le-ink); }

/* reproducibility / integrity receipt */
.le-integrity {
  border: 1px solid var(--le-border); border-left: 4px solid var(--le-accent);
  border-radius: 10px; background: var(--le-card); padding: 0.8em 1em;
}
.le-integrity-note { margin: 0 0 0.35em; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78em; overflow-wrap: anywhere; }
.le-integrity-limits { margin: 0 0 0.7em; color: var(--le-muted); font-size: 0.8em; }
.le-clear-session { margin-top: 0.7em; color: var(--le-muted); }

/* local authoring import */
.le-import {
  border: 1px solid var(--le-border); border-left: 4px solid var(--le-accent);
  border-radius: 10px; background: var(--le-card); padding: 0.85em 1em;
}
.le-import input[type="file"] { display: block; max-width: 100%; margin: 0.65em 0; font: inherit; font-size: 0.88em; }
.le-import-status { margin: 0.45em 0 0; color: var(--le-muted); font-size: 0.84em; }
.le-import-status.le-import-error { color: var(--le-bad); }

/* pending proposal cards */
.le-pending-card { border: 2px dashed var(--le-warn); border-radius: 12px; padding: 1em; margin: 1em 0; background: var(--le-card); }
.le-pending-head { font-weight: 700; margin-bottom: 0.5em; }
.le-pending-table { border-collapse: collapse; font-size: 0.88em; width: 100%; }
.le-pending-table th { text-align: left; color: var(--le-muted); font-weight: 500; padding: 0.15em 0.9em 0.15em 0; white-space: nowrap; vertical-align: top; }
.le-pending-table td { padding: 0.15em 0; }
.le-pending-note { font-size: 0.82em; color: var(--le-warn); margin: 0.6em 0; }
.le-pending-actions { display: flex; gap: 0.6em; }

/* buttons */
.le-btn {
  font: inherit; font-size: 0.88em; font-weight: 650;
  padding: 0.45em 1em; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--le-border); background: var(--le-code); color: var(--le-ink);
}
.le-btn:hover { border-color: var(--le-accent); }
.le-btn-approve { background: var(--le-good); border-color: var(--le-good); color: #fff; }
.le-btn-reject { background: transparent; color: var(--le-bad); border-color: var(--le-bad); }

/* tool console */
.le-console-row { display: flex; gap: 0.6em; align-items: center; margin-bottom: 0.5em; }
.le-console-select { font: inherit; font-size: 0.9em; padding: 0.35em 0.5em; border-radius: 8px; border: 1px solid var(--le-border); background: var(--le-card); color: var(--le-ink); }
.le-console-desc { font-size: 0.82em; color: var(--le-muted); margin-bottom: 0.5em; }
.le-console-args { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82em; border: 1px solid var(--le-border); border-radius: 8px; background: var(--le-card); color: var(--le-ink); padding: 0.6em; box-sizing: border-box; }
.le-console-out { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78em; background: var(--le-code); border: 1px solid var(--le-border); border-radius: 8px; padding: 0.8em; overflow-x: auto; max-height: 320px; overflow-y: auto; white-space: pre-wrap; }

/* ---------------------------------------------------------------- atlas ---
   The read-only evidence map: atlas.js + atlas.html. Same tokens as everything
   above — the map is a component of this format, not a second skin. (These rules
   ride along into exported documents, which is harmless: an exported document has
   no map, and a stray selector costs less than a second stylesheet to keep in
   sync. Do not write module paths into this file, in comments either:
   workspace.e2e.mjs asserts that an exported document references nothing under
   the library directory, and this stylesheet is inlined into it.) */

.atlas-frame {
  border: 1px solid var(--le-border); border-radius: 12px; background: var(--le-card);
  padding: 0.5rem 0.6rem; overflow-x: auto;
}
.atlas-map { width: 100%; height: auto; display: block; color: var(--le-ink); min-width: 760px; }

/* edges: thin, quiet, dashed where the thing they connect is an absence */
.atlas-edge { stroke: var(--le-border); stroke-width: 1; fill: none; }
.atlas-edge-evidence { stroke-width: 0.8; }
.atlas-edge-moderates { stroke-dasharray: 6 3; }
.atlas-edge-dashed { stroke-dasharray: 4 4; }

/* nodes */
.atlas-node { cursor: pointer; }
.atlas-shape { fill: var(--le-card); stroke: var(--le-border); stroke-width: 1; }
.atlas-node-cell .atlas-shape { fill: var(--le-accent-soft); stroke: var(--le-accent); stroke-width: 1.6; }
.atlas-node-gap .atlas-shape { stroke-dasharray: 5 4; stroke: var(--le-muted); }
.atlas-node-claim .atlas-shape { stroke: var(--le-accent); }
.atlas-node-document .atlas-shape { stroke: var(--le-ink); }
.atlas-dot { stroke: var(--le-card); stroke-width: 1; }
/* record fill by band of prior teacher–pupil contact (defined after .atlas-shape,
   which sets the card fill every other node wants) */
.atlas-band-w0_1 { fill: var(--le-accent); }
.atlas-band-w2_7 { fill: var(--le-warn); }
.atlas-band-w17plus { fill: var(--le-muted); }
.atlas-band-unobserved { fill: var(--le-bad); }
.atlas-node:hover .atlas-shape { stroke: var(--le-accent); }
.atlas-t { fill: var(--le-ink); }
.atlas-t-muted { fill: var(--le-muted); }
.atlas-t-accent { fill: var(--le-accent); font-variant-numeric: tabular-nums; }
.atlas-verdict-supported { fill: var(--le-good); }
.atlas-verdict-challenged { fill: var(--le-bad); }
.atlas-verdict-nuanced { fill: var(--le-warn); }
.atlas-legend-dot { stroke: var(--le-card); stroke-width: 1; }

/* selection: one accent ring, everything else dimmed via a class on the SVG root */
.atlas-ring { fill: none; stroke: var(--le-accent); stroke-width: 2.5; opacity: 0; }
.atlas-node.atlas-selected .atlas-ring { opacity: 1; }
.atlas-map.atlas-has-selection .atlas-node { opacity: 0.42; }
.atlas-map.atlas-has-selection .atlas-node.atlas-selected { opacity: 1; }
.atlas-map.atlas-has-selection .atlas-edges { opacity: 0.3; }
.atlas-node:focus { outline: none; }
.atlas-node:focus-visible .atlas-ring { opacity: 1; stroke-dasharray: 4 3; }
.atlas-map.atlas-has-selection .atlas-node:focus-visible { opacity: 1; }

/* detail panel */
.atlas-panel-empty { color: var(--le-muted); font-style: italic; font-size: 0.92em; }
.atlas-card {
  border: 1px solid var(--le-border); border-left: 4px solid var(--le-accent);
  border-radius: 12px; background: var(--le-card); padding: 0.9em 1.1em; margin: 0.8em 0;
}
.atlas-kicker { font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--le-muted); }
.atlas-card-title { margin: 0.15em 0 0.5em; font-size: 1.05rem; }
.atlas-h4 { margin: 1em 0 0.3em; font-size: 0.92rem; }
.atlas-lede { margin: 0.3em 0 0.7em; }
.atlas-kv { border-collapse: collapse; font-size: 0.86em; width: 100%; }
.atlas-kv th {
  text-align: left; font-weight: 500; color: var(--le-muted); vertical-align: top;
  padding: 0.2em 0.9em 0.2em 0; white-space: nowrap;
}
.atlas-kv td { padding: 0.2em 0; vertical-align: top; }
.atlas-note { font-size: 0.82em; color: var(--le-muted); margin: 0.7em 0 0; }
.atlas-explicit-note {
  font-size: 0.86em; margin: 0.8em 0 0; padding: 0.6em 0.8em;
  border: 1px dashed var(--le-warn); border-radius: 8px; color: var(--le-ink);
}
.atlas-list { font-size: 0.86em; margin: 0.3em 0; padding-left: 1.2em; }
.atlas-list li { margin: 0.25em 0; }
.atlas-figure { margin: 0.8em 0 0.2em; overflow-x: auto; }
.atlas-chip { vertical-align: baseline; margin-left: 0.5em; }
.atlas-ast { margin: 0.7em 0; }
.atlas-ast summary { font-size: 0.84em; font-weight: 500; color: var(--le-muted); }

/* ---------------------------------------------------- Evidence Board map
   (board.html / lib/board.js). Node/edge SELECTION, DIM and FRAME mechanics
   are the shared atlas-* rules above (.atlas-node, .atlas-selected,
   .atlas-ring, .atlas-map, .atlas-has-selection, .atlas-frame, .atlas-card,
   .atlas-kv, .atlas-list, .atlas-note, .atlas-legend-dot) — reused as-is,
   not duplicated. Only the board's own per-type/per-kind/per-edge-type
   colouring is new. */
.board-node-hypothesis .atlas-shape { stroke: var(--le-accent); stroke-width: 1.7; fill: var(--le-accent-soft); }
.board-node-mechanism .atlas-shape { stroke: var(--le-border); }
.board-node-claim .atlas-shape { stroke: var(--le-accent); }
.board-node-question .atlas-shape { stroke-dasharray: 5 4; stroke: var(--le-muted); }

.board-kind-official-stat { fill: var(--le-accent); fill-opacity: 0.22; stroke: var(--le-accent); }
.board-kind-survey { fill: var(--le-good); fill-opacity: 0.22; stroke: var(--le-good); }
.board-kind-regression { fill: var(--le-warn); fill-opacity: 0.22; stroke: var(--le-warn); }
.board-kind-study { fill: var(--le-bad); fill-opacity: 0.22; stroke: var(--le-bad); }

.board-edge-supports { stroke: var(--le-good); }
.board-edge-contradicts { stroke: var(--le-bad); stroke-dasharray: 4 4; }
.board-edge-part-of { stroke: var(--le-border); }
.board-edge-tests { stroke: var(--le-warn); stroke-dasharray: 1 3; stroke-linecap: round; }
.board-edge-refines { stroke: var(--le-accent); }

.board-tally-supported { fill: var(--le-good); }
.board-tally-contested { fill: var(--le-warn); }
.board-tally-unsupported { fill: var(--le-muted); }