/* ============================================================
   ew-stock.css — stock page overview cards (option 3 layout)
   Uses ew-theme.css tokens.
   Header + stat boxes are themed surfaces: cool silver in light
   mode, blackout helmet in dark (--sp-header-* / --box-* tokens).
   ============================================================ */

/* .sp-page is the same container under a different name. The news-article view and
   the other sp- prefixed pages wrap their content in it, and it had no rules at all —
   so the containment below, written for .stock-page, never reached them. Grouped
   rather than duplicated so the two cannot drift. */
.stock-page,
.sp-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* THE ONE FIX FOR EVERY STOCK SUB-PAGE.
       align-items defaults to stretch, so a child should take the container's
       width - except that auto margins on the cross axis DISABLE stretch, and
       every page wrapper here uses "margin: 0 auto" to centre itself. The item
       then sizes to its own content instead, which on a phone means it grows to
       whatever the widest injected chart or table needs and drags the document
       sideways with it.

       That is why the scrollbar only appeared after the JavaScript filled the
       panels: an empty panel has a small max-content width.

       Setting width explicitly overrides the content sizing while leaving the
       auto margins to do the centring they were added for. min-width: 0 stops a
       stubborn child undoing it. Declared here rather than on each page because
       it is a property of this container, and four pages had already been fixed
       one at a time before the pattern was clear. */
    .stock-page > *,
    .sp-page > * {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

/* ---------- Header (helmet / silver surface) ---------- */

.sp-header {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sp-header-border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--sp-header-bg);
    box-shadow: var(--sp-header-shadow);
}

    /* Sheen overlay — light falls across base and watermark alike */
    .sp-header::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: var(--sp-header-sheen);
    }

/* Tone-on-tone ticker watermark */
.sp-header-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: clamp(48px, 8vw, 96px);
    letter-spacing: 4px;
    color: var(--sp-header-mark);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

/* Lift real content above the watermark */
.sp-header-left,
.sp-header-right {
    position: relative;
}

.sp-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sp-logo {
    width: 100px;
    height: 50px;
    object-fit: contain;
}

.sp-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sp-ticker {
    font-size: 26px;
    font-weight: 800;
    color: var(--sp-header-ticker);
}

.sp-company {
    font-size: 14px;
    color: var(--sp-header-company);
}

.sp-meta {
    font-size: 12px;
    color: var(--sp-header-meta);
    margin-top: 2px;
}

.sp-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--sp-header-price);
}

/* ---------- Two-column grid ---------- */

.sp-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    align-items: stretch;
}

.sp-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- 2x2 stat boxes (silver / helmet surface) ---------- */

.sp-box-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sp-box {
    position: relative;
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid var(--box-border);
    background: var(--box-bg);
    box-shadow: var(--box-shadow);
}

.sp-box-label {
    font-size: 11px;
    letter-spacing: 1.2px;
    font-weight: 700;
    /*    text-transform: uppercase;*/
    color: var(--box-label);
    margin-bottom: 4px;
}

.sp-box-value {
    font-size: 22px;
    font-weight: 650;
    color: var(--box-value);
    line-height: 1.15;
}

.sp-box-sub {
    font-size: 12px;
    color: var(--box-sub);
    margin-top: 3px;
}

.sp-brand {
    color: var(--text);
}

/* ---------- linked stat box ---------- */
/* The Earnings Date box is an <a> to that day on the calendar. Two consequences
   of the tag change: an anchor is inline by default, which drops it out of its
   grid cell, and the base `a { color: var(--accent) }` rule would tint every
   value inside it. */

a.sp-box {
    display: block;
    color: inherit;
    text-decoration: none;
}

    a.sp-box:hover,
    a.sp-box:focus-visible {
        color: inherit;
        text-decoration: none;
    }

/* Only the linked variant reacts to the pointer. With no earnings date scheduled
   the anchor renders without an href, and it should not look clickable. */
.sp-box-link {
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

    .sp-box-link:hover,
    .sp-box-link:focus-visible {
        border-color: var(--ew-brand);
        box-shadow: var(--shadow-md);
    }

    .sp-box-link:focus-visible {
        outline: 2px solid var(--ew-brand);
        outline-offset: 2px;
    }

        /* The date is what the link opens, so it carries the affordance rather than
       the whole box shifting colour. */
        .sp-box-link:hover .sp-box-value,
        .sp-box-link:focus-visible .sp-box-value {
            color: var(--ew-brand);
        }

    /* The confirm mark keeps its help cursor and its own tooltip, but it sits
       inside the link now, so a click on it still opens the calendar. */
    .sp-box-link .sp-confirm {
        cursor: help;
    }

@media (prefers-reduced-motion: reduce) {
    .sp-box-link {
        transition: none;
    }
}

/* ---------- Expectation card (silver / helmet surface) ---------- */

.sp-expectation {
    position: relative;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: var(--box-shadow);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Card titles match the stat-box label register */
.sp-card-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    /*    text-transform: uppercase;*/
    color: var(--box-label);
    margin-bottom: 12px;
}

.sp-exp-cols {
    display: flex;
    gap: 20px;
}

.sp-exp-col {
    flex: 1;
}

.sp-exp-label {
    font-size: 11px;
    color: var(--box-sub);
    margin-bottom: 6px;
}

.sp-pill-row {
    display: flex;
    gap: 4px;
}

/* Pills read as recessed wells in the satin surface */
.sp-pill {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    border-radius: 6px;
    background: var(--box-inset-bg);
    border: 1px solid var(--box-inset-border);
    color: var(--box-inset-text);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

    .sp-pill:hover:not(:disabled) {
        background: var(--box-inset-hover);
    }

    /* selected pill wears the gold */
    .sp-pill.is-selected {
        background: var(--box-chip-bg);
        border-color: var(--box-chip-text);
        color: var(--box-chip-text);
        font-weight: 700;
    }

    .sp-pill:disabled {
        cursor: default;
    }

    /* keep a chosen pill fully visible after it locks on submit */
    .sp-pill.is-selected:disabled {
        opacity: 1;
    }

/* ---------- Signals rail (silver / helmet surface) ---------- */

.sp-signals {
    position: relative;
    background: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
}

.sp-signal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--box-divider);
    flex: 1;
}

    .sp-signal:last-child {
        border-bottom: 0;
    }

.sp-signal-label {
    font-size: 13px;
    color: var(--box-sub);
}

.sp-signal-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--box-value);
}

.sp-signal-grade {
    font-size: 14px;
    font-weight: 700;
    color: var(--box-chip-text);
    background: var(--box-chip-bg);
    padding: 2px 12px;
    border-radius: 20px;
}

/* positive / negative */
.sp-pos {
    color: var(--positive);
}

.sp-neg {
    color: var(--negative);
}

/* ---------- Upsell ---------- */

.stock-upsell {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

    .stock-upsell a {
        color: var(--accent);
    }

/* ---------- Responsive: stack columns on narrow screens ---------- */

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

    .sp-box-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sp-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Header action icons (watchlist, calendar, website, X) */
.sp-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

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

.sp-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

    .sp-action:hover,
    .sp-action:focus-visible {
        background: var(--surface-alt);
        color: var(--ew-front-hover);
    }

    /* active state (e.g. watchlist when the company is already on the list) */
    .sp-action.is-active {
        color: var(--ew-front-hover);
    }

        .sp-action.is-active svg {
            fill: currentColor;
        }

/* Price change + percent row (under the price) */
.sp-change-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}

.sp-change,
.sp-percent {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Earnings-date confirmation indicator (top-right of the box) */
.sp-box {
    position: relative; /* anchor for the confirm mark (should already be set) */
}

.sp-confirm {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: help;
}

/* confirmed: green check */
.sp-confirm-yes {
    color: var(--positive);
    background: color-mix(in srgb, var(--positive) 14%, transparent);
}

/* unconfirmed: amber warning */
.sp-confirm-no {
    color: var(--warning, #b8860b);
    background: color-mix(in srgb, var(--warning, #b8860b) 14%, transparent);
}

/* Quarter label under the earnings date */
.sp-box-quarter {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Volatility box: two values side by side (Options Implied / Average Move) */
.sp-vol-pair {
    display: flex;
    gap: 20px;
    margin-top: 2px;
}

.sp-vol-item {
    flex: 1;
}

.sp-vol-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.sp-vol-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Locked state (non-subscribers) */
.sp-vol-lock {
    color: var(--text-muted);
    cursor: help;
}

.sp-vol-pair[title] {
    cursor: help;
}

/* Ensure the pos/neg color wins over .sp-vol-value's default color
   (both are single-class; combined selector raises specificity). */
.sp-vol-value.sp-pos {
    color: var(--positive);
}

.sp-vol-value.sp-neg {
    color: var(--negative);
}
/* Score gauge inside a signal row */
.sp-signal-gauge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 35px;
}

    .sp-signal-gauge svg {
        display: block;
    }

/* Lock shown in place of a gated signal value */
.sp-signal-lock {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    cursor: help;
}
/* Sentiment ring: help cursor to hint at the hover tooltip */
.ew-sent-ring {
    cursor: help;
}

.sp-signal-seal {
    display: inline-flex;
    align-items: center;
}

/* Life cycle: help cursor for the hover tooltip */
.ew-lifecycle {
    cursor: help;
}

/* Call Analysis directional arrows */
.sp-signal-arrows {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    cursor: help;
}

/* Call Analysis cell: arrows and the momentum score share the right-hand slot,
   which .sp-signal already positions via justify-content: space-between */
.sp-signal-cc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* momentum score (-100..100); color comes from .sp-pos / .sp-neg */
.sp-signal-momentum {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

.ca-arrow.ca-up {
    color: var(--ew-green, #0F8A3B);
}

.ca-arrow.ca-down {
    color: var(--ew-red, #e13232);
}

.ca-none {
    color: var(--text-muted);
    font-weight: 700;
}

/* GAAP / non-GAAP note next to the consensus estimate */
.sp-gaap {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin: 0 2px;
}
/* Trend Analysis box: rings + description */
.sp-trend-layout {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-trend-rings {
    flex: 0 0 auto;
    display: inline-flex;
}

    .sp-trend-rings svg {
        display: block;
    }

.sp-trend-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--box-sub);
    flex: 1;
}

/* Trend Analysis locked state (non-subscribers) */
.sp-trend-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 86px;
    color: var(--text-muted);
    cursor: help;
}

/* Ring hover cue (clickable factors) */
.ew-trend-ring {
    transition: stroke-opacity 120ms ease;
}

    .ew-trend-ring:hover {
        stroke-opacity: 1 !important;
    }

.ew-trend-center:hover {
    filter: brightness(1.08);
}

/* Stock page section tabs */
.sp-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.sp-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* overlap the nav's border */
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
    border-radius: 8px 8px 0 0;
    white-space: nowrap;
}

    .sp-nav-tab:hover {
        color: var(--text);
        background: var(--surface-alt);
    }

    /* active tab */
    .sp-nav-tab.is-active {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

    /* locked tabs: muted with a small lock */
    .sp-nav-tab.is-locked {
        color: var(--text-muted);
        opacity: 0.75;
    }

        .sp-nav-tab.is-locked:hover {
            opacity: 1;
        }

.sp-nav-lock {
    flex: 0 0 auto;
    opacity: 0.8;
}

.sp-nav-more {
    margin-left: auto; /* push "More..." to the right */
}

@media (max-width: 640px) {
    .sp-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .sp-nav-more {
        margin-left: 0;
    }
}

/* Expectation hint line (pills submit on click — no submit button) */
.sp-exp-actions {
    margin-top: 14px;
}

.sp-exp-hint {
    font-size: 11px;
    color: var(--box-sub);
}

/* "recorded" confirmation once both expectations are submitted */
.sp-exp-hint-done {
    color: var(--positive);
}

/* Volatility box: label stays at top, values center in the leftover height
   (the box is stretched tall by the Trend Analysis box beside it) */
.sp-box-vol {
    display: flex;
    flex-direction: column;
}
    /* the direct child under the label fills and centers vertically */
    .sp-box-vol > .sp-vol-reveal,
    .sp-box-vol > .sp-vol-pair {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
    }
    /* subscriber: pair is a direct child — lay its two items in a row */
    .sp-box-vol > .sp-vol-pair {
        gap: 20px;
    }
    /* non-subscriber: locked message / revealed pair live inside the reveal box —
   let that inner content fill the centered reveal container */
    .sp-box-vol > .sp-vol-reveal > .sp-vol-locked,
    .sp-box-vol > .sp-vol-reveal > .sp-vol-pair {
        width: 100%;
    }

/* Expectation result chart (replaces the pills after voting) */
.sp-exp-chart {
    width: 100%;
    margin-top: 2px;
}

    .sp-exp-chart svg {
        display: block;
        width: 100%;
        height: auto;
    }

/* Volatility reveal container (locked message, then revealed values) */
.sp-vol-reveal {
    min-height: 44px;
}

/* Locked volatility: lock icon + reveal message (non-subscribers) */
.sp-vol-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    cursor: help;
}

.sp-vol-lock-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.sp-vol-lock-msg {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
}

h1.sp-title-row {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.sp-summary {
    margin: 14px 0 18px;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Add to the stock page's stylesheet (ew-stock.css or equivalent).

   Library attribution, below the content and above the footer. Quiet on purpose:
   it is a credit that needs to be present and legible, not a disclaimer competing
   with the data above it. */
.sp-attrib {
    max-width: 980px;
    margin: 28px auto 0;
    padding: 14px 16px 0;
    border-top: 1px solid var(--border, #d6dce6);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-muted, #5b6472);
    text-align: center;
}

    .sp-attrib a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .sp-attrib a:hover {
            color: var(--ew-gold, #DDB785);
        }