/* tools-a.css: extras for the tools in assets/js/tools-a.js
   (mortgage, dpa, net-sheet, deal-analyzer, rent-vs-buy, rent-increase,
   cash-to-close, sell-vs-rent, house-hack, rate-shock). Builds on site.css. */

/* Input column: ivory cards instead of one white slab */
.tw-in.ta-in{background:transparent;border:0;padding:0;gap:12px}
@media (min-width:901px){.tw-in.ta-in{max-height:calc(100vh - 210px);overflow:auto;padding:0 6px 2px 0;overscroll-behavior:contain;scrollbar-width:thin}}
.ta-card{background:var(--paper);border:1px solid var(--ivory-3);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:12px}
.ta-card > h4{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-3);margin:0}
.ta-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.ta-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ta-card .seg{display:flex;width:100%}
.ta-card .seg button{flex:1;min-height:40px;padding:9px 6px}
.ta-card .field .fine{margin-top:-2px}
.ta-in [hidden]{display:none!important}

/* Navy hero KPI with the gold stacked bar */
.ta-hero{background:var(--navy);color:var(--on-navy);border-radius:var(--r);padding:20px 22px 18px}
.ta-hero-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap}
.ta-hero small.lbl{display:block;font:600 19px/1.2 var(--serif);color:var(--on-navy-2)}
.ta-hero b.big{display:block;font:600 clamp(38px,5vw,54px)/1.04 var(--serif);margin-top:4px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ta-hero .sub{font-size:13px;color:var(--on-navy-2);margin-top:6px;max-width:52ch}
.ta-minis{display:flex;gap:22px;flex-wrap:wrap}
.ta-mini small{display:block;font-size:11.5px;color:var(--on-navy-3);letter-spacing:.04em}
.ta-mini b{display:block;font:600 22px/1.1 var(--serif);color:var(--on-navy);margin-top:3px;font-variant-numeric:tabular-nums}
.ta-hero .stack{margin-top:16px;height:18px;background:rgba(255,255,255,.12)}
.ta-hero .legend{color:var(--on-navy-2);margin-top:12px}
.ta-hero.neg b.big{color:#F1B7AC}

/* Tables */
.tbl td small.ta-note{display:block;font-size:12px;color:var(--ink-3);font-weight:400;margin-top:2px}
.tbl tr.sec td{background:var(--ivory-2);font:700 11px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-3);padding-top:10px}
.tbl tr.neg td.num{color:var(--bad)}
.tbl tr.hl td{background:rgba(201,169,110,.1)}
.tbl tr.total.big td{font:600 20px/1.2 var(--serif)}
.ta-mini-tbl td,.ta-mini-tbl th{padding:7px 8px;font-size:13px}

/* Status rows, checks, state headline */
.ta-state{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 18px;flex-wrap:wrap}
.ta-state h3{font:600 clamp(26px,3vw,36px)/1.08 var(--serif);color:var(--ink);max-width:20ch}
.ta-state .rule{margin:12px 0 0}
.ta-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ta-checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ta-checks li i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal}
.ta-checks li i svg{width:13px;height:13px}
.ta-checks li.ok i{background:var(--gold);color:var(--navy-3)}
.ta-checks li.no i{background:rgba(180,88,75,.16);color:var(--bad)}
.ta-checks li.maybe i{border:1.5px solid var(--navy);color:var(--navy)}
.ta-checks li b{color:var(--ink)}
.prog-row .ta-why{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px}
.prog-row .ta-why a,.ta-checks a,.note a{color:var(--gold-3);text-decoration:underline}
.prog-row .st.bad{background:rgba(180,88,75,.14);color:var(--bad)}
.prog-row .amt small{display:block;font:600 11px/1.2 var(--sans);color:var(--ink-3);text-align:right;margin-top:4px;letter-spacing:.02em}
.ta-progs{background:#fff;border:1px solid var(--ivory-3);border-radius:var(--r);padding:0 16px}
.ta-progs .prog-row:last-child{border-bottom:0}
.ta-combined{background:#fff;border:1px solid var(--ivory-3);border-radius:var(--r);padding:20px 22px}
.ta-combined h3{font:600 clamp(26px,3vw,36px)/1.1 var(--serif);color:var(--ink)}
.ta-combined p{margin:12px 0 0;font-size:14px;color:var(--ink-2);border-top:1px solid var(--gold);padding-top:12px}

/* Assumptions disclosure */
.ta-assume{background:var(--ivory-2);border-radius:var(--r);padding:0 16px}
.ta-assume summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;min-height:52px;font:600 17px/1.2 var(--serif);color:var(--ink)}
.ta-assume summary::-webkit-details-marker{display:none}
.ta-assume summary svg{width:22px;height:22px;color:var(--gold-3);flex:none}
.ta-assume summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .2s}
.ta-assume[open] summary::after{transform:rotate(45deg)}
.ta-assume ul{margin:0 0 14px;padding-left:18px;font-size:13px;color:var(--ink-2);line-height:1.55}

/* Chart box */
.ta-chart{position:relative}
.ta-chart .chart{max-height:260px}
.ta-chart .cap{font-size:12px;color:var(--ink-3);margin-top:6px}
.ta-legend-line{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.ta-legend-line span{display:inline-flex;align-items:center;gap:6px}
.ta-legend-line i{width:16px;height:3px;border-radius:2px;display:inline-block}
.ta-legend-line i.dash{background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px)!important;height:2px}

/* Misc */
.ta-big-pct{font:600 clamp(34px,4vw,46px)/1 var(--serif)}
.ta-facts{margin:0;padding-left:18px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ta-facts li{margin:4px 0}
.ta-dl{display:grid;grid-template-columns:minmax(110px,150px) 1fr;gap:8px 14px;margin:0;font-size:13.5px;line-height:1.5}
.ta-dl dt{font-weight:700;color:var(--ink)}
.ta-dl dd{margin:0;color:var(--ink-2)}
.ta-tags{display:flex;flex-wrap:wrap;gap:6px}
.ta-link-btn{text-decoration:none}
.verdict b{font-weight:400;color:var(--gold-3)}
@media (max-width:560px){
  .ta-hero{padding:16px}
  .ta-dl{grid-template-columns:1fr}
  .ta-dl dd{margin-bottom:6px}
  .prog-row{grid-template-columns:40px 1fr;row-gap:6px}
  .prog-row .amt{grid-column:2;font-size:20px}
  .prog-row .amt small{text-align:left}
  .tbl{font-size:13px}
  .tbl th,.tbl td{padding:8px 8px}
}
@media print{.ta-in{max-height:none!important;overflow:visible!important}.ta-assume{display:block}.ta-assume ul{display:block}}
/* action row: the core outline button gets navy on the ivory tool panel for contrast */
.tool-panel .tw-actions .btn-outline.on-light{color:var(--navy);border-color:var(--navy)}
.tool-panel .tw-actions .btn-outline.on-light:hover{background:rgba(15,31,51,.06)}
/* keep inline bold in program rows in the sans face */
.prog-row .ta-why b{font:700 12.5px/1.5 var(--sans)}
/* side-by-side fields: reserve two label lines so inputs line up when one label wraps */
.ta-row > .field > label,.ta-row3 > .field > label{min-height:30px;align-items:flex-end}
.ta-row > .field > label .hint,.ta-row3 > .field > label .hint{text-align:right}