/* ==========================================================================
   CSS Architecture for "Kekse im Iran"
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens & State Machine Variables
   -------------------------------------------------------------------------- */
:root {
    /* Core Typography */
    --font-latin: 'IBM Plex Sans', sans-serif;
    --font-arabic: 'IBM Plex Arabic', sans-serif;
    
    /* Base Font Sizing */
    --text-base: 1.125rem;
    --text-h1: 2.5rem;
    
    /* Fluid (Past) vs Restricted (Present) Properties */
    --line-height-fluid: 1.6;
    --line-height-restricted: 1.3;
    --container-max-width-fluid: 680px;
    --container-max-width-restricted: 500px;

    /* Theme: Light (Default) */
    --color-bg-light: #f7f5f0; /* Dusty, warm off-white */
    --color-text-light: #1a1a1a; /* Warm espresso-black */
    --color-accent-light: #b5651d; /* Dusty terracotta/gold */
    --color-bg-light-cold: #ffffff; /* Harsh paper-white */
    --color-text-light-cold: #000000; /* Pure digital black */

    /* Theme: Dark */
    --color-bg-dark: #1e1e1e; /* Rich charcoal */
    --color-text-dark: #f0ecd8; /* Soft cream */
    --color-accent-dark: #d4a373; /* Warm dust */
    --color-bg-dark-cold: #000000; /* Pitch black */
    --color-text-dark-cold: #ffffff; /* Glaring white */

    /* Structural / Layout */
    --margin-fluid: 2rem;
    --margin-restricted: 1rem;
    
    /* Drawer */
    --drawer-width: 350px;
    --z-index-topbar: 2500;
    --z-index-drawer: 2000;
    --z-index-overlay: 1500;
}

/* --------------------------------------------------------------------------
   2. State Machine Implementation
   -------------------------------------------------------------------------- */

/* Default: Light Theme */
body {
    --current-bg: var(--color-bg-light);
    --current-text: var(--color-text-light);
    --current-accent: var(--color-accent-light);
    --current-accent-rgb: 181, 101, 29;
    --current-margin: var(--margin-fluid);
    --current-max-width: var(--container-max-width-fluid);
    --current-line-height: var(--line-height-fluid);
    --current-text-align: justify;
    --site-easing: cubic-bezier(0.4, 0, 0.2, 1);
    color-scheme: light;
}

body[data-theme="dark"] {
    --current-bg: var(--color-bg-dark);
    --current-text: var(--color-text-dark);
    --current-accent: var(--color-accent-dark);
    --current-accent-rgb: 212, 163, 115;
    --current-margin: var(--margin-fluid);
    --current-max-width: var(--container-max-width-fluid);
    --current-line-height: var(--line-height-fluid);
    --current-text-align: justify;
    color-scheme: dark;
}

.chapter {
    width: 100%;
    padding: 6rem var(--current-margin);
    background-color: var(--current-bg);
    color: var(--current-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.chapter[data-tense="present"] {
    --current-bg: var(--color-bg-light-cold);
    --current-text: var(--color-text-light-cold);
    --current-accent: #7f8c8d; /* Dead flat gray */
    --current-margin: var(--margin-restricted);
    --current-max-width: var(--container-max-width-restricted);
    --current-line-height: var(--line-height-restricted);
    --current-text-align: left;
}

body[data-theme="dark"] .chapter[data-tense="present"] {
    --current-bg: var(--color-bg-dark-cold);
    --current-text: var(--color-text-dark-cold);
    --current-accent: #5e6b73; /* Dead flat gray */
    --current-margin: var(--margin-restricted);
    --current-max-width: var(--container-max-width-restricted);
    --current-line-height: var(--line-height-restricted);
    --current-text-align: left;
}

/* RTL Override */
html[dir="rtl"] {
    font-family: var(--font-arabic);
}

/* Mobile Typography & Spacing Optimization */
@media (max-width: 768px) {
    :root {
        --text-base: 1.0625rem; /* 17px - better for narrow columns */
        --text-h1: 1.85rem;    /* Prevents excessive wrapping of chapter titles */
        --line-height-restricted: 1.4; /* Slightly more air for mobile restricted state */
    }

    /* Disable native pinch-zoom; main.js converts pinch into font-size scaling.
       Smaller root font on mobile sets a tighter default; pinch can scale up. */
    html {
        touch-action: pan-x pan-y;
        font-size: 12px;
    }

    #manuscript-container h1 {
        margin-top: 2.5rem;
        margin-bottom: 1.5rem;
    }

    #manuscript-container p {
        margin-bottom: 1.25rem;
    }

    #manuscript-container h1,
    #manuscript-container p,
    .discuss-wrapper {
        padding: 0 1.25rem; /* Slightly less padding on mobile to give text more room */
    }
}

/* --------------------------------------------------------------------------
   3. Base Styles & Reset
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-latin);
    font-size: var(--text-base);
    line-height: var(--line-height-fluid);
    background-color: var(--current-bg);
    color: var(--current-text);
    overflow-x: hidden;
}

#hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url('Pics/1.jpg?v=2');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

@media (max-width: 768px) {
    #hero {
        background-attachment: scroll;
        background-image: url('Pics/mobile/1.jpg?v=2');
    }
}

#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.hero-content {
    position: relative;
    z-index: 10;
}

#hero h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    text-transform: uppercase;
    color: var(--color-text-dark); /* Soft cream for both views */
}

.subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    opacity: 0.9;
    color: var(--color-text-dark);
}

.hero-cta {
    position: absolute;
    top: calc(60px + 1.5rem); /* clear the fixed 60px top bar */
    right: 3rem;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6rem 1.4rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-dark);
    background: transparent;
    border: 1.5px solid var(--current-accent);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.hero-cta:hover,
.hero-cta:focus-visible {
    background: var(--current-accent);
    color: #1e1e1e;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .hero-cta {
        top: 1rem; /* no fixed top bar on mobile */
        right: 1.5rem;
    }
}

html[dir="rtl"] .hero-cta {
    right: auto;
    left: 3rem;
}

@media (max-width: 768px) {
    html[dir="rtl"] .hero-cta {
        left: 1.5rem;
    }
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.8;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
}

/* --------------------------------------------------------------------------
   5. Smart Top Bar
   -------------------------------------------------------------------------- */
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--current-bg);
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(1.5rem / var(--zoom, 1));
    z-index: var(--z-index-topbar);
    transition: transform 0.3s ease;
}

#top-bar.hidden {
    transform: translateY(-100%);
}

.top-bar-left, .top-bar-center, .top-bar-right {
    display: flex;
    align-items: center;
    gap: calc(1.5rem / var(--zoom, 1));
}

/* Counter-scale the nav chrome: main.js sets --zoom = currentRoot / baseRoot
   when pinch-zoom changes the root font-size. Dividing these rem sizes by it
   cancels the zoom for the menu only, so just the manuscript text rescales.
   At default zoom --zoom is 1, so appearance is unchanged. */
#top-bar button {
    font-size: calc(0.9rem / var(--zoom, 1));
}
#top-bar #book-title {
    font-size: calc(var(--text-base) / var(--zoom, 1));
}
#top-bar select {
    padding: calc(0.25rem / var(--zoom, 1)) calc(0.5rem / var(--zoom, 1));
}

.top-bar-center {
    display: none; /* Hide on smaller screens */
}

#book-title {
    font-weight: bold;
    cursor: pointer;
}

@media (min-width: 768px) {
    .top-bar-center { display: flex; }
}

#bottom-bar {
    display: none;
}

@media (max-width: 768px) {
    #bottom-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: var(--current-bg);
        border-top: 1px solid rgba(128, 128, 128, 0.2);
        justify-content: space-around;
        align-items: center;
        padding: 0 calc(1rem / var(--zoom, 1));
        z-index: var(--z-index-topbar);
        transition: transform 0.3s ease;
    }

    #bottom-bar.hidden {
        transform: translateY(100%);
    }

    /* Four tabs no longer fit as plain UPPERCASE words (DE "KOMMENTARE" overflows
       a ~360px phone). Stack a glyph above a small caption per tab instead. The
       icon is a ::before pseudo-element, so main.js's textContent label updates
       leave it untouched. Bar height stays 60px so #mini-player { bottom: 60px }
       remains valid. */
    #bottom-bar .nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        min-width: 0;
        /* override global button: uppercase + 0.9rem + letter-spacing is too wide */
        /* counter-scaled (see --zoom note) so pinch-zoom leaves the tab bar fixed */
        font-size: calc(0.72rem / var(--zoom, 1));
        letter-spacing: 0;
        text-transform: none;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* One cohesive icon family (Feather, 24x24, stroke-width 2, round caps)
       instead of mismatched color emoji. Rendered as a mask over currentColor
       so the glyph is monochrome and follows the light/dark text color. */
    #bottom-bar .nav-btn::before {
        content: "";
        width: 26px;
        height: 26px;
        background-color: currentColor;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    #btn-audio-mobile::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
    }
    #btn-comments-mobile::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
    }
    #btn-support-mobile::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    }
    #btn-contact-mobile::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E");
    }

    #main-content {
        padding-bottom: 80px; /* Space for bottom bar */
    }
}

button, .nav-link {
    background: none;
    border: none;
    color: var(--current-text);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: color 0.3s ease;
}

button:hover, .nav-link:hover {
    color: var(--current-accent);
}

select {
    background-color: var(--current-bg);
    border: 1px solid var(--current-text);
    color: var(--current-text);
    padding: 0.25rem 0.5rem;
    font-family: inherit;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   6. Manuscript Container & Typography
   -------------------------------------------------------------------------- */
#page-wrapper {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#main-content {
    display: flex;
    justify-content: center;
    padding: 0;
}

#page-wrapper.drawer-open-fullscreen {
    transform: translateX(-100vw);
}
html[dir="rtl"] #page-wrapper.drawer-open-fullscreen {
    transform: translateX(100vw);
}
/* While any drawer is open the page is translated off-screen; lock body scroll
   so wheel/touch input can't move the (hidden) page behind the drawer. The
   scroll position is retained, so closing the drawer lands you where you left. */
body.drawer-open-fullscreen {
    overflow: hidden;
}

#manuscript-container {
    width: 100%;
}

#manuscript-container h1, 
#manuscript-container p, 
#manuscript-container ul,
#manuscript-container .discuss-wrapper {
    width: 100%;
    max-width: var(--current-max-width);
    line-height: var(--current-line-height);
}

#manuscript-container h1 {
    font-size: var(--text-h1);
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-weight: 600;
    scroll-margin-top: 80px; /* Offset for the smart top-bar */
}

#manuscript-container h1:first-child {
    margin-top: 0;
}

#manuscript-container p {
    margin-bottom: 1.5rem;
    text-align: var(--current-text-align);
    hyphens: auto;
    -webkit-hyphens: auto;
}

@media (max-width: 768px) {
    #manuscript-container p {
        text-align: start;
    }
}

#manuscript-container ul {
    margin-bottom: 1.5rem;
    padding-inline-start: 1.5rem;
}

#manuscript-container li {
    margin-bottom: 0.5rem;
}

.airlock {
    width: 100%;
    height: 100vh;
    background-image: var(--bg-desktop);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--current-bg);
    background-attachment: fixed;
    cursor: zoom-in;
    transition: opacity 0.5s ease;
}

@media (max-width: 768px) {
    .airlock {
        background-image: var(--bg-mobile);
        background-attachment: scroll;
    }
}

.airlock-portrait {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--current-bg); 
}

/* --------------------------------------------------------------------------
   8. Lightbox for Photos
   -------------------------------------------------------------------------- */
#lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: zoom-out;
}

#lightbox.visible {
    display: flex;
    opacity: 1;
}

#lightbox img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

#lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
}

.discuss-wrapper {
    margin-top: 3rem;
    margin-bottom: 1rem;
    text-align: end;
}

.discuss-btn {
    border: none;
    padding: 0.5rem 0;
    font-size: 0.8rem;
    color: var(--current-text);
    opacity: 0.4;
    transition: opacity 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.discuss-btn:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   7. Mechanical Drawers
   -------------------------------------------------------------------------- */
.drawer {
    position: fixed;
    top: 0;
    padding-top: 60px; /* Offset for top-bar */
    /* Logical property: right for LTR, left for RTL */
    inset-inline-end: calc(-1 * var(--drawer-width));
    width: var(--drawer-width);
    height: 100dvh;
    background-color: var(--current-bg);
    border-inline-start: 1px solid rgba(128, 128, 128, 0.2);
    z-index: var(--z-index-drawer);
    transition: inset-inline-end 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.drawer.fullscreen {
    width: 100vw;
    inset-inline-end: -100vw;
}

/* The support drawer carries longer, narrative copy. Give it more horizontal
   room on desktop so the text does not get squeezed into a tall ribbon.
   Overriding --drawer-width (not just width) keeps the hidden/open offsets,
   which are derived from the variable, in sync. Scoped to #drawer-support so
   the comments and audio drawers stay at the default width. */
@media (min-width: 768px) {
    #drawer-support,
    #drawer-contact {
        --drawer-width: 460px;
    }
}

.drawer.open {
    inset-inline-end: 0;
}

#drawer-book {
    inset-inline-end: auto;
    inset-inline-start: calc(-1 * var(--drawer-width));
    border-inline-start: none;
    border-inline-end: 1px solid rgba(128, 128, 128, 0.2);
    transition: inset-inline-start 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#drawer-book.open {
    inset-inline-start: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 1rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.drawer-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.75;
}

.close-drawer {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    padding: 0 0.25rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.close-drawer:hover,
.close-drawer:focus-visible {
    opacity: 1;
}

.drawer-content {
    padding: 1.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    /* Keep scrolling contained to this drawer: stop the leftover scroll from
       chaining to the page body once we hit the top/bottom edge. */
    overscroll-behavior: contain;
    flex-grow: 1;
}

#drawer-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: var(--z-index-overlay);
    opacity: 0;
    pointer-events: none;
}

#drawer-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Chapter Index Links */
.chapter-link {
    display: block;
    padding: 0.75rem 0;
    color: var(--current-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    transition: color 0.3s ease;
}
.chapter-link:hover {
    color: var(--current-accent);
}

/* --------------------------------------------------------------------------
   9. Progress Indicator
   -------------------------------------------------------------------------- */
#progress-indicator {
    position: fixed;
    z-index: 2800; /* Above topbar but below drawers */
    display: flex;
    gap: 2px;
}

body.drawer-open-fullscreen #progress-indicator {
    display: none;
}

/* Mobile: Vertical line of segments on the start side */
@media (max-width: 768px) {
    #progress-indicator {
        top: 100px; /* Fixed distance to avoid sliding on scroll */
        inset-inline-start: 10px;
        transform: none;
        flex-direction: column;
        gap: 3px;
    }
    
    .progress-segment {
        width: 4px;
        height: 15px;
        background-color: rgba(128, 128, 128, 0.2);
        cursor: pointer;
        transition: background-color 0.3s, height 0.3s;
        border-radius: 2px;
        position: relative;
    }
    
    /* Increase tap target area for mobile */
    .progress-segment::after {
        content: '';
        position: absolute;
        top: -4px;
        bottom: -4px;
        left: -15px;
        right: -15px;
    }
    
    .progress-segment.active {
        background-color: var(--current-accent);
        height: 22px;
    }
    
    .progress-segment.passed {
        background-color: var(--current-accent);
        opacity: 0.6;
    }
    
    body[data-state="present"] .progress-segment.active, 
    body[data-state="present"] .progress-segment.passed {
        background-color: #7f8c8d; /* Match present light accent */
    }
    
    body[data-theme="dark"][data-state="present"] .progress-segment.active, 
    body[data-theme="dark"][data-state="present"] .progress-segment.passed {
        background-color: #5e6b73; /* Match present dark accent */
    }
    
    /* Tooltip for mobile on press */
    .progress-segment::before {
        content: attr(data-title);
        position: absolute;
        inset-inline-start: 35px; /* Moved further right to clear the finger */
        top: 50%;
        transform: translateY(-50%) scale(0.9);
        background-color: var(--current-bg);
        color: var(--current-text);
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.05s ease-out, transform 0.05s ease-out; /* Much faster appearance */
        border: 1px solid rgba(128, 128, 128, 0.2);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        z-index: 2900;
    }
    
    .progress-segment:active::before,
    .progress-segment.touch-active::before {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* Desktop: Vertical line of segments on the end side */
@media (min-width: 769px) {
    #progress-indicator {
        top: 50%;
        inset-inline-end: 20px;
        transform: translateY(-50%);
        flex-direction: column;
        gap: 6px;
    }

    .progress-segment {
        width: 6px;
        height: 22px;
        background-color: rgba(128, 128, 128, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 3px;
        position: relative;
    }

    .progress-segment:hover {
        background-color: var(--current-accent);
        width: 10px;
    }

    .progress-segment.active {
        background-color: var(--current-accent);
        height: 34px;
    }
    
    .progress-segment.passed {
        background-color: var(--current-accent);
        opacity: 0.6;
    }
    
    body[data-state="present"] .progress-segment.active,
    body[data-state="present"] .progress-segment.passed {
        background-color: #7f8c8d; /* Match present light accent */
    }
    
    body[data-theme="dark"][data-state="present"] .progress-segment.active,
    body[data-theme="dark"][data-state="present"] .progress-segment.passed {
        background-color: #5e6b73; /* Match present dark accent */
    }
    
    body[data-state="present"] .progress-segment:hover {
        background-color: #7f8c8d;
    }
    
    body[data-theme="dark"][data-state="present"] .progress-segment:hover {
        background-color: #5e6b73;
    }
    
    /* Tooltip for desktop */
    .progress-segment::before {
        content: attr(data-title);
        position: absolute;
        inset-inline-end: 15px; /* Distance from the segment */
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--current-bg);
        color: var(--current-text);
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 0.9rem;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s, transform 0.3s;
        border: 1px solid rgba(128, 128, 128, 0.2);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .progress-segment:hover::before {
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   N. Comments UI (drawer-comments content)
   -------------------------------------------------------------------------- */
/* Comments: density + polish.
   The single most impactful rule is `.comments-root { font-size: 0.9rem }` —
   the subtree uses em-based sizes, so shrinking the root cascades everywhere. */
.comments-root {
    font-size: 0.9rem;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 720px;
    margin-inline: auto;
}

.comments-main,
.comments-compose {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

@media (min-width: 1024px) {
    .comments-root {
        max-width: 1100px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
        column-gap: 2.25rem;
        align-items: start;
    }
    .comments-root > .comments-main {
        grid-column: 1;
        grid-row: 1;
    }
    .comments-root > .comments-compose {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        position: sticky;
        top: 1.25rem;
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
    }
}

.comments-switcher {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 8px;
    background: rgba(128, 128, 128, 0.04);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
                0 6px 18px -10px rgba(0, 0, 0, 0.06);
}
body[data-theme="dark"] .comments-switcher {
    background: rgba(128, 128, 128, 0.06);
}
.comments-switcher .chapter-select-label {
    font-weight: 600;
    opacity: 0.85;
}
.comments-switcher .chapter-select {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.55rem;
    background: var(--current-bg);
    color: var(--current-text);
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 6px;
    font: inherit;
    transition: border-color 0.2s var(--site-easing),
                background-color 0.2s var(--site-easing),
                box-shadow 0.2s var(--site-easing);
}

.comments-identity[hidden] { display: none; }
.comments-identity {
    padding: 0.45rem 0.65rem;
    background: rgba(128, 128, 128, 0.08);
    border-radius: 6px;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.comments-identity .identity-name { font-weight: 600; }

.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    height: 1em;
    padding: 0 0.25em;
    border-radius: 999px;
    background: var(--current-accent);
    color: var(--current-bg);
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.comments-loading, .comments-empty, .comments-error {
    padding: 1rem;
    text-align: center;
    opacity: 0.7;
}
.comments-empty {
    padding: 1.2rem 1rem;
    opacity: 0.65;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.comments-empty-icon {
    opacity: 0.5;
    color: var(--current-accent);
}
.comments-error { color: #b00; opacity: 1; }

.comments-load-more {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: none;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 6px;
    color: var(--current-text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.comments-load-more:hover:not(:disabled) { background: rgba(128, 128, 128, 0.08); }
.comments-load-more:disabled { opacity: 0.5; cursor: wait; }

.comment-group {
    padding-block: 0.2rem 0.35rem;
}
.comment-group + .comment-group {
    border-top: 1px solid rgba(128, 128, 128, 0.1);
    margin-top: 0.55rem;
    padding-top: 0.55rem;
}

.comment {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.65rem;
    row-gap: 0.1rem;
    align-items: start;
    padding: 0.3rem 0.45rem 0.3rem 0.7rem;
    border-inline-start: 2px solid var(--current-accent);
    border-radius: 0 4px 4px 0;
    transition: background-color 0.2s var(--site-easing);
}
.comment:hover { background: rgba(128, 128, 128, 0.04); }
.comment + .comment { margin-top: 0.35rem; }
.comment.comment-reply {
    margin-inline-start: 1.1rem;
    border-inline-start: 1px solid rgba(128, 128, 128, 0.22);
    padding-inline-start: 0.65rem;
}

.comment-avatar {
    grid-row: 1 / span 2;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 0.82rem / 1 'IBM Plex Sans', sans-serif;
    background-color: var(--current-accent);
    background-image: linear-gradient(
        135deg,
        hsl(var(--avatar-hue, 30), 38%, 65%),
        hsl(calc(var(--avatar-hue, 30) + 30), 48%, 52%)
    );
    color: var(--current-bg);
    user-select: none;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
}
.comment-avatar[data-color="none"] {
    background: rgba(128, 128, 128, 0.12);
    color: rgba(128, 128, 128, 0.5);
    box-shadow: inset 0 0 0 1.5px rgba(128, 128, 128, 0.3);
}

.comment-reply .comment-avatar {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.72rem;
}

.comment-head {
    grid-column: 2;
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
    flex-wrap: wrap;
}
.comment-author { font-weight: 600; }
.comment-time {
    opacity: 0.55;
    font-size: 0.78em;
}

.comment-body {
    grid-column: 2;
    margin: 0.2rem 0 0.15rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    line-height: 1.5;
}
.comment-body a {
    color: var(--current-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.comment-actions {
    grid-column: 2;
    display: flex;
    gap: 0.2rem;
    flex-wrap: wrap;
    margin-top: 0.05rem;
    margin-inline-start: -0.3rem; /* offset the button's small padding so the row left-aligns to body */
}
.comment-actions button {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 0.05rem 0.3rem;
    font: inherit;
    font-size: 0.78em; /* match .comment-time — these are metadata, not controls */
    cursor: pointer;
    opacity: 0.5;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    transition: background-color 0.2s var(--site-easing),
                opacity 0.2s var(--site-easing);
}
.comment-actions button:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.1);
}

/* Form */
.comments-root input:focus-visible,
.comments-root textarea:focus-visible,
.comments-root select:focus-visible,
.comment-actions button:focus-visible,
.comments-verify-modal input:focus-visible {
    outline: 2px solid var(--current-accent);
    outline-offset: 1px;
}

.form-field input:not([type="checkbox"]):focus-visible,
.form-field textarea:focus-visible,
.verify-code-input:focus-visible {
    outline: none;
    border-color: var(--current-accent);
    box-shadow: 0 0 0 3px rgba(var(--current-accent-rgb, 181, 101, 29), 0.18);
}

.comment-form,
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 8px;
    background: rgba(128, 128, 128, 0.04);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03),
                0 6px 18px -10px rgba(0, 0, 0, 0.06);
}
body[data-theme="dark"] .comment-form,
body[data-theme="dark"] .contact-form { background: rgba(128, 128, 128, 0.06); }
.comment-form .hp,
.contact-form .hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.form-field > span { font-weight: 600; opacity: 0.85; font-size: 0.88em; }
.form-field input:not([type="checkbox"]),
.form-field textarea,
.verify-code-input {
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 6px;
    background: var(--current-bg);
    color: var(--current-text);
    font: inherit;
    width: 100%;
    transition: border-color 0.2s var(--site-easing),
                background-color 0.2s var(--site-easing),
                box-shadow 0.2s var(--site-easing);
}
.form-field textarea { resize: vertical; min-height: 3.75rem; line-height: 1.5; }
.form-field-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.form-field-checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--current-accent);
    cursor: pointer;
}
.form-field-checkbox > span { font-weight: 400; flex: 1; min-width: 0; }
.form-field-checkbox.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.form-field-checkbox.is-disabled input[type="checkbox"] { cursor: not-allowed; }
.form-hint {
    opacity: 0.7;
    font-size: 0.82em;
    line-height: 1.4;
}
.form-reply-indicator[hidden] { display: none; }
.form-reply-indicator {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.35rem 0.55rem;
    background: rgba(var(--current-accent-rgb, 181, 101, 29), 0.08);
    border-inline-start: 2px solid var(--current-accent);
    border-radius: 4px;
    font-size: 0.88em;
}
.form-reply-indicator button {
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.35);
    color: inherit;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.82em;
    cursor: pointer;
    margin-inline-start: auto;
    opacity: 0.75;
    transition: background-color 0.2s var(--site-easing),
                opacity 0.2s var(--site-easing);
}
.form-reply-indicator button:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.1);
}
.form-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.comment-form button[type="submit"],
.contact-form button[type="submit"],
.verify-submit {
    background: var(--current-accent);
    color: var(--current-bg);
    border: none;
    padding: 0.45rem 0.95rem;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s var(--site-easing),
                box-shadow 0.2s var(--site-easing),
                opacity 0.2s var(--site-easing);
}
.comment-form button[type="submit"]:hover:not(:disabled),
.contact-form button[type="submit"]:hover:not(:disabled),
.verify-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(var(--current-accent-rgb, 181, 101, 29), 0.25);
}
.comment-form button[type="submit"]:active:not(:disabled),
.contact-form button[type="submit"]:active:not(:disabled),
.verify-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.comment-form button[type="submit"]:disabled,
.contact-form button[type="submit"]:disabled,
.verify-submit:disabled { opacity: 0.5; cursor: wait; }

/* Contact drawer */
.contact {
    max-width: 34rem;
    margin: 0 auto;
}
.contact-form button[type="submit"] { align-self: center; }
.verify-cancel {
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.35);
    color: inherit;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.2s var(--site-easing);
}
.verify-cancel:hover { background: rgba(128, 128, 128, 0.1); }
.form-status, .verify-status {
    font-size: 0.82em;
    opacity: 0.8;
    min-height: 1.1em;
}
.form-status.error, .verify-status.error {
    color: #b00;
    opacity: 1;
}
.form-footer { font-size: 0.82em; opacity: 0.7; }
.form-footer a { color: inherit; text-decoration: underline; }

/* Verify modal */
.comments-verify-modal[hidden] { display: none; }
.comments-verify-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.comments-verify-box {
    background: var(--current-bg);
    color: var(--current-text);
    border-radius: 10px;
    padding: 1.05rem 1.05rem 0.85rem;
    max-width: 380px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.verify-code-input {
    font-size: 1.25rem;
    letter-spacing: 0.4em;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    box-shadow: inset 0 -2px 0 rgba(var(--current-accent-rgb, 181, 101, 29), 0.25);
}
.verify-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.verify-countdown {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: rgba(128, 128, 128, 0.8);
    min-width: 3.5ch;
}
.verify-resend {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    color: var(--color-accent, #b5651d);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.verify-resend:hover { opacity: 0.75; }
.verify-resend:disabled { opacity: 0.4; cursor: wait; }

/* Report modal — mirrors verify modal layout */
.comments-report-modal[hidden] { display: none; }
.comments-report-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.comments-report-box {
    background: var(--current-bg);
    color: var(--current-text);
    border-radius: 10px;
    padding: 1.05rem 1.05rem 0.85rem;
    max-width: 380px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.report-status {
    font-size: 0.8rem;
    color: rgba(128, 128, 128, 0.8);
    min-height: 1.1em;
    display: block;
}
.report-status.error { color: #c0392b; }

/* Comment skeleton (loading state) */
.comment-skeleton {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.65rem;
    row-gap: 0.35rem;
    align-items: start;
    padding: 0.3rem 0.45rem 0.3rem 0.7rem;
    border-inline-start: 2px solid rgba(128, 128, 128, 0.2);
    border-radius: 0 4px 4px 0;
}
.comment-skeleton + .comment-skeleton { margin-top: 0.35rem; }
.comment-skeleton-avatar {
    grid-row: 1 / span 2;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.18);
}
.comment-skeleton-line {
    grid-column: 2;
    height: 0.7rem;
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.15);
}
.comment-skeleton-line.short { width: 35%; }
.comment-skeleton-line.long { width: 80%; height: 0.85rem; }

/* Motion: kept lean and gated behind prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes commentFadeIn {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes modalBackdropFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes modalBoxIn {
        from { opacity: 0; transform: scale(0.96); }
        to { opacity: 1; transform: scale(1); }
    }
    @keyframes replyIndicatorIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes skeletonShimmer {
        0% { background-position: -200px 0; }
        100% { background-position: calc(200px + 100%) 0; }
    }

    .comment.is-new {
        animation: commentFadeIn 0.28s var(--site-easing) both;
    }
    /* Light cascade for initial load: stagger up to 5 comments so they fan in. */
    .comment.is-new:nth-child(1) { animation-delay: 0ms; }
    .comment.is-new:nth-child(2) { animation-delay: 40ms; }
    .comment.is-new:nth-child(3) { animation-delay: 80ms; }
    .comment.is-new:nth-child(4) { animation-delay: 120ms; }
    .comment.is-new:nth-child(5) { animation-delay: 160ms; }

    .comments-verify-modal:not([hidden]) {
        animation: modalBackdropFade 0.22s var(--site-easing) both;
    }
    .comments-verify-modal:not([hidden]) .comments-verify-box {
        animation: modalBoxIn 0.24s var(--site-easing) both;
    }
    .comments-report-modal:not([hidden]) {
        animation: modalBackdropFade 0.22s var(--site-easing) both;
    }
    .comments-report-modal:not([hidden]) .comments-report-box {
        animation: modalBoxIn 0.24s var(--site-easing) both;
    }

    .form-reply-indicator:not([hidden]) {
        animation: replyIndicatorIn 0.2s var(--site-easing) both;
    }

    .comment-skeleton-avatar,
    .comment-skeleton-line {
        background: linear-gradient(
            90deg,
            rgba(128, 128, 128, 0.12) 0%,
            rgba(128, 128, 128, 0.22) 50%,
            rgba(128, 128, 128, 0.12) 100%
        );
        background-size: 200px 100%;
        background-repeat: no-repeat;
        animation: skeletonShimmer 1.6s var(--site-easing) infinite;
    }
}

/* --------------------------------------------------------------------------
   10. Legal Pages
   -------------------------------------------------------------------------- */
.legal-container {
    max-width: var(--container-max-width-fluid);
    margin: 4rem auto;
    padding: 0 var(--current-margin);
    color: var(--current-text);
    line-height: var(--current-line-height);
}

.legal-container h1 {
    font-size: var(--text-h1);
    margin-bottom: 2rem;
    font-weight: 600;
}

.legal-container h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    opacity: 0.9;
}

.legal-container p, .legal-container ul {
    margin-bottom: 1.25rem;
}

.legal-container ul {
    padding-inline-start: 1.5rem;
}

.legal-container li {
    margin-bottom: 0.5rem;
}

.legal-container a {
    color: var(--current-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   11. Audiobook: chapter list (drawer) + sticky mini-player
   -------------------------------------------------------------------------- */
.audio-empty {
    opacity: 0.7;
    font-style: italic;
}

.audio-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.audio-action-link {
    color: var(--current-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.audio-action-link:hover {
    text-decoration: underline;
}

.audio-list {
    display: flex;
    flex-direction: column;
    max-width: var(--container-max-width-fluid);
    margin: 0 auto;
}

.audio-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.audio-row.active {
    color: var(--current-accent);
}

.audio-play-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Play/pause are SVG masks (not font glyphs) so iOS/Android can never swap in a
   color emoji. The mask paints over currentColor, so the icon follows the button
   text color in every theme/active state. is-playing flips triangle -> bars. */
.audio-play-btn::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='6 4 20 12 6 20 6 4'/%3E%3C/svg%3E");
    mask: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='6 4 20 12 6 20 6 4'/%3E%3C/svg%3E");
}
.audio-play-btn.is-playing::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E");
}
.audio-play-btn:hover {
    border-color: var(--current-accent);
    color: var(--current-accent);
}
.audio-row.active .audio-play-btn {
    background: var(--current-accent);
    border-color: var(--current-accent);
    color: var(--current-bg);
}

.audio-row-main {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}
.audio-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audio-row-dur {
    flex: 0 0 auto;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
}

.audio-dl {
    flex: 0 0 auto;
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0.25rem;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.audio-dl:hover {
    opacity: 1;
    color: var(--current-accent);
}

/* --- Sticky mini-player --- */
#mini-player {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--current-bg);
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    z-index: 2600; /* above top-bar (2500) and drawers (2000) so it stays reachable */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Glide down in lockstep with the bottom bar (transform 0.3s ease) when it
       hides on scroll - see the .hidden sibling rule in the mobile query. */
    transition: bottom 0.3s ease;
}
#mini-player[hidden] {
    display: none;
}

.mp-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
}

.mp-btn {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--current-text);
    font-size: 1.1rem;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.mp-btn:hover {
    color: var(--current-accent);
}
/* Mini-player transport controls: same SVG-mask approach as .audio-play-btn so
   the play/pause/skip icons are monochrome currentColor on every platform and
   never fall back to color emoji. Flex-center so the icon sits in the middle of
   the 36px tap target rather than at the top of the block. */
.mp-play, .mp-prev, .mp-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mp-play::before,
.mp-prev::before,
.mp-next::before {
    content: "";
    display: block;
    margin: 0 auto;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.mp-play::before { width: 18px; height: 18px; }
.mp-prev::before, .mp-next::before { width: 15px; height: 15px; }

.mp-play::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='6 4 20 12 6 20 6 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='6 4 20 12 6 20 6 4'/%3E%3C/svg%3E");
}
.mp-play.is-playing::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E");
}
.mp-prev::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='18 5 8 12 18 19 18 5'/%3E%3Crect x='4' y='5' width='3' height='14' rx='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='18 5 8 12 18 19 18 5'/%3E%3Crect x='4' y='5' width='3' height='14' rx='1'/%3E%3C/svg%3E");
}
.mp-next::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='6 5 16 12 6 19 6 5'/%3E%3Crect x='17' y='5' width='3' height='14' rx='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='6 5 16 12 6 19 6 5'/%3E%3Crect x='17' y='5' width='3' height='14' rx='1'/%3E%3C/svg%3E");
}
.mp-speed {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* The .mp-inner gap is uniform, so speed otherwise sits as close to the time
       readout as to the × close. Push it off the time, pull the × in beside it. */
    margin-left: 0.4rem;
}
.mp-close {
    margin-left: -0.35rem;
}

.mp-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.mp-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center; /* center the title over the full-width seek bar */
}
/* Stack the time UNDER the seek bar (column) instead of beside it, so the bar
   spans the full width and the row reads cleaner. */
.mp-seekrow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
}
.mp-time {
    align-self: center; /* center the time under the seek bar, matching the title */
    font-size: 0.7rem;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.mp-seek {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(128, 128, 128, 0.3);
    cursor: pointer;
}
.mp-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--current-accent);
    border: none;
}
.mp-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--current-accent);
}

/* --------------------------------------------------------------------------
   Global footer (legal links)
   -------------------------------------------------------------------------- */
#global-footer {
    margin-top: 4rem;
    padding: 2.5rem 1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(var(--current-accent-rgb), 0.18);
    background: rgba(var(--current-accent-rgb), 0.03);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

.footer-links a {
    position: relative;
    color: var(--current-text);
    opacity: 0.7;
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.35rem 0.15rem;
    transition: opacity 0.2s var(--site-easing), color 0.2s var(--site-easing);
}

/* Animated underline that grows from the start on hover/focus, replacing the
   old static text-decoration and the literal "|" separators. */
.footer-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.1rem;
    width: 100%;
    height: 1px;
    background: var(--current-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--site-easing);
}

.footer-links a:hover,
.footer-links a:focus-visible {
    opacity: 1;
    color: var(--current-accent);
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
    transform: scaleX(1);
}

/* Keep page content clear of the fixed mini-player. */
body.mini-player-open #global-footer {
    margin-bottom: 72px;
}

/* The mini-player is fixed above any open drawer, so all drawers need
   room to scroll their last rows clear of it. */
body.mini-player-open #drawer-audio .drawer-content,
body.mini-player-open #drawer-support .drawer-content,
body.mini-player-open #drawer-comments .drawer-content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
    /* Sit above the mobile bottom bar (60px). */
    #mini-player {
        bottom: 60px;
    }
    /* ...but when the bar slides away on scroll-down, its reserved 60px would
       leave an empty strip of page under the player. Drop the player flush to
       the screen edge whenever the bar is hidden, so it always hugs the bottom. */
    #bottom-bar.hidden ~ #mini-player {
        bottom: 0;
    }
    /* Show prev/next (chapter skip) on phones too. To fit five controls plus the
       title on a narrow bar, tighten the row gap; .mp-meta (flex:1, min-width:0)
       absorbs the difference by ellipsis. */
    .mp-inner {
        gap: 0.25rem;
        padding: 0.5rem 0.6rem;
    }
    body.mini-player-open #main-content {
        padding-bottom: 140px;
    }
    /* On mobile the mini-player sits at bottom:60px (above the bottom bar), so
       its top is ~120px from the viewport bottom. The desktop footer clearance
       (72px) is too small here, leaving the footer text behind the player.
       Match the #main-content clearance so the footer scrolls fully clear. */
    body.mini-player-open #global-footer {
        margin-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    }
    /* The bottom bar (60px, z-index 2500) stays visible above the audio drawer
       (z-index 2000) while it's open - you tapped the bar to open it, and the
       scroll-hide handler is disabled while a drawer is open. The base drawer
       padding (~18px) leaves the last chapter row behind the bar, so it can't
       be scrolled into view. Clear the bar even before playback starts. */
    #drawer-audio .drawer-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
    /* Once playback starts the mini-player sits at bottom:60px on mobile, so
       all drawers need more clearance than the bottom bar alone. */
    body.mini-player-open #drawer-audio .drawer-content,
    body.mini-player-open #drawer-support .drawer-content,
    body.mini-player-open #drawer-comments .drawer-content {
        padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    }
}

/* --------------------------------------------------------------------------
   12. Support / donations drawer
   -------------------------------------------------------------------------- */
.support {
    max-width: 800px;
    margin: 0 auto;
}

/* ---- Hero: the pitch (left) + a prominent donation meter (right) ---- */
/* Single column: pitch on top, donation meter full-width below it. Earlier this
   was a 2-col grid (text | meter), but with the longer narrative copy the text
   column grew much taller than the short meter, leaving an awkward empty block
   under the meter. Stacking removes that mismatch and lets the meter use the
   full width. */
.support-hero {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
/* No separate cap here: the hero text fills the same width as the meter and the
   cards below, so every block in the drawer shares one flush edge. */
.support-hero-text {
    max-width: none;
}
.support-title {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.85rem;
    color: var(--current-text);
}
.support-lead {
    margin: 0 0 1rem;
    line-height: 1.6;
    opacity: 0.9;
}
.support-ask {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--current-accent);
}
/* Contact request: a soft accent-bordered callout so it stands out from the ask. */
.support-contact {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-inline-start: 3px solid var(--current-accent);
    background: rgba(var(--current-accent-rgb), 0.08);
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Donation meter: a tinted card that anchors the hero on the right */
.support-meter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(var(--current-accent-rgb), 0.25);
    background: linear-gradient(160deg,
        rgba(var(--current-accent-rgb), 0.14),
        rgba(var(--current-accent-rgb), 0.04));
}
.support-meter-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}
.support-meter-amount {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--current-accent);
    font-variant-numeric: tabular-nums;
}
.support-meter .support-bar {
    margin-top: 0.35rem;
}
.support-meter-goal {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.8;
}
.support-meter-meta {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    opacity: 0.65;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.7rem;
}

/* Progress bar (shared) */
.support-bar {
    height: 12px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.2);
    overflow: hidden;
}
.support-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--current-accent),
        rgba(var(--current-accent-rgb), 0.65));
    transition: width 0.6s var(--site-easing);
}

/* ---- Labelled groups + responsive card grid ---- */
.support-group {
    margin-bottom: 2.25rem;
}
.support-group-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
    margin: 0 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}
.support-cards {
    display: grid;
    /* min(100%, 240px) keeps a single card from overflowing a <240px viewport. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1rem;
    /* Size each card to its own content: when one card's QR accordion opens, it
       grows downward instead of stretching its row-mates into empty space. */
    align-items: start;
}

/* Card */
.support-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(128, 128, 128, 0.18);
    background: var(--current-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.18s var(--site-easing),
                box-shadow 0.18s var(--site-easing),
                border-color 0.18s var(--site-easing);
}
.support-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.09);
    border-color: rgba(128, 128, 128, 0.3);
}
body[data-theme="dark"] .support-card {
    background: rgba(255, 255, 255, 0.03);
}

/* Feature card: buying the book is the easiest help — full width, accented */
.support-card--feature {
    margin-bottom: 2.25rem;
    border-color: rgba(var(--current-accent-rgb), 0.3);
    background: linear-gradient(150deg,
        rgba(var(--current-accent-rgb), 0.12),
        rgba(var(--current-accent-rgb), 0.03));
}
body[data-theme="dark"] .support-card--feature {
    background: linear-gradient(150deg,
        rgba(var(--current-accent-rgb), 0.18),
        rgba(var(--current-accent-rgb), 0.05));
}
.support-card--feature .support-card-title {
    font-size: 1.2rem;
}

/* Card head: branded badge + titles */
.support-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.support-card-titles {
    min-width: 0;
}
.support-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}
.support-card-sub {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    opacity: 0.78;
}
/* Small payment-acceptance marks inline after a method title (card + Apple Pay
   for Revolut). Sized to the title font (1em of the title's 1.05rem) and muted
   so they read as a hint, not a second badge. */
.support-card-marks {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.45rem;
    vertical-align: middle;
    font-size: 1.4rem; /* ~1.33x the title's 1.05rem; fits beside "Revolut" without wrapping */
}
.support-card-mark {
    display: inline-flex;
    opacity: 0.65;
}
.support-card-mark svg {
    height: 1em;
    width: auto;
    display: block;
    fill: currentColor;
}
.support-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Branded badge: a real text glyph on a brand-coloured plate (no emoji, so it
   renders identically on every platform — see the audio play/pause history). */
.support-badge {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--current-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.support-badge--book { background: var(--current-accent); color: var(--current-bg); }
.support-badge--revolut { background: #0666eb; }
.support-badge--bank { background: #4b5a6b; }
.support-badge--paypal { background: #0070ba; }
/* Inline brand-logo badges: SVG fills ~60% of the plate and inherits white. */
.support-badge--logo svg {
    width: 60%;
    height: 60%;
    display: block;
    fill: currentColor;
}

/* Link buttons (Amazon, Revolut, PayPal, presets) */
.support-btn-row,
.support-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.support-btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    border: 1.5px solid var(--current-accent);
    color: var(--current-accent);
    background: transparent;
    text-decoration: none;
    /* <button> does not inherit font-family by default, so a button.support-btn
       would render in the UA font while a.support-btn uses the site font. Force
       inheritance so both element types match. */
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    transition: background-color 0.2s var(--site-easing),
                color 0.2s var(--site-easing),
                box-shadow 0.2s var(--site-easing),
                transform 0.15s var(--site-easing);
}
.support-btn:hover {
    transform: translateY(-1px);
}
.support-btn.primary {
    background: var(--current-accent);
    color: var(--current-bg);
}
.support-btn.primary:hover {
    box-shadow: 0 3px 8px rgba(var(--current-accent-rgb), 0.25);
}
/* Pay buttons fill the card width so each method has one clear primary action. */
.support-btn.full {
    display: block;
    width: 100%;
}
.support-btn.preset {
    flex: 1 1 auto;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
}

/* Free-entry amount field (PayPal): the input grows, the Pay button hugs its
   label. Themed with the accent so it matches the surrounding buttons. */
.support-amount {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.support-amount-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    border: 1.5px solid var(--current-accent);
    background: transparent;
    color: var(--current-text);
    font-size: 0.95rem;
    font-weight: 600;
}
.support-amount-input::placeholder {
    color: var(--current-text);
    opacity: 0.5;
    font-weight: 400;
}
.support-amount-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--current-accent-rgb), 0.25);
}
.support-amount .support-btn {
    flex: 0 0 auto;
}

/* Copyable value rows (recipient, IBAN, BIC) */
.support-copy-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.support-copy-label {
    font-size: 0.8rem;
    opacity: 0.7;
    flex: 0 0 auto;
}
.support-copy-val {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.4rem 0.55rem;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 6px;
}
.support-copy-btn {
    flex: 0 0 auto;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s var(--site-easing);
}
.support-copy-btn:hover {
    background: rgba(128, 128, 128, 0.12);
}
.support-copy-btn.copied {
    color: var(--current-accent);
    border-color: var(--current-accent);
}

/* Trigger card: the whole method card is a <button> that opens the detail modal.
   No IBANs / addresses shown inline — just badge + title + a "show details" hint
   and a chevron. Resets the default <button> look back to the card styling. */
.support-card--trigger {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    text-align: start;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.support-card--trigger .support-card-head {
    min-width: 0;
    flex: 1 1 auto;
}
.support-card--trigger:hover {
    border-color: var(--current-accent);
}
.support-card-chevron {
    flex: 0 0 auto;
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.4;
    transition: transform 0.18s var(--site-easing), opacity 0.18s var(--site-easing);
}
.support-card--trigger:hover .support-card-chevron {
    opacity: 0.8;
    transform: translateX(3px);
}

/* Payment-detail modal — mirrors the comments verify/report modal idiom. */
.support-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.support-modal-box {
    background: var(--current-bg);
    color: var(--current-text);
    border-radius: 14px;
    padding: 1.1rem 1.1rem 1.25rem;
    /* Size to content so a full IBAN / address sits on one line when it fits,
       capped at the viewport. fit-content resolves to the one-line (max-content)
       width until it hits the cap, where the value wraps instead of overflowing. */
    width: fit-content;
    min-width: min(320px, calc(100vw - 2rem));
    max-width: min(720px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
body[data-theme="dark"] .support-modal-box {
    background: #1d1d1f;
}
.support-modal-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}
.support-modal-title {
    margin: 0;
    flex: 1 1 auto;
    font-size: 1.15rem;
    font-weight: 700;
}
.support-modal-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(128, 128, 128, 0.12);
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s var(--site-easing);
}
.support-modal-close:hover {
    background: rgba(128, 128, 128, 0.25);
}
.support-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
/* In the focused modal there is room to show IBANs in full —
   override the inline ellipsis truncation so the whole value wraps and stays
   readable (and selectable) instead of being clipped. */
.support-modal-body .support-copy-val {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Plain message inside a modal (e.g. the "print edition coming soon" note). */
.support-modal-note {
    margin: 0;
    line-height: 1.55;
    font-size: 0.95rem;
}
.support-modal-qr {
    margin-top: 0.3rem;
    display: flex;
    justify-content: center;
}
.support-modal-qr img {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    /* White padded plate keeps the code scannable in dark theme too. */
    background: #fff;
    padding: 10px;
    border-radius: 8px;
}

/* Tighten the support drawer on small screens. */
@media (max-width: 560px) {
    .support-hero { margin-bottom: 1.75rem; }
    .support-meter { padding: 1rem; }
    .support-card { padding: 1rem; }
    .support-group { margin-bottom: 1.75rem; }

    /* Book card: keep the free-PDF and printed-book (Amazon) links side by
       side on phones instead of letting the row wrap them into a stack, so the
       two options read as one paired choice. Equal-width columns (flex: 1 1 0)
       with min-width: 0 let long labels wrap inside each button rather than
       blowing out the row. */
    .support-btn-row {
        flex-wrap: nowrap;
    }
    .support-btn-row .support-btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.82rem;
    }
}