/* Laptop and tablet layouts for the guided tour and its companion pages. */
@media (min-width:651px) and (max-width:1440px){
  .app{min-height:0;height:100dvh;grid-template-rows:clamp(66px,8vh,88px) minmax(0,1fr) 58px}
  .header{gap:24px;padding-inline:clamp(24px,4vw,60px)}
  .logo{height:clamp(36px,4vw,48px);max-width:min(32vw,270px)}
  .nav{gap:clamp(16px,2.5vw,38px);font-size:clamp(12px,1.15vw,15px)}
  .nav a{padding-block:20px 17px;white-space:nowrap}
  .stage{min-height:0}
  .scene{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .story{overflow-y:auto;overscroll-behavior:contain;padding:clamp(24px,4vh,48px) clamp(26px,4vw,60px) 74px}
  .eyebrow{font-size:11px;margin-bottom:10px}
  .scene-index{margin-bottom:15px}
  .title{font-size:clamp(38px,4.4vw,66px);line-height:1.02;margin-bottom:18px}
  .stage.intro .title{font-size:clamp(32px,3.5vw,52px)}
  .stage.intro .title .just{font-size:clamp(43px,5vw,74px);margin-top:10px}
  .lede{font-size:clamp(16px,1.5vw,21px);line-height:1.38;margin-bottom:20px}
  .headline-block{grid-template-columns:minmax(110px,25%) minmax(0,1fr);gap:16px;padding-top:16px}
  .headline-copy{font-size:clamp(14px,1.25vw,17px);line-height:1.4}
  .visual{min-width:0;padding:clamp(24px,4vh,42px) clamp(22px,3vw,44px)}
  .visual-inner{max-height:100%;overflow-y:auto;scrollbar-width:thin}
  .visual-kicker{margin-bottom:12px}
  .intro-word{font-size:clamp(32px,3.5vw,52px)}
  .big-number{font-size:clamp(70px,7vw,120px);margin-bottom:12px}
  .visual h2{font-size:clamp(22px,2.4vw,30px)}
  .visual p{font-size:clamp(14px,1.25vw,18px);margin-bottom:18px}
  .bars{gap:10px}
  .method{margin-top:14px;padding-top:12px}
  .controls{bottom:14px;left:clamp(26px,4vw,60px);right:clamp(22px,3vw,44px);gap:12px}
  .progress{max-width:420px}
  .footer{padding-inline:clamp(24px,4vw,60px)}
  .footer-links{gap:20px}
  .completion-left{padding:clamp(28px,5vw,72px)}
  .completion h1{font-size:clamp(42px,4.8vw,72px)}
  .completion p{font-size:clamp(16px,1.6vw,21px)}
  #data-view .section-heading h1{font-size:clamp(52px,6.5vw,92px)}
  #data-view .theme-links{flex-wrap:wrap}
  #data-view .theme-links button{flex:1 1 28%;min-height:42px}
  #resources-view .use-heading h1{font-size:clamp(52px,7vw,94px)}
}

@media (min-width:651px) and (max-width:980px){
  html,body{overflow:hidden}
  .app,body.section-open .app{display:grid;min-height:0;height:100dvh;grid-template-rows:72px minmax(0,1fr) 56px}
  .header{min-height:0;padding-inline:24px}
  .stage{overflow:hidden;min-height:0}
  .scene{position:absolute;inset:0 0 50px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .story{min-width:0;padding:24px}
  .title{font-size:clamp(31px,4vw,45px)}
  .stage.intro .title{font-size:clamp(29px,3.7vw,42px)}
  .stage.intro .title .just{font-size:clamp(37px,5vw,55px)}
  .lede{font-size:15px}
  .headline-block{grid-template-columns:1fr;gap:5px}
  .headline-copy{font-size:13px}
  .visual{min-height:0;border-top:0;border-left:1px solid rgba(0,0,0,.12);padding:20px 22px}
  .visual h2{font-size:21px}
  .visual p{font-size:14px}
  .bar-row{grid-template-columns:minmax(0,1fr) 48px;gap:7px}
  .bar-label{font-size:11px}.bar-value{font-size:14px}
  .controls{position:absolute;inset:auto 0 0;min-height:50px;display:flex;flex-wrap:nowrap;padding:5px 22px;background:#fff;color:#111426;gap:8px}
  .progress{order:0;flex:1 1 auto;max-width:none}
  .control{flex:none;min-height:38px;padding:5px;margin:0;font-size:12px}
  .completion.show{position:absolute;inset:0;display:grid;grid-template-columns:1fr;overflow:auto}
  .stage:has(.completion.show) .scene{display:none}
  .completion-left{min-height:100%;justify-content:center}
  .completion-right{display:none}
  .footer{min-height:0;padding-inline:24px}
  body.section-open{overflow:auto}
  body.section-open .app{height:auto;min-height:100dvh;grid-template-rows:72px minmax(0,auto) 56px}
  body.section-open .stage{overflow:visible}
  #resources-view .use-heading{margin-inline:-24px;padding-inline:24px}
}

@media (min-width:651px) and (max-height:700px){
  .app{grid-template-rows:62px minmax(0,1fr) 44px}
  .header{min-height:0}
  .story{justify-content:flex-start;padding-top:16px}
  .scene-index{margin-bottom:8px}
  .title{font-size:clamp(31px,3.6vw,50px);margin-bottom:12px}
  .stage.intro .title .just{font-size:clamp(38px,4.2vw,60px)}
  .lede{margin-bottom:12px}
  .visual-kicker{margin-bottom:7px}
  .visual p{margin-bottom:10px}
  .big-number{font-size:clamp(60px,6vw,90px)}
  .bars{gap:6px}
  .controls{bottom:8px}
}

/* Explore the Data: scale cleanly from compact laptops down through tablets. */
@media (min-width:981px) and (max-width:1440px){
  body.section-open #data-view{padding-top:clamp(30px,4vh,48px)}
  #data-view .section-heading{margin-bottom:20px}
  #data-view .section-heading h1{margin-bottom:12px}
  #data-view .section-heading p{font-size:clamp(17px,1.7vw,23px);max-width:860px}
  #data-view .round-tabs{gap:12px;padding:16px 0 20px;margin-bottom:24px}
  #data-view .round-tabs button{width:54px;height:54px;font-size:18px}
  #data-view .round{grid-template-columns:175px minmax(0,1fr);column-gap:28px;padding-top:6px;padding-bottom:38px}
  #data-view .round h2{font-size:clamp(31px,3vw,43px);margin-bottom:20px}
  #data-view .round-meta{padding-right:18px;font-size:14px}
  #data-view .round-meta span{padding:10px 0}
  #data-view .evidence-row{grid-template-columns:minmax(155px,1fr) minmax(130px,1.15fr) 58px;gap:12px;padding:7px 0}
  #data-view .evidence-label span{font-size:15px}
  #data-view .evidence-label b{font-size:20px}
  #data-view .evidence-track{height:14px}
  #data-view .interpretation{font-size:16px;margin-top:20px}
  #data-view .cross-theme{padding-top:24px;padding-bottom:28px}
}

@media (min-width:851px) and (max-width:1280px){
  #data-view .round{grid-template-columns:1fr;grid-template-areas:"top" "meta" "title" "bars" "interpretation" "method";column-gap:0;padding-bottom:34px}
  #data-view .round-top{display:flex;justify-content:space-between;align-items:center}
  #data-view .round-top .eyebrow{margin:0}
  #data-view .round-nav{display:flex;margin:0;gap:10px}
  #data-view .round-meta{border:0;border-top:1px solid #b8bdc2;border-bottom:1px solid #b8bdc2;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 20px;padding:10px 0;margin:14px 0 20px}
  #data-view .round-meta span,#data-view .round-meta span:first-child{border:0;padding:0;font-size:12px}
  #data-view .round h2{margin-bottom:16px;max-width:900px}
  #data-view .evidence-row{grid-template-columns:minmax(190px,1fr) minmax(180px,1.2fr) 60px}
  #data-view .theme-links button{flex:1 1 42%}
}

/* Use the Research: prevent card and form crowding on tablets and smaller laptops. */
@media (min-width:651px) and (max-width:1366px){
  #resources-view .use-heading{padding-top:clamp(42px,5vw,62px);padding-bottom:clamp(54px,6vw,72px)}
  #resources-view .use-heading h1{font-size:clamp(48px,6.6vw,84px)}
  #resources-view .use-heading p{font-size:clamp(17px,1.8vw,22px);max-width:780px}
  #resources-view .use-resources{padding-top:30px;margin-bottom:32px}
  #resources-view .use-paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #resources-view .use-path,#resources-view .use-path:first-child{min-height:248px;padding:23px}
  #resources-view .use-path:last-child{grid-column:1/-1;min-height:0}
  #resources-view .use-path:before{font-size:27px;margin-bottom:18px}
  #resources-view .use-path h2{font-size:21px}
  #resources-view .use-path p{font-size:14px}
  #resources-view .formula-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #resources-view .message-builder{padding-top:42px;padding-bottom:46px}
  #resources-view .message-builder h2{font-size:clamp(37px,4.6vw,56px)}
  #resources-view .message-builder>p:not(.builder-note){font-size:18px}
  #resources-view .message-output p{font-size:19px}
  #resources-view .language-tool{padding-top:44px}
  #resources-view .language-tool h2{font-size:clamp(37px,4.6vw,54px)}
  #resources-view .language-pair>div{padding:21px;min-height:165px}
  #resources-view .language-pair p{font-size:19px}
  #resources-view .use-more-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #resources-view .use-more-links a:last-child{grid-column:1/-1}
}

/* Portrait tablets: prioritize legibility over maintaining card grids. */
@media (min-width:651px) and (max-width:900px){
  #data-view .section-heading h1{font-size:clamp(46px,8vw,66px)}
  #data-view .section-heading p{font-size:17px;max-width:700px}
  #data-view .round-tabs{gap:8px}
  #data-view .round-tabs button{width:46px;height:46px;font-size:16px}
  #data-view .evidence-row{grid-template-columns:minmax(0,1fr) 54px;gap:6px 12px;padding:10px 0;border-bottom:1px solid #eceeed}
  #data-view .evidence-label span{grid-column:1;grid-row:1;font-size:14px}
  #data-view .evidence-label b{grid-column:2;grid-row:1;font-size:19px}
  #data-view .evidence-track{grid-column:1/-1;grid-row:2;height:10px}
  #data-view .theme-links{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  #data-view .theme-links button{width:100%;min-height:42px}

  #resources-view .use-paths{grid-template-columns:1fr}
  #resources-view .use-path,#resources-view .use-path:first-child,#resources-view .use-path:last-child{grid-column:auto;min-height:0;padding:22px}
  #resources-view .use-path:before{margin-bottom:14px}
  #resources-view .use-path a:first-of-type{margin-top:10px}
  #resources-view .language-pair{grid-template-columns:1fr}
  #resources-view .language-pair>div{min-height:0}
  #resources-view .use-more-links{grid-template-columns:1fr}
  #resources-view .use-more-links a:last-child{grid-column:auto}
}

@media (min-width:651px) and (max-width:760px){
  #resources-view .formula-fields{grid-template-columns:1fr}
  #resources-view .message-output{align-items:flex-start;flex-direction:column}
  #resources-view .message-output button{align-self:flex-start}
}

/* Short laptop screens: reduce dead space without changing the approved structure. */
@media (min-width:651px) and (max-width:1440px) and (max-height:820px){
  body.section-open #data-view{padding-top:20px}
  #data-view .section-heading{margin-bottom:10px}
  #data-view .section-heading h1{font-size:clamp(44px,5.7vw,74px);margin-bottom:7px}
  #data-view .section-heading p{font-size:16px}
  #data-view .round-tabs{padding-top:9px;padding-bottom:12px;margin-bottom:13px}
  #data-view .round-tabs button{width:44px;height:44px;font-size:15px}
  #data-view .round h2{margin-bottom:12px}
  #data-view .evidence-row{padding-top:6px;padding-bottom:6px}
  #data-view .interpretation{margin-top:16px}

  #resources-view .use-heading{padding-top:36px;padding-bottom:49px}
  #resources-view .use-heading h1{font-size:clamp(44px,6vw,74px);margin-top:12px;margin-bottom:10px}
  #resources-view .use-heading p{font-size:17px}
  #resources-view .use-resources{padding-top:24px;margin-bottom:26px}
  #resources-view .use-path,#resources-view .use-path:first-child{min-height:220px;padding-top:19px;padding-bottom:19px}
  #resources-view .use-path:before{margin-bottom:12px}
  #resources-view .message-builder{padding-top:34px;padding-bottom:38px}
  #resources-view .language-tool{padding-top:34px;padding-bottom:32px}
  #resources-view .language-pair>div{min-height:150px}
}

/* Extra-short 13-inch laptop windows: keep primary content dense and readable. */
@media (min-width:901px) and (max-width:1366px) and (max-height:720px){
  #data-view .section-heading .eyebrow,#resources-view .use-heading .eyebrow{margin-bottom:6px}
  #data-view .section-heading h1{font-size:clamp(40px,5vw,62px)}
  #data-view .round-tabs{padding:7px 0 9px;margin-bottom:10px}
  #data-view .round-tabs button{width:40px;height:40px;font-size:14px}
  #data-view .round h2{font-size:clamp(28px,2.7vw,37px)}
  #data-view .round-meta{margin-top:8px;margin-bottom:12px}
  #data-view .evidence-track{height:10px}
  #data-view .interpretation{font-size:15px}

  #resources-view .use-heading{padding-top:30px;padding-bottom:44px}
  #resources-view .use-heading h1{font-size:clamp(40px,5.5vw,66px)}
  #resources-view .use-heading p{font-size:16px}
  #resources-view .use-resources{padding-top:20px}
  #resources-view .use-path,#resources-view .use-path:first-child{min-height:205px;padding:18px 20px}
  #resources-view .message-builder{padding-top:30px;padding-bottom:34px}
  #resources-view .language-tool{padding-top:30px}
}