:root {
  --bg-0: #05070d;
  --bg-1: #0a0e16;
  --bg-2: #11161f;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.15);
  --ink: #e8edf5;
  --ink-2: #98a3b3;
  --ink-3: #5a6473;
  --accent: #4f88ff;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Space Grotesk", "Assistant", system-ui, -apple-system, sans-serif;
  background: var(--bg-0);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

html[lang="he"] body { font-family: "Assistant", "Space Grotesk", system-ui, sans-serif; }

.app {
  position: relative;
  width: 100vw; height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, #0e1422 0%, #050810 55%, #02030a 100%),
    var(--bg-0);
}

/* subtle starfield */
.app::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1px 1px at 70% 65%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.3) 50%, transparent),
    radial-gradient(1px 1px at 40% 90%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1px 1px at 95% 50%, rgba(255,255,255,0.35) 50%, transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.4) 50%, transparent),
    radial-gradient(1.5px 1.5px at 30% 60%, rgba(255,255,255,0.5) 50%, transparent);
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.7;
}

/* ============ TOP BAR ============ */
.topbar {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 20px 28px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 30;
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.brand-logo {
  width: 72px; height: 52px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.28));
}
.brand-mark {
  font-size: 28px; line-height: 1; color: var(--ink);
  text-shadow: 0 0 18px rgba(150,180,230,0.5);
}
.brand-title {
  font-weight: 700; font-size: 15px; letter-spacing: 0.18em;
  text-transform: uppercase;
}
html[lang="he"] .brand-title { letter-spacing: 0.02em; font-weight: 800; font-size: 17px; }
.brand-sub {
  font-size: 11px; color: var(--ink-2); letter-spacing: 0.06em;
  margin-top: 2px;
  font-family: "JetBrains Mono", "Assistant", monospace;
}
html[lang="he"] .brand-sub { font-family: "Assistant", sans-serif; }

.lang-toggle {
  display: flex;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  overflow: hidden;
}
.lt {
  background: transparent; border: 0; color: var(--ink-2);
  padding: 6px 12px; font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px; letter-spacing: 0.1em; cursor: pointer;
}
.lt.on { background: var(--ink); color: var(--bg-0); }
.lt:not(.on):hover { background: rgba(255,255,255,0.06); color: var(--ink); }

/* ============ LEGEND ============ */
.legend {
  position: absolute; top: 84px; left: 28px;
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: rgba(8,11,17,0.65);
  backdrop-filter: blur(8px);
  border-radius: 2px;
  z-index: 20;
  min-width: 140px;
}
html[dir="rtl"] .legend { left: auto; right: 28px; }
.lg-h {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); font-family: "JetBrains Mono", "Assistant", monospace;
  padding-bottom: 4px; border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
html[lang="he"] .lg-h { font-family: "Assistant", sans-serif; font-size: 11px; text-transform: none; letter-spacing: 0; }
.lg-row { display: flex; align-items: center; gap: 10px; }
.lg-sw { width: 10px; height: 10px; border-radius: 1px; box-shadow: 0 0 8px currentColor; }
.lg-arrow { width: 14px; height: 2px; border-radius: 1px; box-shadow: 0 0 6px currentColor; }
.lg-diamond {
  width: 8px; height: 8px; background: #fbbf24;
  transform: rotate(45deg);
  box-shadow: 0 0 8px #fbbf24;
}
.lg-square {
  width: 9px; height: 9px; background: #22d3ee;
  border: 1px solid #67e8f9;
  box-shadow: 0 0 6px #22d3ee;
}
.lg-dash {
  width: 18px; height: 2px; opacity: 0.8;
}
.lg-lb { font-size: 11px; letter-spacing: 0.05em; color: var(--ink-2); font-family: "JetBrains Mono", "Assistant", monospace; }
html[lang="he"] .lg-lb { font-family: "Assistant", sans-serif; font-size: 13px; }

/* ============ HINT / RESUME ============ */
.hint {
  position: absolute; bottom: 64px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-2);
  font-family: "JetBrains Mono", "Assistant", monospace;
  z-index: 25;
  text-transform: uppercase;
  transition: opacity 400ms;
}
html[lang="he"] .hint { font-family: "Assistant", sans-serif; font-size: 13px; text-transform: none; }
.hint.hidden { opacity: 0; }
.hint-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}
.resume-btn {
  position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);
  background: rgba(8,11,17,0.85); color: var(--ink);
  border: 1px solid var(--line-2); padding: 10px 18px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px; letter-spacing: 0.1em; cursor: pointer;
  z-index: 25; border-radius: 2px;
  backdrop-filter: blur(8px);
}
.resume-btn:hover { background: rgba(255,255,255,0.08); }

/* ============ STAGE ============ */
.stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.globe-wrap {
  position: relative;
  width: min(86vh, 86vw); height: min(86vh, 86vw);
  display: flex; align-items: center; justify-content: center;
}
.globe-canvas {
  position: absolute; inset: 0;
}
.globe-webgl {
  z-index: 1;
}
.globe-svg {
  position: relative; z-index: 2;
  cursor: grab;
  user-select: none; touch-action: none;
}
.globe-svg:active { cursor: grabbing; }

@keyframes arcFlow {
  to { stroke-dashoffset: -40; }
}

/* ============ STATUS ============ */
.status {
  position: absolute; bottom: 20px; left: 28px;
  display: flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink-3); text-transform: uppercase;
  z-index: 20;
}
html[dir="rtl"] .status { left: auto; right: 28px; flex-direction: row-reverse; }
.st-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; box-shadow: 0 0 8px #10b981;
  animation: pulse 2s ease-in-out infinite;
}
.st-sep { color: var(--ink-3); opacity: 0.6; }

/* ============ SIGNATURE ============ */
.signature {
  position: absolute;
  left: 22px; bottom: 48px;
  width: 180px; height: auto;
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
  z-index: 18;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.7));
  transition: opacity 300ms;
}
.signature:hover { opacity: 1; }
html[dir="rtl"] .signature { left: 22px; right: auto; }
@media (max-width: 640px) { .signature { width: 100px; bottom: 56px; } }

/* ============ ZOOM CONTROLS ============ */
.zoom-ctrl {
  position: fixed; right: 32px; bottom: 24px;
  display: flex; flex-direction: column; gap: 0;
  z-index: 25;
  padding: 4px;
  background: linear-gradient(180deg,
              rgba(34, 211, 238, 0.16) 0%,
              rgba(167, 139, 250, 0.14) 50%,
              rgba(251, 113, 133, 0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.55),
              0 0 32px rgba(34, 211, 238, 0.10);
}
html[dir="rtl"] .zoom-ctrl { right: auto; left: 32px; }
.zoom-ctrl button {
  width: 36px; height: 36px;
  background: rgba(8, 11, 17, 0.55);
  border: 0; color: var(--ink);
  font-size: 17px; line-height: 1; font-weight: 700;
  cursor: pointer;
  font-family: "JetBrains Mono", "Assistant", monospace;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  transition: background 200ms, color 200ms, transform 200ms, box-shadow 200ms;
}
.zoom-ctrl button + button { margin-top: 4px; margin-left: 0; }
html[dir="rtl"] .zoom-ctrl button + button { margin-right: 0; margin-left: 0; }
.zoom-ctrl button:nth-child(1) { color: #67e8f9; }   /* + cyan */
.zoom-ctrl button:nth-child(2) { color: #fb7185; }   /* − coral */
.zoom-ctrl button:nth-child(3) { color: #fbbf24; font-size: 14px; } /* ◌ amber */
.zoom-ctrl button:nth-child(1):hover {
  background: rgba(34, 211, 238, 0.22); color: #a5f3fc;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.5);
}
.zoom-ctrl button:nth-child(2):hover {
  background: rgba(251, 113, 133, 0.22); color: #fda4af;
  box-shadow: 0 0 16px rgba(251, 113, 133, 0.5);
}
.zoom-ctrl button:nth-child(3):hover {
  background: rgba(251, 191, 36, 0.22); color: #fde68a;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
}
.zoom-ctrl button:active { transform: scale(0.94); }

/* ============ GLOBE MODE TOGGLE (satellite ⇄ political) ============ */
.globe-mode-toggle {
  position: fixed; right: 26px; top: 150px;
  display: inline-flex; align-items: center; gap: 13px;
  height: 56px; padding: 0 16px;
  background: linear-gradient(155deg, rgba(13,19,29,0.88), rgba(8,11,17,0.74));
  border: 1px solid rgba(34, 211, 238, 0.34);
  border-radius: 16px;
  color: #67e8f9;
  cursor: pointer;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 40px rgba(34, 211, 238, 0.10);
  transition: background 200ms, color 200ms, border-color 200ms, transform 160ms, box-shadow 200ms;
  z-index: 15;
}
html[dir="rtl"] .globe-mode-toggle { /* stay on physical right - left side has layers */ }
.globe-mode-toggle .gmt-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
  transition: background 200ms, box-shadow 200ms;
  flex-shrink: 0;
}
.gmt-text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
html[dir="rtl"] .gmt-text { align-items: flex-end; }
.gmt-title {
  font: 700 9px/1 "JetBrains Mono", ui-monospace, "Assistant", monospace;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(231, 240, 250, 0.5);
}
.gmt-value {
  font: 700 15px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.01em; color: #a5f3fc; white-space: nowrap;
}
.gmt-switch {
  position: relative; flex-shrink: 0;
  width: 38px; height: 20px; border-radius: 11px;
  background: rgba(34, 211, 238, 0.16);
  border: 1px solid rgba(34, 211, 238, 0.42);
  transition: background 200ms, border-color 200ms;
}
.gmt-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #22d3ee; box-shadow: 0 0 9px rgba(34, 211, 238, 0.75);
  transition: left 240ms cubic-bezier(.4,1.3,.5,1), right 240ms cubic-bezier(.4,1.3,.5,1), background 200ms;
}
html[dir="rtl"] .gmt-switch::after { left: auto; right: 2px; }
.globe-mode-toggle.is-political .gmt-switch::after { left: 20px; }
html[dir="rtl"] .globe-mode-toggle.is-political .gmt-switch::after { left: auto; right: 20px; }
.globe-mode-toggle.is-political {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.42);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 40px rgba(251, 191, 36, 0.12);
}
.globe-mode-toggle.is-political .gmt-dot,
.globe-mode-toggle.is-political .gmt-switch::after {
  background: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.75);
}
.globe-mode-toggle.is-political .gmt-value { color: #fde68a; }
.globe-mode-toggle.is-political .gmt-switch {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.45);
}
.globe-mode-toggle:hover {
  background: linear-gradient(155deg, rgba(34,211,238,0.16), rgba(13,19,29,0.8));
  border-color: rgba(34, 211, 238, 0.6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 30px rgba(34, 211, 238, 0.32);
}
.globe-mode-toggle.is-political:hover {
  background: linear-gradient(155deg, rgba(251,191,36,0.16), rgba(13,19,29,0.8));
  border-color: rgba(251, 191, 36, 0.65);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 30px rgba(251, 191, 36, 0.32);
}
.globe-mode-toggle:active { transform: scale(0.97); }
/* Hebrew - modern face, slightly larger */
html[lang="he"] .gmt-value { font-family: "Assistant", sans-serif; font-size: 17px; font-weight: 700; }
html[lang="he"] .gmt-title { font-family: "Assistant", sans-serif; font-size: 11px; letter-spacing: 0.06em; }

/* ============ LAYERS DRAWER ============ */
.ld-tab, .lns-tab {
  position: absolute; top: 120px; left: 28px;
  z-index: 32;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  background: rgba(8,11,17,0.85);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  border-radius: 2px;
  transition: background 200ms, border-color 200ms;
}
html[lang="he"] .ld-tab, html[lang="he"] .lns-tab { font-family: "Assistant", sans-serif; text-transform: none; letter-spacing: 0; font-size: 13px; }
/* Tabs stay pinned to the physical LEFT in both LTR and RTL - they live
   directly below the logo which is also always on the left. */
.ld-tab:hover, .lns-tab:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.ld-tab.open, .lns-tab.open { background: rgba(34,211,238,0.18); border-color: #22d3ee; color: #fff; }
.ld-tab-glyph { font-size: 16px; line-height: 1; }
.ld-tab-text { font-weight: 600; }
.ld-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #22d3ee; color: #052029; border-radius: 9px;
  font-weight: 700; font-size: 10px;
}

.ld-drawer {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 340px;
  background: rgba(8,11,17,0.96);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--line-2);
  z-index: 35;
  /* transform driven inline by React. No CSS transition - Globe's 60fps render loop keeps
     restarting any transform transition before it can advance. */
  display: flex; flex-direction: column;
  box-shadow: 8px 0 48px rgba(0,0,0,0.4);
}
[dir="rtl"] .ld-drawer {
  left: auto; right: 0;
  border-right: 0; border-left: 1px solid var(--line-2);
  box-shadow: -8px 0 48px rgba(0,0,0,0.4);
}

.ld-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 24px 22px 18px;
  border-bottom: 1px solid var(--line);
}
.ld-title {
  font-size: 18px; font-weight: 700; letter-spacing: 0.04em;
}
html[lang="he"] .ld-title { font-weight: 800; }
.ld-sub {
  font-size: 10px; color: var(--ink-3);
  font-family: "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 4px;
}
html[lang="he"] .ld-sub { font-family: "Assistant", sans-serif; text-transform: none; font-size: 12px; }
.ld-x {
  width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.ld-x:hover { color: var(--ink); border-color: var(--line-2); }

.ld-toolbar {
  display: flex; gap: 6px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
}
.ld-toolbar button {
  flex: 1; padding: 7px 10px;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--ink-2); cursor: pointer;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 2px;
}
html[lang="he"] .ld-toolbar button { font-family: "Assistant", sans-serif; text-transform: none; font-size: 12px; }
.ld-toolbar button:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.ld-toolbar button.on { background: rgba(34,211,238,0.2); border-color: #22d3ee; color: #67e8f9; }

.ld-scroll {
  flex: 1; overflow-y: auto; padding: 16px 22px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.ld-scroll::-webkit-scrollbar { width: 6px; }
.ld-scroll::-webkit-scrollbar-thumb { background: var(--line-2); }

.ld-sec { margin-bottom: 18px; }
.ld-sec-h {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.ld-sec-icon { font-size: 14px; color: var(--ink-2); }
.ld-sec.future .ld-sec-icon { color: #a855f7; }
.ld-sec-lb {
  flex: 1;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
  font-family: "JetBrains Mono", "Assistant", monospace;
}
html[lang="he"] .ld-sec-lb { font-family: "Assistant", sans-serif; text-transform: none; font-size: 13px; font-weight: 700; }
.ld-sec-c {
  font-size: 10px; color: var(--ink-3);
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-variant-numeric: tabular-nums;
}

.ld-items { display: flex; flex-direction: column; gap: 4px; }
.ld-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  color: var(--ink-2);
  transition: background 180ms, border-color 180ms, color 180ms;
}
.ld-item:hover { background: rgba(255,255,255,0.04); color: var(--ink); }
.ld-item.on {
  background: rgba(34,211,238,0.08);
  border-color: rgba(34,211,238,0.4);
  color: var(--ink);
}
.ld-item-tick {
  font-size: 14px; line-height: 1.3;
  color: var(--ink-3);
  font-family: "JetBrains Mono", "Assistant", monospace;
}
.ld-item.on .ld-item-tick { color: #22d3ee; }
.ld-item-body { flex: 1; }
.ld-item-lb {
  font-size: 13px; font-weight: 500;
  margin-bottom: 2px;
}
html[lang="he"] .ld-item-lb { font-size: 14px; }
.ld-item-hint {
  font-size: 10px; color: var(--ink-3);
  font-family: "JetBrains Mono", "Assistant", monospace;
}
html[lang="he"] .ld-item-hint { font-family: "Assistant", sans-serif; font-size: 11px; }

.ld-foot {
  padding: 16px 22px 20px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.3);
}
.ld-year-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.ld-year-lb {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-family: "JetBrains Mono", "Assistant", monospace;
}
html[lang="he"] .ld-year-lb { font-family: "Assistant", sans-serif; text-transform: none; font-size: 12px; }
.ld-year-val {
  font-size: 26px; font-weight: 700;
  color: #22d3ee;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.ld-year-track input[type="range"] {
  width: 100%; accent-color: #22d3ee;
}
.ld-year-marks {
  display: flex; justify-content: space-between;
  margin-top: 6px;
}
.ld-year-marks button {
  background: transparent; border: 0;
  color: var(--ink-3);
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 1px;
}
.ld-year-marks button:hover { color: var(--ink); }
.ld-year-marks button.on { color: #22d3ee; font-weight: 700; }
.ld-year-hint {
  margin-top: 8px;
  font-size: 11px; color: var(--ink-2);
  text-wrap: pretty;
}
html[lang="he"] .ld-year-hint { font-size: 12px; }

.ld-gmsl {
  margin-top: 12px; padding: 10px 12px;
  background: linear-gradient(90deg, rgba(6,182,212,0.18), rgba(6,182,212,0));
  border-left: 2px solid #06b6d4;
  display: flex; flex-direction: column; gap: 2px;
}
html[dir="rtl"] .ld-gmsl { border-left: 0; border-right: 2px solid #06b6d4;
  background: linear-gradient(270deg, rgba(6,182,212,0.18), rgba(6,182,212,0)); }
.ld-gmsl-lb {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); font-family: "JetBrains Mono", "Assistant", monospace;
}
html[lang="he"] .ld-gmsl-lb { font-family: "Assistant", sans-serif; text-transform: none; font-size: 11px; letter-spacing: 0; }
.ld-gmsl-val {
  font-size: 22px; font-weight: 700; color: #67e8f9;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-variant-numeric: tabular-nums;
}
.ld-gmsl-note {
  font-size: 9px; color: var(--ink-3);
  font-family: "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.06em;
}

/* ============ INFO CARD ============ */
.card-slot {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 420px;
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 40;
}
html[dir="rtl"] .card-slot { right: auto; left: 0; transform: translateX(-100%); }
.card-slot.open { transform: translateX(0); }

.ic-wrap {
  position: relative;
  height: 100%;
  background: linear-gradient(180deg, rgba(14,18,28,0.97) 0%, rgba(8,11,17,0.97) 100%);
  backdrop-filter: blur(16px);
  border-left: 1px solid var(--line-2);
  box-shadow: -16px 0 60px rgba(0,0,0,0.5), inset 0 0 80px var(--glow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
html[dir="rtl"] .ic-wrap {
  border-left: 0; border-right: 1px solid var(--line-2);
  box-shadow: 16px 0 60px rgba(0,0,0,0.5), inset 0 0 80px var(--glow);
}

/* compact variant */
.ic-v-compact { font-size: 12px; }
.ic-v-compact .ic-head { padding: 18px 20px 12px; }
.ic-v-compact .ic-flag-lg { font-size: 32px; }
.ic-v-compact .ic-name { font-size: 22px; }

/* sheet variant - more colorful */
.ic-v-sheet {
  background: linear-gradient(160deg, color-mix(in oklab, var(--bloc) 22%, #0a0e16) 0%, var(--bg-0) 60%);
}
.ic-v-sheet .ic-head { background: linear-gradient(180deg, color-mix(in oklab, var(--bloc) 24%, transparent), transparent); }
.ic-v-sheet .ic-tabs { background: rgba(0,0,0,0.3); }

.ic-close {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); font-size: 20px; cursor: pointer;
  z-index: 5; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
html[dir="rtl"] .ic-close { right: auto; left: 14px; }
.ic-close:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,0.05); }

.ic-head {
  padding: 28px 24px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; gap: 16px; align-items: flex-start;
}
.ic-flag-lg {
  font-size: 44px; line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.ic-titles { flex: 1; }
.ic-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-2); text-transform: uppercase;
  margin-bottom: 8px;
}
html[lang="he"] .ic-eyebrow { font-family: "Assistant", sans-serif; font-size: 12px; text-transform: none; }
.ic-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.ic-iso {
  margin-left: auto;
  background: rgba(255,255,255,0.05);
  padding: 2px 6px; border-radius: 1px;
  color: var(--ink);
  letter-spacing: 0.1em;
}
html[dir="rtl"] .ic-iso { margin-left: 0; margin-right: auto; }
.ic-name {
  margin: 0; font-size: 28px; font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
html[lang="he"] .ic-name { letter-spacing: 0; font-weight: 800; }

.ic-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.ic-tab {
  flex: 1;
  background: transparent; border: 0;
  padding: 14px 8px;
  color: var(--ink-3);
  font-family: inherit; font-size: 12px;
  font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: color 200ms;
}
html[lang="he"] .ic-tab { font-size: 14px; text-transform: none; letter-spacing: 0; }
.ic-tab:hover { color: var(--ink-2); }
.ic-tab.on { color: var(--ink); }
.ic-tab.on::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--hue);
  box-shadow: 0 0 12px var(--hue);
}

.ic-scroll {
  flex: 1; overflow-y: auto; padding: 20px 24px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.ic-scroll::-webkit-scrollbar { width: 6px; }
.ic-scroll::-webkit-scrollbar-thumb { background: var(--line-2); }

.ic-body { display: flex; flex-direction: column; gap: 18px;
  animation: cardFadeIn 380ms ease-out;
}
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ic-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ic-row {
  background: rgba(0,0,0,0.3);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.ic-k {
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  font-family: "JetBrains Mono", "Assistant", monospace;
}
html[lang="he"] .ic-k { font-family: "Assistant", sans-serif; font-size: 12px; text-transform: none; letter-spacing: 0; }
.ic-v {
  font-size: 18px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Source provenance: tiny dot beside each sourced value ─────────── */
.ic-src-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.32;
  margin-inline-start: 6px;
  vertical-align: middle;
  cursor: help;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  position: relative;
}
.ic-src-dot:hover { opacity: 1; transform: scale(1.4); background: #7dd3fc; }

/* CSS-only tooltip via data-tip attribute. Uses ::after on the dot so
   no extra DOM is needed. We position it absolutely below the dot. */
.ic-src-dot::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #0a0e16;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  font: 500 11px/1.4 "JetBrains Mono", "Assistant", monospace;
  color: #cbd5e1;
  letter-spacing: 0.02em;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: start;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 50;
  box-shadow: 0 6px 16px rgba(0,0,0,0.55);
}
.ic-src-dot:hover::after {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
html[lang="he"] .ic-src-dot::after { font-family: "Assistant", sans-serif; font-size: 12px; letter-spacing: 0; }

/* Stale variant — orange dot + tiny inline timestamp below the value */
.ic-src-dot-stale {
  background: #f97316 !important;
  opacity: 0.85;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18);
}
.ic-src-dot-stale:hover { background: #fb923c !important; opacity: 1; }
.ic-src-stale-note {
  font-size: 10px; color: #fb923c;
  font-family: "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
html[lang="he"] .ic-src-stale-note { font-family: "Assistant", sans-serif; font-size: 11.5px; letter-spacing: 0; }
.ic-row-stale { background: rgba(249,115,22,0.04) !important; }

.ic-block {
  display: flex; flex-direction: column; gap: 8px;
}
.ic-sub {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
  font-family: "JetBrains Mono", "Assistant", monospace;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
html[lang="he"] .ic-sub { font-family: "Assistant", sans-serif; font-size: 13px; text-transform: none; letter-spacing: 0; }
.ic-p {
  margin: 0; font-size: 14px; line-height: 1.55;
  color: var(--ink); text-wrap: pretty;
}

.ic-flows { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ic-flow-h {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.1em;
  margin-bottom: 8px; text-transform: uppercase;
}
html[lang="he"] .ic-flow-h { font-family: "Assistant", sans-serif; font-size: 12px; text-transform: none; }
.ic-flow-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ic-flow-l li { font-size: 12px; color: var(--ink); }
.ic-flag { margin-right: 6px; }
html[dir="rtl"] .ic-flag { margin-right: 0; margin-left: 6px; }

.ic-bar {
  position: relative;
  height: 22px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  overflow: hidden;
}
.ic-bar-fill {
  height: 100%;
  animation: barGrow 800ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
@keyframes barGrow { from { width: 0 !important; } }
.ic-bar-label {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px; color: var(--ink);
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
html[dir="rtl"] .ic-bar-label { right: auto; left: 8px; }

.ic-stack {
  height: 28px; display: flex; gap: 1px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.ic-stack-leg {
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  font-size: 11px; color: var(--ink-2);
  font-family: "JetBrains Mono", "Assistant", monospace;
  margin-top: 8px;
}
html[lang="he"] .ic-stack-leg { font-family: "Assistant", sans-serif; font-size: 12px; }
.ic-stack-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ic-stack-leg i {
  width: 8px; height: 8px; display: inline-block; border-radius: 1px;
}

/* ============ RESPONSIVE ============ */
/* hide the old top-left legend now that we have the layers drawer */
.legend { display: none !important; }

/* ============ WELCOME OVERLAY ============ */
.welcome {
  position: absolute; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(5,8,18,0.55) 0%, rgba(2,3,10,0.86) 80%);
  backdrop-filter: blur(2px);
  animation: wcFadeIn 500ms ease-out both;
  padding: 32px 20px;
  opacity: 1;
  overflow-y: auto;
}
.welcome.rtl { direction: rtl; }
@keyframes wcFadeIn { from { opacity: 0; } to { opacity: 1; } }

.wc-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(150,180,230,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,180,230,0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
  pointer-events: none;
  opacity: 0.4;
}

.wc-card {
  position: relative;
  max-width: 540px; width: 100%;
  padding: 12px 12px 20px;
  text-align: center;
  animation: wcRiseIn 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes wcRiseIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.wc-logo {
  width: 140px; height: auto;
  display: block;
  margin: 0 auto 22px;
  filter: drop-shadow(0 0 36px rgba(34,211,238,0.45))
          drop-shadow(0 6px 22px rgba(0,0,0,0.5));
  animation: wcFloat 5s ease-in-out infinite;
}
@keyframes wcFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.wc-mark {
  font-size: 64px; line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 32px rgba(160,190,235,0.55);
  margin-bottom: 28px;
  animation: wcPulse 3.6s ease-in-out infinite;
}
@keyframes wcPulse {
  0%, 100% { text-shadow: 0 0 28px rgba(160,190,235,0.45); }
  50%      { text-shadow: 0 0 42px rgba(160,190,235,0.7); }
}

.wc-eyebrow {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 17px; letter-spacing: 0.42em;
  color: #67e8f9;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 600;
  text-shadow: 0 0 18px rgba(34,211,238,0.35);
}
.welcome.rtl .wc-eyebrow {
  /* keep BLUE PUMPKIN as English even on Hebrew */
  font-family: "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.42em; font-size: 17px;
  text-transform: uppercase; font-weight: 600;
  direction: ltr; unicode-bidi: isolate;
}

.wc-title {
  margin: 0 0 10px;
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 700; letter-spacing: -0.01em;
  color: #fff; text-wrap: balance;
  line-height: 1.15;
  text-shadow: 0 2px 18px rgba(2, 4, 12, 0.75);
}
.welcome.rtl .wc-title { letter-spacing: 0; font-weight: 800; }

.wc-sub {
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--ink-2);
  margin-bottom: 26px;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(2, 4, 12, 0.85);
}

.wc-body {
  font-size: 17px; line-height: 1.65;
  color: var(--ink);
  max-width: 460px; margin: 0 auto 32px;
  text-wrap: pretty;
  text-shadow: 0 2px 12px rgba(2, 4, 12, 0.85);
}
.welcome.rtl .wc-body { font-size: 18px; line-height: 1.75; }

.wc-cta {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(34, 211, 238, 0.18);
  color: #ecfeff;
  border: 1px solid rgba(34, 211, 238, 0.65);
  border-radius: 999px;
  padding: 16px 38px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 26px rgba(0, 0, 0, 0.5),
              0 0 36px rgba(34, 211, 238, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: transform 200ms, box-shadow 200ms, background 200ms, border-color 200ms;
}
.welcome.rtl .wc-cta {
  font-family: "Assistant", sans-serif;
  letter-spacing: 0.06em; text-transform: none;
  font-size: 18px; font-weight: 800;
}
.wc-cta:hover {
  background: rgba(34, 211, 238, 0.32);
  border-color: rgba(103, 232, 249, 0.85);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.55),
              0 0 56px rgba(34, 211, 238, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.wc-arrow { display: inline-block; transition: transform 220ms; }
.wc-cta:hover .wc-arrow { transform: translateX(4px); }
.welcome.rtl .wc-arrow { transform: scaleX(-1); }
.welcome.rtl .wc-cta:hover .wc-arrow { transform: scaleX(-1) translateX(4px); }

.wc-langs {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 30px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 16px; letter-spacing: 0.16em;
  color: var(--ink-3);
}
.wc-langs button {
  background: transparent; border: 0;
  color: var(--ink-3); cursor: pointer;
  font: inherit; padding: 6px 12px;
  font-family: inherit;
  font-size: 16px;
  transition: color 180ms;
}
.welcome.rtl .wc-langs button {
  font-family: "Assistant", sans-serif;
  letter-spacing: 0.02em;
  font-size: 18px; font-weight: 600;
}
.wc-langs button.on { color: var(--ink); font-weight: 700; }
.wc-langs button:hover { color: var(--ink); }

.wc-signature {
  display: block;
  width: 150px; height: auto;
  margin: 30px auto 0;
  opacity: 0.78;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.18));
  transition: opacity 220ms;
}
.wc-signature:hover { opacity: 1; }
@media (max-width: 640px) {
  .wc-signature { width: 110px; margin-top: 22px; }
}

/* ============ LAST UPDATED BADGE ============ */
.last-updated {
  position: fixed;
  top: 84px; right: 28px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 12px;
  background: rgba(8, 11, 17, 0.82);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5),
              0 0 18px rgba(34, 211, 238, 0.06);
  z-index: 30;
  font-family: "JetBrains Mono", "Assistant", monospace;
  pointer-events: none;
}
html[dir="rtl"] .last-updated {
  /* Stay on the physical RIGHT in RTL too - the LEFT side is occupied by
     the logo and the layers/lens tab stack. */
  font-family: "Assistant", sans-serif;
}
.last-updated .lu-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
  animation: luPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes luPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}
/* Tone variants when an automated refresh has populated the date.
   .lu-ok   - all sources refreshed cleanly (green pulse)
   .lu-warn - at least one source failed in the last run (amber pulse)
   Default (no class) keeps the existing cyan look = pre-auto fallback. */
.last-updated.lu-ok   .lu-dot { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.75); }
.last-updated.lu-warn .lu-dot { background: #fb923c; box-shadow: 0 0 8px rgba(251, 146, 60, 0.75); }
.last-updated .lu-eyebrow {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(186, 224, 240, 0.7);
  margin-bottom: 1px;
  line-height: 1;
}
html[dir="rtl"] .last-updated .lu-eyebrow {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.last-updated .lu-date {
  font-size: 12px;
  font-weight: 600;
  color: #e0f2fe;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
html[dir="rtl"] .last-updated .lu-date {
  font-size: 13px; letter-spacing: 0;
}
@media (max-width: 640px) {
  .last-updated { top: 72px; right: 16px; padding: 7px 12px 7px 10px; }
  .last-updated .lu-date { font-size: 11px; }
  .last-updated .lu-eyebrow { font-size: 8px; }
}

/* ============ WHATSAPP + MAIL ============ */
.wc-wa, .wc-mail {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 22px 6px 0;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms, border-color 200ms, color 200ms, transform 200ms, box-shadow 200ms;
}
.welcome.rtl .wc-wa, .welcome.rtl .wc-mail {
  font-family: "Assistant", sans-serif;
  letter-spacing: 0.02em; text-transform: none;
  font-size: 13px; font-weight: 600;
}

.wc-wa {
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: #4ade80;
}
.wc-wa:hover {
  background: rgba(37, 211, 102, 0.16);
  border-color: rgba(37, 211, 102, 0.7);
  color: #6ee7b7;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.22);
}
.wc-wa svg { color: #25d366; }

.wc-mail {
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #c4b5fd;
}
.wc-mail:hover {
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.7);
  color: #ddd6fe;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(167, 139, 250, 0.22);
}
.wc-mail svg { color: #a78bfa; }

.wa-fab, .mail-fab {
  position: fixed;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 11, 17, 0.92);
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms, border-color 200ms, box-shadow 200ms, background 200ms;
  z-index: 50;
}

.wa-fab {
  right: 28px; bottom: 220px;
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.35);
  box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 24px rgba(37, 211, 102, 0.08);
}
html[dir="rtl"] .wa-fab { right: auto; left: 28px; }
.wa-fab:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.7), 0 0 32px rgba(37, 211, 102, 0.32);
}

.mail-fab {
  right: 28px; bottom: 166px;
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 24px rgba(167, 139, 250, 0.08);
}
html[dir="rtl"] .mail-fab { right: auto; left: 28px; }

/* Short viewports: the right rail (ask buttons → share circles → zoom) runs out
   of vertical room, so move the share circles into the bottom-right corner
   beside the zoom control. Tall screens are unaffected. */
@media (max-height: 760px) {
  .wa-fab   { bottom: 24px; right: 92px; top: auto; }
  .mail-fab { bottom: 24px; right: 146px; top: auto; }
  html[dir="rtl"] .wa-fab   { right: auto; left: 92px; }
  html[dir="rtl"] .mail-fab { right: auto; left: 146px; }
}
.mail-fab:hover {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.7), 0 0 32px rgba(167, 139, 250, 0.32);
}

@media (max-width: 640px) {
  .wa-fab   { right: 18px; bottom: 200px; width: 40px; height: 40px; }
  .mail-fab { right: 18px; bottom: 152px; width: 40px; height: 40px; }
  html[dir="rtl"] .wa-fab,
  html[dir="rtl"] .mail-fab { left: 18px; right: auto; }
}

.wc-hint {
  margin-top: 14px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--ink-3); text-transform: uppercase;
  opacity: 0.7;
}
.welcome.rtl .wc-hint {
  font-family: "Assistant", sans-serif;
  letter-spacing: 0.04em; text-transform: none;
  font-size: 13px;
}

/* ============ MEDIA QUERIES ============ */

/* tablet */
@media (max-width: 900px) {
  .topbar { padding: 16px 20px; }
  .ld-tab { top: 100px; left: 20px; }
  .lns-tab { left: 20px; }
  .status { left: 20px; bottom: 16px; }
  html[dir="rtl"] .status { left: auto; right: 20px; }
  .zoom-ctrl { right: 20px; bottom: 16px; }
  html[dir="rtl"] .zoom-ctrl { right: auto; left: 20px; }
  .globe-mode-toggle { right: 20px; top: 152px; height: 32px; padding: 0 11px; font-size: 10px; }
  html[dir="rtl"] .globe-mode-toggle { /* stay right */ }
  .signature { left: 16px; bottom: 42px; width: 140px; }
  .ld-drawer { width: 320px; }
  .card-slot { width: 380px; }
}

/* phone */
@media (max-width: 640px) {
  .topbar { padding: 12px 14px; }
  .brand-mark { font-size: 22px; }
  .brand-text { line-height: 1.1; }
  .brand-title { font-size: 12px; letter-spacing: 0.14em; }
  html[lang="he"] .brand-title { font-size: 14px; }
  .brand-sub { display: none; }
  .lt { padding: 5px 9px; font-size: 10px; }

  .ld-tab, .lns-tab {
    left: 14px;
    padding: 7px 11px; font-size: 10px;
    gap: 7px;
  }
  html[lang="he"] .ld-tab { font-size: 12px; }
  .ld-tab-glyph { font-size: 14px; }
  .ld-tab-count { min-width: 16px; height: 16px; font-size: 9px; }

  /* full-width layers drawer on phone */
  .ld-drawer { width: 100vw; max-width: 100vw; }
  .ld-head { padding: 20px 18px 14px; }
  .ld-title { font-size: 16px; }
  .ld-scroll { padding: 14px 18px 10px; }
  .ld-foot { padding: 14px 18px 18px; }

  /* card slot full screen on phone */
  .card-slot { width: 100%; }
  .ic-head { padding: 22px 18px 14px; gap: 12px; }
  .ic-flag-lg { font-size: 36px; }
  .ic-name { font-size: 22px; }
  .ic-scroll { padding: 16px 18px 28px; }
  .ic-grid { grid-template-columns: 1fr 1fr; }
  .ic-flows { grid-template-columns: 1fr; gap: 12px; }
  .ic-v { font-size: 16px; }

  /* globe a bit smaller to leave breathing room */
  .globe-wrap {
    width: min(82vh, 92vw);
    height: min(82vh, 92vw);
  }

  /* hint above bottom controls */
  .hint, .resume-btn {
    bottom: 60px;
    font-size: 10px;
    max-width: calc(100vw - 40px);
    text-align: center;
  }
  html[lang="he"] .hint { font-size: 12px; }

  /* status & zoom - tight bottom corners */
  .status {
    left: 14px; bottom: 12px;
    font-size: 9px; letter-spacing: 0.08em;
    gap: 7px;
  }
  html[dir="rtl"] .status { left: auto; right: 14px; }

  .zoom-ctrl { right: 14px; bottom: 12px; }
  html[dir="rtl"] .zoom-ctrl { right: auto; left: 14px; }
  .zoom-ctrl button { width: 30px; height: 30px; font-size: 14px; }
  .globe-mode-toggle { right: 16px; top: 134px; height: 28px; padding: 0 9px; font-size: 9px; gap: 6px; }
  html[dir="rtl"] .globe-mode-toggle { /* stay right */ }
  .globe-mode-toggle .gmt-dot { width: 6px; height: 6px; }

  /* signature - hide to free space on small phones */
  .signature { display: none; }

  /* tweaks panel - fit width */
  .twk-panel {
    width: calc(100vw - 28px) !important;
    max-width: 300px !important;
    bottom: 56px !important;
  }

  /* welcome card adjustments */
  .wc-logo { width: 110px; margin-bottom: 16px; }
  .wc-mark { font-size: 50px; margin-bottom: 22px; }
  .wc-card { padding: 8px 6px 16px; }
  .wc-eyebrow { font-size: 10px; letter-spacing: 0.26em; }
  .welcome.rtl .wc-eyebrow { font-size: 12px; }
  .wc-body { font-size: 13.5px; }
  .wc-cta { padding: 12px 22px; font-size: 11px; }
  .welcome.rtl .wc-cta { font-size: 13px; }
}

/* very small phones */
@media (max-width: 380px) {
  .topbar { padding: 10px 12px; }
  .brand-mark { font-size: 20px; }
  .brand-title { font-size: 11px; }
  html[lang="he"] .brand-title { font-size: 13px; }
  .ic-grid { grid-template-columns: 1fr; }
  .globe-wrap {
    width: min(75vh, 95vw);
    height: min(75vh, 95vw);
  }
}

/* short / landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .topbar { padding: 8px 14px; }
  .globe-wrap {
    width: min(80vh, 60vw);
    height: min(80vh, 60vw);
  }
  .hint, .resume-btn { bottom: 40px; }
  .wc-logo { width: 80px; margin-bottom: 10px; }
  .wc-mark { font-size: 40px; margin-bottom: 14px; }
  .wc-card { padding: 4px; }
  .wc-body { margin-bottom: 18px; }
}

/* legacy 640 rule kept for any lingering legend usage */
@media (max-width: 640px) {
  .legend { top: auto; bottom: 100px; left: 16px; padding: 10px 12px; }
}


/* ============ QUERY PANEL ============ */

/* FAB button - labeled pill, positioned below globe-mode-toggle */
.query-fab {
  position: fixed; right: 26px; top: 222px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 22px;
  background: linear-gradient(135deg, #1ec8dc 0%, #0e7490 100%);
  border: 1px solid rgba(125,235,248,0.85);
  border-radius: 15px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 18px rgba(34,211,238,0.35);
  transition: filter 200ms, transform 160ms, box-shadow 200ms;
  z-index: 15;
  font: 700 12px/1 "JetBrains Mono", ui-monospace, "Assistant", monospace;
  letter-spacing: 0.14em;
}
html[dir="rtl"] .query-fab { /* stay on physical right - left side has layers */ }
.query-fab-icon { flex-shrink: 0; width: 19px; height: 19px; }
.query-fab-label { white-space: nowrap; }
.query-fab:hover {
  filter: brightness(1.1);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 26px rgba(34,211,238,0.5);
  transform: translateY(-1px);
}
.query-fab:active { transform: scale(0.97); }
html[lang="he"] .query-fab { font-family: "Assistant", sans-serif; letter-spacing: 0.02em; font-size: 15.5px; font-weight: 700; }

/* Secondary FAB - "Ask as story" → rich infographic experience (Ask.html).
   Stacked BELOW the primary ASK ATLAS button, in a bold solid fill. */
.ask-fab-group {
  position: fixed; right: 26px; top: 222px;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  z-index: 15;
}
html[dir="rtl"] .ask-fab-group { /* stay on physical right - left side has layers */ }
.ask-fab-group .query-fab { position: static; top: auto; right: auto; }
.story-fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 22px;
  background: linear-gradient(135deg, #5b8cff 0%, #7c5cff 100%);
  border: 1px solid rgba(146,178,255,0.85);
  border-radius: 15px;
  color: #ffffff;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 18px rgba(91,140,255,0.35);
  transition: filter 200ms, transform 160ms, box-shadow 200ms;
  font: 700 12px/1 "JetBrains Mono", ui-monospace, "Assistant", monospace;
  letter-spacing: 0.14em;
}
.story-fab-icon { flex-shrink: 0; width: 19px; height: 19px; }
.story-fab-label { white-space: nowrap; }
.story-fab:hover {
  filter: brightness(1.12);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 26px rgba(108,140,255,0.5);
  transform: translateY(-1px);
}
.story-fab:active { transform: scale(0.96); }
html[lang="he"] .story-fab { font-family: "Assistant", sans-serif; letter-spacing: 0.02em; font-size: 15.5px; font-weight: 700; }
@media (max-width: 768px) {
  .ask-fab-group { right: 20px; top: 218px; gap: 10px; }
  .story-fab { height: 42px; padding: 0 16px; font-size: 11px; }
}
@media (max-width: 480px) {
  .ask-fab-group { right: 16px; top: 180px; gap: 8px; }
  .story-fab { height: 28px; padding: 0 10px; font-size: 9px; gap: 6px; }
}

/* Backdrop */
.qp-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 90;
  animation: qpFadeIn 200ms ease;
}
@keyframes qpFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Side panel */
.qp-panel {
  position: fixed; top: 0; right: -380px; width: 360px; height: 100vh;
  background: rgba(10, 14, 22, 0.96);
  border-left: 1px solid rgba(34, 211, 238, 0.15);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  z-index: 91;
  display: flex; flex-direction: column;
  transition: right 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: -6px 0 40px rgba(0,0,0,0.6);
}
html[dir="rtl"] .qp-panel { /* stay on physical right - left side has layers */ }
.qp-panel.qp-open { right: 0; }
html[dir="rtl"] .qp-panel.qp-open { /* stays right:0 same as LTR */ }

.qp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.qp-title {
  font: 600 14px/1 "JetBrains Mono", "Assistant", monospace;
  color: #67e8f9; letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.qp-title-icon {
  font-size: 16px; color: #22d3ee; opacity: 0.7;
}
.qp-close {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: background 150ms, color 150ms;
}
.qp-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Search input */
.qp-search { padding: 16px 20px 12px; position: relative; }
.qp-input {
  width: 100%; padding: 10px 40px 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(34, 211, 238, 0.20);
  border-radius: 10px;
  color: #e8edf5;
  font: 400 13px/1.4 "JetBrains Mono", "Assistant", monospace;
  outline: none;
  transition: border-color 200ms, box-shadow 200ms;
}
.qp-input::placeholder { color: rgba(255,255,255,0.30); }
.qp-input:focus {
  border-color: rgba(34, 211, 238, 0.50);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.15);
}
.qp-input:disabled { opacity: 0.5; }
.qp-send {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  background: rgba(34, 211, 238, 0.15); border: 1px solid rgba(34, 211, 238, 0.30);
  color: #67e8f9; font: 600 14px/1 monospace;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 150ms, color 150ms;
}
html[dir="rtl"] .qp-send { right: auto; left: 28px; }
.qp-send:hover { background: rgba(34, 211, 238, 0.30); color: #a5f3fc; }
.qp-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px 0;
  font: 400 11px/1 "JetBrains Mono", "Assistant", monospace;
  color: rgba(34, 211, 238, 0.7);
}
.qp-spinner {
  width: 14px; height: 14px; border: 2px solid rgba(34, 211, 238, 0.2);
  border-top-color: #22d3ee; border-radius: 50%;
  animation: qpSpin 800ms linear infinite;
}
@keyframes qpSpin { to { transform: rotate(360deg); } }
.qp-error {
  margin: 0 20px; padding: 8px 12px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  font: 400 11px/1.4 "JetBrains Mono", "Assistant", monospace;
  color: #fca5a5;
}

/* Query list */
.qp-list {
  flex: 1; overflow-y: auto; padding: 8px 16px 20px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.qp-empty {
  padding: 24px 8px; text-align: center;
  color: rgba(255,255,255,0.35);
  font: 400 12px/1.5 "JetBrains Mono", "Assistant", monospace;
}

/* Category */
.qp-cat { margin-bottom: 16px; }
.qp-cat-label {
  font: 600 9.5px/1 "JetBrains Mono", "Assistant", monospace;
  color: rgba(34, 211, 238, 0.55);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0 4px 8px; margin-bottom: 4px;
}

/* Query button */
.qp-query-btn {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 10px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: start;
  transition: background 150ms, border-color 150ms;
}
.qp-query-btn:hover {
  background: rgba(34, 211, 238, 0.06);
  border-color: rgba(34, 211, 238, 0.18);
}
.qp-q-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.qp-q-text {
  font: 400 12.5px/1.45 "JetBrains Mono", "Assistant", monospace;
  color: #cdd5e0;
}
.qp-query-btn:hover .qp-q-text { color: #e8edf5; }

/* ============ QUERY RESULT MODAL (centered overlay) ============ */
.qr-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 110;
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
}

.qr-modal {
  width: min(580px, calc(100vw - 48px));
  max-height: min(70vh, 600px);
  background: rgba(10, 14, 22, 0.96);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 16px;
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 12px 60px rgba(0,0,0,0.7), 0 0 50px rgba(34, 211, 238, 0.08);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 1;
}

.qr-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.qr-title {
  font: 600 14px/1.2 "JetBrains Mono", "Assistant", monospace;
  color: #67e8f9; letter-spacing: 0.06em;
  flex: 1; min-width: 0;
}
.qr-close {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 16px; cursor: pointer; padding: 4px 10px; border-radius: 6px;
  transition: background 150ms, color 150ms; flex-shrink: 0;
}
.qr-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Scrollable content area */
.qr-scroll {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.qr-scroll::-webkit-scrollbar { width: 5px; }
.qr-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

.qr-body {
  padding: 16px 22px 14px;
  font: 400 12.5px/1.7 "JetBrains Mono", "Assistant", monospace;
  color: #cdd5e0;
  white-space: pre-wrap; word-break: break-word;
  margin: 0;
}

/* "Show countries & layers" reveal button */
.qr-reveal-wrap {
  padding: 6px 22px 14px;
  text-align: center;
}
.qr-reveal-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.22);
  color: #67e8f9;
  font: 600 11px/1 "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.06em;
  padding: 9px 18px; border-radius: 20px;
  cursor: pointer; transition: background 180ms, border-color 180ms;
}
.qr-reveal-btn:hover {
  background: rgba(34, 211, 238, 0.16);
  border-color: rgba(34, 211, 238, 0.40);
}
.qr-reveal-arrow {
  font-size: 9px; transition: transform 200ms;
}

/* Expanded details sections */
.qr-details-section {
  padding: 10px 22px 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  animation: qrDetailsFade 250ms ease-out;
}
@keyframes qrDetailsFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.qr-details-label {
  font: 600 10px/1 "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  margin-bottom: 8px;
}
.qr-chip-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.qr-chip {
  display: inline-block; padding: 4px 11px;
  border-radius: 14px;
  font: 500 11px/1.3 "JetBrains Mono", "Assistant", monospace;
}
.qr-chip-country {
  background: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.22);
  color: #67e8f9;
}
.qr-chip-layer {
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24;
}

/* Footer with close/reset */
.qr-footer {
  padding: 12px 22px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: center;
  flex-shrink: 0;
}
.qr-reset {
  background: rgba(251, 113, 133, 0.10);
  border: 1px solid rgba(251, 113, 133, 0.30);
  color: #fda4af;
  font: 600 11px/1 "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.06em;
  padding: 8px 18px; border-radius: 20px;
  cursor: pointer; white-space: nowrap;
  transition: background 150ms, color 150ms;
}
.qr-reset:hover { background: rgba(251, 113, 133, 0.22); color: #fecdd3; }

/* "View on atlas" button in modal footer - primary action */
.qr-view-atlas {
  background: rgba(34, 211, 238, 0.18);
  border: 1px solid rgba(34, 211, 238, 0.40);
  color: #a5f3fc;
  font: 700 12px/1 "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.06em;
  padding: 10px 22px; border-radius: 20px;
  cursor: pointer; white-space: nowrap;
  transition: background 180ms, border-color 180ms, box-shadow 180ms;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.12);
}
.qr-view-atlas:hover {
  background: rgba(34, 211, 238, 0.30);
  border-color: rgba(34, 211, 238, 0.60);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.20);
  color: #fff;
}

/* ============ FLOATING PILL (visible when modal dismissed, visuals active) ============ */
.qr-floating-pill {
  position: fixed;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0;
  background: rgba(10, 14, 22, 0.92);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 24px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 30px rgba(34, 211, 238, 0.06);
  z-index: 105;
  overflow: hidden;
}

.qr-pill-reopen {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none;
  color: #67e8f9;
  font: 600 11px/1 "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.04em;
  padding: 10px 14px 10px 16px;
  cursor: pointer;
  transition: background 150ms;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden; text-overflow: ellipsis;
}
.qr-pill-reopen:hover { background: rgba(34, 211, 238, 0.08); }
.qr-pill-icon {
  font-size: 13px; flex-shrink: 0;
}
.qr-pill-title {
  overflow: hidden; text-overflow: ellipsis;
}

.qr-pill-clear {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  border-inline-start: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.qr-pill-clear:hover { background: rgba(251, 113, 133, 0.12); color: #fda4af; }

/* ============ RIGHT-SIDE LEGEND (atlas view with active query) ============ */
.qr-legend {
  position: fixed;
  top: 50%; right: 20px; transform: translateY(-50%);
  width: 200px;
  background: rgba(10, 14, 22, 0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  z-index: 105;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
html[dir="rtl"] .qr-legend { right: auto; left: 20px; }



.qr-legend-title {
  display: flex; align-items: center; gap: 7px;
  font: 600 11px/1.3 "JetBrains Mono", "Assistant", monospace;
  color: #67e8f9; letter-spacing: 0.04em;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.qr-legend-icon { font-size: 13px; flex-shrink: 0; }

.qr-legend-section {
  display: flex; flex-direction: column; gap: 6px;
}
.qr-legend-label {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 9px/1 "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.qr-legend-count {
  background: rgba(255,255,255,0.06);
  padding: 2px 6px; border-radius: 8px;
  font-size: 9px; color: rgba(255,255,255,0.50);
}

.qr-legend-items {
  display: flex; flex-direction: column; gap: 4px;
}
.qr-legend-item {
  display: flex; align-items: center; gap: 7px;
  font: 400 10.5px/1.3 "JetBrains Mono", "Assistant", monospace;
  color: #cdd5e0;
}
.qr-legend-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.qr-legend-swatch {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.qr-dot-cyan  { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,0.4); }
.qr-dot-amber { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.4); }

/* responsive */
@media (max-width: 768px) {
  .qr-legend { width: 170px; right: 12px; padding: 10px 12px; font-size: 10px; }
  html[dir="rtl"] .qr-legend { right: auto; left: 12px; }
}
@media (max-width: 480px) {
  .qr-legend { display: none; }
}

/* Responsive */
@media (max-width: 768px) {
  .query-fab { right: 20px; top: 218px; height: 42px; padding: 0 15px; font-size: 11px; }
  html[dir="rtl"] .query-fab { /* stay right */ }
  .qp-panel { width: 320px; right: -340px; }
  html[dir="rtl"] .qp-panel { /* stay right */ }
  .qr-modal { width: min(480px, calc(100vw - 32px)); max-height: 65vh; }
}
@media (max-width: 480px) {
  .query-fab { right: 16px; top: 180px; height: 28px; padding: 0 9px; font-size: 9px; gap: 6px; }
  html[dir="rtl"] .query-fab { /* stay right */ }
  .qp-panel { width: 100vw; right: -100vw; }
  html[dir="rtl"] .qp-panel { /* stay right */ }
  .qr-modal { width: calc(100vw - 24px); max-height: 75vh; }
}


/* ============ COUNTRY DOSSIER (Deep Dive) ============ */

/* Deep-dive CTA inside the info card */
.ic-deepdive {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 14px 18px 0;
  padding: 14px 16px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--bloc) 18%, transparent),
    color-mix(in oklab, var(--bloc) 8%, transparent));
  border: 1px solid color-mix(in oklab, var(--bloc) 45%, var(--line-2));
  color: var(--ink);
  cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
  position: relative;
}
html[lang="he"] .ic-deepdive { font-family: "Assistant", sans-serif; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; }
.ic-deepdive:hover {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--bloc) 28%, transparent),
    color-mix(in oklab, var(--bloc) 14%, transparent));
  border-color: color-mix(in oklab, var(--bloc) 65%, var(--line-2));
}
.ic-deepdive:active { transform: translateY(1px); }
.ic-deepdive-l { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.ic-deepdive-eb {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 9px; letter-spacing: 0.18em;
  color: color-mix(in oklab, var(--bloc) 70%, var(--ink));
  text-transform: uppercase;
}
html[lang="he"] .ic-deepdive-eb { font-family: "Assistant", sans-serif; font-size: 11px; letter-spacing: 0; }
.ic-deepdive-t { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.ic-deepdive-arrow {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 22px; line-height: 1;
  color: color-mix(in oklab, var(--bloc) 80%, var(--ink));
  transition: transform 180ms ease;
}
.ic-deepdive:hover .ic-deepdive-arrow { transform: translateX(4px); }
html[dir="rtl"] .ic-deepdive:hover .ic-deepdive-arrow { transform: translateX(-4px) scaleX(-1); }
html[dir="rtl"] .ic-deepdive-arrow { transform: scaleX(-1); }

/* ── Full-screen overlay ─────────────────────────────── */
.dx-overlay {
  position: fixed; inset: 0;
  z-index: 9000;
  background: rgba(2, 4, 10, 0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: stretch; justify-content: center;
  padding: 24px;
  animation: dxFadeIn 280ms ease-out;
  overflow: hidden;
}
.dx-overlay.rtl { direction: rtl; }
@keyframes dxFadeIn { from { opacity: 0; } to { opacity: 1; } }

.dx-shell {
  position: relative;
  width: 100%; max-width: 1400px;
  height: 100%;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in oklab, var(--bloc) 14%, var(--bg-1)) 0%, var(--bg-0) 55%),
    var(--bg-0);
  border: 1px solid var(--line-2);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.7),
    0 0 80px -20px var(--glow);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: dxRiseIn 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes dxRiseIn { from { opacity: 0; transform: translateY(18px) scale(0.99); } }

/* corner ticks - intel-briefing flavor */
.dx-shell::before, .dx-shell::after {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--bloc);
  pointer-events: none;
  opacity: 0.7;
}
.dx-shell::before { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; }
.dx-shell::after  { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }

/* ── Hero header ────────────────────────────────────── */
.dx-hero {
  position: relative;
  padding: 32px 40px 28px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 14px 28px;
  align-items: end;
}
.dx-hero-meta {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-inline-end: 56px;
}
.dx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2);
}
html[lang="he"] .dx-eyebrow { font-family: "Assistant", sans-serif; font-size: 13px; text-transform: none; letter-spacing: 0; }
.dx-mark { color: var(--bloc); }
.dx-eyebrow-sep { opacity: 0.4; }
.dx-eyebrow-iso { color: var(--ink); font-weight: 600; }

.dx-bloc-line {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-2);
  font-family: "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.08em;
}
html[lang="he"] .dx-bloc-line { font-family: "Assistant", sans-serif; font-size: 13px; letter-spacing: 0; }
.dx-bloc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.dx-hero-main {
  display: flex; align-items: center; gap: 22px;
}
.dx-hero-flag {
  font-size: 72px; line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
.dx-hero-name {
  margin: 0;
  font-size: 56px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--ink);
}
html[lang="he"] .dx-hero-name { font-weight: 800; letter-spacing: -0.01em; }

.dx-hero-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, max-content);
  gap: 28px;
  justify-content: end;
  align-self: end;
}
html[dir="rtl"] .dx-hero-stats { justify-content: start; }

.dx-close {
  position: absolute; top: 18px;
  inset-inline-end: 18px;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  display: flex; align-items: center; justify-content: center;
}
.dx-close:hover { background: rgba(255,255,255,0.08); color: var(--ink); }

/* ── Body grid: rail + scroll ───────────────────────── */
.dx-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
}
.dx-rail {
  border-inline-end: 1px solid var(--line);
  padding: 24px 0;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  background: rgba(0,0,0,0.18);
}
.dx-rail-h {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 0 24px 14px;
}
html[lang="he"] .dx-rail-h { font-family: "Assistant", sans-serif; font-size: 12px; text-transform: none; letter-spacing: 0; }
.dx-rail-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  background: transparent; border: 0; border-inline-start: 2px solid transparent;
  color: var(--ink-2);
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px; text-align: start;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
html[lang="he"] .dx-rail-btn { font-family: "Assistant", sans-serif; font-size: 15px; }
.dx-rail-btn:hover { color: var(--ink); background: rgba(255,255,255,0.03); }
.dx-rail-btn.on {
  color: var(--ink);
  border-inline-start-color: var(--hue);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--hue) 14%, transparent), transparent);
}
html[dir="rtl"] .dx-rail-btn.on {
  background: linear-gradient(-90deg,
    color-mix(in oklab, var(--hue) 14%, transparent), transparent);
}
.dx-rail-n {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.1em;
}
.dx-rail-btn.on .dx-rail-n { color: var(--hue); }

/* ── Scroll content ─────────────────────────────────── */
.dx-scroll {
  overflow-y: auto;
  padding: 32px 48px 80px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.dx-scroll::-webkit-scrollbar { width: 8px; }
.dx-scroll::-webkit-scrollbar-thumb { background: var(--line-2); }

/* ── Section ────────────────────────────────────────── */
.dx-section {
  padding-block: 28px 36px;
  border-bottom: 1px solid var(--line);
}
.dx-section:last-of-type { border-bottom: 0; }

.dx-sec-h {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 22px;
}
.dx-sec-num {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px;
  color: var(--hue);
  letter-spacing: 0.14em;
}
.dx-sec-bar {
  flex: 0 0 28px; height: 1px;
  background: var(--hue);
  opacity: 0.7;
}
.dx-sec-t {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
html[lang="he"] .dx-sec-t { font-weight: 800; }
.dx-sec-eyebrow {
  margin-inline-start: auto;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.12em; text-transform: uppercase;
}

.dx-sec-body { display: flex; flex-direction: column; gap: 22px; }

/* stats row */
.dx-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  background: var(--line);
}
.dx-stat {
  background: rgba(0,0,0,0.28);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 70px;
}
.dx-stat-k {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
html[lang="he"] .dx-stat-k { font-family: "Assistant", sans-serif; font-size: 12px; text-transform: none; letter-spacing: 0; }
.dx-stat-v {
  font-size: 18px; font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.dx-stat-v.mono {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-variant-numeric: tabular-nums;
}
html[lang="he"] .dx-stat-v.mono { font-family: "Assistant", sans-serif; }

/* hero stats are smaller */
.dx-hero-stats .dx-stat {
  background: transparent;
  padding: 0;
  min-height: 0;
}
.dx-hero-stats .dx-stat-v { font-size: 16px; }

/* two-column blocks */
.dx-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .dx-twocol { grid-template-columns: 1fr; } }

.dx-block {
  display: flex; flex-direction: column; gap: 10px;
}
.dx-block-h {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}
html[lang="he"] .dx-block-h { font-family: "Assistant", sans-serif; font-size: 13px; text-transform: none; letter-spacing: 0; }
.dx-p {
  margin: 0;
  font-size: 14px; line-height: 1.6;
  color: var(--ink); text-wrap: pretty;
  max-width: 70ch;
}
.dx-p.mono { font-family: "JetBrains Mono", "Assistant", monospace; font-size: 12px; color: var(--ink-2); }
html[lang="he"] .dx-p.mono { font-family: "Assistant", sans-serif; font-size: 13px; }

/* pills */
.dx-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.dx-pill.muted { color: var(--ink-3); }
.dx-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

.dx-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* partners */
.dx-partners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--line);
}
@media (max-width: 700px) { .dx-partners { grid-template-columns: 1fr; } }
.dx-flow-h {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
html[lang="he"] .dx-flow-h { font-family: "Assistant", sans-serif; font-size: 13px; text-transform: none; letter-spacing: 0; }
.dx-flow-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dx-flow-l li { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.dx-flag { font-size: 16px; }

/* age stack */
.dx-stack {
  height: 30px; display: flex; gap: 1px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.dx-stack-leg {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px; color: var(--ink-2);
}
html[lang="he"] .dx-stack-leg { font-family: "Assistant", sans-serif; font-size: 12px; }
.dx-stack-leg span { display: inline-flex; align-items: center; gap: 6px; }
.dx-stack-leg i { width: 8px; height: 8px; display: inline-block; }

/* bar */
.dx-bar {
  position: relative; height: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  overflow: hidden;
}
.dx-bar-fill { height: 100%; animation: dxBarGrow 700ms cubic-bezier(0.2,0.8,0.2,1); }
@keyframes dxBarGrow { from { width: 0 !important; } }
.dx-bar-lb {
  position: absolute; top: 50%;
  inset-inline-end: 10px;
  transform: translateY(-50%);
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px; color: var(--ink);
}

/* footer mark */
.dx-foot {
  margin-top: 40px;
  display: flex; align-items: center; gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
html[lang="he"] .dx-foot { font-family: "Assistant", sans-serif; font-size: 12px; text-transform: none; letter-spacing: 0; }
.dx-foot-mark { color: var(--bloc); }

/* ── Style variants ─────────────────────────────────── */

/* Long-form: no rail, wider content */
.dx-style-longform .dx-grid { grid-template-columns: 1fr; }
.dx-style-longform .dx-rail { display: none; }
.dx-style-longform .dx-scroll { padding: 32px 80px 80px; max-width: 1100px; margin: 0 auto; }
.dx-style-longform .dx-sec-t { font-size: 32px; }
.dx-style-longform .dx-section { padding-block: 40px 48px; }

/* Tabbed: rail becomes top tabs, no scroll between */
.dx-style-tabbed .dx-grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}
.dx-style-tabbed .dx-rail {
  flex-direction: row;
  border-inline-end: 0;
  border-bottom: 1px solid var(--line);
  padding: 0;
  overflow-x: auto; overflow-y: hidden;
}
.dx-style-tabbed .dx-rail-h { display: none; }
.dx-style-tabbed .dx-rail-btn {
  border-inline-start: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 20px;
  white-space: nowrap;
}
.dx-style-tabbed .dx-rail-btn.on {
  background: transparent;
  border-bottom-color: var(--hue);
}
html[dir="rtl"] .dx-style-tabbed .dx-rail-btn.on { background: transparent; }
.dx-style-tabbed .dx-scroll { scroll-snap-type: y mandatory; }
.dx-style-tabbed .dx-section { scroll-snap-align: start; min-height: 100%; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .dx-overlay { padding: 0; }
  .dx-shell { border: 0; }
  .dx-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .dx-rail {
    flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
    padding: 0;
  }
  .dx-rail-h { display: none; }
  .dx-rail-btn {
    border-inline-start: 0;
    border-bottom: 2px solid transparent;
    padding: 12px 16px;
    white-space: nowrap;
  }
  .dx-rail-btn.on { background: transparent; border-bottom-color: var(--hue); }
  .dx-hero { padding: 22px 22px 18px; gap: 10px 16px; }
  .dx-hero-flag { font-size: 52px; }
  .dx-hero-name { font-size: 36px; }
  .dx-hero-stats { grid-auto-columns: minmax(100px, max-content); gap: 16px; }
  .dx-scroll { padding: 22px 22px 60px; }
  .dx-sec-t { font-size: 22px; }
}


/* Move FABs out of the way when the side info card is open,
   OR when the lens dropdown / leaderboard is open (lenses live on the
   right edge in LTR / left edge in RTL - same corner as the FABs). */
/* FAB defaults: LTR right, RTL left.
   The leaderboard is always on the RIGHT; the lens dropdown is always on
   the LEFT; the country card uses the trailing edge (RIGHT in LTR / LEFT
   in RTL). Move FABs only when they would collide with an open panel. */

/* --- LTR: FAB on right --- */
.app:has(.card-slot.open) .wa-fab,
.app:has(.card-slot.open) .mail-fab,
.app:has(.lns-board) .wa-fab,
.app:has(.lns-board) .mail-fab {
  right: auto; left: 28px;
}
/* --- RTL: FAB on left --- */
html[dir="rtl"] .app:has(.card-slot.open) .wa-fab,
html[dir="rtl"] .app:has(.card-slot.open) .mail-fab,
html[dir="rtl"] .app:has(.lns-panel) .wa-fab,
html[dir="rtl"] .app:has(.lns-panel) .mail-fab {
  left: auto; right: 28px;
}
/* RTL FABs sit on the LEFT by default - they do NOT collide with the
   right-pinned leaderboard, so override the LTR rule above for RTL. */
html[dir="rtl"] .app:has(.lns-board) .wa-fab,
html[dir="rtl"] .app:has(.lns-board) .mail-fab {
  right: auto; left: 28px;
}

/* And hide them entirely while the full-screen dossier is open */
body:has(.dx-overlay) .wa-fab,
body:has(.dx-overlay) .mail-fab { display: none; }
@media (max-width: 640px) {
  .app:has(.card-slot.open) .wa-fab,
  .app:has(.card-slot.open) .mail-fab,
  .app:has(.lns-board) .wa-fab,
  .app:has(.lns-board) .mail-fab { right: auto; left: 18px; }
  html[dir="rtl"] .app:has(.card-slot.open) .wa-fab,
  html[dir="rtl"] .app:has(.card-slot.open) .mail-fab,
  html[dir="rtl"] .app:has(.lns-panel) .wa-fab,
  html[dir="rtl"] .app:has(.lns-panel) .mail-fab { left: auto; right: 18px; }
  html[dir="rtl"] .app:has(.lns-board) .wa-fab,
  html[dir="rtl"] .app:has(.lns-board) .mail-fab { right: auto; left: 18px; }
}


/* ============ COUNTRY LENSES - bar + leaderboard ============ */

/* Lens toggle button - share IDENTICAL styling with .ld-tab (size/color),
   positioned directly below it */
.lns-tab {
  top: 168px;          /* under .ld-tab (120 + 38 + 10 gap) */
}
@media (max-width: 900px) {
  .lns-tab { top: 154px; }
}
@media (max-width: 640px) {
  .lns-tab { top: 138px; }
}
/* The shared button rules live on the .ld-tab selector; .lns-tab carries both
   classes so it inherits font, color, padding, border, hover/open states.   */

/* Sector Lens entry - third tab below .lns-tab, links out to the
   industry-signature view. Inherits .ld-tab styling. */
.sec-tab {
  top: 216px;            /* under .lns-tab (168 + 38 + 10 gap) */
  text-decoration: none; /* it's an <a>, not a <button> */
  position: absolute;
}
.sec-tab .sec-tab-arrow {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-inline-start: 2px;
  transition: transform 180ms, color 180ms;
}
.sec-tab:hover .sec-tab-arrow {
  color: #22d3ee;
  transform: translate(2px, -2px);
}
html[dir="rtl"] .sec-tab:hover .sec-tab-arrow {
  transform: translate(-2px, -2px);
}
@media (max-width: 900px) {
  .sec-tab { top: 202px; }
}
@media (max-width: 640px) {
  .sec-tab { top: 186px; }
}

/* Dropdown panel - anchored below the lens button */
.lns-panel {
  position: absolute;
  top: 216px;          /* below the lens-tab button */
  left: 28px;
  z-index: 33;         /* above the layers drawer */
  width: 280px;
  max-height: calc(100vh - 220px);
  display: flex; flex-direction: column;
  background: rgba(8, 11, 17, 0.95);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  animation: lnsPanelIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}
/* Lens panel stays on LEFT in both directions (below the lens tab) */
@keyframes lnsPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
}

.lns-panel-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.lns-panel-eyebrow {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
}
html[lang="he"] .lns-panel-eyebrow { font-family: "Assistant", sans-serif; font-size: 11px; letter-spacing: 0; text-transform: none; }
.lns-panel-count {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px;
  color: var(--ink-2);
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border: 1px solid var(--line);
}

.lns-panel-list {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 6px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.lns-panel-list::-webkit-scrollbar { width: 4px; }
.lns-panel-list::-webkit-scrollbar-thumb { background: var(--line-2); }

.lns-opt {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-inline-start: 2px solid transparent;
  cursor: pointer;
  text-align: start;
  font-family: "Space Grotesk", sans-serif;
  color: var(--ink-2);
  transition: background 140ms, color 140ms, border-color 140ms;
}
html[lang="he"] .lns-opt { font-family: "Assistant", sans-serif; }
.lns-opt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hue);
  box-shadow: 0 0 8px var(--hue);
}
.lns-opt-body {
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.lns-opt-lb {
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[lang="he"] .lns-opt-lb { font-size: 14px; }
.lns-opt-rb {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px;
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[lang="he"] .lns-opt-rb { font-family: "Assistant", sans-serif; font-size: 11px; }
.lns-opt-check { color: var(--hue); font-size: 10px; }
.lns-opt:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
}
.lns-opt.on {
  border-inline-start-color: var(--hue);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--hue) 14%, transparent),
    transparent);
}
html[dir="rtl"] .lns-opt.on {
  background: linear-gradient(-90deg,
    color-mix(in oklab, var(--hue) 14%, transparent),
    transparent);
}

.lns-panel-clear {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  cursor: pointer;
  text-align: start;
}
html[lang="he"] .lns-panel-clear { font-family: "Assistant", sans-serif; font-size: 12px; letter-spacing: 0; text-transform: none; }
.lns-panel-clear:hover { color: var(--ink); }

/* Floating leaderboard panel - pinned to the physical RIGHT in both LTR and RTL
   (the LEFT side belongs to the logo + tabs stack). */
.lns-board {
  position: absolute; top: 130px;
  right: 24px;
  z-index: 28;
  width: 300px;
  max-height: calc(100vh - 220px);
  background: rgba(8, 11, 17, 0.92);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55),
              inset 0 0 60px color-mix(in oklab, var(--hue) 8%, transparent);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: lnsBoardIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes lnsBoardIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

.lns-board-h {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--hue) 16%, transparent),
    transparent);
}
.lns-board-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
}
html[lang="he"] .lns-board-eyebrow { font-family: "Assistant", sans-serif; font-size: 11px; letter-spacing: 0; text-transform: none; }
.lns-board-mark { color: var(--hue); }
.lns-board-t {
  margin: 0 0 4px;
  font-size: 18px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
}
html[lang="he"] .lns-board-t { font-weight: 800; letter-spacing: 0; }
.lns-board-sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--ink-2);
}
.lns-board-rb-lb { color: var(--ink-3); }
.lns-board-rb {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px;
  color: var(--hue);
  letter-spacing: 0.06em;
}
html[lang="he"] .lns-board-rb { font-family: "Assistant", sans-serif; font-size: 12px; letter-spacing: 0; }

.lns-board-list {
  list-style: none; margin: 0; padding: 6px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.lns-board-list::-webkit-scrollbar { width: 6px; }
.lns-board-list::-webkit-scrollbar-thumb { background: var(--line-2); }

.lns-row {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent; border: 0;
  color: var(--ink);
  text-align: start;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease;
}
html[lang="he"] .lns-row { font-family: "Assistant", sans-serif; font-size: 14px; }
.lns-row:hover { background: rgba(255,255,255,0.04); }
.lns-row-rk {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.lns-row-flag { font-size: 16px; line-height: 1; }
.lns-row-name {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lns-row-v {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 11px;
  color: var(--hue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html[lang="he"] .lns-row-v { font-family: "Assistant", sans-serif; font-size: 12px; }

/* Hide hint while lens is on (the screen is busy enough) */
.app:has(.lns-board) .hint { opacity: 0.4; }

/* When a country is selected, hide the leaderboard - user is focused
   on the dossier/card, not the global ranking. Lens rail stays. */
.app:has(.card-slot.open) .lns-board { display: none; }

/* Responsive */
@media (max-width: 900px) {
  .lns-tab { top: 154px; left: 20px; padding: 7px 11px; font-size: 11px; }
  .lns-panel { top: 200px; left: 20px; width: 260px; }
  .lns-board {
    top: auto; bottom: 16px;
    right: 16px;
    left: auto;
    width: 280px;
    max-height: 50vh;
  }
}
@media (max-width: 640px) {
  .lns-tab { top: 136px; left: 14px; }
  .lns-panel { top: 178px; left: 14px; width: calc(100vw - 28px); max-width: 280px; }
}


/* ============ MAIL PROVIDER MENU ============ */
.mm-menu {
  position: fixed;
  z-index: 9500;
  width: 240px;
  background: rgba(8, 11, 17, 0.96);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7),
              0 0 0 1px rgba(167, 139, 250, 0.18) inset;
  animation: mmIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}
@keyframes mmIn { from { opacity: 0; transform: translateY(-4px); } }

.mm-h {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.10), transparent);
  display: flex; flex-direction: column; gap: 4px;
}
.mm-eyebrow {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
html[lang="he"] .mm-eyebrow,
.mm-menu.rtl .mm-eyebrow { font-family: "Assistant", sans-serif; font-size: 11px; letter-spacing: 0; text-transform: none; }
.mm-addr {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 12px;
  color: #c4b5fd;
  word-break: break-all;
}
html[lang="he"] .mm-addr { font-family: "JetBrains Mono", "Assistant", monospace; }

.mm-list {
  list-style: none; margin: 0; padding: 4px 0;
}
.mm-opt {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  text-align: start;
  cursor: pointer;
  transition: background 130ms, color 130ms;
}
html[lang="he"] .mm-opt,
.mm-menu.rtl .mm-opt { font-family: "Assistant", sans-serif; font-size: 14px; }
.mm-opt:hover {
  background: rgba(167, 139, 250, 0.10);
  color: #ffffff;
}
.mm-opt-lb { font-weight: 500; }
.mm-opt-arrow {
  font-family: "JetBrains Mono", "Assistant", monospace;
  font-size: 14px;
  color: var(--ink-3);
}
.mm-opt:hover .mm-opt-arrow { color: #c4b5fd; }


/* RTL: brand aligns to the right edge of its container */
html[dir="rtl"] .brand { align-items: flex-start; }
/* RTL: keep the brand+logo pinned to the physical LEFT of the screen,
   even though the page reads right-to-left. */
html[dir="rtl"] .topbar { flex-direction: row-reverse; }

/* Welcome - logo pinned to top-left of screen (above the centered card) */
.wc-logo-tl {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 200px;
  height: 150px;
  object-fit: contain;
  object-position: left top;
  z-index: 2;
  filter: drop-shadow(0 8px 30px rgba(34, 211, 238, 0.4));
  animation: wcLogoIn 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}
@keyframes wcLogoIn { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 900px) {
  .wc-logo-tl { width: 160px; height: 120px; }
}
@media (max-width: 640px) {
  .wc-logo-tl { width: 120px; height: 90px; top: 16px; left: 16px; }
  .brand-logo { width: 48px; height: 36px; }
}


/* ============================================================
   HEBREW QUERY UI - modern face (Assistant) + larger type
   Scoped to html[lang="he"] so the English UI keeps its mono look.
   ============================================================ */
html[lang="he"] .qp-title { font-family: "Assistant", sans-serif; font-size: 18px; letter-spacing: 0; text-transform: none; }
html[lang="he"] .qp-input { font-family: "Assistant", sans-serif; font-size: 16px; }
html[lang="he"] .qp-input::placeholder { font-family: "Assistant", sans-serif; }
html[lang="he"] .qp-cat-label { font-family: "Assistant", sans-serif; font-size: 13px; letter-spacing: 0.03em; font-weight: 700; }
html[lang="he"] .qp-q-text { font-family: "Assistant", sans-serif; font-size: 16.5px; line-height: 1.55; font-weight: 500; }
html[lang="he"] .qp-q-icon { font-size: 18px; }
html[lang="he"] .qp-empty { font-family: "Assistant", sans-serif; font-size: 14.5px; line-height: 1.6; }
html[lang="he"] .qp-loading { font-family: "Assistant", sans-serif; font-size: 14px; }
html[lang="he"] .qp-error { font-family: "Assistant", sans-serif; font-size: 14px; }

html[lang="he"] .qr-title { font-family: "Assistant", sans-serif; font-size: 19px; letter-spacing: 0; font-weight: 700; }
html[lang="he"] .qr-body { font-family: "Assistant", sans-serif; font-size: 17px; line-height: 1.85; direction: rtl; text-align: right; }
html[lang="he"] .qr-reveal-btn { font-family: "Assistant", sans-serif; font-size: 14.5px; font-weight: 600; }
html[lang="he"] .qr-details-label { font-family: "Assistant", sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
html[lang="he"] .qr-chip { font-family: "Assistant", sans-serif; font-size: 14px; font-weight: 500; }
html[lang="he"] .qr-view-atlas, html[lang="he"] .qr-reset { font-family: "Assistant", sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: 0; }
html[lang="he"] .qr-pill-title { font-family: "Assistant", sans-serif; font-size: 15px; font-weight: 600; }

/* Legend (מקרא) - same modern treatment, larger + roomier */
html[lang="he"] .qr-legend { width: 234px; padding: 16px 16px; }
html[lang="he"] .qr-legend-title { font-family: "Assistant", sans-serif; font-size: 15.5px; letter-spacing: 0; font-weight: 700; }
html[lang="he"] .qr-legend-label { font-family: "Assistant", sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; color: rgba(255,255,255,0.55); }
html[lang="he"] .qr-legend-item { font-family: "Assistant", sans-serif; font-size: 14.5px; line-height: 1.5; font-weight: 500; }
html[lang="he"] .qr-legend-count { font-family: "Assistant", sans-serif; font-size: 12px; }
html[lang="he"] .qr-legend-swatch { width: 13px; height: 13px; }
html[lang="he"] .qr-legend-dot { width: 8px; height: 8px; }
@media (max-width: 768px) {
  html[lang="he"] .qr-legend { width: 200px; }
}


/* Ranked country badge in the query legend (replaces the old same-color dots) */
.qr-legend-rank {
  flex-shrink: 0;
  min-width: 17px; height: 17px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background: rgba(34, 211, 238, 0.16);
  border: 1px solid rgba(34, 211, 238, 0.42);
  color: #a5f3fc;
  font: 700 9.5px/1 "Space Grotesk", sans-serif;
  font-variant-numeric: tabular-nums;
}


/* AI answer badge + disclaimer in the result modal */
.qr-title-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.qr-ai-badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 9px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #d8b4fe;
  font: 700 10px/1 "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── Confidence badge — colour-coded honesty signal ───────────────────── */
.qr-conf-badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 9px;
  border-radius: 6px;
  font: 700 10px/1 "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: help;
}
.qr-conf-high     { background: rgba(34, 197, 94, 0.14);  border: 1px solid rgba(34, 197, 94, 0.55);  color: #86efac; }
.qr-conf-medium   { background: rgba(234, 179, 8, 0.14);  border: 1px solid rgba(234, 179, 8, 0.55);  color: #fde68a; }
.qr-conf-low      { background: rgba(249, 115, 22, 0.14); border: 1px solid rgba(249, 115, 22, 0.55); color: #fdba74; }
.qr-conf-estimate { background: rgba(56, 189, 248, 0.14); border: 1px solid rgba(56, 189, 248, 0.55); color: #7dd3fc; }
.qr-conf-unknown  { background: rgba(239, 68, 68, 0.16);  border: 1px solid rgba(239, 68, 68, 0.6);   color: #fca5a5; }

/* ── Last verified date — quiet timestamp next to the confidence pill ── */
.qr-verified-badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
  font: 500 10px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  cursor: help;
}
html[lang="he"] .qr-conf-badge,
html[lang="he"] .qr-verified-badge { font-family: "Assistant", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0; }

/* Tone-match the soft note to the confidence level so the message and
   visual weight track each other. Base style stays; colours shift. */
.qr-ai-note-unknown {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fecaca !important;
}
.qr-ai-note-low,
.qr-ai-note-estimate {
  background: rgba(249, 115, 22, 0.08) !important;
  border-color: rgba(249, 115, 22, 0.35) !important;
  color: #fdba74 !important;
}
.qr-ai-note {
  margin-top: 10px; padding: 9px 12px;
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.22);
  color: rgba(216, 180, 254, 0.85);
  font: 500 11.5px/1.5 "JetBrains Mono", "Assistant", monospace;
}
html[lang="he"] .qr-ai-badge { font-family: "Assistant", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0; }
html[lang="he"] .qr-ai-note { font-family: "Assistant", sans-serif; font-size: 13px; }

/* ── Sources block (web_search citations in the query modal) ──
   When live sources are present we replace the generic "may contain
   inaccuracies" note with a verifiable list — the entire point of the
   web_search upgrade is that the user can click through. */
.qr-sources {
  margin: 14px 22px 6px;
  padding: 12px 14px 10px;
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.05);
  border: 1px solid rgba(34, 211, 238, 0.18);
}
.qr-sources-label {
  font: 600 10.5px/1 "JetBrains Mono", "Assistant", monospace;
  letter-spacing: 0.14em;
  color: rgba(103, 232, 249, 0.85);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.qr-sources-list {
  margin: 0;
  padding-inline-start: 20px;
  font: 400 12.5px/1.6 "Space Grotesk", "Assistant", sans-serif;
  color: #b6c0cf;
}
.qr-source-item { margin-bottom: 4px; }
.qr-source-link {
  color: #e2e8f0;
  text-decoration: none;
  border-bottom: 1px dotted rgba(226, 232, 240, 0.4);
  transition: color 0.15s, border-color 0.15s;
}
.qr-source-link:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.7);
}
.qr-source-host {
  margin-inline-start: 8px;
  font: 400 10.5px/1 "JetBrains Mono", "Assistant", monospace;
  color: #5a6473;
}
html[lang="he"] .qr-sources-label,
html[lang="he"] .qr-source-host { font-family: "JetBrains Mono", "Assistant", monospace; }
html[lang="he"] .qr-sources-list { font-family: "Assistant", sans-serif; direction: rtl; text-align: right; padding-inline-start: 0; padding-inline-end: 20px; }

/* ── Auto-refresh badge ─ quiet status pill bottom-left of the viewport ──── */
.live-badge {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 80;
  display: inline-flex; align-items: center; gap: 7px;
  height: 24px; padding: 0 11px;
  border-radius: 999px;
  background: rgba(15, 20, 32, 0.85);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  cursor: help;
  user-select: none;
  opacity: 0.72;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.live-badge:hover { opacity: 1 !important; transform: translateY(-1px); color: var(--ink); }
html[lang="he"] .live-badge { font-family: "Assistant", sans-serif; font-size: 12px; letter-spacing: 0; direction: rtl; left: auto; right: 16px; }

.live-badge-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
  position: relative;
}
/* Pulsing dot ring for the OK state — quiet liveliness signal */
.live-badge-ok    { color: #6ee7b7; border-color: rgba(34, 197, 94, 0.3); }
.live-badge-ok .live-badge-dot::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 999px; border: 1px solid currentColor;
  opacity: 0.5;
  animation: live-badge-pulse 2.4s ease-out infinite;
}
@keyframes live-badge-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.3); opacity: 0;   }
}
.live-badge-warn  { color: #fdba74; border-color: rgba(249, 115, 22, 0.35); }
.live-badge-idle  { color: #94a3b8; }

/* On very narrow screens, collapse to just the dot to stay out of the way */
@media (max-width: 520px) {
  .live-badge { padding: 0 9px; }
  .live-badge > span:not(.live-badge-dot) {
    max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}