/* Shared responsive repairs. Authored here; loaded last by build.py. */
.phone-short,.scene-controls{display:none}
html{scroll-padding-top:96px}
.ov{overflow-y:auto;overscroll-behavior:contain}
.wiz{max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain}
.wiz .x{width:44px;height:44px}

@media (max-width:1023px){
  :root{--sec:64px}
  h1,h2{line-height:1.12}
  .wrap{min-width:0}
  .hero h1,.hero h1.long{font-size:clamp(34px,5.6vw,58px);line-height:1.12;letter-spacing:0;overflow-wrap:anywhere}
  .hero h1 .hi{display:inline;padding:.02em .1em;line-height:inherit;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .hero h1 .line+.line{margin-top:.12em}
  .hero h1 .line{text-wrap:balance}
  .hero .lead{font-size:17px;line-height:1.6}
  .wheelbox{grid-template-columns:minmax(0,1fr);gap:24px}
  .wheelbox>*{min-width:0;max-width:100%}
  .wheel{justify-self:center}
  .la-item{grid-template-columns:minmax(0,1fr)}
  .la-step,.la-float{min-width:0;max-width:100%}
  .browser,.chiprow{max-width:100%}
  .chiprow{flex-wrap:wrap}
  .chiprow small{margin-left:0}
  /* Rank rows wrap on phones, so keep them in normal flow rather than moving
     them by the desktop's fixed 68px/136px animation distances. */
  .pack .rank-row{height:auto;min-height:60px;padding:12px 14px;gap:12px;transform:none!important;transition:none!important}
  .rank-row>div{flex:1;min-width:0}
  .rank-row .n{line-height:1.4;overflow-wrap:anywhere}
  .rank-row .s{margin-top:4px;gap:4px;line-height:1.4}
  .rank-row .chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .rank-pill{flex:none}
  .pack.anim-in .rank-you{order:-1}
  /* Scale every bar by the same ratio as its 240px -> 160px container.
     This also supplies a readable static chart before animation activation. */
  .study .col i{height:calc(var(--h) * .6666666667)!important;max-height:100%;transition:none}
  .darkpill{max-width:100%;overflow-wrap:anywhere}
  .btn{line-height:1.35;padding-top:12px;padding-bottom:12px;max-width:100%;text-align:center}
  .btn .ar{flex:none}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid a{min-height:44px;display:flex;align-items:center;overflow-wrap:anywhere}
  .foot-grid nav,.foot-grid div{gap:4px;min-width:0}
  .foot-base a{display:inline-flex;min-height:44px;align-items:center}
  .chips .chip,.ck-other a{min-height:44px}
  .ui .pop,.ui .stars i,.lv,.la-step,.la-dot,.wheel,.price-pop,.chip,.pack .note{opacity:1!important;transform:none!important;transition:none!important}
  html.reveal-on .reveal-item{opacity:1;transform:none;transition:none}
  .ui .prog i{transform:scaleX(1)}
  .wheel-rot,.wheel-node,.lv-loop,.map .sweep{animation:none!important}
  .wheel-node{transform:rotate(calc(-1 * var(--a)))}
  .heat-cell{opacity:1;transform:none;transition:none}
  .road .la-dot{transform:translateX(-50%)!important}
  .table-wrap.tool :where(input,select){font-size:16px;min-height:44px}
}

@media (max-width:767px){
  .nav .acts>.btn{display:none}
  .nav .navphone{padding:0 12px}
  .phone-full{display:none}.phone-short{display:inline}
  .win .body{min-height:0}
  .win .main{grid-template-columns:minmax(0,1fr);padding:12px;gap:0;min-width:0}
  .win .fx{min-width:0;opacity:1!important}
  .win.scene-ready .fx:not(.mobile-current){display:none}
  .win.scene-ready .fx.mobile-current{display:flex;min-height:280px}
  .scene-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px 10px 0}
  .scene-controls button{min-height:44px;border:1px solid var(--ring);border-radius:6px;background:var(--stone);color:var(--ink);font:600 11px/1.3 var(--text);padding:6px 3px;cursor:pointer}
  .scene-controls button[aria-pressed=true]{background:var(--orange);border-color:var(--orange)}
  .win .bar{padding:10px;gap:5px}
  .win .bar .url{padding:4px 6px;font-size:10px}
  .wheelbox{padding:24px 18px}
  .wheel{width:216px;height:216px}
  .wheel-arm{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-78px)}
  .wheel-node{width:64px;height:64px;font-size:10px;gap:0}
  .wheel-node svg{width:16px;height:16px}
  .wheelbox p{font-size:16px}
  .road::before,.la-dot{left:14px}
  .la-item{padding:20px 0 20px 38px;gap:16px}
  .la-step,.la-step.card{padding:20px 16px}
  .la-float{gap:10px}
  .risk{gap:12px}
  .table-wrap{max-width:100%;overflow-x:auto}
  .ov{padding:12px}
  .wiz{padding:28px 20px 20px;max-height:calc(100dvh - 24px)}
  .wiz .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wiz .opts button{min-height:52px;font-size:14px;padding:12px 10px}
  .wiz .nav2{flex-wrap:wrap}
  .wiz .nav2 .btn{min-width:0}
}

@media (max-width:599px){
  :root{--sec:48px}
  html{scroll-padding-top:80px}
  .wrap,.hero .wrap{padding-left:20px;padding-right:20px}
  .nav .wrap{height:64px;padding-left:16px;padding-right:16px;gap:10px}
  .nav .acts{gap:8px;flex:none}
  .nav .navphone.hide-sm{display:inline-flex;min-height:44px;padding:0 12px;font-size:14px}
  .phone-full{display:none}.phone-short{display:inline}
  .wordmark{min-width:0;font-size:16px;gap:6px}
  .wordmark img{width:28px;height:28px;flex:none}
  .menu nav{position:fixed;top:72px;left:12px;right:12px;min-width:0;max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain}
  .menu nav a{min-height:48px;display:flex;align-items:center}
  .menu nav a.menu-book{justify-content:center}
  .hero,.hero:not(:has(.win)){padding:36px 0 44px}
  .hero h1,.hero h1.long{font-size:clamp(32px,8.5vw,44px);max-width:24ch}
  .hero .lead{margin-top:20px;font-size:16px;line-height:1.6}
  .hero .eyebrow{font-size:11px;letter-spacing:.13em}
  .hero .acts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:24px}
  .hero .acts .btn{width:100%}
  .hero .micro{font-size:12px;line-height:1.6}
  h2{font-size:clamp(28px,7.8vw,36px);line-height:1.15;overflow-wrap:anywhere}
  h3{line-height:1.3;overflow-wrap:anywhere}
  .sub{font-size:16px;line-height:1.6}
  .win{margin-top:28px}
  .wheelbox{padding:24px 14px}
  .road{margin-top:28px}
  .la-step h3{font-size:19px}
  .la-step li{font-size:14px}
  .close .panel{padding:36px 20px}
  .close .acts{display:grid;grid-template-columns:minmax(0,1fr)}
  .close .acts .btn{width:100%}
  .related{gap:12px 20px}
  .related a{min-height:44px;display:inline-flex;align-items:center}
  .term-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:16px;gap:4px}
  .term-seg button{border-radius:12px;min-height:44px;font-size:14px}
  .foot-grid{gap:24px 16px}
  .foot-grid a{font-size:13px}
  .foot-grid>div:last-child{grid-column:1/-1}
  .foot-base{font-size:12px}
  .split:has([data-rsp-cal-mount]){gap:20px}
  .co-box:has([data-rsp-cal-mount]),.card:has([data-rsp-cal-mount]){padding:20px 10px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .road .la-dot{transform:translateX(-50%)!important}
}

/* A rotating square's layout bounds exceed the narrow tablet diagram gutter. */
@media (min-width:1024px) and (max-width:1199px){
  .wheel-rot,.wheel-node{animation:none!important}
  .wheel-node{transform:rotate(calc(-1 * var(--a)))}
}

/* The embed measures itself off-flow before mounting. Keep its host in flow. */
@media (max-width:1023px){
  .gw-frame-shell{display:flow-root;margin-top:16px;min-height:1760px}
  .gw-frame-shell .gw-frame{margin-top:0}
}
@media (max-width:599px){.gw-frame-shell{min-height:1900px}}
@media (max-width:359px){.gw-frame-shell{min-height:2000px}}

@media (max-width:1023px){
  .censusmap{min-height:300px}
  .censusmap-ui{right:60px}
  .censusmap-toggle{flex-wrap:wrap;max-width:100%;border-radius:16px}
  .censusmap-toggle button{min-height:44px}
  .censusmap-chip{max-width:100%;white-space:normal}
  .censusmap .maplibregl-ctrl-group button{width:44px;height:44px}
  .calc-figure{min-width:0}
  .calc-figure .n{font-size:clamp(24px,7vw,40px);overflow-wrap:anywhere}
}