/* solverui.css — DE GEDEELDE SCHIL VAN DE ZEVEN SOLVERS.
 *
 * Melding van de constructeur, 18 sep 2026: "loop de solvers door en zorg voor uniformiteit en een
 * intuitieve layout."
 *
 * WAAROM DIT EEN GEDEELD BLAD IS EN GEEN ZEVEN KEER GEPLAKT CSS-BLOK.
 * Elke solver draagt zijn EIGEN stylesheet en `build.js` lijnt alleen JS-kernen in, nooit CSS of
 * HTML-structuur. Zeven keer hetzelfde blok plakken IS de foutklasse die dit project telkens raakt:
 * dezelfde beslissing op meerdere plekken, die daarna uiteen loopt. Dit blad staat op EEN plek en de
 * VOLGENDE solver krijgt hem vanzelf.
 *
 * HOE HIJ WINT VAN DE SOLVER-CSS, zonder `!important`.
 * `app.py::_serveer_met_koppeling` zet de `<link>` vlak VOOR `</head>`. GEMETEN in alle zeven: de
 * eigen `</style>` staat exact een regel voor `</head>` (raamwerk 399/400 · rooster 368/369 ·
 * frame3d 347/348 · plaatvloer-fem 239/240 · 3d-fem 441/442 · geo2d 240/241 · geo3d 312/313), dus dit
 * blad komt er altijd NA en wint bij gelijke specificiteit. Wie hier `!important` nodig heeft, vecht
 * met een regel die specifieker is en hoort die in de solver zelf op te lossen.
 *
 * DE INJECTIE STAAT BINNEN DE `bouwkoppeling`-TAK en dat is dragend. De zes geinjecteerde SCRIPTS zijn
 * self-gating (ze doen niets zonder hun haak); CSS kan dat niet. Buiten die tak zou de rapport-editor,
 * die langs dezelfde functie komt, dit blad ongevraagd meekrijgen.
 *
 * DE MEDIA-GUARD. Alle zeven solvers dragen een gepind MOBIEL-blok onder 880px dat door
 * `tests/test_solvers_mobiel.py` op de BRON wordt gecontroleerd. Een regel hier die daarmee botst,
 * overrulet hem STIL terwijl die test groen blijft — precies de emitter/matcher-fout van dit project.
 * Alles wat aan de indeling raakt staat daarom achter `@media(min-width:881px)`; alleen typografie,
 * die in geen enkel MOBIEL-blok voorkomt, geldt overal.
 *
 * WAT DIT BLAD BEWUST NIET DOET, elk met de meting erbij:
 *  - KNOPMATEN gelijktrekken. Gemeten tegenproef: dezelfde padding overal bracht geo2d van 1 naar 2
 *    werkbalkrijen en 3d-fem van 101 naar 113 px. De balkhoogte hangt aan het AANTAL knoppen (8 t/m
 *    24), niet aan hun vorm. Uniformeer de VORM, niet de MAAT.
 *  - DE KOPHOOGTE gelijktrekken (raamwerk 6px 16px tegen 11px 18px elders). Een kop van 12 px lager
 *    maakt het tekenveld 12 px hoger, en `captureViewerSVG` -> `zoomFit()` -> `cvCssSize()` in
 *    raamwerk en plaatvloer-fem kadert de RAPPORTFIGUUR op de LIVE canvasmaat. Dat verschuift een
 *    figuur in een GELEVERD document en raakt de verhoudingsvloer van `html_pdf.py`. Eerst die figuur
 *    voor en na meten; dat is een eigen ronde.
 *  - `margin-left:auto` op de rechtergroep van de werkbalk neutraliseren. Nagemeten: dat SPIEGELT het
 *    gat (871/12 -> 12/871) zonder een knop op die regel te winnen, en het zou
 *    `tests/test_solverbalk.py` laten vallen voor nul zichtbare winst.
 *  - De zijkolomBREEDTES (340 t/m 396 px) en de namen `.panel`/`.side` gelijktrekken. `paneelbreedte.js`
 *    is er self-gating op en leest de standaard uit de computed style; die zeven waarden zijn
 *    startwaarden die de gebruiker zelf versleept.
 *  - `.aigen` stylen. `aiontwerp.js` zet die kleur met `!important` en wint hoe dan ook.
 */

/* ── 1. TYPOGRAFIE ────────────────────────────────────────────────────────────────────────────────
 * GEMETEN 17 sep 2026 in de draaiende app: frame3d en 3d-fem zetten hun `body` op `system-ui` terwijl
 * de vijf andere `IBM Plex Mono` gebruiken — en omdat een `<button>` zijn lettertype NIET erft, stond
 * de BEREKEN-knop van die twee in een DERDE lettertype: **Arial**, de standaard van de browser. Beide
 * solvers definiëren `--mono` zelf in hun `:root` en gebruiken hem alleen niet op hun bediening.
 * Dat is een fout en geen smaak, en deze regel is voor de vijf andere solvers een no-op.
 *
 * ALLEEN DE BEDIENING, NIET DE `body` — en dat is een GEMETEN keuze, geen halfheid. Ook de body van
 * die twee op `--mono` zetten maakt de tekst breder, waardoor de oranje hulpregel `span.modehelp`
 * (3d-fem: 1076 px breed, 11px) van twee naar drie regels wikkelt. GEMETEN kostte dat 3d-fem
 * **45 px tekenveld** (415 -> 370 px bij 1440x900) — op de solver die van de zeven al het minste
 * tekenveld heeft, en precies de verkeerde kant op na de melding "de resultaten zijn niet goed
 * leesbaar omdat het figuur te klein is". Met alleen de bediening: canvashoogte +0 px in zes solvers
 * en +1 in 3d-fem, werkbalkrijen ongewijzigd (1/1/1/1/0/2/3).
 * WAT DAARMEE BLIJFT STAAN: het PROZA van frame3d en 3d-fem (hulpregels, sectiekoppen) is nog
 * schreefloos op 16px waar de vijf andere mono op 13px zijn. Dat gelijktrekken kost het tekenveld
 * hierboven; het is een keuze voor de constructeur, geen vergetelheid.
 */
button, input, select, textarea, optgroup { font-family: var(--mono); }

/* ── 2. DE PRIMAIRE ACTIE STAAT ALTIJD IN BEELD ───────────────────────────────────────────────────
 * GEMETEN 18 sep 2026: de zijkolom SCROLLT in frame3d (873 tegen 812 px), 3d-fem (1135), geo2d (1484)
 * en geo3d (1494). `.run` is in zes van de zeven `position:static` en is dus het laatste element van
 * een scrollende kolom — in frame3d en 3d-fem viel BEREKEN daarmee onder de vouw zodra er één sectie
 * openstond. Alleen geo3d deed het al goed, met in de bron de reden erbij: "altijd in beeld op een
 * vaste plek".
 * Die ene schrijfwijze geldt nu voor alle zeven, in plaats van drie schrijfwijzen naast elkaar
 * (`.runrow`, `.runwrap`, en `button.run` zelf). In de drie solvers waarvan de kolom NIET scrollt is
 * dit zichtbaar een no-op: `sticky` grijpt pas aan zodra het element anders uit beeld zou schuiven.
 * DE MOBIELE STAND BLIJFT ONGEMOEID — daar plakt het eigen MOBIEL-blok van elke solver de knop al
 * onderaan het scherm, en twee vastzetters over elkaar heen is vragen om een sprong.
 */
@media (min-width: 881px) {
  .panel > .runrow,
  .panel > .runwrap,
  .side  > .runrow,
  .panel > button.run,
  .side  > button.run {
    position: sticky;
    bottom: 0;
    z-index: 6;
    /* de kolom scrollt eronder door: zonder eigen ondergrond leest de knop als zwevend */
    background: var(--paper);
    margin-left: -14px;
    margin-right: -14px;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--line);
  }
  /* de knop zelf vult de voet, zoals hij dat in alle zeven al deed */
  .panel > .runrow > button.run,
  .side  > .runrow > button.run,
  .panel > .runwrap > button.run { width: 100%; }
}