/* /math/: the four-part index and the applied-math landing (DECISION.md §7). Linked by /math/ and /math/proofs/;
   in @layer page, below `legacy`, like the other page sheets. */
@layer page {

.math-index { margin-block: var(--section-rhythm) 0; }
.math-index-title { font-size: var(--step-1); margin: 0 0 var(--space-3); }
.math-index-list {
    display: grid; gap: var(--space-3);
    margin: 0; padding: 0; list-style: none;
    counter-reset: math-part;
}
.math-index-list > li { counter-increment: math-part; border-top: 1px solid var(--line-1); }
.math-index-list a {
    display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 var(--space-3);
    align-items: baseline;
    padding: var(--space-3) 0; text-decoration: none; color: var(--text-2);
}
.math-index-list a::before {
    content: counter(math-part, decimal-leading-zero);
    font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-3);
}
.math-index-list a strong { color: var(--text-1); font-family: var(--font-display); font-size: var(--step-1); }
.math-index-list a span { grid-column: 2; font-family: var(--font-prose); line-height: var(--leading-prose); }
.math-index-list a:hover strong { color: var(--accent); text-decoration: underline; }

.math-rounds { display: grid; gap: 0; margin: var(--space-5) 0 var(--space-4); padding: 0; list-style: none; }
.math-round-row {
    display: grid; gap: var(--space-1);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--line-1);
}
.math-round-row h3 { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.math-round-row h3 a { color: var(--text-1); text-decoration: none; }
.math-round-row h3 a:hover { color: var(--accent); text-decoration: underline; }
.math-round-row p { margin: 0; max-width: var(--measure); color: var(--text-2); }
.math-round-row .k {
    display: inline-block; min-width: 7.5rem;
    font-family: var(--font-mono); font-size: var(--step--1);
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
}
@media (min-width: 70rem) {
    .math-round-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--space-6); }
    .math-round-row h3 { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
    .math-round-row p { grid-column: 2; }
}
.math-limits { margin-top: var(--space-5); }
.math-limits ul { margin: 0; padding-left: 1.2rem; }
.math-limits li { margin-bottom: var(--space-2); color: var(--text-2); font-family: var(--font-prose); line-height: var(--leading-prose); }

}  /* end @layer page */

/* The proof observatory card on /math/ left its Ink lock on 2026-10-31, and /math/proofs/ (the same card, standalone) left its
   page lock the same day. styles-library.css (@layer legacy) paints its frame, toolbars and dock with dark literals; these
   rules re-point them to TIER-1 tokens on both pages, in `bench`, which the layer order puts after `legacy`. The SVG proof
   landscape inside draws through scripts/theme-palette.js; the WebGL stage keeps its own Ink lock (a shader plate). */
@layer bench {
.proof-observatory-card { border-color: var(--line-2); background: var(--surface-raised); box-shadow: none; }
.proof-observatory-card.is-fullscreen, .proof-observatory-card:fullscreen { background: var(--surface-page); }
#proof-stage-isomorphism-body tr.is-selected-stage { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.proof-workbench-toolbar { border-color: var(--line-2); background: var(--surface-sunken); }
.proof-studio-cta-btn { border-color: color-mix(in srgb, var(--accent-alt) 55%, transparent); background: color-mix(in srgb, var(--accent-alt) 10%, transparent); color: var(--accent-alt); }
.proof-studio-cta-btn:hover, .proof-studio-cta-btn.is-active { border-color: var(--accent-alt); background: var(--accent-alt); color: var(--text-on-accent); }
.proof-shortcuts-strip { border-color: var(--line-2); background: var(--surface-sunken); color: var(--text-2); }
.proof-shortcuts-strip kbd { border-color: var(--line-2); background: var(--surface-raised); }
.proof-workbench-viewport .proof-svg-stage { border-color: var(--line-2); background: var(--surface-raised); }
.proof-svg-toolbar { background: var(--surface-sunken); border-bottom-color: var(--line-1); }
.proof-zoom-readout { background: var(--surface-raised); border-color: var(--line-2); }
.proof-stage-stepper-dock { border-color: var(--line-2); background: var(--surface-sunken); }
.proof-live-stage-card { border-top-color: var(--line-1); }
.proof-live-stage-title { color: var(--accent-alt); }
.proof-live-stage-desc { color: var(--text-2); }
.proof-table-jump-btn { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.proof-table-jump-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text-1); }
.proof-sticky-minibar { border-color: var(--line-2); background: var(--surface-raised); box-shadow: 0 10px 28px var(--shadow-cast); }
.math-model-svg { background: var(--surface-sunken); }
/* /math/proofs/ is an instrument page: it kept the 44px control floor of the Ink lock (styles.css) when it left that lock. */
.proofs-page main :is(button, select, summary, input[type="range"], input[type="number"]) { min-height: 44px; }
}

/* The four 3D-model sketches (.math-model-svg) and the two AlphaEvolve plates (#ae-pareto-svg, #ae-schedule-svg):
   their literal attributes became these classes on 2026-10-31. Cyan = the proof spine (--accent), lime = the bridged
   path (--accent-alt), violet = the second path (--data-2), amber = the barrier (--mark-warn), green = the sink
   (--mark-ok), sky = the reference ring (--data-1). */
@layer page {
.mf-ground { fill: var(--surface-sunken); }
.mf-t1 { fill: var(--text-1); }
.mf-t2 { fill: var(--text-2); }
.mf-acc { fill: var(--accent); }
.mf-alt { fill: var(--accent-alt); }
.mf-ok { fill: var(--mark-ok); }
.mf-warn { fill: var(--mark-warn); }
.mf-s1 { fill: var(--data-1); }
.mf-ok-wash { fill: color-mix(in srgb, var(--mark-ok) 16%, transparent); }
.mf-alt-wash { fill: color-mix(in srgb, var(--accent-alt) 14%, transparent); }
.mf-warn-wash { fill: color-mix(in srgb, var(--mark-warn) 16%, transparent); }
.mfs-acc { stroke: var(--accent); }
.mfs-alt { stroke: var(--accent-alt); }
.mfs-ok { stroke: var(--mark-ok); }
.mfs-warn { stroke: var(--mark-warn); }
.mfs-s1 { stroke: var(--data-1); }
.mfs-plum { stroke: var(--data-2); }
.mf-stop-ok { stop-color: var(--mark-ok); }
.mf-stop-acc { stop-color: var(--accent); }
.mf-stop-s1 { stop-color: var(--data-1); }
.mf-stop-ground { stop-color: var(--surface-sunken); }
}

/* Council 2, WP2 (2026-10-31): the plates, cards and controls of the proof observatory and the AlphaEvolve engine, on
   /math/ and /math/proofs/. In `bench`, after styles-library.css's `legacy`; colours are tokens only.

   T1-1: an Ink lock sits on the drawing surface alone. #proof-webgl-canvas and .ae-webgl-canvas-wrap carry it (they
   were inside a locked stage, toolbar, caption and buttons included); the stage around them is a Paper card with its
   toolbar on --surface-raised and its caption (the HUD) outside the plate. */
@layer bench {
.proof-webgl-stage { background: var(--surface-raised); border: 1px solid var(--line-1); border-radius: var(--radius-md); }
.proof-webgl-toolbar { background: var(--surface-raised); border-bottom: 1px solid var(--line-1); }
.proof-webgl-hud { background: var(--surface-raised); border-top: 1px solid var(--line-1); color: var(--text-2); }
.proof-webgl-canvas[data-theme-lock] { border: 1px solid var(--line-1); max-block-size: min(70vh, 640px); }
.ae-webgl-canvas-wrap[data-theme-lock] { max-block-size: min(70vh, 640px); }
.ae-webgl-hud-readout { color: var(--text-2); }

/* T1-9: every readout is a card (three were bare rows that overflowed the grid), and cards keep their own height. */
.proof-readout-grid,
#home-math-cards-grid,
.math-models-grid,
.math-release-pillars,
.ai-bench-kpi-row,
.ae-kpi-grid,
.ae-waterfall-grid { align-items: start; }
.proof-readout-box { align-self: start; }
.proof-readout-label { font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: 0.8125rem; color: var(--text-2); }

/* T1-9: the sticky stage dock ("FLT \00b7 Stage 4") covered the cards it floats over. While it shows, anything scrolled to
   or focused stops above it, and the card ends with room for it. */
html:has(.proof-observatory-card.is-minibar-visible:not(.is-fullscreen)) { scroll-padding-block-end: 5.5rem; }
.proof-observatory-card:not(.is-fullscreen) .proof-readout-grid { padding-block-end: var(--space-2); }
.proof-observatory-card.is-minibar-visible:not(.is-fullscreen) { padding-block-end: 4.75rem; }
.proof-sticky-minibar { margin-block-start: var(--space-4); }

/* T1-5: the buttons on the shared control contract (.btn / .btn--quiet / .chip, styles.css). The legacy classes keep their
   names for the scripts; these rules give them the contract's face, border and pressed state. */
main :is(.proof-knockout-btn, .proof-table-jump-btn, .svg-anim-toggle, .svg-fullscreen-toggle) {
    font-family: var(--font-ui); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--text-1); background: var(--surface-raised); box-shadow: none;
    border: 1px solid var(--line-strong, var(--text-3)); border-radius: var(--radius-chip);
}
main :is(.svg-anim-toggle, .svg-fullscreen-toggle) { color: var(--text-2); background: transparent; }
main :is(.proof-knockout-btn, .proof-table-jump-btn, .svg-anim-toggle, .svg-fullscreen-toggle):hover { color: var(--text-1); border-color: var(--accent); }
main :is(.proof-knockout-btn, .proof-table-jump-btn, .svg-anim-toggle, .svg-fullscreen-toggle):is([aria-pressed="true"], .is-active) {
    color: var(--text-on-accent); background: var(--accent); border-color: var(--accent);
}
.proof-zoom-readout { font-family: var(--font-mono); color: var(--text-1); }
}

/* T1-10: below 600 px each figure is drawn at a width where its smallest label renders at >= 11 px, inside a labelled
   region (class="fig-scroll" role="region" tabindex="0") that scrolls sideways, with a hint above it. --fig-min is the
   viewBox width x 11 / the smallest label in user units (measured 2026-10-31), rounded up. The proof landscape's numbers
   are also in the five-stage table (#proof-stage-table), linked under it. */
@layer bench {
.fig-scroll { inline-size: 100%; min-inline-size: 0; contain: inline-size; }
@media (max-width: 599.98px) {
    .fig-scroll { overflow-x: auto; overscroll-behavior-inline: contain; padding-block-end: var(--space-2); }
    .fig-scroll::before {
        content: "Scroll sideways to see the whole figure \2192";
        position: sticky; inset-inline-start: 0;
        display: block; margin-block-end: var(--space-1);
        font: 500 0.8125rem/1.3 var(--font-ui); color: var(--text-2);
    }
    html[lang^="es"] .fig-scroll::before { content: "Desliza de lado para ver toda la figura \2192"; }
    .fig-scroll > svg {
        inline-size: var(--fig-min, 900px); min-inline-size: var(--fig-min, 900px); max-inline-size: none;
        block-size: auto; max-block-size: none;
    }
    #proof-thermodynamic-svg { --fig-min: 1840px; }
    #home-math-visual-svg { --fig-min: 1660px; }
    :is(#ae-pareto-svg, #ae-schedule-svg) { --fig-min: 700px; }
    .math-model-svg { --fig-min: 560px; }
}
.fig-data-note { margin: var(--space-2) var(--space-3); font: 400 0.875rem/1.45 var(--font-ui); color: var(--text-2); }
.proof-svg-stage, .proof-svg-canvas-wrap, .proof-landscape-svg, .proof-landscape-svg text, .proof-webgl-stage, .proof-controls-bar { -webkit-user-select: none; user-select: none; }
.proof-landscape-svg { cursor: grab; }
.proof-landscape-svg.is-svg-panning { cursor: grabbing; }
.proof-observatory-card:is(.is-fullscreen, :fullscreen) .proof-svg-canvas-wrap > .fig-scroll { block-size: 100%; max-block-size: 100%; display: flex; align-items: center; justify-content: center; }
.proof-observatory-card:is(.is-fullscreen, :fullscreen) .fig-data-note { display: none; }

#round105-donnan-prover,
#round106-bystander-prover,
#round107-hopfield-prover,
#round108-kramers-prover,
#round109-crooks-prover,
#round110-gallavotti-prover {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
}