/* The Investments area (/admin/investments/*): the green tokens, the page frame and 12-column grid, the hero override
   on the Accounts hero recipe (.ah), section cards, tones, chips and pills, bars, the shared parts (logo, owner chip,
   stat tile, range bar, empty state), skeleton bones, the Smart Signals sheet palette, buttons and sheet basics.
   Page styles live in investments-{overview,holdings,performance,securities,dividends,activity,retirement,rules}.css.
   Light tokens sit on :root and dark ones on [data-bs-theme="dark"] so body-appended sheets inherit them. */

:root {
    --iv-green: #16A34A;
    --iv-green-strong: #15803D;
    --iv-green-bright: #22C55E;
    --iv-green-soft: #DCFCE7;
    --iv-icon: #16A34A;
    --iv-icon-bg: #DCFCE7;
    --iv-border: #C2EACF;
    --iv-hero-bg: linear-gradient(158deg, #D4F5E0 0%, #EBFAF1 45%, #FFFFFF 100%);
    --iv-hero-line: #16A34A;
    --iv-hero-secondary: #4ADE80;
    --iv-hero-area: rgba(34, 197, 94, .28);
    --iv-pill: rgba(255, 255, 255, .70);
    --iv-range-bg: rgba(223, 248, 232, .50);
    --iv-range-pill: #C6F6D5;
    --iv-tiles-bg: rgba(255, 255, 255, .92);
    --iv-callout: #EAF7EF;
    --iv-tile: #F5F8FA;
    --iv-tile-border: #E4E9EF;
    --iv-positive: #16A34A;
    --iv-positive-soft: #DCFCE7;
    --iv-negative: #DC2626;
    --iv-negative-soft: #FEE2E2;
    --iv-caution: #B45309;
    --iv-caution-soft: #FEF3C7;
    --iv-neutral-soft: #EEF0F6;
    --iv-accent: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --iv-accent-soft: hsl(calc(249deg + var(--ci-accent-shift, 0deg)) 100% 96.08%);
    --iv-interest: #0284C7;
    --iv-capgain: #7C3AED;
    --iv-reinvest: #0D9488;
    --iv-withholding: #DC2626;
    --iv-slice-1: #22C55E;
    --iv-slice-2: #0EA5E9;
    --iv-slice-3: #8B5CF6;
    --iv-slice-4: #F59E0B;
    --iv-slice-5: #EC4899;
    --iv-slice-other: #94A3B8;
    --iv-track: #EEF2F6;
    --iv-candle-up: #26A69A;
    --iv-candle-down: #EF5350;
    --iv-you: #2563EB;
    --iv-partner: #D97706;
    --iv-mover-top: linear-gradient(150deg, #E3F6EA 0%, #F4FBF6 45%, #FFFFFF 100%);
    --iv-mover-worst: linear-gradient(150deg, #FCE8EA 0%, #FEF5F6 45%, #FFFFFF 100%);
    --iv-text: var(--tx-text, #0B0F19);
    --iv-muted: var(--tx-muted, #565973);
    --iv-light: var(--tx-light-text, #9397AD);
    --iv-card: #FFFFFF;
    --iv-card-border: hsl(calc(247.66deg + var(--ci-accent-shift, 0deg)) 100% 90.78%);
    --iv-shadow: 0 10px 30px rgba(31, 42, 68, .08);
    --iv-input-bg: #FFFFFF;
    --iv-input-border: hsl(calc(247.5deg + var(--ci-accent-shift, 0deg)) 25.81% 87.84%);
    --iv-menu-bg: #FFFFFF;
    --iv-row-hover: rgba(22, 163, 74, .06);
    --iv-focus: #16A34A;
}

[data-bs-theme="dark"] {
    --iv-green: #34D399;
    --iv-green-strong: #10B981;
    --iv-green-bright: #6EE7B7;
    --iv-green-soft: rgba(52, 211, 153, .16);
    --iv-icon: #34D399;
    --iv-icon-bg: #223A2B;
    --iv-border: #1F3A2B;
    --iv-hero-bg: linear-gradient(158deg, #173522 0%, #142722 45%, #10131C 100%);
    --iv-hero-line: #34D399;
    --iv-hero-secondary: #6EE7B7;
    --iv-hero-area: rgba(52, 211, 153, .35);
    --iv-pill: rgba(27, 77, 53, .50);
    --iv-range-bg: rgba(31, 58, 43, .69);
    --iv-range-pill: #244534;
    --iv-tiles-bg: transparent;
    --iv-callout: rgba(52, 211, 153, .10);
    --iv-tile: #121826;
    --iv-tile-border: #232A3A;
    --iv-positive: #22C55E;
    --iv-positive-soft: rgba(34, 197, 94, .16);
    --iv-negative: #F87171;
    --iv-negative-soft: rgba(248, 113, 113, .16);
    --iv-caution: #FBBF24;
    --iv-caution-soft: rgba(251, 191, 36, .16);
    --iv-neutral-soft: rgba(255, 255, 255, .07);
    --iv-accent: hsl(calc(247.88deg + var(--ci-accent-shift, 0deg)) 100% 80.59%);
    --iv-accent-soft: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24% / .18);
    --iv-interest: #38BDF8;
    --iv-capgain: #A78BFA;
    --iv-reinvest: #2DD4BF;
    --iv-withholding: #F87171;
    --iv-slice-1: #34D399;
    --iv-slice-2: #38BDF8;
    --iv-slice-3: #A78BFA;
    --iv-slice-4: #FBBF24;
    --iv-slice-5: #F472B6;
    --iv-slice-other: #64748B;
    --iv-track: rgba(255, 255, 255, .08);
    --iv-you: #60A5FA;
    --iv-partner: #FBBF24;
    --iv-mover-top: linear-gradient(150deg, rgba(52, 211, 153, .20) 0%, rgba(52, 211, 153, .07) 45%, rgba(52, 211, 153, 0) 100%);
    --iv-mover-worst: linear-gradient(150deg, rgba(248, 113, 113, .20) 0%, rgba(248, 113, 113, .07) 45%, rgba(248, 113, 113, 0) 100%);
    --iv-card: transparent;
    --iv-card-border: #2B3045;
    --iv-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    --iv-input-bg: rgba(255, 255, 255, .04);
    --iv-input-border: #2B3045;
    --iv-menu-bg: #1B2132;
    --iv-row-hover: rgba(52, 211, 153, .08);
    --iv-focus: #34D399;
}

/* ------------------------------------------------------------------ Page frame */

.iv-page { padding-bottom: 2rem; }
.iv-eyebrow { color: var(--iv-green); }
.iv-head-actions { align-items: center; }
.iv-page-help { display: inline-flex; gap: .35rem; align-items: center; }
.tx-seg.iv-menu-seg { min-width: 0; } /* Scrolls with arrows inside SegmentedScroller once the sections can't fit. */

/* The section menu: eight sections fit the track at desktop widths; between 992px and 1599px the glyphs step aside so
   every label stays whole, and the unread alerts count on Investment Rules is a small green bubble. */
.iv-menu-seg .tx-seg-item { gap: 6px; }
.iv-menu-seg .tx-seg-item-detail {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--iv-green);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
}

[data-bs-theme="dark"] .iv-menu-seg .tx-seg-item-detail { color: #0B0F19; }
.iv-menu-seg .tx-seg-item.tx-seg-selected .tx-seg-item-detail { color: #FFFFFF; }
[data-bs-theme="dark"] .iv-menu-seg .tx-seg-item.tx-seg-selected .tx-seg-item-detail { color: #0B0F19; }

@media (min-width: 992px) and (max-width: 1599.98px) {
    .iv-menu-seg .tx-seg-item > .tx-glyph { display: none; }
}

/* FocusOnNavigate puts focus on the page heading: no ring on it (it is not a control). */
.iv-page h1:focus,
.iv-page [tabindex="-1"]:focus { outline: none; }

@media (min-width: 992px) {
    .iv-head .rc-head-copy { max-width: 90ch; }
}

/* Wide screens: the heading and its controls (Refresh, Checkup, help) share one row; the description wraps first. */
@media (min-width: 1200px) {
    .rc-head.iv-head { flex-wrap: nowrap; }
    .iv-head .rc-head-copy { flex: 1 1 auto; }
    .iv-head .iv-head-actions { flex: 0 0 auto; flex-wrap: nowrap; }
}

.iv-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.iv-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* The 12-column grid (>= 1200px); pairs of halves stay side by side 992-1199px; one column below 992px. */
.iv-grid {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-width: 0;
}

.iv-grid > * { min-width: 0; }
.iv-grid.iv-stretch { align-items: stretch; }
.iv-col-3 { grid-column: span 3; }
.iv-col-4 { grid-column: span 4; }
.iv-col-5 { grid-column: span 5; }
.iv-col-6 { grid-column: span 6; }
.iv-col-7 { grid-column: span 7; }
.iv-col-8 { grid-column: span 8; }
.iv-col-9 { grid-column: span 9; }
.iv-col-12,
.iv-span-full { grid-column: 1 / -1; }

/* The two-track layouts: main (7fr / 5fr), halves and thirds. */
.iv-grid-main { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.iv-grid-2 { display: grid; gap: 1rem; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iv-grid-3 { display: grid; gap: 1rem; align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iv-grid-main > *, .iv-grid-2 > *, .iv-grid-3 > * { min-width: 0; }

@media (min-width: 1600px) {
    .iv-grid-main { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

@media (max-width: 1199.98px) {
    .iv-col-3, .iv-col-4, .iv-col-5, .iv-col-6, .iv-col-7, .iv-col-8, .iv-col-9 { grid-column: 1 / -1; }
    .iv-col-md-6 { grid-column: span 6; }
    .iv-grid-main { grid-template-columns: minmax(0, 1fr); }
    .iv-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .iv-col-md-6 { grid-column: 1 / -1; }
    .iv-grid-2, .iv-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .iv-page { padding-left: 16px; padding-right: 16px; }
    .iv-grid, .iv-stack, .iv-grid-main, .iv-grid-2, .iv-grid-3 { gap: .75rem; }
}

/* Wide tables and charts scroll inside their card, never the page. */
.iv-scroll-x { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }

/* ------------------------------------------------------------------ Section cards */

.iv-card { border-color: var(--iv-card-border); min-width: 0; }
[data-bs-theme="dark"] .iv-card { border-color: var(--rc-card-border, var(--iv-card-border)); }
.iv-card-title { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--iv-text); }
.iv-card-caption { font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.iv-card-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; }

/* A narrow card (a side column) keeps its title readable: the actions drop under it instead of squeezing it. */
.iv-card-head { flex-wrap: wrap; row-gap: .5rem; }
.iv-card-head > .rc-card-titles { flex: 1 1 160px; }
.iv-card-body { min-width: 0; }
.rc-chip-icon.rc-tone-investment,
.iv-chip.rc-tone-investment { background: var(--iv-icon-bg); color: var(--iv-icon); }
.iv-chip-lg { width: 44px; height: 44px; border-radius: 13px; font-size: 17px; }
.iv-help { margin-left: .15rem; }

.iv-explainer {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: -4px 0 12px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--iv-muted);
}

.iv-explainer-glyph { color: var(--iv-green); font-size: 11px; margin-top: 2px; }
.iv-caption { display: block; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--iv-muted); }
.iv-footnote { margin: 12px 0 0; font-size: 11px; line-height: 1.45; color: var(--iv-light); }
.iv-subhead { display: flex; align-items: center; gap: .4rem; margin: 16px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--iv-text); }

/* The takeaway callout (Performance Insights, narratives). */
.iv-callout {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--iv-callout);
    color: var(--iv-text);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}

.iv-callout .tx-glyph { color: var(--iv-green); margin-top: 2px; }

/* ------------------------------------------------------------------ Tones */

.iv-tone-positive { --iv-tone: var(--iv-positive); --iv-tone-soft: var(--iv-positive-soft); }
.iv-tone-negative { --iv-tone: var(--iv-negative); --iv-tone-soft: var(--iv-negative-soft); }
.iv-tone-caution { --iv-tone: var(--iv-caution); --iv-tone-soft: var(--iv-caution-soft); }
.iv-tone-neutral { --iv-tone: var(--iv-text); --iv-tone-soft: var(--iv-neutral-soft); }
.iv-tone-accent { --iv-tone: var(--iv-accent); --iv-tone-soft: var(--iv-accent-soft); }

.iv-text-positive { color: var(--iv-positive) !important; }
.iv-text-negative { color: var(--iv-negative) !important; }
.iv-text-caution { color: var(--iv-caution) !important; }
.iv-text-muted { color: var(--iv-muted) !important; }
.iv-text-green { color: var(--iv-green) !important; }
.iv-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Chips, pills and bars */

/* A selectable chip (filters, groupings, ranges in a card). */
.iv-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 4px 11px;
    border: 1px solid var(--iv-tile-border);
    border-radius: 999px;
    background: transparent;
    color: var(--iv-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.iv-chip:hover:not(:disabled) { color: var(--iv-text); border-color: var(--iv-border); }
.iv-chip.is-selected,
.iv-chip[aria-pressed="true"],
.iv-chip[aria-checked="true"] { background: var(--iv-icon-bg); border-color: transparent; color: var(--iv-icon); }
.iv-chip:disabled { opacity: .55; cursor: default; }
.iv-chip .tx-glyph { font-size: 11px; }
.iv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-chip-count { padding: 0 6px; border-radius: 999px; background: var(--iv-neutral-soft); font-size: 10.5px; }

/* A small label (status, NEW, Top, partner). */
.iv-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--iv-tone-soft, var(--iv-neutral-soft));
    color: var(--iv-tone, var(--iv-muted));
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.iv-pill .tx-glyph { font-size: 9.5px; }
.iv-pill-green { background: var(--iv-icon-bg); color: var(--iv-icon); }
.iv-pill-solid { background: var(--iv-green); color: #FFFFFF; }
[data-bs-theme="dark"] .iv-pill-solid { color: #10131C; }

/* A weight or progress bar: a track and a fill (set --iv-bar to 0-100%). */
.iv-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--iv-track);
    overflow: hidden;
}

.iv-bar-fill {
    display: block;
    width: var(--iv-bar, 0%);
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--iv-tone, var(--iv-green));
    transition: width .5s cubic-bezier(.2, .8, .2, 1);
}

.iv-bar-thin { height: 5px; }

/* A range bar with a marker (52-week range, day range): set --iv-pos to 0-100%. */
.iv-range-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--iv-track);
}

.iv-range-marker {
    position: absolute;
    top: 50%;
    left: var(--iv-pos, 50%);
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid var(--iv-card, #FFFFFF);
    border-radius: 50%;
    background: var(--iv-green);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
}

/* ------------------------------------------------------------------ Hero (the Accounts hero recipe, green) */

.ah.iv-hero {
    --ah-bg: var(--iv-hero-bg);
    --ah-border: var(--iv-border);
    --ah-badge-bg: var(--iv-icon-bg);
    --ah-badge-fg: var(--iv-icon);
    --ah-tiles-bg: var(--iv-tiles-bg);
    --ah-range-bg: var(--iv-range-bg);
    --ah-range-pos: var(--iv-range-pill);
    --ah-range-neg: #FECDD3;
    --ah-line-pos: var(--iv-hero-line);
    --ah-area-pos: var(--iv-hero-area);
    --ah-accent: var(--iv-green);
    --dsh-bone: rgba(22, 163, 74, .10);
    --dsh-line: #22C55E;
    grid-template-columns: minmax(0, 1fr);
}

[data-bs-theme="dark"] .ah.iv-hero {
    --ah-value-pill: rgba(27, 77, 53, .5);
    --ah-pill: var(--iv-pill);
    --ah-tiles-bg: transparent;
    --ah-range-bg: var(--iv-range-bg);
    --ah-range-neg: #9F3A52;
    --dsh-bone: rgba(52, 211, 153, .12);
    --dsh-wave: rgba(190, 255, 225, .1);
    --dsh-line: #34D399;
}

.iv-trend { transition: opacity .42s cubic-bezier(.65, 0, .35, 1), transform .42s cubic-bezier(.65, 0, .35, 1); }
.iv-trend.is-inactive { opacity: 0; transform: translateY(-24px); pointer-events: none; }
.iv-trend.is-active { opacity: .95; transform: translateY(0); }
.iv-stop-0 { stop-color: var(--iv-hero-area); }
.iv-stop-1 { stop-color: var(--iv-hero-area); stop-opacity: 0; }
.iv-line, .iv-glow { stroke: var(--iv-hero-line); }

/* The dashed cost basis line under the value. */
.iv-cost {
    fill: none;
    stroke: var(--iv-hero-secondary);
    stroke-width: 1.5;
    stroke-opacity: .75;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
}

.iv-hero .ah-bone-range,
.iv-hero .iv-range { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.iv-hero-help { margin-left: auto; }
.iv-pill-glyph { color: var(--iv-icon); }

/* Below the chart: the ticker row and the six KPI tiles in one row on wide screens. */
.iv-hero-tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-left: 0;
    border-top: 1px solid var(--ah-border);
}

.iv-hero-tiles .ah-tile { align-items: center; }

@media (max-width: 1199.98px) {
    .iv-hero-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .iv-hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ Ticker tape (pure CSS marquee) */

.iv-marquee {
    position: relative;
    overflow: hidden;
    min-height: 34px;
    background: var(--ah-tiles-bg, var(--iv-tiles-bg));
    border-top: 1px solid var(--ah-border, var(--iv-border));
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.iv-marquee-track {
    display: flex;
    width: max-content;
    animation: iv-marquee var(--iv-marquee-duration, 60s) linear infinite;
}

.iv-marquee:hover .iv-marquee-track,
.iv-marquee:focus-within .iv-marquee-track { animation-play-state: paused; }
.iv-marquee-item { display: inline-flex; align-items: center; gap: .45rem; padding: 7px 10px; white-space: nowrap; font-size: 12px; }

@keyframes iv-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------ Shared parts */

/* InvestmentLogo: the company image, else a green bubble with the initial. */
.iv-logo {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--iv-icon-bg);
    color: var(--iv-icon);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--tx-font);
}

.iv-logo-img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; }
.iv-logo-initial { line-height: 1; }

/* OwnerChip: Mine (blue) or the partner (amber). */
.iv-owner {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.iv-owner-glyph { font-size: 9px; }
.iv-owner-mine { background: color-mix(in srgb, var(--iv-you) 12%, transparent); color: var(--iv-you); }
.iv-owner-partner { background: color-mix(in srgb, var(--iv-partner) 14%, transparent); color: var(--iv-partner); }

/* InvestmentStatTile: a caption, the value in its tone, a note. */
.iv-stat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--iv-tile-border);
    border-radius: 12px;
    background: var(--iv-tile);
}

.iv-stat { container-type: inline-size; container-name: iv-stat; }

/* A tile narrower than about 175px gives its glyph's room to the figures. */
@container iv-stat (max-width: 175px) {
    .iv-stat-chip { display: none; }
}

.iv-stat-chip {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--iv-icon-bg);
    color: var(--iv-icon);
    font-size: 13px;
}

.iv-stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-stat-caption { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; color: var(--iv-muted); overflow-wrap: anywhere; }
.iv-stat-value { font-family: var(--tx-font); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--iv-tone, var(--iv-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-stat-note { font-size: 11px; line-height: 1.35; color: var(--iv-muted); }
.iv-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* InvestmentRangeBar: chips over a sliding pill. */
.iv-range {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--iv-range-count, 7), minmax(0, 1fr));
    border-radius: 12px;
    background: var(--iv-range-bg);
    min-width: 0;
}

.iv-range-pill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(100% / var(--iv-range-count, 7));
    border-radius: 9px;
    background: var(--iv-range-pill);
    opacity: .85;
    transform: translateX(calc(100% * var(--iv-range-index, 0)));
    transition: transform .38s cubic-bezier(.34, 1.36, .64, 1);
}

.iv-range-chip {
    position: relative;
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--iv-muted);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

.iv-range-chip.is-selected { color: var(--iv-text); }
.iv-range-chip:disabled { cursor: default; }
.iv-range-chip:focus-visible { outline: 2px solid var(--iv-focus); outline-offset: -2px; border-radius: 9px; }
.iv-range-hero { position: relative; z-index: 1; margin: auto 12px 8px; }
.iv-range-hero .iv-range-pill { opacity: .5; }

/* InvestmentEmptyState. */
.iv-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.25rem 1.25rem; text-align: center; }
.iv-empty-chip { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--iv-icon-bg); color: var(--iv-icon); font-size: 22px; }
.iv-empty-title { margin: .25rem 0 0; font-family: var(--tx-font); font-size: 18px; font-weight: 600; color: var(--iv-text); }
.iv-empty-text { max-width: 46ch; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--iv-muted); }
.iv-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .35rem; }

/* Rows (lists in cards). */
.iv-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.iv-rows > li + li { border-top: 1px solid var(--rc-line, rgba(0, 0, 0, .06)); }
[data-bs-theme="dark"] .iv-rows > li + li { border-top-color: rgba(255, 255, 255, .06); }

.iv-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-radius: 12px;
}

.iv-row.is-clickable { cursor: pointer; transition: background-color .15s ease; }
.iv-row.is-clickable:hover { background: var(--iv-row-hover); }
.iv-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-row-title { display: flex; align-items: center; gap: .4rem; min-width: 0; font-family: var(--tx-font); font-size: 14px; font-weight: 600; color: var(--iv-text); }
.iv-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-row-sub { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: 12px; color: var(--iv-muted); }
.iv-row-figures { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.iv-row-amount { font-family: var(--tx-font); font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--iv-text); white-space: nowrap; }
.iv-row-detail { font-size: 11px; color: var(--iv-muted); white-space: nowrap; }

/* ------------------------------------------------------------------ Buttons */

.iv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--iv-green);
    border-radius: 12px;
    background: transparent;
    color: var(--iv-green);
    font-family: var(--tx-font);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease, transform .1s ease;
}

.iv-btn:hover:not(:disabled) { background: var(--iv-icon-bg); }
.iv-btn:active:not(:disabled) { transform: scale(.98); }
.iv-btn:disabled { opacity: .5; cursor: default; }
.iv-btn-primary { background: var(--iv-green); color: #FFFFFF; }
.iv-btn-primary:hover:not(:disabled) { background: var(--iv-green-strong); }
[data-bs-theme="dark"] .iv-btn-primary { color: #0B0F19; }
.iv-btn-danger { border-color: var(--iv-negative); color: var(--iv-negative); }
.iv-btn-danger:hover:not(:disabled) { background: var(--iv-negative-soft); }
.iv-btn-ghost { border-color: transparent; color: var(--iv-muted); }
.iv-btn-ghost:hover:not(:disabled) { background: var(--iv-neutral-soft); color: var(--iv-text); }

/* An icon-only button (bell, sliders, prev/next): always give it an aria-label. */
.iv-icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: var(--iv-icon-bg);
    color: var(--iv-icon);
    font-size: 14px;
    cursor: pointer;
    transition: transform .1s ease, opacity .15s ease;
}

.iv-icon-btn:hover:not(:disabled) { opacity: .85; }
.iv-icon-btn:disabled { opacity: .45; cursor: default; }

/* A count badge on an icon button (unread alerts). */
.iv-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--iv-green);
    color: var(--tx-surface, #FFFFFF);
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

[data-bs-theme="dark"] .iv-badge { color: #0B0F19; }

/* The bell's ping while there are unread alerts. */
.iv-ping::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1.5px solid var(--iv-icon);
    border-radius: 12px;
    animation: iv-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
    pointer-events: none;
}

@keyframes iv-ping {
    0% { opacity: .8; transform: scale(.92); }
    80%, 100% { opacity: 0; transform: scale(1.35); }
}

.iv-spin { animation: iv-spin 1s linear infinite; }

@keyframes iv-spin { to { transform: rotate(360deg); } }

.iv-page :is(button, a, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--iv-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ Skeleton bones (dsh-bone with dsh-tone-inv) */

.iv-skeleton { min-height: 160px; }
.iv-bone-chart { position: relative; overflow: hidden; border-radius: 12px; }
.iv-bone-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.iv-bone-columns { display: flex; align-items: flex-end; gap: 8px; padding: 0 6px; }
.iv-bone-columns .dsh-bone { flex: 1 1 0; border-radius: 8px 8px 2px 2px; }
.iv-bone-donut { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.iv-bone-ring { width: 170px; height: 170px; border-radius: 50%; }
.iv-bone-legend { display: flex; align-items: center; gap: 10px; }
.iv-bone-dot { width: 10px; height: 10px; border-radius: 50%; }
.iv-bone-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.iv-bone-tile { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--iv-neutral-soft); }
.iv-bone-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.iv-bone-logo { width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto; }
.iv-bone-toolbar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.iv-bone-grid { display: flex; flex-direction: column; gap: 4px; }
.iv-bone-grid-row { display: grid; grid-template-columns: 32px repeat(4, minmax(0, 1fr)); align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--iv-neutral-soft); }
.iv-bone-carousel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.iv-bone-slide { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--iv-tile-border); border-radius: 16px; }
.iv-bone-ticker { display: flex; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--ah-border, var(--iv-border)); overflow: hidden; }
.iv-bone-ticker .dsh-bone { height: 12px; border-radius: 6px; }

@media (max-width: 991.98px) {
    .iv-bone-carousel { grid-template-columns: minmax(0, 1fr); }
    .iv-bone-carousel .iv-bone-slide:nth-child(n + 2) { display: none; }
}

@media (max-width: 575.98px) {
    .iv-bone-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .iv-bone-ring { width: 140px; height: 140px; }
}

/* ------------------------------------------------------------------ Smart Signals on the Investments surface */

.iv-page .ss-section-investments .ss-head-chip,
.iv-page .ss-section-investments .ss-count-pill { background: var(--iv-icon-bg); color: var(--iv-icon); }

/* The sheets the shell hosts read the Smart Signals palette (HomeSmartSignals.razor.css .ss-root, repeated here). */
.iv-ss-host {
    display: contents;
    --ss-primary: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --ss-critical: #FF392B;
    --ss-warning: #B45309;
    --ss-positive: #16A34A;
    --ss-investment: #16A34A;
    --ss-card-spend: #EF4444;
    --ss-caution: #B45309;
    --ss-live: #0284C7;
    --ss-live-soft: rgba(2, 132, 199, .10);
    --ss-live-line: rgba(2, 132, 199, .35);
    --ss-text: #0F172A;
    --ss-muted: #64748B;
    --ss-surface: #FFFFFF;
    --ss-border: #E2E8F0;
    --ss-accent: var(--ss-investment);
}

[data-bs-theme="dark"] .iv-ss-host {
    --ss-primary: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --ss-warning: #C2410C;
    --ss-positive: #22C55E;
    --ss-investment: #34D399;
    --ss-card-spend: #F87171;
    --ss-caution: #F59E0B;
    --ss-live: #38BDF8;
    --ss-live-soft: rgba(56, 189, 248, .14);
    --ss-live-line: rgba(56, 189, 248, .40);
    --ss-text: #E6E9EF;
    --ss-muted: #94A3B8;
    --ss-surface: #10131C;
    --ss-border: rgba(255, 255, 255, .08);
}

.iv-ss-tone { display: contents; }
.iv-ss-tone-primary { --ss-accent: var(--ss-primary); }
.iv-ss-tone-critical { --ss-accent: var(--ss-critical); }
.iv-ss-tone-warning { --ss-accent: var(--ss-warning); }
.iv-ss-tone-positive { --ss-accent: var(--ss-positive); }
.iv-ss-tone-investment { --ss-accent: var(--ss-investment); }
.iv-ss-tone-card { --ss-accent: var(--ss-card-spend); }

/* ------------------------------------------------------------------ Sheets and forms (the rule editor, Starter Pack, preferences) */

.iv-sheet { display: flex; flex-direction: column; gap: 14px; color: var(--iv-text); }

.iv-sheet-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.iv-sheet-title { margin: 0; font-family: var(--tx-font); font-size: 18px; font-weight: 700; color: var(--iv-text); }
.iv-sheet-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--iv-muted); }
.iv-sheet-close { margin-left: auto; }
.iv-sheet-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.iv-sheet-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: 10px;
    background: linear-gradient(180deg, transparent 0, var(--tx-surface, #FFFFFF) 30%);
}

[data-bs-theme="dark"] .iv-sheet-foot { background: linear-gradient(180deg, transparent 0, #10131C 30%); }

.iv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.iv-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--iv-muted); }
.iv-help-text { font-size: 11.5px; line-height: 1.4; color: var(--iv-muted); }
.iv-field-error { font-size: 11.5px; line-height: 1.4; color: var(--iv-negative); }

.iv-input {
    width: 100%;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--iv-input-border);
    border-radius: 12px;
    background: var(--iv-input-bg);
    color: var(--iv-text);
    font-size: 14px;
}

.iv-input:focus { outline: none; border-color: var(--iv-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iv-focus) 22%, transparent); }
.iv-input[aria-invalid="true"] { border-color: var(--iv-negative); }

.iv-error {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--iv-negative-soft);
    color: var(--iv-negative);
    font-size: 12.5px;
    line-height: 1.4;
}

/* The page behind an open sheet stays put (investments-area.js lockScroll). */
html.iv-scroll-locked,
html.iv-scroll-locked body { overflow: hidden; }

/* ------------------------------------------------------------------ Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .iv-marquee { overflow-x: auto; mask-image: none; }
    .iv-marquee-track { animation: none; transform: none; }
    .iv-marquee-track [aria-hidden="true"] { display: none; }
    .iv-range-pill, .iv-bar-fill, .iv-trend, .iv-chip, .iv-btn { transition: none; }
    .iv-ping::after { animation: none; display: none; }
    .iv-spin { animation-duration: 2.5s; }
}