/* Yearly Budget Planner, builds on fair-share.css (loaded alongside). */

.yb-section { margin-bottom: var(--space-8, 32px); }
.yb-section h3 { margin-bottom: var(--space-2, 8px); color: var(--text-primary); }
.yb-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); flex-wrap: wrap; margin-bottom: var(--space-4, 16px); }
.yb-section-head h3 { margin-bottom: 0; }
.yb-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6, 24px); }
.yb-hint { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 var(--space-4, 16px); }

/* Chips (mode + chart view) */
.yb-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.yb-chip {
    border: 1px solid var(--border-light); background: var(--background); color: var(--text-secondary);
    border-radius: 999px; padding: 6px 14px; font-size: 0.875rem; cursor: pointer; transition: all 0.15s ease;
}
.yb-chip.active { background: var(--primary-fill); border-color: var(--primary); color: var(--primary-on); }

/* People */
.yb-people { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.yb-person-row { display: grid; grid-template-columns: 12px 1fr 180px; gap: var(--space-3, 12px); align-items: center; }
.yb-currency { display: flex; align-items: center; gap: var(--space-3, 12px); font-size: 0.875rem; color: var(--text-secondary); margin-top: var(--space-2, 8px); }
.yb-currency select { width: auto; }

/* Rows */
.yb-rows { display: flex; flex-direction: column; gap: var(--space-3, 12px); margin-bottom: var(--space-4, 16px); }
.yb-row { display: grid; grid-template-columns: 1fr 160px auto; gap: var(--space-3, 12px); align-items: center; }
.yb-row-yearly { grid-template-columns: 1fr 160px 150px auto; }
.yb-single { max-width: 260px; }

/* Swatches: entities and series always take --series-N, never --primary */
.yb-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; vertical-align: -1px; margin-right: 6px; }
.yb-person-1 { background: var(--series-5); }
.yb-person-2 { background: var(--series-6); }
.yb-seg-fixed { fill: var(--series-1); background: var(--series-1); }
.yb-seg-yearly { fill: var(--series-2); background: var(--series-2); }
.yb-seg-savings { fill: var(--series-3); background: var(--series-3); }
.yb-swatch-line { height: 0; border-top: 2px dashed var(--text-primary); border-radius: 0; vertical-align: 3px; }

/* Result: stat tiles */
.yb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4, 16px); margin-bottom: var(--space-6, 24px); }
.yb-stat { padding: var(--space-4, 16px); border-radius: 12px; background: var(--background); border: 1px solid transparent; display: flex; flex-direction: column; gap: 4px; }
.yb-stat-hero { border-color: var(--primary); }
.yb-stat-warn { border-color: var(--warning); background: var(--warning-light); }
.yb-stat-label { font-size: 0.8125rem; color: var(--text-secondary); }
.yb-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.yb-stat-hint { font-size: 0.75rem; color: var(--text-secondary); }
.yb-neg { color: var(--error-text); }
.yb-muted { color: var(--text-secondary); }

.yb-alert { display: flex; gap: 10px; align-items: flex-start; padding: var(--space-3, 12px) var(--space-4, 16px); border-radius: 12px; background: var(--warning-light); color: var(--text-primary); margin-bottom: var(--space-6, 24px); font-size: 0.9375rem; }
.yb-warn-icon { color: var(--warning-text); flex-shrink: 0; vertical-align: -3px; }

/* Chart */
.yb-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); flex-wrap: wrap; margin-bottom: var(--space-3, 12px); }
.yb-chart-head h3 { margin: 0; font-size: 1.0625rem; }
.yb-chart { position: relative; width: 100%; }
.yb-chart svg { width: 100%; height: auto; display: block; }
.yb-chart svg text { font-family: inherit; }
.yb-grid { stroke: var(--border-light); stroke-width: 1; }
.yb-baseline { stroke: var(--border-light); stroke-width: 1; }
.yb-axis { fill: var(--text-secondary); font-size: 11px; font-family: inherit; }
.yb-axis-deficit { fill: var(--error-text); font-weight: 600; }
.yb-direct { font-size: 11px; font-weight: 600; font-family: inherit; fill: var(--text-primary); }
.yb-direct-deficit { fill: var(--error-text); }
.yb-income { stroke: var(--text-primary); stroke-width: 2; stroke-dasharray: 6 4; }
.yb-income-label { fill: var(--text-primary); font-weight: 600; }
.yb-hit { fill: transparent; cursor: pointer; outline: none; }
.yb-hit:hover, .yb-hit:focus-visible { fill: var(--text-primary); fill-opacity: 0.06; }
.yb-tooltip {
    position: absolute; z-index: 5; pointer-events: none; min-width: 200px;
    background: var(--surface); border: 1px solid var(--border-light); border-radius: 10px; padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); font-size: 0.8125rem; color: var(--text-primary);
    display: flex; flex-direction: column; gap: 4px;
}
.yb-tooltip[hidden] { display: none; }
.yb-tooltip strong { margin-bottom: 2px; }
.yb-tooltip > span { display: flex; align-items: center; gap: 6px; }
.yb-tooltip > span b { margin-left: auto; font-weight: 600; }
.yb-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: var(--space-3, 12px) 0 var(--space-2, 8px); font-size: 0.8125rem; color: var(--text-secondary); }
.yb-legend li { display: flex; align-items: center; }
.yb-deficit-note { font-size: 0.9375rem; color: var(--text-primary); margin: 0 0 var(--space-6, 24px); }
.yb-deficit-note .yb-warn-icon { color: var(--error-text); display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* Partners */
.yb-partners { margin-bottom: var(--space-6, 24px); }
.yb-partners h3 { margin-bottom: var(--space-2, 8px); }
.yb-partner-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4, 16px); margin-bottom: var(--space-3, 12px); }
.yb-partner { padding: var(--space-4, 16px); border-radius: 12px; border: 1px solid var(--border-light); background: var(--background); }
.yb-partner-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3, 12px); }
.yb-partner-head .yb-muted { margin-left: auto; font-size: 0.8125rem; }
.yb-partner-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border-light); font-size: 0.9375rem; }

/* Table view */
.yb-table-wrap { overflow-x: auto; margin-bottom: var(--space-6, 24px); }
.yb-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 640px; }
.yb-table th, .yb-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); text-align: right; white-space: nowrap; }
.yb-table th:first-child, .yb-table td:first-child { text-align: left; }
.yb-table th { color: var(--text-secondary); font-weight: 600; font-size: 0.8125rem; }
.yb-table .yb-row-deficit td:first-child { color: var(--error-text); font-weight: 600; }
.yb-table .yb-total td { font-weight: 700; border-top: 2px solid var(--border-light); }

/* Inline CTA after the plan */
.yb-cta { padding: var(--space-5, 20px); border-radius: 12px; background: var(--primary-light); }
.yb-cta h3 { margin-bottom: var(--space-2, 8px); }
.yb-cta p { color: var(--text-secondary); margin-bottom: var(--space-4, 16px); font-size: 0.9375rem; }

/* Mobile */
@media (max-width: 720px) {
    .yb-stats { grid-template-columns: 1fr 1fr; }
    .yb-section-grid, .yb-partner-cards { grid-template-columns: 1fr; }
    .yb-person-row { grid-template-columns: 12px 1fr 140px; }
    .yb-row { grid-template-columns: 1fr auto; }
    .yb-row .form-input:first-child { grid-column: 1 / -1; }
    .yb-row-yearly { grid-template-columns: 1fr 1fr auto; }
    .yb-row-yearly .form-input:first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
    .yb-stats { grid-template-columns: 1fr; }
    .yb-stat-value { font-size: 1.25rem; }
}