/* =====================================================================
   cirKITry v7 — phone polish (loaded last, site-wide)
   One rhythm, one left edge, 44px targets, a shorter footer.
   Everything here is inside a width query, so desktop is untouched.
   ===================================================================== */

/* ---------- Phones ---------- */
@media (max-width:600px){

  /* --- rhythm: every section breathes the same (was 62px + stray inner margins, so gaps ran 110-150px) --- */
  html body .section-space:not(#\#){padding-block:48px}
  html body .pd.section-space:not(#\#){padding-block:44px}
  html body .section-space > .shell > :last-child:not(#\#){margin-bottom:0}

  /* --- sticky header: 44px menu toggle, button and toggle 8px apart --- */
  html body .mobile-nav__toggle:not(#\#){width:44px;height:44px}
  html body .site-header .header-book:not(#\#){font-size:13px;padding-inline:12px}

  /* --- mobile menu: aligned to the logo's 18px edge, larger Archivo labels, quiet arrows (orange only for the
     current page and the primary button), sheet fills the screen so the page underneath never peeks through --- */
  html body .mobile-nav__panel:not(#\#){padding:12px 18px 28px;min-height:calc(100svh - 68px);box-shadow:none;border-top:1px solid var(--line)}
  html body .mobile-nav__panel nav:not(#\#){margin-bottom:22px}
  html body .mobile-nav__panel nav a:not(#\#){min-height:58px;padding:12px 0;font-family:var(--font-display);font-stretch:92%;font-size:1.375rem;font-weight:650;letter-spacing:-.012em;border-bottom-color:var(--line)}
  html body .mobile-nav__panel nav a:not(#\#)>svg{color:var(--ink-3);width:18px;height:18px}
  html body .mobile-nav__panel nav a[aria-current]:not(#\#)>svg{color:var(--orange,#ff7a00)}
  html body .mobile-nav__actions:not(#\#){gap:4px}
  html body .mobile-nav__actions .button:not(#\#){min-height:52px;padding-inline:18px;font-size:1rem}
  html body .mobile-nav__give:not(#\#){padding:0;min-height:48px;align-self:flex-start;width:max-content}

  /* --- footer: shorter, 44px links, logo as a sign-off rather than a billboard --- */
  html body .site-footer:not(#\#){padding-top:44px}
  html body .site-footer__main:not(#\#){gap:24px 24px}
  html body .site-footer__brand p:not(#\#){font-size:1.5rem;line-height:1.1;max-width:20ch}
  html body .site-footer .footer-heading:not(#\#){margin-bottom:4px}
  html body :is(.site-footer__nav,.site-footer__connect)>a:not(#\#){min-height:44px;font-size:1rem;align-self:stretch}
  html body .site-footer__connect>.footer-donate:not(#\#){align-self:flex-start}
  html body .site-footer .brand--footer:not(#\#){width:max-content;margin:28px 0 20px;padding:0}
  html body .site-footer .brand--footer .brand__logo:not(#\#){width:150px;height:auto}
  html body .site-footer__bottom:not(#\#){min-height:0;padding:14px 0 calc(16px + env(safe-area-inset-bottom));gap:0 16px;justify-content:space-between}
  html body .site-footer__bottom>p:not(#\#){flex-basis:auto;margin:0}
  html body .site-footer .motion-toggle:not(#\#){min-height:44px;padding-inline:0}

  /* --- "Other ways to help" rows: title over its link instead of two cramped columns --- */
  html body .v2-patch:not(#\#){align-items:flex-start;padding:16px 0}
  html body .v2-patch>div:not(#\#){flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}
  html body .v2-patch h2:not(#\#),html body .v2-patch h3:not(#\#){max-width:none}
  html body .v2-patch .text-link:not(#\#){max-width:none;min-height:44px}
  html body .v2-patch__port:not(#\#){margin-top:-2px}

  /* --- round "open" arrows on the resource rows: full 44px target --- */
  html body .v2-resource__link:not(#\#){min-width:44px;min-height:44px}

  /* --- kit ladder: bill-of-materials rows share the text column's edges (they bled 8px past the gutter) --- */
  html body .kl__part:not(#\#){margin-inline:0;padding-inline:0;min-height:44px}
  html body .kl__title:not(#\#),html body .toy__title:not(#\#){max-width:none}
  /* the ladder's end marker needs ~40px, not the 56px rung gap plus a full section pad */
  html body .kl__rung--last:not(#\#){--pb:44px}
  html body .kit-ladder.section-space:not(#\#){padding-bottom:28px}

  /* --- lesson toys: the figure plate sat 6px outside the gutter; section end matches the site rhythm --- */
  html body .lesson-toy__plate:not(#\#){margin-inline:0;padding:12px 4px}
  html body .lesson-toy:not(#\#){padding-bottom:48px}

  /* --- forms: card aligned to the 18px gutter (it sat 5px outside it) --- */
  html body .contact-form-wrap:not(#\#){margin-inline:0;padding:22px 16px}

  /* --- signal lab controls: 44px targets --- */
  html body.js-ready .lab-stage:not(#\#){min-height:44px}
  html body .lab-sequencer:not(#\#){gap:6px}
  html body .lab-power .bench-power:not(#\#){min-height:44px}
}