/* ============================================================
   Trip Gallery — "postcards & passport stamps"
   Dark Atlantic-ink ground · Fraunces display · Space Mono data
   Country colours carry meaning: which leg of the trip a shot is from.
   ============================================================ */

:root {
    --ink:    #16242B;
    --ink-2:  #1E323A;
    --ink-3:  #27414A;
    --line:   rgba(240, 233, 218, 0.12);
    --paper:  #F0E9DA;
    --text:   #EFEEE7;
    --muted:  #9FB3AD;

    /* per-leg accent colours (index 0,1,2,3) */
    --c0: #62B281;  /* Ireland — emerald */
    --c1: #E3A23E;  /* France  — marigold */
    --c2: #6FA8D6;  /* spare   — slate blue */
    --c3: #C97B6B;  /* spare   — clay */

    --radius: 14px;
    --shadow: 0 18px 40px -22px rgba(0,0,0,0.7);
    --maxw: 1180px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background:
        radial-gradient(1100px 620px at 78% -8%, rgba(98,178,129,0.10), transparent 60%),
        radial-gradient(900px 540px at 8% 4%, rgba(227,162,62,0.08), transparent 55%),
        var(--ink);
    color: var(--text);
    font-family: "Spline Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; }

/* ---------- Top bar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--ink-2) 86%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.topbar-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.75rem clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand { text-decoration: none; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.05rem, 1rem + 0.7vw, 1.4rem);
    letter-spacing: 0.01em;
    line-height: 1.05;
}
.route {
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.route-arrow { opacity: 0.45; margin: 0 0.4em; }
.route-stop  { color: color-mix(in srgb, var(--text) 80%, transparent); }

.topbar-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform .12s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--paper); color: #1a2429; }
.btn-primary:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.btn-block { width: 100%; justify-content: center; padding: 0.85rem; font-size: 1rem; }

/* ---------- Layout ---------- */
.wrap {
    flex: 1;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
}

.sitefoot {
    max-width: var(--maxw);
    margin: 2rem auto 0;
    padding: 1.5rem clamp(1rem, 3vw, 2rem) 2.5rem;
    color: var(--muted);
    font-family: "Space Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    gap: 0.6rem;
    border-top: 1px solid var(--line);
}
.sitefoot .dot { opacity: 0.5; }

/* ---------- Notices ---------- */
.notice {
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
    border: 1px solid var(--line);
}
.notice-good { background: color-mix(in srgb, var(--c0) 16%, var(--ink-2)); border-color: color-mix(in srgb, var(--c0) 40%, transparent); }
.notice-bad  { background: color-mix(in srgb, #d4674f 18%, var(--ink-2)); border-color: color-mix(in srgb, #d4674f 45%, transparent); }

/* ---------- Filter tabs ---------- */
.gallery-head {
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.btn-download { font-size: 0.85rem; padding: 0.5rem 0.95rem; }
.tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tab {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color .15s, border-color .15s, background .15s;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); background: var(--ink-2); border-color: color-mix(in srgb, var(--text) 22%, transparent); }
.tab-count {
    font-family: "Space Mono", monospace;
    font-size: 0.72rem;
    color: var(--muted);
    background: var(--ink-3);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}
/* coloured dot before country tabs */
.tab-c0::before, .tab-c1::before, .tab-c2::before, .tab-c3::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.tab-c0::before { background: var(--c0); }
.tab-c1::before { background: var(--c1); }
.tab-c2::before { background: var(--c2); }
.tab-c3::before { background: var(--c3); }

/* ---------- Masonry grid ---------- */
.grid {
    column-count: 2;
    column-gap: 14px;
}
@media (min-width: 700px)  { .grid { column-count: 3; column-gap: 16px; } }
@media (min-width: 1024px) { .grid { column-count: 4; column-gap: 18px; } }

.card {
    margin: 0 0 16px;
    break-inside: avoid;
    opacity: 0;
    transform: translateY(14px);
}
.card.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

.card-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}
.card-frame {
    display: block;
    position: relative;
    width: 100%;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.card-btn:hover .card-frame img { transform: scale(1.04); }
.card-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* passport-style stamp sitting on the photo */
.stamp {
    font-family: "Space Mono", monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.28rem 0.5rem;
    border-radius: 4px;
    border: 1.5px solid currentColor;
    background: color-mix(in srgb, var(--ink) 72%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    white-space: nowrap;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-meta {
    padding: 0.5rem 0.2rem 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.card-frame .stamp {
    position: absolute;
    left: 9px;
    bottom: 9px;
    z-index: 2;
    transform: rotate(-3deg);
    transform-origin: left center;
}
.byline {
    font-size: 0.78rem;
    color: var(--muted);
    text-decoration: none;
}
a.byline:hover { color: var(--text); }
.byline-sep { color: var(--muted); opacity: 0.5; font-size: 0.78rem; }
.byline-time { font-size: 0.78rem; color: var(--muted); }
.stamp-c0 { color: var(--c0); }
.stamp-c1 { color: var(--c1); }
.stamp-c2 { color: var(--c2); }
.stamp-c3 { color: var(--c3); }

/* ---------- Empty state ---------- */
.empty {
    text-align: center;
    padding: clamp(3rem, 12vh, 7rem) 1rem;
    border: 1px dashed var(--line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--ink-2) 50%, transparent);
}
.empty-mark { font-size: 3rem; margin: 0 0 0.5rem; color: var(--c0); }
.empty h2 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.5rem; margin: 0 0 0.4rem; }
.empty p { color: var(--muted); margin: 0 0 1.25rem; }

/* ---------- Upload form ---------- */
.upload { max-width: 580px; margin: 0 auto; }
.upload-title { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); margin: 0 0 0.3rem; }
.upload-sub { color: var(--muted); margin: 0 0 1.75rem; }

.up-form { display: flex; flex-direction: column; gap: 1.25rem; }

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    padding: 2.4rem 1.25rem;
    border: 2px dashed color-mix(in srgb, var(--text) 22%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--ink-2) 55%, transparent);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--c0); background: color-mix(in srgb, var(--c0) 10%, var(--ink-2)); }
.dz-icon { font-size: 2rem; line-height: 1; color: var(--paper); }
.dz-main { font-weight: 600; font-size: 1.05rem; }
.dz-sub  { color: var(--muted); font-size: 0.85rem; }
.dz-count {
    margin-top: 0.5rem;
    font-family: "Space Mono", monospace;
    font-size: 0.8rem;
    color: var(--c0);
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field > label, .field-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: color-mix(in srgb, var(--text) 85%, transparent); }
.field .opt { color: var(--muted); font-weight: 400; }
.field input[type="text"], .gate-form input, .up-form input[type="text"] {
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    width: 100%;
}
input:focus-visible { outline: none; border-color: color-mix(in srgb, var(--paper) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--paper) 18%, transparent); }
input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }

/* segmented country picker */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span {
    display: block;
    padding: 0.6rem 1.1rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted);
    border-right: 1px solid var(--line);
    transition: background .15s, color .15s;
}
.seg:last-child span { border-right: 0; }
.seg-c0 input:checked ~ span { background: color-mix(in srgb, var(--c0) 26%, var(--ink-2)); color: #fff; box-shadow: inset 0 2px 0 var(--c0); }
.seg-c1 input:checked ~ span { background: color-mix(in srgb, var(--c1) 26%, var(--ink-2)); color: #fff; box-shadow: inset 0 2px 0 var(--c1); }
.seg-c2 input:checked ~ span { background: color-mix(in srgb, var(--c2) 26%, var(--ink-2)); color: #fff; box-shadow: inset 0 2px 0 var(--c2); }
.seg-c3 input:checked ~ span { background: color-mix(in srgb, var(--c3) 26%, var(--ink-2)); color: #fff; box-shadow: inset 0 2px 0 var(--c3); }
.seg input:focus-visible ~ span { outline: 2px solid var(--paper); outline-offset: -2px; }

/* ---------- Password gate ---------- */
.gate { max-width: 380px; margin: 8vh auto 0; text-align: center; }
.gate-title { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.9rem; margin: 0 0 0.3rem; }
.gate-sub { color: var(--muted); margin: 0 0 1.75rem; }
.gate-form { display: flex; flex-direction: column; gap: 0.85rem; }

/* ---------- Lightbox ---------- */
.lb {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--ink) 92%, black);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: none;
    flex-direction: column;
}
.lb.open { display: flex; }
.lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(0.5rem, 3vw, 2rem); min-height: 0; }
.lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.lb-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    padding: 0.9rem clamp(1rem, 4vw, 2rem) 1.4rem;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--ink-2) 70%, transparent);
}
.lb-cap { flex: 1 1 240px; min-width: 0; }
.lb-cap-main { font-size: 1rem; }
.lb-cap-sub  { color: var(--muted); font-size: 0.82rem; margin-top: 0.15rem; font-family: "Space Mono", monospace; letter-spacing: 0.03em; }
.lb-actions { display: flex; gap: 0.5rem; align-items: center; }
.lb-link { font-size: 0.85rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.lb-link:hover { color: var(--text); border-color: var(--muted); }
.lb-close, .lb-nav {
    position: absolute;
    background: color-mix(in srgb, var(--ink-2) 80%, transparent);
    color: var(--text);
    border: 1px solid var(--line);
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.lb-close:hover, .lb-nav:hover { background: var(--ink-3); }
.lb-close { top: 1rem; right: 1rem; z-index: 2; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-remove {
    background: none; border: 0; color: color-mix(in srgb, #d4674f 90%, white);
    font-size: 0.82rem; cursor: pointer; padding: 0.2rem 0.3rem;
}
.lb-remove:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .lb-nav { width: 38px; height: 38px; }
    .route { display: none; }
}

/* ---------- View switcher (Gallery / Albums / Map) ---------- */
.viewnav {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    background: color-mix(in srgb, var(--ink-2) 60%, transparent);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.viewnav-link {
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--muted);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    transition: color .15s, background .15s;
}
.viewnav-link:hover { color: var(--text); }
.viewnav-link.is-active { color: #1a2429; background: var(--paper); }

/* ---------- Page + album headings ---------- */
.page-title { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); margin: 0 0 0.25rem; }
.page-sub { color: var(--muted); margin: 0 0 1.75rem; }

.album-head { margin-bottom: 1.25rem; }
.album-back { font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.album-back:hover { color: var(--text); }
.album-name { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); margin: 0.4rem 0 0.1rem; }
.album-sub { color: var(--muted); font-family: "Space Mono", monospace; font-size: 0.78rem; letter-spacing: 0.04em; margin: 0; }

/* ---------- Albums (people) grid ---------- */
.people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.person {
    text-decoration: none;
    color: inherit;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .15s ease, border-color .15s ease;
    display: flex;
    flex-direction: column;
}
.person:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--text) 25%, transparent); }
.person-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ink-3);
    display: block;
}
.person-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person-info { padding: 0.7rem 0.8rem 0.85rem; display: flex; flex-direction: column; gap: 0.15rem; }
.person-name { font-weight: 600; font-size: 0.98rem; }
.person-count { font-family: "Space Mono", monospace; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.03em; }

/* ---------- Map ---------- */
.map {
    height: min(68vh, 640px);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--ink-2);
}
.leaflet-container { background: #0f1a1f; font-family: inherit; }
.map-pop { width: 160px; cursor: zoom-in; }
.map-pop img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; display: block; }
.map-pop-cap { font-size: 0.82rem; margin-top: 0.4rem; color: #16242B; }
.map-pop-cap span { color: #5a6b6f; }

/* ---------- Resolution chip in the lightbox ---------- */
.lb-res {
    font-family: "Space Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
}
.lb-res:empty { display: none; }

/* ---------- Camera "shoot now" ---------- */
.shoot { display: flex; flex-direction: column; gap: 0.5rem; }
.shoot-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.shoot-take, .shoot-live { flex: 1 1 auto; justify-content: center; }
.shoot-hint { color: var(--muted); font-size: 0.82rem; margin: 0.1rem 0 0; }

/* ---------- Upload session tray ---------- */
.tray {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.75rem;
    background: color-mix(in srgb, var(--ink-2) 50%, transparent);
}
.tray-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.tray-count { font-family: "Space Mono", monospace; font-size: 0.78rem; color: var(--c0); letter-spacing: 0.04em; }
.tray-link { font-size: 0.85rem; color: var(--text); text-decoration: none; }
.tray-link:hover { text-decoration: underline; }
.tray-items { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tray-item {
    width: 64px; height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--ink-3);
    border: 1px solid var(--line);
}
.tray-item.pending { position: relative; }
.tray-item.pending::after {
    content: "";
    position: absolute; inset: 0; margin: auto;
    width: 18px; height: 18px;
    border: 2px solid var(--muted);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- "or" divider ---------- */
.up-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.8rem; }
.up-divider::before, .up-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Live viewfinder ---------- */
.vf {
    position: fixed; inset: 0; z-index: 80;
    background: #000;
    display: none;
    flex-direction: column;
}
.vf.open { display: flex; }
.vf-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vf-video { width: 100%; height: 100%; object-fit: cover; }
.vf-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
    background: #000;
}
.vf-shutter {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid rgba(255,255,255,0.4);
    cursor: pointer;
    transition: transform .1s ease;
}
.vf-shutter:active { transform: scale(0.94); }
.vf-btn {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    min-width: 74px;
}
.vf-btn:hover { background: rgba(255,255,255,0.2); }
.vf.flash .vf-stage { animation: vfflash 0.16s ease; }
@keyframes vfflash { from { opacity: 0.25; } to { opacity: 1; } }


/* ---------- Health / self-test page ---------- */
.health-list { display: flex; flex-direction: column; gap: 0.4rem; }
.hc-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink-2) 45%, transparent);
    flex-wrap: wrap;
}
.hc-badge {
    font-family: "Space Mono", monospace;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem; border-radius: 5px; color: #16242B;
    flex-shrink: 0; min-width: 52px; text-align: center;
}
.hc-pass { background: var(--c0); }
.hc-warn { background: var(--c1); }
.hc-fail { background: #d4674f; color: #fff; }
.hc-label { font-weight: 600; font-size: 0.92rem; }
.hc-detail { color: var(--muted); font-size: 0.84rem; margin-left: auto; }
.health code { font-family: "Space Mono", monospace; font-size: 0.85em; }

/* ---------- Download "preparing" overlay ---------- */
.dl-overlay {
    position: fixed; inset: 0; z-index: 70;
    background: color-mix(in srgb, var(--ink) 80%, black);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
}
.dl-overlay.open { display: flex; }
.dl-box {
    text-align: center; max-width: 320px; padding: 2rem 1.5rem;
    background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px;
}
.dl-spin {
    width: 34px; height: 34px; margin: 0 auto 1rem;
    border: 3px solid var(--ink-3); border-top-color: var(--paper);
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
.dl-msg { font-weight: 600; font-size: 1.05rem; }
.dl-sub { color: var(--muted); font-size: 0.85rem; margin-top: 0.35rem; }

/* ---------- Map pins (divIcon so they cluster + never 404) ---------- */
.pin span {
    display: block; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid #16242B; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ---------- Quick upload (streamlined) ---------- */
.quick { max-width: 460px; margin: 0 auto; }
.quick-id {
    display: flex; align-items: baseline; gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.quick-hi { font-size: 1.1rem; }
.quick-hi strong { font-family: "Fraunces", serif; font-weight: 600; }
.quick-switch { font-size: 0.82rem; color: var(--muted); text-decoration: none; }
.quick-switch:hover { color: var(--text); text-decoration: underline; }

.quick-form { display: flex; flex-direction: column; gap: 1.1rem; }

.leg { display: flex; align-items: center; gap: 0.7rem; }
.leg-label { font-size: 0.85rem; color: var(--muted); }

.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.quick-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    border: 1px solid var(--line);
    cursor: pointer;
    font-family: inherit;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.quick-btn:active { transform: scale(0.97); }
.quick-take {
    background: var(--paper); color: #1a2429; border-color: transparent;
}
.quick-take:hover { background: #fff; }
.quick-upload {
    background: color-mix(in srgb, var(--ink-2) 70%, transparent); color: var(--text);
}
.quick-upload:hover { border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.quick-ico { font-size: 2.2rem; line-height: 1; }
.quick-cap { font-size: 1.02rem; font-weight: 600; }

.quick-live {
    align-self: center;
    background: none; border: 0; color: var(--muted);
    font-family: inherit; font-size: 0.9rem; cursor: pointer;
    text-decoration: underline; padding: 0.2rem;
}
.quick-live:hover { color: var(--text); }
.quick-note { color: var(--muted); font-size: 0.84rem; text-align: center; margin: 0; }

/* ---------- Who are you? chips ---------- */
.who-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 0.5rem; }
.who-chip-form { display: inline; }
.who-chip {
    font-family: inherit; font-size: 0.95rem; font-weight: 500;
    background: var(--ink-2); color: var(--text);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 0.55rem 1.1rem; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.who-chip:hover { background: var(--ink-3); border-color: color-mix(in srgb, var(--text) 30%, transparent); }

/* ---------- Map: globe + flat toggle ---------- */
.map-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--ink-2) 60%, transparent);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.map-tab {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    background: none;
    border: 0;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.map-tab:hover { color: var(--text); }
.map-tab.is-active { color: #1a2429; background: var(--paper); }

.globe {
    height: min(70vh, 640px);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    background: radial-gradient(circle at 50% 38%, #13212b, #0b141a 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.globe canvas { display: block; cursor: grab; }
.globe canvas:active { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    .card { opacity: 1; transform: none; }
}