/* =============================================
   THE COOL TRADING TIMES — Modal Styles
   ============================================= */

/* Google Fonts for newspaper typography */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=UnifrakturMaguntia&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Outfit:wght@100..900&display=swap');


/* ============ VINTAGE THEME VARIABLES ============ */
.times-newspaper[data-theme="vintage"] {
    --times-bg: #f5f0e8;
    --times-ink: #1a1612;
    --times-ink-light: #3d352b;
    --times-ink-faded: #6b5f51;
    --times-rule: #2a241c;
    --times-rule-light: rgba(0, 0, 0, 0.12);
    --times-accent: #8b2500;
    --times-green: #2e5a2e;
    --times-blue: #2e4a6e;
    --times-red: #8b1a1a;
    --times-font-masthead: 'UnifrakturMaguntia', cursive;
    --times-font-headline: 'Playfair Display', serif;
    --times-font-label: 'Old Standard TT', serif;
    --times-font-body: 'Libre Baskerville', serif;
    --times-font-data: 'Old Standard TT', serif;
    --times-radius: 0px;
    --times-toggle-bg: #ddd4c4;
    --times-toggle-knob: #8b7355;
}

/* ============ MODERN THEME VARIABLES ============ */
.times-newspaper[data-theme="modern"] {
    --times-bg: #0a0a0a;
    --times-ink: #f0e6d0;
    --times-ink-light: #c4b697;
    --times-ink-faded: #8a7d6b;
    --times-rule: #b8860b;
    --times-rule-light: rgba(184, 134, 11, 0.15);
    --times-accent: #d4a017;
    --times-green: #3ecf5a;
    --times-red: #f0443c;
    --times-blue: #5ba4e6;
    --times-font-masthead: 'Outfit', sans-serif;
    --times-font-headline: 'Outfit', sans-serif;
    --times-font-label: 'DM Sans', sans-serif;
    --times-font-body: 'DM Sans', sans-serif;
    --times-font-data: 'Outfit', sans-serif;
    --times-radius: 8px;
    --times-toggle-bg: #1a1a1a;
    --times-toggle-knob: #d4a017;
}


/* ============ OVERLAY — Full-screen dark backdrop ============ */
.times-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.times-overlay.active {
    display: flex;
    opacity: 1;
}


/* ============ MODAL — Centered newspaper container ============ */
.times-modal {
    position: relative;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--times-radius, 0px);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.times-overlay.active .times-modal {
    transform: scale(1);
}


/* ============ NEWSPAPER — Paper-styled content area ============ */
.times-newspaper {
    background: var(--times-bg);
    padding: 0 40px 40px;
    position: relative;
    min-height: 400px;
    transition: background 0.5s ease;
}

/* Subtle paper texture — vintage only */
.times-newspaper[data-theme="vintage"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0, 0, 0, 0.008) 2px, rgba(0, 0, 0, 0.008) 4px
    );
    pointer-events: none;
    z-index: 0;
}

/* Vignette — vintage only */
.times-newspaper[data-theme="vintage"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, transparent 60%, rgba(0, 0, 0, 0.06) 100%);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.06);
    pointer-events: none;
    z-index: 0;
}

/* Modern theme border accent */
.times-newspaper[data-theme="modern"] {
    border: 1px solid rgba(184, 134, 11, 0.1);
}

/* Edition toggle — Morning / Closing switcher */
.times-edition-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 2px;
}

.times-edition-btn {
    background: none;
    border: none;
    padding: 4px 14px;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.03em;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.5);
}

.times-edition-btn.active {
    background: rgba(218, 165, 32, 0.25);
    color: #DAA520;
}

.times-edition-btn:hover:not(.active) {
    color: rgba(255, 255, 255, 0.8);
}

/* Vintage theme overrides */
.times-newspaper[data-theme="vintage"] .times-edition-toggle {
    background: rgba(0, 0, 0, 0.08);
}

.times-newspaper[data-theme="vintage"] .times-edition-btn {
    color: rgba(0, 0, 0, 0.4);
}

.times-newspaper[data-theme="vintage"] .times-edition-btn.active {
    background: rgba(139, 90, 43, 0.2);
    color: #8B5A2B;
}

.times-newspaper[data-theme="vintage"] .times-edition-btn:hover:not(.active) {
    color: rgba(0, 0, 0, 0.7);
}

/* ============ TOP CONTROLS — Theme toggle + Close button ============ */
.times-top-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 0 8px;
    position: relative;
    z-index: 10;
}

.times-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--times-ink-faded);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    transition: color 0.2s ease;
}

.times-close-btn:hover {
    color: var(--times-ink);
}


/* ============ THEME TOGGLE — Sun/Moon switch ============ */
.times-theme-toggle {
    width: 56px;
    height: 26px;
    background: var(--times-toggle-bg);
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: background 0.4s ease;
    border: 1px solid rgba(184, 134, 11, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7px;
}

.times-toggle-icon {
    font-size: 12px;
    line-height: 1;
    transition: opacity 0.3s;
}

/* Vintage: moon active, sun dim */
.times-newspaper[data-theme="vintage"] .times-toggle-icon.sun { opacity: 0.4; }
.times-newspaper[data-theme="vintage"] .times-toggle-icon.moon { opacity: 1; color: #1a1612; }

/* Modern: sun active, moon dim */
.times-newspaper[data-theme="modern"] .times-toggle-icon.sun { opacity: 1; color: #d4a017; }
.times-newspaper[data-theme="modern"] .times-toggle-icon.moon { opacity: 0.4; }

.times-toggle-knob {
    width: 20px;
    height: 20px;
    background: var(--times-toggle-knob);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 3px;
    transition: transform 0.4s cubic-bezier(0.68, -0.15, 0.32, 1.15), background 0.4s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Knob slides right in modern theme */
.times-newspaper[data-theme="modern"] .times-toggle-knob {
    transform: translateX(29px);
}

/* ============ NEWSLETTER SIGNUP — controls row form ============ */

/* Edition toggle is the last "visual" control: auto margin after it
   pushes the action cluster (subscribe, share, close) to the right */
.times-edition-toggle {
    margin-right: auto;
}

.times-subscribe-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Honeypot — parked far offscreen, invisible to humans, visible to bots */
.times-subscribe-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Email input — theme-aware via the same vars as the ticker search */
.times-subscribe-input {
    width: 170px;
    padding: 5px 10px;
    font-family: var(--times-font-data);
    font-size: 12px;
    color: var(--times-ink);
    background: var(--times-bg);
    border: 1px solid var(--times-rule-light);
    border-radius: var(--times-radius, 0);
    outline: none;
    transition: border-color 0.2s, background 0.4s, color 0.4s;
}

.times-subscribe-input::placeholder {
    color: var(--times-ink-faded);
}

.times-subscribe-input:focus {
    border-color: var(--times-accent);
}

/* Subscribe button — filled accent, pairs with the outlined Share */
.times-subscribe-btn {
    padding: 5px 12px;
    font-family: var(--times-font-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--times-bg);
    background: var(--times-accent);
    border: 1px solid var(--times-accent);
    border-radius: var(--times-radius, 0);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.times-subscribe-btn:hover {
    opacity: 0.85;
}

.times-subscribe-btn:disabled {
    opacity: 0.5;
    cursor: default;
}


/* ============ MASTHEAD — Newspaper title and edition info ============ */
.times-masthead {
    text-align: center;
    border-bottom: 4px double var(--times-rule);
    padding-bottom: 12px;
    position: relative;
    z-index: 2;
    transition: border-color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-masthead {
    border-bottom: 1px solid var(--times-rule);
}

/* Top line — Est. / tagline / URL */
.times-masthead-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--times-font-label);
    font-size: 11px;
    color: var(--times-ink-faded);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
    transition: color 0.4s;
}

/* Main title */
.times-masthead-title {
    font-family: var(--times-font-masthead);
    font-size: clamp(42px, 7vw, 72px);
    color: var(--times-ink);
    line-height: 1;
    letter-spacing: 2px;
    margin: 4px 0;
    transition: color 0.4s, font-family 0.1s;
}

.times-newspaper[data-theme="modern"] .times-masthead-title {
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-size: clamp(32px, 5.5vw, 56px);
    text-shadow: 0 0 40px rgba(184, 134, 11, 0.15);
}

/* Edition subtitle */
.times-masthead-subtitle {
    font-family: var(--times-font-label);
    font-size: 10px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--times-ink-faded);
    margin-top: 2px;
    transition: color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-masthead-subtitle {
    color: var(--times-accent);
    letter-spacing: 8px;
}


/* ============ TICKER BAR — Index prices strip ============ */
.times-ticker-bar {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding: 10px 0;
    border-bottom: 2px solid var(--times-rule);
    border-top: 1px solid var(--times-rule);
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    transition: border-color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-ticker-bar {
    border-bottom: 1px solid var(--times-rule-light);
    border-top: 1px solid var(--times-rule-light);
    background: rgba(184, 134, 11, 0.04);
}

.times-ticker-item {
    font-family: var(--times-font-data);
    font-size: 12px;
    color: var(--times-ink);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.4s;
}

.times-ticker-symbol {
    font-weight: 700;
    letter-spacing: 1px;
}

.times-newspaper[data-theme="modern"] .times-ticker-symbol {
    color: var(--times-accent);
}

.times-ticker-value {
    color: var(--times-ink-light);
    transition: color 0.4s;
}

.times-ticker-change {
    font-weight: 700;
    font-size: 11px;
}

.times-ticker-change.up { color: var(--times-green); }
.times-ticker-change.down { color: var(--times-red); }


/* ============ PAGE TURNER — Horizontal slide between 3 pages ============ */
.times-pages {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* Individual page container — content area below ticker bar */
.times-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 16px 20px 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

/* Active page flows naturally — gives container its real height */
.times-page.current {
    position: relative;
    opacity: 1;
}

.times-page.prev { transform: translateX(-100%); }
.times-page.current { transform: translateX(0); }
.times-page.next { transform: translateX(100%); }


/* ============ NAVIGATION ARROWS ============ */
.times-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(26, 22, 18, 0.08);
    border: none;
    color: var(--times-ink-faded);
    font-size: 20px;
    padding: 12px 10px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.times-arrow:hover {
    background: rgba(26, 22, 18, 0.15);
    color: var(--times-ink);
    transform: translateY(-50%);
}

.times-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}

.times-arrow-left { left: 8px; }
.times-arrow-right { right: 8px; }


/* ============ PAGE DOTS ============ */
.times-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 4px;
    position: relative;
    z-index: 5;
}

.times-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.times-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--times-ink-faded);
    opacity: 0.4;
    transition: background 0.3s, opacity 0.3s;
}

.times-dot.active::after {
    background: var(--times-ink);
    opacity: 1;
}

/* ============ SECTION HEADERS — Page titles ============ */
.times-section-header {
    text-align: center;
    padding: 16px 0 12px;
}

.times-section-label {
    font-family: var(--times-font-label);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--times-accent);
    display: block;
    margin-bottom: 4px;
}

.times-section-title {
    font-family: var(--times-font-headline);
    font-size: 22px;
    font-weight: 700;
    color: var(--times-ink);
    margin: 0;
    transition: color 0.4s;
}


/* ============ HORIZONTAL RULE — Section divider ============ */
.times-rule {
    border: none;
    border-top: 1px solid var(--times-rule-light);
    margin: 16px 0;
}


/* ============ FEATURED STORIES — 2 column lead stories ============ */
/* Featured stories — 2 columns with centered divider gutter */
.times-featured-row {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: 0;
    padding: 8px 0;
}

.times-newspaper[data-theme="modern"] .times-featured-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Vertical divider between featured stories */
/* Vertical rule between featured stories (vintage only) */
.times-story-divider {
    background: var(--times-rule);
    width: 1px;
    margin: 0 auto;
    transition: background 0.4s;
}

.times-newspaper[data-theme="modern"] .times-story-divider {
    display: none;
}

.times-story-featured {
    padding: 0 4px;
}

.times-newspaper[data-theme="modern"] .times-story-featured {
    background: rgba(184, 134, 11, 0.04);
    border: 1px solid rgba(184, 134, 11, 0.12);
    border-radius: 8px;
    padding: 16px;
}

/* Story kicker label */
.times-story-kicker {
    font-family: var(--times-font-label);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--times-accent);
    display: block;
    margin-bottom: 6px;
}

/* Featured headline */
.times-story-headline {
    font-family: var(--times-font-headline);
    font-size: 18px;
    font-weight: 900;
    color: var(--times-ink);
    line-height: 1.2;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--times-ink-faded);
    padding-bottom: 6px;
    transition: color 0.4s, border-color 0.4s;
}

.times-story-headline a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.times-story-headline a:hover {
    color: var(--times-accent);
}

.times-newspaper[data-theme="modern"] .times-story-headline {
    font-weight: 600;
    border-bottom-color: rgba(184, 134, 11, 0.2);
}

/* Story summary text */
.times-story-summary {
    font-family: var(--times-font-body);
    font-size: 12.5px;
    color: var(--times-ink-light);
    line-height: 1.65;
    margin: 0 0 10px;
    transition: color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-story-summary {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
}

/* Story meta — ticker badges + read link */
.times-story-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Ticker badges — clickable symbol tags */
.times-ticker-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.times-ticker-badge {
    font-family: var(--times-font-data);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--times-accent);
    border: 1px solid var(--times-accent);
    padding: 2px 8px;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.times-ticker-badge:hover {
    background: var(--times-accent);
    color: var(--times-bg);
}

.times-newspaper[data-theme="modern"] .times-ticker-badge {
    border-radius: 4px;
}

/* ============ TICKER CLICK TOOLTIP — "Journal this ticker" hint ============ */
.times-ticker-badge:hover::after,
.times-mover-ticker:hover::after,
.times-rating-ticker:hover::after,
.times-earning-card-ticker:hover::after {
    content: 'Journal ✎';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--times-font-label);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--times-bg);
    background: var(--times-accent);
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

/* These elements need relative positioning for the tooltip */
.times-ticker-badge,
.times-mover-ticker,
.times-rating-ticker,
.times-earning-card-ticker {
    position: relative;
}

/* Override tooltip for movers — show right instead of above to avoid clipping */
.times-mover-ticker:hover::after {
    bottom: auto;
    left: auto;
    transform: none;
    top: -2px;
    left: calc(100% + 6px);
}

/* Public /times page: ticker badges are static — kill the "Journal ✎" tooltip
   and the pointer cursor so they don't tease an action that won't happen. */
.times-public-mode .times-ticker-badge:hover::after,
.times-public-mode .times-mover-ticker:hover::after,
.times-public-mode .times-rating-ticker:hover::after,
.times-public-mode .times-earning-card-ticker:hover::after {
    content: none;
}

.times-public-mode .times-ticker-badge,
.times-public-mode .times-mover-ticker,
.times-public-mode .times-rating-ticker,
.times-public-mode .times-earning-card-ticker {
    cursor: default;
}

/* Read article link */
.times-read-link {
    font-family: var(--times-font-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--times-ink-faded);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.times-read-link:hover {
    color: var(--times-accent);
}


/* ============ SECONDARY STORIES — 3 column compact row ============ */
.times-secondary-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding: 8px 0;
}

.times-newspaper[data-theme="modern"] .times-secondary-row {
    gap: 12px;
}

.times-story-secondary {
    padding: 0;
    min-width: 0;  /* Prevent ticker badges from blowing out grid columns */
}

/* Keep secondary story badges within card boundaries */
.times-story-secondary .times-story-meta {
    min-width: 0;
    flex-wrap: wrap;
}

.times-newspaper[data-theme="modern"] .times-story-secondary {
    background: rgba(184, 134, 11, 0.04);
    border: 1px solid rgba(184, 134, 11, 0.12);
    border-radius: 8px;
    padding: 12px;
}

/* Compact headline */
.times-story-headline-sm {
    font-family: var(--times-font-headline);
    font-size: 14px;
    font-weight: 700;
    color: var(--times-ink);
    line-height: 1.25;
    margin: 0 0 6px;
    transition: color 0.4s;
}

.times-story-headline-sm a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.times-story-headline-sm a:hover {
    color: var(--times-accent);
}

/* Compact summary */
.times-story-summary-sm {
    font-family: var(--times-font-body);
    font-size: 11.5px;
    color: var(--times-ink-light);
    line-height: 1.55;
    margin: 0 0 8px;
    transition: color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-story-summary-sm {
    font-size: 12px;
    font-weight: 300;
}


/* ============ TICKER SEARCH — Symbol lookup input ============ */
.times-ticker-search {
    padding: 4px 0 0;
}

.times-search-label {
    font-family: var(--times-font-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--times-accent);
    display: block;
    margin-bottom: 8px;
}

.times-search-box {
    display: flex;
    gap: 8px;
}

.times-search-input {
    flex: 1;
    max-width: 320px;
    padding: 8px 12px;
    font-family: var(--times-font-data);
    font-size: 13px;
    color: var(--times-ink);
    background: var(--times-bg);
    border: 1px solid var(--times-rule-light);
    border-radius: var(--times-radius, 0);
    outline: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: border-color 0.2s, background 0.4s, color 0.4s;
}

.times-search-input:focus {
    border-color: var(--times-accent);
}

.times-search-btn {
    padding: 8px 16px;
    font-family: var(--times-font-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--times-bg);
    background: var(--times-ink);
    border: none;
    border-radius: var(--times-radius, 0);
    cursor: pointer;
    transition: background 0.2s, color 0.4s;
}

.times-search-btn:hover {
    background: var(--times-accent);
}

.times-search-results {
    margin-top: 12px;
}

/* Ticker search results — article cards */
.times-search-header {
    font-family: var(--times-font-headline);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--times-rule-light);
    color: var(--times-accent);
}

/* Ticker search result card — left accent edge per article */
.times-search-card {
    padding: 0.75rem 0.75rem 0.75rem 12px;
    margin-bottom: 16px;
    border-left: 3px solid var(--times-rule);
    border-bottom: none;
}

.times-search-card:last-child {
    border-bottom: none;
}

/* Ticker search result headline — theme-aware color */
.times-search-headline {
    font-family: var(--times-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
    color: var(--times-ink);
}

/* Ticker search result summary — use theme color instead of opacity */
.times-search-summary {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--times-ink-light);
    margin: 0 0 0.4rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.times-search-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

/* Ticker search source + date — use theme color instead of opacity */
.times-search-source {
    color: var(--times-ink-faded);
    font-size: 0.72rem;
}



/* ============ SCROLLBAR — Theme-aware styling ============ */
.times-modal::-webkit-scrollbar {
    width: 8px;
}

/* Vintage scrollbar — warm brown on paper */
.times-modal::-webkit-scrollbar-track {
    background: #f5f0e8;
}

.times-modal::-webkit-scrollbar-thumb {
    background: #8b7355;
    border-radius: 4px;
}

.times-modal::-webkit-scrollbar-thumb:hover {
    background: #6b5f51;
}

/* Modern scrollbar — gold tint on dark */
.times-modal[data-theme="modern"]::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.times-modal[data-theme="modern"]::-webkit-scrollbar-thumb {
    background: #3d3520;
    border-radius: 4px;
}

.times-modal[data-theme="modern"]::-webkit-scrollbar-thumb:hover {
    background: #b8860b;
}


/* ============ SUBSECTION HEADERS — "Notable Movers", "Analyst Moves" ============ */
.times-subsection-header {
    font-family: var(--times-font-headline);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    margin: 20px 0 12px;
    color: var(--times-ink);
    transition: color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-subsection-header {
    color: var(--times-accent);
    font-weight: 600;
}


/* ============ MOVERS GRID — Gainers/Losers side by side ============ */
.times-movers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
}

/* Prevent mover columns from overflowing grid boundaries */
.times-movers-grid > div {
    min-width: 0;
    overflow: hidden;
}
/* Column titles — "Gainers" / "Decliners" */
.times-mover-group-title {
    font-family: var(--times-font-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--times-ink-faded);
    border-bottom: 1px solid var(--times-ink-faded);
    padding-bottom: 4px;
    margin-bottom: 6px;
    transition: color 0.4s, border-color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-mover-group-title {
    border-color: rgba(184, 134, 11, 0.2);
}

/* Individual mover row — ticker, name, % change */
.times-mover-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--times-font-data);
    font-size: 14px;
    color: var(--times-ink-light);
    padding: 3px 0;
    border-bottom: 1px dotted var(--times-rule-light);
    transition: color 0.4s, border-color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-mover-row {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(184, 134, 11, 0.06);
    border-radius: 3px;
}

.times-newspaper[data-theme="modern"] .times-mover-row:hover {
    background: rgba(184, 134, 11, 0.05);
}

.times-mover-ticker {
    font-weight: 700;
    color: var(--times-ink);
    min-width: 50px;
    cursor: pointer;
    transition: color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-mover-ticker {
    color: var(--times-accent);
}

.times-mover-ticker:hover {
    color: var(--times-accent);
}

.times-mover-name {
    flex: 1;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mover price — subtle, sits between name and change */
.times-mover-price {
    white-space: nowrap;
    padding-right: 12px;
    color: var(--times-ink-faded);
    font-size: 12px;
    flex-shrink: 0;  /* Prevent price from getting clipped */
}
.times-mover-change {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;  /* Prevent percentage from getting clipped */
}

.times-mover-change.up { color: var(--times-green); }
.times-mover-change.down { color: var(--times-red); }


/* ============ RATINGS GRID — Upgrade/Downgrade cards ============ */
/* Container for collapsible rating sections */
.times-ratings-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Collapsible accordion sections --- */
.times-ratings-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Clickable section header bar */
.times-ratings-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
    user-select: none;
}

.times-ratings-section-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Rotate arrow when expanded */
.times-ratings-section-arrow {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
    display: inline-block;
}

.times-ratings-section-header.expanded .times-ratings-section-arrow {
    transform: rotate(90deg);
}

/* Section title */
.times-ratings-section-title {
    font-family: var(--times-font-headline);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Color-coded titles per section type */
.times-ratings-section-header.upgrade .times-ratings-section-title {
    color: var(--times-green);
}
.times-ratings-section-header.downgrade .times-ratings-section-title {
    color: var(--times-red);
}
.times-ratings-section-header.other .times-ratings-section-title {
    color: var(--times-accent);
}

/* Earnings section header colors — reuses ratings accordion structure */
.times-ratings-section-header.before .times-ratings-section-title {
    color: var(--times-green);
}
.times-ratings-section-header.after .times-ratings-section-title {
    color: var(--times-blue);
}
.times-ratings-section-header.other-tbd .times-ratings-section-title {
    color: var(--times-accent);
}

/* Count badge */
.times-ratings-section-count {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--times-font-label);
}

/* Card grid inside each section (same 2-column layout as before) */
.times-ratings-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px 0 12px 0;
}

/* --- Vintage theme overrides --- */
.times-newspaper[data-theme="vintage"] .times-ratings-section {
    border-bottom-color: rgba(139, 119, 90, 0.2);
}

.times-newspaper[data-theme="vintage"] .times-ratings-section-header:hover {
    background: rgba(139, 119, 90, 0.08);
}

.times-newspaper[data-theme="vintage"] .times-ratings-section-arrow {
    color: rgba(139, 119, 90, 0.5);
}

.times-newspaper[data-theme="vintage"] .times-ratings-section-count {
    color: rgba(139, 119, 90, 0.5);
}

.times-rating-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px dotted var(--times-rule-light);
    transition: all 0.3s;
}

.times-newspaper[data-theme="modern"] .times-rating-card {
    background: rgba(184, 134, 11, 0.04);
    border: 1px solid rgba(184, 134, 11, 0.1);
    border-radius: 6px;
    padding: 12px 14px;
}

.times-newspaper[data-theme="modern"] .times-rating-card:hover {
    background: rgba(184, 134, 11, 0.07);
    border-color: rgba(184, 134, 11, 0.2);
}

/* Vintage rating cards — subtle card definition */
.times-newspaper[data-theme="vintage"] .times-rating-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px 14px;
}

.times-newspaper[data-theme="vintage"] .times-rating-card:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.18);
}

/* Arrow indicator — visual upgrade/downgrade signal */
.times-rating-arrow {
    font-size: 16px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.times-rating-arrow.upgrade { color: var(--times-green); }
.times-rating-arrow.downgrade { color: var(--times-red); }

.times-rating-body {
    flex: 1;
    min-width: 0;
}

/* Ticker + firm name row */
.times-rating-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.times-rating-ticker {
    font-family: var(--times-font-data);
    font-size: 15px;
    font-weight: 700;
    color: var(--times-ink);
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.2s;
}

.times-newspaper[data-theme="modern"] .times-rating-ticker {
    color: var(--times-accent);
}

.times-rating-ticker:hover {
    color: var(--times-accent);
}

.times-rating-firm {
    font-family: var(--times-font-body);
    font-size: 12.5px;
    color: var(--times-ink-faded);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rating transition — Old → New */
.times-rating-change {
    font-family: var(--times-font-data);
    font-size: 13px;
    color: var(--times-ink-light);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.times-rating-old {
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-color: var(--times-ink-faded);
}

.times-rating-arrow-sm {
    font-size: 9px;
    color: var(--times-ink-faded);
}

.times-rating-new {
    font-weight: 700;
}

.times-rating-new.upgrade { color: var(--times-green); }
.times-rating-new.downgrade { color: var(--times-red); }

/* Price target */
.times-rating-pt {
    font-family: var(--times-font-data);
    font-size: 12px;
    color: var(--times-ink-faded);
}

.times-rating-pt strong {
    color: var(--times-ink-light);
}

/* Rating date — small faded timestamp */
.times-rating-date {
    font-family: var(--times-font-label);
    font-size: 10px;
    color: var(--times-ink-faded);
    margin-top: 3px;
    letter-spacing: 0.5px;
}

/* ============ SHOW MORE BUTTON — Overflow toggle ============ */
.times-show-more-wrap {
    text-align: center;
    padding: 12px 0 4px;
}

.times-show-more {
    font-family: var(--times-font-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--times-accent);
    background: none;
    border: 1px solid var(--times-accent);
    padding: 6px 20px;
    cursor: pointer;
    border-radius: var(--times-radius, 0);
    transition: all 0.2s;
}

.times-show-more:hover {
    background: var(--times-accent);
    color: var(--times-bg);
}

/* Empty state — shown when no data available for a section */
.times-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    font-style: italic;
    opacity: 0.6;
    font-size: 0.95rem;
}
/* ============ ECONOMIC CALENDAR — Full-width ledger rows ============ */

/* Column header row — labels above the ledger */
.times-econ-header-row {
    display: grid;
    grid-template-columns: 120px 1fr 80px 80px;
    gap: 8px;
    padding: 6px 12px;
    font-family: var(--times-font-label);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--times-ink-faded);
    border-bottom: 1px solid var(--times-rule);
    margin-bottom: 2px;
    transition: color 0.4s, border-color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-econ-header-row {
    border-color: rgba(184, 134, 11, 0.2);
}

/* Individual event row */
.times-econ-row {
    display: grid;
    grid-template-columns: 120px 1fr 80px 80px;
    gap: 8px;
    padding: 8px 12px;
    font-family: var(--times-font-data);
    font-size: 12px;
    color: var(--times-ink-light);
    border-bottom: 1px dotted var(--times-rule-light);
    transition: all 0.3s;
}

.times-newspaper[data-theme="modern"] .times-econ-row {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(184, 134, 11, 0.06);
    border-radius: 3px;
}

.times-newspaper[data-theme="modern"] .times-econ-row:hover {
    background: rgba(184, 134, 11, 0.05);
}

/* Date/time column */
.times-econ-date {
    font-size: 11px;
    color: var(--times-ink-faded);
    line-height: 1.4;
}

.times-econ-date small {
    font-size: 10px;
    opacity: 0.7;
}

/* Event name column */
.times-econ-event {
    font-weight: 700;
    color: var(--times-ink);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.4s;
}

/* Impact dot — color-coded severity */
.times-econ-impact {
    font-size: 8px;
    flex-shrink: 0;
}

.times-econ-impact.high { color: var(--times-red); }
.times-econ-impact.medium { color: var(--times-accent); }
.times-econ-impact.low { color: var(--times-ink-faded); }

/* Consensus + Previous value columns */
.times-econ-consensus,
.times-econ-previous {
    text-align: right;
    font-size: 12px;
}

.times-econ-consensus {
    font-weight: 700;
    color: var(--times-ink);
    transition: color 0.4s;
}

.times-econ-previous {
    color: var(--times-ink-faded);
}

/* Right-align the header labels to match values */
.times-econ-col-consensus,
.times-econ-col-previous {
    text-align: right;
}


/* ============ DAY GROUP HEADERS — "Today", "Tomorrow", etc. ============ */
.times-day-header {
    font-family: var(--times-font-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--times-ink-faded);
    border-bottom: 1px solid var(--times-ink-faded);
    padding-bottom: 4px;
    margin: 14px 0 8px;
    transition: color 0.4s, border-color 0.4s;
}

.times-newspaper[data-theme="modern"] .times-day-header {
    border-color: rgba(184, 134, 11, 0.2);
}


/* ============ EARNINGS CARDS — 2-column card grid ============ */
/* Earnings container — flex column for accordion sections */
.times-earnings-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Earning card — min-width: 0 completes the truncation chain */
.times-earning-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px dotted var(--times-rule-light);
    transition: all 0.3s;
    min-width: 0;
    overflow: hidden;
}

/* Vintage card definition */
.times-newspaper[data-theme="vintage"] .times-earning-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px 14px;
}

.times-newspaper[data-theme="vintage"] .times-earning-card:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.18);
}

/* Modern card definition */
.times-newspaper[data-theme="modern"] .times-earning-card {
    background: rgba(184, 134, 11, 0.04);
    border: 1px solid rgba(184, 134, 11, 0.1);
    border-radius: 6px;
    padding: 12px 14px;
}

.times-newspaper[data-theme="modern"] .times-earning-card:hover {
    background: rgba(184, 134, 11, 0.07);
    border-color: rgba(184, 134, 11, 0.2);
}

/* Timing icon — left side ☀/☽ */
.times-earning-card-icon {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.times-earning-card-icon.bmo { color: var(--times-green); }
.times-earning-card-icon.amc { color: var(--times-blue); }
.times-earning-card-icon.tbd { color: var(--times-ink-faded); }

.times-earning-card-body {
    flex: 1;
    min-width: 0;
}

/* Ticker + Company row — min-width: 0 forces truncation within grid */
.times-earning-card-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
    min-width: 0;
}

.times-earning-card-ticker {
    font-family: var(--times-font-data);
    font-size: 15px;
    font-weight: 700;
    color: var(--times-ink);
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.2s;
}

.times-newspaper[data-theme="modern"] .times-earning-card-ticker {
    color: var(--times-accent);
}

.times-earning-card-ticker:hover {
    color: var(--times-accent);
}

.times-earning-card-company {
    font-family: var(--times-font-body);
    font-size: 12.5px;
    color: var(--times-ink-faded);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Timing label + details link row */
.times-earning-card-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.times-earning-card-timing {
    font-family: var(--times-font-data);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.times-earning-card-timing.bmo { color: var(--times-green); }
.times-earning-card-timing.amc { color: var(--times-blue); }
.times-earning-card-timing.tbd { color: var(--times-ink-faded); }

/* Details link — links to earnings release URL */
.times-earning-card-link {
    font-family: var(--times-font-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--times-ink-faded);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.times-earning-card-link:hover {
    color: var(--times-accent);
}

/* ============ DRAWING CANVAS — Fading ink overlay ============ */
/* Pointer-events: none — never blocks UI, purely visual */
.times-draw-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
}

/* Prevent text selection while drawing */
.times-newspaper.drawing {
    user-select: none;
}

/* Pen cursor on newspaper — hints that drawing is possible */
.times-newspaper {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z' fill='%23DAA520'/%3E%3C/svg%3E") 0 20, crosshair;
}

/* Vintage theme — dark ink pen */
.times-newspaper[data-theme="vintage"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z' fill='%232a241c'/%3E%3C/svg%3E") 0 20, crosshair;
}

/* Restore normal cursors for interactive elements */
.times-newspaper a,
.times-newspaper button,
.times-newspaper input,
.times-newspaper .times-arrow,
.times-newspaper .times-dot,
.times-newspaper .times-theme-toggle,
.times-newspaper .times-ratings-section-header {
    cursor: pointer;
}

.times-newspaper input {
    cursor: text;
}

/* =============================================
   AI EDITORIAL BRIEFING — Top of Page 1
   Modern Wall Street newspaper feel: serif headline,
   sans-serif body, subtle gold accents.
   ============================================= */

/* --- Container --- */
/* Slightly indented from page edges, generous breathing room above stories */
.times-briefing {
    padding: 18px 4px 24px 4px;
    margin-bottom: 8px;
}

/* --- Kicker label (e.g. "BEFORE THE OPEN") --- */
/* Small, gold, letter-spaced caps — newsroom kicker style */
.times-briefing-kicker {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #DAA520;             /* signature gold */
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* --- Headline (one-sentence thesis) --- */
/* Serif italic — feels like an editor's voice without shouting.
   Bumped margin-bottom 14px → 22px so the eye gets a beat to settle
   before the lede kicks in — classic editorial pacing. */
.times-briefing-headline {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 400;
    color: #FFFFF0;             /* cream */
    margin: 0 0 22px 0;
    padding: 0;
}

/* --- Body container --- */
.times-briefing-body {
    font-family: 'DM Sans', system-ui, sans-serif;
    color: rgba(255, 255, 240, 0.88);
}

/* --- Body paragraphs --- */
/* Slightly looser line-height than story summaries for a "magazine read" feel.
   First paragraph stays flush-left (signals start of body). Subsequent
   paragraphs get a first-line indent — classic newspaper convention. */
.times-briefing-paragraph {
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 4px 0;
    text-indent: 2em;
}

/* First paragraph in the body sits flush — no indent on the opener */
.times-briefing-body > .times-briefing-paragraph:first-child {
    text-indent: 0;
}

/* Paragraphs that follow a bullet list also reset to flush (visual break) */
.times-briefing-bullets + .times-briefing-paragraph {
    text-indent: 0;
}

.times-briefing-paragraph:last-child {
    margin-bottom: 0;
}

/* Bold spans inside paragraphs/bullets (tickers, company names) */
.times-briefing-body strong {
    color: #DAA520;
    font-weight: 600;
}

/* --- Bullet lists --- */
/* Indented further than paragraphs so they nest visually as a sub-element.
   Gold markers, breathing room above and below to read as a distinct block. */
.times-briefing-bullets {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px 1.5em;
}

.times-briefing-bullets li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.55;
}

.times-briefing-bullets li::before {
    content: "•";
    color: #DAA520;
    position: absolute;
    left: 4px;
    font-weight: 700;
}

/* --- Tickers mentioned row --- */
/* Reuses .times-ticker-badge styling for the actual chips; this just lays out the row */
.times-briefing-tickers {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(218, 165, 32, 0.18);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.times-briefing-tickers-label {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 240, 0.5);
    text-transform: uppercase;
    margin-right: 4px;
}

/* =============================================
   VINTAGE THEME OVERRIDES
   Activated when .times-newspaper has data-theme="vintage"
   ============================================= */

[data-theme="vintage"] .times-briefing-kicker {
    color: #8B4513;                              /* saddle brown — vintage ink */
}

[data-theme="vintage"] .times-briefing-headline {
    color: #2a2419;                              /* dark vintage ink */
}

[data-theme="vintage"] .times-briefing-body {
    color: rgba(42, 36, 25, 0.88);
}

/* Bold ticker callouts in vintage — pure black for max readability on cream */
[data-theme="vintage"] .times-briefing-body strong {
    color: #000000;
    font-weight: 700;
}

[data-theme="vintage"] .times-briefing-tickers {
    border-top-color: rgba(139, 69, 19, 0.18);
}

[data-theme="vintage"] .times-briefing-tickers-label {
    color: rgba(42, 36, 25, 0.5);
}

/* Vintage ticker badge pills — pure black text + border for ink-on-paper feel.
   Cascades to every .times-ticker-badge: briefing "Mentioned:" row, story
   cards, and anywhere else this class is used. Hover state preserved. */
[data-theme="vintage"] .times-ticker-badge {
    color: #000000;
    border-color: #000000;
}

[data-theme="vintage"] .times-ticker-badge:hover {
    background: #000000;
    color: var(--times-bg);
}

[data-theme="vintage"] .times-briefing-tickers-label {
    color: rgba(42, 36, 25, 0.5);
}

/* =============================================
   RESPONSIVE — Mobile tweaks
   ============================================= */

@media (max-width: 600px) {
    .times-briefing {
        padding: 14px 2px 18px 2px;
    }

    .times-briefing-headline {
        font-size: 18px;
        line-height: 1.3;
    }

    .times-briefing-paragraph,
    .times-briefing-bullets li {
        font-size: 13px;
    }

    /* Tighter indent on mobile — 2em can feel cramped on narrow viewports */
    .times-briefing-paragraph {
        text-indent: 1.25em;
    }

    .times-briefing-bullets {
        margin-left: 1em;
    }
}

/* =============================================
   MOBILE-ONLY MOVERS TOGGLE — Gainers / Decliners
   Hidden on desktop; shown under 600px.
   Reuses the Morning/Closing edition-toggle visual language.
   ============================================= */

/* Hidden by default — desktop shows both columns side by side */
.times-movers-mobile-toggle {
    display: none;
}

.times-movers-mobile-btn {
    background: none;
    border: none;
    padding: 6px 18px;
    font-size: 0.8rem;
    font-family: var(--times-font-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: var(--times-ink-faded);
}

.times-movers-mobile-btn.active {
    background: rgba(218, 165, 32, 0.18);
    color: var(--times-accent);
}

.times-movers-mobile-btn:hover:not(.active) {
    color: var(--times-ink);
}


/* =============================================
   MOBILE LAYOUT — Stack everything single-column
   Activates under 600px. Affects modal + /times page.
   ============================================= */

@media (max-width: 600px) {

    /* --- Tighter newspaper padding so content has breathing room --- */
    .times-newspaper {
        padding: 0 12px 24px;
    }

    .times-page {
        padding: 12px 4px 0;
    }

    /* --- Masthead: hide side ornaments, keep centered tagline only --- */
    .times-masthead-top {
        justify-content: center;
        font-size: 9px;
        letter-spacing: 0.4px;
    }

    .times-masthead-top > *:first-child,
    .times-masthead-top > *:last-child {
        display: none;
    }

    /* --- Top controls: tighter gap between toggle clusters --- */
    .times-top-controls {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* --- Subscribe form: full-width own line on mobile --- */
    .times-subscribe-form {
        flex-basis: 100%;
        order: 10;              /* wraps below the other controls */
        justify-content: center;
    }

    .times-subscribe-input {
        flex: 1;
        max-width: 240px;
    }

    /* Auto-margin split doesn't apply once everything centers on mobile */
    .times-edition-toggle {
        margin-right: 0;
    }

    /* --- Ticker bar: tighter gap, wraps naturally --- */
    .times-ticker-bar {
        gap: 12px;
        padding: 8px 0;
    }

    /* --- Featured stories: 2 cols → 1 col, hide vertical divider.
           Selector duplicated for modern theme because the desktop modern
           override (.times-newspaper[data-theme="modern"] .times-featured-row)
           has higher specificity than a plain class — we have to match it. --- */
    .times-featured-row,
    .times-newspaper[data-theme="modern"] .times-featured-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .times-story-divider {
        display: none;
    }

    /* --- Secondary stories: 3 cols → 1 col --- */
    .times-secondary-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* --- Ratings/Earnings card grids: 2 cols → 1 col --- */
    .times-ratings-section-grid {
        grid-template-columns: 1fr;
    }

    /* --- Movers toggle: show it, only on mobile --- */
    .times-movers-mobile-toggle {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin-bottom: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        padding: 3px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .times-newspaper[data-theme="vintage"] .times-movers-mobile-toggle {
        background: rgba(0, 0, 0, 0.08);
    }

    /* --- Movers grid: collapse to 1 col, hide the non-selected side --- */
    .times-movers-grid {
        grid-template-columns: 1fr;
    }

    /* Hide column based on data-mobile-view attribute on the grid.
       JS toggles the attribute; CSS handles the visual switch. */
    .times-movers-grid[data-mobile-view="gainers"] > div:nth-child(2),
    .times-movers-grid[data-mobile-view="losers"] > div:nth-child(1) {
        display: none;
    }

    /* --- Movers row: hide company name (too cramped), keep ticker/price/change --- */
    .times-mover-name {
        display: none;
    }

    /* --- Nav arrows: smaller padding so they don't overlap content --- */
    .times-arrow {
        padding: 8px 6px;
        font-size: 16px;
    }
    /* --- Economic calendar: tighten the 4-column grid so all values fit
           on narrow phones. Desktop column widths waste too much space here. --- */
    .times-econ-header-row,
    .times-econ-row {
        grid-template-columns: 56px 1fr 50px 50px;
        gap: 4px;
        padding: 6px 4px;
        font-size: 11px;
    }

    .times-econ-date {
        font-size: 10px;
    }

    .times-econ-consensus,
    .times-econ-previous {
        font-size: 11px;
    }

    /* Event name can wrap normally on mobile — no truncation needed */
    .times-econ-event {
        font-size: 11px;
        line-height: 1.35;
    }
    /* --- Header row: keep small (combined rule above set it to 11px;
           the header should stay 9px to read as label, not row text) --- */
    .times-econ-header-row {
        font-size: 9px;
    }

    /* --- Abbreviate "Consensus" → "Est." and "Previous" → "Prior" on mobile.
           Hide original text via font-size: 0; render shorter label via ::before.
           Only affects header row — value cells use different classes
           (.times-econ-consensus vs .times-econ-col-consensus). --- */
    .times-econ-col-consensus,
    .times-econ-col-previous {
        font-size: 0;
    }

    .times-econ-col-consensus::before {
        content: "Est.";
        font-size: 9px;
    }

    .times-econ-col-previous::before {
        content: "Prior";
        font-size: 9px;
    }
    /* --- Share button on mobile: hide the "Share" label, keep icon only --- */
    .times-controls-share-btn-label {
        display: none;
    }

    .times-controls-share-btn {
        padding: 4px 8px;
    }

    .times-controls-share-btn-icon {
        font-size: 16px;
    }
}

/* =============================================
   SHARE BUTTON — Lives in top controls, theme-aware
   ============================================= */

/* Sits next to theme toggle / edition toggle / close button.
   Uses theme CSS vars so it auto-adapts vintage ↔ modern. */
.times-controls-share-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--times-accent);
    color: var(--times-accent);
    padding: 4px 10px;
    font-family: var(--times-font-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: var(--times-radius, 0);
    transition: background 0.2s, color 0.2s;
    box-sizing: border-box;
    flex-shrink: 0;
    white-space: nowrap;
}

.times-controls-share-btn:hover {
    background: var(--times-accent);
    color: var(--times-bg);
}

.times-controls-share-btn-icon {
    font-size: 14px;
    line-height: 1;
}

/* =============================================
   SHARE TOAST — "Link copied!" floating confirmation
   Appended to document.body by JS; auto-removes after ~2s.
   Bottom-right placement matches the home page share toast.
   ============================================= */

.times-share-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #1a1a1a;
    color: #DAA520;
    border: 1px solid rgba(218, 165, 32, 0.4);
    padding: 10px 18px;
    border-radius: 6px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    z-index: 11000;  /* Above the times-overlay (z-index: 10000) */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.times-share-toast.visible {
    opacity: 1;
    transform: translateY(0);
}