/* Live Lab panels in one viewport. The full explanations remain on the page. */
.lab-focus-launch{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:10px 18px;margin:0 0 18px;border:1px solid #407b84;border-radius:3px;background:#15343e;color:#eff6f0;font:600 14px/1.3 var(--ed-sans,Inter,Arial,sans-serif);cursor:pointer}
.lab-focus-launch:focus-visible{outline:2px solid #287c86;outline-offset:4px}
html.lab-focus-open{overflow:clip;scrollbar-gutter:auto!important}
html.lab-focus-open body{position:fixed;width:100%;overflow:clip}
.lab-focus-dialog{position:fixed;inset:0;width:100dvw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#f4f2e9;color:#17343c;overflow:clip;font:15px/1.5 var(--ed-sans,Inter,Arial,sans-serif)}
.lab-focus-dialog[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.lab-focus-dialog::backdrop{background:#0b2029}
.lab-focus-dialog *{box-sizing:border-box}
.lab-focus-dialog button{min-height:44px;min-width:44px;cursor:pointer;touch-action:manipulation}
.lab-focus-dialog button:focus-visible{outline:2px solid #2d8794;outline-offset:3px}
.lf-header{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:6px 16px;border-bottom:1px solid #becfc6}
.lf-header h2{font:400 21px/1.2 var(--ed-display,Georgia,serif);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-header button,.lf-tabs button,.lf-footer button{border:1px solid #a7bfb7;border-radius:3px;background:#fafbf5;color:#16343d;padding:7px 14px;font:600 13px/1.3 var(--ed-sans,Inter,Arial,sans-serif)}
.lf-tabs{display:flex;gap:6px;justify-content:center;padding:6px 12px}
.lf-tabs button[aria-pressed=true]{background:#173c46;color:#edf7ee;border-color:#173c46}
.lf-stage{min-height:0;min-width:0;overflow:clip;padding:10px 16px;display:grid;align-items:center;justify-items:center}
.lf-footer{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:6px 16px;border-top:1px solid #becfc6}
.lf-position{min-width:0;margin:0;text-align:center;font-size:12px;line-height:1.4;color:#3c6668}
.lf-footer button:disabled{opacity:.4;cursor:default}
.lf-footer [hidden]{display:none!important}
.lab-focus-dialog .lf-active{width:100%;height:100%;max-width:1160px;margin:0;display:grid;align-content:center;gap:12px;overflow:clip;min-height:0;min-width:0}
.lab-focus-dialog [data-lf-away]{display:none!important}
.lab-focus-dialog [data-lf-cut]{visibility:hidden!important}
.lab-focus-dialog [data-lf-path]:not(.lf-active){display:contents!important}
.lab-focus-dialog [data-lf-target]{margin:0!important;min-width:0;max-width:100%;max-height:100%}
.lab-focus-dialog[data-kind=visual] .lf-active{display:block;height:100%}
.lab-focus-dialog[data-kind=visual] [data-lf-target]{display:grid!important;height:100%;padding:8px!important;grid-template-rows:minmax(0,1fr);overflow:clip}
.lab-focus-dialog[data-kind=visual] .fth-figure[data-lf-target]{grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
.lab-focus-dialog[data-kind=visual] .fth-key,.lab-focus-dialog[data-kind=visual] .gl-legend,.lab-focus-dialog[data-kind=visual] .gl-figure>figcaption,.lab-focus-dialog[data-kind=visual] .eb-figure>figcaption{display:none!important}
.lab-focus-dialog[data-kind=visual] .fth-scene-tools{margin:0;padding:0;min-height:44px}
.lab-focus-dialog[data-kind=visual] .fth-scene-key,.lab-focus-dialog[data-kind=visual] .fth-scene-title,.lab-focus-dialog[data-kind=visual] .fth-under-label{display:none}
.lab-focus-dialog[data-kind=visual] .fth-scene-tools{justify-content:flex-end}
.lab-focus-dialog[data-kind=visual] .fth-under{display:flex!important;margin:0;padding:0;gap:8px;justify-content:space-between;min-height:44px}
.lab-focus-dialog[data-kind=visual] :is(.fth-svg,.gl-svg,.eb-svg>svg){width:100%;height:100%;max-width:none;margin:0;overflow:hidden}
.lab-focus-dialog[data-kind=visual] :is(.gl-diagrams,.eb-svg){height:100%;min-height:0;min-width:0}
.lab-focus-dialog .gl-cases ol{margin:0!important}
.lab-focus-dialog .gl-head{max-width:68ch}
.lab-focus-dialog .gl-inst[data-lf-target]{width:100%;max-width:720px;justify-self:center;min-height:72px;background:#183943;border:1px solid #5e858c;padding:14px;color:#edf6ef;border-radius:4px}
.lab-focus-dialog .gl-readout-wrap[data-lf-target]{padding:16px!important;background:#15343e;color:#edf6ef;border-radius:4px;width:100%;max-width:720px;justify-self:center}
.lab-focus-dialog .gl-readout-wrap .gl-readout{margin:0;max-width:none}
.lab-focus-dialog .gl-readout-wrap .gl-readout dd{color:#edf6ef}
.lab-focus-dialog .gl-readout-wrap :is(dt,.gl-readout-empty-label,.gl-readout-empty-text){color:#bdd6d8}
.lab-focus-dialog .gl-choice[data-lf-target],.lab-focus-dialog .eb-choice[data-lf-target]{min-height:72px;max-width:850px;justify-self:center}
.lab-focus-dialog .eb-choice[data-lf-target]{color:#17343c;background:#fbfbf4;border:1px solid #648b90;padding:18px}
.lab-focus-dialog .eb-choice[data-lf-target] small{color:#4b6465}
.lab-focus-dialog .eb-nav[data-lf-target]{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lab-focus-dialog .eb-share[data-lf-target]{background:#17343e;color:#eff7ee;padding:18px;border-radius:4px}
.lab-focus-dialog .fth-control[data-lf-target]{width:100%;max-width:860px;justify-self:center;background:#17343e;color:#edf6ef;padding:20px;border-radius:4px}
.lab-focus-dialog .fth-control[data-lf-target] :is(label,legend,.fth-scale){color:#cce3e2}
.lab-focus-dialog .fth-readout>div[data-lf-target]{background:#17343e;color:#edf6ef;padding:24px;border:1px solid #5d858d;border-radius:4px}
.lab-focus-dialog .fth-readout>div[data-lf-target] dt{color:#bdd6d8}
.lab-focus-dialog .fk-card[data-lf-target]{display:flex!important;flex-direction:column;grid-row:auto;grid-template-rows:none;width:min(100%,620px);justify-self:center;align-self:center;gap:0;padding:18px 20px!important;margin:0!important}
.lab-focus-dialog .fk-card[data-lf-target] .fk-figure{align-self:stretch}
.lab-focus-dialog .fk-card[data-lf-target] .fk-date{margin-bottom:10px;font-size:11px}
.lab-focus-dialog .fk-card[data-lf-target] .fk-figure{font-size:34px;margin-bottom:10px}
.lab-focus-dialog .fk-card[data-lf-target] .fk-source{margin-bottom:12px}
.lab-focus-dialog .fk-controls[data-lf-target]{width:100%;max-width:620px;justify-self:center;margin:0;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#17343c}
.lab-focus-dialog .fk-controls .fk-status{color:#3b6668;max-width:26ch;font-size:12px;margin:0}
.lab-focus-dialog .fk-buttons{display:flex;gap:6px}
.lab-focus-dialog .lab-four-kinds-of-number .fk-controls .lab-button{background:#f9faf3;color:#17343c;border:1px solid #648b90;padding:8px 12px}
.lab-focus-dialog .fk-tray[data-lf-target]{width:100%;max-width:620px;justify-self:center;background:#17343e;padding:16px;color:#edf6ef}
.lab-focus-dialog .fk-tray .fk-tray-def{color:#c5dbdd}
.lab-focus-dialog .fk-tray .fk-slot{min-height:70px}
@media(max-width:600px){
 .lf-header,.lf-footer{padding-inline:10px}.lf-header h2{font-size:18px}.lf-stage{padding:8px 10px}.lf-tabs{padding-block:4px}.lf-position{font-size:11px}
 .lf-footer button{padding-inline:10px}.lab-focus-dialog .lf-active{gap:8px}.lab-focus-dialog .fk-controls[data-lf-target]{flex-wrap:wrap}.lab-focus-dialog .fk-controls .fk-status{max-width:none;flex:1 1 100%}
 .lab-focus-dialog .fk-buttons{width:100%;justify-content:space-between}.lab-focus-dialog .fk-card[data-lf-target]{padding:14px!important}.lab-focus-dialog .fk-card[data-lf-target] .fk-figure{font-size:30px}
 .lab-focus-dialog .fk-card .fk-label{font-size:14px;line-height:1.5}.lab-focus-dialog .fk-card .fk-source{font-size:12px}.lab-focus-dialog .fk-chip{min-height:48px;padding:8px}
}
@media(max-height:520px) and (orientation:landscape){
 .lf-header{padding-block:2px}.lf-header h2{font-size:18px}.lf-tabs{position:absolute;top:2px;left:32%;right:20%;padding:0;z-index:1}.lf-tabs button{font-size:12px;padding-inline:10px}.lab-focus-dialog[open]{grid-template-rows:48px minmax(0,1fr) 52px}.lf-stage{padding:6px 12px}.lf-footer{padding-block:3px}
 .lab-focus-dialog[data-kind=card] .lf-active{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;align-content:center;align-items:center}.lab-focus-dialog .fk-card[data-lf-target]{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(220px,1.2fr);grid-template-rows:auto auto auto auto;grid-template-areas:'date answer' 'figure answer' 'label answer' 'source answer';column-gap:20px;padding:10px 14px!important;width:100%;align-content:center}.lab-focus-dialog .fk-card .fk-date{grid-area:date;margin-bottom:4px}.lab-focus-dialog .fk-card .fk-figure{grid-area:figure;font-size:28px;margin-bottom:4px}.lab-focus-dialog .fk-card .fk-label{grid-area:label;font-size:13px;line-height:1.4;margin-bottom:4px}.lab-focus-dialog .fk-card .fk-source{grid-area:source;font-size:11px;margin-bottom:0}.lab-focus-dialog .fk-card .fk-answer{grid-area:answer;border:0;padding:0}.lab-focus-dialog .fk-chip{min-height:44px;padding:6px;font-size:12px}.lab-focus-dialog .fk-controls[data-lf-target]{display:block;align-self:center}.lab-focus-dialog .fk-buttons{display:grid}.lab-focus-dialog .fk-controls .fk-status{margin-bottom:6px}.lab-focus-dialog .fk-card .fk-verdict-head{font-size:12px}.lab-focus-dialog .fk-card .fk-why{font-size:12px;line-height:1.4}
 .lab-focus-dialog .fth-control[data-lf-target]{padding:12px}.lab-focus-dialog .gl-head .gl-tag{display:none}.lab-focus-dialog .gl-situation{font-size:14px}.lab-focus-dialog .gl-readout-wrap[data-lf-target]{padding:10px!important}.lab-focus-dialog .gl-feedback{padding:8px 12px}.lab-focus-dialog .gl-feedback-text{font-size:14px;line-height:1.4}.lab-focus-dialog .gl-decide-heading{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.lab-focus-dialog *{animation:none!important;transition:none!important}}

/* A short phone keeps the whole question, answer choices and actions together. */
@media(orientation:portrait) and (max-width:600px) and (max-height:700px){
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card[data-lf-target]{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'date figure' 'label label' 'source source' 'answer answer';gap:4px 10px;padding:10px!important;transform:none}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-date{grid-area:date;align-self:center;margin:0;font-size:10px;letter-spacing:.04em}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-figure{grid-area:figure;align-self:center;margin:0;font-size:26px;text-align:right}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-label{grid-area:label;margin:0;font-size:13px;line-height:1.4}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-source{grid-area:source;margin:0;font-size:11px;line-height:1.35}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-answer{grid-area:answer;margin:0;padding-top:8px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-chip{min-height:48px;padding:7px 6px;gap:6px;font-size:12px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-chip .fk-glyph{width:22px;flex:none}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-hint{margin-top:6px;padding:6px 8px;font-size:12px;line-height:1.3}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-hint-lead{display:inline;margin-right:4px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-why{margin-top:8px;font-size:13px;line-height:1.45}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-controls[data-lf-target]{padding-top:8px;gap:6px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-controls .fk-status{font-size:11px;line-height:1.35}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-controls .lab-button{font-size:13px;min-height:44px;padding:8px 10px}
}
/* At magnified narrow landscape sizes, actions sit below the card instead of
   squeezing the question into a sliver beside a fixed-width control column. */
@media(orientation:landscape) and (max-height:520px){
 .lab-focus-dialog .lf-header h2{max-width:calc(32vw - 28px)}
}
@media(orientation:landscape) and (max-width:600px) and (max-height:520px){
 .lab-focus-dialog[data-kind=card] .lf-active{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-content:stretch;gap:6px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card[data-lf-target]{grid-template-columns:minmax(0,42fr) minmax(0,58fr);grid-template-rows:repeat(4,auto);align-content:center;column-gap:12px;padding:10px!important;transform:none}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-date{margin-bottom:4px;font-size:10px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-figure{margin-bottom:4px;font-size:26px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-source{margin-bottom:0;font-size:11px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-chip{min-height:44px;padding:6px;gap:6px;font-size:12px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-chip .fk-glyph{width:20px;flex:none}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-card .fk-hint{margin-top:6px;padding:6px 8px;font-size:12px;line-height:1.3}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-hint-lead{display:inline;margin-right:4px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-controls[data-lf-target]{display:flex;flex-wrap:nowrap;padding:0;border:0;gap:10px}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-controls .fk-status{flex:1 1 0;max-width:none;margin:0;font-size:11px;line-height:1.3}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-buttons{display:flex;flex:none;gap:6px;width:auto}
 .lab-focus-dialog[data-kind=card] .lab-four-kinds-of-number .fk-controls .lab-button{min-height:44px;padding:7px 10px;font-size:12px}
}

/* Enlarged text and very short viewports retain a readable path through the
   activity. Ordinary sizes still use one view; overflow scrolls inside it. */
.lab-focus-dialog[open] .lf-stage{overflow:auto;overscroll-behavior:contain;align-items:start;justify-items:center}
.lab-focus-dialog[open] .lf-active{height:auto;min-height:100%;max-height:none;overflow:visible;align-content:start;align-content:safe center}
.lab-focus-dialog[open] .lf-active [data-lf-target]{max-height:none}

.lab-focus-dialog[open]{grid-template-columns:minmax(0,1fr)}
.lab-focus-dialog[open] :is(.lf-header,.lf-tabs,.lf-footer){min-width:0;max-width:100%}
.lab-focus-dialog[open] .lf-header h2{min-width:0}
.lab-focus-dialog[open] .lf-stage{grid-template-columns:minmax(0,1fr)}
.lab-focus-dialog[open] .lf-tabs{overflow-x:auto;justify-content:flex-start;justify-content:safe center}
.lab-focus-dialog[open] .lf-tabs>button{flex-shrink:0}
.lab-focus-dialog[open] .lf-footer>button{flex:0 1 auto;max-width:38%;overflow-wrap:anywhere;white-space:normal}
.lab-focus-dialog[open] .lf-footer .lf-position{flex:1 1 0;min-width:0;max-width:none;overflow-wrap:anywhere}

/* Labels can grow with reader text settings instead of overlapping fixed rows. */
.lab-focus-dialog[open] .lf-active .lf-heat-journey{--lf-node-height:54px;grid-template-rows:none;grid-auto-rows:minmax(var(--lf-node-height),max-content)}
.lab-focus-dialog[open] .lf-active .lf-heat-journey button{height:auto;min-height:var(--lf-node-height)}
.lab-focus-dialog[open] .lf-active .lf-heat-journey button>span:last-child{max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px){.lab-focus-dialog[open] .lf-active .lf-heat-journey{--lf-node-height:52px}}
@media(max-height:700px) and (orientation:portrait){.lab-focus-dialog[open] .lf-active .lf-heat-journey{--lf-node-height:48px}}
@media(max-height:520px) and (orientation:landscape){.lab-focus-dialog[open] .lf-active .lf-heat-journey{--lf-node-height:50px}}
@media(max-height:520px) and (max-width:600px) and (orientation:landscape){.lab-focus-dialog[open] .lf-active .lf-heat-journey{--lf-node-height:44px}}

.lab-focus-dialog[open] .fk-buttons{min-width:0;max-width:100%}
.lab-focus-dialog[open] .lab-four-kinds-of-number .fk-controls .lab-button{min-width:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-height:520px) and (orientation:landscape){
 html.lab-focus-open .lab-focus-dialog[open]{grid-template-rows:minmax(48px,max-content) minmax(0,1fr) minmax(50px,max-content)}
}
