/**
 * Musical Staff Canvas - PianoMode
 * Premium slide-out canvas with musical staff icon
 * @version 1.0.0
 */

/* Montserrat font loaded via functions.php preload for better LCP */

/* ===================================================
   VARIABLES
   =================================================== */

:root {
    --pm-gold: #D7BF81;
    --pm-gold-dark: #BEA86E;
    --pm-gold-light: #E6D4A8;
    --pm-gold-pale: #F5EED9;
    --pm-gold-pale-light: #FAF7EE;
    --pm-gold-pale-medium: #EDE4CA;
    --pm-black: #0a0a0a;
    --pm-black-medium: #1a1a1a;
    --pm-white: #ffffff;
    --pm-font: 'Montserrat', sans-serif;
}

/* ===================================================
   MUSICAL STAFF BUTTON (remplace MORE)
   =================================================== */

.nav-more {
    position: relative;
}

.nav-staff-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
}

.nav-staff-trigger:hover {
    background: rgba(215, 191, 129, 0.1);
    transform: translateY(-2px);
}

/* Icône Musical Staff SVG */
.nav-staff-icon {
    width: 32px;
    height: 20px;
    transition: all 0.3s ease;
}

.nav-staff-trigger:hover .nav-staff-icon {
    filter: drop-shadow(0 0 6px rgba(215, 191, 129, 0.5));
    transform: scale(1.05);
}

.nav-staff-trigger:hover .nav-staff-icon line {
    stroke: var(--pm-gold);
}

.nav-staff-trigger:hover .nav-staff-icon ellipse,
.nav-staff-trigger:hover .nav-staff-icon path {
    fill: var(--pm-gold-light);
    stroke: var(--pm-gold-light);
}

/* ===================================================
   SLIDE-OUT CANVAS OVERLAY (30% from right)
   =================================================== */

.pm-canvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Raised above hero contrast/transition layers (some hero ::before/::after
       fades use z-index: 9999) so the staff panel always sits on top on
       mobile and never gets clipped or recoloured by hero overlays. */
    z-index: 2147483646;
}

.pm-canvas-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.pm-slide-canvas {
    position: fixed;
    top: 0;
    right: 0;
    width: 30%;
    min-width: 380px;
    max-width: 500px;
    height: 100vh;
    height: 100svh;
    background: linear-gradient(180deg,
        rgba(25, 25, 25, 0.98) 0%,
        rgba(15, 15, 15, 0.99) 50%,
        var(--pm-black) 100%);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2147483647; /* max int — guaranteed above every hero overlay */
    overflow-y: auto;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.5);
    border-left: 2px solid var(--pm-gold-pale);
}

.pm-slide-canvas.active {
    transform: translateX(0) !important;
    visibility: visible !important;
}

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

.pm-canvas-header {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg,
        rgba(25, 25, 25, 0.98) 0%,
        rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(20px);
    padding: 30px;
    padding-top: 30px;
    /* No separator line between the search and the account button (owner). */
    border-bottom: 0;
    z-index: 10;
}

.pm-canvas-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 5px;
}

.pm-canvas-close-inline {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--pm-gold-pale);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.pm-canvas-close-inline:hover {
    /* No animation on the close cross (owner) — just a quiet tint shift. */
    transform: none;
    background: rgba(215, 191, 129, 0.15);
    border-color: var(--pm-chrome-accent);
}

.pm-canvas-close-inline svg {
    width: 18px;
    height: 18px;
    stroke: var(--pm-gold-pale);
    transition: all 0.3s ease;
}

.pm-canvas-close-inline:hover svg {
    stroke: var(--pm-gold);
}

/* ───────── THEME TOGGLE (sun / moon), grouped with the close button ───────── */
.pm-canvas-title-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.pm-theme-toggle {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1.5px solid var(--pm-gold-pale);
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--pm-chrome-text);
    transition: background .25s ease, border-color .25s ease, color .25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.pm-theme-toggle:hover {
    background: rgba(215, 191, 129, 0.15);
    border-color: var(--pm-chrome-accent);
    color: var(--pm-chrome-accent);
}
.pm-theme-toggle svg { width: 17px; height: 17px; }
.pm-theme-toggle__sun { display: none; }
.pm-theme-toggle.is-light .pm-theme-toggle__sun { display: block; }
.pm-theme-toggle.is-light .pm-theme-toggle__moon { display: none; }

/* ═══════════════════ LIGHT THEME (toggle) — Musical-Staff menu ═══════════════════
   Warm beige "paper" panel (design-system --pm-chrome-* tokens, lifted from
   the sight-reading palette), dark-ink text, deeper gold accents. The logo,
   the Sign-in pill and the Subscribe button keep their gold identity; the
   beige panel is what makes them pop. !important is used only where the dark
   base also used it (panel bg, title fill, search field) so the toggle wins
   without a specificity war. Default theme stays dark. */
html[data-theme="light"] .pm-slide-canvas {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(160, 137, 74, 0.12), transparent 55%),
        linear-gradient(180deg, var(--pm-chrome-surface) 0%, var(--pm-chrome-surface-2) 100%) !important;
    color: var(--pm-chrome-text);
    box-shadow:
        -1px 0 0 var(--pm-chrome-border-strong),
        -28px 0 70px rgba(70, 56, 24, 0.28) !important;
}
html[data-theme="light"] .pm-canvas-title-row {
    background: linear-gradient(180deg, rgba(244, 236, 214, 0.97), rgba(236, 224, 188, 0.92)) !important;
    border-bottom-color: var(--pm-chrome-border);
}
html[data-theme="light"] .pm-canvas-title {
    -webkit-text-fill-color: var(--pm-chrome-text) !important;
    color: var(--pm-chrome-text) !important;
    background: none !important;
}
html[data-theme="light"] .pm-canvas-header { border-bottom-color: var(--pm-chrome-border) !important; }
/* Search — keeps its character, just legible on beige. */
html[data-theme="light"] .pm-canvas-search { border-bottom-color: var(--pm-chrome-border-strong) !important; }
html[data-theme="light"] .pm-canvas-search-input,
html[data-theme="light"] .pm-slide-canvas input.pm-canvas-search-input {
    color: var(--pm-chrome-text) !important;
    -webkit-text-fill-color: var(--pm-chrome-text) !important;
    caret-color: var(--pm-chrome-accent) !important;
}
html[data-theme="light"] .pm-canvas-search-input::placeholder { color: var(--pm-chrome-text-muted); }
html[data-theme="light"] .pm-canvas-search-icon,
html[data-theme="light"] .pm-canvas-search-submit { color: var(--pm-chrome-accent) !important; }
/* Account card (logged-in). The logged-out Sign-in pill stays gold. */
html[data-theme="light"] .pm-canvas-account--in {
    background: var(--pm-chrome-elevated);
    border-color: var(--pm-chrome-border-strong);
}
html[data-theme="light"] .pm-canvas-account__name { color: var(--pm-chrome-text); }
html[data-theme="light"] .pm-canvas-account__chev { color: var(--pm-chrome-accent); }
/* Nav sections — Discover / More */
html[data-theme="light"] .pm-canvas-nav h3 { color: var(--pm-chrome-accent); }
html[data-theme="light"] .pm-canvas-nav h3::after { background: linear-gradient(90deg, var(--pm-chrome-accent), transparent); }
/* Nav "badges" on the beige panel — raised cream cards with a clear gold edge
   and a soft warm shadow so Listen/Learn/Play/Explore and the More items stand
   OUT from the background (owner: they blended in / weren't mis en valeur). */
html[data-theme="light"] .pm-canvas-nav-link {
    color: var(--pm-chrome-text);
    background: rgba(255, 255, 255, 0.58);
    border-color: var(--pm-chrome-border-strong);
    box-shadow: 0 2px 8px rgba(120, 96, 40, 0.08);
}
html[data-theme="light"] .pm-canvas-nav-link:hover {
    background: rgba(255, 255, 255, 0.86);
    border-color: var(--pm-chrome-accent);
    color: var(--pm-chrome-text);
    box-shadow: 0 6px 18px rgba(120, 96, 40, 0.16);
}
html[data-theme="light"] .pm-canvas-nav-link svg { stroke: var(--pm-chrome-accent); }
html[data-theme="light"] .pm-canvas-nav-link:hover svg { stroke: var(--pm-chrome-accent-strong); }
/* Primary "Discover" badges — brightest, most prominent cards. */
html[data-theme="light"] .pm-canvas-nav.pm-canvas-nav-primary .pm-canvas-nav-link {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.54) 100%);
    border-color: var(--pm-chrome-border-strong);
}
/* Secondary "More" badges — clearly visible, a touch quieter. */
html[data-theme="light"] .pm-canvas-nav.pm-canvas-nav-secondary .pm-canvas-nav-link {
    background: rgba(255, 255, 255, 0.46);
    border-color: var(--pm-chrome-border-strong);
    color: var(--pm-chrome-text);
}
/* Newsletter */
html[data-theme="light"] .pm-canvas-newsletter {
    background: linear-gradient(135deg, rgba(160, 137, 74, 0.10), rgba(160, 137, 74, 0.035));
    border-color: var(--pm-chrome-border);
}
html[data-theme="light"] .pm-canvas-newsletter-label { color: var(--pm-chrome-accent); }
html[data-theme="light"] .pm-canvas-newsletter-headline { color: var(--pm-chrome-text); }
html[data-theme="light"] .pm-canvas-newsletter-input {
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--pm-chrome-border-strong);
    color: var(--pm-chrome-text);
}
html[data-theme="light"] .pm-canvas-newsletter-input::placeholder { color: var(--pm-chrome-text-muted); }
html[data-theme="light"] .pm-canvas-newsletter-status { color: var(--pm-chrome-text-soft); }
/* Close + theme toggle controls */
html[data-theme="light"] .pm-canvas-close-inline,
html[data-theme="light"] .pm-theme-toggle {
    border-color: var(--pm-chrome-border-strong);
    color: var(--pm-chrome-accent);
}
html[data-theme="light"] .pm-canvas-close-inline svg { stroke: var(--pm-chrome-accent); }
/* Social row */
html[data-theme="light"] .pm-canvas-social-icon {
    color: var(--pm-chrome-text-soft);
    border-color: var(--pm-chrome-border);
}
html[data-theme="light"] .pm-canvas-social-icon:hover { color: var(--pm-chrome-accent); border-color: var(--pm-chrome-border-strong); }
/* Footer copyright band — a warm "doré beige" strip so the © PianoMode
   line is clearly contrasted on the light panel (owner request). Deep gold
   text; the higher-specificity selector beats the PALETTE-PIN accent below. */
html[data-theme="light"] .pm-canvas-footer {
    background: linear-gradient(180deg, rgba(160, 137, 74, 0.05) 0%, rgba(160, 137, 74, 0.13) 100%);
    border-top-color: var(--pm-chrome-border-strong);
}
html[data-theme="light"] .pm-slide-canvas .pm-canvas-footer-text {
    color: var(--pm-chrome-accent-strong) !important;
    opacity: 1;
}

.pm-canvas-title {
    font-family: var(--pm-font);
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg,
        var(--pm-gold-pale) 0%,
        var(--pm-gold-light) 50%,
        var(--pm-gold-pale) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.pm-canvas-subtitle {
    font-family: var(--pm-font);
    font-size: 0.9rem;
    color: var(--pm-chrome-text);
    font-weight: 500;
    opacity: 0.7;
}

/* ==========================================================================
   INTEGRATED SEARCH — refined, slim, ethereal.
   Icon + input + submit arrow are always on ONE line, fully responsive.
   Maximum specificity + !important to defeat any theme/plugin defaults.
   ========================================================================== */
.pm-slide-canvas form.pm-canvas-search,
form.pm-canvas-search {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 18px 0 4px !important;
    padding: 6px 2px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(215, 191, 129, 0.18) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color-scheme: light;
    transition: border-color .4s cubic-bezier(.22,1,.36,1);
}
.pm-canvas-search::after {
    /* Animated gold hairline that grows from the center on focus */
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--pm-gold) 20%,
        #E6D4A8 50%,
        var(--pm-gold) 80%,
        transparent 100%);
    transform: translateX(-50%);
    transition: width .5s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.pm-canvas-search:focus-within { border-bottom-color: transparent; }
.pm-canvas-search:focus-within::after { width: 100%; }

.pm-slide-canvas .pm-canvas-search-icon,
form.pm-canvas-search .pm-canvas-search-icon {
    display: inline-flex !important;
    color: var(--pm-chrome-accent) !important;
    opacity: 0.7;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    transition: opacity .3s cubic-bezier(.22,1,.36,1);
}
.pm-canvas-search:focus-within .pm-canvas-search-icon { opacity: 1; }

.pm-slide-canvas input.pm-canvas-search-input,
form.pm-canvas-search input.pm-canvas-search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 28px !important;
    background: transparent !important;
    /* iOS Safari paints a NATIVE white rounded field for input[type=search]
       unless appearance is reset — this was the "white search rectangle on
       mobile" the owner saw. Strip the native chrome so the field is the
       same dark surface as the rest of the panel. */
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--pm-font);
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--pm-chrome-text) !important;
    letter-spacing: 0.01em;
    caret-color: var(--pm-chrome-accent);
    /* iOS autofill override — never darken this input */
    -webkit-text-fill-color: var(--pm-chrome-text) !important;
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    transition: background-color 9999s ease-in-out 0s;
}
.pm-canvas-search-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 300;
    letter-spacing: 0.02em;
}
/* Kill the iOS/WebKit native search affordances (magnifier + white cancel
   bubble) that would otherwise punch a light shape into the dark field. */
.pm-canvas-search-input::-webkit-search-decoration,
.pm-canvas-search-input::-webkit-search-cancel-button,
.pm-canvas-search-input::-webkit-search-results-button,
.pm-canvas-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.pm-canvas-search-input:-webkit-autofill,
.pm-canvas-search-input:-webkit-autofill:hover,
.pm-canvas-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pm-chrome-text) !important;
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    caret-color: var(--pm-chrome-accent);
}
.pm-slide-canvas button.pm-canvas-search-submit,
form.pm-canvas-search button.pm-canvas-search-submit {
    flex: 0 0 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--pm-chrome-accent) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        color .3s cubic-bezier(.22,1,.36,1);
}
.pm-canvas-search-submit:hover {
    color: var(--pm-chrome-accent-strong) !important;
    transform: translateX(2px);
}
.pm-canvas-search-submit:focus-visible {
    outline: 1px solid var(--pm-gold);
    outline-offset: 3px;
}

/* PianoMode title + inline logo — bulletproof single-line layout.
   The link is an inline-flex row; the h2 and img are both flex items so
   the logo always sits to the RIGHT of the title, never below. */
.pm-slide-canvas .pm-canvas-title-link,
a.pm-canvas-title-link {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    text-decoration: none;
    color: inherit;
    -webkit-text-fill-color: inherit;
}
.pm-slide-canvas .pm-canvas-title-link .pm-canvas-title,
a.pm-canvas-title-link > .pm-canvas-title {
    display: inline-block !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
}
.pm-slide-canvas .pm-canvas-title-link .pm-canvas-title-logo,
a.pm-canvas-title-link > .pm-canvas-title-logo {
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    flex: 0 0 32px !important;
    border-radius: 50%;
    margin: 0 !important;
    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        filter .4s cubic-bezier(.22,1,.36,1);
    filter: drop-shadow(0 1px 6px rgba(215, 191, 129, 0.25));
}
.pm-canvas-title-link:hover .pm-canvas-title {
    filter: drop-shadow(0 2px 8px rgba(215, 191, 129, 0.5));
}
.pm-canvas-title-link:hover .pm-canvas-title-logo {
    transform: rotate(-6deg) scale(1.05);
    filter: drop-shadow(0 2px 10px rgba(215, 191, 129, 0.55));
}
@media (max-width: 480px) {
    .pm-slide-canvas .pm-canvas-title-link,
    a.pm-canvas-title-link { gap: 8px !important; }
    .pm-slide-canvas .pm-canvas-title-link .pm-canvas-title-logo,
    a.pm-canvas-title-link > .pm-canvas-title-logo {
        width: 26px !important;
        height: 26px !important;
        flex-basis: 26px !important;
    }
}

/* Discrete back-to-home link — between subtitle and nav modules */
.pm-canvas-back-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 4px 10px;
    font-family: var(--pm-font);
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}
.pm-canvas-back-home:hover {
    color: var(--pm-chrome-accent);
    background: rgba(215, 191, 129, 0.08);
}
.pm-canvas-back-home svg {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.pm-canvas-back-home:hover svg {
    opacity: 1;
    stroke: var(--pm-gold);
}

/* ===================================================
   CANVAS CONTENT
   =================================================== */

.pm-canvas-content {
    padding: 30px;
}

/* ═══════════ ACCOUNT ENTRY (under search, above Discover) ═══════════
   Fully integrated with the dark panel; gold accents. Logged-out = a
   gold "Sign in" pill; logged-in = a rounded card with the user avatar. */
.pm-canvas-account {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    /* Inside the top component, just under the search field — no divider
       between them; the divider sits below this whole group. */
    margin: 14px 0 2px;
    padding: 12px 16px;
    border-radius: 16px;
    text-decoration: none;
    font-family: var(--pm-font);
    transition: transform .25s cubic-bezier(.22,1,.36,1),
                border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
/* Logged OUT — gold pill */
.pm-canvas-account--out {
    justify-content: center;
    color: #1b1505;
    background: linear-gradient(135deg, var(--pm-gold-bright, #E6D4A8) 0%, var(--pm-gold, #D7BF81) 48%, var(--pm-gold-dark, #BEA86E) 100%);
    border: 1px solid rgba(245, 237, 214, 0.45);
    box-shadow: 0 6px 20px rgba(215, 191, 129, 0.18), inset 0 1px 0 rgba(255,255,255,0.4);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.pm-canvas-account--out:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(215, 191, 129, 0.34), inset 0 1px 0 rgba(255,255,255,0.5);
    filter: saturate(1.05);
}
.pm-canvas-account--out .pm-canvas-account__icon { width: 18px; height: 18px; }
.pm-canvas-account--out .pm-canvas-account__arrow { width: 17px; height: 17px; transition: transform .25s ease; }
.pm-canvas-account--out:hover .pm-canvas-account__arrow { transform: translateX(3px); }
.pm-canvas-account--out .pm-canvas-account__label { font-size: 0.95rem; }
/* Logged IN — dark card with avatar */
.pm-canvas-account--in {
    color: var(--pm-chrome-text);
    background: linear-gradient(180deg, rgba(245,238,217,0.06), rgba(245,238,217,0.02));
    border: 1px solid rgba(245, 238, 217, 0.18);
}
.pm-canvas-account--in:hover {
    transform: translateY(-2px);
    border-color: rgba(215, 191, 129, 0.5);
    background: linear-gradient(180deg, rgba(245,238,217,0.12), rgba(245,238,217,0.05));
    box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}
.pm-canvas-account__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(215, 191, 129, 0.55);
    box-shadow: 0 0 0 3px rgba(215, 191, 129, 0.10);
    background: #1a1814;
}
.pm-canvas-account__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-canvas-account__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pm-canvas-account__text .pm-canvas-account__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pm-chrome-accent);
}
.pm-canvas-account__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pm-chrome-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-canvas-account__chev { flex: 0 0 auto; width: 18px; height: 18px; opacity: 0.6; transition: transform .25s ease, opacity .25s ease; }
.pm-canvas-account--in:hover .pm-canvas-account__chev { transform: translateX(3px); opacity: 1; }

/* Navigation principale */
.pm-canvas-nav {
    margin-bottom: 30px;
}

/* Section primaire (Discover) — the hero of the menu: larger tap targets,
   a subtle gold-tinted surface and bigger glyphs so it clearly outranks More. */
.pm-canvas-nav.pm-canvas-nav-primary {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(245, 238, 217, 0.15);
}
.pm-canvas-nav.pm-canvas-nav-primary .pm-canvas-nav-link {
    padding: 17px 18px;
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, rgba(245, 238, 217, 0.06), rgba(245, 238, 217, 0.02));
    border-color: rgba(245, 238, 217, 0.20);
}
.pm-canvas-nav.pm-canvas-nav-primary .pm-canvas-nav-link svg {
    width: 24px;
    height: 24px;
}
.pm-canvas-nav.pm-canvas-nav-primary .pm-canvas-nav-link:hover {
    background: linear-gradient(180deg, rgba(245, 238, 217, 0.13), rgba(245, 238, 217, 0.05));
}

/* Section secondaire (More) — deliberately quieter and more compact. */
.pm-canvas-nav.pm-canvas-nav-secondary {
    margin-bottom: 22px;
}

.pm-canvas-nav.pm-canvas-nav-secondary .pm-canvas-nav-link {
    padding: 8px 13px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 4px;
    border-radius: 10px;
    border-color: rgba(245, 238, 217, 0.07);
    background: rgba(255, 255, 255, 0.012);
    color: var(--pm-chrome-text-soft);
}

.pm-canvas-nav.pm-canvas-nav-secondary .pm-canvas-nav-link svg {
    width: 15px;
    height: 15px;
    opacity: 0.6;
}

.pm-canvas-nav h3 {
    font-family: var(--pm-font);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pm-chrome-text);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-canvas-nav h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        var(--pm-gold-pale) 0%,
        transparent 100%);
}

.pm-canvas-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(245, 238, 217, 0.15);
    border-radius: 12px;
    text-decoration: none;
    color: var(--pm-chrome-text);
    font-family: var(--pm-font);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: none;
}

.pm-canvas-nav-link:hover {
    background: rgba(245, 238, 217, 0.08);
    border-color: var(--pm-chrome-text);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    color: var(--pm-chrome-accent);
}

.pm-canvas-nav-link svg {
    width: 20px;
    height: 20px;
    stroke: var(--pm-gold-pale);
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.pm-canvas-nav-link:hover svg {
    stroke: var(--pm-gold-light);
    filter: drop-shadow(0 0 4px rgba(245, 238, 217, 0.3));
}

/* Latest Publications */
.pm-canvas-section {
    margin-bottom: 30px;
}

.pm-canvas-section h3 {
    font-family: var(--pm-font);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pm-chrome-text);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-canvas-section h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        var(--pm-gold-pale) 0%,
        transparent 100%);
}

/* Publication Card */
.pm-pub-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(245, 238, 217, 0.15);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: none;
}

.pm-pub-card:hover {
    background: rgba(245, 238, 217, 0.08);
    border-color: var(--pm-chrome-text);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.pm-pub-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.pm-pub-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(245, 238, 217, 0.2);
}

.pm-pub-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-pub-info {
    flex: 1;
}

.pm-pub-title {
    font-family: var(--pm-font);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pm-chrome-text);
    margin-bottom: 5px;
    line-height: 1.3;
}

.pm-pub-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pm-font);
    font-size: 0.7rem;
    color: var(--pm-chrome-text);
    opacity: 0.6;
}

.pm-pub-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(215, 191, 129, 0.15);
    border: 1px solid rgba(215, 191, 129, 0.3);
    border-radius: 9999px;
    color: var(--pm-chrome-text-soft);
    font-weight: 700;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pm-pub-excerpt {
    font-family: var(--pm-font);
    font-size: 0.8rem;
    color: var(--pm-chrome-text);
    opacity: 0.7;
    line-height: 1.5;
    margin-top: 8px;
}

/* Loading state */
.pm-pub-loading {
    text-align: center;
    padding: 30px;
    color: var(--pm-chrome-text);
    opacity: 0.5;
    font-family: var(--pm-font);
    font-size: 0.9rem;
}

/* Empty state */
.pm-pub-empty {
    text-align: center;
    padding: 30px;
    color: var(--pm-chrome-text);
    opacity: 0.4;
    font-family: var(--pm-font);
    font-size: 0.9rem;
}

/* ===================================================
   CANVAS SOCIAL MEDIA
   =================================================== */

.pm-canvas-nav.pm-canvas-nav-social {
    margin-bottom: 25px;
}

.pm-canvas-social-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-canvas-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(245, 238, 217, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: var(--pm-chrome-text-muted);
    transition: all 0.25s ease;
    text-decoration: none;
}

.pm-canvas-social-icon svg {
    color: inherit;
}
/* Instagram: stroke-only icon */
.pm-canvas-social-icon:first-child svg { fill: none; stroke: currentColor; }
/* TikTok, Facebook, Pinterest: fill-only icons */
.pm-canvas-social-icon:nth-child(n+2) svg { fill: currentColor; stroke: none; }

.pm-canvas-social-icon:hover {
    color: var(--pm-chrome-accent);
    border-color: rgba(215, 191, 129, 0.4);
    background: rgba(215, 191, 129, 0.08);
    transform: scale(1.08);
}

/* ===================================================
   CANVAS FOOTER
   =================================================== */

.pm-canvas-footer {
    padding: 25px 30px;
    /* Theme-aware: transparent band (panel shows through) + token border, so
       the "2026 PianoMode" strip adapts to dark/light instead of staying a
       hardcoded dark bar on the beige panel. */
    border-top: 1px solid var(--pm-chrome-border);
    text-align: center;
    background: transparent;
}

.pm-canvas-footer-text {
    font-family: var(--pm-font);
    font-size: 0.75rem;
    color: var(--pm-chrome-accent);
    opacity: 0.85;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

/* ===================================================
   MOBILE MENU - LATEST ARTICLES
   =================================================== */

.mobile-latest-articles {
    padding: 30px 20px;
    border-top: 1px solid rgba(215, 191, 129, 0.2);
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-latest-title {
    font-family: var(--pm-font);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pm-chrome-accent);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-latest-title::before {
    content: '';
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--pm-gold) 0%,
        transparent 100%);
}

.mobile-publications-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-pub-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(215, 191, 129, 0.3);
    border-radius: 12px;
    padding: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.mobile-pub-card:hover {
    background: rgba(255, 255, 255, 1);
    border-color: var(--pm-chrome-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(215, 191, 129, 0.2);
}

/* Text colors for mobile publication cards - BLACK design */
.mobile-pub-card .pm-pub-title {
    color: var(--pm-black);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.mobile-pub-card .pm-pub-date {
    color: rgba(10, 10, 10, 0.7);
}

.mobile-pub-card .pm-pub-header {
    width: 100%;
}

.mobile-pub-card .pm-pub-info {
    min-width: 0; /* Permet au flex item de rétrécir en dessous de sa taille de contenu */
}

/* Badge type on light background — darker gold for visibility */
.mobile-pub-card .pm-pub-type {
    color: #9A8550;
    background: rgba(215, 191, 129, 0.12);
    border-color: rgba(154, 133, 80, 0.3);
}

/* ===================================================
   RESPONSIVE DESIGN
   =================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .pm-slide-canvas {
        width: 40%;
        min-width: 320px;
    }
}

/* Mobile — match the burger menu width (320px / 90% max) so the user can
   tap to the LEFT of the panel to dismiss it. Identical to .mobile-menu in
   pianomode-header-footer.css to keep both rails visually consistent. */
@media (max-width: 768px) {
    .pm-slide-canvas {
        width: 320px;
        max-width: 90%;
        min-width: unset;
    }

    .pm-canvas-header {
        padding: 20px;
        padding-top: 20px;
    }

    .pm-canvas-title {
        font-size: 1.5rem;
    }

    .pm-canvas-content {
        padding: 20px;
    }

    .pm-canvas-nav-link {
        padding: 12px 15px;
        font-size: 0.95rem;
    }

    .pm-pub-card {
        padding: 12px;
    }

    .pm-pub-thumb {
        width: 50px;
        height: 50px;
    }

    .pm-pub-title {
        font-size: 0.9rem;
    }
}

/* Small mobile — keep the same constrained width (NOT full screen) so a tap
   on the left edge always closes the panel. */
@media (max-width: 480px) {
    .pm-slide-canvas {
        width: 320px;
        max-width: 90%;
    }

    .pm-canvas-nav-link svg {
        width: 20px;
        height: 20px;
    }
}

/* Very narrow phones (<360px iPhone SE etc.) — slightly smaller fixed width */
@media (max-width: 360px) {
    .pm-slide-canvas {
        width: 88%;
        max-width: 88%;
    }
}

/* Scrollbar styling */
.pm-slide-canvas::-webkit-scrollbar {
    width: 6px;
}

.pm-slide-canvas::-webkit-scrollbar-track {
    background: rgba(245, 238, 217, 0.05);
}

.pm-slide-canvas::-webkit-scrollbar-thumb {
    background: var(--pm-gold-pale);
    border-radius: 3px;
}

.pm-slide-canvas::-webkit-scrollbar-thumb:hover {
    background: var(--pm-gold-light);
}

/* ===================================================
   DESIGN PASS 2026 — soft glass, full-scroll sticky title,
   no harsh left border, richer gradient palette.
   This block OVERRIDES the legacy rules above. Keep it at
   the bottom of the file so it always wins.
   =================================================== */

/* Snappier slide-in, GPU-composited. */
.pm-slide-canvas {
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1) !important;
    will-change: transform;
    contain: layout style paint;
}
.pm-canvas-overlay {
    transition: opacity 0.26s ease-out, visibility 0.26s ease-out !important;
}

/* Black-and-gold premium drawer — same dark palette in both color
   schemes so the canvas reads as an editorial overlay over any page,
   never tinted by purple or indigo accents. The left edge is feathered
   via a soft inset gold halo (8% opacity) instead of a hard border, so
   the drawer blends with the dim page mask underneath. */
.pm-slide-canvas {
    background:
        radial-gradient(110% 80% at 100% 0%, rgba(215, 191, 129, 0.18), transparent 55%),
        radial-gradient(120% 70% at 0% 100%, rgba(215, 191, 129, 0.10), transparent 60%),
        linear-gradient(180deg,
            #161310 0%,
            #0d0b08 50%,
            #060503 100%) !important;
    border-left: none !important;
    box-shadow:
        -1px 0 0 rgba(215, 191, 129, 0.14),
        -22px 0 60px rgba(0, 0, 0, 0.6),
        inset 28px 0 36px -28px rgba(215, 191, 129, 0.10);
}
/* (Removed the prefers-color-scheme:light block that kept the drawer dark on
   light browsers — the theme is now driven solely by the [data-theme] toggle,
   default dark. See the LIGHT THEME section above.) */

/* Sticky title row — direct child of the canvas, so it stays glued to
   the top throughout the WHOLE scroll. No more "disappears once the
   search field leaves the viewport". */
.pm-canvas-header {
    position: static !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(245, 238, 217, 0.10);
    padding: 0 28px 22px;
    margin: 0;
}
/* Sticky title row — dark glass, no yellow tint, matches the drawer in
   both color modes. Subtle gold hairline at the bottom hints at the
   accent without screaming. */
.pm-canvas-title-row {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0;
    padding: 18px 28px;
    background: linear-gradient(180deg,
        rgba(10, 8, 6, 0.94) 0%,
        rgba(10, 8, 6, 0.82) 100%);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(215, 191, 129, 0.14);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Title typography — refined 2026: warm cream rather than loud yellow.
   No gradient flash; a single carefully chosen tone sits better next to
   the round close button. */
.pm-canvas-title {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    line-height: 1.05;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--pm-chrome-text) !important;
    color: var(--pm-chrome-text) !important;
    filter: none !important;
}
.pm-canvas-subtitle {
    font-size: 0.78rem !important;
    color: var(--pm-chrome-text-muted) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    margin: 18px 0 10px;
}

/* Search field — pill, smaller, focused. */
.pm-canvas-search {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(215, 191, 129, 0.18);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}
.pm-canvas-search input {
    height: 40px;
    font-size: 0.92rem;
    background: transparent;
}
.pm-canvas-search:focus-within {
    border-color: rgba(215, 191, 129, 0.5);
    box-shadow: 0 0 0 4px rgba(215, 191, 129, 0.08);
}

/* Newsletter button — sits above Follow Us. Modern pill with shimmering
   gold inner edge and an inline expanding email form. */
.pm-canvas-newsletter {
    margin: 18px 0 22px;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(215, 191, 129, 0.10), rgba(78, 56, 130, 0.08));
    border: 1px solid rgba(215, 191, 129, 0.22);
    position: relative;
    overflow: hidden;
}
.pm-canvas-newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 80% at 100% 0%, rgba(215, 191, 129, 0.18), transparent 60%);
    pointer-events: none;
}
.pm-canvas-newsletter-label {
    font-family: var(--pm-font);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pm-chrome-accent);
    margin: 0 0 6px;
}
.pm-canvas-newsletter-headline {
    font-family: var(--pm-font);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--pm-chrome-text);
    line-height: 1.35;
    margin: 0 0 12px;
}
.pm-canvas-newsletter-form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pm-canvas-newsletter-input {
    flex: 1 1 auto;
    height: 38px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(215, 191, 129, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: var(--pm-chrome-text);
    font-family: var(--pm-font);
    font-size: 0.86rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.pm-canvas-newsletter-input:focus {
    border-color: rgba(215, 191, 129, 0.55);
    background: rgba(255, 255, 255, 0.07);
}
.pm-canvas-newsletter-input::placeholder {
    color: var(--pm-chrome-text-muted);
}
.pm-canvas-newsletter-submit {
    height: 38px;
    padding: 0 18px;
    border-radius: 14px;
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, #ecd9a3 0%, #d7bf81 50%, #b8923f 100%);
    color: #0a0908;
    font-family: var(--pm-font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 4px 14px rgba(215, 191, 129, 0.18);
}
.pm-canvas-newsletter-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(215, 191, 129, 0.28);
}
.pm-canvas-newsletter-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.pm-canvas-newsletter-status {
    margin-top: 10px;
    font-size: 0.74rem;
    font-family: var(--pm-font);
    color: var(--pm-chrome-text-muted);
    min-height: 1em;
}
.pm-canvas-newsletter-status.is-ok    { color: #8cf2bf; }
.pm-canvas-newsletter-status.is-error { color: #ff9494; }
/* (Removed the prefers-color-scheme:light newsletter block — it lightened the
   field on light browsers even in dark mode. Newsletter light styling now
   lives in the [data-theme="light"] section above.) */

/* MOBILE — touchscreen ergonomics, tight but readable. */
@media (max-width: 768px) {
    .pm-slide-canvas {
        width: 92% !important;
        max-width: 380px;
        min-width: unset;
        box-shadow: -6px 0 28px rgba(0, 0, 0, 0.55);
    }
    .pm-canvas-title-row {
        padding: 14px 20px;
    }
    .pm-canvas-header {
        padding: 0 20px 18px;
    }
    .pm-canvas-title {
        font-size: 1.22rem !important;
    }
    .pm-canvas-subtitle {
        font-size: 0.7rem !important;
        margin: 12px 0 8px;
    }
    .pm-canvas-search input {
        height: 36px;
        font-size: 0.88rem;
    }
    .pm-canvas-content {
        padding: 14px 20px;
    }
    .pm-canvas-nav-link {
        padding: 11px 13px !important;
        font-size: 0.92rem !important;
    }
    .pm-canvas-nav-link svg {
        width: 18px;
        height: 18px;
    }
    .pm-canvas-close-inline {
        width: 30px;
        height: 30px;
    }
    .pm-canvas-close-inline svg {
        width: 16px;
        height: 16px;
    }
    .pm-pub-card {
        padding: 10px;
        gap: 10px;
    }
    .pm-pub-thumb {
        width: 44px;
        height: 44px;
    }
    .pm-pub-title {
        font-size: 0.85rem !important;
    }
    .pm-canvas-social-icon {
        width: 34px;
        height: 34px;
    }
    .pm-canvas-footer {
        padding: 18px 20px;
    }
    .pm-canvas-footer-text {
        font-size: 0.7rem;
    }
    .pm-canvas-newsletter {
        padding: 14px;
    }
    .pm-canvas-newsletter-headline {
        font-size: 0.9rem;
    }
}

/* Tablet / landscape phone. */
@media (min-width: 769px) and (max-width: 1024px) {
    .pm-slide-canvas {
        width: 380px !important;
        min-width: unset !important;
    }
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .pm-slide-canvas,
    .pm-canvas-overlay {
        transition: none !important;
    }
}

/* ===================================================
   PALETTE PIN — canvas text & accents, THEME-AWARE via tokens.
   These broad, !important rules exist to win the cascade against any
   system-color override the OS injects (the original reason for this
   block). They were hard-coded cream — which painted INVISIBLE pale
   text on the beige "paper" panel in light mode. Converted to the
   --pm-chrome-* tokens so they FLIP with the theme:
     • DARK  (default): cream ink / soft cream / gold  (token dark
       values match the old hard-coded colours → dark is UNCHANGED).
     • LIGHT (beige paper): dark ink / soft ink / deep gold → legible.
   This is the durable move (HANDOFF-LIGHT-DARK-THEME.md §2/§4).
   =================================================== */
.pm-slide-canvas,
.pm-slide-canvas h2,
.pm-slide-canvas h3,
.pm-slide-canvas h4,
.pm-slide-canvas p,
.pm-slide-canvas span,
.pm-slide-canvas a,
.pm-slide-canvas label,
.pm-slide-canvas li {
    color: var(--pm-chrome-text) !important;
}
.pm-slide-canvas .pm-canvas-subtitle,
.pm-slide-canvas .pm-canvas-nav h3,
.pm-slide-canvas .pm-canvas-section h3,
.pm-slide-canvas .pm-canvas-back-home,
.pm-slide-canvas .pm-canvas-back-home span,
.pm-slide-canvas .pm-pub-meta,
.pm-slide-canvas .pm-pub-date,
.pm-slide-canvas .pm-pub-excerpt {
    color: var(--pm-chrome-text-soft) !important;
}
.pm-slide-canvas .pm-canvas-newsletter-label,
.pm-slide-canvas .pm-canvas-search-icon,
.pm-slide-canvas .pm-canvas-search-submit {
    color: var(--pm-chrome-accent) !important;
}
/* Footer copyright — golden so it stays a warm "doré beige" strip,
   contrasted on the light panel and on-brand on the dark one (owner). */
.pm-slide-canvas .pm-canvas-footer-text {
    color: var(--pm-chrome-accent) !important;
}
.pm-slide-canvas .pm-canvas-newsletter-headline {
    color: var(--pm-chrome-text) !important;
}
.pm-slide-canvas .pm-canvas-newsletter-input {
    background: var(--pm-chrome-elevated) !important;
    border-color: var(--pm-chrome-border-strong) !important;
    color: var(--pm-chrome-text) !important;
}
.pm-slide-canvas .pm-canvas-newsletter-input::placeholder {
    color: var(--pm-chrome-text-muted) !important;
}
.pm-slide-canvas .pm-canvas-search-input {
    color: var(--pm-chrome-text) !important;
    -webkit-text-fill-color: var(--pm-chrome-text) !important;
}
.pm-slide-canvas .pm-canvas-close-inline {
    border-color: var(--pm-chrome-border-strong) !important;
}
.pm-slide-canvas .pm-canvas-close-inline svg {
    stroke: var(--pm-chrome-accent) !important;
}
.pm-slide-canvas .pm-pub-card {
    background: var(--pm-chrome-elevated) !important;
    border-color: var(--pm-chrome-border) !important;
}
.pm-slide-canvas .pm-pub-type {
    color: var(--pm-chrome-accent) !important;
    background: rgba(215, 191, 129, 0.14) !important;
    border-color: var(--pm-chrome-border) !important;
}

/* ===================================================
   NEWSLETTER INPUT POLISH — both modes
   Improves the "your@email.com" placeholder area visibility and the
   focus ring so the field feels like a first-class form control.
   =================================================== */
.pm-canvas-newsletter-input {
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-feature-settings: "tnum" 1;
}
.pm-canvas-newsletter-input:hover {
    border-color: rgba(215, 191, 129, 0.4);
}
.pm-canvas-newsletter-input:focus,
.pm-canvas-newsletter-input:focus-visible {
    outline: none;
    border-color: rgba(215, 191, 129, 0.7);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 4px rgba(215, 191, 129, 0.12);
}