/* ==========================================================================
   charts.css — Chart containers, toggle buttons, period buttons,
                alloc bar styles, CD ladder, scenario row, platform tabs
   ========================================================================== */

/* Period filter button group — organic fluid */
.period-btns {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.period-btn {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.period-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(139, 92, 246, 0.08);
}

.period-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Chart line toggle pills — organic fluid */
.chart-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.chart-toggle-btn {
    padding: var(--space-xs) var(--space-sm);
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.chart-toggle-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.chart-toggle-btn.active {
    background: rgba(139,92,246,0.18);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

/* Scenario selector row — organic fluid */
.scenario-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

.scenario-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.scenario-btn {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.scenario-btn:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }
.scenario-btn.active { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }

/* Header: allocation mini bars — organic */
.alloc-bar-track {
    display: flex;
    height: 4px;
    border-radius: 9999px;
    overflow: hidden;
    margin-top: var(--space-xs);
    gap: 1px;
}

.alloc-bar-seg {
    border-radius: 9999px;
    transition: width 0.4s ease;
}

/* CD annual yield badge — fluid */
.cd-yield-badge {
    flex-shrink: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-success);
    white-space: nowrap;
    text-align: right;
}

.cd-yield-unit {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 1px;
}

/* CD Ladder Chart */
#cd-ladder-card {
    margin-top: 0;
}
#cd-ladder-container canvas {
    width: 100% !important;
}

/* Platform Fee Calculator Tabs — organic fluid */
.platform-tabs {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.platform-tab-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: var(--font-heading);
}
.platform-tab-btn:hover {
    background: rgba(139,92,246,0.12);
    color: #d1d5db;
    border-color: rgba(139,92,246,0.3);
}
.platform-tab-btn.active {
    background: rgba(139,92,246,0.2);
    border-color: rgba(139,92,246,0.5);
    color: #c4b5fd;
}
.platform-calc-panel {
    animation: panelFadeIn 0.15s ease;
}
@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stats list — organic */
.stats-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: rgba(255,255,255,0.02);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.stat-item:hover {
    background: rgba(255,255,255,0.04);
}

.stat-name {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.stat-val {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
}

/* Chaos mode (random life events) — toggle buttons + event timeline.
   Kept separate from .scenario-btn so applyScenario()'s active-state sync
   (keyed on data-offset) never touches them. */
.chaos-btns {
    display: inline-flex;
    gap: var(--space-xs);
    margin-left: auto;
}

.chaos-btn,
.chaos-reroll-btn {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    transition: var(--transition-fast);
    white-space: nowrap;
}

.chaos-btn:hover,
.chaos-reroll-btn:hover { border-color: #ec4899; color: #f9a8d4; }
.chaos-btn.active {
    background: rgba(236,72,153,0.16);
    border-color: #ec4899;
    color: #f9a8d4;
}

.chaos-timeline {
    margin-top: var(--space-md);
    font-size: var(--text-xs);
}

.chaos-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    align-items: center;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.chaos-details > summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
}
.chaos-details > summary::-webkit-details-marker { display: none; }
.chaos-details > summary::after { content: '▾ details'; color: var(--color-primary-hover); }
.chaos-details[open] > summary::after { content: '▴ hide'; }
.chaos-details[open] > summary { margin-bottom: var(--space-sm); }

.chaos-count-neg { color: var(--color-danger); font-weight: 600; }
.chaos-count-pos { color: var(--color-success); font-weight: 600; }

.chaos-chip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: var(--space-xs);
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.chaos-chip {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: 6px 8px;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--chaos-cat, #9ca3af);
    background: rgba(255,255,255,0.02);
}

.chaos-chip-icon { font-size: 16px; line-height: 1.2; }
.chaos-chip-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.chaos-chip-title { color: var(--text-main, #f3f4f6); font-weight: 600; }
.chaos-chip-term {
    font-weight: 500;
    font-size: 10px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
.chaos-chip-meta { color: var(--text-muted); }
.chaos-chip.is-down .chaos-chip-impact { color: var(--color-danger); }
.chaos-chip.is-up .chaos-chip-impact { color: var(--color-success); }
.chaos-empty { margin: 0; }

/* 🛡️ Mitigations (Insights → Portfolio Insights) */
.mitigation-block {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-divider);
}
.mit-head .card-subtitle { margin-top: var(--space-xs); }
.mit-note { font-size: var(--text-xs); margin: 0 0 var(--space-sm); }
.mit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: var(--space-sm);
}
.mit-item {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.02);
    font-size: var(--text-xs);
}
.mit-item.is-on {
    border-color: rgba(16,185,129,0.45);
    background: rgba(16,185,129,0.06);
}
.mit-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
    min-width: 54px;
    text-align: center;
}
.mit-toggle input { width: 18px; height: 18px; accent-color: var(--color-success); }
.mit-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mit-title { color: var(--text-main); font-weight: 600; font-size: var(--text-sm); }
.mit-meta { color: var(--text-muted); font-weight: 500; font-size: var(--text-xs); }
.mit-covers { color: var(--color-primary-hover); }
.mit-tip { color: var(--text-muted); }
.mit-value { font-weight: 600; color: var(--text-muted); }
.mit-value.is-up { color: var(--color-success); }
.mit-value.is-down { color: var(--color-danger); }
.chaos-chip-cause { color: var(--text-muted); font-style: italic; }