/* ============================================================
   RESPONSIVE — mobile first; desktop additions
============================================================ */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:420px){
  .row2{grid-template-columns:1fr}
  .stats{gap:var(--s5)}
  .sheet-actions{grid-template-columns:1fr}
  .searchbar{grid-template-columns:1fr 1fr}
  .searchbar input[type=search]{grid-column:1 / -1}
  .card,.thought,.continue-page,.publish,.portrait,.graph,.auth{padding-left:var(--s4);padding-right:var(--s4)}
  .hero-thought .card{padding:var(--s5) var(--s4)}
  .hero .ctas{flex-direction:column;align-items:stretch}
  .hero .ctas .btn{width:100%}
  .anchor-block{padding:var(--s4)}
}
@media (min-width:720px){
  body{padding-bottom:var(--s7)}
  body.has-bar{padding-bottom:calc(var(--s7) + 88px)}
  .bottom-nav{display:none}
  .top-nav .primary-nav{display:inline-flex}
  .top-nav #logout{display:inline-flex}
  .page{padding-top:var(--s5)}
  .continue-bar{bottom:28px}
  .hero{padding:var(--s9) 0 var(--s7)}
  .card{padding:var(--s6) var(--s6) var(--s5)}
  .card .question.t-huge,.card .question.t-large,.card .question.t-medium{font-size:1.5rem}
  .thought,.continue-page,.publish,.portrait,.graph{padding:var(--s7) var(--s7) var(--s7)}
  .anchor-block{padding:var(--s6)}
  .msg.human p{font-size:1.125rem}
  .sheet{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:var(--r-card);box-shadow:var(--shadow-float)}
  @keyframes sheet-up{from{transform:translate(-50%,-46%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
}
@media (min-width:1024px){
  .page{padding-top:var(--s6)}
}
@media (max-width:420px){
  .anchor-block .quote{padding:var(--s3) var(--s4)}
  .start-anchor{padding:var(--s5) var(--s4)}
  .start-anchor .ctas .btn{flex:1 1 100%}
  .thought .byline .jump{margin-left:0}
}