/* ============================================
   McGrinsey · Business Model Simulator
   Editorial brutalist meets premium SaaS.
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Author classes like .login-gate / .app set their own display rule which
   inadvertently overrides the user-agent [hidden] { display:none }. Force
   the HTML hidden attribute to win across the whole sim app. */
[hidden] { display: none !important; }

:root {
    /* Surfaces (matched to public/styles.css) */
    --bg: #f7f6f3;
    --bg-2: #edecea;
    --bg-3: #e2e0dc;
    --surface: #ffffff;
    --surface-2: #faf9f7;
    --surface-hover: #f5f3ef;

    /* Ink */
    --ink: #0a0a0a;
    --ink-2: #1a1a1a;
    --ink-3: #555;
    --ink-4: #888;
    --ink-5: #bbb;
    --ink-6: #dadada;

    /* Borders */
    --border: rgba(0, 0, 0, 0.06);
    --border-2: rgba(0, 0, 0, 0.10);
    --border-3: rgba(0, 0, 0, 0.15);
    --border-4: rgba(0, 0, 0, 0.25);

    /* Curve palette (matched server seeds) */
    --c-agency: #F97A4B;
    --c-agency-soft: rgba(249, 122, 75, 0.10);
    --c-media: #9B7BFF;
    --c-media-soft: rgba(155, 123, 255, 0.10);
    --c-revenue: #2EB66B;
    --c-revenue-soft: rgba(46, 182, 107, 0.10);

    /* Semantic */
    --success: #2EB66B;
    --warning: #F2A33B;
    --danger: #E54E3E;
    --info: #4B7BF9;

    /* Typography */
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Motion */
    --t-fast: 0.12s ease;
    --t-base: 0.2s ease;
    --t-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --topbar-h: 56px;
    --maxw: 1280px;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}

::selection { background: rgba(10, 10, 10, 0.12); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--border-4); }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button { border: none; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ==================== LOGIN GATE ==================== */

.login-gate {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 100;
}

.login-gate-inner {
    max-width: 440px;
    text-align: left;
    border-left: 3px solid var(--ink);
    padding: 32px 36px;
}

.login-gate-tag {
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 28px;
}

.login-gate-title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 16px;
}

.login-gate-desc {
    font-size: 0.92rem;
    color: var(--ink-3);
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 32px;
}

.login-gate-btn {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ink);
    padding: 14px 28px;
    transition: all var(--t-base);
    border: 2px solid var(--ink);
}

.login-gate-btn:hover {
    background: #222;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ==================== TOP BAR ==================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    background: rgba(247, 246, 243, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-2);
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-mark {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.brand-text {
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.brand-sub {
    margin-left: 4px;
    color: var(--ink-4);
    font-weight: 400;
}

.topbar-divider {
    width: 1px;
    height: 18px;
    background: var(--border-3);
}

.sim-switcher {
    position: relative;
}

.sim-switcher-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--border-3);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 0.78rem;
    font-weight: 500;
    transition: all var(--t-fast);
    max-width: 320px;
}

.sim-switcher-btn:hover {
    border-color: var(--ink);
    background: var(--surface-hover);
}

.sim-switcher-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.sim-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    max-width: 380px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 4px;
    z-index: 60;
}

.sim-switcher-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background var(--t-fast);
    border: 1px solid transparent;
}

.sim-switcher-item:hover {
    background: var(--surface-hover);
}

.sim-switcher-item.active {
    background: var(--bg-2);
    border-color: var(--border-2);
}

.sim-switcher-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sim-switcher-item-meta {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sim-switcher-empty {
    padding: 14px 12px;
    color: var(--ink-4);
    font-size: 0.78rem;
    text-align: center;
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all var(--t-fast);
    cursor: pointer;
    border: 1px solid transparent;
    color: var(--ink-2);
}

.btn svg { flex-shrink: 0; }

.btn-ghost {
    background: transparent;
    border-color: var(--border-3);
}
.btn-ghost:hover {
    background: var(--surface);
    border-color: var(--ink);
    color: var(--ink);
}

.btn-icon {
    padding: 6px;
}

.btn-danger-ghost {
    background: transparent;
    border-color: var(--border-3);
    color: var(--ink-3);
}
.btn-danger-ghost:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(229, 78, 62, 0.06);
}

.btn-major {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ink);
    padding: 18px 32px;
    transition: all var(--t-base);
    border: 2px solid var(--ink);
}
.btn-major:hover {
    background: #222;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.btn-ghost-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: transparent;
    border: 1px dashed var(--border-4);
    transition: all var(--t-fast);
}
.btn-ghost-line:hover {
    color: var(--ink);
    border-color: var(--ink);
    border-style: solid;
    background: var(--surface);
}

/* User pill */

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--border-3);
}

.user-pill-avatar {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
}

.user-pill-name {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== WORK AREA ==================== */

.work {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 32px 32px 80px;
}

/* ==================== EMPTY STATE ==================== */

.empty {
    min-height: calc(100vh - var(--topbar-h) - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
}

.empty-inner {
    max-width: 560px;
    text-align: left;
}

.empty-mark {
    color: var(--ink);
    margin-bottom: 36px;
    animation: emptyMarkIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes emptyMarkIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.empty-tag {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.empty-tag::before {
    content: '';
    width: 40px;
    height: 2px;
    background: var(--ink-5);
}

.empty-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin-bottom: 24px;
}

.empty-desc {
    font-size: 1rem;
    color: var(--ink-3);
    font-weight: 300;
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 480px;
}

.empty-foot {
    margin-top: 48px;
    display: flex;
    gap: 28px;
    border-top: 1px solid var(--border);
    padding-top: 24px;
    flex-wrap: wrap;
}

.empty-foot-step {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.empty-foot-num {
    font-size: 0.55rem;
    color: var(--ink-5);
    font-weight: 700;
}

/* ==================== SIM VIEW ==================== */

.sim-view {
    display: flex;
    flex-direction: column;
    gap: 32px;
    animation: viewIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes viewIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Headline strip */

.sim-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: end;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-2);
}

.sim-tag {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ink-4);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sim-tag-line {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--ink-5);
}

.sim-name {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1.1;
    outline: none;
    padding: 2px 4px;
    margin-left: -4px;
    border-radius: 2px;
    transition: background var(--t-fast);
    cursor: text;
    min-height: 1.2em;
}

.sim-name:hover {
    background: rgba(0, 0, 0, 0.03);
}

.sim-name:focus {
    background: rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 -2px 0 var(--ink);
}

.sim-meta {
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sim-meta-item { display: inline-flex; gap: 6px; align-items: center; }
.sim-meta-key { color: var(--ink-5); }
.sim-meta-val { color: var(--ink-3); font-weight: 500; }

/* KPI strip */

.sim-headline-right {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-3);
}

.kpi {
    padding: 12px 18px;
    border-right: 1px solid var(--border-2);
    min-width: 110px;
    text-align: left;
}
.kpi:last-child { border-right: none; }

.kpi-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 6px;
}

.kpi-val {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.kpi-val.neg { color: var(--danger); }
.kpi-val.pos { color: var(--success); }

/* ==================== CHART ==================== */

.chart-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-2);
    padding: 28px 28px 36px;
    overflow: hidden;
}

.chart-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: center;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: all var(--t-fast);
}
.legend-item:hover {
    background: var(--surface-hover);
    border-color: var(--border-2);
}
.legend-item.muted .legend-swatch,
.legend-item.muted .legend-label,
.legend-item.muted .legend-val { opacity: 0.3; }

.legend-swatch {
    width: 18px;
    height: 8px;
    background: var(--ink);
}

.legend-label {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-weight: 600;
}

.legend-val {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

/* Net-profit chip — visually distinct from cost/revenue chips. Square swatch
   to match the "this is a line, not a fill" visual cue. */
.legend-item-pnl .legend-swatch-pnl {
    height: 2px;
    background: rgba(22, 163, 74, 1);
}

/* First-profit-month annotation. Mono-caps, sits inline with the legend
   chips. Green when we have a break-even month, red when never reached. */
.chart-firstprofit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    margin-left: auto;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.chart-firstprofit-tag {
    font-weight: 700;
    color: var(--ink-4);
}

.chart-firstprofit-val {
    font-weight: 600;
    color: var(--ink);
}

.chart-firstprofit.pos {
    border-color: rgba(22, 163, 74, 0.4);
    background: rgba(34, 197, 94, 0.08);
}
.chart-firstprofit.pos .chart-firstprofit-val { color: rgba(22, 163, 74, 1); }

.chart-firstprofit.neg {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(239, 68, 68, 0.08);
}
.chart-firstprofit.neg .chart-firstprofit-val { color: rgba(220, 38, 38, 1); }

/* Phase 22 — HISTORY / FUTURE / BOTH view-window toggle. Editorial-brutalist
   segmented control; mirrors the curves panel's anchor-mode picker
   (.pr-mode-picker / .pr-mode-chip). Leads the chart legend as the primary
   "what window am I looking at" control. */
.chart-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
}
.chart-view-chip {
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-3);
    cursor: pointer;
    transition: all var(--t-fast);
}
.chart-view-chip:last-child { border-right: none; }
.chart-view-chip:hover:not(.disabled) { color: var(--ink-2); background: var(--surface-hover); }
.chart-view-chip.active {
    color: #fff;
    background: var(--ink);
    box-shadow: inset 0 -2px 0 var(--warning);
}
.chart-view-chip.disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

.chart-host {
    width: 100%;
    /* Phase 15 — chart is the hero. Height is driven by --chart-h, which the
       layout manager (app.js) recomputes from viewport + collapse state so the
       canvas GROWS as the panels below collapse and approaches near-fullscreen
       in Focus mode. The clamp keeps it sane before JS sets the var and on the
       very first paint. The chart's ResizeObserver picks up the size change and
       calls u.setSize, so the canvas re-lays-out without a blank frame. */
    height: var(--chart-h, clamp(420px, 60vh, 760px));
    position: relative;
    transition: height var(--t-slow);
}

.chart-host .uplot,
.chart-host .u-wrap { background: transparent; }

.chart-axis-tag {
    position: absolute;
    top: 28px;
    right: 28px;
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-5);
    pointer-events: none;
}
.chart-axis-tag-x {
    top: auto;
    bottom: 12px;
    right: 28px;
}

/* uPlot tweaks for editorial feel */
.uplot { font-family: var(--mono) !important; }
.u-legend { display: none !important; }
.u-axis text {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    fill: var(--ink-4) !important;
    letter-spacing: 0.05em !important;
}
.u-tooltip {
    position: absolute;
    background: var(--ink);
    color: #fff;
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 0.65rem;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.u-tooltip-date {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 6px;
}
.u-tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
}
.u-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.u-tooltip-label {
    color: rgba(255, 255, 255, 0.65);
    min-width: 80px;
}
.u-tooltip-val {
    color: #fff;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

/* ==================== PANELS ==================== */

.panel {
    background: var(--surface);
    border: 1px solid var(--border-2);
}

.panel-header {
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--border);
}

.panel-header-tag {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ink-4);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.panel-header-line {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--ink-5);
}

.panel-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.panel-desc {
    margin-top: 6px;
    color: var(--ink-4);
    font-size: 0.82rem;
    font-weight: 300;
}

/* Products table */

.products-table {
    display: flex;
    flex-direction: column;
}

/* The head and each row's INNER .pr-grid share the same column template so
   they line up. The outer .product-row is a vertical stack: a thin "mode
   bar" with the anchor-mode picker on top, then the inputs/derived cells. */
.products-head,
.pr-grid {
    display: grid;
    grid-template-columns: 36px minmax(180px, 2fr) 90px 90px 90px 76px 76px 86px 96px 56px;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
}

.products-head {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

.ph {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 600;
}

.ph-num, .ph-actions { text-align: right; }

.product-row {
    border-bottom: 1px solid var(--border);
    transition: background var(--t-fast);
    display: flex;
    flex-direction: column;
}

.product-row:hover { background: var(--surface-hover); }
.product-row.inactive { opacity: 0.45; }
.product-row.inactive .pr-mrr { text-decoration: line-through; }

/* ── Anchor-mode bar ───────────────────────────────────────────
   Lives above the grid of inputs. Holds the active toggle + the
   3-chip picker. The bar is mostly empty space so the chip group
   has room to breathe; the unreachable warning floats right. */
.pr-mode-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 28px 0;
}

/* Override grid alignment for the active cell here — same 36px column. */
.pr-mode-bar .pr-active {
    width: 36px;
    display: flex;
    align-items: center;
}

.pr-active-spacer {
    /* Empty cell in the grid below the toggle to keep grid columns aligned. */
}

.pr-mode-picker {
    display: inline-flex;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
}

.pr-mode-chip {
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-3);
    cursor: pointer;
    transition: all var(--t-fast);
}
.pr-mode-chip:last-child { border-right: none; }
.pr-mode-chip:hover { color: var(--ink-2); background: var(--surface-hover); }

.pr-mode-chip.active {
    color: #fff;
    background: var(--ink);
    box-shadow: inset 0 -2px 0 var(--warning);
}

.pr-mode-spacer { flex: 1; }

.pr-warn {
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--warning);
}

/* ── Derived (computed, not edited) value cells ─────────────────
   When a cell is NOT the anchor for the row, it shows the resolved
   number as a muted span. Tilde prefix is a visual cue. */
.pr-derived {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--ink-5);
    font-variant-numeric: tabular-nums;
    padding: 6px 8px;
    border: 1px dashed transparent;
    border-radius: 2px;
}

.product-row.mode-orders        .pr-cell-orders  .pr-derived,
.product-row.mode-media_budget  .pr-cell-budget  .pr-derived,
.product-row.mode-profit_target .pr-cell-profit  .pr-derived {
    /* Edge case: defensive, anchor cell should be an input not a derived. */
    display: none;
}

/* When this row's anchor cell is an input, show a subtle bottom-line
   accent so the user knows "this is what you control". */
.product-row.mode-orders .pr-cell-orders input,
.product-row.mode-media_budget .pr-cell-budget input,
.product-row.mode-profit_target .pr-cell-profit input {
    box-shadow: inset 0 -2px 0 var(--warning);
    font-weight: 600;
}

/* Custom toggle */
.pr-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 16px;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast), border-color var(--t-fast);
    padding: 0;
}
.pr-toggle::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 1px;
    width: 12px;
    height: 12px;
    background: var(--ink-5);
    transition: transform var(--t-base), background var(--t-fast);
}
.pr-toggle.on {
    background: var(--ink);
    border-color: var(--ink);
}
.pr-toggle.on::before {
    background: #fff;
    transform: translateX(12px);
}

.pr-name input,
.pr-num input {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 8px;
    font-size: 0.85rem;
    color: var(--ink);
    transition: all var(--t-fast);
    font-family: var(--sans);
    border-radius: 2px;
}
.pr-name input { font-weight: 500; }
.pr-num input {
    font-family: var(--mono);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}
.pr-name input:hover,
.pr-num input:hover {
    background: var(--bg);
    border-color: var(--border-2);
}
.pr-name input:focus,
.pr-num input:focus {
    background: #fff;
    border-color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.05);
}

.pr-mrr {
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.pr-actions {
    text-align: right;
}

.pr-delete {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-5);
    border: 1px solid transparent;
    transition: all var(--t-fast);
}
.pr-delete:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(229, 78, 62, 0.06);
}

.products-empty {
    padding: 32px 28px;
    text-align: center;
    color: var(--ink-4);
    font-size: 0.85rem;
    font-style: italic;
}

/* ==================== PHASE 5 — WOM sub-section ==================== */
/* Per-product collapsible viral-coefficient settings. Sits under the main
   .pr-grid inside the .product-row. Header is always visible; body slides
   open when the user clicks the toggle. Default state is collapsed. */
.pr-wom {
    display: flex;
    flex-direction: column;
    border-top: 1px dashed var(--border);
    background: var(--surface-2);
}
.product-row.wom-open .pr-wom {
    background: var(--bg-2);
}
.pr-wom-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 28px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--t-fast);
}
.pr-wom-toggle:hover { background: var(--surface-hover); }
.pr-wom-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: var(--ink-4);
    font-size: 0.7rem;
}
.pr-wom-header-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.pr-wom-summary {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pr-wom-body {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 14px;
    padding: 12px 28px 16px;
    align-items: end;
}
.pr-wom-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pr-wom-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.pr-wom-field input {
    width: 100%;
    padding: 6px 8px;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-3);
    background: var(--surface);
    color: var(--ink);
    text-align: right;
    transition: border-color var(--t-fast);
}
.pr-wom-field input:focus {
    outline: none;
    border-color: var(--ink-3);
}
.pr-wom-readout {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px dashed var(--border-2);
    margin-top: 4px;
}
.pr-wom-K-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--border-3);
    font-variant-numeric: tabular-nums;
}
.pr-wom-steady {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}
.pr-wom-steady-ok {
    color: rgba(22, 163, 74, 1);
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(22, 163, 74, 0.4);
}
.pr-wom-steady-off {
    color: var(--ink-5);
    background: var(--surface-2);
    border-color: var(--border-2);
}
.pr-wom-unstable {
    color: rgba(220, 38, 38, 1);
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(220, 38, 38, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}
.pr-wom-steady-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 1);
}

/* ── Phase 12 — product lifecycle (start / end month) ──────────────
   Inline hint chip in the mode bar (only when non-default) + a Timing
   sub-section that mirrors the WOM sub-section's visual language. */
.pr-lifecycle-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ink-2);
    background: var(--bg-2);
    border: 1px solid var(--border-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pr-lifecycle-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--warning);
}

/* Phase 13 — CHANNELS anchor mode. The CRR cell becomes a muted marker
   ("via channels") and a summary strip sits below the grid. */
.pr-derived-crr {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--info);
    padding: 6px 8px;
    white-space: nowrap;
}
.pr-channels-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 18px 8px 44px;
    border-top: 1px dashed var(--border);
    background: var(--surface-2);
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.pr-channels-summary.pr-channels-empty { color: var(--ink-4); }
.pr-channels-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--info);
    flex-shrink: 0;
}
.pr-channels-empty .pr-channels-dot { background: var(--warning); }
.pr-channels-count { font-weight: 700; letter-spacing: 0.08em; }
.pr-channels-sep { color: var(--ink-5); }
.pr-channels-metric { color: var(--ink-2); }

.pr-timing {
    display: flex;
    flex-direction: column;
    border-top: 1px dashed var(--border);
    background: var(--surface-2);
}
.product-row.timing-open .pr-timing {
    background: var(--bg-2);
}
.pr-timing-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 28px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--t-fast);
}
.pr-timing-toggle:hover { background: var(--surface-hover); }
.pr-timing-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: var(--ink-4);
    font-size: 0.7rem;
}
.pr-timing-header-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.pr-timing-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    gap: 14px;
    padding: 12px 28px 16px;
    align-items: end;
}
.pr-timing-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pr-timing-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.pr-timing-input-wrap {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-3);
    background: var(--surface);
    transition: border-color var(--t-fast);
}
.pr-timing-input-wrap:focus-within { border-color: var(--ink-3); }
.pr-timing-input-wrap.disabled { opacity: 0.45; }
.pr-timing-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 6px 0 8px;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-4);
    background: var(--bg-2);
    border-right: 1px solid var(--border-3);
}
.pr-timing-field input {
    width: 100%;
    min-width: 56px;
    padding: 6px 8px;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    border: none;
    background: transparent;
    color: var(--ink);
    text-align: right;
}
.pr-timing-field input:focus { outline: none; }
.pr-timing-field input:disabled { cursor: not-allowed; }
.pr-timing-forever {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 7px;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    cursor: pointer;
    user-select: none;
}
.pr-timing-forever input { cursor: pointer; accent-color: var(--ink); }
.pr-timing-readout {
    display: inline-flex;
    align-items: end;
    padding-bottom: 4px;
}
.pr-timing-window-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--border-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Phase 23 — scheduled product price changes ──
   Mirrors the Timing sub-section: a collapsible strip below the grid + a
   compact inline mode-bar hint. Editorial-brutalist, light palette. */
.pr-price-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    background: var(--bg-2);
    border: 1px solid var(--border-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-price-hint-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--info);
    flex-shrink: 0;
}
.pr-price-hint-seg { color: var(--ink); }
.pr-price-hint-at { color: var(--ink-4); }

.pr-price {
    display: flex;
    flex-direction: column;
    border-top: 1px dashed var(--border);
    background: var(--surface-2);
}
.product-row.price-open .pr-price { background: var(--bg-2); }
.pr-price-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 28px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--t-fast);
}
.pr-price-toggle:hover { background: var(--surface-hover); }
.pr-price-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: var(--ink-4);
    font-size: 0.7rem;
}
.pr-price-header-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.pr-price-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 28px 16px;
}
.pr-price-base {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.pr-price-base strong { color: var(--ink); }
.pr-price-base-note { color: var(--ink-4); }
.pr-price-empty {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--ink-4);
    padding: 4px 0;
}
.pr-price-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pr-price-row {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
}
.pr-price-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pr-price-field-price { margin-left: auto; }
.pr-price-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.pr-price-input-wrap {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-3);
    background: var(--surface);
    transition: border-color var(--t-fast);
}
.pr-price-input-wrap:focus-within { border-color: var(--ink-3); }
.pr-price-input-wrap.disabled { opacity: 0.45; }
.pr-price-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 6px 0 8px;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-4);
    background: var(--bg-2);
    border-right: 1px solid var(--border-3);
}
.pr-price-prefix.pr-price-cur { font-size: 0.72rem; }
.pr-price-row input {
    width: 92px;
    min-width: 56px;
    padding: 6px 8px;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    border: none;
    background: transparent;
    color: var(--ink);
    text-align: right;
}
.pr-price-row input:focus { outline: none; }
.pr-price-row input:disabled { cursor: not-allowed; }
.pr-price-indef {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 7px;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-3);
    cursor: pointer;
    user-select: none;
}
.pr-price-indef input { cursor: pointer; accent-color: var(--ink); width: auto; min-width: 0; }
.pr-price-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    margin-bottom: 3px;
    background: transparent;
    border: 1px solid var(--border-3);
    color: var(--ink-4);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.pr-price-remove:hover { color: var(--danger); border-color: var(--danger); }
.pr-price-add {
    align-self: flex-start;
    padding: 7px 14px;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.pr-price-add:hover { background: var(--ink); color: var(--surface); }

/* Phase 5 — Products panel WOM totals row. Sits below the existing
   .panel-footer (which keeps Total MRR + Total Media Spend), in its own
   subdued strip so it doesn't compete with the headline numbers. */
.products-wom-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
.products-wom-totals-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 16px;
    border-right: 1px solid var(--border);
    align-items: flex-start;
}
.products-wom-totals-row:last-child { border-right: none; }
.products-wom-totals-tag {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.products-wom-totals-val {
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.products-wom-totals-row-blend {
    background: var(--bg-2);
}
.products-wom-totals-row-blend .products-wom-totals-val {
    color: var(--ink-3);
}

/* Phase 5 — chart annotation: small WOM share badge inline with the
   first-profit chip. Mirrors the chip styling but in a calmer palette. */
.chart-wom-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-left: 8px;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.chart-wom-badge-tag {
    font-weight: 700;
    color: var(--ink-4);
}
.chart-wom-badge-val {
    font-weight: 600;
    color: var(--ink);
}

/* WOM body responsiveness — collapse the 5-input grid to 3+2 then to 1 on
   narrow viewports so the labels stay legible. */
@media (max-width: 1100px) {
    .pr-wom-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .pr-wom-body { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 18px; padding-right: 18px; }
    .pr-wom-toggle { padding-left: 18px; padding-right: 18px; }
    .products-wom-totals { grid-template-columns: 1fr; }
    .products-wom-totals-row { border-right: none; border-bottom: 1px solid var(--border); }
    .products-wom-totals-row:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
    .pr-wom-body { grid-template-columns: 1fr; padding-left: 14px; padding-right: 14px; }
    .pr-wom-toggle { padding-left: 14px; padding-right: 14px; }
}

/* Phase 12 — Timing body responsiveness. Drop the forever toggle + readout
   under the two offset inputs as the viewport narrows. */
@media (max-width: 780px) {
    .pr-timing-body { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 18px; padding-right: 18px; }
    .pr-timing-toggle { padding-left: 18px; padding-right: 18px; }
    .pr-timing-forever, .pr-timing-readout { grid-column: span 1; }
    /* Phase 23 — price-schedule strip tracks the same narrow-viewport gutters. */
    .pr-price-body, .pr-price-toggle { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 560px) {
    .pr-timing-body { grid-template-columns: 1fr; padding-left: 14px; padding-right: 14px; }
    .pr-timing-toggle { padding-left: 14px; padding-right: 14px; }
    .pr-price-body, .pr-price-toggle { padding-left: 14px; padding-right: 14px; }
    /* Stack each segment's fields full-width on the smallest screens. */
    .pr-price-row input { width: 100%; }
    .pr-price-field, .pr-price-field-price { margin-left: 0; flex: 1 1 100%; }
}

.panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
}

.panel-footer-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.panel-footer-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.panel-footer-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-tag {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.footer-num {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Secondary total row — derived media spend, visually subdued so the user
   reads it as a downstream consequence of the products, not the headline. */
.panel-footer-row-secondary .footer-tag-secondary {
    color: var(--ink-5);
}
.panel-footer-row-secondary .footer-num-secondary {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-3);
}

/* ==================== CURVES PANEL ==================== */
/* Phase 1 (2026-05-19): The old "Advanced" drawer is gone. The curves editor
   and horizon controls are now a first-class panel directly under the chart.
   Same panel chrome as products panel; horizon controls sit in the top-right
   of the header. */

.curves-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
}

.curves-panel-header-left { min-width: 0; }

.curves-horizon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    padding-top: 4px;
}

.curves-horizon-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 86px;
}

.curves-horizon-label {
    font-family: var(--mono);
    font-size: 0.48rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 600;
}

.curves-horizon-input {
    padding: 7px 9px;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--ink);
    transition: all var(--t-fast);
    min-width: 86px;
}

.curves-horizon-input:focus {
    outline: none;
    border-color: var(--ink);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.05);
}

.curves-panel-body {
    padding: 18px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid var(--border);
}

.curves-panel-foot {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
}

/* Scenario compare placeholder — visible but inert. Sits at the bottom of
   the sim view so the user knows it's coming without making it feel like
   primary surface area. */
.scenario-compare-placeholder {
    background: var(--surface-2);
    border: 1px dashed var(--border-3);
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scenario-compare-tag {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 600;
}

.scenario-compare-desc {
    font-size: 0.84rem;
    color: var(--ink-4);
    font-style: italic;
}

.curves-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.curve-row {
    display: grid;
    grid-template-columns: 28px minmax(140px, 1.4fr) 140px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.curve-row.is-dirty {
    border-color: var(--warning);
    background: var(--surface);
}

.curve-swatch {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-3);
    cursor: pointer;
    padding: 0;
}

.curve-input {
    padding: 6px 8px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.82rem;
    color: var(--ink);
    transition: all var(--t-fast);
}
.curve-input:hover { border-color: var(--border-2); background: var(--surface); }
.curve-input:focus { border-color: var(--ink); background: #fff; outline: none; }

.curve-params {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.7rem;
    color: var(--ink-4);
}
.curve-params input {
    width: 80px;
    padding: 4px 6px;
    border: 1px solid var(--border-2);
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.72rem;
    text-align: right;
}
.curve-params label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.curve-delete {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-5);
    border: 1px solid transparent;
    transition: all var(--t-fast);
}
.curve-delete:hover { color: var(--danger); border-color: var(--danger); }

/* Per-row Apply button. Muted when clean, full-ink when dirty. */
.curve-apply {
    height: 26px;
    padding: 0 12px;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-5);
    background: transparent;
    border: 1px solid var(--border-3);
    cursor: not-allowed;
    transition: all var(--t-fast);
    white-space: nowrap;
}
.curve-apply:not(:disabled) { cursor: pointer; }
.curve-apply.dirty {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--warning) inset, 0 0 0 0 transparent;
}
.curve-apply.dirty:hover {
    background: #222;
    transform: translateY(-1px);
}
.curve-apply:disabled.dirty {
    cursor: wait;
    opacity: 0.7;
}
.curve-apply-spacer {
    display: inline-block;
    min-width: 1px;
}

/* At-a-glance dirty/saved indicator, replaces old global "Save curve changes". */
.curves-status {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 6px 10px;
    transition: color var(--t-fast);
}
.curves-status.dirty {
    color: var(--warning);
}

.curve-derived-note {
    font-style: italic;
    color: var(--ink-4);
}

/* ==================== HISTORY SUB-SECTION (Phase 1c) ==================== */

/* A row is now wrapped so the history sub-section can render directly below
   the curve-row but still be DOM-grouped with it. The wrap is also the
   data-local-id holder we look up in bindings. */
.curve-row-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Chevron-style toggle that sits before the Apply button. Visually quiet
   when collapsed, mildly active when expanded. */
.curve-history-toggle {
    height: 26px;
    padding: 0 10px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
    background: transparent;
    border: 1px dashed var(--border-3);
    transition: all var(--t-fast);
    white-space: nowrap;
    cursor: pointer;
}
.curve-history-toggle:hover {
    color: var(--ink);
    border-color: var(--ink);
}
.curve-history-toggle.open {
    color: var(--ink);
    background: var(--bg-2);
    border-style: solid;
    border-color: var(--ink-5);
}

/* The expanded history section. Anchored to the row above by sharing the wrap,
   subtle box so it reads as "drilled into the past for THIS curve". */
.curve-history-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--ink-5);
    padding: 12px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 38px; /* align with .curve-input under the swatch */
}

.curve-history-tag {
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 700;
}

.curve-history-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.curve-history-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 70px;
}

.curve-history-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-5);
    font-weight: 700;
}

.input-history {
    width: 80px;
    padding: 5px 7px;
    border: 1px solid var(--border-2);
    background: #fff;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    transition: all var(--t-fast);
}
.input-history:hover { border-color: var(--border-3); }
.input-history:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.05);
}

.curve-history-hint {
    font-size: 0.72rem;
    color: var(--ink-4);
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

/* When history is enabled, the row gets one extra auto-column for the
   history toggle (sits between the params block and the Apply button).
   When history=0 the toggle isn't rendered and the original 6-column
   template stays. */
.curve-row.has-history {
    grid-template-columns: 28px minmax(140px, 1.4fr) 140px 1fr auto auto auto;
}

/* Products panel — secondary description paragraph (Phase 1c note). */
.panel-desc-aside {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--ink-5);
    font-style: italic;
    line-height: 1.5;
}

/* ==================== HISTORIC DATA TABLE (Phase 7 — 2026-05-19) ==================== */
/* Editorial brutalist matrix for entering past actuals. Visible only when
   history_months > 0. Sticky first column (metric label) + sticky right
   column (row total), horizontally scrollable middle (one column per past
   month). Cells are tight, mono numbers, Inter labels. Paste support is
   wired in historic.js — these styles just give the table its rhythm. */

.historic-panel { /* uses .panel base */ }

.historic-panel-header {
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--border);
}

.historic-panel-body {
    padding: 16px 0 18px;
}

.historic-status-row {
    padding: 0 28px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.historic-status {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-5);
    font-weight: 700;
    transition: color var(--t-fast);
}
.historic-status.dirty {
    color: var(--warning);
}

.historic-paste-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--ink-4);
    font-style: italic;
}
.historic-paste-hint svg {
    flex-shrink: 0;
    color: var(--ink-4);
}

.historic-aside {
    padding: 0 28px 16px;
    margin: 0;
    font-size: 0.72rem;
    color: var(--ink-5);
    font-style: italic;
    line-height: 1.55;
    border-bottom: 1px solid var(--border);
}
.historic-aside strong { color: var(--ink-3); font-style: normal; }
.historic-aside em { color: var(--ink-3); }

.historic-empty {
    padding: 28px;
    color: var(--ink-4);
    font-size: 0.82rem;
    font-style: italic;
}

.historic-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* Reserve a little vertical room for the focus shadow on inputs. */
    padding: 4px 0;
}

.historic-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    /* Force the table to be at least the width of the host so sticky
       columns still pin correctly. */
    min-width: 100%;
}

/* All cells share base typography + tight padding. */
.historic-cell {
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-align: right;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: middle;
}

/* Header + footer use Inter for labels but mono for numbers. */
.historic-row-head .historic-cell {
    background: var(--bg-2);
    color: var(--ink-4);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-2);
    text-align: right;
}
.historic-row-head .historic-cell-label,
.historic-row-head .historic-cell-month:first-of-type {
    text-align: left;
}

/* The first (sticky-left) label column. */
.historic-cell-sticky-left {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    text-align: left;
    min-width: 200px;
    max-width: 280px;
    padding-left: 28px;
    /* Faint shadow on the right edge so the sticky column reads as
       layered above the scrolling middle. */
    box-shadow: 1px 0 0 var(--border);
}
.historic-row-head .historic-cell-sticky-left {
    background: var(--bg-2);
}

/* The last (sticky-right) total column. */
.historic-cell-sticky-right {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: -1px 0 0 var(--border);
    color: var(--ink-4);
    font-weight: 600;
    padding-right: 28px;
    min-width: 110px;
}
.historic-row-head .historic-cell-sticky-right {
    background: var(--bg-2);
}

.historic-cell-month {
    min-width: 96px;
    color: var(--ink-4);
}

/* Body rows. */
.historic-row .historic-row-label-text {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-left: 8px;
    vertical-align: middle;
}
.historic-row .historic-row-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
}
.historic-row .historic-row-hint {
    display: block;
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-5);
    font-weight: 700;
    margin-top: 4px;
    margin-left: 18px;
}
.historic-row .historic-row-hint em {
    color: var(--ink-4);
    font-style: normal;
    text-transform: none;
    letter-spacing: 0.02em;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
}

/* Number cells in body rows. */
.historic-cell-num {
    color: var(--ink-3);
}

/* Cells that hold a numeric input. */
.historic-cell:has(.historic-input) {
    padding: 4px 8px;
}
.historic-input {
    display: block;
    width: 100%;
    min-width: 78px;
    padding: 6px 10px;
    border: 1px solid var(--border-2);
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.78rem;
    text-align: right;
    color: var(--ink);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    font-variant-numeric: tabular-nums;
    appearance: textfield;
    -moz-appearance: textfield;
}
.historic-input::-webkit-outer-spin-button,
.historic-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.historic-input::placeholder {
    color: var(--ink-5);
    opacity: 1;
}
.historic-input:hover { border-color: var(--border-3); }
.historic-input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.05);
    background: var(--surface);
}

/* Derived rows — read-only, muted. */
.historic-row.derived .historic-cell-num {
    color: var(--ink-5);
    font-style: italic;
}
.historic-cell-derived {
    cursor: not-allowed;
}

/* Row total + footer styles. */
.historic-row-total {
    color: var(--ink-3);
    font-weight: 700;
}
.historic-row-foot .historic-cell {
    background: var(--bg-2);
    border-bottom: none;
    border-top: 1px solid var(--border-2);
    color: var(--ink-3);
    font-weight: 700;
    font-family: var(--mono);
    font-size: 0.74rem;
    padding-top: 12px;
    padding-bottom: 12px;
}
.historic-row-foot .historic-cell-sticky-left {
    background: var(--bg-2);
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.historic-row-foot .historic-cell-sticky-right,
.historic-row-foot .historic-foot-grand {
    background: var(--bg-2);
    color: var(--ink);
}

/* Zebra striping on body rows to help the eye track across many columns. */
.historic-row:nth-child(odd) .historic-cell {
    background: var(--surface);
}
.historic-row:nth-child(even) .historic-cell {
    background: var(--surface-2);
}
.historic-row:nth-child(even) .historic-cell-sticky-left,
.historic-row:nth-child(even) .historic-cell-sticky-right {
    background: var(--surface-2);
}

/* When the user hovers a row, the whole row gets a faint warm-ink wash. */
.historic-row:hover .historic-cell {
    background: var(--surface-hover);
}
.historic-row:hover .historic-cell-sticky-left,
.historic-row:hover .historic-cell-sticky-right {
    background: var(--surface-hover);
}

/* ---- Phase 14: per-channel metric grouping ---- */

/* Channel group header row — name + swatch + "+ metric" control. Overrides
   the zebra striping with a flat band so each channel reads as a section. */
.historic-row-group .historic-cell,
.historic-row-group:hover .historic-cell {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-2);
    padding-top: 9px;
    padding-bottom: 9px;
}
.historic-group-label.historic-cell-sticky-left,
.historic-row-group:hover .historic-group-label.historic-cell-sticky-left {
    background: var(--bg-2);
}
.historic-group-name {
    display: inline-block;
    margin-left: 8px;
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    vertical-align: middle;
}
.historic-group-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--border-2);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--ink-4);
    vertical-align: middle;
}
.historic-group-controls {
    text-align: left !important;
    padding-left: 16px !important;
}
.historic-add-metric {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 4px 24px 4px 10px;
    border: 1px dashed var(--border-3);
    border-radius: 4px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 9px center;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-3);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.historic-add-metric:hover { border-color: var(--ink); color: var(--ink); }
.historic-add-metric:focus { outline: none; border-color: var(--ink); }
.historic-add-metric-none {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-5);
    font-weight: 700;
}

/* Indented channel metric sub-rows. */
.historic-cell-label-indent {
    padding-left: 28px !important;
}
.historic-row-metric .historic-row-label-text {
    margin-left: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-3);
}
.historic-row-metric .historic-cell-label-indent::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--border-3);
}
.historic-cell-label.historic-cell-label-indent { position: relative; }
.historic-metric-remove {
    margin-left: 8px;
    width: 16px;
    height: 16px;
    line-height: 14px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--ink-5);
    font-size: 0.85rem;
    cursor: pointer;
    vertical-align: middle;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.historic-metric-remove:hover {
    color: var(--ink);
    border-color: var(--border-3);
    background: var(--surface);
}
.historic-foot-note {
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    color: var(--ink-5);
    font-weight: 600;
}

/* ==================== STATUS BAR ==================== */

/* ==================== GLOBAL SAVE-STATE PILL (Phase 21) ====================
   ONE app-wide persistence signal, registered into BOTH the page topbar
   (#saveStatePill) and the immersive fullscreen top bar (#saveStatePillImm) so
   it's always visible in both modes. Replaces the old bottom-right #statusBar
   that lived outside #simStage (invisible in fullscreen → the save-anxiety bug).
   States: idle / dirty / saving / saved / error. */
.save-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
    user-select: none;
}
.save-state .save-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.save-state .save-state-text { line-height: 1; }

/* IDLE / SAVED-settled — quiet neutral check. */
.save-state.is-idle { color: var(--ink-4); }
.save-state.is-idle .save-state-icon { color: var(--ink-5); }

/* DIRTY — amber, pending Apply / debounce. */
.save-state.is-dirty {
    color: var(--warning);
    border-color: rgba(242, 163, 59, 0.4);
    background: rgba(242, 163, 59, 0.07);
}

/* SAVING — spinner + amber-leaning neutral. */
.save-state.is-saving {
    color: var(--ink-3);
    border-color: var(--border-3);
}
.save-state-spin {
    animation: saveStateSpin 0.8s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes saveStateSpin { to { transform: rotate(360deg); } }

/* SAVED — brief green ✓ flash. */
.save-state.is-saved {
    color: var(--success);
    border-color: rgba(46, 182, 107, 0.45);
    background: rgba(46, 182, 107, 0.08);
    animation: saveStatePop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes saveStatePop {
    0% { transform: scale(0.94); }
    60% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* ERROR — red, click-to-retry. */
.save-state.is-error {
    color: var(--danger);
    border-color: rgba(229, 78, 62, 0.5);
    background: rgba(229, 78, 62, 0.08);
}
.save-state.is-clickable { cursor: pointer; }
.save-state.is-error:hover { background: rgba(229, 78, 62, 0.14); }

/* In the immersive top bar the pill sits among the dark glass chrome — give it
   a slightly stronger surface so it reads against the chart behind. */
.save-state-imm {
    background: var(--surface);
    border-color: var(--border-3);
}

/* Focus mode dims the rest of the page chrome; keep the save signal legible. */
body.sim-focus #saveStatePill { opacity: 0.85; }

@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ==================== TOAST ==================== */

.toast-root {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    padding: 12px 18px;
    background: var(--ink);
    color: #fff;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    min-width: 220px;
    animation: toastIn 0.25s ease;
}
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ==================== MODAL ==================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(2px);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: backdropIn 0.18s ease;
}

@keyframes backdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    background: var(--surface);
    max-width: 440px;
    width: 100%;
    padding: 32px 32px 28px;
    border: 1px solid var(--ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-tag {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 12px;
}

.modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.modal-desc {
    font-size: 0.85rem;
    color: var(--ink-3);
    line-height: 1.6;
    margin-bottom: 22px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Phase 21 — promptModal() input row (portaled colour/text prompt, replaces the
   native window.prompt that broke fullscreen). */
.modal-prompt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.modal-prompt-row .modal-input {
    flex: 1 1 auto;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-3);
    background: var(--surface-2);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.85rem;
    transition: border-color var(--t-base);
}
.modal-prompt-row .modal-input:focus {
    outline: none;
    border-color: var(--ink);
}
.modal-prompt-row .modal-color {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--border-3);
    background: var(--surface);
    cursor: pointer;
}
.modal-prompt-row .modal-color::-webkit-color-swatch-wrapper { padding: 0; }
.modal-prompt-row .modal-color::-webkit-color-swatch { border: none; }

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1100px) {
    .products-head, .pr-grid {
        grid-template-columns: 36px minmax(140px, 1.6fr) 78px 78px 78px 64px 64px 72px 80px 44px;
        gap: 8px;
        padding: 10px 18px;
        font-size: 0.78rem;
    }
    .pr-mode-bar { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 900px) {
    .topbar { padding: 0 16px; flex-wrap: wrap; gap: 8px; height: auto; min-height: var(--topbar-h); }
    .topbar-right { flex-wrap: wrap; }
    .work { padding: 24px 16px 60px; }
    .sim-headline { grid-template-columns: 1fr; gap: 18px; }
    .chart-host { height: 320px; }
    .chart-card { padding: 18px 14px 28px; }
    .products-head, .pr-grid {
        grid-template-columns: 36px minmax(120px, 2fr) 70px 70px 70px 56px 56px 64px 78px 36px;
        padding: 10px 14px;
        gap: 6px;
        font-size: 0.74rem;
    }
    .pr-mode-bar { padding-left: 14px; padding-right: 14px; }
    .panel-header, .panel-footer { padding-left: 14px; padding-right: 14px; }
    .empty { padding: 30px 16px; }
}

@media (max-width: 640px) {
    .ph-num.ph-aov, .pr-aov,
    .ph-num.ph-margin, .pr-margin,
    .ph-num.ph-crr, .pr-crr,
    .ph-num.ph-cell-profit, .pr-cell-profit { display: none; }
    .products-head, .pr-grid {
        grid-template-columns: 32px 1fr 64px 70px 80px 36px;
    }
    .sim-headline-right { width: 100%; overflow-x: auto; }
}

/* ============================================
   Wiki (subtle topbar link + page styles)
   ============================================ */

.topbar-wiki-link {
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 6px 10px;
    border: 1px solid transparent;
    transition: all var(--t-fast);
    text-decoration: none;
}

.topbar-wiki-link:hover {
    color: var(--ink);
    border-color: var(--border-3);
    background: var(--surface-hover);
}

/* ── Wiki page layout (loaded with same style.css) ── */

.wiki-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 32px 96px;
    line-height: 1.75;
    color: var(--ink-2);
}

.wiki-page .wiki-back {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 40px;
    transition: color var(--t-fast);
}
.wiki-page .wiki-back:hover { color: var(--ink); }

.wiki-page .wiki-tag {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wiki-page .wiki-tag::before {
    content: '';
    width: 36px;
    height: 2px;
    background: var(--ink-5);
}

.wiki-page h1 {
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 18px;
}

.wiki-page .wiki-lead {
    font-size: 1.05rem;
    font-weight: 300;
    color: var(--ink-3);
    line-height: 1.7;
    margin-bottom: 64px;
    max-width: 600px;
}

.wiki-page h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-top: 56px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.wiki-page h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 32px;
    margin-bottom: 10px;
}

.wiki-page p {
    margin-bottom: 18px;
    color: var(--ink-2);
}

.wiki-page p.muted, .wiki-page .wiki-muted {
    color: var(--ink-3);
    font-size: 0.92rem;
}

.wiki-page ul, .wiki-page ol {
    padding-left: 22px;
    margin-bottom: 22px;
}

.wiki-page li {
    margin-bottom: 8px;
}

.wiki-page strong { color: var(--ink); font-weight: 600; }
.wiki-page em { color: var(--ink-3); font-style: italic; }

.wiki-page code, .wiki-page .wiki-formula {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--bg-2);
    color: var(--ink);
    padding: 1px 6px;
    border: 1px solid var(--border-2);
}

.wiki-page pre {
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.7;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-left: 3px solid var(--ink);
    padding: 16px 20px;
    margin-bottom: 22px;
    overflow-x: auto;
    color: var(--ink);
}

.wiki-page .wiki-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 28px 0 36px;
}

@media (max-width: 760px) {
    .wiki-page .wiki-modes { grid-template-columns: 1fr; }
}

.wiki-page .wiki-mode-card {
    border: 1px solid var(--border-2);
    background: var(--surface);
    padding: 20px 18px;
    border-top: 3px solid var(--ink);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wiki-page .wiki-mode-card .wiki-mode-chip {
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 3px 8px;
    border: 1px solid var(--ink);
    align-self: flex-start;
}

.wiki-page .wiki-mode-card h3 {
    margin: 0;
    font-size: 0.95rem;
}

.wiki-page .wiki-mode-card p {
    font-size: 0.85rem;
    color: var(--ink-3);
    margin: 0;
    line-height: 1.55;
}

.wiki-page .wiki-example {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-left: 3px solid var(--c-revenue);
    padding: 18px 22px;
    margin: 18px 0 28px;
}

.wiki-page .wiki-example .wiki-example-tag {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-revenue);
    margin-bottom: 6px;
    font-weight: 700;
}

.wiki-page .wiki-example p { margin-bottom: 0; }

.wiki-page table.wiki-table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 0.85rem;
}

.wiki-page table.wiki-table th,
.wiki-page table.wiki-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.wiki-page table.wiki-table th {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
    border-bottom: 1px solid var(--border-3);
}

.wiki-page table.wiki-table td.mono {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--ink);
}

.wiki-page .wiki-roadmap-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.92rem;
}

.wiki-page .wiki-roadmap-status {
    font-family: var(--mono);
    font-size: 0.7rem;
    width: 14px;
    color: var(--ink-5);
}
.wiki-page .wiki-roadmap-status.done { color: var(--success); }

.wiki-page .wiki-changelog {
    font-family: var(--mono);
    font-size: 0.74rem;
    line-height: 1.85;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    padding: 14px 18px;
    color: var(--ink-3);
    max-height: 340px;
    overflow-y: auto;
}

.wiki-page .wiki-changelog .changelog-row { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; }
.wiki-page .wiki-changelog .changelog-sha { color: var(--warning); }

/* Auth-loading state for wiki page (briefly shown while we check token) */
.wiki-loading {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
}

/* ==================== ACQUISITION CHANNELS (Phase 2 — 2026-05-19) ====================
   The channels panel sits between Curves and Products. Each row models a
   paid traffic source with a funnel + multi-anchor. Visual language:
     - Same brutalist surface chrome as the other panels.
     - Each channel row is a self-contained 4-band block: head (toggle/name/
       model/apply) → anchor strip → rates row → live derived summary.
     - Anchor input gets the same warning-shadow accent as the products row
       to scream "this is what you control".
     - Cost-rate inputs are de-emphasised when the anchor implies the chain
       doesn't need them — purely visual, they remain editable. */

.channels-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.channels-panel-header-left { min-width: 0; flex: 1 1 380px; }

.channels-wiki-link {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
    transition: all var(--t-fast);
    white-space: nowrap;
    align-self: center;
}
.channels-wiki-link:hover {
    color: var(--ink);
    border-color: var(--ink);
    background: var(--surface);
}

.channels-panel-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 28px 22px;
}

.channels-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.channels-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--ink-4);
    font-size: 0.85rem;
    font-style: italic;
    border: 1px dashed var(--border-3);
    background: var(--surface-2);
}

.channels-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.channels-status {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 6px 10px;
    transition: color var(--t-fast);
}
.channels-status.dirty { color: var(--warning); }

/* Aggregate totals strip — runs at the bottom of the channels panel. Sits
   like the products panel's MRR footer. Five short cells inline + Blended CAC
   accent on the right. */
.channels-totals {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--border-2);
    margin-top: 6px;
    background: var(--surface-2);
}

.channels-totals-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-right: 1px solid var(--border);
    align-items: flex-start;
}
.channels-totals-row:last-child { border-right: none; }

.channels-totals-tag {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.channels-totals-val {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.channels-totals-row-blend {
    background: var(--bg-2);
}
.channels-totals-row-blend .channels-totals-val {
    color: var(--warning);
}

/* ── A single channel row ─────────────────────────────────── */

.channel-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-2);
    background: var(--surface);
    transition: border-color var(--t-fast), background var(--t-fast);
    overflow: hidden;
}
.channel-row.is-dirty {
    border-color: var(--warning);
    background: var(--surface);
}
.channel-row.inactive {
    opacity: 0.55;
}
.channel-row.inactive .channel-derived-summary {
    opacity: 0.45;
}

.channel-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

.channel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 16px;
    border: 1px solid var(--border-3);
    background: var(--bg);
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast), border-color var(--t-fast);
    padding: 0;
    flex-shrink: 0;
}
.channel-toggle::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 1px;
    width: 12px;
    height: 12px;
    background: var(--ink-5);
    transition: transform var(--t-base), background var(--t-fast);
}
.channel-toggle.on {
    background: var(--ink);
    border-color: var(--ink);
}
.channel-toggle.on::before {
    background: #fff;
    transform: translateX(12px);
}

.channel-swatch {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-3);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.channel-input {
    padding: 6px 8px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    transition: all var(--t-fast);
    min-width: 0;
    flex: 1 1 180px;
}
.channel-input:hover { border-color: var(--border-2); background: var(--surface); }
.channel-input:focus { border-color: var(--ink); background: #fff; outline: none; }

.channel-model-picker {
    display: inline-flex;
    border: 1px solid var(--border-3);
    background: var(--surface);
    flex-shrink: 0;
}
.channel-model-chip {
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-3);
    cursor: pointer;
    transition: all var(--t-fast);
}
.channel-model-chip:last-child { border-right: none; }
.channel-model-chip:hover { color: var(--ink-2); background: var(--surface-hover); }
.channel-model-chip.active {
    color: #fff;
    background: var(--ink);
    box-shadow: inset 0 -2px 0 var(--warning);
}

.channel-row-spacer { flex: 1; }

/* Phase 13 — "Drives product" dropdown on the channel row head. */
.channel-drive {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.channel-drive-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
    white-space: nowrap;
}
.channel-drive-select {
    height: 24px;
    max-width: 170px;
    padding: 0 6px;
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-3);
    border-radius: 2px;
    cursor: pointer;
}
.channel-drive-select:focus { outline: none; border-color: var(--info); }
.channel-drive-link {
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--info);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.channel-drive-link.channel-drive-stale { color: var(--warning); }

.channel-unreachable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--warning);
    flex-shrink: 0;
}
.channel-unreachable-dot {
    width: 6px;
    height: 6px;
    background: var(--warning);
    border-radius: 50%;
}

.channel-apply {
    height: 26px;
    padding: 0 12px;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-5);
    background: transparent;
    border: 1px solid var(--border-3);
    cursor: not-allowed;
    transition: all var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.channel-apply:not(:disabled) { cursor: pointer; }
.channel-apply.dirty {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--warning) inset;
}
.channel-apply.dirty:hover {
    background: #222;
    transform: translateY(-1px);
}
.channel-apply:disabled.dirty { cursor: wait; opacity: 0.7; }

.channel-delete {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-5);
    border: 1px solid transparent;
    transition: all var(--t-fast);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.channel-delete:hover { color: var(--danger); border-color: var(--danger); }

/* ── Anchor strip — the heart of the channel ─────────────── */

.channel-row-anchor {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.channel-anchor-label {
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.channel-anchor-strip {
    display: inline-flex;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
    flex-wrap: wrap;
}

.channel-anchor-chip {
    padding: 5px 10px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-3);
    cursor: pointer;
    transition: all var(--t-fast);
    white-space: nowrap;
}
.channel-anchor-chip:last-child { border-right: none; }
.channel-anchor-chip:hover { color: var(--ink-2); background: var(--surface-hover); }
.channel-anchor-chip.active {
    color: #fff;
    background: var(--ink);
    box-shadow: inset 0 -2px 0 var(--warning);
}
.channel-anchor-chip.disabled,
.channel-anchor-chip[disabled] {
    color: var(--ink-6);
    cursor: not-allowed;
    background: transparent;
}
.channel-anchor-chip.disabled:hover { color: var(--ink-6); background: transparent; }

.channel-anchor-input {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}
.channel-anchor-input input.channel-num-anchor {
    width: 140px;
    padding: 7px 10px;
    border: 1px solid var(--border-3);
    background: #fff;
    font-family: var(--mono);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    transition: all var(--t-fast);
    box-shadow: inset 0 -2px 0 var(--warning);
}
.channel-anchor-input input.channel-num-anchor:focus {
    outline: none;
    border-color: var(--ink);
}

/* ── Rates (funnel + cost) row ─────────────────────────── */

.channel-row-rates {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.channel-rates-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.channel-group-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.channel-rates-fields {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.channel-rate-cell,
.channel-cost-cell {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 88px;
}

.channel-num-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-5);
}

input.channel-num {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-2);
    background: #fff;
    font-family: var(--mono);
    font-size: 0.78rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    transition: all var(--t-fast);
}
input.channel-num:hover { border-color: var(--border-3); }
input.channel-num:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.05);
}

input.channel-num-cost {
    background: var(--surface-2);
    color: var(--ink-3);
}
input.channel-num-cost:focus {
    background: #fff;
    color: var(--ink);
}

/* ── Live derived summary ────────────────────────────── */

.channel-derived-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 10px 18px;
    background: var(--surface-2);
    border-top: 1px dashed var(--border-2);
}

.channel-derived-cell {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 14px;
    border-right: 1px solid var(--border);
    min-width: 70px;
}
.channel-derived-cell:last-child { border-right: none; }
.channel-derived-cell.is-anchor {
    background: rgba(242, 163, 59, 0.10);
}

.channel-derived-label {
    font-family: var(--mono);
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-5);
}

.channel-derived-val {
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.channel-derived-cell.is-anchor .channel-derived-label {
    color: var(--warning);
}
.channel-derived-cac .channel-derived-val { color: var(--ink); }

/* ==================== LEGEND COSTS GROUP-CHIP (Phase 2) ==================== */

/* Wraps the group-chip + optional body of individual cost-band chips. When
   the panel is closed, only the group-chip is visible. Click to expand. */
.legend-cost-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.legend-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--border-3);
    background: var(--surface);
    transition: all var(--t-fast);
    font: inherit;
}
.legend-group-chip:hover {
    background: var(--surface-hover);
    border-color: var(--ink-5);
}
.legend-cost-group.open .legend-group-chip {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.legend-cost-group.open .legend-group-chip .legend-label { color: #fff; }

/* Mini swatch — vertical stack of band colors so the group-chip visually
   "previews" what it contains. */
.legend-group-swatch {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    height: 18px;
    width: 18px;
    overflow: hidden;
}
.legend-group-swatch-band {
    flex: 1;
    min-height: 3px;
}

.legend-group-caret {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--ink-4);
    width: 10px;
    text-align: center;
}
.legend-cost-group.open .legend-group-caret { color: #fff; }

/* Body: individual cost-band chips. Inset slightly so the visual hierarchy
   reads as "these are the things inside Costs". */
.legend-group-body {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
}
.legend-item-sub {
    padding: 3px 8px 3px 4px;
    font-size: 0.6rem;
}
.legend-item-sub .legend-label { font-size: 0.58rem; }
.legend-item-sub .legend-val { font-size: 0.58rem; }
.legend-item-sub .legend-swatch { width: 14px; height: 6px; }

/* ==================== INITIATIVES (Phase 3 — 2026-05-19) ====================
   Toggleable marketing "maßnahmen" that overlay time-varying effects + costs
   onto channels / products / curves / global. Visual language mirrors the
   channels panel (same brutalist surface chrome, same per-row Apply UX),
   with a slightly warmer accent (orange) so the "this layers on top" idea
   reads at a glance. */

.initiatives-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.initiatives-panel-header-left { min-width: 0; flex: 1 1 380px; }

.initiatives-wiki-link {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
    transition: all var(--t-fast);
    white-space: nowrap;
    align-self: center;
}
.initiatives-wiki-link:hover {
    color: var(--ink);
    border-color: var(--ink);
    background: var(--surface);
}

.initiatives-panel-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 28px 22px;
}

.initiatives-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.initiatives-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--ink-4);
    font-size: 0.85rem;
    font-style: italic;
    border: 1px dashed var(--border-3);
    background: var(--surface-2);
}

.initiatives-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.initiatives-status {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 6px 10px;
    transition: color var(--t-fast);
}
.initiatives-status.dirty { color: var(--warning); }

.initiatives-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--border-2);
    margin-top: 6px;
    background: var(--surface-2);
}
.initiatives-totals-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-right: 1px solid var(--border);
    align-items: flex-start;
}
.initiatives-totals-row:last-child { border-right: none; }
.initiatives-totals-tag {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.initiatives-totals-val {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.initiatives-totals-row-blend {
    background: var(--bg-2);
}
.initiatives-totals-row-blend .initiatives-totals-val {
    color: var(--warning);
}

/* ── A single initiative row ──────────────────────────── */

.initiative-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-2);
    background: var(--surface);
    transition: border-color var(--t-fast), background var(--t-fast);
    overflow: hidden;
}
.initiative-row.is-dirty {
    border-color: var(--warning);
    background: var(--surface);
}
.initiative-row.inactive {
    opacity: 0.55;
}

.initiative-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

.initiative-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 16px;
    border: 1px solid var(--border-3);
    background: var(--bg);
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast), border-color var(--t-fast);
    padding: 0;
    flex-shrink: 0;
}
.initiative-toggle::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 1px;
    width: 12px;
    height: 12px;
    background: var(--ink-5);
    transition: transform var(--t-base), background var(--t-fast);
}
.initiative-toggle.on {
    background: var(--ink);
    border-color: var(--ink);
}
.initiative-toggle.on::before {
    background: #fff;
    transform: translateX(12px);
}

.initiative-swatch {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-3);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.initiative-input {
    padding: 6px 8px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    transition: all var(--t-fast);
    min-width: 0;
    flex: 1 1 220px;
}
.initiative-input:hover { border-color: var(--border-2); background: var(--surface); }
.initiative-input:focus { border-color: var(--ink); background: #fff; outline: none; }

.initiative-row-desc {
    padding: 8px 18px;
    background: var(--surface);
    border-bottom: 1px dashed var(--border);
}
.initiative-row-desc .initiative-input {
    width: 100%;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ink-3);
    flex: 1;
}

.initiative-kind-picker {
    display: inline-flex;
    border: 1px solid var(--border-3);
    background: var(--surface);
    flex-shrink: 0;
}
.initiative-kind-chip {
    padding: 4px 10px;
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-3);
    cursor: pointer;
    transition: all var(--t-fast);
}
.initiative-kind-chip:last-child { border-right: none; }
.initiative-kind-chip:hover { color: var(--ink-2); background: var(--surface-hover); }
.initiative-kind-chip.active {
    color: #fff;
    background: var(--ink);
    box-shadow: inset 0 -2px 0 var(--warning);
}

.initiative-row-spacer { flex: 1; }

.initiative-apply {
    height: 26px;
    padding: 0 12px;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-5);
    background: transparent;
    border: 1px solid var(--border-3);
    cursor: not-allowed;
    transition: all var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.initiative-apply:not(:disabled) { cursor: pointer; }
.initiative-apply.dirty {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--warning) inset;
}
.initiative-apply.dirty:hover {
    background: #222;
    transform: translateY(-1px);
}
.initiative-apply:disabled.dirty { cursor: wait; opacity: 0.7; }

.initiative-delete {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-5);
    border: 1px solid transparent;
    transition: all var(--t-fast);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.initiative-delete:hover { color: var(--danger); border-color: var(--danger); }

/* ── Target row + Timing row body ─────────────────────── */

.initiative-row-target,
.initiative-row-timing {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.initiative-row-timing { border-bottom: none; background: var(--surface-2); }

.initiative-target-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.initiative-group-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.initiative-picker-fields {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.initiative-picker-cell {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
    flex: 1 1 130px;
}
.initiative-picker-cell.is-stale {
    background: rgba(220, 38, 38, 0.05);
    padding: 4px;
}

.initiative-picker-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-5);
}
.initiative-picker-cell.is-stale .initiative-picker-label { color: var(--danger); }

.initiative-select,
input.initiative-num {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-2);
    background: #fff;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    transition: all var(--t-fast);
}
.initiative-select { padding-right: 18px; }
.initiative-select:hover,
input.initiative-num:hover { border-color: var(--border-3); }
.initiative-select:focus,
input.initiative-num:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.05);
}
input.initiative-num { text-align: right; }

.initiative-op-strip {
    display: inline-flex;
    border: 1px solid var(--border-3);
    background: var(--bg-2);
    flex-shrink: 0;
}
.initiative-op-chip {
    padding: 6px 14px;
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink-4);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-3);
    cursor: pointer;
    transition: all var(--t-fast);
    min-width: 30px;
}
.initiative-op-chip:last-child { border-right: none; }
.initiative-op-chip:hover { color: var(--ink-2); background: var(--surface-hover); }
.initiative-op-chip.active {
    color: #fff;
    background: var(--ink);
    box-shadow: inset 0 -2px 0 var(--warning);
}

/* ==================== RESPONSIVE TWEAKS ==================== */

@media (max-width: 900px) {
    .channels-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .channels-totals-row:nth-child(3) { border-right: none; }
    .channels-totals-row:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
    .channel-row-rates { grid-template-columns: 1fr; gap: 16px; }
    .initiatives-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .initiatives-totals-row:nth-child(2) { border-right: none; }
    .initiatives-totals-row:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .initiative-row-target,
    .initiative-row-timing { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
    .channels-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .channel-row-head { flex-wrap: wrap; }
    .channel-row-anchor { flex-direction: column; align-items: flex-start; }
    .channels-panel-body { padding-left: 14px; padding-right: 14px; }
    .initiative-row-head { flex-wrap: wrap; }
    .initiatives-panel-body { padding-left: 14px; padding-right: 14px; }
}

/* Wiki overhaul (Phase 6 — 2026-05-19)
   The Phase 6 rewrite renders the changelog as a single <pre> inside
   .wiki-changelog. The container already paints the bg + border, so the
   inner <pre> needs to drop its own chrome to avoid the double-box look. */
.wiki-page .wiki-changelog pre {
    background: transparent;
    border: 0;
    border-left: 0;
    padding: 0;
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.85;
    color: var(--ink-3);
}

/* ==================== CHART OVERLAYS (Phase 8 — 2026-05-19) ====================
   "+ ADD METRIC" button + overlay chips row + cascading picker popover.
   Overlay chips sit BELOW the existing legend chips (cost/revenue/profit)
   on their own row so a busy stack stays legible. The picker is a portaled
   popover anchored to the + button. */

.legend-overlays-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-2);
}

.legend-overlays-empty {
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    padding: 2px 6px;
}

.legend-overlay-chip {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 0.6rem;
    transition: all var(--t-fast);
    overflow: hidden;
}
.legend-overlay-chip:hover {
    border-color: var(--ink-2);
}
.legend-overlay-chip.muted .legend-overlay-swatch,
.legend-overlay-chip.muted .legend-overlay-label,
.legend-overlay-chip.muted .legend-overlay-tag {
    opacity: 0.35;
}

.legend-overlay-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.legend-overlay-swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.legend-overlay-label {
    color: var(--ink);
    font-size: 0.6rem;
    line-height: 1;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-overlay-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 2px;
}

.legend-overlay-x {
    appearance: none;
    background: none;
    border: 0;
    border-left: 1px solid var(--border-2);
    color: var(--ink-3);
    cursor: pointer;
    padding: 0 6px;
    font-size: 0.7rem;
    line-height: 1;
    transition: all var(--t-fast);
}
.legend-overlay-x:hover {
    color: var(--danger, #E54E3E);
    background: rgba(229, 78, 62, 0.08);
}

.legend-overlays-warn {
    font-size: 0.7rem;
    color: var(--warning, #F2A33B);
    padding: 0 4px;
    cursor: help;
}

.legend-overlay-add {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    background: none;
    border: 1px dashed var(--border);
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--t-fast);
}
.legend-overlay-add:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--surface-hover);
}
.legend-overlay-add-plus {
    font-size: 0.8rem;
    line-height: 1;
    font-weight: 700;
}
.legend-overlay-add-text {
    line-height: 1;
}

/* ==== Overlay picker popover ==== */

.overlay-picker-popover {
    position: absolute;
    z-index: 200;
    width: 320px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--ink);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    padding: 8px 0;
    font-family: var(--sans);
    font-size: 0.78rem;
}

.overlay-picker-header {
    padding: 4px 14px 8px;
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-3);
    border-bottom: 1px solid var(--border-2);
    margin-bottom: 6px;
}

.overlay-picker-cat-title {
    padding: 10px 14px 4px;
    font-family: var(--mono);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-weight: 600;
}

.overlay-picker-entity {
    padding: 4px 14px;
    font-size: 0.72rem;
    color: var(--ink-2);
    background: var(--surface-2);
    border-top: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
    font-weight: 500;
}

.overlay-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 14px 5px 22px;
    background: none;
    border: 0;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.72rem;
    text-align: left;
    transition: background var(--t-fast);
}
.overlay-picker-item:hover { background: var(--surface-hover); }
.overlay-picker-item.added {
    color: var(--ink-3);
    cursor: default;
}
.overlay-picker-item.added:hover { background: none; }

.overlay-picker-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: 2px;
    font-family: var(--mono);
}

.overlay-picker-name { flex: 1; }

.overlay-picker-check {
    color: var(--ink-3);
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .overlay-picker-popover {
        width: calc(100vw - 24px);
        max-height: 70vh;
    }
}

/* ==================== INITIATIVE CHART RAIL + PINS + IMPACT (Phase 9 — 2026-05-19)
   Kraken/Coinbase-style side rail next to the chart, top-of-chart pin layer
   with hover tooltips, dashed vertical markers on canvas, plus the inline
   impact-chain footer on each Initiatives panel row.

   Layout: .chart-card-body is a flex row — .chart-area grows, .chart-rail
   is a fixed-width compact sidebar on the right. The pin layer is an
   absolute overlay on top of the canvas (above bands, below tooltips).
   ──────────────────────────────────────────────────────────────────────── */

.chart-card-body {
    display: flex;
    gap: 18px;
    align-items: stretch;
}
.chart-area {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}
/* Axis tags ride inside chart-area now — anchor them to its corners. */
.chart-area > .chart-axis-tag {
    top: 0;
    right: 6px;
}
.chart-area > .chart-axis-tag.chart-axis-tag-x {
    top: auto;
    bottom: 0;
    right: 6px;
}
.chart-host-wrap {
    position: relative;
    width: 100%;
}
.chart-pin-host {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 32px;
    pointer-events: none;
    z-index: 5;
}
/* Children of pin-host are clickable / hoverable. */
.chart-pin-host .chart-pin,
.chart-pin-host .chart-pin-bracket,
.chart-pin-host .chart-pin-tooltip {
    pointer-events: auto;
}

.chart-pin {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 4px;
    background: var(--surface);
    border: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.52rem;
    letter-spacing: 0.05em;
    color: var(--ink);
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    z-index: 6;
    white-space: nowrap;
    max-width: 160px;
}
.chart-pin:hover {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.chart-pin.is-pulse {
    animation: pinPulse 1s ease-out;
}
@keyframes pinPulse {
    0%   { transform: translateX(-50%) scale(1); }
    30%  { transform: translateX(-50%) scale(1.18); box-shadow: 0 0 0 4px rgba(249, 122, 75, 0.25); }
    100% { transform: translateX(-50%) scale(1); }
}

.chart-pin-end {
    opacity: 0.72;
    font-style: italic;
}
.chart-pin-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chart-pin-label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* Bracket = thin coloured line between t_start and t_end at the top of
   the chart. Sits just below the pin row so the pins overlap it cleanly. */
.chart-pin-bracket {
    position: absolute;
    top: 12px;
    height: 2px;
    z-index: 4;
    transition: opacity var(--t-fast);
}
.chart-pin-bracket.is-pulse {
    opacity: 1 !important;
    height: 3px;
}

/* Shared pin-tooltip. One per pin-host, repositioned on hover. */
.chart-pin-tooltip {
    position: absolute;
    display: none;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    padding: 8px 10px;
    font-family: var(--sans);
    font-size: 0.72rem;
    line-height: 1.45;
    max-width: 280px;
    border: 1px solid var(--ink);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
.chart-pin-tooltip strong {
    color: #fff;
    font-weight: 700;
}

/* ── Chart side rail (Kraken/Coinbase-inspired) ────────── */

.chart-rail {
    flex: 0 0 264px;
    max-width: 264px;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 460px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--mono);
    font-size: 0.62rem;
}

.chart-rail-empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 6px;
    text-align: center;
}
.chart-rail-empty-tag {
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 700;
}
.chart-rail-empty-desc {
    font-size: 0.62rem;
    color: var(--ink-3);
    font-family: var(--sans);
    font-style: italic;
}

.chart-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.chart-rail-header-tag {
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-2);
}
.chart-rail-header-count {
    font-size: 0.6rem;
    color: var(--ink-4);
    background: var(--bg-2);
    padding: 1px 6px;
    border: 1px solid var(--border-2);
    font-variant-numeric: tabular-nums;
}

.chart-rail-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 6px 7px;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--border);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.chart-rail-row:hover {
    background: var(--surface);
    border-color: var(--border-2);
}
.chart-rail-row.inactive {
    opacity: 0.55;
}

.chart-rail-row-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.chart-rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 12px;
    border: 1px solid var(--border-3);
    background: var(--bg);
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast), border-color var(--t-fast);
    padding: 0;
    flex-shrink: 0;
}
.chart-rail-toggle::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 1px;
    width: 8px;
    height: 8px;
    background: var(--ink-5);
    transition: transform var(--t-base), background var(--t-fast);
}
.chart-rail-toggle.on {
    background: var(--ink);
    border-color: var(--ink);
}
.chart-rail-toggle.on::before {
    background: #fff;
    transform: translateX(10px);
}

.chart-rail-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border: 1px solid var(--border-3);
}

.chart-rail-name {
    flex: 1 1 auto;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    transition: color var(--t-fast);
}
.chart-rail-name:hover {
    color: var(--info, #4B7BF9);
    text-decoration: underline;
}

.chart-rail-chevron {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: 1px solid transparent;
    color: var(--ink-4);
    font-family: var(--mono);
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 4px;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
    flex-shrink: 0;
}
.chart-rail-chevron:hover {
    color: var(--ink);
    border-color: var(--border-3);
}
.chart-rail-chevron.is-open {
    color: var(--ink);
    border-color: var(--border-3);
    background: var(--bg-2);
}
.chart-rail-chev-glyph { font-size: 0.6rem; line-height: 1; }
.chart-rail-chev-text { letter-spacing: 0.12em; font-weight: 600; }

.chart-rail-row-chain {
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.05em;
    color: var(--ink-3);
    padding-left: 22px;
    line-height: 1.45;
    word-break: break-word;
    text-transform: none;
}

.chart-rail-row-expand {
    margin-top: 4px;
    padding: 6px 6px 6px 22px;
    background: var(--bg-2);
    border-left: 2px solid var(--border-3);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.chart-rail-expand-line {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: 0.55rem;
    line-height: 1.45;
    word-break: break-word;
}
.chart-rail-expand-tag {
    flex: 0 0 50px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink-4);
    text-transform: uppercase;
}
.chart-rail-expand-val {
    flex: 1;
    color: var(--ink-2);
    font-family: var(--mono);
}

/* ── Impact-chain footer on Initiatives panel rows ────── */

.initiative-impact-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}

.initiative-impact-line {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 0.62rem;
    line-height: 1.4;
}
.initiative-impact-name {
    color: var(--ink);
    font-weight: 700;
    text-transform: none;
    flex-shrink: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.initiative-impact-arrow {
    color: var(--ink-4);
    font-size: 0.66rem;
    flex-shrink: 0;
}
.initiative-impact-chain {
    color: var(--ink-3);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.initiative-impact-chevron {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border-3);
    color: var(--ink-4);
    font-family: var(--mono);
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 3px 8px;
    cursor: pointer;
    transition: all var(--t-fast);
    flex-shrink: 0;
}
.initiative-impact-chevron:hover {
    color: var(--ink);
    border-color: var(--ink-2);
}
.initiative-impact-chevron.is-open {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
}
.initiative-impact-chev-glyph { font-size: 0.62rem; line-height: 1; }
.initiative-impact-chev-text  { font-weight: 700; }

.initiative-impact-expand {
    display: none;
    padding: 10px 18px 14px;
    background: var(--bg-2);
    border-top: 1px dashed var(--border-3);
    flex-direction: column;
    gap: 5px;
}
.initiative-impact-expand.is-open { display: flex; }
.initiative-impact-expand-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 0.7rem;
    line-height: 1.5;
}
.initiative-impact-expand-tag {
    flex: 0 0 70px;
    font-family: var(--mono);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.initiative-impact-expand-val {
    flex: 1;
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 0.7rem;
    word-break: break-word;
}

/* ── Impact-chain direction arrows (Phase 10) ──────────────
   Shared across rail row, panel footer, expand, and pin tooltip.
   Arrows are colour-tagged ONLY when we're confident about the
   profit-direction of the metric; otherwise neutral grey (we
   deliberately don't over-claim). */
.ic-arrow {
    font-weight: 700;
    font-style: normal;
}
.ic-good    { color: var(--success); }   /* moves toward profit */
.ic-bad     { color: var(--danger); }    /* moves away from profit */
.ic-neutral { color: var(--ink-4); }     /* unsure → grey, no claim */
.ic-sep     { color: var(--ink-4); opacity: 0.7; }
.ic-op      { color: var(--ink-2); font-weight: 600; }
.ic-iniName { color: var(--ink); font-weight: 700; text-transform: none; }
.ic-more    { color: var(--ink-4); }

/* Row-flash highlight when scrolled-to from rail / pin click. */
.initiative-row.is-flash {
    box-shadow: 0 0 0 2px var(--warning, #F2A33B);
    transition: box-shadow var(--t-base);
}

/* Compact rail layout on narrower screens. Stack rail below chart. */
@media (max-width: 1100px) {
    .chart-rail { flex: 0 0 240px; max-width: 240px; }
}
@media (max-width: 900px) {
    .chart-card-body { flex-direction: column; }
    .chart-rail {
        flex: 1 1 auto;
        max-width: none;
        max-height: 260px;
    }
}

/* ==================== CHART-HERO LAYOUT + COLLAPSE + FOCUS (Phase 15 — 2026-05-20)
   The chart is the workspace. It grows to fill the viewport as the panels below
   it collapse, and approaches near-fullscreen in Focus mode. Every panel below
   the chart collapses to a slim header bar (mono-caps title + muted state
   summary + chevron). The chart-side initiative rail collapses to a thin spine
   or hides entirely to reclaim width for the curve.

   Collapse mechanism: a `.collapsible` panel toggles `.is-collapsed`, which
   hides every direct child EXCEPT the `.panel-collapse-bar`. We use `display`
   here, NOT the `hidden` attribute — the historic panel already uses `[hidden]`
   for its "history == 0" conditional show/hide, and `[hidden]{display:none
   !important}` would otherwise fight a max-height transition. Keeping the two
   orthogonal: `hidden` removes the WHOLE panel (incl. its collapse bar);
   `.is-collapsed` keeps the bar and folds away the body.
   ──────────────────────────────────────────────────────────────────────── */

/* ── The chart card gets slightly more visual weight (it's the hero) ──── */
.chart-card {
    border-color: var(--border-3);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 18px 40px -28px rgba(0, 0, 0, 0.22);
}

/* ── Panel collapse bar ────────────────────────────────────────────────
   A quiet, full-width header button. Mono-caps title + a muted one-line
   summary of the panel's state when collapsed. Sits ABOVE the existing
   panel-header; when expanded it reads as a thin breadcrumb, when collapsed
   it's the only thing left. */
.panel.collapsible { position: relative; }

.panel-collapse-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 28px;
    background: var(--surface-2);
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    color: var(--ink-3);
    transition: background var(--t-fast), color var(--t-fast);
    font-family: var(--mono);
}
.panel-collapse-bar:hover { background: var(--surface-hover); color: var(--ink); }
.panel-collapse-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.panel-collapse-chevron {
    flex: 0 0 auto;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--ink-4);
    transition: transform var(--t-base), color var(--t-fast);
}
.panel.is-collapsed .panel-collapse-chevron { transform: rotate(-90deg); }
.panel-collapse-bar:hover .panel-collapse-chevron { color: var(--ink-2); }

.panel-collapse-title {
    flex: 0 0 auto;
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-2);
}

.panel-collapse-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: var(--ink-4);
    text-transform: none;
    /* Only show the summary when collapsed — expanded, the real header below
       carries the title + description, so a duplicate would be noise. */
    opacity: 0;
    transition: opacity var(--t-fast);
}
.panel.is-collapsed .panel-collapse-summary { opacity: 1; }

/* When collapsed: fold away EVERY direct child except the collapse bar.
   This deliberately uses display (not [hidden]) so it never collides with the
   historic panel's [hidden] conditional. */
.panel.is-collapsed > :not(.panel-collapse-bar) { display: none; }
.panel.is-collapsed .panel-collapse-bar { border-bottom: none; }

/* On wide screens the bar can sit a touch tighter against narrow panels. */
@media (max-width: 900px) {
    .panel-collapse-bar { padding-left: 14px; padding-right: 14px; }
}

/* ── Chart-side rail: collapse to a thin spine, or hide entirely ───────
   The rail lives inside .chart-rail-wrap alongside a collapse button (a sibling
   of the rail so chart.js's innerHTML re-render never clobbers it). When
   collapsed, .chart-card gets .rail-collapsed: the wrap is hidden and a thin
   vertical strip appears that expands the rail back on click. The freed width
   flows to .chart-area automatically (it's flex:1). */
.chart-rail-wrap {
    position: relative;
    flex: 0 0 264px;
    max-width: 264px;
    display: flex;
}
.chart-rail-wrap .chart-rail {
    flex: 1 1 auto;
    max-width: none;
}
/* Keep the rail header (tag + count) clear of the absolute collapse button
   that floats over the rail's top-right corner. */
.chart-rail-wrap .chart-rail-header,
.chart-rail-wrap .chart-rail-empty { padding-right: 30px; }

.chart-rail-collapse {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 7;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border-2);
    color: var(--ink-4);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.chart-rail-collapse:hover { color: var(--ink); border-color: var(--border-3); background: var(--surface-hover); }

/* The thin collapsed strip — hidden by default, shown when rail is collapsed. */
.chart-rail-strip {
    display: none;
    flex: 0 0 26px;
    max-width: 26px;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    cursor: pointer;
    color: var(--ink-3);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    font-family: var(--mono);
}
.chart-rail-strip:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--border-3); }
.chart-rail-strip-chev { font-size: 0.85rem; line-height: 1; }
.chart-rail-strip-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}
.chart-rail-strip-count {
    font-size: 0.55rem;
    color: var(--ink-4);
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    padding: 1px 4px;
    font-variant-numeric: tabular-nums;
}

/* Rail collapsed state — hide the wrap, show the strip. */
.chart-card.rail-collapsed .chart-rail-wrap { display: none; }
.chart-card.rail-collapsed .chart-rail-strip { display: flex; }

/* ── Focus mode — collapse ALL panels + rail + grow the chart ──────────
   The body class drives the chart-height bump; the per-panel .is-collapsed +
   the card's .rail-collapsed are applied by the layout manager so toggling
   Focus OFF can restore the user's prior per-panel state. */
.btn-focus.is-active {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}
.btn-focus.is-active:hover { background: var(--ink-2); }
.topbar-divider-focus { /* same look as .topbar-divider, just a hook */ }

/* In focus mode, drop the inter-panel gap to almost nothing and dim the
   collapsed panel stack so the eye rests on the curve. The chart card itself
   stays full-strength. */
body.sim-focus .sim-view { gap: 10px; }
body.sim-focus .sim-headline { padding-bottom: 12px; }
body.sim-focus .scenario-compare-placeholder { opacity: 0.5; }
body.sim-focus .chart-card {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 60px -30px rgba(0, 0, 0, 0.3);
}
/* In focus mode, hide even the thin rail spine — it's just the curve. The
   rail comes back the moment you leave focus (or expand it manually). */
body.sim-focus .chart-card.rail-collapsed .chart-rail-strip { display: none; }

/* Reduced motion: skip the height transition. */
@media (prefers-reduced-motion: reduce) {
    .chart-host { transition: none; }
    .panel-collapse-chevron { transition: none; }
}

/* Narrow screens — the rail-wrap should match the rail's stacked behaviour. */
@media (max-width: 1100px) {
    .chart-rail-wrap { flex: 0 0 240px; max-width: 240px; }
}
@media (max-width: 900px) {
    .chart-rail-wrap { flex: 1 1 auto; max-width: none; }
    .chart-rail-wrap .chart-rail { max-height: 260px; }
    /* On a stacked (vertical) layout, the collapsed strip spans full width as a
       short horizontal bar rather than a tall spine. */
    .chart-rail-strip {
        flex: 1 1 auto;
        max-width: none;
        flex-direction: row;
        justify-content: center;
        padding: 8px 0;
    }
    .chart-rail-strip-label { writing-mode: horizontal-tb; }
}

/* ==================== TRUE FULLSCREEN IMMERSIVE MODE (Phase 16 — 2026-05-20)
   "Cream Terminal." A second, ADDITIVE mode alongside the normal scroll page
   and the Phase-15 in-page Focus mode. We fullscreen #simStage (which already
   wraps the chart card + every control panel) via the browser Fullscreen API,
   then toggle `.immersive` on it. Pure CSS restyles its children into a premium
   trading-terminal cockpit:
     · the chart card fills the whole viewport, edge to edge,
     · the panels become left-edge slide-in DRAWERS toggled by a thin icon-rail,
     · a slim floating top bar carries the sim switcher + actions + exit.
   The SAME panel DOM keeps ALL its Phase 1-15 wiring — only the paint changes.
   Toggling the class in/out is lossless: normal mode is 100% untouched.

   Aesthetic (frontend-design): keep the editorial-brutalist light palette but
   shift it into a denser cockpit register — a deep cream→paper gradient with a
   faint dot-grain texture so it reads as a terminal canvas, NOT a webpage.
   Matte-white floating-glass drawers, sharp 1px ink borders (no radii),
   mono-caps instrument labels, hairline left rail, smooth 240ms drawer slides.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Normal mode: the stage is a transparent pass-through ──────────────────
   `display:contents` removes the wrapper box so the chart card + panels lay
   out EXACTLY as before inside .sim-view's flex column. The immersive chrome
   (top bar, rail, scrim) is display:none and never affects the page. */
.sim-stage { display: contents; }
.imm-topbar, .imm-rail, .imm-scrim { display: none; }

/* ── Immersive mode ────────────────────────────────────────────────────────
   #simStage IS the fullscreen element, so it already fills the screen. We make
   it a positioned cockpit surface and lay the chart + chrome inside it. */
.sim-stage.immersive {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    /* Premium cream→paper terminal canvas + faint dot grain. */
    background:
        radial-gradient(rgba(10,10,10,0.022) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(155deg, #fbfaf8 0%, #f3f1ec 48%, #ebe8e2 100%);
    --imm-rail-w: 56px;
    --imm-top-h: 50px;
    /* Phase 20: wider drawers — the user works INSIDE the drawer (open → edit
       data → close → see chart change), so it needs comfortable horizontal room
       (the dense Channels/Products/Initiatives panels benefit most). The chart
       stays visible to the right (behind the scrim); the cap keeps it from
       eating the whole viewport. */
    --imm-drawer-w: min(46vw, 560px);
    --t-drawer: 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    animation: immFadeIn 0.28s ease both;
}
@keyframes immFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* The :fullscreen pseudo guards against any stray styling when this element is
   genuinely the fullscreen target (also helps on Safari's -webkit prefix). */
.sim-stage:fullscreen { background: linear-gradient(155deg, #fbfaf8 0%, #f3f1ec 48%, #ebe8e2 100%); }
.sim-stage:-webkit-full-screen { width: 100%; height: 100%; }

/* ── The chart card becomes the full-bleed hero ───────────────────────────
   It fills the viewport inside the top bar + left rail. No card border/shadow
   — the chart floats directly on the terminal canvas. */
.sim-stage.immersive .chart-card {
    position: absolute;
    top: var(--imm-top-h);
    left: var(--imm-rail-w);
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 14px 26px 22px 22px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: none;
}
.sim-stage.immersive .chart-card-body { flex: 1 1 auto; min-height: 0; }
.sim-stage.immersive .chart-area { min-height: 0; }
/* The chart host fills all remaining vertical space — uPlot reads
   host.clientHeight via requestResize() on fullscreenchange. */
.sim-stage.immersive .chart-host {
    height: 100% !important;
    transition: none;
}
.sim-stage.immersive .chart-host-wrap { height: 100%; }

/* Legend: a slim floating glass strip top-left of the chart, out of the way. */
.sim-stage.immersive .chart-legend {
    margin: 0 0 10px 0;
    padding: 6px 12px;
    background: rgba(255,255,255,0.66);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-2);
    gap: 14px;
    row-gap: 6px;
    max-width: 100%;
}

/* Keep the Phase-9 initiative rail usable but compact on the chart's right. */
.sim-stage.immersive .chart-rail-wrap { flex: 0 0 230px; max-width: 230px; }

/* ── Floating top bar ──────────────────────────────────────────────────────
   Slim, glassy, monochromatic. Sim name + switcher · KPI mirror · actions. */
.sim-stage.immersive .imm-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--imm-top-h);
    padding: 0 16px 0 calc(var(--imm-rail-w) + 8px);
    background: rgba(250,249,247,0.82);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid var(--border-2);
    z-index: 40;
    animation: immTopIn 0.32s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes immTopIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.imm-topbar-left { display: flex; align-items: center; gap: 12px; position: relative; }
.imm-brand {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.imm-brand-sub { color: var(--ink-4); font-weight: 500; font-size: 0.56rem; letter-spacing: 0.22em; }
.imm-topbar-divider { width: 1px; height: 18px; background: var(--border-3); }

.imm-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--border-3);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    max-width: 260px;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.imm-switcher-btn:hover { border-color: var(--ink); background: var(--surface-hover); }
.imm-switcher-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imm-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--ink);
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.4);
    z-index: 60;
    padding: 4px;
}

.imm-topbar-kpis {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 auto;
    overflow: hidden;
}
/* Reuse the page's .kpi cell markup, scaled down for the slim bar. */
.imm-topbar-kpis .kpi { display: flex; align-items: baseline; gap: 8px; }
.imm-topbar-kpis .kpi-label {
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
    white-space: nowrap;
}
.imm-topbar-kpis .kpi-val {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.imm-topbar-kpis .kpi-val.pos { color: var(--success); }
.imm-topbar-kpis .kpi-val.neg { color: var(--danger); }

.imm-topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.imm-act {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border-3);
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.imm-act:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-hover); }
.imm-act-danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(229,78,62,0.06); }
.imm-act-exit {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}
.imm-act-exit:hover { background: var(--ink-2); color: var(--surface); border-color: var(--ink-2); }
/* Phase 20 — drawer-sound toggle. Muted = visibly dimmed so the off-state
   reads at a glance (the icon also swaps to the slashed speaker). */
.imm-act-sound.is-muted { color: var(--ink-5); border-color: var(--border-3); }
.imm-act-sound.is-muted:hover { color: var(--ink-2); border-color: var(--ink); }

/* ── Left instrument rail ──────────────────────────────────────────────────
   Hairline vertical rail with icon buttons. The active drawer's button is
   inked-in. A hover flyout label slides out (cockpit instrument feel). */
.sim-stage.immersive .imm-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--imm-rail-w);
    padding: calc(var(--imm-top-h) + 10px) 0 12px;
    background: rgba(247,246,243,0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--border-2);
    z-index: 45;
    animation: immRailIn 0.34s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes immRailIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.imm-rail-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.imm-rail-btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.imm-rail-btn:hover { color: var(--ink); background: var(--surface); border-color: var(--border-2); }
.imm-rail-btn.is-active {
    color: var(--surface);
    background: var(--ink);
    border-color: var(--ink);
}
/* Active marker — a small ink tick on the rail's right edge. */
.imm-rail-btn.is-active::after {
    content: '';
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    background: var(--ink);
}
/* Hover flyout label. */
.imm-rail-tip {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 4px 9px;
    background: var(--ink);
    color: var(--surface);
    font-family: var(--mono);
    font-size: 0.54rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
    z-index: 50;
}
.imm-rail-btn:hover .imm-rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.imm-rail-wiki { color: var(--ink-4); margin-top: 8px; }

/* ── Drawers ────────────────────────────────────────────────────────────────
   Every control panel becomes an absolutely-positioned floating-glass drawer
   docked just right of the rail, off-screen by default, sliding in when its
   rail button marks it `.is-drawer-active`. It KEEPS its full Phase-1-15 inner
   markup + handlers — we only re-box and reposition it. */
.sim-stage.immersive .panel[data-drawer] {
    position: absolute;
    top: var(--imm-top-h);
    left: var(--imm-rail-w);
    bottom: 0;
    width: var(--imm-drawer-w);
    max-width: calc(100vw - var(--imm-rail-w));
    margin: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    border: none;
    border-right: 1px solid var(--ink);
    box-shadow: 26px 0 60px -34px rgba(0,0,0,0.45);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 30;
    transform: translateX(-104%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t-drawer), opacity var(--t-drawer), visibility 0s linear 0.24s;
    padding-bottom: 28px;
}
.sim-stage.immersive .panel[data-drawer].is-drawer-active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform var(--t-drawer), opacity var(--t-drawer), visibility 0s;
}

/* Inside a drawer: the slim Phase-15 collapse bar becomes the drawer's sticky
   header, and we FORCE the body open (the drawer itself is the collapse — its
   rail button is the toggle), overriding any persisted .is-collapsed so the
   controls are always present when the drawer slides in. */
.sim-stage.immersive .panel[data-drawer] .panel-collapse-bar {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(250,249,247,0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-2);
    padding: 13px 18px;
    cursor: default;
}
.sim-stage.immersive .panel[data-drawer] .panel-collapse-chevron { display: none; }
.sim-stage.immersive .panel[data-drawer] .panel-collapse-summary { opacity: 1; }
/* Note: Phase-15's `.is-collapsed` (which hides the body in-page) is stripped
   from drawer panels by the Immersive manager on enter — the drawer slide is
   the collapse mechanism in fullscreen — and re-applied by Layout on exit. So
   no fragile `display:revert` override is needed here; the body shows naturally. */

/* Drawer inner padding — the panel header + body get breathing room without
   the page's wide gutters. */
.sim-stage.immersive .panel[data-drawer] .panel-header,
.sim-stage.immersive .panel[data-drawer] .curves-panel-header,
.sim-stage.immersive .panel[data-drawer] .channels-panel-header,
.sim-stage.immersive .panel[data-drawer] .initiatives-panel-header,
.sim-stage.immersive .panel[data-drawer] .historic-panel-header {
    padding: 16px 18px 12px;
}
.sim-stage.immersive .panel[data-drawer] .curves-panel-body,
.sim-stage.immersive .panel[data-drawer] .channels-panel-body,
.sim-stage.immersive .panel[data-drawer] .initiatives-panel-body,
.sim-stage.immersive .panel[data-drawer] .historic-panel-body,
.sim-stage.immersive .panel[data-drawer] .products-table,
.sim-stage.immersive .panel[data-drawer] .panel-footer,
.sim-stage.immersive .panel[data-drawer] .products-wom-totals,
.sim-stage.immersive .panel[data-drawer] .channels-totals,
.sim-stage.immersive .panel[data-drawer] .initiatives-totals {
    padding-left: 18px;
    padding-right: 18px;
}
/* Phase 20 — Curves header wrap fix.
   In the page, `.curves-panel-header` is a 2-col grid
   (`minmax(0,1fr) auto`): title block | horizon controls side-by-side. Inside
   the narrow drawer the `auto` controls column claimed its natural width and
   crushed the `minmax(0,1fr)` title column to near-zero, so the title +
   explainer wrapped ONE WORD PER LINE. The other drawers don't have this 2-col
   header. Fix: in the drawer give the header a single full-width column so the
   title/explainer wrap normally and the horizon row sits on its OWN full-width
   row below them. (Page / non-fullscreen layout is untouched — this is scoped
   to `.sim-stage.immersive .panel[data-drawer]`.) */
.sim-stage.immersive .panel[data-drawer] .curves-panel-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}
.sim-stage.immersive .panel[data-drawer] .curves-panel-header-left { width: 100%; }
/* The horizon row gets its own full-width row and wraps its fields nicely. */
.sim-stage.immersive .panel[data-drawer] .curves-horizon-row { width: 100%; flex-wrap: wrap; gap: 10px; }
/* Products table is wide — let it scroll horizontally inside the drawer. */
.sim-stage.immersive .panel[data-drawer="products"] .products-table { overflow-x: auto; }

/* ── Backdrop scrim ─────────────────────────────────────────────────────────
   Fades a faint veil over the chart when a drawer is open (focuses the eye on
   the drawer) and is the click-away close target. Sits below the drawer/rail,
   above the chart. */
.sim-stage.immersive .imm-scrim {
    display: block;
    position: absolute;
    top: var(--imm-top-h);
    left: var(--imm-rail-w);
    right: 0;
    bottom: 0;
    background: rgba(20,20,20,0.10);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-drawer), visibility 0s linear 0.24s;
    z-index: 20;
    cursor: pointer;
}
.sim-stage.immersive.drawer-open .imm-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t-drawer), visibility 0s;
}

/* ── Alias-button feedback ──────────────────────────────────────────────────
   The Time + Overlays rail buttons don't own a persistent drawer; they flash
   on click. The legend / horizon-row pulse points the eye to the live control. */
.imm-rail-btn.is-flash {
    animation: immRailFlash 0.6s ease;
}
@keyframes immRailFlash {
    0%, 100% { background: transparent; color: var(--ink-3); }
    35%      { background: var(--ink); color: var(--surface); }
}
.imm-pulse {
    animation: immPulse 1.1s cubic-bezier(0.16,1,0.3,1);
}
@keyframes immPulse {
    0%   { box-shadow: 0 0 0 0 rgba(10,10,10,0.0); }
    25%  { box-shadow: 0 0 0 3px rgba(10,10,10,0.45); }
    100% { box-shadow: 0 0 0 0 rgba(10,10,10,0.0); }
}

/* ── Portaled overlays (toast + modal) while fullscreen ─────────────────────
   Re-parented into #simStage by the Immersive manager so they paint in
   fullscreen. They're position:fixed already; the high z-index keeps them above
   the rail (45) / top bar (40) / drawers (30). */
.imm-portal { z-index: 300; }
.sim-stage.immersive .toast-root { z-index: 320; }
.sim-stage.immersive .modal-backdrop { z-index: 310; }

/* ── Immersive button in the page topbar (entry affordance) ───────────────── */
.btn-immersive.is-active {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}
.btn-immersive.is-active:hover { background: var(--ink-2); }

/* ── Narrow viewports: full-width drawers, slimmer rail ───────────────────── */
@media (max-width: 720px) {
    .sim-stage.immersive { --imm-drawer-w: 100vw; --imm-rail-w: 50px; }
    .sim-stage.immersive .panel[data-drawer] { left: 0; max-width: 100vw; z-index: 46; }
    .sim-stage.immersive .imm-topbar-kpis { display: none; }
}

/* ── Reduced motion: no slides, just fades ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sim-stage.immersive,
    .sim-stage.immersive .imm-topbar,
    .sim-stage.immersive .imm-rail { animation: none; }
    .sim-stage.immersive .panel[data-drawer] { transition: opacity var(--t-base), visibility 0s; transform: none; }
    .sim-stage.immersive .panel[data-drawer]:not(.is-drawer-active) { transform: none; }
}

/* ==================== FIELD INFO TOOLTIPS (Phase 18 — 2026-05-20) ==========
   A tiny muted ⓘ glyph that sits flush next to a label / column header / chip.
   Hover or keyboard-focus inks it and opens a small matte card popover with a
   plain-language explanation + an optional "→ Wiki" deeplink. The popover is
   portaled to <body> (or the fullscreen element) and positioned via JS, so it
   escapes any overflow:hidden / clipping container and works in the Phase-16
   immersive drawers too. Pure UI — no math, no layout reflow of the host rows.
   ────────────────────────────────────────────────────────────────────────── */

/* The inline glyph. Sits in the text flow next to a label without disturbing
   the dense grids: zero-impact inline-flex, vertically centred, tiny. */
.field-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    padding: 0;
    vertical-align: middle;
    color: var(--ink-5);
    cursor: help;
    border-radius: 50%;
    flex: 0 0 auto;
    transition: color var(--t-fast), background var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}
.field-tip:hover,
.field-tip[aria-expanded="true"] {
    color: var(--ink);
}
.field-tip:focus-visible {
    outline: none;
    color: var(--ink);
    box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.35);
}
.field-tip svg { display: block; }

/* The popover card — matte, brutalist, hairline-black border. position:fixed
   so JS viewport coords place it; very high z-index so it floats above the
   immersive chrome (rail 45 / topbar 40 / portals 300–320) and the picker. */
.field-tip-pop {
    position: fixed;
    z-index: 10000;
    width: 248px;
    max-width: calc(100vw - 16px);
    background: var(--surface);
    border: 1px solid var(--ink);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
    padding: 10px 12px 11px;
    font-family: var(--sans);
    color: var(--ink-2);
    animation: field-tip-in var(--t-fast);
}
@keyframes field-tip-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.field-tip-pop.flip-up { animation: field-tip-in-up var(--t-fast); }
@keyframes field-tip-in-up {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.field-tip-title {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink);
    margin-bottom: 5px;
}
.field-tip-body {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--ink-3);
}
.field-tip-wiki {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--border-3);
    padding-bottom: 1px;
    transition: border-color var(--t-fast);
}
.field-tip-wiki:hover { border-color: var(--ink); }
.field-tip-wiki-arrow { font-size: 0.8rem; line-height: 1; }

/* In dense mono-caps headers (products head, channel group labels) the glyph
   should read at the label's size, not larger. */
.products-head .field-tip,
.historic-cell .field-tip,
.channel-group-label .field-tip,
.initiative-group-label .field-tip,
.channel-num-label .field-tip,
.curves-horizon-label .field-tip {
    width: 14px;
    height: 14px;
    margin-left: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .field-tip-pop, .field-tip-pop.flip-up { animation: none; }
}