/* ==========================================================================
   Praying Wall — the world at prayer (map page only)
   The look comes from the banner: a glass globe of royal blue held in a ring
   of gold, lit from within, under an evening sky that warms toward the
   horizon. Light theme is the same globe under the morning sky.
   Colours come from the site tokens in main.css wherever one exists.
   ========================================================================== */

.map-main { overflow-x: clip; }

/* --- the sky ------------------------------------------------------------ */

.map-sky {
  position: relative;
  padding-block: var(--s7) var(--s8);
  background:
    radial-gradient(90% 46% at 50% 108%, rgba(255, 138, 62, 0.34), transparent 70%),
    radial-gradient(70% 40% at 50% 100%, rgba(214, 72, 150, 0.22), transparent 72%),
    radial-gradient(60% 50% at 50% 30%, rgba(60, 70, 220, 0.28), transparent 75%),
    linear-gradient(180deg, #05081C 0%, #0B1242 46%, #1B1557 78%, #2A1650 100%);
  isolation: isolate;
}
.map-stars {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 9%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 47% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 12%, #ffe9c0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 83% 26%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 8%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 44%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 38% 40%, #ffd9f2 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 46%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 52%, #dfe6ff 50%, transparent 51%);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 80%);
          mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 80%);
}

:root[data-theme-resolved="light"] .map-sky {
  background:
    radial-gradient(70% 44% at 50% 104%, rgba(255, 196, 92, 0.42), transparent 72%),
    radial-gradient(60% 50% at 82% 18%, rgba(255, 244, 214, 0.9), transparent 70%),
    linear-gradient(180deg, #CFE6FF 0%, #E6F2FF 48%, #FFF6E3 100%);
}
:root[data-theme-resolved="light"] .map-stars { display: none; }

/* --- heading ------------------------------------------------------------ */

.map-head { text-align: center; max-width: 760px; margin-inline: auto; }
.map-eyebrow {
  margin: 0 0 var(--s2); font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.map-head h1 {
  margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.05;
  font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -.01em;
}
.map-head h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
:root[data-theme-resolved="dark"] .map-head h1 em,
:root:not([data-theme-resolved="light"]) .map-head h1 em {
  background: linear-gradient(180deg, #FFF1BF, #F5D275 55%, #D9A32E); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.map-lede { margin: var(--s4) auto 0; max-width: 60ch; color: var(--dim); font-size: 1.06rem; }
:root[data-theme-resolved="light"] .map-lede { color: #33476B; }

/* --- world totals ------------------------------------------------------- */

.map-totals {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3);
  max-width: 720px; margin: var(--s6) auto 0; padding: 0;
}
.map-totals > div {
  display: flex; flex-direction: column-reverse; align-items: center; gap: 2px;
  padding: var(--s4) var(--s3); text-align: center;
  background: rgba(9, 15, 46, 0.5); border: 1px solid var(--accent-edge); border-radius: 16px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.map-totals dt { font-size: .8rem; letter-spacing: .04em; color: var(--dim); }
.map-totals dd { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 4.4vw, 2.3rem); line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
:root[data-theme-resolved="light"] .map-totals > div { background: rgba(255, 255, 255, 0.72); }

/* --- globe and card side by side ---------------------------------------- */

.map-layout { display: grid; gap: var(--s5); margin-top: var(--s6); align-items: start; }
@media (min-width: 900px) {
  .map-layout { grid-template-columns: minmax(0, 1.28fr) minmax(320px, 1fr); gap: var(--s6); }
}

.globe-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: min(78vh, 760px); margin-inline: auto;
  max-width: min(100%, calc(min(78vh, 760px)));
  border-radius: 28px; overflow: hidden;
}
.globe-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe-top { touch-action: none; cursor: grab; outline: none; border-radius: 28px; -webkit-tap-highlight-color: transparent; }
.globe-top:focus-visible { box-shadow: 0 0 0 3px var(--focus, #F5D275); }

.globe-loading {
  position: absolute; inset-inline: 0; bottom: 14%; margin: 0; text-align: center;
  font-size: .92rem; color: #EAF4FF; text-shadow: 0 1px 8px rgba(4, 10, 60, .8); pointer-events: none;
}

.globe-tip {
  position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: min(280px, 80%);
  padding: 8px 12px; border-radius: 12px;
  background: rgba(5, 8, 28, 0.92); color: #EAEEFF; border: 1px solid rgba(245, 210, 117, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: .86rem; line-height: 1.3;
  will-change: transform;
}
.globe-tip .tip-text { display: grid; }
.globe-tip strong { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: #F5D275; }
.globe-tip span span { color: #B9C3EE; }

.flag { width: 28px; height: 21px; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(128, 140, 190, 0.45); background: rgba(128, 140, 190, 0.2); }
.flag-lg { width: 72px; height: 54px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(128, 140, 190, 0.5), 0 8px 20px rgba(0, 0, 0, .22); }

.globe-mode, .globe-zoom {
  position: absolute; z-index: 3; display: flex;
  background: rgba(5, 8, 28, 0.72); border: 1px solid var(--accent-edge); border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.globe-mode { top: 10px; inset-inline-start: 10px; padding: 3px; }
.globe-mode button {
  font: inherit; font-size: .84rem; font-weight: 700; color: #C9D2F5; background: none; border: 0;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; min-height: 36px;
}
.globe-mode button[aria-pressed="true"] { background: linear-gradient(178deg, #F5D275, #D9A32E); color: #2A1B00; }
.globe-zoom { bottom: 10px; inset-inline-end: 10px; flex-direction: column; padding: 3px; border-radius: 18px; }
.globe-zoom button {
  width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; border-radius: 14px; cursor: pointer; color: #F5D275;
}
.globe-zoom button:hover, .globe-mode button:not([aria-pressed="true"]):hover { background: rgba(245, 210, 117, 0.14); }
.globe-zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.globe-mode button:focus-visible, .globe-zoom button:focus-visible { outline: 2px solid #F5D275; outline-offset: 2px; }

.globe-help { margin: var(--s3) auto 0; max-width: 56ch; text-align: center; font-size: .9rem; color: var(--dim); }
:root[data-theme-resolved="light"] .globe-help { color: #33476B; }

/* --- the card ----------------------------------------------------------- */

.map-card {
  position: relative; padding: var(--s5); border-radius: 22px;
  background: rgba(9, 15, 46, 0.74); border: 1px solid var(--accent-edge);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 241, 191, .12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  scroll-margin-top: 84px;
}
@media (min-width: 900px) {
  .map-card { max-height: min(78vh, 760px); overflow-y: auto; scrollbar-width: thin; }
}
/* In daylight the card is one of the paper notes pinned to the wall. */
:root[data-theme-resolved="light"] .map-card {
  background: linear-gradient(180deg, #FFFDF5, #FFF7E2);
  border-color: rgba(169, 106, 8, 0.38);
  box-shadow: 0 20px 44px rgba(0, 38, 92, .16), inset 0 1px 0 #fff;
}

.card-kicker { margin: 0 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
button.card-kicker-link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: start; }
button.card-kicker-link:hover { text-decoration: underline; }
.card-title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.12; }
.card-native { unicode-bidi: isolate; margin: 4px 0 0; color: var(--dim); font-size: .98rem; }
.card-lede { margin: var(--s3) 0 0; color: var(--dim); }
.card-fine { margin: var(--s4) 0 0; font-size: .86rem; color: var(--dim); }
.card-flaghead { display: flex; gap: var(--s4); align-items: center; }

.card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: var(--s4) 0 0; }
.card-stats > div { padding: var(--s3) var(--s2); text-align: center; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--line); }
.card-stats dd { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: var(--accent); font-variant-numeric: tabular-nums; }
.card-stats dt { font-size: .76rem; color: var(--dim); }

.card-veil { margin: var(--s3) 0 0; font-size: .88rem; color: var(--dim); }
.card-veil-box {
  margin-top: var(--s4); padding: var(--s4); border-radius: 14px;
  background: rgba(190, 180, 236, 0.14); border: 1px solid rgba(190, 180, 236, 0.45);
}
.card-veil-box strong { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--text); }
.card-veil-box p { margin: 6px 0 0; }

.card-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s4); margin: var(--s4) 0 0; font-size: .95rem; }
.card-facts dt { color: var(--dim); }
.card-facts dd { margin: 0; }

.card-sec { margin-top: var(--s5); }
.card-sec h3 { margin: 0 0 6px; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.card-sec p { margin: 0; line-height: 1.6; }
.card-regional { margin-top: var(--s5); padding-top: var(--s2); border-top: 1px solid var(--line); }
.card-regional .card-fine { margin-top: var(--s3); font-style: italic; }
.card-regional .card-sec { margin-top: var(--s4); }

.card-origins { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card-origins li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.card-origins li > .flag { margin-top: 2px; }
.card-origins small { display: block; color: var(--dim); font-size: .8rem; }
.card-origins li:not(:has(.flag)) { padding-inline-start: 14px; position: relative; }
.card-origins li:not(:has(.flag))::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  font: inherit; font-size: .88rem; color: var(--text); text-align: start;
  padding: 5px 12px 5px 6px; border-radius: 999px; cursor: pointer;
  background: var(--ghost-bg, rgba(160, 176, 255, 0.08)); border: 1px solid var(--line);
}
.chip:hover { border-color: var(--accent-edge); background: var(--accent-soft); }
.chip:focus-visible, .card-back:focus-visible, .region-btn:focus-visible, .card-top button:focus-visible { outline: 2px solid var(--focus, #F5D275); outline-offset: 2px; }
.chip .flag { width: 24px; height: 18px; border-radius: 9px / 9px; border-radius: 4px; }
.chip-veiled { border-style: dashed; }

.card-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.card-top button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: start;
  font: inherit; color: var(--text); background: none; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; cursor: pointer;
}
.card-top button:hover { border-color: var(--accent-edge); background: var(--accent-soft); }
.card-top .top-name { font-weight: 700; flex: 1; min-width: 0; }
.card-top .top-n { font-size: .82rem; color: var(--dim); text-align: end; }

.card-actions { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: 10px; }
.card-back {
  margin-top: var(--s4); font: inherit; font-size: .9rem; font-weight: 700; color: var(--accent);
  background: none; border: 0; padding: 6px 0; cursor: pointer;
}
.card-back:hover { text-decoration: underline; }

/* --- the list under the globe ------------------------------------------- */

.map-browse { padding-block: var(--s7) 0; }
.map-browse h2, .map-notes h2 { margin: 0 0 6px; font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem); }
.map-browse .dim, .map-results .dim { color: var(--dim); }
.map-browse > p { margin: 0 0 var(--s4); }
.map-search {
  display: flex; align-items: center; gap: 10px; max-width: 460px;
  padding: 0 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--line);
}
.map-search:focus-within { border-color: var(--focus, #F5D275); }
.map-search svg { width: 20px; height: 20px; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; flex: none; }
.map-search input { flex: 1; min-width: 0; font: inherit; color: var(--text); background: none; border: 0; outline: 0; padding: 13px 0; }
.map-results { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s3) 0 0; padding: 0; }
.map-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: var(--s5); }
.region-btn {
  display: grid; gap: 2px; text-align: start; font: inherit; color: var(--text); cursor: pointer;
  padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.region-btn:hover { border-color: var(--accent-edge); background: var(--accent-soft); }
.region-btn strong { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.region-btn span { font-size: .82rem; color: var(--dim); }

.map-notes { padding-block: var(--s7) var(--s8); max-width: 860px; }
.map-notes ul { margin: var(--s3) 0 0; padding-inline-start: 1.2em; display: grid; gap: 10px; color: var(--dim); line-height: 1.6; }
.map-notes .map-contact { margin: var(--s4) 0 0; }
.map-notes .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s5); }

@media (max-width: 560px) {
  .map-sky { padding-block: var(--s6) var(--s7); }
  .map-totals { gap: 8px; }
  .map-totals > div { padding: var(--s3) 6px; }
  .map-totals dt { font-size: .7rem; }
  .map-card { padding: var(--s4); }
  .card-flaghead { gap: var(--s3); }
  .flag-lg { width: 56px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .globe-tip { transition: none; }
}

.map-credits { margin: var(--s3) 0 0; font-size: .78rem; color: var(--dim); opacity: .8; }