/* ═══════════════════════════════════════════════════════════════════
   بكّة — conversation-first surface.
   Layered on app.css: reuses its tokens, adds only what the ask-first
   page needs. Every colour here is a token so dark mode comes free.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ASK HERO ─────────────────────────────────────────────────────── */
.ask-hero {
  position: relative; min-height: 82vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 120px 20px 60px; overflow: hidden;
}
.ask-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: .55;
}
.ask-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 12%, var(--black)) 0%,
    color-mix(in srgb, var(--black) 88%, transparent) 52%,
    var(--black) 100%);
}
.ask-inner { position: relative; z-index: 2; width: 100%; max-width: 720px; }
.ask-eyebrow {
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .74rem;
  letter-spacing: .22em; color: var(--gold); text-transform: uppercase;
  margin-bottom: 14px; display: block;
}
.ask-title {
  font-family: var(--font-display, 'Amiri', serif);
  font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.35;
  color: var(--text-main); margin: 0 0 10px;
}
.ask-sub {
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-weight: 300;
  font-size: clamp(.9rem, 2.2vw, 1.02rem); color: var(--text-muted);
  margin: 0 auto 30px; max-width: 480px; line-height: 1.9;
}

/* The single most important control on the site. */
.ask-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--black-3); border: 1.5px solid var(--border-gold);
  border-radius: 999px; padding: 7px 7px 7px 18px;
  box-shadow: 0 8px 34px var(--gold-ghost), 0 2px 10px rgba(0,0,0,.05);
  transition: border-color .2s, box-shadow .2s;
}
.ask-box:focus-within {
  border-color: var(--accent); box-shadow: 0 10px 40px var(--accent-shadow);
}
#ask-input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: 1rem;
  color: var(--text-main); padding: 12px 4px;
}
#ask-input::placeholder { color: var(--text-faint); }
.ask-btn {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--gold); color: var(--on-gold);
  transition: transform .15s, background .2s;
}
.ask-btn:hover:not(:disabled) { background: var(--gold-bright); transform: scale(1.06); }
.ask-btn:disabled { opacity: .45; cursor: default; }
.ask-btn.ghost { background: transparent; color: var(--text-muted); }
.ask-btn.ghost:hover { background: var(--gold-ghost); color: var(--gold); transform: none; }
.ask-btn.recording { background: #C0392B; color: #fff; animation: pulse-rec 1.2s infinite; }
@keyframes pulse-rec { 50% { box-shadow: 0 0 0 8px rgba(192,57,43,.18); } }

/* ── LOCATION + CHIPS ─────────────────────────────────────────────── */
.geo-row {
  margin-top: 18px; display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; min-height: 34px;
}
.geo-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--gold-ghost); border: 1px solid var(--border-gold);
  color: var(--gold-dim); border-radius: 999px; padding: 8px 16px;
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .82rem;
  transition: background .2s, color .2s;
}
.geo-btn:hover { background: var(--gold-glow); color: var(--gold); }
.geo-status {
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .8rem;
  color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px;
}
.geo-status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-ghost);
}
#chips {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
}
.chip {
  cursor: pointer; border: 1px solid var(--border-card);
  background: var(--black-4); color: var(--text-main);
  border-radius: 999px; padding: 9px 16px;
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .82rem;
  transition: border-color .18s, background .18s, transform .15s;
}
.chip:hover {
  border-color: var(--gold); background: var(--gold-ghost);
  color: var(--gold-dim); transform: translateY(-1px);
}

/* ── CONVERSATION ─────────────────────────────────────────────────────────
   Read as a chat, not as a page of Q&A sections. The earlier layout put the
   question in a heading with a rule under it and the answer far below at full
   width, so a turn looked like a document section and the reply felt detached
   from the question that prompted it. Bubbles, a shared column, and tight
   vertical rhythm tie each exchange together. */
.thread-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
#thread:empty { display: none; }

.turn {
  margin: 0 0 4px;
  /* The composer is fixed over the bottom of the page, so scrolling a turn
     "to the end" would park it underneath — content unreadable and buttons
     unclickable. Reserve the composer's height when scrolling. */
  scroll-margin-bottom: 132px;
}
body.routing .turn { scroll-margin-bottom: 205px; }
.msg { display: flex; gap: 9px; margin-bottom: 14px; align-items: flex-start; }

/* Logical alignment: the visitor's own words sit on the end side, which is the
   left in Arabic and the right in English, without a direction-specific rule. */
.msg-user { justify-content: flex-end; }
.msg-user .bubble {
  background: var(--gold-ghost); border: 1px solid var(--border-gold);
  border-end-end-radius: 5px; max-width: 82%;
  font-weight: 500; color: var(--text-main);
}
.msg-bot { justify-content: flex-start; }
.msg-main { min-width: 0; flex: 1; }
.msg-bot .bubble {
  background: var(--black-4); border: 1px solid var(--border-card);
  border-end-start-radius: 5px;
}
.msg-av {
  flex-shrink: 0; width: 29px; height: 29px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 2px;
  background: var(--gold-ghost); border: 1px solid var(--border-gold); color: var(--gold);
}
.msg-av svg { width: 15px; height: 15px; }

.bubble {
  border-radius: 15px; padding: 11px 15px;
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .93rem;
  line-height: 1.85; color: var(--text-main); overflow-wrap: anywhere;
}
.bubble p { margin: 0 0 9px; font-weight: 300; }
.bubble p:last-child { margin-bottom: 0; }
.bubble p.err { color: #C0392B; }

.tbl-wrap { overflow-x: auto; margin: 11px 0 4px; }
.ans-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .82rem;
}
.ans-table th, .ans-table td {
  border: 1px solid var(--border-card); padding: 7px 10px; text-align: start;
}
.ans-table th { background: var(--gold-ghost); color: var(--gold-dim); font-weight: 600; }

.thinking { display: inline-flex; gap: 5px; padding: 3px 0; }
.thinking span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  animation: think 1.3s infinite ease-in-out;
}
.thinking span:nth-child(2) { animation-delay: .18s; }
.thinking span:nth-child(3) { animation-delay: .36s; }
@keyframes think { 0%,60%,100% { opacity:.25; transform:translateY(0);} 30% { opacity:1; transform:translateY(-4px);} }

/* ── CHATTING STATE ───────────────────────────────────────────────────────
   Once there is a conversation, the landing hero has done its job. It folds
   away and the ask box docks to the bottom as a composer, so the reply is
   never far below the question that produced it. */
body.chatting .ask-hero {
  min-height: 0; padding: 96px 16px 8px; justify-content: flex-start;
  /* .ask-hero carries z-index:2, which makes it a stacking context — so the
     composer's own z-index was scoped inside it and later sections (also z:2,
     but further down the DOM) painted over the docked input. Raise the hero
     itself; the composer rides along. Stays under the nav at 5000. */
  z-index: 70;
}
body.chatting .ask-hero-bg,
body.chatting .ask-hero-veil,
body.chatting .ask-eyebrow,
body.chatting .ask-title,
body.chatting .ask-sub,
body.chatting #chips { display: none; }
body.chatting .geo-row { margin: 0 0 6px; }
body.chatting .geo-row .geo-status { font-size: .74rem; }

body.chatting .ask-box {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  max-width: 760px; margin: 0 auto; border-radius: 16px 16px 0 0;
  border-bottom: none; box-shadow: 0 -6px 30px rgba(0,0,0,.10);
  background: var(--black-3);
}
/* The composer floats over the page, so the last message needs room to clear it. */
body.chatting .thread-wrap { padding-bottom: 128px; }
@supports (padding: env(safe-area-inset-bottom)) {
  body.chatting .ask-box { padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
}

/* ── PLACE CARDS — the answer's other half ────────────────────────── */
.a-places {
  display: grid; gap: 11px; margin-top: 20px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.place-card {
  border: 1px solid var(--border-card); border-radius: 13px;
  background: var(--black-3); padding: 14px 15px; cursor: pointer;
  transition: border-color .18s, transform .15s, box-shadow .18s;
}
.place-card:hover {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--gold-ghost);
}
.pc-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 7px;
}
.pc-cat {
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .66rem;
  letter-spacing: .04em; color: var(--gold-dim);
  background: var(--gold-ghost); border-radius: 999px; padding: 3px 9px;
}
.pc-dist {
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .72rem;
  color: var(--text-muted); white-space: nowrap;
}
.pc-name {
  margin: 0 0 5px; font-family: var(--font-ar, 'Tajawal', sans-serif);
  font-size: .95rem; font-weight: 600; color: var(--text-main); line-height: 1.5;
}
.pc-note {
  margin: 0 0 10px; font-family: var(--font-ar, 'Tajawal', sans-serif);
  font-size: .76rem; font-weight: 300; color: var(--text-muted); line-height: 1.75;
}
.pc-actions { display: flex; gap: 8px; }
.pc-go {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .75rem;
  color: var(--gold-dim); border: 1px solid var(--border-gold);
  border-radius: 999px; padding: 5px 12px; transition: background .18s, color .18s;
}
.pc-go:hover { background: var(--gold); color: var(--on-gold); }

/* ── BROWSE ───────────────────────────────────────────────────────── */
.browse-grid {
  display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.route-card {
  border: 1px solid var(--border-card); border-radius: 15px;
  background: var(--black-3); padding: 20px; transition: border-color .18s, transform .15s;
}
.route-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.rc-num {
  font-family: var(--font-display, 'Amiri', serif); font-size: 1.7rem;
  color: var(--gold); line-height: 1; margin-bottom: 8px;
}
.rc-name {
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: 1rem;
  font-weight: 600; color: var(--text-main); margin: 0 0 5px;
}
.rc-dir {
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .76rem;
  color: var(--text-muted); margin: 0 0 12px; line-height: 1.7;
}
.rc-stops { list-style: none; padding: 0; margin: 0 0 14px; }
.rc-stops li {
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .8rem;
  font-weight: 300; color: var(--text-main); padding: 4px 0 4px 0;
  padding-inline-start: 15px; position: relative; line-height: 1.7;
}
.rc-stops li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.rc-btn {
  width: 100%; cursor: pointer; border: 1px solid var(--border-gold);
  background: var(--gold-ghost); color: var(--gold-dim); border-radius: 999px;
  padding: 9px; font-family: var(--font-ar, 'Tajawal', sans-serif);
  font-size: .8rem; transition: background .18s, color .18s;
}
.rc-btn:hover { background: var(--gold); color: var(--on-gold); }

/* ── TOOLS STRIP ──────────────────────────────────────────────────── */
.tools-strip {
  display: grid; gap: 12px; max-width: 900px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tool-link {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; padding: 20px 14px; border-radius: 14px;
  border: 1px solid var(--border-card); background: var(--black-3);
  transition: border-color .18s, transform .15s;
}
.tool-link:hover { border-color: var(--gold); transform: translateY(-2px); }
.tool-link .ti { font-size: 1.5rem; }
.tool-link .tl {
  font-family: var(--font-ar, 'Tajawal', sans-serif); font-size: .84rem;
  color: var(--text-main); text-align: center;
}

@media (max-width: 640px) {
  .ask-hero { min-height: 76vh; padding: 100px 16px 44px; }
  .a-places { grid-template-columns: 1fr; }
  #chips .chip { font-size: .78rem; padding: 8px 13px; }
}

/* ── WORDMARK ─────────────────────────────────────────────────────────────
   The old nav logo was a generated PNG reading "كرام GUIDE" — 619 KB, and the
   wrong name now that the platform is بكّة and كِرام is the assistant inside
   it. Type renders sharper at every density and weighs nothing. */
.bakkah-wordmark { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.bw-main {
  font-family: var(--font-display, 'Amiri', serif); font-size: 1.65rem;
  font-weight: 700; color: var(--gold); letter-spacing: .01em;
}
.bw-sub {
  font-family: 'Tajawal', sans-serif; font-size: .52rem; font-weight: 600;
  letter-spacing: .32em; margin-top: 3px;
}
/* The wordmark sits on two very different surfaces. At rest it is over the
   pale hero, where the bright gold washes out; scrolled, it is over the brand
   green, where the bright gold is what makes it read. Previous rules assumed a
   dark bar in both states and left "BAKKAH" near-invisible in light mode. */
/* --gold-dim on the warm beige scored 2.94, just under the 3.0 large-text
   floor. --accent is the brand green in light and gold in dark, so it clears
   the bar in both and keeps the mark on-brand either way. */
nav .bw-main { color: var(--accent); }
nav .bw-sub  { color: var(--nav-top-fg-dim); }
nav.scrolled .bw-main { color: var(--gold-bright); }
nav.scrolled .bw-sub  { color: var(--nav-solid-fg-dim); }
.pc-ar {
  display: block; font-size: .78rem; font-weight: 400;
  color: var(--text-muted); margin-top: 2px; direction: rtl;
}

/* ── CONVERSATIONS PANEL ──────────────────────────────────────────────────
   A slide-over sheet rather than a persistent sidebar: this is a phone-first
   tool used while walking, and a permanent column would eat the width the
   answer needs. */
.threads-btn { position: relative; }
.th-badge {
  position: absolute; top: -3px; inset-inline-end: -3px; min-width: 15px; height: 15px;
  border-radius: 999px; background: var(--gold); color: #1A1714;
  font-size: .6rem; font-weight: 700; display: grid; place-items: center; padding: 0 3px;
}
#threads-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 100000;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
#threads-scrim.open { opacity: 1; pointer-events: auto; }
#threads-panel {
  position: fixed; top: 0; inset-inline-start: 0; bottom: 0; width: min(330px, 86vw);
  background: var(--black-3); border-inline-end: 1px solid var(--border-card);
  z-index: 100001; display: flex; flex-direction: column;
  transform: translateX(-102%); transition: transform .26s cubic-bezier(.4,0,.2,1);
}
[dir="rtl"] #threads-panel { transform: translateX(102%); }
#threads-panel.open, [dir="rtl"] #threads-panel.open { transform: translateX(0); }
.th-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 16px 14px; border-bottom: 1px solid var(--border-card);
}
.th-head h3 {
  margin: 0; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .98rem; font-weight: 600; color: var(--text-main);
}
.th-x {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 1.1rem; line-height: 1; padding: 4px 6px; border-radius: 7px;
}
.th-x:hover { background: var(--surface-hover); color: var(--text-main); }
#threads-new {
  margin: 14px 16px 6px; padding: 11px; cursor: pointer; border-radius: 11px;
  border: 1px dashed var(--border-gold); background: var(--gold-ghost);
  color: var(--gold-dim); font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .85rem; display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .18s, color .18s;
}
#threads-new:hover { background: var(--gold); color: var(--on-gold); border-style: solid; }
#threads-body { flex: 1; overflow-y: auto; padding: 8px 12px 20px; }
.th-item {
  display: flex; align-items: stretch; gap: 4px; margin-bottom: 5px;
  border-radius: 10px; transition: background .16s;
}
.th-item:hover { background: var(--surface-hover); }
.th-item.th-active { background: var(--gold-ghost); }
.th-open {
  flex: 1; min-width: 0; text-align: start; cursor: pointer;
  background: none; border: none; padding: 11px 10px; display: block;
}
.th-title {
  display: block; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .84rem; color: var(--text-main); line-height: 1.55;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th-meta {
  display: block; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .69rem; color: var(--text-muted); margin-top: 3px;
}
.th-del {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-faint); padding: 0 9px; border-radius: 10px;
  opacity: 0; transition: opacity .16s, color .16s;
}
.th-item:hover .th-del, .th-item:focus-within .th-del { opacity: 1; }
.th-del:hover { color: #C0392B; }
.th-empty, .th-note {
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .78rem;
  color: var(--text-muted); text-align: center; line-height: 1.9; padding: 22px 10px;
}
.th-note { font-size: .68rem; padding: 12px 6px 0; }
.th-clear {
  width: 100%; margin-top: 14px; padding: 9px; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--border-card); background: none; color: var(--text-muted);
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .76rem;
  transition: border-color .18s, color .18s;
}
.th-clear:hover { border-color: #C0392B; color: #C0392B; }
@media (max-width: 640px) { .th-del { opacity: 1; } }

/* ── ACTIVE ROUTE ─────────────────────────────────────────────────────────
   A companion bar that persists across turns: which stop is next, how far,
   and what has been visited. Sits above the composer so both stay reachable
   with a thumb. */
.route-start {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  margin-bottom: 11px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--gold); color: var(--on-gold);
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .82rem; font-weight: 600;
  transition: filter .18s, transform .15s;
}
.route-start:hover { filter: brightness(1.07); transform: translateY(-1px); }

#route-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  max-width: 760px; margin: 0 auto;
  background: var(--black-3); border: 1px solid var(--border-gold); border-bottom: none;
  border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,.14);
  transform: translateY(101%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  max-height: 76vh; display: flex; flex-direction: column;
}
#route-bar.on { transform: translateY(0); }
/* The composer lifts to make room, so neither covers the other. */
body.routing.chatting .ask-box { bottom: 62px; }
body.routing.chatting .thread-wrap { padding-bottom: 200px; }

.rb-head {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: none; border: none; padding: 11px 15px; position: relative; text-align: start;
}
.rb-prog {
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--border-card); border-radius: 999px; overflow: hidden;
}
.rb-fill { display: block; height: 100%; background: var(--accent); transition: width .35s; }
.rb-txt { flex: 1; min-width: 0; }
.rb-count {
  display: block; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .68rem; color: var(--gold-dim); letter-spacing: .02em;
}
.rb-next {
  display: block; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .84rem; color: var(--text-main); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-caret { color: var(--text-muted); font-size: .62rem; transition: transform .25s; }
#route-bar.open .rb-caret { transform: rotate(180deg); }
.rb-body { display: none; overflow-y: auto; padding: 0 12px 14px; }
#route-bar.open .rb-body { display: block; }

.rb-stops { list-style: none; margin: 0; padding: 0; }
.rb-stops li {
  display: flex; align-items: center; gap: 8px; padding: 8px 4px;
  border-top: 1px solid var(--border-card);
}
.rb-stops li.current { background: var(--gold-ghost); border-radius: 9px; }
.rb-stops li.done .rb-name { color: var(--text-faint); text-decoration: line-through; }
.rb-check {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-gold); background: none; color: var(--gold-dim);
  font-size: .72rem; display: grid; place-items: center;
}
.rb-stops li.done .rb-check { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.rb-name {
  flex: 1; min-width: 0; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .82rem; color: var(--text-main);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-go {
  flex-shrink: 0; font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .68rem;
  color: var(--gold-dim); text-decoration: none; border: 1px solid var(--border-gold);
  border-radius: 999px; padding: 3px 9px;
}
.rb-ops { display: flex; gap: 1px; flex-shrink: 0; }
.rb-ops button {
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  font-size: .74rem; padding: 3px 5px; border-radius: 6px;
}
.rb-ops button:hover { background: var(--surface-hover); color: var(--text-main); }
.rb-note {
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .66rem;
  color: var(--text-muted); line-height: 1.8; margin: 11px 2px 0; text-align: center;
}
.rb-end {
  width: 100%; margin-top: 9px; padding: 9px; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--border-card); background: none; color: var(--text-muted);
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .76rem;
}
.rb-end:hover { border-color: #C0392B; color: #C0392B; }

/* Arrival announcement */
.arrive-toast {
  position: fixed; inset-inline: 14px; bottom: 130px; z-index: 90;
  max-width: 420px; margin: 0 auto;
  background: var(--black-3); border: 1px solid var(--gold);
  border-radius: 15px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(14px); transition: opacity .28s, transform .28s;
}
.arrive-toast.show { opacity: 1; transform: translateY(0); }
.at-title {
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .9rem;
  font-weight: 600; color: var(--text-main); margin-bottom: 10px; line-height: 1.6;
}
.at-actions { display: flex; gap: 8px; }
.at-ask, .at-close {
  cursor: pointer; border-radius: 999px; padding: 7px 14px;
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .78rem;
}
.at-ask { border: none; background: var(--gold); color: var(--on-gold); font-weight: 600; }
.at-close { border: 1px solid var(--border-card); background: none; color: var(--text-muted); }

/* ── SITE BROWSE + DETAIL ─────────────────────────────────────────────────
   The corpus is 50 descriptions averaging ~380 characters — the site's largest
   content asset. The conversation-first rebuild left it reachable only by
   asking the bot; these bring back reading. */
.site-browse {
  margin-top: 28px; border: 1px solid var(--border-card);
  border-radius: 16px; background: var(--black-3); overflow: hidden;
}
.site-list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 16px 16px 10px;
}
.site-list-head h3 {
  margin: 0; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .98rem; font-weight: 600; color: var(--text-main);
}
.site-list-head span {
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .76rem; color: var(--text-muted);
}
.site-search {
  display: flex; align-items: center; gap: 9px; margin: 0 16px 12px;
  padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--border-card); background: var(--black-4);
  color: var(--text-muted);
}
.site-search:focus-within { border-color: var(--accent); color: var(--accent); }
#site-search {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .85rem; color: var(--text-main);
}
#site-search::-webkit-search-cancel-button { display: none; }
#site-search-clear {
  border: none; background: none; cursor: pointer; color: var(--text-faint);
  font-size: .8rem; padding: 2px 5px; border-radius: 6px;
}
#site-search-clear:hover { color: var(--text-main); background: var(--surface-hover); }

/* The whole point: the panel's height never depends on how many sites exist. */
#site-list-scroll {
  max-height: 440px; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px 16px; scrollbar-width: thin;
}
#site-list-scroll::-webkit-scrollbar { width: 7px; }
#site-list-scroll::-webkit-scrollbar-thumb {
  background: var(--border-card-strong); border-radius: 999px;
}
#site-list {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.sl-item {
  text-align: start; cursor: pointer; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border-card); background: var(--black-4);
  transition: border-color .16s, background .16s;
}
.sl-item:hover { border-color: var(--gold); background: var(--gold-ghost); }
.sl-cat {
  display: block; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .64rem; color: var(--gold-dim); margin-bottom: 4px;
}
.sl-name {
  display: block; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .88rem; font-weight: 600; color: var(--text-main); line-height: 1.5;
}
.sl-desc {
  display: block; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .73rem; font-weight: 300; color: var(--text-muted);
  line-height: 1.8; margin-top: 5px;
}
.sl-empty {
  grid-column: 1 / -1; text-align: center; padding: 34px 12px; margin: 0;
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .82rem; color: var(--text-muted);
}
@media (max-width: 640px) {
  #site-list-scroll { max-height: 62vh; }
}

#site-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 100000;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
#site-scrim.open { opacity: 1; pointer-events: auto; }
#site-sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 100001;
  max-width: 620px; margin: 0 auto; max-height: 82vh; overflow-y: auto;
  background: var(--black-3); border: 1px solid var(--border-gold); border-bottom: none;
  border-radius: 20px 20px 0 0; padding: 26px 22px 30px;
  transform: translateY(102%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
#site-sheet.open { transform: translateY(0); }
.ss-x {
  position: absolute; top: 14px; inset-inline-end: 16px; background: none; border: none;
  cursor: pointer; color: var(--text-muted); font-size: 1.05rem; padding: 5px 7px; border-radius: 7px;
}
.ss-x:hover { background: var(--surface-hover); color: var(--text-main); }
.ss-cat {
  display: inline-block; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .7rem; color: var(--gold-dim); background: var(--gold-ghost);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 11px;
}
.ss-name {
  margin: 0 0 3px; font-family: var(--font-display,'Amiri',serif);
  font-size: 1.4rem; color: var(--text-main); line-height: 1.4;
}
.ss-ar {
  margin: 0 0 6px; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .88rem; color: var(--text-muted); direction: rtl;
}
.ss-dist {
  margin: 0 0 14px; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .78rem; color: var(--gold-dim);
}
.ss-desc {
  margin: 0 0 12px; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-weight: 300; font-size: .92rem; line-height: 2.05; color: var(--text-main);
}
.ss-note {
  margin: 0 0 16px; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .8rem; color: var(--text-muted); line-height: 1.9;
  padding: 9px 12px; background: var(--black-4); border-radius: 10px;
}
.ss-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.ss-go, .ss-map, .ss-ask {
  cursor: pointer; border-radius: 999px; padding: 9px 16px; text-decoration: none;
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .8rem;
}
.ss-go  { background: var(--gold); color: var(--on-gold); border: none; font-weight: 600; }
.ss-map { background: none; border: 1px solid var(--border-gold); color: var(--gold-dim); }
.ss-ask { background: none; border: 1px solid var(--border-card); color: var(--text-muted); }
.ss-map:hover, .ss-ask:hover { border-color: var(--gold); color: var(--gold); }

.pc-more {
  cursor: pointer; border: 1px solid var(--border-card); background: none;
  color: var(--text-muted); border-radius: 999px; padding: 5px 12px;
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .75rem;
}
.pc-more:hover { border-color: var(--gold); color: var(--gold-dim); }
.ss-srclang {
  margin: -4px 0 14px; font-family: var(--font-ar,'Tajawal',sans-serif);
  font-size: .72rem; color: var(--text-muted); font-style: italic;
}

/* ── MAP FRAME ────────────────────────────────────────────────────────────
   The old .map-shell was a two-column grid (stage + sidebar). This page has
   no sidebar, so reusing it left a 320px+ column reserved and empty — which
   in RTL pushed the whole map to the right with dead space beside it. */
.map-frame {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-card); width: 100%;
}
.map-frame #makkah-map { min-height: 0; width: 100%; }

/* Route cards preview a few stops; the rest expand on demand. */
.rc-count {
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .72rem;
  color: var(--gold-dim); margin: 0 0 8px;
}
.route-card .rc-hidden { display: none; }
.route-card.expanded .rc-hidden { display: list-item; }
.rc-toggle {
  background: none; border: none; cursor: pointer; padding: 4px 0 10px;
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .76rem;
  color: var(--gold-dim); text-decoration: underline; text-underline-offset: 3px;
}
.rc-toggle:hover { color: var(--gold); }

/* On a phone, four stacked route cards are two screens of scrolling before
   the visitor sees anything else — and a fifth route would add another half.
   A snapping horizontal rail keeps the section one card tall at any count. */
@media (max-width: 760px) {
  .browse-grid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; padding-bottom: 10px;
    margin-inline: -20px; padding-inline: 20px;
    scrollbar-width: none;
  }
  .browse-grid::-webkit-scrollbar { display: none; }
  .browse-grid .route-card {
    flex: 0 0 min(78vw, 300px); scroll-snap-align: center;
  }
  .routes-hint { display: block; }
}
.routes-hint {
  display: none; text-align: center; margin: 10px 0 0;
  font-family: var(--font-ar,'Tajawal',sans-serif); font-size: .7rem; color: var(--text-faint);
}

/* ── MOBILE NAV ───────────────────────────────────────────────────────────
   The old menu toggled display:none/flex, which cannot be animated at all —
   it appeared and vanished in a single frame. It also painted a hardcoded
   #0D0D0D panel that ignored the theme. Rebuilt as a themed sheet that slides
   from under the bar, with its items easing in behind it. */
.mobile-scrim {
  position: fixed; inset: 0; z-index: 4998;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.mobile-scrim.open {
  opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s;
}

nav.mobile-nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 4999;
  display: flex; flex-direction: column; gap: 4px;
  padding: 86px 14px 20px;
  background: var(--black-3);
  border-bottom: 1px solid var(--border-gold);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
  border-radius: 0 0 22px 22px;
  /* Slide the whole sheet up out of view rather than hiding it, so both
     directions animate. visibility keeps it out of the tab order when shut. */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.32, .72, 0, 1),
              visibility 0s linear .34s;
}
nav.mobile-nav.open {
  transform: translateY(0); visibility: visible;
  transition: transform .38s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}

nav.mobile-nav a {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; border-radius: 14px;
  background: var(--black-4); border: 1px solid transparent;
  text-decoration: none;
  font-family: var(--font-ar, 'Tajawal', sans-serif);
  font-size: .95rem; font-weight: 500; color: var(--text-main);
  /* Items trail the sheet in, which reads as one motion instead of a jump. */
  opacity: 0; transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease,
              background .18s, border-color .18s;
}
nav.mobile-nav.open a { opacity: 1; transform: translateY(0); }
nav.mobile-nav.open a:nth-child(1) { transition-delay: .10s, .10s, 0s, 0s; }
nav.mobile-nav.open a:nth-child(2) { transition-delay: .16s, .16s, 0s, 0s; }
nav.mobile-nav.open a:nth-child(3) { transition-delay: .22s, .22s, 0s, 0s; }
nav.mobile-nav a:active {
  background: var(--gold-ghost); border-color: var(--border-gold);
}
.mn-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--gold-ghost); border: 1px solid var(--border-gold);
}
.mn-label { flex: 1; min-width: 0; }
.mn-arrow {
  color: var(--text-faint); font-size: 1.25rem; line-height: 1;
  transform: scaleX(1);
}
[dir="ltr"] .mn-arrow { transform: scaleX(-1); }

/* Hamburger folds into an X so the button states read clearly. */
.nav-hamburger span { transform-origin: center; }
.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  nav.mobile-nav, nav.mobile-nav a, .mobile-scrim { transition-duration: .01ms; }
  nav.mobile-nav.open a { transition-delay: 0s; }
}