/**
 * Search Components V4 - Clean Centered Interface
 * Minimal, clean styling matching screenshot design
 */

/* ===========================
   Hero Section
   =========================== */
.rippli-hero {
    text-align: center;
}

/* Title & Tagline */
.rippli-hero-header {
    min-height: 64px;
    padding: var(--space-4) var(--space-3);
    background: var(--color-surface-primary);
    margin-bottom: var(--space-4);
    transition: all var(--motion-dur-std) var(--motion-ease);
}

/* When results are showing, collapse hero spacing */
.rippli-hero--results-visible .rippli-hero-header {
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.rippli-hero--results-visible .rippli-hero-header__title {
    font-size: calc(var(--font-size-base) * 2);
}

.rippli-hero--results-visible .rippli-hero-header__tagline {
    display: none;
}

/* Remove background from hero header div */
div#rippliHeader.rippli-hero-header {
    background: transparent;
}

.rippli-hero-header--hidden {
    display: none;
}

.rippli-hero-header__title {
    font-size: calc(var(--font-size-base) * 4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    letter-spacing: calc(var(--space-1) * -0.5);
    font-family: var(--font-body);
}

.rippli-hero-header__tagline {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.5;
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
}

/* ===========================
   Search Container (no card)
   =========================== */
.rippli-search-container {
    position: relative;
    margin-bottom: var(--space-4);
}

/* Compact when results visible */
.rippli-hero--results-visible .rippli-search-container {
    margin-bottom: var(--space-3);
}

/* ===========================
   Search Form & Input
   =========================== */
.rippli-search__form {
    margin-bottom: var(--space-4);
    position: relative;
}

.rippli-search__input-wrapper {
    position: relative;
    display: flex;
    gap: 0;
    align-items: stretch;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
}

.rippli-search__input {
    width: 70%;
    padding: calc(var(--space-3) + var(--space-1)) var(--space-4);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-surface-primary);
    border: calc(var(--space-1) / 4) solid var(--color-border-primary);
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    transition: all var(--motion-dur-fast) var(--motion-ease);
    outline: none;
}

.rippli-search__input:focus {
    border-color: var(--color-interactive-primary);
    border-right: none;
    box-shadow: 0 0 0 calc(var(--space-1) / 2) color-mix(in srgb, var(--color-interactive-primary) 10%, transparent);
}

.rippli-search__input:focus + .rippli-search__btn {
    border-color: var(--color-interactive-primary);
    box-shadow: 0 0 0 calc(var(--space-1) / 2) color-mix(in srgb, var(--color-interactive-primary) 10%, transparent);
}

.rippli-search__input::placeholder {
    color: var(--color-text-tertiary);
}

/* Search Button (from screenshot) */
.rippli-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) calc(var(--space-6) + var(--space-4));
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-body);
    color: var(--color-surface-primary);
    background: var(--color-interactive-primary);
    border: calc(var(--space-1) / 4) solid var(--color-interactive-primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    cursor: pointer;
    transition: all var(--motion-dur-fast) var(--motion-ease);
    white-space: nowrap;
}

.rippli-search__btn:hover {
    background: color-mix(in srgb, var(--color-interactive-primary) 90%, var(--color-text-primary));
    transform: translateY(calc(var(--space-1) * -0.25));
}

.rippli-search__btn:active {
    transform: translateY(0);
}

.rippli-search__btn .btn-icon {
    width: var(--space-4);
    height: var(--space-4);
}

/* ===========================
   Suggestions Dropdown
   =========================== */
.rippli-suggestions {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    background: var(--color-surface-primary);
    border: calc(var(--space-1) / 4) solid var(--color-border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.rippli-suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background var(--motion-dur-std) var(--motion-ease);
    border-bottom: calc(var(--space-1) / 4) solid var(--color-border-primary);
}

.rippli-suggestion-item:last-child {
    border-bottom: none;
}

.rippli-suggestion-item:hover {
    background: var(--color-surface-secondary);
}

.rippli-suggestion-item .suggestion-icon {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-interactive-primary);
    flex-shrink: 0;
}

.suggestion-content {
    flex: 1;
}

.suggestion-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-body);
    color: var(--color-text-primary);
    margin-bottom: calc(var(--space-1) / 2);
}

.suggestion-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ===========================
   Results Container
   =========================== */
.rippli-results-container {
    max-width: 1200px;
    margin: 0 auto 2rem auto;
    width: 100%;
}

/* ===========================
   Narrative Intelligence Header
   =========================== */
.narrative-header {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.narrative-header__top {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
}

.narrative-header__query {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.narrative-header__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-regular);
}

.narrative-header__sectors {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-left: var(--space-2);
}

.narrative-header__metrics {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}

.narrative-header__dot {
    color: var(--color-border-primary);
}

.narrative-header__theme {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.story-stat__value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.story-stat__sentiment {
    font-weight: var(--font-weight-medium);
    color: var(--color-interactive-primary);
}

.story-stat__sentiment--positive {
    color: var(--color-success);
}

.story-stat__sentiment--negative {
    color: var(--color-danger);
}

.story-stat__sentiment--neutral {
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    .narrative-header {
        padding: var(--space-2) var(--space-3);
    }
    
    .narrative-header__top {
        flex-direction: column;
        gap: var(--space-1);
    }
    
    .narrative-header__sectors {
        margin-left: 0;
    }
    
    .narrative-header__metrics {
        gap: var(--space-2);
        font-size: var(--font-size-xs);
    }
}

/* ===========================
   Motion & Animation
   =========================== */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.results-fade-in {
    animation: fadeSlideIn 0.35s ease forwards;
}

.results-stagger-1 { animation-delay: 0.05s; }
.results-stagger-2 { animation-delay: 0.1s; }
.results-stagger-3 { animation-delay: 0.15s; }
.results-stagger-4 { animation-delay: 0.2s; }
.results-stagger-5 { animation-delay: 0.25s; }

/* Loading shimmer */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.loading-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-surface-secondary) 25%,
        var(--color-surface-tertiary) 50%,
        var(--color-surface-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ===========================
   Search Results Tabs
   =========================== */
.rippli-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    position: sticky;
    top: 56px;
    z-index: 350;
    background: var(--color-surface-primary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-2) var(--space-4);
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    border-bottom: 1px solid var(--color-border-primary);
}

.rippli-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-bottom: calc(var(--space-1) / 2) solid transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--motion-dur-std) var(--motion-ease);
    position: relative;
    bottom: calc(var(--space-1) / -4);
}

.rippli-tab:hover {
    color: var(--color-text-primary);
}

.rippli-tab--active {
    color: var(--color-interactive-primary);
    border-bottom-color: var(--color-interactive-primary);
}

.rippli-tab__icon {
    width: var(--space-4);
    height: var(--space-4);
    flex-shrink: 0;
}

.rippli-tab__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.rippli-tab__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}

.rippli-tab__subtitle {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-tertiary);
    line-height: 1.2;
    opacity: 0.8;
}

.rippli-tab--active .rippli-tab__subtitle {
    color: var(--color-interactive-primary);
    opacity: 0.7;
}

/* Tab Panels */
.rippli-tab-panels {
    min-height: 400px;
}

.rippli-tab-content {
    display: none;
    opacity: 0;
}

.rippli-tab-content--active {
    display: block;
    opacity: 1;
    animation: fadeSlideIn 0.3s ease forwards;
}

/* ===========================
   Unified Module Styling
   =========================== */
.rippli-module {
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.rippli-module__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-primary);
}

.rippli-module__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.rippli-module__icon {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-interactive-primary);
}

/* Directional cues styling - Japandi calm aesthetic */
.directional-cue {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
    background: color-mix(in srgb, var(--color-interactive-primary) 6%, transparent);
    border-left: 2px solid var(--color-interactive-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    opacity: 0;
    animation: fadeSlideIn 0.4s ease 0.15s forwards;
}

.directional-cue__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-interactive-primary);
}

/* Stock impact wrapper */
.stock-impact-wrapper {
    padding-bottom: var(--space-8);
}

/* ===========================
   RESPONSIVE BREAKPOINTS
   Using design system tokens throughout
   =========================== */

/* Tablet and above (1024px+) - Default styles apply */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .rippli-hero {
        max-width: 90%;
        padding: 0 var(--space-4);
    }
    
    .rippli-hero-header {
        padding: var(--space-3) var(--space-3);
        margin-bottom: var(--space-6);
    }
    
    .rippli-hero-header__title {
        font-size: calc(var(--font-size-base) * 3);
    }
    
    .rippli-hero-header__tagline {
        font-size: var(--font-size-base);
        padding: 0 var(--space-4);
    }
    
    .rippli-search__input {
        width: 65%;
        padding: var(--space-3) var(--space-4);
    }
    
    .rippli-search__btn {
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-base);
    }
    
    .rippli-results-container {
        padding: 0 var(--space-4);
    }
    
    .rippli-tabs {
        gap: var(--space-1);
        margin-bottom: var(--space-6);
    }
    
    .rippli-tab {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }
    
    .rippli-tab__icon {
        width: var(--space-4);
        height: var(--space-4);
    }
}

/* Mobile (smaller than 768px) */
@media (max-width: 768px) {
    .rippli-hero {
        max-width: 100%;
        padding: 0 var(--space-3);
    }
    
    .rippli-hero-header {
        padding: var(--space-3) var(--space-2);
        margin-bottom: var(--space-5);
    }
    
    .rippli-hero-header__title {
        font-size: calc(var(--font-size-base) * 2);
        margin-bottom: var(--space-2);
    }
    
    .rippli-hero-header__tagline {
        font-size: var(--font-size-sm);
        padding: 0 var(--space-3);
    }
    
    .rippli-search-container {
        margin-bottom: var(--space-6);
    }
    
    .rippli-search__input-wrapper {
        flex-direction: row;
        gap: 0;
    }
    
    .rippli-search__input {
        width: calc(100% - var(--space-16));
        padding: var(--space-3) var(--space-3);
        font-size: var(--font-size-base);
        border-radius: var(--radius-md) 0 0 var(--radius-md);
    }
    
    .rippli-search__btn {
        flex-shrink: 0;
        width: var(--space-16);
        padding: var(--space-3) var(--space-2);
        font-size: 0;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        min-height: calc(var(--space-10) + var(--space-2));
    }
    
    .rippli-search__btn .btn-icon {
        width: var(--space-5);
        height: var(--space-5);
        margin: 0;
    }
    
    .rippli-search__btn span {
        display: none;
    }
    
    .rippli-results-container {
        padding: 0 var(--space-3);
        margin-bottom: var(--space-6);
    }
    
    .rippli-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--space-2);
        margin-bottom: var(--space-5);
        padding-bottom: var(--space-2);
    }
    
    .rippli-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .rippli-tabs::after {
        display: none;
    }
    
    .rippli-tab {
        flex-shrink: 0;
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
        white-space: nowrap;
        min-height: calc(var(--space-10) + var(--space-1));
    }
    
    .rippli-tab__icon {
        width: var(--space-4);
        height: var(--space-4);
    }
    
    .rippli-tab span {
        display: inline;
    }
    
    .rippli-tab-content {
        padding: var(--space-4) var(--space-2);
    }
}

/* Small mobile (smaller than 480px) */
@media (max-width: 480px) {
    .rippli-hero {
        padding: 0 var(--space-2);
    }
    
    .rippli-hero-header {
        padding: var(--space-2);
        margin-bottom: var(--space-4);
    }
    
    .rippli-hero-header__title {
        font-size: calc(var(--font-size-base) * 1.75);
    }
    
    .rippli-hero-header__tagline {
        font-size: var(--font-size-xs);
        padding: 0 var(--space-2);
    }
    
    .rippli-search__input {
        width: calc(100% - var(--space-12));
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
    }
    
    .rippli-search__btn {
        width: var(--space-12);
        padding: var(--space-2);
        min-height: calc(var(--space-10) + var(--space-1));
    }
    
    .rippli-search__btn .btn-icon {
        width: var(--space-4);
        height: var(--space-4);
    }
    
    .rippli-results-container {
        padding: 0 var(--space-2);
    }
    
    .rippli-tab {
        padding: var(--space-2);
        gap: var(--space-1);
        min-height: calc(var(--space-10) + var(--space-1));
    }
    
    .rippli-tab span {
        font-size: var(--font-size-xs);
    }
    
    .rippli-tab-content {
        padding: var(--space-3) var(--space-1);
    }
}

/* ===========================
   Loading States
   =========================== */
.rippli-search__input:disabled,
.rippli-search__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===========================
   Graph Container
   =========================== */
.rippli-graph-container {
    min-height: calc(var(--space-16) * 12);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
}

/* ===========================
   Focus Visible for Accessibility
   =========================== */
.rippli-tab:focus-visible,
.rippli-search__btn:focus-visible,
.rippli-search__input:focus-visible {
    outline: calc(var(--space-1) / 2) solid var(--color-interactive-primary);
    outline-offset: var(--space-1);
}

/* ===========================
   Overview Tab - Executive Summary
   Design Token Compliant - No Hardcoded Values
   =========================== */
.overview-container {
    padding: var(--space-4);
    max-width: calc(var(--space-16) * 75);
    margin: 0 auto;
}

.overview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--space-16) * 18);
    gap: var(--space-4);
    color: var(--color-text-secondary);
}

.overview-loading__spinner {
    width: var(--space-10);
    height: var(--space-10);
    border: var(--space-1) solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: var(--radius-full);
    animation: overview-spin var(--motion-dur-slow) linear infinite;
}

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

.overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }
}

/* Overview Card - Base Component */
.overview-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.overview-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-secondary);
    border-bottom: 1px solid var(--color-border);
}

.overview-card__icon {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-accent);
    flex-shrink: 0;
}

.overview-card__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
    flex: 1;
}

.overview-card__badge {
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.overview-card__badge--ai {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.overview-card__badge-icon {
    width: var(--space-3);
    height: var(--space-3);
}

.overview-card__body {
    padding: var(--space-4);
}

/* Risk Score Display */
.overview-risk-score {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.overview-risk-score__value {
    width: var(--space-12);
    height: var(--space-12);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.overview-risk-score__value--low {
    background: var(--color-success-subtle);
    color: var(--color-success);
}

.overview-risk-score__value--medium {
    background: var(--color-warning-subtle);
    color: var(--color-warning);
}

.overview-risk-score__value--high {
    background: var(--color-danger-subtle);
    color: var(--color-danger);
}

.overview-risk-score__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.overview-risk-score__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.overview-risk-score__level {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.overview-risk-score__level--low { color: var(--color-success); }
.overview-risk-score__level--medium { color: var(--color-warning); }
.overview-risk-score__level--high { color: var(--color-danger); }

/* Overview List */
.overview-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.overview-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background var(--motion-dur-quick) ease;
}

.overview-list__item:last-child {
    border-bottom: none;
}

.overview-list__item:hover {
    background: var(--color-surface-secondary);
    margin-inline: calc(var(--space-2) * -1);
    padding-inline: var(--space-2);
    border-radius: var(--radius-md);
}

.overview-list__indicator {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.overview-list__indicator--high { background: var(--color-danger); }
.overview-list__indicator--medium { background: var(--color-warning); }
.overview-list__indicator--low { background: var(--color-success); }

.overview-list__name {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.overview-list__value {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
}

/* Stocks List */
.overview-stocks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.overview-stocks__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--motion-dur-quick) ease;
    border: 1px solid transparent;
}

.overview-stocks__item:hover {
    border-color: var(--color-accent);
}

.overview-stocks__rank {
    width: var(--space-6);
    height: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.overview-stocks__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.overview-stocks__ticker {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-family: var(--font-mono);
}

.overview-stocks__name {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overview-stocks__metrics {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.overview-stocks__change {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
}

.overview-stocks__change--positive { color: var(--color-success); }
.overview-stocks__change--negative { color: var(--color-danger); }
.overview-stocks__change--neutral { color: var(--color-text-secondary); }

.overview-stocks__soi {
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
}

/* People List */
.overview-people {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.overview-people__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--motion-dur-quick) ease;
}

.overview-people__item:hover {
    background: var(--color-surface-tertiary);
}

.overview-people__avatar {
    width: var(--space-8);
    height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.overview-people__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.overview-people__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.overview-people__role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.overview-people__action {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.overview-people__action-icon {
    width: var(--space-4);
    height: var(--space-4);
}

.overview-people__action--buy { color: var(--color-success); }
.overview-people__action--sell { color: var(--color-danger); }
.overview-people__action--grant { color: var(--color-warning); }

/* AI Content */
.overview-ai-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.overview-ai-loading__dot {
    width: var(--space-2);
    height: var(--space-2);
    background: var(--color-accent);
    border-radius: var(--radius-full);
    animation: overview-pulse var(--motion-dur-slow) ease-in-out infinite;
}

.overview-ai-loading__dot:nth-child(2) { animation-delay: calc(var(--motion-dur-quick)); }
.overview-ai-loading__dot:nth-child(3) { animation-delay: calc(var(--motion-dur-quick) * 2); }

.overview-ai-loading__text {
    margin-left: var(--space-2);
}

@keyframes overview-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.overview-ai-content {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    margin: 0 0 var(--space-3) 0;
}

.overview-ai-content--muted {
    color: var(--color-text-secondary);
}

.overview-ai-disclaimer {
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Empty States */
.overview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    color: var(--color-text-secondary);
    text-align: center;
}

.overview-empty__icon {
    width: var(--space-8);
    height: var(--space-8);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-2);
}

.overview-empty__icon--success {
    color: var(--color-success);
}

.overview-empty__text {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Inline Loading State (for async sections) */
.overview-loading-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--color-text-secondary);
}

.overview-loading-inline__spinner {
    width: var(--space-4);
    height: var(--space-4);
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.overview-loading-inline__text {
    font-size: var(--font-size-sm);
}

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

/* Error State */
.overview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--space-16) * 18);
    color: var(--color-text-secondary);
    text-align: center;
    padding: var(--space-6);
}

.overview-error__icon {
    width: var(--space-10);
    height: var(--space-10);
    color: var(--color-danger);
    margin-bottom: var(--space-3);
}

.overview-error__text {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* ===========================
   Actionable Overview Layout
   Three sections: Stocks, People, Idea Generator
   =========================== */
.overview-actionable {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
}

.overview-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: stretch;
}

.overview-two-column .overview-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.overview-two-column .overview-section__content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.overview-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.overview-section--full {
    grid-column: 1 / -1;
}

/* Market Intel section - allow content to be fully visible */
.overview-section--market-intel {
    overflow: visible;
}

.overview-section--market-intel .overview-section__content {
    overflow: visible;
}

.overview-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-secondary);
    border-bottom: 1px solid var(--color-border);
}

.overview-section__title-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.overview-section__icon {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-accent);
}

.overview-section__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.overview-section__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

.overview-section__story {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-secondary);
    border-bottom: 1px solid var(--color-border);
    font-style: italic;
    line-height: 1.5;
}

.overview-section__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent-contrast);
    background: var(--color-accent);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

.overview-badge-icon {
    width: var(--space-3);
    height: var(--space-3);
}

.overview-section__content {
    padding: var(--space-4);
}

.overview-section__footer {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-secondary);
}

.overview-link-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    padding: var(--space-2);
    margin: calc(var(--space-2) * -1);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color var(--motion-dur-quick) ease;
}

.overview-link-btn:hover {
    color: var(--color-accent-hover);
}

.overview-link-icon {
    width: var(--space-4);
    height: var(--space-4);
}

/* Stock Grid with Checkboxes */
.overview-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-2);
}

.overview-stock-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--motion-dur-quick) ease;
}

.overview-stock-card:hover {
    border-color: var(--color-border);
    background: var(--color-surface-tertiary);
}

.overview-stock-card--selected {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
}

.overview-stock-card__checkbox {
    position: relative;
    flex-shrink: 0;
}

.overview-checkbox {
    width: var(--space-4);
    height: var(--space-4);
    accent-color: var(--color-accent);
    cursor: pointer;
}

.overview-checkbox-label {
    display: none;
}

.overview-stock-card__rank {
    width: var(--space-5);
    height: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.overview-stock-card--selected .overview-stock-card__rank {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.overview-stock-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.overview-stock-card__ticker {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-family: var(--font-mono);
}

.overview-stock-card__name {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overview-stock-card__metrics {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.overview-stock-card__change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
}

.overview-stock-card__change svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.overview-stock-card__change-value {
    font-size: var(--font-size-xs);
}

.overview-stock-card__change--positive { color: var(--color-success); }
.overview-stock-card__change--negative { color: var(--color-danger); }
.overview-stock-card__change--neutral { color: var(--color-text-secondary); }

/* Price Badge - styled like SOI badge */
.overview-stock-card__price-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
}

.overview-stock-card__price-badge--positive {
    color: #047857;
    background: rgba(16, 185, 129, 0.15);
}

.overview-stock-card__price-badge--negative {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.15);
}

.overview-stock-card__price-badge--neutral {
    color: var(--color-text-secondary);
    background: var(--color-surface-tertiary);
}

.overview-stock-card__soi {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
}

.overview-stock-card__soi--low {
    color: var(--color-text-secondary);
    background: var(--color-surface-tertiary);
}

.overview-stock-card__soi--medium {
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
}

.overview-stock-card__soi--high {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.15);
}

.overview-stock-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--motion-dur-quick) ease;
    flex-shrink: 0;
}

.overview-stock-card__link:hover {
    color: var(--color-accent);
    background: var(--color-surface);
}

.overview-stock-card__link svg {
    width: var(--space-4);
    height: var(--space-4);
}

/* People List Redesigned */
.overview-people-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.overview-person-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
    transition: background var(--motion-dur-quick) ease;
}

.overview-person-row:hover {
    background: var(--color-surface-tertiary);
}

.overview-person-row__avatar {
    width: var(--space-8);
    height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.overview-person-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.overview-person-row__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
}

.overview-person-row__name:hover {
    text-decoration: underline;
}

.overview-person-row__role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.overview-person-row__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

.overview-person-row__action--buy {
    color: var(--color-success);
    background: var(--color-success-subtle);
}

.overview-person-row__action--sell {
    color: var(--color-danger);
    background: var(--color-danger-subtle);
}

.overview-person-row__action--grant {
    color: var(--color-warning);
    background: var(--color-warning-subtle);
}

.overview-action-icon {
    width: var(--space-3);
    height: var(--space-3);
}

/* Insider Transaction Row Styles */
.overview-people-list--insider {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.overview-person-row--insider {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--motion-dur-quick) ease;
}

.overview-person-row--insider:hover {
    background: var(--color-surface-tertiary);
    border-color: var(--color-accent);
}

.overview-person-row__left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.overview-person-row__avatar--buy {
    background: var(--color-success);
}

.overview-person-row__avatar--sell {
    background: var(--color-danger);
}

.overview-person-row__avatar--grant {
    background: var(--color-warning);
}

.overview-person-row__transaction {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.overview-person-row__shares {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-family: var(--font-mono);
}

.overview-person-row__value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    font-family: var(--font-mono);
}

.overview-person-row__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Conviction Badge Styles - matches ticker popup */
.overview-conviction-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    border: 1px solid transparent;
}

.overview-conviction-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.overview-conviction-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.overview-conviction-label {
    font-weight: var(--font-weight-medium);
}

/* Buy - Green */
.overview-conviction-badge--buy {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

/* Sell - Orange/Red */
.overview-conviction-badge--sell {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
    border-color: rgba(249, 115, 22, 0.3);
}

/* Grant/Award - Yellow */
.overview-conviction-badge--grant {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.3);
}

/* Exercise - Blue */
.overview-conviction-badge--exercise {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

/* Gift - Gray with subtle styling */
.overview-conviction-badge--gift {
    background: rgba(161, 161, 170, 0.15);
    color: #a1a1aa;
    border-color: rgba(161, 161, 170, 0.3);
}

/* Neutral - Gray */
.overview-conviction-badge--neutral {
    background: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

/* Mention - Purple (for headline-mentioned people) */
.overview-conviction-badge--mention {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.3);
}

/* AI Discovered - Sage Green (for Perplexity discoveries) */
.overview-conviction-badge--ai {
    background: rgba(74, 124, 93, 0.15);
    color: var(--color-accent);
    border-color: rgba(74, 124, 93, 0.3);
}

/* Mentioned people list styling */
.overview-people-list--mentioned {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.overview-person-row--mentioned {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast);
}

.overview-person-row--mentioned:hover {
    background: var(--color-surface-tertiary);
}

.overview-person-row__avatar--accent {
    background: rgba(74, 124, 93, 0.2);
    color: var(--color-accent);
    border: 1px solid rgba(74, 124, 93, 0.3);
}

.overview-person-row__name--headline {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.overview-person-row__badge {
    display: flex;
    align-items: center;
}

/* No avatar layout for compact insider display */
.overview-person-row--no-avatar {
    grid-template-columns: 1fr auto;
}

.overview-person-row--no-avatar .overview-person-row__left {
    gap: 0;
}

/* Mobile responsive for insider rows */
@media (max-width: 640px) {
    .overview-person-row--insider {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    
    .overview-person-row__transaction {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-2);
        text-align: left;
    }
    
    .overview-person-row--insider {
        position: relative;
    }
}

/* ===========================
   Market Intelligence Cards
   Per-stock recommendation cards
   =========================== */
.market-intelligence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.market-intel-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all var(--motion-dur-quick) ease;
}

.market-intel-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.market-intel-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.market-intel-card__stock-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.market-intel-card__ticker {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    color: var(--color-text);
}

.market-intel-card__company {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-intel-card__badge {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

.market-intel-card__badge--bullish {
    color: #047857;
    background: rgba(16, 185, 129, 0.15);
}

.market-intel-card__badge--bearish {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.15);
}

.market-intel-card__badge--neutral {
    color: var(--color-text-secondary);
    background: var(--color-surface-tertiary);
}

.market-intel-card__badge--cautious {
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
}

.market-intel-card__conviction-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.market-intel-card__conviction {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.market-intel-card__confidence {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
    color: var(--color-text-tertiary);
}

.market-intel-card__insights {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    margin-bottom: var(--space-3);
}

.market-intel-card__insight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.market-intel-card__bullet {
    color: var(--color-accent);
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
}

.market-intel-card__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--motion-dur-quick) ease;
    margin-top: auto;
}

.market-intel-card__action:hover {
    color: var(--color-accent);
    background: var(--color-surface);
    border-color: var(--color-accent);
}

.market-intel-card__action svg {
    width: var(--space-4);
    height: var(--space-4);
}

/* Icon-only action button variant */
.market-intel-card__action--icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-left: auto;
    margin-top: 0;
}

/* Compact Market Intelligence Grid - 6 cards in 2-3 columns */
.market-intelligence-grid--compact {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

@media (max-width: 1024px) {
    .market-intelligence-grid--compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Compact Market Intelligence Card */
.market-intel-card--compact {
    padding: var(--space-3);
}

.market-intel-card--compact .market-intel-card__header {
    margin-bottom: var(--space-2);
}

.market-intel-card--compact .market-intel-card__ticker {
    font-size: var(--font-size-base);
}

/* Narrative Text (replaces bullet list) */
.market-intel-card__narrative {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--space-2) 0;
    flex: 1;
}

/* SOI Score Row */
.market-intel-card__soi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.market-intel-card__soi {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

/* SOI Score Color Variants */
.market-intel-card__soi--high {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}

.market-intel-card__soi--medium {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
}

.market-intel-card__soi--low {
    color: var(--color-text-tertiary);
    background: var(--color-surface-tertiary);
}

/* Mobile responsive for Market Intelligence cards */
@media (max-width: 640px) {
    .market-intelligence-grid,
    .market-intelligence-grid--compact {
        grid-template-columns: 1fr;
    }
}

/* Idea Generator */
.overview-generator {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.overview-generator__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
}

.overview-generator__prompt {
    margin: 0;
    margin-left: var(--space-3);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-full);
}

.overview-generator__prompt strong {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.overview-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--motion-dur-quick) ease;
}

.overview-generate-btn:hover:not(:disabled) {
    background: var(--color-accent-hover);
}

.overview-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.overview-generate-btn .btn-icon {
    width: var(--space-4);
    height: var(--space-4);
}

.overview-generate-btn .btn-icon.spinning {
    animation: overview-spin 1s linear infinite;
}

.overview-generator__output {
    min-height: calc(var(--space-16) * 5);
    padding: var(--space-4);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
}

.overview-insight-result {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.overview-insight-result .overview-ai-content {
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0;
}

.overview-insight-result .overview-ai-disclaimer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: normal;
}

.overview-disclaimer-icon {
    width: var(--space-4);
    height: var(--space-4);
    flex-shrink: 0;
}

/* Insight Section Formatting */
.overview-insight-section {
    margin: 0 0 var(--space-4) 0;
    padding: 0;
    line-height: 1.7;
}

.overview-insight-section:first-of-type {
    margin-top: 0;
}

.overview-insight-section:last-of-type {
    margin-bottom: 0;
}

.overview-insight-section__title {
    display: inline;
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    margin-right: var(--space-1);
}

.overview-insight-section__title::after {
    content: ':';
}

/* Better generator output spacing */
.overview-generator__output {
    min-height: auto;
    max-height: 500px;
    overflow-y: auto;
}

/* Reset padding when insight is generated */
.overview-generator__output:has(.rippli-insight) {
    padding: 0;
    background: transparent;
}

/* Default padding for non-insight content */
.overview-generator__output:not(:has(.rippli-insight)) {
    padding: var(--space-5);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
}

.overview-insight-result .overview-ai-content {
    font-size: var(--font-size-base);
    line-height: 1.75;
    margin: 0;
    color: var(--color-text);
}

/* =====================================================
   RIPPLI INSIGHT COMPONENT
   Investor-focused AI analysis with structured sections
   Matches ticker popup styling for consistency
   ===================================================== */

.rippli-insight {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--color-interactive-primary) 5%, transparent),
        color-mix(in srgb, var(--color-interactive-primary) 2%, transparent)
    );
    border-radius: var(--radius-md);
}

.rippli-insight__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.rippli-insight__header-icon {
    width: 20px;
    height: 20px;
    color: var(--color-interactive-primary);
}

.rippli-insight__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.rippli-insight__summary {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--color-interactive-primary) 20%, transparent);
}

.rippli-insight__text {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
}

.rippli-insight__section {
    padding: var(--space-3) 0;
}

.rippli-insight__section--actions {
    background: var(--color-accent-surface);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}

.rippli-insight__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rippli-insight__icon {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
}

.rippli-insight__icon--risk {
    color: var(--color-signal-negative);
}

.rippli-insight__icon--opp {
    color: var(--color-signal-positive);
}

.rippli-insight__list {
    margin: 0;
    padding-left: var(--space-5);
    list-style: disc;
}

.rippli-insight__list li {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.rippli-insight__list--compact li {
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-1);
}

.rippli-insight__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (max-width: 600px) {
    .rippli-insight__grid {
        grid-template-columns: 1fr;
    }
}

.rippli-insight__card {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.rippli-insight__card--risk {
    border-left: 3px solid var(--color-signal-negative);
}

.rippli-insight__card--opp {
    border-left: 3px solid var(--color-signal-positive);
}

.rippli-insight__card-title {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rippli-insight__sentiment {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
}

.rippli-insight__sentiment-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.rippli-insight__sentiment-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.rippli-insight__sentiment-badge--positive {
    background: color-mix(in srgb, var(--color-signal-positive) 15%, transparent);
    color: var(--color-signal-positive);
}

.rippli-insight__sentiment-badge--negative {
    background: color-mix(in srgb, var(--color-signal-negative) 15%, transparent);
    color: var(--color-signal-negative);
}

.rippli-insight__sentiment-badge--neutral {
    background: color-mix(in srgb, var(--color-signal-neutral) 15%, transparent);
    color: var(--color-signal-neutral);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .overview-two-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .overview-stock-grid {
        grid-template-columns: 1fr;
    }
    
    .overview-generator__controls {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* =====================================================
   PERSON PROFILE SECTION (Use Case #9)
   ===================================================== */

.overview-section--person-profile {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--color-accent-surface), var(--color-surface));
}

.overview-person-profile {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
}

.overview-person-profile__avatar {
    flex-shrink: 0;
    width: calc(var(--space-16) + var(--space-4));
    height: calc(var(--space-16) + var(--space-4));
    border-radius: var(--radius-full);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-accent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.overview-person-profile__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.overview-person-profile__initials {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
}

.overview-person-profile__info {
    flex: 1;
    min-width: 0;
}

.overview-person-profile__name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-1) 0;
}

.overview-person-profile__title {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.overview-person-profile__company {
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
}

.overview-person-profile__bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: var(--space-2) 0 0 0;
    line-height: 1.5;
}

.overview-person-profile__metrics {
    display: flex;
    gap: var(--space-4);
    flex-shrink: 0;
}

.overview-person-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    min-width: 80px;
}

.overview-person-metric__value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    font-family: var(--font-mono);
}

.overview-person-metric__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: center;
}

/* Colleague row variant */
.overview-person-row--colleague {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
}

.overview-person-row__company {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.overview-company-icon {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-accent);
}

/* =====================================================
   KEY PEOPLE TAB STYLES
   ===================================================== */

.key-people-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8);
    text-align: center;
}

.key-people-empty__icon {
    width: var(--space-12);
    height: var(--space-12);
    color: var(--color-text-tertiary);
}

.key-people-empty__text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.key-people-person-context {
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--color-accent-surface), var(--color-surface-secondary));
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.key-people-person-context__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.key-people-context-icon {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-accent);
}

.key-people-context-company {
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
    margin-left: var(--space-2);
}

.key-people-colleagues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.key-people-colleague-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--motion-dur-quick) ease;
}

.key-people-colleague-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.key-people-colleague-card__avatar {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-full);
    background: var(--color-accent-surface);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.key-people-colleague-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.key-people-colleague-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.key-people-colleague-card__role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.key-people-colleague-card__company {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.key-people-company-icon {
    width: var(--space-3);
    height: var(--space-3);
    color: var(--color-accent);
}

.key-people-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.key-people-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.key-people-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-4) 0;
}

.key-people-section-icon {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-accent);
}

.key-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.key-people-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
    transition: background var(--motion-dur-quick) ease;
}

.key-people-card:hover {
    background: var(--color-surface-tertiary);
}

.key-people-card__avatar {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-full);
    background: var(--color-accent-surface);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.key-people-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.key-people-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.key-people-card__role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Compact People List - Responsive grid design */
.people-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2);
    width: 100%;
    overflow: hidden;
}

@media (max-width: 600px) {
    .people-list {
        grid-template-columns: 1fr;
    }
}

.people-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 0;
    overflow: hidden;
}

.people-list__item:hover {
    background: var(--color-surface-tertiary);
    border-color: var(--color-accent);
}

.people-list__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.people-list__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.people-list__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.people-list__title {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.people-list__chevron {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.people-list__item:hover .people-list__chevron {
    opacity: 1;
}

/* Modern Key People - For search results with sections */
.key-people-modern {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.key-people-modern__section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}

.key-people-modern__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.key-people-modern__header-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-accent-surface), var(--color-accent));
    display: flex;
    align-items: center;
    justify-content: center;
}

.key-people-modern__header-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.key-people-modern__header-icon--board {
    background: linear-gradient(135deg, var(--color-primary-subtle), var(--color-primary));
}

.key-people-modern__header-text h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.key-people-modern__header-text p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.executive-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.executive-card {
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.executive-card:hover {
    background: var(--color-surface-tertiary);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.executive-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.executive-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, currentColor 20%, transparent);
}

.executive-card__identity {
    flex: 1;
    min-width: 0;
}

.executive-card__name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.executive-card__title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.executive-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.executive-card__stat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.executive-card__stat svg {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
}

.executive-card__stat--transactions svg {
    color: var(--color-success);
}

/* Compact Key People Cards - for articles/headlines */
.key-people-compact-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.key-people-compact-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.key-people-compact-card:hover {
    background: var(--color-surface-tertiary);
    border-color: var(--color-accent);
}

.key-people-compact-card__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.key-people-compact-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.key-people-compact-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.key-people-compact-card__separator {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.key-people-compact-card__role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.key-people-compact-card__badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.key-people-compact-card__chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.key-people-compact-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.key-people-compact-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.key-people-compact-section__title-icon {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
}

/* Responsive adjustments for person profile */
@media (max-width: 768px) {
    .overview-person-profile {
        flex-direction: column;
        text-align: center;
    }
    
    .overview-person-profile__metrics {
        width: 100%;
        justify-content: center;
    }
    
    .key-people-colleagues-grid {
        grid-template-columns: 1fr;
    }
    
    .key-people-compact-card__info {
        flex-wrap: wrap;
    }
    
    .executive-card-grid {
        grid-template-columns: 1fr;
    }
    
    .key-people-modern__section {
        padding: var(--space-3);
    }
    
    .key-people-modern__header {
        gap: var(--space-2);
    }
    
    .key-people-modern__header-icon {
        width: 32px;
        height: 32px;
    }
    
    .key-people-modern__header-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .key-people-modern__header-text h3 {
        font-size: var(--font-size-base);
    }
    
    .executive-card__footer {
        flex-wrap: wrap;
    }
}

/* ===========================
   2x2 Overview Grid Layout
   Storytelling UI Upgrade - Dec 2025
   =========================== */

.overview-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
    .overview-grid-2x2 {
        grid-template-columns: 1fr;
    }
}

/* Quadrant Card Base */
.overview-quadrant {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.overview-quadrant__header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.overview-quadrant__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.overview-quadrant__icon {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-accent);
    flex-shrink: 0;
}

.overview-quadrant__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.overview-quadrant__content {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.overview-quadrant__footer {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

/* See All Button */
.overview-see-all-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    padding: var(--space-1) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-accent);
    cursor: pointer;
    transition: color var(--motion-dur-fast) var(--motion-ease);
}

.overview-see-all-btn:hover {
    color: var(--color-accent-hover);
}

.overview-see-all-icon {
    width: 14px;
    height: 14px;
    transition: transform var(--motion-dur-fast) var(--motion-ease);
}

.overview-see-all-btn:hover .overview-see-all-icon {
    transform: translateX(2px);
}

/* AI Summary in What Happened */
.overview-ai-summary {
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
    border-left: 2px solid var(--color-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.overview-ai-summary__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.overview-ai-summary__text--generated {
    font-style: italic;
}

.overview-ai-summary__text--muted {
    color: var(--color-text-tertiary);
}

/* Headlines List */
.overview-headlines {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.overview-headline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--motion-dur-fast) var(--motion-ease);
}

.overview-headline-item:hover {
    background: var(--color-surface-secondary);
}

.overview-headline-item__number {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.overview-headline-item__text {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.4;
}

.overview-empty-inline {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
    padding: var(--space-2) 0;
}

/* Subsection Labels */
.overview-subsection-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-2) 0;
}

.overview-subsection-icon {
    width: 12px;
    height: 12px;
}

/* Compact Stocks List */
.overview-compact-stocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.overview-compact-stock {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--motion-dur-fast) var(--motion-ease);
}

.overview-compact-stock:hover {
    background: var(--color-surface-secondary);
}

.overview-compact-stock__rank {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.overview-compact-stock__ticker {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
    color: var(--color-text);
    min-width: 50px;
}

.overview-compact-stock__name {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-compact-stock__change {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.overview-compact-stock__change--positive {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.overview-compact-stock__change--negative {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

.overview-compact-stock__change--neutral {
    color: var(--color-text-tertiary);
    background: var(--color-surface-secondary);
}

/* Compact People List */
.overview-compact-people {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.overview-compact-person {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.overview-compact-person__avatar {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.overview-compact-person__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.overview-compact-person__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-compact-person__role {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.3;
}

/* Mini Network Placeholder */
.overview-mini-network {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.overview-mini-network__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
}

.overview-mini-network__icon {
    width: 32px;
    height: 32px;
    color: var(--color-accent);
    opacity: 0.6;
}

.overview-mini-network__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.overview-mini-network__subtext {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: 0;
}

/* Ripple Preview Visualization */
.overview-ripple-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
}

.overview-ripple-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.overview-ripple-center {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.overview-ripple-center__ticker {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: white;
    font-family: var(--font-mono);
}

/* Topic-based ripple center (for headline/topic searches) */
.overview-ripple-center--topic {
    width: auto;
    min-width: 56px;
    max-width: 120px;
    height: auto;
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark, #3d6a4d));
}

.overview-ripple-center--topic .overview-ripple-center__ticker {
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    text-align: center;
    line-height: 1.3;
}

.overview-ripple-connections {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overview-ripple-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.overview-ripple-node--pos1 {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    flex-direction: row-reverse;
}

.overview-ripple-node--pos2 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
}

.overview-ripple-node--pos3 {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.overview-ripple-node--pos4 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
}

.overview-ripple-node--pos4 .overview-ripple-node__line {
    width: 2px;
    height: 20px;
    background: linear-gradient(to top, var(--color-border), var(--color-accent));
}

.overview-ripple-node__line {
    width: 24px;
    height: 2px;
    background: linear-gradient(to right, var(--color-border), var(--color-accent));
    opacity: 0.5;
}

.overview-ripple-node--pos2 .overview-ripple-node__line {
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, var(--color-border), var(--color-accent));
}

.overview-ripple-node__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.overview-ripple-node__ticker {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-family: var(--font-mono);
}

.overview-ripple-node__type {
    font-size: 10px;
    color: var(--color-text-tertiary);
    text-transform: lowercase;
}

.overview-ripple-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
}

.overview-ripple-summary__count {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
}

.overview-ripple-summary__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* More connections indicator */
.overview-ripple-more {
    text-align: center;
    padding-top: var(--space-1);
}

.overview-ripple-more__text {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

/* Sentiment Display */
.overview-sentiment-display {
    padding: var(--space-3);
    background: var(--color-surface-secondary);
    border-radius: var(--radius-md);
}

.overview-sentiment-bar {
    height: 8px;
    background: linear-gradient(to right, 
        var(--color-danger) 0%, 
        var(--color-warning) 30%,
        var(--color-text-tertiary) 50%,
        var(--color-success-light, #a7f3d0) 70%,
        var(--color-success) 100%
    );
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
}

.overview-sentiment-bar__fill {
    position: absolute;
    top: -2px;
    left: 0;
    height: 12px;
    width: 4px;
    background: var(--color-text);
    border-radius: var(--radius-full);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: left var(--motion-dur-std) var(--motion-ease);
}

.overview-sentiment-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
}

.overview-sentiment-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.overview-sentiment-label--bearish {
    color: var(--color-danger);
}

.overview-sentiment-label--bullish {
    color: var(--color-success);
}

.overview-sentiment-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Sentiment Insight */
.overview-sentiment-insight {
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--color-accent) 4%, transparent);
    border-radius: var(--radius-sm);
}

.overview-sentiment-insight__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.overview-sentiment-insight__text--generated {
    font-style: italic;
}

/* Affected Sections in Who's Affected Quadrant */
.overview-affected-companies,
.overview-affected-people {
    display: flex;
    flex-direction: column;
}

.overview-affected-people {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-top: auto;
}

/* Loading Inline */
.overview-loading-inline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.overview-loading-inline__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: var(--radius-full);
    animation: overview-spin 0.8s linear infinite;
}

.overview-loading-inline__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}