/* ════════════════════════════════════════════════════════════
   TOOLS.CSS — calculator UI for the Real Estate Advisory Toolkit
   Consumes the site tokens from styles.css. Old tool-token names
   are aliased to site tokens so all existing markup/JS inherits
   the hussnan.com palette automatically.
   ════════════════════════════════════════════════════════════ */
:root{
  --ink:var(--color-bg-dark);
  --ink-soft:#3a3a3e;
  --muted:var(--color-fg-muted);
  --cream:var(--color-cream);
  --cream-deep:#e2d6c6;
  --bronze:var(--color-accent);
  --paper:var(--color-bg-alt);
  --white:var(--color-bg);
  --line:var(--color-border);
  --line-strong:#d3cfc6;
  --pos:#3f6b52; --pos-bg:#eef3ef;
  --neg:#8f4438; --neg-bg:#f5eeec;
  --display:var(--font-display);
  --body:var(--font-body);
  --tr:6px;               /* tool radius — crisp, editorial */
}

/* ---------- Working surface ---------- */
.calc{max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,5vw,64px)}
.calc-lede{max-width:60ch;margin-bottom:var(--space-2xl)}
.calc-lede .section-label{display:block;margin-bottom:var(--space-s)}
.calc-lede h2{font-family:var(--display);font-size:var(--step-3);font-weight:500;line-height:1.2;color:var(--color-fg)}

.wrap{display:grid;grid-template-columns:1fr 372px;gap:28px;align-items:start}
@media (max-width:980px){.wrap{grid-template-columns:1fr}}

/* ---------- Input cards ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--tr);padding:22px 24px;margin-bottom:22px}
.card h2{font-family:var(--body);font-size:0.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.card h2 .num{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--ink);color:var(--color-fg-light);font-size:10.5px;letter-spacing:0;font-weight:600}
.card h2 .phase,.card h2 .sub{margin-left:auto;letter-spacing:.12em;font-weight:600;font-size:10px}
.card h2 .phase{color:var(--bronze)}
.card h2 .sub{color:var(--muted);letter-spacing:0;text-transform:none;font-weight:400;font-variant-numeric:tabular-nums}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.calc label{font-size:12.5px;color:var(--color-fg);font-weight:500}
.calc label .hint{color:var(--muted);font-weight:400}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .pre,.input-wrap .post{position:absolute;font-size:13px;color:var(--muted);pointer-events:none}
.input-wrap .pre{left:12px}.input-wrap .post{right:12px}
.calc input[type=number],.calc input[type=text],.calc select{
  width:100%;font-family:var(--body);font-size:14px;color:var(--color-fg);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px;transition:border-color .15s,background .15s;
}
.input-wrap.has-pre input{padding-left:24px}
.input-wrap.has-post input{padding-right:42px}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--ink);background:var(--white)}
.calc input[type=number]::-webkit-outer-spin-button,.calc input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc input[type=number]{-moz-appearance:textfield}
.calc select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236b6b6b' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}

/* segmented toggle */
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px;gap:3px}
.seg button{font-family:var(--body);font-size:12px;font-weight:500;color:var(--muted);background:none;border:none;border-radius:3px;padding:7px 13px;cursor:pointer;transition:all .15s;letter-spacing:.02em}
.seg button.active{background:var(--ink);color:var(--color-fg-light)}
.readout{display:flex;align-items:center;min-height:40px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);font-family:var(--body);font-size:14px;font-weight:600;color:var(--color-fg);font-variant-numeric:tabular-nums}
.hideable.off{display:none}

/* unit mix */
.urow{display:grid;grid-template-columns:1fr 64px 118px 30px;gap:8px;align-items:center;margin-bottom:8px}
.urow .uhead{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.urow input{padding:9px 10px;font-size:13px}
.urow .input-wrap.has-pre input{padding-left:22px}
.u-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:4px;border-radius:4px;transition:color .15s,background .15s}
.u-remove:hover{color:var(--neg);background:var(--neg-bg)}
.addrow{margin-top:6px;background:none;border:1px dashed var(--line-strong);color:var(--color-fg);font-family:var(--body);font-size:12px;font-weight:500;padding:9px 12px;border-radius:var(--radius-sm);width:100%;cursor:pointer;letter-spacing:.04em;transition:all .15s}
.addrow:hover{border-color:var(--ink);background:var(--paper)}
.gdv-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.gdv-total .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.gdv-total .v{font-family:var(--display);font-size:26px;font-weight:600;color:var(--color-fg)}

/* ---------- Results ---------- */
.results{position:sticky;top:calc(var(--nav-height) + 16px)}
@media (max-width:980px){.results{position:static}}
.verdict{background:var(--ink);color:var(--color-fg-light);border-radius:var(--tr);padding:24px 26px;margin-bottom:20px;position:relative;overflow:hidden}
.verdict::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(196,181,164,.14),transparent 55%);pointer-events:none}
.verdict>*{position:relative}
.verdict .vlabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);font-weight:600}
.verdict .vbig{font-family:var(--display);font-size:50px;font-weight:600;line-height:1;margin:10px 0 3px;letter-spacing:-.01em}
.verdict .vbig.pos{color:#8fd3ac}.verdict .vbig.neg{color:#e6a79b}
.verdict .vsub{font-size:12.5px;color:rgba(232,221,208,.6);font-weight:300}
.verdict .vrow{display:flex;gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(232,221,208,.14)}
.verdict .vrow>div{flex:1}
.verdict .vrow .k{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,221,208,.45);font-weight:600}
.verdict .vrow .v{font-family:var(--display);font-size:25px;font-weight:600;margin-top:4px;color:var(--color-fg-light)}

.metrics{background:var(--white);border:1px solid var(--line);border-radius:var(--tr);overflow:hidden;margin-bottom:20px}
.metrics .mhead{padding:15px 22px 13px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.metrics .mhead h3{font-size:0.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mrow{display:flex;justify-content:space-between;align-items:baseline;padding:12px 22px;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:none}
.mrow .mk{font-size:13px;color:var(--ink-soft)}
.mrow .mk small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.mrow .mv{font-family:var(--display);font-size:22px;font-weight:600;color:var(--color-fg);text-align:right;white-space:nowrap}
.mrow .mv.pos{color:var(--pos)}.mrow .mv.neg{color:var(--neg)}
.mrow.tot{background:var(--color-bg-cream);border-top:1px solid var(--cream-deep)}
.verdict-note{font-size:12px;padding:12px 22px;line-height:1.5}
.verdict-note.pos{background:var(--pos-bg);color:var(--pos)}
.verdict-note.neg{background:var(--color-bg-cream);color:var(--ink-soft)}

/* ---------- Charts ---------- */
.chartwrap{margin-top:22px}
.chart-card{background:var(--white);border:1px solid var(--line);border-radius:var(--tr);padding:24px 26px}
.chart-card h2{font-family:var(--display);font-size:var(--step-2);font-weight:500;margin-bottom:2px;color:var(--color-fg)}
.chart-card .csub{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.legend{display:flex;gap:22px;margin-bottom:10px;flex-wrap:wrap}
.legend .li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.legend .sw{width:12px;height:12px;border-radius:3px}
.legend .val{font-weight:600;color:var(--color-fg)}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-svg .grid-line{stroke:var(--line);stroke-width:1}
.chart-svg .axis-label{fill:var(--muted);font:400 11px var(--body);font-variant-numeric:tabular-nums}
.chart-svg .v-line{fill:none;stroke:var(--ink);stroke-width:2}
.chart-svg .e-line{fill:none;stroke:var(--bronze);stroke-width:2}

.cyclebar{display:flex;height:54px;border-radius:var(--radius-sm);overflow:hidden;gap:2px;background:var(--paper);border:1px solid var(--line)}
.cyclebar .cseg{display:flex;align-items:center;padding:0 14px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;transition:width .3s ease;min-width:0}
.cyclebar .cseg.recycled{background:var(--bronze);color:var(--color-bg-dark)}
.cyclebar .cseg.left{background:var(--ink);color:var(--color-fg-light)}
.cyclebar .cseg.allout{background:var(--pos);color:#fff}
.scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums}
.cycle-note{margin-top:16px;font-size:12.5px;line-height:1.55;padding:13px 16px;border-radius:var(--radius-sm)}
.cycle-note.pos{background:var(--pos-bg);color:var(--pos)}
.cycle-note.neg{background:var(--color-bg-cream);color:var(--ink-soft)}

.stackbar{display:flex;height:56px;border-radius:var(--radius-sm);overflow:hidden;gap:2px;background:var(--paper);border:1px solid var(--line)}
.stackbar .sseg{display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;transition:width .3s ease;min-width:0}
.stack-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 24px;margin-top:18px}
.stack-legend .li{display:flex;align-items:baseline;gap:9px;font-size:12.5px;min-width:0}
.stack-legend .sw{width:12px;height:12px;border-radius:3px;flex-shrink:0;transform:translateY(1px)}
.stack-legend .lk{color:var(--ink-soft);flex:1 1 auto;min-width:0}
.stack-legend .lv{font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-fg);white-space:nowrap;flex-shrink:0}
.stack-legend .lp{color:var(--muted);font-size:11px;margin-left:6px;white-space:nowrap;flex-shrink:0;min-width:34px;text-align:right}

/* ---------- Breakdown ---------- */
.breakdown{margin-top:22px}
.bd-card{background:var(--white);border:1px solid var(--line);border-radius:var(--tr);overflow:hidden}
.bd-head{padding:20px 26px;border-bottom:1px solid var(--line)}
.bd-head h2{font-family:var(--display);font-size:var(--step-2);font-weight:500;color:var(--color-fg)}
.bd-head p{font-size:12.5px;color:var(--muted);margin-top:3px}
.bd-body{padding:8px 26px 20px}
.bd-cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:720px){.bd-cols{grid-template-columns:1fr}}
.bd-col{padding:8px 26px 18px}
.bd-col:first-child{border-right:1px solid var(--line)}
@media (max-width:720px){.bd-col:first-child{border-right:none;border-bottom:1px solid var(--line)}}
.bd-col h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin:14px 0 4px}
.bline{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.bline .bk{color:var(--ink-soft)}
.bline .bk small{color:var(--muted);font-size:11.5px}
.bline .bv{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;color:var(--color-fg)}
.bline.less .bv{color:var(--neg)}
.bline.sub{border-bottom:2px solid var(--line-strong)}
.bline.sub .bk{font-weight:600;color:var(--color-fg)}
.bline.sub .bv{font-family:var(--display);font-size:19px;font-weight:600}
.bline.result{background:var(--color-bg-cream);margin:6px -26px 0;padding:15px 26px;border-bottom:none}
.bline.result .bk{font-weight:600;color:var(--color-fg);font-size:14px}
.bline.result .bv{font-family:var(--display);font-size:24px;font-weight:600}

/* ---------- Projection table ---------- */
.projection{margin-top:22px}
.proj-card{background:var(--white);border:1px solid var(--line);border-radius:var(--tr);overflow:hidden}
.proj-head{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
.proj-head h2{font-family:var(--display);font-size:var(--step-2);font-weight:500;color:var(--color-fg)}
.proj-head p{font-size:12px;color:var(--muted)}
.table-scroll{overflow-x:auto}
.calc table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.calc th,.calc td{padding:12px 16px;text-align:right;white-space:nowrap}
.calc th:first-child,.calc td:first-child{text-align:left;position:sticky;left:0;background:var(--white)}
.calc thead th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line-strong);background:var(--paper)}
.calc thead th:first-child{background:var(--paper)}
.calc tbody td{border-bottom:1px solid var(--line);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.calc tbody tr:hover td,.calc tbody tr:hover td:first-child{background:#fbfbfa}
.calc tbody td.pos{color:var(--pos);font-weight:500}
.calc tbody td.neg{color:var(--neg);font-weight:500}
.calc tbody tr.exit td{background:var(--color-bg-cream);border-top:1px solid var(--cream-deep);font-weight:600;color:var(--color-fg)}
.calc tbody tr.exit td:first-child{background:var(--color-bg-cream)}

/* ---------- Actions & disclaimer ---------- */
.actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:var(--body);font-size:0.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:13px 26px;border-radius:0;border:1px solid var(--color-fg);background:transparent;color:var(--color-fg);cursor:pointer;transition:background .2s,color .2s,gap .2s;text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-s)}
.btn:hover{background:var(--color-fg);color:var(--color-bg)}
.btn.dark{background:var(--ink);color:var(--color-fg-light);border-color:var(--ink)}
.btn.dark:hover{opacity:.88}
.btn.line{background:transparent}

.calc-disclaimer{margin-top:var(--space-2xl);padding-top:var(--space-l);border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;line-height:1.7;font-weight:300;max-width:90ch}
.calc-disclaimer strong{color:var(--ink-soft);font-weight:500}

/* ---- Generate gate: results stay hidden until the user generates ---- */
.results-gate{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:30px 26px;
  text-align:center;
}
.results-gate h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;
  font-weight:600;
  line-height:1.2;
  color:var(--color-fg);
  margin:0 0 10px;
}
.results-gate p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin:0 0 20px;
}
.results-gate .btn{margin-top:2px}

.calc:not(.is-generated) .verdict,
.calc:not(.is-generated) .metrics,
.calc:not(.is-generated) .breakdown,
.calc:not(.is-generated) .projection,
.calc:not(.is-generated) .chartwrap,
.calc:not(.is-generated) .actions{display:none}
.calc.is-generated .results-gate{display:none}

/* Branded print header — hidden on screen, shown only in the PDF */
.print-header{display:none}

@media print{
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  @page{ margin:12mm; }
  html,body{ background:#fff !important; }
  .nav, .footer, .svc-hero, .actions, .calc-disclaimer,
  .contact-overlay, .results-gate, .seg button:not(.active),
  .inputs, .tool-intro{ display:none !important; }
  .print-header{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    background:#121214;
    padding:14px 22px;
    margin:0 0 22px;
    border-radius:6px;
  }
  .print-header img{ height:30px; width:auto; }
  .print-header .ph-meta{
    color:#c4b5a4; font-size:10px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase;
  }
  .calc{ padding:0 !important; max-width:none !important; }
  .wrap{ display:block !important; }
  .results{ position:static !important; width:auto !important; margin:0 !important; }
  .breakdown, .chartwrap, .projection{ margin-top:20px !important; }
  .card,.metrics,.bd-card,.proj-card,.verdict,.chart-card{
    break-inside:avoid; page-break-inside:avoid;
  }
}