/* =====================================================================
   mortgagecalculators.pro — design system
   ---------------------------------------------------------------------
   Direction: a lender's statement, not a landing page.
   Inputs sit on paper (white card, hairline rules, ledger labels); the
   answer is set in ink (deep forest panel). One graphic only — the
   amortization strip — because the flip from interest to principal is
   the single most characteristic fact about a mortgage.

   Typeface: Public Sans (one family, whole site). It is the face of
   US federal financial communication (USWDS) — institutional rather
   than startup, high x-height, tabular figures, 100–900 variable.
   Personality comes from the scale: heavy tight-tracked figures against
   small letterspaced ledger caps.

   No build step. No framework. Mobile-first.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root{
  /* Ink & forest */
  --ink:          #0C1A16;   /* darkest — statement panel base        */
  --ink-2:        #133026;   /* raised surface inside the panel       */
  --ink-line:     #24463A;   /* hairlines on dark                     */
  --forest:       #0F6B54;   /* primary brand green — 6.5:1 on white  */
  --forest-700:   #0A5040;
  --moss:         #38A483;   /* principal / accent on dark            */
  --moss-soft:    #9FD8C4;

  /* Counter-tone: interest is the money you don't keep */
  --clay:         #C0742F;   /* fills only                            */
  --clay-ink:     #8F4C1F;   /* text — 6.5:1 on white                 */
  --clay-soft:    #E7B98D;   /* on dark                               */

  /* Paper — cool mineral, deliberately not cream */
  --paper:        #F1F5F3;
  --card:         #FFFFFF;
  --line:         #DBE5E0;
  --line-strong:  #BFCEC7;
  --text:         #14231E;
  --muted:        #4E5F57;   /* 7:1 on white                          */

  /* Scale */
  --wrap: 68rem;
  --gap: 1.25rem;
  --r: 12px;      /* card radius   */
  --r-sm: 8px;    /* control radius*/

  --shadow: 0 1px 2px rgba(12,26,22,.05), 0 8px 24px -18px rgba(12,26,22,.35);
  --shadow-panel: 0 18px 40px -28px rgba(12,26,22,.85);

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }

/* 🔴 The [hidden] attribute loses to any author `display` declaration, and
   ui.js hides optional result rows with it while .rows > div sets
   display:flex. Without this reset a zero HOA row stays on screen. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"Public Sans","Public Sans Fallback",
              -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ line-height:1.16; letter-spacing:-.021em; margin:0 0 .5em; font-weight:800; }
h1{ font-size:clamp(1.8rem,5.4vw,2.6rem); }
h2{ font-size:clamp(1.28rem,3.4vw,1.65rem); margin-top:2.25rem; }
h3{ font-size:1.08rem; font-weight:700; letter-spacing:-.012em; }
p{ margin:0 0 1rem; }
a{ color:var(--forest-700); text-underline-offset:.16em; text-decoration-thickness:.07em; }
a:hover{ color:var(--forest); }
strong{ font-weight:700; }
small{ font-size:.86rem; }

:focus-visible{ outline:2.5px solid var(--forest); outline-offset:2px; border-radius:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:1.1rem; }

/* Ledger label — the one recurring structural device.
   Used for field labels, panel headers and stat captions. */
.label,
.field > label,
.stat-k{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Figures are tabular everywhere they can be compared. */
.num,.figure,.stat-v,table td,table th,.result-total{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ---------------------------------------------------------------------
   3. Masthead
   ------------------------------------------------------------------ */
.masthead{
  background:var(--ink);
  color:#EAF2EE;
  border-bottom:3px solid var(--forest);
}
.masthead .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem;
  min-height:3.5rem; padding-block:.6rem;
}
.brand{
  display:inline-flex; align-items:baseline; gap:.45rem;
  font-weight:800; letter-spacing:-.025em; font-size:1.06rem;
  color:#fff; text-decoration:none;
}
.brand b{ color:var(--moss-soft); font-weight:800; }
.brand span{ font-weight:500; color:#93AFA5; font-size:.9em; letter-spacing:0; }
.masthead nav{ margin-left:auto; display:flex; flex-wrap:wrap; gap:.35rem .8rem; }
.masthead nav a{
  color:#C6D9D2; text-decoration:none; font-size:.85rem; font-weight:600;
  padding:.2rem 0; border-bottom:2px solid transparent;
}
@media (min-width:34rem){
  .masthead nav{ gap:.35rem 1.1rem; }
  .masthead nav a{ font-size:.9rem; }
}
.masthead nav a:hover{ color:#fff; border-bottom-color:var(--moss); }

/* ---------------------------------------------------------------------
   4. Page head — H1 + R4 answer block
   ------------------------------------------------------------------ */
.pagehead{ padding:1.9rem 0 .25rem; }
.pagehead h1{ max-width:22ch; }

/* R4: the 40–60 word direct answer. Set apart by a forest rule, not a box. */
.r4{
  max-width:64ch;
  margin:0 0 1.6rem;
  padding-left:1rem;
  border-left:3px solid var(--forest);
  font-size:1.06rem;
  color:#233A33;
}
.r4 p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------------------
   5. Calculator — paper card + ink panel
   ------------------------------------------------------------------ */
.calc{
  display:grid;
  gap:1rem;
  grid-template-columns:minmax(0,1fr);   /* minmax(0,…) always — see §11 */
  margin-bottom:1.5rem;
}
@media (min-width:60rem){
  .calc{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:1.15rem; align-items:start; }
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:1.15rem 1.05rem 1.25rem;
}
.card-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  padding-bottom:.7rem; margin-bottom:1.05rem;
  border-bottom:1px solid var(--line);
}
.card-head h2{ font-size:1.02rem; margin:0; letter-spacing:-.01em; }

/* --- Fields ------------------------------------------------------- */
.fields{
  display:grid;
  gap:.95rem 1rem;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:34rem){
  .fields{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fields .field-wide{ grid-column:1 / -1; }
}

.field{ min-width:0; }
.field > label{ margin-bottom:.34rem; }

/* GENERIC CONTROL RULE — must stay above the affix overrides in §5b. */
.field input[type="text"],
.field input[type="number"],
.field select{
  width:100%;
  padding:.62rem .72rem;
  font:inherit;
  font-size:1rem;
  font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--text);
  background:#FCFDFC;
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);
  appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) 55%, calc(100% - .72rem) 55%;
  background-size:.34rem .34rem,.34rem .34rem;
  background-repeat:no-repeat;
  padding-right:2rem;
}
.field input:hover,.field select:hover{ border-color:#9DB3AA; }
.field input:focus,.field select:focus{
  border-color:var(--forest);
  outline:none;
  box-shadow:0 0 0 3px rgba(15,107,84,.16);
}
.field .hint{ display:block; margin-top:.3rem; font-size:.78rem; color:var(--muted); line-height:1.45; }

/* --- 5b. Affixes: $ prefix, % and unit suffixes -------------------- *
   🔴 HARD-WON RULE — DO NOT REORDER.
   These padding overrides MUST come AFTER the generic control rule
   above AND win on specificity (.field .input-money > input = 0,3,1
   vs the generic .field input[type=text] = 0,2,1). If they are moved
   earlier, or written at equal specificity, the generic padding wins
   and the "$" glyph lands on top of the first digit. This has bitten
   us in production before. Both guards are deliberate: order AND
   specificity.
   ------------------------------------------------------------------ */
.input-money,.input-pct,.input-suffix{ position:relative; display:block; }

.input-money::before{
  content:"$";
  position:absolute; left:.72rem; top:50%; transform:translateY(-50%);
  font-weight:700; color:var(--muted); line-height:1; pointer-events:none;
}
.input-pct::after{
  content:"%";
  position:absolute; right:.78rem; top:50%; transform:translateY(-50%);
  font-weight:700; color:var(--muted); line-height:1; pointer-events:none;
}
.input-suffix::after{
  content:attr(data-suffix);
  position:absolute; right:.78rem; top:50%; transform:translateY(-50%);
  font-weight:700; font-size:.84rem; color:var(--muted); line-height:1; pointer-events:none;
}

.field .input-money > input[type="text"],
.field .input-money > input[type="number"]{ padding-left:1.75rem; }

.field .input-pct > input[type="text"],
.field .input-pct > input[type="number"],
.field .input-suffix > input[type="text"],
.field .input-suffix > input[type="number"]{ padding-right:2.1rem; }

/* --- Range: every numeric field gets one (injected by ui.js) ------- */
.field input[type="range"]{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; margin:.55rem 0 0;
  height:1.15rem; padding:0; background:transparent;
  accent-color:var(--forest);
  cursor:pointer;
}
/* accent-color styles the track+thumb in all current browsers; these
   rules only fix the track height where accent-color is ignored. */
.field input[type="range"]::-webkit-slider-runnable-track{
  height:.3rem; border-radius:999px; background:var(--line-strong);
}
.field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:1.1rem; height:1.1rem; margin-top:-.4rem;
  border-radius:50%; background:var(--forest); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(12,26,22,.35);
}
.field input[type="range"]::-moz-range-track{
  height:.3rem; border-radius:999px; background:var(--line-strong);
}
.field input[type="range"]::-moz-range-thumb{
  width:1.1rem; height:1.1rem; border:2px solid #fff; border-radius:50%;
  background:var(--forest); box-shadow:0 1px 4px rgba(12,26,22,.35);
}

/* ---------------------------------------------------------------------
   6. Result panel — the statement, set in ink
   ------------------------------------------------------------------ */
.panel{
  background:
    radial-gradient(120% 90% at 100% 0%, #17392E 0%, transparent 60%),
    var(--ink);
  color:#E9F2EE;
  border-radius:var(--r);
  box-shadow:var(--shadow-panel);
  padding:1.15rem 1.05rem 1.3rem;
  position:relative;
  overflow:hidden;
}
@media (min-width:60rem){
  .panel{ position:sticky; top:1rem; }
}
.panel .label,.panel .stat-k{ color:#8FB0A5; }
.panel a{ color:var(--moss-soft); }

.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding-bottom:.7rem; margin-bottom:1rem;
  border-bottom:1px solid var(--ink-line);
}
.panel-head .label{ margin:0; }
.tag{
  font-size:.64rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--clay-soft); border:1px solid rgba(231,185,141,.4);
  border-radius:999px; padding:.16rem .5rem; white-space:nowrap;
}

/* The headline figure. */
.result-total{
  font-size:clamp(2.5rem,10vw,3.4rem);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
  color:#fff;
  margin:0;
}
.result-sub{ margin:.4rem 0 1.15rem; font-size:.9rem; color:#9CBBB0; }

/* Breakdown rows — a ledger, not a table. */
.rows{ margin:0 0 1.15rem; border-top:1px solid var(--ink-line); }
.rows > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid var(--ink-line);
  font-size:.94rem;
}
.rows dt,.rows .k{ color:#A9C6BC; margin:0; }
.rows dd,.rows .v{ margin:0; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; }
.rows > div.is-muted .v{ color:#8FB0A5; font-weight:600; }
.rows > div.is-total{ border-bottom:none; padding-top:.65rem; }
.rows > div.is-total .k{ color:#fff; font-weight:700; }

/* --- 6b. SIGNATURE: the amortization strip ------------------------- *
   One bar per year of the loan. Each bar is that year's payments,
   split at the point where interest ends and principal begins, so the
   crossover — the year your payment finally works for you — is visible
   as a shape rather than a sentence. Built from N flex children with a
   two-stop gradient: no chart library, no canvas, no layout thrash.
   ------------------------------------------------------------------ */
.strip{
  display:flex; align-items:flex-end; gap:2px;
  height:4.5rem; margin:.15rem 0 .55rem;
}
@media (min-width:60rem){ .strip{ height:5.25rem; } }
.strip i{
  flex:1 1 0; min-width:0; height:100%;
  border-radius:1.5px;
  background:linear-gradient(
    to top,
    var(--moss) 0 calc(var(--p,.2) * 100%),
    var(--clay) calc(var(--p,.2) * 100%) 100%
  );
  transition:background .35s cubic-bezier(.2,.7,.2,1);
}
.strip i.is-flip{ box-shadow:0 0 0 1.5px #fff, 0 0 0 3px var(--ink); }
.strip-axis{
  display:flex; justify-content:space-between;
  font-size:.68rem; letter-spacing:.06em; color:#7FA096; text-transform:uppercase;
}
.strip-key{
  display:flex; flex-wrap:wrap; gap:.35rem 1rem;
  margin:.85rem 0 0; font-size:.86rem; color:#BFD7CE;
}
.strip-key span{ display:inline-flex; align-items:center; gap:.4rem; }
.strip-key i{ width:.7rem; height:.7rem; border-radius:2px; flex:none; }
.strip-key .k-principal i{ background:var(--moss); }
.strip-key .k-interest i{ background:var(--clay); }
.strip-key b{ color:#fff; font-variant-numeric:tabular-nums; }

/* The crossover fact, stated plainly under the graphic. */
.flipline{
  margin:.7rem 0 0; padding-top:.7rem;
  border-top:1px solid var(--ink-line);
  font-size:.88rem; color:#BFD7CE;
}
.flipline b{ color:#fff; }

.panel-note{
  margin:.9rem 0 0; font-size:.78rem; line-height:1.5; color:#84A79B;
}

/* ---------------------------------------------------------------------
   7. Body prose, stats, tables
   ------------------------------------------------------------------ */
.prose{ max-width:68ch; }
.prose ul{ padding-left:1.15rem; margin:0 0 1rem; }
.prose li{ margin-bottom:.4rem; }
.prose h2:first-child{ margin-top:0; }

.stats{
  display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));
  margin:1.25rem 0 1.5rem; padding:0; list-style:none;
}
.stats li{
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--forest);
  border-radius:var(--r-sm); padding:.7rem .8rem;
}
.stat-v{ display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.02em; margin-top:.15rem; }

/* 🔴 Tables always live inside .table-wrap — horizontal scroll belongs
   to the table, never to the page body. Max 2 tables per page. */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); margin:0 0 1.25rem;
}
.table-wrap table{ border-collapse:collapse; width:100%; min-width:32rem; font-size:.92rem; }
.table-wrap th,.table-wrap td{ padding:.55rem .7rem; text-align:right; white-space:nowrap; }
.table-wrap th:first-child,.table-wrap td:first-child{ text-align:left; }
.table-wrap thead th{
  position:sticky; top:0;
  background:#EDF3F0; color:var(--muted);
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  border-bottom:1px solid var(--line-strong);
}
.table-wrap tbody tr + tr td{ border-top:1px solid var(--line); }
.table-wrap tbody tr:nth-child(even){ background:#F8FBF9; }

details.reveal{
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); margin:0 0 1.5rem;
}
details.reveal > summary{
  cursor:pointer; padding:.75rem .9rem; font-weight:700; font-size:.94rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
details.reveal > summary::-webkit-details-marker{ display:none; }
details.reveal > summary::after{ content:"+"; font-size:1.15rem; font-weight:700; color:var(--forest); }
details.reveal[open] > summary::after{ content:"−"; }
details.reveal[open] > summary{ border-bottom:1px solid var(--line); }
details.reveal .table-wrap{ border:none; border-radius:0; margin:0; }

/* ---------------------------------------------------------------------
   8. Cluster links
   ------------------------------------------------------------------ */
.cluster{ margin:2rem 0 1.5rem; }
.cluster-grid{
  display:grid; gap:.7rem;
  grid-template-columns:minmax(0,1fr);
  padding:0; margin:0; list-style:none;
}
@media (min-width:34rem){ .cluster-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:56rem){ .cluster-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.cluster-grid a{
  display:block; height:100%;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.75rem .85rem;
  text-decoration:none; color:var(--text);
  transition:border-color .15s ease, transform .15s ease;
}
.cluster-grid a:hover{ border-color:var(--forest); transform:translateY(-1px); }
.cluster-grid b{ display:block; font-size:.97rem; font-weight:700; color:var(--forest-700); letter-spacing:-.012em; }
.cluster-grid span{ display:block; margin-top:.15rem; font-size:.84rem; line-height:1.45; color:var(--muted); }

/* ---------------------------------------------------------------------
   9. Byline, sources, footer
   ------------------------------------------------------------------ */
.byline{
  margin:2rem 0 0; padding-top:1rem;
  border-top:2px solid var(--ink);
  font-size:.86rem; color:var(--muted);
}
.byline .who{ font-weight:700; color:var(--text); }
.byline ul{ margin:.5rem 0 0; padding-left:1.1rem; }
.byline li{ margin-bottom:.25rem; }

.sitefoot{
  margin-top:2.5rem; padding:1.5rem 0 2rem;
  background:var(--ink); color:#93AFA5; font-size:.86rem;
}
.sitefoot a{ color:#C6D9D2; }
.sitefoot .wrap > p{ margin:0 0 .5rem; }

/* ---------------------------------------------------------------------
   10. Ad slots — height reserved so late-loading units cannot shift
       the page. Placeholders only; real network code is injected later.
   ------------------------------------------------------------------ */
.adslot{
  display:block; width:100%; margin:1.5rem auto;
  text-align:center; overflow:hidden;
}
.adslot-728{ min-height:100px; }
@media (min-width:50rem){ .adslot-728{ min-height:90px; } }
.adslot-native{ min-height:250px; }
.adslot-320{ min-height:100px; }

/* ---------------------------------------------------------------------
   11. Notes to future editors
   ------------------------------------------------------------------ *
   · Grid columns are always minmax(0,1fr) — never plain 1fr. A bare 1fr
     resolves to min-content:auto and long unbroken figures push the
     whole grid wider than the viewport.
   · Tables go in .table-wrap. Two tables per page, maximum.
   · No FAQ block on these pages — measured negative on rank.
   · Body copy band: 900–1,800 words. Over 3,000 measured harmful.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   12. Motion & print
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

@media print{
  .masthead nav,.adslot,.cluster,.sitefoot{ display:none; }
  body{ background:#fff; }
  .panel{ background:#fff; color:#000; box-shadow:none; border:1px solid #000; }
  .panel .label,.result-sub,.rows dt{ color:#333; }
  .result-total,.rows dd{ color:#000; }
}