/* =====================================================================
   The Gazetteer — deep-zoom map viewer
   Page-local styles only. Tokens, typography and chrome come from
   ../atlas.css (--slate-dark, --gold, --font-display, .atlas-* blocks).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */
.gz {
    position: relative;
    margin: 1.75rem auto 0;
    max-width: var(--max-width);
    height: 78vh;
    min-height: 460px;
    padding: 10px;
    background: var(--slate-deep);
    border: 1px solid var(--gold-soft);
    box-shadow:
        0 0 0 1px rgba(201, 168, 117, 0.06),
        0 24px 50px -20px rgba(0, 0, 0, 0.6);
    /* the viewer owns its gestures; never let the page scroll under a drag */
    touch-action: none;
}

.gz__viewport {
    position: absolute;
    inset: 10px;
    overflow: hidden;
    background: #0b0d10;
    border: 1px solid var(--gold-faint);
    cursor: grab;
    contain: layout paint;
}
.gz__viewport.is-panning { cursor: grabbing; }

/* One world per map. transform-origin 0 0 so the camera transform
   translate(vw/2,vh/2) scale(k) translate(-cx,-cy) is exact. */
.gz__world {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    --k: 1;
    --inv: 1;
    /* Parchment behind the art: a decoding 17MP webp reads as paper, not void. */
    background: #f4ecdd;
}
.gz__world[hidden] { display: none; }

.gz__map {
    display: block;
    max-width: none;          /* atlas.css sets img{max-width:100%} — undo it */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.gz__labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;     /* only the labels themselves are hotspots */
}

/* ---------------------------------------------------------------------
   Labels — positioned in map pixels, counter-scaled so they stay crisp
   and constant-size at every zoom level.
   --------------------------------------------------------------------- */
.gz-label {
    position: absolute;
    /* --inv is written by JS alongside --k (== 1/k) */
    transform: translate(-50%, -50%) rotate(var(--a, 0deg)) scale(var(--inv));
    transform-origin: 50% 50%;
    padding: 6px 10px;        /* generous hit padding, stays centred */
    white-space: nowrap;
    font-family: var(--font-display);
    color: #7c2d21;
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
    transition: opacity .28s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.gz-label.gz-hidden {
    opacity: 0;
    pointer-events: none;
}
.gz-label:hover,
.gz-label:focus-visible { color: #b3402c; outline: none; }

.gz-label--minor {
    font-size: 13px;
    font-variant: small-caps;
    letter-spacing: 0.06em;
    color: #6e3421;
    text-shadow:
        0 0 3px rgba(248, 241, 226, 0.95),
        0 0 6px rgba(248, 241, 226, 0.85),
        0 1px 1px rgba(248, 241, 226, 0.9);
}
.gz-label--medium {
    font-size: 17px;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    color: #7c2d21;
    text-shadow:
        0 0 3px rgba(248, 241, 226, 0.95),
        0 0 7px rgba(248, 241, 226, 0.85),
        0 1px 1px rgba(248, 241, 226, 0.9);
}
.gz-label--major {
    font-size: 21px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.34em;
    color: #94301f;
    text-shadow:
        0 0 4px rgba(248, 241, 226, 0.95),
        0 0 10px rgba(248, 241, 226, 0.9),
        0 1px 2px rgba(248, 241, 226, 0.9);
}

.gz-label.is-selected {
    color: #b3402c;
    text-shadow:
        0 0 4px rgba(248, 241, 226, 0.98),
        0 0 14px rgba(179, 64, 44, 0.4);
}

/* Arc titles: letters laid on the extracted CJRT letter-centroid polyline.
   They are map ink — positioned and sized in map pixels, scaling with zoom
   (no counter-scale), so curved region names sit exactly where the
   cartographer put them. */
.gz-label--arc {
    transform: none;
    padding: 0;
    pointer-events: none;
    letter-spacing: 0;
}
.gz-label--arc i {
    position: absolute;
    font-style: normal;
    font-weight: 500;
    transform: translate(-50%, -50%) rotate(var(--a, 0deg));
    pointer-events: auto;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Floating controls — map tabs (top-left) and search (top-right)
   --------------------------------------------------------------------- */
.gz__tabs {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    display: flex;
    gap: 1px;
    background: var(--gold-faint);
    border: 1px solid var(--gold-soft);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.8);
}
.gz__tab {
    appearance: none;
    border: none;
    background: rgba(8, 9, 13, 0.88);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}
.gz__tab:hover { color: var(--warm-gold); }
.gz__tab[aria-selected="true"] {
    /* solid — these tabs float over parchment as often as over dark chrome */
    background: #1a1712;
    color: var(--warm-gold);
    box-shadow: inset 0 -2px 0 var(--gold);
}

.gz__search {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 6;
    width: 220px;
}
.gz__search-input {
    width: 100%;
    background: rgba(8, 9, 13, 0.9);
    border: 1px solid var(--gold-soft);
    color: var(--text-light);
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.7rem;
    outline: none;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.8);
}
.gz__search-input::placeholder { color: var(--mist); opacity: .8; }
.gz__search-input:focus { border-color: var(--warm-gold); }

.gz__results {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    background: rgba(8, 9, 13, 0.96);
    border: 1px solid var(--gold-soft);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.85);
}
.gz__results[hidden] { display: none; }
.gz__result {
    padding: 0.4rem 0.7rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--text-light, #e8e2d4);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
}
.gz__result:hover,
.gz__result.is-active { background: rgba(201, 168, 117, 0.16); color: var(--warm-gold); }
.gz__result-map {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mist);
    flex: none;
}

/* ---------------------------------------------------------------------
   Hint strip (bottom-left)
   --------------------------------------------------------------------- */
.gz__hint {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 4;
    font-family: var(--font-display);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.55;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* ---------------------------------------------------------------------
   Lore card — right side panel (desktop) / bottom sheet (mobile)
   --------------------------------------------------------------------- */
.gz__card {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: 336px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    background: rgba(8, 9, 13, 0.96);
    border-left: 1px solid var(--gold-soft);
    box-shadow: -18px 0 40px -20px rgba(0, 0, 0, 0.9);
    transform: translateX(105%);
    transition: transform .3s ease, opacity .3s ease;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
.gz__card.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.gz__card-close {
    position: absolute;
    top: 8px;
    right: 10px;
    appearance: none;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    cursor: pointer;
    transition: color .2s ease;
}
.gz__card-close:hover { color: var(--warm-gold); }

.gz__card-body {
    padding: 1.5rem 1.4rem 2rem;
    overflow-y: auto;
    flex: 1;
}
.gz__card-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.7rem;
    line-height: 1.15;
    color: var(--warm-gold);
    letter-spacing: 0.02em;
    padding-right: 1.6rem;
    margin-bottom: 0.55rem;
}
.gz__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
}
.gz__badge {
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold-faint);
    padding: 0.2rem 0.5rem;
}
.gz__badge--age { color: var(--mist); }

.gz__card-blurb {
    font-family: var(--font-display);
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 1.2rem;
}
.gz__card-blurb--empty { color: var(--text-muted); font-style: italic; }

.gz__card-section { margin-top: 1.15rem; }
.gz__card-label {
    font-family: var(--font-display);
    font-size: 0.64rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.45rem;
}
.gz__card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}
.gz__link {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
    border-bottom: 1px dotted var(--gold-faint);
    cursor: pointer;
    text-align: left;
    transition: color .2s ease, border-color .2s ease;
}
.gz__link:hover { color: var(--warm-gold); border-bottom-color: var(--gold-soft); }
.gz__card-sources {
    margin-top: 1.4rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------- */
@media (max-width: 719px) {
    .gz {
        height: 72vh;
        min-height: 380px;
        padding: 6px;
    }
    .gz__viewport { inset: 6px; }
    .gz__tabs { top: 12px; left: 12px; }
    .gz__tab { font-size: 0.62rem; padding: 0.45rem 0.7rem; letter-spacing: 0.18em; }
    .gz__search { top: 12px; right: 12px; width: 42vw; max-width: 190px; }
    .gz__hint { display: none; }

    .gz__card {
        top: auto;
        left: 6px;
        right: 6px;
        bottom: 6px;
        width: auto;
        max-height: 62%;
        border-left: none;
        border-top: 1px solid var(--gold-soft);
        box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, 0.9);
        transform: translateY(105%);
    }
    .gz__card.is-open { transform: translateY(0); }
    .gz__card-name { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gz-label, .gz__card { transition: none; }
}