/* ── GR Calculator — scoped under .bp-root (reuses the --bp-* tokens) ────────── */
.bp-root .grc-topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--bp-navy-800); }
.bp-root .grc-topbar-left { display:flex; align-items:center; gap:12px; }
.bp-root .grc-logo { width:22px; height:22px; }
.bp-root .grc-brand { font-size:14px; font-weight:700; color:var(--bp-cream); }
.bp-root .grc-div { width:1px; height:16px; background:rgba(255,255,255,0.2); }
.bp-root .grc-crumb { font-size:13px; color:rgba(250,247,240,0.65); }
.bp-root .grc-topbar-right { display:flex; align-items:center; gap:14px; }
.bp-root .grc-rolebadge { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--bp-gold-400); padding:4px 10px; border:1px solid rgba(212,162,74,0.4); border-radius:999px; }
.bp-root .grc-avatar { width:30px; height:30px; border-radius:50%; background:var(--bp-gold-600); color:var(--bp-navy-900); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }

.bp-root .grc-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 32px; border-bottom:1px solid var(--bp-border-subtle); background:var(--bp-cream); }
.bp-root .grc-eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.18em; color:var(--bp-gold-700); }
.bp-root .grc-title { font-family:var(--bp-display); font-size:27px; font-weight:600; color:var(--bp-navy-900); margin-top:4px; }

.bp-root .grc-grid { max-width:1400px; margin:0 auto; padding:28px 32px 48px; display:grid; grid-template-columns:400px minmax(0,1fr); gap:24px; align-items:start; }
.bp-root .grc-col { display:flex; flex-direction:column; gap:18px; }

/* cards */
.bp-root .grc-card { background:var(--bp-white); border:1px solid var(--bp-border-subtle); border-radius:2px; padding:24px 26px; }
.bp-root .grc-card.grc-ref { background:var(--bp-ivory); padding:20px 24px; }
.bp-root .grc-card-label { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--bp-navy-300); margin-bottom:18px; }

/* segmented controls */
.bp-root .grc-seg-row { display:flex; gap:8px; }
.bp-root .grc-seg-row.wrap { flex-wrap:wrap; }
.bp-root .grc-seg { flex:1 1 auto; padding:9px 14px; border-radius:2px; cursor:pointer; font-family:var(--bp-body); font-size:13px; font-weight:700; letter-spacing:0.02em; text-align:center; font-variant-numeric:tabular-nums; background:var(--bp-white); color:var(--bp-navy-700); border:1px solid var(--bp-stone); transition:all 140ms var(--bp-ease); }
.bp-root .grc-seg:hover { border-color:var(--bp-gold-400); }
.bp-root .grc-seg.active { background:var(--bp-navy-800); color:var(--bp-gold-300); border-color:var(--bp-navy-800); }

/* fields + inputs */
.bp-root .grc-field { margin-bottom:16px; }
.bp-root .grc-field-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.bp-root .grc-field-label { display:block; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--bp-navy-300); margin-bottom:7px; }
.bp-root .grc-hint { font-size:11px; color:var(--bp-muted); }
.bp-root .grc-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:16px; }
.bp-root .grc-two .grc-field { margin-bottom:0; }
.bp-root .grc-addon { display:flex; align-items:stretch; }
.bp-root .grc-addon-pre, .bp-root .grc-addon-post { display:flex; align-items:center; padding:0 12px; background:var(--bp-bone); border:1px solid var(--bp-stone); font-size:14px; font-weight:700; color:var(--bp-navy-700); }
.bp-root .grc-addon-pre { border-right:none; border-radius:2px 0 0 2px; }
.bp-root .grc-addon-post { border-left:none; border-radius:0 2px 2px 0; }
.bp-root .grc-input { flex:1; min-width:0; padding:12px 14px; border:1px solid var(--bp-stone); font-family:var(--bp-body); font-size:17px; font-weight:600; color:var(--bp-navy-900); background:var(--bp-white); box-sizing:border-box; text-align:right; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.bp-root .grc-addon-pre + .grc-input { border-radius:0 2px 2px 0; }
.bp-root .grc-input + .grc-addon-post { }
.bp-root .grc-addon > .grc-input:not(:last-child) { border-right:none; border-radius:2px 0 0 2px; }
.bp-root .grc-input::-webkit-outer-spin-button, .bp-root .grc-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bp-root .grc-input:focus { border-color:var(--bp-gold-600); box-shadow:0 0 0 3px rgba(184,137,58,0.15); outline:none; }

/* iFast AUTO card */
.bp-root .grc-auto { background:var(--bp-ivory); border:1px solid var(--bp-border-subtle); border-radius:2px; padding:14px 16px; margin-bottom:16px; }
.bp-root .grc-auto-head { display:flex; align-items:center; gap:8px; }
.bp-root .grc-auto-val { font-family:var(--bp-display); font-size:22px; color:var(--bp-navy-900); font-variant-numeric:tabular-nums; }
.bp-root .grc-auto-note { font-size:11.5px; line-height:1.55; color:var(--bp-muted); margin-top:6px; }
.bp-root .grc-autobadge { font-size:9px; font-weight:800; letter-spacing:0.08em; color:var(--bp-gold-700); background:var(--bp-gold-100); padding:2px 5px; border-radius:2px; }

/* BD row + custom */
.bp-root .grc-bd-row { display:flex; gap:8px; align-items:stretch; }
.bp-root .grc-bd-wrap { display:flex; align-items:stretch; border-radius:2px; cursor:text; border:1px solid var(--bp-stone); background:var(--bp-white); transition:all 140ms var(--bp-ease); }
.bp-root .grc-bd-wrap.active { border-color:var(--bp-navy-800); background:var(--bp-gold-100); }
.bp-root .grc-bd-custom { width:64px; min-width:0; padding:9px 6px 9px 10px; border:none; background:transparent; font-family:var(--bp-body); font-size:13px; font-weight:700; color:var(--bp-navy-900); box-sizing:border-box; text-align:right; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.bp-root .grc-bd-custom:focus { outline:none; }
.bp-root .grc-bd-custom::-webkit-outer-spin-button, .bp-root .grc-bd-custom::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bp-root .grc-bd-custom-pct { display:flex; align-items:center; padding-right:10px; font-size:12px; font-weight:700; color:var(--bp-navy-300); }

.bp-root .grc-band-note { font-size:11.5px; color:var(--bp-muted); margin-top:8px; line-height:1.55; }

/* banding reference */
.bp-root .grc-ref-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--bp-border-subtle); font-size:12.5px; color:var(--bp-graphite); }
.bp-root .grc-ref-row.last { border-bottom:none; }
.bp-root .grc-ref-row b { font-weight:700; color:var(--bp-navy-900); }

/* results — KPI strip */
.bp-root .grc-kpis { display:grid; gap:14px; }
.bp-root .grc-kpi { background:var(--bp-white); border:1px solid var(--bp-border-subtle); border-radius:2px; padding:20px 24px; }
.bp-root .grc-kpi.navy { background:var(--bp-navy-800); border-color:var(--bp-navy-800); }
.bp-root .grc-kpi-head { display:flex; align-items:center; gap:8px; }
.bp-root .grc-kpi-label { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; color:var(--bp-navy-300); }
.bp-root .grc-kpi-label.gold { color:var(--bp-gold-400); }
.bp-root .grc-kpi-val { font-family:var(--bp-display); font-size:32px; color:var(--bp-navy-900); margin-top:5px; font-variant-numeric:tabular-nums; }
.bp-root .grc-kpi-val.cream { color:var(--bp-cream); }
.bp-root .grc-kpi-val.gold { color:var(--bp-gold-700); }
.bp-root .grc-kpi-sub { font-size:12px; color:var(--bp-muted); margin-top:3px; }
.bp-root .grc-kpi-sub.dim { color:rgba(250,247,240,0.65); }

/* distribution bar */
.bp-root .grc-bar { display:flex; height:26px; border-radius:999px; overflow:hidden; background:var(--bp-ivory); }
.bp-root .grc-bar > div { transition:width 240ms var(--bp-ease); }
.bp-root .grc-legend { display:flex; flex-wrap:wrap; gap:18px; margin-top:12px; font-size:12px; color:var(--bp-graphite); }
.bp-root .grc-legend span { display:inline-flex; align-items:center; gap:6px; }
.bp-root .grc-legend i { width:10px; height:10px; border-radius:2px; }

/* breakdown table */
.bp-root .grc-table-wrap { border:1px solid var(--bp-border-default); border-radius:2px; overflow-x:auto; background:var(--bp-white); }
.bp-root .grc-trow { display:grid; align-items:center; min-width:640px; }
.bp-root .grc-thead { background:var(--bp-navy-800); }
.bp-root .grc-th { padding:12px 14px; text-align:left; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; color:rgba(250,247,240,0.6); }
.bp-root .grc-th:first-child { padding-left:20px; }
.bp-root .grc-th.r { text-align:right; }
.bp-root .grc-th.amount { color:var(--bp-gold-400); }
.bp-root .grc-trow:not(.grc-thead):not(.grc-total) { border-top:1px solid var(--bp-border-subtle); }
.bp-root .grc-tier { padding:13px 20px; }
.bp-root .grc-tier-name { font-size:14px; font-weight:600; color:var(--bp-navy-800); }
.bp-root .grc-tier-note { font-size:11.5px; color:var(--bp-muted); margin-top:1px; }
.bp-root .grc-cell { padding:13px 14px; text-align:right; font-size:13px; color:var(--bp-graphite); font-variant-numeric:tabular-nums; }
.bp-root .grc-cell.amount { font-size:15px; font-weight:700; color:var(--bp-navy-900); }
.bp-root .grc-cell.b { font-weight:700; color:var(--bp-navy-900); }
.bp-root .grc-total { border-top:2px solid var(--bp-navy-800); background:var(--bp-bone); }
.bp-root .grc-total-lbl { padding:14px 20px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--bp-navy-800); }
.bp-root .grc-total-amt { padding:14px 14px; text-align:right; font-family:var(--bp-display); font-size:20px; font-weight:600; color:var(--bp-navy-900); }

/* input text VISIBILITY — beat the portal's global dark-theme input rules */
.bp-root .grc-input, .bp-root .grc-bd-custom { -webkit-text-fill-color:var(--bp-navy-900); }
.bp-root .grc-input:focus, .bp-root .grc-bd-custom:focus { color:var(--bp-navy-900) !important; -webkit-text-fill-color:var(--bp-navy-900) !important; background-color:var(--bp-white) !important; }
.bp-root .grc-bd-wrap.active .grc-bd-custom:focus { background-color:transparent !important; }

@media (max-width:1000px) {
  .bp-root .grc-grid { grid-template-columns:1fr; }
}