* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =========================================================================
   GLASS PANEL DESIGN TOKENS
   One shared glass style for BOTH side panels:
     - .side-menu       (left,  slides in from the left)
     - .settings-screen (right, slides in from the right)
   Both consume these variables, so their size / radius / glass / rim always
   match; only the mirrored side (left vs right) differs.
   ========================================================================= */

:root {
    --glass-w: 48%;
    --glass-max-w: 200px;

    /* Phase 8: wide detail panel (.is-wide-panel) - content-heavy
       screens (Content Manager/CMS edit/KBS editor, Feedback Inbox,
       Private Q&A Inbox, Q&A Workroom, Daily Classes manager/editor)
       reuse the same .settings-screen, only wider. Mobile default:
       nearly full the .app width; redefined narrower on desktop
       (see the 600px "DESKTOP PREVIEW" block) to leave a gutter near
       the header's KBS logo column instead of covering it. Still
       container-relative (% of .app, which itself caps at 440px) -
       never a fixed browser-viewport pixel value. */
    --wide-glass-w: 94%;
    --wide-glass-max-w: 420px;

    --glass-radius: 24px;
    --glass-pad-y: 18px;
    --glass-pad-x: 14px;

    --glass-bg: rgba(25, 29, 36, 0.5);
    --glass-blur: blur(20px) saturate(135%);
    /* lighter blur for the day-detail / event / popup cards - one blur layer
       per surface, cheap enough for Android WebView. Moderate 12px + a mild
       saturate for a premium frosted look (still lighter than --glass-blur). */
    --glass-blur-lite: blur(12px) saturate(1.4);

    --glass-shadow-blur: 44px;
    --glass-shadow-color: rgba(0, 0, 0, 0.42);
    --glass-top-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --glass-edge-highlight: rgba(255, 255, 255, 0.06);

    --glass-rim-w: 10px;
    --glass-rim-stops:
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.04) 34%,
        rgba(150, 190, 245, 0.10) 62%,
        rgba(0, 0, 0, 0.20) 100%;
}

:root[data-theme="light"] {
    --glass-bg: rgba(255, 255, 255, 0.55);
}

html {
    background: #0b0d11;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #0b0d11;
    color: #f4f6f8;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}


/* =========================
   APP
========================= */

.app {
    width: 100%;
    /* iPhone 16 Pro Max's real CSS viewport is 440px wide (not 430px -
       that's the 14/15 Pro Max figure). At exactly 440px this now fills
       edge-to-edge instead of leaving a 5px blank strip on each side;
       at any narrower width (430px, 320px, ...) width:100% still wins,
       so nothing below 440px changes. */
    max-width: 440px;
    margin: 0 auto;
   background: #141820;
}


/* =========================
   HEADER
========================= */

.app-header {
    min-height: 68px;
    background: #79aef2;
    color: #0c1117;

    display: grid;

    /* True 3-column header: [left logo slot] [title] [right logo slot].
       Side columns are a fixed, EQUAL width (60px, matching the logo
       size) so the KBS logo and the Prabhupada image sit the same
       distance from their own edge - no manual per-side margin nudging
       needed for symmetry. The title is a normal centre-column item. */
    /* minmax(0, 1fr): lets the centre column shrink below the title's
       natural (nowrap) width on very narrow phones, instead of forcing
       the whole header to overflow past the screen edge */
    grid-template-columns: 60px minmax(0, 1fr) 60px;

gap: 4px;
/* safe-area aware; the 22px left/right value is also the single source
   of the header's edge gap - equal on both sides by construction */
padding: max(10px, calc(env(safe-area-inset-top, 6px) + 6px)) 22px 8px;
align-items: center;

}

#menu-button {
    justify-self: start;
}


.header-title {
    /* a normal grid item now (middle column of .app-header's 3-column
       layout) - centred by the grid itself, no absolute positioning */
    text-align: center;
}


.header-title h1 {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;

    /* one premium near-black colour with a glossy, softly illuminated look:
       a faint light reflection above + a gentle depth shadow below.
       No gradients, no heavy 3D. */
    color: #0b0e13;
    text-shadow:
        0 -1px 1px rgba(255, 255, 255, 0.22),
        0  1px 2px rgba(0, 0, 0, 0.28);
}

.header-title p {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 1;

    /* same premium near-black + same subtle gloss as the title */
    color: #0b0e13;
    text-shadow:
        0 -1px 1px rgba(255, 255, 255, 0.2),
        0  1px 2px rgba(0, 0, 0, 0.25);
}


/* =========================
   BUTTONS
========================= */

button {
    font-family: inherit;
}

.icon-button,
.nav-button {
    border: 0;

    background: rgba(
        255,
        255,
        255,
        0.2
    );

    color: #0b1118;
    cursor: pointer;

    transition:
        background 0.16s ease,
        transform 0.12s ease;
}

.icon-button {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Hamburger icon - compact, evenly spaced 3 lines (CSS only).
   Pulled tight into the top-left corner, slightly smaller, but the
   button keeps a 40px touch target. */

#menu-button {
    font-size: 0;
    line-height: 0;

    /* lives in the .month-navigation row now: sized to match the ‹ › arrows,
       light hamburger lines for the dark calendar background */
    width: 34px;
    height: 34px;
    border-radius: 10px;

    justify-content: center;
    padding-left: 0;
    /* flush with the true left edge of .app: cancels out
       .calendar-container's own 14px left padding exactly (see the
       <=370px override below, which cancels that breakpoint's 10px
       padding the same way) */
    margin-left: -14px;

    background: transparent;
    color: #eef1f4;
}

#menu-button::before {
    content: "";

    width: 18px;
    height: 2.5px;
    border-radius: 2px;

    background: currentColor;

    box-shadow:
        0 -5px 0 currentColor,
        0  5px 0 currentColor;
}


/* Move only the three dots button */
.app-header {
    position: relative;
}

#more-button {
    justify-self: end;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    width: auto;
    height: 44px;

    background: transparent;

    transform: none;
}

   
.icon-button:hover,
.nav-button:hover {
    background: rgba(
        255,
        255,
        255,
        0.32
    );
}



.icon-button:active,
.nav-button:active {
    transform: scale(0.94);
}


/* =========================
   CALENDAR CONTAINER
========================= */

.calendar-container {
    /* a little more top room so the month nav / weekdays / cells sit lower
       and the whole calendar block is vertically balanced on a phone;
       a small bottom padding keeps the day-detail card from touching the
       edge and clears a gesture / home-indicator bar, without leaving
       excess empty space beneath the card.
       Left/right trimmed from 18px to give the 7-column day grid more
       real width per cell (#menu-button's margin-left and
       .month-navigation::after are tuned to match - see their comments -
       so the hamburger stays edge-flush and the title stays centred) */
    padding: 14px 14px calc(22px + env(safe-area-inset-bottom, 0px));
}


/* =========================
   MONTH NAVIGATION
========================= */

.month-navigation {
    /* compact row:  [menu] [‹] September 2026 [›]  */
    display: flex;
    align-items: center;
    gap: 5px;

    /* trimmed from 8px - less dead air between the nav row and the
       calendar grid below */
    margin-bottom: 5px;
}

/* balances #menu-button's own effective footprint (34px width - 14px
   margin-left = 20px; 24px at the <=370px breakpoint, see override below)
   so the auto-margins on the nav buttons below centre the "‹ title ›"
   cluster on the row's TRUE centre, not just the centre of the space
   left over after the hamburger */
.month-navigation::after {
    content: "";
    flex: 0 0 20px;
}

.month-navigation h2 {
    /* sized to its own content (not flex:1) so the arrows sit right next
       to the text instead of being pushed out to the row's far edges */
    flex: 0 0 auto;

    text-align: center;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 650;
    color: #f5f7fa;
}

.nav-button {
    width: 34px;
    height: 34px;
    border-radius: 10px;

    background: #21262d;
    color: #f3f5f7;

    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* h2 no longer stretches to fill the row (see above), so the "‹ title ›"
   trio packs together with only the row's own 5px gap between them; these
   auto margins then centre that whole tight trio within the space left
   over after the hamburger + its balancing ::after spacer - the standard
   flexbox "centre a sub-group" technique, no transform involved. */
.nav-button[aria-label="Previous month"] {
    margin-left: auto;
}

.nav-button[aria-label="Next month"] {
    margin-right: auto;
}


/* =========================
   TODAY BUTTON
========================= */

.today-action {
    /* trimmed from 6px/2px - this row is empty air whenever the Today
       button is hidden (its usual state); the grid below no longer
       waits on it as much */
    min-height: 3px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 1px;
}

.today-button {
    border: 1px solid #446e9c;

    background: #1d3147;
    color: #9fcaff;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.12s ease;
}

.today-button:hover {
    background: #24405e;
}

.today-button:active {
    transform: scale(0.95);
}

.today-button[hidden] {
    display: none;
}


/* =========================
   CALENDAR
========================= */

.calendar {
    width: 100%;
    margin-bottom: 10px;
}


/* Week labels */

.weekdays {
    display: grid;
    grid-template-columns: repeat(
        7,
        minmax(0, 1fr)
    );

    /* kept equal to .calendar-days' own column-gap below so each weekday
       label's column stays aligned with its day-of-week column of cells */
    column-gap: 2px;

    text-align: center;

    margin-top: 0;
    margin-bottom: 6px;

    color: #838c97;

    font-size: 14.5px;
    font-weight: 600;
}

.weekdays span {
    min-width: 0;
    /* one line per day name - the longer Myanmar names are shrunk to fit
       by app.js applyWeekdayHeader() instead of wrapping */
    white-space: nowrap;
    padding: 7px 0;
    background: linear-gradient(
    135deg,
    #c9a227,
    #f1d77a
);

color: #1a1a1a;

font-size: 20px;
font-weight: 800;
letter-spacing: -0.2px;

box-shadow: 0 2px 5px rgba(201, 162, 39, 0.25);

}


/* Calendar grid */

.calendar-days {
    display: grid;

    grid-template-columns: repeat(
        7,
        minmax(0, 1fr)
    );

    /* tighter grid - closer to a real calendar table - while still
       leaving a visible seam between each rounded cell */
    column-gap: 2px;
    row-gap: 3px;

    width: 100%;
}


/* Empty date slot */

.empty-day {
    width: 100%;
}


/* Actual date */

.calendar-day {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #f4f6f8;

    font-size: 16px;
    font-weight: 500;

    cursor: pointer;
    outline: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

.calendar-day:hover {
    background: #232831;
}

.calendar-day:active {
    transform: scale(0.92);
}


/* ---- glassmorphism for day cells (UI only) ----
   Soft inset edge + light inner top highlight + subtle lift, done with
   box-shadow only so the box model / grid / date number / event dots /
   festival markers stay pixel-identical (no border, no size change).
   The translucent cell background (rgba(255,255,255,0.1)) already exists.
   .today keeps its ring (its own box-shadow wins by source order);
   .selected is excluded so the selected cell is unchanged.
   No backdrop-filter - 42 blurred cells would be an Android WebView
   perf problem, and the tint + edge already read as glass at this size. */
.calendar-day:not(.selected) {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.18);
}


/* =========================
   TODAY
========================= */

.calendar-day.today {
    color: #8fc5ff;

    font-weight: 700;

    box-shadow:
        inset 0 0 0 1.5px #5b91cb;
}


/* =========================
   SELECTED
========================= */

.calendar-day.selected {
    background: #edf5ff;
    color: #3271b4;

    font-weight: 700;

    box-shadow: none;
}


/* Today + Selected */

.calendar-day.today.selected {
    background: #edf5ff;
    color: #3271b4;

    box-shadow:
        0 0 0 2px
        rgba(121, 174, 242, 0.28);
}


/* =========================
   EKADASI / FESTIVAL CELL MARKERS
   All rules live in one place near the end of this file
   ("CALENDAR CELL SUB-LABEL"). Only .calendar-day-num stays here.
========================= */

.calendar-day-num {
    line-height: 1;
}


/* =========================
   DAY DETAILS
========================= */

.day-details {
    /* tight separation from the calendar grid - equal to .calendar's own
       margin-bottom (10px), so the two margins collapse (adjacent block
       siblings, no BFC in between) to a single 10px gap rather than
       summing - position only, the card's actual content/height still
       comes from its own padding + content below */
    margin-top: 10px;

    /* glassmorphism (UI only - no layout/logic change). One blur layer for
       the whole day panel; the event cards inside stay blur-free for perf. */
    background: rgba(24, 29, 40, 0.5);
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);

    /* a touch more defined edge than before - still a soft rim, not a
       hard line */
    border: 1.5px solid rgba(255, 255, 255, 0.17);

    border-radius: 20px;

    padding: 13px 18px 11px;

    /* deeper "floating card" shadow for a more modern app feel, still
       subtle/dark-theme-appropriate */
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* fallback when backdrop-filter is unsupported - keep it a readable solid
   (the .special-days-panel fallback lives right after that rule so it wins
   the cascade) */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .day-details { background: #181d28; }
}

.day-details h2 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;

    margin-bottom: 7px;

    color: #f5f7fa;
}


/* =========================
   EVENTS
========================= */

#day-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.event-item,
.parana-item {
    font-size: 14px;
    line-height: 1.45;

    border-radius: 11px;

    padding: 11px 12px;
}

/* glass cards (UI only) - translucent over the frosted .day-details panel,
   no own backdrop-filter so a festival day with several cards stays smooth. */
.event-item {
    background: rgba(255, 255, 255, 0.055);

    border: 1.25px solid rgba(255, 255, 255, 0.12);

    color: #f1f3f5;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Parana keeps the same glass card look as every other card */

.parana-item {
    background: rgba(255, 255, 255, 0.055);

    border: 1.25px solid rgba(255, 255, 255, 0.12);

    color: #f1f3f5;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.no-event {
    font-size: 14px;
    line-height: 1.5;

    color: #9099a5;

    padding: 2px 1px;
}


/* English (kept) + Myanmar (added below) inside an event card */

.event-en {
    display: block;
}

.event-mm {
    display: block;

    margin-top: 5px;

    font-size: 13px;
    line-height: 1.6;

    color: #c3ccd7;
}

.event-note-mm {
    display: block;

    margin-top: 4px;

    font-size: 13px;
    line-height: 1.6;

    color: #c3ccd7;
}

.special-day-note-mm {
    color: #c3ccd7;
}


/* =========================
   EVENT TYPE - TEXT COLOURS ONLY (no coloured boxes)
   Applied to both the English line and the Myanmar line.
========================= */

.evt-festival .event-en,
.evt-festival .event-mm,
.evt-festival .event-note-mm {
    color: #E0B84C;                 /* Major festival - soft gold */
}

.evt-ekadasi .event-en,
.evt-ekadasi .event-mm,
.evt-ekadasi .event-note-mm {
    color: #74C6A8;                 /* Ekadasi - soft green / teal */
}

.parana-item .event-en,
.parana-item .event-mm {
    color: #8FD3B8;                 /* Parana line - light green / teal */
}

.evt-appearance .event-en,
.evt-appearance .event-mm,
.evt-appearance .event-note-mm {
    color: #83B9E8;                 /* Appearance day - soft blue */
}

.evt-disappearance .event-en,
.evt-disappearance .event-mm,
.evt-disappearance .event-note-mm {
    color: #B49BDD;                 /* Disappearance day - soft purple */
}

.evt-vrata .event-en,
.evt-vrata .event-mm,
.evt-vrata .event-note-mm {
    color: #E6A867;                 /* Vrata - soft orange */
}


/* Fasting phrase: follow the card's colour, keep a light emphasis */

.fast-hl,
.fast-hl-half {
    color: inherit;
    font-weight: 600;
}


/* Festival image inside the event detail card */

.festival-image {
    display: block;

    width: auto;
    max-width: 100%;

    max-height: 210px;
    margin: 0 auto 9px;

    object-fit: contain;

    border-radius: 9px;
}

.festival-credit {
    display: block;

    margin: -3px 0 8px;

    font-size: 11px;
    line-height: 1.4;

    color: #9099a5;
}


/* =========================
   SRILA PRABHUPADA - header avatar + gallery
========================= */

.prabhupada-avatar.is-tappable {
    cursor: pointer;

    transition:
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

.prabhupada-avatar.is-tappable:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.prabhupada-avatar.is-tappable:active {
    transform: scale(0.94);
}


.prabhupada-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Native-app history card - dark blue glass, rounded, image on top,
   clean app-designed info section below. No external source text. */

.prabhupada-gallery-item {
    margin: 0;

    padding: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(30, 41, 66, 0.72),
            rgba(20, 28, 46, 0.72)
        );

    border: 1px solid rgba(130, 160, 210, 0.16);
    border-radius: 16px;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    overflow: hidden;
}

.prabhupada-gallery-item img {
    display: block;
    width: 100%;

    max-height: 260px;
    object-fit: cover;

    border-radius: 11px;
}

.prabhupada-info {
    display: block;

    padding: 11px 5px 3px;
}

.prabhupada-title {
    display: block;

    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0.2px;

    color: #eef2f7;
}

.prabhupada-desc {
    display: block;

    margin-top: 3px;

    font-size: 12px;
    line-height: 1.5;

    color: #aab4c2;
}


/* =========================
   SMALL PHONES
========================= */

@media (max-width: 370px) {

    .calendar-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .app-header {
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
    }

    .calendar-day {
        font-size: 15px;
    }

    /* re-flush #menu-button and re-balance .month-navigation::after against
       .calendar-container's smaller 10px padding at this breakpoint (same
       -padding / 34px-minus-padding relationship as the base rules) */
    #menu-button {
        margin-left: -10px;
    }

    .month-navigation::after {
        flex: 0 0 24px;
    }

    .month-navigation h2 {
        font-size: 19px;
    }

    .header-title h1 {
        /* the title is now a real grid column (see .app-header) instead of
           an absolutely-positioned overlay, so on very narrow phones it
           must actually fit next to both 60px logo slots; 18px measured
           ~178px wide (nowrap) against a 160px column at 320px width and
           overflowed under the right logo - 15px fits with margin to spare */
        font-size: 15px;
    }
}


/* =========================
   DESKTOP PREVIEW
========================= */

@media (min-width: 600px) {

    body {
        padding: 24px 0;
    }

    /* Phase 8: at this width .app is the floating 440px phone-frame
       (not edge-to-edge), so the wide panel is narrowed back from the
       mobile 94% to leave a deliberate gutter on the left toward the
       header's KBS logo column, instead of covering the whole frame.
       Still a % of .app, never a fixed browser-viewport value. */
    :root {
        --wide-glass-w: 88%;
    }

    .app {
        border-radius: 22px;

        overflow: hidden;

        box-shadow:
            0 18px 60px
            rgba(0, 0, 0, 0.32);
    }
}
/* =========================
   MAIN FESTIVAL LOTUS LOGO
========================= */

.calendar-day.main-festival-day {
    position: relative;
}

.main-festival-logo {
    position: absolute;

    /* Top-left corner, inside the cell, above the (centred) date number.
       ~28% of the day-cell height. */
    top: 4%;
    left: 4%;

    height: 28%;
    max-height: 13px;
    width: auto;
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    object-fit: cover;

    pointer-events: none;

    z-index: 3;
}

/* Festival image icon - mirrors .main-festival-logo on the top-right */
.festival-day-icon {
    position: absolute;

    top: 4%;
    right: 4%;

    height: 28%;
    max-height: 13px;
    width: auto;
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    object-fit: cover;

    pointer-events: none;

    z-index: 3;
}
/* =========================
   SIDE MENU
========================= */

.app {
    position: relative;
}

.menu-overlay {
    /* absolute (not fixed) - .app is position:relative, so this docks to
       the centred .app card's own box (same pattern as .special-days-overlay
       / .settings-screen-overlay below) instead of the TRUE browser
       viewport, which on wide/desktop screens left it detached from the
       app frame at the far-left edge of the window. */
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;
    visibility: hidden;

    z-index: 20;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ---- shared glass panel : LEFT sidebar (mirror of .settings-screen) ----
   Flex column, same shape as .settings-screen: a fixed-size footer (the
   Settings row) below a single scrolling content area, so the footer can
   never move with the menu's own scroll. */
.side-menu {
    /* absolute (not fixed) - docks to the centred .app card's own left
       edge (its containing block, since .app is position:relative) instead
       of the TRUE browser viewport's left edge on wide/desktop screens. */
    position: absolute;

    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    width: var(--glass-w);
    max-width: var(--glass-max-w);
    height: 100%;

    background: var(--glass-bg);

    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    border-radius: 0 var(--glass-radius) var(--glass-radius) 0;

    overflow: hidden;

    z-index: 21;

    transform: translateX(-100%);

    transition:
        transform 0.28s ease;

    box-shadow:
        16px 0 var(--glass-shadow-blur) var(--glass-shadow-color),
        var(--glass-top-highlight),
        inset -1px 0 0 var(--glass-edge-highlight);
}

/* the ONLY scrolling region in the sidebar - header, account card and the
   collapsible groups. The Settings footer below it is a separate flex
   item and never scrolls with this. */
.side-menu-scroll {
    flex: 1;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding: var(--glass-pad-y) var(--glass-pad-x);

    /* thin, subtle scrollbar - no bright white track/arrows */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.side-menu-scroll::-webkit-scrollbar {
    width: 6px;
}

.side-menu-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.side-menu-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
}

.side-menu-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.34);
}

/* water / 3D glass rim along the vertical edge beside the (X) close button */
.side-menu::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;

    width: var(--glass-rim-w);

    pointer-events: none;

    background: linear-gradient(to right, var(--glass-rim-stops));

    box-shadow: inset 1px 0 1px rgba(255, 255, 255, 0.28);
}

.side-menu.open {
    transform: translateX(0);
}

.side-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 28px;

    font-size: 18px;
    font-weight: 700;
}

.menu-close-button {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 10px;

    background: #252b34;
    color: #ffffff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.menu-item {
    width: 100%;

    display: block;

    border: none;
    border-radius: 12px;

    background: transparent;
    color: #f5f7fa;

    padding: 14px 16px;
    margin-bottom: 8px;

    text-align: left;

    font-size: 16px;

    cursor: pointer;
}

.menu-item:hover {
    background: #252b34;
}

/* ---- Account section at the top of the left panel ---- */

.side-account {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 12px;

    border: none;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.06);
    color: #f5f7fa;

    padding: 12px 14px;
    margin-bottom: 14px;

    text-align: left;
    cursor: pointer;
}

.side-account:hover {
    background: rgba(255, 255, 255, 0.10);
}

.side-account-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg, #79aef2, #5b91cb);
    background-size: cover;
    background-position: center;

    color: #10151d;
    font-size: 16px;
    font-weight: 700;
}

.side-account-text {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-account-name {
    font-size: 14.5px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-account-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: #9aa3af;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-account.is-signed-in .side-account-sub {
    color: #7fb0e6;
}

.side-account-chevron {
    flex-shrink: 0;
    color: #8892a0;
    font-size: 18px;
}

/* ---- collapsible groups (CALENDAR / DEVOTIONAL / KBS / Q&A / ACCOUNT) ----
   Native <details>/<summary> - no new JS needed for expand/collapse, and
   the existing .menu-item buttons inside are untouched (same ids, same
   click handlers). Each group after the first is separated by a hairline,
   replacing the old #side-nav-heading-account-only border. */
.side-nav-group {
    margin-bottom: 4px;
}

.side-nav-group + .side-nav-group {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.side-nav-heading {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8892a0;

    padding: 6px 4px;
    margin: 0 0 4px;

    cursor: pointer;
    list-style: none;
    user-select: none;
}

.side-nav-heading::-webkit-details-marker {
    display: none;
}

/* custom disclosure chevron - same visual language as .side-account-chevron */
.side-nav-heading::before {
    content: "\203A"; /* › */
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    transition: transform 0.16s ease;
}

.side-nav-group[open] > .side-nav-heading::before {
    transform: rotate(90deg);
}

.side-nav-group-items {
    display: flex;
    flex-direction: column;
}

/* ---- Settings footer row - pinned below .side-menu-scroll, never scrolls
   with the menu list (see .side-menu / .side-menu-scroll above). ---- */
.sidebar-settings-button {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;

    background: transparent;
    color: #f5f7fa;

    padding: 14px var(--glass-pad-x);

    font-size: 15px;
    font-weight: 600;
    text-align: left;

    cursor: pointer;

    transition: background 0.16s ease;
}

.sidebar-settings-icon {
    font-size: 19px;
    line-height: 1;
}

.sidebar-settings-button:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-settings-button:active {
    background: rgba(255, 255, 255, 0.10);
}

/* =========================
   SPECIAL DAYS POPUP
========================= */

.special-days-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.65);

    z-index: 30;
}


.special-days-panel {
    width: 100%;
    max-width: 360px;
    max-height: 75%;

    overflow-y: auto;

    /* glassmorphism (UI only) - matches the already-frosted .settings-screen
       / .side-menu / .auth-gate-panel. Base class for the About/Privacy/Terms,
       Ekadasi-list and Main-Festivals-list popups. */
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);

    /* soft transparent-white edge - defined but not a hard line */
    border: 1.25px solid rgba(255, 255, 255, 0.14);

    border-radius: 18px;

    padding: 18px;

    /* subtle 3D depth: soft outer shadow + inner top highlight */
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* fallback when backdrop-filter is unsupported - readable solid */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .special-days-panel { background: #191d24; }
}


.special-days-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 12px;

    margin-bottom: 18px;
}


.special-days-header h2 {
    margin: 0;

    flex: 1;

    font-size: 20px;
    font-weight: 700;

    color: #ffffff;
}


/* back-arrow button - same transparent glass control, "<-" instead of "x" */
.special-days-close {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 10px;

    background: #252b34;
    color: #ffffff;

    font-size: 21px;
    line-height: 1;

    cursor: pointer;
}


.special-days-empty {
    margin: 10px 0 4px;

    color: #aeb6c2;

    font-size: 14px;

    text-align: center;
}


/* ---- startup Login prompt (auth/auth-startup-prompt.js) ---- */

.auth-gate-panel {
    /* same glass tokens as .side-menu / .settings-screen */
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--glass-radius);
}

.auth-gate-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-gate-message {
    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color: #cdd4dd;
}

.auth-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-gate-login {
    width: 100%;

    padding: 13px 14px;

    border: none;
    border-radius: 14px;

    background: #79aef2;
    color: #10151d;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.auth-gate-login:active {
    opacity: 0.85;
}

.auth-gate-guest {
    width: 100%;

    padding: 11px 14px;

    border: none;
    border-radius: 14px;

    background: transparent;
    color: #9aa3af;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.auth-gate-guest:active {
    color: #cdd4dd;
}

:root[data-theme="light"] .auth-gate-message {
    color: #3a434e;
}

:root[data-theme="light"] .auth-gate-login {
    color: #ffffff;
}

:root[data-theme="light"] .auth-gate-guest {
    color: #5b6673;
}


/* About App - content inside the settings "About App" panel */
.about-app {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-app-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #f5f7fa;
}

.about-app-version {
    margin-top: -3px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #9aa3af;
}

.about-app-desc {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #cdd4dd;
}

.about-app-desc strong {
    color: #f5f7fa;
    font-weight: 600;
}

.about-app-divider {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-app-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8892a0;
}

.about-app-link {
    color: #79aef2;
    text-decoration: none;
}

.about-app-link:hover,
.about-app-link:active {
    text-decoration: underline;
}

/* label / value rows in the About > App Information block */
.about-app-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;

    font-size: 13.5px;
    line-height: 1.6;
    color: #cdd4dd;
}

.about-app-row-label {
    flex-shrink: 0;
    color: #8892a0;
}

.about-app-row-value {
    text-align: right;
    word-break: break-word;
}

/* Privacy / Terms / Acknowledgements - native <details>, no extra JS */
.about-app-fold {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-app-fold > summary {
    list-style: none;
    cursor: pointer;

    padding: 11px 0;

    font-size: 13.5px;
    font-weight: 600;
    color: #dfe4ea;
}

.about-app-fold > summary::-webkit-details-marker {
    display: none;
}

.about-app-fold > summary::after {
    content: "\FF0B";
    float: right;
    color: #79aef2;
    font-weight: 700;
}

.about-app-fold[open] > summary::after {
    content: "\2212";
}

.about-app-fold[open] > summary {
    color: #ffffff;
}

.about-app-fold p {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.75;
    color: #b6bdc7;
}

.about-app-button {
    margin-top: 8px;
    align-self: flex-start;

    padding: 9px 18px;

    border: 0;
    border-radius: 12px;

    background: #79aef2;
    color: #10151d;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;

    cursor: pointer;
}

.about-app-button:active {
    transform: scale(0.97);
}

.day-report-issue-button {
    display: block;
    width: 100%;

    margin-top: 4px;
    padding: 6px 0 0;

    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;

    color: #79aef2;
    font-size: 12.5px;
    text-align: center;

    cursor: pointer;
}

.day-report-issue-button:active {
    opacity: 0.7;
}

/* Personal note shown on the day panel (notes-store.js / notes-ui.js) */
.day-note-preview {
    margin-top: 6px;
    padding: 9px 12px;

    border-radius: 12px;
    background: rgba(177, 140, 240, 0.12);

    color: #cdd4dd;
    font-size: 13px;
    line-height: 1.6;

    white-space: pre-wrap;
    word-break: break-word;
}

.day-note-star {
    color: #b18cf0;
}

/* "My Notes" list card - .feedback-item rendered as a button */
.day-note-card {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.day-note-card:active {
    opacity: 0.75;
}

.day-note-button {
    color: #b18cf0;
}

.day-note-delete {
    color: #ff8a8a;
    justify-content: center;
    text-align: center;
}

:root[data-theme="light"] .day-note-preview {
    background: rgba(124, 77, 191, 0.1);
    color: #46505d;
}


/* ---- Account / Login screen (auth-ui.js) ---- */

.auth-input {
    width: 100%;
    box-sizing: border-box;

    padding: 15px 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.05);
    color: #f5f7fa;

    font-size: 16px;
    font-family: inherit;

    outline: none;

    transition: border-color 0.16s ease, background 0.16s ease;
}

.auth-input::placeholder {
    color: #7d8794;
}

.auth-input:focus {
    border-color: #79aef2;
    background: rgba(255, 255, 255, 0.08);
}

.auth-error {
    padding: 2px 2px 4px;

    color: #ff8a8a;
    font-size: 13px;
    line-height: 1.5;
}

.auth-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 15px 14px;

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.auth-profile-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;

    border-radius: 50%;
    object-fit: cover;
}

.auth-profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(135deg, #79aef2, #5b91cb);
    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
}

.auth-profile-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-profile-text .about-app-title,
.auth-profile-text .about-app-version {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---- Feedback screen (feedback-ui.js) ---- */

.form-textarea {
    resize: vertical;
    min-height: 96px;

    line-height: 1.5;
}

.form-success {
    padding: 12px 14px;
    margin-bottom: 4px;

    border-radius: 14px;

    background: rgba(107, 201, 138, 0.14);
    color: #6bc98a;

    font-size: 13.5px;
    line-height: 1.5;
}

.feedback-item {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 14px;

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.feedback-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    font-size: 12px;
    color: #9aa3af;
}

.feedback-status {
    padding: 2px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.feedback-status-new,
.feedback-status-pending {
    background: rgba(121, 174, 242, 0.18);
    color: #79aef2;
}

.feedback-status-reviewing,
.feedback-status-reviewed {
    background: rgba(245, 195, 68, 0.18);
    color: #f5c344;
}

.feedback-status-fixed,
.feedback-status-resolved {
    background: rgba(107, 201, 138, 0.18);
    color: #6bc98a;
}

.feedback-status-replied {
    background: rgba(177, 140, 240, 0.18);
    color: #b18cf0;
}

.feedback-reply {
    margin-top: 4px;
    padding-top: 8px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feedback-file-input {
    display: none;
}

.feedback-screenshot-preview {
    width: 100%;
    max-height: 220px;

    display: block;
    object-fit: contain;

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.feedback-screenshot-thumb {
    width: 100%;
    max-height: 160px;

    display: block;
    object-fit: cover;

    border-radius: 11px;
}


/* ---- developer feedback inbox (VCFeedback.adminUi) ---- */

.feedback-admin-item {
    cursor: pointer;
}

.feedback-admin-user {
    font-size: 12px;
    color: #9aa3af;
    word-break: break-word;
}

.feedback-admin-full {
    width: 100%;
    max-height: 60vh;

    display: block;
    object-fit: contain;

    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.feedback-admin-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* =========================
   SETTINGS SIDE PANEL (slides in from the right, ~half screen width)
========================= */

.settings-screen-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;

    background: rgba(0, 0, 0, 0.4);

    animation: settings-panel-overlay-in 0.28s ease;
}

.settings-screen-overlay.closing {
    background: rgba(0, 0, 0, 0);
    transition: background 0.28s ease;
}

/* ---- shared glass panel : RIGHT settings panel (mirror of .side-menu) ---- */
.settings-screen {
    position: relative;

    display: flex;
    flex-direction: column;

    width: var(--glass-w);
    max-width: var(--glass-max-w);
    height: 100%;

    background: var(--glass-bg);

    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    border-radius: var(--glass-radius) 0 0 var(--glass-radius);

    overflow: hidden;

    box-shadow:
        -16px 0 var(--glass-shadow-blur) var(--glass-shadow-color),
        var(--glass-top-highlight),
        inset 1px 0 0 var(--glass-edge-highlight);

    animation: settings-panel-in 0.28s ease;
}

/* water / 3D glass rim along the vertical edge beside the (X) close button */
.settings-screen::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: var(--glass-rim-w);

    pointer-events: none;

    background: linear-gradient(to left, var(--glass-rim-stops));

    box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.28);
}

.settings-screen-overlay.closing .settings-screen {
    animation: settings-panel-out 0.28s ease forwards;
}

/* ---- wide detail panel (Phase 8) - same right-anchored glass panel,
   just wider for content-heavy screens; see the --wide-glass-* tokens
   above for how the width itself is set per breakpoint. ---- */
.settings-screen-overlay.is-wide-panel .settings-screen {
    width: var(--wide-glass-w);
    max-width: var(--wide-glass-max-w);
}

@keyframes settings-panel-overlay-in {
    from { background: rgba(0, 0, 0, 0); }
    to   { background: rgba(0, 0, 0, 0.4); }
}

@keyframes settings-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes settings-panel-out {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

.settings-screen-header {
    flex-shrink: 0;

    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 10px;

    padding: var(--glass-pad-y) var(--glass-pad-x);

    /* transparent so the glass shows through, like .side-menu-header */
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-screen-close,
.settings-screen-info {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: #252b34;
    color: #f5f7fa;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition: background 0.16s ease, transform 0.12s ease;
}

.settings-screen-info {
    font-size: 20px;
    justify-self: end;
}

.settings-screen-close:hover,
.settings-screen-info:hover {
    background: #2f3743;
}

.settings-screen-close:active,
.settings-screen-info:active {
    transform: scale(0.94);
}

.settings-screen-title {
    margin: 0;

    text-align: center;

    font-size: 18px;
    font-weight: 700;

    color: #ffffff;
}

/* Settings header on a narrow panel: [<-] title [i] is ONE row while the
   title fits between the two buttons. When it does not (English on the
   narrowest phones, Myanmar at every width - see fitHeader() in app.js)
   the title gets a row of its own below the buttons: the buttons stay
   inside the panel, and the title keeps its full size and is never broken
   mid-word. */
.settings-screen-header.is-stacked .settings-screen-close {
    grid-column: 1;
    grid-row: 1;
}

.settings-screen-header.is-stacked .settings-screen-info {
    grid-column: 3;
    grid-row: 1;
}

.settings-screen-header.is-stacked .settings-screen-title {
    grid-column: 1 / -1;
    grid-row: 2;
}

.settings-screen-list {
    flex: 1;

    overflow-y: auto;

    padding: var(--glass-pad-y) var(--glass-pad-x) 24px;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-row {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 15px 14px;

    border: none;
    border-radius: 14px;

    /* subtle frosted card on the glass, like the sidebar menu items */
    background: rgba(255, 255, 255, 0.05);
    color: #f5f7fa;

    font-size: 16px;
    text-align: left;

    cursor: pointer;

    transition: background 0.16s ease;
}

.settings-row:hover {
    background: rgba(255, 255, 255, 0.10);
}

.settings-row:active {
    background: rgba(255, 255, 255, 0.14);
}

.settings-row-label {
    flex: 1;
}

/* Myanmar Settings rows (setRowLabelText in app.js): one box per
   space-separated word, so a word moves to the next line whole instead of
   being split mid-word; a word wider than the row still wraps inside its
   own box rather than overflowing. min-width: 0 lets the label shrink to
   the row on the narrowest phones (320px), where its longest word used to
   push the row's "›" out past the edge. */
.settings-row-label.has-words {
    min-width: 0;
}

.settings-row-word {
    display: inline-block;
    max-width: 100%;
}

.settings-row-chevron {
    flex-shrink: 0;

    color: #7d8794;
    font-size: 20px;
    line-height: 1;
}

/* Myanmar Settings list - the MAIN list only (openSettingsScreen adds
   .is-settings-main; the Language / Location pages are untouched).
   Myanmar words are wide: at 16px the word for "information" is 103px and
   "Notifications" is 122px, but once the side padding, the 12px gap and the
   chevron were paid for, the label had only ~79px (320 dp) to ~125px
   (411 dp) - so words broke and one ran under the chevron. Give the label
   the room: tighter side padding on the list and rows, and a fixed 12px
   column reserved for the chevron, so a long word can never push it out or
   run under it. Font size, row height, radius and colours are unchanged. */
:lang(my) .settings-screen-list.is-settings-main {
    padding-left: 10px;     /* the 10px glass rim stays clear */
    padding-right: 6px;
}

:lang(my) .settings-screen-list.is-settings-main .settings-row {
    gap: 2px;
    padding-left: 10px;
    padding-right: 4px;
}

:lang(my) .settings-screen-list.is-settings-main .settings-row-chevron {
    flex: 0 0 12px;
    text-align: center;
}

/* ---- Set Location screen : search bar + autocomplete dropdown + current-location card ---- */
.location-search-bar {
    position: relative;
    flex-shrink: 0;

    padding: 0 var(--glass-pad-x) 12px;
}

.location-suggestions {
    position: absolute;
    left: var(--glass-pad-x);
    right: var(--glass-pad-x);
    top: 100%;
    z-index: 20;

    margin-top: 6px;

    max-height: 280px;
    overflow-y: auto;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;

    background: #1e242c;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.location-suggestion {
    width: 100%;
    display: block;

    padding: 12px 14px;

    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;

    background: transparent;
    color: #f5f7fa;

    text-align: left;
    cursor: pointer;
}

.location-suggestion:last-child {
    border-bottom: none;
}

.location-suggestion:hover,
.location-suggestion.is-active {
    background: rgba(255, 255, 255, 0.08);
}

.location-suggestion-city {
    font-size: 15px;
    font-weight: 600;
}

.location-suggestion-country {
    margin-top: 2px;

    color: #7d8794;
    font-size: 12px;
}

.location-suggestions-empty {
    padding: 16px 14px;

    color: #7d8794;
    font-size: 13px;
    text-align: center;
}

.location-current-label {
    padding: 4px 2px 2px;

    color: #7d8794;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.location-current-card {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px 14px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.05);
    color: #f5f7fa;
}

.location-current-icon {
    flex-shrink: 0;

    font-size: 20px;
    line-height: 1;
}

.location-current-city {
    font-size: 16px;
    font-weight: 700;
}

.location-current-country {
    margin-top: 2px;

    color: #7d8794;
    font-size: 13px;
}

.special-day-option {
    width: 100%;

    display: block;

    border: none;
    border-radius: 12px;

    background: #252b34;
    color: #f5f7fa;

    padding: 14px 16px;
    margin-bottom: 10px;

    text-align: left;

    font-size: 15px;

    cursor: pointer;
}


.special-day-option:hover {
    background: #303844;
}


.special-day-option:last-child {
    margin-bottom: 0;
}

/* =========================
   SPECIAL DAY DETAILS
========================= */

.special-day-date {
    margin-bottom: 10px;

    font-size: 16px;
    font-weight: 700;

    color: #ffffff;
}


.special-day-event-en {
    margin-top: 8px;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.45;

    color: #f5f7fa;
}


.special-day-event-mm {
    margin-top: 4px;
    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.55;

    color: #cbd2dc;
}


/* header logo wrappers - identical width/height, so the KBS logo (left)
   and the Prabhupada image (right) sit in matched, equal-size slots at
   column 1 / column 3 of .app-header's grid; each image is centred
   inside its own slot */
.header-logo-slot {
    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* KBS badge only: clips the zoomed-in image (see .kbs-header-logo below)
   back down to the same 60px circular footprint as the Prabhupada slot -
   the slot's own size/position is untouched, only what's visible inside
   it changes. Carries the ring border/shadow instead of the image itself
   since the zoomed image's own edge now sits outside the visible circle. */
.kbs-logo-slot {
    overflow: hidden;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.kbs-header-logo,
.prabhupada-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;

    /* KBS is a vector badge with its own ring baked into the artwork, so
       it always reads as crisp and "full"; a plain photo cropped to a
       circle has no such edge, so it always reads softer/unbalanced next
       to it - regardless of which of the 12 monthly-rotating Prabhupada
       photos is showing (object-position can't fix that: those photos
       are pre-cropped to ~1:1 already, so there's ~0 pan room, and any
       value tuned to one photo's framing would misalign the other 11).
       A matching ring on BOTH avatars gives them equal visual weight/
       definition no matter which photo is active - box-sizing:border-box
       (set globally above) keeps the 60x60 footprint exactly unchanged. */
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Measured: the badge's own centre emblem (peacock feather + hands) only
   spans the inner ~15% of the artwork's radius, with a wide cream gap
   and a thin outer text ring making up the rest - so at 60px it reads as
   mostly pale ring + empty space and looks visually smaller/lighter than
   Prabhupada's photo, which fills its whole circle with a face. Rendering
   the source ~1.2x its box and letting .kbs-logo-slot's overflow:hidden
   crop the excess zooms in on the emblem/inner ring so it carries the
   same visual weight, without moving or resizing the slot itself. */
.kbs-header-logo {
    width: 72px;
    height: 72px;
    border: none;
    box-shadow: none;
}

#more-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    background: transparent;
    border: none;
}

.calendar-day {
    color: #ffffff !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day {
    color: white !important;
    background: rgba(255,255,255,0.1) !important;
    font-size: 16px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}


/* =========================
   MORE MENU (3-dot dropdown)
========================= */

.more-dropdown {
    position: absolute;
    top: calc(100% - 4px);
    right: 6px;

    z-index: 25;

    min-width: 172px;

    display: flex;
    flex-direction: column;

    padding: 6px;

    background: #191d24;

    border: 1px solid #303741;
    border-radius: 12px;

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, 0.45);
}

.more-dropdown-item {
    width: 100%;

    display: block;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: #f5f7fa;

    padding: 11px 12px;

    text-align: left;

    font-size: 15px;

    cursor: pointer;
}

.more-dropdown-item:hover {
    background: #252b34;
}


/* =========================
   SETTINGS MODAL
========================= */

.settings-section {
    margin-bottom: 18px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section-title {
    margin-bottom: 9px;

    color: #aeb6c2;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-segmented {
    display: flex;
    gap: 6px;
}

.settings-segmented-wrap {
    flex-wrap: wrap;
}

.settings-segmented-wrap .settings-segment {
    flex: 1 1 30%;
    min-width: 104px;
}

.settings-segment {
    flex: 1;

    border: 1px solid #303741;
    border-radius: 10px;

    background: #20252d;
    color: #cbd2dc;

    padding: 9px 8px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.settings-segment.active {
    background: #1d3147;
    border-color: #446e9c;
    color: #9fcaff;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 11px 0;

    color: #f1f3f5;

    font-size: 14px;

    cursor: pointer;
}

.settings-toggle-row + .settings-toggle-row {
    border-top: 1px solid #262c35;
}

.settings-toggle {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    accent-color: #5b91cb;

    cursor: pointer;
}

.settings-line {
    margin-bottom: 5px;

    font-size: 14px;
    line-height: 1.5;

    color: #f5f7fa;
}

.settings-line:last-child {
    margin-bottom: 0;
}

.settings-line.muted {
    color: #aeb6c2;
}

.settings-line-mm {
    color: #cbd2dc;
    line-height: 1.55;
}


/* =========================
   CALENDAR MARKER TOGGLES
========================= */

.app.hide-ekadasi .calendar-day.ekadasi-day .calendar-day-ekadasi {
    display: none;
}

.app.hide-festivals .main-festival-logo {
    display: none;
}


/* =========================
   LIGHT THEME (opt-in)
========================= */

:root[data-theme="light"] body {
    background: #eef1f5;
    color: #1b2129;
}

:root[data-theme="light"] html,
:root[data-theme="light"] {
    background: #eef1f5;
}

:root[data-theme="light"] .app {
    background: #ffffff;
}

:root[data-theme="light"] .month-navigation h2 {
    color: #1b2129;
}

:root[data-theme="light"] .nav-button {
    background: #e7ebf1;
    color: #1b2129;
}

:root[data-theme="light"] .calendar-day {
    color: #1b2129 !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] .calendar-day:hover {
    background: rgba(0, 0, 0, 0.09) !important;
}

:root[data-theme="light"] .calendar-day.selected {
    background: #1d3147 !important;
    color: #ffffff !important;
}

:root[data-theme="light"] .calendar-day-ekadasi {
    color: #8f2b2b;
}

:root[data-theme="light"] .calendar-day.selected .calendar-day-ekadasi {
    color: #ffd3d0;
}

:root[data-theme="light"] .day-details {
    background: #f6f8fa;
    border-color: #dfe4ea;
}

:root[data-theme="light"] .day-details h2,
:root[data-theme="light"] #selected-day-title {
    color: #1b2129;
}

:root[data-theme="light"] .event-item {
    background: #eef1f5;
    border-color: #dbe0e7;
    color: #1b2129;
}

:root[data-theme="light"] .parana-item {
    background: #eef1f5;
    border-color: #dbe0e7;
    color: #1b2129;
}

:root[data-theme="light"] .no-event {
    color: #5b6673;
}

:root[data-theme="light"] .event-mm {
    color: #55606d;
}

:root[data-theme="light"] .event-note-mm,
:root[data-theme="light"] .special-day-note-mm {
    color: #55606d;
}


/* Event type colours - darker tones for the light card background */

:root[data-theme="light"] .evt-festival .event-en,
:root[data-theme="light"] .evt-festival .event-mm,
:root[data-theme="light"] .evt-festival .event-note-mm {
    color: #9A6B10;
}

:root[data-theme="light"] .evt-ekadasi .event-en,
:root[data-theme="light"] .evt-ekadasi .event-mm,
:root[data-theme="light"] .evt-ekadasi .event-note-mm {
    color: #2E7D5B;
}

:root[data-theme="light"] .parana-item .event-en,
:root[data-theme="light"] .parana-item .event-mm {
    color: #327A5C;
}

:root[data-theme="light"] .evt-appearance .event-en,
:root[data-theme="light"] .evt-appearance .event-mm,
:root[data-theme="light"] .evt-appearance .event-note-mm {
    color: #2F6BA6;
}

:root[data-theme="light"] .evt-disappearance .event-en,
:root[data-theme="light"] .evt-disappearance .event-mm,
:root[data-theme="light"] .evt-disappearance .event-note-mm {
    color: #634BA0;
}

:root[data-theme="light"] .evt-vrata .event-en,
:root[data-theme="light"] .evt-vrata .event-mm,
:root[data-theme="light"] .evt-vrata .event-note-mm {
    color: #B0671C;
}

:root[data-theme="light"] .festival-credit {
    color: #5b6673;
}

:root[data-theme="light"] .prabhupada-gallery-item {
    background: linear-gradient(180deg, #f3f5f9, #eaeef4);
    border-color: #d7dee8;
}

:root[data-theme="light"] .prabhupada-title {
    color: #1b2129;
}

:root[data-theme="light"] .prabhupada-desc {
    color: #5b6673;
}

:root[data-theme="light"] .special-days-panel,
:root[data-theme="light"] .more-dropdown {
    background: #ffffff;
    color: #1b2129;
}

/* both glass panels keep the frosted look in light mode (token --glass-bg) */
:root[data-theme="light"] .side-menu,
:root[data-theme="light"] .settings-screen {
    background: var(--glass-bg);
    color: #1b2129;
}

:root[data-theme="light"] .menu-item,
:root[data-theme="light"] .more-dropdown-item,
:root[data-theme="light"] .special-day-option,
:root[data-theme="light"] .side-menu-header,
:root[data-theme="light"] .special-days-header h2 {
    color: #1b2129;
}

:root[data-theme="light"] .menu-item:hover,
:root[data-theme="light"] .more-dropdown-item:hover,
:root[data-theme="light"] .special-day-option {
    background: #eef1f5;
}

:root[data-theme="light"] .menu-close-button,
:root[data-theme="light"] .special-days-close {
    background: #e7ebf1;
    color: #1b2129;
}

:root[data-theme="light"] .side-account {
    background: rgba(0, 0, 0, 0.05);
    color: #1b2129;
}

:root[data-theme="light"] .side-account:hover {
    background: rgba(0, 0, 0, 0.09);
}

:root[data-theme="light"] .side-account-sub {
    color: #5b6673;
}

:root[data-theme="light"] .side-account.is-signed-in .side-account-sub {
    color: #2f6fb8;
}

:root[data-theme="light"] .side-nav-heading,
:root[data-theme="light"] .side-account-chevron {
    color: #6b7480;
}

:root[data-theme="light"] .side-nav-group + .side-nav-group {
    border-top-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .sidebar-settings-button {
    color: #1b2129;
    border-top-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .sidebar-settings-button:hover {
    background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .side-menu-scroll {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

:root[data-theme="light"] .side-menu-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

:root[data-theme="light"] .settings-segment {
    background: #eef1f5;
    border-color: #dbe0e7;
    color: #46505d;
}

:root[data-theme="light"] .settings-segment.active {
    background: #1d3147;
    border-color: #1d3147;
    color: #ffffff;
}

:root[data-theme="light"] .settings-toggle-row {
    color: #1b2129;
}

:root[data-theme="light"] .settings-toggle-row + .settings-toggle-row {
    border-top-color: #e2e6ec;
}

:root[data-theme="light"] .settings-line,
:root[data-theme="light"] .special-day-date,
:root[data-theme="light"] .special-day-event-en {
    color: #1b2129;
}

:root[data-theme="light"] .settings-line.muted,
:root[data-theme="light"] .settings-line-mm,
:root[data-theme="light"] .special-day-event-mm,
:root[data-theme="light"] .special-days-empty {
    color: #5b6673;
}

:root[data-theme="light"] .about-app-title {
    color: #1b2129;
}

:root[data-theme="light"] .about-app-version {
    color: #5b6673;
}

:root[data-theme="light"] .about-app-desc {
    color: #3a434e;
}

:root[data-theme="light"] .about-app-desc strong {
    color: #1b2129;
}

:root[data-theme="light"] .about-app-divider {
    border-top-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .about-app-section-title {
    color: #5b6673;
}

:root[data-theme="light"] .about-app-link {
    color: #2f6fb8;
}

:root[data-theme="light"] .about-app-row {
    color: #3a434e;
}

:root[data-theme="light"] .about-app-row-label {
    color: #6b7480;
}

:root[data-theme="light"] .about-app-fold {
    border-top-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .about-app-fold > summary {
    color: #1b2129;
}

:root[data-theme="light"] .about-app-fold p {
    color: #46505d;
}

:root[data-theme="light"] .day-report-issue-button {
    border-top-color: rgba(0, 0, 0, 0.08);
    color: #2f6fb8;
}

:root[data-theme="light"] .auth-input {
    border-color: rgba(0, 0, 0, 0.14);
    background: rgba(0, 0, 0, 0.04);
    color: #1b2129;
}

:root[data-theme="light"] .auth-input::placeholder {
    color: #8a93a0;
}

:root[data-theme="light"] .auth-input:focus {
    background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .auth-error {
    color: #c62828;
}

:root[data-theme="light"] .auth-profile-card {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .form-success {
    background: rgba(46, 139, 87, 0.12);
    color: #1e7a4c;
}

:root[data-theme="light"] .feedback-item {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .feedback-item-meta {
    color: #5b6673;
}

:root[data-theme="light"] .feedback-reply {
    border-top-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .feedback-screenshot-preview {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .settings-screen {
    background: var(--glass-bg);
}

:root[data-theme="light"] .settings-screen-header {
    background: transparent;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .settings-screen-title {
    color: #1b2129;
}

:root[data-theme="light"] .settings-screen-close,
:root[data-theme="light"] .settings-screen-info {
    background: #e7ebf1;
    color: #1b2129;
}

:root[data-theme="light"] .settings-screen-close:hover,
:root[data-theme="light"] .settings-screen-info:hover {
    background: #dde2ea;
}

:root[data-theme="light"] .settings-row {
    background: rgba(0, 0, 0, 0.04);
    color: #1b2129;
}

:root[data-theme="light"] .settings-row:hover {
    background: rgba(0, 0, 0, 0.07);
}

:root[data-theme="light"] .settings-row-chevron {
    color: #9aa3af;
}

:root[data-theme="light"] .location-current-card {
    background: rgba(0, 0, 0, 0.04);
    color: #1b2129;
}

:root[data-theme="light"] .location-suggestions {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .location-suggestion {
    border-bottom-color: rgba(0, 0, 0, 0.06);
    color: #1b2129;
}

:root[data-theme="light"] .location-suggestion:hover,
:root[data-theme="light"] .location-suggestion.is-active {
    background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .location-current-label,
:root[data-theme="light"] .location-current-country,
:root[data-theme="light"] .location-suggestion-country,
:root[data-theme="light"] .location-suggestions-empty {
    color: #8a93a0;
}


/* =========================
   CALENDAR CELL SUB-LABEL  (visual only - no logic / data change)

   Layout contract, identical for EVERY day cell:
     - the date number is the only in-flow child  -> always dead-centre.
     - the sub-label band is position:absolute, left:0 right:0, pinned to
       the cell base at the SAME offset in every cell.
     - the label TEXT is centred in that band and never shifts left/right
       with its length.

   Content - keyword TEXT label only, no coloured dot of any kind:
     Ekadasi (any)  ->  "Ekadasi"
     festival       ->  short keyword
========================= */

.calendar-day-ekadasi,
.calendar-day-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;

    margin: 0;
    padding: 0;

    font-size: 6px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.1px;

    text-align: center;
    pointer-events: none;
}

/* the centred word / keyword - up to two short lines, then clipped.
   Horizontal padding keeps it clear of the cell edge so it stays
   optically centred in the cell no matter how long the text is. */
.calendar-day-ekadasi-text,
.calendar-day-label-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    max-height: 2.1em;
    /* = two lines; "lh" is the line actually drawn - on Android the 8px
       minimum font size makes it taller than 2.1em of the 6px size, and
       a two-line name ("Vamana Dvadasi") lost its second line */
    max-height: 2lh;
    overflow: hidden;

    /* small inset so a very long word clears the cell edge; short
       keywords are centred well inside this */
    padding: 0 3px;

    text-align: center;
    overflow-wrap: anywhere;
    hyphens: none;
}

/* a one-word keyword ("Disappearance", "Janmastami", Myanmar labels) is
   kept on ONE line - never broken mid-word; app.js fitCellLabels() shrinks
   its font size just enough when it would not fit the cell */
.calendar-day-label-text.is-one-word {
    display: block;
    white-space: nowrap;
    overflow-wrap: normal;
    /* a single line - no two-line cap needed (app.js scaleCellLabelToFit
       may also set width / margin / transform here on Android) */
    max-height: none;
}

/* Myanmar labels (ပွင့်တော်မူ / တိရောဘာဝ): the vowel marks stacked under
   the letters (ွ ူ) reach ~0.5em below the baseline - a taller line keeps
   them inside the label instead of cut off at the cell base. Same font
   size; the label simply sits a little higher in the cell. */
.calendar-day-label-text.is-myanmar {
    line-height: 1.9;
}

.calendar-day-ekadasi-text {
    color: #d0736d;                 /* muted maroon - observance marker */
}

.calendar-day-label-text {
    color: #d5ddda;
}

.calendar-day.selected .calendar-day-ekadasi-text {
    color: #b34a44;
}

.calendar-day.selected .calendar-day-label-text {
    color: #34506a;
}

:root[data-theme="light"] .calendar-day-label-text {
    color: #3c5a4a;
}

:root[data-theme="light"] .calendar-day.selected .calendar-day-label-text {
    color: #e7eef5;
}

/* subtle "breathing" for long festival keywords (.is-long is added by
   renderCalendar when the keyword is > 12 chars, so it wraps to two clipped
   lines). Opacity only - no layout, no size, no reflow; compositor-only, and
   only ~2-5 cells a month carry it. Short labels stay static. */
@keyframes vc-cell-label-breathe {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1; }
}

.calendar-day-label-text.is-long {
    animation: vc-cell-label-breathe 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .calendar-day-label-text.is-long {
        animation: none;
    }
}

/* keep the date digit itself centred, sub-label or not */
.calendar-day > .calendar-day-num {
    line-height: 1;
}

/* honour the "hide festivals" toggle for the green keyword too */
.app.hide-festivals .calendar-day-label {
    display: none;
}

@media (max-width: 370px) {

    .calendar-day-ekadasi,
    .calendar-day-label {
        font-size: 5.5px;
    }

    .calendar-day-ekadasi-text,
    .calendar-day-label-text {
        padding: 0 2px;
    }
}

/* =========================
   ANDROID SYSTEM BARS / SAFE AREA
   The packaged Android app draws edge-to-edge (Android 15+ with
   WebView 140+ and viewport-fit=cover), so the page itself must keep
   clear of the status bar and the gesture bar. env(safe-area-inset-*)
   is 0 in desktop browsers and whenever Android pads the WebView
   instead, so none of this changes the desktop layout.
========================= */

/* a solid backdrop behind the status bar: scrolled content never runs
   under the clock / battery icons (light icons: SystemBars style DARK
   in android-app/capacitor.config.json) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #0b0d11;
    z-index: 1000;
    pointer-events: none;
}

@media (max-width: 599px) {

    /* overlays and the sidebar are pinned to the SCREEN on phones, not to
       the page-tall .app: their header stays at the top, their own list
       scrolls, and the sidebar's Settings footer sits at the bottom of
       the screen. Same left/right as the login overlay - inside the
       440px column on 441-599px widths, 0 on real phones. */
    .special-days-overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: max(0px, calc(50% - 220px));
        right: max(0px, calc(50% - 220px));
    }

    .side-menu {
        position: fixed;
        top: 0;
        bottom: 0;
        left: max(0px, calc(50% - 220px));
        height: auto;

        /* closed: slide fully past the screen edge (on 441-599px widths
           the 440px column starts to the right of it) */
        transform: translateX(calc(-100% - max(0px, 50vw - 220px)));
    }

    /* header below the status bar, last row above the gesture bar */
    .side-menu,
    .settings-screen {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* scrolling inside the sidebar never scrolls the page behind it */
    .side-menu-scroll {
        overscroll-behavior: contain;
    }
}