/* ═══════════════════════════════════════════════════════════════
 * A RCHI*VE OF REVIEWS — Cinemaths
 * Adapted from the demo layout; header/nav/footer supplied by
 * base.njk. All styles are scoped to .archive-page.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Widen main for the table ────────────────────────────────── */
main {
    max-width: 1440px !important;
    width: 96% !important;
}

/* ── Custom-property aliases ─────────────────────────────────
 *   --ap-* vars are aliased to the canonical archive-* tokens so
 *   any code that still references them resolves correctly.
 *   ──────────────────────────────────────────────────────────── */
.archive-page {
    --ap-f-body:    var(--archive-status-message-font);
    --ap-ink-faint: var(--archive-status-message-color);
    --ap-red:       var(--archive-detail-score-color);
}



:root {

    /* ── Page heading ─────────────────────────────────────────────── */
    --archive-heading-rule-line:        #3d2a18; /* horizontal <hr> line on either side of the "Complete Archive of Reviews" heading */
    --archive-heading-rule-pip:         #151515; /* small rotated square (pip) at the end of each heading rule */
    --archive-heading-title-font:       'goldentype-black', serif; /* font of the "Complete Archive of Reviews" h1 */
    --archive-heading-title-color:      #151515; /* text color of the "Complete Archive of Reviews" h1 */
    --archive-heading-subtitle-font:    'im-fell-english', Georgia, serif; /* font of the italic subtitle under the heading ("All notices of opinion...") */
    --archive-heading-subtitle-color:   #6b4f32; /* text color of the italic subtitle under the heading */

    /* ── Controls bar ─────────────────────────────────────────────── */
    --archive-controlsbar-border-top:      #151515; /* top border of the controls bar (Grade/Genre/Group by/Search row) */
    --archive-controlsbar-border-bottom:   #3d2a18; /* bottom border of the controls bar */
    --archive-ctrl-label-font:             'goldentype-sc-original', serif; /* font of small uppercase labels ("Grade", "Genre", "Group by") */
    --archive-ctrl-label-color:            #6b4f32; /* text color of small uppercase control labels */

    --archive-chip-font:                   'goldentype-sc-original', serif; /* font of the grade filter chips (All/A/B/C/D/F) */
    --archive-chip-border-color:           #3d2a18; /* border color between/around grade filter chips */
    --archive-chip-text-color:             #3d2a18; /* text color of an inactive grade filter chip */
    --archive-chip-active-bg:              #151515; /* background of the active/hovered grade filter chip */
    --archive-chip-active-text:            #f4b97d; /* text color of the active/hovered grade filter chip */
    --archive-chip-active-border:          #151515; /* border color of the active/hovered grade filter chip */

    --archive-select-font:                 'globe', serif; /* font of the Genre and Group-by <select> dropdowns */
    --archive-select-border-color:         #3d2a18; /* border color of the Genre and Group-by dropdowns */
    --archive-select-text-color:           #151515; /* text color of the Genre and Group-by dropdowns */
    --archive-select-arrow-color:          #3d2a18; /* fill color of the small downward-chevron SVG baked into the dropdown background-image */

    --archive-search-input-font:           'im-fell-english', Georgia, serif; /* font of the "Title, director, cast…" search input */
    --archive-search-input-text-color:     #151515; /* typed text color in the search input */
    --archive-search-input-border-color:   #3d2a18; /* border color of the search input */
    --archive-search-placeholder-color:    #6b4f32; /* placeholder text color ("Title, director, cast…") */
    --archive-search-input-focus-border:   #151515; /* border color of the search input when focused */
    --archive-search-input-focus-bg:       rgba(255,255,255,0.08); /* background tint of the search input when focused */
    --archive-search-icon-color:           #6b4f32; /* stroke color of the magnifying-glass icon inside the search input */

    --archive-result-count-font:           'im-fell-english', Georgia, serif; /* font of the "Showing 1–50 of N reviews" text */
    --archive-result-count-color:          #6b4f32; /* text color of the "Showing 1–50 of N reviews" text */

    /* ── Table header ─────────────────────────────────────────────── */
    --archive-table-header-border:         #151515; /* bottom border under the <thead> row */
    --archive-table-header-font:           'goldentype-sc', serif; /* font of all column header labels (#, Grade, Score, Film Title, etc.) */
    --archive-table-header-color:          #3d2a18; /* default text color of column header labels */
    --archive-table-header-hover-color:    #151515; /* text color of a sortable column header on hover */
    --archive-sort-icon-active-color:      #7a1515; /* color of the ▼/▲ sort-direction icon on the currently active sorted column */

    /* ── Table rows ───────────────────────────────────────────────── */
    --archive-row-border-color:            rgba(59,40,22,0.17); /* bottom border under each data row */
    --archive-row-stripe-bg:               rgba(0,0,0,0.022); /* subtle background stripe on alternating row pairs */
    --archive-row-hover-bg:                rgba(28,15,5,0.065); /* background of a data row on hover */
    --archive-row-expanded-bg:             rgba(28,15,5,0.065); /* background of a data row while its detail row is expanded */

    --archive-row-number-font:             'century731', serif; /* font of the row index number (# column) */
    --archive-row-number-color:            rgba(59,40,22,0.66); /* text color of the row index number (# column) */

    --archive-grade-pill-font:             'block', serif; /* font of the letter-grade pill (e.g. "A-") */
    --archive-grade-pill-text-color:       #f4b97d; /* text color inside every grade pill, regardless of grade */
    --archive-grade-pill-default-bg:       #151515; /* fallback pill background before a grade-specific class is applied */
    --archive-grade-a-bg:                  #143520; /* pill background for A-range grades */
    --archive-grade-b-bg:                  #142847; /* pill background for B-range grades */
    --archive-grade-c-bg:                  #383310; /* pill background for C-range grades */
    --archive-grade-d-bg:                  #451515; /* pill background for D-range grades */
    --archive-grade-f-bg:                  #5c0808; /* pill background for F-range grades */

    --archive-score-font:                  'block', Georgia, serif; /* font of the numeric score column */
    --archive-score-color:                 #7a1515; /* text color of the numeric score column */

    --archive-title-font:                  'goldentype-original', Georgia, serif; /* font of the film title in the table row */
    --archive-title-color:                 #151515; /* text color of the film title in the table row */
    --archive-title-year-font:             'im-fell-english', Georgia, serif; /* font of the "(Year)" that follows the film title */
    --archive-title-year-color:            #6b4f32; /* text color of the "(Year)" that follows the film title */

    --archive-mobile-subtitle-font:        'im-fell-english', Georgia, serif; /* font of the "Dir: X · Country" line shown under the title on mobile */
    --archive-mobile-subtitle-color:       #6b4f32; /* text color of the "Dir: X · Country" mobile subtitle line */

    --archive-year-font:                   'century731', serif; /* font of the standalone Year column */
    --archive-year-color:                  #3d2a18; /* text color of the standalone Year column */

    --archive-director-font:               'im-fell-english', Georgia, serif; /* font of the Director column */
    --archive-director-color:              #3d2a18; /* text color of the Director column */

    --archive-genre-font:                  'centurysc', serif; /* font of the Genre column */
    --archive-genre-color:                 #6b4f32; /* text color of the Genre column */

    --archive-runtime-font:                'centurysc', serif; /* font of the Runtime column */
    --archive-runtime-color:               #6b4f32; /* text color of the Runtime column */

    --archive-country-font:                'centurysc', serif; /* font of the Country column */
    --archive-country-color:               #3d2a18; /* text color of the Country column */

    --archive-date-font:                   'centurysc', serif; /* font of the "Reviewed" date column */
    --archive-date-color:                  #6b4f32; /* text color of the "Reviewed" date column */

    --archive-expand-btn-color:            #6b4f32; /* color of the expand-row chevron button, default state */
    --archive-expand-btn-hover-color:      #151515; /* color of the expand-row chevron button on hover */
    --archive-expand-btn-open-color:       #151515; /* color of the expand-row chevron button while the row is open */

    /* ── Detail (expanded) row ────────────────────────────────────── */
    --archive-detail-bg:                   rgba(28,15,5,0.038); /* background of the expanded detail row */
    --archive-detail-border-color:         rgba(59,40,22,0.17); /* bottom border under the expanded detail row */

    --archive-detail-label-font:           'goldentype-sc-original', serif; /* font of small section labels inside detail row (Director, Cast, Writer(s), etc.) */
    --archive-detail-label-color:          #6b4f32; /* text color of small section labels inside detail row */

    --archive-detail-value-font:           'century731', Georgia, serif; /* font of the actual values inside detail row (names, links, etc.) */
    --archive-detail-value-color:          #3d2a18; /* text color of the values inside detail row */

    --archive-detail-link-color:           #3d2a18; /* color of inline links inside detail values (director/cast/writer/etc. names) */
    --archive-detail-link-hover-color:     #7a1515; /* color of inline detail-value links on hover */

    --archive-detail-index-color:          #6b4f32; /* color of the "(Index #N)" note next to the Reviewed On date */
    --archive-detail-score-color:          #7a1515; /* color of the numeric Score value inside the detail row */

    --archive-detail-action-font:          'goldentype-sc-original', serif; /* font of the "Read full review →" link */
    --archive-detail-action-color:         #7a1515; /* text color of the "Read full review →" link */
    --archive-detail-action-border-color:  #7a1515; /* underline color of the "Read full review →" link */
    --archive-detail-action-hover-color:   #151515; /* text color of the "Read full review →" link on hover */
    --archive-detail-action-hover-border:  #151515; /* underline color of the "Read full review →" link on hover */

    /* ── Group header rows ────────────────────────────────────────── */
    --archive-group-header-border:         #151515; /* bottom border under a group header row (e.g. "2024") */
    --archive-group-header-font:           'saturday', Georgia, serif; /* font of the group header label (e.g. "2024") */
    --archive-group-header-color:          #151515; /* text color of the group header label */
    --archive-group-count-font:            'im-fell-english', Georgia, serif; /* font of the "— N reviews" count next to a group header */
    --archive-group-count-color:           #6b4f32; /* text color of the "— N reviews" count next to a group header */

    /* ── Pagination ────────────────────────────────────────────────── */
    --archive-pagination-border-top:       #151515; /* top border of the pagination bar */
    --archive-pagination-border-bottom:    #3d2a18; /* bottom border of the pagination bar */
    --archive-pagination-info-font:        'im-fell-english', Georgia, serif; /* font of the "Page X of Y" text */
    --archive-pagination-info-color:       #6b4f32; /* text color of the "Page X of Y" text */
    --archive-pagination-nav-font:         'goldentype-sc-original', serif; /* font of the Prev/page-number/Next pagination buttons */
    --archive-pagination-nav-border-color: #3d2a18; /* border color between pagination buttons */
    --archive-pagination-nav-text-color:   #3d2a18; /* text color of an inactive pagination button */
    --archive-pagination-nav-hover-bg:     #151515; /* background of a pagination button on hover */
    --archive-pagination-nav-hover-text:   #f4b97d; /* text color of a pagination button on hover */
    --archive-pagination-nav-hover-border: #151515; /* border color of a pagination button on hover */
    --archive-pagination-current-bg:       #151515; /* background of the current-page pagination indicator */
    --archive-pagination-current-text:     #f4b97d; /* text color of the current-page pagination indicator */

    /* ── Loading / error state (inline styles in archive.njk) ────── */
    --archive-status-message-font:         'im-fell-english', Georgia, serif; /* font of the "Loading archive…" and "Could not load archive data…" placeholder row */
    --archive-status-message-color:        #6b4f32; /* text color of the "Loading archive…" and "Could not load archive data…" placeholder row */

    /* ── Declared but currently UNUSED (kept for visibility) ──────── */
    --archive-unused-paper-dark:           #e8a35a; /* originally --ap-paper-dark; not referenced anywhere in archive.css or archive.njk */
    --archive-unused-deco-font:            'block', Georgia, serif; /* originally --ap-f-deco; not referenced anywhere in archive.css or archive.njk */

}



/* ── Page heading ────────────────────────────────────────────── */
.archive-page .page-heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
}

.archive-page .page-heading .rule-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.archive-page .page-heading .rule-side--right { flex-direction: row-reverse; }

.archive-page .page-heading hr {
    flex: 1; border: none;
    border-top: 1px solid var(--archive-heading-rule-line);
}
.archive-page .page-heading .pip {
    width: 5px; height: 5px;
    background: var(--archive-heading-rule-pip); transform: rotate(45deg); flex-shrink: 0;
}

.archive-page .heading-center { text-align: center; }
.archive-page .heading-center h1 {
    font-family: var(--archive-heading-title-font);
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    letter-spacing: 0.04em;
    color: var(--archive-heading-title-color);
    line-height: 1.1;
}
.archive-page .heading-center .sub {
    font-family: var(--archive-heading-subtitle-font); font-style: italic;
    font-size: 0.8rem; color: var(--archive-heading-subtitle-color); margin-top: 0.2rem;
}

/* ── Controls bar ────────────────────────────────────────────── */
.archive-page .controls-bar {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    gap: 0.8rem 1.5rem;
    border-top: 2px solid var(--archive-controlsbar-border-top);
    border-bottom: 1px solid var(--archive-controlsbar-border-bottom);
    padding: 0.6rem 0;
    margin-bottom: 0;
}

.archive-page .controls-left,
.archive-page .controls-right {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.archive-page .ctrl-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.archive-page .ctrl-label {
    font-family: var(--archive-ctrl-label-font); font-size: 0.5rem;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--archive-ctrl-label-color); white-space: nowrap;
}

.archive-page .filter-chips { display: flex; gap: 0; }
.archive-page .chip {
    font-family: var(--archive-chip-font); font-size: 0.52rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.22rem 0.65rem;
    border: 1px solid var(--archive-chip-border-color); border-right: none;
    background: transparent; color: var(--archive-chip-text-color);
    cursor: pointer; transition: all 0.12s;
}
.archive-page .chip:last-child { border-right: 1px solid var(--archive-chip-border-color); }
.archive-page .chip.active,
.archive-page .chip:hover {
    background: var(--archive-chip-active-bg); color: var(--archive-chip-active-text); border-color: var(--archive-chip-active-border);
}

.archive-page .ctrl-select {
    font-family: var(--archive-select-font); font-size: 0.52rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.22rem 1.8rem 0.22rem 0.6rem;
    border: 1px solid var(--archive-select-border-color); background: transparent;
    color: var(--archive-select-text-color); cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%233d2a18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.45rem center;
}

.archive-page .ctrl-search {
    position: relative; display: flex; align-items: center;
}
.archive-page .ctrl-search input {
    font-family: var(--archive-search-input-font); font-style: italic;
    font-size: 0.78rem; color: var(--archive-search-input-text-color);
    padding: 0.22rem 0.6rem 0.22rem 1.6rem;
    border: 1px solid var(--archive-search-input-border-color); background: transparent;
    width: 190px; outline: none;
}
.archive-page .ctrl-search input::placeholder { color: var(--archive-search-placeholder-color); }
.archive-page .ctrl-search input:focus {
    border-color: var(--archive-search-input-focus-border); background: var(--archive-search-input-focus-bg);
}
.archive-page .ctrl-search svg {
    position: absolute; left: 0.45rem;
    width: 11px; height: 11px;
    fill: none; stroke: var(--archive-search-icon-color); stroke-width: 2;
}

.archive-page .result-count {
    font-family: var(--archive-result-count-font); font-style: italic;
    font-size: 0.75rem; color: var(--archive-result-count-color); white-space: nowrap;
}

/* ── Table header ────────────────────────────────────────────── */
.archive-page .archive-table {
    width: 100%;
    border-collapse: collapse;
}

.archive-page .archive-table thead tr {
    border-bottom: 2px solid var(--archive-table-header-border);
}

.archive-page .archive-table th {
    font-family: var(--archive-table-header-font);
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--archive-table-header-color);
    padding: 0.45rem 0.6rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.archive-page .archive-table th.no-sort { cursor: default; }
.archive-page .archive-table th:hover:not(.no-sort) { color: var(--archive-table-header-hover-color); }

.archive-page .th-sort-icon {
    display: inline-block; margin-left: 0.25rem;
    opacity: 0.4; font-size: 0.48rem;
    vertical-align: middle; line-height: 1;
}
.archive-page .th-sort-icon.active { opacity: 1; color: var(--archive-sort-icon-active-color); }

/* ── Column widths ───────────────────────────────────────────── */
.archive-page .col-num     { width: 38px; text-align: right; }
.archive-page .col-grade   { width: 48px; text-align: center; }
.archive-page .col-score   { width: 52px; text-align: right; }
.archive-page .col-title   { min-width: 190px; }
.archive-page .col-year    { width: 52px; text-align: center; }
.archive-page .col-director{ width: 165px; }
.archive-page .col-genre   { width: 125px; }
.archive-page .col-runtime { width: 56px; text-align: right; }
.archive-page .col-country { width: 105px; }
.archive-page .col-date    { width: 110px; }
.archive-page .col-expand  { width: 28px; }

/* ── Table rows ──────────────────────────────────────────────── */
.archive-page .archive-table tbody tr.data-row {
    border-bottom: 1px solid var(--archive-row-border-color);
    transition: background 0.1s;
    cursor: pointer;
}
/* Subtle stripe on every other data-row pair */
.archive-page .archive-table tbody tr.data-row:nth-of-type(4n+1),
.archive-page .archive-table tbody tr.data-row:nth-of-type(4n+2) {
    background: var(--archive-row-stripe-bg);
}
.archive-page .archive-table tbody tr.data-row:hover {
    background: var(--archive-row-hover-bg) !important;
}
.archive-page .archive-table tbody tr.data-row.expanded {
    background: var(--archive-row-expanded-bg) !important;
    border-bottom: none;
}

.archive-page .archive-table td {
    padding: 0.4rem 0.6rem;
    vertical-align: middle;
    line-height: 1.2;
}

/* Row number */
.archive-page .td-num {
    font-family: var(--archive-row-number-font); font-size: 0.46rem;
    letter-spacing: 0.06em; color: var(--archive-row-number-color);
    text-align: right;
}

/* Grade pill */
.archive-page .grade-pill {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--archive-grade-pill-font); font-weight: 800; font-size: 0.58rem;
    letter-spacing: 0.02em; color: var(--archive-grade-pill-text-color);
    width: 28px; height: 20px;
    background: var(--archive-grade-pill-default-bg);
}
.archive-page .grade-pill.ga { background: var(--col-gr-a); }
.archive-page .grade-pill.gb { background: var(--col-gr-b); }
.archive-page .grade-pill.gc { background: var(--col-gr-c); }
.archive-page .grade-pill.gd { background: var(--col-gr-d); }
.archive-page .grade-pill.gf { background: var(--col-gr-f); }

/* Score */
.archive-page .td-score {
    font-family: var(--archive-score-font); font-weight: 400;
    font-size: 0.82rem; color: var(--archive-score-color);
    text-align: right;
}

/* Title */
.archive-page .td-title {
    font-family: var(--archive-title-font); font-weight: normal;
    font-size: 0.9rem; color: var(--archive-title-color); line-height: 1.25;
}

/* Year tag that follows the film title: (1954) */
.archive-page .title-year {
    font-family: var(--archive-title-year-font);
    font-style: italic;
    font-size: 0.72rem;
    color: var(--archive-title-year-color);
}

.archive-page .mobile-subtitle {
    display: none;
    font-family: var(--archive-mobile-subtitle-font);
    font-style: italic;
    font-size: 0.75rem;
    color: var(--archive-mobile-subtitle-color);
    margin-top: 0.15rem;
}

/* Year */
.archive-page .td-year {
    font-family: var(--archive-year-font); font-size: 0.58rem;
    letter-spacing: 0.06em; color: var(--archive-year-color); text-align: center;
}

/* Director */
.archive-page .td-director {
    font-family: var(--archive-director-font); font-style: italic;
    font-size: 0.78rem; color: var(--archive-director-color);
}

/* Genre */
.archive-page .td-genre {
    font-family: var(--archive-genre-font); font-size: 0.5rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--archive-genre-color);
}

/* Runtime */
.archive-page .td-runtime {
    font-family: var(--archive-runtime-font); font-size: 0.54rem;
    letter-spacing: 0.06em; color: var(--archive-runtime-color); text-align: right;
}

/* Country */
.archive-page .td-country {
    font-family: var(--archive-country-font); font-size: 0.52rem;
    letter-spacing: 0.08em; color: var(--archive-country-color);
}

/* Date reviewed */
.archive-page .td-date {
    font-family: var(--archive-date-font); font-size: 0.52rem;
    letter-spacing: 0.06em; color: var(--archive-date-color);
}

/* Expand toggle */
.archive-page .td-expand { text-align: center; }
.archive-page .expand-btn {
    background: none; border: none; cursor: pointer;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--archive-expand-btn-color); font-size: 0.75rem;
    transition: transform 0.2s ease, color 0.15s;
    line-height: 1;
}
.archive-page .expand-btn:hover { color: var(--archive-expand-btn-hover-color); }
.archive-page .expand-btn.open { transform: rotate(180deg); color: var(--archive-expand-btn-open-color); }

/* ── Detail row ──────────────────────────────────────────────── */
.archive-page .detail-row { display: none; }
.archive-page .detail-row.visible { display: table-row; }

.archive-page .detail-row td {
    background: var(--archive-detail-bg) !important;
    border-bottom: 2px solid var(--archive-detail-border-color);
    padding: 0.9rem 1.2rem 1rem 3rem;
}

.archive-page .detail-inner {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.2fr auto;
    gap: 0.6rem 2.4rem;
    align-items: start;
}

.archive-page .detail-section-label {
    font-family: var(--archive-detail-label-font); font-size: 0.44rem;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--archive-detail-label-color); display: block; margin-bottom: 0.2rem;
}
.archive-page .detail-label-mt { margin-top: 0.55rem; }

.archive-page .detail-value {
    font-family: var(--archive-detail-value-font); font-size: 0.78rem;
    color: var(--archive-detail-value-color); line-height: 1.45; display: block;
}

/* "(Index #N)" note inside the Reviewed On row */
.archive-page .detail-index-note {
    font-size: 0.65rem;
    color: var(--archive-detail-index-color);
}

/* Score value inside the detail row */
.archive-page .detail-value--score {
    color: var(--archive-detail-score-color);
    font-weight: 700;
}

/* Em-dash placeholder for empty/missing field values */
.archive-page .detail-dash {
    opacity: 0.5;
}

.archive-page .detail-value a {
    color: var(--archive-detail-link-color);
    text-decoration: none;
    background: none;
    transition: color 0.12s;
}
.archive-page .detail-value a:hover {
    color: var(--archive-detail-link-hover-color);
    background: none;
}

.archive-page .detail-links {
    display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end;
    padding-top: 0.15rem;
}
.archive-page .detail-link {
    font-family: var(--archive-detail-action-font); font-size: 0.48rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--archive-detail-action-color); text-decoration: none;
    border-bottom: 1px solid var(--archive-detail-action-border-color); padding-bottom: 1px;
    white-space: nowrap; transition: color 0.12s, border-color 0.12s;
}
.archive-page .detail-link:hover { color: var(--archive-detail-action-hover-color); border-color: var(--archive-detail-action-hover-border); }



/* ── Group header rows ───────────────────────────────────────── */
.archive-page .group-header-row td {
    padding: 1.1rem 0.6rem 0.3rem;
    border-bottom: 1.5px solid var(--archive-group-header-border);
}
.archive-page .group-header-label {
    font-family: var(--archive-group-header-font); font-size: 0.7rem;
    font-weight: 700; letter-spacing: 0.14em; color: var(--archive-group-header-color);
}
.archive-page .group-header-count {
    font-family: var(--archive-group-count-font); font-style: italic;
    font-size: 0.68rem; color: var(--archive-group-count-color); margin-left: 0.5rem;
}

/* ── Pagination ──────────────────────────────────────────────── */
.archive-page .pagination {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 2px solid var(--archive-pagination-border-top); border-bottom: 1px solid var(--archive-pagination-border-bottom);
    padding: 0.55rem 0; margin-top: 0;
}
.archive-page .pagination-info {
    font-family: var(--archive-pagination-info-font); font-style: italic;
    font-size: 0.75rem; color: var(--archive-pagination-info-color);
}
.archive-page .pagination-nav { display: flex; gap: 0; }
.archive-page .pagination-nav a,
.archive-page .pagination-nav span {
    font-family: var(--archive-pagination-nav-font); font-size: 0.55rem; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.3rem 0.7rem;
    border: 1px solid var(--archive-pagination-nav-border-color); border-right: none;
    color: var(--archive-pagination-nav-text-color); text-decoration: none; cursor: pointer;
    transition: all 0.12s;
}
.archive-page .pagination-nav a:last-child,
.archive-page .pagination-nav span:last-child { border-right: 1px solid var(--archive-pagination-nav-border-color); }
.archive-page .pagination-nav a:hover {
    background: var(--archive-pagination-nav-hover-bg); color: var(--archive-pagination-nav-hover-text); border-color: var(--archive-pagination-nav-hover-border);
}
.archive-page .pagination-nav span.pg-current {
    background: var(--archive-pagination-current-bg); color: var(--archive-pagination-current-text);
}
.archive-page .pagination-nav span.pg-ellipsis { cursor: default; }
.archive-page .pagination-nav span.pg-disabled  { opacity: 0.3; cursor: default; }

/* Status row (loading / error message in tbody) */
.archive-page .table-status-row {
    text-align: center;
    padding: 3rem 1rem;
    font-family: var(--archive-status-message-font);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--archive-status-message-color);
}

/* ── Fade-in ─────────────────────────────────────────────────── */
@keyframes archiveFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.archive-page .archive-table tbody { animation: archiveFadeIn 0.3s ease both; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .archive-page .col-genre,
    .archive-page .col-runtime { display: none; }
}
@media (max-width: 780px) {
    .archive-page .col-director { display: none; }
    .archive-page .detail-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    /* Hide columns on mobile to fit nicely */
    .archive-page .col-num,
    .archive-page .col-year,
    .archive-page .col-director,
    .archive-page .col-genre,
    .archive-page .col-runtime,
    .archive-page .col-country,
    .archive-page .col-score {
        display: none !important;
    }

    .archive-page .col-date {
        display: table-cell !important;
        text-align: right;
        font-size: 0.48rem !important;
        white-space: nowrap;
        padding-right: 0.4rem !important;
    }
    .archive-page .col-grade {
        padding-right: 0.1rem !important;
        width: 28px !important;
    }
    .archive-page .col-title {
        padding-left: 0 !important;
    }

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

    /* Controls layout */
    .archive-page .controls-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem 0;
    }
    .archive-page .controls-left {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    .archive-page .ctrl-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
    }
    .archive-page .filter-chips {
        display: flex;
        width: 100%;
    }
    .archive-page .chip {
        flex: 1;
        text-align: center;
        padding: 0.35rem 0.2rem;
        font-size: 0.6rem;
    }
    .archive-page .ctrl-select {
        width: 100%;
        padding: 0.35rem 1.8rem 0.35rem 0.6rem;
        font-size: 0.65rem;
    }
    .archive-page .controls-right {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }
    .archive-page .ctrl-search {
        width: 100%;
    }
    .archive-page .ctrl-search input {
        width: 100%;
        padding: 0.35rem 0.6rem 0.35rem 1.8rem;
        font-size: 0.8rem;
    }
    .archive-page .result-count {
        text-align: right;
        font-size: 0.72rem;
    }

    .archive-page .mobile-subtitle {
        display: block;
    }

    /* Expanded detail column stacking */
    .archive-page .detail-inner {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .archive-page .detail-row td {
        padding: 0.8rem 1rem;
    }
    .archive-page .detail-links {
        align-items: flex-start;
        margin-top: 0.5rem;
    }

    /* Pagination */
    .archive-page .pagination {
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
        padding: 0.6rem 0;
    }
    .archive-page .pagination-info {
        font-size: 0.68rem;
    }
    .archive-page .pagination-nav a,
    .archive-page .pagination-nav span {
        padding: 0.35rem 0.55rem;
        font-size: 0.55rem;
    }
}