/* ==================================================================
   Lyrics & Chords App - shared styles
   Mobile-first. Works as a plain responsive web app (no framework),
   so it can be uploaded as-is to Hostinger.
   ================================================================== */

:root {
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Day (light) theme */
    --bg: #faf8f4;
    --bg-elevated: #ffffff;
    --text: #201d18;
    --text-muted: #6b6459;
    --border: #e4ddd0;
    --accent: #7a5c3e;
    --accent-contrast: #ffffff;
    --chord-color: #b03a2e;
    --section-color: #7a5c3e;
    --section-bg: #efe6d6;
    --danger: #b03a2e;

    --editor-chord-bg: #dff1fb;
    --editor-lyric-bg: #e3f6e0;
    --editor-section-bg: #f1e7d3;

    --shadow: 0 2px 10px rgba(30, 24, 12, 0.08);
    --radius: 10px;

    /* Site-wide backdrop (brand wallpaper) -- same in both day and night
       theme by design, so it's defined once here and not overridden below. */
    --page-backdrop: #162b18;
}

[data-theme="night"] {
    /* Night (stage) theme: dark, high contrast, low glare */
    --bg: #14120f;
    --bg-elevated: #1e1b16;
    --text: #f2ede2;
    --text-muted: #a89f8d;
    --border: #332e26;
    --accent: #d8b876;
    --accent-contrast: #14120f;
    --chord-color: #ff8a70;
    --section-color: #d8b876;
    --section-bg: #2a2419;

    --editor-chord-bg: #17324a;
    --editor-lyric-bg: #1c3320;
    --editor-section-bg: #332c1a;

    --shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    /* Plain brand-green backdrop -- the logo watermark itself now lives on
       main.container (the reading surface), not out here. */
    background-color: var(--page-backdrop);
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-text-size-adjust: 100%;
    /* Removes the double-tap-to-zoom gesture (and the ~300ms tap delay
       some mobile browsers add while they wait to see if a second tap
       is coming) app-wide. Combined with the viewport meta tag's
       user-scalable=no, pinch-zoom is disabled too -- the in-app font
       size control (A-/A+) is the intended way to make text bigger. */
    touch-action: manipulation;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); }

button, input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.app-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.app-header .brand-icon {
    display: block;
    width: 1.5rem;
    height: auto;
    flex-shrink: 0;
}

/* On a narrow phone screen with the song controls also showing, drop the
   "OneChords by CVC Main" text and keep just the logo mark so everything
   else has room to sit on one or two wrapped rows instead of overflowing. */
@media (max-width: 480px) {
    /* .app-header gets "song-view-active" from app.js whenever the song
       controls are showing (belt-and-suspenders alongside the :has()
       rule below, for browsers/WebViews that don't support fit yet). */
    .app-header.song-view-active .brand-text { display: none; }
    .brand:has(~ .header-song-controls:not(.hidden)) .brand-text { display: none; }
}

/* The logo, Home, day/night, Back, and account controls must always share
   one top row (never wrap onto a second line). Back and "Join Live" are
   never both relevant at the same time -- Back only appears while a song
   is open, and there's little reason to jump into a live session while
   already viewing one -- so hiding "Join Live" during song view frees up
   exactly the room Back needs, on every screen size. */
.app-header.song-view-active #btnJoinLive,
.app-header.song-view-active #btnSignUp { display: none; }

.app-header .spacer { flex: 1; min-width: 0.5rem; }

/* Home button beside the brand -- shown on every screen except the song
   library itself (.on-library is toggled on .app-header from showView()
   in app.js). Bright yellow so it's easy to spot/tap at a glance. */
.app-header .home-btn { display: none; color: #ffd400; flex-shrink: 0; }
.home-btn svg { display: block; fill: currentColor; }
.app-header:not(.on-library) .home-btn { display: inline-flex; }

.icon-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 999px;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.icon-btn:hover { background: var(--section-bg); }

/* Two-character labels (A-, A+) need a touch a bit more room than the
   circular single-glyph icon buttons. */
#btnFontDown, #btnFontUp, #btnFlatToggle {
    width: auto;
    min-width: 2.25rem;
    padding: 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
}
.btn:hover { background: var(--section-bg); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.btn-primary:hover { filter: brightness(1.05); }

.btn-danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

/* ---------------- Account menu (header dropdown) ---------------- */
.account-menu { position: relative; }
.account-menu-caret {
    font-size: 0.65em;
    margin-left: 0.1rem;
    color: var(--text-muted);
}
.account-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.35rem;
    z-index: 30;
}
.account-menu-item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.account-menu-item:hover { background: var(--section-bg); }
.account-menu-item-danger { color: var(--danger); }
.account-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.3rem 0.2rem;
}

main.container {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0.75rem auto;
    padding: 1rem;
    /* Floats as a readable surface on top of the wallpaper -- keeps every
       existing text/background contrast pairing exactly as it was, while
       letting the brand backdrop show through as a frame around it. */
    background-color: var(--bg-elevated);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* Stacking-context anchor for the watermark pseudo-element below.
       position:relative alone doesn't establish one (it needs a non-auto
       z-index too) -- without this, this card's own background paints
       above the pseudo-element's z-index:-1 instead of below it, hiding
       the watermark entirely. Doesn't change position:fixed's viewport
       anchoring (only transform/filter/etc. on an ancestor would do that). */
    position: relative;
    z-index: 0;
}
/* Extra-tight side padding while a song is open (toggled by
   setHeaderSongControlsVisible in app.js) -- pulls the chords/lyrics
   noticeably closer to the edge of the window on top of .song-body's own
   trimmed padding, without touching the roomier default padding used by
   the song list, editor, and setlists. */
main.container.song-view-active {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* Logo watermark, faded to ~14% opacity with a soft blurred edge, both
   baked into the image itself (real alpha transparency, so it reads
   correctly on both the light day card and the dark night card; the blur
   was done with premultiplied alpha to avoid a dark fringe around the
   edge). This used to be a background-attachment:fixed image,
   but iOS Safari/Chrome (both WebKit) largely ignore fixed background
   attachment, so it just scrolled away with the text there. A real
   position:fixed layer is supported everywhere, including iOS, and gives
   the same "stays centered on screen while the lyrics/chords scroll past
   it" effect. z-index:-1 keeps it behind the actual song text. */
main.container::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw, 420px);
    height: min(70vw, 420px);
    background-image: url('../assets/bg-watermark-v3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

.field { margin-bottom: 1rem; }
.field label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field select,
.field textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text);
}
.field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 140px; }

.bulk-import-example {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    background: var(--section-bg);
    color: var(--section-color);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    overflow-x: auto;
    white-space: pre;
    margin: 0.5rem 0 0;
}
#bulkImportText { min-height: 16rem; resize: vertical; }

.bulk-import-result {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.bulk-import-result:last-child { border-bottom: none; }
.bulk-import-result-icon { flex-shrink: 0; font-weight: 700; }
.bulk-import-result-ok .bulk-import-result-icon { color: var(--accent); }
.bulk-import-result-error .bulk-import-result-icon { color: var(--danger); }
.bulk-import-result-error .bulk-import-result-detail { color: var(--danger); }
.bulk-import-summary { font-weight: 700; margin-bottom: 0.4rem; }

.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
}

.song-list { list-style: none; margin: 0; padding: 0; }
.song-list li {
    border-bottom: 1px solid var(--border);
}
.song-list a {
    display: block;
    padding: 0.85rem 0.25rem;
    text-decoration: none;
    color: var(--text);
}
.song-list .title { font-weight: 700; }
.song-list .meta { font-size: 0.85rem; color: var(--text-muted); }

.search-box { position: relative; margin-bottom: 1rem; }
.search-box input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
}

/* ---------------- Section-tag picker chips ---------------- */
.section-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.section-chip {
    font-size: 0.8rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--section-bg);
    color: var(--section-color);
    cursor: pointer;
    font-weight: 600;
}
.section-chip:hover { filter: brightness(1.05); }

/* ---------------- Editor: colored chord/lyric line overlay ---------------- */
.editor-wrap {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-elevated);
}
.editor-backdrop,
.editor-textarea {
    margin: 0;
    padding: 0.7rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    tab-size: 4;
}
.editor-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    color: transparent;
}
.editor-backdrop .line { display: block; min-height: 1.7em; }
.editor-backdrop .line.role-chord { background: var(--editor-chord-bg); }
.editor-backdrop .line.role-lyric { background: var(--editor-lyric-bg); }
.editor-backdrop .line.role-section { background: var(--editor-section-bg); }

.editor-textarea {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    min-height: 340px;
    resize: vertical;
    border: none;
    background: transparent;
    color: var(--text);
    caret-color: var(--text);
}
.editor-textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.editor-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.5rem 0 1rem;
    flex-wrap: wrap;
}
.editor-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.swatch {
    width: 0.8rem; height: 0.8rem; border-radius: 3px; display: inline-block;
    border: 1px solid var(--border);
}
.swatch.chord { background: var(--editor-chord-bg); }
.swatch.lyric { background: var(--editor-lyric-bg); }
.swatch.section { background: var(--editor-section-bg); }

/* ---------------- Song viewer ---------------- */
/* Song/setlist controls now live INSIDE the one sticky header (see
   .app-header below) instead of a second sticky bar -- that second bar
   used to fight the header for the same "stuck at top" position and
   end up hidden behind it. One sticky element only, ever. */
.header-song-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    /* Forces this group onto its own full-width row below the top row
       (logo/Home/Back/day-night/account), instead of wrapping in among
       those and sometimes splitting them across two lines. */
    flex: 1 1 100%;
}
.group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.2rem 0.4rem;
}
.group select { border: none; background: transparent; color: var(--text); }

/* In the night (stage) theme the shared --border token is intentionally
   subtle everywhere else, but that reads as barely-there around the
   transpose/speed/font-size controls a worship leader is actively
   tapping mid-song -- brighten just those borders so the control
   groupings stay easy to find at a glance on a dim stage screen. */
[data-theme="night"] .header-song-controls .group,
[data-theme="night"] .header-song-controls .btn,
[data-theme="night"] .header-song-controls .icon-btn {
    border-color: #6b5f4c;
}

/* The back arrow is a plain glyph, not an SVG icon like the rest of the
   app -- font-weight alone renders barely any difference in most fonts,
   so pair a heavier weight with a faux-bold text-shadow to make the
   stroke actually read as thicker. */
#btnBackToList {
    font-weight: 900;
    font-size: 1.2rem;
    text-shadow: 0 0 1px currentColor, 0 0 1px currentColor;
}

.song-title-block { padding: 1rem 1rem 0.25rem; }
.song-title-block h1 { margin: 0 0 0.15rem; font-size: 1.4rem; }
.song-title-block .sub { color: var(--text-muted); font-size: 0.9rem; }

/* Two justified, full-width rows of rounded buttons under the song title:
   Key/Chords/Number (display mode), then Edit/Watch/Start Live (actions).
   Equal-width flex segments with a gap, so the row fills edge to edge no
   matter how many buttons are visible in it. */
.btn-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.btn-row .seg {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 0.5rem;
    cursor: pointer;
    text-align: center;
}
.btn-row .seg:hover { background: var(--section-bg); }

/* Chords/Number mode toggle -- whichever is active gets a solid fill,
   same as the Chord/Number segments in the layout draft. */
.seg.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.seg.active:hover { background: var(--accent); }

/* Start Live is the one action that leaves this screen entirely, so it
   gets a tinted accent color to stand out from Edit/Watch. */
.seg-live { color: var(--accent); font-weight: 700; }

.seg-watch { color: #cc0000; }
.seg-watch svg { flex-shrink: 0; }
[data-theme="night"] .seg-watch { color: #ff5c5c; }

/* Key dropdown + sharp/flat toggle, styled to fill the same slot width as
   the Chords/Number segments beside it (see #keySelect/#btnFlatToggle,
   wired in app.js -- same controls as before, just restyled into this
   row instead of the old .group pill). */
.seg-key {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--section-bg);
    padding: 0.4rem 0.5rem;
}
.seg-key select {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    text-align-last: center;
    padding: 0.25rem 0;
    cursor: pointer;
}
.seg-key select:focus { outline: none; }
.seg-key .flat-toggle {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text);
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.seg-key .flat-toggle:hover { background: var(--bg); }

/* ---------------- Modal (YouTube player) ---------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 100;
}
.modal-box {
    position: relative;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.75rem 1rem 1rem;
    max-width: 640px;
    width: 100%;
}
.modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 2rem;
    height: 2rem;
}
.youtube-modal-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.youtube-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.youtube-modal-external {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.song-body {
    /* Horizontal padding trimmed from the original 1rem so the
       chords/lyrics sit closer to the edge of the window -- vertical
       padding kept as-is. */
    padding: 1rem 0.2rem;
    font-family: var(--font-mono);
    font-size: calc(1.05rem * var(--font-scale, 1));
    line-height: 1.5;
}
.song-section { margin-bottom: 1.4rem; }
.song-section .section-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--section-color);
    background: var(--section-bg);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    /* No font-size override here anymore -- inherits the same size as the
       chords/lyrics text below it (was calc(0.8rem * scale), visibly
       smaller than chords' calc(1.05rem * scale)). */
    margin-bottom: 0.5rem;
}
.line-pair {
    position: relative;
    white-space: pre;
    overflow-x: auto;
}
.chord-row {
    position: relative;
    height: 1.3em;
}
.chord-row .chord {
    position: absolute;
    top: 0;
    color: var(--chord-color);
    font-weight: 700;
    white-space: pre;
}
.chord-row .chord.not-a-chord {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}
.lyric-row { white-space: pre-wrap; word-break: break-word; }

@media (min-width: 640px) {
    .song-body { font-size: calc(1.15rem * var(--font-scale, 1)); }
}

/* ---------------- Auth ---------------- */
.login-wrap {
    max-width: 380px;
    margin: 3rem auto;
    padding: 0 1rem;
}

/* ---------------- Setlist Prev/Next (sticky bottom bar) ---------------- */
/* Pinned to the bottom of the viewport (not the song card) so it's always
   within thumb's reach no matter how far the lyrics are scrolled -- see
   the comment above #setlistNav in index.html for why this replaced the
   small icon-pair that used to live in the header. */
.setlist-nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(30, 24, 12, 0.08);
}
.setlist-nav-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
}
.setlist-nav-btn:hover { filter: brightness(1.05); }
.setlist-nav-btn:disabled {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border-color: var(--border);
    opacity: 0.6;
    cursor: not-allowed;
}
.setlist-nav-btn .arrow { font-size: 1.1rem; }
.setlist-nav-pos {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Reserves room at the bottom of the reading card so the fixed bar above
   never covers the last line of lyrics. :has() is well-supported in the
   modern mobile Safari/Chrome versions this app already targets (see the
   viewport-meta comments in index.html); worst case on an unsupported
   browser is the bar sitting over the very last line, not a broken layout. */
body:has(#setlistNav:not(.hidden)) main.container {
    margin-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* ---------------- Live session ---------------- */
.live-banner {
    background: var(--accent);
    color: var(--accent-contrast);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.live-dot {
    width: 0.55rem; height: 0.55rem; border-radius: 50%;
    background: #e23; display: inline-block;
    animation: pulse 1.4s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(226,34,51,0.6); }
    70% { box-shadow: 0 0 0 8px rgba(226,34,51,0); }
    100% { box-shadow: 0 0 0 0 rgba(226,34,51,0); }
}

.join-code-display {
    font-family: var(--font-mono);
    font-size: 2rem;
    letter-spacing: 0.3rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
    background: var(--section-bg);
    color: var(--section-color);
    border-radius: var(--radius);
    margin: 1rem 0;
}

.toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    padding: 0.6rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    z-index: 50;
    box-shadow: var(--shadow);
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}

/* ---------------- Setlists ---------------- */
.list-subnav { margin-bottom: 0.75rem; }

.setlist-items { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.setlist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.setlist-item-pos {
    width: 1.6rem;
    text-align: center;
    color: var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
}
.setlist-item-info { flex: 1; min-width: 8rem; }
.setlist-item-info .title { font-weight: 700; }
.setlist-item-info .meta { font-size: 0.8rem; color: var(--text-muted); }
.setlist-item-key {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text);
    padding: 0.3rem 0.3rem;
    max-width: 4.4rem;
    flex-shrink: 0;
}

/* ---------------- Song notes callout ---------------- */
.song-notes {
    background: var(--section-bg);
    color: var(--text);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 0 1rem 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
}
.song-notes strong { color: var(--section-color); }

/* ---------------- Help & FAQ ---------------- */
.help-topics { display: flex; flex-direction: column; gap: 0.65rem; }
.help-topic {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    overflow: hidden;
}
.help-topic summary {
    padding: 0.9rem 1rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic summary::after {
    content: '+';
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.help-topic[open] summary::after { content: '\2212'; }
.help-topic[open] summary { border-bottom: 1px solid var(--border); }
.help-body {
    padding: 0.85rem 1rem 1rem;
    font-size: 0.92rem;
    line-height: 1.65;
}
.help-body p { margin: 0 0 0.6rem; }
.help-body p:last-child { margin-bottom: 0; }
.help-body ul, .help-body ol { margin: 0 0 0.6rem 1.2rem; padding: 0; }
.help-body li { margin-bottom: 0.35rem; }
.help-body li:last-child { margin-bottom: 0; }
.help-body code {
    background: var(--section-bg);
    color: var(--text);
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

/* Utility */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }

/* ---------------- Phase 3: Members, personal setlists, submissions ---------------- */

/* Segmented tab control -- used for Master Setlists / My Setlists. */
.tab-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.tab-btn {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 0.2rem;
    margin-bottom: -1px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Small status pills next to a song/setlist title -- "Personal", "Pending",
   "Rejected", "Shared". Deliberately not reusing --danger/--accent alone
   as text-on-solid, since these need to stay legible on both themes. */
.badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}
.badge-personal { background: var(--section-bg); color: var(--section-color); }
.badge-pending { background: #fdf0d5; color: #8a5a00; }
[data-theme="night"] .badge-pending { background: #3a2c10; color: #e8b155; }
.badge-rejected { background: #fbe1de; color: var(--danger); }
[data-theme="night"] .badge-rejected { background: #3a1a16; color: #ff8a70; }

/* Admin's pending-submissions queue, top of the library. */
.pending-queue { margin-bottom: 1.25rem; }
.pending-queue-heading { margin: 0 0 0.25rem; font-size: 1.05rem; }
.pending-queue .setlist-item .btn { padding: 0.4rem 0.7rem; font-size: 0.85rem; }

/* A checkbox with its label on one line, matching .field's spacing. */
.checkbox-field { display: flex; align-items: flex-start; }
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }

#setlistShareLink {
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* Welcome modal: a single tall designed image rather than app-generated
   text -- the box scrolls internally instead of the image being squashed
   to fit, so a phone with limited screen height still shows the image at
   a readable width. */
.welcome-modal-box {
    padding: 0;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* keeps the image's corners rounded with the box */
}
.welcome-modal-img-wrap {
    overflow-y: auto;
    flex: 1 1 auto;
}
.welcome-modal-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
}
.welcome-modal-actions {
    flex: 0 0 auto;
    padding: 0.75rem;
    border-top: 1px solid var(--border);
}
/* The close button sits directly on top of the image (no card background
   behind it like the default .modal-close has), so it needs its own
   contrast against whatever part of the image is underneath it. */
.modal-close-on-image {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.modal-close-on-image:hover { background: rgba(0, 0, 0, 0.65); }

/* Add-a-song search box (setlist editor). Same floating-panel look as
   .account-menu-dropdown -- elevated surface, border, shadow -- so results
   read as "on top of" the page rather than part of the form flow. */
.song-search-wrap {
    position: relative;
}
.song-search-results {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0.3rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 25;
}
.song-search-result {
    padding: 0.5rem 0.6rem;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    font-size: 0.95rem;
}
.song-search-result:hover,
.song-search-result:focus {
    background: var(--bg-hover, rgba(127, 127, 127, 0.15));
}
.song-search-empty,
.song-search-more {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}