/* EventETA — shared design system (web).
 *
 * Mirrors the app's tokens (src/theme.ts) one-for-one so eventeta.com and the
 * iOS/Android app read as the same product: Uber-inspired, monochrome, with
 * periwinkle kept as a functional accent only (links, active/selected, LIVE).
 *
 * Adaptive: light is the default, dark applies via prefers-color-scheme.
 * `data-theme="light|dark"` on <html> forces one, for a future manual toggle.
 *
 * Include via web-head.php. Safe to add to a page before its own inline
 * <style> is removed — page rules come later in the cascade and still win, so
 * migration can happen one page at a time.
 */

/* ── Brand lockup (single source of truth) ───────────────────────────────
 * The nav logo was duplicated in 83 rule blocks across 19 pages and had
 * drifted: My Events rendered it 30px/18px/17px-700 against the 28/17/16-600
 * everyone else used, so it visibly jumped when navigating. Defined once
 * here; the per-page copies are deleted so this is the only definition.
 * ---------------------------------------------------------------------- */
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.3px;
  color: var(--text); flex-shrink: 0;
}
.logo-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-mark svg { width: 17px; height: 17px; }
.logo-mark svg circle { fill: var(--on-primary); }
.logo-mark svg path { stroke: var(--on-primary); }

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-hi: #F7F8FA;
  --surface-max: #EEF0F3;
  --surface-alt: #F1F2F4;

  --text: #0A0A0B;
  --text-secondary: #6B7076;
  --text-muted: #9A9EA6;
  --text-faint: #B9BDC5;

  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);
  --fill: rgba(0, 0, 0, 0.04);
  --fill-hi: rgba(0, 0, 0, 0.07);

  /* Monochrome does the primary work. */
  --primary: #0A0A0B;
  --on-primary: #FFFFFF;

  /* Functional accent only. */
  --accent: #3D74E6;
  --on-accent: #FFFFFF;
  --accent-subtle: #EAF1FE;

  --live: #16A34A;
  --success: #16A34A;
  --warning: #B45309;
  --danger: #DC2626;

  --scrim: rgba(0, 0, 0, 0.45);

  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-card: 16px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  /* Helvetica, matching the app's own type. Nothing is downloaded: every
     platform has one of these, so pages paint text on the first frame. */
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tabbar-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0B0B0D;
    --surface: #292929;
    --surface-hi: #333333;
    --surface-max: #3D3D3D;
    --surface-alt: #3D3D3D;

    --text: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.65);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-faint: rgba(255, 255, 255, 0.35);

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);
    --fill: rgba(255, 255, 255, 0.05);
    --fill-hi: rgba(255, 255, 255, 0.09);

    --primary: #FFFFFF;
    --on-primary: #0B0B0D;

    --accent: #7EB3F7;
    --on-accent: #0B0B0D;
    --accent-subtle: rgba(126, 179, 247, 0.14);

    --live: #22C55E;
    --success: #22C55E;
    --warning: #FBBF24;
    --danger: #EF4444;

    --scrim: rgba(0, 0, 0, 0.6);
  }
}

/* Manual override wins in both directions. */
:root[data-theme='dark'] {
  --bg: #0B0B0D;
  --surface: #292929;
  --surface-hi: #333333;
  --surface-max: #3D3D3D;
  --surface-alt: #3D3D3D;
  --text: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-faint: rgba(255, 255, 255, 0.35);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --fill: rgba(255, 255, 255, 0.05);
  --fill-hi: rgba(255, 255, 255, 0.09);
  --primary: #FFFFFF;
  --on-primary: #0B0B0D;
  --accent: #7EB3F7;
  --on-accent: #0B0B0D;
  --accent-subtle: rgba(126, 179, 247, 0.14);
  --live: #22C55E;
  --success: #22C55E;
  --warning: #FBBF24;
  --danger: #EF4444;
  --scrim: rgba(0, 0, 0, 0.6);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

a { color: inherit; text-decoration: none; }
a.link { color: var(--accent); }
a.link:hover { text-decoration: underline; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Type ─────────────────────────────────────────────────────────────── */
.h1 { font-size: 34px; line-height: 38px; font-weight: 700; letter-spacing: -1.3px; margin: 0; }
.h2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.6px; margin: 0; }
.h3 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.3px; margin: 0; }
.body { font-size: 16px; line-height: 24px; letter-spacing: -0.1px; }
.body-sm { font-size: 14px; line-height: 20px; letter-spacing: -0.1px; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }

/* Uppercase section label — the app's SectionHeader. */
.section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, transform 0.1s;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.btn-block { display: flex; width: 100%; }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { opacity: 0.88; }

.btn-secondary { background: var(--surface-alt); color: var(--text); }
.btn-secondary:hover { background: var(--fill-hi); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--fill); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }

.btn-sm { padding: 9px 14px; font-size: 13px; }

/* Circular icon button — the app's IconButton (Uber's grey back circle). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.icon-btn:hover { background: var(--fill-hi); }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
}
.card-tap { cursor: pointer; transition: border-color 0.15s; }
.card-tap:hover { border-color: var(--border-strong); }

/* Tile row — the app's compact 2/3-up action tiles. */
.tile-row { display: flex; gap: 8px; }
.tile {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.tile:hover { border-color: var(--border-strong); }

/* Stat tiles — the Dashboard strip. */
.stat-tile {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 6px;
  text-align: center;
}
.stat-num { font-size: 21px; font-weight: 700; letter-spacing: -0.6px; line-height: 24px; }
.stat-label {
  font-size: 9.5px; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.4px; text-transform: uppercase; margin-top: 2px;
}

/* ── Chips ────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-live { color: var(--live); background: rgba(34, 197, 94, 0.14); }
.chip-warning { color: var(--warning); background: rgba(245, 158, 11, 0.16); }
.chip-danger { color: var(--danger); background: rgba(239, 68, 68, 0.14); }
.chip-accent { color: var(--accent); background: var(--accent-subtle); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.input, .textarea, .select {
  width: 100%;
  padding: 13px 14px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  line-height: 1.4;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--border-strong);
}
.textarea { min-height: 110px; resize: vertical; }
.field-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.field-error { font-size: 12px; color: var(--danger); margin-top: 6px; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.wrap { max-width: 640px; margin: 0 auto; padding: 28px 20px 96px; width: 100%; }
.wrap-wide { max-width: 880px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack > * + * { margin-top: 10px; }

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: none; }

.divider { height: 1px; background: var(--border); border: 0; margin: 20px 0; }

/* ── Top nav ──────────────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + 14px) 20px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* .nav-logo lives in the Brand lockup block at the top of this file —
   there must be exactly one definition, or it drifts again. */

/* ── Bottom tab bar (web-footer.php) ──────────────────────────────────── */
/* The same floating menu the app uses: a rounded bar inset from the edges,
   sitting ON the page rather than welded to the bottom of the window. The old
   full-width bar with a hairline on top is what every framework gives you by
   default, and it looked it. Geometry copied from PersistentTabBar in App.tsx
   — 6px padding, 30px radius, the active tab filled at 22px — so the two do
   not drift apart. */
.web-tabbar {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  align-items: stretch;
  /* Glass, like the app's bar: the blur was always here, but on a solid
     fill it had nothing to show. 60% lets what is behind come through, and
     still keeps the labels clear over text scrolling underneath. */
  background: color-mix(in srgb, var(--surface-hi) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}
@media (min-width: 620px) {
  /* On a wide window a full-width pill looks stretched; the app is only ever
     this wide because a phone is. */
  .web-tabbar { left: 50%; right: auto; transform: translateX(-50%); width: 560px; }
}
.web-tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1px;
  padding: 8px 2px;
  border-radius: 22px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}
/* The whole tab lights up, not a small frame behind the icon — that is what
   the app does, and it is what makes the selected tab read at a glance. */
.web-tabbar a.active { color: var(--text); background: var(--surface-max); }
.web-tabbar a svg { width: 24px; height: 24px; flex: none; }
/* Active tab is ink, not accent — monochrome, matching the app. */
.web-tabbar a.active { color: var(--text); }
.web-tabbar a:active { opacity: 0.7; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { text-align: center; padding: 28px 20px; color: var(--text-faint); font-size: 12px; }
.footer a { color: var(--text-muted); text-decoration: underline; }

/* ── Sheet / modal ────────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 900;
  background: var(--scrim);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 901;
  background: var(--surface);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  padding: 10px 20px calc(28px + env(safe-area-inset-bottom));
  max-height: 86vh;
  overflow-y: auto;
}
.sheet-grip {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto 14px;
}

/* ── Banners ──────────────────────────────────────────────────────────── */
.banner { border-radius: var(--radius-md); padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; }
.banner-ok { background: rgba(34, 197, 94, 0.12); color: var(--success); }
.banner-err { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.banner-warn { background: rgba(245, 158, 11, 0.14); color: var(--warning); }

/* ── App-install prompt (invite page) ─────────────────────────────────── */
/* Bottom-anchored on purpose: the event details have to render first and stay
   readable. Height is content-sized and capped so it never becomes a
   full-screen interstitial — Google penalises those on mobile, and it would
   sit between the guest and the RSVP, which is the only conversion we need. */
.dl-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  max-height: 46vh; overflow-y: auto;
  background: var(--surface-hi); border-top: 1px solid var(--border);
  border-radius: 18px 18px 0 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(110%); transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1);
}
.dl-sheet.dl-show { transform: translateY(0); }
.dl-grabber { width: 34px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 15px; }
.dl-head { display: flex; align-items: center; gap: 11px; }
.dl-icon {
  width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
}
.dl-icon svg { width: 26px; height: 26px; }
.dl-head h4 { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.25; }
.dl-head p { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.dl-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 15px; height: 48px; border-radius: 13px;
  background: var(--primary); color: var(--on-primary);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
}
.dl-cta svg { width: 17px; height: 17px; flex: 0 0 auto; }
.dl-alt { display: flex; gap: 10px; margin-top: 10px; }
.dl-alt .dl-cta { flex: 1; margin-top: 0; font-size: 13px; }
.dl-skip {
  display: block; width: 100%; margin-top: 12px; padding: 4px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--text-muted); text-align: center;
}
.dl-qr { width: 132px; height: 132px; margin: 14px auto 0; background: #fff; border-radius: 12px; padding: 9px; }
.dl-qr img, .dl-qr canvas { display: block; width: 114px !important; height: 114px !important; }

/* The quieter second ask. Survives the RSVP, so it is deliberately slim. */
/* The install bar: the real app icon at 44px, a headline, one line saying what
   the app adds, and a full-width button. Sized like Apple's own smart banner
   rather than the 36px icon and 30px chip that was here before, which read as
   a system notice instead of an invitation. */
.dl-slim {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: color-mix(in srgb, var(--surface-hi) 97%, transparent);
  border-top: 1px solid var(--border);
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(110%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
.dl-slim.dl-show { transform: translateY(0); }
.dl-slim-row { display: flex; align-items: center; gap: 13px; }
.dl-slim-ico { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; display: block; }
.dl-slim-txt { flex: 1; min-width: 0; }
.dl-slim-t1 { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.dl-slim-t2 { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.dl-get {
  display: flex; align-items: center; justify-content: center;
  margin-top: 12px; height: 46px; border-radius: 14px;
  background: var(--primary); color: var(--on-primary);
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.dl-x { flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: 17px; line-height: 1; padding: 4px 2px 4px 6px; font-family: inherit; }

/* ── Utilities ────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Breadcrumb ────────────────────────────────────────────────────────────
   Sits under a page title, saying where this page lives and letting you jump
   back to any step above. Rendered by web-crumb.php; the app draws the same
   bar from src/ui/Breadcrumb.tsx. Deliberately quiet: it is orientation, not
   content, so it never competes with the title above it. */
.crumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  /* Two pages style a bare `nav` as their top bar — 58px tall, padded, spread
     apart — and this trail is also a <nav>. A class beats an element selector,
     so stating these here makes the crumb immune to that wherever it lands. */
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
  margin: -2px 0 16px;
}
.crumb a, .crumb span { color: var(--text-faint); text-decoration: none; }
.crumb a:hover { color: var(--text); }
.crumb .crumb-sep { color: var(--text-faint); opacity: .55; padding: 0 5px; letter-spacing: 0; font-size: 11px; }
/* The middle steps hold the long names, so they give way first. */
.crumb .crumb-mid { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; min-width: 3em; }
.crumb .crumb-now { color: var(--text); font-weight: 700; flex: 0 0 auto; }

/* ─── right-to-left ─────────────────────────────────────────────────────────
   Set by web-head.php as dir="rtl" on <html> when the page language is Hebrew.

   Almost nothing is needed here, which was the pleasant surprise: this sheet
   has no direction-sensitive margins, padding or text-align at all, and its
   only left:/right: pairs are symmetric full-width bars. The browser handles
   the rest from the dir attribute.

   What DOES need help is below. */

/* Arrows typed into copy point the wrong way once the page mirrors. The arrow
   is drawn here instead of being part of the translated string, so one piece
   of markup is correct in both directions. */
.arrow-end::after { content: " \2192"; }          /* → */
[dir="rtl"] .arrow-end::after { content: " \2190"; }  /* ← */
.arrow-start::before { content: "\2190 "; }
[dir="rtl"] .arrow-start::before { content: "\2192 "; }

/* Data that is never Hebrew keeps its own direction, but hugs the reading edge
   so the field still looks right-aligned in an RTL form. Without this an email
   address renders with its punctuation reordered and reads as nonsense. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[inputmode="email"],
[dir="rtl"] input[inputmode="tel"],
[dir="rtl"] .ltr-data { direction: ltr; text-align: right; }

/* Hebrew is set without the Latin tracking. -0.5px is a fix for Geist's wide
   default and it makes Hebrew letters collide. */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] button, [dir="rtl"] input {
  letter-spacing: 0;
}
[lang="he"] body { font-family: Heebo, "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* ─── the brand mark ────────────────────────────────────────────────────────
   Every page inlines a hand-redrawn 17px approximation of the mark, and the
   redraw is wrong: it has a separate pin and a separate straight arrow that
   crosses the pin's outline, where the real mark is ONE continuous stroke that
   sweeps out of the pin into the arrowhead.

   Fixed here rather than in the markup because that inline SVG has drifted
   into six different variants across twenty pages. One rule covers all of
   them, the real artwork is cached once instead of inlined on every page, and
   the drifted copies simply stop being drawn. */
.logo-mark {
  background: var(--primary) url('/assets/mark.svg') center / 62% no-repeat;
}
.logo-mark svg { display: none; }
/* The install sheet's icon had the same drifted inline drawing, with no
   stroke color at all, so it drew an empty tile. Same artwork as the nav. */
.dl-icon { background: var(--primary) url('/assets/mark.svg') center / 62% no-repeat; }
.dl-icon svg { display: none; }

/* Language switch — only rendered on pages that have a translation. */
.lang-switch { display: flex; align-items: center; gap: 7px; font-size: 13px;
  margin-inline-start: auto; flex-shrink: 0; }
.lang-switch .lang-on { color: var(--text); font-weight: 600; }
.lang-switch .lang-off { color: var(--text-muted); text-decoration: none; }
.lang-switch .lang-off:hover { color: var(--text); text-decoration: underline; }
.lang-switch .lang-sep { color: var(--text-faint); }

/* The single-button language toggle: one control naming the language you would
   switch TO. Lives here rather than per page because every signed-out page
   carries it, and a second copy would drift. Quieter than the sign-in button
   next to it — it is a way out for someone reading the wrong language, not a
   call to action. The Hebrew label is a different script at the same size, so
   it gets its own line-height instead of one tuned for Latin letters. */
.lang-toggle { display: inline-flex; align-items: center; gap: 6px;
               font-size: 13.5px; line-height: 1.35; color: var(--text-secondary);
               border: 1px solid var(--border); border-radius: 999px;
               padding: 5px 12px; text-decoration: none; white-space: nowrap; }
.lang-toggle:hover { background: var(--fill-hi); color: var(--text);
                     border-color: var(--border-strong); text-decoration: none; }
.lang-toggle svg { flex: none; opacity: 0.75; }