/* Buyer tools page. Uses the sub-site tokens from style.css. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.tool-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tool-jump .pill{text-decoration:none;color:#111;transition:background .16s ease,color .16s ease}
.tool-jump .pill:hover{background:var(--red);border-color:var(--red);color:#fff}

/* --- Calculator ---------------------------------------------------------- */

.calc-shell{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:30px}

.calc-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.calc-field{display:flex;flex-direction:column;min-width:0}
.calc-field label{font-weight:800;font-size:13px;margin-bottom:8px}
.calc-input{display:flex;align-items:center;gap:6px;border:1px solid #dcdde3;border-radius:8px;background:#fbfbfc;padding:0 12px;min-height:50px}
.calc-input:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(215,25,43,.12)}
.calc-input input,.calc-input select{width:100%;min-width:0;border:0;background:none;outline:0;font:inherit;font-weight:700;color:var(--ink);padding:12px 0}
.calc-input select{cursor:pointer}
.calc-prefix,.calc-suffix{color:var(--muted);font-weight:800;font-size:14px;flex:0 0 auto}
.calc-hint{margin-top:7px;font-size:12px;color:var(--muted);line-height:1.4}
.calc-reset{grid-column:1/-1;justify-self:start;padding:11px 18px;font-size:13px;border-color:#d7d8de;color:var(--muted)}
.calc-reset:hover{border-color:var(--red);color:var(--red)}

.calc-result{background:#0b0b0b;color:#fff;border:1px solid #222;border-radius:16px;padding:28px;position:sticky;top:110px}
.calc-total-label{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:900;color:#b9b9c2}
.calc-total{font-size:clamp(38px,4.4vw,52px);font-weight:900;line-height:1.05;margin:6px 0 4px;letter-spacing:-1.5px}
.calc-loan{font-size:13px;color:#c9c9d2;margin-bottom:20px}
.calc-loan strong{color:#fff}

.calc-breakdown{width:100%;border-collapse:collapse;font-size:14px}
.calc-breakdown th,.calc-breakdown td{padding:10px 0;border-bottom:1px solid #232323;text-align:left;font-weight:700}
.calc-breakdown th{color:#d3d3da;font-weight:700;display:flex;align-items:center;gap:9px}
.calc-breakdown td{text-align:right;color:#fff;font-weight:900;white-space:nowrap}
.calc-breakdown tr:last-child th,.calc-breakdown tr:last-child td{border-bottom:0}
.calc-breakdown tr[hidden]{display:none}

.calc-swatch{width:11px;height:11px;border-radius:3px;flex:0 0 auto;background:#666}
.calc-swatch[data-swatch=pi]{background:var(--red)}
.calc-swatch[data-swatch=tax]{background:#e8a33d}
.calc-swatch[data-swatch=ins]{background:#3f8fd0}
.calc-swatch[data-swatch=hoa]{background:#8a7bd8}
.calc-swatch[data-swatch=pmi]{background:#5cae82}

.calc-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:18px 0;background:#232323}
.calc-bar span{display:block;height:100%}

.calc-lifetime{border-top:1px solid #232323;padding-top:16px;display:grid;gap:9px;font-size:13px;color:#c9c9d2}
.calc-lifetime div{display:flex;justify-content:space-between;gap:14px}
.calc-lifetime strong{color:#fff}

.calc-cta{width:100%;margin-top:20px}
.calc-note{margin-top:26px}

/* --- Affordability checklist --------------------------------------------- */

.check-progress{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 24px}
.check-progress-bar{flex:1 1 260px;height:10px;background:#e4e4ea;border-radius:99px;overflow:hidden}
.check-progress-bar span{display:block;height:100%;width:0;background:var(--red);border-radius:99px;transition:width .25s ease}
.check-progress-text{font-size:14px;color:var(--muted);white-space:nowrap}
.check-progress-text strong{color:var(--ink)}
.check-clear{padding:10px 16px;font-size:13px;border-color:#d7d8de;color:var(--muted)}
.check-clear:hover{border-color:var(--red);color:var(--red)}

.afford-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.check-group h3{margin:0 0 14px;font-size:18px}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.check-list label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14.5px;line-height:1.45}
.check-list input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:21px;height:21px;margin:1px 0 0;border:2px solid #cfd0d8;border-radius:5px;background:#fff;cursor:pointer;position:relative;transition:background .14s ease,border-color .14s ease}
.check-list input:hover{border-color:var(--red)}
.check-list input:checked{background:var(--red);border-color:var(--red)}
.check-list input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.check-list input:focus-visible{outline:3px solid rgba(215,25,43,.35);outline-offset:2px}
.check-list input:checked+span{color:var(--muted);text-decoration:line-through}

/* --- Glossary ------------------------------------------------------------- */

.glossary-search{display:block;margin:0 0 22px}
.glossary-search input{width:100%;border:1px solid #dcdde3;border-radius:10px;background:#fff;padding:16px 18px;font:inherit;font-weight:600}
.glossary-search input:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(215,25,43,.12)}

.glossary-list{display:grid;gap:10px}
.glossary-item{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.glossary-item[hidden]{display:none}
.glossary-item summary{padding:16px 20px;font-weight:900;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.glossary-item summary::-webkit-details-marker{display:none}
.glossary-item summary::after{content:"+";color:var(--red);font-size:22px;font-weight:900;line-height:1;flex:0 0 auto}
.glossary-item[open] summary::after{content:"\2013"}
.glossary-item summary:focus-visible{outline:3px solid rgba(215,25,43,.35);outline-offset:-3px}
.glossary-def{padding:0 20px 18px;color:var(--muted);line-height:1.6}
.glossary-def p{margin:0}
.glossary-empty{text-align:center;color:var(--muted);padding:26px;border:1px dashed var(--line);border-radius:10px;background:#fff}
.glossary-empty[hidden]{display:none}

/* --- Downloads ------------------------------------------------------------ */

.download-grid{grid-template-columns:repeat(4,1fr)}
.download-card{display:flex;flex-direction:column;align-items:flex-start}
.download-card .icon{font-size:26px;border:0;background:#fff5f6;width:52px;height:52px;border-radius:12px}
.download-card p{flex:1 1 auto;margin-bottom:18px}
.download-card .btn{font-size:13px;padding:12px 18px}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width:980px){
  .calc-shell{grid-template-columns:1fr}
  .calc-result{position:static}
  .download-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .calc-inputs{grid-template-columns:1fr;padding:22px}
  .afford-grid{grid-template-columns:1fr}
  .download-grid{grid-template-columns:1fr}
  .check-progress{gap:12px}
}

/* --- Print ----------------------------------------------------------------
   Printing is the "download" path, so only the section being printed shows.
   body carries .printing-<name> while the dialog is open.                    */

@media print{
  .topbar,.footer,.mini-hero,.calc-cta,.check-clear,.glossary-search,
  #downloads,.tool-jump,.chatbot-launcher,.chatbot-panel{display:none !important}

  body{background:#fff !important;color:#000 !important}
  .section{padding:0 0 18px !important;background:#fff !important}
  .card,.calc-inputs,.glossary-item{box-shadow:none !important;border-color:#bbb !important;break-inside:avoid}

  .calc-result{background:#fff !important;color:#000 !important;border:1px solid #bbb !important;position:static !important}
  .calc-total-label,.calc-loan,.calc-lifetime{color:#333 !important}
  .calc-breakdown th{color:#000 !important}
  .calc-breakdown td,.calc-loan strong,.calc-lifetime strong{color:#000 !important}
  .calc-breakdown th,.calc-breakdown td{border-bottom:1px solid #ddd !important}

  /* open every definition so the printed sheet is complete */
  .glossary-item[open] .glossary-def,.glossary-def{display:block !important}
  .glossary-item{break-inside:avoid}

  body.printing-calculator #affordability,
  body.printing-calculator #glossary,
  body.printing-affordability #calculator,
  body.printing-affordability #glossary,
  body.printing-glossary #calculator,
  body.printing-glossary #affordability{display:none !important}
}