/* Build with Baker - Mortgage / Affordability Calculator
   Tool-specific styles. All selectors scoped under .mc to avoid clashing with
   site components (the site has its own .card, .row, etc.).
   CSP-safe: no inline styles in HTML/JS; everything lives here. */

.mc{
  --c-primary: var(--color-primary, #2B4A8B);
  --c-primary-dk: var(--color-primary-dk, #243F76);
  --c-accent: var(--color-primary, #2B4A8B);   /* focus ring uses indigo; BwB has no gold accent */
  --c-ink: var(--color-text, #0F1A2E);
  --c-muted: var(--color-text-muted, #445063);
  --c-line: var(--color-border, #E1E6EE);
  --c-card: var(--color-card, #ffffff);
  --c-field: #ffffff;
  --c-on: var(--color-on-primary, #ffffff);
  --ok-bg:#d7efe0; --ok-tx:#13623c; --ok-bar:#1f9d55;
  --tight-bg:#f6ecc4; --tight-tx:#6b5200; --tight-bar:#caa033;
  --high-bg:#f4d4d4; --high-tx:#8a2b2b; --high-bar:#cf4040;
  --save-bg:#d9eeea; --save-tx:#0c5d54;
  --radius: var(--radius-lg, 14px);
}

.mc .mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
@media(max-width:760px){ .mc .mc-grid{grid-template-columns:1fr;} }

.mc .card{
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-md, 0 2px 10px rgba(20,30,50,.08));overflow:hidden;
}
.mc .card + .card{margin-top:20px;}
.mc form.mc-grid + .card{margin-top:20px;}
.mc h2.bar{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--c-on);background:var(--c-primary);margin:0 -20px 16px;padding:11px 20px;
  display:flex;align-items:center;gap:8px;
}
.mc h2.bar:first-child{margin-top:-18px;}
.mc .bar-mt{margin-top:20px;}

@media(min-width:761px){ .mc .results{position:sticky;top:16px;} }

.mc fieldset{border:none;margin:0;padding:0;}
.mc fieldset + fieldset{margin-top:16px;border-top:1px solid var(--c-line);padding-top:6px;}
.mc legend{
  padding:0 0 6px;font-weight:800;font-size:13px;color:var(--c-primary);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;
  border-bottom:2px solid var(--c-line);width:100%;
}
.mc legend.soft{text-transform:none;letter-spacing:0;font-weight:600;color:var(--c-muted);font-size:12px;}
.mc label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px;}
.mc fieldset > label:first-of-type{margin-top:0;}
.mc .hint{font-weight:400;color:var(--c-muted);font-size:12px;}
.mc input[type=number]{
  width:100%;padding:9px 10px;border:1px solid var(--c-line);border-radius:8px;
  font-size:15px;background:var(--c-field);color:var(--c-ink);min-height:24px;font-family:inherit;
}
.mc input[type=range]{width:100%;min-height:24px;accent-color:var(--c-primary);}
.mc input:focus-visible,.mc summary:focus-visible,.mc button:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px;}

.mc .dp-row{display:flex;gap:8px;}
.mc .dp-row #down{flex:1;}
.mc .dp-row #downP{max-width:92px;}
.mc .qrow{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;}
.mc .qbtn{
  background:var(--c-field);border:1px solid var(--c-line);border-radius:6px;padding:5px 10px;
  font-size:12px;font-weight:700;cursor:pointer;color:var(--c-primary);min-height:24px;font-family:inherit;
}
.mc .qbtn:hover{border-color:var(--c-primary);}

.mc .help{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  border:1.5px solid currentColor;background:transparent;color:var(--c-on);font-size:12px;font-weight:800;
  cursor:pointer;line-height:1;padding:0;flex:none;font-family:inherit;
}
.mc .help.dark{color:var(--c-primary);}

.mc .row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--c-line);font-size:14px;gap:10px;}
.mc .row:last-child{border-bottom:none;}
.mc .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.mc output.v{display:inline;}

.mc .big{font-size:30px;font-weight:800;color:var(--c-primary);font-variant-numeric:tabular-nums;margin:0 0 6px;}
.mc .big small{font-size:14px;font-weight:600;color:var(--c-muted);}

.mc .donut-wrap{display:flex;align-items:center;gap:16px;margin:4px 0 14px;flex-wrap:wrap;}
.mc .legend{list-style:none;margin:0;padding:0;font-size:12.5px;min-width:160px;flex:1;}
.mc .legend li{display:flex;align-items:center;gap:7px;padding:3px 0;}
.mc .legend .sw{flex:none;line-height:0;}
.mc .legend .lv{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;padding-left:10px;}

.mc .gauge{margin:14px 0;}
.mc .gauge .top{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:5px;gap:10px;}
.mc .bartrack{height:12px;border-radius:6px;background:var(--c-line);overflow:hidden;}
.mc .bartrack .fill{height:100%;border-radius:6px;}
.mc .pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;}
.mc .pg{background:var(--ok-bg);color:var(--ok-tx);}
.mc .pa{background:var(--tight-bg);color:var(--tight-tx);}
.mc .pr{background:var(--high-bg);color:var(--high-tx);}
.mc .note{font-size:12px;color:var(--c-muted);margin-top:6px;}
.mc .chart-mt{margin-top:12px;}

.mc .verdict{padding:12px 14px;border-radius:10px;font-size:14px;font-weight:600;margin-top:4px;border:1px solid transparent;}
.mc .vg{background:var(--ok-bg);color:var(--ok-tx);}
.mc .va{background:var(--tight-bg);color:var(--tight-tx);}
.mc .vr{background:var(--high-bg);color:var(--high-tx);}
.mc .save{background:var(--save-bg);color:var(--save-tx);}
.mc .verdict-mt{margin-top:10px;}

.mc details{margin-top:14px;border-top:1px solid var(--c-line);padding-top:10px;}
.mc summary{font-size:13px;font-weight:600;cursor:pointer;color:var(--c-primary);}
.mc button.link{background:none;border:none;color:var(--c-primary);font-size:12px;text-decoration:underline;cursor:pointer;padding:0;margin-top:4px;font-family:inherit;}

.mc .tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px;}
.mc .reset-link{background:none;border:none;color:var(--c-muted);font-size:13px;text-decoration:underline;cursor:pointer;padding:0;font-family:inherit;}

/* popover explainers */
.mc-pop{
  margin:auto;max-width:330px;border:1px solid var(--color-border,#cfc9bd);border-radius:10px;padding:14px 16px;
  background:#fff;color:var(--color-text,#1a2430);box-shadow:0 10px 34px rgba(20,30,50,.28);
  font-size:13px;line-height:1.5;font-family:var(--font-sans, system-ui, sans-serif);
}
.mc-pop h3{margin:0 0 6px;font-size:14px;color:var(--color-primary,#2B4A8B);}
.mc-pop .close{margin-top:10px;background:var(--color-primary,#2B4A8B);color:var(--color-on-primary,#f5f3ec);border:none;border-radius:6px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;}
.mc-pop::backdrop{background:rgba(20,30,50,.20);}
.mc-pop{opacity:0;transform:translateY(-6px);transition:opacity .18s, transform .18s, overlay .18s allow-discrete, display .18s allow-discrete;}
.mc-pop:popover-open{opacity:1;transform:translateY(0);}
@starting-style{ .mc-pop:popover-open{opacity:0;transform:translateY(-6px);} }

/* first-visit onboarding dialog */
.mc-onboard{
  border:none;border-radius:14px;padding:0;max-width:420px;width:calc(100% - 32px);
  margin:auto;inset:0;max-height:calc(100dvh - 32px);overflow:auto;
  background:var(--color-card,#f1eee5);color:var(--color-text,#1a2430);
  box-shadow:0 20px 60px rgba(20,30,50,.4);font-family:var(--font-sans, system-ui, sans-serif);
}
.mc-onboard .ob-head{position:sticky;top:0;}
.mc-onboard::backdrop{background:rgba(20,30,50,.45);}
.mc-onboard .ob-head{background:var(--color-primary,#2B4A8B);color:var(--color-on-primary,#f5f3ec);padding:16px 22px;border-radius:14px 14px 0 0;}
.mc-onboard .ob-head h2{margin:0;font-size:17px;color:var(--color-on-primary,#fff);}
.mc-onboard .ob-head p{margin:6px 0 0;font-size:13px;opacity:.92;color:var(--color-on-primary,#fff);}
.mc-onboard form{padding:18px 22px 22px;}
.mc-onboard label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px;}
.mc-onboard label:first-of-type{margin-top:0;}
.mc-onboard input{width:100%;padding:9px 10px;border:1px solid var(--color-border,#cfc9bd);border-radius:8px;font-size:15px;background:#fff;color:inherit;font-family:inherit;}
.mc-onboard .ob-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
.mc-onboard .ob-skip{background:none;border:none;color:var(--color-text-muted,#526070);text-decoration:underline;cursor:pointer;font-size:13px;font-family:inherit;}
.mc-onboard .ob-go{background:var(--color-primary,#2B4A8B);color:var(--color-on-primary,#f5f3ec);border:none;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}

@media(max-width:760px){
  .mc-onboard{
    width:100%;max-width:none;margin:auto auto 0;inset:auto 0 0 0;
    border-radius:16px 16px 0 0;max-height:90dvh;
  }
  .mc-onboard .ob-head{border-radius:16px 16px 0 0;}
  .mc-onboard form{padding:16px 18px calc(18px + env(safe-area-inset-bottom));}
  .mc-onboard .ob-actions{flex-direction:column-reverse;gap:8px;margin-top:20px;}
  .mc-onboard .ob-skip,.mc-onboard .ob-go{width:100%;text-align:center;padding:12px;font-size:15px;}
  .mc-onboard .ob-skip{padding:10px;}
}

@media (prefers-reduced-motion: reduce){ .mc-pop{transition:none;} }

/* print */
@media print{
  .site-nav, .site-footer, .page-hero, .skip-link,
  .mc .tool-actions, .mc input[type=range], .mc .qrow, .mc summary, .mc .help{display:none!important;}
  .mc .results{position:static!important;}
  .mc .card{box-shadow:none;border:1px solid #bbb;break-inside:avoid;}
  .mc h2.bar{ -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .mc details{display:block;}
}