/* The battery sits above responsive resource panels in one page scroll. */
html, body { min-width:0; min-height:100%; }
#cts-storyboard { width:100%; max-width:none; margin:0; }
#cts-storyboard .cts-frame { min-width:0; min-height:100svh; transition:none; }
#cts-storyboard .cts-layout { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; }
#cts-storyboard :is(.cts-layout,.cts-visual,.cts-detail) { min-width:0; }
#cts-storyboard .cts-visual { display:flex; flex-direction:column; }
#cts-storyboard .cts-scene { flex:none; height:clamp(340px,58svh,740px); aspect-ratio:auto; }
#cts-storyboard .cts-photography>img { object-fit:contain; }
#cts-storyboard .cts-scene-tools { flex:none; align-items:center; }
#cts-storyboard #cts-model-status { flex:1; text-align:right; }
#cts-storyboard .cts-chemistry { order:1; }
#cts-storyboard .cts-visual>.cts-resource-view { order:2; padding:24px clamp(18px,4vw,56px); border-top:1px solid var(--cts-line); background:var(--cts-bg); }
#cts-storyboard .cts-view-switch { max-width:520px; }
#cts-storyboard .cts-resource-chips { grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr)); gap:10px; }
#cts-storyboard .cts-resource-chips button { min-height:68px; padding:12px; }
#cts-storyboard .cts-resource-chips b { font-size:20px; }
#cts-storyboard .cts-resource-chips small { font-size:12px; line-height:1.4; }
#cts-storyboard .cts-resource-chips em { font-size:12px; }
#cts-storyboard .cts-mass-caption { max-width:90ch; }
#cts-storyboard .cts-data-note { max-width:90ch; }
#cts-storyboard .cts-detail { width:100%; max-width:1600px; margin-inline:auto; height:auto; padding:clamp(28px,4vw,56px); overflow:visible; overflow-wrap:break-word; border-left:0; border-top:1px solid var(--cts-line); }
#cts-storyboard .cts-detail:focus-visible { outline:2px solid var(--cts-cyan); outline-offset:-3px; }
#cts-storyboard :is(.cts-guide-summary,.cts-guide-section p,.cts-topic-lead,#cts-layer-content>p) { max-width:75ch; }
#cts-storyboard .cts-detail p { font-size:16px; line-height:1.8; }
#cts-storyboard .cts-metal-heading { scroll-margin-top:24px; }
#cts-storyboard #cts-metal-content { scroll-margin-top:18px; }
#cts-storyboard .cts-metal-heading>div { min-width:0; }
#cts-storyboard .cts-metal-heading h2 { font-size:clamp(30px,3vw,42px); }
#cts-storyboard #cts-back-materials { position:sticky; top:12px; z-index:6; display:inline-flex; align-items:center; gap:10px; max-width:100%; min-height:48px; padding:12px 18px; margin:0 0 22px; border:1px solid var(--cts-cyan); border-radius:7px; background:#102337f5; color:#e5fbff; font-size:14px; line-height:1.4; font-weight:600; box-shadow:0 4px 20px #0005; backdrop-filter:blur(8px); }
#cts-storyboard #cts-back-materials>span { font-size:21px; line-height:1; }
#cts-storyboard #cts-back-materials:hover { background:var(--cts-cyan); color:#05141a; }
#cts-storyboard:not(.cts-guide-mode) :is(.cts-production-map,.cts-guide-section,#cts-topic-content) { scroll-margin-top:86px; }
#cts-storyboard .cts-topics { gap:5px; padding:10px 0; }
#cts-storyboard .cts-topics button { min-height:42px; padding:10px 13px; font-size:12px; }
#cts-storyboard #cts-topic-content h3 { font-size:clamp(25px,2.6vw,32px); }
#cts-storyboard #cts-topic-content h4 { font-size:19px; }
#cts-storyboard #cts-topic-content p,#cts-storyboard #cts-topic-content li { font-size:16px; line-height:1.8; }
#cts-storyboard .cts-review-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
#cts-storyboard .cts-review-card:only-child { max-width:760px; }
#cts-storyboard .cts-detail .cts-production-map { padding:clamp(16px,2.2vw,32px); }
#cts-storyboard .cts-detail .cts-map-pickers { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
#cts-storyboard .cts-map-pickers label { font-size:13px; }
#cts-storyboard .cts-map-pickers select { font-size:14px; min-height:48px; }
#cts-storyboard .cts-map-selection { padding:clamp(18px,2.2vw,30px); }
#cts-storyboard .cts-map-national strong { font-size:clamp(24px,2.5vw,34px); }
#cts-storyboard .cts-detail .cts-map-leaders>div { grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:12px; }
#cts-storyboard .cts-map-leaders button { padding:18px; }
#cts-storyboard .cts-map-leaders button>span { font-size:13px; }
#cts-storyboard .cts-map-leaders strong { font-size:22px; }
#cts-storyboard .cts-map-leaders small { font-size:12px; }
#cts-storyboard .cts-material-switch { max-width:480px; }

/* Keep the introduction compact so the battery remains the first thing to explore. */
@media (min-width:1000px) {
  #cts-storyboard.cts-exploring .cts-intro { display:none; }
  #cts-storyboard.cts-exploring:not(.cts-guide-mode) .cts-products { grid-column:1 / -1; justify-content:flex-start; padding:8px 28px; }
  #cts-storyboard.cts-exploring .cts-visual>.cts-resource-view { display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); gap:8px 20px; padding:12px 28px; }
  #cts-storyboard.cts-exploring .cts-resource-view .cts-mass-caption { align-self:center; margin:0; }
  #cts-storyboard.cts-exploring :is(.cts-resource-chips,.cts-data-note) { grid-column:1 / -1; }
  #cts-storyboard.cts-exploring .cts-resource-chips { gap:8px; }
  #cts-storyboard.cts-exploring .cts-resource-chips button { min-height:58px; padding:9px 10px; }
  #cts-storyboard.cts-exploring .cts-resource-chips b { font-size:17px; }
  #cts-storyboard.cts-exploring .cts-data-note { margin-top:0; }
  #cts-storyboard:not(.cts-guide-mode) .cts-frame { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto auto auto; grid-template-areas:'header header' 'intro products' 'explorer explorer' 'path credits' 'footer footer'; }
  #cts-storyboard:not(.cts-guide-mode) .cts-header { grid-area:header; padding:10px 28px; min-height:60px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-intro { grid-area:intro; padding:16px 28px 18px; align-self:center; }
  #cts-storyboard:not(.cts-guide-mode) .cts-intro .cts-eyebrow { margin-bottom:8px; font-size:9px; }
  #cts-storyboard:not(.cts-guide-mode) h1 { font-size:clamp(24px,2vw,34px); line-height:1.12; margin:0; }
  #cts-storyboard:not(.cts-guide-mode) h1 br { display:none; }
  #cts-storyboard:not(.cts-guide-mode) h1>span { display:inline-block; margin-left:.25em; }
  #cts-storyboard:not(.cts-guide-mode) .cts-products { grid-area:products; align-self:center; padding:16px 28px 16px 0; gap:6px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-products button { min-height:40px; padding:9px 13px; font-size:11px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-layout { grid-area:explorer; }
  #cts-storyboard:not(.cts-guide-mode) .cts-progress { flex:none; padding:9px 20px 0; gap:8px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-progress button { min-height:38px; padding:8px 4px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-scene-heading { flex:none; min-height:32px; padding:7px 24px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-scene-tools { padding:8px 20px; gap:8px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-chemistry { padding:7px 20px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-chemistry button { min-height:32px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-path { grid-area:path; padding:9px 28px; font-size:10px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-credits { grid-area:credits; padding:3px 28px; max-width:600px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-footer { grid-area:footer; padding:5px 28px; min-height:54px; }
  #cts-storyboard:not(.cts-guide-mode) .cts-attribution img { width:100px; }
}
@media (max-width:999px) {
  #cts-storyboard.cts-exploring .cts-intro { display:none; }
  #cts-storyboard .cts-scene { height:auto; aspect-ratio:3/2; max-height:60svh; }
  #cts-storyboard .cts-intro { padding:22px clamp(18px,4vw,36px) 18px; }
  #cts-storyboard h1 { font-size:clamp(30px,5.5vw,44px); }
  #cts-storyboard .cts-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:0 clamp(18px,4vw,36px) 20px; }
  #cts-storyboard .cts-products button { min-width:0; width:100%; white-space:nowrap; padding:10px 6px; font-size:11px; }
  #cts-storyboard .cts-quick-materials { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; padding:6px 14px 12px; }
  #cts-storyboard .cts-quick-materials button { flex:1; min-width:0; max-width:80px; min-height:44px; padding:6px 3px; border:1px solid #2a3d55; border-radius:3px; }
  #cts-storyboard .cts-quick-materials b { display:block; font-size:13px; font-weight:500; }
  #cts-storyboard .cts-quick-materials small { display:block; font-size:10px; margin-top:4px; }
  #cts-storyboard #cts-model-status { flex-basis:100%; text-align:left; }
}
@media (max-width:540px) {
  #cts-storyboard .cts-resource-chips { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  #cts-storyboard .cts-resource-chips button { min-height:64px; padding:9px 7px; }
  #cts-storyboard .cts-resource-chips b { font-size:17px; }
  #cts-storyboard .cts-resource-chips em { font-size:11px; }
  #cts-storyboard .cts-resource-chips small { font-size:11px; }
  #cts-storyboard .cts-photo-next { right:12px; bottom:12px; max-width:calc(100% - 24px); }
  #cts-storyboard .cts-photo-label { left:12px; bottom:66px; max-width:calc(100% - 24px); font-size:10px; }
  #cts-storyboard .cts-quick-materials { gap:3px; padding-left:10px; padding-right:10px; }
  #cts-storyboard .cts-topics button { padding:9px; font-size:11px; }
}
/* Dedicated guides keep their existing route and comfortable line length. */
#cts-storyboard.cts-guide-mode .cts-detail { max-width:1600px; }