/*
 * admin-layout.css
 * Admin layout, common controls, media cards, and responsive shared styles.
 * Split from admin.css on 2026-05-12 to keep admin styling modular.
 */

/* Responsive adjustments */

.site-footer {
    padding: 2rem 0;
    text-align: center;
}
.site-footer-link {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.site-footer-link:hover,
.site-footer-link:focus {
    color: var(--accent);
    text-decoration: underline;
}

/* Compact admin treatment */

.admin-page {
    --ink: #1d2327;
    --muted: #646970;
    --line: #dcdcde;
    --paper: #f0f0f1;
    --panel: #fff;
    --field: #fff;
    background: var(--paper);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.admin-page .site-header {
    width: 100%;
    padding: 0.55rem 1rem;
    background: #1d2327;
    color: #f0f0f1;
}
.admin-page .brand {
    color: #f0f0f1;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}
.admin-page .nav {
    gap: 0.35rem;
}

.admin-page .nav a,
.admin-page .button,
.admin-page button,
.admin-page input[type="submit"] {
    padding: 0.35rem 0.6rem;
    border-color: #2271b1;
    background: #2271b1;
    color: #fff;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
}

.admin-page .button.secondary,
.admin-page button.secondary,
.admin-page .tree-toggle {
    background: #fff;
    color: #2271b1;
}
.admin-page .gallery-row-actions {
    white-space: nowrap;
}
.admin-page .gallery-row-actions .gallery-row-action {
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
}

.admin-page .site-main,
.admin-page .site-footer {
    width: min(1280px, calc(100% - 2rem));
}

.admin-page .hero,
.admin-page .panel {
    padding: 1rem;
    border-color: #c3c4c7;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

.admin-page .hero h1,
.admin-page .panel h1,
.admin-page .panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    line-height: 1.25;
}
.admin-page .bulk-row {
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}
.admin-page .bulk-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-weight: 600;
}

.admin-page input,
.admin-page textarea,
.admin-page select {
    min-height: 2rem;
    padding: 0.35rem 0.5rem;
    border-color: #8c8f94;
    border-radius: 3px;
}
.admin-page input[type="checkbox"] {
    width: 0.95rem;
    height: 0.95rem;
    min-height: 0;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}
.admin-page label:has(input[type="checkbox"]) {
    align-items: center;
}
.admin-page .admin-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    font-weight: 600;
}
.admin-devmode-panel--secondary {
    margin-top: 1rem;
    border-style: dashed;
    opacity: 0.92;
}
.admin-devmode-panel--secondary h2 {
    font-size: 1.05rem;
}
.admin-page table {
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.25;
}
.admin-page th {
    background: #f6f7f7;
    color: #1d2327;
    font-weight: 600;
}

.admin-page th,
.admin-page td {
    padding: 0.22rem 0.45rem;
    vertical-align: middle;
}
.admin-page td input[type="checkbox"] {
    width: 0.9rem;
    height: 0.9rem;
}
.admin-flag.is-enabled {
    color: #1f8a3b;
    font-weight: 800;
    display: inline-block;
    min-width: 1ch;
}
.admin-page tr:hover td {
    background: #f6f7f7;
}
.admin-page tr.is-subgallery td {
    background: #fbfbfc;
}
.admin-page .admin-thumb {
    width: 4rem;
    height: 3rem;
    border-radius: 3px;
}

.admin-page .tree-toggle,
.admin-page .tree-spacer {
    width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1;
}
.admin-page .tree-title {
    gap: 0.18rem;
}
.admin-page .thumbnail-progress-bar {
    height: 0.55rem;
    border-radius: 3px;
}
@media (max-width: 680px) {
.site-header {
        align-items: flex-start;
        flex-direction: column;
    }
.lightbox {
        grid-template-columns: 1fr;
        grid-template-areas: "stage";
    }
.lightbox img {
        max-width: calc(100vw - 2rem);
    }
.lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
.lightbox-previous {
        left: 0.5rem;
    }
.lightbox-next {
        right: 0.5rem;
    }
.picture-game-pair {
        grid-template-columns: 1fr;
    }
.picture-game-choice {
        grid-template-rows: minmax(15rem, 48vh) auto;
    }
}
.gallery-list-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    column-gap: 0;
    align-items: start;
    overflow: visible;
}
.gallery-list-content {
    min-width: 0;
}
.gallery-image-grid {
    min-width: 0;
}
.back-to-top-button {
    position: sticky;
    top: calc(100dvh - 5.25rem);
    z-index: 900;
    margin-left: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: max-content;
    padding: 0.7rem 0.95rem;
    border: 1px solid rgba(255, 253, 248, 0.7);
    background: var(--accent);
    color: #fffdf8;
    box-shadow: 0 14px 34px rgba(54, 38, 20, 0.24);
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.back-to-top-button[hidden] {
    display: none;
}
.back-to-top-button.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.back-to-top-button:hover,
.back-to-top-button:focus-visible {
    box-shadow: 0 18px 44px rgba(54, 38, 20, 0.32);
    transform: translateY(-2px);
}
.back-to-top-button span:first-child {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.18);
    font-size: 1.05rem;
}
@media (max-width: 980px) {
.gallery-list-frame {
        display: block;
    }
.back-to-top-button {
        position: fixed;
        right: 0.85rem;
        bottom: 0.85rem;
        top: auto;
        padding: 0.65rem 0.8rem;
    }
}

/* Public design refinements */
.public-page .hero {
    position: relative;
    display: grid;
    gap: 0.7rem;
    overflow: hidden;
    padding: clamp(0.85rem, 1.8vw, 1.25rem);
    margin-bottom: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius, 16px);
    background: var(--gallery-panel);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.public-page .hero-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.public-page .hero-meta {
    display: grid;
    justify-items: end;
    gap: 0.45rem;
    flex: 0 0 min(24rem, 42vw);
    min-width: 14rem;
}

.public-page .hero .gallery-title-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.public-page .hero .gallery-title-bar .gallery-title {
    flex: 1 1 auto;
    min-width: 0;
}

.public-page .hero h1 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(2.05rem, 3.6vw, 3.2rem);
    font-weight: 800;
    line-height: var(--type-tight-line-height, 1.05);
    letter-spacing: var(--type-tracking-tight, -0.025em);
    overflow-wrap: normal;
    word-break: normal;
}

.public-page .hero p {
    max-width: 72ch;
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    line-height: var(--type-body-line-height, 1.5);
    opacity: 0.88;
}

.public-page .hero-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    align-items: center;
}

.public-page .hero-actions .button,
.public-page .hero-actions button {
    min-height: 0;
    padding: 0.48rem 0.75rem;
    border-radius: var(--radius, 16px);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.public-page .hero .tag-list,
.public-page .hero .breadcrumbs {
    margin: 0;
}

.public-page .hero-tags {
    display: grid;
    justify-items: end;
    gap: 0.25rem;
    max-width: 100%;
}

.public-page .hero .tag-list {
    justify-content: flex-end;
    gap: 0.25rem;
    opacity: 0.92;
}

.public-page .hero .tag-list-label {
    font-size: 0.72rem;
}

.public-page .hero .tag {
    padding: 0.1rem 0.42rem;
    border-radius: var(--radius, 16px);
    background: var(--panel);
    color: var(--accent-dark);
    font-size: 0.76rem;
    line-height: 1.35;
}

.public-page .hero .breadcrumbs {
    font-size: 0.9rem;
    opacity: 0.7;
}

.public-page .hero .gallery-branding-logo {
    flex: 0 0 auto;
    max-width: min(9rem, 24vw);
    max-height: 4.25rem;
    object-fit: contain;
}

.public-page .hero .gallery-branding-banner {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
}

@media (max-width: 760px) {
    .public-page .hero-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .public-page .hero-meta {
        justify-items: start;
        min-width: 0;
        width: 100%;
    }

    .public-page .hero-actions,
    .public-page .hero .tag-list {
        justify-content: flex-start;
    }

    .public-page .hero-tags {
        justify-items: start;
    }

    .public-page .hero h1 {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
    }
}
.public-page .gallery-card {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.public-page .gallery-card:hover,
.public-page .gallery-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(54, 38, 20, 0.14);
}

.public-page .gallery-card img,
.public-page .gallery-collage {
    height: 12rem;
}
.public-page .gallery-card-body {
    min-height: 8rem;
}

.public-page .gallery-card-body h2,
.public-page .image-meta h2 {
    margin: 0 0 0.25rem;
    line-height: 1.15;
}
.public-page .image-card {
    background: rgba(255, 250, 240, 0.94);
}
.public-page .image-meta p {
    margin-top: 0.25rem;
}

.gallery-card > .tag-list .tag-list-label,
.hero .tag-list .tag-list-label {
    opacity: 0.7;
}
.vote-row {
    margin-top: 0.6rem;
}
.image-stage {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

/* Keeps the generated <picture> wrapper from adding inline text spacing below thumbnails. */
.image-stage > .image-preview-link,
.image-stage > .image-preview-link picture {
    display: block;
    line-height: 0;
}
.image-vote-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 6;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.15rem 0.2rem;
    border: 0;
    border-radius: 0 8px 0 0;
    background: transparent;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: none;
    line-height: 1;
    transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* Keeps the vote overlay anchored to the actual picture instead of the surrounding card chrome. */
.image-stage > .image-vote-overlay {
    bottom: 0.25rem;
    left: 0.25rem;
}
.vote-score-badge {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.08rem 0.2rem;
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.0);
    color: var(--accent-dark);
    font-weight: 800;
    line-height: 1;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

/* Overrides the generic vote-row span width inside image overlays so the arrow, score, and hover buttons stay compact. */
.image-vote-overlay .vote-score-badge,
.image-vote-overlay .vote-score-badge span,
.image-vote-overlay .vote-action-group {
    min-width: 0;
}

/* Keeps the arrow and count visually close together in the collapsed badge. */
.vote-score-badge strong {
    display: inline-block;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}
.vote-action-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Keeps the vote buttons hidden until the user hovers the image card or focuses inside it. */
.image-vote-overlay .vote-action-group {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-0.25rem);
    transition: max-width 140ms ease, opacity 140ms ease, transform 140ms ease;
}

/* Reveals the vote buttons on hover and keyboard focus. */
.image-card:hover .image-vote-overlay .vote-action-group,
.image-card:focus-within .image-vote-overlay .vote-action-group {
    max-width: 6rem;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Adjusts the hover vote overlay once the buttons are visible. */
.image-card:hover .image-vote-overlay,
.image-card:focus-within .image-vote-overlay {
    background: rgba(15, 23, 42, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.image-card:hover .vote-score-badge,
.image-card:focus-within .vote-score-badge {
    background: rgba(255, 253, 248, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.vote-row span {
    min-width: 5.25rem;
}
.vote-row button {
    min-width: 2.1rem;
    font-weight: 800;
    line-height: 1;
}

/* Keeps the overlay buttons compact inside the image corner badge. */
.image-vote-overlay button {
    min-width: 1.9rem;
    padding: 0.15rem 0.35rem;
}
.lightbox-description {
    max-width: min(52rem, 100%);
    margin: 0;
    color: rgba(255, 253, 248, 0.9);
    overflow-wrap: anywhere;
}
.lightbox-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.lightbox-fullscreen-link {
    padding: 0.3rem 0.7rem;
    border: 1px solid #fffdf8;
    background: rgba(255, 253, 248, 0.12);
    color: #fffdf8;
    border-radius: var(--radius, 16px);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.lightbox-counter,
.lightbox-help {
    color: rgba(255, 253, 248, 0.78);
    font-size: 0.9rem;
}
.lightbox-original-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border: 1px solid #fffdf8;
    border-radius: var(--radius, 16px);
    color: #fffdf8;
    padding: 0.35rem 0.65rem;
    text-decoration: none;
}

/* Leaflet base layout for EXIF GPS maps.
   The map library is loaded only when a visitor opens a map, but these rules
   must already exist before Leaflet measures the canvas. Without them, tile
   panes can be initialized with incomplete dimensions and the map appears as
   broken rectangular fragments. These rules intentionally mirror the small
   subset of Leaflet 1.9.x CSS required for tile, marker, popup and control
   positioning. */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    left: 0;
    position: absolute;
    top: 0;
}
.leaflet-container {
    background: #ddd;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    touch-action: pan-x pan-y;
}
.leaflet-tile-pane {
    z-index: 200;
}
.leaflet-overlay-pane {
    z-index: 400;
}
.leaflet-shadow-pane {
    z-index: 500;
}
.leaflet-marker-pane {
    z-index: 600;
}
.leaflet-tooltip-pane {
    z-index: 650;
}
.leaflet-popup-pane {
    z-index: 700;
}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    user-select: none;
}
.leaflet-tile {
    filter: inherit;
    visibility: hidden;
}
.leaflet-tile-loaded {
    opacity: 1;
    visibility: inherit;
}
.leaflet-fade-anim .leaflet-tile {
    opacity: 0;
    transition: opacity 0.2s linear;
    will-change: opacity;
}
.leaflet-fade-anim .leaflet-tile-loaded {
    opacity: 1;
}
.leaflet-zoom-animated {
    transform-origin: 0 0;
}
.leaflet-zoom-hide {
    visibility: hidden;
}
.leaflet-interactive {
    cursor: pointer;
}
.leaflet-grab {
    cursor: grab;
}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
    cursor: grabbing;
}
.leaflet-control {
    pointer-events: auto;
    position: relative;
    z-index: 800;
}

.leaflet-top,
.leaflet-bottom {
    pointer-events: none;
    position: absolute;
    z-index: 1000;
}
.leaflet-top {
    top: 0;
}
.leaflet-right {
    right: 0;
}
.leaflet-bottom {
    bottom: 0;
}
.leaflet-left {
    left: 0;
}
.leaflet-control {
    clear: both;
    float: left;
}
.leaflet-right .leaflet-control {
    float: right;
}
.leaflet-top .leaflet-control {
    margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
    margin-left: 10px;
}
.leaflet-right .leaflet-control {
    margin-right: 10px;
}
.leaflet-control-zoom a {
    background: #fff;
    border-bottom: 1px solid #ccc;
    color: #000;
    display: block;
    font: 700 18px/26px Arial, Helvetica, sans-serif;
    height: 26px;
    text-align: center;
    text-decoration: none;
    width: 26px;
}

.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus {
    background: #f4f4f4;
}
.leaflet-control-zoom-in {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.leaflet-control-zoom-out {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: 0;
}
.leaflet-bar {
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}
.leaflet-popup {
    margin-bottom: 20px;
    position: absolute;
    text-align: center;
}
.leaflet-popup-content-wrapper {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    padding: 1px;
    text-align: left;
}
.leaflet-popup-content {
    line-height: 1.3;
    margin: 13px 24px 13px 20px;
    min-height: 1px;
}
.leaflet-popup-tip-container {
    height: 20px;
    left: 50%;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: 40px;
}
.leaflet-popup-tip {
    background: #fff;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    height: 17px;
    margin: -10px auto 0;
    padding: 1px;
    transform: rotate(45deg);
    width: 17px;
}
.leaflet-popup-close-button {
    color: #757575;
    font: 16px/24px Tahoma, Verdana, sans-serif;
    height: 24px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 24px;
}

.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
    color: #111;
}
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    font-size: 11px;
    line-height: 1.4;
    padding: 0 5px;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
    pointer-events: auto;
}

.leaflet-container img.leaflet-tile,
.leaflet-container img.leaflet-marker-icon,
.leaflet-container img.leaflet-marker-shadow {
    max-height: none;
    max-width: none;
}

.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
    border: 0;
    padding: 0;
}
.leaflet-container .leaflet-control-attribution a {
    color: #0078a8;
}
.leaflet-default-icon-path {
    background-image: url("https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png");
}

/* GPS map controls for EXIF photo locations. */
.image-preview-link {
    display: block;
}
.photo-map-pin {
    align-items: center;
    --gps-pin-size: 26;
    --gps-pin-background-size: 22;
    --gps-pin-background-color: rgba(15, 23, 42, 0.55);
    --gps-pin-border-color: rgba(255, 255, 255, 0.25);
    --gps-pin-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    --gps-pin-backdrop: blur(4px);
    background: var(--gps-pin-background-color);
    border: 1px solid var(--gps-pin-border-color);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: inline-flex;
    font-size: calc(var(--gps-pin-size) * 0.55px);
    height: calc(var(--gps-pin-background-size) * 1px);
    justify-content: center;
    line-height: 1;
    min-width: calc(var(--gps-pin-background-size) * 1px);
    padding: 0;
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
    width: calc(var(--gps-pin-background-size) * 1px);
    z-index: 2;
    backdrop-filter: var(--gps-pin-backdrop);
    box-shadow: var(--gps-pin-shadow);
    box-sizing: border-box;
}

.photo-map-pin[data-pin-background="off"],
.photo-map-pin[data-theme-pin-background="off"] {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.photo-map-pin[data-pin-hidden="1"] {
    display: none !important;
}

.theme-gps-pin-settings {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.42);
}

.theme-gps-pin-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.5rem;
}

.theme-gps-pin-preview .photo-map-pin {
    position: relative;
    right: auto;
    top: auto;
    flex: 0 0 auto;
}

.photo-map-pin:hover,
.photo-map-pin:focus-visible,
.lightbox-map-button:hover,
.lightbox-map-button:focus-visible {
    transform: translateY(-1px);
}
.lightbox-map-button {
    padding: 0.35rem 0.7rem;
}
.map-overlay {
    align-items: center;
    background: rgba(2, 6, 23, 0.82);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.5rem;
    position: fixed;
    z-index: 1200;
}
.map-overlay[hidden] {
    display: none;
}
.map-dialog {
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
    border-radius: 1rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    color: var(--text, #111827);
    max-width: 1120px;
    padding: 1rem;
    position: relative;
    width: min(96vw, 1120px);
}
.map-dialog h2 {
    margin: 0 4.5rem 0.75rem 0;
}
.map-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
}
.map-canvas {
    border-radius: 0.75rem;
    height: min(70vh, 720px);
    min-height: 360px;
    overflow: hidden;
    width: 100%;
}
.map-popup {
    max-width: 240px;
}
.map-popup img {
    border-radius: 0.45rem;
    display: block;
    height: auto;
    margin-bottom: 0.5rem;
    max-width: 220px;
    width: 100%;
}
.map-popup h3 {
    font-size: 1rem;
    margin: 0 0 0.35rem;
}
.map-popup p {
    margin: 0.35rem 0;
}
.map-attribution-note {
    margin: 0.65rem 0 0;
}
body.has-map-overlay {
    overflow: hidden;
}
.exif-admin-summary dl {
    display: grid;
    gap: 0.35rem 1rem;
    grid-template-columns: max-content minmax(0, 1fr);
}
.exif-admin-summary dt {
    font-weight: 700;
}
.exif-admin-summary dd {
    margin: 0;
}

/* Leaflet fullscreen split hardening.
   Browser fullscreen applies the gallery lightbox image rules to every image
   inside the fullscreen element. Leaflet also keeps old tile containers around
   during zoom/resize transitions. These local overrides keep map tiles as raw
   map tiles so the split map cannot inherit photo sizing, filters, radius or
   transitions from the fullscreen viewer. */
.lightbox.is-fullscreen:not(.is-mobile-fullscreen).is-map-split .lightbox-map-split .leaflet-container img.leaflet-tile,
.lightbox.is-fullscreen:not(.is-mobile-fullscreen).is-map-split .lightbox-map-split .leaflet-container .leaflet-tile-pane img {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    filter: none !important;
    height: 256px !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: initial !important;
    opacity: 1 !important;
    padding: 0 !important;
    transition: none !important;
    visibility: visible !important;
    width: 256px !important;
}

.lightbox.is-fullscreen:not(.is-mobile-fullscreen).is-map-split .lightbox-map-split .leaflet-tile-container,
.lightbox.is-fullscreen:not(.is-mobile-fullscreen).is-map-split .lightbox-map-split .leaflet-tile-pane {
    filter: none !important;
    opacity: 1 !important;
}

/* Leaflet marker icon hardening.
   Keep the GPS pin dimensions independent from gallery image and fullscreen
   image rules while leaving map tiles controlled by the tile-specific reset. */
.leaflet-container img.leaflet-marker-icon {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    filter: none !important;
    height: 41px !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: initial !important;
    opacity: 1 !important;
    padding: 0 !important;
    transition: none !important;
    visibility: visible !important;
    width: 25px !important;
    z-index: auto;
}
.leaflet-container img.leaflet-marker-shadow {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    filter: none !important;
    height: 41px !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: initial !important;
    opacity: 1 !important;
    padding: 0 !important;
    transition: none !important;
    visibility: visible !important;
    width: 41px !important;
}
.leaflet-container .leaflet-marker-pane {
    z-index: 600;
}
.leaflet-container .leaflet-shadow-pane {
    z-index: 500;
}

/* CSS-only Leaflet marker for gallery GPS maps.
   This avoids Leaflet's external PNG marker dependency, which can appear as a
   broken image in fullscreen or on hosts that restrict CDN image loading. */
.leaflet-container .gallery-leaflet-marker {
    background: transparent !important;
    border: 0 !important;
    display: block !important;
    height: 40px !important;
    margin: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 0 !important;
    visibility: visible !important;
    width: 26px !important;
}
.leaflet-container .gallery-leaflet-marker-pin {
    background: #2f80d1;
    border: 2px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    display: block;
    height: 26px;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(-45deg);
    width: 26px;
}
.leaflet-container .gallery-leaflet-marker-pin::after {
    background: #ffffff;
    border-radius: 50%;
    content: "";
    display: block;
    height: 8px;
    left: 7px;
    position: absolute;
    top: 7px;
    width: 8px;
}
.leaflet-container .gallery-leaflet-marker-shadow {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 50%;
    bottom: -1px;
    display: block;
    height: 9px;
    left: 4px;
    position: absolute;
    transform: rotate(-12deg);
    width: 22px;
}
.image-detail-panel {
    text-align: center;
}
.image-detail-photo {
    display: block;
    width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
}
.favicon-current {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.favicon-current img,
.favicon-preview-row canvas {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line, #d6cfc2);
    border-radius: 0.5rem;
    background: #fff;
    image-rendering: auto;
}
.favicon-cropper {
    display: grid;
    gap: 0.8rem;
    max-width: 360px;
}
.favicon-crop-stage {
    width: 256px;
    height: 256px;
    border: 1px solid var(--line, #d6cfc2);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
    touch-action: none;
}
.favicon-crop-stage canvas {
    display: block;
    width: 256px;
    height: 256px;
    cursor: grab;
}
.favicon-crop-stage canvas:active {
    cursor: grabbing;
}
.favicon-preview-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.lightbox.is-fullscreen,
.lightbox.is-mobile-fullscreen,
.lightbox:fullscreen {
    background: #050505 !important;
}
.gallery-dev-overlay {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2147483000;
    width: min(35rem, calc(100vw - 1.5rem));
    max-height: min(60vh, 34rem);
    overflow: hidden;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(5, 10, 18, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.7rem;
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.68rem;
    line-height: 1.28;
    pointer-events: none;
}

.gallery-dev-overlay header,
.gallery-dev-overlay footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.gallery-dev-overlay footer {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 0;
    opacity: 0.72;
}
.gallery-dev-overlay strong {
    display: inline-grid;
    place-items: center;
    min-width: 2.2rem;
    min-height: 1.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}
.gallery-dev-overlay pre {
    margin: 0;
    padding: 0.45rem 0.55rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.gallery-dev-overlay canvas {
    display: block;
    width: 100%;
    height: 72px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lightbox.is-fullscreen .gallery-dev-overlay,
.lightbox.is-mobile-fullscreen .gallery-dev-overlay,
.lightbox:fullscreen .gallery-dev-overlay {
    right: 0.75rem;
    bottom: 0.75rem;
}
@media (max-width: 720px) {
.gallery-dev-overlay {
        right: 0.5rem;
        bottom: 0.5rem;
        width: calc(100vw - 1rem);
        font-size: 0.62rem;
    }
}

/* Reworked admin workspace layout */
.admin-page {
    --admin-bg: #f4f6f8;
    --admin-sidebar: #17202a;
    --admin-sidebar-soft: #202b36;
    --admin-sidebar-text: #dce3ea;
    --admin-sidebar-muted: #8fa0ae;
    --admin-accent: #2271b1;
    --admin-accent-soft: #e6f2fb;
    --admin-border: #d7dde3;
    --admin-card: #ffffff;
    --admin-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    background: var(--admin-bg);
}

.admin-page .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 3.25rem;
    padding: 0.65rem 1.25rem;
    background: #101820;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 16px rgba(0, 0, 0, 0.2);
}

.admin-page .site-header .nav a {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #f4f7fa;
}

.admin-page .site-header .nav a:hover,
.admin-page .site-header .nav a:focus {
    background: rgba(255, 255, 255, 0.14);
}

.admin-shell {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    gap: 1.25rem;
    width: min(1560px, calc(100% - 2rem));
    margin: 1.25rem auto 0;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 4.5rem;
    max-height: calc(100vh - 5.5rem);
    overflow: auto;
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--admin-sidebar), #111820);
    color: var(--admin-sidebar-text);
    box-shadow: var(--admin-shadow);
}

.admin-sidebar-title {
    padding: 0.35rem 0.5rem 0.9rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.admin-menu-group {
    margin: 0 0 0.7rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.admin-menu-group h2 {
    margin: 0 0 0.45rem;
    color: var(--admin-sidebar-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-menu-links {
    display: grid;
    gap: 0.2rem;
}

.admin-menu-link {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    color: var(--admin-sidebar-text);
    font-size: 0.92rem;
    font-weight: 650;
    text-decoration: none;
}

.admin-menu-link:hover,
.admin-menu-link:focus,
.admin-menu-link.is-active {
    background: var(--admin-sidebar-soft);
    color: #ffffff;
}

.admin-menu-link.is-active {
    box-shadow: inset 3px 0 0 var(--admin-accent);
}