/* Full-width + device tuning layered over each guide's original styles.
   Loaded after the page's own <style>, so these rules win. */

:root{--gutter:clamp(16px,3.2vw,56px)}

/* ---------- full screen: drop the 1240px cap ---------- */
.hero,.bar-in,.wrap,footer,.guides{max-width:none;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap{grid-template-columns:clamp(220px,17vw,300px) minmax(0,1fr);gap:clamp(24px,3vw,48px)}
.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px)}
.hero h1{font-size:clamp(2rem,4.4vw,4.6rem)}
.hero p{max-width:60ch}
.ans p,.ans ul,.ans ol{max-width:90ch}

/* toolbar buttons: laid out inline on desktop exactly as before */
.tools{display:contents}

/* ---------- big screens ---------- */
@media (min-width:1600px){
  .cram .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .card summary h4{font-size:1.12rem}
}

/* ---------- tablets (landscape + portrait) ---------- */
@media (max-width:1180px) and (min-width:901px){
  .wrap{grid-template-columns:210px minmax(0,1fr)}
  .hero{grid-template-columns:1fr 1fr}
  .search{flex-basis:100%}
}

@media (max-width:900px){
  .hero,.wrap{grid-template-columns:minmax(0,1fr)}
  html,body{overflow-x:clip}
  /* one sticky row for search, one swipeable row for the buttons */
  .bar-in{flex-wrap:wrap;row-gap:8px}
  .search{flex:1 1 100%}
  .tools{display:flex;gap:8px;align-items:center;flex:1 1 100%;min-width:0;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .tools::-webkit-scrollbar{display:none}
  .tools>*{flex:none}
  .tools .iconbtn{margin-left:auto}
  nav.side{scroll-margin-top:120px}
  .side .links{scrollbar-width:none}
  .side .links::-webkit-scrollbar{display:none}
}

/* ---------- phones ---------- */
@media (max-width:520px){
  .hero{padding-top:20px;padding-bottom:18px}
  .hero h1{font-size:clamp(1.9rem,9vw,2.4rem)}
  .hero p{font-size:1rem}
  .layer{grid-template-columns:44px 1fr;padding:9px 12px}
  .layer:hover{transform:none}
  .search input{font-size:16px} /* stops iOS zooming in on focus */
  .chip,.seg button{padding:8px 12px}
  .card summary{padding:14px}
  .ans{padding:0 14px 14px}
  .card-foot{padding:0 14px 12px}
  .cram{padding:16px 14px}
  .cram .grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;gap:2px}
  .sec-head h2{font-size:1.4rem}
  table{font-size:.86rem}
  .guides{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .guides::-webkit-scrollbar{display:none}
  .guides a,.guides span{flex:none}
}

/* bigger tap targets on touch screens */
@media (pointer:coarse){
  .chip,.seg button{min-height:40px}
  .iconbtn{width:42px;height:42px}
  .side a{padding:9px 12px}
}