/* Three Mosques: one-screen map app for Makkah, Madinah and (soon) al-Quds.
   Look: "marble, brass and ink". Day is the white marble of the courtyards, night is the Haram after ʿIshāʾ.
   Brass is the only accent and always marks something you can touch. Category colours are the pigments of
   manuscript illumination. Four faces with fixed jobs: inscription titles, the Arabic of the signs, a book face
   for reading, a bilingual interface face.
   Layout: header bar; below it either the start screen (#home) or the map stage + panel
   (panel at the inline end on desktop, bottom sheet on phones). */
:root {
  /* Surfaces and ink */
  --bg: #F0F1EC; --surface: #FAFAF7; --line: #D3D6CC; --ink: #0E1F18; --muted: #4C5B54;
  --brass: #9A7530; --brass-ink: #765819; --dome: #0F4D38; --on-dome: #F6F2E2;
  --plaque: #103B2C; --plaque-ink: #EAD8A2;
  /* Category pigments (city.json names them c1–c7): malachite, saffron, lapis, manganese, umber, verdigris, vermilion */
  --c1: #1C6C52; --c2: #A57812; --c3: #24477A; --c4: #633B66; --c5: #64502E; --c6: #2A7570; --c7: #A63A27;
  --on-pig: #FAFAF7;
  /* The map as a plan drawing */
  --map-ground: #E9EAE3; --map-mount: #DDD6C3; --map-ridge: #B5A88C; --map-scrub: #DEDFD1; --map-cem: #D0D9CD; --map-wadi: #8BAFC1;
  --map-green: #CEDCC5; --map-orchard: #C4D5BA; --map-plaza: #F3F3EE;
  --map-road: #F8F8F3; --map-road-major: #F1E8CC; --map-road-case: #D1CEC0; --map-walk: #E2DDCC;
  --map-building: #DCDBD0; --map-bld-line: #C9C7B9; --map-mosque: #FAFAF6; --map-wall: #33443C;
  --map-mataf: #FFFFFF; --map-masa: #EEEDE5; --map-kaaba: #121614; --map-gold: #B08A3A; --map-hijr: #F6F6F1;
  --map-rawdah: #3F8B67; --map-dome: #2B7A57; --map-encl: #C9D8CD; --map-wdome: #F1F1EB;
  --map-area: #2A7570; --map-boundary: #9A7530; --map-start: #2E9B5C; --halo: #F3F3EE;
  --map-tree: #9DBB93; --map-hall: #F4F1E6;
  /* Type */
  --f-title: "Marcellus", "Scheherazade New", "Iowan Old Style", Georgia, serif;
  --f-sign: "Scheherazade New", "Noto Naskh Arabic", "Times New Roman", serif;
  --f-read: "Markazi Text", "Iowan Old Style", Georgia, serif;
  --f-ui: "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Edge, depth and motion */
  --hair: color-mix(in srgb, var(--brass) 32%, transparent);
  --etch: 0 0 0 1px var(--hair), inset 0 1px 0 color-mix(in srgb, white 55%, transparent);
  --float: 0 0 0 1px color-mix(in srgb, var(--brass) 34%, transparent), 0 22px 44px -22px rgb(6 18 13 / .42);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --panel-w: 384px; --ts: 1;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #09120F; --surface: #0F1A16; --line: #22322B; --ink: #E9ECE5; --muted: #9CAAA3;
  --brass: #CDA959; --brass-ink: #DABB72; --dome: #1D6A4C; --on-dome: #F6F2E2; --plaque: #0A291F; --plaque-ink: #E3CE8E;
  --c1: #5BBC95; --c2: #DEB24A; --c3: #84A5DA; --c4: #BA8EBE; --c5: #C1A47A; --c6: #62BBB4; --c7: #E3785F;
  --on-pig: #09120F;
  --map-ground: #0B1512; --map-mount: #1C211B; --map-ridge: #3C4135; --map-scrub: #111A15; --map-cem: #16241E; --map-wadi: #2D5166;
  --map-green: #13241B; --map-orchard: #14261C; --map-plaza: #0F1B17;
  --map-road: #182520; --map-road-major: #29291D; --map-road-case: #070D0B; --map-walk: #1B2621;
  --map-building: #13201B; --map-bld-line: #1D2D26; --map-mosque: #0D1814; --map-wall: #C9A655;
  --map-mataf: #1A2822; --map-masa: #13211B; --map-kaaba: #000000; --map-gold: #CDA959; --map-hijr: #1D2B25;
  --map-rawdah: #2A7150; --map-dome: #3C9F71; --map-encl: #16302A; --map-wdome: #1A2722;
  --map-area: #62BBB4; --map-boundary: #CDA959; --map-start: #4DCB86; --halo: #0B1512;
  --map-tree: #24432F; --map-hall: #17241F;
  --etch: 0 0 0 1px var(--hair), inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
  --float: 0 0 0 1px color-mix(in srgb, var(--brass) 30%, transparent), 0 22px 44px -18px rgb(0 0 0 / .7);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #09120F; --surface: #0F1A16; --line: #22322B; --ink: #E9ECE5; --muted: #9CAAA3;
  --brass: #CDA959; --brass-ink: #DABB72; --dome: #1D6A4C; --on-dome: #F6F2E2; --plaque: #0A291F; --plaque-ink: #E3CE8E;
  --c1: #5BBC95; --c2: #DEB24A; --c3: #84A5DA; --c4: #BA8EBE; --c5: #C1A47A; --c6: #62BBB4; --c7: #E3785F;
  --on-pig: #09120F;
  --map-ground: #0B1512; --map-mount: #1C211B; --map-ridge: #3C4135; --map-scrub: #111A15; --map-cem: #16241E; --map-wadi: #2D5166;
  --map-green: #13241B; --map-orchard: #14261C; --map-plaza: #0F1B17;
  --map-road: #182520; --map-road-major: #29291D; --map-road-case: #070D0B; --map-walk: #1B2621;
  --map-building: #13201B; --map-bld-line: #1D2D26; --map-mosque: #0D1814; --map-wall: #C9A655;
  --map-mataf: #1A2822; --map-masa: #13211B; --map-kaaba: #000000; --map-gold: #CDA959; --map-hijr: #1D2B25;
  --map-rawdah: #2A7150; --map-dome: #3C9F71; --map-encl: #16302A; --map-wdome: #1A2722;
  --map-area: #62BBB4; --map-boundary: #CDA959; --map-start: #4DCB86; --halo: #0B1512;
  --map-tree: #24432F; --map-hall: #17241F;
  --etch: 0 0 0 1px var(--hair), inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
  --float: 0 0 0 1px color-mix(in srgb, var(--brass) 30%, transparent), 0 22px 44px -18px rgb(0 0 0 / .7);
  color-scheme: dark;
}
/* Larger text: everything sized in rem grows; marker labels follow --ts. */
:root[data-text="large"] { font-size: 118.75%; --ts: 1.2; --panel-w: 440px; }
/* Scripts with their own reading faces, loaded only when the language is picked. */
:root[lang="ur"] { --f-read: "Noto Nastaliq Urdu", "Markazi Text", serif; }
:root[lang="bn"] { --f-read: "Noto Serif Bengali", "Markazi Text", serif; }

html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-ui); font-size: .9375rem; line-height: 1.5; overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 3000; top: 8px; inset-inline-start: 8px; transform: translateY(-200%); background: var(--plaque); color: var(--plaque-ink); border: 0; border-radius: 2px; padding: 8px 14px; cursor: pointer; }
.skip:focus-visible { transform: none; }
.ic { flex: none; }
.app { height: 100%; display: grid; grid-template-rows: auto 1fr; }
:root[dir="rtl"] .flip { transform: scaleX(-1); display: inline-block; }

/* ---------- Header ---------- */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; padding-block: 8px;
  padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px));
  background: var(--surface); border-bottom: 1px solid var(--hair); position: relative; z-index: 1200; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: none; padding: 2px 0; cursor: pointer; text-align: start; border-radius: 2px; }
.brand .logo { flex: none; width: 34px; height: 34px; }
.brand .words { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.brand .name { font-family: var(--f-title); font-size: 1.32rem; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }
.brand .ar { font-family: var(--f-sign); font-size: 1.02rem; color: var(--brass-ink); white-space: nowrap; }
/* City tabs: text with a brass underline that draws from the middle. */
.tabs { display: flex; gap: 24px; margin-inline: auto; }
.tabs button { position: relative; display: grid; justify-items: center; border: 0; background: none; padding: 5px 0 8px; cursor: pointer; color: var(--muted);
  font-family: var(--f-title); font-size: 1.06rem; line-height: 1.15; transition: color .18s var(--ease); }
.tabs button .ar-name { font-family: var(--f-sign); font-size: .86rem; line-height: 1.25; }
.tabs button .soon { font-family: var(--f-ui); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); line-height: 1.6; }
.tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--brass); transform: scaleX(0); transition: transform .28s var(--ease); }
.tabs button:hover { color: var(--ink); }
.tabs button:hover::after { transform: scaleX(.45); }
.tabs button[aria-current="true"] { color: var(--ink); }
.tabs button[aria-current="true"]::after { transform: scaleX(1); }
.tabs button.is-soon { color: var(--muted); }
:root[lang="ar"] .tabs button .ar-name { display: none; }
.bar-tools { display: flex; align-items: center; gap: 6px; }

/* Pop-up menus: language and display */
.pick { position: relative; flex: none; }
.pick-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 0; border-radius: 2px; background: transparent; box-shadow: var(--etch); cursor: pointer; font-size: .82rem; white-space: nowrap; transition: background .18s var(--ease); }
.pick-btn:hover { background: color-mix(in srgb, var(--brass) 10%, var(--surface)); }
.pick-btn .caret { opacity: .55; transition: transform .2s var(--ease); }
.pick-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.pick-btn .short { display: none; }
.pick-menu { position: absolute; z-index: 10; top: calc(100% + 6px); inset-inline-end: 0; min-width: 190px; max-height: min(70vh, 460px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px; padding: 5px; background: var(--surface); border-radius: 2px; box-shadow: var(--float); }
.pick-menu:not([hidden]) { animation: drop .2s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }
.pick-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: start; border: 0; background: transparent; padding: 9px 11px; border-radius: 1px; cursor: pointer; font-size: .9rem; white-space: nowrap; }
.pick-menu button:hover { background: color-mix(in srgb, var(--brass) 10%, transparent); }
.pick-menu button[aria-pressed="true"] { background: var(--dome); color: var(--on-dome); }
.pick-menu button[lang="ar"], .pick-menu button[dir="rtl"] { font-family: var(--f-sign); font-size: 1.02rem; }
/* Offline status and install, at the foot of the display menu. */
.menu-offline:has(> :not([hidden])) { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.menu-offline p { margin: 0; padding: 6px 11px; font-size: .78rem; line-height: 1.4; color: var(--muted); white-space: normal; max-width: 240px; }
#offline-state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 7px; border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 1.5px var(--brass); }
#offline-state[data-ready="true"]::before { background: var(--brass); }
.pick-menu .draft { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border-radius: 1px; box-shadow: 0 0 0 1px currentColor; opacity: .7; font-family: var(--f-ui); }
#display-menu button { justify-content: flex-start; }
#display-menu button[aria-pressed="true"]::after { content: ""; width: 9px; height: 5px; margin-inline-start: auto; border: solid currentColor; border-width: 0 0 1.6px 1.6px; transform: translateY(-2px) rotate(-45deg); }

/* ---------- Layout ---------- */
.main { position: relative; min-height: 0; display: grid; grid-template-columns: 1fr var(--panel-w); }
.home { display: none; grid-column: 1 / -1; min-height: 0; overflow-y: auto; background: var(--bg); }
.main.home-on .home { display: block; }
.main.home-on > .stage, .main.home-on > .panel { display: none; }
/* Before the app has started: the name and a brass thread, then (if it takes long) a way to try again. */
.boot { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; animation: fade-in .4s var(--ease) .15s both; }
.boot .b-name { font-family: var(--f-title); font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--ink); line-height: 1.1; }
.boot .b-ar { font-family: var(--f-sign); font-size: 1.25rem; color: var(--brass-ink); line-height: 1.4; }
.boot .b-line { position: relative; width: 160px; height: 1px; overflow: hidden; background: var(--hair); margin-top: 6px; }
.boot .b-line::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--brass); animation: sweep 1.3s var(--ease) infinite; }
.boot .b-slow { margin: 6px 0 0; font-size: .8rem; color: var(--muted); animation: fade-in .5s 12s both; }
.boot .b-slow a { color: var(--brass-ink); }
@media (prefers-reduced-motion: reduce) { .boot .b-line::after { animation: none; width: 100%; opacity: .6; } }
/* Entering a city: the mosque's photo grows from its window on the start screen until it fills the screen,
   its name and a brass thread wait over it while the map loads behind, then the photo gives way to the map.
   Opened from the tabs, the photo fades in instead of growing. */
.transit { position: absolute; inset: 0; z-index: 1200; overflow: hidden; background: var(--plaque); }
.transit.leave { pointer-events: none; }
.transit.fade { animation: fade-in .35s var(--ease) both; }
.transit .t-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.transit .t-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgb(4 14 10 / .35), rgb(4 14 10 / .72)); opacity: 0; transition: opacity .6s var(--ease); }
.transit .t-words { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; color: #F6F2E2; text-shadow: 0 1px 12px rgb(0 0 0 / .45); opacity: 0; transform: translateY(8px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.transit .t-name { font-family: var(--f-title); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
:root[dir="rtl"] .transit .t-name { font-family: var(--f-sign); font-weight: 700; line-height: 1.4; }
.transit .t-ar { font-family: var(--f-sign); font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: #EAD8A2; line-height: 1.4; }
.transit .t-city { font-family: var(--f-read); font-size: 1.15rem; opacity: .9; }
.transit .t-line { position: relative; width: 160px; height: 1px; margin-top: 10px; overflow: hidden; background: rgb(234 216 162 / .35); }
.transit .t-line::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: #EAD8A2; animation: sweep 1.3s var(--ease) infinite; }
.transit .t-credit { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: .64rem; color: rgb(255 255 255 / .8); text-shadow: 0 1px 2px rgb(0 0 0 / .7); opacity: 0; transition: opacity .6s; }
.transit.show .t-shade, .transit.show .t-credit { opacity: 1; }
.transit.show .t-words { opacity: 1; transform: none; }
.transit.leave { transition: opacity .6s var(--ease); opacity: 0; }
.transit.leave .t-img { transition: transform .6s var(--ease); transform: scale(1.04); }
.main.entering > .panel { animation: panel-in .6s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateX(28px); } }
:root[dir="rtl"] .main.entering > .panel { animation-name: panel-in-rtl; }
@keyframes panel-in-rtl { from { opacity: 0; transform: translateX(-28px); } }
@media (max-width: 760px) { .main.entering > .panel, :root[dir="rtl"] .main.entering > .panel { animation-name: sheet-in; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(40px); } }
@media (prefers-reduced-motion: reduce) {
  .transit .t-line::after { animation: none; width: 100%; opacity: .6; }
  .transit.leave .t-img { transform: none; }
  .main.entering > .panel { animation: fade-in .3s both; }
}
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Start screen: the hadith, then three arched windows ---------- */
.home-in { display: grid; justify-items: center; gap: clamp(26px, 4vh, 40px); padding-block: clamp(30px, 6vh, 64px) 40px;
  padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); text-align: center; }
.hadith { margin: 0; display: grid; gap: 10px; max-width: 780px; }
.hadith blockquote { margin: 0; display: grid; gap: 10px; }
.hadith p { margin: 0; text-wrap: balance; }
.hadith .ar { font-family: var(--f-sign); font-size: clamp(1.45rem, 3.3vw, 2.3rem); line-height: 1.85; color: var(--ink); }
.hadith .tr { font-family: var(--f-read); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--muted); line-height: 1.1; }
.hadith figcaption { font-size: .74rem; letter-spacing: .1em; color: var(--brass-ink); }
.cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 38px); width: 100%; max-width: 1000px; }
.city-card { position: relative; display: grid; justify-items: center; gap: 4px; align-content: start; }
.city-card .card-hit { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 2px; }
.city-card .card-hit:focus-visible { outline-offset: 6px; }
.city-card h3 { margin: 12px 0 0; font-family: var(--f-title); font-weight: 400; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.05; }
.city-card .ar { font-family: var(--f-sign); font-size: 1.12rem; color: var(--brass-ink); line-height: 1.3; }
.city-card .city { font-size: .92rem; color: var(--ink); margin-top: 2px; }
.city-card .meta { font-size: .74rem; letter-spacing: .04em; color: var(--muted); }
.city-card .sub { font-family: var(--f-read); font-size: 1.05rem; line-height: 1.1; color: var(--muted); max-width: 30ch; margin-top: 4px; }
/* Photo credit inside each window, over a soft shade at the foot of the picture. */
.city-card .arch .pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .5)); }
.arch-credit { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 9px; text-align: center; font-size: .64rem; line-height: 1.3;
  color: rgb(255 255 255 / .92); text-shadow: 0 1px 2px rgb(0 0 0 / .7); }
.arch-credit a { color: inherit; text-decoration: none; }
.arch-credit a:hover, .arch-credit a:focus-visible { text-decoration: underline; }
.city-card .arch { width: 100%; aspect-ratio: 3 / 3.7; }
/* Above the card's click area so the credit links work, but clicks on the picture itself pass through to it. */
.city-card .arch .pic { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: transform .6s var(--ease); }
.city-card .arch-credit a { pointer-events: auto; }
.city-card:hover .arch .pic { transform: scale(1.035); }
.city-card.soon .arch img { filter: grayscale(.7) brightness(.82); }
.city-card .veil { position: absolute; inset: auto 0 20px; text-align: center; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #F2E4B8; }
.city-card.soon h3 { color: var(--muted); }
/* The title: inscription capitals, large, with a brass rule and a diamond, like a carved lintel. */
.opening { display: grid; justify-items: center; gap: 14px; max-width: 900px; }
.opening .tagline { margin: 0; font-family: var(--f-title); font-weight: 400; font-size: clamp(2.3rem, 6.2vw, 4.4rem); line-height: 1.04; letter-spacing: .015em; color: var(--ink); text-wrap: balance; }
:root[dir="rtl"] .opening .tagline { font-family: var(--f-sign); font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.opening .tagline span { display: block; }
.opening .rule { display: flex; align-items: center; gap: 10px; width: min(260px, 60%); }
.opening .rule::before, .opening .rule::after { content: ""; flex: 1; height: 1px; background: var(--brass); }
.opening .rule i { width: 7px; height: 7px; background: var(--brass); transform: rotate(45deg); }
.opening p { margin: 0; max-width: 46ch; font-family: var(--f-read); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.1; color: var(--muted); text-wrap: balance; }
.hadith { padding-top: 6px; }
.hadith .ar { font-size: clamp(1.25rem, 2.6vw, 1.8rem) !important; }
.home-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; color: var(--muted); font-size: .78rem; }
.home-foot span { display: inline-flex; align-items: center; gap: 8px; }
.home-links { margin: -18px 0 0; font-size: .78rem; }
.home-links a { color: var(--muted); text-underline-offset: 3px; }
.home-foot span::before { content: ""; width: 5px; height: 5px; background: var(--brass); transform: rotate(45deg); }

/* The arch: the pointed arch of the logo, for photos and the three mosques only. */
.arch { position: relative; display: block; max-width: 100%; }
.arch img { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: var(--arch-mask) center / 100% 100% no-repeat; mask: var(--arch-mask) center / 100% 100% no-repeat; }
.arch .arch-line { position: absolute; left: -5px; top: -5px; width: calc(100% + 10px); height: calc(100% + 5px); overflow: visible; pointer-events: none; }
.arch .arch-line path { fill: none; stroke: var(--brass); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* Loading: a window waits as a softly lit arch, and its photo fades in when it has arrived. */
.arch img { transition: opacity .4s var(--ease); }
.arch.is-loading img { opacity: 0; }
.arch.is-loading::before, .arch.is-failed::before { content: ""; position: absolute; inset: 0;
  -webkit-mask: var(--arch-mask) center / 100% 100% no-repeat; mask: var(--arch-mask) center / 100% 100% no-repeat;
  background: color-mix(in srgb, var(--line) 55%, var(--surface)); }
.arch.is-loading::before { background: linear-gradient(100deg, color-mix(in srgb, var(--line) 55%, var(--surface)) 30%, color-mix(in srgb, var(--brass) 14%, var(--surface)) 50%, color-mix(in srgb, var(--line) 55%, var(--surface)) 70%) 0 0 / 260% 100%;
  animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .arch.is-loading::before { animation: none; } }

:root { --arch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V38C0 19 27 6 50 0C73 6 100 19 100 38V100Z'/%3E%3C/svg%3E"); }

/* ---------- Map stage ---------- */
.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--map-ground); }
#map { position: absolute; inset: 0; background: var(--map-ground); font-family: inherit; direction: ltr; }
.status { position: absolute; z-index: 600; top: 62px; inset-inline-start: 50%; transform: translateX(-50%); width: max-content; max-width: min(420px, calc(100% - 24px)); text-align: center;
  background: var(--surface); border-radius: 2px; box-shadow: var(--etch); padding: 6px 12px; font-size: .78rem; color: var(--muted); }
:root[dir="rtl"] .status { transform: translateX(50%); }
.status[data-busy="loading"] { display: inline-flex; align-items: center; gap: 8px; }
.status[data-busy="loading"]::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--brass) 28%, transparent); border-top-color: var(--brass); animation: spin .8s linear infinite; }
/* While the map fetches its drawing or satellite tiles: a brass thread runs along the top of the map. */
.stage::after { content: ""; position: absolute; z-index: 650; top: 0; left: 0; width: 40%; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: 0; transition: opacity .25s; }
.stage.busy::after { opacity: 1; animation: sweep 1.3s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .stage.busy::after { animation: none; width: 100%; opacity: .6; } .status[data-busy="loading"]::before { animation-duration: 2.4s; } }
/* The language button while a language pack arrives. */
.pick-btn[aria-busy="true"] .caret { opacity: 0; }
.pick-btn[aria-busy="true"] { position: relative; }
.pick-btn[aria-busy="true"]::after { content: ""; position: absolute; inset-inline-end: 10px; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--brass) 28%, transparent); border-top-color: var(--brass); animation: spin .8s linear infinite; }
/* The zoom path: the city's views from widest to closest, then its central place. */
.zoompath { position: absolute; z-index: 500; top: 14px; inset-inline-start: max(14px, env(safe-area-inset-left, 0px)); max-width: calc(100% - 84px);
  display: flex; align-items: center; gap: 1px; padding: 4px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  background: var(--surface); border-radius: 2px; box-shadow: var(--etch); font-size: .8rem; }
.zoompath::-webkit-scrollbar { display: none; }
.zoompath:empty { display: none; }
.zoompath button { flex: none; border: 0; background: none; color: var(--muted); padding: 5px 9px; border-radius: 1px; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); }
.zoompath button:hover { color: var(--ink); background: color-mix(in srgb, var(--brass) 10%, transparent); }
.zoompath button[aria-current="true"] { color: var(--on-dome); background: var(--dome); }
.zoompath .sep { flex: none; color: var(--brass); font-size: .72rem; }
:root[dir="rtl"] .zoompath .sep { transform: scaleX(-1); }
.tools { position: absolute; z-index: 500; bottom: 14px; inset-inline-end: max(14px, env(safe-area-inset-right, 0px)); display: grid; gap: 8px; justify-items: end; }
.stack { display: grid; background: var(--surface); border-radius: 2px; box-shadow: var(--etch); }
.stack button { width: 38px; height: 38px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; transition: background .18s var(--ease); }
.stack button + button { border-top: 1px solid var(--hair); }
.stack button:hover { background: color-mix(in srgb, var(--brass) 10%, transparent); }
.stack button:active { transform: translateY(1px); }
#sat-btn[aria-pressed="true"] { background: var(--dome); color: var(--on-dome); }

/* MapLibre controls in the page's own style; the cartouche holds the compass, the qibla and the scale. */
.maplibregl-map { font: inherit; }
.maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
.maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
.maplibregl-ctrl-bottom-left { margin-bottom: 10px; margin-left: max(10px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
:root[dir="rtl"] .maplibregl-ctrl-bottom-left { left: auto; right: 0; margin-left: 0; margin-right: max(10px, env(safe-area-inset-right, 0px)); align-items: flex-end; }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0; float: none; }
.cartouche { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; background: color-mix(in srgb, var(--surface) 90%, transparent); border-radius: 2px; box-shadow: var(--etch); font-size: .68rem; color: var(--muted); pointer-events: auto; }
:root[dir="rtl"] .cartouche { padding: 5px 5px 5px 10px; }
.cartouche svg { width: 38px; height: 38px; color: var(--ink); }
.cartouche .qibla { transition: transform .3s var(--ease); }
.cartouche .scale { display: grid; gap: 3px; }
.cartouche .sbar { height: 5px; border: 1px solid var(--ink); border-top: 0; }
.cartouche b { font-weight: 500; color: var(--ink); }
.maplibregl-ctrl.maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--muted); font-size: .66rem; border-radius: 2px; padding: 1px 6px; }
.maplibregl-ctrl-attrib a { color: var(--muted); text-decoration: underline; }
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 22px; padding: 2px 26px 2px 6px; border-radius: 2px; }
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { padding: 0; }
.maplibregl-ctrl-attrib-button { background-color: color-mix(in srgb, var(--surface) 85%, transparent); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .maplibregl-ctrl-attrib-button { filter: invert(1); } }

/* Tooltip: a small sign with the Arabic first */
.tip { position: absolute; z-index: 700; pointer-events: none; background: var(--plaque); color: var(--plaque-ink); padding: 7px 13px 8px; font-size: .78rem; line-height: 1.3; text-align: center;
  transform: translate(-50%, calc(-100% - 18px)); white-space: nowrap; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .22));
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.tip:not([hidden]) { animation: tip-in .2s var(--ease); }
@keyframes tip-in { from { opacity: 0; transform: translate(-50%, calc(-100% - 14px)); } }
.tip .sgn { display: block; font-family: var(--f-sign); font-size: 1.12rem; line-height: 1.35; }
.tip .tr { display: block; font-size: .74rem; opacity: .85; }
.tip .list { display: block; font-size: .76rem; line-height: 1.5; opacity: .9; margin-top: 2px; }

/* ---------- Markers (HTML over the map; the shapes are small SVGs) ---------- */
.mkicon { width: 0; height: 0; background: none; border: 0; }
.mkicon:hover, .mkicon:focus-visible { z-index: 50 !important; }
.mkicon:focus { outline: none; }
.mk, .mkc { position: relative; width: 0; height: 0; cursor: pointer; }
.mk-hit { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; }
.mk-svg { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; overflow: visible; transition: transform .18s var(--ease); }
.mk-svg .mk-shape, .mk-svg .cl-shape, .mk-svg .back { fill: var(--cat); stroke: var(--surface); stroke-width: 2; }
.mk-svg .back { opacity: .45; }
.mk-svg .gl { fill: none; stroke: var(--on-pig); stroke-linecap: round; stroke-linejoin: round; }
.mk-svg .rule { fill: none; stroke: color-mix(in srgb, var(--on-pig) 45%, transparent); stroke-width: .7; }
.mk-svg .num, .mk-svg .count { fill: var(--on-pig); font-family: var(--f-ui); font-weight: 500; font-variant-numeric: tabular-nums; }
.mk-svg .num { font-size: 10.5px; } .mk-svg .count { font-size: 11.5px; }
.mk-svg .halo { fill: none; stroke: var(--brass); stroke-width: 1.6; opacity: 0; transform-origin: center; transform-box: fill-box; }
.mk:hover .mk-svg, .mkc:hover .mk-svg, .mkicon:focus-visible .mk-svg { transform: scale(1.14); }
.mkicon:focus-visible .mk-svg .halo { opacity: .7; }
.mk.sel .mk-svg { transform: scale(1.12); }
.mk.sel .mk-svg .mk-shape { stroke: var(--brass); }
.mk.sel .mk-svg .halo { opacity: 1; animation: breathe 1.3s var(--ease) infinite alternate; }
@keyframes breathe { from { opacity: .35; transform: scale(.92); } to { opacity: 1; transform: scale(1.05); } }
/* Labels are placed by script (layoutLabels) on the side where they fit; hidden ones stay measurable. */
.mk-label { position: absolute; top: 0; left: 0; white-space: nowrap; font-family: var(--f-ui); font-size: calc(12.5px * var(--ts)); line-height: 1.25; font-weight: 500; color: var(--ink); pointer-events: none; opacity: 0; transition: opacity .15s var(--ease);
  text-shadow: -1.5px -1.5px 0 var(--halo), 1.5px -1.5px 0 var(--halo), -1.5px 1.5px 0 var(--halo), 1.5px 1.5px 0 var(--halo), 0 0 3px var(--halo), 0 0 3px var(--halo); }
.mk.big .mk-label { font-size: calc(13.5px * var(--ts)); }
.mk.sel .mk-label { font-family: var(--f-title); font-weight: 400; font-size: calc(15px * var(--ts)); }
.mk-label[dir="rtl"] { font-size: calc(13.5px * var(--ts)); }
.mk.sel .mk-label[dir="rtl"] { font-family: var(--f-sign); font-weight: 700; font-size: calc(16px * var(--ts)); }
.mk.lbl .mk-label, .mkc.lbl .mk-label { opacity: 1; }
.mk-approx { font-weight: 400; color: var(--muted); }
.pk { pointer-events: none; }

/* ---------- Panel ---------- */
.panel { min-height: 0; display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--hair); }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brass) 45%, transparent) transparent; }
.grip { display: none; }
.pn { padding-block: 18px 0; padding-inline: 22px; display: flex; flex-direction: column; gap: 14px; }
.pn h2 { margin: 0; font-family: var(--f-title); font-weight: 400; font-size: 1.85rem; line-height: 1.08; text-wrap: balance; }
:root[dir="rtl"] .pn h2 { font-family: var(--f-sign); font-weight: 700; font-size: 1.75rem; line-height: 1.4; }
.pn-sub { margin: 0; color: var(--muted); font-size: .84rem; }
.hint { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.pn.settle > * { animation: settle .32s var(--ease) both; }
.pn.settle > :nth-child(2) { animation-delay: .05s; } .pn.settle > :nth-child(3) { animation-delay: .1s; }
.pn.settle > :nth-child(4) { animation-delay: .15s; } .pn.settle > :nth-child(n+5) { animation-delay: .2s; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }
/* Filters: the categories, at the top of the places index */
.filters { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.chipbtn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 3px 0; font-size: .8rem; cursor: pointer; white-space: nowrap; color: var(--ink); transition: color .18s var(--ease); }
.chipbtn .sw { width: 18px; height: 18px; flex: none; }
.chipbtn .sw polygon { fill: var(--cat); stroke: none; transition: fill .18s var(--ease); }
.chipbtn .sw .gl { stroke: var(--on-pig); }
.chipbtn[aria-pressed="false"] { color: var(--muted); }
.chipbtn[aria-pressed="false"] .sw polygon { fill: transparent; stroke: var(--cat); stroke-width: 1.4; }
.chipbtn[aria-pressed="false"] .sw .gl { stroke: var(--cat); }
.chipbtn:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.search { display: flex; align-items: center; gap: 8px; padding: 0 2px; border-bottom: 1px solid var(--hair); transition: border-color .18s var(--ease); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 0; font: inherit; font-size: .92rem; color: inherit; outline: none; }
.search input::placeholder { color: var(--muted); }
.search:focus-within { border-bottom-color: var(--brass); }
.search svg { color: var(--muted); }
/* The places index: grouped like a printed guide, with dotted leaders to the Arabic name */
.group h3 { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; font-family: var(--f-read); font-weight: 500; font-variant: small-caps; text-transform: lowercase; letter-spacing: .07em; font-size: 1.08rem; color: var(--brass-ink); }
:root[dir="rtl"] .group h3 { text-transform: none; letter-spacing: 0; font-family: var(--f-ui); font-size: .9rem; }
.group h3 .n { margin-inline-start: auto; font-family: var(--f-ui); font-variant: normal; font-size: .72rem; letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.group ul { list-style: none; margin: 0; padding: 0; }
.li-btn { width: 100%; display: flex; align-items: baseline; gap: 8px; text-align: start; border: 0; background: transparent; padding: 6px 0; cursor: pointer; font-family: var(--f-read); font-size: 1.12rem; line-height: 1.3; }
.li-name { min-width: 0; }
.li-name .ax { font-family: var(--f-ui); font-size: .76rem; color: var(--muted); margin-inline-start: 4px; font-variant-numeric: tabular-nums; }
.li-btn .lead { flex: 1 1 12px; min-width: 12px; border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 24%, transparent); transform: translateY(-5px); transition: border-color .18s var(--ease); }
.li-ar { font-family: var(--f-sign); font-size: 1.1rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; direction: rtl; transition: color .18s var(--ease); }
.li-tr { font-family: var(--f-ui); font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; direction: ltr; }
.li-btn:hover .lead { border-bottom-color: var(--brass); }
.li-btn:hover .li-ar, .li-btn:hover .li-tr { color: var(--brass-ink); }
.li-btn:hover .li-name > span:first-child { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.note { margin: 8px 0 0; font-family: var(--f-read); font-size: 1rem; line-height: 1.4; color: var(--muted); border-top: 1px solid var(--hair); padding-block: 12px 22px; display: flex; flex-direction: column; gap: 8px; }
.note p { margin: 0; }
.key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--f-ui); font-size: .76rem; }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.key i { display: inline-block; width: 22px; height: 0; border-top: 2px dashed var(--map-boundary); }
.key i.st { border-top-color: var(--map-start); }
.key i.ml { border-top: 5px solid var(--map-start); opacity: .75; width: 14px; }
.empty { color: var(--muted); font-size: .9rem; margin: 0; }
/* A place */
.pn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 0; border-radius: 2px; background: transparent; box-shadow: var(--etch); font-size: .82rem; cursor: pointer; transition: background .18s var(--ease); }
.btn:hover { background: color-mix(in srgb, var(--brass) 10%, transparent); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--dome); color: var(--on-dome); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass) 50%, transparent); height: 38px; padding: 0 15px; }
.btn.primary:hover { background: color-mix(in srgb, var(--dome) 86%, var(--brass)); }
.chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--f-read); font-variant: small-caps; text-transform: lowercase; letter-spacing: .07em; font-size: 1.05rem; color: var(--brass-ink); }
:root[dir="rtl"] .chip { text-transform: none; letter-spacing: 0; font-family: var(--f-ui); font-size: .9rem; }
.chip .sw { width: 20px; height: 20px; flex: none; }
.chip .sw polygon { fill: var(--cat); } .chip .sw .gl { stroke: var(--on-pig); }
.photo { margin: 0; display: grid; gap: 6px; justify-items: center; text-align: center; }
.photo .arch { aspect-ratio: 4 / 3.15; max-height: 300px; width: min(100%, 381px); }
.photo figcaption { font-size: .66rem; line-height: 1.45; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.photo .pnote { font-family: var(--f-read); color: var(--ink); font-size: .98rem; }
.photo figcaption a { color: inherit; text-decoration: none; }
.photo figcaption a:hover, .photo figcaption a:focus-visible { text-decoration: underline; }
/* The sign: cut corners and a double rule, like the gate plaques */
.plaque { position: relative; padding: 15px 16px 12px; text-align: center; background: var(--plaque); color: var(--plaque-ink);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.plaque::before { content: ""; position: absolute; inset: 4px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--plaque-ink) 42%, transparent);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.plaque .ar { font-family: var(--f-sign); font-size: 1.9rem; line-height: 1.5; font-weight: 700; direction: rtl; }
.plaque .num { display: inline-block; margin-inline-start: 10px; min-width: 1.8em; padding: 0 .35em; border: 1px solid currentColor; border-radius: 1px; font-family: var(--f-ui); font-size: 1rem; font-weight: 500; line-height: 1.55; vertical-align: .35em; font-variant-numeric: tabular-nums; }
.plaque .tr { font-size: .8rem; font-weight: 300; opacity: .85; margin-top: 2px; }
.plaque .cap { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; opacity: .72; margin-bottom: 4px; }
:root[dir="rtl"] .plaque .cap { letter-spacing: 0; font-size: .74rem; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.facts li { font-size: .78rem; padding: 3px 9px; border-radius: 1px; box-shadow: var(--etch); }
.desc { margin: 0; font-family: var(--f-read); font-size: 1.18rem; line-height: 1.1; max-width: 62ch; }
:root[dir="rtl"] .desc { font-size: 1.22rem; line-height: 1.85; }
:root[lang="ur"] .desc { line-height: 2.2; }
.flag { margin: 0; font-family: var(--f-read); font-size: 1rem; line-height: 1.4; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.flag > span:first-child { font-family: var(--f-ui); color: var(--brass-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Previous and next: page-turn links at the foot of the panel */
.turn { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 4px; padding-block: 12px 18px; border-top: 1px solid var(--hair); }
.turn button { display: grid; gap: 1px; border: 0; background: none; padding: 2px 0; cursor: pointer; text-align: start; color: var(--muted); font-size: .72rem; min-width: 0; }
.turn button:last-child { text-align: end; }
.turn button b { font-family: var(--f-title); font-weight: 400; font-size: 1rem; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
:root[dir="rtl"] .turn button b { font-family: var(--f-sign); font-weight: 700; }
.turn button:hover b { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.turn .dot { width: 5px; height: 5px; background: var(--brass); transform: rotate(45deg); }

@media (max-width: 1000px) and (min-width: 761px) {
  .cities { gap: 18px; }
  .tabs { gap: 18px; }
}
@media (max-width: 760px) {
  /* The map fills the screen; the panel is a bottom sheet on top of it (heights set by script in --sheet-h). */
  .main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); position: relative; }
  .panel { position: absolute; z-index: 1100; left: 0; right: 0; bottom: 0; height: var(--sheet-h, 132px); border-inline-start: 0;
    border-radius: 14px 14px 0 0; box-shadow: 0 -1px 0 var(--hair), 0 -18px 40px -20px rgb(0 0 0 / .4); transition: height .42s var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .panel.dragging { transition: none; user-select: none; }
  .grip { display: block; flex: none; width: 100%; height: 22px; border: 0; padding: 0; background: transparent; cursor: grab; touch-action: none; border-radius: 14px 14px 0 0; }
  .grip span { display: block; width: 36px; height: 3px; margin: 0 auto; background: var(--brass); opacity: .65; }
  .grip:focus-visible { outline-offset: -4px; }
  [data-drag] { touch-action: none; }
  /* The map buttons ride on top of the sheet. When the sheet leaves no room for them, they fade out
     rather than slide under it (set by applySheet). */
  .tools { bottom: calc(var(--sheet-h, 132px) + 10px); transition: bottom .42s var(--ease), opacity .2s, visibility .2s;
    grid-template-columns: auto auto; align-items: end; }
  /* A compact 2 × 2 block: location and layers on top of each other, + and − beside them. */
  .tools > .stack:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tools > .stack:nth-child(2) { grid-column: 1; grid-row: 2; }
  .tools > .stack:last-child { grid-column: 2; grid-row: 1 / span 2; }
  .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { max-width: calc(100vw - 140px); }
  .maplibregl-ctrl-bottom-left { bottom: var(--sheet-h, 132px); transition: bottom .42s var(--ease), opacity .2s, visibility .2s; }
  .main.tucked .tools, .main.tucked .maplibregl-ctrl-bottom-left { opacity: 0; visibility: hidden; }
  .main:has(.panel.dragging) .tools, .main:has(.panel.dragging) .maplibregl-ctrl-bottom-left { transition: none; }
  .pn { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); padding-block: 0; gap: 12px; }
  .pn h2 { font-size: 1.55rem; }
  .photo .arch { max-height: 190px; width: min(100%, 241px); }
  .chipbtn { min-height: 32px; }
  .maplibregl-ctrl.maplibregl-ctrl-attrib { max-width: 60vw; }
  /* Two rows: brand, language and display; then the city tabs. */
  .bar { gap: 4px 8px; padding-block: 8px 0; }
  .brand { flex: 1 1 auto; order: -2; }
  .brand .logo { width: 30px; height: 30px; }
  .brand .name { font-size: 1.12rem; overflow: hidden; text-overflow: ellipsis; }
  .brand .words { overflow: hidden; }
  .brand .ar { display: none; }
  .bar-tools { order: -1; }
  .pick-btn { height: 32px; padding: 0 9px; gap: 5px; }
  .pick-btn .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pick-btn .short { display: inline; }
  #display-btn .caret { display: none; }
  .tabs { flex-basis: 100%; order: 1; margin-inline: 0; gap: 20px; }
  .tabs button { font-size: 1rem; padding-bottom: 7px; }
  .tabs button .ar-name, .tabs button .soon { display: none; }
  .cities { grid-template-columns: 1fr; max-width: 300px; }
  .zoompath { max-width: calc(100% - 28px); }
}
/* Very narrow phones: the name gives way first. */
@media (max-width: 360px) {
  .brand .name { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* "A new version is available" */
.update { position: fixed; z-index: 2000; bottom: max(18px, env(safe-area-inset-bottom, 0px)); inset-inline-start: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 16px; max-width: calc(100% - 24px);
  background: var(--plaque); color: var(--plaque-ink); border-radius: 2px; box-shadow: var(--etch); font-size: .88rem; }
:root[dir="rtl"] .update { transform: translateX(50%); padding: 10px 16px 10px 10px; }
.update button { border: 0; border-radius: 1px; padding: 7px 12px; cursor: pointer; font: inherit; font-weight: 500; background: var(--brass); color: var(--brass-ink); }

/* My location: the dot, the button while it searches, distance lines and "nearest gate". */
.me-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--c3); box-shadow: 0 0 0 3px #fff, 0 1px 6px rgba(0, 0, 0, .35); pointer-events: none; }
.me-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c3); animation: me-pulse 2.4s var(--ease) infinite; }
@keyframes me-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
#me-btn[data-state="on"] { color: var(--c3); }
#me-btn[data-state="on"] .me-core { fill: currentColor; }
#me-btn[data-state="wait"] .me-core { fill: currentColor; animation: me-blink 1s steps(2) infinite; }
@keyframes me-blink { 50% { opacity: .2; } }
.arrow { display: inline-block; width: 1.1em; text-align: center; font-weight: 600; color: var(--c3); }
.from-me { color: var(--ink); }
.near { display: grid; gap: 6px; margin: 4px 0 10px; }
.near-btn { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; text-align: start; width: 100%; padding: 9px 12px; cursor: pointer;
  border: 0; border-radius: 2px; background: color-mix(in srgb, var(--c3) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--c3); color: var(--ink); font: inherit; }
:root[dir="rtl"] .near-btn { box-shadow: inset -3px 0 0 var(--c3); }
.near-btn:hover { background: color-mix(in srgb, var(--c3) 15%, var(--surface)); }
.near-l { grid-column: 1 / -1; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.near-btn b { font-weight: 500; }
.near-d { font-size: .85rem; color: var(--muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .me-dot::after, #me-btn[data-state="wait"] .me-core { animation: none; } }

/* Sharing and the meeting point */
.actions .btn .ic { margin-inline-end: 6px; vertical-align: -2px; }
.actions.minor { margin-top: 6px; }
.actions.minor .btn { font-size: .82rem; }
.share-alt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.share-alt .btn { text-decoration: none; }
.pin-row { margin: 2px 0 6px; }
.pin-row .btn .ic { margin-inline-end: 6px; vertical-align: -2px; color: var(--brass); }
.pin-row .hint { margin-top: 6px; }
.pin-name { display: grid; gap: 4px; margin: 10px 0 4px; font-size: .78rem; color: var(--muted); }
.pin-name input { font: inherit; font-size: .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 8px 10px; }
.pin-name input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.coords { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; margin: 4px 0; }
.pin-mk { width: 30px; height: 38px; padding: 0; border: 0; background: none; cursor: grab; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.pin-mk svg { width: 100%; height: 100%; display: block; }
.pin-mk path { fill: var(--brass); stroke: #fff; stroke-width: 1.6; }
.pin-mk circle { fill: #fff; }
.pin-mk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Privacy page (#privacy), shown in place of the start screen */
.privacy { justify-items: start; text-align: start; max-width: 680px; margin-inline: auto; padding-inline: 20px; gap: 14px; }
.privacy h1 { font-family: var(--f-title); font-weight: 400; font-size: clamp(2rem, 5vw, 2.8rem); margin: 10px 0 0; }
.privacy .lead { font-size: 1.12rem; margin: 0; }
.privacy section h2 { font-family: var(--f-title); font-weight: 400; font-size: 1.25rem; margin: 10px 0 4px; color: var(--brass-ink); }
.privacy section p { margin: 0; line-height: 1.6; }
.privacy .updated { color: var(--muted); font-size: .82rem; margin-top: 14px; }
.privacy section, .privacy .lead { width: 100%; }

/* Sources under a description */
.sources { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--muted); }
.sources > span:first-child { font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; color: var(--brass-ink); margin-inline-end: 4px; }
:root[dir="rtl"] .sources > span:first-child { font-variant: normal; text-transform: none; letter-spacing: 0; }
.sources a { color: inherit; text-underline-offset: 2px; }