/*!
 * Copyright (c) 2026 SansPost LLC. All rights reserved.
 * FieldCast Gallery v2
 */
/* Design tokens — canonical source: common_data/brand/tokens.css */
/* AUTO-GENERATED:brand-tokens BEGIN — sync via scripts/sync-brand-tokens.js */
:root {
    /* Color — surfaces */
    --bg:           #1a1a1a;   /* charcoal — primary background */
    --surface-1:    #2b2b2b;   /* card / nav */
    --surface-2:    #333333;   /* secondary controls */
    --surface-3:    #444444;   /* tertiary borders */

    /* Color — text */
    --muted:        #555555;
    --subtle:       #777777;
    --dim:          #a1a1aa;
    --fg:           #fafafa;   /* primary text */

    /* Color — brand */
    --accent:       #b8956a;   /* warm bronze — the brand color */
    --accent-hover: #9a7a52;

    /* Color — status */
    --red:          #ef4444;   /* live indicator / alerts */

    /* Radius */
    --pill:         9999px;
    --radius-card:  8px;
    --radius-media: 12px;

    /* Typography */
    --font-body:    system-ui, "Segoe UI", Roboto, Helvetica, Arial,
                    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    --font-display: "Fraunces Variable", "Fraunces", Georgia, serif;
}
/* AUTO-GENERATED:brand-tokens END */

/* Base */
html { background-color: var(--bg); }
body {
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    background-color: var(--bg);
    color: var(--fg);
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

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

/* Header */
.header {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--surface-2);
}

/* Top row: brand | event title | live indicator */
.header-top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
}
.header-left, .header-right {
    flex-shrink: 0;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-right {
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}
.header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-center {
    flex: 1;
    text-align: center;
    min-width: 0;
}
.header-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}
.header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-back-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--dim);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.header-back-btn img {
    filter: invert(0.6);
    transition: filter 0.15s;
}
.header-back-btn:hover { background: var(--surface-2); }
.header-back-btn:hover img { filter: invert(1); }

.event-title-link { cursor: pointer; transition: color 0.15s; }
.event-title-link:hover { color: var(--accent); }

/* Gallery-level share button, right of the title (mirrors .header-back-btn). */
.title-share-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--dim);
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.title-share-btn img {
    filter: invert(0.6);
    transition: filter 0.15s;
}
.title-share-btn:hover { background: var(--surface-2); }
.title-share-btn:hover img { filter: invert(1); }

/* Sharing disabled on a youth/minor gallery: dim + non-interactive, but the
   button stays visible (with an explanatory tooltip) so the affordance reads as
   "off", not "missing". Applies to both the gallery-level (.title-share-btn) and
   lightbox (.lb-icon-btn) Share buttons. Hover styles are neutralized so it
   doesn't look actionable. */
.share-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Kept hoverable (NOT pointer-events:none) so the "sharing is off" title tooltip
   still appears; the click handlers hard-guard on the flag so nothing shares.
   Neutralize the actionable hover affordances. */
.title-share-btn.share-disabled:hover { background: none; }
.title-share-btn.share-disabled:hover img { filter: invert(0.6); }
.lb-icon-btn.share-disabled:hover { background: none; }

.header-event-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
}
.event-date-display {
    color: var(--dim);
    font-size: 0.8rem;
}

/* Brand */
.site-logo {
    text-align: center;
}
.site-logo a {
    color: var(--fg);
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.site-logo span {
    color: var(--accent);
}
/* White-label tenant logo image — swaps the text logo when a tenant sets
   branding.logoUrl. Constrained so an arbitrary logo doesn't blow up the header
   height. Tenants without a logoUrl render the text logo instead. */
.site-logo img.brand-logo-img {
    max-height: 36px;
    max-width: 220px;
    width: auto;
    vertical-align: middle;
}

.site-sub-logo {
    display: block;
    font-size: 0.65rem;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 2px;
    text-decoration: none;
}
.site-sub-logo:hover { color: var(--subtle); }
.meta-sep { color: var(--muted); font-size: 0.8rem; }

/* Live indicator */
.live-indicator {
    display: inline-flex;
    align-items: center;
    background: rgba(239, 68, 68, 0.1);
    color: var(--red);
    padding: 4px 10px;
    border-radius: var(--pill);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.live-dot {
    width: 6px;
    height: 6px;
    background-color: var(--red);
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70%       { transform: scale(1);    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.photo-count { color: var(--dim); font-size: 0.8rem; white-space: nowrap; }
.event-private-indicator { color: var(--accent); font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
.sort-toggle {
    background: transparent;
    border: 1px solid var(--surface-3);
    color: var(--dim);
    padding: 2px 10px;
    border-radius: var(--pill);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.sort-toggle:hover { background: var(--surface-2); color: var(--fg); }

/* Search */
.search-container { position: relative; width: 180px; }
.search-input {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--pill);
    color: var(--fg);
    padding: 5px 14px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, width 0.2s;
}
.search-input:focus { border-color: var(--muted); }
.search-input::placeholder { color: var(--dim); }

/* Filtered state — mirrors the person-filter-pill styling. Indicates that
   the search is actively narrowing the gallery, with a × to clear. */
.search-container.filtered .search-input {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
    padding-right: 30px;
}
.search-container.filtered .search-input::placeholder { color: rgba(255, 255, 255, 0.75); }
.search-clear-btn {
    display: none;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}
.search-clear-btn:hover { background: rgba(255, 255, 255, 0.4); }
.search-container.filtered .search-clear-btn { display: flex; align-items: center; justify-content: center; }
.search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}
.search-suggestions.active { display: block; }
.search-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-suggestion:hover, .search-suggestion.highlighted { background: var(--surface-2); color: var(--fg); }
.search-suggestion .count { color: var(--dim); font-size: 12px; }

/* Mobile header adjustments */
@media (max-width: 600px) {
    .header-top { flex-direction: column; gap: 6px; }
    .header-left { order: 0; justify-content: center; }
    .header-center { order: 1; }
    .header-right { order: 2; min-width: auto; align-items: center; }
    .header h1 { font-size: 1.3rem; }
    .search-container { width: 100%; max-width: 280px; }

    /* Center the event name under the DurkinPhotos logo; the back icon sits
       just left of the title text. The share button on the right (equal width
       to the back icon) balances it, keeping the title centered. The invisible
       spacer is only needed when the share button is hidden (event picker) —
       fc.js adds .has-share to the row when it reveals the button. */
    .header-title-row::after {
        content: "";
        display: block;
        width: 30px;
        flex-shrink: 0;
    }
    .header-title-row.has-share::after { display: none; }
}

/* Caption + tag pills (lightbox) */
.photo-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.tag-pill {
    background: rgba(255, 255, 255, 0.06);
    color: var(--subtle);
    padding: 3px 10px;
    border-radius: var(--pill);
    font-size: 11px;
    letter-spacing: 0.02em;
}
.search-suggestion.caption-match { font-style: italic; }

/* Set Filter */
#set-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}
.set-filter-btn {
    background: transparent;
    border: 1px solid var(--surface-3);
    color: var(--dim);
    padding: 3px 12px;
    border-radius: var(--pill);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.set-filter-btn:hover  { background: var(--surface-2); color: var(--fg); }
.set-filter-btn.active { background: var(--accent); border-color: var(--accent); color: white; }

/* Toast */
#toast {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent);
    color: white;
    padding: 10px 20px;
    border-radius: var(--pill);
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
    cursor: pointer;
}
#toast.active { top: 20px; }

/* Photo Grid */
#gallery {
    position: relative;
    max-width: 1400px;
    margin: 0 auto 40px;
}

.photo-wrapper {
    position: absolute;
    cursor: pointer;
    background-color: var(--surface-2);
    border-radius: 6px;
    overflow: hidden;
}
.photo-wrapper.new-card { animation: fadeUp 0.4s ease-out both; }

/* Hardware-Accelerated Shimmer */
.photo-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer-gpu 1.5s infinite;
    pointer-events: none;
}

@keyframes shimmer-gpu {
    100% { transform: translateX(100%); }
}

.photo-wrapper.is-loaded::after {
    display: none;
    animation: none;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.photo-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    opacity: 0;
    background-color: var(--surface-2);
    color: transparent;
}
.photo-card.loaded { animation: fadeIn 0.3s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Quick Add Button - Default (Desktop/Tablet) */
.quick-add-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(9, 9, 11, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    z-index: 20;
    opacity: 0.45;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.quick-add-btn:hover { opacity: 0.85; }

.quick-add-btn:active { 
    transform: scale(0.8); 
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .quick-add-btn {
        bottom: 4px; 
        right: 4px;  
    }
}

/* Admin delete button */
.admin-delete-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s;
}
.photo-wrapper:hover .admin-delete-btn { opacity: 1; }
@media (hover: none) { .admin-delete-btn { opacity: 0.65; } }

/* Admin set delete pill */
.set-filter-pill-wrapper {
    display: inline-flex;
    align-items: center;
}
.set-filter-pill-wrapper .set-filter-btn {
    border-radius: var(--pill) 0 0 var(--pill);
}
.admin-set-delete-btn {
    background: transparent;
    border: 1px solid var(--surface-3);
    border-left: none;
    color: var(--dim);
    padding: 3px 7px;
    border-radius: 0 var(--pill) var(--pill) 0;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-set-delete-btn:hover {
    background: var(--red, #ef4444);
    border-color: var(--red, #ef4444);
    color: white;
}

/* Grid keyboard focus / last-viewed marker */
.photo-wrapper.grid-focused {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
    border-radius: 8px;
    z-index: 5;
}

/* Mobile Adjustments for Grid Focus */
@media (pointer: coarse) {
    .photo-wrapper.grid-focused {
        outline: 3px solid rgba(255, 255, 255, 1);
        outline-offset: 2px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    }
}

/* Selection */
.photo-wrapper.selected .photo-card {
    border: 4px solid var(--accent-hover);
    box-sizing: border-box;
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.photo-wrapper.selected .quick-add-btn {
    background: rgba(9, 9, 11, 0.50);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--red);
    transform: rotate(45deg);
    opacity: 1;
}

/* Cart add animation */
.tap-anim {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-size: 3rem;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}
.tap-anim.pop-active { animation: pop 0.6s ease-out forwards; }
@keyframes pop {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    50%  {             transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1);   }
}

/* Lightbox */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--bg);
    z-index: 150;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(20px + env(safe-area-inset-top)) 20px 80px;
    touch-action: none;
}
#lightbox.active { display: flex; }

.lightbox-close-top {
    position: absolute;
    top: calc(20px + env(safe-area-inset-top));
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(63, 63, 70, 0.6);
    backdrop-filter: blur(4px);
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 160;
}

#lightbox-zoom-container {
    position: relative;
    /* Fill the available area and center the image frame inside it. The frame
       (JS-sized to the letterbox footprint) carries the shadow/radius, so the
       container itself no longer needs to shrink-wrap. It MUST span the full
       width: sizeLightboxFrame measures offsetWidth/Height as the available box,
       and a content-collapsed container would feed back its own 400px grid size,
       pinning the image at grid resolution (the bug this fixes). */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin-bottom: 24px;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    touch-action: none;
    /* Container expands to fill vertical space but must not block clicks on
       controls below it. Children (image, overlay) re-enable pointer events. */
    pointer-events: none;
}
#lightbox-img,
#lightbox-face-overlay .face-badge,
#lightbox-face-overlay .face-badge-bbox {
    pointer-events: auto;
}
#lightbox-zoom-container.is-zoomed { z-index: 155; }
#lightbox-zoom-container.slide-out-left  { transform: translateX(-100%); opacity: 0; }
#lightbox-zoom-container.slide-out-right { transform: translateX(100%);  opacity: 0; }
#lightbox-zoom-container.slide-in-left   { transform: translateX(100%);  opacity: 0; transition: none; }
#lightbox-zoom-container.slide-in-right  { transform: translateX(-100%); opacity: 0; transition: none; }
/* Image frame — JS sizes this to the exact letterbox footprint the full-res
   image occupies (sizeLightboxFrame, driven off the natural aspect + container
   box). It is the single source of size: the grid placeholder and the full-res
   crossfade layer both fill it 100%, so a small grid image UPSCALES to the full
   footprint (fixing the Firefox size-jump where the grid rendered at its tiny
   intrinsic size and snapped larger on full-res load) and the shadow/radius hug
   the actual image pixels rather than the larger flex container. */
#lightbox-img-frame {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    /* Clip the blur-up halo and both layers to the rounded corners. */
    overflow: hidden;
}
#lightbox-img {
    display: block;
    /* Fill the JS-sized frame; the frame already matches the image aspect, so
       contain and fill are equivalent — contain stays safe before the frame is
       sized. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background-color: transparent;
    color: transparent;
}
/* Full-res crossfade layer — stacked exactly over the grid-res placeholder.
   Same frame, same size, so it overlaps pixel-for-pixel. Fades in once the
   sharp image has decoded: zero size jump, smooth dissolve from blurred to
   crisp. */
#lightbox-img-full {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 8px;
    opacity: 0;
    /* Hidden until JS has a decoded full-res frame to show. */
    visibility: hidden;
    transition: opacity 0.45s ease-in-out;
    /* Purely a visual crossfade layer — all zoom/pan/tap interaction targets the
       base #lightbox-img underneath, so let pointer events pass through. */
    pointer-events: none;
}
#lightbox-img-full.is-ready {
    visibility: visible;
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    #lightbox-img-full { transition: none; }
}

/* Duotone icon action bar */
.lightbox-controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 480px;
    padding: 4px 0;
}

.lb-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    min-width: 72px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fg);
    transition: background 140ms, color 140ms, transform 80ms;
    -webkit-tap-highlight-color: transparent;
}
.lb-icon-btn span {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    color: inherit;
}
.lb-icon-btn img {
    display: block;
    /* SVGs loaded via <img> don't inherit currentColor; filter recolors from black.
       The SVGs ship with black strokes/fills — invert to white for dark surface. */
    filter: invert(1);
    transition: filter 140ms;
}
.lb-icon-btn--cart.btn-in-cart img {
    /* Red tint: invert → red via hue-rotate approximation */
    filter: invert(1) sepia(1) saturate(5) hue-rotate(300deg);
}
.lb-icon-btn--identify.faces-active img {
    /* Gold/accent tint matching --accent #b8956a */
    filter: invert(1) sepia(1) saturate(3) hue-rotate(10deg) brightness(0.85);
}
.lb-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}
.lb-icon-btn:active {
    transform: scale(0.92);
    opacity: 0.75;
    transition: transform 80ms ease-out, opacity 80ms ease-out;
}
.lb-icon-btn--cart.btn-in-cart {
    color: var(--red);
}
.lb-icon-btn--identify.faces-active {
    color: var(--accent);
    background: rgba(184, 149, 106, 0.12);
}
.lb-icon-btn--edit.edit-requested img {
    /* Yellow tint */
    filter: invert(1) sepia(1) saturate(4) hue-rotate(0deg) brightness(1.05);
}
.lb-icon-btn--edit.edit-in-progress img {
    /* Blue tint */
    filter: invert(1) sepia(1) saturate(5) hue-rotate(190deg) brightness(0.95);
}
.lb-icon-btn--edit.edit-complete img {
    /* Green tint */
    filter: invert(1) sepia(1) saturate(4) hue-rotate(80deg) brightness(0.9);
}
.lb-icon-btn--edit.edit-requested  { color: #d4a857; }
.lb-icon-btn--edit.edit-in-progress { color: #6aa9d4; }
.lb-icon-btn--edit.edit-complete    { color: #6ad48a; }
.lb-icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.lb-icon-btn:disabled:hover { background: transparent; }

/* Edit-request modal */
.edit-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.edit-modal.active { display: block; }
.edit-modal-backdrop {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.edit-modal-card {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
    background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px; padding: 24px; color: #fafafa;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}
.edit-modal-card h2 { margin: 0 0 12px 0; font-size: 18px; }
.edit-modal-status {
    margin: 0 0 14px 0; padding: 10px 12px; border-radius: 6px;
    font-size: 13px; background: rgba(255, 255, 255, 0.04); display: none;
}
.edit-modal-status.visible { display: block; }
.edit-modal-status.status-requested { color: #d4a857; border-left: 3px solid #d4a857; }
.edit-modal-status.status-in-progress { color: #6aa9d4; border-left: 3px solid #6aa9d4; }
.edit-modal-status.status-complete { color: #6ad48a; border-left: 3px solid #6ad48a; }
.edit-modal-label {
    display: block; margin: 12px 0 6px 0; font-size: 12px; color: #aaa;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.edit-modal-card textarea, .edit-modal-card input[type=email] {
    width: 100%; box-sizing: border-box; background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
    color: #fafafa; padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.edit-modal-card textarea:focus, .edit-modal-card input[type=email]:focus {
    outline: none; border-color: var(--accent);
}
.edit-modal-card textarea[readonly], .edit-modal-card input[readonly] {
    opacity: 0.7; cursor: default;
}
.edit-modal-actions {
    display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px;
}
/* Takedown modal (reuses .edit-modal-* card/backdrop/label/actions). */
.takedown-modal-card { width: min(640px, calc(100vw - 32px)); }
.takedown-modal-intro { margin: 0 0 12px 0; font-size: 13px; line-height: 1.5; color: #bbb; }
.edit-modal-optional { text-transform: none; letter-spacing: 0; color: #777; font-weight: 400; }
/* Parent photo picker */
.takedown-picker {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px; max-height: 40vh; overflow-y: auto; padding: 4px;
    background: #0b0b0b; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
}
.tk-pick { position: relative; aspect-ratio: 1; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #000; }
.tk-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-pick.sel { border-color: var(--accent, #b8956a); }
.tk-pick .tk-pick-check {
    position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 4px;
    background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.tk-pick.sel .tk-pick-check { background: var(--accent, #b8956a); }
.takedown-picker-empty { grid-column: 1/-1; color: #888; font-size: 13px; padding: 12px; text-align: center; }
.takedown-picker-tools { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; }
.takedown-search { flex: 1; }
.btn.btn-sm { padding: 5px 10px; font-size: 12px; }
.takedown-whole-event { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #bbb; cursor: pointer; margin: 6px 0 2px; }
.takedown-whole-event input { width: auto; margin: 0; }
#takedown-modal .edit-modal-card input[type=text],
#takedown-modal .edit-modal-card input[type=email],
#takedown-modal .edit-modal-card input[type=search],
#takedown-modal .edit-modal-card textarea {
    width: 100%; box-sizing: border-box; background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
    color: #fafafa; padding: 10px 12px; font-size: 14px; font-family: inherit;
}
#takedown-modal .edit-modal-card input:focus,
#takedown-modal .edit-modal-card textarea:focus { outline: none; border-color: var(--accent); }
#footer-takedown-link { cursor: pointer; }
.swipe-hint        { color: var(--muted); font-size: 0.8rem; margin-top: 15px; }

/* Counter overlay */
.lightbox-counter-overlay {
    position: absolute;
    top: calc(20px + env(safe-area-inset-top));
    left: 20px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--pill);
    z-index: 160;
    letter-spacing: 0.03em;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.lightbox-counter-overlay:hover {
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.95);
}

/* Below-image metadata row */
.lightbox-below-image {
    width: 100%;
    max-width: 600px;
    padding: 8px 0 0;
}
.lightbox-photo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 20px;
}
.lightbox-image-name {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.04em;
}
.lightbox-credit-sep {
    color: var(--muted);
    font-size: 13px;
    flex-shrink: 0;
}
.lightbox-credit-inline {
    color: var(--dim);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}
.lightbox-credit-inline a {
    color: inherit;
    text-decoration: none;
}
.lightbox-credit-inline a:hover {
    color: #38bdf8;
    text-decoration: underline;
}
.lightbox-meta-tech {
    flex-basis: 100%;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}

.btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
.btn-close             { background-color: var(--surface-3); color: var(--fg); }
.btn-action            { background-color: var(--accent); color: white; transition: background-color 0.2s; }
.btn-action.btn-in-cart { background-color: var(--red); }

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--surface-3);
    color: var(--fg);
    transition: background-color 0.2s, border-color 0.2s;
}
.btn-secondary:hover {
    background-color: var(--surface-2);
    border-color: var(--muted);
}

/* Cart Bar */
#cart-bar {
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(24, 24, 27, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--surface-3);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    gap: 10px;
    transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
}
#cart-bar.active { bottom: 0; }
.cart-top-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cart-info   {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-decoration: underline;
    text-decoration-color: rgba(183, 148, 90, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}
.cart-info:hover { text-decoration-color: var(--accent); }
.cart-plus-tax {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0.03em;
    margin-left: 4px;
    vertical-align: middle;
}
.cart-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.btn-checkout {
    background-color: var(--accent);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
#express-pay-cart { height: 40px; min-width: 100px; display: none; }
#express-pay-cart.active { display: block; }

/* Promo code bar */
#promo-bar { display: flex; align-items: center; gap: 6px; }
#promo-input {
    background: var(--surface-2); color: var(--text); border: 1px solid var(--surface-3);
    border-radius: 6px; padding: 6px 10px; font-size: 0.85rem; width: 100px;
    text-transform: uppercase;
}
#promo-input::placeholder { text-transform: none; color: var(--text-muted); }
#promo-input:disabled { opacity: 0.6; }
#promo-apply-btn {
    background: var(--surface-3); color: var(--text); border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
#promo-apply-btn:hover { background: var(--surface-4, #555); }
#promo-status { font-size: 0.8rem; white-space: nowrap; }
#promo-status.success { color: #4ade80; }
#promo-status.error { color: #f87171; }

/* Cart bar mobile layout */
@media (max-width: 480px) {
    #cart-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    }
    .cart-top-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    .cart-info {
        font-size: 0.95rem;
        width: 100%;
        text-align: center;
    }
    #promo-bar {
        justify-content: center;
    }
    #promo-input { width: 90px; }
    .cart-actions {
        display: flex;
        gap: 10px;
        width: 100%;
    }
    .btn-checkout {
        flex: 1;
        min-width: 0;
        padding: 12px 16px;
        text-align: center;
        font-size: 0.9rem;
    }
    #express-pay-cart {
        flex: 1;
        min-width: 0;
        height: 44px;
    }
    #lightbox {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
    }
    #lightbox-zoom-container {
        width: 100vw;
        max-width: 100vw;
        margin-bottom: 12px;
    }
    .lightbox-below-image,
    .lightbox-controls,
    .swipe-hint { padding-left: 16px; padding-right: 16px; }
}

/* Checkout overlay */
#checkout-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(9, 9, 11, 0.95);
    backdrop-filter: blur(5px);
    overflow-y: auto;
    padding: calc(40px + env(safe-area-inset-top)) 20px 40px;
}
#checkout-overlay.active { display: block; }

#checkout-mount {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#checkout-mount .spinner { margin-bottom: 20px; }

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.overlay-text    { font-size: 1.2rem; font-weight: 600; color: white; }
.overlay-subtext { font-size: 0.9rem; color: var(--dim); margin-top: 8px; }

/* Scroll progress bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--accent);
    z-index: 200;
    pointer-events: none;
    transition: width 0.1s linear;
}

/* Scroll-to-top */
#scroll-top {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(63, 63, 70, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid var(--muted);
    color: var(--fg);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 90;
}
#scroll-top.active { display: flex; }

/* Pull-to-refresh */
#pull-indicator {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-2);
    color: var(--dim);
    padding: 8px 20px;
    border-radius: var(--pill);
    font-size: 0.85rem;
    font-weight: 500;
    transition: top 0.3s ease;
    z-index: 200;
}
#pull-indicator.active { top: 12px; }

/* Event Picker */
#event-picker { max-width: 480px; margin: 0 auto; padding: 20px 0; }
.picker-header { text-align: center; margin-bottom: 32px; }
.picker-header h1 { margin: 0 0 8px; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.picker-header p  { margin: 0; color: var(--dim); font-size: 0.9rem; }
.event-list { display: flex; flex-direction: column; gap: 10px; }

/* Section headers */
.event-section-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--subtle);
    padding: 4px 4px 0;
    margin-top: 8px;
}
.event-section-header:first-child { margin-top: 0; }
.event-section-header.section--active { color: var(--red); }
.event-section-header.section--today  { color: #60a5fa; }
.event-section-header.event-section-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.event-section-toggle:hover { color: var(--dim); }
.section-toggle-icon {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 1rem;
    line-height: 1;
    color: var(--subtle);
}

/* Past events collapsible */
.event-section-past-list { display: flex; flex-direction: column; gap: 10px; }
.event-section-past-list.collapsed { display: none; }

.event-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface-1);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    padding: 16px 20px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, border-color 0.2s;
    text-align: left;
}
.event-item > div:not([class]),
.event-item-info { flex: 1 1 auto; min-width: 0; text-align: left; }
.event-item-badge { margin-left: auto; }
.event-item:hover { background: var(--surface-2); border-color: var(--surface-3); }
.event-item.active-event {
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.05);
    animation: live-border-pulse 2s ease-in-out infinite;
}
/* Past events are dimmed to keep focus on current/upcoming */
.event-section-past-list .event-item { opacity: 0.6; }
.event-section-past-list .event-item:hover { opacity: 1; }

/* Highlight the event the user just navigated back from. */
.event-item.event-item--from {
    opacity: 1;
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}
.event-section-past-list .event-item.event-item--from { opacity: 1; }

@keyframes live-border-pulse {
    0%, 100% { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%      { border-color: rgba(239, 68, 68, 1);   box-shadow: 0 0 8px 0 rgba(239, 68, 68, 0.3); }
}
.event-item-emoji { font-size: 1.6rem; flex-shrink: 0; filter: grayscale(70%); line-height: 1; }
.event-item-name  { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.event-item-date  { font-size: 0.8rem; color: var(--subtle); }
.event-item-private { color: var(--accent); font-weight: 500; }
.event-item-badge {
    padding: 3px 10px;
    border-radius: var(--pill);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    background: rgba(239, 68, 68, 0.15);
    color: var(--red);
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.event-item-badge--today {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.3);
    animation: none;
}
.picker-empty { text-align: center; color: var(--muted); padding: 40px 0; font-size: 0.95rem; }

/* Purchased Photo Download Button */
.ui-dl-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(16, 185, 129, 0.9);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.1s ease;
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.ui-dl-btn:hover {
    background-color: rgba(16, 185, 129, 1);
    transform: translateY(-2px);
}

.ui-dl-btn:active {
    transform: translateY(0);
}


/* Site Footer */
.site-footer {
    text-align: center;
    margin-top: 40px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    padding-bottom: 120px;
}
.site-footer a {
    color: var(--subtle);
    text-decoration: underline;
}
.site-footer a:hover {
    color: var(--fg);
}

/* Set Filter Pills */
/* Purchased Set Filter Pill */
.set-filter-btn.purchased-pill {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.05);
}
.set-filter-btn.purchased-pill:hover {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
.set-filter-btn.purchased-pill.active {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

/* In Cart Set Filter Pill */
.set-filter-btn.in-cart-pill {
    color: var(--accent);
    border-color: rgba(183, 148, 90, 0.4);
    background: rgba(183, 148, 90, 0.05);
}
.set-filter-btn.in-cart-pill:hover {
    background: rgba(183, 148, 90, 0.15);
    color: var(--accent);
}
.set-filter-btn.in-cart-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Person Filter Pill — shown when filtering the gallery to a single person.
   Always appears in its "active" visual state since it's the only filter
   active when present, and non-interactive (dismissed via the × button). */
.set-filter-btn.person-filter-pill,
.set-filter-btn.person-filter-pill.active {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
    cursor: default;
    opacity: 1;
}
.set-filter-btn.person-filter-pill:disabled {
    opacity: 1;
}

/* Face overlay — absolutely positioned over the rendered lightbox image
   rect (see syncFaceOverlayRect). Badges inside use % coordinates derived
   from the normalized bbox. */
.lightbox-face-overlay {
    position: absolute;
    pointer-events: none;   /* only badges/rings are interactive */
    z-index: 156;            /* above #lightbox-img (z 155 when zoomed) */
    transition: opacity 0.35s ease;
    opacity: 1;
    --badge-counter-scale: 1;
}
.lightbox-face-overlay.faces-idle   { opacity: 0.55; }
.lightbox-face-overlay.faces-hidden { display: none; }
.lightbox-face-overlay .face-badge,
.lightbox-face-overlay .face-badge-bbox { pointer-events: auto; }

.face-badge {
    position: absolute;
    transform: translate(-50%, -50%) scale(var(--badge-counter-scale));
    transform-origin: center center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 3px;
    background: rgba(17, 17, 20, 0.72);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    max-width: 60%;
}
.face-badge:hover,
.face-badge:focus-visible {
    background: #6366f1;
    border-color: #ffffff;
    outline: none;
}
.face-badge:active { transform: translate(-50%, -50%) scale(calc(var(--badge-counter-scale) * 0.96)); }
.face-badge-inner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.face-badge-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.face-badge-fallback {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}
.face-badge-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* Soft rectangle drawn around the detected face when the badge is hovered
   or focused — makes the link between badge and person unmistakable. */
.face-badge-bbox {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0);
    border-radius: 8px;
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    transition: border-color 0.15s, box-shadow 0.15s;
    pointer-events: none;
}
.face-badge-bbox.active {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .lightbox-face-overlay { transition: none; }
    .face-badge, .face-badge-bbox { transition: none; }
}

.lightbox-admin-style {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px 4px;
    font-size: 0.85rem;
    color: #ccc;
}
.lightbox-admin-style label { color: #aaa; }
.lightbox-admin-style select {
    background: rgba(255,255,255,0.08);
    color: #eee;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 4px 8px;
    font: inherit;
    min-width: 160px;
}
.lightbox-admin-style button { padding: 4px 12px; font-size: 0.85rem; }
.lightbox-admin-style button:disabled { opacity: 0.4; cursor: not-allowed; }
/* Landscape mobile: maximise image space */
@media (orientation: landscape) and (max-height: 500px) {
    #lightbox {
        /* Reserve right-side space for the absolute-positioned controls so the
           image's contain-fit doesn't get clipped/overlapped by them. */
        padding: env(safe-area-inset-top, 0px) calc(72px + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        flex-direction: row;
    }
    #lightbox-zoom-container {
        height: 100%;
        max-height: 100%;
        margin-bottom: 0;
    }
    #lightbox-zoom-container #lightbox-img-frame { box-shadow: none; }
    .lightbox-below-image  { display: none; }
    .lightbox-counter-overlay { display: none; }
    .swipe-hint           { display: none; }
    /* Keep face badges visible but compact in landscape mobile — they're
       anchored to faces so they don't steal screen real estate. */
    .face-badge {
        padding: 2px 8px 2px 2px;
        font-size: 0.75rem;
        gap: 5px;
    }
    .face-badge-inner { width: 24px; height: 24px; }
    .face-badge-label { max-width: 90px; }
    .lightbox-controls {
        position: absolute;
        top: 50%;
        right: calc(8px + env(safe-area-inset-right, 0px));
        transform: translateY(-50%);
        flex-direction: column;
        width: auto;
        max-width: none;
        gap: 0;
        padding: 0;
        /* Stay above the zoomed image (z-index 155) so buttons remain clickable. */
        z-index: 157;
    }
    .lightbox-controls .lb-icon-btn {
        padding: 8px 10px;
        min-width: 52px;
        opacity: 0.75;
    }
    .lightbox-controls .lb-icon-btn span {
        font-size: 9px;
    }
}
/* Lightbox Loading State (Blur-Up Pattern) */
#lightbox-img.is-loading {
    filter: blur(8px);
    animation: lightbox-loading-pulse 1s infinite alternate ease-in-out;
}

@keyframes lightbox-loading-pulse {
    0%   { opacity: 0.3; }
    100% { opacity: 0.7; }
}

/* Password gate overlay — shown when an event requires a password. */
.fc-password-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.fc-password-overlay.active { display: flex; }
.fc-password-card {
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: 16px;
    padding: 28px 28px 24px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.fc-password-card h2 {
    margin: 0 0 6px;
    font-size: 20px;
    color: var(--fg);
}
.fc-password-card p {
    margin: 0 0 18px;
    color: var(--dim);
    font-size: 14px;
}
.fc-password-form {
    display: flex;
    gap: 8px;
}
.fc-password-input {
    flex: 1;
    background: var(--surface-2);
    color: var(--fg);
    border: 1px solid var(--surface-3);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 15px;
    outline: none;
}
.fc-password-input:focus { border-color: var(--accent); }
.fc-password-submit {
    background: var(--accent);
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.fc-password-submit:hover:not(:disabled) { background: var(--accent-hover); }
.fc-password-submit:disabled { opacity: 0.6; cursor: wait; }
.fc-password-error {
    margin-top: 12px;
    min-height: 18px;
    color: var(--red);
    font-size: 13px;
}
/* Signed-link (youth gallery) overlay — reuses .fc-password-overlay/-card.
   The primary message reads as body text; the hint is smaller + de-emphasised. */
.fc-password-card p.fc-signedlink-msg {
    color: var(--fg);
    margin: 0 0 10px;
}
.fc-password-card p.fc-password-hint {
    font-size: 13px;
    margin: 0;
}