/* =========================================================================
   CHAPTER EXPLORER — the source-summary strip above the chapter grid.

   Loaded after design-system.css so --brand / --surface / --line resolve in
   both themes, and after premium-ui.css so the two rules that re-home
   #chapter-view's layout out-specify the grid it declares there.
   ========================================================================= */

/* premium-ui.css turns #chapter-view's direct child into the card grid. The
   page now has a header above that grid, so the wrapper goes back to block
   flow and .cx-grid carries the columns instead. */
body[data-view="chapter"] #chapter-view > .cx-page {
    display: block;
    padding: 0;
}

body[data-view="chapter"] #chapter-view > .cx-page > .cx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

/* ── Summary strip ──────────────────────────────────────────────────────── */

.cx-stats {
    background: var(--surface-raised, #1c222c);
    border: 1px solid var(--line, #262e3a);
    border-radius: var(--radius, 20px);
    padding: 6px 18px 8px;
    margin-bottom: 18px;
}

.cx-stats.is-open {
    padding-bottom: 14px;
}

/* The whole header is the toggle — a 12px chevron is a poor target on a
   phone, and the row carries nothing else that wants a click. */
.cx-stats-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 14px;
    width: 100%;
    padding: 12px 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cx-caret {
    margin-left: auto;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-soft, rgba(123, 166, 255, 0.14));
    color: var(--brand, #7ba6ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: transform .22s ease;
}

.cx-stats.is-open .cx-caret {
    transform: rotate(180deg);
}

.cx-stats-body[hidden] {
    display: none;
}

/* Takes the whole row so the count line starts underneath it rather than
   beside it — the header is a wrapping flex row. */
.cx-chapter-name {
    flex-basis: 100%;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main, #eef2f8);
    margin-bottom: -2px;
}

.cx-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.cx-total-num {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-main, #eef2f8);
    font-variant-numeric: tabular-nums;
}

.cx-total-label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #939eaf);
}

.cx-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 0.8rem;
    color: var(--text-muted, #939eaf);
}

/* Sits in the header rather than the body so an active filter stays visible
   while the breakdown is collapsed. */
.cx-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    background: var(--brand-soft, rgba(123, 166, 255, 0.14));
    border: 1px solid color-mix(in srgb, var(--brand, #7ba6ff) 45%, var(--line, #262e3a));
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand, #7ba6ff);
    white-space: nowrap;
}

.cx-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand, #7ba6ff) 22%, transparent);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.cx-filter-clear:hover {
    background: var(--brand, #7ba6ff);
    color: var(--surface-solid, #151a22);
}

.cx-meta b {
    color: var(--text-main, #eef2f8);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Share of the chapter each board holds, at a glance. */
.cx-bar {
    display: flex;
    height: 6px;
    margin: 14px 0 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--line, #262e3a);
}

.cx-bar-seg {
    display: block;
    height: 100%;
    min-width: 2px;
    transition: opacity .18s ease;
}

/* Under a filter the bar keeps its full shape and fades everything the
   student is not studying, so the slice they picked reads as a slice of the
   whole rather than as a new whole. */
.cx-bar-seg.is-dim {
    opacity: 0.22;
}

/* ── Board tiles (also the filter) ──────────────────────────────────────── */

.cx-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 8px;
}

.cx-group {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--line, #262e3a);
    border-radius: var(--radius-sm, 14px);
    background: var(--surface-solid, #151a22);
    color: var(--text-main, #eef2f8);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.cx-group:hover {
    border-color: color-mix(in srgb, var(--cx-accent, #7ba6ff) 45%, var(--line, #262e3a));
}

/* Selected — this board is the filter. */
.cx-group.is-active {
    border-color: var(--cx-accent, #7ba6ff);
    background: color-mix(in srgb, var(--cx-accent, #7ba6ff) 12%, var(--surface-solid, #151a22));
    box-shadow: inset 0 0 0 1px var(--cx-accent, #7ba6ff);
}

/* Merely the board whose papers are on show below — a quieter state than
   selected, so the two never read as the same thing. */
.cx-group.is-focus:not(.is-active) {
    border-color: color-mix(in srgb, var(--cx-accent, #7ba6ff) 38%, var(--line, #262e3a));
}

.cx-group-icon {
    font-size: 1.05rem;
    line-height: 1;
    flex: none;
}

.cx-group-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cx-group-name {
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-group-sub {
    font-size: 0.68rem;
    color: var(--text-muted, #939eaf);
    white-space: nowrap;
}

.cx-group-count {
    font-size: 1.1rem;
    font-weight: 800;
    flex: none;
    color: var(--cx-accent, #7ba6ff);
    font-variant-numeric: tabular-nums;
}

/* ── Paper-wise chips ───────────────────────────────────────────────────── */

.cx-papers {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line, #262e3a);
}

.cx-papers[hidden] {
    display: none;
}

.cx-papers-head {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #939eaf);
    margin-bottom: 9px;
}

.cx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* The chip's fill width is its share of the biggest paper in the board, so
   the row reads as a bar chart without needing a second axis. */
.cx-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--line, #262e3a);
    background:
        linear-gradient(to right,
            color-mix(in srgb, var(--cx-accent, #7ba6ff) 20%, transparent) var(--cx-fill, 0%),
            transparent var(--cx-fill, 0%));
    background-color: var(--surface-solid, #151a22);
    font-size: 0.8rem;
    color: var(--text-main, #eef2f8);
    white-space: nowrap;
    font-family: inherit;
    transition: border-color .16s ease, box-shadow .16s ease;
}

button.cx-chip {
    cursor: pointer;
}

button.cx-chip:hover {
    border-color: color-mix(in srgb, var(--cx-accent, #7ba6ff) 55%, var(--line, #262e3a));
}

button.cx-chip.is-active {
    border-color: var(--cx-accent, #7ba6ff);
    box-shadow: inset 0 0 0 1px var(--cx-accent, #7ba6ff);
}

.cx-chip-name {
    font-weight: 600;
}

.cx-chip-count {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--cx-accent, #7ba6ff);
}

/* The rolled-up tail is a total, not a paper — it reads quieter so it does
   not compete with the named sources beside it. */
.cx-chip-rest {
    background-image: none;
    color: var(--text-muted, #939eaf);
}

/* Two classes deep on purpose: it has to out-specify the light-theme rule
   that tints .cx-chip-count with the board colour. */
.cx-chip.cx-chip-rest .cx-chip-count {
    color: var(--text-muted, #939eaf);
}

/* ── Light theme ────────────────────────────────────────────────────────── */

/* The board colours are fixed hues so the boards stay distinguishable from
   each other, which means they cannot follow --brand into the light palette.
   On white they land around 2.3:1, so the two places they carry small text
   are mixed toward ink first. Fills and borders keep the pure hue. */
html.theme-light .cx-group-count,
html.theme-light .cx-chip-count {
    color: color-mix(in srgb, var(--cx-accent, #2f6df6) 62%, #0b1220);
}

html.theme-light .cx-group.is-active {
    border-color: color-mix(in srgb, var(--cx-accent, #2f6df6) 70%, #0b1220);
}

/* ── The "All Questions" card ───────────────────────────────────────────── */

/* Spans the grid and carries the brand tint: it is the whole of what the
   cards beneath it divide up, not a seventh type. */
body[data-view="chapter"] #chapter-view .cx-all-card {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--brand, #7ba6ff) 40%, var(--line, #262e3a));
}

body[data-view="chapter"] .cx-all-card .chapter-header {
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--brand, #7ba6ff) 13%, var(--surface-raised, #1c222c)),
            var(--surface-raised, #1c222c) 62%) !important;
}

/* The two-column drawer the type cards use would stretch four buttons across
   a full-width card; let them size themselves instead. */
body[data-view="chapter"] .cx-all-card .chapter-options.show {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.cx-all-title {
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Long selector on purpose: the title rule further down un-mutes every span
   inside .cx-chapter-title, and this one line is meant to stay muted. */
body[data-view="chapter"] .chapter-header h3 .cx-chapter-title span.cx-all-sub {
    margin-left: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #939eaf) !important;
}

/* ── Formula-bearing chapter titles ─────────────────────────────────────── */

/* premium-ui.css mutes every <span> inside a chapter header — that rule is
   meant for the "35 Questions" line underneath. The title is now a span too
   (it has to be, so the KaTeX run is one flex item), and KaTeX then builds
   the formula out of nothing but nested spans, so every one of them has to
   opt back out or the maths renders a shade greyer than the words around it. */
body[data-view="chapter"] .chapter-header h3 .cx-chapter-title,
body[data-view="chapter"] .chapter-header h3 .cx-chapter-title span {
    color: var(--text-main) !important;
}

.cx-chapter-title {
    display: block;
    line-height: 1.5;
}

/* A stacked fraction shrinks its numerator and denominator twice over, so at
   KaTeX's own scale the formula reads a size smaller than the words beside
   it. Nudged up until the two match optically in a 0.95rem card title. */
.cx-chapter-title .katex {
    font-size: 1.16em;
}

/* A long formula must scroll inside the card rather than widen it. */
.cx-chapter-title .katex-display {
    margin: 4px 0;
}

/* ── Phones ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .cx-stats {
        padding: 14px 14px 12px;
        border-radius: var(--radius-sm, 14px);
    }

    .cx-total-num {
        font-size: 2.1rem;
    }

    .cx-groups {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .cx-group {
        padding: 9px 10px;
        gap: 7px;
    }

    .cx-group-sub {
        display: none;
    }

    /* Two tiles to a row leaves ~60px for the name. Wrapping is better than
       an ellipsis here: the grid stretches every tile in a row to the tallest
       anyway, so a second line costs nothing but truncating "UP Police" to
       "UP Pol…" costs the student the label. */
    .cx-group-name {
        white-space: normal;
        line-height: 1.15;
        font-size: 0.84rem;
    }

    .cx-stats-head {
        gap: 8px 12px;
    }

    .cx-caret {
        width: 28px;
        height: 28px;
    }
}