/*
  Babylon theme -- "the hanging gardens". Glazed cobalt bricks and gold from
  the Ishtar Gate's processional way, the deep green of the gardens below.
  Reference design: the theme studio of 2026-10-03 (v4). Image sources:
  images/themes/CREDITS.md.

  Tokens below apply wherever data-theme="babylon" is set, including the
  small preview cards in Settings. Everything decorative (textures, bands,
  card glass) is scoped to html[data-theme="babylon"] so those previews
  stay plain and no image loads unless the theme is really active.
*/

[data-theme="babylon"] {
    color-scheme: dark;
    --color-primary: #d9b052;
    --color-primary-hover: #c99a3c;
    --color-primary-active: #b3862f;

    --color-secondary: #2f9fb0;
    --color-secondary-hover: #278896;

    --color-gold-accent: #d9b052;
    --color-accent-text: #e0bd6a;
    --color-info: #4fb8c6;
    --color-success: #6fae7a;
    /* Genre donut (statistics): four categorical hues, CVD-checked
       against this theme's card surface; a fifth slice is "other". */
    --color-chart-1: #d6ad4f;
    --color-chart-2: #3fb3a3;
    --color-chart-3: #6b93e0;
    --color-chart-4: #c8734f;
    --color-warning: #d9a441;
    --color-error: #e07a6a;

    --color-bg-paper: #0b1716;
    --color-bg-light: #102220;
    --color-bg-dark: #081311;
    --color-overlay-scrim: rgba(2, 8, 7, 0.66);
    --color-bg-card: #132522;
    --color-bg-reader: #0f1d1b;

    --color-text-primary: #eee7d3;
    --color-text-secondary: #b9c5b6;
    --color-text-muted: #8b9b8e;
    --color-text-disabled: #5b6a62;
    --color-text-on-dark: #f3ead2;

    --color-border: #24403a;

    --font-family-display: "Marcellus", Georgia, "Times New Roman", serif;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 30px -18px rgba(0, 0, 0, 0.8);
    --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 36px -18px rgba(0, 0, 0, 0.85);
    --shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* The garden at night: a faint turquoise glow from the pools below. */
html[data-theme="babylon"] body {
    background: transparent;
}

/* On <html>, not <body>: see WorldBackdrop in app.css. */
html[data-theme="babylon"] {
    background:
        radial-gradient(120% 60% at 50% 120%, rgba(47, 159, 176, 0.14), transparent 60%),
        radial-gradient(80% 40% at 100% 0%, rgba(217, 176, 82, 0.06), transparent 70%),
        var(--color-bg-paper);
    background-attachment: fixed;
}

/* The bar is a strip of the gate itself: the photographed glazed bricks,
   darkened for the navigation on top, closed by the gate's yellow band. */
html[data-theme="babylon"] .app-header {
    background:
        linear-gradient(180deg, rgba(5, 18, 36, 0.38), rgba(5, 18, 36, 0.66)),
        url("../../images/themes/babylon/glazed_bricks.webp") center 35% / 640px auto,
        #10305a;
    border-bottom: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

html[data-theme="babylon"] .app-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 8px;
    pointer-events: none;
    background: url("../../images/themes/babylon/gold_band.webp") center / auto 100% repeat-x;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

html[data-theme="babylon"] .app-logo-text {
    color: #e8c977;
    letter-spacing: 0.04em;
}

/* Cards are dark glass over the garden: translucent so the pictures and
   the night behind them show through, a gold hairline, a lit top edge and
   a long soft shadow instead of a solid coloured box. */
html[data-theme="babylon"] .book-card {
    background-color: rgba(19, 37, 34, 0.82);
    border-color: rgba(217, 176, 82, 0.2);
    box-shadow: var(--shadow-card);
}

html[data-theme="babylon"] .dashboard-stat,
html[data-theme="babylon"] .stats-card,
html[data-theme="babylon"] .settings-card,
html[data-theme="babylon"] .profile-card,
html[data-theme="babylon"] .world-card,
html[data-theme="babylon"] .world-surface,
html[data-theme="babylon"] .book-detail,
html[data-theme="babylon"] .lore-content,
html[data-theme="babylon"] .discover-section {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 38%),
        linear-gradient(160deg, rgba(20, 42, 39, 0.66), rgba(9, 22, 21, 0.58));
    border-color: rgba(217, 176, 82, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.07),
        0 1px 0 rgba(0, 0, 0, 0.35),
        0 24px 48px -28px rgba(0, 0, 0, 0.85);
}

/* The glass blur, except while a dialog is open inside the card: a
   backdrop-filter would make the card the containing block of the
   dialog's fixed overlay and trap it. */
html[data-theme="babylon"] .dashboard-stat:not(:has(.dialog-overlay)),
html[data-theme="babylon"] .stats-card:not(:has(.dialog-overlay)),
html[data-theme="babylon"] .settings-card:not(:has(.dialog-overlay)),
html[data-theme="babylon"] .profile-card:not(:has(.dialog-overlay)),
html[data-theme="babylon"] .world-card:not(:has(.dialog-overlay)),
html[data-theme="babylon"] .world-surface:not(:has(.dialog-overlay)),
html[data-theme="babylon"] .book-detail:not(:has(.dialog-overlay)),
html[data-theme="babylon"] .lore-content:not(:has(.dialog-overlay)),
html[data-theme="babylon"] .discover-section:not(:has(.dialog-overlay)) {
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}


/* ---------- Home hero: the lion of the processional way ---------- */
html[data-theme="babylon"] .home-hero-layer,
html[data-theme="babylon"] .home-hero-scrim {
    display: none;
}

html[data-theme="babylon"] .home-hero-world {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Mirrored so the lion strides into the open right half. */
html[data-theme="babylon"] .home-hero-world-image {
    position: absolute;
    inset: -4%;
    background: url("../../images/themes/babylon/lion_panel.webp") 62% 55% / cover;
    transform: scaleX(-1);
    filter: saturate(1.08) contrast(1.04);
}

html[data-theme="babylon"] .home-hero-world-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 22, 21, 0.94) 0%, rgba(8, 22, 21, 0.7) 32%, rgba(8, 22, 21, 0.05) 62%),
        linear-gradient(0deg, var(--color-bg-paper) 0%, rgba(8, 22, 21, 0) 42%);
}

html[data-theme="babylon"] .home-hero-motes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Wisteria hangs over the right half only, never over the heading, and
   sways at its own pace (plates from Witte, "Flora", 1868). */
html[data-theme="babylon"] .home-hero-flora {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

html[data-theme="babylon"] .home-hero-wisteria {
    position: absolute;
    top: -6px;
    aspect-ratio: 560 / 1455;
    background: url("../../images/themes/babylon/wisteria_purple.webp") top center / contain no-repeat;
    transform-origin: 50% 0;
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.45));
    animation: babylon-sway 11s ease-in-out infinite;
}

html[data-theme="babylon"] .home-hero-wisteria--a { right: 3%; width: 128px; }
html[data-theme="babylon"] .home-hero-wisteria--b { right: 15%; width: 84px; opacity: 0.92; transform: scaleX(-1); animation-duration: 8.5s; animation-delay: -3s; }
html[data-theme="babylon"] .home-hero-wisteria--c { right: 26%; width: 104px; transform: scaleX(-1); animation-duration: 12.5s; animation-delay: -6s; }
html[data-theme="babylon"] .home-hero-wisteria--d { right: 36%; width: 64px; opacity: 0.85; animation-duration: 9.6s; animation-delay: -1.5s; }

@keyframes babylon-sway {
    0%, 100% { rotate: -1.4deg; }
    50% { rotate: 1.6deg; }
}

html[data-theme="babylon"] .home-hero-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-1);
}

html[data-theme="babylon"] .home-hero-content h1 {
    color: #f3ead2;
}

html[data-theme="babylon"] .home-hero-eyebrow--babylon {
    display: block;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold-accent);
}

@media (max-width: 599.98px) {
    html[data-theme="babylon"] .home-hero-wisteria--a { right: -6px; width: 84px; }
    html[data-theme="babylon"] .home-hero-wisteria--b { right: 22%; width: 56px; }
    html[data-theme="babylon"] .home-hero-wisteria--c,
    html[data-theme="babylon"] .home-hero-wisteria--d { display: none; }
    html[data-theme="babylon"] .home-hero-world-shade {
        background: linear-gradient(0deg, rgba(8, 22, 21, 0.92) 8%, rgba(8, 22, 21, 0.55) 55%, rgba(8, 22, 21, 0.15));
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="babylon"] .home-hero-wisteria,
    html[data-theme="babylon"] .home-hero-rays {
        animation: none;
    }
}


/* ---------- Reading calendar: a wall of glazed tiles ---------- */
html[data-theme="babylon"] .calendar-heatmap {
    background: #0a1615;
    box-shadow: inset 0 0 0 1px rgba(217, 176, 82, 0.15), inset 0 6px 14px rgba(0, 0, 0, 0.6);
}

html[data-theme="babylon"] .calendar-cell {
    border-radius: 3px;
    background: #132524;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

html[data-theme="babylon"] .calendar-cell::before {
    display: none;
}

html[data-theme="babylon"] .calendar-weekdays {
    color: rgba(232, 222, 196, 0.6);
}

/* The day's tooltip: dark glazed glass with a gold rim. */
html[data-theme="babylon"] .calendar-tooltip {
    border-color: rgba(217, 176, 82, 0.4);
    background: rgba(9, 24, 23, 0.94);
    color: #efe6cc;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    backdrop-filter: blur(6px);
}

html[data-theme="babylon"] .calendar-tooltip span { color: #e3c06a; }
html[data-theme="babylon"] .calendar-tooltip small { color: rgba(232, 222, 196, 0.72); }
html[data-theme="babylon"] .calendar-cell.is-selected { outline-color: #f1d68a; }

/* Bevelled like the bricks of the gate: light top-left, shadow bottom-right. */
html[data-theme="babylon"] .calendar-cell--level-1 { background: linear-gradient(145deg, #1b5566, #12404e); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.16), inset -1px -1px 0 rgba(0, 0, 0, 0.35); }
html[data-theme="babylon"] .calendar-cell--level-2 { background: linear-gradient(145deg, #2584a0, #186579); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.16), inset -1px -1px 0 rgba(0, 0, 0, 0.35); }
html[data-theme="babylon"] .calendar-cell--level-3 { background: linear-gradient(145deg, #57cdd8, #2b9fb3); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.22), inset -1px -1px 0 rgba(0, 0, 0, 0.3); }
html[data-theme="babylon"] .calendar-cell--level-4 { background: linear-gradient(145deg, #f6d985, #c7943a); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45), inset -1px -1px 0 rgba(90, 60, 10, 0.4), 0 0 8px rgba(217, 176, 82, 0.35); }

/* ---------- Progress: water standing in a garden channel ----------
   Calm water, not a loading bar: a deep channel, a surface that is light
   on top and deep below, and -- only on the large bars -- one slow, soft
   glint that drifts across and then rests. Small cards in a grid stay
   still; dozens of synced shimmers would read as a loading screen. */
html[data-theme="babylon"] .book-card-progress,
html[data-theme="babylon"] .book-detail-progress-track,
html[data-theme="babylon"] .shelf-book-progress {
    background: rgba(2, 14, 22, 0.55);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(143, 224, 222, 0.08);
}

html[data-theme="babylon"] .book-card-progress-bar,
html[data-theme="babylon"] .book-detail-progress-fill,
html[data-theme="babylon"] .shelf-book-progress-bar {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(200, 245, 240, 0.55) 0%, rgba(200, 245, 240, 0) 45%),
        linear-gradient(90deg, #17707e, #2a9aab 70%, #46b9c4);
    box-shadow: 0 0 8px rgba(63, 182, 196, 0.28);
}

html[data-theme="babylon"] .book-detail-progress-fill::after,
html[data-theme="babylon"] .book-card-large .book-card-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 45%;
    background: linear-gradient(90deg, rgba(220, 252, 248, 0), rgba(220, 252, 248, 0.42) 50%, rgba(220, 252, 248, 0));
    transform: translateX(-110%);
    animation: babylon-glint 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes babylon-glint {
    0% { transform: translateX(-110%); }
    55%, 100% { transform: translateX(240%); }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="babylon"] .book-detail-progress-fill::after,
    html[data-theme="babylon"] .book-card-large .book-card-progress-bar::after {
        animation: none;
        opacity: 0;
    }
}

/* ---------- Studio dashboard (WorldDashboard) ---------- */

html[data-theme="babylon"] .world-card-head h2 {
    font-family: var(--font-family-display);
    color: #f3ead2;
}

html[data-theme="babylon"] .home-hero-lead {
    color: rgba(243, 234, 210, 0.85);
}

html[data-theme="babylon"] .home-hero-cta {
    background: linear-gradient(180deg, #e3bd62, #c99a3c);
    color: #1a1406;
    box-shadow: 0 10px 28px -10px rgba(217, 176, 82, 0.7);
}

html[data-theme="babylon"] .home-hero-cta-go {
    background: rgba(26, 20, 6, 0.12);
}

html[data-theme="babylon"] .world-goal-text b {
    color: #f3ead2;
}

/* ---------- Page banners (WorldBanner) ----------
   One picture per page (CREDITS.md); the plain rule is the fallback
   for a page without its own. */
html[data-theme="babylon"] .world-banner-image {
    background: url("../../images/themes/babylon/glazed_bricks.webp") center / 640px;
}

html[data-theme="babylon"] .world-banner[data-page="library"] .world-banner-image {
    background: url("../../images/themes/babylon/banner_ishtar_dragon.webp") 60% 46% / cover;
}

html[data-theme="babylon"] .world-banner[data-page="shelves"] .world-banner-image {
    background: url("../../images/themes/babylon/banner_nebuchadnezzar_cylinder.webp") 70% 50% / cover;
}

html[data-theme="babylon"] .world-banner[data-page="statistics"] .world-banner-image {
    background: url("../../images/themes/babylon/banner_cuneiform_stars.webp") 70% 50% / cover;
}

html[data-theme="babylon"] .world-banner[data-page="discover"] .world-banner-image {
    background: url("../../images/themes/babylon/banner_walls.webp") 70% 30% / cover;
}

html[data-theme="babylon"] .world-banner[data-page="projects"] .world-banner-image {
    background: url("../../images/themes/babylon/banner_tower_of_babel.webp") 50% 45% / cover;
}

html[data-theme="babylon"] .world-banner[data-page="profile"] .world-banner-image {
    background: url("../../images/themes/babylon/banner_babel_print.webp") 60% 40% / cover;
}

html[data-theme="babylon"] .world-banner[data-page="offline"] .world-banner-image {
    background: url("../../images/themes/babylon/banner_birs_nimrud.webp") 60% 60% / cover;
}

html[data-theme="babylon"] .world-banner[data-page="upload"] .world-banner-image {
    background: url("../../images/themes/babylon/lion_panel.webp") 60% 55% / cover;
}

html[data-theme="babylon"] .world-banner-shade {
    background: linear-gradient(90deg, rgba(8, 22, 21, 0.94) 0%, rgba(8, 22, 21, 0.72) 34%, rgba(8, 22, 21, 0.08) 68%);
}

html[data-theme="babylon"] .world-banner-content h1 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    color: #f3ead2;
}

html[data-theme="babylon"] .world-banner-eyebrow { color: var(--color-gold-accent); }
html[data-theme="babylon"] .world-banner-subtitle { color: rgba(243, 234, 210, 0.82); }

@media (max-width: 599.98px) {
    html[data-theme="babylon"] .world-banner-shade {
        background: linear-gradient(0deg, rgba(8, 22, 21, 0.9) 10%, rgba(8, 22, 21, 0.5) 60%, rgba(8, 22, 21, 0.15));
    }
}

/* ---------- Detail pages (WorldBackdrop) ---------- */
html[data-theme="babylon"] .world-backdrop-image {
    opacity: 0.8;
}

html[data-theme="babylon"] .world-backdrop-image--texture {
    inset: 0;
    background:
        radial-gradient(55% 90% at 78% 0%, rgba(217, 176, 82, 0.32), transparent 70%),
        radial-gradient(60% 80% at 15% 20%, rgba(47, 159, 176, 0.28), transparent 70%),
        #0b1716;
    filter: none;
    transform: none;
    opacity: 1;
}

html[data-theme="babylon"] .world-backdrop-shade {
    background: linear-gradient(180deg, rgba(8, 22, 21, 0.3) 0%, rgba(8, 22, 21, 0.62) 60%, rgba(8, 22, 21, 0.9) 100%);
}

/* Comments: light glass tiles, the composer as a glass card. */
html[data-theme="babylon"] .book-comment-item {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(217, 176, 82, 0.1);
}

html[data-theme="babylon"] .book-comments > .comment-form {
    background: linear-gradient(160deg, rgba(20, 42, 39, 0.7), rgba(9, 22, 21, 0.62));
    border-color: rgba(217, 176, 82, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.07), 0 24px 48px -28px rgba(0, 0, 0, 0.85);
}

html[data-theme="babylon"] .book-comments > p.text-muted {
    border-color: rgba(217, 176, 82, 0.2);
    background: rgba(255, 255, 255, 0.02);
}

/* Project, character, place and lore cards: translucent tiles without a
   blur (there can be dozens of them). */
html[data-theme="babylon"] .entity-card {
    background: linear-gradient(160deg, rgba(22, 46, 43, 0.62), rgba(10, 24, 23, 0.55));
    border-color: rgba(217, 176, 82, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.06), 0 16px 32px -22px rgba(0, 0, 0, 0.85);
}

/* Bookshelf styles (spec 2026-10-11 §4): wood, brass and light of the
   library shelf in this theme. */
[data-theme="babylon"] {
    --shelf-wood: #2a1a12;
    --shelf-wood-tint: rgba(20,30,70,.18);
    --shelf-brass-hi: #f0d27a;
    --shelf-brass: #c9a03e;
    --shelf-brass-lo: #86641c;
    --shelf-plaque-ink: #22170a;
    --shelf-light: rgba(255,190,110,.2);
    --shelf-room: transparent;
}