@import url("https://fonts.googleapis.com/css2?family=Afacad:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800;900&display=swap");

:root {
  color-scheme: light;
  font-family: "Afacad", Candara, sans-serif;
  --paper: #efe2c8;
  --paper-deep: #dfcfb0;
  --green: #0d4440;
  --clay: #cd4b27;
  --amber: #efa42a;
  --sage: #cdd3bb;
  --ink: #143c3a;
  --muted: #7a7468;
  --shadow: 0 14px 35px rgb(52 42 29 / 16%);
  --page-gutter: clamp(17px, 5vw, 42px);
  /* How far the details sheet is pulled over the hero photo from 900px up.
     Shared so the hero's bookmark button can clear that seam. */
  --sheet-overlap: 34px;
  --nav-height: calc(74px + env(safe-area-inset-bottom));
  --pin-padel: #6f8f3c;
  --pin-karting: #efa42a;
  --pin-bowling: #2f6f74;
  --pin-cinema: #7a3b56;
  --pin-escape: #cd4b27;
  --pin-boardgame: #b98a2e;
  --pin-cafe: #6b4a30;
  --pin-park: #3f7d4a;
  --pin-trampoline: #e0637a;
  --pin-shooting: #56606b;
  --pin-golf: #a67c3d;
  --pin-horseback: #b0603f;
  --pin-water: #2f7fb0;
  --pin-cooking: #a13d6b;
  --pin-maker: #4a6670;
  --pin-arcade: #6a4c93;
  --pin-plaza: #8a7355;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; margin: 0; }
body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  color: var(--ink);
  background: #d2c4aa url("./assets/hq/paper-texture.webp") center / 720px auto;
}
button, input, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; touch-action: manipulation; }
svg { width: 1.45em; height: 1.45em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
img { image-rendering: auto; backface-visibility: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.device {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: auto;
  overflow: hidden;
  background-color: var(--paper);
  background-image: linear-gradient(rgb(255 252 239 / 44%), rgb(238 221 188 / 20%)), url("./assets/hq/paper-texture.webp");
  background-size: auto, 760px auto;
  box-shadow: 0 0 70px rgb(45 37 26 / 18%);
}
#app, .page { height: 100%; }
.page { position: relative; overflow: hidden; }

.welcome { display: grid; grid-template-rows: 1fr auto; align-items: center; padding-top: max(18px, env(safe-area-inset-top)); }
.welcome-brand { align-self: end; display: grid; justify-items: center; position: relative; z-index: 2; padding-top: 18px; }
.welcome-brand img { display: block; width: 72%; max-width: 330px; max-height: 350px; object-fit: cover; object-position: center; filter: saturate(.98) contrast(.98); }
.welcome-brand p { max-width: 28ch; margin: 2px var(--page-gutter) 16px; text-align: center; font-size: clamp(20px, 5vw, 25px); line-height: 1.55; letter-spacing: .01em; }
.amman-art { align-self: end; display: block; width: 100%; height: min(42vh, 390px); object-fit: cover; object-position: center top; mix-blend-mode: multiply; mask-image: linear-gradient(transparent 0, #000 8%, #000 100%); }
.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 62px;
  border: 0;
  border-radius: 999px;
  color: #fff9e9;
  background: var(--green);
  box-shadow: 0 8px 18px rgb(13 68 64 / 18%);
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}
.welcome-button { position: absolute; z-index: 3; left: max(var(--page-gutter), calc((100% - 560px) / 2)); right: max(var(--page-gutter), calc((100% - 560px) / 2)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px)); }

.app-page { padding-top: max(12px, env(safe-area-inset-top)); }
.scroll-area { width: 100%; max-width: 960px; height: calc(100% - var(--nav-height)); margin-inline: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 20px var(--page-gutter) 34px; -webkit-overflow-scrolling: touch; }
.scroll-area::-webkit-scrollbar { display: none; }
.home-header { display: flex; align-items: start; justify-content: space-between; margin: 8px 0 32px; }
.home-header h1, .simple-header h1, .details-sheet h1 { margin: 0; color: var(--green); font-size: 38px; line-height: 1.12; letter-spacing: -.055em; }
.home-header h1 .accent { color: var(--clay); text-transform: uppercase; }
.language-button { min-width: 50px; height: 46px; margin-top: 2px; border: 1.5px solid var(--green); border-radius: 999px; color: var(--green); background: rgb(255 249 233 / 64%); font-weight: 800; cursor: pointer; }
.round-button { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 auto; border: 0; border-radius: 50%; background: rgb(255 249 233 / 74%); box-shadow: 0 6px 18px rgb(64 52 34 / 10%); cursor: pointer; }
.round-button svg { width: 31px; height: 31px; }
.search { display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 20px; border-radius: 999px; background: rgb(255 250 237 / 88%); box-shadow: 0 9px 22px rgb(61 48 32 / 12%); }
.search svg { flex: 0 0 auto; width: 27px; height: 27px; }
.search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 17px; }
.search input::placeholder { color: #969084; }
/* Each language's artwork is cropped to its own panel edges, so the card
   takes that artwork's exact ratio and the artwork fills it edge to edge. */
.surprise-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(100deg, var(--paper-deep) 30%, var(--paper) 50%, var(--paper-deep) 70%);
  background-size: 200% 100%;
  animation: surprise-shimmer 1.3s ease-in-out infinite;
  line-height: 0;
}
.surprise-frame { position: relative; width: 100%; line-height: 0; }
.is-en .surprise-frame { aspect-ratio: 2092 / 508; }
.is-ar .surprise-frame { aspect-ratio: 2096 / 575; }
/* The artwork paints straight over the card's shimmer once it decodes, so
   the banner never depends on JS to become visible. */
.surprise-artwork {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.surprise-card:has(.is-loaded) { animation: none; background: none; }
@keyframes surprise-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .surprise-card { animation: none; }
}
/* Overlays the pill drawn in each artwork (measured from the cropped files). */
.surprise-button {
  position: absolute;
  padding: 0;
  /* The hotspot is a % of the artwork, which falls under the 24px minimum
     target size on small phones. */
  min-width: 24px;
  min-height: 24px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.is-en .surprise-button { left: 58.99%; top: 38.98%; width: 22.18%; height: 30.31%; }
.is-ar .surprise-button { left: 59.49%; top: 40.35%; width: 19.99%; height: 29.04%; }
.surprise-button:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 2px;
}
.section-block { margin-top: 17px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-title h2 { margin: 0; color: var(--green); font-size: 30px; letter-spacing: -.055em; }
.section-title button { display: flex; align-items: center; gap: 3px; min-height: 46px; padding-block: 0; padding-inline: 10px 2px; border: 0; background: none; font-weight: 700; cursor: pointer; }
.section-title button svg { width: 20px; color: var(--amber); }
.feature-card { position: relative; height: 238px; overflow: hidden; border-radius: 24px; background: var(--green); box-shadow: var(--shadow); }
.feature-card > img { width: 100%; height: 100%; object-fit: cover; }
.photo-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgb(255 249 233 / 76%); background: linear-gradient(145deg, var(--green), #2f6c64 58%, var(--clay)); }
.image-button .photo-fallback, .explore-open .photo-fallback { color: rgb(13 68 64 / 50%); background: linear-gradient(145deg, var(--paper-deep), var(--sage)); }
.photo-fallback svg { width: 32px; height: 32px; }
/* Stronger, earlier scrim: Featured now shows three arbitrary photos rather
   than one curated one, so bright images must not drop the title below AA. */
.feature-shade { position: absolute; inset: 0; background: linear-gradient(transparent 12%, rgb(3 19 19 / 88%)); }
/* Dark ink on amber, not white: white on --amber measures ~2.1:1 and 15px bold
   is below the large-text exemption, so it fails WCAG AA. */
.popular { position: absolute; top: 16px; inset-inline-start: 15px; padding: 7px 15px; border-radius: 999px; color: var(--green); background: var(--amber); font-size: 15px; font-weight: 700; }
.card-hit { position: absolute; z-index: 1; inset: 0; border: 0; background: transparent; cursor: pointer; }
.feature-copy { position: absolute; left: 18px; right: 18px; bottom: 16px; color: white; }
.feature-copy h3 { margin: 0; font-size: 28px; line-height: 1.2; }
.feature-copy p { display: flex; align-items: flex-start; gap: 5px; margin: 5px 0 0; color: #fff4d6; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.feature-copy p svg { width: 16px; flex: 0 0 auto; }
/* Desktop-only pieces of the shell. They ship in the markup on every screen so
   there is one code path, and stay hidden until the desktop rail exists — the
   phone bottom bar has to stay exactly four cells wide. */
.rail-brand, .rail-account, .rail-language, .rail-settings, .home-art, .feature-card .mini-save { display: none; }
.feature-copy .feature-meta { display: none; }
.featured-grid > *:nth-child(n + 2) { display: none; }
.nearby { margin-top: 28px; }
.nearby-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.place-card { position: relative; overflow: hidden; min-width: 0; padding-bottom: 10px; border-radius: 20px; background: rgb(255 249 233 / 60%); box-shadow: 0 5px 15px rgb(51 42 31 / 8%); }
.image-button { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 118px; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--paper-deep); cursor: pointer; }
.image-button img { display: block; width: 100%; height: 100%; object-fit: cover; }

@keyframes photo-shimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
[data-place-photo]:not(.photo-ready) { background: linear-gradient(100deg, var(--paper-deep) 34%, #f4ead2 50%, var(--paper-deep) 66%); background-size: 250% 100%; animation: photo-shimmer 1.3s ease-in-out infinite; }
.place-info { padding: 9px 9px 0; }
.place-info h3 { min-height: 55px; margin: 0; font-size: 15px; line-height: 1.35; }
.place-info p { display: flex; align-items: flex-start; gap: 3px; margin: 5px 0 0; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.place-info p svg { width: 17px; flex: 0 0 auto; color: var(--clay); }
.mini-save { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border: 0; border-radius: 50%; background: rgb(255 249 233 / 92%); cursor: pointer; }
.place-card > .mini-save { position: absolute; top: 7px; inset-inline-end: 7px; }
.mini-save svg { width: 20px; }
.mini-save.saved { color: var(--clay); }
.mini-save.saved svg { fill: currentColor; }

/* `direction: ltr` here is the whole fix for the tab bar flipping in Arabic.
   <html dir="rtl"> reverses the inline axis of every grid, so Home–Explore–Map–
   Saved was laying itself out right-to-left and the tabs physically swapped
   places. Muscle memory for a bottom bar is positional, not linguistic: the
   labels translate, the tabs do not move. Each label is a single Arabic run,
   so the bidi algorithm still renders it right-to-left inside its own centred
   cell. The desktop rail restores the inherited direction — see below. */
.bottom-nav { position: absolute; z-index: 15; direction: ltr; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: var(--nav-height); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgb(104 86 59 / 10%); background: rgb(244 232 207 / 94%); backdrop-filter: blur(14px); }
.nav-item span { unicode-bidi: isolate; }
.nav-item { display: grid; place-items: center; align-content: center; gap: 3px; border: 0; color: inherit; background: transparent; text-decoration: none; cursor: pointer; }
.nav-item svg { width: 28px; height: 28px; }
.nav-item span { font-size: 13px; }
.nav-item.active { color: var(--green); font-weight: 800; }
.nav-item.active svg { fill: var(--green); }

.simple-header { margin: 4px 0 22px; }
.simple-header p { margin: 7px 0 0; font-size: 19px; }
.search-heading { margin-bottom: 17px; }
.map-heading { margin-bottom: 17px; }
.map-stage { position: relative; display: grid; min-height: 440px; overflow: hidden; border: 1px solid rgb(13 68 64 / 12%); border-radius: 28px; background: #d5dcc5; box-shadow: var(--shadow); }
.map-grid { position: absolute; inset: 0; overflow: hidden; background-image: linear-gradient(30deg, transparent 47%, rgb(255 249 233 / 75%) 48% 52%, transparent 53%), linear-gradient(115deg, transparent 44%, rgb(255 249 233 / 68%) 45% 50%, transparent 51%), linear-gradient(165deg, transparent 46%, rgb(255 249 233 / 58%) 47% 51%, transparent 52%), linear-gradient(#c3d2bc 1px, transparent 1px), linear-gradient(90deg, #c3d2bc 1px, transparent 1px); background-size: auto, auto, auto, 34px 34px, 34px 34px; }
.map-route { position: absolute; display: block; height: 11px; border-radius: 999px; background: rgb(205 75 39 / 72%); box-shadow: 0 0 0 3px rgb(255 249 233 / 60%); }
.map-route-one { top: 29%; left: -10%; width: 78%; rotate: 31deg; }
.map-route-two { top: 57%; right: -12%; width: 74%; rotate: -26deg; }
.map-route-three { top: 74%; left: 12%; width: 68%; rotate: 8deg; }
.map-pin { position: absolute; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff9e9; background: var(--green); box-shadow: 0 5px 12px rgb(13 68 64 / 28%); }
.map-pin svg { width: 22px; }
.map-pin-one { top: 22%; right: 19%; }
.map-pin-two { top: 53%; left: 22%; }
.map-pin-three { bottom: 18%; right: 29%; }
.map-status { position: relative; align-self: end; z-index: 1; margin: 14px; padding: 22px; border-radius: 22px; background: rgb(255 249 233 / 94%); box-shadow: 0 10px 22px rgb(61 48 32 / 15%); text-align: center; }
.map-status-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 11px; border-radius: 50%; color: #fff9e9; background: var(--green); }
.map-status-icon svg { width: 25px; }
.map-status h2 { margin: 0; color: var(--green); font-size: 24px; }
.map-status p { max-width: 32ch; margin: 7px auto 0; color: var(--muted); line-height: 1.45; }
/* A <button> shrink-to-fits even when it is display:block, so the card's
   `text-align: center` never moved it — it sat against the inline start on
   every screen under 1100px. Now that this card is the first thing anyone
   sees on the Map tab, that is not a corner case any more. */
.map-retry-button { min-height: 48px; margin-top: 16px; margin-inline: auto; padding: 0 28px; font-size: 16px; }
.map-error-detail { max-width: 34ch; margin: 12px auto 0; color: rgb(122 116 104 / 65%); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }

/* Live map fills the whole tab (see .map-page below); the recenter button
   and status line float over the canvas instead of sitting in a toolbar
   row above it. */
.map-locate-button { position: absolute; inset-inline-end: 16px; bottom: 108px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; color: #fff9e9; background: var(--green); box-shadow: var(--shadow); cursor: pointer; }
.map-locate-button svg { width: 24px; }
.map-locate-button:disabled { opacity: .65; cursor: wait; }
.map-location-status { position: absolute; top: 14px; left: 50%; z-index: 6; margin: 0; padding: 8px 16px; border-radius: 999px; translate: -50% 0; background: rgb(255 249 233 / 92%); box-shadow: var(--shadow); color: var(--muted); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.map-location-status:empty { display: none; }
.map-location-status[data-state="denied"], .map-location-status[data-state="timeout"] { color: var(--clay); }

.map-page { padding-top: 0; }
.map-canvas-wrap { position: relative; width: 100%; height: calc(100% - var(--nav-height)); overflow: hidden; }
.map-canvas { width: 100%; height: 100%; }
/* Same shimmer treatment as the venue photo skeletons (see photo-shimmer
   keyframes above) — the tile/style fetch takes a moment, so this covers
   the canvas until map.js signals the map is actually painted, instead of
   the map just popping in over a blank rectangle. */
.map-skeleton { position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, var(--paper-deep) 34%, #f4ead2 50%, var(--paper-deep) 66%); background-size: 250% 100%; animation: photo-shimmer 1.3s ease-in-out infinite; }
.map-skeleton[hidden] { display: none; }
.map-canvas .maplibregl-ctrl-attrib { font-size: 11px; background: rgb(255 249 233 / 78%); }
.map-canvas .maplibregl-ctrl-group { border-radius: 14px; box-shadow: 0 6px 16px rgb(61 48 32 / 18%); overflow: hidden; }
.map-canvas .maplibregl-canvas:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.map-marker { width: 30px; height: 30px; border: 3px solid #fff9e9; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--clay); box-shadow: 0 4px 10px rgb(13 68 64 / 32%); cursor: pointer; }
.map-marker-user { border-color: var(--green); rotate: 0deg; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 6px rgb(239 164 42 / 28%); }

.place-pin { width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.place-pin-shape { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 3px solid #fff9e9; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--pin-color, var(--clay)); box-shadow: 0 4px 10px rgb(13 68 64 / 32%); }
.place-pin-icon { display: flex; rotate: 45deg; width: 16px; height: 16px; color: #fff9e9; }
.place-pin-icon svg { width: 100%; height: 100%; stroke-width: 2.1; }

.map-card-slot { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 5; }
/* Hidden by being empty rather than by the hidden attribute: app.js keeps
   this live region in the accessibility tree so its content is announced. */
.map-card-slot:empty { display: none; }
.map-place-card { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; padding-inline-end: 40px; border: 0; border-radius: 20px; background: rgb(255 249 233 / 96%); box-shadow: var(--shadow); text-align: start; cursor: pointer; }
.map-place-card img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; }
.map-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.map-card-body strong { overflow: hidden; color: var(--green); font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.map-card-body small { overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.map-card-distance { display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; color: var(--clay); font-size: 12.5px; font-weight: 700; }
.map-card-distance svg { width: 13px; }
.map-place-card > svg:last-child { position: absolute; top: 50%; inset-inline-end: 12px; width: 18px; color: var(--muted); translate: 0 -50%; }
.map-card-close { position: absolute; top: -10px; inset-inline-end: -6px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid #fff9e9; border-radius: 50%; background: var(--green); color: #fff9e9; box-shadow: var(--shadow); cursor: pointer; }
.map-card-close svg { width: 14px; }
.budget-control { display: grid; gap: 13px; margin: 17px 0 0; padding: 15px; border: 1px solid rgb(13 68 64 / 9%); border-radius: 22px; background: rgb(255 250 237 / 70%); box-shadow: 0 6px 16px rgb(61 48 32 / 7%); }
.budget-control legend { padding: 0 6px; color: var(--green); font-size: 14px; font-weight: 800; }
.budget-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.budget-presets button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 64px;
  padding: 9px 6px;
  border: 1.5px solid rgb(13 68 64 / 12%);
  border-radius: 17px;
  background: rgb(255 253 246 / 85%);
  box-shadow: 0 3px 9px rgb(61 48 32 / 6%);
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.budget-presets button:active { transform: scale(.95); }
.budget-presets button.active {
  color: #fff9e9;
  border-color: var(--green);
  background: linear-gradient(155deg, #14625a, var(--green));
  box-shadow: 0 8px 18px rgb(13 68 64 / 26%);
}
.budget-presets strong { width: 100%; font-size: 15px; font-weight: 800; text-align: center; }
.budget-presets small { width: 100%; font-size: 12px; line-height: 1.3; text-align: center; opacity: .85; }
.budget-line { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; }
.budget-line button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--green); background: var(--sage); font-size: 24px; font-weight: 800; cursor: pointer; }
/* The native slider (even tinted with accent-color) is the one control that
   still reads as a raw browser widget next to the hand-drawn artwork, so the
   track and thumb are drawn explicitly. --range-fill is the filled percentage,
   set by bindSearchFilters() in search.js on every update. */
.budget-line input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
  -webkit-appearance: none;
  appearance: none;
}
.budget-line input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(var(--clay), var(--clay)) 0 / var(--range-fill, 0%) 100% no-repeat,
    rgb(13 68 64 / 14%);
}
.budget-line input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: rgb(13 68 64 / 14%); }
.budget-line input[type="range"]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--clay); }
.budget-line input[type="range"]::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border: 3px solid #fff9e9;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 3px 9px rgb(61 48 32 / 28%);
  -webkit-appearance: none;
  appearance: none;
}
.budget-line input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 3px solid #fff9e9; border-radius: 50%; background: var(--clay); box-shadow: 0 3px 9px rgb(61 48 32 / 28%); }
.budget-control output { justify-self: center; color: var(--green); font-size: 14px; font-weight: 800; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.filter-control { position: relative; display: grid; gap: 6px; min-width: 0; }
.filter-label { padding-inline-start: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.filter-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgb(13 68 64 / 8%);
  border-radius: 16px;
  color: var(--ink);
  background: rgb(255 250 237 / 86%);
  box-shadow: 0 6px 16px rgb(61 48 32 / 8%);
  font-weight: 650;
  text-align: start;
  cursor: pointer;
}
.filter-trigger strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-trigger i { width: 10px; height: 10px; flex: 0 0 auto; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); rotate: 45deg; translate: 0 -2px; transition: rotate .16s ease, translate .16s ease; }
.filter-trigger[aria-expanded="true"] { color: #fff9e9; border-color: var(--green); background: var(--green); box-shadow: 0 8px 18px rgb(13 68 64 / 24%); }
.filter-trigger[aria-expanded="true"] i { border-color: #fff9e9; rotate: 225deg; translate: 0 3px; }
.filter-popover { position: absolute; z-index: 30; top: calc(100% + 8px); inset-inline-start: 0; width: min(292px, calc(100vw - 46px)); padding: 10px; overflow: hidden; border: 1px solid rgb(13 68 64 / 12%); border-radius: 20px; background: #fff9e9; box-shadow: 0 18px 42px rgb(42 32 20 / 22%); }
.filter-control:last-child .filter-popover { inset-inline: auto 0; }
.filter-search { display: flex; align-items: center; gap: 9px; height: 43px; padding: 0 12px; border: 1.5px solid rgb(13 68 64 / 14%); border-radius: 13px; background: var(--paper); }
.filter-search svg { width: 18px; flex: 0 0 auto; color: var(--green); }
.filter-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; }
.filter-options { display: grid; gap: 3px; max-height: 248px; margin-top: 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sage) transparent; }
.filter-options button { width: 100%; min-height: 44px; padding: 8px 11px; border: 0; border-radius: 11px; color: var(--ink); background: transparent; font: inherit; font-weight: 650; text-align: start; cursor: pointer; }
.filter-options button:hover, .filter-options button:focus-visible { background: var(--sage); }
.filter-options button[aria-selected="true"] { color: #fff9e9; background: var(--clay); }
.filter-empty { margin: 14px 6px; color: var(--muted); font-size: 13px; text-align: center; }
[hidden] { display: none !important; }
.result-count { margin: 19px 3px -7px; color: var(--green); font-size: 14px; font-weight: 800; }
.search-results { margin-top: 18px; }
.explore-list { display: grid; gap: 14px; margin-top: 20px; }
.explore-card { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 22px; background: rgb(255 249 233 / 70%); box-shadow: 0 7px 20px rgb(58 46 30 / 8%); }
.explore-open { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; text-align: start; cursor: pointer; }
.explore-open img, .explore-open .photo-fallback { width: 108px; height: 88px; flex: 0 0 auto; object-fit: cover; border-radius: 17px; background: var(--paper-deep); }
.explore-open span { display: grid; min-width: 0; }
.explore-open strong { font-size: 18px; line-height: 1.3; }
.explore-open small { margin-top: 4px; color: var(--muted); font-size: 13px; }
.empty { display: grid; place-items: center; gap: 10px; min-height: 220px; padding: 28px; border: 2px dashed rgb(13 68 64 / 16%); border-radius: 24px; color: var(--muted); text-align: center; }
.empty.compact { min-height: 100px; }
.login-gate { display: grid; justify-items: center; margin-top: 26px; padding: 32px 24px 24px; border-radius: 28px; background: rgb(255 249 233 / 72%); box-shadow: var(--shadow); text-align: center; }
.login-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff9e9; background: var(--green); }
.login-mark svg { width: 30px; height: 30px; }
.login-gate h2 { margin: 18px 0 8px; color: var(--green); font-size: 25px; }
.login-gate > p { margin: 0; color: var(--muted); line-height: 1.5; }
.login-button { width: 100%; min-height: 54px; margin: 23px 0 18px; font-size: 18px; }
.saved-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.account-button { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid rgb(13 68 64 / 16%); border-radius: 50%; color: var(--green); background: rgb(255 249 233 / 75%); cursor: pointer; }
.account-button svg { width: 22px; }
.saved-results { margin-top: 24px; }
.no-login-note { display: grid; gap: 5px; padding-top: 17px; border-top: 1px solid rgb(13 68 64 / 12%); color: var(--muted); font-size: 13px; line-height: 1.45; }
.no-login-note strong { color: var(--green); font-size: 14px; }
/* app.js sets dir="rtl" on <html>, so direction is inherited everywhere and
   this file only has to deal with typeface and weight. The previous approach —
   a hand-picked list of selectors each carrying `direction: rtl` — left every
   element outside the list laying Arabic out with an LTR base direction. */
.arabic { font-family: "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; }
.arabic h1, .arabic h2, .arabic h3, .arabic .primary, .arabic .nav-item span, .arabic .budget-presets strong, .arabic .login-mark + h2 { font-weight: 800; }

.arabic .always-english { direction: ltr; font-family: "Afacad", Candara, sans-serif; text-align: left; unicode-bidi: isolate; }
/* icons.arrow and icons.back are drawn pointing left-to-right and have no RTL
   variant, so in Arabic "See all", "Get Started", "Get Directions" and the back
   button were all pointing against the reading direction. */
.arabic .section-title button svg,
.arabic .primary svg,
.arabic .details-back svg,
.arabic .map-place-card > svg:last-child { transform: scaleX(-1); }

.details-page { overflow-y: auto; scrollbar-width: none; background: var(--paper); }
.details-page::-webkit-scrollbar { display: none; }
.details-hero { position: relative; height: 41vh; min-height: 340px; max-height: 450px; background: #91a1a5; }
.details-hero::after { content: ""; position: absolute; inset: auto 0 -1px; height: 35px; background: var(--paper); clip-path: polygon(0 60%, 8% 38%, 18% 50%, 27% 29%, 39% 44%, 52% 27%, 65% 43%, 77% 26%, 90% 47%, 100% 32%, 100% 100%, 0 100%); }
.details-hero > img { width: 100%; height: 100%; object-fit: cover; }
.details-hero .round-button { position: absolute; z-index: 3; top: max(20px, calc(env(safe-area-inset-top) + 12px)); }
.details-back { inset-inline-start: 24px; }
.details-bookmark { inset-inline-end: 24px; }
.details-bookmark.saved { color: var(--green); }
.details-bookmark.saved svg { fill: currentColor; }
.details-sheet { position: relative; min-height: 54vh; margin-top: -3px; padding: 18px 27px 35px; background-color: var(--paper); background-image: linear-gradient(rgb(255 252 239 / 30%), rgb(238 221 188 / 16%)), url("./assets/hq/paper-texture.webp"); background-size: auto, 760px auto; }
.details-sheet h1 { font-size: 40px; }
.walk { display: flex; align-items: center; gap: 5px; margin: 8px 0 19px; font-size: 16px; }
.walk svg { width: 21px; color: var(--clay); }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tags span { padding: 9px 17px; border-radius: 999px; background: #efc6b5; font-weight: 700; }
.tags span:nth-child(2) { background: var(--sage); }
.tags span:nth-child(3) { background: #dfd3bd; }
.description { max-width: 38ch; margin: 20px 0; font-size: 17px; line-height: 1.5; letter-spacing: -.015em; }
.hours { display: flex; align-items: start; gap: 13px; margin-bottom: 18px; }
.hours > svg { width: 28px; height: 28px; }
.hours p { display: grid; gap: 3px; margin: 0; font-size: 17px; }
.hours span { font-size: 16px; }
.directions { width: 100%; }
/* Secondary action. It used to be a filled paper-deep pill, which next to the
   solid green "Get Directions" below it read as a disabled button. */
.phone-link { margin-bottom: 12px; border: 2px solid rgb(13 68 64 / 30%); color: var(--green); background: transparent; box-shadow: none; }

.toast { position: absolute; z-index: 100; left: 50%; bottom: calc(var(--nav-height) + 16px); translate: -50% 14px; width: max-content; max-width: calc(100% - 42px); padding: 11px 17px; border-radius: 999px; color: #fff9e9; background: var(--green); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .18s ease; }
.toast.show { translate: -50% 0; opacity: 1; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
/* Programmatic focus targets: the view heading on every route change
   (focusNewView in app.js), a legal section jumped to from its contents list,
   and the delete warning. All three carry tabindex="-1", so none is in the tab
   order and no keyboard user can land on one by pressing Tab — WCAG 2.4.7 is
   about focus a person can move, which this is not. Chrome paints its own
   black UA ring on them regardless, which rendered as a box drawn around the
   page title on a plain load. #route-announcer is what actually tells assistive
   tech the view changed. */
#app h1[tabindex="-1"]:focus, .legal-section h2:focus, #delete-title:focus { outline: none; }
/* The two a keyboard user deliberately jumped to still confirm where they
   landed — in the app's amber, not the UA's black. */
.legal-section h2:focus-visible, #delete-title:focus-visible { outline: 3px solid var(--amber); outline-offset: 6px; border-radius: 6px; }

@keyframes page-in-forward { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes page-in-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
.page { animation: page-in-forward .34s cubic-bezier(.22, 1, .36, 1); }
.page.page-back { animation: page-in-back .34s cubic-bezier(.22, 1, .36, 1); }
.page.page-static { animation: none; }

@keyframes welcome-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.welcome { animation: none; }
.welcome-brand img { animation: welcome-rise .5s cubic-bezier(.22, 1, .36, 1) .05s both; }
.welcome-brand p { animation: welcome-rise .5s cubic-bezier(.22, 1, .36, 1) .14s both; }
.welcome .amman-art { animation: welcome-rise .55s cubic-bezier(.22, 1, .36, 1) .1s both; }
.welcome .welcome-button { animation: welcome-rise .5s cubic-bezier(.22, 1, .36, 1) .22s both; }

button, a { transition: transform .12s ease, opacity .12s ease; }
button:active, a:active { transform: scale(.95); }
.card-hit:active, .explore-open:active, .image-button:active { transform: none; opacity: .78; }
.details-hero .round-button:active { transform: scale(.9); }

@media (max-width: 370px) {
  .home-header h1, .simple-header h1 { font-size: 33px; }
  .feature-card { height: 215px; }
  .explore-open { gap: 10px; }
  .explore-open img, .explore-open .photo-fallback { width: 88px; height: 82px; }
}

@media (max-width: 480px) {
  .budget-presets { grid-template-columns: 1fr; gap: 8px; }
  .budget-presets button { grid-template-columns: minmax(90px, .8fr) 1.2fr; align-items: center; min-height: 56px; padding: 8px 14px; }
  .budget-presets strong, .budget-presets small { text-align: start; white-space: normal; }
  .filter-grid { grid-template-columns: 1fr; }
  .filter-popover, .filter-control:last-child .filter-popover { inset-inline: 0 auto; width: 100%; }
  .explore-card { align-items: stretch; }
  .explore-open strong { font-size: 16px; }
}

@media (min-width: 700px) {
  :root { --page-gutter: clamp(32px, 6vw, 64px); --nav-height: 82px; }
  .nearby-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .feature-card { height: 320px; }
  .place-info h3 { min-height: 45px; font-size: 17px; }
  .budget-control { padding: 20px; }
  .budget-presets button { min-height: 74px; }
}

/* Tablets keep the comfortable vertical place view. The two-pane layout begins
   only when both panes have enough room for their content. */
@media (min-width: 900px) {
  /* The photo is most of the appeal of a venue page, so it takes the larger
     half; the sheet holds one narrow measure and does not need the room. */
  .details-page { display: grid; grid-template-columns: minmax(380px, 50%) 1fr; overflow: hidden; }
  .details-hero { height: 100%; min-height: 0; max-height: none; }
  /* The torn-paper sawtooth is a phone motif. Stretched down a 900px vertical
     seam that hard zigzag reads as a rendering fault rather than torn paper, so
     the sheet is lifted over the photo on a soft rounded edge instead. */
  .details-hero::after { display: none; }
  .details-sheet {
    position: relative;
    z-index: 1;
    /* The content is one narrow measure in a half-screen pane; top-aligned it
       left the lower two thirds of the pane empty. */
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    min-height: 100%;
    margin: 0;
    margin-inline-start: calc(var(--sheet-overlap) * -1);
    padding-block: clamp(44px, 7vh, 88px);
    /* The inline padding grows to centre a fixed 520px column rather than each
       child centring itself: children carry their own margins at a higher
       specificity, so per-child auto margins left the heading flush to one edge
       and the description centred. Shaping the content box aligns all of them. */
    padding-inline: max(clamp(38px, 4vw, 78px), calc((100% - 520px) / 2));
    overflow-y: auto;
    border-start-start-radius: 36px;
    border-end-start-radius: 36px;
    box-shadow: 0 0 54px -18px rgb(35 27 16 / 55%);
  }
  .details-sheet h1 { font-size: clamp(38px, 3.2vw, 58px); }
  .details-sheet .walk { margin-bottom: 22px; font-size: 18px; }
  .details-sheet .tags span { padding: 10px 20px; }
  /* The sheet's padding already sets the measure. */
  .description { max-width: 100%; margin: 24px 0; font-size: 18.5px; line-height: 1.6; }
  .details-sheet .hours p { font-size: 18px; }
  .details-sheet .primary { max-width: 420px; }
  /* The sheet is pulled over the hero, so the bookmark has to clear the seam
     or it disappears underneath it. */
  .details-bookmark { inset-inline-end: calc(24px + var(--sheet-overlap)); }
}

/* ---------------------------------------------------------------------------
   Desktop (>= 1100px).

   The phone screens in assets/0*_harakeh_*.png are the product. Desktop is the
   same product given room, not the phone layout stretched across a monitor:
   the type scale, the card proportions and the surfaces are all re-derived for
   a wide viewport, because reusing the phone's sizes inside a 1200px column is
   exactly what made this page read as an unfinished template.
   --------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  :root {
    --desktop-nav-width: clamp(252px, 15.5vw, 312px);
    --nav-height: 0px;
    --page-gutter: clamp(34px, 3vw, 72px);
    /* Content stops widening here. Past it, the ratio between type size and
       column width that the phone design is built on collapses and the page
       reads as an admin panel — so extra viewport becomes margin, not more
       columns of ever-smaller cards. */
    --well: 1320px;
    --surface: rgb(255 251 240 / 78%);
    --surface-line: rgb(13 68 64 / 8%);
    --card-lift: 0 22px 44px rgb(52 42 29 / 18%);
  }

  /* The rail is absolutely positioned, so padding the page offsets the content
     past it. */
  .app-page { padding-left: var(--desktop-nav-width); }
  /* The live map renders full-bleed outside .scroll-area (see shellView's
     map-page branch in views.js). It must inset with PADDING, not margin: the
     rail is absolutely positioned against this page's padding box, so a margin
     shifts the rail right too — leaving dead space at x=0 and running the map
     (and the selected place card's name) underneath the rail. */
  .map-page { padding-left: var(--desktop-nav-width); margin-left: 0; }

  .scroll-area {
    width: 100%;
    max-width: calc(var(--well) + var(--page-gutter) * 2);
    height: 100%;
    margin-inline: auto;
    padding-top: clamp(28px, 3vh, 52px);
    padding-bottom: 64px;
    /* Hiding the scrollbar is a phone affordance; on a desktop pointer it just
       removes the only cue that the page continues below the fold. */
    scrollbar-width: thin;
    scrollbar-color: rgb(13 68 64 / 24%) transparent;
  }
  .scroll-area::-webkit-scrollbar { display: block; width: 12px; }
  .scroll-area::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-radius: 999px;
    background: rgb(13 68 64 / 24%);
    background-clip: content-box;
  }

  /* ---- Left rail ------------------------------------------------------- */
  .bottom-nav {
    /* The rail stacks vertically, so nothing reorders when the inline axis
       flips — and its rows carry `text-align: start`, which needs the real
       direction back to align Arabic labels correctly. */
    direction: inherit;
    top: 0;
    right: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: var(--desktop-nav-width);
    height: 100%;
    padding: clamp(26px, 3vh, 40px) 18px 22px;
    border-top: 0;
    border-right: 1px solid rgb(104 86 59 / 16%);
    background: linear-gradient(180deg, rgb(253 246 231 / 92%), rgb(242 230 203 / 92%));
    box-shadow: 18px 0 44px -34px rgb(52 42 29 / 60%);
  }
  .rail-brand { display: grid; justify-items: center; margin-bottom: clamp(16px, 2.2vh, 28px); }
  .rail-brand img { width: clamp(136px, 9.5vw, 172px); max-width: 100%; }
  .rail-brand p { max-width: 21ch; margin: 10px 0 0; color: #6c6659; font-size: 15px; line-height: 1.45; text-align: center; }
  /* The rail follows the design's order (Home, Explore, Saved, Map) without
     touching the phone bar's DOM order. */
  .nav-item[data-route="saved"] { order: 3; }
  .nav-item[data-route="map"] { order: 4; }
  .nav-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 16px;
    color: #4d4a41;
    font-weight: 600;
    transition: background .16s ease, color .16s ease;
  }
  .nav-item span { font-size: 18.5px; }
  .nav-item svg { width: 26px; height: 26px; }
  /* A filled pill, not tinted paper: the rail is the only persistent chrome on
     desktop and needs one unambiguous "you are here". */
  .nav-item.active { color: #fff9e9; background: var(--green); box-shadow: 0 10px 22px rgb(13 68 64 / 26%); }
  .nav-item.active svg { fill: currentColor; stroke: currentColor; }
  .nav-item:active { transform: none; }
  /* The rail's cream background makes the global amber focus ring ~1.6:1. */
  .bottom-nav button:focus-visible { outline-color: var(--green); }
  .rail-language, .rail-account, .rail-settings {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #5c574d;
    font-size: 15.5px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
  }
  /* Pinned to the bottom of the rail. The language toggle only exists in the
     Home header on phones, which on desktop meant Explore/Saved/Map had no way
     to switch language at all — in the rail it is reachable from every screen. */
  .rail-settings { order: 7; margin-top: auto; text-decoration: none; }
  .rail-language { order: 8; }
  .rail-account { order: 9; }
  .rail-language svg, .rail-account svg, .rail-settings svg { width: 22px; flex: 0 0 auto; }
  /* The label is the other language written in its own script, so it must not
     reorder against the surrounding direction. */
  .rail-language span, .rail-account span, .rail-settings span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
  /* The rail owns the language toggle on desktop, so the Home header's copy of
     it stops floating in the top-right corner of the artwork. */
  .home-header .language-button { display: none; }

  /* ---- Home: greeting band --------------------------------------------- */
  /* Text on bare paper gave the top of the page nothing to sit on. The greeting
     and the artwork now share one panel, which also contains the artwork's
     bleed instead of letting it run to the viewport edge past the content cap. */
  .home-header {
    position: relative;
    align-items: stretch;
    gap: clamp(16px, 1.6vw, 36px);
    margin: 0 0 clamp(26px, 2.4vw, 44px);
    padding-inline-start: clamp(30px, 3vw, 58px);
    overflow: hidden;
    border-radius: 30px;
    background: linear-gradient(105deg, rgb(255 252 242 / 92%), rgb(249 238 213 / 58%));
    box-shadow: 0 16px 38px rgb(52 42 29 / 10%), inset 0 1px 0 rgb(255 255 255 / 50%);
  }
  /* The greeting has to out-weigh the Surprise Me artwork directly below it —
     that banner is a secondary action, and at the artwork's own 4.1:1 ratio it
     is naturally ~280px tall, so a thin greeting strip loses the page. */
  .home-greeting { display: flex; align-items: center; padding: clamp(40px, 3.8vw, 68px) 0; }
  .home-greeting h1 { font-size: clamp(46px, 4vw, 80px); }
  /* amman-header.webp is a 3:1 strip drawn on cream paper. `multiply` drops its
     background into the panel's own paper and the mask feathers the left edge,
     so there is no visible rectangle; the right edge stays hard because the
     city and the sun run to it. */
  .home-art {
    display: block;
    flex: 0 1 auto;
    align-self: stretch;
    width: auto;
    height: auto;
    aspect-ratio: 2172 / 724;
    max-width: 54%;
    margin-inline-start: auto;
    object-fit: cover;
    object-position: right center;
    mix-blend-mode: multiply;
    mask-image: linear-gradient(to right, transparent 0, #000 38%);
  }
  /* RTL puts the art on the left, so mirror it: the city and sun then face the
     panel edge and the feathered edge lands next to the greeting, as in LTR. */
  .arabic .home-art { transform: scaleX(-1); }

  /* ---- Home: Surprise Me banner ---------------------------------------- */
  /* Across a full 1300px row this was a ~7:1 letterbox of a 4.1:1 drawing —
     cropped to a strip and read as a stock web banner. Capping the width keeps
     the artwork's own ratio, so it is never cropped and the button hotspot
     stays the plain percentage of the artwork that the phone layout uses. */
  .surprise-card {
    display: block;
    width: 100%;
    max-width: 1180px;
    height: auto;
    margin-inline: auto;
    border-radius: 28px;
    box-shadow: 0 16px 38px rgb(52 42 29 / 14%);
  }
  .surprise-frame { width: 100%; height: auto; }

  /* ---- Section headings ------------------------------------------------ */
  .section-block { margin-top: clamp(30px, 2.6vw, 58px); }
  .section-title { margin-bottom: clamp(16px, 1.4vw, 26px); }
  .section-title h2 { font-size: clamp(34px, 2.5vw, 46px); }
  .section-title button { min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 18.5px; }
  .section-title button svg { width: 22px; }

  /* ---- Home: Featured -------------------------------------------------- */
  /* Two cards until there is room for three at a decent size. Three columns
     inside the ~780px well a 1100px screen leaves would each be 245px wide, so
     every card became a 163px strip — the letterbox look this pass exists to
     remove. The third card reappears at 1340px below. */
  .featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 1.6vw, 26px); }
  .featured-grid > *:nth-child(n + 2) { display: block; }
  .featured-grid > *:nth-child(n + 3) { display: none; }
  /* A ratio rather than a height, and 3:2 rather than 2:1 — the design's card
     is 1.34:1, and at 2:1 a 390px column produced a 195px letterbox that read
     as an ad slot rather than a place.
     No min-height: combined with aspect-ratio it wins over the grid track and
     resolves the card's *width* from it instead (a 240px floor forced every
     card to 360px), so the cards overflowed their tracks and the viewport. The
     column count above is what keeps them from getting too short. */
  .feature-card {
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 26px;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
  }
  .feature-card > img { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
  /* Taller card, so the scrim can start lower and let more of the photo through
     while still clearing AA behind the title. */
  .feature-shade { background: linear-gradient(transparent 26%, rgb(3 19 19 / 42%) 56%, rgb(3 19 19 / 90%)); }
  .feature-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; left: 22px; right: 22px; bottom: 18px; }
  .feature-copy h3 { font-size: clamp(25px, 1.7vw, 33px); }
  .feature-copy p { font-size: 15px; }
  .feature-copy .feature-meta { display: flex; }
  .feature-distance { margin: 0; white-space: nowrap; }
  .popular { display: inline-flex; align-items: center; gap: 7px; top: 16px; inset-inline-start: 18px; padding: 8px 16px; font-size: 15.5px; }
  .popular svg { width: 16px; height: 16px; }
  .badge-trending { color: #fff9e9; background: var(--green); }
  .badge-liked { color: #fff9e9; background: var(--clay); }
  /* A tinted disc rather than a bare white glyph: Featured shows three
     arbitrary photos, and an unbacked heart disappeared over the bright ones. */
  .feature-card .mini-save {
    display: grid;
    position: absolute;
    top: 13px;
    inset-inline-end: 15px;
    z-index: 2;
    width: 42px;
    height: 42px;
    color: #fff9e9;
    background: rgb(3 19 19 / 32%);
    backdrop-filter: blur(6px);
    box-shadow: none;
  }
  .feature-card .mini-save svg { width: 23px; }
  .feature-card .mini-save.saved { color: #ff9169; }

  /* ---- Home: Nearby You / Saved grid ----------------------------------- */
  .nearby { margin-top: clamp(30px, 2.6vw, 58px); }
  /* homeResults() renders exactly six Nearby cards, so the track minimum is
     tuned to resolve to three columns at every desktop width — six fills two
     complete rows that line up with the three Featured cards above, instead of
     the four-up grid that left two orphans on a ragged second row. Saved reuses
     this grid with a variable count, where a short last row is expected. */
  .nearby-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 19vw, 380px), 1fr)); gap: clamp(18px, 1.5vw, 26px); }
  .place-card {
    padding-bottom: 15px;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgb(51 42 31 / 9%);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .image-button { border-radius: 22px; }
  .image-button img { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
  .place-info { padding: 13px 15px 0; }
  /* A fixed two-line box instead of a min-height: names of one and three lines
     used to leave the cards' distance rows at different heights across a row. */
  .place-info h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 2.64em;
    min-height: 0;
    overflow: hidden;
    font-size: 19px;
    line-height: 1.32;
  }
  .place-info p { margin-top: 8px; font-size: 15px; }
  .place-info p svg { width: 18px; }
  .place-card > .mini-save { top: 10px; inset-inline-end: 10px; width: 42px; height: 42px; background: rgb(255 249 233 / 94%); box-shadow: 0 4px 12px rgb(51 42 31 / 18%); }

  /* ---- Explore ---------------------------------------------------------- */
  .simple-header h1 { font-size: clamp(40px, 3.2vw, 62px); }
  .simple-header p { max-width: 54ch; font-size: 21px; }
  .search { height: 70px; padding: 0 26px; border-radius: 999px; }
  .search svg { width: 29px; height: 29px; }
  .search input { font-size: 19px; }
  .explore-list { grid-template-columns: repeat(auto-fill, minmax(clamp(340px, 21vw, 430px), 1fr)); gap: clamp(16px, 1.4vw, 24px); }
  .explore-card {
    padding: 12px;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgb(58 46 30 / 9%);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .explore-open { gap: 16px; }
  .explore-open img, .explore-open .photo-fallback { width: 128px; height: 104px; border-radius: 18px; }
  .explore-open strong { font-size: 19.5px; }
  .explore-open small { font-size: 14.5px; }
  .explore-card .mini-save { width: 46px; height: 46px; }
  .budget-control { padding: 22px; border-radius: 24px; }
  .budget-control legend { font-size: 15px; }
  .budget-presets button { min-height: 78px; border-radius: 18px; }
  .budget-presets strong { font-size: 16px; }
  .result-count { margin: clamp(20px, 1.8vw, 32px) 3px -4px; font-size: 17px; }

  /* ---- Welcome ----------------------------------------------------------- */
  /* The phone splash stacks the brand over a full-bleed strip of the Amman
     illustration. That illustration is 1400x1051 — 1.33:1 — and on a 1512px
     screen the strip is 4:1, so `cover` was cropping two thirds of the drawing
     away and leaving a sun and half a flag. Side by side it is shown whole. */
  .welcome {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "brand art"
      "button art";
    align-content: center;
    column-gap: clamp(28px, 4vw, 72px);
    /* Capped and centred: across a full 1512px the two columns drifted to
       opposite edges with a well of empty paper between them. */
    max-width: 1180px;
    margin-inline: auto;
    padding: 0 clamp(36px, 4vw, 72px);
  }
  .welcome-brand { grid-area: brand; align-self: end; justify-items: start; padding-top: 0; }
  /* `contain`, so the square wordmark lockup is never trimmed. */
  .welcome-brand img { width: 100%; max-width: clamp(260px, 22vw, 340px); max-height: none; object-fit: contain; }
  .welcome-brand p { max-width: 20ch; margin: 16px 0 0; font-size: clamp(22px, 1.7vw, 30px); text-align: start; }
  .amman-art {
    grid-area: art;
    align-self: center;
    width: 100%;
    height: auto;
    max-height: 76vh;
    object-fit: contain;
    /* The drawing carries its own paper, so at full size its edges read as a
       tinted rectangle sitting on the page. Feathering all four dissolves it
       into the background the same way .home-art's left edge is handled. */
    mask-image:
      linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
  .welcome-button {
    grid-area: button;
    position: static;
    align-self: start;
    justify-self: start;
    width: min(340px, 100%);
    margin-top: clamp(26px, 3.4vh, 48px);
  }

  /* ---- Saved ------------------------------------------------------------ */
  /* Centres the logged-out panel in the space left under the heading instead of
     stranding it against the top of a 900px-tall empty page. */
  .scroll-area:has(> .login-gate) { display: flex; flex-direction: column; }
  .scroll-area:has(> .login-gate) > .login-gate { margin-block: auto; }
  .login-gate { max-width: 560px; margin-inline: auto; padding: 46px 40px 34px; border-radius: 32px; }
  .login-gate h2 { font-size: 30px; }
  .login-gate > p { font-size: 18px; }
  .login-button { max-width: 320px; }
  .empty { max-width: 640px; margin-inline: auto; }

  /* ---- Map -------------------------------------------------------------- */
  .map-stage { min-height: min(640px, 68vh); }
  .map-status { max-width: 540px; margin-inline: auto; }
  .map-retry-button { width: max-content; margin-inline: auto; }
  /* There is no bottom bar on desktop, so the phone's 108px clearance left the
     button floating in the middle of the map's lower edge. */
  .map-locate-button { bottom: 30px; }
  /* The selected-place card is one row of text — it should not span the map. */
  .map-card-slot { inset-inline: 30px auto; bottom: 30px; width: min(430px, calc(100% - 60px)); }
}

/* Pointer devices only — a card that stays lifted after a tap looks broken on
   touch, and :hover sticks there until the next tap elsewhere. */
@media (min-width: 1100px) and (hover: hover) {
  .nav-item:hover:not(.active) { color: var(--green); background: rgb(255 249 233 / 72%); }
  .rail-language:hover, .rail-account:hover, .rail-settings:hover { color: var(--green); background: rgb(255 249 233 / 72%); }
  .feature-card:hover { transform: translateY(-4px); box-shadow: var(--card-lift); }
  .feature-card:hover > img { transform: scale(1.045); }
  .place-card:hover, .explore-card:hover { transform: translateY(-3px); box-shadow: var(--card-lift); }
  .place-card:hover .image-button img { transform: scale(1.05); }
  .section-title button:hover { background: rgb(255 249 233 / 76%); }
  .mini-save:hover { background: #fff9e9; }
  .feature-card .mini-save:hover { background: rgb(3 19 19 / 55%); }
  .surprise-button:hover { cursor: pointer; }
  .map-place-card:hover { box-shadow: var(--card-lift); }
}

@media (min-width: 1240px) {
  /* Desktop search: filters sit beside the budget block, and results become a
     grid — a single column of 1300px-wide rows is the stretched-app look. */
  .scroll-area:has(> .search-heading) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 344px);
    grid-template-areas: "head head" "find find" "budget filters" "count count" "results results";
    align-content: start;
    column-gap: clamp(20px, 1.8vw, 32px);
  }
  .scroll-area:has(> .search-heading) > .search-heading { grid-area: head; }
  .scroll-area:has(> .search-heading) > .search { grid-area: find; }
  .scroll-area:has(> .search-heading) > .budget-control { grid-area: budget; }
  /* The two dropdowns used to float unbacked beside the budget panel, top-
     aligned to nothing. Giving them the same panel treatment makes the row read
     as one filter bar. */
  .scroll-area:has(> .search-heading) > .filter-grid {
    grid-area: filters;
    align-content: start;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 17px;
    padding: 22px;
    border: 1px solid var(--surface-line);
    border-radius: 24px;
    background: rgb(255 250 237 / 70%);
    box-shadow: 0 6px 16px rgb(61 48 32 / 7%);
  }
  .scroll-area:has(> .search-heading) > .filter-grid .filter-label { font-size: 13px; }
  .scroll-area:has(> .search-heading) > .filter-grid .filter-trigger { height: 52px; font-size: 16px; }
  .scroll-area:has(> .search-heading) > .result-count { grid-area: count; }
  .scroll-area:has(> .search-heading) > .search-results { grid-area: results; }
}

/* The well is finally wide enough for three Featured cards without squeezing
   each one into a strip. */
@media (min-width: 1340px) {
  .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .featured-grid > *:nth-child(n + 3) { display: block; }
}

/* ---------------------------------------------------------------------------
   Onboarding guide (#guide) — one screen between Welcome and Home, shown once.
   A list rather than a swipeable carousel: nothing to get stuck inside, and it
   reads the same to a screen reader as it does on screen.
   --------------------------------------------------------------------------- */
/* Double class, because the desktop .scroll-area rules are declared later in
   this file and would otherwise win the tie on equal specificity. */
.scroll-area.guide-area {
  display: flex;
  flex-direction: column;
  /* `safe` so a tall viewport centres the stack but a short one still starts
     at the top instead of clipping the heading out of reach. */
  justify-content: safe center;
  gap: clamp(18px, 2.6vh, 32px);
  /* The guide has no bottom bar, so it must not reserve --nav-height. */
  height: 100%;
  max-width: 940px;
  padding-block: clamp(22px, 4vh, 56px);
}
.guide-header { margin: 0; text-align: center; }
.guide-header p { max-width: 36ch; margin-inline: auto; color: var(--muted); }
.guide-steps { display: grid; gap: clamp(11px, 1.8vh, 18px); margin: 0; padding: 0; list-style: none; }
.guide-step {
  display: flex;
  /* Top-aligned so the icon reads against the step's title rather than
     drifting down beside the middle of the body copy. */
  align-items: flex-start;
  gap: 16px;
  padding: 17px;
  border-radius: 24px;
  background: rgb(255 249 233 / 74%);
  box-shadow: 0 8px 22px rgb(51 42 31 / 8%);
}
.guide-step-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff9e9;
  background: var(--green);
}
.guide-step-mark svg { width: 28px; height: 28px; }
.guide-step-number {
  position: absolute;
  top: -5px;
  inset-inline-start: -5px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--green);
  background: var(--amber);
  font-size: 13px;
  font-weight: 800;
}
.guide-step-copy h2 { margin: 0; color: var(--green); font-size: 21px; line-height: 1.2; letter-spacing: -.03em; }
.guide-step-copy p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.guide-start { width: 100%; }

@media (min-width: 900px) {
  /* Side by side, icon over text — the two steps read as a pair of peers
     rather than a list to scroll through. */
  .scroll-area.guide-area { max-width: 860px; gap: clamp(26px, 3.4vh, 44px); }
  .guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 26px); }
  .guide-step { flex-direction: column; align-items: center; gap: 20px; padding: clamp(30px, 3vw, 46px) clamp(22px, 2vw, 30px); text-align: center; }
  .guide-step-mark { width: 76px; height: 76px; }
  .guide-step-mark svg { width: 34px; height: 34px; }
  .guide-step-number { width: 28px; height: 28px; font-size: 14px; }
  .guide-step-copy h2 { font-size: 24px; }
  .guide-step-copy p { font-size: 17px; }
  .guide-start { width: max-content; min-width: 320px; margin-inline: auto; padding-inline: 34px; }
}


/* ---------------------------------------------------------------------------
   Sub-pages (#settings, #privacy, #terms) — full screens that sit outside the
   tab bar, like the place detail sheet. Same paper, same cards, same green;
   nothing here introduces a second visual language.
   --------------------------------------------------------------------------- */
.sub-page { padding-top: max(12px, env(safe-area-inset-top)); }
/* Double class so this beats the desktop .scroll-area rules declared earlier.
   No bottom bar on these screens, so no --nav-height to reserve. */
.scroll-area.sub-area { height: 100%; padding-bottom: max(46px, calc(env(safe-area-inset-bottom) + 30px)); }
.sub-header { display: flex; align-items: center; gap: 13px; margin: 2px 0 8px; }
.sub-back { width: 48px; height: 48px; }
.sub-back svg { width: 26px; height: 26px; }
.sub-header h1 { margin: 0; color: var(--green); font-size: 31px; line-height: 1.14; letter-spacing: -.045em; }
.sub-intro { margin: 0 0 24px; color: var(--muted); font-size: 16.5px; line-height: 1.5; }

/* ---- Settings rows ------------------------------------------------------ */
.setting-group { margin-bottom: 26px; }
.setting-group > h2 { margin: 0 0 9px; padding-inline-start: 4px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
/* Arabic has no letter case, and tracking pulls its joined letters apart. */
.arabic .setting-group > h2 { font-size: 14.5px; letter-spacing: 0; text-transform: none; }
.setting-card { overflow: hidden; border-radius: 22px; background: rgb(255 249 233 / 74%); box-shadow: 0 8px 22px rgb(51 42 31 / 8%); }
.setting-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 17px; border: 0; background: transparent; color: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.setting-row + .setting-row { border-top: 1px solid rgb(13 68 64 / 9%); }
.setting-row > svg:first-child { width: 24px; height: 24px; flex: 0 0 auto; color: var(--green); }
.setting-row-copy { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.setting-row-copy strong { font-size: 17px; font-weight: 700; line-height: 1.3; }
.setting-row-copy small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.setting-row-go { display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); }
.setting-row-go svg { width: 20px; height: 20px; }
/* A whole row jumping 5% smaller reads as a glitch, not a tap. */
.setting-row:active { transform: none; opacity: .7; }
.setting-row.is-danger > svg:first-child, .setting-row.is-danger .setting-row-copy strong { color: var(--clay); }

.setting-block { display: grid; justify-items: start; gap: 13px; padding: 17px; }
.setting-block-body { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.setting-block-body strong { color: var(--ink); }
.setting-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; margin: 0; padding: 11px 13px; border-radius: 14px; background: rgb(13 68 64 / 6%); font-size: 14.5px; line-height: 1.45; }
.setting-state span { color: var(--muted); }
.setting-state strong { color: var(--green); }
.setting-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.secondary-button { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 1.5px solid rgb(13 68 64 / 28%); border-radius: 999px; color: var(--green); background: rgb(255 252 242 / 70%); font-size: 16px; font-weight: 700; cursor: pointer; }
.secondary-button svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---- Delete account ----------------------------------------------------- */
/* Clay, a warning mark and a full border: this is the only destructive control
   in the app and it must not look like the rows above it. */
.delete-panel { display: grid; justify-items: start; gap: 12px; padding: 20px 18px; border: 2px solid rgb(205 75 39 / 34%); border-radius: 22px; background: rgb(252 237 228 / 82%); }
.delete-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff4ec; background: var(--clay); }
.delete-mark svg { width: 24px; height: 24px; }
.delete-panel h3 { margin: 0; color: var(--clay); font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.delete-panel > p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.delete-panel ul { display: grid; gap: 7px; margin: 0; padding-inline-start: 21px; font-size: 15px; line-height: 1.55; }
.delete-actions { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
.delete-actions .secondary-button { justify-content: center; }
.danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 20px; border: 0; border-radius: 999px; color: #fff4ec; background: var(--clay); box-shadow: 0 8px 18px rgb(205 75 39 / 26%); font-size: 17px; font-weight: 700; cursor: pointer; }
.danger-button svg { width: 21px; height: 21px; flex: 0 0 auto; }
.delete-working { margin: 0; color: var(--clay); font-size: 16px; font-weight: 700; }

/* ---- Inline legal links ------------------------------------------------- */
.legal-consent { margin: 15px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
.legal-consent a { color: var(--green); font-weight: 700; text-underline-offset: 2px; }
.link-button { padding: 4px 2px; border: 0; background: none; color: var(--green); font-size: 14.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.map-status-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 15px 0 0; }

/* ---- Privacy Policy / Terms of Use -------------------------------------- */
/* Deliberately narrower than the rest of the app: a measure of roughly 70
   characters is the difference between a policy someone reads and a wall of
   text they scroll past. */
.legal-area { max-width: 760px; }
/* `dir="ltr"` on the <time> is what keeps the ISO date from being read out
   backwards in Arabic; the isolate stops it disturbing the label beside it. */
.legal-updated { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.legal-updated time { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.legal-lead { margin: 12px 0 0; font-size: 17.5px; line-height: 1.55; }
.legal-toc { margin: 22px 0 4px; padding: 16px 18px; border-radius: 20px; background: rgb(255 249 233 / 70%); box-shadow: 0 6px 18px rgb(51 42 31 / 7%); }
.legal-toc-label { margin: 0 0 9px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.arabic .legal-toc-label { font-size: 14px; letter-spacing: 0; text-transform: none; }
.legal-toc ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { display: flex; align-items: baseline; gap: 9px; counter-increment: toc; }
.legal-toc li::before { content: counter(toc) "."; flex: 0 0 auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.legal-toc .link-button { font-size: 15.5px; font-weight: 600; line-height: 1.5; text-align: start; text-decoration: none; }
.legal-toc .link-button:hover { text-decoration: underline; }
.legal-toc .link-button:active { transform: none; opacity: .65; }
.legal-section { padding-top: 24px; }
.legal-section + .legal-section { border-top: 1px solid rgb(13 68 64 / 10%); }
.legal-section h2 { margin: 0 0 11px; color: var(--green); font-size: 22px; line-height: 1.24; letter-spacing: -.03em; scroll-margin-top: 14px; }
.legal-section p { margin: 0 0 13px; font-size: 16px; line-height: 1.68; }
.legal-section > :last-child { margin-bottom: 0; }
.legal-note { padding: 14px 16px; border-inline-start: 4px solid var(--amber); border-radius: 16px; background: rgb(239 164 42 / 15%); font-weight: 700; }
.legal-list { display: grid; gap: 9px; margin: 0 0 14px; padding-inline-start: 22px; font-size: 16px; line-height: 1.62; }
.legal-terms { margin: 0 0 14px; }
.legal-terms dt { margin-top: 16px; font-size: 16px; font-weight: 700; line-height: 1.42; }
.legal-terms dt:first-child { margin-top: 0; }
.legal-terms dd { margin: 6px 0 0; padding-inline-start: 14px; border-inline-start: 3px solid rgb(13 68 64 / 15%); color: var(--muted); font-size: 15.5px; line-height: 1.62; }

/* icons.arrow and icons.back point left-to-right and have no RTL variant. */
.arabic .sub-back svg, .arabic .setting-row-go svg { transform: scaleX(-1); }
/* The gear on the Saved header is an anchor now, so it needs the reset. */
.account-button { text-decoration: none; }
/* Sits above the guide heading rather than beside it, so it cannot squeeze the
   title on a narrow phone. */
.guide-header { position: relative; }
.guide-language { position: absolute; inset-inline-end: 0; top: -4px; min-width: 64px; padding-inline: 12px; font-size: 15px; }

@media (min-width: 900px) {
  .scroll-area.sub-area { max-width: 800px; }
  .sub-header h1 { font-size: 39px; }
  .sub-intro { font-size: 18px; }
  .setting-row { padding: 18px 22px; }
  .setting-block { padding: 20px 22px; }
  .setting-row-copy strong { font-size: 18px; }
  .setting-row-copy small { font-size: 14.5px; }
  .delete-panel { padding: 24px 22px; }
  .delete-actions { grid-auto-flow: column; justify-content: start; }
  .legal-lead { font-size: 19px; }
  .legal-section h2 { font-size: 26px; }
  .legal-section p, .legal-list { font-size: 17px; }
  .legal-terms dd { font-size: 16.5px; }
}

/* ---------------------------------------------------------------------------
   Standalone privacy.html / terms.html — the same documents as an ordinary web
   page, which is what an app-store listing's privacy-policy URL has to point
   at. They reuse everything above; all that changes is that the body scrolls
   like a document instead of being a fixed app shell, and both languages sit
   on the one page.
   --------------------------------------------------------------------------- */
body.legal-document { position: static; overflow: visible; min-height: 100vh; }
.legal-document .legal-standalone { max-width: 820px; margin-inline: auto; padding: clamp(26px, 6vw, 64px) var(--page-gutter) 80px; }
.legal-document .legal-masthead { margin-bottom: 30px; }
.legal-document .legal-masthead a { display: inline-block; }
.legal-document .legal-masthead img { display: block; width: 128px; height: auto; }
.legal-document .legal-edition { margin-top: 58px; padding-top: 36px; border-top: 2px solid rgb(13 68 64 / 14%); }
.legal-document .legal-edition:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-document h1 { margin: 0; color: var(--green); font-size: clamp(31px, 5vw, 43px); line-height: 1.12; letter-spacing: -.045em; }
.legal-document .legal-toc { margin-bottom: 8px; }
.legal-document .legal-toc a { color: var(--green); font-size: 15.5px; font-weight: 600; line-height: 1.5; text-decoration: none; }
.legal-document .legal-toc a:hover { text-decoration: underline; }
.legal-document .legal-switch { margin: 24px 0 0; color: var(--muted); font-size: 15px; }
.legal-document .legal-switch a { color: var(--green); font-weight: 700; }
/* The Arabic half of a bilingual page: one RTL island inside an LTR document. */
.legal-document .legal-edition[dir="rtl"] { font-family: "Tajawal", Tahoma, Arial, sans-serif; font-weight: 500; }
.legal-document .legal-edition[dir="rtl"] h1, .legal-document .legal-edition[dir="rtl"] h2 { font-weight: 800; }
.legal-document .legal-edition[dir="rtl"] .legal-toc-label { font-size: 14px; letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }