/* Microsite Blueprint — live-data calculators, tables and recommendation blocks.
   Pairs with price_tools.py + calculators.js. Import after style.css and
   price-chart.css; reuses their tokens rather than defining a new palette. */

:root{
  --pt-line:var(--line,#e3e8ee);
  --pt-ink:var(--ink,#1a1a2e);
  --pt-soft:var(--ink-soft,#4a5a6a);
  --pt-accent:var(--teal,#1E6FBF);
  --pt-radius:var(--radius,6px);
}

/* ------------------------------------------------------------- tables ---- */
.pt-table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.94rem}
.pt-table caption{text-align:left;color:var(--pt-soft);font-size:.85rem;padding-bottom:10px}
.pt-table th,.pt-table td{padding:.55em .7em;border-bottom:1px solid var(--pt-line);text-align:left}
.pt-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--pt-soft);font-weight:700}
.pt-table tbody th{font-weight:600}
.pt-table td{font-variant-numeric:tabular-nums}
.pt-muted{color:var(--pt-soft);font-size:.88em}

/* Wide tables scroll inside their own container — the page body must never
   scroll horizontally. */
.pt-table--wide,.table-wrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.94rem}
.table-wrap th,.table-wrap td{padding:.55em .7em;border-bottom:1px solid var(--pt-line);text-align:left}
.table-wrap thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--pt-soft)}
.table-wrap td{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- fact blocks --- */
.pt-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--pt-line);border:1px solid var(--pt-line);border-radius:var(--pt-radius);
  overflow:hidden;margin:1.5em 0}
.pt-facts>div{background:#fff;padding:12px 14px}
.pt-facts dt{font-size:.76rem;color:var(--pt-soft);margin-bottom:3px}
.pt-facts dd{margin:0;font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- calculators ---- */
.pt-calc{border:1px solid var(--pt-line);border-radius:var(--pt-radius);padding:18px;margin:1.6em 0;
  background:var(--bg-alt,#f5f7fa)}
.pt-calc__ui{margin-bottom:1.2em}
.pt-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:10px}
.pt-row--counts .pt-field{flex:1 1 120px}
.pt-field{display:flex;flex-direction:column;gap:4px;flex:1 1 150px}
.pt-field--slider{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.pt-field label{font-size:.78rem;font-weight:600;color:var(--pt-soft)}
.pt-input{font:inherit;font-size:1rem;padding:.5em .6em;border:1px solid var(--pt-line);
  border-radius:var(--pt-radius);background:#fff;color:var(--pt-ink);width:100%;min-width:0}
.pt-input:focus-visible{outline:2px solid var(--pt-accent);outline-offset:1px}
textarea.pt-input{resize:vertical}

.pt-result{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  background:#fff;border:1px solid var(--pt-line);border-radius:var(--pt-radius);
  padding:14px 16px;margin:12px 0}
.pt-result__label{font-size:.85rem;color:var(--pt-soft);font-weight:600}
/* Proportional figures on the big number — tabular-nums makes a display-size
   value look loose. Columns of numbers get tabular; single values do not. */
.pt-result__value{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:700;line-height:1.1;
  letter-spacing:-.01em;font-family:var(--font-body)}
.pt-note{font-size:.85rem;color:var(--pt-soft);margin:.4em 0}
.pt-add,.pt-rm{font:inherit;cursor:pointer;border:1px solid var(--pt-line);background:#fff;
  border-radius:var(--pt-radius);color:var(--pt-soft)}
.pt-add{padding:.45em 1em;font-size:.85rem;font-weight:600;margin-bottom:10px}
.pt-add:hover{border-color:var(--pt-accent);color:var(--pt-ink)}
.pt-rm{width:36px;height:38px;font-size:1.1rem;line-height:1;flex:0 0 auto}
.pt-slider{flex:1 1 160px;accent-color:var(--pt-accent)}
.pt-slider__val{font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:8ch}
.pt-twin__label{font-size:.8rem;color:var(--pt-soft);font-weight:600;margin:0 0 .3em}
.pt-calc__twin .pt-table{margin-top:.4em}

/* ------------------------------------------------------------- bridge ---- */
/* Seller-intent module. Deliberately quiet — no button, no accent fill. It is
   guidance for someone selling, not a pitch. See 02-plan.md §6. */
.pt-bridge{border-left:3px solid var(--pt-line);background:var(--bg-alt,#f5f7fa);
  padding:14px 18px;margin:1.6em 0;border-radius:0 var(--pt-radius) var(--pt-radius) 0}
.pt-bridge p{margin:0 0 .6em;font-size:.94rem}
.pt-bridge p:last-child{margin-bottom:0}

/* -------------------------------------------------- recommendation box --- */
/* Highlight card, not a plain bordered box: a gold top rule and a tinted ground
   lift it off the page without shouting. The caveat is deliberately kept INSIDE
   the card — an honest limitation set next to the CTA is the point of the
   component, and moving it out would read as fine print. */
.pt-rec{position:relative;border:1px solid var(--pt-line);border-top:3px solid var(--gold,#C8A040);
  border-radius:var(--pt-radius);padding:22px 24px;margin:1.8em 0;
  background:linear-gradient(180deg,#fdfbf6 0%,#fff 140px);
  box-shadow:0 1px 3px rgba(21,34,68,.06)}
.pt-rec h3{margin-top:0;font-size:1.3rem}
.pt-rec__eyebrow{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-dark,#a8863a);margin:0 0 .5em}
.pt-rec .affiliate-cta{margin-top:.4em}
.pt-rec .review-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--pt-line);border:1px solid var(--pt-line);
  border-radius:var(--pt-radius);overflow:hidden;margin:1em 0}
.pt-rec .review-facts>div{background:#fff;padding:11px 13px}
.pt-rec .review-facts__wide{grid-column:1/-1}
.pt-rec .review-facts dt{font-size:.75rem;color:var(--pt-soft);margin-bottom:3px}
.pt-rec .review-facts dd{margin:0;font-weight:600;font-size:.95rem}
/* Popup caveat: the honest limitation, set quietly but not hidden. */
.exit-popup__caveat{font-size:.85rem;color:var(--pt-soft);border-top:1px solid var(--pt-line);
  padding-top:.8em;margin-top:.9em;line-height:1.55}
.pt-rec__caveat{font-size:.88rem;color:var(--pt-soft);border-top:1px solid var(--pt-line);
  padding-top:.9em;margin-top:1.1em;line-height:1.6}
@media (max-width:640px){
  .pt-rec{padding:18px 16px}
  .pt-rec .affiliate-cta{display:flex;justify-content:center;text-align:center}
}

/* ------------------------------------------------------------ nav subs --- */
.nav__group{position:relative}
/* color must be set EXPLICITLY, not inherited. `color:inherit` on a <button>
   inside the nav picks up the document ink (#1a1a2e), not the white the sibling
   <a> links get from style.css — which rendered the dropdown labels as dark
   navy text on the dark navy header at about 1.1:1 contrast, i.e. invisible.
   Every static check passed; only opening the page caught it. */
.nav__grouptoggle{font:inherit;font-size:inherit;color:#fff;background:none;border:0;
  cursor:pointer;padding:.7em 1em;display:flex;align-items:center;gap:5px}
.nav__grouptoggle:hover{background:rgba(255,255,255,.1)}
.nav__grouptoggle:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.nav__sub a{color:#fff}
.nav__grouptoggle span{font-size:.7em;opacity:.7}
.nav__sub{list-style:none;margin:0;padding:0}
@media (min-width:901px){
  .nav__sub{position:absolute;top:100%;left:0;min-width:200px;background:var(--navy,#152244);
    border-radius:0 0 var(--pt-radius) var(--pt-radius);padding:6px 0;z-index:50;
    box-shadow:0 8px 20px rgba(0,0,0,.18);display:none}
  .nav__group:hover .nav__sub,.nav__group:focus-within .nav__sub{display:block}
  .nav__sub a{display:block;padding:.5em 1.1em;white-space:nowrap}
}
@media (max-width:900px){
  /* No hover on touch: the group is always expanded in the mobile drawer
     rather than hidden behind an interaction that does not exist there. */
  .nav__sub{padding-left:1.2em}
  .nav__grouptoggle{width:100%;justify-content:space-between;opacity:.75;
    font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;cursor:default}
}

@media (max-width:640px){
  .pt-calc{padding:14px}
  .pt-field{flex:1 1 100%}
  .pt-result{flex-direction:column;align-items:flex-start;gap:2px}
  .pt-table{font-size:.86rem}
}