/* Reth!nk.tax - Pension Tension calculator styles.
   Lifted out of an inline <style> block (RT-55) so the Content-Security-Policy
   can specify style-src 'self'. The token aliases map V1 names onto the V2
   Ledger palette, so the calculator inherits the site colours untouched. */
/* ============ BRAND TOKENS ============================================
   RESOLVED (RT-57). These are no longer placeholders. Every token below is an
   alias onto the V2 "Ledger" palette in ../styles.css, so the calculator
   inherits the site's colours and faces automatically. GlobixSoft: there is
   nothing to map here - change ../styles.css and this follows. */
:root{
 --pt-ink:var(--ink);        /* deep evergreen - headings, chrome  */
 --pt-ink-2:var(--teal-2);      /* mid green - secondary chrome      */
 --pt-paper:var(--cream);      /* warm paper background             */
 --pt-card:var(--paper);
 --pt-accent:var(--gold);     /* brass - signature + emphasis      */
 --pt-tension:var(--state-tension);    /* rust - the tension end of gauges  */
 --pt-calm:var(--state-calm);       /* sage - the calm end of gauges     */
 --pt-line:var(--rule-light);
 --pt-body:var(--ink);
 --pt-muted:var(--ink-soft);
 --ff-display:var(--serif);   /* Newsreader - matches the rest of the site */
 --ff-body:var(--serif);      /* the calculator was still set in Georgia + system sans */
 --ff-mono:var(--mono);       /* IBM Plex Mono, for figures */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff-body);background:var(--pt-paper);color:var(--pt-body);line-height:1.55;font-size:16px}
.wrap{max-width:1080px;margin:0 auto;padding:20px}
header.pt{background:var(--pt-ink);color:var(--paper);padding:26px 0 22px}
header.pt .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;justify-content:space-between}
.brand{font-family:var(--ff-display);font-size:30px;letter-spacing:.3px}
.brand em{color:var(--pt-accent);font-style:normal}
.stamp{font-size:12.5px;opacity:.85}
.notice{background:var(--wash-gold);border:1px solid var(--pt-accent);border-left-width:5px;padding:10px 14px;font-size:13.5px;margin:16px 0;border-radius:6px}
h2{font-family:var(--ff-display);color:var(--pt-ink);font-size:23px;margin:26px 0 8px}
h3{font-family:var(--ff-display);color:var(--pt-ink-2);font-size:18px;margin:18px 0 6px}
p.lede{max-width:64ch}
.card{background:var(--pt-card);border:1px solid var(--pt-line);border-radius:10px;padding:20px;margin:14px 0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
label{display:block;font-size:13px;font-weight:600;color:var(--pt-ink);margin-bottom:3px}
input[type=number],input[type=email],input[type=text],select{width:100%;padding:9px 10px;border:1px solid var(--pt-line);border-radius:6px;font-size:15px;background:var(--paper)}
input:focus,select:focus,button:focus{outline:3px solid var(--pt-accent);outline-offset:1px}
.hint{font-size:12px;color:var(--pt-muted);margin-top:2px}
.btn{background:var(--pt-ink);color:var(--paper);border:0;border-radius:8px;padding:12px 22px;font-size:16px;font-weight:600;cursor:pointer}
.btn.acc{background:var(--pt-accent);color:var(--pt-ink)}
.btn.ghost{background:transparent;color:var(--pt-ink);border:2px solid var(--pt-ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;margin:8px 0}
.chk input{margin-top:3px}
/* signature: the tension gauge */
.gauge{position:relative;height:30px;border-radius:15px;background:linear-gradient(90deg,var(--pt-calm),var(--gold) 55%,var(--pt-tension));margin:10px 0 4px;overflow:visible}
.gauge .pin{position:absolute;top:-7px;width:4px;height:44px;background:var(--pt-ink);border-radius:2px;transition:left .6s ease}
.gauge .pin::after{content:attr(data-label);position:absolute;top:-22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--pt-ink)}
.gaugeScale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--pt-muted)}
.big{font-family:var(--ff-display);font-size:42px;color:var(--pt-ink);line-height:1.1}
.big small{font-size:16px;color:var(--pt-muted);font-family:var(--ff-body)}
table.cmp{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0}
table.cmp th{background:var(--pt-ink);color:var(--paper);padding:9px 8px;text-align:right;font-weight:600}
table.cmp th:first-child{text-align:left}
table.cmp td{padding:9px 8px;border-bottom:1px solid var(--pt-line);text-align:right}
table.cmp td:first-child{text-align:left;font-weight:600;color:var(--pt-ink)}
table.cmp tr.best td{background:var(--wash-band)}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--pt-accent);color:var(--pt-ink);margin-left:6px;vertical-align:middle}
.warn{color:var(--pt-tension);font-size:13px;margin:4px 0}
.ok{color:var(--pt-calm);font-size:13px;margin:4px 0}
details{margin:8px 0;border:1px solid var(--pt-line);border-radius:8px;padding:10px 14px;background:var(--cream)}
details summary{cursor:pointer;font-weight:600;color:var(--pt-ink)}
.hidden{display:none!important}
.gatewrap{position:relative}
.blurred{filter:blur(7px);pointer-events:none;user-select:none}
.gatecard{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:40px}
.gatecard .card{max-width:520px;box-shadow:0 10px 40px rgba(29,58,52,.25)}
footer.pt{border-top:1px solid var(--pt-line);margin-top:40px;padding:22px 0;font-size:12.5px;color:var(--pt-muted)}
@media print{header.pt,.no-print,footer.pt .no-print{display:none} body{background:var(--paper)} .card{border:0;page-break-inside:avoid}}
@media (prefers-reduced-motion:reduce){.gauge .pin{transition:none}}

/* Classes replacing style="" attributes that the calculator used to inject at
   runtime. style-src has no 'unsafe-inline', so those would have been blocked
   in the browser even though the static markup was clean. */
.pt-note{font-size:14px;margin:6px 0}
.pt-mt{margin-top:10px}
.pt-out{align-self:end;font-size:14px}