/* ═══════════════════════════════════════
   OPTIONS RESEARCH — UNIQUE STYLES ONLY
   Shared base classes (command bar, autocomplete, tear sheet, ai-card,
   healthflag, spinner, consensus badge) live in research.css and are
   already loaded earlier in main.css.
═══════════════════════════════════════ */

/* ── OPTIONS RESEARCH CHART & SECTION CONTAINERS ── */
/* Different class names from research.css chart cards */
.option-research-chart-card,
.opt-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
}

/* ── SQUEEZE ITEM (extends .ai-card pattern) ── */
.squeeze-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    gap: 12px;
    transition: transform 0.15s ease, border-color 0.15s ease;
    margin-bottom: 12px;
}

.squeeze-item:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.squeeze-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 4px;
}

/* ── SIGNAL ROWS (options-research-specific) ── */
.signal-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.signal-row:last-child { border-bottom: none; }

.signal-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.signal-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    gap: 8px;
    align-items: center;
}

.signal-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ── CONSENSUS BADGE VARIANTS (options research adds positive/warning/neutral) ── */
.consensus-badge.positive { background: var(--positive-dim); color: var(--positive); }
.consensus-badge.warning  { background: var(--warning-dim);  color: var(--warning); }
.consensus-badge.negative { background: var(--negative-dim); color: var(--negative); }
.consensus-badge.neutral  { background: var(--purple-dim);   color: var(--purple); }

/* ── TOOLTIP (hover info icons) ── */
.opt-info-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
}

.opt-info-icon {
    color: var(--border-light);
    cursor: help;
    transition: color 0.15s ease;
}

.opt-info-wrap:hover .opt-info-icon { color: var(--text-primary); }

.opt-info-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    width: 320px;
    white-space: normal !important;
    word-wrap: break-word;
    height: auto;
    box-sizing: border-box;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-ui);
    line-height: 1.5;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
    opacity: 0;
    visibility: hidden;
    /* Scoped: only opacity + transform + visibility change between states — avoids catching layout props */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
    pointer-events: none;
    font-weight: 400;
}

.opt-info-wrap:hover .opt-info-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-6px);
}

/* Arrow pointing down */
.opt-info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--border-light) transparent transparent transparent;
}

/* ── UTILITY COLOR OVERRIDES (used by options_research.js) ── */
.text-positive { color: var(--positive) !important; }
.text-negative { color: var(--negative) !important; }
.text-accent   { color: var(--accent)   !important; }

/* ── RESPONSIVE (options-research-specific overrides) ── */
@media (max-width: 768px) {
    .opt-info-tooltip { width: 260px; }

    .signal-row {
        padding: 8px 12px;
        gap: 8px;
    }
    .signal-title { font-size: 12px; }
    .signal-desc  { font-size: 11px; }

    .squeeze-item { padding: 12px; }
    .squeeze-item-header { padding-bottom: 8px; margin-bottom: 2px; }
}

@media (max-width: 480px) {
    .opt-info-tooltip { width: 200px; font-size: 11px; padding: 10px 12px; }
    .squeeze-item     { padding: 10px; margin-bottom: 8px; }
    .signal-row       { padding: 6px 10px; }
}