/* ============================================================
   Honest Mortgage — Calculator suite (tools.html)
   Eight working calculators in one tabbed surface. Vanilla.
   Visual language ported from the design-system Calculator.jsx.
   ============================================================ */

/* Tool switcher. These used to be rounded pills with a small inline icon,
   which read as filter tags. They are now square tool tiles: the icon sits
   in its own tile above a bold label, and a solid bottom edge makes each one
   look pressable. The open tool is the navy tile. */
.cs-tabs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; margin-bottom: 36px; }
.cs-tab {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 800; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--navy); background: #fff; border: 1.5px solid var(--rule);
  border-radius: 12px; padding: 16px 8px 14px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  box-shadow: 0 3px 0 var(--sand-deep);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cs-tab svg {
  width: 22px; height: 22px; padding: 10px; box-sizing: content-box; flex: none;
  border-radius: 10px; background: var(--terracotta-tint); color: var(--terracotta);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cs-tab:hover { transform: translateY(-2px); border-color: var(--navy); box-shadow: 0 5px 0 var(--sand-deep); }
.cs-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sand-deep); }
.cs-tab:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.cs-tab.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 3px 0 #001a36; }
.cs-tab.on svg { background: var(--terracotta); color: #fff; }
.cs-tab.on:hover { box-shadow: 0 5px 0 #001a36; }
.cs-nw { white-space: nowrap; }
/* Nine across stops fitting below ~1100px: two rows of five, then a
   swipeable single row on phones so the calculator stays near the top. */
@media (max-width: 1100px) { .cs-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cs-tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0 -2px 28px; scrollbar-width: none; }
  .cs-tabs::-webkit-scrollbar { display: none; }
  .cs-tab { flex: 0 0 100px; scroll-snap-align: start; }  /* 100px lets a fourth tile peek in, so the row reads as swipeable */
}
@media (prefers-reduced-motion: reduce) { .cs-tab, .cs-tab:hover, .cs-tab:active { transform: none; } }

/* directory grid — the entry state: 4 columns × 2 rows */
.cs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-card {
  display: flex; flex-direction: column; text-align: left;
  background: #fff; border: 1.5px solid var(--rule); border-radius: var(--radius-card);
  padding: 22px 22px 20px; cursor: pointer; font-family: var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cs-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--sand-deep); }
.cs-card__icon { color: var(--terracotta); display: inline-flex; margin-bottom: 12px; }
.cs-card__icon svg { width: 26px; height: 26px; }
.cs-card__t { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 5px; }
.cs-card__d { font-size: 14px; line-height: 1.5; color: var(--fg3); }
@media (max-width: 900px) { .cs-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cs-cards { grid-template-columns: 1fr; } }

/* back-to-directory bar (calculator state) */
.cs-bar { margin-bottom: 16px; }
.cs-back {
  background: none; border: 0; cursor: pointer; font-family: var(--font-sans);
  font-weight: 600; font-size: 14px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 0;
  transition: color var(--dur-fast) var(--ease);
}
.cs-back:hover { color: var(--navy); }
.cs-back svg { width: 16px; height: 16px; }

/* grid → calculator transition */
.cs-cards { transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); }
.cs-cards--leaving { opacity: 0; transform: translateY(-6px); pointer-events: none; }
@keyframes csRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cs-cards { transition: none; }
  .cs-bar, .cs-intro, .cs-controls, .cs-result { animation: none !important; }
}

/* intro */
.cs-intro { margin-bottom: 28px; max-width: 60ch; }
.cs-intro h2 { font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.025em; color: var(--navy); margin: 0 0 10px; }
.cs-intro p { font-size: 18px; line-height: 1.6; color: var(--fg2); margin: 0; }

/* the calculator grid */
.cs-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 3.5vw, 44px); align-items: start; }
.cs-col { display: flex; flex-direction: column; }
.cs-talk { margin-top: clamp(16px, 2.5vw, 22px); }
.cs-controls { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(26px, 3vw, 36px); }
.cs-controls.cs-controls--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.cs-controls.cs-controls--wide .cs-group-title { grid-column: 1 / -1; }

.cs-control { margin-bottom: 28px; }
.cs-control:last-child { margin-bottom: 0; }
.cs-ctop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px; }
.cs-ctop label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--navy); text-transform: uppercase; }
.cs-cval { font-size: 18px; font-weight: 700; color: var(--terracotta); font-variant-numeric: tabular-nums; }
/* the value doubles as an editable field — looks like text until you focus it */
input.cs-cval { font-family: inherit; flex: 1 1 auto; width: 0; min-width: 0; margin: -4px -6px -4px 12px; padding: 3px 6px; text-align: right; border: 1px solid transparent; background: transparent; border-radius: 7px; -moz-appearance: textfield; transition: border-color 0.15s ease, background 0.15s ease; }
input.cs-cval:hover { border-color: var(--sand-deep); }
input.cs-cval:focus { outline: none; border-color: var(--terracotta); background: #fff; cursor: text; }
.cs-control input[type=range] { width: 100%; height: 6px; border-radius: 999px; -webkit-appearance: none; appearance: none; cursor: pointer; outline: none; background: var(--sand-deep); }
.cs-control input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 999px; background: var(--terracotta); cursor: pointer; border: 3px solid #fff; box-shadow: var(--shadow-btn); }
.cs-control input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: var(--terracotta); cursor: pointer; border: 3px solid #fff; }
.cs-group-title { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 4px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.cs-group-title:not(:first-child) { margin-top: 14px; }

/* segmented control */
.cs-seg { display: flex; gap: 10px; }
.cs-seg button { flex: 1; padding: 13px 0; border-radius: var(--radius-btn); cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; border: 1.5px solid var(--rule); background: #fff; color: var(--navy); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cs-seg button.on { border-color: var(--terracotta); background: var(--terracotta-tint); color: var(--terracotta); }

/* result panel */
/* `position: relative` is load-bearing: the ::before glow is absolutely
   positioned with inset:0, so the panel must stay a containing block. When a
   media query dropped it to `static`, that glow stretched to the page instead
   and swallowed clicks on the tool pills above it. */
.cs-result { background: var(--navy); border-radius: var(--radius-card); padding: clamp(28px, 3vw, 36px); color: var(--cream); position: relative; overflow: hidden; }
.cs-result::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 8%, rgba(126,181,227,0.20), transparent 52%); }
.cs-result > * { position: relative; }
.cs-rlbl { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sky); margin-bottom: 14px; }
.cs-rbig { font-size: clamp(40px, 5.5vw, 60px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 8px; font-variant-numeric: tabular-nums; color: #fff; }
.cs-rsub { font-size: 14px; color: rgba(245,239,230,0.72); margin: 0 0 24px; line-height: 1.5; }
.cs-rrow { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px dotted rgba(245,239,230,0.22); font-size: 15px; }
.cs-rrow span { color: rgba(245,239,230,0.82); }
.cs-rrow b { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; text-align: right; }
.cs-rrow--strong b { color: var(--sky); }
.cs-rrow:last-of-type { border-bottom: 0; }
.cs-result .hm-btn { width: 100%; justify-content: center; margin-top: 22px; }
.cs-rnote { font-size: 12.5px; line-height: 1.5; color: rgba(245,239,230,0.6); margin-top: 16px; }
.cs-rbig.bump { animation: csbump 0.3s var(--ease); }
@keyframes csbump { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }

/* verdict color states (rent vs buy, dscr) */
.cs-verdict-good .cs-rbig { color: #fff; }
.cs-badge { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--radius-pill); margin-bottom: 16px; }
.cs-badge svg { width: 14px; height: 14px; }
.cs-badge--good { background: rgba(126,181,227,0.22); color: #a9d0ef; border: 1px solid rgba(126,181,227,0.45); box-shadow: 0 0 14px 1px rgba(126,181,227,0.40); animation: csBadgePulse 1.5s var(--ease) 3; }
.cs-badge--good svg { color: var(--sky); }
.cs-badge--warn { background: rgba(201,107,76,0.18); color: #e8a890; }

/* positive verdict: pulses 3× then settles into a steady glow.
   The suite rebuilds the result panel on each slider input, so the
   animation naturally restarts (“resets”) whenever the bars move. */
@keyframes csBadgePulse {
  0%, 100% { box-shadow: 0 0 10px 0 rgba(126,181,227,0.32); }
  50%      { box-shadow: 0 0 24px 5px rgba(126,181,227,0.62); }
}
@keyframes csBigGlow {
  0%, 100% { text-shadow: 0 0 14px rgba(126,181,227,0.30); }
  50%      { text-shadow: 0 0 28px rgba(126,181,227,0.60); }
}
.cs-verdict-good .cs-rbig { text-shadow: 0 0 16px rgba(126,181,227,0.36); animation: csBigGlow 1.5s var(--ease) 3; }

@media (prefers-reduced-motion: reduce) { .cs-rbig.bump { animation: none; } .cs-badge--good, .cs-verdict-good .cs-rbig { animation: none; } }
@media (max-width: 900px) {
  .cs-grid { grid-template-columns: 1fr; }
}

/* The result panel rides along beside the controls — but only where the window
   is tall enough to show the whole of it. Pinned at 104px in a short window,
   its own bottom (the CTA and the rate note) sat below the fold and no amount
   of scrolling would bring it up. The tallest panel is ~700px, so ask for
   860px of height before pinning anything. */
@media (min-width: 901px) and (min-height: 860px) {
  .cs-result { position: sticky; top: 104px; }
}
@media (max-width: 560px) {
  .cs-controls.cs-controls--wide { grid-template-columns: 1fr; }
}

/* APR sits directly under the rate slider it belongs to — Reg Z asks for it
   "in close proximity" to the advertised rate, and the rate here is a control
   the visitor is actively moving. */
.cs-apr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.cs-apr__lbl { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cs-apr b { font-size: 18px; font-weight: 700; color: var(--terracotta); font-variant-numeric: tabular-nums; }
.cs-apr__why { font-size: 12.5px; color: var(--fg3); flex-basis: 100%; }

/* When the headline itself is a rate, its APR sits directly beneath it at
   comparable weight — Reg Z equal prominence, rather than a footnote. */
.cs-rapr { display: flex; align-items: baseline; gap: 10px; margin: -2px 0 14px; }
.cs-rapr span { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky); }
.cs-rapr b { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---- A tool is open: focus on it (calculators.js setToolOpen) ----
   The page heading ("No email wall on our tools.") steps aside while a tool
   is open and comes back with "All Tools". */
.cs-open .shead { display: none; }

/* Single column: Speak to a Person goes after the answer, at the foot of the
   whole tool, instead of between the sliders and the result. */
@media (max-width: 900px) {
  .cs-col { display: contents; }
  .cs-result { order: 2; }
  .cs-talk { order: 3; margin-top: 0; }
}

/* ---- Phones: compact, like the Get Started funnel ----
   At 390px the Payment tool ran 396 -> 1907px: the tiles, a 189px title
   block and generous card padding pushed the answer ~1,000px down. */
@media (max-width: 640px) {
  .section.cs-open { padding-top: 14px !important; }   /* beats the section's inline padding */
  .cs-bar { margin-bottom: 6px; }
  .cs-back { padding: 4px 0; }
  .cs-tabs { margin-bottom: 14px; padding-bottom: 6px; }
  .cs-tab { flex: 0 0 88px; padding: 10px 6px 9px; gap: 6px; font-size: 12.5px; }
  .cs-tab svg { width: 18px; height: 18px; padding: 7px; }
  .cs-intro { margin-bottom: 14px; }
  .cs-intro .eyebrow { display: none; }
  .cs-intro h2 { font-size: 23px; line-height: 1.15; margin-bottom: 6px; }
  .cs-intro p { font-size: 15px; line-height: 1.5; }
  .cs-grid { gap: 12px; }
  .cs-controls { padding: 18px 16px; }
  .cs-control { margin-bottom: 18px; }
  .cs-ctop { margin-bottom: 8px; }
  .cs-ctop label { font-size: 12px; }
  .cs-cval { font-size: 17px; }
  .cs-seg { gap: 8px; }
  .cs-seg button { padding: 10px 0; font-size: 14px; }
  .cs-group-title { margin: 2px 0 12px; padding-bottom: 8px; }
  .cs-apr { margin-top: 8px; }
  .cs-result { padding: 20px 18px; }
  .cs-rlbl { margin-bottom: 8px; }
  .cs-rbig { font-size: 38px; margin-bottom: 4px; }
  .cs-rsub { margin-bottom: 14px; }
  .cs-rrow { padding: 9px 0; font-size: 14.5px; }
  .cs-result .hm-btn { margin-top: 16px; }
  .cs-rnote { margin-top: 12px; font-size: 12px; }
  .cs-talk { width: 100%; }
}