/* LAYER: modules — the top-level `@layer modules { … }` block below. This file
   is loaded as a plain <link>, so that block is top-level and really is that layer.
   Position 5 of 19 in accid-shared/accid-layers-order.css, which is the
   only file that states the order. Later layers win. This note is here because a
   sheet's NAME says what is in it, not where it sorts — site.css holds the Site
   column's values and sits in `defaults` so project_styles.css can override it,
   and reading the name instead of the layer has cost a day before now. */

/* view-nav.css — Shared View Navigation Styles */
/* SPI-558 P1b: THE FILE DECLARES ITS OWN LAYER.
   It is loaded by a <link>, and a <link> carries no layer attribute, so an
   unlayered sheet here would outrank every layer in the builder. Two modules
   used to load it and they disagreed: catalogue-module.js appended a plain
   <link> (unlayered) and view-nav-module.js a <style> holding
   @import ... layer(decoration). Both used the same element id, so whichever
   module rendered first decided the precedence of this whole file. One
   loader now, in the template, and the layer is declared here.

   A stray "å" (bytes c3 a5) sat on line 2 of this file and is removed. */
/* SPI-625: this file was `@layer modules`. The layer is gone; it now simply
   loads with the other module stylesheets. The note it carried:
   was `decoration` until 2026-09-26. Ruled down to `modules`
                      with responsive.css and accid-filter.css: these three are
                      module-level styling, and anything above `modules` in
                      LAYER_ORDER is a RUNG a user can set. A sheet sitting in a
                      rung's layer competes with the rung.

                      ⚠ THE REASON IS THE SWITCHOVER. User values used to be
                      INLINE and beat an unlayered — or high-layered — floor
                      either way. After the switchover they are `@layer module`
                      rules, and `decoration` sits ABOVE `module` in
                      LAYER_ORDER, so this sheet would have started beating a
                      user's own nav setting. It moves down to stay beneath
                      them. Cost, stated: it now loses to layer(project) and to
                      the site/page rung sheets. */

    /* Gallery Header */
    .gallery-header {
      text-align: center;
      padding: 20px 16px 10px;
    }

    .gallery-title {
      font-size: 2rem;
      font-weight: 700;
      color: var(--neutral-r70);
      margin-bottom: 4px;
      text-align:center;
    }

    .gallery-subtitle {
      font-size: 1.1rem;
      color: var(--neutral-r70);
      margin-bottom: 6px;
    }

    .gallery-tags {
      font-size: 14px;
      color: var(--neutral-r30);
    }

    .gallery-tags span {
      display: inline-block;
      background: var(--neutral-r12);
      padding: 2px 10px;
      border-radius: 12px;
      margin: 2px 3px;
      font-size: 12px;
    }

    /* View navigation */




.view-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 20px;
    flex-wrap: wrap;
}

.view-nav a {
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-r70);
    background: var(--neutral-r12);
    transition: all 0.2s;
}

.view-nav a:hover {
    background: var(--neutral-r15);
    color: var(--neutral-r70);
}

.view-nav a.active {
    background: var(--neutral-r70);
    color: var(--page-surface);
}

.view-nav a.edit-link {
    background: var(--c5-a10);
    color: var(--c5-r45);
    border: 1px solid var(--c5-a20);
}

.view-nav a.edit-link:hover {
    background: var(--c5-a20);
}

/* Country Map Footer */
.cmf {
    margin: 60px auto 40px;
    max-width: 900px;
    padding: 24px;
    background: var(--c5-a90);
    border-radius: 16px;
    border: 1px solid var(--c5-a10);
}

.cmf-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cmf-icon { font-size: 20px; }

.cmf-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--page-surface);
}

.cmf-count {
    font-size: 13px;
    color: var(--c3-a50);
}

.cmf-link {
    margin-left: auto;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--c5-a10);
    color: var(--c5-a90);
    text-decoration: none;
    font-weight: 600;
}
.cmf-link:hover { background: var(--c5-a20); }

.cmf-map-wrap {
    position: relative;
    margin-bottom: 12px;
    min-height: 200px;
}

/* Dots on map */
.cmf-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c3-a30);
    border: 2px solid var(--c3-a50);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
}

.cmf-dot-active {
    background: var(--c5-a70);
    border-color: var(--c5-r30);
    box-shadow: 0 0 10px var(--c5-a50);
}

.cmf-dot:hover {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 16px var(--c5-a80);
}

.cmf-dot-selected {
    transform: translate(-50%, -50%) scale(1.6);
    background: var(--page-surface);
    border-color: var(--page-surface);
    box-shadow: 0 0 20px var(--c3-a60);
}

.cmf-dot-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--c3-a80);
    background: var(--c6-a60);
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.cmf-dot:hover .cmf-dot-label,
.cmf-dot-selected .cmf-dot-label { opacity: 1; }

.cmf-dot-unmapped {
    border-style: dashed;
    opacity: 0.7;
}

/* Photo reveal area */
.cmf-photo-reveal {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.cmf-reveal-open {
    max-height: 500px;
    overflow-y: auto;
    padding-top: 12px;
    border-top: 1px solid var(--c3-a10);
}

.cmf-reveal-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--page-surface);
    margin-bottom: 10px;
}

.cmf-reveal-count {
    font-weight: 400;
    font-size: 12px;
    color: var(--c3-a50);
    margin-left: 6px;
}

.cmf-reveal-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.cmf-reveal-card {
    flex-shrink: 0;
    width: 120px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--c3-a10);
    transition: all 0.15s;
    background: var(--c3-a10);
}

.cmf-reveal-card:hover {
    border-color: var(--c5-a50);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--c6-a30);
}

.cmf-reveal-card img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}

.cmf-reveal-caption {
    padding: 4px 6px;
    font-size: 11px;
    color: var(--c3-a70);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lightbox */
.cmf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmf-lb-backdrop {
    position: absolute;
    inset: 0;
    background: var(--c6-a80);
}

.cmf-lb-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}

.cmf-lb-content img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px var(--c6-a50);
}

.cmf-lb-title {
    color: var(--page-surface);
    font-size: 14px;
    margin-top: 10px;
    opacity: 0.8;
}

.cmf-lb-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c3-a10);
    border: 1px solid var(--c3-a30);
    color: var(--page-surface);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cmf-lb-close:hover { background: var(--c3-a30); }