/* ==========================================================================
   Calculator — the instrument panel.
   A chooser over the four calculators from mortgage-calculator-package, in
   the same instrument panel. Loads after site.css + pages.css; the widgets'
   own styles are css/calculators-widget.css (generated, don't edit).
   ========================================================================== */

.khero { position: relative; padding: clamp(7.5rem, 12vw, 9.5rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; isolation: isolate; }
.khero::before { content: ''; position: absolute; z-index: -1; inset: -35% -15% auto 25%; height: 105%;
  background: radial-gradient(45% 48% at 50% 50%, rgba(61,123,255,.15), transparent 70%); pointer-events: none; }
.khero__title { font-weight: 500; font-size: clamp(2.3rem, 1rem + 5vw, 4.8rem); line-height: 1; letter-spacing: -.05em; margin-top: 1rem; }
.khero__title em { color: var(--blue-2); }
.khero__lead { margin-top: 1.4rem; max-width: 50ch; color: var(--ink-2); font-size: clamp(1rem, .96rem + .3vw, 1.12rem); }

.panel__sec { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ---- The panel the calculator mounts into ------------------------------- */
.panel { position: relative; margin-top: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 24px;
  overflow: hidden; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.panel__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); background: rgba(4,6,11,.45); }
.panel__k { color: var(--ink-3); }
.panel__dots { display: flex; gap: .4rem; }
.panel__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.panel__dots i:first-child { background: rgba(127,176,255,.6); }
.panel__b { padding: clamp(2.25rem, 5vw, 4rem) clamp(1.4rem, 3vw, 2.5rem); }

/* ---- The chooser: one tab per question --------------------------------- */
.pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.pick__i { position: relative; display: grid; align-content: start; gap: .7rem; padding: clamp(1.2rem, 2.2vw, 1.6rem);
  text-align: left; font: inherit; color: var(--ink-2); background: var(--bg); border: 0; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease); }
.pick__i::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--blue), var(--blue-2));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.pick__i:hover { background: var(--bg-2); color: var(--ink); }
.pick__i[aria-selected="true"] { background: linear-gradient(180deg, #0c1428, var(--bg-2)); color: var(--ink); }
.pick__i[aria-selected="true"]::after { transform: scaleX(1); }
.pick__i:focus-visible { outline-offset: -4px; }
.pick__n { color: var(--ink-3); }
.pick__i[aria-selected="true"] .pick__n { color: var(--cyan); }
.pick__q { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.pick__q em { color: var(--blue-2); }
.pick__k { color: var(--ink-3); font-size: .62rem; line-height: 1.5; }
@media (max-width: 960px) { .pick { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pick__q { font-size: 1.05rem; } .pick__i { padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { .pick__i, .pick__i::after { transition: none; } }

/* ---- The mounted calculators --------------------------------------------- */
.panel { margin-top: 1rem; }
.pane[hidden] { display: none; }
.pane__none { color: var(--ink-2); text-align: center; }
.pane__none a { color: var(--blue-2); text-decoration: underline; }
/* the panel is the frame: drop the widget's own card, width and title bar
   (the chooser and the panel bar already name it) */
.calcs .pane .mortgage-calculator { margin: 0; max-width: none; width: auto; border: 0; border-radius: 0; background: none; }
.calcs .pane .mortgage-calculator .section-heading { display: none; }
/* the widget has its own .label class; undo the site's eyebrow .label
   (flex, caps, rule line) at zero specificity, so the widget's rules,
   which load after this file, still win wherever they set something */
:where(.calcs .pane) .label { display: revert; gap: normal; margin-bottom: 0; color: inherit;
  font-family: var(--sans); font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; }
:where(.calcs .pane) .label::after { content: none; }
/* the widget pads its own content (2rem, 1rem on phones), so the panel doesn't */
.calcs .panel__b { padding: 0; }
/* grid children default to min-width:auto and the max-mortgage inputs then
   push the column past a phone-width panel; let the columns shrink */
.calcs .pane .tab-content > * { min-width: 0; }
.calcs input { color: var(--ink); background: transparent; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.calcs input[type="range"] { accent-color: var(--blue); }

/* ---- Notes band ---------------------------------------------------------- */
.kband { padding: clamp(3.5rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--line); }
.kband__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 2.25rem;
  background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.kband__i { padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--bg); }
.kband__i dt { color: var(--ink-3); font: 500 .68rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; margin-bottom: .75rem; }
.kband__i dd { color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
@media (max-width: 860px) { .kband__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Overrides on the vendored calculator build (css/calculators-widget.css is a
   90KB generated file — never edit it; this sheet loads after it instead).
   ========================================================================== */

/* The two result bars are disabled range inputs wearing the same handle as the
   live sliders above them, so they read as draggable. Strip the handle and let
   them be what they are: progress readouts. */
.calcs .mortgage-calculator input[type="range"] { cursor: grab; }
.calcs .mortgage-calculator input[type="range"]:active { cursor: grabbing; }
.calcs .mortgage-calculator input[type="range"]:disabled { cursor: default; opacity: 1; }
.calcs .mortgage-calculator input[type="range"]:disabled::-webkit-slider-thumb { width: 0; height: 0; opacity: 0; border: 0; box-shadow: none; }
.calcs .mortgage-calculator input[type="range"]:disabled::-moz-range-thumb { width: 0; height: 0; opacity: 0; border: 0; }

/* figures line up in columns, as everywhere else on the site */
.calcs .mortgage-calculator .calculator-results,
.calcs .mortgage-calculator .value-input,
.calcs .mortgage-calculator .percentage-value-input,
.calcs .mortgage-calculator .range-label { font-variant-numeric: tabular-nums; }

/* Weights are handled at generation time now (tools/calculators/retheme.py
   maps the package's 700/800 onto this site's 500), so no override here. */

/* the package's own blue band fought the page's header; let it sit flat */
.calcs .mortgage-calculator .section-heading {
  background: transparent !important; color: var(--ink) !important;
  padding-left: 0 !important; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem) !important; }

.calcs .mortgage-calculator .tab-layout .tab-headers .tab-header.active { border-bottom-color: var(--blue); }

/* the field glyphs arrive as unsized SVGs — pin them so they can't shift the
   layout, and settle them down next to the heading */
.calcs .mortgage-calculator .title-wrapper img { width: 26px; height: 26px; opacity: .7; }