/* EOR Economics Calculator - the workbench layout. Author: Imad A. Adel. One stylesheet, selected by [data-variant="C1"] on , serving the navy and the carbon edition from the same file. Every value comes from the edition's own tokens, so the layout carries no colour of its own. SAMPLE records only. */ /* ------------------------------------------------------------------ shared */ :root[data-variant] main{max-width:1280px} :root[data-variant] .pane .sub{max-width:74ch} /* ============================================================== C1 workbench */ /* Inputs on the left, results on the right, the case fixed above both. The reader sets the case once and watches the right-hand column answer. */ :root[data-variant="C1"] .wb{ display:grid;grid-template-columns:minmax(min(100%,300px),352px) minmax(0,1fr); gap:20px;align-items:start} :root[data-variant="C1"] .wbin, :root[data-variant="C1"] .wbout{ display:flex;flex-direction:column;gap:16px;min-width:0;max-width:100%} :root[data-variant="C1"] .wbin>*, :root[data-variant="C1"] .wbout>*{min-width:0;max-width:100%;margin-bottom:0} :root[data-variant="C1"] .wbin{position:sticky; top:calc(var(--da-header-height,0px) + var(--da-nav-height,0px) + 14px)} :root[data-variant="C1"] .wbin .ctlrow{flex-direction:column;align-items:stretch;gap:16px} :root[data-variant="C1"] .wbin .ctl{width:100%;flex:1 1 auto} :root[data-variant="C1"] .wbout .disc{margin-top:0} @media(max-width:1180px){ :root[data-variant="C1"] .wb{grid-template-columns:minmax(0,1fr)} :root[data-variant="C1"] .wbin{position:static} :root[data-variant="C1"] .wbin .ctlrow{flex-direction:row;flex-wrap:wrap} :root[data-variant="C1"] .wbin .ctl{width:auto} } /* The pane heading is the focus target of every navigation after the first, so the keyboard ring belongs on it. The baseline suppresses the ring on every h1 because the router also focuses the heading programmatically; this rule restores it for a heading reached from the keyboard, and only there. */ :root[data-variant="C1"] .pane h1[tabindex="-1"]:focus-visible{ outline:2px solid var(--sky);outline-offset:4px;border-radius:3px} /* ===== text contrast, light scheme ===== Measured on the candidate with the repaired shared probe (qa_frames.mjs 71d37af7..., window.__qa.lowContrast(4.5), every pane swept at 1440 and 390 px): fifteen text items below 4.5:1 in the light scheme and none in the dark one. All fifteen are inherited - the calculator's own light palette, the shell's on-dark muted used on a light footer, and one property disagreement inside the schematic. The dark scheme is clean, so every token below resolves to the value the page already uses and is redefined only where the page is light. */ /* The strip is a dark island in both schemes and its labels already paint a light ink through `fill`; only the inherited `color` disagreed, and a probe that reads `color` measures that. Declaring the ink each class paints with makes the two agree and moves no pixel: .blab and .antx paint --rf-mut, #A7AEB6, 8.60:1 on the stage; .endt and .axt paint --rf-fnt, #7D858E, 5.15:1. */ .rfstrip text{color:var(--rf-mut)} .rfstrip .endt,.rfstrip .axt{color:var(--rf-fnt)} :root[data-variant="C1"]{ --c-faint:var(--faint); --c-onhead:var(--muted); --c-footer:var(--da-muted); --c-schem:var(--orange); --c-corr:var(--green)} :root[data-variant="C1"]:not([data-theme="dark"]){ /* #8A98A8 to #616E7D navy, #8D8D88 to #666663 carbon: 2.60 becomes 4.60 on --pale, the darkest ground these ten small labels sit on, and the value stays lighter than --muted, so ink, muted and faint keep their order */ --c-faint:color-mix(in srgb,var(--faint) 65%,var(--ink)); /* the Appearance label sits on the product header, which is near-black in both schemes, so in light it takes the shell's own on-dark muted: 3.21 becomes 9.16 navy, 2.70 becomes 9.16 carbon */ --c-onhead:var(--da-muted); /* the return link inherits the shell's on-dark muted onto a light footer: 1.77 becomes 5.37 navy, 5.30 carbon */ --c-footer:color-mix(in srgb,var(--da-muted) 45%,var(--ink)); /* the two basis badges, on the card panel: 2.90 becomes 4.75 and 4.25 becomes 4.90 */ --c-schem:color-mix(in srgb,var(--orange) 65%,var(--ink)); --c-corr:color-mix(in srgb,var(--green) 80%,var(--ink))} :root[data-variant="C1"] .ngroup, :root[data-variant="C1"] .nitem .nnum, :root[data-variant="C1"] .byline, :root[data-variant="C1"] .card .s, :root[data-variant="C1"] .ctl .ends, :root[data-variant="C1"] .ctl .numwrap .nu, :root[data-variant="C1"] .pchip .pk, :root[data-variant="C1"] .eqcard .eqn, :root[data-variant="C1"] footer{color:var(--c-faint)} :root[data-variant="C1"] .applbl{color:var(--c-onhead)} :root[data-variant="C1"] .da-footer a{color:var(--c-footer)} :root[data-variant="C1"] .gcard .gbasis.schem{color:var(--c-schem);border-color:var(--c-schem)} :root[data-variant="C1"] .gcard .gbasis.corr{color:var(--c-corr);border-color:var(--c-corr)} /* ===== the accent as small text on a near-black ground ===== Measured on the carbon edition, which the light-scheme pass above does not reach: its dark accent #B8323F carries six small labels at 2.94 to 3.34:1 on the three dark grounds they sit on, one of them under the 3:1 floor the check matrix gates on. The served carbon edition carries the same six. One stylesheet serves both editions and cannot tell them apart, so both take the same step toward their own dark ink: carbon reaches 4.76 to 5.40 and navy rises from 5.30 to 7.35, hue unchanged in both. The light scheme is untouched - there --c-accent is --blue itself. */ :root[data-variant="C1"]{--c-accent:var(--blue)} :root[data-variant="C1"][data-theme="dark"]{ --c-accent:color-mix(in srgb,var(--blue) 70%,var(--ink))} :root[data-variant="C1"] .crumb, :root[data-variant="C1"] .guide-note li .stepn, :root[data-variant="C1"] .gcard .ge, :root[data-variant="C1"] .gcard .gtag, :root[data-variant="C1"] .howstrip .hs .hn, :root[data-variant="C1"] details.maptable>summary::before, :root[data-variant="C1"] .assump-list li::before, :root[data-variant="C1"] .reflist li::before{color:var(--c-accent)} :root[data-variant="C1"] .gcard .gbasis.ref{color:var(--c-accent);border-color:var(--c-accent)} /* ===== the schematic's narrow behaviour, by its own width ===== The strip marks itself rf-narrow when its host is narrower than the leader labels need; the labels and the annotation line are then hidden and the legend below carries the band names, as the page already does at a narrow window. */ .rfstrip.rf-narrow .lbg,.rfstrip.rf-narrow .anno{display:none} /* ===== the closed sidebar is out of the tab order ===== At 980 px and below the module sidebar slides off-canvas. While it is closed it is hidden from the keyboard and the accessibility tree as well as from sight; it becomes visible the moment it opens and hides again once it has slid away. */ @media(max-width:980px){ #sidenav:not(.open){visibility:hidden;transition:transform .18s ease,visibility 0s linear .18s} #sidenav.open{visibility:visible;transition:transform .18s ease,visibility 0s linear 0s} } @media(max-width:980px) and (prefers-reduced-motion:reduce){ #sidenav:not(.open),#sidenav.open{transition:none} }