/* Mortgage scenario comparison — Maple Groove Financial.
   Scoped under .mcx. Brand tokens come from styles.css :root. Renders up to
   four scenarios (saved by the mortgage calculator into localStorage) in a
   2×2 grid of read-only quadrants. */

.mcx{max-width:1180px;margin:0 auto;font-family:'Space Mono', ui-monospace, monospace;color:var(--ink);font-size:15px}

.mcx .page-header{margin:6px 0 18px}
.mcx .page-header h1{font-family:'Bebas Neue', sans-serif;font-size:38px;font-weight:400;letter-spacing:0.04em;margin-bottom:8px}
.mcx .page-header p{font-size:13px;color:var(--ink-dim);max-width:72ch;line-height:1.6}
.mcx .page-header a{color:var(--blue)}

.mcx .cmp-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.mcx .cmp-btn{background:#07131f;border:1px solid #14344e;color:var(--blue);font-family:inherit;font-size:13px;font-weight:700;padding:10px 16px;border-radius:8px;cursor:pointer;text-decoration:none}
.mcx .cmp-btn:hover{background:#0a1c2b}
.mcx .cmp-btn--warn{background:#1a0707;border-color:#5a1f1f;color:var(--accent-glow)}

.mcx .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mcx .quad{background:#0c0c0c;border:1px solid var(--rule-2);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:11px;min-height:340px}
.mcx .quad--empty{align-items:center;justify-content:center;text-align:center;color:var(--ink-faint);border-style:dashed}
.mcx .quad--empty p{font-size:13px;line-height:1.6;max-width:34ch}

.mcx .quad-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid var(--rule-2);padding-bottom:10px}
.mcx .quad-slot{font-size:10px;color:var(--ink-faint);letter-spacing:0.18em;text-transform:uppercase}
.mcx .quad-title{font-family:'Bebas Neue', sans-serif;font-size:22px;letter-spacing:0.03em;color:var(--ink);line-height:1.05;margin-top:2px}
.mcx .quad-sub{font-size:11px;color:var(--ink-dim);margin-top:3px;line-height:1.4}
.mcx .quad-actions{display:flex;gap:8px;flex-shrink:0}
.mcx .quad-actions button{background:transparent;border:1px solid var(--rule-2);color:var(--ink-dim);font-family:inherit;font-size:11px;padding:5px 9px;border-radius:6px;cursor:pointer}
.mcx .quad-actions button:hover{border-color:var(--ink-dim);color:var(--ink)}

.mcx .quad-pay{display:flex;align-items:baseline;gap:8px}
.mcx .quad-pay .v{font-family:'Bebas Neue', sans-serif;font-size:30px;color:var(--blue);line-height:1}
.mcx .quad-pay .f{font-size:11px;color:var(--ink-dim)}

.mcx .quad-rows{display:flex;flex-direction:column}
.mcx .qrow{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--rule);font-size:12.5px}
.mcx .qrow:last-child{border-bottom:0}
.mcx .qrow span{color:var(--ink-dim)}
.mcx .qrow strong{font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.mcx .qrow strong.amber{color:var(--amber)}
.mcx .qrow strong.red{color:var(--accent-glow)}

.mcx .vchip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 10px;border-radius:5px}
.mcx .vchip.pass{background:#0c2417;color:#bbf7d0}
.mcx .vchip.tight{background:#1a1400;color:#fde68a}
.mcx .vchip.fail{background:#1a0707;color:#fca5a5}

.mcx .quad-chart{position:relative;height:108px;margin-top:auto}

.mcx .cmp-note{font-size:11px;color:var(--ink-faint);line-height:1.6;margin-top:18px;border:1px dashed var(--rule-2);border-radius:10px;padding:14px 16px}
.mcx .cmp-note strong{color:var(--ink-dim)}

@media(max-width:760px){ .mcx .cmp-grid{grid-template-columns:1fr} }