/* ============================================================
   SHIFTSIMPLE — PHONE REFLOW (styles/responsive.css)
   ============================================================
   Loaded LAST in index.html by design: these max-width:600px rules win
   the cascade against every desktop rule above them. Domain stylesheets
   fetched later (pages/dealer|lender|admin.css) only contain selectors
   that do not appear here, which is what keeps this ordering safe — see
   tests/regression/architecture-boundaries-test.js. */
  /* ============================================================
  PHONE LAYOUT — one shared block for ALL SIX themes (themes only set
  colors/assets above; nothing here is theme-specific).
  ============================================================
  Desktop rules carried a desktop column into the phone: 28px page
  gutters, 26px card padding, 34px results padding and a nav that stacked
  its four tabs in a column beside the brand. At phone widths that left
  the main content 72–86% of the viewport wide and the header ~180px
  tall. These rules re-flow the SAME content to use the phone screen:
  small gutters, cards and result blocks edge to edge inside them, the
  nav as a brand row + full-width tab row, and shorter section spacing.
  No transform:scale, no zoom, no smaller body type, no smaller buttons —
  only containers, padding and reflow change. Desktop (>600px) is
  untouched. */
  @media (max-width:600px){
    /* 1. page container — nearly the full viewport */
    .wrap{padding-left:14px;padding-right:14px;}
    .wrap[style*="padding-top:52px"],.wrap[style*="padding-top:64px"],.wrap[style*="padding-top:80px"],.wrap[style*="padding:72px 0"]{padding-top:32px !important;}
    .wrap[style*="padding-bottom:70px"],.wrap[style*="padding-bottom:80px"],.wrap[style*="padding:72px 0"]{padding-bottom:48px !important;}
    /* full-bleed bands that cancel the desktop 28px gutter with negative
    margins must cancel the phone gutter instead, or they scroll sideways */
    .final-cta[style*="-28px"]{margin-left:-14px !important;margin-right:-14px !important;}
    /* 7. header — brand row, then the tabs across the full width (no more
    four-row column squeezed beside the logo) */
    .nav-inner{flex-wrap:wrap;padding:10px 14px 8px;gap:4px 12px;}
    .nav-right{flex:1 0 100%;justify-content:flex-start;gap:4px 6px;}
    .tabs{gap:4px 6px;}
    .tab-btn{padding:8px 11px;font-size:13.5px;}
    /* The reference-ID toggle is a SIBLING of .tabs (so it can stay pinned at
    tablet widths — see layout.css). On phones, flatten both containers with
    display:contents so the four primary tabs and the toggle wrap together as
    one group within .nav-right (≤ 2 rows, nav ≤ 140px), exactly as when the
    toggle lived inside .tabs — never on a third row of its own. */
    .nav-right > .tabs, .nav-right > .nav-ref{display:contents;}
    /* 2. cards / sections — expand across the viewport, keep readable padding */
    .card{padding:18px 16px;}
    .card .card{padding:14px 12px;}
    .results-big{padding:24px 16px;}
    .results-summary{padding:20px 16px;}
    .vc-body{padding:18px 16px;}
    .score-pair{gap:10px;}
    .score-chip{padding:12px 8px;}
    .shortlist-panel{padding:18px 16px;}
    .narrow-card{padding:20px 16px;} /* Contact / sign-in form boxes: the phone gutter is the only margin they need */
    .sample-card{padding:14px;}
    .edu-card{padding:16px;min-width:0;}
    .hwgh-inline{margin-top:12px;padding-top:12px;}
    .compare-table th,.compare-table td{padding:10px 8px;}
    .section-head{margin-bottom:28px;}
    .hero{padding:28px 14px 20px;} /* the hero .wrap sets its own padding shorthand, so give it the phone gutter too */
    .hero-ctas{margin-top:22px;}
    .hero-ctas .btn{flex:1 1 auto;justify-content:center;}
    .equation{padding:24px 0;gap:14px;}
    .step-labels{font-size:11px;margin-bottom:18px;}
    footer{padding:36px 0 84px;}
    .foot-cols{gap:22px;}
    /* modals — use the screen, not a desktop dialog with 20px+26px of padding */
    .modal-backdrop{padding:12px;}
    .modal-box{padding:20px 16px;max-height:90vh;}
    .video-modal-box{border-radius:6px;}
    /* 8. overflow guards — long references, emails and URLs wrap instead of
    forcing the page wider than the phone */
    .wrap{overflow-wrap:anywhere;}
    .wrap img,.wrap video,.wrap table{max-width:100%;}
    .wrap pre{white-space:pre-wrap;}
  }