/* CSR-02: Twitch Category Saturation Report.
 *
 * Additive only. Loaded after blog-page.css, which supplies the page shell,
 * header, typography and spacing. Colour comes from the --content-* tokens at
 * the top of content.css (the warm content theme) and NOT from tokens.css,
 * which is the logged-in dark theme -- mixing them is the most visible way to
 * make this page look bolted on. See CSR-02 section 1.
 */

.csr-standfirst {
    color: var(--content-text-secondary);
    font-size: 1.05rem;
    line-height: var(--line-height-relaxed, 1.7);
    margin-bottom: 0.75rem;
}

.csr-editions a {
    color: var(--content-primary);
}

.csr-median {
    color: var(--content-text-secondary);
    font-style: italic;
}

/* --- Callouts: methodology, citation, limits -------------------------- */

.csr-note {
    background-color: var(--content-card-bg);
    border: 1px solid var(--content-border);
    border-left: 4px solid var(--content-primary);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 1px 3px var(--content-shadow);
}

.csr-note h2,
.csr-note h3 {
    margin-top: 0;
}

.csr-note p:last-child {
    margin-bottom: 0;
}

/* --- Headline findings --------------------------------------------------- */

/* The finding, above the table and larger than it. A reader who stops here
   should still leave knowing what the edition says; the table and the CSV are
   for the ones who want to check us. */
.csr-headline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
    padding: 1.5rem;
    background-color: var(--content-bg-warm);
    border: 1px solid var(--content-border);
    border-radius: 8px;
}

.csr-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.csr-stat-value {
    font-family: var(--font-heading, Merriweather, serif);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--content-primary-dark);
    font-variant-numeric: tabular-nums;
}

.csr-stat-label {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--content-text-secondary);
}

/* Sits directly under the stat grid and carries the one sentence that explains
   why the median leads the table. */
.csr-lede {
    border-left: 4px solid var(--content-primary);
    padding-left: 1rem;
    margin: 0 0 1.5rem;
}

/* The column the table is meant to be read from first. */
.csr-median-cell {
    color: var(--content-text-primary);
    font-weight: 700;
}

/* --- Ranked table ------------------------------------------------------ */

/* The table scrolls inside its own container so the page body never scrolls
   sideways. Seven columns will not fit a phone and that is fine. */
.csr-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--content-border);
    border-radius: 6px;
    background-color: var(--content-card-bg);
}

.csr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;

    /* Tabular figures so digits line up column-wise. */
    font-variant-numeric: tabular-nums;
}

/* The table is the artifact, and the 800px prose column is tight for it, so
   the wrap reclaims `.blog-content`'s own 3rem padding on each side.

   Bounded by the card, never by the viewport. An earlier version centred on
   `100vw`, which broke the moment the page was embedded in something narrower
   than the window — Claude Design renders each card in a frame, and the table
   escaped the content margins there. Anything viewport-relative is wrong for
   a component that has to render inside an unknown container. */
@media (min-width: 1024px) {
    .csr-table-wrap {
        width: calc(100% + 6rem);
        margin-left: -3rem;
    }
}

/* The size-gradient table is four narrow columns and belongs in the prose
   column at its natural width — it opts out of the breakout above. */
.csr-table-wrap--inline {
    max-width: 100%;
}

@media (min-width: 1024px) {
    .csr-table-wrap--inline {
        width: 100%;
        margin-left: 0;
    }
}

.csr-table--compact tbody td,
.csr-table--compact thead th {
    padding: 0.5rem 1rem;
}

.csr-caption {
    text-align: left;
    padding: 0.75rem 1rem 0;
    color: var(--content-text-muted);
    font-size: 0.85rem;
}

.csr-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--content-card-bg);
    text-align: left;
    font-weight: 700;
    color: var(--content-text-primary);
    padding: 0.7rem 1rem;
    border-bottom: 2px solid var(--content-border);

    /* Wraps on purpose. `nowrap` here forced "Average per channel" to 196px
       and pushed the table ~120px past the space available, which is what put
       columns behind a sideways scroll. Two-line headers cost a little height
       and keep the labels descriptive enough to cite. */
    white-space: normal;
    vertical-align: bottom;
}

/* Figures never wrap — a number split across two lines is unreadable. */
.csr-table tbody td.csr-num {
    white-space: nowrap;
}

.csr-table tbody td {
    padding: 0.6rem 1rem;
    color: var(--content-text-secondary);
    border-bottom: 1px solid var(--content-border);
    vertical-align: middle;
}

.csr-table tbody tr:last-child td {
    border-bottom: none;
}

.csr-num {
    text-align: right;
}

.csr-cat {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--content-text-primary);
    font-weight: 600;
    min-width: 11rem;
}

.csr-cat img {
    border-radius: 3px;
    flex-shrink: 0;
}

.csr-floor {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--content-text-muted);
    border: 1px dashed var(--content-border);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
}

/* Sort buttons live inside th so the header stays semantic. */
.csr-table thead button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.csr-table thead button::after {
    content: "";
    margin-left: 0.35rem;
    opacity: 0.4;
}

.csr-table th[aria-sort="ascending"] button::after {
    content: "\2191";
    opacity: 1;
}

.csr-table th[aria-sort="descending"] button::after {
    content: "\2193";
    opacity: 1;
}

/* --- Unranked tail ------------------------------------------------------ */

.csr-table--unranked tbody td {
    color: var(--content-text-muted);
}

/* --- Movers --------------------------------------------------------------- */

.csr-mover-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.csr-mover-col h4 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--content-text-primary);
}

.csr-mover-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.csr-mover-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text-secondary);
    font-size: 0.92rem;
}

/* Direction is already in the sign and the column heading, so this stays
   neutral rather than green/red — the same reason the contention tier never
   became a traffic light. */
.csr-mover-delta {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--content-text-primary);
    white-space: nowrap;
}

/* --- Download and citation --------------------------------------------- */

.csr-download {
    display: inline-block;
    background-color: var(--content-primary);
    color: #ffffff;
    padding: 0.6rem 1.1rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}

.csr-download:hover,
.csr-download:focus {
    background-color: var(--content-primary-dark);
    color: #ffffff;
}

.csr-download-sub {
    margin-left: 0.75rem;
    color: var(--content-text-muted);
    font-size: 0.85rem;
}

.csr-cite-field {
    margin: 1rem 0;
}

.csr-cite-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--content-text-muted);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Kept as a real, selectable textarea so the citation is usable when the copy
   script fails. Manual selection is the fallback; never hide the text. */
.csr-cite-field textarea {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--content-border);
    border-radius: 4px;
    background-color: var(--content-bg-warm);
    color: var(--content-text-primary);
    resize: vertical;
    overflow-wrap: anywhere;
}

.csr-copy {
    margin-top: 0.4rem;
    background-color: transparent;
    border: 1px solid var(--content-primary);
    color: var(--content-primary);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.csr-copy:hover,
.csr-copy:focus {
    background-color: var(--content-primary);
    color: #ffffff;
}

.csr-live {
    min-height: 1.2em;
    font-size: 0.85rem;
    color: var(--content-text-muted);
}

/* --- Archive ------------------------------------------------------------ */

.csr-edition-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.csr-edition-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--content-border);
}

.csr-edition-name {
    font-weight: 700;
    color: var(--content-text-primary);
    min-width: 10rem;
}

.csr-edition-meta {
    color: var(--content-text-muted);
    font-size: 0.88rem;
    flex: 1 1 auto;
}

.csr-edition-links {
    display: flex;
    gap: 0.9rem;
}

.csr-method-pointer,
.csr-empty {
    color: var(--content-text-muted);
}

/* --- Focus ------------------------------------------------------------- */

.csr-copy:focus-visible,
.csr-download:focus-visible,
.csr-table thead button:focus-visible {
    outline: 2px solid var(--content-primary);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .csr-table {
        font-size: 0.85rem;
    }

    .csr-table thead th,
    .csr-table tbody td {
        padding: 0.5rem 0.6rem;
    }

    .csr-cat {
        min-width: 10rem;
    }

    .csr-edition-row {
        flex-direction: column;
        gap: 0.25rem;
    }
}