/* "Continue reading" while a progress fill is showing (chapter_list_continue_cta_html in components/chapter-list). The fill is
   the left --cp of the pill; the label has to read white over it and ink over the rest, switching exactly at the fill's
   edge — through the middle of a letter if that is where it falls. One text colour can't do that, so the pill carries its
   content twice: .cta-base is the real one, in the page's text colour, and .cta-over is an aria-hidden copy in real white.
   The light theme clips each to one side of the edge; dark has white text on both halves already, so there the copy stays
   hidden and nothing changes. Both layers span the pill's whole box, which is what makes --cp mean the same thing for them
   as for the gradient stops behind them. */
.cta-split .cta-over {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    color: #fff;
    /* real white, at the same strength the dark theme gives the text (the light theme's emphasis curve is off here) */
    --c-white: 255 255 255;
    --ta-b: 0;
    --ta-m: 1;
}

html[data-theme="light"] .cta-split .cta-base {
    clip-path: inset(0 0 0 var(--cp));
}

html[data-theme="light"] .cta-split .cta-over {
    display: flex;
    clip-path: inset(0 calc(100% - var(--cp)) 0 0);
}

/* Mobile: pin the Start/Continue + bookmark row to the
   bottom of the viewport for the whole series page.
   Full-bleed, its own padding, background = page bg.
   Docks just above the mobile tab bar (--mobile-tabbar-h). */
@media (max-width: 767.98px) {
    .series-cta-row {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--mobile-tabbar-h, 0px);
        z-index: 40;
        padding: 0.7rem 0.75rem;
        background: rgb(var(--c-page));
    }

    .series-cta-row::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -1.5rem;
        height: 1.5rem;
        background: linear-gradient(to top, rgb(var(--c-page)), rgb(var(--c-page) / 0));
        pointer-events: none;
    }

    /* Clear the fixed CTA bar so the last content stays
       reachable (the tab bar's own gap comes from the
       body padding it sets). */
    .series-main {
        padding-bottom: 9rem;
    }
}

/* On desktop the chapter list scrolls inside its own card instead of stretching the page — a long
   series can run to hundreds of chapters. Desktop = 1024px and up, where this page switches to its
   two-column layout (Tailwind's lg); phones and tablets keep the full, page-scrolled list, since a
   scroll box nested inside a touch scroll is easy to get stuck in. min(56vh, 512px) is about 6 list
   rows (3 rows of cards in grid view) on a big monitor, and the vh part keeps the box comfortably on
   screen on a short laptop. overflow-x stays hidden so a stray pixel can never grow a horizontal
   scrollbar. Scroll chaining is left at its default, so the page takes over once the list reaches
   its end. The thumbnails' lazy-load observer follows the same breakpoint (see loadChaptersList()
   in series.js). */
@media (min-width: 1024px) {
    #chapters-list {
        max-height: min(56vh, 512px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Until the rows arrive a skeleton stands in for them, and it is taller than the cap on a
       short window — clip it rather than let a placeholder grow a scrollbar. Real rows carry
       data-ch-uid; the skeleton rows don't. */
    #chapters-list:not(:has([data-ch-uid])) {
        overflow-y: hidden;
    }
}

#chapters-list .ch-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

#chapters-list.is-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 12px 14px;
}

#chapters-list .ch-meta-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

#chapters-list.is-grid .chapter-row {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid rgb(var(--c-white) / 0.07);
    border-radius: 10px;
    overflow: hidden;
}

#chapters-list.is-grid .chapter-row:hover {
    background: rgb(var(--c-white) / 0.04);
}

#chapters-list.is-grid .ch-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 0;
}

#chapters-list.is-grid .ch-info {
    padding: 8px 10px 10px;
}

#chapters-list.is-grid .ch-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Grid cards show the terse "Chapter N" title; the list rows show the
   chapter's full displayName — see $ch_title / $ch_title_grid in
   components/chapter-list/index.php. */
#chapters-list.is-grid .ch-title-full {
    display: none;
}

#chapters-list.is-grid .ch-title-grid {
    display: -webkit-box;
}

/* Grid cards are too narrow for "20h ago · Sep 20, 2026" on one line —
   drop the absolute date and keep the row from wrapping/overflowing. */
#chapters-list.is-grid .ch-date-row {
    flex-wrap: nowrap;
    overflow: hidden;
}

#chapters-list.is-grid .ch-date-extra {
    display: none;
}

/* Grid: float the progress / paid badge as a pill centred on the cover */
#chapters-list.is-grid .ch-meta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0;
    pointer-events: none;
}

#chapters-list.is-grid .ch-meta-inner {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 5px 5px;
    border-radius: 999px;
    background: rgb(17 17 19);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid rgb(var(--c-white) / 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Grid: the download button becomes a full-width card footer instead of
   the default small square (which just sat stranded under the info block).
   The card's own overflow:hidden + border-radius clips it into the bottom
   corners for free, so no border-radius is needed on the button itself. */
#chapters-list.is-grid .mo-row-btn {
    width: 100%;
    height: 34px;
    padding: 8px 0;
    border-radius: 0;
    border-top: 1px solid rgb(var(--c-white) / 0.06);
    background: rgb(var(--c-white) / 0.02);
}

#chapters-list.is-grid .mo-row-btn:hover {
    background: rgb(var(--c-white) / 0.07);
}