/* ============================================================
   PhotoAsso — Global Theme (Light / Dark + Responsive)
   ============================================================ */

/* ---------- 0. Skip link ---------- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: var(--z-skip);
    padding: 0.75rem 1.5rem;
    background: var(--color-primary, #0071e3);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius, 8px) 0;
}

.skip-link:focus {
    top: 0;
}

/* ---------- 0a. Screen-reader only ---------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- 0b. Global focus-visible ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary, #0071e3);
    outline-offset: 2px;
}

/* ---------- 1. Custom Properties ---------- */

/* ── Structural tokens + Default palette — Neutral slate, sober and modern ── */
:root {
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --header-height: 56px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 56px;

    /* Font-size scale */
    --fs-2xs: 0.625rem;   /* 10px */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.8125rem;   /* 13px */
    --fs-base: 0.875rem;  /* 14px */
    --fs-md: 1rem;        /* 16px */
    --fs-lg: 1.125rem;    /* 18px */
    --fs-xl: 1.5rem;      /* 24px */
    --fs-2xl: 2rem;       /* 32px */
    --fs-3xl: 3rem;       /* 48px */

    /* Typography */
    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: Fraunces, "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    /* Z-index scale */
    --z-base: 0;
    --z-sticky: 100;
    --z-header: 200;
    --z-dropdown: 500;
    --z-drawer: 600;
    --z-drawer-backdrop: 600;
    --z-modal: 1000;
    --z-toast: 9000;
    --z-skip: 10000;
    --color-bg: #fafafa;
    --color-bg-alt: #f0f0f2;
    --color-surface: #fff;
    --color-border: #dcdce0;
    --color-text: #1a1a2e;
    --color-text-secondary: #6b6b80;
    --color-primary: #4a5568;
    --color-primary-hover: #2d3748;
    --color-danger: #c53030;
    --color-success: #2f855a;
    --color-warning: #b14d1e;
    --color-star-empty: #858590;
    --color-info: #3182ce;
    --color-shadow: rgb(0 0 0 / 6%);

    /* Shadow scale (sm/md/lg) — mapped to Open Props */
    --shadow-sm: var(--shadow-2);
    --shadow-md: var(--shadow-3);
    --shadow-lg: var(--shadow-4);

    --color-surface-highlight: #f7f7f9;
    --color-accent: #4a5568;
    --color-accent-subtle: rgb(74 85 104 / 8%);
    --sidebar-accent: none;

    /* Album type colors — unified across the whole site */
    --album-collectif: #2f855a;
    --album-thematic: #b7791f;
    --album-personal: #4a5568;
    --album-collectif-subtle: color-mix(in srgb, var(--album-collectif) 12%, transparent);
    --album-thematic-subtle: color-mix(in srgb, var(--album-thematic) 12%, transparent);
    --album-personal-subtle: color-mix(in srgb, var(--album-personal) 12%, transparent);

    /* Badge palette — muted tones */
    --badge-red: #9b2c2c;
    --badge-blue: #2b6cb0;
    --badge-green: #276749;
    --badge-orange: #c05621;
    --badge-purple: #6b46c1;
    --badge-gray: #718096;
    --badge-yellow: #b7791f;
    --badge-light-blue: #3182ce;
    --badge-light-green: #38a169;
    --badge-dark-orange: #9c4221;
    --badge-light-gray: #a0aec0;
}

/* Default — Dark */
[data-theme="dark"] {
    --color-bg: #18181b;
    --color-bg-alt: #27272a;
    --color-surface: #27272a;
    --color-border: #3f3f46;
    --color-text: #f4f4f5;
    --color-text-secondary: #a1a1aa;
    --color-primary: #94a3b8;
    --color-primary-hover: #cbd5e1;
    --color-accent: #94a3b8;
    --color-accent-subtle: rgb(148 163 184 / 10%);
    --album-collectif: #4ade80;
    --album-thematic: #fbbf24;
    --album-personal: #94a3b8;
    --album-collectif-subtle: color-mix(in srgb, var(--album-collectif) 15%, transparent);
    --album-thematic-subtle: color-mix(in srgb, var(--album-thematic) 15%, transparent);
    --album-personal-subtle: color-mix(in srgb, var(--album-personal) 15%, transparent);
    --color-star-empty: #787880;
    --color-danger: #f87171;
    --color-success: #4ade80;
    --color-warning: #fb923c;
    --color-info: #60a5fa;
    --color-shadow: rgb(0 0 0 / 40%);
    --color-surface-highlight: #3f3f46;
    --badge-red: #f87171;
    --badge-blue: #60a5fa;
    --badge-green: #4ade80;
    --badge-orange: #fb923c;
    --badge-purple: #a78bfa;
    --badge-gray: #a1a1aa;
    --badge-yellow: #fbbf24;
    --badge-light-blue: #7dd3fc;
    --badge-light-green: #6ee7b7;
    --badge-dark-orange: #f97316;
    --badge-light-gray: #d4d4d8;
}

/* ═══════════════════════════════════════════════════════
   Euskadi — Basque Country palette (Ikurriña)
   Rouge basque + vert + blanc
   ═══════════════════════════════════════════════════════ */

/* Euskadi — Light */
[data-palette="basque"] {
    --color-bg: #faf8f6;
    --color-bg-alt: #f2ece7;
    --color-surface: #fff;
    --color-border: #ddd5cc;
    --color-text: #2d1f14;
    --color-text-secondary: #7a6a5c;
    --color-primary: #a3302b;
    --color-primary-hover: #8a2723;
    --color-accent: #1a7a42;
    --color-accent-subtle: rgb(26 122 66 / 8%);
    --sidebar-accent: linear-gradient(90deg, #D52B1E 33%, #fff 33% 66%, #009B48 66%);
    --album-collectif: #1a7a42;
    --album-thematic: #a16207;
    --album-personal: #7a6a5c;
    --color-star-empty: #858590;
    --color-danger: #c53030;
    --color-success: #1a7a42;
    --color-warning: #b45309;
    --color-info: #2b6cb0;
    --color-shadow: rgb(45 20 10 / 8%);
    --color-surface-highlight: #f7f1ec;
    --badge-red: #a3302b;
    --badge-blue: #2b6cb0;
    --badge-green: #1a7a42;
    --badge-orange: #b45309;
    --badge-purple: #744097;
    --badge-gray: #7a6a5c;
    --badge-yellow: #a16207;
    --badge-light-blue: #2e7cad;
    --badge-light-green: #22803d;
    --badge-dark-orange: #9c3f0d;
    --badge-light-gray: #a89888;
}

/* Euskadi — Dark */
[data-palette="basque"][data-theme="dark"] {
    --color-bg: #1a1210;
    --color-bg-alt: #2a1f1a;
    --color-surface: #2a1f1a;
    --color-border: #453529;
    --color-text: #f5efe9;
    --color-text-secondary: #b8a898;
    --color-primary: #e8625d;
    --color-primary-hover: #f07a76;
    --color-accent: #4ade80;
    --color-accent-subtle: rgb(74 222 128 / 10%);
    --sidebar-accent: linear-gradient(90deg, #e8625d 33%, #e8e0d8 33% 66%, #4ade80 66%);
    --album-collectif: #4ade80;
    --album-thematic: #fbbf24;
    --album-personal: #b8a898;
    --color-star-empty: #787880;
    --color-danger: #f87171;
    --color-success: #4ade80;
    --color-warning: #fb923c;
    --color-info: #60a5fa;
    --color-shadow: rgb(0 0 0 / 45%);
    --color-surface-highlight: #3d2e24;
    --badge-red: #f07a76;
    --badge-blue: #60a5fa;
    --badge-green: #4ade80;
    --badge-orange: #fb923c;
    --badge-purple: #c4b5fd;
    --badge-gray: #b8a898;
    --badge-yellow: #fbbf24;
    --badge-light-blue: #7dd3fc;
    --badge-light-green: #6ee7b7;
    --badge-dark-orange: #f97316;
    --badge-light-gray: #d4c8bc;
}

/* ═══════════════════════════════════════════════════════
   Senpere — Saint-Pée-sur-Nivelle (Or et Azur)
   Blason : or/azur + gueules. Primary = azur profond,
   accent chaud = or du blason.
   ═══════════════════════════════════════════════════════ */

/* Senpere — Light */
[data-palette="senpere"] {
    --color-bg: #f7f9fc;
    --color-bg-alt: #edf1f7;
    --color-surface: #fff;
    --color-border: #cdd5e0;
    --color-text: #152238;
    --color-text-secondary: #596d8a;
    --color-primary: #1e3a6e;
    --color-primary-hover: #15294f;
    --color-accent: #b8860b;
    --color-accent-subtle: rgb(184 134 11 / 8%);
    --sidebar-accent: linear-gradient(90deg, #1e3a6e 40%, #D4A017 40% 60%, #b91c1c 60%);
    --album-collectif: #15803d;
    --album-thematic: #a16207;
    --album-personal: #596d8a;
    --color-star-empty: #858590;
    --color-danger: #b91c1c;
    --color-success: #15803d;
    --color-warning: #a16207;
    --color-info: #1e3a6e;
    --color-shadow: rgb(15 30 60 / 8%);
    --color-surface-highlight: #f0f4fa;
    --badge-red: #b91c1c;
    --badge-blue: #1e3a6e;
    --badge-green: #15803d;
    --badge-orange: #a16207;
    --badge-purple: #5b21b6;
    --badge-gray: #596d8a;
    --badge-yellow: #a16207;
    --badge-light-blue: #2563eb;
    --badge-light-green: #16a34a;
    --badge-dark-orange: #9a3412;
    --badge-light-gray: #94a3b8;
}

/* Senpere — Dark */
[data-palette="senpere"][data-theme="dark"] {
    --color-bg: #0f1724;
    --color-bg-alt: #1a2538;
    --color-surface: #1a2538;
    --color-border: #2e3f5a;
    --color-text: #e8edf5;
    --color-text-secondary: #8b9fc0;
    --color-primary: #5b8dd9;
    --color-primary-hover: #8ab4f0;
    --color-accent: #f0c040;
    --color-accent-subtle: rgb(240 192 64 / 10%);
    --sidebar-accent: linear-gradient(90deg, #5b8dd9 40%, #f0c040 40% 60%, #f87171 60%);
    --album-collectif: #4ade80;
    --album-thematic: #fbbf24;
    --album-personal: #8b9fc0;
    --color-star-empty: #787880;
    --color-danger: #f87171;
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-info: #5b8dd9;
    --color-shadow: rgb(0 0 0 / 45%);
    --color-surface-highlight: #253550;
    --badge-red: #f87171;
    --badge-blue: #5b8dd9;
    --badge-green: #4ade80;
    --badge-orange: #fbbf24;
    --badge-purple: #a78bfa;
    --badge-gray: #8b9fc0;
    --badge-yellow: #fbbf24;
    --badge-light-blue: #93c5fd;
    --badge-light-green: #6ee7b7;
    --badge-dark-orange: #f97316;
    --badge-light-gray: #cbd5e1;
}

/* ═══════════════════════════════════════════════════════
   LightClub — Logo palette (rose, bleu, jaune)
   ═══════════════════════════════════════════════════════ */

/* LightClub — Light */
[data-palette="lightclub"] {
    --color-bg: #fdf8fb;
    --color-bg-alt: #f5edf2;
    --color-surface: #fff;
    --color-border: #e8d8e2;
    --color-text: #2a1a24;
    --color-text-secondary: #7a5a6a;
    --color-primary: #d6609e;
    --color-primary-hover: #c04888;
    --color-accent: #4ab8d4;
    --color-accent-subtle: rgb(106 226 248 / 10%);
    --sidebar-accent: linear-gradient(90deg, #fc83cd 33%, #6ae2f8 33% 66%, #fde964 66%);
    --album-collectif: #2f9e6a;
    --album-thematic: #c49a20;
    --album-personal: #d6609e;
    --color-star-empty: #c0a0b0;
    --color-danger: #d63031;
    --color-success: #27ae60;
    --color-warning: #c49a20;
    --color-info: #4ab8d4;
}

/* LightClub — Dark */
[data-palette="lightclub"][data-theme="dark"] {
    --color-bg: #1a0f18;
    --color-bg-alt: #2a1a28;
    --color-surface: #2a1a28;
    --color-border: #4a2a42;
    --color-text: #f5edf2;
    --color-text-secondary: #b898aa;
    --color-primary: #fc83cd;
    --color-primary-hover: #fda8dc;
    --color-accent: #6ae2f8;
    --color-accent-subtle: rgb(106 226 248 / 12%);
    --sidebar-accent: linear-gradient(90deg, #fc83cd 33%, #6ae2f8 33% 66%, #fde964 66%);
    --album-collectif: #4ade80;
    --album-thematic: #fde964;
    --album-personal: #fc83cd;
    --color-star-empty: #6a4a5a;
    --color-danger: #f87171;
    --color-success: #4ade80;
    --color-warning: #fde964;
    --color-info: #6ae2f8;
    --color-shadow: rgb(0 0 0 / 50%);
    --color-surface-highlight: #3a2238;
    --badge-red: #f87171;
    --badge-blue: #6ae2f8;
    --badge-green: #4ade80;
    --badge-orange: #fde964;
    --badge-purple: #c4a0fc;
    --badge-gray: #b898aa;
    --badge-yellow: #fde964;
    --badge-light-blue: #6ae2f8;
    --badge-light-green: #6ee7b7;
    --badge-dark-orange: #f97316;
    --badge-light-gray: #d4c4d0;
}

/* ---------- 2. Reset & Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: color 0.2s, background-color 0.2s;
    /* Horizontal clip lives on <body>, not <html>, so the `html` element
     * stays the sticky scroll container for `position: sticky` children
     * (otherwise the sticky offset is computed against html, which
     * scrolls out of view on mobile once you've crossed its height —
     * breadcrumb + top-bar would detach mid-scroll).
     *
     * `clip` keeps the horizontal overflow protection for elements that
     * would otherwise widen the document (AJAX gallery items with
     * inline `flex-basis: Npx`, top-bar action overflow on phones, the
     * .gallery-fab that Firefox responsive mode re-anchored to
     * scrollWidth instead of innerWidth on reflow). */
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------- 3. Layout ---------- */
main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ---------- 4. Sidebar ---------- */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    z-index: var(--z-header);
    overflow-y: auto;
    transition: width 0.3s ease, transform 0.3s ease, background-color 0.2s, border-color 0.2s;
}

.sidebar::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--sidebar-accent, var(--color-primary));
    flex-shrink: 0;
    opacity: 0.85;
}

.sidebar__header {
    position: relative;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.sidebar__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--color-text);
}

.sidebar__brand:hover {
    text-decoration: none;
    color: var(--color-primary);
}

.sidebar__logo {
    max-width: 220px;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Swap logo variant based on theme — hide both by default, show correct one */
.sidebar__logo--dark, .sidebar__logo--light { display: none; }
[data-theme="dark"] .sidebar__logo--dark { display: block; }
[data-theme="light"] .sidebar__logo--light { display: block; }

.sidebar__name {
    font-weight: 700;
    font-size: var(--fs-md);
    line-height: 1.2;
}

.sidebar__desc {
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
    white-space: nowrap;
}

.sidebar__collapse-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    z-index: 1;
    transition: color 0.15s, background-color 0.15s;
}

.sidebar__collapse-btn:hover {
    color: var(--color-text);
    background-color: var(--color-bg-alt);
}

.sidebar__collapse-btn svg {
    transition: transform 0.3s ease;
}

.sidebar__nav {
    padding: 0.5rem 0;
}

.sidebar__section {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.sidebar__section:last-child {
    border-bottom: none;
}

/* Section header: parent link + toggle button */
.sidebar__section-header {
    display: flex;
    align-items: center;
}

.sidebar__link--parent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
    text-decoration: none;
    cursor: default;
    flex: 1;
    min-width: 0;
}

a.sidebar__link--parent {
    cursor: pointer;
    transition: color 0.15s;
}

a.sidebar__link--parent:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* Category icon */
.sidebar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar__icon svg {
    display: block;
}

/* Label text (hidden in collapsed mode) */
.sidebar__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section toggle (chevron) button */
.sidebar__section-toggle {
    background: none;
    border: none;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s;
}

.sidebar__section-toggle:hover {
    color: var(--color-text);
}

.sidebar__chevron {
    transition: transform 0.25s ease;
}

/* Collapsed section: submenu hidden, chevron rotated */
.sidebar__section--collapsed .sidebar__submenu {
    display: none;
}

.sidebar__section--collapsed .sidebar__chevron {
    transform: rotate(-90deg);
}

.sidebar__submenu .sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem 0.4rem 2.75rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--fs-base);
    transition: color 0.15s, background-color 0.15s;
}

.sidebar__submenu .sidebar__link:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-alt);
}

.sidebar__link-wrap {
    display: flex;
    align-items: center;
}

/* stylelint-disable-next-line no-descending-specificity -- link in wrapper context, not submenu hover */
.sidebar__link-wrap .sidebar__link {
    flex: 1;
    min-width: 0;
}

.sidebar__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease-elastic-out-2),
                background 0.2s var(--ease-out-3),
                box-shadow 0.2s var(--ease-out-3);
}

.sidebar__action:hover {
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
    transform: scale(1.15);
    box-shadow: var(--shadow-2);
}

/* Active section accent indicator */
.sidebar__section--active > .sidebar__section-header {
    border-left: 3px solid var(--color-accent, var(--color-primary));
}

.sidebar__section--active > .sidebar__section-header .sidebar__link--parent {
    color: var(--color-primary);
}

.sidebar__link--active {
    color: var(--color-primary-hover);
    font-weight: 600;
}

.sidebar__group-label {
    padding: 0.5rem 1rem 0.2rem 1.75rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.sidebar__group-label:first-child {
    border-top: none;
    margin-top: 0;
}

/* Collapsible subsections (Salon groups/MPs) */
.sidebar__subsection {
    margin-top: 0.25rem;
}

.sidebar__subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 1rem 0.25rem 1.25rem;
}

.sidebar__subsection-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    padding: 0.5rem 0;
    min-height: 2.75rem;
}

.sidebar__subsection-toggle:hover {
    color: var(--color-text);
}

.sidebar__subsection-toggle .sidebar__chevron {
    transition: transform 0.2s;
}

.sidebar__subsection--collapsed .sidebar__subsection-toggle .sidebar__chevron {
    transform: rotate(-90deg);
}

.sidebar__subsection-body {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.2s ease;
}

.sidebar__subsection--collapsed .sidebar__subsection-body {
    max-height: 0;
}

.sidebar__badge--subsection {
    font-size: var(--fs-2xs);
    margin-left: 0.25rem;
}

.sidebar__link--overflow {
    display: block;
    padding: 0.25rem 1rem 0.25rem 1.75rem;
    font-size: var(--fs-xs);
    color: var(--color-primary);
    text-decoration: none;
}

.sidebar__link--overflow:hover {
    text-decoration: underline;
}

/* Badges */
.sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-alt);
    border-radius: 999px;
    margin-left: auto;
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: normal;
}

.sidebar__badge--primary {
    color: #fff;
    background-color: var(--color-primary);
}

.sidebar__badge--poll {
    color: #fff;
    background-color: var(--badge-purple);
}

/* ---------- 4a. Top Bar ----------
 *
 * The top-bar is no longer sticky on its own. It's the child of a
 * `.sticky-header` wrapper (base.html) that groups it with the
 * breadcrumb row — so the two always move together even if the
 * top-bar wraps to two rows on narrow viewports. */
/* `position: fixed` instead of `sticky`: on mobile, dynamic viewport
 * changes (address bar show/hide) and webkit quirks around
 * `overflow` ancestors make sticky detach mid-scroll. Fixed pins the
 * header to the visual viewport regardless. The main content's
 * padding-top below compensates for the space it would otherwise take
 * in the flow. */
.sticky-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: var(--z-sticky);
    transition: left 0.3s ease;
}

.layout-content.expanded .sticky-header {
    left: var(--sidebar-collapsed-width);
}

/* Push the main content down by the top-bar height + an estimated
 * breadcrumb row height (2.25rem). Breadcrumb wraps on very narrow
 * viewports or with very long trails — the extra 0.5rem slack
 * accommodates a 1-line overflow without covering content. */
main {
    padding-top: calc(var(--header-height) + 3rem);
}

.top-bar {
    display: flex;
    align-items: center;
    height: var(--header-height);
    background-color: rgb(255 255 255 / 85%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    padding: 0 1.5rem;
    gap: 1rem;
    transition: background-color 0.2s, border-color 0.2s;
    /* No overflow clipping here: dropdowns rooted in the bar (palette
     * picker, user menu) need to render below it. Document-level overflow
     * is contained elsewhere (.justified-gallery uses overflow-x:clip,
     * mobile @media tightens padding/gap and hides .user-menu__name). */
    min-width: 0;
}

/* Mobile: tighten padding + drop the brand text + drop the user-menu
 * name so the actions cluster (user menu + palette picker + theme
 * toggle) fits without overflowing the viewport. The user menu trigger
 * keeps its presence dot, which is enough to identify "I'm logged in". */
@media (width <= 640px) {
    .top-bar {
        padding: 0 0.5rem;
        gap: 0.25rem;
        /* Allow the bar to wrap onto a second row if the actions cluster
         * (user dot + palette picker + theme toggle) plus the brand
         * still doesn't fit a 320px viewport. Height becomes auto.
         * The header is sticky, so the wrapped row stays visible. */
        flex-wrap: wrap;
        height: auto;
        min-height: var(--header-height);
        padding-block: 0.25rem;
    }
    .top-bar__brand-text,
    .user-menu__name { display: none; }
    .top-bar__actions {
        gap: 0.25rem;
        /* Let actions shrink rather than push the bar wider. */
        min-width: 0;
        flex-shrink: 1;
    }
}

[data-theme="dark"] .top-bar {
    background-color: rgb(29 29 31 / 85%);
}

/* Top-bar accent stripe for themed palettes */
.top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--sidebar-accent, transparent);
    opacity: 0.7;
}

.top-bar__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-text);
}

.top-bar__brand:hover {
    text-decoration: none;
    color: var(--color-primary);
}

.top-bar__logo {
    max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.top-bar__brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top-bar__name {
    font-weight: 700;
    font-size: var(--fs-md);
    white-space: nowrap;
    line-height: 1.2;
}

.top-bar__desc {
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
    white-space: nowrap;
}

.top-bar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Sidebar toggle button */
.sidebar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
}

.sidebar-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: transform 0.25s, opacity 0.25s;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 40%);
    z-index: calc(var(--z-header) - 1);
    display: none;
}

.sidebar-overlay.active {
    display: block;
}

/* ---------- 4b. Layout Content ---------- */
.layout-content {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- 4c. User menu ---------- */
.user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.user-menu__trigger {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--fs-base);
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background-color 0.15s;
}

.user-menu__trigger:hover {
    background-color: var(--color-bg-alt);
    border-color: var(--color-text-secondary);
}

.user-menu__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px var(--color-shadow);
    padding: 0.5rem 0 0.35rem;
    z-index: var(--z-header);
}

.user-menu:hover .user-menu__dropdown,
.user-menu:focus-within .user-menu__dropdown {
    display: block;
}

.user-menu__dropdown a {
    display: block;
    padding: 0.45rem 1rem;
    color: var(--color-text);
    font-size: var(--fs-base);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.user-menu__dropdown a:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
}

.user-menu__dropdown form {
    margin: 0;
    padding: 0;
}

.user-menu__logout {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.45rem 1rem;
    color: var(--color-text);
    font-size: var(--fs-base);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    border-radius: 0;
}

.user-menu__logout:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-danger);
}

.user-menu__login {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--fs-base);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius);
    transition: color 0.15s, background-color 0.15s;
}

.user-menu__login:hover {
    color: var(--color-text);
    background-color: var(--color-bg-alt);
}

.user-menu__separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0.25rem 0;
}

.user-menu__badge {
    display: inline-block;
    background: var(--color-accent, #4a90d9);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius);
    vertical-align: middle;
    margin-left: 0.3rem;
}

/* Presence dot in user menu trigger */
.user-menu__presence {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    margin-right: 0.375rem;
    flex-shrink: 0;
    vertical-align: middle;
}

.user-menu__presence--invisible {
    background: var(--color-text-muted, #888);
    opacity: 0.5;
}

/* Online members dropdown */
.online-members {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 0.75rem;
}

.online-members__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--fs-xs);
    color: var(--color-text-muted, #888);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius, 4px);
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.online-members__trigger:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-text);
}

.online-members__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 4px);
    box-shadow: 0 4px 16px var(--color-shadow);
    padding: 0.35rem 0;
    z-index: var(--z-header);
}

.online-members:hover .online-members__dropdown,
.online-members:focus-within .online-members__dropdown {
    display: block;
}

.online-members__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: var(--fs-sm);
    color: var(--color-text);
}

.online-members__item:hover {
    background-color: var(--color-bg-alt);
}

.online-members__name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-members__mp {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted, #888);
    padding: 0.15rem;
    border-radius: var(--radius, 4px);
    transition: color 0.15s, background-color 0.15s;
    flex-shrink: 0;
}

.online-members__mp:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-alt);
}

/* Keep the dot style for reuse */
.online-count__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    flex-shrink: 0;
    transition: border-color 0.15s, background-color 0.15s;
    line-height: 1;
}

.theme-toggle:hover {
    background-color: var(--color-bg-alt);
    border-color: var(--color-text-secondary);
}
.theme-toggle svg { pointer-events: none; }

/* Hide both by default, show correct icon based on theme */
.theme-toggle__light, .theme-toggle__dark { display: none; }
[data-theme="dark"] .theme-toggle__light { display: inline-flex; }
[data-theme="light"] .theme-toggle__dark { display: inline-flex; }

/* Palette picker — dropdown with paint palette icon */
.palette-picker {
    position: relative;
    flex-shrink: 0;
}

.palette-picker__btn {
    background: none;
    border: 1px solid var(--color-border);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    box-shadow: none;
    transition: border-color 0.2s var(--ease-out-3),
                background-color 0.2s var(--ease-out-3),
                transform 0.15s var(--ease-elastic-out-1);
}

.palette-picker__btn:hover {
    background-color: var(--color-bg-alt);
    border-color: var(--color-text-secondary);
}

.palette-picker__btn:active { transform: scale(0.95); }

.palette-picker__btn[aria-expanded="true"] {
    background-color: var(--color-bg-alt);
    border-color: var(--color-primary);
}

.palette-picker__icon {
    width: 18px;
    height: 18px;
}

/* Dropdown menu — forced neutral colors, independent of active palette */
.palette-picker__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #fff;
    color: #1a1a2e;
    border: 1px solid #dcdce0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    padding: 0.25rem;
    z-index: var(--z-dropdown);
    opacity: 0;
    transform: translateY(-4px);
}

.palette-picker__menu.open {
    display: flex;
    flex-direction: column;
    animation: palette-menu-in 0.2s var(--ease-out-3) forwards;
}

[data-theme="dark"] .palette-picker__menu {
    background: #27272a;
    color: #f4f4f5;
    border-color: #3f3f46;
}

@keyframes palette-menu-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.palette-picker__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    color: inherit;
    font-size: var(--fs-base);
    font-family: inherit;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.palette-picker__option:hover {
    background-color: rgb(128 128 128 / 10%);
}

.palette-picker__option.active {
    font-weight: 600;
}

.palette-picker__option.active::after {
    content: '\2713';
    margin-left: auto;
    font-size: var(--fs-sm);
}

/* Swatches and flags for palette picker */
.palette-picker__swatch {
    display: flex;
    flex-direction: column;
    width: 20px;
    height: 14px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.palette-picker__swatch::before,
.palette-picker__swatch::after {
    content: '';
    flex: 1;
}

.palette-picker__swatch--default {
    background: #64748b;
}
.palette-picker__swatch--default::before { background: #94a3b8; }
.palette-picker__swatch--default::after  { background: #475569; }

.palette-picker__flag {
    width: 20px;
    height: 14px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* ---------- 4b. Breadcrumb (own row, sticky under the top-bar) ----------
 *
 * The trail lives on its own full-width row directly under the top-bar.
 * This gives it room to breathe on desktop (no more wrapping against the
 * user menu / palette picker) and a generous tap zone on mobile.
 *
 * It sticks to the top of the viewport just below the top-bar so the
 * user can step back to a parent level at any scroll position — the
 * `top` offset matches the top-bar height.
 */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0.4rem 1.25rem;
    margin: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

/* stylelint-disable-next-line no-descending-specificity -- breadcrumb a, not user-menu a */
.breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumb a[aria-current="page"] {
    color: var(--color-text);
    font-weight: 500;
}

.breadcrumb__sep {
    margin: 0 0.35rem;
    color: var(--color-border);
}

/* ---------- 5. Footer ---------- */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    margin-top: auto;
    transition: border-color 0.2s;
}

.site-footer__legal {
    font-size: var(--fs-sm);
    font-style: italic;
    max-width: 600px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
}

.site-footer__contact {
    margin-top: 0.5rem;
    font-size: var(--fs-sm);
}

/* stylelint-disable-next-line no-descending-specificity -- footer a, not user-menu a */
.site-footer__contact a {
    color: var(--color-primary);
}

/* Footer accent stripe for themed palettes */
.site-footer::before {
    content: '';
    display: block;
    height: 2px;
    margin: 0 auto 1.5rem;
    max-width: 200px;
    background: var(--sidebar-accent, var(--color-border));
    border-radius: 1px;
    opacity: 0.6;
}

/* ---------- 6. Typography ---------- */
h1 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin-bottom: 1rem;
}

h2 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
}

/* ---------- 7. Links & Buttons ---------- */
/* stylelint-disable no-descending-specificity -- global resets after scoped component styles */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    text-decoration: underline;
}

button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    font-size: var(--fs-base);
    font-weight: 500;
    font-family: inherit;
    border: none;
    border-radius: var(--radius);
    background-color: var(--color-primary);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-1), var(--inner-shadow-highlight);
    transition:
        background-color 0.2s var(--ease-out-3),
        box-shadow 0.2s var(--ease-out-3),
        transform 0.15s var(--ease-elastic-out-1);
}

/* The .btn `display: inline-flex` above has the same specificity as
 * the UA `[hidden]` rule but author CSS wins, so the HTML `hidden`
 * attribute is silently ignored on .btn elements. Restore it
 * explicitly so templates can rely on `<a class="btn" hidden>` to
 * actually hide. */
.btn[hidden] {
    display: none;
}
/* stylelint-enable no-descending-specificity */

button:hover,
.btn:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-2), var(--inner-shadow-highlight);
    text-decoration: none;
}

button:active,
.btn:active {
    transform: scale(0.97);
    box-shadow: var(--inner-shadow-1);
    transition-duration: 0.08s;
}

/* Disabled state for any .btn or native <button> — mutes the colors and
 * cuts hover/active feedback so it reads as "not actionable right now".
 * Pair with the `disabled` HTML attribute and a `title` explaining why
 * (so the user knows what to do to unlock it). */
button:disabled,
button[disabled],
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(40%);
}
button:disabled:hover,
button[disabled]:hover,
.btn:disabled:hover,
.btn[disabled]:hover {
    /* Override the .btn:hover bg/shadow so the muted look stays. */
    background-color: inherit;
    box-shadow: none;
    transform: none;
}

.btn--secondary {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    box-shadow: none;
}

.btn--secondary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-2);
}

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

.btn--danger:hover {
    background-color: color-mix(in srgb, var(--color-danger) 85%, #000);
}

.btn--accent {
    background-color: var(--color-accent, var(--color-primary));
}

.btn--accent:hover {
    background-color: color-mix(in srgb, var(--color-accent, var(--color-primary)) 85%, #000);
    box-shadow: var(--shadow-2), var(--inner-shadow-highlight);
}

.btn--loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn--loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentcolor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: var(--animation-spin);
    animation-duration: 0.6s;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* btn-spin no longer needed — uses --animation-spin */

/* ---------- 8. Cards ---------- */
.blog-card,
.album-card,
.contest-card,
.member-card,
.submission-card,
.submission-result {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    transition:
        transform 0.3s var(--ease-out-3),
        box-shadow 0.3s var(--ease-out-3),
        background-color 0.2s var(--ease-out-3);
}

.blog-card:hover,
.album-card:hover,
.contest-card:hover,
.member-card:hover,
.submission-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-4);
}

.blog-card img,
.album-card img,
.contest-card img,
.member-card img,
.submission-card img,
.submission-result img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.blog-card > *:not(img, picture),
.album-card > *:not(img, picture),
.contest-card > *:not(img, picture),
.member-card > *:not(img, picture),
.submission-card > *:not(img, picture),
.submission-result > *:not(img, picture) {
    padding: 0.75rem 1rem;
}

.blog-card h2,
.album-card h2,
.contest-card h2,
.member-card h3 {
    margin-bottom: 0.25rem;
}

/* stylelint-disable no-descending-specificity -- card links, not user-menu a */
.blog-card h2 a,
.album-card h2 a,
.contest-card h2 a,
.member-card h3 a {
    color: var(--color-text);
    text-decoration: none;
}
/* stylelint-enable no-descending-specificity */

.blog-card h2 a:hover,
.album-card h2 a:hover,
.contest-card h2 a:hover,
.member-card h3 a:hover {
    color: var(--color-primary);
}

.blog-card p,
.album-card p,
.contest-card p {
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
}

/* ---------- 9. Grids ---------- */
.blog-posts,
.albums-grid,
.contests-grid,
.members-grid,
.submissions-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ---------- 10. Photo Detail ---------- */
.photo-detail__hero {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.photo-detail__image {
    flex: 0 0 65%;
    min-width: 0;
}

.photo-detail__image .justified-gallery--single {
    display: block;
}

.photo-detail__image .justified-gallery--single .justified-gallery__item {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* stylelint-disable-next-line selector-max-specificity -- deep gallery context for single photo */
.photo-detail__image .justified-gallery--single .justified-gallery__item img {
    display: block;
    max-width: 100%;
    max-height: 50vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
    cursor: zoom-in;
}

/* Tabs for photo detail view switching */
.photo-detail__view-tabs {
    margin-bottom: 0.5rem;
}

/* Focal mode: zoom into zone of interest via object-fit: none */
.photo-detail__image--focal .justified-gallery--single .justified-gallery__item {
    height: 50vh;
    min-height: 50vh;
    overflow: hidden;
}

/* stylelint-disable-next-line selector-max-specificity -- focal mode override for single photo */
.photo-detail__image--focal .justified-gallery--single .justified-gallery__item img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: none;
}

.photo-detail__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.photo-detail__info h1 {
    font-size: var(--fs-xl);
    margin: 0;
    line-height: 1.3;
}

.photo-detail__photographer {
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    margin: 0;
}

.photo-detail__likes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.photo-detail__description {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.photo-detail__tags,
.photo-detail__albums {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.photo-detail__comments {
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}

/* ---------- 10b. Photo Edit ---------- */
.photo-edit__layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.photo-edit__preview {
    flex: 0 0 40%;
    min-width: 0;
    position: sticky;
    top: calc(var(--header-height) + 1rem);
}

/* stylelint-disable-next-line no-descending-specificity -- different component from photo-detail img */
.photo-edit__preview .focal-point-picker img {
    max-height: 50vh;
    width: auto;
    max-width: 100%;
}

.photo-edit__form {
    flex: 1;
    min-width: 0;
}

.photo-edit__form .fields {
    max-width: none;
}

.photo-edit__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    min-height: 1.5rem;
}

.photo-edit__pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-bg-alt);
    color: var(--color-text-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: var(--fs-sm);
    transition: background-color 0.2s;
}

.photo-edit__pill--thematic {
    border-left: 3px solid var(--album-thematic);
}

.photo-edit__pill--personal {
    border-left: 3px solid var(--color-primary);
}

.photo-edit__pill--collective {
    border-left: 3px solid var(--album-collectif);
}

.photo-edit__exif {
    margin-top: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 0.2s;
}

.photo-edit__exif summary {
    padding: 0.6rem 0.8rem;
    font-weight: 500;
    font-size: var(--fs-base);
    cursor: pointer;
    color: var(--color-text-secondary);
}

.photo-edit__exif-fields {
    padding: 0 0.8rem 0.8rem;
}

.form-field--toggle label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.exif-data {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.exif-data span {
    background-color: var(--color-bg-alt);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    transition: background-color 0.2s;
}

.likes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.comments {
    margin-top: 1.5rem;
}

.comment {
    border-left: 3px solid var(--color-primary);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: var(--color-bg-alt);
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: background-color 0.2s;
}

.comment small,
.comment time {
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
}

.comment--reply {
    margin-left: 2rem;
    border-left-color: var(--color-text-secondary);
}

.comment--hidden {
    opacity: 0.5;
}

.comment__badge-hidden {
    display: inline-block;
    background-color: var(--color-warning);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    vertical-align: middle;
}

.comment__edited {
    color: var(--color-text-secondary);
    font-size: var(--fs-xs);
    font-style: italic;
}

.comment__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.comment__actions form {
    display: inline;
}

.comment__reply-form {
    display: none;
    margin-top: 0.75rem;
}

.comment__reply-form.active {
    display: block;
}

.comment__reply-form textarea {
    min-height: 60px;
    margin-bottom: 0.5rem;
}

/* ---------- 11. Profile ---------- */
.profile {
    max-width: 800px;
    margin: 0 auto;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* stylelint-disable-next-line no-descending-specificity -- profile avatar, not photo-detail img */
.profile-header img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-section {
    border-top: 1px solid var(--color-border);
    padding: 1.5rem 0;
    transition: border-color 0.2s;
}

.profile-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.profile-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.profile-links li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.profile-links svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.profile-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-section h2 svg {
    opacity: 0.6;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: var(--color-bg-alt);
    color: var(--color-text-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: var(--fs-sm);
    transition: background-color 0.2s;
}

.tag__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.tag__type--c { background: var(--album-collectif); }
.tag__type--t { background: var(--album-thematic); }
.tag__type--p { background: var(--album-personal); }

/* ---------- 12. Forms ---------- */
.form-row {
    display: flex;
    gap: 1rem;
}

.form-row > .form-field {
    flex: 1;
}

/* stylelint-disable-next-line no-descending-specificity -- base after form-row context */
.form-field {
    margin-bottom: 1.25rem;
}

.form-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.4rem;
    font-size: var(--fs-base);
}

/* stylelint-disable no-descending-specificity -- global form resets after scoped comment textarea */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    font-size: var(--fs-md);
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--inner-shadow-1);
    transition:
        border-color 0.2s var(--ease-out-3),
        box-shadow 0.2s var(--ease-out-3),
        background-color 0.2s var(--ease-out-3);
}
/* stylelint-enable no-descending-specificity */

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent),
                var(--inner-shadow-1);
}

/* stylelint-disable-next-line no-descending-specificity -- global textarea after scoped comment textarea */
textarea {
    min-height: 120px;
    resize: vertical;
}

fieldset {
    border: none;
    padding: 1rem 0;
}

fieldset legend {
    font-weight: 600;
    font-size: var(--fs-lg);
    margin-bottom: 0.75rem;
}

.form--inline {
    display: inline;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.errors {
    list-style: none;
    color: var(--color-danger);
    font-size: var(--fs-base);
    margin-top: 0.25rem;
}

.errors li::before {
    content: "\2022 ";
}

.help {
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    margin-top: 0.25rem;
}

/* stylelint-disable-next-line no-descending-specificity -- base after photo-edit__form context */
.fields {
    max-width: 600px;
}

/* ---------- 13. Flash Messages ---------- */
.messages {
    list-style: none;
    margin-bottom: 1.5rem;
}

.messages li {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    font-size: var(--fs-base);
    font-weight: 500;
    position: relative;
}

.messages .success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.messages .error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.messages .warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.messages .info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

[data-theme="dark"] .messages .success {
    background-color: rgb(52 199 89 / 15%);
    color: #34c759;
    border-color: rgb(52 199 89 / 30%);
}

[data-theme="dark"] .messages .error {
    background-color: rgb(255 59 48 / 15%);
    color: #ff6961;
    border-color: rgb(255 59 48 / 30%);
}

[data-theme="dark"] .messages .warning {
    background-color: rgb(255 159 10 / 15%);
    color: #ff9f0a;
    border-color: rgb(255 159 10 / 30%);
}

[data-theme="dark"] .messages .info {
    background-color: rgb(90 200 250 / 15%);
    color: #5ac8fa;
    border-color: rgb(90 200 250 / 30%);
}

.flash-dismiss {
    display: inline;
    background: none;
    border: none;
    color: inherit;
    font-size: var(--fs-sm);
    opacity: 0.6;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    margin-left: 0.5rem;
}

.flash-dismiss:hover {
    opacity: 1;
}

/* ---------- 14. Gallery Nav ---------- */
.gallery-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* stylelint-disable-next-line no-descending-specificity -- gallery-nav a, not user-menu a */
.gallery-nav a {
    background-color: var(--color-bg-alt);
    color: var(--color-text-secondary);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: var(--fs-base);
    transition: background-color 0.15s, color 0.15s;
}

/* stylelint-disable-next-line no-descending-specificity -- gallery-nav hover, not card a:hover */
.gallery-nav a:hover,
.gallery-nav a.active {
    background-color: var(--color-primary);
    color: #fff;
}

/* ---------- 15. Hero ---------- */
.hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* stylelint-disable-next-line no-descending-specificity -- hero img, not photo-detail img */
.hero img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.hero .hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(transparent, rgb(0 0 0 / 65%));
    color: #fff;
}

.hero .hero-content h1 {
    color: #fff;
}

.hero--default {
    text-align: center;
    background: #0a0a1a;
}

/* stylelint-disable-next-line no-descending-specificity -- hero variant after hero .hero-content h1 */
.hero--default h1,
.hero--default p {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    color: #fff;
    text-shadow: 0 2px 8px rgb(0 0 0 / 70%);
}

.hero--default p {
    bottom: 0.5rem;
    font-size: var(--fs-base);
    opacity: 0.85;
}

.hero-block {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* stylelint-disable-next-line no-descending-specificity -- hero-block img, not photo-detail img */
.hero-block img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Featured photo */
.featured-photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* stylelint-disable-next-line no-descending-specificity -- featured-photo img, not photo-detail img */
.featured-photo img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Welcome */
.welcome {
    margin-bottom: 2rem;
    font-size: var(--fs-md);
    line-height: 1.7;
}

/* ---------- 16. Blog Article ---------- */
.author {
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    margin-bottom: 0.5rem;
}

.intro {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.body {
    max-width: 700px;
    line-height: 1.8;
    font-size: var(--fs-md);
}

.body p {
    margin-bottom: 1rem;
}

/* stylelint-disable-next-line no-descending-specificity -- body img, not photo-detail img */
.body img {
    border-radius: var(--radius);
    margin: 1.5rem 0;
}

.pull-quote {
    border-left: 4px solid var(--color-primary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    background-color: var(--color-bg-alt);
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: background-color 0.2s;
}

/* Blog categories */
.blog-categories {
    margin-bottom: 1.5rem;
}

.blog-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
}

/* stylelint-disable-next-line no-descending-specificity -- blog categories a, not user-menu a */
.blog-categories-list a {
    background-color: var(--color-bg-alt);
    color: var(--color-text-secondary);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: var(--fs-base);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

/* stylelint-disable-next-line no-descending-specificity -- blog categories hover, not card a:hover */
.blog-categories-list a:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* Recent posts sidebar */
.recent-posts {
    margin-top: 2rem;
}

/* stylelint-disable-next-line no-descending-specificity -- recent-posts a, not user-menu a */
.recent-posts a {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-base);
    transition: color 0.15s;
}

/* stylelint-disable-next-line no-descending-specificity -- recent-posts hover, not card a:hover */
.recent-posts a:hover {
    color: var(--color-primary);
}

/* ---------- 17. Contest ---------- */
.phase {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background-color: var(--color-primary);
    color: #fff;
    margin-bottom: 0.5rem;
}

.rules {
    background-color: var(--color-bg-alt);
    padding: 1.25rem;
    border-radius: var(--radius);
    margin: 1rem 0;
    transition: background-color 0.2s;
}

.results {
    margin-top: 2rem;
}

.photographer {
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
}

/* Submission result ranking */
.submission-result {
    position: relative;
}

/* Podium */
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
    padding: 1rem 0;
}

.podium__place {
    text-align: center;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--color-shadow);
    transition: background-color 0.2s;
    flex: 1;
    max-width: 300px;
    cursor: pointer;
}

/* stylelint-disable-next-line no-descending-specificity -- podium img, not photo-detail img */
.podium__place img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.podium__place--first {
    order: 2;
    flex: 1.3;
    max-width: 360px;
}

.podium__place--second {
    order: 1;
}

.podium__place--third {
    order: 3;
}

.podium__medal {
    display: block;
    font-size: var(--fs-3xl);
    margin: 0.5rem 0 0;
}

.podium__place--first .podium__medal {
    font-size: var(--fs-3xl);
}

.podium__author {
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    padding: 0 0.75rem;
}

.podium__rank {
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--color-primary);
    padding: 0 0.75rem 0.75rem;
}

.podium__place h3 {
    padding: 0 0.75rem;
    margin-bottom: 0.25rem;
}

/* Contest documents */
.contest-documents {
    background-color: var(--color-bg-alt);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin: 1.5rem 0;
    transition: background-color 0.2s;
}

.contest-documents h2 {
    margin-bottom: 1rem;
}

.contest-documents p {
    margin-bottom: 0.75rem;
}

/* Inscription info */
.inscription-info {
    border-left: 4px solid var(--color-primary);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background-color: var(--color-surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: background-color 0.2s;
}

.inscription-info p {
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
}

.inscription-info p:last-child {
    margin-bottom: 0;
}

.podium__place:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px var(--color-shadow);
}

/* Podium responsive */
@media (width <= 768px) {
    .podium {
        flex-direction: column;
        align-items: center;
    }

    .podium__place {
        order: unset !important;
        max-width: 100%;
        width: 100%;
    }

    .podium__place--first {
        flex: unset;
        max-width: 100%;
    }
}

/* ---------- 18. Owner Actions ---------- */
.owner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

/* ---------- 18b. Button variants ---------- */
.btn--small {
    padding: 0.35rem 0.75rem;
    font-size: var(--fs-sm);
}

/* Even more compact than .btn--small — sized for dense table cells
 * (e.g. agenda émargement grid). */
.btn--tiny {
    padding: 0.2rem 0.5rem;
    font-size: var(--fs-2xs);
    border-radius: calc(var(--radius) - 2px);
}

/* Explicit alias for the default primary visual — `.btn` already paints
 * the primary background, but markup that says `btn btn--primary` reads
 * better than `btn` alone, especially next to `btn btn--secondary` /
 * `btn btn--danger` siblings. No additional rules needed. */
.btn--primary {}

/* ---------- 19. Gallery (justified-gallery overrides) ---------- */
.gallery {
    margin: 1.5rem 0;
}

/* ---------- 19. Tabs (Wagtail) ---------- */
.w-tabs__list {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    list-style: none;
    margin-bottom: 1.5rem;
}

/* stylelint-disable no-descending-specificity -- tabs a, not user-menu a */
.w-tabs__list button,
.w-tabs__list a {
    background: none;
    border: none;
    padding: 0.6rem 1.2rem;
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.w-tabs__list button:hover,
.w-tabs__list a:hover,
.w-tabs__list button[aria-selected="true"],
.w-tabs__list button.active,
.w-tabs__list a.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: none;
}
/* stylelint-enable no-descending-specificity */

.w-tabs__panel {
    padding: 1rem 0;
}

/* ---------- 20. Focal Point Picker ---------- */
.focal-point-picker {
    position: relative;
    display: inline-block;
    cursor: crosshair;
    margin-bottom: 0.5rem;
    user-select: none;
    overflow: hidden;
}

/* stylelint-disable-next-line no-descending-specificity -- focal picker img, not photo-detail img */
.focal-point-picker img {
    display: block;
    border-radius: var(--radius-lg);
    pointer-events: none;
}

.focal-point-picker__selection {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgb(0 0 0 / 35%);
    pointer-events: none;
    display: none;
    z-index: 2;
}

.focal-point-picker__selection::before,
.focal-point-picker__selection::after {
    content: "";
    position: absolute;
    background-color: rgb(255 255 255 / 50%);
}

/* Center crosshair horizontal */
.focal-point-picker__selection::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
}

/* Center crosshair vertical */
.focal-point-picker__selection::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
}

.focal-point-picker__actions {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---------- 21. Desktop: Sidebar Collapsed (icon-only) ---------- */
@media (width >= 769px) {
    .sidebar-toggle {
        display: none;
    }

    .top-bar__brand {
        display: none;
    }

    .sidebar.collapsed {
        width: var(--sidebar-collapsed-width);
        overflow: visible;
    }

    .sidebar.collapsed .sidebar__header {
        padding: 0.5rem;
    }

    .sidebar.collapsed .sidebar__collapse-btn {
        position: static;
    }

    .sidebar.collapsed .sidebar__name,
    .sidebar.collapsed .sidebar__desc {
        display: none;
    }

    .sidebar.collapsed .sidebar__logo {
        max-width: 32px;
        max-height: 32px;
    }

    /* stylelint-disable selector-max-specificity -- collapsed sidebar requires deep scoping */
    .sidebar.collapsed .sidebar__collapse-btn svg {
        transform: rotate(180deg);
    }

    .sidebar.collapsed .sidebar__nav {
        padding: 0.25rem 0;
    }

    .sidebar.collapsed .sidebar__section {
        padding: 0.25rem 0;
        position: relative;
    }

    .sidebar.collapsed .sidebar__section-header {
        justify-content: center;
    }

    .sidebar.collapsed .sidebar__link--parent {
        justify-content: center;
        padding: 0.6rem 0;
        position: relative;
    }

    .sidebar.collapsed .sidebar__label {
        display: none;
    }

    /* Badge as dot indicator on icon in collapsed mode */
    .sidebar.collapsed .sidebar__badge {
        display: none;
    }

    .sidebar.collapsed .sidebar__badge--primary {
        display: block;
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 0.5rem;
        height: 0.5rem;
        padding: 0;
        font-size: 0;
        border-radius: 50%;
    }

    .sidebar.collapsed .sidebar__section-toggle {
        display: none;
    }

    .layout-content.expanded {
        margin-left: var(--sidebar-collapsed-width);
    }

    /* --- Collapsed mode: flyout submenu on hover --- */

    /* Hidden by default, shown on hover */
    .sidebar.collapsed .sidebar__submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        min-width: 220px;
        max-width: 300px;
        max-height: 70vh;
        overflow-y: auto;
        background: var(--color-surface, #27272a);
        border: 1px solid var(--color-border, #3f3f46);
        border-radius: var(--radius);
        box-shadow: 0 4px 16px var(--color-shadow, rgb(0 0 0 / 30%));
        padding: 0.5rem 0;
        z-index: var(--z-dropdown);
        margin-left: 4px;
    }

    /* Flyout header: show module name at top */
    .sidebar.collapsed .sidebar__submenu::before {
        content: attr(data-flyout-label);
        display: block;
        padding: 0.4rem 0.75rem 0.3rem;
        font-size: var(--fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-secondary, #a1a1aa);
        border-bottom: 1px solid var(--color-border, #3f3f46);
        margin-bottom: 0.25rem;
    }

    /* Show on section hover */
    .sidebar.collapsed .sidebar__section:hover .sidebar__submenu {
        display: block;
    }

    /* Ensure submenu labels are visible in flyout */
    .sidebar.collapsed .sidebar__submenu .sidebar__label {
        display: inline;
    }

    /* Ensure ALL badges are visible in flyout (override collapsed hide) */
    .sidebar.collapsed .sidebar__submenu .sidebar__badge,
    .sidebar.collapsed .sidebar__submenu .sidebar__badge--primary,
    .sidebar.collapsed .sidebar__submenu .sidebar__badge--poll,
    .sidebar.collapsed .sidebar__submenu .sidebar__badge--subsection {
        display: inline-flex;
        position: static;
        min-width: auto;
        height: auto;
        padding: 0.1rem 0.4rem;
        font-size: var(--fs-xs);
        border-radius: var(--radius);
    }

    /* Smooth bridge: prevent gap between icon and flyout */
    .sidebar.collapsed .sidebar__submenu::after {
        content: '';
        position: absolute;
        left: -8px;
        top: 0;
        width: 8px;
        height: 100%;
    }

    /* In flyout: show all subsections (override collapsed state) */
    .sidebar.collapsed .sidebar__submenu .sidebar__subsection--collapsed .sidebar__subsection-body {
        display: block;
    }

    /* In flyout: group labels visible */
    .sidebar.collapsed .sidebar__submenu .sidebar__group-label {
        display: block;
    }

    /* In flyout: subsection items visible */
    .sidebar.collapsed .sidebar__submenu .sidebar__section--collapsed .sidebar__submenu {
        display: block;
    }

    /* Remove old tooltip (replaced by flyout) */
    .sidebar.collapsed .sidebar__link--parent::after {
        display: none;
    }
    /* stylelint-enable selector-max-specificity */
}

/* ---------- 22. Responsive ---------- */

/* Tablet */
@media (width <= 1024px) {
    main {
        /* Keep the top offset from the fixed header (top-bar + breadcrumb
         * row), tighten the other sides. */
        padding: calc(var(--header-height) + 3rem) 1rem 1rem;
    }

    .blog-posts,
    .albums-grid,
    .contests-grid,
    .members-grid,
    .submissions-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Mobile */
@media (width <= 768px) {
    main {
        padding: calc(var(--header-height) + 3rem) 0.75rem 0.75rem;
    }

    h1 {
        font-size: var(--fs-xl);
    }

    h2 {
        font-size: var(--fs-lg);
    }

    /* Sidebar hidden by default on mobile */
    .sidebar,
    .sidebar.collapsed {
        width: var(--sidebar-width);
        transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Hide sidebar collapse button on mobile */
    .sidebar__collapse-btn {
        display: none;
    }

    /* No left margin on mobile */
    .layout-content,
    .layout-content.expanded {
        margin-left: 0;
    }

    /* Sidebar is drawer-style on mobile, so the fixed header spans the
     * full viewport width (no sidebar gutter). */
    .sticky-header,
    .layout-content.expanded .sticky-header {
        left: 0;
    }

    /* Breadcrumb mobile — tighter padding. */
    .breadcrumb {
        padding: 0.35rem 0.75rem;
    }

    /* Grids single column */
    .blog-posts,
    .albums-grid,
    .contests-grid,
    .members-grid,
    .submissions-grid {
        grid-template-columns: 1fr;
    }

    /* Profile */
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    /* Hero */
    .hero .hero-content {
        padding: 1rem;
    }

    /* Body prose */
    .body {
        font-size: var(--fs-md);
    }

    /* Photo detail */
    .photo-detail__hero {
        flex-direction: column;
    }

    .photo-detail__image {
        flex: none;
        width: 100%;
    }

    .exif-data {
        gap: 0.4rem;
    }

    .exif-data span {
        font-size: var(--fs-xs);
        padding: 0.2rem 0.5rem;
    }

    /* Photo edit */
    .photo-edit__layout {
        flex-direction: column;
    }

    .photo-edit__preview {
        flex: none;
        width: 100%;
        position: static;
    }
}

/* Small mobile */
@media (width <= 480px) {
    .top-bar {
        padding: 0 0.75rem;
        gap: 0.75rem;
    }

    .top-bar__brand-text {
        display: none;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* ---------- Tag Autocomplete ---------- */
.tag-ac-wrapper { position: relative; display: inline-block; width: 100%; }

.tag-ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px var(--color-shadow);
}

.tag-ac-item {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: var(--fs-base);
    color: var(--color-text);
}

.tag-ac-item:hover,
.tag-ac-item.active {
    background: var(--color-primary);
    color: #fff;
}

.tag-ac-item strong {
    font-weight: 700;
}

.tag-ac-item.active strong,
.tag-ac-item:hover strong {
    color: #fff;
}

/* ---------- Contact Page ---------- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
}

.contact-info {
    position: sticky;
    top: 2rem;
}

@media (width <= 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-info {
        position: static;
    }
}

/* ---------- About Page ---------- */
.about-section {
    margin-bottom: 2.5rem;
}

.about-section h2 {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.bureau-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.bureau-card {
    text-align: center;
}

.bureau-card__photo {
    border-radius: 50%;
    margin-bottom: 0.75rem;
}

.bureau-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bureau-card__info span {
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
}

.infos-pratiques {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* stylelint-disable-next-line no-descending-specificity -- info-item strong, not tag-ac-item strong */
.info-item strong {
    display: block;
    margin-bottom: 0.25rem;
}

.osm-map {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.osm-map iframe {
    display: block;
}

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-base);
}

/* ---------- Legal Page ---------- */
.legal-section {
    margin-bottom: 2.5rem;
}

.legal-section h2 {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.legal-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
}

.legal-dl dt {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.legal-dl dd {
    margin: 0;
}

/* ── Photo Comments (timeline reuse) ── */
.photo-comments {
    max-width: 52rem;
    margin-top: 2rem;
}

.photo-comments h2 {
    margin-bottom: 1rem;
}

.photo-comments .forum-detail__entry--reply {
    margin-left: 2rem;
}

.photo-comments__reply-inline {
    display: none;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.photo-comments__reply-inline.active {
    display: block;
}

.photo-comments__reply-inline textarea {
    width: 100%;
    min-height: 3rem;
}

.photo-comments__edit-textarea {
    width: 100%;
    min-height: 4rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    resize: vertical;
}

.photo-comments__edit-actions {
    display: flex;
    gap: 0.5rem;
}

.photo-comments__textarea-wrapper {
    position: relative;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.photo-comments__textarea-wrapper textarea {
    flex: 1;
}

/* ── Emoji Picker ── */
.emoji-picker-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.375rem 0.5rem;
    font-size: var(--fs-lg);
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}

.emoji-picker-btn:hover {
    background: var(--color-surface-highlight);
}

.emoji-picker {
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: var(--z-sticky);
    width: 320px;
    max-height: 360px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px var(--color-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.emoji-picker__search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-base);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
}

.emoji-picker__tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 0 0.25rem;
}

.emoji-picker__tab {
    flex: 1;
    padding: 0.375rem 0;
    border: none;
    background: none;
    font-size: var(--fs-lg);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.emoji-picker__tab:hover,
.emoji-picker__tab--active {
    opacity: 1;
}

.emoji-picker__tab--active {
    border-bottom: 2px solid var(--color-primary);
}

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1;
}

.emoji-picker__emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border: none;
    background: none;
    font-size: var(--fs-xl);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
}

.emoji-picker__emoji:hover {
    background: var(--color-surface-highlight);
}

.emoji-picker__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1rem;
    color: var(--color-text-secondary);
    font-size: var(--fs-base);
}

/* ── Photo Rating ── */
.photo-rating {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.photo-rating h3 {
    margin: 0 0 0.75rem;
    font-size: var(--fs-md);
}

/* ── Rating Widget (unified) ── */
.rw-section { margin-bottom: 1rem; }
.rw-section__title { font-size: var(--fs-base); font-weight: 500; margin-bottom: 0.5rem; }
/* stylelint-disable-next-line no-descending-specificity -- rw-section strong, not tag-ac-item strong */
.rw-section__title strong { font-weight: 700; }
.rw-count { font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* Read-only stars */
.rating-stars-ro { display: inline-flex; gap: 1px; margin: 0 0.3rem; }
.rating-stars-ro__star { font-size: var(--fs-base); color: var(--color-star-empty, #858590); position: relative; display: inline-block; }
.rating-stars-ro__star--filled { color: var(--color-warning); }
.rating-stars-ro__star--half { color: var(--color-star-empty, #858590); }
.rating-stars-ro__star--half::after { content: '\2605'; position: absolute; left: 0; top: 0; color: var(--color-warning); clip-path: inset(0 50% 0 0); }

/* Global grid */
.rw-grid__row { display: flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0; font-size: var(--fs-base); }
.rw-grid__label { min-width: 5rem; color: var(--color-text-secondary); }
.rw-grid__value { font-size: var(--fs-sm); color: var(--color-text-secondary); min-width: 3rem; }

/* Accordion */
.rw-accordion__toggle { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: var(--fs-sm); padding: 0.4rem 0; }
.rw-accordion__toggle:hover { text-decoration: underline; }
.rw-accordion__content { margin-top: 0.5rem; overflow-x: auto; }

/* Detail table */
.rw-detail-table { width: 100%; font-size: var(--fs-sm); border-collapse: collapse; }
.rw-detail-table th, .rw-detail-table td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.rw-detail-table th { font-weight: 600; font-size: var(--fs-xs); color: var(--color-text-secondary); }
.rw-detail-footer { font-size: var(--fs-sm); color: var(--color-text-secondary); margin-top: 0.5rem; }

/* Sliders */
.rw-sliders__row { margin-bottom: 0.6rem; }
.rw-sliders__label { display: block; font-size: var(--fs-base); color: var(--color-text-secondary); margin-bottom: 0.15rem; }
.rw-sliders__container { position: relative; padding-top: 1.1rem; }

.rw-sliders__input {
    width: 100%; height: 6px;
    appearance: none;
    background: var(--color-border); border-radius: var(--radius-sm); outline: none; cursor: pointer;
    touch-action: none;
}

.rw-sliders__input::-webkit-slider-thumb {
    appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-primary); cursor: pointer; border: 2px solid var(--color-bg);
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}

.rw-sliders__input::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-primary); cursor: pointer; border: 2px solid var(--color-bg);
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}
.rw-sliders__input:disabled { opacity: 0.5; cursor: default; }

.rw-sliders__bubble {
    position: absolute; top: 0; transform: translateX(-50%);
    background: var(--color-primary); color: #fff;
    font-size: var(--fs-xs); font-weight: 700; padding: 0.1rem 0.3rem;
    border-radius: 0.2rem; pointer-events: none; white-space: nowrap;
}

/* Rating tabs */
.rating-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: 0.75rem; }
.rating-tabs__btn { padding: 0.4rem 0.8rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-weight: 500; font-size: var(--fs-base); color: var(--color-text-secondary); }
.rating-tabs__btn--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.rw-all-ratings-link { display: inline-block; font-size: var(--fs-sm); color: var(--color-primary); margin-top: 0.5rem; }
.rw-all-ratings-link:hover { text-decoration: underline; }

/* Full ratings page */
.ratings-full__section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.ratings-full__section h2 {
    font-size: var(--fs-md);
    margin-bottom: 0.75rem;
}

/* Delete */
.rw-delete { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: var(--fs-sm); padding: 0.3rem 0; }
.rw-delete:hover { text-decoration: underline; }
.rw-owner-notice { font-size: var(--fs-base); color: var(--color-text-secondary); font-style: italic; margin-top: 0.5rem; }

/* ── Rating detail modal ── */

.rating-detail-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-detail-modal {
    background: var(--color-surface, #fff);
    border-radius: var(--radius-lg, 12px);
    padding: 1.5rem;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 8px 32px rgb(0 0 0 / 20%);
}

.rating-detail-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    border: none;
    background: none;
    font-size: var(--fs-xl);
    cursor: pointer;
    color: var(--color-text-secondary, #666);
    line-height: 1;
}

.rating-detail-modal__close:hover {
    color: var(--color-text, #333);
}

.rating-detail-modal h3 {
    margin: 0 0 1rem;
    font-size: var(--fs-md);
}

.rating-detail-modal__table-wrap {
    overflow-x: auto;
}

.rating-detail-modal__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
}

.rating-detail-modal__table th,
.rating-detail-modal__table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--color-border, #eee);
    text-align: left;
}

.rating-detail-modal__table th {
    font-weight: 600;
    color: var(--color-text-secondary, #666);
    font-size: var(--fs-sm);
    user-select: none;
}

.rating-detail-modal__table tr:hover {
    background: var(--color-surface-highlight, #f8f8f8);
}

.rating-detail-modal__avg {
    margin-top: 0.75rem;
    font-size: var(--fs-sm);
    color: var(--color-text-secondary, #666);
}

/* ── Photo Rating responsive ── */
@media (width <= 768px) {
    .emoji-picker {
        width: 280px;
    }

    .emoji-picker__grid {
        grid-template-columns: repeat(7, 1fr);
    }

    .photo-comments .forum-detail__entry--reply {
        margin-left: 1rem;
    }

    .rw-grid__row {
        flex-wrap: wrap;
    }

    .rw-grid__label {
        min-width: 4rem;
    }
}

/* ── Emoji textarea wrapper ── */
.textarea-emoji-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.textarea-emoji-wrapper textarea {
    flex: 1;
}

/* ── Modals (shared) ── */
.ms-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 40%);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.ms-modal-overlay.visible {
    display: flex;
}

.ms-modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: var(--shadow-6, 0 8px 32px rgb(0 0 0 / 30%));
}

.ms-modal h2 {
    font-size: var(--fs-lg);
    margin-bottom: 1rem;
}

.ms-modal__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.ms-modal__info {
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-primary);
    color: var(--color-text);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    margin-top: 0.5rem;
}

.ms-modal__album-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.25rem;
}

.ms-modal__album-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-base);
    transition: background 0.1s;
}

.ms-modal__album-item:hover {
    background: var(--color-bg-alt);
}

.ms-modal__album-item input[type="checkbox"] {
    accent-color: var(--color-primary);
}

.ms-modal__tag-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--fs-base);
    margin-bottom: 0.5rem;
}

.ms-modal__field-label {
    font-size: var(--fs-base);
    font-weight: 500;
    margin-bottom: 0.25rem;
    display: block;
}

.ms-modal__help {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
}

.ms-modal__warning {
    color: var(--color-danger);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.ms-modal--wide {
    max-width: 700px;
}

/* ── Transfer panel (dual-list, shared) ── */
.ms-transfer {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 250px;
}

.ms-transfer__panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ms-transfer__panel h4 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    padding: 0.5rem 0.6rem;
    margin: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.ms-transfer__search {
    padding: 0.4rem 0.6rem;
    font-size: var(--fs-sm);
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
}

.ms-transfer__search:focus {
    background: var(--color-bg);
}

.ms-transfer__list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem;
    max-height: 280px;
}

.ms-transfer__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: background 0.1s;
    user-select: none;
}

.ms-transfer__item:hover {
    background: var(--color-bg-alt);
}

.ms-transfer__item.selected {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.ms-transfer__item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-transfer__item-type {
    font-size: var(--fs-xs);
    padding: 0.1rem 0.3rem;
    border-radius: 999px;
    margin-left: 0.3rem;
    flex-shrink: 0;
}

.ms-transfer__item-type--thematic {
    background: var(--album-thematic-subtle);
    color: var(--album-thematic);
}

.ms-transfer__item-type--personal {
    background: var(--album-personal-subtle);
    color: var(--album-personal);
}

.ms-transfer__item-type--collective {
    background: var(--album-collectif-subtle);
    color: var(--album-collectif);
}

.ms-transfer__item-count {
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    margin-left: 0.3rem;
    flex-shrink: 0;
}

.ms-transfer__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.ms-transfer__btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.ms-transfer__btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.ms-transfer__list--pills {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.3rem;
    padding: 0.4rem;
}

.ms-transfer__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, border-color 0.15s;
    border: 1px solid transparent;
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
}

.ms-transfer__pill:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.ms-transfer__pill.selected {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}

.ms-transfer__pill-count {
    font-size: var(--fs-xs);
    opacity: 0.7;
}

.ms-transfer__create {
    display: flex;
    gap: 0.3rem;
    padding: 0.4rem;
    border-top: 1px solid var(--color-border);
}

.ms-transfer__create input {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    font-size: var(--fs-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}

.ms-transfer__create .btn {
    padding: 0.3rem 0.5rem;
    font-size: var(--fs-xs);
}

/* ── Pagination (shared) ── */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.pagination__info {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
}

/* ── Pill toggle (shared) ── */
.pill-toggle {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-bg-alt);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: var(--fs-base);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
    color: var(--color-text-secondary);
}
.pill-toggle input[type="checkbox"] { display: none; }

.pill-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pill-toggle__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    background: var(--color-text-secondary);
    transition: background-color 0.2s;
}

.pill-toggle:has(input:checked) {
    border-color: var(--color-success);
    background-color: rgb(52 199 89 / 10%);
    color: var(--color-text);
}

/* stylelint-disable-next-line selector-max-specificity -- :has + :checked state */
.pill-toggle:has(input:checked) .pill-toggle__dot {
    background: var(--color-success);
}