/* ═══ calculators/fee-awareness/calc.css — OWNER: Agent C (v4).
   Page styles for the fee-awareness calculator. Consumes tokens.css + scenes.css
   primitives (.wa-scene, .glass-live, .wa-card, .wa-gate, .wa-cta-band).
   Controls ≥44px, transform/opacity motion only, square corners. ═══ */

/* ── V5-GATE CLS fix: metric-matched fallback faces (page-scoped) ──
   Root cause (Lighthouse mobile CLS 0.212, shifting node .calc-grid): fonts are
   async site-wide, so first paint renders raw sans-serif/serif fallbacks whose
   advance widths differ from DM Sans / Cormorant Garamond. When the web fonts
   arrive, .section-sub wraps to one MORE line (+27px @375w) and shoves the whole
   ~1300px .calc-grid down; .calc-note rewraps inside the output card (+21px).
   Every such reflow also re-triggers ScrollTrigger auto-refresh (the TBT storm).
   Fix: local fallback faces width-matched to the web fonts (size-adjust measured
   empirically via canvas measureText against the live faces, then swept across
   360/375/390/412/430px for zero wrap flips: DM Sans mixed-case = 104.6% of
   Arial; DM Sans CAPS glyphs are far narrower — 91.2% of Arial — and the
   letter-spaced uppercase elements need their own face because em letter-spacing
   is identical across faces and dilutes size-adjust; Cormorant Garamond = 95.43%
   of Times New Roman; ascent/descent from fontBoundingBox metrics) so fallback
   line-wrapping == settled line-wrapping at every viewport width. Font LOADING
   is untouched; this only upgrades the fallback rendering, and calc.css ships
   only on this page. */
@font-face{
  font-family:'DM Sans Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Roboto');
  size-adjust:104.6%;ascent-override:99%;descent-override:31%;line-gap-override:0%;
}
@font-face{
  font-family:'DM Sans Fallback Caps';
  src:local('Arial'),local('Helvetica Neue'),local('Roboto');
  size-adjust:91.2%;ascent-override:99%;descent-override:31%;line-gap-override:0%;
}
@font-face{
  font-family:'Cormorant Fallback';
  src:local('Times New Roman'),local('Georgia');
  size-adjust:95.43%;ascent-override:92%;descent-override:29%;line-gap-override:0%;
}
body{font-family:'DM Sans','DM Sans Fallback',sans-serif;}
.section-h,.wa-card h3,.wa-cta-band h3,.wa-gate-title{
  font-family:'Cormorant Garamond','Cormorant Fallback',serif;
}
.wa-gate-input{font-family:'DM Sans','DM Sans Fallback',sans-serif;}
/* uppercase + tracked elements → caps-tuned fallback */
.eyebrow,.calc-label,.wa-gate-label,.btn-gold,.wa-gate-submit{
  font-family:'DM Sans','DM Sans Fallback Caps',sans-serif;
}

/* ── noscript notice ── */
.calc-noscript{
  position:relative;z-index:var(--z-content);
  max-width:1240px;margin:120px auto 0;padding:var(--s-2) var(--s-3);
  border:1px solid var(--border);background:rgba(var(--accent-rgb),0.07);
  font-size:var(--fs-sm);color:var(--text);
}
.calc-noscript a{color:var(--gold);}

/* ── layout ── */
.calc-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:var(--s-4);align-items:start;
}
.calc-card{padding:var(--s-5);}
.calc-card-h{
  font-family:'Cormorant Garamond','Cormorant Fallback',serif;font-size:var(--fs-lg);
  color:var(--white);font-weight:600;margin-bottom:var(--s-3);
}

/* ── input fields ── */
.calc-field{margin-bottom:var(--s-3);}
.calc-field:last-child{margin-bottom:0;}
.calc-label{
  display:block;font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
.calc-hint{display:block;font-size:0.72rem;color:var(--muted);line-height:1.6;margin-top:8px;}

.calc-input,.calc-num{
  background:rgba(var(--white-rgb),0.04);
  border:1px solid var(--border-subtle);
  color:var(--white);
  font-family:'DM Sans','DM Sans Fallback',sans-serif;
  transition:border-color var(--dur-fast);
}
.calc-input:focus,.calc-num:focus{border-color:var(--gold);}
.calc-input::placeholder{color:var(--muted);}
.calc-input{
  width:100%;min-height:52px;padding:12px 14px;
  font-size:1.15rem;font-weight:500;font-variant-numeric:tabular-nums;
}
.calc-row{display:flex;align-items:center;gap:var(--s-2);}
.calc-num{
  width:104px;min-height:44px;padding:8px 10px;flex:none;
  font-size:1rem;font-weight:500;text-align:right;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield;
}

/* ── range slider (44px hit area, 4px track, gold thumb) ── */
.calc-range{
  -webkit-appearance:none;appearance:none;
  flex:1;min-width:0;height:44px;
  background:transparent;cursor:pointer;
}
.calc-range::-webkit-slider-runnable-track{height:4px;background:rgba(var(--white-rgb),0.14);}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-9px;
  background:var(--gold);border:none;border-radius:50%;
  transition:background var(--dur-micro);
}
.calc-range::-webkit-slider-thumb:hover{background:var(--gold-light);}
.calc-range::-moz-range-track{height:4px;background:rgba(var(--white-rgb),0.14);}
.calc-range::-moz-range-thumb{
  width:22px;height:22px;
  background:var(--gold);border:none;border-radius:50%;
  transition:background var(--dur-micro);
}
.calc-range::-moz-range-thumb:hover{background:var(--gold-light);}
.calc-range:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ── output ── */
.calc-headline{
  font-family:'Cormorant Garamond','Cormorant Fallback',serif;
  font-size:clamp(1.45rem,2.6vw,2.05rem);
  color:var(--white);line-height:1.3;margin-bottom:var(--s-3);
  overflow-wrap:break-word;
}
.calc-headline .calc-gold{color:var(--gold);font-weight:600;}
.calc-breakdown{list-style:none;margin:0 0 var(--s-2);}
.calc-breakdown li{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);
  padding:10px 0;border-bottom:1px solid var(--border-subtle);font-size:var(--fs-sm);
}
.calc-breakdown .k{color:var(--muted);}
.calc-breakdown .v{color:var(--white);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}
.calc-breakdown li.calc-total .v{color:var(--gold);}
.calc-note{font-size:0.78rem;color:var(--muted);line-height:1.7;}

/* disclaimer — ADJACENT to output, inside the same glass card (rubric row 9) */
.calc-disclaimer{
  margin-top:var(--s-3);padding:14px 16px;
  border-left:2px solid var(--gold);background:rgba(var(--accent-rgb),0.07);
  font-size:0.75rem;line-height:1.7;color:var(--text);
}

/* ── scene 2 cards ── */
.calc-3grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);}

/* ── scene 3 CTAs ── */
.calc-cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:var(--s-5);}
.wa-gate-error{font-size:0.78rem;color:var(--warn);line-height:1.6;margin-top:10px;}
.wa-gate-success .btn-gold{margin-top:var(--s-2);}

/* ── responsive ── */
@media (max-width:1023px){
  .calc-grid,.calc-3grid{grid-template-columns:minmax(0,1fr);}
  .calc-card{padding:var(--s-4) var(--s-3);}
}
@media (max-width:480px){
  .calc-num{width:88px;}
  .calc-breakdown li{flex-wrap:wrap;}
}