/* The forecast lab, drawn from the site's own tokens.

   Its own names are prefixed because two of them collide with the site's and
   mean different things: --faint is a pale surface here and a text colour
   there, so an unprefixed variable would silently pick up the wrong value.

   The three lines on the price chart were checked by calculation rather than
   by eye. Against the white ground they read 6.5:1, 13.8:1 and 3.6:1, and they
   separate by at least 37 CIELAB deltaE under normal vision and under both
   protanopia and deuteranopia, against floors of 24 and 17. Each also carries
   its own dash pattern, so identity never rests on colour alone. */
.fx{
  --fx-ink:var(--ink);            /* Lyons Blue, the site's text colour */
  --fx-teal:var(--accent);        /* Directoire Blue, the one hot accent, for the lead series */
  --fx-muted:var(--muted);
  --fx-line:var(--hair);
  --fx-faint:var(--wash);
  --fx-band:var(--s1);            /* the experimental range, lightest step of the sequential ramp */
  --fx-amber:var(--d-idle);       /* the benchmark line. A cool neutral, because only the lead series takes the accent */
  --fx-amber-bg:var(--alert-wash);
  --fx-red:var(--alert);
  --fx-actual:#16303B;            /* Lyons Blue darkened, for the observed outcome */
}
.fx *{box-sizing:border-box}
.fx button, .fx input, .fx select{font:inherit}
.fx button, .fx a, .fx input, .fx select, .fx summary{-webkit-tap-highlight-color:transparent}
.fx a{color:var(--fx-teal);text-underline-offset:4px}
.fx button{cursor:pointer}
.fx button:disabled{cursor:default;opacity:.5}
.fx button:focus-visible, .fx a:focus-visible, .fx input:focus-visible, .fx select:focus-visible, .fx summary:focus-visible, .fx [tabindex]:focus-visible{outline:3px solid #087897;outline-offset:4px}
.fx button{transition:background-color 120ms ease,color 120ms ease}
.fx p, .fx h2, .fx h3{margin-top:0}
.fx h2, .fx h3{font-weight:600;line-height:1.12;letter-spacing:-.045em}
.fx h2{font-size:clamp(28px,3vw,38px);margin-bottom:12px}
.fx h3{font-size:22px;letter-spacing:-.025em}
.fx .muted, .fx .metric-note{color:var(--fx-muted)}
.fx .eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;line-height:1.5;margin-bottom:15px;text-transform:uppercase}
.fx .small-square{display:inline-block;width:7px;height:7px;background:var(--fx-teal);margin-right:10px;flex-shrink:0}
.fx .section-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.fx .section-head .eyebrow{margin-bottom:10px}
.fx .section-sub{font-size:12px;color:var(--fx-muted);margin:0}
.fx .section-actions{display:flex;gap:8px;align-self:flex-end;margin-bottom:4px}
.fx .button, .fx .icon-button{border:1px solid #b8c9d0;background:#fff;padding:9px 13px;border-radius:3px;color:var(--fx-teal);font-size:11px;line-height:20px;min-height:40px;font-weight:600}
.fx .button span{margin-left:15px}
.fx .button:hover, .fx .icon-button:hover{background:var(--fx-faint);border-color:var(--fx-teal)}
.fx .mode-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--fx-line);margin-bottom:19px;padding-bottom:14px;gap:12px}
.fx .segmented{display:flex;border:1px solid var(--fx-line);border-radius:4px;padding:3px;gap:2px;background:#fff}
.fx .segmented button{border:0;border-radius:2px;background:transparent;padding:8px 15px;color:var(--fx-muted);font-size:11px;min-height:36px}
.fx .segmented button[aria-pressed="true"]{background:var(--fx-teal);color:#fff}
.fx .quiet-tag{font-size:10px;color:var(--fx-muted);letter-spacing:.015em;white-space:nowrap}
.fx .plot-layout{display:grid;grid-template-columns:minmax(0,1fr) 246px;gap:30px}
.fx .plot-column{min-width:0}
.fx .legend{display:flex;flex-wrap:wrap;gap:9px 19px;color:var(--fx-muted);font-size:10px;align-items:center;min-height:36px;margin-bottom:9px}
.fx .legend span, .fx .legend label{display:inline-flex;align-items:center;gap:7px}
.fx .legend label{cursor:pointer;min-height:32px}
.fx .legend input{accent-color:var(--fx-teal);width:12px;height:12px;margin:0}
.fx .legend i{width:18px;display:inline-block;flex-shrink:0}
.fx .legend-line{border-top:2px solid var(--fx-teal)}
.fx .legend-range{height:10px;background:var(--fx-band);border-top:1px solid #82aabb;border-bottom:1px solid #82aabb}
.fx .legend-actual{border-top:2px dashed var(--fx-ink)}
.fx .legend-baseline{border-top:2px dotted var(--fx-amber)}
.fx .chart-wrap{width:100%;height:340px;position:relative;touch-action:pan-y}
.fx .chart-wrap svg{display:block;width:100%;height:100%;overflow:visible}
.fx .inspect-control{display:flex;align-items:center;gap:15px;margin:12px 0 9px;font-size:10px;color:var(--fx-muted)}
.fx .inspect-control label{white-space:nowrap}
.fx .inspect-control input{flex:1;min-width:60px;accent-color:var(--fx-teal);height:24px;cursor:pointer}
.fx .inspect-control output{min-width:68px;text-align:right;color:var(--fx-teal);font-weight:600;font-variant-numeric:tabular-nums}
.fx .chart-note{color:var(--fx-muted);font-size:10px;line-height:1.6;max-width:650px;margin-bottom:0}
.fx .hour-panel{border-left:1px solid var(--fx-line);padding:17px 0 0 25px}
.fx .hour-panel .eyebrow{color:var(--fx-muted);font-size:9px}
.fx .hour-panel h3{font-size:20px;margin-bottom:24px;letter-spacing:-.025em}
.fx .readout{display:flex;align-items:baseline;gap:7px;margin-bottom:0;color:var(--fx-teal);font-variant-numeric:tabular-nums}
.fx .readout>span:first-child{font-size:51px;line-height:1;letter-spacing:-.06em;font-weight:500}
.fx .unit{font-size:11px}
.fx .readout-label{font-size:10px;color:var(--fx-muted);margin:8px 0 20px}
.fx .hour-details{font-size:11px;margin:0}
.fx .hour-details>div{padding:10px 0;border-top:1px solid var(--fx-line)}
.fx .hour-details dt{color:var(--fx-muted);margin-bottom:2px}
.fx .hour-details dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;font-size:13px}
.fx .interpretation{display:flex;align-items:baseline;gap:1px;margin-top:18px;color:var(--fx-muted)}
.fx .interpretation p{font-size:10px;line-height:1.6;margin-bottom:0}
.fx .interpretation .small-square{width:5px;height:5px}
.fx .context-strip{display:grid;grid-template-columns:175px 1fr 1fr 230px;border-top:1px solid var(--fx-line);border-bottom:1px solid var(--fx-line);margin-top:26px;padding:23px 0;gap:24px;align-items:center}
.fx .context-label .eyebrow{margin:0 0 5px;font-size:9px}
.fx .context-label>span{font-size:11px;color:var(--fx-muted);line-height:1.4;display:block}
.fx .context-item{border-left:1px solid var(--fx-line);padding-left:24px;min-width:0}
.fx .context-item>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:var(--fx-muted);margin-bottom:5px}
.fx .context-item strong{font-size:15px;color:var(--fx-ink);white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums}
.fx .sparkline{height:37px}
.fx .sparkline svg{width:100%;height:100%;display:block}
.fx .context-note{color:var(--fx-muted);font-size:10px;line-height:1.6;margin:0}
.fx .data-detail{border-bottom:1px solid var(--fx-line);font-size:12px}
.fx .data-detail summary{padding:16px 0;cursor:pointer;font-weight:600}
.fx .data-detail summary span{float:right;font-weight:400;color:var(--fx-muted);font-size:10px}
.fx .table-scroll{overflow:auto;margin-bottom:20px}
.fx table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
.fx caption{text-align:left;color:var(--fx-muted);font-size:11px;margin:10px 0}
.fx th, .fx td{padding:12px 10px;border-bottom:1px solid var(--fx-line);text-align:right;white-space:nowrap}
.fx th{font-weight:600;font-size:11px}
.fx th:first-child, .fx td:first-child{text-align:left}
.fx tbody tr:hover{background:var(--fx-faint)}
.fx .provenance-bar{display:flex;justify-content:space-between;gap:15px;padding:16px 0;color:var(--fx-muted);font-size:10px}
.fx .provenance-bar>span{display:flex;flex-direction:column;gap:3px}
.fx .provenance-bar b{font-weight:500;color:var(--fx-ink)}
.fx .track-section{margin-top:58px;padding-top:34px;border-top:2px solid var(--fx-ink)}
.fx .track-section .section-head{align-items:flex-end}
.fx .performance-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:65px;margin-top:30px}
.fx .panel-title{display:flex;justify-content:space-between;align-items:baseline;gap:15px}
.fx .panel-title h3{font-size:20px;margin-bottom:12px}
.fx .panel-title span{font-size:10px;color:var(--fx-muted)}
.fx .comparison>.muted{font-size:11px;margin-bottom:26px}
.fx .bar-row{display:grid;grid-template-columns:1fr 55px;gap:8px;margin-bottom:21px}
.fx .bar-label{font-size:12px;margin-bottom:6px;display:flex;flex-direction:column;gap:1px;line-height:1.4}
.fx .bar-label small{font-size:9px;color:var(--fx-muted)}
.fx .bar-number{grid-column:2;grid-row:1 / 3;align-self:center;text-align:right;font-size:22px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;font-weight:500}
.fx .bar-track{height:7px;background:var(--fx-faint);margin-right:14px;grid-column:1}
.fx .bar-fill{height:100%;background:var(--fx-teal);max-width:100%}
.fx .bar-row[data-id=demand] .bar-fill{background:var(--fx-muted)}
.fx .bar-row[data-id=baseline] .bar-fill{background:var(--fx-amber)}
.fx .metric-note{font-size:10px;line-height:1.65;margin-top:24px}
.fx .coverage-panel{padding-left:36px;border-left:1px solid var(--fx-line)}
.fx .coverage-number{display:flex;align-items:center;gap:22px}
.fx .coverage-number strong{font-size:56px;letter-spacing:-.065em;line-height:1.1;font-weight:500;color:var(--fx-teal);white-space:nowrap}
.fx .coverage-number strong span{font-size:27px;margin-left:3px}
.fx .coverage-number>span{font-size:11px;color:var(--fx-muted)}
.fx #coverage-chart{height:60px;margin:15px 0 4px}
.fx .coverage-panel>p:not(.eyebrow){font-size:11px;color:var(--fx-muted);line-height:1.7}
.fx .live-count{display:flex;align-items:center;gap:19px;margin-top:20px;padding-top:16px;border-top:1px solid var(--fx-line)}
.fx .live-count b{font-size:35px;font-weight:500;line-height:1.1;letter-spacing:-.03em}
.fx .live-count>span:not(.hollow-dot){font-size:10px;color:var(--fx-muted)}
.fx .hollow-dot{width:9px;height:9px;border:1.5px solid var(--fx-teal);border-radius:100%;display:inline-block;flex-shrink:0}
.fx .live-count .hollow-dot{margin-left:auto}
.fx .daily-strip{margin:35px 0 0;border-top:1px solid var(--fx-line);padding-top:18px}
.fx .daily-strip>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:20px;font-size:11px;margin-bottom:10px}
.fx .daily-strip>div:first-child span{font-size:10px;color:var(--fx-muted)}
.fx #daily-heatmap{display:grid;grid-template-columns:repeat(92,minmax(0,1fr));gap:3px;min-height:29px}
.fx .heat-day{height:29px;display:block}
.fx .daily-strip>p{display:flex;justify-content:space-between;font-size:9px;color:var(--fx-muted);margin:6px 0 0}
.fx .learning-section{margin-top:58px;padding-top:33px;border-top:2px solid var(--fx-ink)}
.fx .learning-intro{max-width:395px;font-size:13px;color:var(--fx-muted);margin:0}
.fx .learning-status{display:flex;align-items:center;gap:12px;padding:15px 0;border-top:1px solid var(--fx-line);border-bottom:1px solid var(--fx-line);font-size:11px;margin:24px 0}
.fx .learning-status b{font-weight:600}
.fx .learning-status>span:last-child{margin-left:auto;color:var(--fx-muted)}
.fx .learning-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;padding-top:8px}
.fx .learning-steps article{padding-right:24px;border-right:1px solid var(--fx-line)}
.fx .learning-steps article:last-child{border:0;padding:0}
.fx .step-no{font-size:10px;color:var(--fx-teal);display:block;margin-bottom:17px}
.fx .learning-steps h3{font-size:24px;margin-bottom:13px}
.fx .learning-steps p{font-size:12px;color:var(--fx-muted);line-height:1.7;margin-bottom:16px}
.fx .step-meta{font-size:9px;font-weight:600;color:var(--fx-teal)}
.fx .learning-footnote{display:flex;justify-content:space-between;gap:15px;margin-top:28px;color:var(--fx-muted);font-size:10px;border-top:1px solid var(--fx-line);padding-top:15px}
.fx .learning-footnote b{font-weight:500;color:var(--fx-ink)}
.fx .method-section{display:grid;grid-template-columns:1fr 1.3fr;gap:85px;border-top:1px solid var(--fx-line);margin-top:62px;padding:38px 0 50px}
.fx .method-section>.muted, .fx .method-section>div>.muted{font-size:13px;max-width:345px}
.fx .method-questions details{border-bottom:1px solid var(--fx-line)}
.fx .method-questions summary{padding:15px 0;cursor:pointer;font-size:12px;font-weight:600}
.fx .method-questions details:first-child summary{padding-top:0}
.fx .method-questions details p{font-size:12px;color:var(--fx-muted);line-height:1.7;padding:0 0 4px}
.fx .source-note{font-size:10px;line-height:1.7;color:var(--fx-muted);margin:24px 0 0}
.fx footer>span{font-size:12px;letter-spacing:.13em}
.fx .empty-state{min-height:412px;border-top:1px solid var(--fx-line);border-bottom:1px solid var(--fx-line);position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:55px 25px;text-align:center}
.fx .empty-state[hidden], .fx [hidden]{display:none!important}
.fx .empty-state h3{font-size:37px;color:var(--fx-teal);margin-bottom:16px}
.fx .empty-state>p:not(.eyebrow){max-width:490px;font-size:13px;color:var(--fx-muted)}
.fx .empty-state .eyebrow{margin-top:25px;font-size:9px}
.fx .empty-symbol{display:flex;gap:7px;align-items:flex-end;height:38px}
.fx .empty-symbol>span{width:11px;border:1px solid #7ca2b0;height:26px;background:var(--fx-faint)}
.fx .empty-symbol>span:nth-child(2){height:38px}
.fx .empty-symbol>span:nth-child(3){height:19px}
.fx .empty-status{display:flex;align-items:center;gap:10px;font-size:11px;margin:10px 0 24px}
@media(min-width:1700px){.fx{--fx-measure:1392px}.fx .chart-wrap{height:370px}}
@media(max-width:1340px){.fx .context-strip{grid-template-columns:140px 1fr 1fr 200px;gap:17px}.fx .context-item{padding-left:17px}}
@media(max-width:1000px){.fx .plot-layout{grid-template-columns:minmax(0,1fr) 205px;gap:19px}.fx .hour-panel{padding-left:18px}.fx .readout>span:first-child{font-size:43px}.fx .context-strip{grid-template-columns:140px 1fr 1fr}.fx .context-note{grid-column:1 / -1}.fx .performance-layout{gap:30px}.fx .coverage-panel{padding-left:25px}.fx .coverage-number{gap:13px}.fx .coverage-number strong{font-size:47px}.fx .method-section{gap:40px}.fx .learning-status>span:last-child{max-width:280px}}
@media(max-width:760px){.fx .section-head{align-items:flex-start;gap:15px;margin-bottom:19px;flex-wrap:wrap}.fx .section-head .eyebrow{font-size:8px}.fx .section-head h2{font-size:28px;line-height:1.12}.fx .section-sub{font-size:10px}.fx .section-actions{align-self:auto;margin:0;width:100%;justify-content:flex-start}.fx .button, .fx .icon-button{font-size:10px;padding:6px 11px;min-height:36px}.fx .mode-row{flex-direction:column;align-items:flex-start;margin-bottom:12px;gap:7px}.fx .segmented{max-width:100%;width:100%}.fx .segmented button{font-size:9px;padding:6px 7px;flex:1;min-height:34px;white-space:nowrap}.fx .quiet-tag{font-size:9px;white-space:normal}.fx .plot-layout{display:block}.fx .legend{font-size:9px;gap:3px 12px;line-height:1.4;margin-bottom:3px}.fx .legend i{width:13px}.fx .chart-wrap{height:268px}.fx .inspect-control{gap:10px;font-size:9px;margin-top:4px}.fx .inspect-control label{max-width:72px;white-space:normal;line-height:1.4}.fx .chart-note{font-size:9px;line-height:1.6}.fx .hour-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:15px;border-left:0;border-top:1px solid var(--fx-line);padding:18px 0 0;margin-top:20px}.fx .hour-panel>.eyebrow{grid-column:1;font-size:8px;margin-bottom:6px}.fx .hour-panel h3{grid-column:1;font-size:18px;margin-bottom:18px}.fx .readout{grid-column:1;grid-row:3}.fx .readout>span:first-child{font-size:43px}.fx .unit{font-size:9px}.fx .readout-label{grid-column:1;font-size:9px;margin:6px 0 0}.fx .hour-details{grid-column:2;grid-row:1 / 5;font-size:9px;border-left:1px solid var(--fx-line);padding-left:15px}.fx .hour-details>div{padding:6px 0}.fx .hour-details>div:first-child{border-top:0;padding-top:0}.fx .hour-details dd{font-size:12px}.fx .interpretation{grid-column:1 / -1;margin-top:14px}.fx .interpretation p{font-size:9px}.fx .context-strip{grid-template-columns:1fr 1fr;gap:17px;padding:17px 0;margin-top:20px}.fx .context-label{grid-column:1 / -1;display:flex;align-items:baseline;gap:15px}.fx .context-label>span{font-size:9px}.fx .context-label>span br{display:none}.fx .context-item{padding-left:0;border-left:0}.fx .context-item>div:first-child{display:block;font-size:9px}.fx .context-item strong{display:block;font-size:16px;margin-top:3px}.fx .context-note{font-size:9px}.fx .data-detail summary{font-size:10px;padding:14px 0}.fx .data-detail summary span{font-size:9px}.fx .provenance-bar{display:grid;grid-template-columns:1fr 1fr;font-size:9px;row-gap:15px}.fx .track-section{margin-top:28px;padding-top:27px}.fx .track-section h2{font-size:29px;max-width:320px}.fx .performance-layout{display:block;margin-top:22px}.fx .panel-title h3{font-size:19px}.fx .panel-title span{font-size:9px}.fx .comparison>.muted{font-size:10px}.fx .bar-label{font-size:11px}.fx .bar-number{font-size:22px}.fx .metric-note{font-size:9px}.fx .coverage-panel{border-left:0;border-top:1px solid var(--fx-line);padding:25px 0 0;margin-top:25px}.fx .coverage-panel .eyebrow{font-size:9px}.fx .coverage-number strong{font-size:52px}.fx .coverage-panel>p:not(.eyebrow){font-size:10px}.fx .daily-strip>div:first-child{display:block;font-size:10px}.fx .daily-strip>div:first-child span{display:block;font-size:9px;margin-top:5px}.fx #daily-heatmap{gap:2px;grid-template-columns:repeat(46,minmax(0,1fr))}.fx .heat-day{height:17px}.fx .learning-section{margin-top:36px;padding-top:28px}.fx .learning-intro{font-size:12px;max-width:100%}.fx .learning-section .section-head{gap:5px}.fx .learning-status{flex-wrap:wrap;font-size:10px;margin:18px 0}.fx .learning-status>span:last-child{width:100%;margin:0 0 0 21px;max-width:none;font-size:9px}.fx .learning-steps{grid-template-columns:1fr 1fr;gap:25px 22px}.fx .learning-steps article{padding-right:13px}.fx .learning-steps article:nth-child(2){border-right:0}.fx .learning-steps h3{font-size:23px}.fx .learning-steps p{font-size:11px}.fx .step-meta{font-size:8px}.fx .step-no{margin-bottom:10px;font-size:9px}.fx .learning-footnote{display:block;font-size:9px}.fx .learning-footnote b{display:block;margin-top:7px}.fx .method-section{display:block;margin-top:36px;padding-top:28px}.fx .method-section>div>.muted{font-size:12px;margin-bottom:26px}.fx .method-questions summary{font-size:11px}.fx .method-questions details p{font-size:11px}.fx .source-note{font-size:9px}.fx footer>span{font-size:10px}.fx .empty-state{padding:35px 15px;min-height:370px}.fx .empty-state h3{font-size:29px}.fx .empty-state>p:not(.eyebrow){font-size:12px}.fx .empty-status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.fx *, .fx *::before, .fx *::after{transition:none!important;animation:none!important}}
@media print{.fx .section-actions, .fx .inspect-control, .fx .segmented, .fx .data-detail summary, .fx #show-research{display:none!important}.fx .track-section, .fx .learning-section, .fx .method-section{break-inside:avoid}.fx .chart-wrap{height:280px}.fx .plot-layout{grid-template-columns:1fr 190px}.fx .hour-panel{display:block;border-left:1px solid #aaa;padding-left:18px}.fx .hour-details{border:0;padding:0}}
.fx .legend, .fx .chart-note, .fx .context-note, .fx .metric-note, .fx .source-note, .fx .coverage-panel>p:not(.eyebrow), .fx .learning-footnote{font-size:11px}
.fx .provenance-bar, .fx .learning-status, .fx .context-item>div:first-child, .fx .hour-details, .fx .readout-label, .fx .interpretation p{font-size:11px}
@media(max-width:760px){.fx .legend{font-size:10px}.fx .chart-note, .fx .context-note, .fx .metric-note, .fx .source-note, .fx .learning-footnote, .fx .provenance-bar, .fx .interpretation p, .fx .learning-status{font-size:11px}.fx .learning-steps p, .fx .method-questions details p, .fx .method-questions summary, .fx .coverage-panel>p:not(.eyebrow){font-size:12px}.fx .context-item>div:first-child, .fx .hour-details, .fx .readout-label, .fx .step-meta, .fx .bar-label small{font-size:10px}.fx .learning-status>span:last-child{font-size:10px}}
.fx .bar-note{grid-column:1 / -1;font-size:10px;line-height:1.6;color:var(--fx-muted);margin:6px 14px 0 0}
.fx .bar-row[data-id=linear] .bar-fill{background:var(--fx-amber)}
.fx .diagnostic{border-left:3px solid var(--fx-teal);padding:2px 0 2px 16px;margin-top:26px}
.fx .diagnostic .eyebrow{margin-bottom:8px;color:var(--fx-muted);font-size:9px}
.fx .diagnostic p{font-size:12px;line-height:1.65;margin-bottom:8px}
.fx .diagnostic .muted{font-size:11px;line-height:1.65}
.fx .diagnostic p:last-child{margin-bottom:0}
.fx .diagnostic.wide{margin-top:32px;max-width:880px}
.fx #diag-failure{border-left-color:var(--fx-red)}
.fx .heat-flag{outline:1.5px solid var(--fx-red);outline-offset:1px}
.fx .limits-block{border-top:1px solid var(--fx-line);margin-top:26px;padding-top:20px}
.fx .limits-block h3{font-size:16px;margin-bottom:12px}
.fx .limits-block ul{margin:0 0 14px;padding-left:18px}
.fx .limits-block li{font-size:12px;line-height:1.7;color:var(--fx-muted);margin-bottom:8px}
.fx .limits-block>p{font-size:11px;line-height:1.7;margin:0}
.fx .limits-block code{font-size:11px}
@media(max-width:760px){.fx .bar-note{font-size:11px;margin-right:0}.fx .diagnostic p{font-size:12px}.fx .diagnostic .muted, .fx .limits-block li{font-size:11px}}
/* The compact page head. The pack shipped a 74px marketing hero and a block
   warning, which together pushed the price curve 774px down a 1512 wide page
   and clean off the bottom of a phone. Measured, not guessed: at 390x844 the
   chart started 18px below the fold and no part of it was visible on landing.
   The curve is the reason the page exists, so the type above it was cut. */
.fx .fxhead{padding:26px 0 20px;max-width:760px}
.fx .fxhead .eyebrow{margin-bottom:12px;display:flex;align-items:center}
.fx .fxhead h1{font-size:clamp(26px,3.1vw,38px);line-height:1.12;letter-spacing:-.035em;
  margin:0 0 12px;font-weight:600;color:var(--fx-ink)}
.fx .fxstand{font-size:14px;line-height:1.6;color:var(--fx-muted);margin:0 0 14px;max-width:660px}
.fx .fxwarn{display:block;border-left:3px solid var(--fx-red);background:var(--fx-amber-bg);
  padding:10px 14px;font-size:11.5px;line-height:1.6;color:var(--fx-ink);margin:0}
.fx .fxwarn b{color:var(--fx-red)}
.fx .fxwarn a{white-space:nowrap;font-weight:600}

/* The rest of the height the curve needed, taken from the furniture around it
   rather than from the chart, which keeps its full 340px. */
.fx .forecast-section .section-head{margin-bottom:16px}
.fx .forecast-section .section-head h2{font-size:clamp(22px,2.2vw,28px);margin-bottom:6px}
.fx .mode-row{margin-bottom:12px;padding-bottom:10px}
.fx .legend{min-height:28px;margin-bottom:6px}
.fx .track-section,.fx .learning-section{margin-top:44px;padding-top:28px}
.fx .method-section{margin-top:44px;padding-top:30px}

/* The site's shell owns the page width and the type face, so the lab stops
   setting its own. */
.fx{font-size:15px;line-height:1.6;color:var(--fx-ink)}
.fx h1,.fx h2,.fx h3{font-weight:600}

@media(max-width:760px){
  .fx .fxhead{padding:18px 0 16px}
  .fx .fxstand{font-size:13px}
  .fx .fxwarn{font-size:11px;padding:9px 12px}
  .fx .fxwarn a{display:block;margin-top:4px}
  .fx .track-section,.fx .learning-section,.fx .method-section{margin-top:32px;padding-top:24px}
}


/* The scoreboard's number column was a fixed 55px, which fits the pack's own
   Inter but not the site's face: "19.80" at 22px needed 59, the grid spilled
   its 4px past the container, and the whole page scrolled sideways on a phone.
   Measured at 390 and 320 wide, where every other page on the site reads clean.
   An auto track sizes to whatever the number and the typeface actually need. */
.fx .bar-row{grid-template-columns:minmax(0,1fr) auto}
.fx .bar-label{min-width:0}
.fx .bar-number{padding-left:10px}

/* The head, trimmed again after measuring the built page. The headline was
   wrapping to a second line at 38px and the standfirst ran to three, which
   together held the hour slider below the fold on a 900px screen. */
.fx .fxhead{padding:18px 0 14px;max-width:720px}
.fx .fxhead h1{font-size:clamp(25px,2.7vw,34px);margin-bottom:10px}
.fx .fxstand{margin-bottom:12px;max-width:640px}
.fx .forecast-section .section-head{margin-bottom:12px}
.fx .forecast-section .section-head h2{font-size:clamp(21px,2vw,25px)}

@media(max-width:760px){
  /* On a phone the whole point is that the curve is on the first screen, so the
     furniture above it gives up its spare height rather than the chart. */
  .fx .fxhead{padding:12px 0 12px}
  .fx .fxhead h1{font-size:23px;line-height:1.15;margin-bottom:8px}
  .fx .fxstand{font-size:12.5px;line-height:1.55;margin-bottom:10px}
  .fx .fxwarn{padding:8px 11px;font-size:10.5px;line-height:1.5}
  .fx .forecast-section .section-head{margin-bottom:10px;gap:8px}
  .fx .forecast-section .section-head h2{font-size:22px}
  .fx .section-sub{font-size:10px;line-height:1.4}
  .fx .section-actions{width:auto;gap:6px}
  .fx .mode-row{margin-bottom:8px;padding-bottom:8px;gap:5px}
  .fx .legend{min-height:0;gap:2px 10px;margin-bottom:4px}
  .fx .chart-note{margin-top:6px}
}

/* On a phone the curve has to be on the first screen, so three pieces of
   furniture that repeat information available elsewhere step aside. The
   delivery-day subtitle is restated in the methodology, and the method label
   is already shown by which segmented button is pressed. Measured at 390x844,
   where the chart was entirely below the fold before any of this. */
@media(max-width:760px){
  .fx .forecast-section .section-head .section-sub{display:none}
  .fx .mode-row .quiet-tag{display:none}
  .fx .mode-row{gap:0}
}

/* The state of the page, said once and said loudly.

   Gary read the live page on 13 September and took the 15 July chart for a
   stale forecast, which is exactly what a stranger would do. The date was the
   biggest thing on its row and the words that explain it were ten pixel grey
   capitals above it. The state is now a chip that reads as a label rather than
   as decoration, and the headline no longer promises a price the page cannot
   give. */
.fx #view-eyebrow{display:inline-block;margin-bottom:9px;padding:5px 10px;border-radius:3px;
  background:var(--fx-faint);color:var(--fx-ink);border:1px solid var(--fx-line);
  letter-spacing:.1em;font-size:9.5px}
/* The chip is a state label and the box above it is the risk warning. Only one
   of them gets the alert colour, which is the brand guide's rule about accents
   competing, and the warning is the one that earns it. */
.fx .fxwarn{margin-bottom:14px}
.fx .forecast-section .section-head{margin-bottom:10px}
.fx .forecast-section .section-head .eyebrow{margin-bottom:0}
.fx .fxstand b{color:var(--fx-ink);font-weight:600}
@media(max-width:760px){.fx #view-eyebrow{font-size:9px;padding:4px 8px;margin-bottom:9px}}

/* The honest opening cost the curve some of its screen back, so the head gives
   up the difference again. Measured at 390x844 either side of the change. */
@media(max-width:760px){
  .fx .fxstand{line-height:1.5;margin-bottom:9px}
  .fx .fxwarn{margin-bottom:11px}
  .fx #view-eyebrow{margin-bottom:7px;padding:4px 8px}
}