/* Nationwide Middle East interactive map — HUD styles.
   A slim, quiet HUD over the map: thin frosted plates, hairline borders, compact controls, one accent
   colour for the primary action of a surface, selection and progress. Seven named themes (Features →
   Interface theme; ?theme=<name> on one screen; public/js/themes.js lists them), each a complete palette on
   one of two bases: :root holds the light base, html[data-mode="dark"] the dark one (structure, shadows,
   status colours), and html[data-theme="<name>"] sets only the palette (surfaces, text, the accent family).
   The structure never changes. Every text pair is at least 4.5:1 and every control edge 3:1 (the ratios
   come from a script over every theme; the derived tints are noted next to their tokens). On the accent
   fill the text is --on-accent (dark on a light fill, light on a dark one) and on the hover fill
   --on-accent-strong; where the accent is text or an icon on a surface it uses --accent-text. */
:root {
  /* ── the light base (every theme below overrides the palette tokens) ── */
  /* surfaces */
  --surface-1: rgba(255, 255, 255, 0.9);    /* bars and plates over the map (frosted) */
  --surface-2: #ffffff;                     /* reading surfaces: card, filters, tutorial, dialogs */
  --raise: #f1f5f9;                         /* tiles, fact chips, the camera tile */
  --raise-hover: #e7edf4;
  --paper: #ffffff;                         /* chips, fields, quiet buttons, pin labels */
  --scrim: rgba(248, 250, 252, 0.985);      /* behind a photo */
  --veil: rgba(248, 250, 252, 0.86);        /* the attract screen */
  --halo: #ffffff;                          /* the ring around a focused control and the loop line */
  --line: rgba(15, 23, 42, 0.09);
  --line-strong: rgba(15, 23, 42, 0.16);
  /* text */
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #5f6e84;                        /* 5.2:1 on white, 4.7:1 or better on the tints and the frosted plate */
  --on-light: #0f172a;
  /* accent (the light base: azure; every theme sets its own) */
  --accent: #2563eb;
  --logo: var(--accent);                     /* the brand logo is drawn in the theme's main colour (inline SVG in currentColor) */
  --plate-text: var(--text); --plate-text-2: var(--text-2); --plate-text-3: var(--text-3); --plate-line: var(--line); /* text on the frosted plates (a theme whose plates are its main colour sets its own tone) */
  --accent-strong: #1d4ed8;
  --accent-text: #1d4ed8;                   /* the accent as text or an icon on a surface */
  --accent-tint: #eff6ff;
  --accent-tint-2: #dbeafe;
  --accent-ring: rgba(37, 99, 235, 0.32);
  --accent-wash: rgba(37, 99, 235, 0.14);
  --on-accent: #ffffff;
  --on-accent-strong: var(--on-accent);     /* text on the hover fill (a theme whose hover goes much darker sets a light one) */
  /* meaning (pins: border on paper · pills: text on a tint) */
  --sale: #168f5d;   --sale-text: #0b6b43;  --sale-tint: #e6f6ee;
  --rent: #4f46e5;   --rent-text: #4338ca;  --rent-tint: #eef2ff;
  --offer: #c2610c;  --offer-text: #9a3412; --offer-tint: #fff4e6;
  --sold: #b91c1c;   --sold-text: #991b1b;  --sold-tint: #fef2f2;
  --off: #7c8798;    --off-text: #475569;   --off-tint: #f1f5f9;
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --danger-tint: #fef2f2;
  /* the drawn hand (pose icons and the camera preview): the paper it is drawn on and the inks of the hands that are not in charge */
  --hand-fill: #ffffff;
  --hand-fill-accent: var(--accent-tint-2); /* the heading and attract hands: porcelain with a touch of the accent (opaque: the body of a lit hand) */
  --hand-paper: #ffffff;
  --hand-paper-other: #f8fafc;
  --hand-ink-arming: #475569;
  --hand-ink-other: #7c8798;
  --hand-frame: rgba(15, 23, 42, 0.45);
  /* shape, depth, rhythm */
  --r-xs: 6px;
  --r-control: 8px;
  --r-panel: 10px;
  --r-card: 12px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.07);
  --shadow-2: 0 1px 3px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.12);
  --shadow-pin: 0 1px 2px rgba(15, 23, 42, 0.22), 0 3px 8px rgba(15, 23, 42, 0.16);
  --glass: blur(14px) saturate(1.4);
  --edge: 16px;        /* distance of the HUD from the screen edge */
  --target: 44px;      /* smallest hit area of anything a hand can hold on (the dwell probe pads 8 px around the box) */
  --control: 36px;     /* the visible height of a button or a pill in the top bar */
  --bar: 44px;         /* height of the top-bar plates */
  --col: 340px;        /* listing card, filters */
  --legend-w: 260px;   /* the gesture guide */
  --cam-w: 160px;      /* the hand dock: a 16:9 tile, 160 × 90 */
  --t-fast: 120ms;
  --t-med: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* earlier names, still used by a few rules */
  --bg: #e8edf2;
  --map-bg: #dfe3e8;
  --panel: var(--surface-1);
  --panel-border: var(--line);
  --muted: var(--text-2);
  --shadow: var(--shadow-2);
  --radius: var(--r-panel);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  font-size: 14px;
  color-scheme: light;
}
/* ── The dark base ───────────────────────────────────────────────────── */
/* Near-black frosted plates, what the dark themes build on: each overrides the surfaces, the text and the
   accent family below, and keeps the status set (status text is ≥ 7.6:1 on its tint) unless noted. */
html[data-mode="dark"] {
  --surface-1: rgba(17, 19, 24, 0.74);
  --surface-2: #16181d;
  --raise: #1d2026;
  --raise-hover: #252931;
  --paper: #16181d;
  --scrim: rgba(11, 12, 16, 0.985);
  --veil: rgba(11, 12, 16, 0.86);
  --halo: #0b0c10;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #eceff3;
  --text-2: #aab2bf;
  --text-3: #8a93a3;                        /* 5.7:1 on surface-2, 5.3:1 on raise, 5.7:1 on the plate over the brightest map fill */
  --accent: #60a5fa;
  --accent-strong: #8ab4ff;                 /* hover and the hand's ink: the same tint as the text */
  --accent-text: #8ab4ff;
  --accent-tint: rgba(96, 165, 250, 0.14);
  --accent-tint-2: rgba(96, 165, 250, 0.26);
  --accent-ring: rgba(96, 165, 250, 0.4);
  --accent-wash: rgba(96, 165, 250, 0.18);
  --on-accent: #0b1220;
  --sale: #34d399;   --sale-text: #6ee7b7;  --sale-tint: #0f2a20;
  --rent: #818cf8;   --rent-text: #a5b4fc;  --rent-tint: #1b1f3b;
  --offer: #fb923c;  --offer-text: #fdba74; --offer-tint: #2f1d0b;
  --sold: #f87171;   --sold-text: #fca5a5;  --sold-tint: #2f1416;
  --off: #64748b;    --off-text: #aab2bf;   --off-tint: #1d2026;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --danger-tint: #2f1416;
  --hand-fill: #e3e8ef; /* the pose icons are a lit porcelain hand: its body stays light on the dark theme */
  --hand-fill-accent: color-mix(in srgb, var(--accent-text) 32%, #e3e8ef);
  --hand-paper: #16181d;
  --hand-paper-other: #1d2026;
  --hand-ink-arming: #aab2bf;
  --hand-ink-other: #6b7585;
  --hand-frame: rgba(236, 239, 243, 0.4);
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-pin: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4);
  --glass: blur(14px) saturate(140%);
  --bg: #0c0c0c;
  --map-bg: #dfe3e8; /* the map itself stays the light liberty style under the dark interface */
  color-scheme: dark;
}

/* ── The seven themes ────────────────────────────────────────────────── */
/* Each block sets only the palette. The frosted plate (--surface-1) is the base at an alpha; the tints are
   the accent at an alpha over the surface; the status set is the base's unless a theme names its own.
   "derived" marks a tone computed from a palette colour because a WCAG ratio needed it. */

/* The palettes themselves (every theme in its light and dark drawing) are generated into public/themes.css from
   public/js/themes.js by scripts/build-themes.mjs; they set the tokens below per html[data-theme][data-mode]. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
#map { position: absolute; inset: 0; z-index: 0; background: var(--map-bg); } /* z-index:0 keeps the map's own layers below the HUD */
button { font: inherit; color: inherit; }
/* keyboard focus: the accent on a halo in the page's own colour, so it shows on the map, on panels and on photos */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--halo); }
.ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.ico.pose { width: 22px; height: 22px; vertical-align: -6px; }
[data-icon], [data-pose] { display: inline-flex; align-items: center; justify-content: center; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
#topbar {
  position: fixed; top: var(--edge); inset-inline: var(--edge); z-index: 30;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  pointer-events: none;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; height: var(--bar); padding: 0 14px;
  pointer-events: auto; /* a plate covers the map: pins under it cannot be held on */
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-1); color: var(--plate-text); --text: var(--plate-text); --text-2: var(--plate-text-2); --text-3: var(--plate-text-3); --line: var(--plate-line);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
}
.brand-title { margin: 0; font-size: 0; line-height: 0; }
.brand-title a { display: inline-block; pointer-events: auto; border-radius: var(--r-xs); }
.brand-logo { display: block; height: 22px; color: var(--logo); } /* (inline SVG in currentColor: the theme's main colour, public/js/themes.js) */
.brand-logo svg { display: block; height: 100%; width: auto; }
.brand-divider { width: 1px; height: 18px; background: var(--line-strong); }
.brand-sub { color: var(--text-2); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.attract-logo { display: block; margin: 0 auto 20px; width: min(400px, 66vw); color: var(--logo); }
.attract-logo svg { display: block; width: 100%; height: auto; }

.topbar-right { display: flex; align-items: center; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: flex-end; }
.toolbar {
  display: flex; align-items: center; gap: 2px; padding: 3px; /* 3 + 36 + 3 = a 44 px plate, like the brand */
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-1); color: var(--plate-text); --text: var(--plate-text); --text-2: var(--plate-text-2); --text-3: var(--plate-text-3); --line: var(--plate-line);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
}
.hud-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: var(--control); padding: 0 11px;
  border-radius: var(--r-control); border: 1px solid transparent; background: transparent; color: var(--text);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hud-btn .ico { color: var(--text-2); }
.hud-btn:hover, .hud-btn.is-hover { background: var(--accent-tint); border-color: var(--accent-ring); color: var(--accent-text); }
.hud-btn:hover .ico, .hud-btn.is-hover .ico { color: var(--accent-text); }
.hud-btn.is-paused { color: var(--accent-text); background: var(--accent-tint); border-color: var(--accent-ring); }
.hud-btn.is-paused .ico { color: var(--accent-text); }
/* the Filters button stands alone, a pill as tall as the plates: it is the one control every visitor needs */
.filters-btn {
  min-height: var(--bar); padding: 0 14px; background: var(--surface-1); border-color: var(--line); border-radius: var(--r-panel); color: var(--plate-text); --text: var(--plate-text); --text-2: var(--plate-text-2); --text-3: var(--plate-text-3); --line: var(--plate-line);
  box-shadow: var(--shadow-1); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
}
.filters-btn .caret { width: 14px; height: 14px; color: var(--text-3); }
.filters-btn > .ico:first-child { color: var(--accent-text); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.filters-btn.ok .status-dot { background: var(--ok); }
.filters-btn.warn .status-dot { background: var(--warn); border-radius: 1px; transform: rotate(45deg); } /* a diamond: not colour alone */
.badge { color: var(--text-2); }

/* ── Buttons, chips ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--control); padding: 0 14px;
  border-radius: var(--r-control); border: 1px solid transparent; background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 650; font-size: 13px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover, .btn.is-hover { background: var(--accent-strong); color: var(--on-accent-strong); transform: scale(1.02); box-shadow: 0 0 0 3px var(--accent-ring); }
.btn.secondary { background: var(--paper); color: var(--text); border-color: var(--line-strong); }
.btn.secondary .ico { color: var(--accent-text); }
.btn.secondary:hover, .btn.secondary.is-hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-ring); }
.btn:disabled, .hud-btn:disabled { opacity: .45; pointer-events: none; cursor: default; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px;
  border-radius: var(--r-control); border: 1px solid var(--line-strong); background: var(--paper); color: var(--text);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip:hover, .chip.is-hover { background: var(--accent-tint); border-color: var(--accent); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip .icon { display: inline-flex; }
.chip .icon .ico { width: 14px; height: 14px; }
.icon-btn {
  position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; width: var(--control); height: var(--control);
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--text); box-shadow: var(--shadow-1); cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.icon-btn .ico { width: 18px; height: 18px; }
.icon-btn:hover, .icon-btn.is-hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Filters panel ───────────────────────────────────────────────────── */
#filters, #themes {
  position: fixed; top: calc(var(--edge) + var(--bar) + 12px); inset-inline-end: var(--edge); z-index: 36; width: var(--col); padding: 12px;
  max-height: calc(100vh - var(--edge) - var(--bar) - 28px); overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-8px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
#filters.open, #themes.open { opacity: 1; transform: none; }
/* the theme picker: one chip per theme, its swatch half plate colour, half accent (the colours are static here, since the
   page only carries the tokens of the theme it is in) */
#themes { width: 300px; }
#themes .muted { margin: 10px 0 0; }
.theme-chip .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel-head h2 { margin: 0; font-size: 14px; }
.panel-head .icon-btn { position: static; }
.filter-group { display: grid; gap: 5px; margin-bottom: 8px; }
.filter-group .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
#filters-count { padding-top: 8px; border-top: 1px solid var(--line); }

/* ── Gesture guide ───────────────────────────────────────────────────── */
#legend {
  position: fixed; top: calc(var(--edge) + var(--bar) + 12px); inset-inline-start: var(--edge); z-index: 31; width: var(--legend-w); padding: 8px 10px;
  /* the hand dock sits at the bottom; the open guide stops above it and scrolls if it must */
  max-height: calc(100vh - var(--edge) - var(--bar) - 12px - 170px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-1); color: var(--plate-text); --text: var(--plate-text); --text-2: var(--plate-text-2); --text-3: var(--plate-text-3); --line: var(--plate-line);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  pointer-events: auto; cursor: default; transition: border-color var(--t-fast) var(--ease);
}
#legend h2 { margin: 0; min-height: 26px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
#legend h2 .g { color: var(--accent-text); --hand-fill: var(--hand-fill-accent); }
#legend h2 .g .ico.pose { width: 26px; height: 26px; } /* (the finger outlines need the room) */
#legend h2 .hint { margin-inline-start: auto; font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--text-3); }
/* The links come before the list, so they keep their place when the guide opens under the cursor. */
.legend-links { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.legend-links a, .legend-links .link-btn {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 8px; border-radius: var(--r-xs);
  color: var(--text-2); font-size: 12.5px; text-decoration: none; background: none; border: 0; cursor: pointer; pointer-events: auto;
}
.legend-links a:hover, .legend-links .link-btn:hover, .legend-links .is-hover { color: var(--accent-text); background: var(--accent-tint); }
#legend ul { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); display: none; gap: 2px; }
#legend:hover, #legend.is-hover, #legend.pinned { border-color: var(--accent-ring); }
#legend:hover ul, #legend.is-hover ul, #legend.pinned ul { display: grid; }
#legend:hover .hint, #legend.is-hover .hint, #legend.pinned .hint { visibility: hidden; }
#legend li { display: flex; align-items: flex-start; gap: 8px; min-height: 30px; }
#legend li .g { width: 30px; height: 30px; flex: none; border-radius: var(--r-control); background: var(--accent-tint); color: var(--accent-text); }
#legend li .g .ico { width: 18px; height: 18px; }
#legend li .g .ico.pose { width: 26px; height: 26px; }
#legend li > div { padding-top: 1px; }
#legend b { display: block; font-size: 12.5px; line-height: 1.3; }
#legend small { display: block; color: var(--text-2); font-size: 12px; line-height: 1.3; }
body.no-back .legend-back { display: none; }
body.kiosk .consent-settings { display: none; }

/* ── Two-finger loop ─────────────────────────────────────────────────── */
#lasso { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 39; pointer-events: none; }
#lasso polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
#lasso .halo { stroke: var(--halo); stroke-width: 12; opacity: .95; }
#lasso .line { stroke: var(--accent); stroke-width: 6; fill: var(--accent-wash); }
#lasso circle { fill: var(--halo); stroke: var(--accent); stroke-width: 4; }
#lasso.closed .line { fill: rgba(52, 211, 153, 0.3); stroke: var(--sale); animation: lasso-flash .6s ease-out; }
#lasso.closed circle { stroke: var(--sale); }
@keyframes lasso-flash { from { fill: rgba(52, 211, 153, 0.55); } to { fill: rgba(52, 211, 153, 0.15); } }

/* ── Hand dock: where the hand is, the hold bar, what the hand is doing ── */
#cam-panel {
  position: fixed; inset-inline-start: var(--edge); bottom: var(--edge); z-index: 30; width: var(--cam-w);
  display: grid; gap: 0; pointer-events: auto; /* covers the map: pins under it cannot be held on */
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-1); color: var(--plate-text); --text: var(--plate-text); --text-2: var(--plate-text-2); --text-3: var(--plate-text-3); --line: var(--plate-line);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); overflow: hidden;
}
.cam-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--raise);
  transform: scaleX(-1); /* mirror video and drawing together */
}
.cam-frame video, .cam-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Privacy: the visitor sees a drawing of the hand, not themselves. The video keeps playing for the
   tracker (opacity, not display: a video that is not rendered may stop decoding) but is never painted. */
body:not(.preview-video) .cam-frame video { opacity: 0; }
#arm-bar { height: 2px; background: var(--raise); overflow: hidden; }
#arm-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .08s linear; }
.mode {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 8px; font-size: 12px; font-weight: 600; line-height: 1.25;
  border-inline-start: 2px solid transparent; transition: border-color var(--t-med) var(--ease);
}
.mode .mode-icon { width: 28px; height: 28px; flex: none; border-radius: var(--r-xs); background: var(--accent-tint); color: var(--accent-text); }
.mode .mode-icon .ico { width: 16px; height: 16px; }
.mode .mode-icon .ico.pose { width: 24px; height: 24px; }
.mode.idle { color: var(--text-2); }
.mode.idle .mode-icon { color: var(--text-3); background: var(--raise); }
.mode.grab, .mode.draw, .mode.point { border-inline-start-color: var(--accent); }
.mode.come { border-inline-start-color: var(--accent); color: var(--accent-text); background: var(--accent-tint); }
.mode.come .mode-icon { background: var(--paper); }
.mode.error { color: var(--danger); border-inline-start-color: var(--danger); }
.mode.error .mode-icon { color: var(--danger); background: var(--danger-tint); }
.mode.locked { color: var(--text); }
.mode.camera-off { color: var(--text-2); }
.cam-note { display: flex; align-items: center; gap: 5px; margin: 0; padding: 4px 8px 6px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.3; color: var(--text-3); }
.cam-note .ico { width: 12px; height: 12px; }
.hand-debug { margin: 0; padding: 6px 8px; border-top: 1px solid var(--line); font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-2); }
.hand-debug b { color: var(--text); }
body.preview-video .cam-note, body:not(.camera-on) .cam-note { display: none; }
/* no camera yet: no dead preview, no hold bar, no pause button; the camera button lives in the top bar */
body:not(.camera-on) .cam-frame, body:not(.camera-on) #arm-bar, body:not(.camera-on) #lock-btn { display: none; }
body:not(.consent-decided) .camera-toggle, body:not(.consent-decided) .camera-toggle-link { display: none; }
/* a kiosk has no mouse: a visitor who switched the camera off by hand could never switch it on again */
body.kiosk .camera-toggle, body.kiosk .camera-toggle-link { display: none; }
/* Photo viewer open: the hand stays in view above it, as a small tile; the viewer's own line says what to do. */
body.gallery-open #cam-panel { z-index: 46; width: 128px; bottom: 12px; }
body.gallery-open #mode-badge, body.gallery-open .cam-note, body.gallery-open .hand-debug { display: none; }
/* Kiosk attract screen: the first thing a passer-by sees move is their own hand. */
body.attract-open #cam-panel { z-index: 81; }

/* ── Hand cursor ─────────────────────────────────────────────────────── */
#cursor {
  position: fixed; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  z-index: 100; pointer-events: none; will-change: transform;
}
#cursor .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
/* its own contrast in both themes: a white band with a dark edge carries the accent progress, on the map, a panel or a photo */
#cursor .ring { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); }
#cursor .under { fill: rgba(255, 255, 255, 0.28); stroke: #fff; stroke-width: 7; }
#cursor .track { fill: none; stroke: rgba(15, 23, 42, 0.55); stroke-width: 1.5; } /* a dark edge on the white band: 4:1 on the band itself, so the ring shows on white panels too */
#cursor .progress {
  fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 125.66; stroke-dashoffset: 125.66;
}
#cursor .dot {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, .45);
  transition: transform var(--t-fast) var(--ease);
}
#cursor[data-variant="draw"] .dot { background: var(--accent-strong); transform: scale(1.4); }
#cursor[data-variant="zoom"] .dot { background: #fff; box-shadow: 0 0 0 3px var(--accent), 0 2px 8px rgba(0, 0, 0, .45); transform: scale(1.3); }

/* ── Pins ────────────────────────────────────────────────────────────── */
.listing-marker {
  --pin: var(--sale); --pin-tint: var(--sale-tint); --pin-text: var(--sale-text);
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  cursor: pointer; transform-origin: bottom center; transition: transform var(--t-fast) var(--ease);
}
.listing-marker.status-available, .listing-marker.offer-sale { --pin: var(--sale); --pin-tint: var(--sale-tint); --pin-text: var(--sale-text); }
.listing-marker.status-under-offer { --pin: var(--offer); --pin-tint: var(--offer-tint); --pin-text: var(--offer-text); }
.listing-marker.status-sold { --pin: var(--sold); --pin-tint: var(--sold-tint); --pin-text: var(--sold-text); }
.listing-marker.offer-rent { --pin: var(--rent); --pin-tint: var(--rent-tint); --pin-text: var(--rent-text); }
.listing-marker.is-offmarket { --pin: var(--off); }
.listing-marker.is-offmarket .pin-label { color: var(--off-text); background: var(--off-tint); }
.listing-marker.status-sold .pin-label { text-decoration: line-through; }
.listing-marker.is-approx .pin-label { border-style: dashed; }
.listing-marker.is-approx .pin-dot { border-style: dashed; }
.pin-dot {
  display: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pin);
  border: 2px solid var(--paper); box-shadow: var(--shadow-pin);
}
/* Zoomed out: dots. Mid zoom: compact labels. Close: full labels. */
body[data-zoom-band="far"] .pin-label, body[data-zoom-band="far"] .pin-tail { display: none; }
body[data-zoom-band="far"] .pin-dot { display: block; }
body[data-zoom-band="far"] .listing-marker.is-hover .pin-dot, body[data-zoom-band="far"] .listing-marker.is-active .pin-dot { transform: scale(1.4); }
body[data-zoom-band="mid"] .pin-label { font-size: 12px; padding: 5px 8px; }
.pin-label {
  background: var(--pin-tint); color: var(--pin-text); font-weight: 700; font-size: 13px; line-height: 1; /* the theme's own colours on the map, not a neutral label with a coloured edge */
  padding: 7px 10px; border-radius: 999px; border: 2px solid var(--pin);
  box-shadow: var(--shadow-pin); white-space: nowrap;
}
.pin-tail {
  width: 0; height: 0; margin-top: -1px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--pin);
}
.listing-marker.is-hover { transform: scale(1.12); }
.listing-marker.is-active { transform: scale(1.2); }
/* the selected pin is the only filled one on the map */
.listing-marker.is-active .pin-label { background: var(--accent); color: var(--on-accent); border-color: var(--paper); box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-pin); text-decoration: none; }
.listing-marker.is-active .pin-tail { border-top-color: var(--accent); }
.cluster-marker {
  --size: 40px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px; border: 3px solid var(--paper);
  box-shadow: var(--shadow-pin); cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cluster-marker.is-hover, .cluster-marker:hover { transform: scale(1.15); background: var(--accent-strong); color: var(--on-accent-strong); box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-pin); }
/* MapLibre: the wrapper is positioned by the library; the pin inside can scale freely. */
.marker-wrap { line-height: 0; }
.maplibregl-ctrl-attrib { font-size: 11px; }
.maplibregl-ctrl-bottom-left { left: calc(var(--cam-w) + 2 * var(--edge)); } /* clear the hand dock */
.maplibregl-canvas:focus { outline: none; }
/* MapLibre's attribution box is white: on a dark theme it follows the plates */
html[data-mode="dark"] .maplibregl-ctrl-attrib { background: var(--surface-1); color: var(--text-2); }
html[data-mode="dark"] .maplibregl-ctrl-attrib a { color: var(--text); }
html[data-mode="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* ── Listing card ────────────────────────────────────────────────────── */
#card {
  position: fixed; inset-inline-end: var(--edge); top: calc(var(--edge) + var(--bar) + 12px); z-index: 35; width: var(--col); max-height: calc(100vh - var(--edge) - var(--bar) - 28px);
  overflow: hidden auto; display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2);
  opacity: 0; transform: translateX(16px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
[dir="rtl"] #card { transform: translateX(-16px); }
#card.open { opacity: 1; transform: none; }
#card img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 190px; object-fit: cover; background: var(--raise); }
.card-body { padding: 12px; display: grid; gap: 8px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--raise); color: var(--text-2);
}
.pills { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.pill .ico { width: 13px; height: 13px; }
.pill.alt { background: var(--raise); color: var(--text-2); }
/* status pills: neutral, the status told by a dot (the same colour as the pin's edge), not by a coloured block */
.pill.offer-sale, .pill.status-available { background: var(--sale-tint); color: var(--sale-text); --dot: var(--sale); }
.pill.offer-rent { background: var(--rent-tint); color: var(--rent-text); --dot: var(--rent); }
.pill.status-under-offer { background: var(--offer-tint); color: var(--offer-text); --dot: var(--offer); }
.pill.status-sold { background: var(--sold-tint); color: var(--sold-text); --dot: var(--sold); }
.pill[class*="offer-"]::before, .pill[class*="status-"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--off)); flex: none; }
.pill.status-off { background: var(--off-tint); color: var(--off-text); }
.note { margin: 0; font-size: 12px; color: var(--text-2); }
#card h2 { margin: 0; font-size: 16px; line-height: 1.3; }
.muted { margin: 0; color: var(--text-2); font-size: 13px; }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.facts li { padding: 5px 8px; border-radius: var(--r-xs); background: var(--raise); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.card-actions .btn { flex: 1; min-width: 110px; }
/* one filled button per surface: the listing's own page; Photos and Enquire are the quiet pair */
/* the QR code stays black on white in both themes: a phone camera reads that best */
#card-qr { display: grid; justify-items: center; gap: 5px; margin-top: 4px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel); color: #475569; text-align: center; }
#card-qr img { width: 150px; height: 150px; image-rendering: pixelated; }
#card-qr small { font-size: 12px; }

/* ── Emirate jump bar ────────────────────────────────────────────────── */
#emirates {
  /* centred between the hand dock and its mirror image (left: 50% would cap the width at half the screen) */
  position: fixed; inset-inline: 0; bottom: var(--edge); margin-inline: auto; width: fit-content; z-index: 30;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 3px;
  max-width: calc(100vw - 2 * (var(--cam-w) + 2 * var(--edge)));
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-1); color: var(--plate-text); --text: var(--plate-text); --text-2: var(--plate-text-2); --text-3: var(--plate-text-3); --line: var(--plate-line);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
}
#emirates .chip { white-space: nowrap; min-height: 30px; background: transparent; border-color: transparent; }
#emirates .chip:hover, #emirates .chip.is-hover { background: var(--accent-tint); border-color: var(--accent-ring); color: var(--accent-text); }
#emirates .chip .count { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── Photo viewer ────────────────────────────────────────────────────── */
#gallery {
  position: fixed; inset: 0; z-index: 45; background: var(--scrim); overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center;
  opacity: 0; transition: opacity var(--t-med) var(--ease);
}
#gallery.open { opacity: 1; }
.gallery-top { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; gap: 12px; padding: var(--edge) var(--edge) 10px; }
.gallery-close { min-height: var(--bar); padding: 0 14px; }
#gallery-title { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gallery-counter { color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; }
/* the stage is the swipe lane: nothing in it can be held on */
/* (definite tracks: the photo's max-height: 100% then means the stage, so a tall photo is scaled down; a zoomed photo stays in its lane) */
.gallery-stage { width: 100%; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 0 var(--edge); overflow: hidden; }
#gallery-image {
  max-width: min(100%, 1600px); max-height: 100%; object-fit: contain; border-radius: var(--r-panel); box-shadow: var(--shadow-2); background: var(--raise);
  outline: 1px solid var(--line-strong); /* (a white floor plan keeps an edge on the backdrop) */
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
#gallery-image.dragging { transition: none; }
#gallery-image.slide-left { animation: slide-left .25s ease; }
#gallery-image.slide-right { animation: slide-right .25s ease; }
@keyframes slide-left { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slide-right { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.gallery-rail {
  position: relative; z-index: 2; width: 100%; min-height: 96px; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px calc(128px + 2 * var(--edge)); direction: ltr; /* previous is always on the left: it matches the swipe */
}
.gallery-nav {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--text); box-shadow: var(--shadow-1); cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.gallery-nav .ico { width: 22px; height: 22px; }
.gallery-nav:hover, .gallery-nav.is-hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.gallery-hint { flex: 0 1 620px; margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.35; text-align: center; }
[dir="rtl"] .gallery-hint { direction: rtl; }
/* what the hand is asked to do next: brighter when the visitor has to act */
.gallery-hint[data-state="ready"], .gallery-hint[data-state="zoomed"] { color: var(--text); }
.gallery-hint[data-state="almost"], .gallery-hint[data-state="touch"], .gallery-hint[data-state="zoom"], .gallery-hint[data-state="locked"] { color: var(--accent-text); font-weight: 600; }

/* ── Toast ───────────────────────────────────────────────────────────── */
#toast {
  position: fixed; left: 50%; top: calc(var(--edge) + var(--bar) + 12px); transform: translateX(-50%); z-index: 60;
  max-width: min(640px, calc(100vw - 32px)); padding: 10px 14px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-control); box-shadow: var(--shadow-2);
}

/* ── Attract screen (kiosk) ──────────────────────────────────────────── */
#attract {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; text-align: center;
  background: var(--veil); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
#attract.open { opacity: 1; }
.attract-inner { max-width: 640px; padding: 24px; }
.attract-hand { color: var(--accent-text); --hand-fill: var(--hand-fill-accent); animation: raise 2.4s ease-in-out infinite; }
.attract-hand .ico { width: 128px; height: 128px; }
@keyframes raise { 0%, 100% { transform: translateY(10px); opacity: .7; } 40%, 70% { transform: translateY(-6px); opacity: 1; } }
#attract h1 { font-size: 40px; margin: 8px 0; }
#attract p { font-size: 19px; color: var(--text-2); margin: 0; }
body.kiosk, body.kiosk * { cursor: none !important; }

/* ── Tuning panel (showroom Mac only) ────────────────────────────────── */
#tuning {
  position: fixed; inset-inline-end: var(--edge); bottom: var(--edge); z-index: 90; width: 380px; max-height: calc(100vh - 100px); overflow: auto;
  padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2); font-size: 13px;
}
.tuning-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.tuning-stats { font-size: 12px; color: var(--text-2); margin-bottom: 10px; min-height: 16px; line-height: 1.5; }
.tuning-row { display: grid; grid-template-columns: 1fr 120px 52px; align-items: center; gap: 8px; padding: 4px 0; }
.tuning-row input[type=range] { accent-color: var(--accent); }
.tuning-row output { text-align: right; font-variant-numeric: tabular-nums; }
.tuning-actions { display: flex; gap: 8px; margin-top: 10px; }
.tuning-actions button { padding: 7px 12px; border-radius: var(--r-control); border: 1px solid var(--line-strong); background: var(--raise); color: var(--text); cursor: pointer; }
.small { font-size: 12px; }

/* ── Enquiry form ────────────────────────────────────────────────────── */
.enquiry { display: grid; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.enquiry h3 { margin: 0; font-size: 14px; }
.enquiry input, .enquiry textarea {
  font: inherit; min-height: var(--control); padding: 8px 10px; border-radius: var(--r-control); border: 1px solid var(--off); /* 3.6:1 on white, 3.1:1 on the dark field: a field reads as a field */
  background: var(--paper); color: var(--text); width: 100%;
}
.enquiry input::placeholder { color: var(--text-3); }
.enquiry input:focus, .enquiry textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.enquiry input.invalid, .enquiry textarea.invalid { border-color: var(--danger); }
/* honeypot: never shown to people, bots fill it in and the server drops the submission */
.enquiry input.hp { position: absolute; left: -9999px; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
.enquiry-actions { display: flex; gap: 6px; }
.enquiry-actions .btn { flex: 1; }
.enquiry-status { margin: 0; font-size: 13px; color: var(--text-2); }
.enquiry-status.ok { color: var(--sale-text); } /* (--ok is the dot colour: 3.3:1 as text on white) */
.enquiry-status.err { color: var(--danger); }
/* privacy / terms consent */
.enquiry .consent-line { display: flex; gap: 8px; align-items: flex-start; min-height: var(--control); font-size: 12.5px; color: var(--text-2); line-height: 1.4; cursor: pointer; padding: 8px 6px; border-radius: var(--r-control); border: 1px solid transparent; }
.enquiry .consent-line.is-hover { border-color: var(--accent-ring); background: var(--accent-tint); }
.enquiry .consent-line.invalid { border-color: var(--danger); }
.enquiry .consent-line input { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; padding: 0; flex: 0 0 auto; accent-color: var(--accent); }
.enquiry .consent-line a { color: var(--accent-text); text-decoration: underline; }
/* phone verification step */
.enquiry .verify-step { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--raise); }
.enquiry .verify-step p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.enquiry .verify-step input[name=code] { font-size: 22px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.enquiry .verify-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.enquiry .verify-row .muted { font-size: 12px; }

/* ── Cookie banner, camera question ──────────────────────────────────── */
#consent, #camera-ask {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); width: min(540px, calc(100vw - 32px));
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2);
  padding: 16px 18px 14px; z-index: 60; pointer-events: auto; opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
#camera-ask { width: min(520px, calc(100vw - 32px)); z-index: 59; } /* a reopened cookie banner (60) stacks above it */
#consent.open, #camera-ask.open { opacity: 1; transform: translate(-50%, 0); }
#consent h2, #camera-ask h2 { margin: 0; margin-inline-end: 40px; margin-bottom: 6px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
#camera-ask .title-icon { width: 34px; height: 34px; flex: none; border-radius: var(--r-control); background: var(--accent-tint); color: var(--accent-text); }
#camera-ask .title-icon .ico { width: 26px; height: 26px; }
#consent p, #camera-ask p { margin: 0 0 6px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
#consent .consent-links a { color: var(--accent-text); text-decoration: underline; }
#consent .consent-actions, #camera-ask .camera-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
#consent .consent-close, #camera-ask .camera-close { position: absolute; top: 8px; inset-inline-end: 10px; }

/* ── First-time tutorial ─────────────────────────────────────────────── */
#tutorial {
  position: fixed; inset-inline-end: var(--edge); top: calc(var(--edge) + var(--bar) + 12px); width: min(300px, calc(100vw - 32px)); z-index: 47;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2);
  padding: 16px 14px 12px; pointer-events: auto; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; overflow: hidden;
}
#tutorial.open { opacity: 1; transform: none; }
#tutorial .tut-track { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--raise); }
#tutorial .tut-progress { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
#tutorial .tut-close { position: absolute; top: 10px; inset-inline-end: 10px; }
#tutorial .tut-icon { width: 60px; height: 60px; margin: 2px 0 10px; border-radius: var(--r-card); background: var(--accent-tint); color: var(--accent-text); }
#tutorial .tut-icon .ico { width: 30px; height: 30px; }
#tutorial .tut-icon .ico.pose { width: 48px; height: 48px; }
#tutorial .tut-title { margin: 0; margin-inline-end: 40px; margin-bottom: 4px; font-size: 16px; }
#tutorial .tut-text { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
#tutorial .tut-dots { display: flex; gap: 5px; margin-bottom: 12px; }
#tutorial .tut-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--off); }
#tutorial .tut-dots .dot.done { background: var(--accent); opacity: .75; }
#tutorial .tut-dots .dot.on { background: var(--accent); width: 18px; border-radius: 4px; }
#tutorial .tut-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#tutorial .tut-actions .hud-btn { border-color: var(--line-strong); }
#tutorial .tut-actions .tut-voice { margin-inline-start: auto; }
#tutorial .btn:disabled { opacity: .4; }

/* ── Arabic ──────────────────────────────────────────────────────────── */
/* The layout mirrors by itself (logical properties). Arabic letters join: no tracking, no capitals. */
body.rtl .filter-group .label, body.rtl #legend h2, body.rtl .pill { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .maplibregl-ctrl-bottom-left { left: var(--edge); }
[dir="rtl"] .maplibregl-ctrl-bottom-right { right: calc(var(--cam-w) + 2 * var(--edge)); }
[dir="rtl"] .gallery-close [data-icon], [dir="rtl"] .chip .icon { transform: none; }

/* ── Narrow screens ──────────────────────────────────────────────────── */
/* One row above phone width: the bar never wraps (a second row would land under the gesture guide);
   when it gets tight the brand loses its subtitle and the Filters label shortens. */
@media (min-width: 761px) {
  #topbar, .topbar-right { flex-wrap: nowrap; }
  .topbar-right, .filters-btn { min-width: 0; }
  .filters-btn .label { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 1180px) {
  /* icons only — the label stays in the page for screen readers, in the visitor's language */
  .toolbar .hud-btn { position: relative; padding: 0; width: var(--control); justify-content: center; }
  .toolbar .hud-btn .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #lang-btn { width: auto; padding: 0 10px; }            /* the language is its own label */
  #lang-btn .label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (max-width: 900px) { .brand-divider, .brand-sub { display: none; } }
/* a tablet: the emirate bar takes the room beside the hand dock instead of the narrow middle */
@media (min-width: 761px) and (max-width: 1100px) {
  #emirates { inset-inline: calc(var(--cam-w) + 2 * var(--edge)) var(--edge); max-width: none; }
}
/* A short screen (a laptop): the open guide takes two columns instead of scrolling — a hand cannot scroll. */
@media (min-width: 761px) and (max-height: 760px) {
  #legend:hover, #legend.is-hover, #legend.pinned { width: min(540px, calc(100vw - 2 * var(--edge))); }
  #legend ul { grid-template-columns: 1fr 1fr; column-gap: 12px; }
}
@media (max-width: 760px) {
  :root { --edge: 12px; }
  /* two rows: the brand and Filters, then the tools (12 + 44 + 8 + 44 = 108 px: the panels start at 116) */
  #topbar { gap: 8px; }
  .topbar-right { display: contents; }
  .filters-btn { order: 1; flex: 1 1 160px; min-width: 0; padding: 0 12px; pointer-events: auto; }
  .filters-btn .label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: start; }
  .toolbar { order: 2; pointer-events: auto; }
  #legend { display: none; }
  #card { inset-inline: var(--edge); width: auto; top: auto; bottom: var(--edge); max-height: 60vh; }
  #card img { max-height: 140px; }
  #filters, #themes { inset-inline: var(--edge); width: auto; top: 116px; max-height: calc(100vh - 128px); }
  #tutorial { top: 116px; }
  #toast { top: 116px; }
  #emirates { max-width: calc(100vw - 2 * var(--edge)); flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  /* the hand dock sits above the emirate bar; with the camera off it is not needed at all (the camera button says so) */
  #cam-panel { bottom: calc(var(--edge) + 50px); }
  body:not(.camera-on) #cam-panel { display: none; }
  .mode { min-height: 36px; font-size: 12px; }
  .cam-note { display: none; }
  .gallery-rail { padding: 10px var(--edge); min-height: 80px; flex-wrap: wrap; }
  .gallery-hint { order: -1; flex-basis: 100%; font-size: 14px; }
  body.gallery-open #cam-panel { width: 96px; bottom: 150px; } /* above the bar: the hint line wraps to two or three lines on a phone */
  #attract h1 { font-size: 28px; }
}
@media (max-height: 620px) { #legend ul { gap: 1px; } }

/* ── Less motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}