/* Keep the full site within reach on a phone, including Research and Data Atlas. */
.menu-toggle{display:none}
.nav-cta{flex-shrink:0}
.tool-department-toggle{display:none}
.chips[hidden]{display:none}

@media(min-width:981px){
  .nav-links{gap:clamp(14px,1.8vw,26px);margin-right:0}
  .nav-links a{white-space:nowrap}
}

@media(max-width:980px){
  :root{--mobile-nav-height:calc(70px + env(safe-area-inset-top,0px))}
  html{scroll-padding-top:calc(var(--mobile-nav-height) + 16px)}
  .nav{min-height:var(--mobile-nav-height);gap:8px;padding:calc(13px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 13px max(16px,env(safe-area-inset-left,0px))}
  .nav .brand{flex-shrink:0;min-height:44px}
  .nav .nav-cta{min-height:44px;margin-left:auto;padding:10px 12px;font-size:12px}
  .nav .nav-cta .arrow{display:none}
  .menu-toggle{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line2);border-radius:5px;background:transparent;color:var(--navy);cursor:pointer}
  .menu-icon{position:relative;width:18px;height:14px}
  .menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;transition:transform .2s ease,top .2s ease}
  .menu-icon::before{top:3px}.menu-icon::after{top:10px}
  .menu-toggle[aria-expanded="true"] .menu-icon::before{top:6px;transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-icon::after{top:6px;transform:rotate(-45deg)}
  .nav .nav-links{position:absolute;top:100%;left:0;right:0;display:grid;grid-template-columns:1fr;margin:0;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));gap:0;max-height:calc(100svh - var(--mobile-nav-height));overflow-y:auto;overscroll-behavior:contain;border-bottom:1px solid var(--line);background:#F6F8FB;box-shadow:0 18px 25px -20px #0C143040;visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
  .nav .nav-links a,.nav.dark .nav-links a{display:flex;align-items:center;min-height:48px;padding:10px 12px;font-size:15px;color:var(--navy);border-radius:4px;text-decoration:none}
  .nav .nav-links a::after{display:none}
  .nav .nav-links a:hover,.nav .nav-links a:focus-visible{background:#E8ECF7;color:var(--cobalt)}
  .nav-open .nav .nav-links{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  .nav.dark .brand{color:#fff;text-shadow:none}
  .nav.dark .menu-toggle{color:#fff;border-color:#ffffff55}
  .nav.solid .menu-toggle{color:var(--navy);border-color:var(--line2)}
  .nav-open .nav{background:#F6F8FB}
  .nav-open .nav .brand,.nav-open .nav .menu-toggle{color:var(--navy);text-shadow:none}
  .nav-open .nav .menu-toggle{border-color:var(--line2)}
}

@media(max-width:980px){
  .trow{grid-template-columns:1fr;padding:0;gap:0}
  .trow h4{padding:0}
  .tool-department-label{display:none}
  .tool-department-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:14px 0;border:0;background:none;color:var(--navy);text-align:left;font:500 15px/1.4 var(--sans);cursor:pointer}
  .tool-department-toggle>span:first-child{flex:1;min-width:0}
  .tool-department-count{flex:none;font-size:12px;color:var(--cobalt);font-weight:400;white-space:nowrap}
  .tool-department-toggle::after{content:"+";flex:none;width:18px;text-align:center;font-size:22px;font-weight:400;color:var(--slate)}
  .tool-department-toggle[aria-expanded="true"]::after{content:"−"}
  .tool-department-toggle:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
  .trow.has-selection .tool-department-toggle{color:var(--cobalt)}
  .trow .chips{padding-bottom:16px}
  .vis>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .v-diff div,.v-sql{white-space:pre-wrap;overflow-wrap:anywhere}
  .v-prh{flex-wrap:wrap}
  .v-checks{flex-wrap:wrap;gap:4px 12px}
  .browse-tools button,.seg button,.chip,.link,.chapter-next,.example-back{min-height:44px}
  .chip{padding:9px 12px}
  .req input,.req textarea,.chips input{min-height:48px;font-size:16px}
}

@media(max-width:820px){
  .hero{bottom:calc(108px + env(safe-area-inset-bottom,0px))}
  .story-controls{bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);scrollbar-width:none}
  .story-controls::-webkit-scrollbar{display:none}
  .story-controls button{min-height:44px;flex-shrink:0}
  .cap{bottom:calc(82px + env(safe-area-inset-bottom,0px));max-height:calc(100svh - 168px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));scroll-padding:16px}
  .bx,.bx.left{bottom:calc(82px + env(safe-area-inset-bottom,0px));max-height:calc(100svh - 168px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));scroll-padding:16px}
  .aisles button{min-height:44px;padding:8px 0;line-height:1.3}
  .aisles li{align-items:center}
  .browse-tools button,.seg button,.chip,.link,.chapter-next,.example-back{min-height:44px}
  .browse-tools button{padding:9px 11px}
  .chip{padding:9px 12px}
  .seg button{padding:8px 10px}
  .bx-x{width:44px;height:44px}
  .req input,.req textarea,.chips input{min-height:48px;font-size:16px}
  .chips input{max-width:100%;min-width:0}
  .req .field,.req .two,.summary,.rows,.row dd{min-width:0;overflow-wrap:anywhere}
  .bx-h h3{overflow-wrap:anywhere}
  .vis{min-width:0;max-width:100%}
  footer{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
  body.nogl #overlay{padding-top:calc(var(--mobile-nav-height) + 40px)}
  body.nogl #overlay .cap{max-height:none}
}

@media(max-width:390px){
  .hero{bottom:calc(94px + env(safe-area-inset-bottom,0px))}
  .hero h1{font-size:clamp(35px,10.5vw,41px)}
  .hero .ctas{gap:8px}
  .hero .ctas .btn{padding:12px;font-size:13px;gap:8px}
  .wrap{padding-left:20px;padding-right:20px}
  .doc-b dl{grid-template-columns:1fr;gap:2px}
  .doc-b dt:not(:first-child){margin-top:7px}
  .doc-b dd{min-width:0}
}

@media(max-width:359px){
  .nav .brand span{display:none}
  .story-controls button{padding:10px 5px;font-size:10px}
  .cap{left:12px;right:12px;padding:16px}
  .bx-h{padding-left:16px}
  .bx-b{padding-left:16px;padding-right:16px}
  .bx-f{padding-left:16px;padding-right:16px}
  .sec h2{font-size:38px}
}

/* Landscape and compact phones can read the complete introduction without clipping. */
@media(max-width:980px) and (max-height:620px){
  .cap{width:min(460px,calc(100% - 40px));padding:18px}
  .cap h2{font-size:27px}
  .aisles{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
  .aisles li{align-items:center}
  .aisles button{min-height:44px;padding:8px 0;line-height:1.3}
  .bx-x{width:44px;height:44px}
  .hero,.hero.on{top:calc(var(--mobile-nav-height) + 16px);bottom:calc(82px + env(safe-area-inset-bottom,0px));left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));max-width:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;transform:none;padding-bottom:8px}
  .hero h1{font-size:clamp(34px,5.5vw,44px);line-height:1.02}
  .hero .eyebrow{margin-bottom:12px}
  .hero p{margin-top:12px;font-size:15px;line-height:1.5;max-width:580px}
  .hero .ctas{margin-top:16px}
  .hero .quote{display:none}
  .cap{bottom:calc(78px + env(safe-area-inset-bottom,0px));max-height:calc(100svh - var(--mobile-nav-height) - 92px - env(safe-area-inset-bottom,0px))}
  .bx,.bx.left{top:auto;bottom:calc(78px + env(safe-area-inset-bottom,0px));max-height:calc(100svh - var(--mobile-nav-height) - 92px - env(safe-area-inset-bottom,0px));transform:translate3d(0,20px,0)}
  .bx.on,.bx.left.on{transform:none}
  body.nogl #overlay .hero{overflow:visible;max-height:none;padding-bottom:0}
  body.nogl #overlay .cap{max-height:none}
}

@media(prefers-reduced-motion:reduce){
  .menu-icon::before,.menu-icon::after,.nav .nav-links{transition:none}
}

@media(min-width:600px) and (max-width:980px) and (max-height:500px){
  .hero h1{font-size:36px}
  .hero .eyebrow{margin-bottom:8px}
  .hero p{font-size:14.5px;line-height:1.45;margin-top:10px}
  .hero .ctas{margin-top:12px}
  .hero .ctas .btn{min-height:44px;padding:10px 15px;font-size:13px}
  .story-controls button{min-height:44px}
}