/* ==========================================================================
   tools.css — Shared styles for sm.password, sm.qrcode, and future tools
   ========================================================================== */

/* ── Password generator ── */
.pw-subtitle { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 2em; }

.pw-output {
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 3px;
    padding: 1em; margin-bottom: 1.5em; min-height: 3em;
    display: flex; align-items: center; justify-content: space-between; gap: 0.8em;
}
.pw-text {
    flex: 1; font-size: 1.1rem; color: var(--text-bright); word-break: break-all;
    letter-spacing: 0.05em; user-select: all;
}
.pw-hidden .pw-text { color: transparent; text-shadow: 0 0 8px rgba(200,120,48,0.5); }
.pw-actions { display: flex; gap: 0.4em; flex-shrink: 0; }

.pw-controls { margin-bottom: 1.5em; }
.pw-row { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
.pw-label { color: var(--text-dim); font-size: 0.8rem; min-width: 8em; }
.pw-value { color: var(--info); font-size: 0.8rem; min-width: 2.5em; text-align: right; }

.pw-slider {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 4px; background: var(--border); border-radius: 2px; outline: none;
}
.pw-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--text-bright); cursor: pointer;
    box-shadow: 0 0 6px rgba(232,148,60,0.4);
}
.pw-slider::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%; border: none;
    background: var(--text-bright); cursor: pointer;
}

.pw-checks { display: flex; flex-wrap: wrap; gap: 0.6em 1.5em; margin-bottom: 1.5em; }
.pw-check {
    display: flex; align-items: center; gap: 0.4em;
    color: var(--text-dim); font-size: 0.8rem; cursor: pointer;
}
.pw-check input { accent-color: var(--text-bright); cursor: pointer; }

.pw-strength { margin-bottom: 1.5em; }
.pw-strength-bar {
    height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
    margin-top: 0.4em;
}
.pw-strength-fill { height: 100%; border-radius: 2px; transition: width 0.3s, background 0.3s; }
.pw-strength-label { font-size: 0.75rem; color: var(--text-muted); }

.pw-copied {
    color: var(--info); font-size: 0.75rem; opacity: 0;
    transition: opacity 0.3s; margin-left: 0.5em;
}
.pw-copied.show { opacity: 1; }

/* ── QR code generator ── */
.qr-subtitle { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 2em; }

.qr-input-area { margin-bottom: 1.5em; }
.qr-input-area textarea {
    width: 100%; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text);
    font-family: 'Fira Code', monospace; font-size: 0.85rem;
    padding: 0.7em; border-radius: 3px; resize: vertical; min-height: 4em;
    transition: border-color 0.2s;
}
.qr-input-area textarea:focus { outline: none; border-color: var(--text-bright); }
.qr-input-area textarea::placeholder { color: var(--text-faint); }

.qr-options { display: flex; flex-wrap: wrap; gap: 1em; margin-bottom: 1.5em; align-items: center; }
.qr-option { display: flex; align-items: center; gap: 0.5em; }
.qr-option label { color: var(--text-dim); font-size: 0.8rem; }
.qr-option select {
    background: var(--bg-surface); border: 1px solid var(--border); color: var(--text);
    font-family: 'Fira Code', monospace; font-size: 0.8rem;
    padding: 0.3em 0.5em; border-radius: 3px; cursor: pointer;
}
.qr-option select:focus { outline: none; border-color: var(--text-bright); }
.qr-option input[type="color"] {
    width: 30px; height: 24px; border: 1px solid var(--border); border-radius: 3px;
    background: none; cursor: pointer; padding: 0;
}

.qr-output {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1em;
    margin-bottom: 1.5em;
}
.qr-canvas-wrap {
    background: #fff; padding: 16px; border-radius: 4px;
    display: inline-block;
}
.qr-canvas-wrap canvas { display: block; }

.qr-actions { display: flex; gap: 0.5em; flex-wrap: wrap; }

.qr-presets { margin-bottom: 1.5em; }
.qr-presets-label { color: var(--text-dim); font-size: 0.75rem; margin-bottom: 0.5em; }
.qr-preset-btns { display: flex; flex-wrap: wrap; gap: 0.4em; }

.qr-copied {
    color: var(--info); font-size: 0.75rem; opacity: 0;
    transition: opacity 0.3s; display: block; margin-top: 0.5em;
}
.qr-copied.show { opacity: 1; }

/* ── Shared tool subtitle ── */
.tool-subtitle { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 2em; }

/* ── Mortgage calculator ── */

/* Layout */
.mortgage-container { width: 100%; }
.mortgage-table-container { overflow-x: auto; margin-bottom: 30px; }
.mortgage-table { border-collapse: collapse; min-width: 100%; }

.mortgage-table th,
.mortgage-table td {
    padding: 8px 12px; border: 1px solid var(--border);
    text-align: left; white-space: nowrap;
}
.mortgage-table th {
    background: var(--bg-surface); font-weight: 600; color: var(--text); font-size: 12px;
}
.mortgage-table th.label-col {
    background: var(--border); min-width: 120px; position: sticky; left: 0; z-index: 1;
}
.mortgage-table th.mortgage-header {
    background: rgba(232,148,60,0.2); color: var(--text-bright);
    text-align: center; min-width: 140px;
}
.mortgage-table td.label-col {
    background: var(--bg-surface); font-weight: 500; color: var(--text);
    font-size: 12px; position: sticky; left: 0; z-index: 1;
}
.mortgage-table input,
.mortgage-table select {
    width: 100%; min-width: 120px; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 4px;
    font-size: 13px; background: var(--bg-surface); color: var(--text);
}
.mortgage-table input:focus,
.mortgage-table select:focus {
    outline: none; border-color: var(--text-bright);
    box-shadow: 0 0 0 2px rgba(232,148,60,0.15);
}
.mortgage-table .remove-btn {
    background: transparent; color: var(--danger); border: 1px solid var(--danger);
    padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.mortgage-table .remove-btn:hover { background: rgba(204,68,68,0.15); }

/* Input cards row */
.mortgage-inputs {
    display: flex; flex-wrap: nowrap; gap: 15px;
    margin-bottom: 30px; overflow-x: auto; padding-bottom: 10px;
}
.mortgage-card {
    background: var(--bg-surface); border-radius: 4px; padding: 15px;
    border: 2px solid var(--border); min-width: 220px; flex-shrink: 0;
}
.mortgage-card h3 { color: var(--text-bright); margin-bottom: 12px; font-size: 16px; }

.input-group { margin-bottom: 10px; }
.input-group label {
    display: block; margin-bottom: 3px; color: var(--text-dim);
    font-size: 11px; font-weight: 500;
}
.input-group input, .input-group select {
    width: 100%; padding: 6px 8px; border: 1px solid var(--border);
    border-radius: 4px; font-size: 13px; background: var(--bg-surface); color: var(--text);
}
.input-group input:focus {
    outline: none; border-color: var(--text-bright);
    box-shadow: 0 0 0 3px rgba(232,148,60,0.1);
}

/* Info box */
.info-box {
    background: rgba(91,155,213,0.1); border-left: 4px solid var(--info);
    padding: 15px; margin-bottom: 20px; border-radius: 4px;
    font-size: 13px; line-height: 1.6;
}
.info-box strong { display: block; margin-bottom: 8px; color: var(--info); }

/* Calculate / action buttons */
.calculate-btn {
    background: var(--text); color: var(--bg); border: none;
    padding: 15px 40px; border-radius: 4px; font-size: 16px;
    font-weight: 600; cursor: pointer; width: 100%;
    margin-bottom: 30px; transition: transform 0.2s;
}
.calculate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(200,120,48,0.3);
}

/* Results tabs (hidden until calculate is run) */
.mg-tab-results { display: none; }
.mg-tab-results.mg-tab-visible { display: inline-block; }

.results-table {
    width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 13px;
}
.results-table thead { background: var(--bg-surface); }
.results-table th {
    padding: 12px 8px; text-align: left; font-weight: 600;
    color: var(--text); border-bottom: 2px solid var(--border); font-size: 12px;
}
.results-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
.results-table tbody tr:hover { background: var(--bg-surface); }

.total-row { font-weight: 600; background: rgba(91,155,213,0.1) !important; }
.fee-active { color: var(--danger); font-weight: 600; }
.fee-expired { color: var(--success); font-weight: 600; }

/* Summary panel */
.summary {
    background: rgba(91,155,213,0.1); border-left: 4px solid var(--text-bright);
    padding: 20px; margin-top: 20px; border-radius: 4px;
}
.summary h3 { color: var(--text-bright); margin-bottom: 15px; }

.summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;
}
.summary-item { background: var(--bg-surface); padding: 15px; border-radius: 4px; }
.summary-item .label { font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.summary-item .value { font-size: 20px; font-weight: 600; color: var(--text); }

/* Chart container */
.chart-container {
    background: var(--bg-surface); border-radius: 4px; padding: 30px;
    margin-bottom: 30px; border: 1px solid var(--border);
}
.chart-container h3 { color: var(--text-bright); margin-bottom: 20px; }
#ercChart { max-height: 400px; }

/* Empty state */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 14px; }
.empty-state p { margin-bottom: 15px; }

/* ── Mortgage: toolbar & config ── */
.mg-toolbar {
    display: flex; gap: 0.5em; justify-content: flex-end; margin-bottom: 1em;
}
.mg-tab-options {
    display: flex; flex-wrap: wrap; gap: 1.5em; margin-bottom: 1em;
}
.mg-config-checkbox {
    display: inline-flex; align-items: center;
    font-size: 0.85rem; color: var(--text-dim); cursor: pointer;
}
.mg-config-checkbox input {
    width: auto; margin-right: 5px; accent-color: var(--text-bright);
}

/* Config action buttons */
.mg-btn-add-mortgage {
    padding: 8px 16px; border: 1px solid var(--text); color: var(--text);
    background: transparent; border-radius: 4px; cursor: pointer;
    margin-bottom: 1em;
}
.mg-btn-save {
    padding: 8px 16px; border: 1px solid #4a9; color: #4a9;
    background: transparent; border-radius: 4px; cursor: pointer;
}
.mg-btn-load {
    padding: 8px 16px; border: 1px solid var(--info); color: var(--info);
    background: transparent; border-radius: 4px; cursor: pointer;
}
.mg-btn-clear {
    padding: 8px 16px; border: 1px solid var(--danger); color: var(--danger);
    background: transparent; border-radius: 4px; cursor: pointer;
}

/* Split config panel */
.mg-split-config {
    background: rgba(204,68,68,0.15); border-left: 4px solid var(--danger);
    padding: 15px; margin-bottom: 20px; border-radius: 4px;
}
.mg-split-hint { margin-left: 10px; font-size: 12px; color: var(--text-dim); }

/* Property purchase config */
.mg-property-config {
    background: rgba(74,153,100,0.15); border-left: 4px solid #4a9;
    padding: 15px; margin-bottom: 20px; border-radius: 4px;
}
.mg-property-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px;
}
.mg-property-grid label {
    display: block; margin-bottom: 5px; font-size: 13px;
}
.mg-property-grid input {
    width: 100%; padding: 8px; border: 1px solid var(--border);
    border-radius: 4px; background: var(--bg-surface); color: var(--text);
}

/* Disabled input */
.mg-input-disabled { background: #151210; font-weight: 600; }

/* Card with green border (remortgage) */
.mg-card-green { border: 2px solid #4a9; }

/* Checkbox inline style */
.mg-checkbox-inline { width: auto; margin-left: 10px; accent-color: var(--text-bright); }

/* Owner share narrow input */
.mg-input-narrow { width: 70px; }

/* Add property button */
.mg-add-property-btn {
    margin-top: 10px; padding: 6px 12px; border: 1px solid #4a9; color: #4a9;
    background: transparent; border-radius: 4px; cursor: pointer; font-size: 12px;
}

/* Property table header (green) */
.mg-table-header-green { background: rgba(74,153,100,0.2); color: #4a9; }

/* Remove button margin */
.mg-remove-ml { margin-left: 8px; }

/* Report buttons in toolbar */
.mg-toolbar-sep {
    display: inline-block; width: 1px; height: 20px; background: var(--text-faint);
    vertical-align: middle; margin: 0 8px;
}
.mg-btn-report-toolbar {
    background: transparent; border: 1px solid var(--text-faint); color: var(--text-muted);
    padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px;
    font-family: 'Fira Code', monospace; margin-left: 4px;
}
.mg-btn-report-toolbar:hover:not(:disabled) {
    background: var(--bg-surface); border-color: var(--text); color: var(--text);
}
.mg-btn-report-toolbar:disabled {
    opacity: 0.35; cursor: not-allowed;
}

/* Breakeven container highlight */
.mg-breakeven-highlight { border: 3px solid #4a9; }

/* Per-property analysis */
.mg-property-charts-heading { color: var(--text); margin: 30px 0 15px 0; }
.mg-property-charts-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 15px; }
.mg-property-charts-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px; margin-bottom: 30px;
}

/* Property table margin */
.mg-table-container-sm { margin-bottom: 20px; }

/* ── Mortgage: text utility classes ── */
.mg-text-good { color: #4a9; }
.mg-text-bad { color: var(--danger); }
.mg-text-info { color: var(--info); }
.mg-text-dim { color: var(--text-dim); }
.mg-text-warn { color: var(--text-dim); }
.mg-text-bright { color: var(--text-bright); }
.mg-text-base { color: var(--text); }
.mg-fw-bold { font-weight: 600; }

/* ── Mortgage: JS-generated component classes ── */

/* Banner (best month display) */
.mg-banner {
    background: rgba(232,148,60,0.15); color: var(--text-bright); padding: 20px;
    border-radius: 4px; margin-bottom: 20px; text-align: center;
    border: 1px solid var(--border);
}
.mg-banner-subtitle { font-size: 14px; opacity: 0.9; margin-bottom: 5px; }
.mg-banner-title { font-size: 32px; font-weight: 700; }
.mg-banner-detail { font-size: 14px; margin-top: 10px; }

/* Panel (bordered section) */
.mg-panel {
    background: var(--bg-surface); border-radius: 4px; padding: 15px;
    margin-bottom: 20px; border: 1px solid var(--border);
}
.mg-panel-title {
    margin: 0 0 15px 0; color: var(--text); font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* Metric grid */
.mg-metric-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px;
}
.mg-metric-label { font-size: 11px; color: var(--text-dim); }
.mg-metric-value { font-size: 18px; font-weight: 600; }

/* Metric with colored highlight background */
.mg-metric-highlight-good {
    background: rgba(74,153,100,0.15); padding: 10px;
    border-radius: 4px; margin: -10px; margin-left: 0;
}
.mg-metric-highlight-bad {
    background: rgba(204,68,68,0.15); padding: 10px;
    border-radius: 4px; margin: -10px; margin-left: 0;
}

/* Panel footer (break-even line) */
.mg-panel-footer {
    margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); font-size: 13px;
}

/* Callout boxes */
.mg-callout-good {
    background: rgba(74,153,100,0.15); border-radius: 4px; padding: 15px; margin-bottom: 20px;
}
.mg-callout-bad {
    background: rgba(204,68,68,0.15); border-radius: 4px; padding: 15px; margin-bottom: 20px;
}
.mg-callout-info {
    background: rgba(91,155,213,0.1); border-radius: 4px; padding: 15px; margin-bottom: 20px;
}
.mg-callout-content {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px;
}
.mg-callout-detail { font-size: 13px; margin-top: 5px; }
.mg-callout-aside { text-align: right; }
.mg-callout-aside-label { font-size: 12px; color: var(--text-dim); }
.mg-callout-aside-value { font-size: 24px; font-weight: 700; color: var(--text-dim); }
.mg-callout-text { font-size: 13px; }

/* Decision timeline panel */
.mg-timeline-panel {
    background: var(--bg-surface); border-radius: 4px; padding: 20px;
    margin-bottom: 20px; border: 1px solid var(--border);
}
.mg-timeline-title { color: var(--text-bright); margin: 0 0 20px 0; }

/* Large metrics row (currently paying / new / saving) */
.mg-big-metrics {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; text-align: center;
}
.mg-big-metric-label { font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.mg-big-metric-value { font-size: 28px; font-weight: 700; }
.mg-big-metric-sub { font-size: 12px; color: var(--text-dim); }

/* Property breakdown cards */
.mg-prop-card-good {
    background: rgba(74,153,100,0.15); border: 1px solid rgba(74,153,100,0.3);
    border-radius: 4px; padding: 15px;
}
.mg-prop-card-bad {
    background: rgba(204,68,68,0.15); border: 1px solid rgba(204,68,68,0.3);
    border-radius: 4px; padding: 15px;
}
.mg-prop-card-header {
    display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px;
}
.mg-prop-card-name { font-weight: 600; color: var(--text); }
.mg-prop-card-sub { font-size: 11px; color: var(--text-dim); }
.mg-prop-card-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px;
}
.mg-prop-card-footer-good {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(74,153,100,0.3);
}
.mg-prop-card-footer-bad {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(204,68,68,0.3);
}

/* Property breakdown section heading */
.mg-section-heading {
    color: var(--text); margin: 20px 0 15px 0; font-size: 14px;
}
.mg-section-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 15px; }
.mg-prop-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px; margin-bottom: 20px;
}

/* Scenario table */
.mg-scenario-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mg-scenario-table th {
    padding: 10px; text-align: left; border-bottom: 2px solid var(--border); color: var(--text);
}
.mg-scenario-table th.mg-th-right { text-align: right; }
.mg-scenario-table th.mg-th-center { text-align: center; }
.mg-scenario-table td { padding: 10px; border-bottom: 1px solid var(--border); }
.mg-scenario-table td.mg-td-right { text-align: right; }
.mg-scenario-table td.mg-td-center { text-align: center; }
.mg-scenario-table thead tr { background: var(--bg-surface); }

/* Scenario detail table (12px) */
.mg-scenario-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mg-scenario-detail-table th { padding: 10px 8px; text-align: left; }
.mg-scenario-detail-table th.mg-th-right { text-align: right; }
.mg-scenario-detail-table th.mg-th-center { text-align: center; }
.mg-scenario-detail-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
.mg-scenario-detail-table td.mg-td-right { text-align: right; }
.mg-scenario-detail-table td.mg-td-center { text-align: center; }

/* Table header colors */
.mg-th-orange { background: rgba(232,148,60,0.2); color: var(--text-bright); }
.mg-th-orange-sub {
    background: rgba(232,148,60,0.2); color: var(--text-bright);
    font-size: 11px; padding: 6px 8px;
}
.mg-th-blue { background: rgba(91,155,213,0.2); color: var(--info); }
.mg-th-blue-sub {
    background: rgba(91,155,213,0.2); color: var(--info);
    font-size: 11px; padding: 6px 8px;
}
.mg-th-erc-col { background: rgba(255,255,255,0.15); }
.mg-th-saving-col { background: rgba(255,255,255,0.05); }

/* Row backgrounds */
.mg-row-best { background: rgba(74,153,100,0.15); }
.mg-row-baseline { background: rgba(91,155,213,0.1); }
.mg-row-alt { background: rgba(255,255,255,0.03); }
.mg-row-bad { background: rgba(204,68,68,0.15); }
.mg-row-selective { background: rgba(200,120,48,0.15); }

/* Badges */
.mg-badge-best {
    background: rgba(74,153,100,0.3); color: #4a9;
    padding: 2px 8px; border-radius: 4px; font-size: 11px;
}
.mg-badge-baseline {
    background: rgba(91,155,213,0.3); color: var(--info);
    padding: 2px 6px; border-radius: 4px; font-size: 11px;
}
.mg-badge-selective {
    background: rgba(232,148,60,0.3); color: var(--text-bright);
    padding: 2px 6px; border-radius: 4px; font-size: 11px;
}
.mg-badge-termend {
    background: rgba(74,153,100,0.3); color: #4a9;
    padding: 2px 6px; border-radius: 4px; font-size: 11px;
}
.mg-badge-unaffordable {
    background: rgba(204,68,68,0.3); color: var(--danger);
    padding: 2px 6px; border-radius: 4px; font-size: 11px;
}
.mg-scenario-desc { font-size: 11px; color: var(--text-dim); }

/* Slider panel */
.mg-slider-panel {
    background: rgba(91,155,213,0.1); border-radius: 4px; padding: 15px; margin-bottom: 20px;
}
.mg-slider-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.mg-slider-row { display: flex; align-items: center; gap: 10px; }
.mg-slider-label { font-size: 12px; white-space: nowrap; color: var(--info); }
.mg-slider {
    flex: 1; height: 10px; cursor: pointer; accent-color: var(--text-bright);
}
.mg-slider-value-row { text-align: center; margin-top: 8px; }
.mg-slider-value { font-size: 18px; font-weight: 700; color: var(--info); }
.mg-slider-note { font-size: 12px; color: var(--text-dim); margin-left: 8px; }

/* Scenario explain text */
.mg-scenario-explain { font-size: 12px; color: var(--text-dim); margin-bottom: 15px; }

/* Summary metric cards */
.mg-summary-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px; margin-bottom: 20px;
}
.mg-summary-card-info {
    background: rgba(91,155,213,0.1); border-radius: 4px; padding: 15px; text-align: center;
}
.mg-summary-card-good {
    background: rgba(74,153,100,0.15); border-radius: 4px; padding: 15px; text-align: center;
}
.mg-summary-card-bad {
    background: rgba(204,68,68,0.15); border-radius: 4px; padding: 15px; text-align: center;
}
.mg-summary-card-warn {
    background: rgba(200,120,48,0.15); border-radius: 4px; padding: 15px; text-align: center;
}
.mg-summary-card-label { font-size: 11px; text-transform: uppercase; }
.mg-summary-card-value { font-size: 24px; font-weight: 700; }
.mg-summary-card-sub { font-size: 11px; color: var(--text-dim); }

/* Scenario section heading */
.mg-scenario-section-heading { margin: 20px 0 10px 0; font-size: 14px; }

/* How to read box */
.mg-how-to-read {
    background: rgba(255,255,255,0.03); border-radius: 4px; padding: 15px;
    margin-top: 15px; font-size: 12px; border: 1px solid var(--border);
}
.mg-how-to-read ul {
    margin: 10px 0 0 0; padding-left: 20px; color: var(--text);
}

/* Equity summary footer */
.mg-equity-footer {
    margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border);
    display: flex; gap: 20px; font-size: 13px; color: var(--text-dim);
}

/* PDF/BW buttons in tables */
.mg-btn-report {
    background: transparent; color: var(--text-muted); border: 1px solid var(--text-faint);
    padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.mg-btn-report-ml { margin-left: 2px; }

/* Scenario panel title (blue) */
.mg-scenario-panel-title { color: var(--info); margin: 0 0 15px 0; }

/* Overflow wrapper */
.mg-overflow-auto { overflow-x: auto; }
.mg-overflow-auto-mb { overflow-x: auto; margin-bottom: 20px; }

/* Deposit display sub */
.mg-deposit-sub { font-size: 11px; color: var(--text-dim); }

/* Table footer note */
.mg-table-note { font-size: 12px; color: var(--text-dim); margin: 15px 0 0 0; }

/* Per-property chart container */
.mg-prop-chart-container {
    grid-column: 1 / -1; background: var(--bg-surface);
    border-radius: 4px; padding: 20px; margin-bottom: 20px;
}
.mg-prop-chart-container-good { border: 2px solid #4a9; }
.mg-prop-chart-container-bad { border: 2px solid var(--danger); }
.mg-prop-chart-inner { min-height: 250px; }

/* Subheading in table headers */
.mg-th-sub { font-weight: normal; font-size: 11px; }
.mg-th-border-bottom { border-bottom: 1px solid rgba(255,255,255,0.3); }
.mg-th-border-bottom-light { border-bottom: 1px solid rgba(255,255,255,0.1); }

/* ERC cost conditional colors */
.mg-erc-high { color: var(--danger); font-weight: 600; }
.mg-erc-mid { color: var(--text-dim); font-weight: 600; }
.mg-erc-low { color: #4a9; font-weight: 600; }

/* Summary breakdown header */
.mg-breakdown-header {
    margin-top: 20px; padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.3);
}
.mg-breakdown-label { font-size: 12px; opacity: 0.9; margin-bottom: 10px; }

/* Tabs */
.mg-tabs {
    display: flex; gap: 0; margin-bottom: 1.5em;
    border-bottom: 1px solid var(--border);
}
.mg-tab {
    background: transparent; border: none; border-bottom: 2px solid transparent;
    color: var(--text-muted); font-family: 'Fira Code', monospace; font-size: 0.85rem;
    padding: 0.6em 1.2em; cursor: pointer; transition: all 0.2s;
}
.mg-tab:hover { color: var(--text-bright); }
.mg-tab-active {
    color: var(--text-bright); border-bottom-color: var(--text-bright);
}
.mg-tab-panel { display: none; }
.mg-tab-panel-active { display: block; }

/* Overpayment calculator (inline per-mortgage) */
.mg-op-results-label { font-size: 11px; color: var(--text-muted); }
.mg-op-inline-results { font-size: 12px; min-height: 1.2em; }

.mg-op-warning-inline {
    color: var(--text-bright); font-size: 11px; margin-bottom: 0.3em;
}
.mg-op-cleared-inline {
    color: #4a9; font-weight: 600;
}
.mg-op-inline-row { margin-bottom: 0.15em; }
.mg-op-inline-label { color: var(--text-muted); }
.mg-op-inline-old { color: var(--text-dim); text-decoration: line-through; }
.mg-op-inline-new { color: var(--text-bright); font-weight: 600; }

/* ── Salary sacrifice calculator ── */

.ss-container { width: 100%; }
.ss-save-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.ss-save-btn {
    padding: 6px 14px; font-size: 12px; border: 1px solid var(--border);
    background: var(--bg-surface); color: var(--text); border-radius: 4px;
    cursor: pointer;
}
.ss-save-btn:hover { background: var(--border); }
.ss-save-btn-dim { opacity: 0.5; margin-left: auto; }
.ss-click-hint { font-size: 11px; color: var(--text-dim); margin: 0 0 8px; }
.ss-settings { margin-bottom: 16px; }
.ss-settings-toggle { cursor: pointer; user-select: none; }
.ss-settings[open] .ss-settings-toggle { margin-bottom: 12px; }
.ss-results-toolbar { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 12px; }
.ss-section-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-dim); margin: 20px 0 8px;
    padding-bottom: 4px; border-bottom: 2px solid var(--border);
}
.site-main:has(.ss-container) { max-width: 1600px; }

/* Toggle row */
.ss-toggle-row {
    display: flex; align-items: center; gap: 1em; margin-bottom: 1.5em; flex-wrap: wrap;
}
.ss-toggle-label { color: var(--text-dim); font-size: 0.85rem; }
.ss-toggle-group { display: flex; gap: 0; }
.ss-toggle {
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    font-family: 'Fira Code', monospace; font-size: 0.8rem;
    padding: 0.5em 1.2em; cursor: pointer; transition: all 0.2s;
}
.ss-toggle:first-child { border-radius: 4px 0 0 4px; }
.ss-toggle:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.ss-toggle-active {
    background: rgba(232,148,60,0.2); border-color: var(--text-bright);
    color: var(--text-bright);
}

/* Input cards */
.ss-inputs {
    display: flex; flex-wrap: nowrap; gap: 15px;
    margin-bottom: 1.5em; overflow-x: auto; padding-bottom: 10px;
}
.ss-card {
    background: var(--bg-surface); border-radius: 4px; padding: 15px;
    border: 2px solid var(--border); min-width: 240px; flex: 1;
}
.ss-card h3 { color: var(--text-bright); margin-bottom: 12px; font-size: 14px; }
.ss-field-hint { display: block; font-size: 11px; color: var(--text-dim); margin-top: 3px; }

.ss-input-with-toggle {
    display: flex; gap: 0;
}
.ss-input-with-toggle input {
    flex: 1; border-radius: 4px 0 0 4px; border-right: none;
}
.ss-input-with-toggle select {
    width: 90px; border-radius: 0 4px 4px 0;
    background: var(--bg-surface); border: 1px solid var(--border); color: var(--text);
    font-family: 'Fira Code', monospace; font-size: 0.8rem; padding: 6px 4px;
}

.ss-check-label {
    display: flex; align-items: center; gap: 0.5em; cursor: pointer;
    font-size: 0.8rem; color: var(--text-dim);
}
.ss-check-label input { width: auto; accent-color: var(--text-bright); }

/* Director panel */
.ss-director-panel {
    background: rgba(91,155,213,0.08); border-left: 4px solid var(--info);
    padding: 15px; margin-bottom: 1.5em; border-radius: 4px;
}
.ss-director-panel h3 { color: var(--info); margin-bottom: 8px; font-size: 14px; }
.ss-director-hint { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 15px; line-height: 1.6; }
.ss-director-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;
}

/* Summary cards */
/* Headline summary */
.ss-headline { margin-bottom: 20px; padding: 16px; border-radius: 6px; background: var(--bg-surface); border: 1px solid var(--border); }
.ss-headline-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.ss-headline-row { display: flex; flex-wrap: wrap; gap: 24px; }
.ss-headline-stat { display: flex; flex-direction: column; gap: 2px; }
.ss-headline-num { font-size: 24px; font-weight: 700; }
.ss-headline-desc { font-size: 12px; color: var(--text-dim); }
.ss-text-warn { color: var(--warn, #c87830); }

/* Side-by-side compare cards */
.ss-compare-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.ss-compare-card { border-radius: 6px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border); }
.ss-compare-card-highlight { border-color: var(--good, #4a9964); background: rgba(74,153,100,0.08); }
.ss-compare-card-title { font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; letter-spacing: 0.5px; }
.ss-compare-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }

/* Summary cards */
.ss-summary-cards { margin-bottom: 20px; }

/* Period toggle */
.ss-period-toggle { margin-bottom: 16px; display: flex; gap: 0; }

/* Payslip preview cards */
.ss-payslips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 24px; margin-bottom: 24px; scroll-margin-top: 24px; }
.ps-card {
    border: 1px solid var(--border); border-radius: 6px; padding: 16px;
    background: var(--bg-surface); font-size: 13px;
}
.ps-card-highlight { border-color: var(--good, #4a9964); background: rgba(74,153,100,0.06); }
.ps-card-diff { border-color: var(--text-dim); border-style: dashed; background: transparent; }
.ps-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text); margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 2px solid var(--border);
}
.ps-heading {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-dim); margin-top: 12px;
    margin-bottom: 4px; min-height: 4px;
}
.ps-line {
    display: flex; justify-content: space-between; padding: 3px 0;
    color: var(--text);
}
.ps-pct { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.ps-line.ps-dim { color: var(--text-dim); }
.ps-line.ps-na { color: var(--text-dim); opacity: 0.4; text-decoration: line-through; }
.ps-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--text-dim); margin-top: 14px;
    padding: 6px 0 4px; border-top: 2px dashed var(--border);
}
.ps-line.ps-good { color: var(--good, #4a9964); }
.ps-line.ps-bad { color: var(--danger, #cc4444); }
.ps-note { font-size: 11px; color: var(--text-dim); padding: 3px 0; line-height: 1.4; }
.ps-total {
    display: flex; justify-content: space-between; padding: 6px 0 2px;
    font-weight: 600; border-top: 1px solid var(--border); margin-top: 4px;
}
.ps-total-big { font-size: 16px; padding: 8px 0 4px; border-top: 2px solid var(--border); }
.ps-total.ps-good { color: var(--good, #4a9964); }
.ps-total.ps-bad { color: var(--danger, #cc4444); }

/* Breakdown table */
.ss-breakdown { overflow-x: auto; margin-bottom: 20px; }
.ss-breakdown-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ss-breakdown-table thead { background: var(--bg-surface); }
.ss-breakdown-table th {
    padding: 10px 8px; text-align: left; font-weight: 600;
    color: var(--text); border-bottom: 2px solid var(--border); font-size: 12px;
}
.ss-breakdown-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.ss-breakdown-table tbody tr:hover { background: var(--bg-surface); }
.ss-heading-row td {
    padding: 12px 8px 6px; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim);
    border-bottom: 2px solid var(--border); background: var(--bg-surface);
}
.ss-sep-row td { padding: 4px 0; border-bottom: 2px solid var(--border); }

/* Director scenario table */
.ss-overflow-auto { overflow-x: auto; }
.ss-scenario-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ss-scenario-table th {
    padding: 10px 8px; text-align: right; border-bottom: 2px solid var(--border);
    color: var(--text); background: var(--bg-surface); font-size: 11px; white-space: nowrap;
}
.ss-scenario-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ss-scenario-table th:first-child, .ss-scenario-table td:first-child { text-align: left; }
.ss-scenario-table tbody tr:hover { background: var(--bg-surface); }
.ss-group-row th {
    padding: 4px 8px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    border-bottom: none; text-align: center;
}
.ss-group-personal { color: var(--text-bright); }
.ss-group-pension { color: var(--good, #4a9964); }
.ss-group-employer { color: var(--text-dim); }

/* Target result callout */
.ss-target-result {
    background: var(--bg-surface); border: 2px solid var(--good, #4a9964);
    border-radius: 6px; padding: 16px; margin-bottom: 16px;
}
.ss-target-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.ss-target-row { display: flex; flex-wrap: wrap; gap: 20px; }
.ss-target-stat { display: flex; flex-direction: column; gap: 2px; }
.ss-target-num { font-size: 20px; font-weight: 700; color: var(--text); }
.ss-target-desc { font-size: 11px; color: var(--text-dim); }

/* Shared utility classes */
.ss-th-right, .ss-td-right { text-align: right; }
.ss-th-highlight { background: rgba(232,148,60,0.15); }
.ss-row-best { background: rgba(74,153,100,0.15); }
.ss-row-current { background: rgba(91,155,213,0.12); }
.ss-row-selected { outline: 2px solid var(--good, #4a9964); outline-offset: -2px; }
.ss-scenario-table tbody tr[data-idx]:hover { background: rgba(91,155,213,0.08); }
.ss-badge-best {
    background: rgba(74,153,100,0.3); color: #4a9;
    padding: 2px 8px; border-radius: 4px; font-size: 10px;
}
.ss-badge-current {
    background: rgba(91,155,213,0.3); color: #5b9bd5;
    padding: 2px 8px; border-radius: 4px; font-size: 10px;
}
.ss-badge-over-cap {
    background: rgba(200,120,48,0.3); color: #c87830;
    padding: 2px 8px; border-radius: 4px; font-size: 10px;
}
.ss-row-over-cap { opacity: 0.45; }
.ss-text-good { color: #4a9; }
.ss-text-bad { color: var(--danger); }
.ss-text-dim { color: var(--text-dim); }
.ss-text-bright { color: var(--text-bright); }
.ss-fw-bold { font-weight: 600; }

/* Warnings */
.ss-warning {
    background: rgba(204,68,68,0.15); border-left: 4px solid var(--danger);
    padding: 12px 15px; margin-bottom: 10px; border-radius: 4px;
    font-size: 13px; color: var(--text);
}

/* Responsive */
@media (max-width: 1024px) {
    .ss-payslips { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ss-inputs { flex-wrap: wrap; }
    .ss-card { min-width: 100%; }
    .ss-director-grid { grid-template-columns: 1fr; }
    .ss-headline-row { flex-direction: column; gap: 12px; }
    .ss-compare-cards { grid-template-columns: 1fr; }
    .ss-payslips { grid-template-columns: 1fr; }
}