/* ============================================================
   andrewmalm.com calculator styles (shared)
   Extracted from tools/index.html. Every selector is namespaced
   under .calc-embed so nothing collides with styles.css on the
   pages that embed individual calculators.
   Design tokens (--ink, --line, --accent, --c1..--c5, --serif,
   --sans, --shadow, --accent-soft, --line-2) come from the page
   stylesheet's :root. The calculator-only status tokens are
   defined on .calc-embed below.
   ============================================================ */

.calc-embed{
  --good:#12805A; --warn:#B0742A; --bad:#C0504A;
  --good-soft:#E2EDE6; --warn-soft:#F1E7D6; --bad-soft:#F3E1DF;
}

/* ---------- Tabs ---------- */
.calc-embed nav.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0 6px;align-items:center}
.calc-embed .tab-group{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  margin:0 6px 0 2px}
.calc-embed .tabs button{border:1px solid var(--line-2);background:var(--card);color:var(--ink);
  padding:8px 14px;border-radius:2px;font:600 13.5px/1 var(--sans);
  letter-spacing:.02em;cursor:pointer}
.calc-embed .tabs button:hover{border-color:var(--accent)}
.calc-embed .tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent)}
.calc-embed .tabs button:focus-visible,.calc-embed input:focus-visible,.calc-embed select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Calculator sections ---------- */
.calc-embed section.calc{display:none;padding-top:22px}
.calc-embed section.calc.active{display:block}
.calc-embed .calc-head h2{font-family:var(--serif);font-size:24px;font-weight:600;
  margin:0 0 2px;text-wrap:balance}
.calc-embed .calc-head p{color:var(--ink-2);margin:0 0 18px;font-size:14px;max-width:64ch}
.calc-embed .calc-grid{display:grid;grid-template-columns:minmax(300px,5fr) minmax(320px,6fr);gap:20px;
  align-items:start}
@media (max-width:820px){.calc-embed .calc-grid{grid-template-columns:1fr}}

/* ---------- Panels and fields ---------- */
.calc-embed .panel{background:var(--card);border:1px solid var(--line);border-radius:2px;
  box-shadow:var(--shadow);padding:18px}
.calc-embed .panel h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:600}
.calc-embed .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.calc-embed .field{display:flex;flex-direction:column;gap:4px}
.calc-embed .field.full{grid-column:1/-1}
.calc-embed .field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.calc-embed .inwrap{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:2px;
  background:var(--card);overflow:hidden}
.calc-embed .inwrap span{padding:0 9px;color:var(--ink-3);font-size:13px;flex:none}
.calc-embed .inwrap span.sfx{border-left:1px solid var(--line)}
.calc-embed .inwrap span.pfx{border-right:1px solid var(--line)}
.calc-embed .inwrap input,.calc-embed .inwrap select{border:0;background:transparent;color:var(--ink);
  font:600 15px/1.2 var(--sans);font-variant-numeric:tabular-nums;
  padding:9px 10px;width:100%;min-width:0}
.calc-embed .check{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:600;
  color:var(--ink-2);padding:6px 0}
.calc-embed .check input{width:16px;height:16px;accent-color:var(--accent)}
.calc-embed .divider{border:0;border-top:1px solid var(--line);margin:16px 0}

/* ---------- Results ---------- */
.calc-embed .results{display:flex;flex-direction:column;gap:14px}
.calc-embed .hero{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:2px;box-shadow:var(--shadow);padding:18px 20px}
.calc-embed .hero .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600}
.calc-embed .hero .v{font-family:var(--serif);font-size:40px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.15;margin:2px 0}
.calc-embed .hero .s{color:var(--ink-2);font-size:13.5px}
.calc-embed .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.calc-embed .tile{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:12px 14px}
.calc-embed .tile .k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600}
.calc-embed .tile .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.calc-embed .tile .s{font-size:12px;color:var(--ink-2);margin-top:1px}
.calc-embed .badge{display:inline-flex;align-items:center;gap:6px;border-radius:2px;padding:3px 11px;
  font-size:12.5px;font-weight:700}
.calc-embed .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.calc-embed .badge.good{background:var(--good-soft);color:var(--good)}
.calc-embed .badge.warn{background:var(--warn-soft);color:var(--warn)}
.calc-embed .badge.bad{background:var(--bad-soft);color:var(--bad)}
.calc-embed .badge.info{background:var(--accent-soft);color:var(--accent)}
.calc-embed .bar{display:flex;gap:2px;height:16px;border-radius:2px;overflow:hidden;margin:10px 0 12px}
.calc-embed .bar div{min-width:3px}
.calc-embed .bar div:first-child{border-radius:2px 0 0 2px}
.calc-embed .bar div:last-child{border-radius:0 2px 2px 0}
.calc-embed .legend{display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.calc-embed .legend .row{display:flex;align-items:center;gap:8px}
.calc-embed .legend .sw{width:11px;height:11px;border-radius:1px;flex:none}
.calc-embed .legend .lbl{color:var(--ink-2)}
.calc-embed .legend .val{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.calc-embed .tablewrap{overflow-x:auto}
.calc-embed table{border-collapse:collapse;width:100%;font-size:13.5px;font-variant-numeric:tabular-nums}
.calc-embed th{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  text-align:right;padding:6px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.calc-embed th:first-child,.calc-embed td:first-child{text-align:left}
.calc-embed td{padding:6px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.calc-embed tr:last-child td{border-bottom:0}
.calc-embed .note{font-size:12.5px;color:var(--ink-2);background:var(--accent-soft);border-radius:2px;
  padding:9px 12px;line-height:1.45}
.calc-embed .note.warn{background:var(--warn-soft)}
.calc-embed .note.bad{background:var(--bad-soft)}
.calc-embed .kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px}
.calc-embed .kv .k{color:var(--ink-2)}
.calc-embed .kv .v{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.calc-embed .kv.total{border-top:1px solid var(--line-2);margin-top:4px;padding-top:9px}
.calc-embed .kv.total .k{color:var(--ink);font-weight:700}

/* ---------- Lead capture on results ("send me this analysis") ---------- */
/* Results stay ungated. This card is deliberately quiet: hairline border,
   no shadow, ghost button, so it never competes with the numbers. */
.calc-embed .cap-card{background:var(--card);border:1px solid var(--line);border-radius:2px;
  padding:13px 15px}
.calc-embed .cap-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.calc-embed .cap-icon{flex:none;color:var(--accent)}
.calc-embed .cap-head{font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.25;
  margin:0;flex:1 1 14ch;min-width:0;text-wrap:balance}
.calc-embed .cap-head:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.calc-embed .cap-open{flex:none;border:1px solid var(--accent);background:transparent;
  color:var(--accent-deep);padding:8px 14px;border-radius:2px;
  font:700 13.5px/1 var(--sans);letter-spacing:.02em;cursor:pointer;white-space:nowrap}
.calc-embed .cap-open:hover{background:var(--accent-soft);border-color:var(--accent-deep)}
.calc-embed .cap-open:focus-visible,.calc-embed .cap-send:focus-visible,
.calc-embed .cap-field input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.calc-embed .cap-form{margin-top:13px}
.calc-embed .cap-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.calc-embed .cap-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.calc-embed .cap-field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.calc-embed .cap-opt{font-weight:400;color:var(--ink-3)}
.calc-embed .cap-field input{border:1px solid var(--line-2);border-radius:2px;background:var(--card);
  color:var(--ink);font:600 15px/1.2 var(--sans);padding:9px 10px;width:100%;min-width:0}
.calc-embed .cap-send{margin-top:13px;border:1px solid var(--accent);background:var(--accent);
  color:var(--accent-ink);padding:11px 20px;border-radius:2px;font:700 14.5px/1 var(--sans);
  letter-spacing:.02em;cursor:pointer}
.calc-embed .cap-send:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.calc-embed .cap-send[disabled]{opacity:.6;cursor:default}
.calc-embed .cap-consent{font-size:11.5px;line-height:1.55;color:var(--ink-3);margin:11px 0 0}
.calc-embed .cap-consent a{color:var(--accent-deep)}
.calc-embed .cap-reassure{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:8px 0 0}
.calc-embed .cap-actions{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px}
.calc-embed .cap-actions a{font-size:13.5px;font-weight:700;color:var(--accent-deep);
  text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px}
.calc-embed .cap-actions a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.calc-embed .cap-fallback{font-size:12.5px;line-height:1.45;color:var(--ink-2);
  background:var(--accent-soft);border-radius:2px;padding:9px 12px;margin:11px 0 0}
.calc-embed .cap-fallback a{color:var(--accent-deep)}
.calc-embed .cap-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .calc-embed section.calc.active{animation:calc-fade .18s ease-out}
  @keyframes calc-fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
  .calc-embed .cap-live{animation:cap-open .18s ease-out}
  @keyframes cap-open{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
}