/* Shared calculator chrome. Loaded after each page's own <style> so the
   contrast fix wins. --subtle (#6e6a64) was about 3.6:1 on #0c0d10. */
:root{--subtle:#b7b1a8}
.crumb{font-size:.82rem;color:var(--subtle);margin:0 0 1rem}
.crumb a{color:var(--muted,#c8c2b8)}
.answer{background:var(--surface,#14151a);border:1px solid var(--line,#2a2b32);border-left:3px solid var(--accent,#8fa39a);border-radius:1rem;padding:1rem 1.1rem;margin:1rem 0}
.wil-aeo{margin-top:1.6rem}
.wil-aeo h2{font-size:1.35rem;margin:1.2rem 0 .5rem}
.wil-aeo h3{font-size:1.02rem;margin:0 0 .35rem}
.wil-aeo .card{margin-top:.65rem}
.wil-aeo ol,.wil-aeo ul{margin:.4rem 0 0 1.15rem;color:var(--muted,#c8c2b8)}
.wil-aeo li{margin:.35rem 0}
.wil-echo{font-size:.78rem;color:var(--muted,#c8c2b8);font-variant-numeric:tabular-nums}
.wil-hint{font-size:.75rem;font-weight:400;color:var(--subtle,#b7b1a8)}
label .wil-echo,label .wil-hint{display:block}
#wil-live{margin:1rem 0}
#wil-live #headline{font-size:clamp(1.45rem,3vw,2rem);line-height:1.2;margin:.25rem 0}
input[aria-invalid="true"]{border-color:#c47d7d}
@media (max-width:640px){
  .wil-aeo h2{font-size:1.2rem}
}

/* Phone pass at 375px. Every calculator page links this file after its own
   <style>, so these rules win over the per-page label size and .btn height
   without editing those pages or any of their inline money math. The whole
   pass is one @media block at 480px and below, so nothing wider changes.

   The selectors stay on the classroom's own control classes (.btn, .tabs,
   .chips) and on form fields, and never target a bare `button`. The hosted tip
   button rendered inside #paypal-tip-container on several tools therefore
   matches none of them, which keeps this stylesheet clear of tip and checkout
   markup. */
@media (max-width:480px){
  /* 1. Fields were sizing off the 0.88rem label (about 14px), and the pages
     that set no font on input at all fell back to the ~13px browser default.
     Under 16px is where iOS Safari decides the page has been zoomed and zooms
     it when a field takes focus. .wrap out-specifies the page's bare
     input/select rules, and this file loads after their <style>, so 16px is
     what computes. */
  .wrap input,.wrap select,.wrap textarea{font-size:16px}
  /* 2. Primary tap targets. The per-page .btn / .tabs / .chips rules sat at
     2.5-2.6rem, which is 40-42px. */
  .wrap .btn,.wrap .tabs button,.wrap .chips button{min-height:44px}
  /* 3. Nothing may force horizontal scroll at 375px. A grid item keeps its
     intrinsic width by default, so a 1fr track could not shrink below it;
     min-width:0 lets the track and the card inside it narrow to the phone. */
  .wrap .grid,.wrap .grid>*,.wrap .card,.wrap .card>*{min-width:0;max-width:100%}
  /* The money tables hold four or five currency columns whose minimum content
     width exceeds the ~300px card interior: the amortization schedule and the
     DTI program screens. The card becomes that table's scroll container so the
     table scrolls sideways inside the card while the document stays still.
     The card is used rather than the table itself because display:block on a
     <table> drops it out of table layout; overflowing the card keeps the
     header and body columns aligned. The amortization page needs exactly this
     shape, since its inline script builds "<div class=card><table>…</table>"
     as one string and there is no wrapper element to put the overflow on. */
  .wrap .card:has(> table){max-width:100%;overflow-x:auto}
  /* Long words, share-link text, and inline code wrap instead of pushing the
     document wider than the phone. */
  .wrap p,.wrap li,.wrap a,.wrap code{overflow-wrap:break-word}
  /* 4. Result boxes stack one to a row. The result containers are #stats, #out,
     and the per-tool #*-out grids; .g2 is included so the input pairs beside
     them stack too. nav.js already does this at 640px, but only after it adds
     body.wil-calc, so this keeps the layout right with scripting off. */
  .wrap .grid.g2,.wrap #stats,.wrap #out,.wrap [id$="-out"]{grid-template-columns:minmax(0,1fr)}
}