/* The Card Catalog - index cards, ruled lines, rubber stamps.
   Ported from design-ref/ebook-library-v4.html (light-native; dark authored here). */

@import url("https://fonts.googleapis.com/css2?family=Gloock&family=Work+Sans:wght@400;500;600;700&family=Courier+Prime:wght@400;700&display=swap");

:root {
    --bg: #F4F2EA;
    --surface: #FFFDF6;
    --surface-2: #EFE4C8;
    --ink: #23252B;
    --ink-soft: #6E6F76;
    --accent: #BF3B2B;
    --accent-deep: #982C1E;
    --line: rgba(35, 37, 43, .2);
    --line-soft: rgba(35, 37, 43, .1);

    --font-display: "Gloock", serif;
    --font-body: "Work Sans", sans-serif;
    --radius: 2px;

    --k1: #1F4FBF; --k1-ink: #F1F4FC;
    --k2: #BF3B2B; --k2-ink: #FBEEEC;
    --k3: #4A6B4F; --k3-ink: #EFF4F0;
    --k4: #EFE4C8; --k4-ink: #23252B;
    --k5: #153A8F; --k5-ink: #EDF1FA;
    --k6: #7A6650; --k6-ink: #F7F2EA;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #16171B; --surface: #1E2026; --surface-2: #2A2820;
        --ink: #EFEDE4; --ink-soft: #9B9CA3;
        --accent: #E0563F; --accent-deep: #BC3C28;
        --line: rgba(239, 237, 228, .18); --line-soft: rgba(239, 237, 228, .09);
        --k4: #6B5F3F; --k4-ink: #F7F2E4;
    }
}

:root[data-theme="dark"] {
    --bg: #16171B; --surface: #1E2026; --surface-2: #2A2820;
    --ink: #EFEDE4; --ink-soft: #9B9CA3;
    --accent: #E0563F; --accent-deep: #BC3C28;
    --line: rgba(239, 237, 228, .18); --line-soft: rgba(239, 237, 228, .09);
    --k4: #6B5F3F; --k4-ink: #F7F2E4;
}

:root[data-theme="light"] {
    --bg: #F4F2EA; --surface: #FFFDF6; --surface-2: #EFE4C8;
    --ink: #23252B; --ink-soft: #6E6F76;
    --accent: #BF3B2B; --accent-deep: #982C1E;
    --line: rgba(35, 37, 43, .2); --line-soft: rgba(35, 37, 43, .1);
    --k4: #EFE4C8; --k4-ink: #23252B;
}

/* ---- theme character: ruled index cards and a catalogue-blue accent ---- */

.lbl, .bd-facts dt, .brand-tagline, .zf label, .cover-author {
    font-family: "Courier Prime", monospace; letter-spacing: .16em;
}

.brand-mark { background: #1F4FBF; border-radius: 2px; }

/* Ruled paper behind the search panel and cards, as in the source design. */
.z-search, .featured, .bl, .post {
    background-image: repeating-linear-gradient(
        to bottom, transparent, transparent 27px, var(--line-soft) 27px, var(--line-soft) 28px
    );
}

.z-search { border-left: 3px solid #1F4FBF; }
.featured { border-left: 3px solid var(--accent); }

.stampline {
    background: transparent; color: var(--accent);
    border: 1.5px solid var(--accent); transform: rotate(-6deg);
    font-family: "Courier Prime", monospace;
}

.sort-link.is-active { text-decoration: underline; text-underline-offset: 4px; }
.pop:hover { background: var(--surface-2); }