/* 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: var(--color-card, #ffffff);
  --c-on: var(--color-on-primary, #ffffff);
  /* Bars and headers hold white text, so they take the solid indigo, not the
     readable one - see the note on --color-primary-solid in styles.css. */
  --c-primary-solid: var(--color-primary-solid, #2B4A8B);
  /* Chart palette. It lives in CSS so the SVG can inherit it; the JS emits
     classes and no colour attributes. */
  --c-area: rgba(43,74,139,.14);
  --c-s1:#2B4A8B; --c-s2:#5a7cc0; --c-s3:#2E7D5B; --c-s4:#445063;
  --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-solid);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);}
/* Neutral pill: the ratio is undefined, not good and not bad. Used when income is blank. */
.mc .pn{background:var(--c-line);color:var(--c-muted);}
.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:var(--color-card,#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-solid,#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-solid,#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);}
/* The dark solid indigo has less headroom than the light one: 92% white on it
   measures 4.40:1. Full strength for that header line in dark mode only. */
html[data-theme="dark"] .mc-onboard .ob-head p{opacity:1;}
.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:var(--color-card,#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-solid,#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;} }

/* Chart colours are applied here rather than as SVG fill/stroke attributes.
   Presentation attributes lose to CSS, and the chart is rebuilt on every input
   change, so styling it from the sheet is the only way one drawing serves both
   themes. The JS emits classes and no colours. */
.mc .mc-gridline{stroke:var(--c-line);stroke-width:1;}
.mc .mc-axis{fill:var(--c-muted);}
.mc .mc-marker{stroke:var(--c-muted);}
.mc .mc-line{stroke:var(--c-primary);fill:none;}
.mc .mc-area{fill:var(--c-area);}
.mc .mc-hole{fill:var(--c-card);}
.mc .mc-s1{fill:var(--c-s1);} .mc .mc-s2{fill:var(--c-s2);}
.mc .mc-s3{fill:var(--c-s3);} .mc .mc-s4{fill:var(--c-s4);}

/* ============================================================
   Dark theme
   This sheet carried no data-theme rules, so every hardcoded light value below
   stayed light on a navy page - the verdict panels rendered as pale pink and
   cream cards, and the chart drew near-white gridlines over a dark surface.
   ============================================================ */
html[data-theme="dark"] .mc{
  --c-area: rgba(110,144,212,.16);
  /* Slice fills need 3:1 against the card they sit on, which the light set
     (deep indigo, slate) cannot give on #1A2236. */
  --c-s1:#6E90D4; --c-s2:#9DB6E8; --c-s3:#5FC18E; --c-s4:#B6BFD0;
  /* Status panels: dark tints carrying light ink, lowest measured 8.3:1. */
  --ok-bg:#12301F;    --ok-tx:#7FD9A6;    --ok-bar:#3FBF77;
  --tight-bg:#332B10; --tight-tx:#E3C566; --tight-bar:#C9A23A;
  --high-bg:#3A1A1A;  --high-tx:#F0A3A3;  --high-bar:#E06B6B;
  --save-bg:#0F2E2A;  --save-tx:#7FD6C8;
}

/* 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;}
}