/* ===== TMD shared calculator styles =====
   Used by /tools/* calculators. Relies on CSS variables defined in tmd-site.css
   (--navy, --navy-mid, --teal, --teal-light, --gold, --gold-light, --border,
    --white, --off-white, --text, --text-light, --text-muted, --radius-lg, --shadow-sm).
*/

.calc-hero { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%); color: var(--white); padding: 64px 0 56px; position: relative; overflow: hidden; }
.calc-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse at 15% 0%, rgba(13,138,126,0.16), transparent 50%), radial-gradient(ellipse at 90% 100%, rgba(201,162,39,0.12), transparent 55%); }
.calc-hero .container { position: relative; z-index: 1; }
.back-link { display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,0.6); font-size:13px; font-weight:500; margin-bottom:18px; transition:color .2s; }
.back-link:hover { color: var(--teal-light); }
.calc-hero .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(18,181,166,0.12); color:var(--teal-light); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
.calc-hero h1 { color: var(--white); max-width: 820px; margin-bottom: 14px; }
.calc-hero h1 .accent { color: var(--gold-light); font-style: italic; }
.calc-hero p.lede { color: rgba(255,255,255,0.78); font-size:18px; max-width:760px; margin:0; }

.calc-shell { padding: 48px 0 64px; background: var(--off-white); }
.calc-grid { display:grid; grid-template-columns: minmax(320px,1fr) minmax(360px,1.1fr); gap:28px; align-items:start; }

.calc-inputs { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm); position:sticky; top:100px; }
.calc-inputs h2 { font-size:22px; margin-bottom:4px; }
.calc-inputs .panel-sub { font-size:13px; color:var(--text-muted); margin-bottom:22px; }
.field-group { margin-bottom: 22px; }
.field-group:last-child { margin-bottom: 0; }
.field-label { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--text); margin-bottom:8px; letter-spacing:.02em; }
.field-label .field-val { font-family:'Playfair Display',serif; font-size:17px; font-weight:600; color:var(--navy); }
.field-help { font-size:12px; color:var(--text-muted); font-weight:500; cursor:help; }
.num-input, .select-input { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:10px; font-family:inherit; font-size:15px; font-weight:500; color:var(--text); background:var(--white); transition:border-color .15s, box-shadow .15s; }
.num-input:focus, .select-input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(13,138,126,0.12); }
.num-input.has-prefix { padding-left:28px; }
.input-wrap { position:relative; }
.input-wrap .prefix { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-weight:500; font-size:15px; pointer-events:none; }
.range-row { display:grid; grid-template-columns:1fr 110px; gap:10px; align-items:center; }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:6px; background:linear-gradient(to right, var(--teal) 0%, var(--teal) var(--fill,50%), var(--border) var(--fill,50%), var(--border) 100%); border-radius:999px; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--white); border:3px solid var(--teal); box-shadow:0 2px 6px rgba(0,0,0,0.15); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--white); border:3px solid var(--teal); box-shadow:0 2px 6px rgba(0,0,0,0.15); cursor:pointer; }
.seg { display:flex; gap:4px; padding:4px; background:var(--off-white); border-radius:10px; border:1px solid var(--border); }
.seg button { flex:1; padding:8px 4px; border:none; background:transparent; font:inherit; font-weight:600; font-size:13px; color:var(--text-light); border-radius:7px; cursor:pointer; transition:all .15s; }
.seg button.is-active { background:var(--navy); color:var(--white); box-shadow:0 1px 3px rgba(0,0,0,0.18); }
.seg button:hover:not(.is-active) { background:rgba(0,0,0,0.04); color:var(--navy); }
.seg.mode-seg button.is-active { background:var(--teal); }
.florida-section { background:linear-gradient(135deg, rgba(13,138,126,0.04), rgba(201,162,39,0.04)); border:1px solid rgba(13,138,126,0.18); border-radius:12px; padding:18px; margin-top:8px; }
.florida-title { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; }
.florida-title::before { content:""; width:16px; height:2px; background:var(--teal); }

.calc-results { display:flex; flex-direction:column; gap:22px; }
.result-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm); }

/* Big headline result (generic) */
.headline { background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color:var(--white); text-align:center; position:relative; overflow:hidden; padding:34px 28px 30px; }
.headline::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(201,162,39,0.14), transparent 65%); }
.headline > * { position:relative; z-index:1; }
.headline .label { display:block; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-light); margin-bottom:8px; }
.headline .big-num { font-family:'Playfair Display',serif; font-size:52px; font-weight:700; line-height:1; }
.headline .big-sub { margin-top:10px; font-size:13.5px; color:rgba(255,255,255,0.62); }
.headline .verdict { display:inline-block; margin-top:12px; padding:6px 16px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.04em; }
.v-good   { background:rgba(13,138,126,0.22); color:#5fe0d0; }
.v-ok     { background:rgba(18,181,166,0.18); color:#7fe6da; }
.v-watch  { background:rgba(201,162,39,0.22); color:var(--gold-light); }
.v-hard   { background:rgba(190,106,59,0.25); color:#e89b73; }

/* metric tiles */
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.metric { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:18px 16px; text-align:center; box-shadow:var(--shadow-sm); }
.metric .m-lbl { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
.metric .m-val { font-family:'Playfair Display',serif; font-size:25px; font-weight:700; color:var(--navy); line-height:1.1; }
.metric .m-val.pos { color:var(--teal); }
.metric .m-val.neg { color:#be6a3b; }
.metric .m-note { font-size:11px; color:var(--text-muted); margin-top:3px; }

/* breakdown rows */
.bd-card h3 { font-size:18px; margin-bottom:14px; }
.bd-row { display:grid; grid-template-columns:1fr auto; gap:12px; padding:9px 0; font-size:14px; border-bottom:1px solid var(--border); }
.bd-row:last-child { border-bottom:none; }
.bd-row .bd-lbl { color:var(--text-light); display:flex; flex-direction:column; }
.bd-row .bd-lbl small { color:var(--text-muted); font-size:11.5px; }
.bd-row .bd-amt { font-variant-numeric:tabular-nums; font-weight:600; color:var(--navy); }
.bd-row.is-sum { border-top:2px solid var(--border); border-bottom:none; margin-top:4px; padding-top:13px; }
.bd-row.is-sum .bd-lbl { font-weight:700; color:var(--text); }
.bd-row.is-income .bd-amt { color:var(--teal); }

/* insight */
.insight { padding:18px 22px; border-radius:12px; background:var(--off-white); border:1px solid var(--border); display:flex; gap:14px; align-items:flex-start; }
.insight.is-good { background:rgba(13,138,126,0.06); border-color:rgba(13,138,126,0.25); }
.insight.is-warn { background:rgba(201,162,39,0.06); border-color:rgba(201,162,39,0.30); }
.insight.is-strain { background:rgba(190,106,59,0.06); border-color:rgba(190,106,59,0.30); }
.insight .ico { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:var(--white); }
.insight .ico svg { width:16px; height:16px; }
.insight.is-good .ico { color:var(--teal); }
.insight.is-warn .ico { color:var(--gold); }
.insight.is-strain .ico { color:#be6a3b; }
.insight .body strong { display:block; font-size:14px; color:var(--text); margin-bottom:2px; }
.insight .body p { font-size:13.5px; color:var(--text-light); margin:0; line-height:1.5; }

/* CTA */
.cta-card { background:linear-gradient(135deg, rgba(201,162,39,0.07), rgba(13,138,126,0.04)); border:1px solid rgba(201,162,39,0.25); padding:26px; }
.cta-card h3 { font-size:20px; margin-bottom:8px; }
.cta-card p { font-size:14.5px; margin-bottom:18px; color:var(--text-light); }
.btn-gold-pill { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); color:var(--navy); font-weight:700; font-size:15px; box-shadow:0 8px 22px rgba(201,162,39,0.32); transition:all .2s; }
.btn-gold-pill:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(201,162,39,0.45); }

/* FAQ */
.calc-faq { padding:56px 0; background:var(--white); }
.calc-faq h2 { font-size:26px; margin-bottom:24px; }
.calc-faq details { border:1px solid var(--border); border-radius:12px; padding:0; margin-bottom:12px; background:var(--off-white); overflow:hidden; }
.calc-faq summary { padding:18px 22px; font-weight:600; font-size:16px; color:var(--text); cursor:pointer; list-style:none; }
.calc-faq summary::-webkit-details-marker { display:none; }
.calc-faq summary::after { content:"+"; float:right; color:var(--teal); font-weight:700; }
.calc-faq details[open] summary::after { content:"–"; }
.calc-faq details p { padding:0 22px 18px; margin:0; font-size:14.5px; color:var(--text-light); line-height:1.6; }

.compliance-strip { background:var(--white); padding:28px 0; border-top:1px solid var(--border); }
.compliance-strip p { font-size:12.5px; color:var(--text-muted); text-align:center; max-width:880px; margin:0 auto; line-height:1.6; }

@media (max-width: 900px) { .calc-grid { grid-template-columns:1fr; gap:22px; } .calc-inputs { position:static; } }
@media (max-width: 540px) { .calc-hero { padding:48px 0 40px; } .calc-shell { padding:28px 0 48px; } .calc-inputs, .result-card { padding:22px; } .metric-row { grid-template-columns:1fr; } }