:root { --primary:#024490; --dark:#0B1B33; --accent:#B3121A; --dark-accent:#7A0C12; --bg:#F6F4EF; --card:#fff; --muted:#5b6475; --line:#dde2ea;
  --font: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --head: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--dark); font-family:var(--font); font-size:16px; line-height:1.45; }
h1, h2, h3 { font-family:var(--head); margin:0 0 .5rem; }
h2 { color:var(--primary); font-size:1.25rem; }
.proto-banner { background:#fff3cd; color:#664d03; font-size:.8rem; text-align:center; padding:.3rem .5rem; }
.app-header { display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; background:#fff; border-bottom:4px solid var(--primary); }
#pdfScope { width:auto; padding:.45rem; font-size:.8rem; }
.app-header .logo { height:52px; width:auto; }
.hdr-text { flex:1; min-width:0; } .hdr-text h1 { font-size:1.05rem; color:var(--dark); margin:0; } .hdr-text p { margin:0; font-size:.75rem; color:var(--muted); }
.tabs { display:flex; overflow-x:auto; gap:.25rem; padding:.5rem; background:var(--dark); position:sticky; top:0; z-index:4; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tabs button { flex:0 0 auto; border:0; border-radius:999px; padding:.5rem .9rem; background:transparent; color:#fff; font:600 .85rem var(--font); cursor:pointer; }
.tabs button.active { background:#fff; color:var(--primary); }
main { max-width:960px; margin:0 auto; padding:1rem; }
.tab-panel { display:none; background:var(--card); border-radius:12px; padding:1rem; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.tab-panel.active { display:block; }
.grid { display:grid; grid-template-columns:1fr; gap:.75rem; margin-bottom:1rem; }
@media (min-width:640px) { .grid { grid-template-columns:1fr 1fr; } .grid .wide { grid-column:1 / -1; } }
label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; font-weight:600; color:var(--dark); }
label.chk { flex-direction:row; align-items:flex-start; gap:.5rem; font-weight:400; }
label.chk input { margin-top:.2rem; width:1.1rem; height:1.1rem; flex:0 0 auto; }
input[type=number], input[type=email], input[type=tel], input:not([type]), select, textarea { width:100%; max-width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:8px; font:1rem var(--font); background:#fff; color:var(--dark); }
select { min-height:2.75rem; -webkit-appearance:auto; appearance:auto; text-overflow:ellipsis; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--primary); border-color:var(--primary); }
.combo { display:flex; gap:.4rem; } .combo select { width:5rem; }
.btn { border:0; border-radius:8px; padding:.65rem 1rem; font:700 .9rem var(--font); cursor:pointer; }
.btn-primary { background:var(--primary); color:#fff; } .btn-accent { background:var(--accent); color:#fff; }
.results { display:grid; gap:.5rem; }
.kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.5rem; }
.kpi div { background:var(--bg); border-left:4px solid var(--primary); border-radius:8px; padding:.6rem .75rem; }
.kpi div.hl { border-left-color:var(--accent); }
.kpi small { display:block; color:var(--muted); font-size:.75rem; } .kpi b { font-size:1.15rem; font-family:var(--head); }
.warn { background:#fdecea; color:var(--dark-accent); border-radius:8px; padding:.5rem .75rem; font-size:.9rem; }
.ok { background:#e8f3ec; color:#1d5c34; border-radius:8px; padding:.5rem .75rem; font-size:.9rem; }
.hint { color:var(--muted); font-size:.85rem; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th, td { padding:.4rem .5rem; border-bottom:1px solid var(--line); text-align:right; } th:first-child, td:first-child { text-align:left; }
th { background:var(--dark); color:#fff; position:sticky; top:0; }
.table-scroll { max-height:420px; overflow:auto; margin-top:.5rem; }
details summary { cursor:pointer; color:var(--primary); font-weight:600; margin:.75rem 0; }
.disclaimer { font-size:.75rem; color:var(--muted); border-top:1px solid var(--line); padding-top:.6rem; margin-top:1rem; }
.app-footer { text-align:center; font-size:.75rem; color:var(--muted); padding:1rem 1rem 2rem; }
.print-only { display:none; }
@media (max-width:480px) { .hdr-text p { display:none; } .app-header .logo { height:44px; } .btn { padding:.55rem .7rem; } }

/* ---------- PRINT / PDF on HDH letterhead ---------- */
@page { size: Letter; margin: 14mm 14mm 18mm; }
@media print {
  html, body { background:#fff; font-size:10.5pt; }
  .no-print { display:none !important; }
  .print-only { display:block !important; }
  .lh-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .lh-logo { height:70px; } .lh-logo-right { height:46px; }
  .lh-id { flex:1; font-size:9pt; color:var(--dark); line-height:1.3; } .lh-id strong { font-family:var(--head); font-size:12pt; color:var(--primary); }
  .lh-rule { height:4px; background:linear-gradient(90deg,var(--primary) 0 70%,var(--accent) 70% 100%); margin:8px 0 14px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #reportBody h2 { font-size:13pt; margin-top:12px; page-break-after:avoid; }
  #reportBody table { font-size:9pt; page-break-inside:avoid; margin-bottom:8px; }
  #reportBody th { position:static; background:var(--primary); color:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rep-meta { font-size:9pt; color:var(--muted); }
  .rep-disc { font-size:8pt; }
  .lh-footer { position:fixed; bottom:0; left:0; right:0; border-top:2px solid var(--primary); padding-top:4px; font-size:8pt; color:var(--dark); text-align:center; background:#fff; }
}

/* go-live: honeypot hidden from people, visible to bots */
.hp-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* Embed mode (?embed=1, inside harrisdoeshomes.ca/mortgage-calculator): the HDH site already shows its own header, logo and footer. */
.embed-only { display:none; }
html.embed .embed-only { display:inline-block; }
html.embed, html.embed body { background:var(--bg); }
html.embed .app-header .logo, html.embed .app-header .hdr-text { display:none; }
html.embed .app-header { justify-content:flex-end; flex-wrap:wrap; border-bottom-width:3px; }
html.embed .app-footer { display:none; }
.full-link { font-size:.85rem; font-weight:600; color:var(--primary); text-decoration:none; padding:.45rem .2rem; white-space:nowrap; }
.full-link:hover, .full-link:focus { text-decoration:underline; }
html.embed .full-link { order:-1; margin-right:auto; }
@media (max-width:480px) { html.embed .full-link { font-size:.8rem; } }