/* UML overview colours — docs/uml/overview/, written by scripts/gen-uml-overview.ts.
 *
 * The diagrams carry NO colour. Each class node carries `fa_uml_kind_<kind>`
 * for the graph typology it was read from, and this file is the one place a kind
 * gets its colour. Owner, 2026-09-23: the groupings "can just be used/declared
 * colors in css in themes".
 *
 * Kinds are coloured in five families — schema, scenario, process, state,
 * test — which is the owner's grouping; a kind not listed falls back to the
 * neutral default, which is a statement that nobody has placed it yet.
 *
 * `!important` because Mermaid writes its own rules into the SVG under the
 * diagram's id selector, which outranks any class selector here.
 *
 * Diagrams render light in both colour schemes (see _includes/mermaid_config.js),
 * so these are light tints with dark ink, measured once for contrast on that
 * card rather than twice.
 */

:is(.mermaid, .language-mermaid) {
  --fa-uml-schema: #e9edf3;
  --fa-uml-scenario: #e8f0ee;
  --fa-uml-process: #eee9f5;
  --fa-uml-state: #f6eedf;
  --fa-uml-test: #f4e6e6;
  --fa-uml-other: #f4f4f1;
  --fa-uml-edge: #1b2432;
}

/* Fallback FIRST: a kind no family below names gets the neutral tint. Same
   specificity as the family rules, so the later, named rule wins. */
:is(.mermaid, .language-mermaid) g[class*="fa_uml_kind_"] rect { fill: var(--fa-uml-other) !important; }

/* schema */
:is(.mermaid, .language-mermaid) g.fa_uml_kind_schemas rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_external_schema rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_uml rect { fill: var(--fa-uml-schema) !important; }

/* scenario */
:is(.mermaid, .language-mermaid) g.fa_uml_kind_scenarios rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_skills rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_voices rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_glossary rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_models rect { fill: var(--fa-uml-scenario) !important; }

/* process */
:is(.mermaid, .language-mermaid) g.fa_uml_kind_processes rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_methodology rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_tools rect { fill: var(--fa-uml-process) !important; }

/* state */
:is(.mermaid, .language-mermaid) g.fa_uml_kind_beans rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_bean_defs rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_workflow_state rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_todos rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_todo_items rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_todo_feedback rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_boards rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_board_positions rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_memory rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_waiver rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_session_state rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_interaction rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_issue_marks rect { fill: var(--fa-uml-state) !important; }

/* test */
:is(.mermaid, .language-mermaid) g.fa_uml_kind_qa rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_qa_report rect,
:is(.mermaid, .language-mermaid) g.fa_uml_kind_health rect { fill: var(--fa-uml-test) !important; }

:is(.mermaid, .language-mermaid) g[class*="fa_uml_kind_"] rect { stroke: var(--fa-uml-edge) !important; }

/* A kind whose node schema could not be determined: dashed, never solid. */
:is(.mermaid, .language-mermaid) g.fa_uml_undetermined rect {
  fill: var(--fa-uml-other) !important;
  stroke-dasharray: 5 4 !important;
}

/* Portrait / landscape views — every UML figure is rendered twice, and the
 * page carries both with a radio switch (gen-uml-overview.ts, `views`).
 * Owner, 2026-09-23: "can we have portrait and landscape views?". CSS only,
 * so the switch works before docs-ui.js loads. Portrait is the default. */
.fa-uml-view-pick {
  border: 0;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.fa-uml-view-pick legend {
  float: left;
  margin-right: 0.5rem;
  font-weight: 600;
}
.fa-uml-view-pick label { margin-left: 0.25rem; }
/* docs-ui.js puts each figure's zoom toolbar directly BEFORE the figure, so
 * the hidden view's toolbar is hidden with it. */
.fa-uml-views:has(.fa-uml-pick-portrait:checked) .fa-uml-landscape,
.fa-uml-views:has(.fa-uml-pick-portrait:checked) .fa-figure-tools:has(+ .fa-uml-landscape),
.fa-uml-views:has(.fa-uml-pick-landscape:checked) .fa-uml-portrait,
.fa-uml-views:has(.fa-uml-pick-landscape:checked) .fa-figure-tools:has(+ .fa-uml-portrait),
.fa-uml-views:has(.fa-uml-pick-interactive:checked) .fa-uml-portrait,
.fa-uml-views:has(.fa-uml-pick-interactive:checked) .fa-figure-tools:has(+ .fa-uml-portrait),
.fa-uml-views:has(.fa-uml-pick-interactive:checked) .fa-uml-landscape,
.fa-uml-views:has(.fa-uml-pick-interactive:checked) .fa-figure-tools:has(+ .fa-uml-landscape),
.fa-uml-views:not(:has(.fa-uml-pick-interactive:checked)) .fa-uml-interactive { display: none; }

/* The interactive view — a DOT laid out in the browser by assets/js/kg-graph.js
 * (skill kg-subgraph-layout; owner, 2026-10-09: "could use the wasm-graphviz to
 * make the graph visualizers overview more dynamic. also allow users to drag
 * nodes around"). The nodes carry their family fill in the DOT itself, read
 * from the tokens above by uml-palette.ts, so this block colours only the
 * chrome. Like every diagram here the card renders light in both colour
 * schemes, which is what the fills were measured against. */
.kg-graph {
  --fa-kg-card: #ffffff;
  --fa-kg-ink: #1b2432;
  --fa-kg-found: #b4232a;
  margin: 0 0 1rem;
}
.kg-graph-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.kg-graph-bar input[type="search"] { min-width: 14rem; }
.kg-graph-bar button { min-width: 2.2rem; min-height: 2.2rem; }
.kg-graph-stage {
  height: 75vh;
  min-height: 24rem;
  background: var(--fa-kg-card);
  color: var(--fa-kg-ink);
  border: 1px solid var(--fa-kg-ink);
  border-radius: 4px;
  overflow: hidden;
  touch-action: none;
}
.kg-graph-stage:focus-visible { outline: 3px solid var(--fa-kg-found); outline-offset: 2px; }
.kg-graph-stage svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
.kg-graph-stage svg.kg-dragging { cursor: grabbing; }
.kg-graph-stage g.node { cursor: move; }
.kg-graph-stage g.kg-found > path,
.kg-graph-stage g.kg-found > polygon { stroke: var(--fa-kg-found); stroke-width: 3px; }

/* Formalization status — a paper's block graph (gen-content-graph-uml.ts)
 * fills each block by its status from proof-objects.json. Declared here, like
 * the families above, so every drawing reads one palette (graph-rendering
 * rule 7). Light tints, strongest claim greenest; the same order the Lean
 * dependency graph in CI used, re-tinted for the light card. */
:is(.mermaid, .language-mermaid) {
  --fa-uml-status-reviewed_human: #d9eed9;
  --fa-uml-status-reviewed_agentic: #f3ecc9;
  --fa-uml-status-proved: #eaf3de;
  --fa-uml-status-mathlib_ok: #e3f0dc;
  --fa-uml-status-has_sorry: #f6e2cc;
  --fa-uml-status-stated: #f4eed8;
  --fa-uml-status-not_started: #f4e2e2;
}