/* ═══════════════════════════════════════════════════════════════
 R ATIN*GS LEDGER — scoped to .ledger-page
 ═══════════════════════════════════════════════════════════════ */

main {
    max-width: 1440px !important;
    width: 96% !important;
}

.ledger-page {
    --col-layout: 32px 38px minmax(120px, 1fr) 110px 170px 130px 150px 30px;
    /* #   grade  title         score   pct    seen   date   expand */
}

/* ═══════════════════════════════════════════════════════════════
 *   VARIABLES — RATINGS LEDGER
 *   Exhaustive inventory of every color + font instance found in
 *   ratings-ledger.css and ratings-ledger.njk. One variable per
 *   usage site — nothing is pre-consolidated. Resolved hex/rgba
 *   values are used directly; where a value traces back to an
 *   existing --lp-* token, that token is named in the comment so
 *   you can trace it back to the source rule.
 *
 *   Naming: --rl-[area]-[element]-[property]
 *   ("rl" = ratings ledger, distinct from the page-local "lp-"
 *   prefix already used inside .ledger-page)
 *   ═══════════════════════════════════════════════════════════════ */

:root {

    /* ── Colors ──────────────────────────────────────────────────────
     *   A. PAGE HEADING
     *   ─────────────────────────────────────────────────────────────── */
    --rl-heading-rule-line:        #3d2a18; /* horizontal rule flanking "Ratings Ledger" title (was --lp-ink-mid) */
    --rl-heading-pip-bg:           #151515; /* small diamond "pip" divider next to the heading rules (was --lp-ink) */
    --rl-heading-title-color:      #151515; /* "Ratings Ledger" <h1> text color (was --lp-ink) */
    --rl-heading-subtitle-color:   #6b4f32; /* italic subtitle under the title, e.g. "A complete record..." (was --lp-ink-faint) */

    /* ── B. STATS STRIP ────────────────────────────────────────────── */
    --rl-statstrip-border:         rgba(59,40,22,0.3); /* outer border of the stats strip row (was --lp-ink-rule) */
    --rl-statstrip-border-bottom:  #151515; /* heavier bottom border under the stats strip (was --lp-ink) */
    --rl-statcell-divider:         rgba(59,40,22,0.3); /* vertical divider between individual stat cells (was --lp-ink-rule) */
    --rl-statcell-hover-bg:        rgba(28,15,5,0.065); /* background when hovering a clickable grade-filter stat cell (was --lp-paper-hover) */
    --rl-statcell-active-bg:       #151515; /* background of a stat cell whose grade filter is currently active (was --lp-ink) */
    --rl-statcell-active-text:     #f4b97d; /* text color of main/label inside an active-filter stat cell (was --lp-paper) */
    --rl-statcell-main-color:      #151515; /* big number in each stat cell, e.g. total films count (was --lp-ink) */
    --rl-statcell-label-color:     #151515; /* old was #6b4f32 - small caption under each stat number, e.g. "Total Films" (was --lp-ink-faint) */

    /* ── C. CONTROLS BAR (sort/group/genre/country/decade/seen/reviews/search) ── */
    --rl-controls-border-bottom:   rgba(59,40,22,0.17); /* bottom border under the whole controls bar (was --lp-ink-ghost) */
    --rl-ctrl-label-color:         #6b4f32; /* small uppercase label above each dropdown, e.g. "Sort" (was --lp-ink-faint) */
    --rl-ctrl-select-border:       #3d2a18; /* border around each <select> control (was --lp-ink-mid) */
    --rl-ctrl-select-text:         #151515; /* text color inside each <select> control (was --lp-ink) */
    --rl-ctrl-select-arrow-fill:   #3d2a18; /* fill color of the custom dropdown-arrow SVG, baked into a data-URI — must be edited by hand if this changes (matches --lp-ink-mid) */
    --rl-ctrl-separator-bg:        rgba(59,40,22,0.17); /* thin vertical divider line between control groups (was --lp-ink-ghost) */
    --rl-search-input-text:        #151515; /* typed text inside the title/director search box (was --lp-ink) */
    --rl-search-input-border:      #3d2a18; /* border around the search box (was --lp-ink-mid) */
    --rl-search-input-focus-border:#151515; /* search box border color when focused (was --lp-ink) */
    --rl-search-placeholder-color: #6b4f32; /* "Search title or director…" placeholder text (was --lp-ink-faint) */
    --rl-search-icon-stroke:       #6b4f32; /* magnifying-glass icon stroke color inside the search box (was --lp-ink-faint) */
    --rl-ctrl-count-color:         #6b4f32; /* "N results" counter text at the end of the controls bar (was --lp-ink-faint) */

    /* ── D. SORT BAR (column headers above the rating rows) ─────────── */
    --rl-sortbar-border-bottom:    #151515; /* bottom rule under the sort-bar header row (was --lp-ink) */
    --rl-sortbar-label-color:      #6b4f32; /* default column header text, e.g. "Score", "Genre" (was --lp-ink-faint) */
    --rl-sortbar-label-hover-color:#151515; /* column header text color on hover (was --lp-ink) */
    --rl-sortbar-label-active-color:#7a1515; /* column header text color for the currently active sort column (was --lp-red) */

    /* ── E. RATING ROWS (general row chrome) ─────────────────────────── */
    --rl-row-stripe-bg:            rgba(0,0,0,0.022); /* faint zebra-stripe background on alternating row pairs (was --lp-paper-stripe) */
    --rl-row-border-bottom:        rgba(59,40,22,0.17); /* hairline divider under each rating row (was --lp-ink-ghost) */
    --rl-row-hover-bg:             rgba(28,15,5,0.065); /* row background on mouse hover (was --lp-paper-hover) */
    --rl-row-expanded-bg:          rgba(28,15,5,0.065); /* row background while its detail panel is expanded (was --lp-paper-hover) */
    --rl-rownum-color:             rgba(59,40,22,0.66); /* faint row-index number in the leftmost column (was --lp-ink-ghost) */

    /* ── F. GRADE TAGS (colored A+ … F pill inside each row) ─────────── */
    --rl-gradetag-text-color:      #f4b97d; /* text color printed on top of every grade-tag pill (was --lp-g-text) */
    --rl-gradetag-bg-aplus:        var(--col-gr-a); /* pill background for an A+ grade */
    --rl-gradetag-bg-a:            var(--col-gr-a); /* pill background for an A grade */
    --rl-gradetag-bg-aminus:       var(--col-gr-a); /* pill background for an A- grade */
    --rl-gradetag-bg-bplus:        var(--col-gr-b); /* pill background for a B+ grade */
    --rl-gradetag-bg-b:            var(--col-gr-b); /* pill background for a B grade */
    --rl-gradetag-bg-bminus:       var(--col-gr-b); /* pill background for a B- grade */
    --rl-gradetag-bg-cplus:        var(--col-gr-c); /* pill background for a C+ grade */
    --rl-gradetag-bg-c:            var(--col-gr-c); /* pill background for a C grade */
    --rl-gradetag-bg-cminus:       var(--col-gr-c); /* pill background for a C- grade */
    --rl-gradetag-bg-dplus:        var(--col-gr-d); /* pill background for a D+ grade */
    --rl-gradetag-bg-d:            var(--col-gr-d); /* pill background for a D grade */
    --rl-gradetag-bg-dminus:       var(--col-gr-d); /* pill background for a D- grade */
    --rl-gradetag-bg-f:            var(--col-gr-f); /* pill background for an F grade */

    /* ── G. ROW CELL TEXT (title, score, pct, runtime, seen, date, genre, expand) ── */
    --rl-title-text-color:         #151515; /* film title text in each row (was --lp-ink) */
    --rl-title-year-color:         #6b4f32; /* release-year tag next to the title, e.g. "(1974)" (was --lp-ink-faint) */
    --rl-title-reviewed-mark-color:#7a1515; /* dagger/link mark shown when a film has a published review (was --lp-red) */
    --rl-score-color:              #151515; /* numeric score value column (was --lp-red) */
    --rl-pct-text-color:           #3d2a18; /* percentile number next to the percentile bar (was --lp-ink-mid) */
    --rl-pctbar-track-bg:          rgba(59,40,22,0.17); /* unfilled track background of the percentile mini-bar (was --lp-ink-ghost) */
    --rl-pctbar-fill-bg:           #3d2a18; /* filled portion of the percentile mini-bar (was --lp-ink-mid) */
    --rl-runtime-color:            #6b4f32; /* runtime column text, e.g. "142m" (was --lp-ink-faint) */
    --rl-seen-text-color:          #6b4f32; /* "times seen" column text (was --lp-ink-faint) */
    --rl-seen-dot-bg:              #6b4f32; /* small dot icons representing rewatch count (was --lp-ink-faint) */
    --rl-date-color:               #6b4f32; /* "reviewed on" date column text (was --lp-ink-faint) */
    --rl-genre-color:              #6b4f32; /* genre column text (was --lp-ink-faint) */
    --rl-chevron-color:            rgba(59,40,22,0.17); /* row-expand chevron, default resting state (was --lp-ink-ghost) */
    --rl-chevron-active-color:     #6b4f32; /* row-expand chevron on hover or while row is expanded (was --lp-ink-faint) */

    /* ── H. EXPANDED DETAIL PANEL ─────────────────────────────────────── */
    --rl-detailrow-bg:             rgba(28,15,5,0.038); /* background wash of the expanded detail panel under a row */
    --rl-detailrow-border-bottom:  rgba(59,40,22,0.17); /* border under an open detail panel (was --lp-ink-ghost) */
    --rl-detail-label-color:       #6b4f32; /* small uppercase field labels inside the detail panel, e.g. "Cast" (was --lp-ink-faint) */
    --rl-detail-value-color:       #3d2a18; /* field values inside the detail panel, e.g. cast names (was --lp-ink-mid) */
    --rl-detail-link-color:        #7a1515; /* "View More Info →" link inside the detail panel (was --lp-red) */
    --rl-detail-link-hover-color:  #151515; /* detail-panel link text color on hover (was --lp-ink) */
    --rl-detail-link-disabled-color:#6b4f32; /* detail-panel link when disabled/unavailable (was --lp-ink-faint) */
    --rl-detail-inline-label-color:rgba(59,40,22,0.17); /* small inline labels next to watch/review dates in the detail panel (was --lp-ink-ghost) */

    /* ── I. YEAR GROUP HEADER + grade distribution bar ────────────────── */
    --rl-yeargroup-border-bottom:  #151515; /* rule under each sticky year/decade/grade group heading (was --lp-ink) */
    --rl-yeargroup-sticky-bg:      #f4b97d; /* solid background behind the sticky group heading so rows don't show through when scrolling (inherits root --paper token; fallback shown) */
    --rl-yeargroup-label-color:    #151515; /* the group heading text itself, e.g. "1974" (was --lp-ink) */
    --rl-yeargroup-rule-color:     rgba(59,40,22,0.3); /* thin horizontal rule trailing the group heading text (was --lp-ink-rule) */
    --rl-yeargroup-stat-color:     #6b4f32; /* small stat labels in the group header, e.g. "avg" (was --lp-ink-faint) */
    --rl-yeargroup-stat-strong-color:#3d2a18; /* bolded stat value inside the group header, e.g. the average score number (was --lp-ink-mid) */
    --rl-gradebar-border:          rgba(59,40,22,0.17); /* border around the mini grade-distribution bar in each group header (was --lp-ink-ghost) */
    --rl-gradebar-seg-a:           #143520; /* "A" segment fill in the group-header grade-distribution bar (was --lp-g-a) */
    --rl-gradebar-seg-b:           #142847; /* "B" segment fill in the group-header grade-distribution bar (was --lp-g-b) */
    --rl-gradebar-seg-c:           #383310; /* "C" segment fill in the group-header grade-distribution bar (was --lp-g-c) */
    --rl-gradebar-seg-d:           #451515; /* "D" segment fill in the group-header grade-distribution bar (was --lp-g-d) */
    --rl-gradebar-seg-f:           #5c0808; /* "F" segment fill in the group-header grade-distribution bar (was --lp-g-f) */

    /* ── J. FOOTNOTE BAR ───────────────────────────────────────────────── */
    --rl-footnote-border-top:      rgba(59,40,22,0.17); /* top rule above the footnote legend row (was --lp-ink-ghost) */
    --rl-footnote-text-color:      #6b4f32; /* footnote legend text, e.g. "title carries a full published review" (was --lp-ink-faint) */
    --rl-footnote-symbol-color:    #7a1515; /* dagger (†) symbol at the start of a footnote item (was --lp-red) */

    /* ── K. PAGINATION ─────────────────────────────────────────────────── */
    --rl-pagination-border-top:    #151515; /* heavier top rule above the pagination bar (was --lp-ink) */
    --rl-pagination-border-bottom: #3d2a18; /* lighter bottom rule below the pagination bar (was --lp-ink-mid) */
    --rl-pagination-info-color:    #6b4f32; /* "Page X of Y — N entries total" text (was --lp-ink-faint) */
    --rl-pagenav-border:           #3d2a18; /* border around each page-number button (was --lp-ink-mid) */
    --rl-pagenav-text-color:       #3d2a18; /* default page-number button text (was --lp-ink-mid) */
    --rl-pagenav-hover-bg:         #151515; /* page-number button background on hover (was --lp-ink) */
    --rl-pagenav-hover-text:       #f4b97d; /* page-number button text on hover (was --lp-paper) */
    --rl-pagenav-hover-border:     #151515; /* page-number button border on hover (was --lp-ink) */
    --rl-pagenav-current-bg:       #151515; /* background of the currently active page number (was --lp-ink) */
    --rl-pagenav-current-text:     #f4b97d; /* text color of the currently active page number (was --lp-paper) */

    /* ── L. FILTER TOKENS + ACTIVE-FILTER INDICATOR BAR ───────────────── */
    --rl-filtertoken-hover-color:  #7a1515; /* clickable name/genre/country token in detail panel, on hover (was --lp-red) */
    --rl-detailfilterbar-bg:       rgba(28,15,5,0.055); /* background of the "Showing — Field · Value" bar shown after clicking a filter token */
    --rl-detailfilterbar-border:   rgba(59,40,22,0.17); /* top/bottom border of the active-filter indicator bar (was --lp-ink-ghost) */
    --rl-dfl-prefix-color:         rgba(59,40,22,0.45); /* "Showing —" prefix text in the active-filter bar (was --lp-ink-ghost) */
    --rl-dfl-field-color:          #6b4f32; /* field name in the active-filter bar, e.g. "director" (was --lp-ink-faint) */
    --rl-dfl-sep-color:            rgba(59,40,22,0.17); /* middot separator between field and value in the active-filter bar (was --lp-ink-ghost) */
    --rl-dfl-value-color:          #151515; /* the actual filter value text, e.g. a director's name (was --lp-ink) */
    --rl-dfl-clear-color:          #7a1515; /* "✕ Clear Filter" text (was --lp-red) */
    --rl-dfl-clear-underline:      #7a1515; /* underline beneath "Clear Filter" (was --lp-red) */
    --rl-dfl-clear-hover-color:    #151515; /* "Clear Filter" text color on hover (was --lp-ink) */
    --rl-dfl-clear-hover-underline:#151515; /* "Clear Filter" underline color on hover (was --lp-ink) */

    /* ── M. INLINE / JS-GENERATED MARKUP (from ratings-ledger.njk) ────── */
    --rl-seen3-indicator-color:    #3d2a18; /* "●●●" glyph in the footnote marking "seen 3+ times" (inline style, was --lp-ink-mid) */
    --rl-emptystate-text-color:    #6b4f32; /* "Could not load archive data" / "No entries match" messages (inline style, was --lp-ink-faint) */
    --rl-pagination-ellipsis-color:#6b4f32; /* "…" truncation glyph in the pagination number list (inline style, was --lp-ink-faint) */


    /* ── Fonts ───────────────────────────────────────────────────────
     *   Three underlying typefaces are in play — labeled here by where
     *   they're used, not by the typeface itself, so each context can
     *   be retargeted independently.
     *   ─────────────────────────────────────────────────────────────── */

    /* ── A. PAGE HEADING ───────────────────────────────────────────── */
    --rl-heading-title-font:       'goldentype-black', serif; /* "Ratings Ledger" <h1> (was --lp-f-head) */
    --rl-heading-subtitle-font:    'im-fell-english', Georgia, serif; /* italic subtitle under the title (was --lp-f-body) */

    /* ── B. STATS STRIP ────────────────────────────────────────────── */
    --rl-statcell-main-font:       'century731', serif; /* big number in each stat cell (was --lp-f-head) */
    --rl-statcell-label-font:      'centurysc', serif; /* small caption under each stat number (was --lp-f-head) */

    /* ── C. CONTROLS BAR ───────────────────────────────────────────── */
    --rl-ctrl-label-font:          'goldentype-sc-original', serif; /* uppercase label above each dropdown (was --lp-f-head) */
    --rl-ctrl-select-font:         'globe', serif; /* text inside each <select> control (was --lp-f-head) */
    --rl-search-input-font:        'im-fell-english', Georgia, serif; /* typed text inside the search box, italic (was --lp-f-body) */
    --rl-ctrl-count-font:          'im-fell-english', Georgia, serif; /* "N results" counter, italic (was --lp-f-body) */

    /* ── D. SORT BAR ───────────────────────────────────────────────── */
    --rl-sortbar-label-font:       'goldentype-sc-original', serif; /* column header text, e.g. "Score", "Genre" (was --lp-f-head) */

    /* ── E–G. ROW CELLS ────────────────────────────────────────────── */
    --rl-rownum-font:              'century731', serif; /* faint row-index number (was --lp-f-head) */
    --rl-gradetag-font:            'block', serif; /* text on the colored grade-tag pill (was --lp-f-head) */
    --rl-title-font:               'goldentype-original', Georgia, serif; /* film title text (was --lp-f-pica) */
    --rl-title-year-font:          'century731', serif; /* release-year tag next to the title (was --lp-f-head) */
    --rl-title-reviewed-font:      'im-fell-english', Georgia, serif; /* dagger/link mark for reviewed films (was --lp-f-body) */
    --rl-score-font:               'block', Georgia, serif; /* numeric score value column (was --lp-f-pica) */
    --rl-pct-font:                 'century731', serif; /* percentile number (was --lp-f-head) */
    --rl-runtime-font:             'century731', serif; /* runtime column text (was --lp-f-head) */
    --rl-seen-font:                'century731', serif; /* "times seen" column text (was --lp-f-head) */
    --rl-date-font:                'century731', serif; /* "reviewed on" date column text (was --lp-f-head) */
    --rl-genre-font:               'century731', serif; /* genre column text (was --lp-f-head) */

    /* ── H. EXPANDED DETAIL PANEL ──────────────────────────────────── */
    --rl-detail-label-font:        'goldentype-sc-original', serif; /* small uppercase field labels, e.g. "Cast" (was --lp-f-head) */
    --rl-detail-value-font:        'century731', Georgia, serif; /* field values, e.g. cast names (was --lp-f-body) */
    --rl-detail-link-font:         'goldentype-sc-original', serif; /* "View More Info →" link (was --lp-f-head) */
    --rl-detail-inline-label-font: 'goldentype-sc-original', serif; /* inline labels next to watch/review dates (was --lp-f-head) */

    /* ── I. YEAR GROUP HEADER ──────────────────────────────────────── */
    --rl-yeargroup-label-font:     'saturday', Georgia, serif; /* group heading text, e.g. "1974" (was --lp-f-pica) */
    --rl-yeargroup-stat-font:      'goldentype-sc-original', serif; /* small stat labels in the group header (was --lp-f-head) */

    /* ── J. FOOTNOTE BAR ───────────────────────────────────────────── */
    --rl-footnote-font:            'im-fell-english', Georgia, serif; /* footnote legend text, italic (was --lp-f-body) */

    /* ── K. PAGINATION ─────────────────────────────────────────────── */
    --rl-pagination-info-font:     'im-fell-english', Georgia, serif; /* "Page X of Y" text, italic (was --lp-f-body) */
    --rl-pagenav-font:             'goldentype-sc-original', serif; /* page-number button text (was --lp-f-head) */

    /* ── L. FILTER TOKENS + ACTIVE-FILTER INDICATOR BAR ───────────── */
    --rl-dfl-prefix-font:          'goldentype-sc-original', serif; /* "Showing —" prefix text (was --lp-f-head) */
    --rl-dfl-field-font:           'goldentype-sc-original', serif; /* field name, e.g. "director" (was --lp-f-head) */
    --rl-dfl-value-font:           'im-fell-english', Georgia, serif; /* the filter value text, italic (was --lp-f-body) */
    --rl-dfl-clear-font:           'goldentype-sc-original', serif; /* "✕ Clear Filter" text (was --lp-f-head) */

    /* ── M. INLINE / JS-GENERATED MARKUP (from ratings-ledger.njk) ─── */
    --rl-seen3-indicator-font:     'century731', serif; /* "●●●" glyph in the footnote (inline style, was --lp-f-head) */
    --rl-emptystate-font:          'im-fell-english', Georgia, serif; /* "Could not load archive data" / "No entries match" messages, italic (inline style, was --lp-f-body) */
    --rl-pagination-ellipsis-font: 'century731', serif; /* "…" truncation glyph in the pagination number list (inline style, was --lp-f-head) */

}


/* ── Page heading ─────────────────────────────────────────── */
.ledger-page .page-heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.ledger-page .heading-rule {
    display: flex; align-items: center; gap: 0.5rem;
}
.ledger-page .heading-rule.right { flex-direction: row-reverse; }
.ledger-page .heading-rule hr { flex: 1; border: none; border-top: 1px solid var(--rl-heading-rule-line); }
.ledger-page .pip { width: 5px; height: 5px; background: var(--rl-heading-pip-bg); transform: rotate(45deg); flex-shrink: 0; }
.ledger-page .heading-center { text-align: center; }
.ledger-page .heading-center h1 {
    font-family: var(--rl-heading-title-font);
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    letter-spacing: 0.07em; color: var(--rl-heading-title-color);
}
.ledger-page .heading-center .sub {
    font-family: var(--rl-heading-subtitle-font); font-style: italic;
    font-size: 0.72rem; color: var(--rl-heading-subtitle-color); margin-top: 0.2rem;
}

/* ── Stats strip ──────────────────────────────────────────── */
.ledger-page .stats-strip {
    display: flex; align-items: stretch;
    border: 1px solid var(--rl-statstrip-border);
    border-bottom: 2px solid var(--rl-statstrip-border-bottom);
    overflow: hidden;
}
.ledger-page .stat-cell {
    flex: 1; text-align: center;
    padding: 0.5rem 0.4rem;
    border-right: 1px solid var(--rl-statcell-divider);
    min-width: 0;
}
.ledger-page .stat-cell:last-child { border-right: none; }
.ledger-page .stat-cell.grade-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.12s; padding: 0.4rem 0.3rem;
}
.ledger-page .stat-cell.grade-cell:hover { background: var(--rl-statcell-hover-bg); }
.ledger-page .stat-cell.grade-cell.active-filter { background: var(--rl-statcell-active-bg); }
.ledger-page .stat-cell.grade-cell.active-filter .stat-main,
.ledger-page .stat-cell.grade-cell.active-filter .stat-label { color: var(--rl-statcell-active-text); }
.ledger-page .stat-main {
    font-family: var(--rl-statcell-main-font); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.05em; color: var(--rl-statcell-main-color);
    display: block; line-height: 1;
}
.ledger-page .stat-label {
    font-family: var(--rl-statcell-label-font); font-size: 0.5rem; letter-spacing: 0.16em;
    font-weight: 400; font-style: normal; color: var(--rl-statcell-label-color);
    display: block; margin-top: 0.18rem; opacity: 0.75;
}

/* ── Controls ─────────────────────────────────────────────── */
.ledger-page .controls {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rl-controls-border-bottom);
}
.ledger-page .ctrl-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ledger-page .ctrl-label {
    font-family: var(--rl-ctrl-label-font); font-size: 0.62rem; letter-spacing: 0.15em;
    text-transform: lowercase; color: var(--rl-ctrl-label-color); white-space: nowrap;
}
.ledger-page .ctrl-select {
    font-family: var(--rl-ctrl-select-font); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.2rem 1.6rem 0.2rem 0.5rem;
    border: 1px solid var(--rl-ctrl-select-border); background: transparent;
    color: var(--rl-ctrl-select-text); cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0l3.5 4 3.5-4z' fill='%233b2816'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.38rem center;
}
.ledger-page .ctrl-sep { width: 1px; height: 16px; background: var(--rl-ctrl-separator-bg); flex-shrink: 0; }
.ledger-page .ctrl-search {
    position: relative; display: flex; align-items: center; margin-left: auto;
}
.ledger-page .ctrl-search input {
    font-family: var(--rl-search-input-font); font-style: italic; font-size: 0.78rem;
    color: var(--rl-search-input-text); padding: 0.2rem 0.5rem 0.2rem 1.5rem;
    border: 1px solid var(--rl-search-input-border); background: transparent;
    width: 190px; outline: none;
}
.ledger-page .ctrl-search input::placeholder { color: var(--rl-search-placeholder-color); }
.ledger-page .ctrl-search input:focus { border-color: var(--rl-search-input-focus-border); }
.ledger-page .ctrl-search svg {
    position: absolute; left: 0.4rem; width: 10px; height: 10px;
    fill: none; stroke: var(--rl-search-icon-stroke); stroke-width: 2;
}
.ledger-page .ctrl-count {
    font-family: var(--rl-ctrl-count-font); font-style: italic;
    font-size: 0.7rem; color: var(--rl-ctrl-count-color); white-space: nowrap;
}

/* ── Sort bar ─────────────────────────────────────────────── */
.ledger-page .sort-bar {
    display: grid;
    grid-template-columns: var(--col-layout);
    border-bottom: 2px solid var(--rl-sortbar-border-bottom);
    padding: 0.3rem 0;
}
.ledger-page .sort-bar .sh {
    font-family: var(--rl-sortbar-label-font); font-size: 0.46rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--rl-sortbar-label-color);
    cursor: pointer; user-select: none; padding: 0 0.3rem;
    display: flex; align-items: center; gap: 0.2rem; transition: color 0.12s;
}
.ledger-page .sort-bar .sh:hover { color: var(--rl-sortbar-label-hover-color); }
.ledger-page .sort-bar .sh.active { color: var(--rl-sortbar-label-active-color); }
.ledger-page .sort-bar .sh .arr { opacity: 0.4; font-size: 0.42rem; }
.ledger-page .sort-bar .sh.active .arr { opacity: 1; }
.ledger-page .sh-grade { justify-content: center; }
.ledger-page .sh-score { justify-content: flex-end; }
.ledger-page .sh-pct   { justify-content: flex-end; }
.ledger-page .sh-seen  { justify-content: center; }

/* ── Rating rows ──────────────────────────────────────────── */
.ledger-page .ratings-list { position: relative; }
.ledger-page .rating-row:nth-child(4n+1),
.ledger-page .rating-row:nth-child(4n+2) { background: var(--rl-row-stripe-bg); }
.ledger-page .rating-row {
    display: grid;
    grid-template-columns: var(--col-layout);
    align-items: center;
    border-bottom: 1px solid var(--rl-row-border-bottom);
    min-height: 28px; cursor: pointer; transition: background 0.08s;
}
.ledger-page .rating-row:hover { background: var(--rl-row-hover-bg) !important; }
.ledger-page .rating-row.expanded {
    background: var(--rl-row-expanded-bg) !important;
    border-bottom-color: transparent;
}
.ledger-page .rc { padding: 0.2rem 0.15rem; line-height: 1; }

.ledger-page .rc-num {
    font-family: var(--rl-rownum-font); font-size: 0.42rem;
    letter-spacing: 0.04em; color: var(--rl-rownum-color); text-align: right;
}
.ledger-page .rc-grade {
    display: flex; align-items: center; justify-content: center;
}
.ledger-page .grade-tag {
    font-family: var(--rl-gradetag-font); font-weight: 800; font-size: 0.58rem;
    letter-spacing: 0.02em; color: var(--rl-gradetag-text-color);
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 17px; padding: 0 3px;
}
.ledger-page .gt-aplus  { background: var(--rl-gradetag-bg-aplus); }
.ledger-page .gt-a      { background: var(--rl-gradetag-bg-a); }
.ledger-page .gt-aminus { background: var(--rl-gradetag-bg-aminus); }
.ledger-page .gt-bplus  { background: var(--rl-gradetag-bg-bplus); }
.ledger-page .gt-b      { background: var(--rl-gradetag-bg-b); }
.ledger-page .gt-bminus { background: var(--rl-gradetag-bg-bminus); }
.ledger-page .gt-cplus  { background: var(--rl-gradetag-bg-cplus); }
.ledger-page .gt-c      { background: var(--rl-gradetag-bg-c); }
.ledger-page .gt-cminus { background: var(--rl-gradetag-bg-cminus); }
.ledger-page .gt-dplus  { background: var(--rl-gradetag-bg-dplus); }
.ledger-page .gt-d      { background: var(--rl-gradetag-bg-d); }
.ledger-page .gt-dminus { background: var(--rl-gradetag-bg-dminus); }
.ledger-page .gt-f      { background: var(--rl-gradetag-bg-f); }

.ledger-page .rc-title {
    font-family: var(--rl-title-font); font-size: 0.82rem; color: var(--rl-title-text-color);
    line-height: 1.15; padding-right: 0.4rem; font-weight: 500;
    display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap;
}
.ledger-page .rc-title .t-main { font-weight: 700; }
.ledger-page .rc-title .t-year {
    font-family: var(--rl-title-year-font); font-size: 0.46rem;
    letter-spacing: 0.07em; color: var(--rl-title-year-color); flex-shrink: 0;
}
.ledger-page .rc-title .t-reviewed {
    font-family: var(--rl-title-reviewed-font); font-size: 0.7rem;
    color: var(--rl-title-reviewed-mark-color); line-height: 1; flex-shrink: 0; text-decoration: none;
}
.ledger-page .rc-score {
    font-family: var(--rl-score-font); font-weight: 400;
    font-size: 0.78rem; color: var(--rl-score-color); text-align: right;
    padding-left: 1.6rem;
}
.ledger-page .rc-pct {
    font-family: var(--rl-pct-font); font-size: 0.5rem;
    letter-spacing: 0.04em; color: var(--rl-pct-text-color); text-align: right;
    padding-left: 1.6rem;
}
.ledger-page .pct-bar-wrap {
    display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end;
}
.ledger-page .pct-bar {
    width: 60px; height: 4px; background: var(--rl-pctbar-track-bg); overflow: hidden; flex-shrink: 0;
}
.ledger-page .pct-bar-fill { height: 100%; background: var(--rl-pctbar-fill-bg); }
.ledger-page .rc-runtime { display: none; }
.ledger-page .rc-seen {
    font-family: var(--rl-seen-font); font-size: 0.52rem;
    letter-spacing: 0.04em; color: var(--rl-seen-text-color); text-align: center;
    padding: 0.2rem 0.5rem 0.2rem 1.6rem;
}
.ledger-page .seen-dots { display: flex; gap: 3px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ledger-page .seen-dot  { width: 5px; height: 5px; background: var(--rl-seen-dot-bg); border-radius: 50%; flex-shrink: 0; }
.ledger-page .rc-date {
    font-family: var(--rl-date-font); font-size: 0.46rem;
    letter-spacing: 0.05em; color: var(--rl-date-color);
    padding-left: 1.6rem;
}
.ledger-page .rc-genre { display: none; }
.ledger-page .rc-expand {
    display: flex; align-items: center; justify-content: center;
    padding-left: 1.6rem;
}
.ledger-page .expand-chevron {
    font-size: 0.55rem; color: var(--rl-chevron-color);
    transition: transform 0.18s, color 0.14s; line-height: 1;
}
.ledger-page .rating-row.expanded .expand-chevron,
.ledger-page .rating-row:hover .expand-chevron { color: var(--rl-chevron-active-color); }
.ledger-page .rating-row.expanded .expand-chevron { transform: rotate(180deg); }

/* ── Expanded detail ──────────────────────────────────────── */
.ledger-page .detail-row {
    display: none;
    background: var(--rl-detailrow-bg);
    border-bottom: 1.5px solid var(--rl-detailrow-border-bottom);
    padding: 0.55rem 0.6rem 0.6rem 70px;
}
.ledger-page .detail-row.open { display: block; }
.ledger-page .detail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.5rem 2rem; align-items: start;
}
.ledger-page .det-lbl {
    font-family: var(--rl-detail-label-font); font-size: 0.42rem;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--rl-detail-label-color); display: block; margin-bottom: 0.12rem;
}
.ledger-page .det-val {
    font-family: var(--rl-detail-value-font); font-size: 0.72rem; font-weight: 400; font-style: italic;
    color: var(--rl-detail-value-color); line-height: 1.4; display: block;
}
.ledger-page .det-val em { font-style: italic; }
.ledger-page .det-actions {
    display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end;
}
.ledger-page .det-link {
    font-family: var(--rl-detail-link-font); font-size: 0.48rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--rl-detail-link-color); text-decoration: none;
    white-space: nowrap; transition: color 0.12s;
}
.ledger-page .det-link:hover { color: var(--rl-detail-link-hover-color); }
.ledger-page .det-link.disabled {
    color: var(--rl-detail-link-disabled-color); pointer-events: none;
}
.ledger-page .det-dates { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.ledger-page .det-lbl-inline {
    font-family: var(--rl-detail-inline-label-font); font-size: 0.44rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--rl-detail-inline-label-color);
}

/* ── Group headers ────────────────────────────────────────── */
.ledger-page .year-group-hdr {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 1rem 0 0.35rem;
    border-bottom: 1.5px solid var(--rl-yeargroup-border-bottom);
    position: sticky; top: 0;
    background: var(--rl-yeargroup-sticky-bg);
    z-index: 4; margin-bottom: 0;
}
.ledger-page .ygh-label {
    font-family: var(--rl-yeargroup-label-font); font-size: 0.88rem;
    letter-spacing: 0.1em; color: var(--rl-yeargroup-label-color); white-space: nowrap;
}
.ledger-page .ygh-rule { flex: 1; border: none; border-top: 1px solid var(--rl-yeargroup-rule-color); }
.ledger-page .ygh-stats {
    display: flex; gap: 1rem; align-items: center; flex-shrink: 0;
}
.ledger-page .ygh-stat {
    font-family: var(--rl-yeargroup-stat-font); font-size: 0.46rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--rl-yeargroup-stat-color);
}
.ledger-page .ygh-stat strong { font-weight: 700; color: var(--rl-yeargroup-stat-strong-color); margin-right: 0.2rem; }
.ledger-page .ygh-gradebar {
    display: flex; height: 8px; width: 80px; overflow: hidden;
    flex-shrink: 0; border: 1px solid var(--rl-gradebar-border);
}
.ledger-page .ygh-gradebar-seg { height: 100%; }
.ledger-page .seg-a { background: var(--rl-gradebar-seg-a); }
.ledger-page .seg-b { background: var(--rl-gradebar-seg-b); }
.ledger-page .seg-c { background: var(--rl-gradebar-seg-c); }
.ledger-page .seg-d { background: var(--rl-gradebar-seg-d); }
.ledger-page .seg-f { background: var(--rl-gradebar-seg-f); }

/* ── Footnote ─────────────────────────────────────────────── */
.ledger-page .footnote-bar {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: 0.45rem 0;
    border-top: 1px solid var(--rl-footnote-border-top); margin-top: 0;
}
.ledger-page .fn-item {
    display: flex; align-items: center; gap: 0.3rem;
    font-family: var(--rl-footnote-font); font-size: 0.65rem;
    color: var(--rl-footnote-text-color); font-style: italic;
}
.ledger-page .fn-item .fn-sym { color: var(--rl-footnote-symbol-color); font-style: normal; }

/* ── Pagination ───────────────────────────────────────────── */
.ledger-page .pagination {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 2.5rem;
    border-top: 2px solid var(--rl-pagination-border-top); border-bottom: 1px solid var(--rl-pagination-border-bottom);
    padding: 0.48rem 0;
}
.ledger-page .pag-info {
    font-family: var(--rl-pagination-info-font); font-style: italic;
    font-size: 0.72rem; color: var(--rl-pagination-info-color);
}
.ledger-page .pag-nav { display: flex; }
.ledger-page .pag-nav a,
.ledger-page .pag-nav span {
    font-family: var(--rl-pagenav-font); font-size: 0.54rem; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.26rem 0.65rem;
    border: 1px solid var(--rl-pagenav-border); border-right: none;
    color: var(--rl-pagenav-text-color); text-decoration: none; cursor: pointer; transition: all 0.12s;
}
.ledger-page .pag-nav :last-child { border-right: 1px solid var(--rl-pagenav-border); }
.ledger-page .pag-nav a:hover { background: var(--rl-pagenav-hover-bg); color: var(--rl-pagenav-hover-text); border-color: var(--rl-pagenav-hover-border); }
.ledger-page .pag-nav span.cur { background: var(--rl-pagenav-current-bg); color: var(--rl-pagenav-current-text); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ledger-page { --col-layout: 28px 34px 1fr 95px 150px 115px 135px 26px; }
}
@media (max-width: 800px) {
    .ledger-page { --col-layout: 24px 32px 1fr 56px 56px 60px 20px; }
    .ledger-page .rc-pct    { display: none; }
    .ledger-page .sh-pct    { display: none; }
    .ledger-page .pct-bar   { width: 40px; }
    .ledger-page .detail-row { padding-left: 1rem; }
    .ledger-page .detail-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .ledger-page {
        --col-layout: 34px 1fr 50px 20px;
    }
    /* Hide columns on mobile to fit nicely */
    .ledger-page .rc-num, .ledger-page .sh-num,
    .ledger-page .rc-pct, .ledger-page .sh-pct,
    .ledger-page .rc-seen, .ledger-page .sh-seen,
    .ledger-page .rc-date, .ledger-page .sh-date {
        display: none !important;
    }

    /* Page heading mobile stacking */
    .ledger-page .page-heading {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .ledger-page .heading-rule {
        display: none;
    }
    .ledger-page .heading-center h1 {
        font-size: 1.35rem;
    }

    /* Stats strip wrapped layout */
    .ledger-page .stats-strip {
        flex-wrap: wrap;
    }
    .ledger-page .stat-cell {
        flex-basis: 33.333%;
        border-right: 1px solid var(--rl-statcell-divider);
        border-bottom: 1px solid var(--rl-statcell-divider);
    }
    .ledger-page .stat-cell:nth-child(3) {
        border-right: none;
    }
    .ledger-page .stat-cell.grade-cell {
        flex-basis: 20%;
        border-bottom: none;
    }
    .ledger-page .stat-cell.grade-cell:last-child {
        border-right: none;
    }

    /* Controls grid */
    .ledger-page .controls {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem 0.8rem;
        padding: 0.8rem 0;
    }
    .ledger-page .ctrl-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }
    .ledger-page .ctrl-select {
        width: 100%;
        padding: 0.35rem 1.6rem 0.35rem 0.5rem;
        font-size: 0.62rem;
    }
    .ledger-page .ctrl-label {
        font-size: 0.52rem;
    }
    .ledger-page .ctrl-sep {
        display: none;
    }
    .ledger-page .ctrl-search {
        grid-column: span 2;
        margin-left: 0;
        width: 100%;
        margin-top: 0.2rem;
    }
    .ledger-page .ctrl-search input {
        width: 100%;
        padding: 0.35rem 0.5rem 0.35rem 1.8rem;
        font-size: 0.8rem;
    }
    .ledger-page .ctrl-count {
        grid-column: span 2;
        text-align: right;
        font-size: 0.72rem;
        margin-top: -0.2rem;
    }

    /* Active filter bar */
    .ledger-page .detail-filter-bar {
        flex-wrap: wrap;
        gap: 0.3rem 0.5rem;
        padding: 0.4rem 0.6rem;
    }
    .ledger-page .dfl-clear {
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-top: 0.2rem;
        padding: 0.2rem 0;
    }

    /* Expanded detail column stacking */
    .ledger-page .detail-cols {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .ledger-page .detail-row {
        padding: 0.6rem 1rem;
    }
    .ledger-page .det-actions {
        align-items: flex-start;
        margin-top: 0.4rem;
    }

    /* Group headers */
    .ledger-page .year-block {
        margin-bottom: 0.5rem;
    }
    .ledger-page .year-group-hdr {
        padding: 0.8rem 0 0.35rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .ledger-page .ygh-label {
        font-size: 0.82rem;
    }
    .ledger-page .ygh-rule {
        display: none;
    }
    .ledger-page .ygh-stats {
        margin-left: auto;
        gap: 0.6rem;
    }
    .ledger-page .ygh-stat {
        font-size: 0.42rem;
    }
    .ledger-page .ygh-gradebar {
        width: 60px;
        height: 7px;
    }

    /* Footnote */
    .ledger-page .footnote-bar {
        justify-content: center;
        gap: 0.8rem;
        text-align: center;
        padding: 0.6rem 0;
    }
    .ledger-page .fn-item {
        font-size: 0.6rem;
    }

    /* Pagination */
    .ledger-page .pagination {
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
        padding: 0.6rem 0;
    }
    .ledger-page .pag-info {
        font-size: 0.68rem;
    }
    .ledger-page .pag-nav a,
    .ledger-page .pag-nav span {
        padding: 0.3rem 0.5rem;
        font-size: 0.52rem;
    }
}

@keyframes ledgerFadeUp {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ledger-page .year-block { animation: ledgerFadeUp 0.28s ease both; }
.ledger-page .year-block:nth-child(1) { animation-delay: 0.03s; }
.ledger-page .year-block:nth-child(2) { animation-delay: 0.07s; }
.ledger-page .year-block:nth-child(3) { animation-delay: 0.11s; }
.ledger-page .year-block:nth-child(4) { animation-delay: 0.15s; }

/* ── Clickable filter tokens (in detail panel) ────────────── */
.ledger-page .filter-token {
    cursor: pointer;
    transition: color 0.12s;
    white-space: nowrap;
}
.ledger-page .filter-token:hover {
    color: var(--rl-filtertoken-hover-color);
}

/* ── Active detail-filter indicator bar ───────────────────── */
.ledger-page .detail-filter-bar {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.6rem;
    background: var(--rl-detailfilterbar-bg);
    border-top: 1px solid var(--rl-detailfilterbar-border);
    border-bottom: 1px solid var(--rl-detailfilterbar-border);
}
.ledger-page .detail-filter-bar.visible { display: flex; }
.ledger-page .dfl-prefix {
    font-family: var(--rl-dfl-prefix-font); font-size: 0.44rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--rl-dfl-prefix-color);
}
.ledger-page .dfl-field {
    font-family: var(--rl-dfl-field-font); font-size: 0.44rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--rl-dfl-field-color);
}
.ledger-page .dfl-sep { color: var(--rl-dfl-sep-color); font-size: 0.6rem; }
.ledger-page .dfl-value {
    font-family: var(--rl-dfl-value-font); font-style: italic;
    font-size: 0.72rem; color: var(--rl-dfl-value-color); font-weight: 700;
}
.ledger-page .dfl-clear {
    margin-left: auto;
    font-family: var(--rl-dfl-clear-font); font-size: 0.44rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--rl-dfl-clear-color); cursor: pointer;
    border-bottom: 1px solid var(--rl-dfl-clear-underline);
    padding-bottom: 1px; transition: color 0.12s, border-color 0.12s;
    user-select: none;
}
.ledger-page .dfl-clear:hover { color: var(--rl-dfl-clear-hover-color); border-color: var(--rl-dfl-clear-hover-underline); }