/* == Responsive ============================================================ *
 * Order is load-bearing: tablet, then phone, then print LAST, because several
 * rules rely on source order to win at equal specificity. Same convention as
 * darwin-policy-wizard (see its comments at lines 641, 747, 809).
 *
 * The phone strategy is ported from policy-wizard's ≤640 tier
 * (docs/superpowers/specs/2026-07-19-mobile-responsive-design.md):
 * the topbar SHEDS rather than wraps, there is only ever one sticky bar per
 * screen, the modal becomes a bottom sheet, and inputs go to 16px so iOS does
 * not auto-zoom on focus.
 * ========================================================================== */

/* ---- Tablet ≤900px ------------------------------------------------------- */
@media (max-width: 900px){
  .page{padding:var(--space-8) var(--space-6)}
  .hero{padding:var(--space-10) var(--space-6)}
  .ctabar{padding:var(--space-4) var(--space-6)}
  .footer{padding:var(--space-6)}
  .cards{grid-template-columns:1fr}
  /* The hero compass is desktop-only. app.js will not import it below this
     width in the first place, but a wide->narrow resize AFTER load leaves
     .with-art on the element, so the grid has to unwind here too. */
  .hero-inner.with-art{display:block}
  .hero-inner.with-art .hero-art{display:none}
}

/* ---- Phone ≤640px ------------------------------------------------------- */
@media (max-width: 640px){
  /* Topbar sheds rather than wraps. Identical to policy-wizard's ≤640 rules
   * (its lines 751–755): the divider, the FREE badge, and the framework logos
   * go; the product NAME stays at 13px. Keep these in lockstep with that file. */
  .topbar{gap:10px;padding:0 14px}
  .topbar .divider,.topbar .free{display:none}
  .topbar .product{font-size:13px}
  .topbar .right{gap:8px}
  .topbar .right .btn-primary{padding:9px 13px;font-size:13px}

  .hero{padding:var(--space-8) var(--space-4)}
  .hero h1{font-size:28px;line-height:1.2}
  .hero p{font-size:14px}
  .page{padding:var(--space-6) var(--space-4)}
  .sechead h2{font-size:23px}

  /* 16px prevents iOS from zooming the viewport on focus. */
  .input{font-size:16px}
  textarea.input{font-size:16px}
  .url-row{flex-direction:column;align-items:stretch}
  /* flex-basis follows the MAIN axis, so the 320px basis that sets the input's
     width in a row became a 320px HEIGHT once this stacked. The field rendered
     eight times taller than its own padding and font size implied. */
  .url-row .input{flex:0 0 auto}
  /* Matches the min-height the ctabar and modal buttons already get here. At
     39px this sat under the 44px touch-target floor, and under a 44px input. */
  .url-row .btn{width:100%;min-height:46px}

  .ctabar{padding:var(--space-3) var(--space-4);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom))}
  .ctabar-inner{gap:var(--space-2)}
  .ctabar .actions{margin-left:0;width:100%}
  .ctabar .actions .btn{flex:1;min-height:46px}

  /* Modal becomes a bottom sheet. */
  .overlay{align-items:flex-end;padding:0}
  .modal{width:100%;max-width:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    max-height:92vh;padding:var(--space-5) var(--space-4);
    padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom))}
  .modal-row{flex-direction:column;gap:0}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .btn{width:100%;min-height:46px}

  /* Strip stacks; the trail goes left-aligned with the rest rather than keeping
   * a right rail that would be 60px wide. */
  .rstrip{gap:var(--space-3);padding:var(--space-4)}
  .rstrip-side{flex-basis:100%;text-align:left}
  .rstrip .rp-trail div{justify-content:flex-start}
  .pgroup{padding:var(--space-4)}
  .footer-inner .right{margin-left:0}
}

/* ---- Print (LAST) ------------------------------------------------------- */
@media print{
  .topbar,.ctabar,.overlay,.footer,.skip-link,.loading{display:none !important}
  .hero{background:var(--white) !important;color:var(--text-body) !important;padding:0 0 var(--space-6)}
  .hero::before{display:none}
  /* A live WebGL canvas prints as an empty box on a now-white hero. Drop it and
     let the copy have the full measure back. */
  .hero-inner.with-art{display:block}
  .hero-inner.with-art .hero-art{display:none !important}
  .hero p{color:var(--text-subtitle) !important}
  .hero .overline{color:var(--gray-500) !important}
  .page{padding:0;max-width:none}
  .cards{grid-template-columns:1fr 1fr;gap:var(--space-3)}
  .card{break-inside:avoid;box-shadow:none}
  .card-check{display:none}
  body{background:var(--white)}
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
}