/* Design tokens + shared primitives.
 * Palette from the customer design: warm creams, maroon accent, muted olive.
 * Three themes via [data-theme]; base.html sets it from the user's saved prefs
 * (falling back to the model default, light). All colours come from these
 * variables so the reader re-themes by toggling the root attribute only.
 */

:root,
:root[data-theme="light"] {
    --bg: #faf4f4;
    --surface: #faf4f4;
    --ink: #2b2320;
    --ink-soft: #3e3932;
    --accent: #7a1f1f;
    --accent-ink: #fff;
    --olive: #6a6a3a;
    --line: #cdcac6;
    --tag-bg: #c3bfb6;

    /* Editor toolbar: a dark slab in every theme, so it needs its own pair rather
     * than --ink/--surface (those invert and would turn it white in the dark
     * theme). Only the CMS editor uses these. */
    --toolbar-bg: #2b2320;
    --toolbar-ink: #f0e9df;
}

:root[data-theme="dark"] {
    --bg: #17120e;
    --surface: #1f1813;
    --ink: #ece3d6;
    --ink-soft: #a2937f;
    --accent: #7a1f1f;
    --accent-ink: #fff;
    --olive: #9a9a5a;
    --line: #2c231b;
    --tag-bg: #2c231b;

    /* Lifted off --surface rather than darker than it: on an already-dark page
     * the slab has to read as raised, not as a hole. */
    --toolbar-bg: #2f251d;
    --toolbar-ink: #ece3d6;
}

:root[data-theme="sepia"] {
    --bg: #ece0c8;
    --surface: #f5ecd8;
    --ink: #43372a;
    --ink-soft: #7c6b52;
    --accent: #7a1f1f;
    --accent-ink: #fff;
    --olive: #6a6a3a;
    --line: #ddceb0;
    --tag-bg: #e2d3b4;
    --toolbar-bg: #43372a;
    --toolbar-ink: #f5ecd8;
}

/* ---------- layout tokens ----------
 * BREAKPOINT: 900px. Custom properties are illegal in media queries and there is
 * no build step, so the literal `width >= 900px` is repeated in every @media
 * rule. This comment is its only home — grep it before changing the number.
 */

:root {
    --measure: 640px;      /* phone / reading column */
    --measure-wide: 74rem; /* desktop content container */
    --gutter: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Literata, georgia, serif;
    -webkit-font-smoothing: antialiased;

    /* Stop the browser's pull-to-refresh from firing on downward swipes
     * (e.g. dismissing the reader settings sheet). */
    overscroll-behavior-y: contain;
}

a {
    color: inherit;
    text-decoration: none;
}

.app {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--gutter);
}

/* ---------- form-factor utilities ----------
 * The only sanctioned way to fork markup by form factor: one DOM, CSS
 * re-arranges it. Reach for these when the two designs are genuinely different
 * components — never to move the same content around, which is a job for grid
 * or order.
 *
 * Phone is the default, so .u-phone-only needs no rule of its own. The desktop
 * override uses `display: revert` rather than `block` so it restores whatever
 * display the element already had (flex/grid/block) instead of flattening it.
 * !important is needed on both: a component's own `display` (e.g. .btn) has the
 * same specificity and loads later, so without it source order decides instead
 * of this utility.
 */

.u-desktop-only { display: none !important; }

@media (width >= 900px) {
    .u-phone-only { display: none !important; }
    .u-desktop-only { display: revert !important; }
}

.back {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--accent);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

/* The session-less bootstrap page: one centred card, nothing else on screen.
 * Usually invisible — inside Telegram its script logs in and reloads before a
 * paint matters — so it only has to look right for the browser visitor it sends
 * to the bot. */
.bootstrap {
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bootstrap-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.bootstrap-text {
    max-width: 28ch;
    color: var(--ink-soft);
}

/* Cover placeholder shared by catalog + novel */
.cover-ph {
    font-size: 11px;
    color: var(--ink-soft);
    text-transform: uppercase;
}