/* Size Match — where the landmarks stand: the map chunk in a landmark profile and the
   full-screen map of all landmarks. Drawn by js/size-match-map.js from the platform's own atlas. */

/* ── Colours ────────────────────────────────────────── */
.lm, .lm-chunk {
    --lm-space: #eaf0f6;
    --lm-ocean: #d5e7f4;
    --lm-land: #f8f6ef;
    --lm-land-has: #e6efd9;
    --lm-land-host: #c9e3bd;
    --lm-line: #a3b4c2;
    --lm-grid: rgba(60, 100, 140, 0.17);
    --lm-name: #6b7c8c;
    --lm-name-host: #24402c;
    --lm-halo: #f8f6ef;
    --lm-old: #b4532a;
    --lm-new: #0e8585;
    --lm-mixed: #475569;
    --lm-panel: #ffffff;
    --lm-panel-ink: #0f172a;
    --lm-panel-muted: #64748b;
    --lm-panel-line: rgba(15, 23, 42, 0.12);
    --lm-accent: var(--sm-accent, #0e7490);
    --lm-accent-ink: #ffffff;
}
[data-theme="dark"] .lm, [data-theme="dark"] .lm-chunk {
    --lm-space: #0b1220;
    --lm-ocean: #12233a;
    --lm-land: #2b3b4e;
    --lm-land-has: #33504f;
    --lm-land-host: #3f7462;
    --lm-line: #566b80;
    --lm-grid: rgba(148, 180, 210, 0.12);
    --lm-name: #a2b4c6;
    --lm-name-host: #e0f5e8;
    --lm-halo: #12233a;
    --lm-old: #f08a5d;
    --lm-new: #4fd1c5;
    --lm-mixed: #cbd5e1;
    --lm-panel: #1e293b;
    --lm-panel-ink: #f1f5f9;
    --lm-panel-muted: #a3b2c4;
    --lm-panel-line: rgba(226, 232, 240, 0.16);
}
/* A landmark built before 1900 has a parchment profile: its map is an old atlas sheet. */
.lm.lm--historic, [data-theme="dark"] .lm.lm--historic,
.lp--historic .lm-chunk, [data-theme="dark"] .lp--historic .lm-chunk {
    --lm-space: #d8c39b;
    --lm-ocean: #c9d6cc;
    --lm-land: #f8ecd3;
    --lm-land-has: #f0d7a6;
    --lm-land-host: #e6b672;
    --lm-line: #9a7443;
    --lm-grid: rgba(116, 77, 34, 0.2);
    --lm-name: #86683f;
    --lm-name-host: #55351a;
    --lm-halo: #f8ecd3;
    --lm-old: #a23b22;
    --lm-new: #1f6f73;
    --lm-mixed: #5b432a;
    --lm-panel: #fbefd5;
    --lm-panel-ink: #3e291b;
    --lm-panel-muted: #71583d;
    --lm-panel-line: rgba(116, 77, 34, 0.28);
    --lm-accent: #805026;
    --lm-accent-ink: #fff8e6;
    --font-heading: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
}
/* A modern landmark has a blueprint profile: its map is drawn on dark blue. */
.lm.lm--modern, [data-theme="dark"] .lm.lm--modern,
.lp--modern .lm-chunk, [data-theme="dark"] .lp--modern .lm-chunk {
    --lm-space: #0c1c2b;
    --lm-ocean: #11263a;
    --lm-land: #24435a;
    --lm-land-has: #285562;
    --lm-land-host: #2f7079;
    --lm-line: #5d8ba3;
    --lm-grid: rgba(177, 220, 230, 0.1);
    --lm-name: #a3c0cf;
    --lm-name-host: #e6f7f8;
    --lm-halo: #11263a;
    --lm-old: #f3a871;
    --lm-new: #62d4d0;
    --lm-mixed: #dbe9f0;
    --lm-panel: #1b3040;
    --lm-panel-ink: #f0f7fa;
    --lm-panel-muted: #aac2cf;
    --lm-panel-line: rgba(169, 212, 228, 0.22);
    --lm-accent: #62d4d0;
    --lm-accent-ink: #0b2230;
}

/* ── Map drawing, shared by both views ──────────────── */
.lm-ocean, .lm-sphere { fill: var(--lm-ocean); }
.lm-sphere { stroke: var(--lm-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lm-grid { fill: none; stroke: var(--lm-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lm-land { fill: var(--lm-land); stroke: var(--lm-line); stroke-width: 0.7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lm .lm-land { stroke-width: var(--lm-border, 0.7px); }
.lm .lm-land--host { fill: var(--lm-land-has); }
.lm-chunk .lm-land--host { fill: var(--lm-land-host); stroke-width: 1.1; }
.lm-name {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-anchor: middle;
    fill: var(--lm-name);
    stroke: var(--lm-halo);
    stroke-width: 3px;
    stroke-linejoin: round;
    paint-order: stroke;
    pointer-events: none;
}
.lm-name--host { fill: var(--lm-name-host); font-size: 11px; font-weight: 700; }
.lm-dot { stroke: #fff; stroke-width: 1.4; }
.lm-dot--old { fill: var(--lm-old); }
.lm-dot--new { fill: var(--lm-new); }

.lm-pin { cursor: pointer; outline: none; }
.lm-pin--old { --lm-pin: var(--lm-old); }
.lm-pin--new { --lm-pin: var(--lm-new); }
.lm-pin--mixed { --lm-pin: var(--lm-mixed); }
.lm-pin__drop { fill: var(--lm-pin); stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); transition: transform 0.12s ease; }
.lm-pin__eye { fill: #fff; pointer-events: none; }
.lm-pin__disc { fill: var(--lm-pin); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); transition: transform 0.12s ease; }
.lm-pin__count { fill: var(--lm-halo); font-family: var(--font-heading, 'Poppins', sans-serif); font-size: 12px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.lm-pin--old .lm-pin__count, .lm-pin--new .lm-pin__count { fill: #fff; }
.lm-pin__pulse { fill: var(--lm-pin); opacity: 0; pointer-events: none; }
.lm-pin__name {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 11.5px;
    font-weight: 700;
    fill: var(--lm-name-host);
    stroke: var(--lm-halo);
    stroke-width: 3.5px;
    stroke-linejoin: round;
    paint-order: stroke;
    pointer-events: none;
}
.lm-pin:hover .lm-pin__drop, .lm-pin:hover .lm-pin__disc { transform: scale(1.14); }
.lm-pin.is-selected .lm-pin__drop { transform: scale(1.28); }
.lm-pin.is-selected .lm-pin__pulse { animation: lm-pulse 1.9s ease-out infinite; }
.lm-pin:focus-visible .lm-pin__drop, .lm-pin:focus-visible .lm-pin__disc { stroke: var(--lm-panel-ink); stroke-width: 2.6; }
@keyframes lm-pulse {
    0% { opacity: 0.5; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(3.2); }
}

/* ── The chunk in a landmark profile ────────────────── */
.lm-chunk {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    border: 1px solid var(--lm-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--lm-ocean);
    color: var(--lm-panel-ink);
    font: inherit;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.lm-chunk[hidden] { display: none; }
.lm-chunk:hover { border-color: var(--lm-accent); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16); }
.lm-chunk:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 3px; }
.lm-chunk__map { display: block; aspect-ratio: 7 / 4; }
.lm-chunk__map svg { display: block; width: 100%; height: 100%; }
.lm-chunk__map.is-loading {
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%) var(--lm-ocean);
    background-size: 220% 100%;
    animation: lm-wait 1.3s linear infinite;
}
@keyframes lm-wait {
    from { background-position: 120% 0; }
    to { background-position: -100% 0; }
}
.lm-chunk__hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--lm-panel-line);
    background: var(--lm-panel);
    color: var(--lm-panel-ink);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16);
    transition: background 0.15s ease, color 0.15s ease;
}
.lm-chunk:hover .lm-chunk__hint { background: var(--lm-accent); color: var(--lm-accent-ink); border-color: transparent; }
.lp--historic .lm-chunk { border-radius: 4px; }
.lp--historic .lm-chunk__hint { border-radius: 5px; }
.lp--modern .lm-chunk { border-radius: 7px; }
.lp--modern .lm-chunk__hint { border-radius: 6px; }

/* ── The full map ───────────────────────────────────── */
body.lm-open { overflow: hidden; }
body.lm-open .geobek-launcher { display: none !important; }
.lm {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    flex-direction: column;
    background: var(--lm-space);
    color: var(--lm-panel-ink);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.lm.is-open { opacity: 1; }
.lm[hidden] { display: none !important; }
.lm__topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: var(--lm-panel);
    border-bottom: 1px solid var(--lm-panel-line);
}
.lm__heading { min-width: 0; display: flex; flex-direction: column; }
.lm__heading h2 { margin: 0; font-family: var(--font-heading, 'Poppins', sans-serif); font-size: 1.08rem; font-weight: 700; line-height: 1.25; color: var(--lm-panel-ink); }
.lm__heading span { font-size: 0.8rem; color: var(--lm-panel-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm__button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid var(--lm-panel-line);
    background: var(--lm-panel);
    color: var(--lm-panel-ink);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}
.lm__button:hover { border-color: var(--lm-accent); }
.lm__button:focus-visible, .lm-card__open:focus-visible, .lm-card__row:focus-visible,
.lm-card__dismiss:focus-visible, .lm-card__group:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 2px; }
.lm--historic .lm__button, .lm--historic .lm__card, .lm--historic .lm__legend, .lm--historic .lm-card__open { border-radius: 5px; }
.lm--modern .lm__button, .lm--modern .lm__card, .lm--modern .lm__legend, .lm--modern .lm-card__open { border-radius: 8px; }

.lm__stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.lm__svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; transition: opacity 0.2s ease; }
.lm__svg:active { cursor: grabbing; }
.lm.is-waiting .lm__svg { opacity: 0; }
.lm__legend {
    position: absolute;
    left: 14px;
    top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    max-width: calc(100% - 84px);
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--lm-panel-line);
    background: var(--lm-panel);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--lm-panel-ink);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.1);
}
.lm__legend span { display: inline-flex; align-items: center; gap: 7px; }
.lm__key { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18); }
.lm__key--old { background: var(--lm-old); }
.lm__key--new { background: var(--lm-new); }
.lm__tools { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.lm__tool { width: 42px; height: 42px; padding: 0; font-size: 1.05rem; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.1); }
.lm__hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 28px);
    margin: 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--lm-panel);
    border: 1px solid var(--lm-panel-line);
    color: var(--lm-panel-muted);
    font-size: 0.8rem;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.lm.is-used .lm__hint, .lm.is-waiting .lm__hint, .lm__card:not([hidden]) ~ .lm__hint { opacity: 0; }
.lm__status {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--lm-panel-muted);
}
.lm__status[hidden] { display: none; }
.lm__spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--lm-panel-line); border-top-color: var(--lm-accent); animation: lm-spin 0.8s linear infinite; }
@keyframes lm-spin { to { transform: rotate(360deg); } }

/* ── The card of a selected pin ─────────────────────── */
.lm__card {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: min(370px, calc(100% - 28px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--lm-panel-line);
    background: var(--lm-panel);
    color: var(--lm-panel-ink);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.24);
    animation: lm-rise 0.18s ease both;
}
.lm__card[hidden] { display: none; }
@keyframes lm-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.lm-card__dismiss {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lm-panel-muted);
    cursor: pointer;
}
.lm-card__dismiss:hover { color: var(--lm-panel-ink); background: var(--lm-panel-line); }
.lm-card__group {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 30px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--lm-accent);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.lm-card__main { display: flex; gap: 12px; min-width: 0; }
.lm-card__photo { flex: 0 0 96px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--lm-space); display: block; }
.lm-card__photo img, .lm-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.lm-card__photo--shape svg, .lm-card__thumb--shape svg { width: 100%; height: 100%; display: block; }
.lm-card__photo--shape path, .lm-card__thumb--shape path { fill: var(--lm-name); }
.lm-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; padding-right: 22px; }
.lm-card__body strong { font-family: var(--font-heading, 'Poppins', sans-serif); font-size: 1.02rem; line-height: 1.25; }
.lm-card__place { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--lm-panel-muted); }
.lm-card__facts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.84rem; font-weight: 600; }
.lm-card__facts span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lm-card__facts i { color: var(--lm-accent); }
.lm-card__kind { font-size: 0.8rem; color: var(--lm-panel-muted); }
.lm-card__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--lm-accent);
    color: var(--lm-accent-ink);
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}
.lm-card__open:hover { filter: brightness(1.08); }
.lm-card__title { padding-right: 30px; font-family: var(--font-heading, 'Poppins', sans-serif); font-weight: 700; font-size: 1rem; }
.lm-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto; }
.lm-card__row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 12px;
    border: 1px solid var(--lm-panel-line);
    background: transparent;
    color: var(--lm-panel-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.lm-card__row:hover { border-color: var(--lm-accent); }
.lm-card__thumb { flex: 0 0 46px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--lm-space); display: block; }
.lm-card__row > span:not(.lm-card__thumb) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lm-card__row strong { font-size: 0.92rem; line-height: 1.25; }
.lm-card__row small { font-size: 0.78rem; color: var(--lm-panel-muted); }
.lm-card__row > i { color: var(--lm-accent); }

/* ── The way in from the landmark library ───────────── */
.sm-library__map { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 640px) {
    .lm__topbar { padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); gap: 10px; }
    .lm__legend { left: 8px; top: 8px; flex-direction: column; padding: 7px 10px; font-size: 0.72rem; }
    .lm__tools { right: 8px; top: 8px; }
    .lm__card { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; }
    .lm-card__photo { flex-basis: 84px; height: 84px; }
    .lm-card__list { max-height: 38vh; }
    .lm__hint { bottom: 12px; border-radius: 14px; font-size: 0.76rem; }
    .lm-chunk__hint { right: 8px; bottom: 8px; padding: 6px 10px; font-size: 0.76rem; }
    .sm-library__head { flex-wrap: wrap; }
    .sm-library__map { width: 100%; margin-left: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .lm, .lm__card, .lm__svg, .lm-pin__drop, .lm-pin__disc { transition: none; animation: none; }
    .lm-pin.is-selected .lm-pin__pulse { animation: none; opacity: 0.28; transform: scale(2); }
    .lm-chunk__map.is-loading { animation: none; }
}