/* TOKEN NAMES
   ------------------------------------------------------------
   This file was written against --ew-text, --ew-text-muted, --ew-border and
   --ew-brand. None of those exist. The site's tokens are --text, --text-muted,
   --border and --ew-gold, which is what every other stylesheet here uses.

   An undefined custom property does not inherit or fail loudly: var() just takes
   the fallback. So all 16 of these silently resolved to the literal second
   argument -- values picked for LIGHT mode -- and stayed there in dark mode.
   --ew-text's fallback is #14161a, near-black, which is why the readout figures
   and the closing narrative were invisible on a dark page rather than merely dim.

   Renamed to the real tokens, which are already theme-aware, so both modes follow
   the site. The literals are kept as fallbacks; they are now unreachable.

   --ew-green and --ew-red are left alone: they are used the same way in
   ew-stock.css, and their fallbacks read acceptably in both modes.
   ============================================================ */

/* ============================================================
   ew-sentimentstudy.css — /sentimentstudy/{ticker}

   Loads after ew-stock.css and reuses .es-page, .es-head, .es-sub, .es-note,
   .es-empty and .es-chart from the event study so the two tabs read as the
   same family. Only the current-reading strip and the comparison table are new.
   ============================================================ */

.ss-now {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 1.25rem 0 1.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border, #e2e5ea);
    border-radius: 10px;
}

.ss-now-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* The gauge cell centres on the ring; the change cell stays left-aligned, so
   the two do not fight for the same optical baseline. */
.ss-now-gauge {
    align-items: center;
    text-align: center;
}

.ss-gauge {
    margin: 0.25rem 0;
    /* Reserve the ring's height so the strip does not jump when the SVG is
       drawn after load. EWGauges renders client-side, so without this the
       content below shifts on every page view. */
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Direction colour on the 13-week change, alongside the sign — never colour
   alone, and the sign is already in the number. */
.ss-up {
    color: var(--ew-green, #0F8A3B);
}

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

.ss-now-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted, #4d5560);
}

.ss-now-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.ss-now-scale {
    font-size: 0.78rem;
    color: var(--text-muted, #4d5560);
}

/* ---------- comparison table ---------- */

/* Full width of the content column, matching the chart and the prose above.
   min-width is what forces the horizontal scroll on .lg-table-wrap; at this
   column count the table fits the page, so it only needs enough to stop the
   headers wrapping on a narrow laptop. */
/* .lg-table-wrap IS NOT DEFINED IN ANY STYLESHEET THIS PAGE LOADS.
   The view wraps the table in it and the comment below relies on it to scroll,
   but the page loads ew-stock.css, ew-charts.css and this file - and the class
   is in none of them. So a table with min-width: 46rem simply overflowed, and
   took the document with it.

   Declared here rather than chased into whichever shared file owns it: this page
   needs it, and a duplicate that agrees costs nothing. If the shared rule is ever
   loaded here too, they will not conflict. */
.lg-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.ss-table {
    width: 100%;
    min-width: 46rem;
}

.ss-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Row labels left-aligned. .lg-table centres th by default, which reads fine on
   a two-column reference table and badly here — a centred label above a centred
   caption above centred body text gives the eye no left edge to track down. */
.ss-table th[scope="row"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 22%;
    min-width: 12rem;
    font-weight: 500;
    text-align: left;
}

.ss-label {
    font-weight: 650;
}

.ss-explain {
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-muted, #4d5560);
}

/* The baseline row is the yardstick, so it reads as a header rather than as
   one result among four. */
.ss-baseline {
    background: color-mix(in srgb, var(--ew-gold, #DDB785) 10%, transparent);
}

    .ss-baseline td,
    .ss-baseline th {
        font-weight: 650;
    }

/* Small samples are DIMMED, never hidden — and the dimming is backed by the
   "Small sample" tag in the markup, because opacity alone says nothing to
   someone reading this in greyscale or through a screen reader. */
.ss-thin {
    opacity: 0.72;
}

.ss-tag {
    align-self: flex-start;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--border, #e2e5ea);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #4d5560);
}

.ss-tag-thin {
    border-color: #b9770e;
    color: #b9770e;
}

/* The comparison against baseline, which is the number that actually answers
   whether the sentiment level is telling you anything. Kept quiet so the
   headline figure still reads first. */
.ss-delta {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted, #4d5560);
}

/* ---------- chart ---------- */

.ss-chart-block {
    margin: 0 0 2rem;
}

.ss-chart-wrap {
    margin-top: 1rem;
}

.ss-chart-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

/* The one-line answer under the chart. Deliberately prominent — most readers
   want the number, not the curve, and burying it in a caption means they leave
   with an impression instead of a figure. */
.ss-readout {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted, #4d5560);
}

    .ss-readout strong {
        color: var(--text, #14161a);
        font-variant-numeric: tabular-nums;
    }

/* Episode disclosure. Collapsed by default so it doesn't shout, but the summary
   line carries the count — which is the part that qualifies everything above
   it, so it has to be visible without opening anything. */
.ss-episodes {
    margin-top: 1rem;
    border: 1px solid var(--border, #e2e5ea);
    border-radius: 8px;
}

    .ss-episodes > summary {
        padding: 0.7rem 1rem;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 600;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .ss-episodes > summary::-webkit-details-marker {
            display: none;
        }

        .ss-episodes > summary::before {
            content: "";
            flex: 0 0 auto;
            width: 0.4rem;
            height: 0.4rem;
            border-right: 2px solid var(--ew-gold, #DDB785);
            border-bottom: 2px solid var(--ew-gold, #DDB785);
            transform: rotate(-45deg);
            transition: transform 0.15s ease;
        }

    .ss-episodes[open] > summary::before {
        transform: rotate(45deg);
    }

.ss-episodes-body {
    padding: 0 1rem 1rem;
    font-size: 0.88rem;
    color: var(--text-muted, #4d5560);
}

    .ss-episodes-body ul {
        margin: 0.75rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: 0.4rem 1.5rem;
    }

    .ss-episodes-body li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.3rem 0;
        border-bottom: 1px solid var(--border, #e2e5ea);
    }

@media (prefers-reduced-motion: reduce) {
    .ss-episodes > summary::before {
        transition: none;
    }
}

@media (max-width: 48rem) {
    .ss-now {
        gap: 1rem 1.5rem;
    }

    .ss-now-value {
        font-size: 1.4rem;
    }
}

@media (forced-colors: active) {
    .ss-now,
    .ss-tag {
        border: 1px solid CanvasText;
    }

    .ss-thin {
        opacity: 1;
    }
}

/* Development-only diagnostic block. Never renders in production — see the
   Env.IsDevelopment() guard in the view. */
.ss-debug {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px dashed #b9770e;
    border-radius: 8px;
    font-size: 0.88rem;
}

    .ss-debug ul {
        margin: 0.5rem 0;
        padding-left: 1.2rem;
    }

    .ss-debug code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.85em;
    }


/* ---------- chart container ----------
   .es-chart lives in ew-stock.css, which /eventstudy loads and this page does
   not. Defining the container here rather than pulling in that whole sheet —
   width matters because Lightweight Charts is told the pixel width at creation,
   and a zero-width container silently produces a chart that draws nothing. */
.ss-chart-block .es-chart,
#ssChart {
    width: 100%;
    min-height: 380px;
}


/* ---------- best-in-column tint ----------
   Matches the market-sentiment table on /sentiment. The tint only draws the eye;
   the figure still carries the meaning, so nothing is lost in greyscale, in
   print, or to a screen reader. */
.ss-best {
    background: color-mix(in srgb, var(--ew-green, #0F8A3B) 12%, transparent);
    font-weight: 650;
}

/* ---------- narrative ----------
   The paragraph that states the finding outright, mirroring the one under the
   market-sentiment table. The table only answers the question for a reader who
   already knows how to read it. */
.ss-narrative {
    margin: 1.25rem 0 0;
    max-width: 72ch;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text, #14161a);
}

    .ss-narrative strong {
        font-variant-numeric: tabular-nums;
    }

@media (forced-colors: active) {
    .ss-best {
        background: Highlight;
        color: HighlightText;
    }
}


/* The caption and the label column both align left; the figures stay right so
   decimal points line up down each column. */
.ss-table caption {
    text-align: left;
}

.ss-table thead th:first-child {
    text-align: left;
}

.ss-label,
.ss-explain {
    text-align: left;
}

/* Give the six numeric columns even shares of what is left, so the header row
   does not squeeze "One Quarter Avg" while "Total" sits in acres of space. */
.ss-table thead th.ss-num,
.ss-table tbody td.ss-num {
    width: 13%;
}