/* Critical, render-blocking on purpose: everything here is either needed to
   avoid a flash of unstyled content on first paint (dark body background,
   the mobile tab bar's layout/backdrop) or is a couple of bytes not worth a
   second request. Anything that only matters after the page has already
   painted (page-transition animations, the nav progress bar, novel/note
   prose styles, offline-mode overrides) lives in global-deferred.css
   instead, loaded non-blocking — see the <link media="print" ...> trick
   in index.php's <head>. */
/* Theme tokens — RGB channels, so alpha still works: rgb(var(--c-white) / .06). These are the dark
   theme's values (the site's original look); html[data-theme="light"] below swaps them. Tailwind's
   `white`, `surface`, `surface-2` and `page` colors read these (tailwind.config.js), and inline
   styles / hand-written CSS use them directly. --c-white is the foreground *and* the overlay colour
   (text, hairlines, hover fills): white on dark, ink on light. A brand surface (violet button,
   badge ...) adds `.on-brand` to get real white back for everything inside it. */
:root {
    --c-white: 255 255 255;
    --c-surface: 17 17 19;
    --c-surface-2: 14 14 17;
    --c-surface-3: 23 23 31; /* dialogs / elevated cards */
    --c-page: 8 8 10;
    --c-page-2: 13 13 20; /* full-screen auth / setup backdrops */
    --c-page-3: 10 10 12; /* profile card well */
    --c-page-4: 6 6 7; /* avatar cut-out ring */
    --c-tint: 22 15 34; /* violet-tinted gradient start on cards */
    /* Accent / status text colours: the dark theme's pastels. Light swaps in darker shades of the same hues. */
    --c-violet-soft: 167 139 250;
    --c-violet-light: 196 181 253;
    --c-violet-lighter: 221 214 254;
    --c-green: 74 222 128;
    --c-emerald: 52 211 153;
    --c-red: 248 113 113;
    --c-red-light: 252 165 165;
    --c-rose: 251 113 133;
    --c-blue: 96 165 250;
    --c-amber: 251 191 36;
    --c-yellow: 250 204 21;
    --c-silver: 203 213 225;
    --c-purple: 192 132 252;
    --c-bronze: 217 119 6;
    --c-avatar: 28 28 34; /* initial-letter avatar fallback */
    --c-amber-tint: 34 26 12; /* novel banner gradient start */
    --c-peek: 16 16 18; /* the card 'sheet' peeking out behind grouped chapter cards */
    --c-pop: 22 22 26; /* hover popup panels */
}

/* Light theme: the same tokens, light values. --c-white becomes the ink colour, so every
   text-white/60, bg-white/5, border-white/10 ... in the markup turns into the matching ink tint.
   Everything that can't be expressed by these variables lives in light.css, which index.php only
   loads when the theme is light (theme-toggle.js loads it on the first switch). */
html[data-theme="light"] {
    color-scheme: light;
    --c-white: 24 24 33;
    --c-surface: 255 255 255;
    --c-surface-2: 250 250 252;
    --c-surface-3: 255 255 255;
    --c-page: 243 243 247;
    --c-page-2: 243 243 247;
    --c-page-3: 243 243 247;
    --c-page-4: 243 243 247;
    --c-tint: 245 240 255;
    --c-violet-soft: 124 58 237;
    --c-violet-light: 109 40 217;
    --c-violet-lighter: 91 33 182;
    --c-green: 21 128 61;
    --c-emerald: 5 150 105;
    --c-red: 220 38 38;
    --c-red-light: 185 28 28;
    --c-rose: 225 29 72;
    --c-blue: 37 99 235;
    --c-amber: 180 83 9;
    --c-yellow: 161 98 7;
    --c-silver: 100 116 139;
    --c-purple: 147 51 234;
    --c-bronze: 180 83 9;
    --c-avatar: 232 232 240;
    --c-amber-tint: 255 244 224;
    --c-peek: 226 226 233;
    --c-pop: 255 255 255;
}

.on-brand {
    --c-white: 255 255 255;
}

/* Header colour-scheme menu (assets/scripts/theme-toggle.js). The button shows the icon of the scheme in use: moon = Dark,
   sun = Light, drop = any of the colour schemes (Aqua, Rose ...); the menu under it lists them all, each with a swatch of what it
   looks like. */
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-scheme {
    display: none;
}

html[data-theme="light"] .theme-toggle .theme-icon-moon {
    display: none;
}

html[data-theme="light"] .theme-toggle .theme-icon-sun {
    display: block;
}

html[data-scheme] .theme-toggle .theme-icon-sun {
    display: none;
}

html[data-scheme] .theme-toggle .theme-icon-scheme {
    display: block;
}

.theme-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 10.75rem;
    padding: .375rem;
    border-radius: .875rem;
    background: rgb(var(--c-surface-2));
    border: 1px solid rgb(var(--c-white) / .09);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    /* below the nav (and the top banner), so a short screen scrolls the list instead of cutting it off */
    max-height: calc(100vh - 8.5rem);
    max-height: calc(100dvh - 8.5rem);
    overflow-y: auto;
    transform-origin: top right;
    animation: theme-menu-in .14s ease-out;
}

.theme-menu[hidden] {
    display: none;
}

@keyframes theme-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.97);
    }
}

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

.theme-menu-sep {
    height: 1px;
    margin: .3125rem .375rem;
    background: rgb(var(--c-white) / .09);
}

.theme-opt {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .5rem .625rem;
    border: 0;
    border-radius: .625rem;
    background: transparent;
    color: rgb(var(--c-white) / calc(var(--ta-b,0) + var(--ta-m,1) * .75));
    font-size: .8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.theme-opt:hover,
.theme-opt:focus-visible {
    background: rgb(var(--c-white) / .06);
    color: rgb(var(--c-white));
    outline: none;
}

.theme-opt:focus-visible {
    box-shadow: inset 0 0 0 2px rgb(var(--c-white) / .3);
}

.theme-opt[aria-checked="true"] {
    color: rgb(var(--c-white));
}

.theme-opt-name {
    flex: 1 1 auto;
}

.theme-opt-check {
    flex: none;
    width: .875rem;
    height: .875rem;
    opacity: 0;
}

.theme-opt[aria-checked="true"] .theme-opt-check {
    opacity: 1;
}

/* the swatches preview each scheme, so they are fixed colours whichever one is in use (a colour scheme's is its palette, set inline by
   the header: components/header/index.php) */
.theme-swatch {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    box-shadow: 0 0 0 1px rgb(var(--c-white) / .22);
}

.theme-swatch-dark {
    background: linear-gradient(135deg, #1c1c22 50%, #08080a 50%);
}

.theme-swatch-light {
    background: linear-gradient(135deg, #ffffff 50%, #f3f3f7 50%);
}

/* Set by theme-toggle.js for ~300ms while the theme flips, so colours glide instead of snapping. */
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease, stroke .25s ease, box-shadow .25s ease !important;
}

body {
    background-color: rgb(var(--c-page));
    color: rgb(var(--c-white));
}

a {
    text-decoration: none;
}

.page-h1-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile bottom tab bar (phones only) — visually prominent on first paint
   for phone-width viewports, so this stays blocking rather than risking a
   flash of an unstyled <nav> full of raw links. */
#mobile-tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    height: var(--mobile-tabbar-h, 4rem);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgb(var(--c-surface) / 0.95);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgb(var(--c-white) / 0.06);
}

#mobile-tabbar .tab-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: rgb(var(--c-white) / calc(var(--ta-b,0) + var(--ta-m,1) * 0.45));
    text-decoration: none;
    transition: color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

#mobile-tabbar .tab-item:active {
    color: rgb(var(--c-white) / calc(var(--ta-b,0) + var(--ta-m,1) * 0.85));
}

#mobile-tabbar .tab-item.is-active {
    color: rgb(var(--c-violet-soft));
}

#mobile-tabbar .tab-item > svg {
    width: 22px;
    height: 22px;
}

/* Profile avatar + zmio decoration overlay (mirrors the top bar). */
#mobile-tabbar .tab-avatar {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
}

#mobile-tabbar .tab-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

#mobile-tabbar .tab-avatar-deco {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    max-width: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#mobile-tabbar .tab-label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mobile-tabbar .tab-badge {
    position: absolute;
    top: 3px;
    left: calc(50% + 3px);
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    pointer-events: none;
}

/* Phones only — and publish the height so fixed bottom bars on
   other pages can dock above the tab bar. Kept last so it wins
   over the base `display:none` above. */
@media (max-width: 767.98px) {
    :root {
        --mobile-tabbar-h: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    body {
        padding-bottom: var(--mobile-tabbar-h, 0px);
    }

    #mobile-tabbar {
        display: flex;
    }
}

/* Review tag chips (components/reviews + assets/scripts/reviews.js), themed
   to the accent via --zmio-accent-rgb / --zmio-accent-light: set on :root in
   index.php's <head> for the viewer, and on #profile-reviews for the profile
   owner. The var() fallbacks are the default violet, so with no accent_color
   set the chips look exactly as before. */
.review-tag-pill {
    background-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), 0.1);
    border-color: rgba(var(--zmio-accent-rgb, 167, 139, 250), 0.2);
    color: var(--zmio-accent-light, rgba(221, 214, 254, 0.8));
}

/* Selected state of the write-a-review form's tag picker. */
.review-tag-chip-on {
    background-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), 0.2);
    border-color: rgba(var(--zmio-accent-rgb, 167, 139, 250), 0.4);
    color: var(--zmio-accent-light, #ddd6fe);
}

/* Text colors for the active review vote buttons (violet-300 icon / violet-200 count by default). */
.zmio-accent-text {
    color: var(--zmio-accent-light, #c4b5fd);
}

.zmio-accent-text-lt {
    color: var(--zmio-accent-light, #ddd6fe);
}

/* Highlight color for accent text that was Tailwind's violet-400 (home hero). */
.zmio-accent-text-soft {
    color: var(--zmio-accent-soft, #a78bfa);
}

/* Hover outlines that were Tailwind's violet-500 (cards, rows, tierlist button) follow the
   viewer's accent; same selectors as the utilities, loaded after output.css so they win.
   The fallback is violet-500's own rgb, so with no accent set nothing changes. */
.hover\:border-violet-500\/25:hover {
    border-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .25);
}

.hover\:border-violet-500\/30:hover {
    border-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .3);
}

/* ── Tailwind's violet utilities -> the viewer's accent ──────────────────────
   The site was built with hard-coded violet (text-violet-300/400, tints, borders,
   focus rings). These rules re-point every one of those utilities at the accent
   variables set in index.php's <head>; each fallback is the utility's original
   value, so with no accent set nothing changes. Same selectors as the utilities
   and loaded after output.css, so they win without touching any markup (and they
   cover the JS-built HTML too). Add a line here before using a new violet-* class.
   Two scripts still look these classes up by name (reader.js: .bg-violet-900/30,
   edit-profile.js: .border-violet-400 / .bg-violet-500/15), so the names stay. */
.text-violet-300 {
    color: var(--zmio-accent-light, #c4b5fd);
}

.text-violet-300\/70 {
    color: rgba(var(--zmio-accent-light-rgb, 196, 181, 253), .7);
}

.text-violet-400 {
    color: var(--zmio-accent-soft, #a78bfa);
}

.hover\:text-violet-300:hover {
    color: var(--zmio-accent-light, #c4b5fd);
}

.bg-violet-400 {
    background-color: var(--zmio-accent-soft, #a78bfa);
}

.bg-violet-500\/10 {
    background-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .1);
}

.bg-violet-500\/15 {
    background-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .15);
}

.bg-violet-900\/30 {
    background-color: rgba(var(--zmio-accent-deep-rgb, 76, 29, 149), .3);
}

.border-violet-400 {
    border-color: var(--zmio-accent-soft, #a78bfa);
}

.border-violet-500\/15 {
    border-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .15);
}

.border-violet-500\/20 {
    border-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .2);
}

.border-violet-500\/25 {
    border-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .25);
}

.border-violet-500\/40 {
    border-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .4);
}

.focus\:border-violet-500\/40:focus {
    border-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .4);
}

.focus\:border-violet-500\/50:focus {
    border-color: rgba(var(--zmio-accent-rgb, 139, 92, 246), .5);
}

.accent-violet-500 {
    accent-color: var(--zmio-accent, #8b5cf6);
}