/* ════════════════════════════════════════════════════════════════════
   PD View Mode toggle — works in both light + dark, admin + frontend.
   Inject via the [data-pd-view-toggle] container.
   ════════════════════════════════════════════════════════════════════ */

[data-pd-view-toggle] {
    display: inline-flex; align-items: center; gap: 8px;
    --vm-fg:        #1F2937;
    --vm-fg-mute:   #6B7280;
    --vm-bg:        rgba(243, 244, 246, 0.9);
    --vm-border:    rgba(0, 0, 0, 0.08);
    --vm-on-bg:     #FF6B35;
    --vm-on-fg:     #FFFFFF;
    --vm-radius:    8px;
}

/* Auto-apply dark variables when html[data-theme="dark"] */
html[data-theme="dark"] [data-pd-view-toggle] {
    --vm-fg:        #F8FAFC;
    --vm-fg-mute:   #94A3B8;
    --vm-bg:        rgba(30, 41, 59, 0.7);
    --vm-border:    rgba(255, 255, 255, 0.10);
}

.pd-vm-group {
    display: inline-flex;
    background: var(--vm-bg);
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius);
    padding: 2px;
    backdrop-filter: blur(8px);
}

.pd-vm-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--vm-fg-mute);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s, color .15s, transform .12s;
    font-family: inherit;
}
.pd-vm-btn:hover { color: var(--vm-fg); background: rgba(255, 107, 53, 0.08); }
.pd-vm-btn:active { transform: scale(.96); }

.pd-vm-btn.on {
    background: var(--vm-on-bg);
    color: var(--vm-on-fg);
    box-shadow: 0 2px 6px rgba(255, 107, 53, .3);
}
.pd-vm-btn.on:hover { background: var(--vm-on-bg); color: var(--vm-on-fg); }

.pd-vm-btn svg { display: block; }

/* When the toggle lives inside the dark burgundy signature nav,
   override the orange "on" colour to gold so it matches the palette. */
.sig-nav [data-pd-view-toggle] {
    --vm-fg:      #1A0612;
    --vm-fg-mute: #6B4050;
    --vm-bg:      rgba(248, 240, 220, 0.6);
    --vm-border:  rgba(184, 134, 42, 0.25);
    --vm-on-bg:   #5C0A1F;
    --vm-on-fg:   #F8F0DC;
}

html[data-theme="dark"] .sig-nav [data-pd-view-toggle] {
    --vm-fg:      #F8F0DC;
    --vm-fg-mute: rgba(248, 240, 220, 0.55);
    --vm-bg:      rgba(61, 6, 18, 0.6);
    --vm-border:  rgba(184, 134, 42, 0.2);
    --vm-on-bg:   #D4A857;
    --vm-on-fg:   #1A0612;
}

/* Smaller variant for tight nav spots */
[data-pd-view-toggle][data-size="sm"] .pd-vm-btn {
    height: 24px; padding: 0 8px; font-size: 10.5px;
}