/*
 * TGM LCM — Theme tokens (dark, v1).
 *
 * Single source of truth for plugin colors. Every plugin-provided UI surface
 * — admin pages, front-end gallery, sticky player, modals, banners, rating
 * widget, comment styling — must consume these CSS variables rather than
 * hardcoding hex values. That keeps a future light-mode toggle (out of
 * scope for v1) to a single :root override.
 *
 * Palette intent: warm amber-gold accent against deep cool-grey surfaces.
 * The accent reads as "light / dawn" — appropriate for a Christian music
 * platform without being literal/cheesy. Tested against WCAG AA contrast
 * for body text and large UI text on both bg and surface.
 */

:root {
    /* Backgrounds — outermost to innermost */
    --tgm-lcm-bg:           #0f1115;  /* page background */
    --tgm-lcm-surface:      #1a1d24;  /* cards, panels, modals */
    --tgm-lcm-surface-2:    #232730;  /* nested surfaces (inputs, hover rows) */
    --tgm-lcm-border:       #2a2e36;  /* hairlines, dividers */
    --tgm-lcm-border-strong:#3a3f49;  /* input borders, focused outlines */

    /* Text */
    --tgm-lcm-text:         #e8e8ec;  /* body text on bg/surface */
    --tgm-lcm-text-muted:   #a0a4ad;  /* secondary labels, captions */
    --tgm-lcm-text-faint:   #6b6f78;  /* placeholders, disabled */

    /* Accent — warm gold, primary CTA + active states */
    --tgm-lcm-accent:       #d4a84a;
    --tgm-lcm-accent-hover: #e8be60;
    --tgm-lcm-accent-text:  #1a1410;  /* text color on accent-filled buttons */

    /* Status colors (dark-mode tuned, not raw WP defaults) */
    --tgm-lcm-success:      #5cb87a;
    --tgm-lcm-warning:      #e0a040;
    --tgm-lcm-danger:       #e25c5c;
    --tgm-lcm-info:         #5b8def;

    /* Heart rating (Phase 3c) — V10 bright-red gradient (picked from
       the rating lab). Five discrete shades light → deep across the
       5 rating positions; white 3D highlight curve on each filled
       heart's upper-left lobe. Separated layout (no overlap) — reads
       as a 5-heart rating system at any size, gallery card to hero. */
    --tgm-lcm-rating-h1:        #ff8c8c;  /* h1 light coral-red */
    --tgm-lcm-rating-h2:        #ff5050;  /* h2 light red */
    --tgm-lcm-rating-h3:        #ff2020;  /* h3 bright red (base) */
    --tgm-lcm-rating-h4:        #e60000;  /* h4 rich red */
    --tgm-lcm-rating-h5:        #a30000;  /* h5 deep red */
    --tgm-lcm-rating-glow:      #ff6060;  /* hover state */
    --tgm-lcm-rating-shine:     rgba(255, 255, 255, 0.55); /* 3D highlight */
    --tgm-lcm-rating-outline:   #6b6f78;  /* unfilled heart stroke */

    /* Legacy aliases — kept so any older references still resolve to
       a sensible default (the bright-red base). Remove once unused. */
    --tgm-lcm-rating-fill:      var(--tgm-lcm-rating-h3);
    --tgm-lcm-rating-fill-deep: var(--tgm-lcm-rating-h5);
    --tgm-lcm-star-on:          var(--tgm-lcm-rating-h3);
    --tgm-lcm-star-off:         var(--tgm-lcm-rating-outline);

    /* Typography */
    --tgm-lcm-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    --tgm-lcm-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Radii + shadow */
    --tgm-lcm-radius-sm:    4px;
    --tgm-lcm-radius:       8px;
    --tgm-lcm-radius-lg:    12px;
    --tgm-lcm-shadow:       0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ── Brand heartbeat (amplified "lub-dub" + drop-shadow lift). Driven on
 *    the play-mark: on hover (cards), continuously (heroes), and while
 *    playing (transport). transform-origin defaults to the element center. ── */
@keyframes tgm-lcm-heartbeat {
    0%, 46%, 100% { transform: scale(1);    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45)); }
    12%           { transform: scale(1.15); filter: drop-shadow(0 9px 15px rgba(0, 0, 0, 0.60)); }
    22%           { transform: scale(1.05); filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.50)); }
    32%           { transform: scale(1.12); filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.58)); }
}

/* Accessibility: honor reduced-motion by killing plugin keyframe animations. */
@media (prefers-reduced-motion: reduce) {
    [class*="tgm-lcm-"] { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
 * GOLDEN / LIGHT THEME  (v0.33.0)
 *
 * Applied when the page has <html data-tgm-theme="light"> — the DEFAULT
 * (set server-side by TGM_LCM_Theme; "dark" is the opt-in). A token flip
 * re-themes every surface coherently; the blocks after it port the locked
 * "Gilded · Elegant" lab treatments onto the showcase components (cards,
 * player, primary buttons, gate/join panels, headings). Dark theme uses the
 * original :root tokens (data-tgm-theme="dark"). All values chosen for WCAG
 * AA body-text contrast on the light surfaces.
 * ════════════════════════════════════════════════════════════════ */
html[data-tgm-theme="light"] {
    --tgm-lcm-bg:            #fbf4e3;
    --tgm-lcm-surface:       #fffdf7;
    --tgm-lcm-surface-2:     #f6edd6;
    --tgm-lcm-border:        #e6cd95;
    --tgm-lcm-border-strong: #d8bd7c;
    --tgm-lcm-text:          #2c2410;  /* AA on surface + bg */
    --tgm-lcm-text-muted:    #6e5d3c;  /* AA on surface */
    --tgm-lcm-text-faint:    #97855c;
    --tgm-lcm-accent:        #8a6014;  /* deep bronze — AA as link text on white */
    --tgm-lcm-accent-hover:  #a87d24;
    --tgm-lcm-accent-text:   #fff8ec;  /* cream on bronze fills */
    --tgm-lcm-success:       #2e7d4f;
    --tgm-lcm-warning:       #9a6f1d;
    --tgm-lcm-danger:        #b5392b;
    --tgm-lcm-info:          #2c63c4;
    --tgm-lcm-rating-outline:#bda874;  /* unfilled heart stroke reads on light */
    --tgm-lcm-shadow:        0 8px 22px rgba(80, 58, 14, 0.18);

    /* Golden-only helpers (the locked recipe). */
    --tgm-lcm-gold-roll:   linear-gradient(95deg, #3f2d07 0%, #7a5712 24%, #d4a849 40%, #ecc46a 48%, #a8782a 78%, #553c0a 100%);
    --tgm-lcm-gold-roll-h: linear-gradient(100deg, #46320a 0%, #a8782a 26%, #eccb78 46%, #eccb78 56%, #9c7220 76%, #3f2d07 100%);
    --tgm-lcm-gold-sheen:  inset 0 1px 1px rgba(255, 255, 255, 0.28);
    --tgm-lcm-gold-deep:   rgba(28, 17, 2, 0.68);
    --tgm-lcm-gold-cream:  #fff8ec;
}

/* Page background — champagne. The theme owns it (Kadence supplies none).
   Vertical band on desktop; top→bottom on a narrow screen so it never
   streaks down the middle. Explicit dark bg too, so toggling to dark works
   regardless of the underlying theme config. */
/* ONE gradient at every screen size. Top→bottom so the content (which is often
   narrow + centred) actually shows the gradient rather than sitting on the
   uniform champagne centre of a left→right band; `fixed` anchors it per-viewport
   so it stays consistent and doesn't "switch" between sizes. */
html[data-tgm-theme="light"] body {
    background-color: #fdf9f1;
    background-image: linear-gradient(180deg, #fdf9f1 0%, #ecddb4 50%, #fdf9f1 100%);
    background-attachment: fixed;
}
html[data-tgm-theme="dark"] body {
    background-color: #0f1115;
    background-image: none;
}
/* Full-width page wrappers (single-track <main>, gallery/browse page) fill
   themselves with the solid --tgm-lcm-bg token. On light pages that solid sat
   ON TOP of the body's champagne gradient and hid it (DOM-confirmed:
   main.tgm-lcm-single painted rgb(251,244,227)). Make these wrappers transparent
   in light so the themed body gradient flows straight through, matching the
   homepage. Light-scoped so dark pages keep their solid surface. NOTE: any new
   full-width front-end page wrapper that uses `background: var(--tgm-lcm-bg)`
   must be added here, or it will hide the gradient the same way. */
html[data-tgm-theme="light"] .tgm-lcm-single,
html[data-tgm-theme="light"] .tgm-lcm-gallery { background: transparent; }

/* ── Hardwire the theme's STRUCTURAL backgrounds (Kadence-agnostic) ──
 * The plugin owns the page/content/header/footer backgrounds so they toggle
 * with the theme and don't have to be managed in Kadence. Inner layout
 * wrappers are made transparent (the themed <body> background shows through);
 * the header + footer get an explicit per-theme colour (solid, so sticky
 * headers don't bleed). Broad selector net + !important because Kadence sets
 * these with high specificity. Set your Kadence colours back to default — the
 * plugin overrides them. */
html[data-tgm-theme] .wp-site-blocks,
html[data-tgm-theme] #wrapper,
html[data-tgm-theme] #inner-wrap,
html[data-tgm-theme] .content-wrap,
html[data-tgm-theme] .content-container,
html[data-tgm-theme] .content-area,
html[data-tgm-theme] #primary,
html[data-tgm-theme] .site-content,
html[data-tgm-theme] #main,
html[data-tgm-theme] .site-main,
html[data-tgm-theme] .content-bg,
html[data-tgm-theme] .site-container { background: transparent !important; }

/* Header + footer — transparent so the themed body gradient flows straight
   through (Mike: keep it all one gradient, no separate header colour). Broad
   net so it works on interior pages too (which don't use the front-page's
   transparent-header), incl. any Kadence page-title hero above the content. */
html[data-tgm-theme] #masthead,
html[data-tgm-theme] .site-header,
html[data-tgm-theme] .site-header-wrap,
html[data-tgm-theme] .site-header-row-container,
html[data-tgm-theme] .site-header-row-container-inner,
html[data-tgm-theme] .site-header-inner-wrap,
html[data-tgm-theme] .site-main-header-inner-wrap,
html[data-tgm-theme] .site-top-header-inner-wrap,
html[data-tgm-theme] .site-bottom-header-inner-wrap,
html[data-tgm-theme] .kadence-sticky-header,
html[data-tgm-theme] .entry-hero-container,
html[data-tgm-theme] .entry-hero,
html[data-tgm-theme] .kadence-title-above,
html[data-tgm-theme] .kadence-title-above-container,
html[data-tgm-theme] .entry-header,
html[data-tgm-theme] #colophon,
html[data-tgm-theme] .site-footer-row-container-inner {
    background: transparent !important;
}

/* ── Cards: gold-gradient body, white text, deep shadow, no border ── */
html[data-tgm-theme="light"] .tgm-lcm-card { background: transparent; border: 0; box-shadow: 0 10px 24px var(--tgm-lcm-gold-deep); }
html[data-tgm-theme="light"] .tgm-lcm-card-body { background: var(--tgm-lcm-gold-roll); box-shadow: var(--tgm-lcm-gold-sheen); }
html[data-tgm-theme="light"] .tgm-lcm-card-title a,
html[data-tgm-theme="light"] .tgm-lcm-card-title a:hover { color: var(--tgm-lcm-gold-cream); }
html[data-tgm-theme="light"] .tgm-lcm-card-artist,
html[data-tgm-theme="light"] .tgm-lcm-card-artist a,
html[data-tgm-theme="light"] .tgm-lcm-card-comments,
html[data-tgm-theme="light"] .tgm-lcm-card .tgm-lcm-rating-avg,
html[data-tgm-theme="light"] .tgm-lcm-card .tgm-lcm-rating-count,
html[data-tgm-theme="light"] .tgm-lcm-card .tgm-lcm-rating-meta,
html[data-tgm-theme="light"] .tgm-lcm-card .tgm-lcm-rating-empty { color: rgba(255, 248, 236, 0.85); }
html[data-tgm-theme="light"] .tgm-lcm-card-image-placeholder { background: linear-gradient(135deg, #d8b974, #9c7220) !important; }
html[data-tgm-theme="light"] .tgm-lcm-hero-art { box-shadow: 0 18px 40px var(--tgm-lcm-gold-deep); }
/* Interior single-track artwork — same deep shadow as the homepage hero. */
html[data-tgm-theme="light"] .tgm-lcm-single-artwork { box-shadow: 0 18px 40px var(--tgm-lcm-gold-deep); }
/* Lyrics panel — gold corner glow + shadow (matches cards / blog). */
html[data-tgm-theme="light"] .tgm-lcm-lyrics {
    background:
        radial-gradient(circle at top left, rgba(214, 170, 80, 0.22), rgba(214, 170, 80, 0) 24%),
        var(--tgm-lcm-surface);
    box-shadow: 0 10px 24px rgba(60, 42, 8, 0.16);
}

/* ── Primary CTAs → white "outline" button (white face, gold corner glow,
 *    gold-gradient border, bronze text). !important to beat per-button +
 *    Kadence styles. ── */
html[data-tgm-theme="light"] .tgm-lcm-hero-cta,
html[data-tgm-theme="light"] .tgm-lcm-join-band-cta,
html[data-tgm-theme="light"] .tgm-lcm-comments-gate-cta,
html[data-tgm-theme="light"] .tgm-lcm-member-cta,
html[data-tgm-theme="light"] .tgm-lcm-comments .tgm-lcm-comment-submit,
html[data-tgm-theme="light"] .tgm-lcm-comments .comment-form .submit,
html[data-tgm-theme="light"] .tgm-lcm-comments .comment-form input[type="submit"] {
    color: #8a6014 !important;
    border: 2px solid transparent !important;
    background:
        radial-gradient(circle at top left, rgba(214, 170, 80, 0.40), rgba(214, 170, 80, 0) 46%),
        radial-gradient(circle at bottom right, rgba(214, 170, 80, 0.24), rgba(214, 170, 80, 0) 46%),
        linear-gradient(#fffdf7, #fffdf7),
        linear-gradient(135deg, #e8c66e, #8a6418) !important;
    background-clip: padding-box, padding-box, padding-box, border-box !important;
    background-origin: border-box !important;
    box-shadow: 0 6px 15px var(--tgm-lcm-gold-deep) !important;
    text-shadow: none !important;
}
html[data-tgm-theme="light"] .tgm-lcm-hero-cta:hover,
html[data-tgm-theme="light"] .tgm-lcm-join-band-cta:hover,
html[data-tgm-theme="light"] .tgm-lcm-comments-gate-cta:hover,
html[data-tgm-theme="light"] .tgm-lcm-member-cta:hover,
html[data-tgm-theme="light"] .tgm-lcm-comments .tgm-lcm-comment-submit:hover { filter: brightness(1.02); }

/* ── Gate / join panels → gold panel, white text (CTA stays the white button) ── */
html[data-tgm-theme="light"] .tgm-lcm-comments-gate,
html[data-tgm-theme="light"] .tgm-lcm-join-band {
    background: var(--tgm-lcm-gold-roll);
    box-shadow: var(--tgm-lcm-gold-sheen), 0 14px 32px var(--tgm-lcm-gold-deep);
    border: 0;
}
html[data-tgm-theme="light"] .tgm-lcm-comments-gate-title,
html[data-tgm-theme="light"] .tgm-lcm-comments-gate-body,
html[data-tgm-theme="light"] .tgm-lcm-join-band-title,
html[data-tgm-theme="light"] .tgm-lcm-join-band-sub { color: var(--tgm-lcm-gold-cream); }
html[data-tgm-theme="light"] .tgm-lcm-join-band-secondary,
html[data-tgm-theme="light"] .tgm-lcm-comments-gate-secondary { color: rgba(255, 248, 236, 0.9); }

/* ── Homepage section headings → bronze + fading gold divider (lab look) ── */
html[data-tgm-theme="light"] .tgm-lcm-home-heading { color: var(--tgm-lcm-accent); display: flex; align-items: center; gap: 12px; }
html[data-tgm-theme="light"] .tgm-lcm-home-heading::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #b8862f, transparent); opacity: 0.55; }
html[data-tgm-theme="light"] .tgm-lcm-hero-eyebrow { color: var(--tgm-lcm-accent); }

/* ── Player → gold bar, white features, top edge only, upward warm shadow ── */
html[data-tgm-theme="light"] .tgm-lcm-player {
    background: var(--tgm-lcm-gold-roll-h);
    border-top: 1px solid rgba(255, 255, 255, 0.30);
    color: var(--tgm-lcm-gold-cream);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 -9px 22px var(--tgm-lcm-gold-deep);
}
html[data-tgm-theme="light"] .tgm-lcm-player-title { color: var(--tgm-lcm-gold-cream); }
html[data-tgm-theme="light"] .tgm-lcm-player-title:hover { color: #fff; }
html[data-tgm-theme="light"] .tgm-lcm-player-status,
html[data-tgm-theme="light"] .tgm-lcm-player-times,
html[data-tgm-theme="light"] .tgm-lcm-player-volume,
html[data-tgm-theme="light"] .tgm-lcm-player-close,
html[data-tgm-theme="light"] .tgm-lcm-player .tgm-lcm-rating-avg,
html[data-tgm-theme="light"] .tgm-lcm-player .tgm-lcm-rating-count,
html[data-tgm-theme="light"] .tgm-lcm-player .tgm-lcm-rating-meta { color: rgba(255, 248, 236, 0.82); }
html[data-tgm-theme="light"] .tgm-lcm-player-btn { color: var(--tgm-lcm-gold-cream); }
html[data-tgm-theme="light"] .tgm-lcm-player-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
html[data-tgm-theme="light"] .tgm-lcm-player-btn:focus,
html[data-tgm-theme="light"] .tgm-lcm-player-btn:active { color: #fff !important; }
/* Active shuffle/repeat on the gold bar: a cream filled circle with a deep
   bronze icon — a plain white icon was invisible against the gold-cream idle. */
html[data-tgm-theme="light"] .tgm-lcm-player-toggle.is-active { color: #5c3f0e !important; background: #fffdf7 !important; }
html[data-tgm-theme="light"] .tgm-lcm-player-volume-input::-webkit-slider-runnable-track { background: rgba(40, 28, 6, 0.55); }
html[data-tgm-theme="light"] .tgm-lcm-player-volume-input::-moz-range-track { background: rgba(40, 28, 6, 0.55); }
html[data-tgm-theme="light"] .tgm-lcm-player-volume-input::-webkit-slider-thumb { background: #e60000; }
html[data-tgm-theme="light"] .tgm-lcm-player-volume-input::-moz-range-thumb { background: #e60000; }
/* No-preview gate: cream text on the gold player gradient (the white "Sign up
   free" pill from player.css already reads on gold). */
html[data-tgm-theme="light"] .tgm-lcm-player-gate-msg { color: var(--tgm-lcm-gold-cream); text-shadow: 0 1px 2px rgba(40, 28, 6, 0.45); }
html[data-tgm-theme="light"] .tgm-lcm-player-gate-login { color: rgba(255, 248, 236, 0.9); }
html[data-tgm-theme="light"] .tgm-lcm-player-gate-login:hover { color: #fff; }

/* ════════════════════════════════════════════════════════════════
 * THEME CONTROLS — "Play all" + light/dark toggle. Fixed top-left
 * (opposite the notifications bell). Token-driven so the pill itself
 * adapts to whichever theme is active.
 * ════════════════════════════════════════════════════════════════ */
/* ── Bottom app bar ──────────────────────────────────────────────────────
   A single persistent bar docked at the very bottom; the player docks just
   above it (player.css uses --tgm-lcm-appbar-h). One CENTERED group —
   Playlists · bell · Share App · theme toggle — kept off the screen edges so
   everything is reachable on a phone (Dayer: the toggle was jammed into the
   corner). Account/auth links moved out to .tgm-lcm-pagelinks (page bottom).
   Re-parented to <body> in theme-toggle.js so it escapes any transformed/
   clipping ancestor. */
:root { --tgm-lcm-appbar-h: 58px; --tgm-lcm-player-h: 84px; }

.tgm-lcm-appbar {
    position: fixed; inset: auto 0 0 0; z-index: 100001;
    background: var(--tgm-lcm-surface-2);
    border-top: 1px solid var(--tgm-lcm-border-strong);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
    font-family: var(--tgm-lcm-font);
}
.tgm-lcm-appbar-inner {
    max-width: 1100px; margin: 0 auto; box-sizing: border-box;
    min-height: var(--tgm-lcm-appbar-h);
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 8px 14px;
}
.tgm-lcm-appbar-group { display: flex; align-items: center; gap: 10px; }

/* Respect the phone safe-area insets; centering already keeps the controls
   away from the edges (Dayer). */
.tgm-lcm-appbar-inner {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
}
.tgm-lcm-appbar-controls { flex: 0 0 auto; }
/* The share control is a <button> reusing the link style — flatten UA chrome. */
button.tgm-lcm-appbar-link { background: none; font: inherit; cursor: pointer; }

/* Account / Log out (or Log in / Sign up) — the very bottom of the page flow,
   just above where the fixed bar hovers (Dayer moved these out of the bar). */
.tgm-lcm-pagelinks {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    padding: 26px 16px 30px;
    font-family: var(--tgm-lcm-font);
}
@media (max-width: 480px) {
    .tgm-lcm-appbar-inner {
        gap: 6px;
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    .tgm-lcm-appbar-group { gap: 6px; }
    .tgm-lcm-appbar-link { padding: 7px 8px; }
}
.tgm-lcm-appbar-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 9px;
    color: var(--tgm-lcm-text); text-decoration: none;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tgm-lcm-appbar-link:hover { color: var(--tgm-lcm-accent); background: var(--tgm-lcm-surface); }
.tgm-lcm-appbar-ico { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.tgm-lcm-appbar-link--cta {
    background: var(--tgm-lcm-accent); color: var(--tgm-lcm-accent-text); border-color: var(--tgm-lcm-accent);
}
.tgm-lcm-appbar-link--cta:hover { background: var(--tgm-lcm-accent-hover); color: var(--tgm-lcm-accent-text); }
.tgm-lcm-appbar-bellslot { display: inline-flex; align-items: center; }

/* Bell, moved into the bar by notifications.js: drop the floating edge-tab
   look, sit inline, and open its panel UPWARD (the bar is at the bottom).
   Scoped under .tgm-lcm-appbar so it beats notifications.css by specificity. */
.tgm-lcm-appbar .tgm-lcm-bell { position: relative; top: auto; right: auto; z-index: auto; }
.tgm-lcm-appbar .tgm-lcm-bell-btn {
    border-radius: 9px; border: 1px solid var(--tgm-lcm-border-strong);
    border-right: 1px solid var(--tgm-lcm-border-strong);
    padding: 7px 10px; box-shadow: none;
}
.tgm-lcm-appbar .tgm-lcm-bell-btn:hover { transform: none; }
.tgm-lcm-appbar .tgm-lcm-bell-panel { top: auto; bottom: calc(100% + 10px); right: 0; }

/* On a phone the bell sits near the right of the bar, so anchoring the panel to
   the bell (right: 0) ran its left edge off-screen. Center it to the viewport
   and rise it from just above the bar instead. Slide-up is pure CSS — the panel
   still toggles via the [hidden] attribute (no JS change). */
@media (max-width: 600px) {
    .tgm-lcm-appbar .tgm-lcm-bell-panel {
        position: fixed;
        left: 50%; right: auto;
        transform: translateX(-50%);
        bottom: calc(var(--tgm-lcm-appbar-h, 58px) + 10px);
        top: auto;
        width: calc(100vw - 20px);
        max-width: 420px;
        max-height: 60vh;
    }
    .tgm-lcm-appbar .tgm-lcm-bell-panel:not([hidden]) {
        animation: tgm-lcm-bell-rise 0.22s ease;
    }
}
@keyframes tgm-lcm-bell-rise {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tgm-lcm-appbar .tgm-lcm-bell-panel:not([hidden]) { animation: none; }
}

/* Body spacer: always reserve room for the bar, and add the player's height
   while it's open. JS toggles `tgm-lcm-player-open` on <body> — cross-browser,
   unlike the old `:has()` rule which Firefox/Waterfox ignored (so the player
   covered the footer there). */
body { padding-bottom: var(--tgm-lcm-appbar-h); }
body.tgm-lcm-player-open { padding-bottom: calc(var(--tgm-lcm-appbar-h) + var(--tgm-lcm-player-h)); }

/* PWA install / iOS "Add to Home Screen" pill — docked just above the app bar
   (injected by pwa.js, only when installable; dismissible). */
.tgm-lcm-install {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--tgm-lcm-appbar-h, 58px) + 12px);
    z-index: 100002; display: flex; align-items: center; gap: 4px;
    max-width: calc(100vw - 24px);
    background: var(--tgm-lcm-surface); color: var(--tgm-lcm-text);
    border: 1px solid var(--tgm-lcm-border-strong); border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    padding: 6px 6px 6px 6px; font-family: var(--tgm-lcm-font);
}
.tgm-lcm-install-main {
    display: flex; align-items: center; gap: 9px;
    background: none; border: 0; cursor: pointer; color: inherit;
    font: inherit; font-weight: 600; font-size: 14px;
    padding: 4px 8px; border-radius: 999px;
}
button.tgm-lcm-install-main:hover { background: rgba(127, 127, 127, 0.14); }
.tgm-lcm-install-icon { width: 28px; height: 28px; border-radius: 7px; display: block; flex: 0 0 auto; }
.tgm-lcm-install-label { line-height: 1.2; text-align: left; }
.tgm-lcm-install-close {
    background: none; border: 0; cursor: pointer; color: var(--tgm-lcm-text-muted);
    font-size: 20px; line-height: 1; padding: 2px 8px; border-radius: 50%; flex: 0 0 auto;
}
.tgm-lcm-install-close:hover { color: var(--tgm-lcm-text); }
/* Lift above the player when it's open. */
body.tgm-lcm-player-open .tgm-lcm-install {
    bottom: calc(var(--tgm-lcm-appbar-h, 58px) + var(--tgm-lcm-player-h, 84px) + 12px);
}

/* iOS "how to install" sheet — opened by tapping the Add-to-Home-Screen pill. */
.tgm-lcm-ios-sheet {
    position: fixed; inset: 0; z-index: 100003;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    font-family: var(--tgm-lcm-font);
}
.tgm-lcm-ios-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.tgm-lcm-ios-sheet-box {
    position: relative; width: 100%; max-width: 360px;
    background: var(--tgm-lcm-surface); color: var(--tgm-lcm-text);
    border: 1px solid var(--tgm-lcm-border-strong); border-radius: var(--tgm-lcm-radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    padding: 26px 24px 22px; text-align: center;
}
.tgm-lcm-ios-sheet-close {
    position: absolute; top: 6px; right: 12px; background: none; border: 0;
    font-size: 24px; line-height: 1; color: var(--tgm-lcm-text-muted); cursor: pointer;
}
.tgm-lcm-ios-sheet-close:hover { color: var(--tgm-lcm-text); }
.tgm-lcm-ios-sheet-icon { width: 64px; height: 64px; border-radius: 14px; display: block; margin: 0 auto 12px; }
.tgm-lcm-ios-sheet-title { margin: 0 0 16px; font-size: 18px; color: var(--tgm-lcm-text); }
.tgm-lcm-ios-sheet-steps {
    text-align: left; margin: 0 0 20px; padding: 0 0 0 22px;
    color: var(--tgm-lcm-text-muted); font-size: 15px; line-height: 1.7;
}
.tgm-lcm-ios-sheet-steps li { margin: 0 0 8px; }
.tgm-lcm-ios-share { vertical-align: -3px; color: var(--tgm-lcm-accent); }
.tgm-lcm-ios-sheet-done {
    background: var(--tgm-lcm-accent); color: var(--tgm-lcm-accent-text);
    border: 0; border-radius: 999px; padding: 11px 30px;
    font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.tgm-lcm-ios-sheet-done:hover { background: var(--tgm-lcm-accent-hover); }
.tgm-lcm-playall {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--tgm-lcm-accent); color: var(--tgm-lcm-accent-text);
    border: 0; border-radius: 8px; padding: 0 11px; height: 34px;
    font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.tgm-lcm-playall:hover { background: var(--tgm-lcm-accent-hover); }
.tgm-lcm-playall-icon { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent currentColor; display: inline-block; }
.tgm-lcm-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--tgm-lcm-surface);
    border: 1px solid var(--tgm-lcm-border); color: var(--tgm-lcm-text);
    cursor: pointer; padding: 0;
}
.tgm-lcm-theme-toggle:hover { border-color: var(--tgm-lcm-accent); color: var(--tgm-lcm-accent); }
.tgm-lcm-theme-toggle:focus-visible { outline: 2px solid var(--tgm-lcm-accent); outline-offset: 2px; }
.tgm-lcm-theme-toggle svg { width: 17px; height: 17px; display: block; }
/* Show the moon on light (→ dark), the sun on dark (→ light). */
html[data-tgm-theme="light"] .tgm-lcm-ico-sun { display: none; }
html[data-tgm-theme="dark"] .tgm-lcm-ico-moon { display: none; }

/* Kill Kadence's blue button background on hover/focus/active (same fix used on
   the bell + player buttons) — own these states ourselves. */
.tgm-lcm-playall,
.tgm-lcm-playall:hover,
.tgm-lcm-playall:focus,
.tgm-lcm-playall:active {
    -webkit-appearance: none !important; appearance: none !important;
    box-shadow: none !important; text-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    color: var(--tgm-lcm-accent-text) !important; border: 0 !important;
}
.tgm-lcm-playall { background: var(--tgm-lcm-accent) !important; }
.tgm-lcm-playall:hover { background: var(--tgm-lcm-accent-hover) !important; }
.tgm-lcm-playall:focus:not(:focus-visible) { outline: none !important; }
.tgm-lcm-playall:focus-visible { outline: 2px solid var(--tgm-lcm-accent-text) !important; outline-offset: -3px; }

.tgm-lcm-theme-toggle,
.tgm-lcm-theme-toggle:hover,
.tgm-lcm-theme-toggle:focus,
.tgm-lcm-theme-toggle:active {
    -webkit-appearance: none !important; appearance: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.tgm-lcm-theme-toggle { background: var(--tgm-lcm-surface) !important; color: var(--tgm-lcm-text) !important; }
.tgm-lcm-theme-toggle:hover { background: var(--tgm-lcm-surface) !important; border-color: var(--tgm-lcm-accent) !important; color: var(--tgm-lcm-accent) !important; }
.tgm-lcm-theme-toggle:focus:not(:focus-visible) { outline: none !important; }
.tgm-lcm-theme-toggle:focus-visible { outline: 2px solid var(--tgm-lcm-accent) !important; outline-offset: 2px; }

/* Phones / narrow windows: tighten the bar so the labelled buttons still fit a
   row. Labels ALWAYS stay — a wordless blob means nothing (Mike) — so we shrink
   type, padding, and icons instead of hiding text. */
@media (max-width: 600px) {
    .tgm-lcm-appbar-inner { padding: 6px 8px; gap: 6px; }
    .tgm-lcm-appbar-group { gap: 6px; }
    .tgm-lcm-appbar-link { padding: 6px 8px; font-size: 12px; gap: 5px; }
    .tgm-lcm-appbar-ico { width: 15px; height: 15px; }
    .tgm-lcm-appbar-link--cta { padding: 6px 12px; }
    .tgm-lcm-playall { height: 32px; padding: 0 10px; font-size: 12px; }
    .tgm-lcm-theme-toggle { width: 32px; height: 32px; }
    .tgm-lcm-theme-toggle svg { width: 15px; height: 15px; }
}

/* ── Password show/hide "eyeball" (added to every password field by
      theme-toggle.js → setupPasswordToggles). ── */
.tgm-lcm-pw-wrap { position: relative; display: block; }
.tgm-lcm-pw-wrap input { padding-right: 44px !important; box-sizing: border-box; }
.tgm-lcm-pw-eye {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin: 0;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    cursor: pointer; color: var(--tgm-lcm-text-muted);
    -webkit-appearance: none; appearance: none;
}
.tgm-lcm-pw-eye:hover { color: var(--tgm-lcm-accent); }
.tgm-lcm-pw-eye:focus:not(:focus-visible) { outline: none; }
.tgm-lcm-pw-eye:focus-visible { outline: 2px solid var(--tgm-lcm-accent); outline-offset: 2px; border-radius: 6px; }
.tgm-lcm-pw-eye .tgm-lcm-eye { width: 20px; height: 20px; display: block; }
.tgm-lcm-pw-eye .tgm-lcm-eye-hide { display: none; }
.tgm-lcm-pw-eye.is-revealed .tgm-lcm-eye-show { display: none; }
.tgm-lcm-pw-eye.is-revealed .tgm-lcm-eye-hide { display: block; }

/* ── Golden treatments for the Latest-tracks list rows + blog teaser:
 *    a soft shadow + a slight gold glow in the upper-left corner. ── */
html[data-tgm-theme="light"] .tgm-lcm-track-list-item {
    background:
        radial-gradient(circle at top left, rgba(214, 170, 80, 0.22), rgba(214, 170, 80, 0) 30%),
        #fffdf7;
    box-shadow: 0 6px 16px rgba(60, 42, 8, 0.16);
}
html[data-tgm-theme="light"] .tgm-lcm-track-list-item:hover { border-color: var(--tgm-lcm-accent); }
/* The list-row play heart's drop-shadow is a harsh dark halo on a white row —
   soften it to a warm, lighter shadow. */
html[data-tgm-theme="light"] .tgm-lcm-track-list-play { filter: drop-shadow(0 3px 7px rgba(60, 42, 8, 0.30)) !important; }

html[data-tgm-theme="light"] .tgm-lcm-blog-teaser {
    background:
        radial-gradient(circle at top left, rgba(214, 170, 80, 0.22), rgba(214, 170, 80, 0) 24%),
        #fffdf7;
    box-shadow: 0 10px 24px rgba(60, 42, 8, 0.16);
}