/* Approved compact reading units. The numerical renderers still own their plots. */
.reader-scene-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:24px; align-items:start; }
.reader-scene-unit { min-width:0; align-self:start; padding:14px; border:1px solid var(--line,#d6e0eb); border-radius:14px; background:var(--panel,#fafcff); }
.reader-scene-story { min-width:0; font-size:15px; line-height:1.55; }
.reader-scene-story section { border-left:3px solid #e0e6ee; padding:0 0 15px 16px; margin:0 0 18px; }
.reader-scene-story h4 { margin:0 0 8px; font-size:16px; line-height:1.35; }
.reader-scene-story p { font-size:14px; line-height:1.55; margin:6px 0; }
.reader-scene-controls { display:flex; flex-wrap:wrap; gap:7px 12px; align-items:center; margin-bottom:9px; }
.reader-scene-controls > * { min-width:0; max-width:100%; margin:0; }
.reader-scene-controls button { min-height:36px; padding:6px 10px; font-size:13px; line-height:1.25; }
.reader-scene-controls label,.reader-scene-controls output { font-size:13px; }
.reader-scene-figure { min-width:0; }
/* KaTeX sizes its own SVG radicals and accents; resize only plot artwork.
   :where keeps this exclusion from increasing the layout rule's specificity. */
.reader-scene-unit svg:not(:where(.katex *)) { max-width:100%; min-width:0; height:auto; }
html.ra-on .reader-scene.ra-steps-pin [data-ra-steps-figure] svg:not(:where(.katex *)) { max-height:none; }
.reader-scene-reports { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; margin-top:8px; min-width:0; }
.reader-scene-reports > * { margin:0; min-width:0; grid-column:auto; grid-row:auto; }
.reader-scene-reports p { font-size:13px; line-height:1.45; min-height:0; }
.reader-scene-options { margin-top:18px; border:1px solid var(--line,#d6e0eb); border-radius:10px; padding:12px 15px; background:#fff; }
.reader-scene-options > summary { cursor:pointer; font-size:15px; font-weight:650; color:var(--blue,#235f9e); }
.reader-scene-options[open] > summary { margin-bottom:16px; }
.reader-scene-options > * { min-width:0; max-width:100%; }
html.ra-on .reader-scene-unit.reader-unit-fits { position:sticky; top:calc(var(--blog-sticky-stack-height,0px) + 12px); }
.ra-steps-current { display:none; margin:8px 0 0; padding:9px 0 0; border-top:1px solid var(--line,#d6e0eb); font-size:13px; line-height:1.45; }
.reader-scene .ra-steps-current > p { margin:.35em 0 0; font-size:inherit; line-height:inherit; }
html.ra-on .reader-scene .ra-steps-nav { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:10px; padding-top:8px; border-top:1px solid var(--line,#d6e0eb); }
html.ra-on .reader-scene .ra-steps-nav button { padding:7px 10px; min-height:38px; font-size:13px; }
html.ra-on .reader-scene .ra-steps-count { font-size:12px; flex:1 1 110px; }
.ra-steps-status { font-size:12px; width:100%; color:var(--muted,#596777); }
.ra-steps-local-navigation { min-width:0; width:100%; }
html.ra-on .reader-scene.ra-steps-buttons .ra-steps-current { display:block; }
html.ra-on .reader-scene [hidden] { display:none!important; }
/* Core Q1: the report belongs to the selected dataset, not to the cloud. */
#gaussianExperiment.reader-scene,#sampleThresholdExplorer.reader-scene { overflow:visible; }
#gaussianExperiment .reader-scene-unit .plot-scroll { min-width:0; overflow:visible; margin:0; }
#gaussianExperiment .reader-scene-unit .teaching-plot { min-width:0; width:100%; }
#gaussianExperiment .reader-scene-unit .plot-legend { font-size:12px; gap:6px 12px; margin:7px 0; }
#gaussianExperiment .reader-scene-unit .small-metrics { margin:0; padding:7px; font-size:12px; }
#gaussianExperiment .reader-scene-unit .small-metrics strong { font-size:23px; }
/* Core Q3: independent curves remain controls; detailed options stay available. */
#sampleThresholdExplorer.reader-scene { padding:18px; }
#sampleThresholdExplorer .reader-scene-unit .threshold-plot-frame { padding:0; margin:0; min-width:0; border:0; overflow:visible; }
#sampleThresholdExplorer .reader-scene-unit #thresholdPlot { width:100%; min-width:0; height:auto; max-width:770px; margin-inline:auto; display:block; }
#sampleThresholdExplorer .reader-scene-controls .threshold-control-target { display:grid; grid-template-columns:1fr 90px; width:100%; gap:4px 10px; padding:6px 9px; }
#sampleThresholdExplorer .reader-scene-controls .threshold-control-target input[type=range] { grid-column:1/-1; width:100%; margin:0; }
#sampleThresholdExplorer .reader-scene-controls .threshold-control-target input[type=number] { font-size:15px; min-height:30px; padding:3px 6px; }
#sampleThresholdExplorer .reader-scene-controls .threshold-control-target small { display:none; }
#sampleThresholdExplorer .reader-scene-controls #thresholdResourceViews { gap:4px; margin:0; width:100%; }
#sampleThresholdExplorer .reader-scene-controls #thresholdResourceViews button { flex:1 1 0; font-size:12px; padding:5px; }
#sampleThresholdExplorer .reader-scene-unit #thresholdWindowLegend { gap:4px 12px; margin:5px 0; font-size:11.5px; line-height:1.3; }
#sampleThresholdExplorer .reader-scene-unit #thresholdWindowLegend > small { font-size:inherit; }
#sampleThresholdExplorer .reader-scene-unit #thresholdNecessityInterval,
#sampleThresholdExplorer .reader-scene-unit #thresholdIntervalStatus { margin:4px 0; padding:0; font-size:12px; line-height:1.3; }
#sampleThresholdExplorer .reader-scene-unit #thresholdPricedLegend { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 0; }
#sampleThresholdExplorer .reader-scene-unit #thresholdPricedLegend button { min-height:32px; padding:5px 7px; font-size:11.5px; line-height:1.2; flex:1 1 auto; }
#sampleThresholdExplorer .reader-scene-unit #thresholdPricedLegend button::before { flex-basis:17px; }
#sampleThresholdExplorer .reader-scene-unit #thresholdPricedLegend > span { width:100%; font-size:11px; }
#sampleThresholdExplorer .reader-scene-unit #thresholdComparisonVerdict,
#sampleThresholdExplorer .reader-scene-unit #thresholdResourceVerdict { margin:0; padding:6px 8px; font-size:13px; line-height:1.4; min-height:0; }
#sampleThresholdExplorer .reader-scene-unit #thresholdSelectedResources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:0; }
#sampleThresholdExplorer .reader-scene-unit .traditional-cost { display:grid; grid-column:auto; grid-template-columns:minmax(0,1fr); align-content:start; gap:4px; padding:7px 6px; min-width:0; }
#sampleThresholdExplorer .reader-scene-unit .traditional-cost > * { grid-column:auto; min-width:0; text-align:left; }
#sampleThresholdExplorer .reader-scene-unit .traditional-cost > span { font-size:11.5px; line-height:1.3; }
#sampleThresholdExplorer .reader-scene-unit .traditional-cost strong { font-size:20px; line-height:1.2; margin:0; font-variant-numeric:tabular-nums; overflow-wrap:normal; }
#sampleThresholdExplorer .reader-scene-unit .traditional-jump-hint { display:none; }
#sampleThresholdExplorer .reader-scene-unit .quality-price { grid-column:1/-1; font-size:12px; margin:0; padding:4px; }
.reader-comparison-choice { margin-top:14px; }
#sampleThresholdExplorer .reader-scene-options .threshold-workbench { display:block; }
#sampleThresholdExplorer .reader-scene-options .threshold-workbench-controls { position:static; }
/* SGD: the trace and both report cards use the same selected update. */
#sgdInstrument .reader-scene-controls .sgd-rate-controls { width:100%; padding:0; }
#sgdInstrument .reader-scene-controls .sgd-scrub { width:100%; margin:0; box-sizing:border-box; }
#sgdInstrument .reader-scene-controls #sgdRate { width:100%; }
#sgdInstrument .reader-scene-unit #sgdRiskCanvas { width:100%; height:285px; }
#sgdInstrument .reader-scene-unit .sgd-legend { font-size:11px; gap:5px 10px; margin:6px 0; }
#sgdInstrument .reader-scene-unit .sgd-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; grid-column:auto; grid-row:auto; margin:0; }
#sgdInstrument .reader-scene-unit .sgd-metrics > div { display:block; padding:5px 0; }
#sgdInstrument .reader-scene-unit .sgd-metrics dd { margin:3px 0 0; text-align:left; font-size:23px; }
#sgdInstrument .reader-return-ledger { margin-top:10px; font-size:13px; }
#sgdInstrument .reader-return-ledger summary { color:var(--blue,#235f9e); cursor:pointer; font-weight:650; }
#sgdInstrument .sgd-return-example { padding:8px; margin-top:8px; }
#sgdInstrument .sgd-return-example h3 { font-size:16px; }
#sgdInstrument .sgd-probe-formula { font-size:13px; padding:8px; display:flex; flex-wrap:wrap; gap:7px; }
#sgdInstrument .sgd-nuisance-breakdown,#sgdInstrument #sgdReturnCopy { font-size:12px; line-height:1.4; }
@media(max-width:899px),(max-height:679px) {
 .reader-scene-layout { display:block; }
 .reader-scene-unit { padding:10px; position:static!important; }
 .reader-scene-story { margin-top:22px; }
 .reader-scene-controls button { min-height:40px; }
 html.ra-on .reader-scene .ra-steps-current { display:block; }
 #sampleThresholdExplorer.reader-scene { padding:10px; }
 #sampleThresholdExplorer .reader-scene-unit { display:flex; flex-direction:column; }
 #sampleThresholdExplorer .reader-scene-unit > :not(.series-live-status) { width:100%; }
 #sampleThresholdExplorer .reader-scene-controls { order:0; }
 #sampleThresholdExplorer .reader-scene-reports { order:1; margin:5px 0 8px; }
 #sampleThresholdExplorer .reader-scene-figure { order:2; }
 #sampleThresholdExplorer .ra-steps-current { order:3; }
 #sampleThresholdExplorer .ra-steps-nav { order:4; }
 #sampleThresholdExplorer .reader-scene-unit .traditional-cost strong { font-size:clamp(14px,4.2vw,20px); }
 #sampleThresholdExplorer .reader-scene-unit #thresholdPricedLegend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 #sampleThresholdExplorer .reader-scene-unit #thresholdPricedLegend > span { grid-column:1/-1; }
 #sgdInstrument .reader-scene-unit #sgdRiskCanvas { height:245px; }
}
@media print {
 .reader-scene-layout { display:block; }
 .reader-scene-unit { position:static!important; break-inside:avoid; }
 .ra-steps-nav,.ra-steps-current { display:none!important; }
 .reader-scene-story [data-ra-step] { opacity:1!important; }
}
@media(min-width:900px) and (min-height:680px) {
 /* Pinned figures have their explanation alongside. Button-driven guides
    keep the current explanation with their local navigation at every width. */
 html.ra-on .reader-scene .ra-steps-current { display:none; }
 #sampleThresholdExplorer .reader-scene-unit #thresholdPlot { max-width:640px; }
 #sampleThresholdExplorer .reader-scene-controls #thresholdResourceViews button { min-height:34px; }
 #sampleThresholdExplorer .reader-scene-controls .threshold-control-target { padding:4px 7px; }
}
@media(min-width:900px) and (min-height:680px) {
 html.ra-on .reader-scene.ra-steps-buttons .ra-steps-current { display:block; }
 #sampleThresholdExplorer .reader-scene-unit { padding:8px; }
 #sampleThresholdExplorer .reader-scene-unit #thresholdPlot { max-width:620px; }
 #sampleThresholdExplorer .reader-scene-controls #thresholdResourceViews button { min-height:34px!important; }
}
.reader-price-chooser { margin-top:8px; font-size:13px; }
.reader-price-chooser summary { cursor:pointer; color:var(--blue,#235f9e); }
.reader-price-chooser #thresholdComparisonChooser { margin:8px 0 0; gap:4px; }
.reader-price-chooser #thresholdComparisonChooser button { font-size:12px; min-height:34px; padding:5px 7px; }
@media(max-width:899px),(max-height:679px) {
 #sampleThresholdExplorer .reader-price-chooser { order:2; margin-bottom:8px; }
 #sampleThresholdExplorer .reader-scene-figure { order:3; }
 #sampleThresholdExplorer .ra-steps-current { order:4; }
 #sampleThresholdExplorer .ra-steps-nav { order:5; }
}
[data-ra-hl-group="core-dataset"] { --ra-c-interp:#202a36; --ra-c-ray:#b3484a; }
#gaussianExperiment .reader-scene-unit > .reader-scene-options { margin:0 0 12px; padding:8px 10px; }
#gaussianExperiment .reader-scene-unit > .reader-scene-options[open] > summary { margin-bottom:8px; }
#gaussianExperiment .reader-scene-options .controls { gap:6px; margin:8px 0; }
#gaussianExperiment .reader-scene-options .controls button { min-height:36px; padding:6px 9px; font-size:13px; }
#gaussianExperiment .iid-cloud-sliders { margin:8px 0; }
#gaussianExperiment .iid-cloud-sliders .field-line { margin:0; font-size:13px; }
@media(max-width:540px) {
 #gaussianExperiment #iidCloudPlot text { font-size:28px; }
}
#sampleThresholdExplorer > .reader-price-chooser { margin:0 0 10px; }
/* Core B: first compare two minima on fixed data, then reveal their resource
   prices. The same live controls and solver serve the guide and free use. */
#thresholdFixedDataPlot { width:100%; max-width:480px; display:block; margin:0 auto; }
#thresholdFixedDataContext { font-size:13px; margin:0 0 8px; }
#thresholdFixedDataResult { font-size:14px; line-height:1.5; padding:9px; margin:4px 0; }
html.ra-on #sampleThresholdExplorer .reader-scene-layout { display:block; }
html.ra-on #sampleThresholdExplorer .reader-scene-unit { display:flex; flex-direction:column; max-width:820px; margin-inline:auto; position:static; }
/* Keep the injected screen-reader announcements at the shared 1px width.
   A full-viewport absolute box would overflow when inset inside the figure. */
html.ra-on #sampleThresholdExplorer .reader-scene-unit > :not(.series-live-status) { width:100%; }
html.ra-on #sampleThresholdExplorer .reader-scene-story { display:none; }
html.ra-on #sampleThresholdExplorer .reader-scene-figure { order:2; }
html.ra-on #sampleThresholdExplorer .reader-scene-reports { order:3; }
html.ra-on #sampleThresholdExplorer #corePriceGuide { order:1; }
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) .reader-scene-figure { order:1; }
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) #corePriceGuide { order:2; }
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) .reader-scene-reports { order:3; }
html.ra-on #sampleThresholdExplorer .ra-steps-current { display:block; }
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) #coreSgdSaving { display:none; }
html.ra-on #sampleThresholdExplorer[data-core-teaching-stage="prediction"] #thresholdResourceViews,
html.ra-on #sampleThresholdExplorer[data-core-teaching-stage="baseline"] #thresholdResourceViews,
html.ra-on #sampleThresholdExplorer[data-core-teaching-stage="prediction"] .threshold-control-target,
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) .threshold-plot-frame,
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) #thresholdPricedLegend,
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) .reader-scene-figure > .threshold-help,
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) #thresholdCapControls,
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) #thresholdComparisonVerdict,
html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="prediction"],[data-core-teaching-stage="baseline"]) #thresholdSelectedResources { display:none!important; }
#sampleThresholdExplorer .traditional-selected-score { font-size:12px; line-height:1.4; color:#334254; }
#sampleThresholdExplorer:is([data-core-teaching-stage="price"],[data-core-teaching-stage="zeroGap"],[data-core-teaching-stage="quality"],[data-core-teaching-stage="explore"]) #thresholdFixedData { display:none; }
#thresholdComparebaselineCap { --comparison-color:#b43468; }
#thresholdComparezeroGap { --comparison-color:#167c88; }
#thresholdCompareinterp { --comparison-color:#18212f; }
#thresholdComparisonChooser button { border-bottom:3px solid var(--comparison-color); }
@media(min-width:1000px) and (min-height:560px) {
 /* Keep each resource plot beside its current question and comparison. */
 html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="price"],[data-core-teaching-stage="zeroGap"],[data-core-teaching-stage="quality"],[data-core-teaching-stage="explore"]) .reader-scene-unit {
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:8px 18px; max-width:none; align-items:start;
 }
 html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="price"],[data-core-teaching-stage="zeroGap"],[data-core-teaching-stage="quality"],[data-core-teaching-stage="explore"]) .reader-scene-controls { grid-column:1/-1; grid-row:1; }
 html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="price"],[data-core-teaching-stage="zeroGap"],[data-core-teaching-stage="quality"],[data-core-teaching-stage="explore"]) .reader-scene-figure { grid-column:1; grid-row:2/4; }
 html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="price"],[data-core-teaching-stage="zeroGap"],[data-core-teaching-stage="quality"],[data-core-teaching-stage="explore"]) #corePriceGuide { grid-column:2; grid-row:2; }
 html.ra-on #sampleThresholdExplorer:is([data-core-teaching-stage="price"],[data-core-teaching-stage="zeroGap"],[data-core-teaching-stage="quality"],[data-core-teaching-stage="explore"]) .reader-scene-reports { grid-column:2; grid-row:3; margin-top:0; }
 /* Free exploration has only a short resume control, not a teaching card. */
 html.ra-on #sampleThresholdExplorer[data-core-teaching-stage="explore"] .reader-scene-unit { grid-template-rows:auto max-content 1fr; }
 html.ra-on #sampleThresholdExplorer #thresholdGuideCountNote { grid-column:1/-1; }
}
@media print {
 #sampleThresholdExplorer .reader-scene-story,#sampleThresholdExplorer .threshold-plot-frame,#sampleThresholdExplorer #thresholdSelectedResources { display:block!important; }
 #sampleThresholdExplorer #coreSgdSaving:not([hidden]) { display:block!important; }
}
