/* The reading pages' inline SVG figures, on the semantic tokens (2026-10-31, feat/svg-light-reading).

   A figure used to paint with presentation attributes (fill="#00f3ff", stroke="rgba(255, 255, 255, 0.07)"),
   which cannot follow the theme, so it sat under data-theme-lock="ink" as a dark plate with neon strokes on the
   light page. These classes name every colour through a TIER-1 token from styles.css instead, so the same SVG
   reads in Paper and in Ink. Linked by /, /tools/, /evidence/, /ai-in-care/, /about/ and /contact/, and since council 2 (WP2)
   by /cf/delivery/, /math/ and /math/proofs/ for the figure-data tables and the temporary control contract.

   A figure picks a hue channel with one .fig-k-* class (on a shape, or on a <g> its children inherit from) and
   then says what the shape is: a node, a wire, a dot, a label. A marker's arrowhead does not inherit from the
   path that uses it, so the head carries its own .fig-k-* class. No colour literal lives here
   (tests/test_color_ratchet.py): a tint is color-mix() of a token. */
@layer page {

/* ---- hue channels: each one >= 4.5:1 on --surface-raised in Paper, and distinct from the others in both themes */
.fig-k-accent { --fig-k: var(--accent); }
.fig-k-alt { --fig-k: var(--accent-alt); }
.fig-k-ok { --fig-k: var(--mark-ok); }
.fig-k-warn { --fig-k: var(--mark-warn); }
.fig-k-tribute { --fig-k: var(--mark-tribute); }
.fig-k-data3 { --fig-k: var(--data-3); }

/* ---- shapes */
.fig-node { fill: color-mix(in srgb, var(--fig-k, var(--line-2)) 7%, var(--surface-raised)); stroke: var(--fig-k, var(--line-2)); stroke-width: 1.5; }
.fig-wire { fill: none; stroke: var(--fig-k, var(--line-2)); }
.fig-dashed { stroke-dasharray: 4 4; }
.fig-dot { fill: var(--fig-k, var(--text-2)); }
.fig-halo { fill: color-mix(in srgb, var(--fig-k) 16%, var(--surface-raised)); stroke: var(--fig-k); stroke-width: 1.5; }
.fig-head { fill: var(--fig-k, var(--text-2)); }
.fig-grid { stroke: var(--line-1); fill: none; }
.fig-track { fill: var(--surface-sunken); }
.fig-glow { fill: color-mix(in srgb, var(--fig-k) 14%, transparent); }
.fig-stop { stop-color: var(--fig-k); }

/* ---- text */
.fig-label { fill: var(--fig-k, var(--text-1)); font-weight: 700; }
.fig-ktext { fill: var(--fig-k, var(--text-1)); }
.fig-text { fill: var(--text-1); }
.fig-text-2 { fill: var(--text-2); }
.fig-text-3 { fill: var(--text-3); }
.fig-mono { font-family: var(--font-mono); }
.fig-display { font-family: var(--font-display); }

/* ---- /evidence/: the pipeline's scroll box, moved here from styles-library.css with its dark wash re-tokened */
.evidence-pipeline-svg-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  background: var(--surface-sunken);
  border: 1px solid var(--line-1);
  padding: 0.75rem 0.5rem;
}

/* ---- / : the benchmark bars. S4 is a fill-only series, so it carries its stroke colour (styles.css ramp notes) */
.fig-bar-data4 { fill: var(--data-4); stroke: var(--data-4-stroke); stroke-width: 1; }

/* ---- /tools/#site-architecture-map: moved here from styles-trials.css (used by /tools/ alone), re-tokened */
.sitemap-section { margin: 3.5rem auto 2.5rem; padding: 0 0 2rem; }
.sitemap-head { margin-bottom: 2rem; }
.sitemap-head h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 1.85rem); font-weight: 700; color: var(--text-1); margin: 0.6rem 0 0.5rem; }
.sitemap-lede { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; max-width: 54rem; margin: 0; }
.sitemap-svg-card { background: var(--surface-raised); border: 1px solid var(--line-1); border-radius: var(--radius-md); padding: 1.5rem 1rem 1rem; margin-bottom: 2.5rem; overflow-x: auto; box-shadow: 0 4px 20px var(--shadow-cast); }
.sitemap-constellation-svg { display: block; width: 100%; min-width: 720px; height: auto; }
.constellation-node circle { transition: stroke-width 0.2s ease; }
.constellation-node .fig-node { stroke-width: 2; }
.constellation-node:hover circle { stroke-width: 3.5; }
.sitemap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.sitemap-col { background: var(--surface-raised); border: 1px solid var(--line-1); border-radius: 10px; padding: 1.25rem 1.15rem; display: flex; flex-direction: column; }
.sitemap-col-title { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line-1); }
.sitemap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.sitemap-list li { margin: 0; padding: 0; }
.sitemap-list a { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; border-radius: 6px; padding: 0.35rem 0.45rem; margin: -0.35rem -0.45rem; transition: background 0.15s ease; }
.sitemap-list a:hover, .sitemap-list a:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sitemap-list a:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.sitemap-list strong { font-size: 0.88rem; font-weight: 600; color: var(--text-1); line-height: 1.35; }
.sitemap-list a:hover strong { color: var(--accent); }
.sitemap-list span { font-size: 0.76rem; font-family: var(--font-mono); color: var(--text-2); line-height: 1.35; }
@media (max-width: 960px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .sitemap-grid { grid-template-columns: 1fr; } }

}  /* end @layer page */

/* ============================================================================
   Council 2, WP2 (2026-10-31)
   ============================================================================ */

@layer page {
/* T1-10: the numbers behind a dense figure, as a table under it (filled by scripts/fig-data-table.js). */
.fig-data { margin-block: var(--space-3) var(--space-4); }
.fig-data > summary { cursor: pointer; inline-size: max-content; max-inline-size: 100%; font: 500 0.875rem/1.4 var(--font-ui); color: var(--accent); }
.fig-data > summary:hover { text-decoration: underline; }
.fig-data-scroll { margin-block-start: var(--space-2); overflow-x: auto; border: 1px solid var(--line-1); border-radius: var(--radius-sm); background: var(--surface-raised); }
.fig-data-table { inline-size: 100%; border-collapse: collapse; font: 400 0.875rem/1.4 var(--font-ui); color: var(--text-1); margin: 0; }
.fig-data-table caption { caption-side: top; text-align: start; padding: var(--space-2) var(--space-3); font-weight: 600; color: var(--text-1); }
.fig-data-table :is(th, td) { padding: var(--space-1) var(--space-3); border-block-start: 1px solid var(--line-1); text-align: end; white-space: nowrap; }
.fig-data-table :is(th[scope="row"], thead th:first-child) { text-align: start; }
.fig-data-table thead th { font-weight: 600; color: var(--text-2); }
.fig-data-table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
}

/* T1-1: /tools/ discovery catalog off the Ink lock. styles-library.css (@layer legacy) paints its cards, badges and callout
   with dark literals; `bench` comes after `legacy`, so these token rules win there, scoped to the section. Only the radar
   box keeps an Ink lock (its plate); the radar draws through scripts/theme-palette.js. */
@layer bench {
#discovery-catalog-explorer .tools-accelerator-callout {
    border: 1px solid var(--line-1); border-inline-start: 4px solid var(--mark-ok); border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--mark-ok) 6%, var(--surface-raised));
}
#discovery-catalog-explorer .tools-accelerator-callout p { color: var(--text-1); }
#discovery-catalog-explorer .dignity-boundary-card {
    margin-block: var(--space-4); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-1); border-inline-start: 4px solid var(--mark-warn); border-radius: var(--radius-md);
    background: var(--surface-raised);
}
#discovery-catalog-explorer .dignity-badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-2); }
#discovery-catalog-explorer :is(.certified-badge, .dignity-tag) { font: 500 0.8125rem/1.3 var(--font-ui); color: var(--text-2); }
#discovery-catalog-explorer .dignity-text { margin: 0; color: var(--text-1); }

#discovery-catalog-explorer .radar-canvas-box {
    max-inline-size: 36rem; margin-inline: auto; padding: var(--space-3);
    border: 1px solid var(--line-1); border-radius: var(--radius-2, var(--radius-md));
    max-block-size: min(70vh, 640px);
}
#discovery-catalog-explorer .radar-svg-canvas { display: block; inline-size: 100%; block-size: auto; max-block-size: calc(min(70vh, 640px) - 2 * var(--space-3)); overflow: visible; }
#discovery-catalog-explorer .radar-svg-canvas text { font-family: var(--font-ui); }
#discovery-catalog-explorer .radar-svg-canvas text.radar-value { font-family: var(--font-mono); }

#discovery-catalog-explorer .discovery-cards-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-4);
    align-items: start; margin-block: var(--space-4);
}
#discovery-catalog-explorer .discovery-model-card {
    background: var(--surface-raised); border: 1px solid var(--line-1); border-radius: var(--radius-md); box-shadow: none; transition: border-color 0.15s ease;
}
#discovery-catalog-explorer .discovery-model-card:hover { transform: none; border-color: var(--accent); box-shadow: none; }
#discovery-catalog-explorer :is(.model-task-badge, .model-tier-badge, .model-triage-badge) {
    font-size: 0.75rem; border-radius: var(--radius-chip); background: transparent; border: 1px solid var(--line-1); color: var(--text-2);
}
#discovery-catalog-explorer .model-task-badge { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
#discovery-catalog-explorer .model-triage-badge.triage-keep { color: var(--mark-ok); border-color: color-mix(in srgb, var(--mark-ok) 45%, transparent); background: transparent; }
#discovery-catalog-explorer .model-triage-badge.triage-merge { color: var(--mark-warn); border-color: color-mix(in srgb, var(--mark-warn) 45%, transparent); background: transparent; }
#discovery-catalog-explorer .model-triage-badge.triage-archive { color: var(--text-3); background: transparent; }
#discovery-catalog-explorer .model-card-title { color: var(--text-1); }
#discovery-catalog-explorer .model-card-desc { color: var(--text-2); }
#discovery-catalog-explorer .model-equation-box { background: var(--surface-sunken); border: 1px solid var(--line-1); border-radius: var(--radius-sm); }
#discovery-catalog-explorer .equation-label { font-family: var(--font-ui); text-transform: none; font-size: 0.8125rem; color: var(--text-2); }
#discovery-catalog-explorer .equation-code { color: var(--text-1); word-break: normal; overflow-wrap: anywhere; }
#discovery-catalog-explorer .model-cite-row { color: var(--text-2); }
#discovery-catalog-explorer .model-cite-row strong { color: var(--text-1); }
#discovery-catalog-explorer .model-test-code { color: var(--text-2); background: var(--surface-sunken); word-break: normal; overflow-wrap: anywhere; }

/* T1-5: the section's toggles and filters on the control contract (.chip, one pressed state). */
#discovery-catalog-explorer :is(.btn-radar-toggle, .catalog-btn, .catalog-triage-btn) {
    font: 500 0.875rem/1.2 var(--font-ui); letter-spacing: 0; text-transform: none;
    color: var(--text-2); background: transparent; border: 1px solid var(--line-strong, var(--text-3)); border-radius: 999px; box-shadow: none;
}
#discovery-catalog-explorer :is(.btn-radar-toggle, .catalog-btn, .catalog-triage-btn):hover { color: var(--text-1); border-color: var(--accent); background: transparent; }
#discovery-catalog-explorer :is(.btn-radar-toggle, .catalog-btn, .catalog-triage-btn):is([aria-pressed="true"], .active) {
    color: var(--text-on-accent); background: var(--accent); border-color: var(--accent);
}
#discovery-catalog-explorer .catalog-filter-kicker { font: 600 0.875rem/1.3 var(--font-ui); color: var(--text-1); text-transform: none; letter-spacing: 0; }
}