/* checker.css — PMI Cancellation Checker page styles.
   Ported from mockup-pmi-checker.html (the visual reference). Shared tokens,
   reset, base type, brand, and container width live in style.css; this file is
   page-specific only.

   Type scale: base is 16px (style.css). Body/copy sit at ~1rem, KPI numbers and
   headings scale up proportionally so the page reads comfortably on desktop and
   holds up at 390px mobile.

   Body base (padding) — the checker page uses a comfortable page gutter. */
body { padding: 26px 20px 70px; }

/* HERO */
.hero {
  background: var(--slate); color: #fff; border-radius: 18px; padding: 32px;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 210px; height: 210px; border-radius: 50%; background: rgba(176,138,62,.14);
}
.hero .eyebrow { color: var(--brass); }
.hero h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); font-weight: 800; }
.hero h1 em { font-style: italic; color: #E5C377; font-weight: 700; }
.hero p { color: #B9C6CD; font-size: 1rem; margin-top: 12px; max-width: 60ch; }
.hero .stat {
  margin-top: 16px; background: rgba(176,138,62,.15);
  border: 1px solid rgba(176,138,62,.4); border-radius: 10px;
  padding: 12px 16px; font-size: .92rem;
}
.hero .stat strong { color: #E5C377; }

/* FORM */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; margin-top: 18px;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
label { font-size: .82rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 6px; }
label .hint { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; letter-spacing: 0; }
input, select {
  font-family: inherit; font-size: 1rem; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 9px; background: #FCFBF8; color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

/* Honeypot — visually hidden bot trap (Constitution §8.1.3). Must not be
   display:none (some bots skip those); pull it off-screen instead. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.avm-row { display: flex; gap: 10px; align-items: flex-end; }
.avm-row .field { flex: 1; }
.btn2 {
  font-family: var(--font-head); font-weight: 700; font-size: .84rem;
  border: 1.5px solid var(--slate); background: transparent; color: var(--slate);
  border-radius: 999px; padding: 11px 17px; cursor: pointer; white-space: nowrap;
}
.btn2:hover { background: var(--slate); color: #fff; }
.btn2:disabled { opacity: .55; cursor: default; }
.avm-note { font-size: .82rem; color: var(--muted); margin-top: 8px; font-style: italic; }
.demo-chip {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  background: var(--amber); color: var(--amber-ink); border-radius: 999px;
  padding: 2px 8px; margin-left: 6px; vertical-align: middle;
}
.go {
  margin-top: 20px; width: 100%; font-family: var(--font-head); font-weight: 800;
  font-size: 1.05rem; background: var(--brass); color: #fff; border: none;
  border-radius: 999px; padding: 15px; cursor: pointer;
}
.go:hover { filter: brightness(1.06); }
.privacy { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 12px; }

/* VERDICT */
.verdict { display: none; margin-top: 22px; }

/* Input sanity nudge — shown above the verdict when LTV_orig looks like a typo. */
.sanity-note {
  background: var(--clay); color: var(--clay-ink);
  border: 1px solid rgba(169,67,44,.28); border-radius: 12px;
  padding: 13px 17px; font-size: .92rem; margin-bottom: 14px;
}
.sanity-note strong { font-weight: 700; }

.v-band { border-radius: 18px; padding: 28px; color: #fff; position: relative; overflow: hidden; background: var(--slate); }
.v-band h2 { font-size: clamp(1.45rem, 4.4vw, 1.95rem); font-weight: 800; }
.v-band h2 em { font-style: italic; color: #E5C377; }
.v-band .v-chip {
  display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: .74rem;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px;
}
.v-chip.g { background: rgba(120,190,140,.2); border: 1px solid rgba(120,190,140,.55); color: #9FD8B2; }
.v-chip.a { background: rgba(229,195,119,.16); border: 1px solid rgba(229,195,119,.5); color: #E5C377; }
.v-chip.c { background: rgba(230,130,100,.16); border: 1px solid rgba(230,130,100,.5); color: #F0A98F; }
.v-band p { color: #B9C6CD; font-size: 1rem; margin-top: 10px; }
.savings { margin-top: 16px; display: flex; gap: 14px; flex-wrap: wrap; }
.sv { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px 18px; min-width: 150px; }
.sv .n { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: #E5C377; }
.sv .l { font-size: .72rem; color: #B9C6CD; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

/* LTV METER — the signature shareable artifact (§9). Labels stagger into lanes
   and needles clamp to the 60–100% ends with an off-scale marker, so nothing
   overlaps or pins off-screen at any input. */
.meter-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-top: 14px; }
.meter-card h3 { font-size: 1.06rem; margin-bottom: 18px; }
.meter {
  position: relative; height: 14px; border-radius: 999px;
  background: linear-gradient(90deg, #CFE4D4 0%, #CFE4D4 47%, #F0E2C2 47%, #F0E2C2 55%, #F0D6CB 55%);
  margin: 46px 14px 64px;
}
.tick { position: absolute; top: -8px; bottom: -8px; width: 2px; background: var(--slate); }
.tick span { position: absolute; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tick span.lane0 { top: -20px; }
.tick span.lane1 { top: -37px; }   /* staggered so 78%/80% never collide */
.needle { position: absolute; top: -6px; width: 14px; height: 26px; transform: translateX(-50%); }
.needle .dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); margin: 0 auto; }
.needle span { position: absolute; left: 50%; font-size: .74rem; font-weight: 700; white-space: nowrap; color: var(--ink); }
.needle span.lane0 { top: 26px; }
.needle span.lane1 { top: 46px; }   /* staggered below the bar when needles are close */
.needle span .off { font-weight: 600; font-size: .66rem; color: var(--clay-ink); margin-left: 3px; }
.meter-legend { font-size: .82rem; color: var(--muted); }

/* NEXT STEPS + OFFRAMPS */
.steps { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: 14px; padding: 22px; margin-top: 14px; }
.steps h3 { font-size: 1.08rem; }
.steps ol { margin: 12px 0 0 20px; font-size: .96rem; }
.steps li { margin-bottom: 9px; }
.offramp { margin-top: 14px; display: none; }
.off-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.off-card h3 { font-size: 1.08rem; }
.off-card p { font-size: .92rem; color: var(--muted); margin-top: 6px; }
.off-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.btn-aff {
  display: inline-block; background: var(--slate); color: #fff; text-decoration: none;
  font-weight: 700; font-family: var(--font-head); font-size: .84rem;
  border-radius: 999px; padding: 11px 19px;
}
a.btn-aff:hover { background: var(--slate-deep); }
/* Pending socket — same chip, visibly inert, never a dead link. */
.btn-aff.soon { background: var(--bg); color: var(--muted); border: 1.5px dashed var(--line); cursor: default; }
.heloc { display: none; margin-top: 14px; }
.honesty { font-size: .82rem; color: var(--muted); font-style: italic; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.redo { background: none; border: none; color: var(--slate); font-weight: 700; font-size: .84rem; text-decoration: underline; cursor: pointer; font-family: inherit; }

/* Verdict actions — share link + on-device PDF + redo (family standard). */
.v-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.v-actions .act {
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  border: 1.5px solid var(--slate); background: transparent; color: var(--slate);
  border-radius: 999px; padding: 10px 16px; cursor: pointer; min-height: 44px;
}
.v-actions .act:hover { background: var(--slate); color: #fff; }
.v-actions .act:disabled { opacity: .55; cursor: default; }
.v-actions-note { font-size: .74rem; color: var(--muted); margin-top: 8px; }
/* Hide chrome while html2pdf snapshots the verdict. */
body.pdf-export .v-actions, body.pdf-export .v-actions-note, body.pdf-export .a11y-widget { display: none !important; }

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .avm-row { flex-direction: column; align-items: stretch; }
  .hero { padding: 26px; }
  .panel { padding: 22px; }
}