/* ---------------------------------------------------------------------------
   Server-rendered data blocks.
   ---------------------------------------------------------------------------
   Markup comes from ssr_lib.js, which replaces each page's "Loading…"
   placeholder with today's figures before the response is sent. Whatever the
   page's own script builds then replaces it in turn, so most people see this
   for a fraction of a second — and everything that doesn't run JavaScript sees
   only this.

   It is styled to be legible rather than to imitate the interactive version.
   Trying to match each page's cards pixel for pixel would mean maintaining two
   renderers per page that must agree; a plain, well-set table doesn't need to
   agree with anything, and reads correctly in a crawler, a reader mode and a
   text browser as well as here.
--------------------------------------------------------------------------- */

.ssr-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: #c2c6d6;
}

.ssr-cap {
    caption-side: top;
    text-align: left;
    padding: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.ssr-tbl th,
.ssr-tbl td {
    padding: 9px 12px 9px 0;
    text-align: right;
    border-bottom: 1px solid var(--card-brd);
    white-space: nowrap;
}

.ssr-tbl thead th {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

/* First column is the row's subject — the participant, the stock, the issue. */
.ssr-tbl th[scope="row"],
.ssr-tbl thead th:first-child,
.ssr-tbl td:first-child {
    text-align: left;
}

.ssr-tbl th[scope="row"] {
    font-weight: 650;
    color: var(--txt);
}

/* A second line under the headword — the company behind a symbol, the symbol
   behind an issue name. */
.ssr-tbl th[scope="row"] small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--faint);
    white-space: normal;
}

.ssr-tbl tbody tr:last-child th,
.ssr-tbl tbody tr:last-child td {
    border-bottom: 0;
}

.ssr-net {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 700;
}

.ssr-net.up {
    color: var(--up);
}

.ssr-net.dn {
    color: var(--down);
}

.ssr-rank {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--faint);
    width: 1%;
}

.ssr-when {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    color: var(--muted);
}

.ssr-pill {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid var(--card-brd);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    color: var(--muted);
}

.ssr-pill.on {
    color: var(--up);
    background: var(--up-soft);
    border-color: rgba(22, 209, 149, 0.3);
}

/* Wide tables (events, IPOs) on a narrow screen scroll rather than squashing
   the page — the row is a record and truncating a column loses it. */
.ssr-wide {
    display: block;
    overflow-x: auto;
}

/* --- headline list ------------------------------------------------------- */
.ssr-list {
    margin: 0;
    padding: 0 0 0 26px;
    font-size: 14.5px;
    line-height: 1.55;
}

.ssr-list li {
    margin-bottom: 13px;
    color: #c2c6d6;
}

.ssr-list li::marker {
    color: var(--faint);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
}

.ssr-list a {
    color: var(--txt);
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 92, 246, 0.35);
}

.ssr-list a:hover,
.ssr-list a:focus-visible {
    color: #fff;
    border-bottom-color: var(--violet);
}

.ssr-list small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--faint);
}

/* --- the option chain ------------------------------------------------------
   The one SSR block that is a two-sided table: calls on the left, puts on the
   right, strike down the middle. It is the widest thing this stylesheet has to
   place, so the numbers go monospace and the padding comes in — nine columns
   at the shared padding would force a horizontal scroll on a phone before the
   figures were even read. */
.ssr-chain {
    display: block;
    overflow-x: auto;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12.5px;
}

.ssr-chain th,
.ssr-chain td {
    padding: 7px 10px 7px 0;
}

/* The strike is the axis both sides are read against, so it is centred and
   given the weight the row's subject gets elsewhere. */
.ssr-chain th[scope="row"] {
    text-align: center;
    padding: 7px 10px;
    color: var(--txt);
    background: rgba(255, 255, 255, 0.02);
}

.ssr-chain thead th[colspan] {
    text-align: center;
    color: var(--muted);
}

/* At the money — the row the whole table is arranged around. */
.ssr-chain tr.ssr-atm th,
.ssr-chain tr.ssr-atm td {
    background: rgba(139, 92, 246, 0.08);
    color: var(--txt);
}

/* --- the per-symbol lede ---------------------------------------------------
   Unlike everything else here this is NOT replaced by the page's own script:
   it says which instrument the URL is about, and that has to still be true
   after the chain has loaded. */
.ssr-lede {
    margin: 0 0 18px;
    max-width: 76ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: #c2c6d6;
}

.ssr-lede b {
    color: var(--txt);
    font-weight: 650;
}

.ssr-note {
    margin: 12px 0 0;
    max-width: 76ch;
    font-size: 12px;
    line-height: 1.55;
    color: var(--faint);
}

/* --- links to the other chains ---------------------------------------------
   Not replaced by any script: this is navigation, and it is the only path from
   the site to the per-symbol pages that does not involve operating a dropdown.
   Laid out as a dense wrap of tickers rather than a list, because seventy
   symbols down the page is a wall and across it is an index. */
.ssr-chainnav {
    margin: 34px 0 8px;
    padding-top: 26px;
    border-top: 1px solid var(--card-brd);
}

.ssr-chainnav h2 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 650;
    color: var(--muted);
}

.ssr-chainnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ssr-chainnav a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--card-brd);
    border-radius: 7px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}

.ssr-chainnav a:hover,
.ssr-chainnav a:focus-visible {
    color: var(--txt);
    border-color: rgba(139, 92, 246, 0.45);
    background: rgba(139, 92, 246, 0.08);
}

/* --- the stamp ----------------------------------------------------------- */
.ssr-asof {
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--faint);
}

/* --- Top Picks ------------------------------------------------------------
   This one sits in its own section ahead of the interactive grid rather than
   inside it, because that page swaps between a loading state, an error state
   and the grid — there is no single container to borrow. recommendations.js
   removes it as soon as any of those is ready.

   While it is on screen the page's own spinner would be claiming the data
   hasn't arrived, directly above the data. :has() settles that without the
   server needing to reach into a second element. */
.ssr-pre {
    margin: 8px 0 26px;
}

body:has(.ssr-pre .ssr-tbl) #loading {
    display: none;
}

/* ============================================================
   The home page's server-rendered summary.

   Same day as the cards around it, written as prose. It exists for the two
   readers that never run home.js — a crawler, and anyone whose script request
   failed — so it must be in the document, in the flow, and reachable.

   It is therefore NOT display:none. A block only a crawler can see is cloaking,
   and the fact that it says exactly what the cards say is what makes hiding it
   from a scripted browser honest rather than clever: the reader is not being
   shown less, they are being shown it once instead of twice.

   `.js` is set inline at the top of <body>, so this collapses before first
   paint and never flashes.
   ============================================================ */
.ssr-home {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 30px;
    color: #8a8fa3;
    font-size: 0.875rem;
    line-height: 1.65;
}
.js .ssr-home {
    /* Collapsed, not removed: still in the accessibility tree, still selectable,
       still found by in-page search. */
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.ssr-home h1.ssr-h1 {
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    color: #e8eaf2;
    margin: 0 0 0.5rem;
}
.ssr-home h2 {
    font-size: 0.9375rem;
    color: #e8eaf2;
    margin: 1.4rem 0 0.4rem;
}
.ssr-home .ssr-lede {
    margin: 0 0 0.6rem;
}
.ssr-home ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
}
.ssr-home li b {
    color: #e8eaf2;
}
.ssr-home .up {
    color: #16d195;
}
.ssr-home .dn {
    color: #ff5d6c;
}
.ssr-placeholder {
    margin: 0;
}