/* ============================================================
   JK CANADIAN MORTGAGE CALCULATOR — mortgage-calc.css
   CANONICAL SOURCE — deployed byte-identical to:
     A) jk-buyer-portal /public/mortgage-calc.css
     B) jk-website      /public/mortgage-calc.css
   Design authority: F6 brief / Portal Design Spec v10.
   No border-radius. No shadows. No gradients. 1px borders at
   rgba(26,26,26,0.5) on inputs. CAD currency only.
   ============================================================ */

.mc { font-family: 'Helvetica Neue', Arial, sans-serif; color: #1A1A1A; }
.mc * { box-sizing: border-box; border-radius: 0; }

.mc-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; }
@media (max-width: 767px) { .mc-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- inputs ---------- */
.mc-field { display: block; margin-bottom: 16px; }
.mc-label {
  display: block; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(26,26,26,0.6); margin-bottom: 6px;
}
.mc input[type="number"], .mc input[type="text"], .mc select {
  width: 100%; padding: 10px 12px; font-size: 15px;
  font-family: 'Helvetica Neue', Arial, sans-serif; color: #1A1A1A;
  background: #FFFFFF; border: 1px solid rgba(26,26,26,0.5);
  border-radius: 0; appearance: none; -webkit-appearance: none;
}
.mc input[readonly] { background: rgba(26,26,26,0.04); }
.mc input:focus, .mc select:focus { outline: 2px solid #A92D2F; outline-offset: -1px; }
.mc-dp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* sliders — flat track, square thumb */
.mc-slider { width: 100%; margin: -6px 0 18px; appearance: none; -webkit-appearance: none;
  height: 2px; background: rgba(26,26,26,0.25); }
.mc-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; background: #A92D2F; border: none; border-radius: 0; cursor: pointer; }
.mc-slider::-moz-range-thumb {
  width: 14px; height: 14px; background: #A92D2F; border: none; border-radius: 0; cursor: pointer; }

.mc-note { font-size: 12px; color: #A92D2F; margin: -8px 0 14px; }
.mc-errors { border: 1px solid #A92D2F; padding: 12px 14px; font-size: 13px;
  color: #A92D2F; margin-bottom: 20px; }
.mc-errors div + div { margin-top: 6px; }

/* ---------- outputs ---------- */
.mc-primary { border: 1px solid rgba(26,26,26,0.5); padding: 24px; margin-bottom: 28px; }
.mc-primary-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(26,26,26,0.6); }
.mc-primary-value { font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 44px; font-weight: 400; letter-spacing: -0.01em; margin: 6px 0 14px; }
.mc-breakdown .mc-row { border-bottom: 1px solid rgba(26,26,26,0.08); }

.mc-h { font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-weight: 500; font-size: 22px; margin: 28px 0 12px; letter-spacing: -0.01em; }

.mc-row { display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; font-size: 14px; border-bottom: 1px solid rgba(26,26,26,0.08); }
.mc-row-v { text-align: right; white-space: nowrap; }

/* donut */
.mc-donut-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.mc-legend { flex: 1 1 240px; min-width: 220px; }
.mc-leg { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; }
.mc-leg-swatch { width: 12px; height: 12px; flex: 0 0 auto; }
.mc-leg-label { flex: 1 1 auto; }
.mc-leg-val { color: rgba(26,26,26,0.6); white-space: nowrap; }

/* schedule */
.mc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mc-table th { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(26,26,26,0.6); font-weight: 400; text-align: left;
  padding: 8px 0; border-bottom: 1px solid rgba(26,26,26,0.5); }
.mc-table td { padding: 8px 0; border-bottom: 1px solid rgba(26,26,26,0.08); }
.mc-num { text-align: right; }
.mc-table th.mc-num { text-align: right; }
.mc-toggle { margin-top: 12px; background: none; border: 1px solid rgba(26,26,26,0.5);
  padding: 8px 16px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: opacity 150ms ease; }
.mc-toggle:hover { opacity: 0.85; }

.mc-stress { font-size: 12px; color: rgba(26,26,26,0.6); margin-top: 24px; line-height: 1.6; }
.mc-disc { font-size: 12px; font-style: italic; color: rgba(26,26,26,0.5); }