/*!
 * AgenticPress Mortgage Calculator
 * Theme by overriding the custom properties on [data-apmc] (or any ancestor).
 */

[data-apmc] {
  /* --- theming hooks --- */
  --apmc-accent: #2f6f5e;          /* value text, section labels */
  --apmc-accent-strong: #2f6f5e;   /* slider fill, thumb, focus ring */
  --apmc-accent-soft: #cfe0da;     /* slider track — fallback */
  --apmc-accent-light: #8fc4b4;    /* highlight on the dark panel — fallback */
  --apmc-ink: #1a1a1a;             /* dark result panel + labels */
  --apmc-text: #4a4a4a;
  --apmc-muted: #767676;           /* 4.54:1 on white — #8d8d8d was 3.32 and failed AA */
  --apmc-surface: #ffffff;
  --apmc-radius: 20px;
  --apmc-radius-input: 6px;        /* inputs, select */
  --apmc-radius-sm: 10px;          /* flags, inner panels */
  --apmc-line: rgba(26, 26, 26, .14);
  --apmc-line-strong: rgba(26, 26, 26, .28);
  --apmc-ease: .16s cubic-bezier(.2, 0, .2, 1);
  --apmc-font: inherit;
  --apmc-font-numeric: inherit;
  --apmc-font-label: inherit;
  --apmc-pad: 44px;

  font-family: var(--apmc-font);
  max-width: 1240px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* Derive the two tint variables from the accent, so setting accent alone themes
   the whole component. An explicit override still wins. */
@supports (color: color-mix(in srgb, red 50%, white)) {
  [data-apmc] {
    --apmc-accent-soft: color-mix(in srgb, var(--apmc-accent-strong) 24%, #fff);
    --apmc-accent-light: color-mix(in srgb, var(--apmc-accent-strong) 58%, #fff);
  }
}
[data-apmc] *,
[data-apmc] *::before,
[data-apmc] *::after { box-sizing: border-box; }

.apmc {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 0;
  border-radius: var(--apmc-radius);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(26, 26, 26, .4);
  background: var(--apmc-surface);
}

/* ---------- controls ---------- */
.apmc__controls { padding: var(--apmc-pad); background: var(--apmc-surface); }
.apmc__group { margin-bottom: 34px; }
.apmc__group:last-child { margin-bottom: 0; }
.apmc__group-title {
  font-family: var(--apmc-font-label);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
  color: var(--apmc-accent);
  margin: 0 0 18px; padding-bottom: 9px;
  border-bottom: 1px solid rgba(26, 26, 26, .1);
}
.apmc__field { margin-bottom: 24px; }
.apmc__field:last-child { margin-bottom: 0; }
.apmc__field-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-bottom: 11px;
}
.apmc label {
  font-family: var(--apmc-font-label);
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  color: var(--apmc-ink); margin: 0;
}
.apmc__inline { display: flex; align-items: center; justify-content: flex-end; }
.apmc__affix { font-family: var(--apmc-font-label); font-size: 12px; color: var(--apmc-muted); margin-left: -3px; }

.apmc__num {
  font-family: var(--apmc-font-numeric);
  font-size: 19px; font-weight: 400;
  color: var(--apmc-accent);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--apmc-radius-input);
  padding: 4px 8px; width: 132px; text-align: right;
  -moz-appearance: textfield;
  /* A persistent hairline so the figure reads as editable without hover,
     which touch devices never provide. */
  border-bottom-color: var(--apmc-line);
  transition: border-color var(--apmc-ease), background-color var(--apmc-ease),
              box-shadow var(--apmc-ease);
}
.apmc__num::-webkit-outer-spin-button,
.apmc__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.apmc__num:hover { border-color: var(--apmc-line-strong); }
.apmc__num:focus {
  outline: none;
  border-color: var(--apmc-accent-strong);
  background: var(--apmc-surface);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .12); /* fallback */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--apmc-accent-strong) 18%, transparent);
}
.apmc__num--sm { width: 104px; font-size: 17px; }

.apmc input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 0; border: 0; border-radius: 50px;
  background: linear-gradient(to right,
    var(--apmc-accent-strong) var(--apmc-fill, 40%),
    var(--apmc-accent-soft) var(--apmc-fill, 40%));
  outline: none; cursor: pointer;
}
.apmc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--apmc-surface); border: 2px solid var(--apmc-accent-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16); cursor: pointer;
  transition: transform var(--apmc-ease), box-shadow var(--apmc-ease);
}
.apmc input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--apmc-surface); border: 2px solid var(--apmc-accent-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16); cursor: pointer;
  transition: transform var(--apmc-ease), box-shadow var(--apmc-ease);
}
.apmc input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.apmc input[type=range]:hover::-moz-range-thumb { transform: scale(1.12); }
.apmc input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.12); box-shadow: 0 1px 3px rgba(0, 0, 0, .16), 0 0 0 6px rgba(0, 0, 0, .06);
}
.apmc input[type=range]:focus-visible { outline: 2px solid var(--apmc-accent-strong); outline-offset: 6px; }

.apmc select {
  width: 100%;
  font-family: var(--apmc-font); font-size: 16px;
  padding: 12px 40px 12px 14px; height: auto;
  border: 1px solid var(--apmc-line);
  border-radius: var(--apmc-radius-input);
  background: var(--apmc-surface); color: var(--apmc-text);
  cursor: pointer;
  /* Native chevrons vary by OS and break the visual family, so draw our own. */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238d8d8d' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color var(--apmc-ease), box-shadow var(--apmc-ease);
}
.apmc select:hover { border-color: var(--apmc-line-strong); }
.apmc select:focus-visible {
  outline: none;
  border-color: var(--apmc-accent-strong);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--apmc-accent-strong) 18%, transparent);
}
/* ---------- down-payment presets ---------- */
.apmc__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.apmc__preset {
  font-family: var(--apmc-font-label);
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  color: var(--apmc-text);
  background: transparent;
  border: 1px solid var(--apmc-line);
  border-radius: var(--apmc-radius-input);
  padding: 6px 12px; cursor: pointer; line-height: 1;
  transition: border-color var(--apmc-ease), background-color var(--apmc-ease),
              color var(--apmc-ease);
}
.apmc__preset:hover { border-color: var(--apmc-line-strong); }
.apmc__preset.is-active {
  color: #fff;
  background: var(--apmc-accent-strong);
  border-color: var(--apmc-accent-strong);
}
.apmc__preset:focus-visible {
  outline: 2px solid var(--apmc-accent-strong); outline-offset: 2px;
}

.apmc__hint {
  font-family: var(--apmc-font-label);
  font-size: 11px; line-height: 1.5; color: var(--apmc-muted); margin: 8px 0 0;
}

/* ---------- result panel ---------- */
.apmc__result {
  background: var(--apmc-ink); color: #fff; padding: var(--apmc-pad);
  display: flex; flex-direction: column; justify-content: center;
}
.apmc__label {
  font-family: var(--apmc-font-label);
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .2em;
  color: rgba(255, 255, 255, .55); margin-bottom: 10px;
}
.apmc__payment {
  font-family: var(--apmc-font-numeric);
  font-size: 62px; font-weight: 300; line-height: .95; color: #fff;
  letter-spacing: -.025em; margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.apmc__payment-note {
  font-family: var(--apmc-font-label);
  font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em;
  color: var(--apmc-accent-light); margin: 0 0 26px;
}
.apmc__breakdown { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 26px; }
.apmc__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 15px; padding: 8px 0; color: rgba(255, 255, 255, .72);
  font-weight: 300;
}
.apmc__row span:last-child { font-variant-numeric: tabular-nums; }
.apmc__row span:last-child { color: #fff; font-weight: 400; font-family: var(--apmc-font-numeric); }
.apmc__row--sub {
  border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: 14px; padding-top: 16px;
  font-size: 14px; color: rgba(255, 255, 255, .62);
}
.apmc__row[hidden] { display: none; }

/* Editorial, not an alert box: a hairline rule and a quiet accent bar, so the
   callouts read as part of the statement rather than a component dropped on top. */
.apmc__flag {
  position: relative;
  margin: 20px 0 0; padding: 0 0 0 16px;
  border-radius: 0;
  background: none;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .22);
  border-left-color: color-mix(in srgb, var(--apmc-accent-strong) 55%, transparent);
  font-family: var(--apmc-font-label);
  font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .72);
}
.apmc__flag + .apmc__flag { margin-top: 14px; }
.apmc__flag[hidden] { display: none; }
.apmc__flag strong { color: var(--apmc-accent-light); font-weight: 600; }

/* ---------- call to action ---------- */
/* Outlined pill. Matches the house button: 1px border, uppercase, pill radius.
   Filled is reserved for the nav CTA, so an outline reads correct here and
   carries far better on a dark panel than a solid mid-tone fill. */
.apmc__cta-wrap { margin: 38px 0 0; }
.apmc__cta {
  display: inline-block;
  font-family: var(--apmc-font-label);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1;
  color: var(--apmc-accent-light); text-decoration: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  border-color: color-mix(in srgb, var(--apmc-accent-strong) 70%, transparent);
  border-radius: var(--apmc-radius-pill, 500px);
  padding: 20px 34px;
  cursor: pointer;
  transition: background-color var(--apmc-ease), color var(--apmc-ease),
              border-color var(--apmc-ease);
}
/* Fill with the light variant and take the panel colour for text, so this works
   on a bronze panel and a black one without a theme-specific override. */
.apmc__cta:hover,
.apmc__cta:focus-visible {
  background: var(--apmc-accent-light);
  border-color: var(--apmc-accent-light);
  color: var(--apmc-ink);
}
.apmc__cta:focus-visible { outline: 2px solid var(--apmc-accent-light); outline-offset: 4px; }
.apmc__cta-note {
  font-family: var(--apmc-font-label);
  font-size: 11.5px; line-height: 1.7; color: rgba(255, 255, 255, .5);
  margin: 16px 0 0; max-width: 42ch;
}

.apmc__disclaimer {
  font-family: var(--apmc-font-label);
  font-size: 10.5px; line-height: 1.7; color: rgba(255, 255, 255, .46); /* 4.61:1 on #1a1a1a */
  margin: 34px 0 0; padding-top: 22px; text-transform: none; letter-spacing: 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  max-width: 56ch;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .apmc { grid-template-columns: 1fr; }
  .apmc__controls { padding: 30px; }
  .apmc__result { padding: 34px; }
  .apmc__payment { font-size: 42px; }
  .apmc__num { width: 118px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-apmc] * { transition: none !important; animation: none !important; }
}

/* =========================================================================
   Editorial layout — dark field leads, white result card sits inside it.
   Opt in with layout="editorial". Default split layout is untouched.
   ====================================================================== */
.apmc--editorial {
  grid-template-columns: 1.05fr .95fr;
  background: var(--apmc-ink);
  box-shadow: none;
}
.apmc--editorial .apmc__controls {
  background: var(--apmc-ink);
  color: #fff;
  padding: clamp(36px, 4vw, 64px);
}
.apmc--editorial .apmc__result {
  background: var(--apmc-surface);
  color: var(--apmc-ink);
  margin: clamp(20px, 2.4vw, 40px);
  margin-left: 0;
  padding: clamp(30px, 3vw, 46px);
  justify-content: flex-start;
}

/* --- heading --- */
.apmc__intro { margin-bottom: 38px; }
.apmc__heading {
  font-family: var(--apmc-font);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 300; line-height: 1.04; letter-spacing: -.02em;
  color: #fff; margin: 0 0 16px; text-transform: none;
}
.apmc__intro-text {
  font-family: var(--apmc-font-label);
  font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .62);
  margin: 0; max-width: 46ch;
}

/* --- controls, recoloured for the dark field --- */
.apmc--editorial .apmc__group-title {
  color: rgba(255, 255, 255, .5);
  border-bottom-color: rgba(255, 255, 255, .14);
}
.apmc--editorial label { color: rgba(255, 255, 255, .78); }
.apmc--editorial .apmc__num {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .28);
}
.apmc--editorial .apmc__num:hover { border-color: rgba(255, 255, 255, .5); }
.apmc--editorial .apmc__num:focus { background: rgba(255, 255, 255, .06); border-color: #fff; }
.apmc--editorial .apmc__affix,
.apmc--editorial .apmc__hint { color: rgba(255, 255, 255, .52); }
.apmc--editorial select {
  background-color: transparent; color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.apmc--editorial select option { color: #1a1a1a; }
.apmc--editorial input[type=range] {
  background: linear-gradient(to right, #fff var(--apmc-fill, 40%), rgba(255,255,255,.2) var(--apmc-fill, 40%));
}
.apmc--editorial input[type=range]::-webkit-slider-thumb { background: #fff; border-color: #fff; }
.apmc--editorial input[type=range]::-moz-range-thumb { background: #fff; border-color: #fff; }
.apmc--editorial .apmc__preset {
  color: rgba(255, 255, 255, .8);
  border-color: rgba(255, 255, 255, .28);
}
.apmc--editorial .apmc__preset:hover { border-color: rgba(255, 255, 255, .55); }
.apmc--editorial .apmc__preset.is-active { background: #fff; border-color: #fff; color: var(--apmc-ink); }

/* --- result card, recoloured for white --- */
.apmc--editorial .apmc__label { color: rgba(26, 26, 26, .62); }
.apmc--editorial .apmc__payment { color: var(--apmc-ink); }
.apmc--editorial .apmc__payment-note { color: rgba(26, 26, 26, .66); }
.apmc--editorial .apmc__breakdown { border-top-color: rgba(26, 26, 26, .12); }
.apmc--editorial .apmc__row { color: rgba(26, 26, 26, .72); }
.apmc--editorial .apmc__row span:last-child { color: var(--apmc-ink); }
.apmc--editorial .apmc__row--sub { border-top-color: rgba(26, 26, 26, .12); color: rgba(26, 26, 26, .6); }
.apmc--editorial .apmc__flag {
  color: rgba(26, 26, 26, .7);
  border-left-color: rgba(26, 26, 26, .25);
}
.apmc--editorial .apmc__flag strong { color: var(--apmc-ink); }
.apmc--editorial .apmc__cta {
  color: var(--apmc-ink);
  border-color: rgba(26, 26, 26, .35);
}
.apmc--editorial .apmc__cta:hover,
.apmc--editorial .apmc__cta:focus-visible {
  background: var(--apmc-ink); border-color: var(--apmc-ink); color: #fff;
}
.apmc--editorial .apmc__cta-note { color: rgba(26, 26, 26, .62); }
.apmc--editorial .apmc__disclaimer {
  color: rgba(26, 26, 26, .6);
  border-top-color: rgba(26, 26, 26, .1);
}

@media (max-width: 900px) {
  .apmc--editorial { grid-template-columns: 1fr; }
  .apmc--editorial .apmc__result { margin: 0 20px 20px; }
}

/* =========================================================================
   Ring chart. Opt in with donut="yes"; it replaces the monthly rows, which
   would otherwise repeat the legend.
   ====================================================================== */
[data-apmc] {
  --apmc-seg-1: #ffffff;
  --apmc-seg-2: rgba(255, 255, 255, .72);
  --apmc-seg-3: rgba(255, 255, 255, .5);
  --apmc-seg-4: rgba(255, 255, 255, .32);
  --apmc-seg-5: rgba(255, 255, 255, .2);
  --apmc-seg-track: rgba(255, 255, 255, .1);
}
.apmc--editorial {
  --apmc-seg-1: #1a1a1a;
  --apmc-seg-2: #565656;
  --apmc-seg-3: #8a8a8a;
  --apmc-seg-4: #b4b4b4;
  --apmc-seg-5: #d4d4d4;
  --apmc-seg-track: #ececec;
}

.apmc__donut-wrap { margin: 4px 0 30px; }
.apmc__donut-figure {
  position: relative; width: 208px; max-width: 100%; margin: 0 auto 26px;
}
.apmc__donut { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.apmc__donut-track,
.apmc__donut-seg {
  fill: none; stroke-width: 11;
}
.apmc__donut-track { stroke: var(--apmc-seg-track); }
.apmc__donut-seg { transition: stroke-dasharray var(--apmc-ease), stroke-dashoffset var(--apmc-ease); }
.apmc__donut-seg--1 { stroke: var(--apmc-seg-1); }
.apmc__donut-seg--2 { stroke: var(--apmc-seg-2); }
.apmc__donut-seg--3 { stroke: var(--apmc-seg-3); }
.apmc__donut-seg--4 { stroke: var(--apmc-seg-4); }
.apmc__donut-seg--5 { stroke: var(--apmc-seg-5); }

.apmc__donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.apmc__donut-total {
  font-family: var(--apmc-font-numeric);
  font-size: 30px; font-weight: 300; line-height: 1; letter-spacing: -.02em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.apmc--editorial .apmc__donut-total { color: var(--apmc-ink); }
.apmc__donut-caption {
  font-family: var(--apmc-font-label);
  font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em;
  color: rgba(255, 255, 255, .6); margin-top: 8px;
}
.apmc--editorial .apmc__donut-caption { color: rgba(26, 26, 26, .62); }

.apmc__legend { list-style: none; margin: 0; padding: 0; }
.apmc__legend-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; font-size: 14px; font-weight: 300;
  color: rgba(255, 255, 255, .78);
}
.apmc--editorial .apmc__legend-item { color: rgba(26, 26, 26, .78); }
.apmc__legend-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  transform: translateY(-1px);
}
.apmc__legend-dot--1 { background: var(--apmc-seg-1); }
.apmc__legend-dot--2 { background: var(--apmc-seg-2); }
.apmc__legend-dot--3 { background: var(--apmc-seg-3); }
.apmc__legend-dot--4 { background: var(--apmc-seg-4); }
.apmc__legend-dot--5 { background: var(--apmc-seg-5); }
.apmc__legend-name { flex: 1 1 auto; }
.apmc__legend-value {
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
  color: #fff; font-weight: 400;
}
.apmc--editorial .apmc__legend-value { color: var(--apmc-ink); }

@media (prefers-reduced-motion: reduce) {
  .apmc__donut-seg { transition: none; }
}

/* ---------- progressive disclosure for optional fields ---------- */
.apmc__more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.apmc__more[hidden] { display: none; }
.apmc__more-btn {
  font-family: var(--apmc-font-label);
  font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
  color: var(--apmc-text);
  background: transparent;
  border: 1px dashed var(--apmc-line-strong);
  border-radius: var(--apmc-radius-input);
  padding: 9px 14px; cursor: pointer; line-height: 1;
  transition: border-color var(--apmc-ease), color var(--apmc-ease);
}
.apmc__more-btn[hidden] { display: none; }
.apmc__more-btn:hover { border-color: var(--apmc-accent-strong); color: var(--apmc-accent); }
.apmc__more-btn:focus-visible { outline: 2px solid var(--apmc-accent-strong); outline-offset: 2px; }
.apmc--editorial .apmc__more-btn { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .3); }
.apmc--editorial .apmc__more-btn:hover { border-color: #fff; color: #fff; }
.apmc--editorial .apmc__more-btn:focus-visible { outline-color: #fff; }

/* Editorial: two-up field grid. LP fits six fields in three rows; a single
   column with sliders ran ~1640px tall, which is too long for a content page. */
@media (min-width: 720px) {
  .apmc--editorial .apmc__group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    align-items: start;
  }
  .apmc--editorial .apmc__group-title { grid-column: 1 / -1; }
  .apmc--editorial .apmc__field { margin-bottom: 22px; }
  /* the term select reads better on its own row than squeezed beside a slider */
  .apmc--editorial .apmc__field:has(select) { grid-column: 1 / -1; }
}
.apmc--editorial .apmc__intro { margin-bottom: 30px; }
.apmc--editorial .apmc__heading { font-size: clamp(30px, 2.8vw, 42px); margin-bottom: 12px; }
.apmc--editorial .apmc__group { margin-bottom: 26px; }

/* =========================================================================
   Host-theme armour.
   Themes style form controls with selectors like input[type="number"],
   specificity (0,1,1), which BEATS a single class (0,1,0). On Astra this
   forced a white background and a 40px box onto the value fields — white
   text on white. Scope + element + class wins at (0,2,1) with no !important.
   ====================================================================== */
[data-apmc] input.apmc__num,
[data-apmc] input.apmc__num[type="number"] {
  width: 132px;
  height: auto;
  min-height: 0;
  padding: 4px 8px;
  margin: 0;
  font-family: var(--apmc-font-numeric);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 400;
  text-align: right;
  color: var(--apmc-accent);
  background: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-bottom-color: var(--apmc-line);
  border-radius: var(--apmc-radius-input);
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
[data-apmc] input.apmc__num--sm[type="number"] { width: 104px; font-size: 17px; }
[data-apmc] input.apmc__num:hover { border-color: var(--apmc-line-strong); }
[data-apmc] input.apmc__num:focus {
  outline: none;
  border-color: var(--apmc-accent-strong);
  background: var(--apmc-surface);
}
.apmc--editorial input.apmc__num,
.apmc--editorial input.apmc__num[type="number"] {
  color: #fff;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, .28);
}
.apmc--editorial input.apmc__num:hover { border-color: rgba(255, 255, 255, .5); }
.apmc--editorial input.apmc__num:focus {
  background: rgba(255, 255, 255, .07);
  border-color: #fff;
}
/* Same problem class for the select and the range track. */
[data-apmc] select,
[data-apmc] input[type="range"] { height: auto; min-height: 0; box-shadow: none; }
[data-apmc] input[type="range"] { padding: 0; height: 4px; }

/* Range track lives in a pseudo-element. Painting the gradient on the input only
   works until a host theme styles ::-webkit-slider-runnable-track, which then paints
   over it — Astra does, giving a bordered pill instead of a hairline. Style the
   track itself and keep the input transparent. */
[data-apmc] input[type="range"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; height: 18px;
  margin: 0; padding: 0; border: 0;
  background: transparent; background-image: none;
  box-shadow: none; outline: none; cursor: pointer;
}
[data-apmc] input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border: 0; border-radius: 50px; box-shadow: none;
  background: linear-gradient(to right,
    var(--apmc-accent-strong) var(--apmc-fill, 40%),
    var(--apmc-accent-soft) var(--apmc-fill, 40%));
}
[data-apmc] input[type="range"]::-moz-range-track {
  height: 4px; border: 0; border-radius: 50px; box-shadow: none;
  background: linear-gradient(to right,
    var(--apmc-accent-strong) var(--apmc-fill, 40%),
    var(--apmc-accent-soft) var(--apmc-fill, 40%));
}
[data-apmc] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  margin-top: -7px;            /* centre an 18px thumb on a 4px track */
  background: var(--apmc-surface);
  border: 2px solid var(--apmc-accent-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  cursor: pointer;
}
[data-apmc] input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--apmc-accent-strong);
  background: var(--apmc-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); cursor: pointer;
}
.apmc--editorial input[type="range"]::-webkit-slider-runnable-track,
.apmc--editorial input[type="range"]::-moz-range-track {
  background: linear-gradient(to right,
    #fff var(--apmc-fill, 40%), rgba(255, 255, 255, .22) var(--apmc-fill, 40%));
}
.apmc--editorial input[type="range"]::-webkit-slider-thumb,
.apmc--editorial input[type="range"]::-moz-range-thumb {
  background: #fff; border-color: #fff;
}

/* Themes underline content links with selectors like .entry-content a, which beats
   a single class. Scope + element + class wins, and covers every state so the
   underline cannot come back on hover or focus. */
[data-apmc] a.apmc__cta,
[data-apmc] a.apmc__cta:link,
[data-apmc] a.apmc__cta:visited,
[data-apmc] a.apmc__cta:hover,
[data-apmc] a.apmc__cta:focus,
[data-apmc] a.apmc__cta:active {
  text-decoration: none;
  text-decoration-line: none;
  border-bottom: 0;
  box-shadow: none;
  background-image: none;
}
[data-apmc] a.apmc__cta { color: var(--apmc-accent-light); }
[data-apmc] a.apmc__cta:hover,
[data-apmc] a.apmc__cta:focus-visible {
  background: var(--apmc-accent-light);
  border-color: var(--apmc-accent-light);
  color: var(--apmc-ink);
}
.apmc--editorial a.apmc__cta { color: var(--apmc-ink); border-color: rgba(26, 26, 26, .35); }
.apmc--editorial a.apmc__cta:hover,
.apmc--editorial a.apmc__cta:focus-visible {
  background: var(--apmc-ink); border-color: var(--apmc-ink); color: #fff;
}

/* ⚠️ Vendor pseudo-elements must each get their OWN rule. A browser discards an
   entire comma-grouped rule if any selector in it is unrecognised, so pairing
   ::-webkit-slider-runnable-track with ::-moz-range-track silently killed both. */
.apmc--editorial input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    #fff var(--apmc-fill, 40%), rgba(255, 255, 255, .22) var(--apmc-fill, 40%));
}
.apmc--editorial input[type="range"]::-moz-range-track {
  background: linear-gradient(to right,
    #fff var(--apmc-fill, 40%), rgba(255, 255, 255, .22) var(--apmc-fill, 40%));
}
.apmc--editorial input[type="range"]::-webkit-slider-thumb {
  background: #fff; border-color: #fff;
}
.apmc--editorial input[type="range"]::-moz-range-thumb {
  background: #fff; border-color: #fff;
}

/* The editorial grid sets display on groups, which outranks the browser's
   [hidden] rule — so hidden groups kept rendering. Doubling the attribute
   raises specificity to (0,3,0) without reaching for !important. */
[data-apmc] [hidden][hidden] { display: none; }

/* One width for every value field, so the underlines form a single right edge
   instead of stepping between 132px and 104px. */
[data-apmc] input.apmc__num,
[data-apmc] input.apmc__num[type="number"],
[data-apmc] input.apmc__num--sm[type="number"] { width: 128px; }
.apmc--editorial .apmc__field-top { align-items: baseline; }

/* ---------- compact variant: no sliders, tighter rhythm ----------
   LP's calculator has no sliders at all — six typed fields in three rows. The
   sliders are what make ours tall, so this drops them and closes the gaps.
   Values stay editable by typing, and the presets still give one-click amounts. */
.apmc--compact input[type="range"] { display: none; }
.apmc--compact .apmc__field { margin-bottom: 14px; }
.apmc--compact .apmc__field-top { margin-bottom: 0; }
.apmc--compact .apmc__group { margin-bottom: 18px; }
.apmc--compact .apmc__group-title { margin-bottom: 12px; padding-bottom: 7px; }
.apmc--compact .apmc__presets { margin-top: 8px; }
.apmc--compact .apmc__hint { margin-top: 5px; }
.apmc--compact .apmc__more { margin-top: 16px; }
.apmc--compact .apmc__intro { margin-bottom: 22px; }
.apmc--compact .apmc__intro-text { font-size: 13px; }

/* result side */
.apmc--compact .apmc__donut-figure { width: 176px; margin-bottom: 18px; }
.apmc--compact .apmc__donut-wrap { margin-bottom: 20px; }
.apmc--compact .apmc__legend-item { padding: 5px 0; font-size: 13.5px; }
.apmc--compact .apmc__breakdown { padding-top: 18px; }
.apmc--compact .apmc__row { padding: 5px 0; font-size: 14px; }
.apmc--compact .apmc__flag { margin-top: 14px; font-size: 12px; }
.apmc--compact .apmc__cta-wrap { margin-top: 24px; }
.apmc--compact .apmc__cta { padding: 16px 28px; }
.apmc--compact .apmc__cta-note { margin-top: 12px; }
.apmc--compact .apmc__disclaimer { margin-top: 22px; padding-top: 16px; }

/* ---------- donut leads ----------
   With the ring showing the payment in its centre, the headline figure above it
   repeats the same number, and the "principal, interest, taxes & insurance"
   sub-line repeats what the legend already itemises. Drop all three and let the
   circle be the answer. */
.apmc--donut-lead .apmc__label,
.apmc--donut-lead .apmc__payment,
.apmc--donut-lead .apmc__payment-note { display: none; }
.apmc--donut-lead .apmc__donut-wrap { margin-top: 0; }
.apmc--donut-lead .apmc__donut-figure { width: 200px; margin-bottom: 22px; }
.apmc--donut-lead .apmc__donut-total { font-size: 38px; letter-spacing: -.03em; }
.apmc--donut-lead .apmc__donut-caption { font-size: 10px; margin-top: 10px; }
.apmc--donut-lead .apmc__result { justify-content: center; }

/* ---------- fixes: 2026-09-15 review ---------- */

/* The anti-underline armour used border-bottom:0, which also removed the pill's
   own bottom edge — it rendered as an open horseshoe. Kill the underline with
   text-decoration only and restore a full border. */
[data-apmc] a.apmc__cta,
[data-apmc] a.apmc__cta:link,
[data-apmc] a.apmc__cta:visited,
[data-apmc] a.apmc__cta:hover,
[data-apmc] a.apmc__cta:focus,
[data-apmc] a.apmc__cta:active {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: inherit;
}
[data-apmc] a.apmc__cta { border: 1px solid currentColor; }
.apmc--editorial a.apmc__cta { border-color: rgba(26, 26, 26, .4); color: var(--apmc-ink); }
.apmc--editorial a.apmc__cta:hover,
.apmc--editorial a.apmc__cta:focus-visible {
  background: var(--apmc-ink); border-color: var(--apmc-ink); color: #fff;
}

/* Boxed value fields. The hairline underline read as an artefact rather than a
   field, and left a ragged right edge between differing widths. */
[data-apmc] input.apmc__num,
[data-apmc] input.apmc__num[type="number"],
[data-apmc] input.apmc__num--sm[type="number"] {
  width: 132px;
  padding: 9px 12px;
  text-align: right;
  border: 1px solid var(--apmc-line);
  border-radius: var(--apmc-radius-input);
  background: transparent;
}
[data-apmc] input.apmc__num:hover { border-color: var(--apmc-line-strong); }
.apmc--editorial input.apmc__num,
.apmc--editorial input.apmc__num[type="number"],
.apmc--editorial input.apmc__num--sm[type="number"] {
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .04);
  color: #fff;
}
.apmc--editorial input.apmc__num:hover { border-color: rgba(255, 255, 255, .5); }
.apmc--editorial input.apmc__num:focus {
  border-color: #fff; background: rgba(255, 255, 255, .09); outline: none;
}

/* Loan term label was sitting on top of its select. */
.apmc--compact .apmc__field:has(select) .apmc__field-top { margin-bottom: 9px; }
.apmc--editorial .apmc__field:has(select) label { display: block; margin-bottom: 9px; }

/* Affixes ($, %, / yr, / mo). The -3px tuck suited a borderless underline but
   overlaps a boxed field, and 12px was too small to read as a unit. Space them
   off the box, size them up, and stop "% / yr" breaking across two lines. */
[data-apmc] .apmc__inline { display: flex; align-items: center; gap: 9px; }
[data-apmc] .apmc__affix {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: var(--apmc-muted);
}
.apmc--editorial .apmc__affix { color: rgba(255, 255, 255, .62); }
/* the trailing unit is secondary to the leading currency mark */
[data-apmc] .apmc__affix + .apmc__num { margin-left: 0; }
[data-apmc] .apmc__num + .apmc__affix { font-size: 13px; }

/* Label and value shared a flex row, so each label's width decided where its box
   landed — five different right edges, and labels wrapping to two lines because
   they were competing with the field for space. Fixed label column instead: every
   box starts and ends on the same line regardless of label length. */
@media (min-width: 720px) {
  .apmc--editorial .apmc__field-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .apmc--editorial .apmc__field-top label {
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: .08em;
  }
  .apmc--editorial .apmc__inline { justify-content: flex-end; }
  /* one width for every box, so the column reads as a column */
  .apmc--editorial input.apmc__num,
  .apmc--editorial input.apmc__num[type="number"],
  .apmc--editorial input.apmc__num--sm[type="number"] { width: 118px; flex: 0 0 118px; }
}

/* The trailing unit shares a cell with the input, so "% / yr" pushed its box
   further left than "%" or no unit at all — three different right edges. Fix the
   unit's width, and reserve the same space on fields that have no unit. */
@media (min-width: 720px) {
  .apmc--editorial .apmc__num + .apmc__affix {
    min-width: 38px;
    text-align: left;
  }
  .apmc--editorial .apmc__inline:not(:has(.apmc__num + .apmc__affix)) {
    padding-right: 47px;   /* 38px unit + 9px gap */
  }
}

/* ---------- corrections to the previous pass ----------
   1. padding-right on the input group widened it leftward, pushing the "$" into
      the label. Reserve the unit's space with a spacer AFTER the input instead.
   2. white-space:nowrap made over-wide labels overflow their grid column rather
      than wrap, which is what actually collided. The grid keeps each box in its
      own column, so a wrapped label no longer breaks alignment — let it wrap. */
@media (min-width: 720px) {
  .apmc--editorial .apmc__inline:not(:has(.apmc__num + .apmc__affix)) {
    padding-right: 0;
  }
  .apmc--editorial .apmc__inline:not(:has(.apmc__num + .apmc__affix))::after {
    content: "";
    display: block;
    min-width: 38px;
  }
  .apmc--editorial .apmc__field-top label {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  .apmc--editorial .apmc__field-top { gap: 14px; align-items: center; }
}

/* Segment gaps were carved out of each arc's length, which left a visible notch
   where the first and last meet. Draw them butted together and separate with a
   stroke-coloured outline the width of the gap instead. */
.apmc__donut-seg { stroke-linecap: butt; }

/* Heading sits on one line; it only stacked because the size was tuned for a
   manual line break. Scale it to the column instead. */
.apmc--editorial .apmc__heading {
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.1;
  text-wrap: balance;
}

/* overflow-wrap:break-word split "DOWN PAYMENT" as "DOWN PAYME / NT". Labels must
   only ever break at spaces. Give the label column more room by trimming the input
   and the label size, so two-up fields stop fighting for width. */
@media (min-width: 720px) {
  .apmc--editorial .apmc__field-top label {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: 10.5px;
    letter-spacing: .07em;
    line-height: 1.35;
  }
  .apmc--editorial input.apmc__num,
  .apmc--editorial input.apmc__num[type="number"],
  .apmc--editorial input.apmc__num--sm[type="number"] {
    width: 104px; flex: 0 0 104px;
    padding: 8px 10px;
    font-size: 17px;
  }
  .apmc--editorial .apmc__inline:not(:has(.apmc__num + .apmc__affix))::after { min-width: 32px; }
  .apmc--editorial .apmc__num + .apmc__affix { min-width: 32px; }
  .apmc--editorial .apmc__field-top { gap: 10px; }
}

/* ---------- aesthetic pass 2 ----------
   1. The term select spanned the full column while every other field was a 104px
      box, making the least important input the loudest object. Put it in the grid.
   2. Group titles: LP's reference has none, and with six fields the rules and
      labels carry the structure on their own.
   3. Heading was shrunk to stop it stacking and ended up too quiet to lead.
   4. Hints were at the edge of legible.
   5. Controls ended ~130px above the card; the reclaimed height rebalances them. */
@media (min-width: 720px) {
  /* select joins the grid instead of spanning it */
  .apmc--editorial .apmc__field:has(select) { grid-column: auto; }
  .apmc--editorial .apmc__field:has(select) label { display: block; margin-bottom: 7px; }
  .apmc--editorial .apmc__field:has(select) .apmc__field-top { display: block; }
  .apmc--editorial select {
    width: 100%;
    max-width: 176px;
    font-size: 14px;
    padding: 9px 34px 9px 12px;
    background-position: right 10px center;
  }
}
/* group titles carried no information the rules do not */
.apmc--editorial .apmc__group-title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;            /* kept for screen readers */
}
.apmc--editorial .apmc__group + .apmc__group {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
/* heading leads again */
.apmc--editorial .apmc__heading {
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.apmc--editorial .apmc__intro { margin-bottom: 26px; }
.apmc--editorial .apmc__intro-text { font-size: 13.5px; color: rgba(255, 255, 255, .68); }
/* hints readable */
.apmc--editorial .apmc__hint {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .58);
  line-height: 1.45;
}
/* the two columns end together */
.apmc--editorial .apmc__controls { display: flex; flex-direction: column; }
.apmc--editorial .apmc__more { margin-top: auto; padding-top: 24px; }

/* Donut block was 404px for a 200px ring — most of it margin and caption.
   The ring is the answer, it does not need that much room around it. */
.apmc--donut-lead .apmc__donut-figure { width: 164px; margin-bottom: 16px; }
.apmc--donut-lead .apmc__donut-wrap { margin: 0 0 18px; }
.apmc--donut-lead .apmc__donut-total { font-size: 31px; }
.apmc--donut-lead .apmc__donut-caption { font-size: 9px; margin-top: 6px; letter-spacing: .16em; }
.apmc--donut-lead .apmc__donut-track,
.apmc--donut-lead .apmc__donut-seg { stroke-width: 13; }
/* with the loan facts gone the breakdown is just the comparison line */
.apmc--compact .apmc__breakdown:empty { display: none; }
.apmc--compact .apmc__breakdown { padding-top: 0; border-top: 0; }