/* 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; }
.city-pick { display: none; } /* phones only, see below */
.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); }
.city-card .c-credit, .city-card .go { display: none; }
/* 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: stretch; padding: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  background: var(--surface); border-radius: 2px; box-shadow: var(--etch); font-size: .8rem; }
.zoompath .zp-ic { flex: none; display: grid; place-items: center; width: 32px; color: var(--brass-ink); border-inline-end: 1px solid var(--line); }
.zoompath::-webkit-scrollbar { display: none; }
.zoompath:empty { display: none; }
.zoompath button { flex: none; border: 0; background: none; color: var(--muted); padding: 9px 11px; border-radius: 0; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); }
.zoompath button + button { border-inline-start: 1px solid var(--line); }
.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); }
.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; min-width: 24px; min-height: 24px; } /* folded: as wide as its (i), so it stays on screen in right-to-left */
.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); }
/* Searching: nothing between the field and the matches. */
.pn.searching > :not(.pn-top):not(.search):not(#list-body) { display: none; }
/* A place's photo shown large (openViewer in app.js). */
.viewer { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #050806; color: #EDEFEA;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.viewer[hidden] { display: none; }
.viewer .v-top { display: flex; justify-content: flex-end; padding: 12px; }
.viewer .v-top .btn { color: #fff; background: rgb(255 255 255 / .12); box-shadow: none; }
.viewer img { width: 100%; height: 100%; object-fit: contain; }
.viewer .v-cap { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px 16px 18px; font-size: .78rem; color: #C9CEC6; }
.viewer .v-cap p { margin: 0; font-family: var(--f-read); font-size: 1.05rem; color: #EDEFEA; max-width: 60ch; }
.viewer a { color: #E3CE8E; }
/* Links that leave the app say so. */
.pn a[target="_blank"]:not(.arch)::after, .viewer a[target="_blank"]::after { content: "\2009\2197"; }

/* The Kaaba seen from above, with its parts numbered (diagramHTML in app.js). */
.diagram { margin: 0; display: grid; gap: 8px; }
.diagram figcaption { display: grid; gap: 2px; }
.diagram figcaption b { font-family: var(--f-title); font-weight: 400; font-size: 1.15rem; }
:root[dir="rtl"] .diagram figcaption b { font-family: var(--f-sign); font-weight: 700; }
.diagram figcaption span { font-size: .8rem; color: var(--muted); }
.diagram svg { width: 100%; max-width: 380px; height: auto; justify-self: center; overflow: visible; }
.dg-kaaba { fill: var(--map-kaaba); stroke: var(--map-gold); stroke-width: 3; }
.dg-base { fill: none; stroke: var(--map-gold); stroke-width: 1; stroke-dasharray: 3 3; }
.dg-hijr { fill: none; stroke: var(--brass); stroke-width: 3; }
.dg-door { stroke: var(--map-gold); stroke-width: 6; }
.dg-name { fill: var(--plaque-ink); font: 700 22px var(--f-sign); }
.dg-pt { cursor: pointer; }
.dg-pt polygon { fill: var(--c2); stroke: var(--surface); stroke-width: 2; transition: transform .2s var(--ease); transform-box: fill-box; transform-origin: center; }
.dg-pt text { fill: var(--on-pig); font: 500 11px var(--f-ui); pointer-events: none; }
.dg-pt:hover polygon, .dg-pt:focus-visible polygon { transform: scale(1.15); }
.dg-pt.on polygon { fill: var(--plaque); stroke: var(--plaque-ink); transform: scale(1.3); }
.dg-pt.on text { fill: var(--plaque-ink); }
.dg-pt:focus { outline: none; }
.dg-pt:focus-visible polygon { stroke: var(--ink); }
.dg-list { margin: 0; padding: 0; list-style: none; counter-reset: dg; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 14px; }
.dg-list li { counter-increment: dg; }
.dg-list button { display: flex; gap: 8px; align-items: baseline; width: 100%; border: 0; background: none; padding: 5px 0; text-align: start; cursor: pointer; font: inherit; font-size: .86rem; color: var(--ink); }
.dg-list button::before { content: counter(dg); flex: none; min-width: 18px; color: var(--brass-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.dg-list button:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
/* The Kaaba's marker shows how many parts it holds until the map is close enough to show them. */
.mk-count { display: none; position: absolute; top: -17px; inset-inline-start: 8px; min-width: 19px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--ink); color: var(--surface); font: 500 10.5px/17px var(--f-ui); text-align: center; pointer-events: none; }
.mk.folded .mk-count { display: block; }

/* Keyboard hints (/ for search, ← → for previous and next): only where there is a keyboard and a mouse. */
.kbd { display: none; font: 500 .68rem/1 var(--f-ui); color: var(--muted); padding: 3px 5px; min-width: 18px; text-align: center; border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -1px 0 var(--line); background: var(--surface); }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .kbd { display: inline-block; }
  .search input:focus ~ .kbd, .search input:not(:placeholder-shown) ~ .kbd { display: none; }
  .turn .kbd { margin-inline: 2px; vertical-align: 1px; }
}
/* 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); }
  /* The credits' (i) sits above the compass and scale. */
  .maplibregl-ctrl-bottom-left { flex-direction: column; }
  .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; }
  /* One row: the logo and the city (a button with a menu), then language and display. The city tabs give way
     to save height for the map; on the start screen the brand's name shows instead of the city. */
  .bar { gap: 4px 8px; padding-block: 8px; }
  .app:not(.home-on) .brand { flex: none; }
  .app:not(.home-on) .brand .words { display: none; }
  .app:not(.home-on) .city-pick { display: block; flex: 1 1 auto; min-width: 0; order: -2; }
  .city-pick .pick-btn { max-width: 100%; height: 34px; font-family: var(--f-title); font-size: 1.12rem; box-shadow: none; padding-inline: 4px 8px; }
  :root[dir="rtl"] .city-pick .pick-btn { font-family: var(--f-sign); font-weight: 700; }
  .city-pick .pick-btn span { overflow: hidden; text-overflow: ellipsis; }
  .city-pick .pick-btn .caret { opacity: .8; color: var(--brass-ink); }
  #city-menu { inset-inline-end: auto; inset-inline-start: 0; min-width: 230px; }
  #city-menu .ar-name { font-family: var(--f-sign); font-size: 1rem; color: var(--brass-ink); }
  #city-menu button[aria-pressed="true"] .ar-name { color: inherit; }
  .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 { display: none; }
  .tabs button { font-size: 1rem; padding-bottom: 7px; }
  .tabs button .ar-name, .tabs button .soon { display: none; }
  /* The three mosques come first on a phone, as compact rows that are plainly tappable; the hadith follows. */
  .home-in { gap: 22px; padding-block: 20px 32px; }
  .opening { gap: 10px; }
  .opening .tagline { font-size: 1.85rem; }
  .opening p { font-size: 1.08rem; }
  .cities { order: 1; grid-template-columns: 1fr; max-width: 460px; gap: 10px; }
  .hadith { order: 2; }
  .home-foot { order: 3; }
  .home-links { order: 4; }
  .city-card { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; row-gap: 1px; justify-items: start; align-items: center; text-align: start;
    padding-block: 10px; padding-inline: 10px 40px; background: var(--surface); box-shadow: var(--etch); border-radius: 2px; }
  .city-card .arch { grid-row: 1 / span 6; width: 76px; align-self: center; }
  .city-card > :not(.arch):not(.card-hit):not(.go) { grid-column: 2; }
  .city-card h3 { margin: 0; font-size: 1.22rem; }
  .city-card .ar { font-size: 1.02rem; }
  .city-card .city { font-size: .84rem; }
  .city-card .sub, .city-card .arch-credit, .city-card .arch .pic::after { display: none; }
  .city-card .c-credit { display: block; position: relative; z-index: 3; font-size: .6rem; color: var(--muted); margin-top: 2px; }
  .city-card .c-credit a { color: inherit; text-decoration: none; }
  .city-card .go { display: block; position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); font-size: 1.7rem; line-height: 1; color: var(--brass-ink); }
  .city-card:hover .arch .pic { transform: none; }
  .zoompath { max-width: calc(100% - 28px); }
}
/* Trial layout for phones (?ui=simple, see simpleUI() in app.js): two states only, a bar over the map that
   can be tapped or dragged as a whole, and the whole screen. */
.sbar { display: none; }
@media (max-width: 760px) {
  .main.simple-ui .grip { display: none; }
  /* Without the handle, the top row needs its own room or its buttons touch the edge and are cut off. */
  .main.simple-ui .pn { padding-top: 14px; }
  .sbar { display: grid; gap: 4px; flex: none; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
    cursor: pointer; touch-action: none; user-select: none; }
  .sbar[hidden] { display: none; }
  .sbar::before { content: ""; justify-self: center; width: 36px; height: 3px; background: var(--brass); opacity: .65; margin-bottom: 4px; }
  .sbar-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .sbar-tx { display: grid; gap: 1px; flex: 1; min-width: 0; }
  .sbar-tx b { font-family: var(--f-title); font-weight: 400; font-size: 1.2rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root[dir="rtl"] .sbar-tx b { font-family: var(--f-sign); font-weight: 700; }
  .sbar .chip { font-size: .95rem; gap: 6px; }
  .sbar .chip .sw { width: 16px; height: 16px; }
  .sbar-sub { font-size: .8rem; color: var(--muted); }
  .sbar-turn { display: flex; gap: 6px; flex: none; }
  .sbar-turn .btn { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 1.15rem; }
  .sbar-more { font-size: .78rem; color: var(--brass-ink); white-space: nowrap; }
  /* Nothing chosen: a search field and the list. */
  .sbar-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px; border: 0; border-radius: 2px;
    background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: inherit; font-size: .95rem; text-align: start; cursor: text; }
  .sbar-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sbar-list { height: 44px; flex: none; }
}

/* 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; }