.info-page {
    display: flex;
    gap: 40px;
    padding: 40px;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: var(--nav-h);
    box-sizing: border-box;
}

.info-cover {
    flex-shrink: 0;
}

.info-cover-img {
    width: 280px;
    height: 420px;
    object-fit: cover;
    border: 1px solid rgba(127, 255, 212, 0.3);
    display: block;
}

.info-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-title {
    font-family: "jf_dot_ayu";
    color: aquamarine;
    font-size: 28px;
    margin: 0;
}

.info-description {
    font-family: "jf_dot_ayu";
    color: rgba(127, 255, 212, 0.7);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

/* Meta */
.info-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid rgba(127, 255, 212, 0.1);
    border-bottom: 1px solid rgba(127, 255, 212, 0.1);
    padding: 12px 0;
}

.info-meta-row {
    display: flex;
    gap: 16px;
    font-family: "jf_dot_ayu";
    font-size: 13px;
}

.info-meta-label {
    color: rgba(127, 255, 212, 0.4);
    width: 110px;
    flex-shrink: 0;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding-top: 2px;
}

.info-meta-value {
    color: aquamarine;
}

/* Chapters list */
.info-chapters-title {
    font-family: "jf_dot_ayu";
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(127, 255, 212, 0.4);
    margin-bottom: 8px;
}

.info-chapter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(127, 255, 212, 0.07);
    font-family: "jf_dot_ayu";
    font-size: 13px;
}

.info-chapter-link {
    color: aquamarine;
    text-decoration: none;
    transition: opacity 0.15s;
}

.info-chapter-link:hover { opacity: 0.7; }

.info-chapter-pages {
    color: rgba(127, 255, 212, 0.4);
    font-size: 12px;
}

/* Actions */
.info-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.info-read-btn {
    font-family: "jf_dot_ayu";
    font-size: 14px;
    padding: 10px 32px;
    background-color: rgba(127, 255, 212, 0.1);
    border: 1px solid rgba(127, 255, 212, 0.4);
    color: aquamarine;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.15s;
    letter-spacing: 1px;
}

.info-read-btn:hover { background-color: rgba(127, 255, 212, 0.2); }

.info-back-btn,
.info-admin-btn {
    font-family: "jf_dot_ayu";
    font-size: 13px;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid rgba(127, 255, 212, 0.2);
    color: rgba(127, 255, 212, 0.6);
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.15s;
}

.info-back-btn:hover,
.info-admin-btn:hover {
    background-color: rgba(127, 255, 212, 0.06);
    color: aquamarine;
}

/* ── Thumbnail preview ── */
.info-preview {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px 60px;
    box-sizing: border-box;
}

.info-preview-chapter {
    margin-bottom: 32px;
}

.info-preview-chapter-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(127, 255, 212, 0.1);
}

.info-preview-chapter-title {
    font-family: "jf_dot_ayu";
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(127, 255, 212, 0.6);
}

.info-preview-chapter-count {
    font-family: "jf_dot_ayu";
    font-size: 11px;
    color: rgba(127, 255, 212, 0.3);
}

.info-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.info-thumb-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    border: 1px solid rgba(127, 255, 212, 0.15);
    overflow: hidden;
    transition: border-color 0.15s;
    vertical-align: top;
}

.info-thumb-link:hover {
    border-color: rgba(127, 255, 212, 0.5);
}

.info-thumb-hidden {
    display: none;
}

.info-thumb {
    width: auto;
    height: 140px;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

.info-thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(127, 255, 212, 0.7);
    font-family: "jf_dot_ayu";
    font-size: 10px;
    text-align: center;
    padding: 2px 0;
}

.info-preview-controls {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.info-preview-btn {
    font-family: "jf_dot_ayu";
    font-size: 11px;
    padding: 5px 14px;
    background-color: transparent;
    border: 1px solid rgba(127, 255, 212, 0.2);
    color: rgba(127, 255, 212, 0.6);
    cursor: pointer;
    border-radius: 2px;
    letter-spacing: 1px;
    transition: background-color 0.12s;
}

.info-preview-btn:hover {
    background-color: rgba(127, 255, 212, 0.06);
    color: aquamarine;
}

/* ── Locked content ── */
.info-locked {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 212, 59, 0.5);
    background-color: rgba(255, 212, 59, 0.08);
    color: #ffd43b;
    font-size: 13px;
}
.info-locked strong { color: #ffd43b; }
.info-locked a { color: aquamarine; margin-left: 6px; }
.info-thumb-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 150 / 210;
    background: repeating-linear-gradient(45deg, #1d1f1f, #1d1f1f 8px, #242626 8px, #242626 16px);
    font-size: 28px;
}
/* locked thumbnails are buttons that open the "Patreon Exclusive" modal */
button.info-thumb-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
}

/* locked chapters / Read open the "Patreon Exclusive" modal */
button.info-chapter-link, button.info-read-btn { font: inherit; cursor: pointer; text-align: left; }
button.info-chapter-link { background: none; border: none; padding: 0; }
.info-chapter-locked { color: #ffd43b; opacity: 0.85; }
.info-chapter-locked:hover { opacity: 1; }

/* cover opens the reader */
.info-cover-link { display: block; padding: 0; margin: 0; border: none; background: none; cursor: pointer; }
.info-cover-link .info-cover-img { transition: transform 0.15s, border-color 0.15s; }
.info-cover-link:hover .info-cover-img, .info-cover-link:focus-visible .info-cover-img { transform: scale(1.01); border-color: aquamarine; }
.info-thumb-lock { color: #ffd43b; }
.info-locked, .info-locked strong, .info-locked a { font-family: "jf_dot_ayu"; }

/* ── Chapters / extras tabs (only shown when a series has extras) ── */
.info-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid rgba(127, 255, 212, 0.25);
    margin-bottom: 8px;
}
.info-tab {
    font-family: "jf_dot_ayu";
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 12px;
    background: transparent;
    color: rgba(127, 255, 212, 0.55);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    cursor: pointer;
    margin-bottom: -1px;
}
.info-tab:hover { color: aquamarine; background-color: rgba(127, 255, 212, 0.05); }
.info-tab.selected {
    color: aquamarine;
    background-color: #151616;
    border-color: rgba(127, 255, 212, 0.25);
    border-bottom: 1px solid #151616;
}
.info-tab:focus-visible { outline: 1px solid aquamarine; outline-offset: -2px; }
.info-tab .px-lock { color: #ffd43b; }
[data-tab-panel][hidden] { display: none !important; }

/* ── Phones: cover on top, everything in one column, bigger touch targets ── */
@media (max-width: 700px) {
    .info-page { flex-direction: column; align-items: stretch; gap: 18px; padding: 16px; }
    /* the cover fills the screen's width, and is never taller than the screen */
    .info-cover { align-self: stretch; display: flex; justify-content: center; }
    .info-cover-link { display: flex; justify-content: center; max-width: 100%; }
    .info-cover-link { width: 100%; }
    .info-cover-img {
        /* as wide as the screen, unless a (portrait, ~2:3) cover would then be taller than it */
        width: min(100%, calc((100vh - var(--nav-h) - 32px) * 0.667));
        width: min(100%, calc((100svh - var(--nav-h) - 32px) * 0.667));
        height: auto;
        max-height: calc(100vh - var(--nav-h) - 32px);
        max-height: calc(100svh - var(--nav-h) - 32px);
        object-fit: contain;
    }
    .info-details { gap: 16px; min-width: 0; }
    .info-title { font-size: 24px; text-align: center; }
    .info-description { font-size: 15px; }
    .info-meta-row { font-size: 14px; }
    .info-meta-label { width: 104px; }

    .info-actions { flex-wrap: wrap; }
    .info-read-btn { flex: 1 1 100%; text-align: center; padding: 14px 20px; font-size: 16px; box-sizing: border-box; }
    button.info-read-btn { text-align: center; }
    .info-back-btn, .info-admin-btn { flex: 1 1 0; text-align: center; padding: 12px 10px; font-size: 14px; }

    .info-chapter-row { padding: 0; font-size: 15px; gap: 12px; }
    .info-chapter-link { display: block; flex: 1; min-width: 0; padding: 13px 0; }
    .info-chapter-pages { font-size: 13px; white-space: nowrap; }

    .info-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .info-tabs::-webkit-scrollbar { display: none; }
    .info-tab { flex: none; font-size: 12px; padding: 10px 14px; }

    .info-locked { font-size: 14px; line-height: 1.5; }

    .info-preview { padding: 0 16px 40px; }
    .info-preview-chapter-title { font-size: 14px; }
    .info-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .info-thumb-link:not(.info-thumb-hidden) { display: block; }
    .info-thumb { width: 100%; height: auto; max-width: none; aspect-ratio: 150 / 210; object-fit: cover; }
    .info-preview-controls { flex-wrap: wrap; }
    .info-preview-btn { flex: 1; padding: 11px 10px; font-size: 13px; }
}
@media (max-width: 700px) {
    .info-details .info-tags { gap: 8px; }
    .info-details .info-tag { font-size: 14px; padding: 7px 10px; display: inline-block; }
}
@media (max-width: 700px) {
    .info-chapter-row .info-chapter-link, .info-chapter-row button.info-chapter-link { display: block; padding: 13px 0; text-align: left; }
}

/* chapter list: on phones only the first 3 until "Show all … chapters" */
.info-chapters-more { display: none; }
@media (max-width: 700px) {
    #panel-chapters:not(.info-show-all) > .info-chapter-row:nth-of-type(n+4) { display: none; }
    .info-chapters-more {
        display: block; width: 100%; margin-top: 8px; padding: 12px 10px;
        font-family: "jf_dot_ayu"; font-size: 14px; letter-spacing: 0.5px;
        color: rgba(127, 255, 212, 0.75); background: transparent;
        border: 1px dashed rgba(127, 255, 212, 0.3); border-radius: 0; cursor: pointer;
    }
}