/**
 * Shared Allocation Card Component
 * Reusable across portfolio detail, onboarding review, and other pages.
 */

/* Allocation Cards Grid - shared by allocations and analysis tabs */
#allocations-cards-modern,
#analysis-results-modern,
.allocations-grid-modern {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

@media (min-width: 640px) {
    #allocations-cards-modern,
    #analysis-results-modern,
    .allocations-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
    }

    #allocations-cards-modern,
    #analysis-results-modern {
        grid-auto-rows: 8px;
    }
}

#analysis-results-modern.analysis-positions-table-mode {
    grid-auto-rows: auto;
}

@media (min-width: 1024px) {
    #allocations-cards-modern,
    #analysis-results-modern,
    .allocations-grid-modern {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Base Card */
.allocation-card-modern {
    min-width: 0; /* allow shrink on small screens (overrides grid default min-width: auto) */
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-radius: var(--glass-panel-radius);
    padding: 18px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.allocation-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .allocation-card-modern:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }

    .allocation-card-modern:hover::before {
        opacity: 1;
    }
}

@media (hover: none), (pointer: coarse) {
    .allocation-card-modern:active {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }

    .allocation-card-modern:active::before {
        opacity: 1;
    }
}

.allocation-card-modern.selected {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.allocation-card-modern.selected::before {
    opacity: 1;
}

/* Header: column — row 1 = symbol + actions; row 2 = full-width company name */
.allocation-card-header-modern {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 16px;
    min-width: 0;
}

.allocation-card-header-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.allocation-card-modern[data-expand-on-tap="1"] .allocation-card-header-row-modern {
    pointer-events: none;
}

.allocation-ticker-link {
    color: inherit;
    text-decoration: none;
}

.allocation-card-modern[data-expand-on-tap="1"] .allocation-ticker-link {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.allocation-card-header-company-modern {
    width: 100%;
    min-width: 0;
}

.allocation-card-header-company-modern .symbol-company-modern {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbol-info-modern .allocation-closed-executed-at-modern,
.allocation-card-header-company-modern .allocation-closed-executed-at-modern {
    display: block;
    position: relative;
    z-index: 2;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.allocation-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
    min-width: 0;
}

/* Portfolio variant: flex with symbol-info-modern */
.allocation-symbol-modern:has(.symbol-info-modern) {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Review variant: text-only symbol */
.allocation-symbol-modern:not(:has(.symbol-info-modern)) {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.symbol-info-modern {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.symbol-info-copy-modern {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
}

.allocation-stage-in-header {
    margin-bottom: 0;
    flex-shrink: 0;
}

.allocation-stage-in-header .analysis-signal-badge-modern.signal-add,
.review-signal-strength-pair .analysis-signal-badge-modern.signal-add,
.indicator-info-modal-header-metrics .analysis-signal-badge-modern.signal-add {
    background: var(--iris-signal-add-tint);
    color: var(--iris-signal-add-tint-ink);
    border: 1px solid var(--iris-signal-add-tint-border);
}

.allocation-stage-in-header .analysis-signal-badge-modern.signal-hold,
.allocation-stage-in-header .analysis-signal-badge-modern.hold,
.review-signal-strength-pair .analysis-signal-badge-modern.signal-hold,
.review-signal-strength-pair .analysis-signal-badge-modern.hold,
.indicator-info-modal-header-metrics .analysis-signal-badge-modern.signal-hold,
.indicator-info-modal-header-metrics .analysis-signal-badge-modern.hold {
    background: var(--iris-signal-hold-tint);
    color: var(--iris-signal-hold-tint-ink);
    border: 1px solid var(--iris-signal-hold-tint-border);
}

.allocation-stage-in-header .analysis-signal-badge-modern.signal-reduce,
.review-signal-strength-pair .analysis-signal-badge-modern.signal-reduce,
.indicator-info-modal-header-metrics .analysis-signal-badge-modern.signal-reduce {
    background: var(--iris-signal-reduce-tint);
    color: var(--iris-signal-reduce-tint-ink);
    border: 1px solid var(--iris-signal-reduce-tint-border);
}

.allocation-stage-in-header .analysis-signal-badge-modern.signal-bullish,
.allocation-stage-in-header .analysis-signal-badge-modern.bullish,
.review-signal-strength-pair .analysis-signal-badge-modern.signal-bullish,
.review-signal-strength-pair .analysis-signal-badge-modern.bullish,
.indicator-info-modal-header-metrics .analysis-signal-badge-modern.signal-bullish,
.indicator-info-modal-header-metrics .analysis-signal-badge-modern.bullish {
    background: var(--iris-signal-bullish-tint);
    color: var(--iris-signal-bullish-tint-ink);
    border: 1px solid var(--iris-signal-bullish-tint-border);
}

.allocation-stage-in-header .analysis-signal-badge-modern.signal-bearish,
.allocation-stage-in-header .analysis-signal-badge-modern.bearish,
.review-signal-strength-pair .analysis-signal-badge-modern.signal-bearish,
.review-signal-strength-pair .analysis-signal-badge-modern.bearish,
.indicator-info-modal-header-metrics .analysis-signal-badge-modern.signal-bearish,
.indicator-info-modal-header-metrics .analysis-signal-badge-modern.bearish {
    background: var(--iris-signal-bearish-tint);
    color: var(--iris-signal-bearish-tint-ink);
    border: 1px solid var(--iris-signal-bearish-tint-border);
}

.review-signal-strength-pair .strength-badge-modern.strength-very-strong,
.review-signal-strength-pair .strength-badge-modern.strength-strong {
    background: var(--iris-signal-bullish-tint);
    color: var(--iris-signal-bullish-tint-ink);
    border: 1px solid var(--iris-signal-bullish-tint-border);
}

.review-signal-strength-pair .strength-badge-modern.strength-moderate {
    background: var(--iris-signal-hold-tint);
    color: var(--iris-signal-hold-tint-ink);
    border: 1px solid var(--iris-signal-hold-tint-border);
}

.review-signal-strength-pair .strength-badge-modern.strength-weak,
.review-signal-strength-pair .strength-badge-modern.strength-very-weak {
    background: var(--iris-signal-bearish-tint);
    color: var(--iris-signal-bearish-tint-ink);
    border: 1px solid var(--iris-signal-bearish-tint-border);
}

.symbol-name-modern {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.symbol-company-modern,
.allocation-company-modern {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-sector-industry-modern {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.9;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allocation-company-modern {
    margin-bottom: 8px;
}

/* Action Buttons - never shrink so more-options button stays visible */
.allocation-header-actions-modern {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.allocation-actions-modern {
    display: flex;
    align-items: center;
    gap: 4px;
}

.allocation-options-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

/* Per-share quote when header mark value is hidden (e.g. stock analysis featured cards) */
.allocation-header-current-price-modern {
    font-size: calc(22px - 1pt);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    margin-right: 0;
}

.allocation-current-price-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
}

/* Header total (position value); replaces former per-share price in options row */
.allocation-header-total-value {
    font-size: calc(26px - 2pt);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.allocation-header-quote-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}

.allocation-header-price-change {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.allocation-header-price-change.positive {
    color: var(--market-success, var(--symbol-success, #22c55e));
}

.allocation-header-price-change.negative {
    color: var(--market-danger, var(--symbol-danger, #ef4444));
}

.allocation-header-price-change.neutral {
    color: var(--text-secondary);
}

.allocation-header-price-change .change-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    font-family: var(--font-sans);
}

.allocation-header-price-change .change-percent {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.allocation-metric-position-total .allocation-header-price-change {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    text-align: left;
    margin-top: 2px;
}

.allocation-metric-position-total .allocation-header-price-change .change-value,
.allocation-metric-position-total .allocation-header-price-change .change-percent {
    display: inline;
    font-family: inherit;
    font-weight: 700;
}

.allocation-metric-position-total .allocation-header-price-change .change-value {
    font-size: 13px;
}

.allocation-metric-position-total .allocation-header-price-change .change-percent {
    font-size: 11px;
}

.allocation-options-btn {
    flex-shrink: 0;
    margin-left: 10px;
}

.allocation-options-menu {
    display: none;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: 6px;
}

.allocation-options-menu.open {
    display: flex;
}

.allocation-option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: left;
}

.allocation-option-item:hover {
    background: var(--bg-secondary);
}

.allocation-option-item i {
    width: 18px;
    font-size: 14px;
    color: var(--text-secondary);
}

.allocation-option-item[data-action="bearish"] {
    color: var(--text-primary);
}

.allocation-option-item[data-action="bearish"]:hover {
    color: var(--danger);
}

.allocation-option-item[data-action="bearish"]:hover i {
    color: var(--danger);
}

.allocation-option-item[data-action="more-info"]:hover {
    color: var(--primary);
}

.allocation-option-item[data-action="more-info"]:hover i {
    color: var(--primary);
}

.action-btn-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 10px;
    -webkit-tap-highlight-color: rgba(239, 68, 68, 0.2);
}

/* Icon-only overflow menu — higher specificity than .action-btn-modern alone */
.action-btn-modern.allocation-options-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    background: var(--bg-tertiary);
}

.action-btn-modern.allocation-options-btn:hover {
    background: var(--bg-tertiary);
}

.action-btn-modern .btn-text-modern {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

.action-btn-modern:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.action-btn-modern.edit-position-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.action-btn-modern.delete-position-btn {
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.12),
        rgba(239, 68, 68, 0.06)
    );
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    color: var(--danger);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.action-btn-modern.delete-position-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.18),
        rgba(239, 68, 68, 0.1)
    );
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}

.action-btn-modern.delete-position-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 639px) {
    .action-btn-modern {
        min-width: auto;
        height: 36px;
        font-size: 14px;
        padding: 6px 10px;
    }

    .action-btn-modern.allocation-options-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .action-btn-modern .btn-text-modern {
        font-size: 13px;
    }
}

/* Badges - match analysis section styling */
.allocation-badges-modern {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Signal badge - analysis-style gradient, white text */
.analysis-signal-badge-modern,
.signal-badge-modern {
    padding: 6px 12px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    font-synthesis: none;
    -webkit-text-stroke: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analysis-signal-badge-modern .metric-value-modern,
.stage-badge-modern .metric-value-modern,
.strength-badge-modern .metric-value-modern,
.allocation-header-total-value .metric-value-modern,
.allocation-header-current-price-modern .metric-value-modern,
.allocation-header-price-change .metric-value-modern {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    background: transparent;
}

.analysis-signal-badge-modern.signal-bullish,
.analysis-signal-badge-modern.bullish,
.signal-badge-modern.signal-bullish,
.signal-badge-modern.bullish,
.signal-badge-modern.strong-bullish {
    background: var(--iris-signal-bullish-fill);
    color: var(--iris-signal-bullish-ink);
}

.analysis-signal-badge-modern.signal-bearish,
.analysis-signal-badge-modern.bearish,
.signal-badge-modern.signal-bearish,
.signal-badge-modern.bearish,
.signal-badge-modern.strong-bearish {
    background: var(--iris-signal-bearish-fill);
    color: var(--iris-signal-bearish-ink);
}

.analysis-signal-badge-modern.signal-hold,
.analysis-signal-badge-modern.hold,
.signal-badge-modern.signal-hold,
.signal-badge-modern.hold {
    background: var(--iris-signal-hold-fill);
    color: var(--iris-signal-hold-ink);
}

.analysis-signal-badge-modern.signal-add,
.signal-badge-modern.signal-add {
    background: var(--iris-signal-add-fill);
    color: var(--iris-signal-add-ink);
}

.analysis-signal-badge-modern.signal-reduce,
.signal-badge-modern.signal-reduce {
    background: var(--iris-signal-reduce-fill);
    color: var(--iris-signal-reduce-ink);
}

/* Stage Section */
.allocation-stage-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* Table grid row: same badges, no extra vertical gap */
.allocation-stage-modern.allocation-stage-grid-cell {
    margin-bottom: 0;
    flex-wrap: wrap;
}

.stage-badge-modern {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-secondary);
}

.stage-badge-modern.stage-1 {
    background: rgba(255, 193, 7, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.stage-badge-modern.stage-2 {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.stage-badge-modern.stage-3 {
    background: rgba(255, 152, 0, 0.2);
    color: #f97316;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.stage-badge-modern.stage-4 {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.strength-badge-modern {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-secondary);
}

.strength-badge-modern.strength-very-strong {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.strength-badge-modern.strength-strong {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.strength-badge-modern.strength-moderate {
    background: rgba(255, 193, 7, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.strength-badge-modern.strength-weak {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.strength-badge-modern.strength-very-weak {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Same pill geometry for signal + stage + strength in allocation cards */
.allocation-stage-modern .analysis-signal-badge-modern,
.allocation-stage-modern .stage-badge-modern,
.allocation-stage-modern .strength-badge-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
}

/* Analysis tab metric badges: reuse symbol-page signal/stage badge system */
.metric-item-modern.allocation-metric-badge-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 82px;
    text-align: center;
    gap: 6px;
    padding: 12px 10px;
}

.metric-item-modern.allocation-metric-badge-cell.signal-metric-badge-modern,
.metric-item-modern.allocation-metric-badge-cell.stage-metric-badge-modern {
    min-height: 82px;
    gap: 6px;
}

#tab-analysis-modern .metric-item-modern.allocation-metric-badge-cell,
#tab-analysis-modern .metric-item-modern.allocation-metric-badge-cell.signal-metric-badge-modern,
#tab-analysis-modern .metric-item-modern.allocation-metric-badge-cell.stage-metric-badge-modern,
#tab-analysis-modern .metric-item-modern.stage-metric-badge-modern.tts-badge-modern {
    border: none;
}

.metric-item-modern.allocation-metric-badge-cell .metric-label-modern {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 100%;
    text-align: center;
}

.metric-item-modern.allocation-metric-badge-cell .metric-value-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    /* Do not flex-grow: grid rows stretch to the tallest cell; flex:1 would
       balloon short Signal/Stage tiles to match a taller sibling in the row. */
    flex: 0 1 auto;
    font-size: clamp(20px, 5cqw, 30px);
    font-weight: 700;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    color: var(--text-primary);
}

.metric-item-modern.allocation-metric-badge-cell-signal .metric-value-modern {
    font-size: clamp(24px, 6cqw, 34px);
}

/* Value Section */
.allocation-value-section-modern {
    margin-bottom: 16px;
}

.position-value-modern {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-align: right;
}

.percent-of-account-modern {
    font-size: 15px;
    color: var(--text-secondary);
}

.allocation-percentage-modern {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    text-align: right;
}

.allocation-amount-modern {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: right;
    margin-top: 4px;
}

/* Metrics Grid */
.allocation-metrics-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.metric-item-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    container-type: inline-size;
    container-name: metric-cell;
}

.metric-item-modern .metric-label-modern,
.metric-item-modern .metric-value-modern {
    text-align: center;
    width: 100%;
}

.metric-label-modern {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.metric-value-modern {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.metric-value-modern.positive {
    color: var(--success);
}

.metric-value-modern.negative {
    color: var(--danger);
}

.allocation-metric-combined-pl {
    align-items: center;
    justify-content: center;
}

.allocation-metric-combined-pl .allocation-header-price-change {
    margin-top: 2px;
}

.allocation-metric-combined-pl .metric-value-modern.positive {
    color: var(--market-success, var(--symbol-success, #22c55e));
}

.allocation-metric-combined-pl .metric-value-modern.negative {
    color: var(--market-danger, var(--symbol-danger, #ef4444));
}

.allocation-metric-combined-pl .metric-value-modern.neutral {
    color: var(--text-secondary);
}

/* Sector / industry tiles: allow long labels without breaking layout */
.allocation-metric-classification-cell .metric-value-modern {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Sector / industry vibe entity: max 2 lines, ellipsis when truncated */
.market-allocation-vibe-badge .allocation-vibe-entity {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.2;
    max-width: 100%;
}

/* Sector / industry vibe badges on allocation cards (review, portfolio, market parity) */
.metric-item-modern.stage-metric-badge-modern.tts-badge-modern {
    border: 1px solid transparent;
}

.metric-item-modern.stage-metric-badge-modern.tts-badge-modern.substage-2a {
    background: color-mix(in srgb, rgb(21 128 61) 72%, var(--iris-tile-blend-base));
    border-color: rgba(22, 163, 74, 0.88);
}

.metric-item-modern.stage-metric-badge-modern.tts-badge-modern.substage-2 {
    background: var(--iris-tile-tts-bg, color-mix(in srgb, rgb(34 197 94) 42%, var(--iris-tile-blend-base)));
    border-color: var(--iris-tile-tts-border, rgba(22, 163, 74, 0.62));
}

.metric-item-modern.stage-metric-badge-modern.tts-badge-modern.substage-2b {
    background: color-mix(in srgb, rgb(34 197 94) 26%, var(--iris-tile-blend-base));
    border-color: rgba(22, 163, 74, 0.48);
}

.metric-item-modern.stage-metric-badge-modern.tts-badge-modern.substage-middle {
    background: var(--iris-tile-warn-bg, color-mix(in srgb, rgb(245 158 11) 30%, var(--iris-tile-blend-base)));
    border-color: rgba(245, 158, 11, 0.5);
}

.metric-item-modern.stage-metric-badge-modern.tts-badge-modern.substage-neutral {
    background: color-mix(in srgb, rgb(100 116 139) 18%, var(--iris-tile-blend-base));
    border-color: rgba(100, 116, 139, 0.34);
}

.metric-item-modern.stage-metric-badge-modern.tts-badge-modern.substage-late {
    background: var(--iris-tile-danger-bg, color-mix(in srgb, rgb(239 68 68) 30%, var(--iris-tile-blend-base)));
    border-color: rgba(239, 68, 68, 0.5);
}

.allocation-card-modern .market-allocation-vibe-badge {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 82px;
    text-align: center;
    padding: 12px 10px;
}

.allocation-card-modern .market-allocation-vibe-badge .vibe-entity-label-modern,
.allocation-card-modern .market-allocation-vibe-badge .allocation-vibe-entity {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    width: 100%;
}

.allocation-card-modern .market-allocation-vibe-badge .vibe-badge-headline-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
}

.allocation-card-modern .market-allocation-vibe-badge .vibe-badge-vibe-text {
    font-size: clamp(11px, 2.5vw, 13px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    max-width: 100%;
    text-align: center;
}

.allocation-card-modern .market-allocation-vibe-badge .vibe-badge-category-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    width: 100%;
    text-align: center;
}

.allocation-card-modern .market-allocation-vibe-badge.signal-metric-badge-modern {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(107, 114, 128, 0.5);
    background: rgba(107, 114, 128, 0.3);
}

.allocation-card-modern .market-allocation-vibe-badge.signal-metric-badge-modern.positive {
    background: rgba(34, 197, 94, 0.32);
    border-color: rgba(22, 163, 74, 0.55);
}

.allocation-card-modern .market-allocation-vibe-badge.signal-metric-badge-modern.negative {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.allocation-card-modern .market-allocation-vibe-badge.signal-metric-badge-modern.warning {
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.5);
}

.allocation-card-modern .market-allocation-vibe-badge.signal-metric-badge-modern.neutral {
    background: rgba(107, 114, 128, 0.3);
    border-color: rgba(107, 114, 128, 0.5);
}

.allocation-metric-span-row {
    grid-column: 1 / -1;
}

/* P/L metric: single line, font scales to fit */
.metric-item-modern:first-child .metric-value-modern {
    white-space: nowrap;
    font-size: clamp(12px, 9cqw, 18px);
}

.metric-item-modern.allocation-metric-badge-cell:first-child .metric-value-modern {
    white-space: normal;
}

#analysis-results-modern .allocation-metrics-modern > .metric-item-modern .metric-value-modern {
    font-size: 18px;
}

:is(#analysis-results-modern, #allocations-cards-modern) .allocation-metrics-modern > .metric-item-modern {
    align-items: center;
    text-align: center;
}

.metric-item-modern:first-child .metric-percent-modern {
    font-size: clamp(11px, 8cqw, 15px);
}

.metric-percent-modern {
    font-size: 15px;
    margin-left: 4px;
}

/* Stage transition probability block (analysis cards) — sit in parent grid */
.allocation-stage-probability-modern {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.allocation-stage-probability-title-modern {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.allocation-stage-prob-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.allocation-stage-prob-item-modern {
    padding: 4px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.allocation-stage-prob-item-modern.most-likely {
    border: none;
    box-shadow: none;
}

.allocation-stage-prob-header-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.allocation-stage-prob-label-modern {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.allocation-stage-prob-value-modern {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.allocation-stage-prob-bar-container-modern {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
}

.allocation-stage-prob-bar-modern {
    height: 100%;
    border-radius: 999px;
    min-width: 2px;
}

/* Expandable Metrics */
.allocation-metrics-expandable {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.allocation-metrics-expandable.expanded {
    display: grid;
    margin-top: 12px;
    padding-bottom: 8px;
    overflow: visible;
}

.allocation-metrics-expandable > .review-allocation-sparkline-wrap {
    grid-column: 1 / -1;
}

.allocation-metrics-expandable > .review-execution-levels-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

#allocations-cards-modern .review-execution-levels-row .metric-item-modern,
#allocations-cards-modern .allocation-account-trio-row .metric-item-modern {
    justify-content: center;
    align-self: stretch;
}

#allocations-cards-modern .review-execution-levels-row .metric-label-modern,
#allocations-cards-modern .allocation-account-trio-row .metric-label-modern {
    white-space: nowrap;
}

#allocations-cards-modern .review-execution-levels-row .metric-item-modern .metric-value-modern,
#allocations-cards-modern .allocation-account-trio-row .metric-item-modern .metric-value-modern {
    white-space: nowrap;
    font-size: clamp(13px, 4.2vw, 18px);
}

#allocations-cards-modern .allocation-account-trio-row .allocation-metric-opened {
    min-height: 0;
}

.allocation-metrics-expandable > .allocation-industry-mcap-row,
.allocation-metrics-expandable > .allocation-account-trio-row {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.allocation-metrics-expandable > .allocation-industry-mcap-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.allocation-metrics-expandable > .allocation-account-trio-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#allocations-cards-modern .allocation-metric-industry-fold {
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

#allocations-cards-modern .allocation-metric-industry-fold .metric-label-modern {
    display: none;
}

#allocations-cards-modern .allocation-metric-industry-fold.allocation-metric-classification-cell .metric-value-modern {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    text-align: center;
    overflow: hidden;
    line-height: 1.25;
}

.allocation-metric-opened {
    min-height: 64px;
}

/* Expandable sits below the Show more button so extra metrics open downward */
.allocation-metrics-expandable-below-fold {
    grid-column: 1 / -1;
}

.allocation-show-more-btn {
    grid-column: 1 / -1;
    justify-self: end;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin-top: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Positions: value/pl full width, then chart + show-more on one row */
#allocations-cards-modern .allocation-card-modern {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 12px;
    row-gap: 0;
    cursor: pointer;
}

#allocations-cards-modern .allocation-card-header-modern,
#allocations-cards-modern .allocation-performance-modern {
    flex: 1 1 100%;
}

#allocations-cards-modern .allocation-metrics-modern {
    display: contents;
}

#allocations-cards-modern .allocation-metric-position-total {
    flex: 1 1 calc(50% - 6px);
    order: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

#allocations-cards-modern .allocation-metric-position-total.allocation-metric-classification-cell {
    padding-left: 16px;
    padding-right: 16px;
}

#allocations-cards-modern .allocation-metric-position-total.allocation-metric-classification-cell .metric-label-modern {
    display: none;
}

#allocations-cards-modern .allocation-metric-position-total.allocation-metric-classification-cell .metric-value-modern {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
}

#allocations-cards-modern .review-allocation-sparkline-wrap {
    position: relative;
    flex: 1 1 100%;
    min-width: 0;
    width: auto;
    max-width: none;
    order: 2;
    margin-top: 12px;
}

#allocations-cards-modern .allocation-metrics-expandable {
    flex: 1 1 100%;
    order: 3;
}

/* Closed tab reuses order-history cards; undo open-position flex/contents layout */
#allocations-cards-modern.order-history-thumbnail-mode-modern {
    grid-auto-rows: auto;
    align-items: stretch;
}

#allocations-cards-modern .allocation-card-order-history-modern {
    display: block;
    cursor: default;
    align-items: stretch;
}

#allocations-cards-modern .allocation-card-order-history-modern .allocation-card-header-modern {
    position: relative;
    z-index: 2;
}

#allocations-cards-modern .allocation-card-order-history-modern .allocation-card-header-row-modern {
    align-items: flex-start;
}

#allocations-cards-modern .allocation-card-order-history-modern .allocation-card-header-company-modern,
.allocation-card-order-history-modern .allocation-card-header-company-modern {
    overflow: visible;
    min-width: 0;
}

#allocations-cards-modern .allocation-card-order-history-modern .allocation-symbol-modern:has(.symbol-info-modern) {
    align-items: flex-start;
    overflow: visible;
}

#allocations-cards-modern .allocation-card-order-history-modern .symbol-info-modern {
    overflow: visible;
}

#allocations-cards-modern .allocation-card-order-history-modern .allocation-card-header-modern,
#allocations-cards-modern .allocation-card-order-history-modern .allocation-performance-modern,
#allocations-cards-modern .allocation-card-order-history-modern .order-history-outcome-lens-modern {
    flex: none;
    width: 100%;
}

#allocations-cards-modern .allocation-card-order-history-modern .allocation-metrics-modern {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

#allocations-cards-modern .allocation-card-order-history-modern .allocation-metric-span-row {
    grid-column: 1 / -1;
}

#allocations-cards-modern .allocation-card-order-history-modern .allocation-metric-span-row .metric-value-modern {
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Order history cards: metrics, realized row, and outcome lens — 3 cells per row */
.allocation-card-order-history-modern .allocation-metrics-modern {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.allocation-card-order-history-modern .allocation-performance-modern {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.allocation-card-order-history-modern .outcome-lens-grid-modern {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.allocation-card-order-history-modern .outcome-lens-grid-modern.outcome-lens-grid-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.allocation-card-order-history-modern .metric-item-modern,
.allocation-card-order-history-modern .performance-cell-modern,
.allocation-card-order-history-modern .outcome-lens-grid-modern .performance-cell-modern {
    padding: 10px 8px;
    min-width: 0;
    align-items: stretch;
    align-self: stretch;
    text-align: center;
}

.allocation-card-order-history-modern .metric-label-modern,
.allocation-card-order-history-modern .performance-label-modern {
    display: block;
    font-size: 11px;
    letter-spacing: 0.35px;
    width: 100%;
    text-align: center;
    align-self: stretch;
}

.allocation-card-order-history-modern .metric-item-modern .metric-value-modern,
.allocation-card-order-history-modern .performance-cell-modern .performance-value-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

.allocation-card-order-history-modern .metric-value-modern,
.allocation-card-order-history-modern .performance-value-modern {
    font-size: clamp(12px, 2.8vw, 16px);
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.allocation-card-order-history-modern .allocation-order-history-source-badge {
    font-size: 11px;
    padding: 4px 8px;
}

.allocation-show-more-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    color: var(--primary);
}

.allocation-show-more-btn .show-more-icon {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.allocation-expandable-actions-modern {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.allocation-expandable-action-btn {
    flex: 1 1 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: var(--transition-fast);
}

.allocation-expandable-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-tertiary);
}

.allocation-expandable-action-close {
    border-color: rgba(239, 71, 111, 0.35);
    color: var(--danger, #ef476f);
}

.allocation-expandable-action-close:hover {
    border-color: var(--danger, #ef476f);
    color: var(--danger, #ef476f);
    background: rgba(239, 71, 111, 0.08);
}

.allocation-expandable-action-add {
    border-color: rgba(16, 185, 129, 0.35);
    color: var(--success, #10b981);
}

.allocation-expandable-action-add:hover {
    border-color: var(--success, #10b981);
    color: var(--success, #10b981);
    background: rgba(16, 185, 129, 0.08);
}

/* Performance Section */
.allocation-performance-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.performance-cell-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.performance-cell-modern .performance-label-modern,
.performance-cell-modern .performance-value-modern,
.performance-cell-modern .metric-label-modern,
.performance-cell-modern .metric-value-modern {
    text-align: center;
    width: 100%;
}

.performance-label-modern {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.performance-value-modern {
    font-size: 22px;
    font-weight: 700;
}

.performance-value-modern.positive {
    color: var(--success);
}

.performance-value-modern.negative {
    color: var(--danger);
}

/* Review variant: allocation-details-modern */
.allocation-details-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.allocation-detail-modern {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.allocation-detail-label-modern {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.allocation-detail-value-modern {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Review page: card + reasoning wrapper */
.allocation-card-wrapper-review {
    min-width: 0; /* allow shrink on small screens (grid item) */
    display: flex;
    flex-direction: column;
}

/* Reasoning Section (Review variant) */
.allocation-reasoning-modern {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.allocation-reasoning-title-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.allocation-reasoning-title-modern i {
    color: var(--primary);
}

.allocation-reasoning-text-modern {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.reasoning-toggle-btn-modern {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
}

.reasoning-toggle-btn-modern:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
}

/* Mobile (matches breakpoints.css: --bp-mobile-max 639px) */
@media (max-width: 639px) {
    .allocation-metrics-expandable {
        display: none !important;
    }

    .allocation-metrics-expandable.expanded {
        display: grid !important;
    }

    .allocation-show-more-btn {
        display: flex !important;
    }

    .allocation-card-modern {
        padding: 14px;
    }

    .symbol-name-modern {
        font-size: 22px;
    }

    .allocation-current-price-value {
        font-size: 22px;
    }

    .allocation-header-total-value {
        font-size: calc(30px - 2pt);
    }

    .position-value-modern {
        font-size: 30px;
    }

    .allocation-metrics-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* Desktop/tablet: same Show more / collapsed expandable as mobile (see .allocation-metrics-expandable) */

/* Metric info trigger - tap to show info modal (no visible icon) */
.allocation-metric-info-trigger {
    cursor: help;
}

/* Allocation card metric / performance cells: hover lift like overview bento stats */
.metric-item-modern.allocation-metric-info-trigger,
.performance-cell-modern.allocation-metric-info-trigger {
    transition: var(--transition);
}

.metric-item-modern.allocation-metric-info-trigger:hover,
.performance-cell-modern.allocation-metric-info-trigger:hover {
    background: var(--bg-glass);
    transform: translateY(-2px);
}

.metric-item-modern.allocation-metric-info-trigger:active,
.performance-cell-modern.allocation-metric-info-trigger:active {
    transform: translateY(0);
}

/* Order history cards: stronger desktop mouse affordance for modal-trigger cells */
.allocation-card-order-history-modern .allocation-metric-info-trigger {
    cursor: pointer;
}

.allocation-card-order-history-modern .allocation-metric-info-trigger .metric-label-modern,
.allocation-card-order-history-modern .allocation-metric-info-trigger .performance-label-modern {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
}

.allocation-card-order-history-modern .allocation-metric-info-trigger .metric-label-modern::after,
.allocation-card-order-history-modern .allocation-metric-info-trigger .performance-label-modern::after {
    content: "\f25a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.72em;
    opacity: 0;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.allocation-card-order-history-modern .allocation-metric-info-trigger:hover .metric-label-modern::after,
.allocation-card-order-history-modern .allocation-metric-info-trigger:hover .performance-label-modern::after {
    opacity: 0.65;
}

/* Overview stat info trigger - same pattern for bento/overview stats */
.overview-stat-info-trigger {
    cursor: help;
    transition: var(--transition);
}

/* Match portfolio list metric tiles: inner “help” cells lift separately from the glass card */
.overview-stat-info-trigger:hover {
    background: var(--bg-glass);
    transform: translateY(-2px);
}

.performance-metrics .metric-row.overview-stat-info-trigger {
    border-radius: var(--radius-md);
}

/* Small help icon after label text (matches Font Awesome 6 loaded on portfolio detail) */
.overview-stat-info-trigger .metric-label,
.overview-stat-info-trigger .stat-label-large,
.overview-stat-info-trigger .stat-label-modern,
.overview-stat-info-trigger .summary-stat-label-modern,
.overview-stat-info-trigger .trade-pick-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.overview-stat-info-trigger .metric-label::after,
.overview-stat-info-trigger .stat-label-large::after,
.overview-stat-info-trigger .stat-label-modern::after,
.overview-stat-info-trigger .summary-stat-label-modern::after,
.overview-stat-info-trigger .trade-pick-label::after {
    content: "\f059";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.72em;
    opacity: 0.5;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
}

/* Bento overview large stats (Capital, History, Equities, Trade picks empty): no help icon */
.stat-display-large.overview-stat-info-trigger .stat-label-large {
    display: block;
}

.stat-display-large.overview-stat-info-trigger .stat-label-large::after {
    content: none;
    display: none;
}

/* Trade Picks bento: unrealized gains / loss / cash — no help icon on labels */
#overview-trade-picks-stats-grid .overview-stat-info-trigger .trade-pick-label {
    display: block;
}

#overview-trade-picks-stats-grid .overview-stat-info-trigger .trade-pick-label::after {
    content: none;
    display: none;
}

/* Risk Profile / summary cards below: no help icon */
.portfolio-summary-modern .overview-stat-info-trigger .stat-label-modern,
.portfolio-summary-modern .overview-stat-info-trigger .summary-stat-label-modern {
    display: block;
}

.portfolio-summary-modern .overview-stat-info-trigger .stat-label-modern::after,
.portfolio-summary-modern .overview-stat-info-trigger .summary-stat-label-modern::after {
    content: none;
    display: none;
}

/* Info Modal - shared with symbol page (same structure as symbol.css) */
.indicator-info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: allocationModalFadeIn 0.2s ease;
}

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

.indicator-info-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    max-width: 800px;
    width: 100%;
    max-height: min(80vh, 80dvh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: allocationModalSlideUp 0.25s ease;
    border: 1px solid var(--border-color);
}

@keyframes allocationModalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.indicator-info-modal.is-swipe-dragging {
    animation: none;
    transition: none;
}

.indicator-info-modal.is-swipe-dismiss {
    animation: none;
    transition: transform 0.14s ease-in;
}

.indicator-info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.indicator-info-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.indicator-info-modal-header--chart {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.indicator-info-modal-header-metrics.allocation-metrics-modern {
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
}

.sparkline-modal-latest-tts {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .stage-metrics-row-modern.stage-metrics-row-latest {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .stage-metric-badge-modern {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    margin: 0;
    gap: 12px;
    min-height: 76px;
    padding: 12px 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--iris-tile-glass-bg, rgba(255, 255, 255, 0.15));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    border: 1px solid var(--iris-tile-glass-border, rgba(255, 255, 255, 0.2));
    color: var(--iris-tile-on-ink, var(--text-primary));
}

.indicator-info-modal--chart .stage-metric-badge-modern.stage-1-bg,
.indicator-info-modal--chart .stage-metric-badge-modern.stage-3-bg,
.indicator-info-modal--chart .stage-metric-badge-modern.signal-hold-bg,
.indicator-info-modal--chart .stage-metric-badge-modern.tts-badge-modern.tts-moderate,
.indicator-info-modal--chart .stage-metric-badge-modern.tts-badge-modern.substage-middle,
.indicator-info-modal--chart .stage-metric-badge-modern.substage-badge-modern.substage-middle {
    background: var(--iris-tile-warn-bg, color-mix(in srgb, rgb(245 158 11) 30%, var(--iris-tile-blend-base)));
    border-color: rgba(245, 158, 11, 0.5);
}

.indicator-info-modal--chart .stage-metric-badge-modern.stage-2-bg,
.indicator-info-modal--chart .stage-metric-badge-modern.signal-bullish-bg,
.indicator-info-modal--chart .stage-metric-badge-modern.tts-badge-modern.tts-positive,
.indicator-info-modal--chart .stage-metric-badge-modern.tts-badge-modern.substage-2,
.indicator-info-modal--chart .stage-metric-badge-modern.substage-badge-modern.substage-2 {
    background: var(--iris-tile-bullish-bg);
    border-color: var(--iris-tile-bullish-border, rgba(22, 163, 74, 0.55));
}

.indicator-info-modal--chart .stage-metric-badge-modern.stage-4-bg,
.indicator-info-modal--chart .stage-metric-badge-modern.signal-bearish-bg,
.indicator-info-modal--chart .stage-metric-badge-modern.tts-badge-modern.tts-negative,
.indicator-info-modal--chart .stage-metric-badge-modern.tts-badge-modern.substage-late,
.indicator-info-modal--chart .stage-metric-badge-modern.substage-badge-modern.substage-late {
    background: var(--iris-tile-danger-bg, color-mix(in srgb, rgb(239 68 68) 30%, var(--iris-tile-blend-base)));
    border-color: rgba(239, 68, 68, 0.5);
}

.indicator-info-modal--chart .stage-metric-badge-modern.tts-badge-modern.substage-2a,
.indicator-info-modal--chart .stage-metric-badge-modern.substage-badge-modern.substage-2a {
    background: color-mix(in srgb, rgb(21 128 61) 72%, var(--iris-tile-blend-base));
    border-color: rgba(22, 163, 74, 0.88);
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .stage-metric-number-modern {
    font-size: var(--type-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-title);
    line-height: 1.25;
    color: inherit;
    text-align: center;
    white-space: nowrap;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .stage-metric-label-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: var(--type-3xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    color: color-mix(in srgb, var(--iris-tile-on-ink, #f8fafc) 78%, transparent);
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .allocation-metric-info-trigger {
    cursor: pointer;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .transition-prob-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
    container-type: inline-size;
    height: 76px;
    min-height: 76px;
    max-height: 76px;
    overflow: hidden;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .transition-prob-item.most-likely {
    border-color: var(--stage-color);
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .transition-prob-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2px;
    text-align: center;
    min-width: 0;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .transition-prob-header .stage-name {
    display: block;
    width: 100%;
    font-weight: var(--weight-medium);
    font-size: clamp(10px, 16cqi, 14px);
    line-height: 1.1;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .transition-prob-value {
    font-size: clamp(12px, 20cqi, 18px);
    line-height: 1.1;
    font-weight: var(--weight-bold);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .transition-prob-bar-container {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .transition-prob-bar {
    height: 100%;
    border-radius: 2px;
    min-width: 2px;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .risk-param-group-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px;
    border-radius: var(--radius-md);
    min-width: 0;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .risk-param-label-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--type-sm);
    font-weight: var(--weight-semibold);
    color: var(--iris-tile-on-ink, var(--text-primary));
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .risk-param-value-modern {
    font-size: var(--type-xl);
    font-weight: var(--weight-bold);
    color: var(--iris-tile-on-ink, #fff);
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .transition-prob-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .signal-risk-params-modern {
    display: block;
}

.indicator-info-modal--chart .sparkline-modal-latest-tts .risk-params-grid-modern {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.indicator-info-modal-header-metrics .metric-item-modern {
    margin: 0;
    min-height: 0;
    padding: 8px 6px;
    gap: 4px;
}

.indicator-info-modal-header-metrics .metric-item-modern.allocation-metric-badge-cell,
.indicator-info-modal-header-metrics .metric-item-modern.stage-metric-badge-modern.tts-badge-modern {
    min-height: 0;
}

.indicator-info-modal-header-metrics .metric-label-modern {
    margin-bottom: 0;
}

.indicator-info-modal-header-metrics .allocation-header-price-change {
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: nowrap;
}

.indicator-info-modal-header-metrics .stage-badge-modern,
.indicator-info-modal-header-metrics .analysis-signal-badge-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.indicator-info-modal--chart {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.indicator-info-modal--chart .indicator-info-modal-header--chart {
    position: static;
    flex-shrink: 0;
}

.indicator-info-modal--chart > .indicator-info-modal-body {
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
}

.indicator-info-modal-title {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-family: var(--font-display);
    font-size: var(--iris-section-title-size);
    font-weight: 700;
    letter-spacing: var(--track-title);
    line-height: 1.3;
    color: var(--text-primary);
}

.indicator-info-modal-title-link {
    color: inherit;
    text-decoration: none;
}

.indicator-info-modal-title-link:hover,
.indicator-info-modal-title-link:focus {
    text-decoration: underline;
}

.indicator-info-modal-advanced-link {
    font-size: var(--type-sm);
    font-weight: var(--weight-semibold);
    color: var(--primary, var(--text-secondary));
    text-decoration: none;
}

.indicator-info-modal-advanced-link:hover,
.indicator-info-modal-advanced-link:focus {
    text-decoration: underline;
}

.indicator-info-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.indicator-info-modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
    transform: scale(1.05);
}

.indicator-info-modal-body {
    padding: 24px 20px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
}

.indicator-info-value-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.indicator-info-value-container.indicator-info-value-hidden {
    display: none;
}

.indicator-info-value {
    display: inline-block;
    font-size: 26px;
    font-weight: 800;
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(147, 51, 234, 0.15));
    color: var(--text-primary);
    border: 2px solid rgba(96, 165, 250, 0.3);
    text-align: center;
}

.indicator-info-value.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.25));
    border-color: rgba(16, 185, 129, 0.5);
    color: #10b981;
}

.indicator-info-value.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.indicator-info-value.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.25));
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

.indicator-info-value.neutral {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.25));
    border-color: rgba(107, 114, 128, 0.5);
    color: var(--text-secondary);
}

.indicator-info-description {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: left;
}

.indicator-info-description.indicator-info-description--company {
    text-align: left;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
}

.indicator-info-description--company p {
    margin: 0 0 12px 0;
}

.indicator-info-description--company p:last-child {
    margin-bottom: 0;
}

.indicator-info-description--company ul {
    margin: 4px 0 12px 0;
    padding-left: 18px;
}

.indicator-info-description--company li {
    margin: 0 0 4px 0;
}

.indicator-info-description strong {
    color: var(--text-primary);
}

.indicator-info-description--rich {
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}

.indicator-info-modal--chart {
    max-width: 860px;
    max-height: min(90vh, 90dvh);
}

.sparkline-info-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sparkline-peak-callout {
    padding: 12px 14px;
    border-radius: var(--radius-md, 10px);
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    border: 1px solid var(--border-color);
}

.sparkline-peak-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.sparkline-peak-pct {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(107, 114, 128, 0.35);
    background: color-mix(in srgb, var(--bg-tertiary, #e5e7eb) 70%, transparent);
    color: var(--text-secondary);
    line-height: 1.2;
}

.sparkline-peak-pct--positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.25));
    border-color: rgba(16, 185, 129, 0.5);
    color: #10b981;
}

.sparkline-peak-pct--negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.sparkline-peak-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}

.sparkline-peak-compare-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.sparkline-peak-compare-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sparkline-peak-compare-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.sparkline-peak-compare-sub {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sparkline-peak-missed {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.sparkline-peak-missed--higher {
    color: #10b981;
}

.sparkline-peak-missed--lower {
    color: #ef4444;
}

.sparkline-peak-meta {
    font-size: 15px;
    font-weight: 650;
    color: var(--text-primary);
}

.sparkline-weekly-section {
    margin-top: 4px;
}

.sparkline-weekly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.sparkline-weekly-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.indicator-info-modal--chart .trinity-weekly-grid-wrap {
    padding: 10px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.indicator-info-modal--chart .trinity-weekly-grid-wrap::-webkit-scrollbar {
    display: none;
}

.indicator-info-modal--chart .trinity-weekly-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(var(--weekly-n), 64px);
    width: max-content;
    min-width: 0;
}

.indicator-info-modal--chart .trinity-weekly-row {
    display: contents;
}

.indicator-info-modal--chart .trinity-weekly-row-months {
    display: contents;
}

.indicator-info-modal--chart .trinity-weekly-month {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.indicator-info-modal--chart .trinity-weekly-col-date {
    display: none;
}

.indicator-info-modal--chart .trinity-weekly-col-date-compact {
    display: block;
}

.indicator-info-modal--chart .trinity-weekly-col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: var(--type-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    text-align: center;
    color: var(--text-primary);
    line-height: 1.25;
}

.indicator-info-modal--chart .trinity-weekly-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 1;
    width: 64px;
    height: 64px;
    min-height: 0;
    padding: 4px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    text-align: center;
    color: var(--text-primary);
}

.indicator-info-modal--chart .trinity-weekly-cell-value {
    font-family: var(--font-sans);
    font-size: var(--type-sm);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    white-space: nowrap;
    color: inherit;
}

.indicator-info-modal--chart .trinity-weekly-cell.stage-1-bg {
    background: var(--iris-tile-neutral-bg, rgba(107, 114, 128, 0.28));
    border-color: rgba(107, 114, 128, 0.48);
}

.indicator-info-modal--chart .trinity-weekly-cell.stage-2-bg,
.indicator-info-modal--chart .trinity-weekly-cell.signal-bullish-bg,
.indicator-info-modal--chart .trinity-weekly-cell.tts-badge-modern.tts-positive,
.indicator-info-modal--chart .trinity-weekly-cell.tts-badge-modern.substage-2,
.indicator-info-modal--chart .trinity-weekly-cell.substage-badge-modern.substage-2 {
    background: var(--iris-tile-bullish-bg, rgba(34, 197, 94, 0.28));
    border-color: rgba(22, 163, 74, 0.52);
}

.indicator-info-modal--chart .trinity-weekly-cell.stage-3-bg,
.indicator-info-modal--chart .trinity-weekly-cell.signal-hold-bg,
.indicator-info-modal--chart .trinity-weekly-cell.tts-badge-modern.tts-moderate,
.indicator-info-modal--chart .trinity-weekly-cell.tts-badge-modern.substage-middle,
.indicator-info-modal--chart .trinity-weekly-cell.substage-badge-modern.substage-middle {
    background: var(--iris-tile-warn-bg, rgba(245, 158, 11, 0.26));
    border-color: rgba(245, 158, 11, 0.48);
}

.indicator-info-modal--chart .trinity-weekly-cell.stage-4-bg,
.indicator-info-modal--chart .trinity-weekly-cell.signal-bearish-bg,
.indicator-info-modal--chart .trinity-weekly-cell.tts-badge-modern.tts-negative,
.indicator-info-modal--chart .trinity-weekly-cell.tts-badge-modern.substage-late,
.indicator-info-modal--chart .trinity-weekly-cell.substage-badge-modern.substage-late {
    background: var(--iris-tile-danger-bg, rgba(239, 68, 68, 0.26));
    border-color: rgba(239, 68, 68, 0.48);
}

.indicator-info-modal--chart .trinity-weekly-cell.tts-badge-modern.substage-2a,
.indicator-info-modal--chart .trinity-weekly-cell.substage-badge-modern.substage-2a {
    background: color-mix(in srgb, rgb(21 128 61) 72%, var(--iris-tile-blend-base));
    border-color: rgba(22, 163, 74, 0.88);
}

.indicator-info-modal--chart .trinity-weekly-cell.stage-1-bg .trinity-weekly-cell-value,
.indicator-info-modal--chart .trinity-weekly-cell.stage-2-bg .trinity-weekly-cell-value,
.indicator-info-modal--chart .trinity-weekly-cell.stage-3-bg .trinity-weekly-cell-value,
.indicator-info-modal--chart .trinity-weekly-cell.stage-4-bg .trinity-weekly-cell-value,
.indicator-info-modal--chart .trinity-weekly-cell.signal-bullish-bg .trinity-weekly-cell-value,
.indicator-info-modal--chart .trinity-weekly-cell.signal-bearish-bg .trinity-weekly-cell-value,
.indicator-info-modal--chart .trinity-weekly-cell.signal-hold-bg .trinity-weekly-cell-value,
.indicator-info-modal--chart .trinity-weekly-cell.tts-badge-modern .trinity-weekly-cell-value,
.indicator-info-modal--chart .trinity-weekly-cell.substage-badge-modern .trinity-weekly-cell-value {
    color: var(--iris-tile-on-ink, #f8fafc);
}

.indicator-info-modal--chart .chart-control-cluster--periods {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    max-width: 100%;
    overflow-x: auto;
}

.indicator-info-modal--chart .chart-control-cluster--periods .chart-period-btn {
    flex: 1 1 0;
    min-width: 2.5rem;
    min-height: 36px;
    height: 36px;
    padding: 0 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    background: var(--iris-period-btn-bg, var(--bg-secondary));
    color: var(--iris-period-btn-fg, var(--text-secondary));
    border-radius: var(--glass-panel-radius);
    font-size: var(--type-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: var(--transition);
}

.indicator-info-modal--chart .chart-period-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-dark);
}

.indicator-info-modal--chart .chart-period-btn.active {
    background: var(--iris-period-btn-active-bg, var(--primary-dark));
    color: var(--iris-period-btn-active-fg, var(--iris-primary-action-fg, #fff));
    border-color: var(--iris-period-btn-active-bg, var(--primary-dark));
}

.sparkline-info-modal-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 640px) {
    .indicator-info-modal--chart {
        max-width: 1100px;
    }

    .sparkline-info-modal-charts {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.indicator-info-modal--chart .review-advanced-chart-host,
.indicator-info-modal--chart .review-allocation-sparkline-wrap--modal {
    cursor: pointer;
}

.sparkline-chart-block + .sparkline-chart-block {
    margin-top: 16px;
}

.sparkline-info-modal-charts .sparkline-chart-block + .sparkline-chart-block {
    margin-top: 0;
}

.sparkline-chart-caption {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

@media (max-width: 639px) {
    .review-allocation-sparkline-wrap--modal .review-allocation-sparkline-inner,
    .review-allocation-sparkline-wrap--modal .review-allocation-sparkline-canvas {
        height: 148px;
    }
}

/* Mobile: centered modal (not a bottom sheet) so overflow text can scroll */
@media (max-width: 639px) {
    .indicator-info-modal-overlay {
        padding: 50px 16px;
        align-items: center;
        justify-content: center;
    }
    .indicator-info-modal-header,
    [data-theme="dark"] .indicator-info-modal-header {
        background: transparent;
        border-bottom: none;
    }
    .indicator-info-modal-close,
    .indicator-info-font-size-btn {
        width: 45px;
        height: 45px;
        background: transparent;
    }
    .indicator-info-description {
        text-align: left;
    }
    .indicator-info-value {
        border-radius: 10px;
    }
    .indicator-info-modal {
        max-width: 100%;
        max-height: min(92vh, 92dvh);
        border-radius: var(--radius-lg);
    }
    .indicator-info-modal-title { font-size: var(--iris-section-title-size); }
    .indicator-info-value { font-size: 22px; padding: 14px 28px; }
    .indicator-info-description { font-size: 16px; }
}