/**
 * Media kit: the shared pieces of the Cinema system (docs/revamp/README.md, phase 2).
 * Module colors, section heads, underline tabs, horizontal rails, poster cards,
 * add-to-library buttons and "in library" badges.
 *
 * Uses only the semantic tokens declared in layout-site/master.css, so it renders in every theme.
 * Markup: resources/views/components/media-kit/*. Behavior: public/js/components/media-kit.js.
 */

/* ================== PAGE LAYOUT ================== */
/* Edge-to-edge pages (with @section('content_class', 'site-content--bleed')) wrap their content in
   .page-bleed and pad each block with .page-inset: 64px gutters on desktop, 16px on phones, content
   capped at --page-max. The header and the footer (layout-site/chrome.css) use the same gutter.
   Rails keep scrolling to the screen edge through --rail-inset. */
:root {
    --page-gutter: clamp(16px, 4.45vw, 64px);
    --page-max: 1600px;
    --page-inset: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
}

.page-bleed {
    --rail-inset: var(--page-inset);
    --section-gap: clamp(56px, 5.6vw, 80px);
    --sticky-top: var(--site-header-h, 58px);
    --section-index-h: 56px;
}

html:has(.page-bleed) {
    scroll-behavior: smooth;
}

.page-inset {
    padding-inline: var(--page-inset);
}

.page-bleed section[id^="section-"] {
    scroll-margin-top: calc(var(--sticky-top) + var(--section-index-h) + 12px);
}

.page-section {
    padding-top: var(--section-gap);
}

/* Lands the heading, not the section's top padding, just below the sticky index */
.page-bleed section.page-section[id^="section-"] {
    scroll-margin-top: calc(var(--sticky-top) + var(--section-index-h) + 24px - var(--section-gap));
}

.page-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    color: var(--text-2);
}

/* Heading set in the text font (labels such as "Quick Actions"); the component class sets its size
   and weight. Cinema's display-heading weight rule skips it (themes/cinema.css). */
.heading-sans {
    font-family: var(--font-body);
    letter-spacing: 0;
}

/* ================== BREADCRUMB ================== */
/* Markup: components/media-kit/breadcrumb.blade.php */
.page-breadcrumb-nav {
    min-width: 0;
}

.page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

.page-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-breadcrumb li + li::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    color: var(--text-2);
}

.page-breadcrumb a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-2);
    text-decoration: none;
}

.page-breadcrumb a:hover {
    color: var(--text-1);
}

.page-breadcrumb [aria-current="page"] {
    overflow: hidden;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ================== PAGE BAND ================== */
/* Top band of the library and TOP 100 pages: module tint, breadcrumb, a display title with the module nav
   and an aside (components/library/band.blade.php, site/partials/top-ratings.blade.php). */
.page-band {
    position: relative;
    padding-top: 26px;
    border-bottom: 1px solid var(--line);
    background-color: var(--surface-0);
    background-image: radial-gradient(920px 380px at 6% -12%, color-mix(in srgb, var(--module, var(--accent)) 15%, transparent) 0%, transparent 70%);
}

.page-band-inner {
    padding-bottom: 36px;
}

.page-band-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px 30px;
    margin-top: 26px;
}

/* Small accent label over a page title (account pages, lists...) */
.page-kicker,
.account-kicker {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.page-band-title {
    flex: none;
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: clamp(52px, 5.6vw, 80px);
    line-height: 0.95;
    letter-spacing: 0.005em;
    white-space: nowrap;
    color: var(--text-1);
}

.module-nav {
    min-width: 0;
    max-width: 100%;
}

.module-nav-list {
    display: flex;
    align-items: baseline;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.module-nav-list::before {
    content: "";
    flex: none;
    align-self: center;
    width: 1px;
    height: 24px;
    background: var(--line-strong);
}

.module-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.module-nav-link .module-dot {
    width: 7px;
    height: 7px;
}

.module-nav-link:hover {
    color: var(--text-1);
}

.module-nav-link[aria-current="page"] {
    border-bottom-color: var(--accent);
    font-weight: 600;
    color: var(--text-1);
}

.module-nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
}

.module-nav-count {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.module-nav-link[aria-current="page"] .module-nav-count {
    color: var(--text-1);
}

.page-band-aside {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 0 auto;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    color: var(--text-2);
}

/* A description too long for the aside: a paragraph under the title */
.page-band-lead {
    max-width: 760px;
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-2);
}

/* Slim band for app-like pages (a voice room): breadcrumb and a smaller title, so the page itself stays
   above the fold */
.page-band.is-compact .page-band-inner {
    padding-bottom: 22px;
}

.page-band.is-compact .page-band-row {
    margin-top: 14px;
}

.page-band.is-compact .page-band-title {
    font-size: clamp(34px, 3.2vw, 48px);
}

@media (max-width: 991.98px) {
    .page-band-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* Stacked, the title and the aside may wrap: a wide display font or a long translation would push the
       page sideways */
    .page-band-title,
    .page-band-aside {
        max-width: 100%;
        white-space: normal;
    }

    .module-nav-list {
        flex-wrap: wrap;
        gap: 12px 22px;
    }

    .module-nav-list::before {
        display: none;
    }

    .page-band-aside {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .page-band {
        padding-top: 18px;
    }

    .page-band-inner {
        padding-bottom: 28px;
    }

    .page-band-row {
        margin-top: 18px;
    }
}

/* ================== SECTION INDEX (sticky) ================== */
/* Behavior: [data-section-index] in media-kit.js (active link, counter, back to top, mirror nav) */
.section-index {
    position: sticky;
    top: var(--sticky-top);
    z-index: 20;
    background: var(--surface-0);
    border-top: 1px solid var(--surface-2);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 28px -18px rgba(0, 0, 0, 0.95);
}

.section-index-inner {
    display: flex;
    align-items: stretch;
    gap: 24px;
    height: var(--section-index-h);
}

.section-index-list {
    display: flex;
    align-items: stretch;
    gap: 34px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.section-index-list::-webkit-scrollbar {
    display: none;
}

/* Fades the side that still has links to scroll to */
.section-index-list.has-more {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.section-index-list.has-less {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px);
    mask-image: linear-gradient(90deg, transparent, #000 48px);
}

.section-index-list.has-less.has-more {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.section-index-list li {
    display: flex;
    flex: none;
}

.section-index-link {
    display: flex;
    align-items: center;
    padding-top: 2px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.section-index-link:hover {
    color: var(--text-1);
}

.section-index-link.is-active {
    font-weight: 600;
    color: var(--text-1);
    border-bottom-color: var(--accent);
}

.section-index-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.section-index-aside {
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-index-counter {
    margin: 0;
    padding-top: 2px;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}

.section-index-total {
    color: var(--text-2);
}

.section-index-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-1);
    font-size: 13px;
    color: var(--text-1);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.section-index-top:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.section-index-top:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ================== MODULE COLORS ================== */
.is-game  { --module: var(--module-game); }
.is-anime { --module: var(--module-anime); }
.is-manga { --module: var(--module-manga); }
.is-movie { --module: var(--module-movie); }
.is-serie { --module: var(--module-serie); }
.is-book  { --module: var(--module-book); }

.module-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--module, var(--text-2));
}

.module-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-1);
}

/* Small tag laid over a cover */
.module-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px 0 8px;
    border-radius: 11px;
    background: rgba(11, 11, 14, 0.74);
    font-size: 11px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f2efe9;
}

.module-chip .module-dot {
    width: 6px;
    height: 6px;
}

/* ================== SECTION HEAD ================== */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 24px;
    row-gap: 12px;
    margin-bottom: 24px;
}

.section-head-title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 44px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--text-1);
}

.section-head--sm {
    margin-bottom: 16px;
}

.section-head--sm .section-head-title {
    font-size: 32px;
}

.section-head-sub,
.section-head-note {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-2);
}

.section-head-note strong {
    font-weight: 700;
    color: var(--accent);
}

.section-head-divider {
    flex: none;
    align-self: center;
    width: 1px;
    height: 20px;
    background: var(--line-strong);
}

.section-head-badge {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 1px 8px 0;
    border: 1px solid var(--accent);
    border-radius: 4px;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 19px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.section-head-badge--muted {
    height: 22px;
    padding: 0 8px;
    border-color: var(--line-strong);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-1);
}

.section-head-aside {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 22px;
}

.section-head-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--text-1);
    text-decoration: none;
    white-space: nowrap;
}

.section-head-link i {
    font-size: 13px;
    color: var(--accent);
    transition: transform 0.2s ease;
}

.section-head-link:hover {
    color: var(--accent);
}

.section-head-link:hover i {
    transform: translateX(3px);
}

/* ================== UNDERLINE TABS ================== */
.media-tabs {
    display: flex;
    align-items: baseline;
    gap: 24px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.media-tabs::-webkit-scrollbar {
    display: none;
}

.media-tab {
    flex: none;
    margin: 0;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-2);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.media-tab:hover {
    color: var(--text-1);
}

.media-tab[aria-selected="true"] {
    font-weight: 600;
    color: var(--text-1);
    border-bottom-color: var(--accent);
}

.media-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ================== SECTION TABS ================== */
/* Bootstrap tabs (ul.nav.kit-tabs > li.nav-item > button.nav-link[data-bs-toggle="tab"]) over a .tab-content:
   icon and name, underlined in the accent while active. Used by the profile (site/profile/index) and the
   extras of the item pages (components/item-page/extras-tabs). */
.kit-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 4px 24px;
    margin: 0 0 24px;
    padding: 0;
    border-bottom: 1px solid var(--line);
    list-style: none;
}

.kit-tabs .nav-item {
    display: flex;
    align-items: center;
}

.kit-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 -1px;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-2);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.kit-tabs .nav-link:hover:not(:disabled) {
    color: var(--text-1);
}

.kit-tabs .nav-link.active {
    font-weight: 600;
    color: var(--text-1);
    border-bottom-color: var(--accent);
}

.kit-tabs .nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.kit-tabs .nav-link:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ================== EMPTY STATE ================== */
/* Nothing to show in a panel or tab: icon, title, a line of text and, when there is one, an action
   (.kit-button). The item page extras, the game-specific tabs and the task boards use it. */
.extras-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    text-align: center;
    color: var(--text-2);
}

.extras-empty[hidden] {
    display: none;
}

.extras-empty > i {
    margin-bottom: 8px;
    font-size: 28px;
    color: var(--accent);
}

.extras-empty-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
}

.extras-empty-text {
    max-width: 440px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
}

.extras-empty .kit-button {
    margin-top: 14px;
}

/* ================== HORIZONTAL RAIL ================== */
.media-rail {
    position: relative;
    /* Keeps the raised card actions below sticky bars that scroll over the rail */
    isolation: isolate;
    /* Vertical center of the arrows; each rail sets it to the middle of its covers */
    --rail-arrow-y: 50%;
}

.media-rail-track {
    display: flex;
    align-items: flex-start;
    gap: var(--rail-gap, 20px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px var(--rail-inset, 0px) 12px;
    scroll-padding-inline: var(--rail-inset, 0px);
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.media-rail-track::-webkit-scrollbar {
    display: none;
}

.media-rail-track > * {
    flex: none;
    scroll-snap-align: start;
}

/* Fades the cut-off card at the right edge while there is more to scroll */
.media-rail::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(220px, 18vw);
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--surface-0) 72%, transparent) 62%, color-mix(in srgb, var(--surface-0) 90%, transparent) 100%);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.media-rail.is-at-end::after {
    opacity: 0;
}

.media-rail-arrow {
    position: absolute;
    top: var(--rail-arrow-y);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-1);
    color: var(--text-1);
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.media-rail-arrow--prev {
    left: 10px;
}

.media-rail-arrow--next {
    right: 24px;
    width: 52px;
    height: 52px;
    border-color: color-mix(in srgb, var(--text-1) 40%, transparent);
    background: color-mix(in srgb, var(--surface-1) 94%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.media-rail-arrow:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.media-rail-arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

.media-rail.is-static .media-rail-arrow {
    display: none;
}

.media-rail-arrow:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.media-rail.is-loading .media-rail-arrow--next i::before {
    content: "\f110";
    display: inline-block;
    animation: media-kit-spin 1s linear infinite;
}

@keyframes media-kit-spin {
    to { transform: rotate(360deg); }
}

/* ================== SKELETON ================== */
/* Placeholder of something still loading: a surface with a light sweeping across it */
.kit-skeleton {
    background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%);
    background-size: 200% 100%;
    animation: kit-shimmer 1.4s ease-in-out infinite;
}

@keyframes kit-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .kit-skeleton {
        animation: none;
    }
}

/* Touch screens scroll by swiping; the arrows only get in the way */
@media (hover: none) {
    .media-rail-arrow {
        display: none;
    }
}

/* ================== POSTER CARD ================== */
.poster-card {
    position: relative;
    width: var(--cover-w, 200px);
}

.poster-card-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-1);
    box-shadow: 0 22px 40px -24px rgba(0, 0, 0, 0.9);
}

.poster-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.poster-card:hover .poster-card-cover img {
    transform: scale(1.035);
    filter: brightness(1.06);
}

/* Cover without image: the title set in display type over the module tint */
.poster-fallback {
    position: absolute;
    inset: 0;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    padding: 0 8% 9%;
    background-color: color-mix(in srgb, var(--module, var(--text-2)) 16%, var(--surface-1));
    background-image:
        radial-gradient(130% 75% at 12% 0%, color-mix(in srgb, var(--module, var(--text-2)) 26%, transparent) 0%, transparent 62%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 12px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.poster-fallback-bar {
    flex: none;
    width: 28px;
    height: 2px;
    background: var(--module, var(--text-2));
}

/* The tight line-height with the line clamp cut the accents of capitals ("CRÔNICAS", "AMANHÃ"), and the overflow cut
   the left of letters that lean past the start of the line ("Á", "J"): the padding gives them room and the margin
   takes it back, so the title stays where it was (as .item-hero-title), and the max-width grows by the same room, so
   the lines break where they did. The 2px cover the rounding of the first line at the small sizes of the covers, where
   0.14em alone still cut the tip */
.poster-fallback-title {
    max-width: calc(100% + 0.04em + 1px);
    margin-top: calc(-0.14em - 2px);
    margin-left: calc(-0.04em - 1px);
    padding-top: calc(0.14em + 2px);
    padding-left: calc(0.04em + 1px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 16cqi;
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: var(--text-1);
}

.poster-card-title {
    margin: 14px 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2lh;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: var(--text-1);
}

/* The title link covers the whole card; actions are raised above it */
.poster-card-link {
    color: inherit;
    text-decoration: none;
}

.poster-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-sm);
}

.poster-card-link:hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.poster-card-link:focus-visible {
    outline: none;
}

.poster-card-link:focus-visible::after {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.poster-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--text-2);
    white-space: nowrap;
}

.poster-card-meta i {
    flex: none;
    font-size: 12px;
}

.poster-card-star {
    color: var(--accent);
}

.poster-card-score {
    padding-top: 2px;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 22px;
    line-height: 20px;
    letter-spacing: 0.02em;
    color: var(--text-1);
}

.poster-card-action {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    display: flex;
}

.poster-card-float-action {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

/* Rank variant: an outlined numeral behind the left edge of the cover */
.poster-card--rank {
    --rank-cover-w: var(--cover-w, 200px);
    width: calc(var(--rank-cover-w) * 1.44);
}

.poster-card--rank .poster-card-cover,
.poster-card--rank .poster-card-title,
.poster-card--rank .poster-card-meta {
    width: var(--rank-cover-w);
    margin-left: auto;
}

.poster-card--rank .poster-card-cover {
    box-shadow: -18px 0 28px -14px rgba(0, 0, 0, 0.95);
}

.poster-card-rank {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--rank-cover-w) * 0.7);
    height: calc(var(--rank-cover-w) * 1.5);
    overflow: visible;
}

.poster-card-rank text {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 340px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

/* ================== SCORE DISPLAY ================== */
/* Community score in big numerals: components/media-kit/score-display.blade.php */
.score-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.score-display-label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
}

.score-display-value {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0 0;
}

.score-display-value i {
    margin-top: 30px;
    font-size: 24px;
    color: var(--accent);
}

.score-display-number {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 120px;
    line-height: 96px;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}

.score-display-number--empty {
    color: var(--text-2);
}

.score-display-max {
    padding-top: 57px;
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 34px;
    line-height: 34px;
    color: var(--text-2);
}

.score-display-count {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
}

.score-display-libraries {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--text-1) 18%, transparent);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: var(--text-1);
}

.score-display-libraries i {
    font-size: 14px;
    color: var(--text-2);
}

/* Next to the cover on tablets and phones: left aligned and smaller */
@media (max-width: 991.98px) {
    .score-display {
        align-items: flex-start;
        text-align: left;
    }

    .score-display-number {
        font-size: 96px;
        line-height: 80px;
    }

    .score-display-max {
        padding-top: 44px;
    }

    .score-display-value i {
        margin-top: 22px;
    }

    .score-display-libraries {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .score-display-number {
        font-size: 72px;
        line-height: 62px;
    }

    .score-display-max {
        padding-top: 30px;
        font-size: 26px;
    }

    .score-display-value i {
        margin-top: 14px;
        font-size: 18px;
    }
}

/* ================== MASTERPIECE (score 11) ================== */
/* Metallic gold, apart from the amber accent. Showcase and swap dialog: components/masterpiece.css */
:root {
    --masterpiece: #ffc94d;
    --masterpiece-gradient: linear-gradient(135deg, #fff1c2 0%, #ffc94d 45%, #c8871d 100%);
    --on-masterpiece: #2a1d05;
}

/* Place of a masterpiece in a showcase: a small gold medal with the number */
.masterpiece-rank {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 13px;
    background: var(--masterpiece-gradient);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.6);
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 16px;
    line-height: 1;
    color: var(--on-masterpiece);
}

/* "3 masterpieces" beside a title (TOP 100, item page) */
.masterpiece-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--masterpiece);
}

.masterpiece-mark i {
    font-size: 0.85em;
}

/* A score, or a community average, past 10: gold, with the crown in place of the star */
.poster-card-score.is-masterpiece,
.poster-card-star.is-masterpiece {
    color: var(--masterpiece);
}

.score-display.is-masterpiece .score-display-value i {
    color: var(--masterpiece);
}

.score-display.is-masterpiece .score-display-number {
    background: var(--masterpiece-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.score-display-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--masterpiece);
}

.score-display-libraries.is-masterpieces i {
    color: var(--masterpiece);
}

/* A second community line sits under the first, inside the same rule */
.score-display-libraries + .score-display-libraries {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}

/* ================== ADD TO LIBRARY / IN LIBRARY ================== */
.add-btn,
.badge-in-library--pill,
.badge-in-library--hero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    white-space: nowrap;
}

.add-btn {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.add-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.add-btn--pill {
    height: 34px;
    padding: 0 15px 0 11px;
    border: 1px solid color-mix(in srgb, var(--text-1) 30%, transparent);
    border-radius: 17px;
    background: transparent;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-1);
}

.add-btn--pill i {
    font-size: 13px;
    color: var(--accent);
}

.add-btn--pill:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.add-btn--icon {
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(242, 239, 233, 0.45);
    border-radius: 50%;
    background: rgba(11, 11, 14, 0.74);
    font-size: 14px;
    color: #f2efe9;
}

.add-btn--icon:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.add-btn--hero {
    height: 48px;
    padding: 0 24px 0 20px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: var(--on-accent);
}

.add-btn--hero:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
}

.badge-in-library--pill {
    height: 34px;
    padding: 0 15px 0 11px;
    border-radius: 17px;
    background: var(--surface-2);
    font-size: 13px;
    line-height: 18px;
    color: var(--text-1);
}

.badge-in-library--pill i {
    font-size: 12px;
    color: var(--success);
}

.badge-in-library--hero {
    height: 48px;
    padding: 0 22px 0 18px;
    border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    font-size: 15px;
    line-height: 20px;
    color: var(--text-1);
}

.badge-in-library--hero i {
    color: var(--success);
}

.badge-in-library--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f2efe9;
    font-size: 14px;
    color: #0b0b0e;
}

/* ================== BUTTONS ================== */
/* Page-level buttons and links styled as buttons: .kit-button plus one of .is-primary (the page's main
   action), .is-outline, .is-ghost or .is-danger; .is-small for rows and cards. */
.kit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 21px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    color: var(--text-1);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kit-button > i {
    font-size: 13px;
}

.kit-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.kit-button:disabled,
.kit-button.is-disabled {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.kit-button.is-primary {
    background: var(--accent);
    color: var(--on-accent);
}

.kit-button.is-primary:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
}

.kit-button.is-outline {
    border-color: color-mix(in srgb, var(--text-1) 30%, transparent);
    background: color-mix(in srgb, var(--text-1) 5%, transparent);
}

.kit-button.is-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.kit-button.is-ghost {
    padding: 0 12px;
    color: var(--text-2);
}

.kit-button.is-ghost:hover {
    color: var(--text-1);
}

.kit-button.is-danger {
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    color: var(--danger);
}

.kit-button.is-danger:hover {
    background: var(--danger);
    color: #fff;
}

.kit-button.is-small {
    height: 34px;
    padding: 0 14px;
    border-radius: 17px;
    font-size: 13px;
}

/* Icon only: needs an aria-label */
.kit-button.is-icon {
    width: 42px;
    padding: 0;
}

.kit-button.is-icon.is-small {
    width: 34px;
}

/* ================== LIGHTBOX ================== */
/* Image viewer (components/media-kit/lightbox.blade.php, js/components/lightbox.js). Above the header and the
   routes drawer, below the dialogs of site-dialogs.css. */
html.has-lightbox {
    overflow: hidden;
}

.kit-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 76px;
    grid-template-rows: 64px minmax(0, 1fr);
    align-items: center;
    background: rgba(7, 7, 9, 0.94);
    backdrop-filter: blur(6px);
}

.kit-lightbox[hidden] {
    display: none;
}

.kit-lightbox-bar {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 16px;
    padding: 0 16px 0 24px;
}

.kit-lightbox-counter {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.kit-lightbox-stage {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 0 32px;
}

.kit-lightbox-stage img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
}

.kit-lightbox-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(242, 239, 233, 0.22);
    border-radius: 50%;
    background: rgba(21, 21, 27, 0.85);
    font-size: 16px;
    color: #f2efe9;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.kit-lightbox-button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.kit-lightbox-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.kit-lightbox-button[hidden] {
    display: none;
}

.kit-lightbox-bar .kit-lightbox-button {
    margin-left: auto;
}

.kit-lightbox-button.is-prev,
.kit-lightbox-button.is-next {
    grid-row: 2;
    justify-self: center;
}

.kit-lightbox-button.is-prev {
    grid-column: 1;
}

.kit-lightbox-button.is-next {
    grid-column: 3;
}

@media (max-width: 767.98px) {
    .kit-lightbox {
        grid-template-columns: 0 minmax(0, 1fr) 0;
    }

    .kit-lightbox-stage {
        padding: 0 12px 88px;
    }

    .kit-lightbox-stage img {
        max-height: calc(100vh - 152px);
        max-height: calc(100dvh - 152px);
    }

    /* Out of the grid: with a grid area (column 1 or 3, zero wide here) they would be placed inside it */
    .kit-lightbox-button.is-prev,
    .kit-lightbox-button.is-next {
        position: fixed;
        bottom: 24px;
        grid-column: auto;
        grid-row: auto;
    }

    .kit-lightbox-button.is-prev {
        left: calc(50% - 56px);
    }

    .kit-lightbox-button.is-next {
        left: calc(50% + 12px);
    }
}

/* ================== LANGUAGE SWITCH ================== */
/* EN / PT links of layout-site/partials/language-switch.blade.php (header, footer and the sign-in pages) */
.app-lang {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.06em;
    color: var(--text-2);
}

.app-lang > i {
    margin-right: 2px;
    font-size: 13px;
}

.app-lang-sep {
    font-weight: 400;
}

.app-lang-link {
    padding: 4px 1px;
    color: var(--text-2);
    text-decoration: none;
}

.app-lang-link:hover,
.app-lang-link[aria-current] {
    color: var(--text-1);
}

.app-lang-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ================== SEARCH FIELDS ================== */
/* The clear button of search inputs, in the muted text color instead of the browser blue (the finder
   hides it: finder.css) */
input[type="search"]:not(.finder-input)::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b3aeb8' stroke-linecap='round' stroke-width='2' d='M3 3l10 10M13 3L3 13'/%3e%3c/svg%3e") center / 12px no-repeat;
    cursor: pointer;
}

/* ================== AVATAR ================== */
/* A person's picture: photo, predefined avatar (gradient + icon) or the name's initials over the name's
   gradient (ImageHelper::getAvatarGradient). Markup: components/account/avatar.blade.php (header, account
   pages, friends, lists). */
.account-avatar {
    --avatar-size: 48px;
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--surface-3);
    background-position: center;
    background-size: cover;
    font-size: calc(var(--avatar-size) * 0.4);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    /* Some predefined avatar gradients are light: the shadow keeps the white icon readable */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Initials built in JS without a payload gradient (js/site/friends/friends.js): the first name gradient */
.account-avatar.is-initial {
    background: linear-gradient(45deg, #c2410c, #0f766e);
}

/* ================== LIST TILE ================== */
/* A user list as a card (a friend's public lists, the lists pages): name, the list's own icon tinted by
   its color (--list-color), item count and badges. Markup: ul.list-tiles > li > a.list-tile */
.list-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-tile {
    --list-color: var(--module, var(--accent));
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--surface-1);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-1);
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.list-tile:hover {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--text-1);
}

.list-tile:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.list-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.list-tile-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    overflow-wrap: anywhere;
}

.list-tile-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--list-color) 20%, transparent);
    font-size: 16px;
    color: color-mix(in srgb, var(--list-color) 65%, #fff);
}

.list-tile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    line-height: 18px;
    color: var(--text-2);
}

.list-tile-meta i {
    margin-right: 6px;
}

.list-tile-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--success) 16%, transparent);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--success);
}

.list-tile-badge i {
    margin-right: 5px;
}

.list-tile-badge.is-muted {
    background: var(--surface-3);
    color: var(--text-2);
}

/* A collaborative list (M-015), wherever a list shows: hub, friend page, shared progress, the list page */
.list-tile-badge.is-collaborative {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Several lists of friends side by side: smaller tiles */
.list-tiles.is-compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.list-tiles.is-compact .list-tile {
    gap: 12px;
    padding: 16px;
    background: var(--surface-2);
}

.list-tiles.is-compact .list-tile:hover {
    background: var(--surface-3);
}

.list-tiles.is-compact .list-tile-name {
    font-size: 15px;
}

.list-tiles.is-compact .list-tile-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

/* ================== PRIVACY SWITCH ================== */
/* On / off switch with its text (lists, "Perfil público", badge): a label wrapping a Bootstrap .form-switch
   and a .privacy-switch-text that turns green while the switch is on. */
.privacy-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
}

.privacy-switch .form-switch {
    min-height: 0;
    margin: 0;
    padding-left: 0;
}

.privacy-switch .form-check-input {
    float: none;
    width: 38px;
    height: 22px;
    margin: 0;
    border-color: var(--line-strong);
    background-color: var(--surface-3);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b3aeb8'/%3e%3c/svg%3e");
    cursor: pointer;
}

.privacy-switch .form-check-input:checked {
    border-color: var(--success);
    background-color: var(--success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230b0b0e'/%3e%3c/svg%3e");
}

.privacy-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.privacy-switch:has(.form-check-input:checked) .privacy-switch-text {
    color: var(--success);
}

/* ================== PUBLIC PROFILE ================== */
/* The "Perfil público" switch, its text and the share button (components/public-profile/sharing; profile and
   progress pages). One row that wraps. Stacked (.is-stacked, and every one on phones) the switch and the
   button (at the end) stay on top and the text goes below; .is-stacked text never widens the block, it wraps
   at the width the parent gives. */
.public-profile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

/* As tall as the small share button, so the row does not jump when the button shows up */
.public-profile .privacy-switch {
    min-height: 34px;
}

.public-profile-hint {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-2);
}

.public-profile.is-stacked .privacy-switch ~ .public-profile-share {
    margin-left: auto;
}

.public-profile.is-stacked .public-profile-hint {
    order: 1;
    flex-basis: 100%;
    contain: inline-size;
}

@media (max-width: 767.98px) {
    .public-profile .privacy-switch ~ .public-profile-share {
        margin-left: auto;
    }

    .public-profile-hint {
        order: 1;
        flex-basis: 100%;
    }
}

/* ================== FILTER CHIP ================== */
/* A pill that filters a page (button with aria-pressed, or link with aria-current) */
.kit-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 19px;
    background: var(--surface-1);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    color: var(--text-1);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.kit-chip > i {
    font-size: 12px;
    color: var(--text-2);
}

.kit-chip:hover {
    border-color: var(--text-2);
    color: var(--text-1);
}

.kit-chip:focus-visible,
.kit-chip:has(> input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Pressed button, current link, or a label wrapping a checked radio (a one-of-many choice) */
.kit-chip[aria-pressed="true"],
.kit-chip[aria-current="true"],
.kit-chip:has(> input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-weight: 600;
}

.kit-chip[aria-pressed="true"] > i,
.kit-chip[aria-current="true"] > i,
.kit-chip:has(> input:checked) > i {
    color: var(--accent);
}

.kit-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ================== PAGER ================== */
/* Markup: components/media-kit/pagination.blade.php */
.pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 52px;
}

.pager-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 16px;
    list-style: none;
}

.pager-list li {
    display: flex;
}

.pager-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding-top: 2px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-1);
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

a.pager-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pager-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pager-btn.is-current,
.pager-btn.is-current:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.pager-btn--arrow {
    padding-top: 0;
    border-color: color-mix(in srgb, var(--text-1) 40%, transparent);
    font-family: var(--font-body);
    font-size: 13px;
}

.pager-btn.is-disabled {
    border-color: var(--line-strong);
    opacity: 0.4;
}

.pager-gap {
    width: 28px;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: var(--text-2);
}

.pager-summary {
    margin: 0;
    padding: 0 16px;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    color: var(--text-2);
}

@media (max-width: 767.98px) {
    .page-bleed {
        --section-index-h: 64px;
    }

    .pager {
        padding-top: 40px;
    }

    .pager-list {
        gap: 6px;
    }

    .pager-btn {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .section-head-title {
        font-size: 36px;
    }

    .section-head--sm .section-head-title {
        font-size: 30px;
    }

    /* Title and link on the first line, the tabs scroll on their own line */
    .section-head .media-tabs {
        order: 3;
        flex-basis: 100%;
    }

    .section-head .section-head-divider {
        display: none;
    }

    .section-head-sub {
        flex-basis: 100%;
    }

    /* Section index: chips instead of underlined links */
    .section-index-inner {
        padding-inline: 0;
    }

    .section-index-list {
        align-items: center;
        gap: 8px;
        padding-inline: var(--page-inset);
        scroll-padding-inline: var(--page-inset);
    }

    .section-index-list li {
        align-items: center;
    }

    .section-index-link {
        height: 44px;
        padding: 0 16px;
        border: 1px solid var(--surface-3);
        border-radius: 8px;
        background: var(--surface-1);
    }

    .section-index-link.is-active {
        border-color: var(--accent);
        background: var(--accent-soft);
    }

    .section-index-aside {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:has(.page-bleed) {
        scroll-behavior: auto;
    }

    .media-rail-track {
        scroll-behavior: auto;
    }

    .poster-card-cover img,
    .section-head-link i {
        transition: none;
    }
}