/* ============================================================
   CSS VARIABLES — Theme: Light (default), aligned with the
   Figma design tokens. Only two modes exist: this :root block
   (light) and the body[data-theme="dark"] override below.
   ============================================================ */
:root {
  --bg-app:     #f7efee;
  --bg-sidebar: #f7efee;
  --bg-ocean:   #7fc9fb;
  --bg-globe:   #1b2733;

  --color-country:  #f4dbd8;
  --stroke-country: #23343f;

  --text-primary:  #292929;
  --text-muted:    #6f6f6f;
  --accent:        #5fecac;
  --border:        #292929;
  --active-bg:     #5fecac;
  --active-border: #5fecac;

  --reference-line: #d64545;

  --font-family:    'Quicksand', sans-serif;
  --font-size-base: 14px;
  --sidebar-width:  240px;

  /* The floating cards (info, compare) follow the theme; dark mode keeps
     the Figma dark card. */
  --card-bg:         #ffffff;
  --card-text:       #292929;
  --card-text-muted: #6f6f6f;
  --card-shadow:     rgba(0, 0, 0, 0.15);

  /* Fixed colours, the same in both themes: the tool tooltips stay dark
     and the card inputs white whatever the theme. */
  --popover-bg:         #292929;
  --field-bg:           #ffffff;
  --field-text:         #292929;
  --field-border:       #d1cdcd;
  --field-disabled-bg:  #e6e6e6;
  --field-hover-bg:     #f0f0f0;

  --modal-backdrop:  rgba(0, 0, 0, 0.5);
  --drawer-backdrop: rgba(0, 0, 0, 0.4);
  --drawer-shadow:   rgba(0, 0, 0, 0.25);

  --terrain-mountain: #8a6642;
  --terrain-desert:   #d9b768;
  --terrain-forest:   #3f7d4a;

  /* Overlay palettes, read once by JS (see core/palette.js).
     Compare: saturated hues that stay apart from each other and from the
     map's own colours in both themes; the first is the default highlight. */
  --compare-highlight: var(--compare-1);
  --compare-1: #fa6048;
  --compare-2: #8e44ad;
  --compare-3: #1fa35c;
  --compare-4: #f2b705;
  --compare-5: #00a6a6;
  --truesize-1: #e74c3c;
  --truesize-2: #3498db;
  --truesize-3: #2ecc71;
  --truesize-4: #f39c12;
  --truesize-5: #9b59b6;
  --truesize-6: #1abc9c;
  --truesize-7: #e67e22;
  --truesize-8: #95a5a6;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  background: var(--bg-app);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

/* ============================================================
   LAYOUT — sidebar left, map right
   ============================================================ */
#app {
  display: flex;
  height: 100vh;
}

#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sidebar-header {
  /* Extra top/bottom padding makes up for the title now being one line
     instead of two, keeping the header's total height about the same. */
  padding: 31px 16px 25px;
  border-bottom: 1px solid var(--border);
}

#sidebar-header h1 {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.2;
}

#sidebar-header .tagline {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

#projection-list {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 8px;
  scroll-padding-top: 56px; /* a button scrolled into view must clear the pinned title */
  scrollbar-width: thin;
  scrollbar-color: var(--text-primary) transparent;
}

/* Stays in view while the list scrolls, so that someone far down it still
   reads what the buttons are for. */
#projection-list > .section-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-sidebar);
}

#projection-list::-webkit-scrollbar {
  width: 6px;
}

#projection-list::-webkit-scrollbar-track {
  background: transparent;
}

#projection-list::-webkit-scrollbar-thumb {
  background: var(--text-primary);
  border-radius: 3px;
}

/* ============================================================
   TOOLS OVERLAY RENDERING — compare/tissot/flightpath/truesize
   still render onto the SVG (see map.js); their sidebar buttons
   and panels are gone for now (relocating elsewhere later), so
   only the styling for the rendered overlays themselves remains.
   ============================================================ */
.truesize-layer {
  pointer-events: none;
}

.truesize-shape {
  cursor: move;
  pointer-events: auto;
  fill-opacity: 0.55;
  stroke-width: 1.5px;
}

/* Compare-mode highlight — the selected country redrawn on top of the
   map under its own (possibly different) projection. Fixed color per
   spec, not a theme token. */
.compare-highlight-layer {
  pointer-events: none;
}

/* Invisible grab area under the visible shape: its wide stroke makes tiny
   countries (Luxembourg, Singapore) grabbable at world scale. Re-enables
   the pointer events the layer above turns off, for this shape only. */
.compare-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 14px;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  cursor: grab;
}

.compare-overlay.dragging .compare-hit {
  cursor: grabbing;
}

.compare-highlight {
  fill: var(--compare-highlight);
  fill-opacity: 0.5;
  stroke: var(--compare-highlight);
  stroke-opacity: 1;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

/* ============================================================
   HELP MODAL — the welcome pitch shown on every launch
   ============================================================ */
#help-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop);
}

#help-modal-backdrop[hidden] {
  display: none;
}

#help-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px 24px 24px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
}

#help-modal-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 13px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
}

#help-modal-close:hover {
  background: var(--active-bg);
  border-color: var(--active-border);
  color: var(--text-primary);
}

#help-modal-title {
  font-size: 18px;
  margin-bottom: 14px;
}

#help-modal-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

#help-modal-body p {
  margin-bottom: 12px;
}

#help-modal-body p:last-child {
  margin-bottom: 0;
}

#help-modal-borders {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

#help-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

#welcome-language-select {
  min-width: 0;
  padding: 8px 10px;
  font-family: 'Quicksand', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans SC', 'Noto Sans Arabic', sans-serif;
  font-size: 14px;
  background: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-border);
  border-radius: 4px;
}

/* The ✕ alone read as "dismiss"; a clear call to action says "start". */
#help-modal-cta {
  flex: none;
  padding: 10px 24px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  background: var(--active-bg);
  border: 1px solid var(--active-border);
  border-radius: 999px; /* pill, echoing the round ✕ it sits under */
  color: var(--text-primary);
  cursor: pointer;
}

#help-modal-cta:hover {
  background: color-mix(in srgb, var(--accent) 80%, var(--text-primary));
}

/* ============================================================
   ONBOARDING TOUR — a spotlight on one control and a bubble
   beside it (placed by ui/onboarding.js)
   ============================================================ */
/* Covers the page so the app can't be clicked mid-tour; above the mobile
   drawer (100) and its toggle (110). */
#tour {
  position: fixed;
  inset: 0;
  z-index: 200;
}

#tour[hidden] {
  display: none;
}

/* The dimming is the spotlight's own shadow, so the highlighted control
   stays at full brightness without a cut-out mask. */
#tour-spotlight {
  position: fixed;
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 0 0 200vmax var(--modal-backdrop);
  pointer-events: none;
}

/* Demonstration steps (the tour switches projection by itself): no
   dimming, the map is what there is to watch, and the bubble steps aside
   for the length of the morph. */
#tour.demo #tour-spotlight {
  box-shadow: none;
}

#tour.morphing #tour-bubble {
  visibility: hidden;
}

#tour-bubble {
  position: fixed;
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
}

/* The arrow: a square turned 45°, showing only the two borders that face
   the target. --tour-arrow-top is set per step to aim at its middle. */
#tour-bubble::before {
  content: "";
  position: absolute;
  top: var(--tour-arrow-top, 50%);
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  transform: rotate(45deg);
}

#tour-bubble[data-side="right"]::before {
  left: -7px;
  border-top: none;
  border-right: none;
}

#tour-bubble[data-side="left"]::before {
  right: -7px;
  border-bottom: none;
  border-left: none;
}

#tour-bubble[data-side="none"]::before {
  display: none;
}

#tour-progress {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

#tour-title {
  font-size: 17px;
  margin-bottom: 8px;
}

#tour-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

#tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

#tour-skip {
  padding: 0;
  font-family: var(--font-family);
  font-size: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

#tour-skip[hidden] {
  display: none;
}

#tour-skip:hover {
  color: var(--text-primary);
}

/* Same pill as the welcome modal's call to action */
#tour-next {
  margin-inline-start: auto;
  padding: 8px 20px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  background: var(--active-bg);
  border: 1px solid var(--active-border);
  border-radius: 999px;
  color: var(--text-primary);
  cursor: pointer;
}

#tour-next:hover {
  background: color-mix(in srgb, var(--accent) 80%, var(--text-primary));
}

/* Compare mode dims the projection list while active (see map.js) — kept
   even though its sidebar toggle is gone for now, since it's cheap to
   leave wired for whenever compare mode gets a new trigger. */
#projection-list.disabled-list {
  opacity: 0.4;
  pointer-events: none;
}

/* ============================================================
   RECENTER PRESETS
   ============================================================ */
#recenter-panel {
  /* Shares a short window with the projection list instead of crushing it:
     tall scripts (Urdu) would otherwise leave the list no room for a button. */
  flex-shrink: 1;
  max-height: 50%;
  overflow-y: auto;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

/* Semi-bold section heading — "Select a projection" / "Select a view" —
   distinct from the smaller, muted .proj-family-header captions below it. */
.section-title {
  padding: 12px 16px 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

#recenter-list.disabled-list {
  opacity: 0.4;
  pointer-events: none;
}

/* ============================================================
   SIDEBAR BUTTONS — shared rounded-pill style for both the
   projection list and the recenter/view list, matching Figma:
   inset from the sidebar edge (margin, not full-bleed), rounded
   corners, a 50%-accent hover tint distinct from the full-accent
   selected state.
   ============================================================ */
.sidebar-btn {
  display: block;
  /* A <button> shrinks to its label even as a block, which made every
     highlight a different width; fill the row minus the 12px side margins. */
  width: calc(100% - 24px);
  box-sizing: border-box;
  text-align: start;
  background: none;
  border: none;
  border-radius: 8px;
  margin: 0 12px 4px;
  padding: 12px 12px 12px 16px;
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  transition: background 0.15s;
}

.sidebar-btn:hover {
  background: color-mix(in srgb, var(--accent) 50%, var(--bg-sidebar));
}

.sidebar-btn.active {
  background: var(--active-bg);
  font-weight: 600;
}

.proj-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.proj-family-header {
  padding: 12px 16px 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   MAIN AREA — map (+ its floating toolbar/info overlays) and,
   when active, the compare-mode panels
   ============================================================ */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#map-svg {
  width: 100%;
  height: 100%;
  cursor: grab;
}

#map-svg:active {
  cursor: grabbing;
}

/* ============================================================
   MAP TOOLBAR — right-side icon pills (zoom, then tools below).
   ============================================================ */
#zoom-controls {
  position: absolute;
  top: 84px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 40px;
  border-radius: 100px;
  overflow: hidden;
}

#zoom-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-sidebar);
  color: var(--text-primary);
  border: none;
  cursor: pointer;
}

#zoom-in-btn {
  border-bottom: 1px solid var(--border);
}

#map-tools {
  position: absolute;
  top: 188px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 40px;
}

/* Rounded top/bottom corners on the first/last button, instead of
   border-radius + overflow:hidden on the container — that trick clipped
   the hover tooltips, which need to render outside this box (see
   [data-tooltip] below). */
#map-tools .tool-btn:first-child {
  border-radius: 100px 100px 0 0;
}

#map-tools .tool-btn:last-child {
  border-radius: 0 0 100px 100px;
}

.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-family);
  font-weight: bold;
  font-size: 16px;
  background: var(--bg-sidebar);
  color: var(--text-primary);
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

/* #info-toggle-btn keeps the plain "i" glyph from the Figma spec — every
   other icon here is inline SVG, so this is the one button needing its
   own font instead of currentColor-filled artwork. */
#info-toggle-btn {
  font-family: 'Courier New', monospace;
  font-size: 20px;
}

.tool-btn:hover {
  background: color-mix(in srgb, var(--accent) 50%, var(--bg-sidebar));
}

.tool-btn.active {
  background: var(--accent);
  color: white;
}

/* Hover tooltips, desktop only — no touch/mobile layout exists yet for
   this toolbar (see backlog), so there's no tap-friendly equivalent. */
@media (hover: hover) and (pointer: fine) {
  .tool-btn[data-tooltip] {
    position: relative;
  }

  .tool-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--popover-bg);
    color: white;
    font-family: var(--font-family);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
  }
}

/* The base rect behind everything is always the dark "void" color, on
   every projection — not just orthographic. It only actually shows
   through in the empty corners of non-rectangular projections (Mollweide,
   Sinusoidal, Hammer, Aitoff, Winkel Tripel, the orthographic globe...);
   rectangular ones (Mercator, Equirectangular, ...) fully cover it with
   .globe-sphere below, so it's invisible there. */
.ocean {
  fill: var(--bg-globe);
}

/* Sphere/projection outline — a real shape drawn on top of the ocean
   rect, traced from the {type: "Sphere"} geometry of whichever
   projection is active, so it hugs that projection's true silhouette
   (a rectangle for cylindrical ones, an ellipse for pseudocylindrical/
   pseudoazimuthal ones, a circle for orthographic). This is what
   actually renders as "the ocean" — light blue, same on every
   projection. The stroke only shows in orthographic (see
   .globe-sphere.active), where it's the only thing separating the
   globe disc from the void background. */
.globe-sphere {
  fill: var(--bg-ocean);
  stroke: none;
}

.globe-sphere.active {
  stroke: var(--accent);
  stroke-width: 1.5px;
  stroke-opacity: 0.8;
  vector-effect: non-scaling-stroke;
}

.country {
  fill: var(--color-country);
  stroke: var(--stroke-country);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.country.selected {
  fill: var(--accent);
}

/* Terrain patches (mountains, deserts, forest-basin proxies) — fixed
   real-world colors regardless of theme (terrain color, not a theme
   accent), low opacity so country borders stay visible underneath.
   Pointer-events off so it never steals clicks from the country paths
   underneath it. */
.terrain-layer {
  pointer-events: none;
}

.terrain-patch {
  stroke: none;
  fill-opacity: 0.35;
}

.terrain-mountain {
  fill: var(--terrain-mountain);
}

.terrain-desert {
  fill: var(--terrain-desert);
}

.terrain-forest {
  fill: var(--terrain-forest);
}

/* Tissot's indicatrix overlay — pointer-events off so it never
   steals clicks from the country paths underneath it. */
.tissot-layer {
  pointer-events: none;
}

/* Uses --bg-globe (dark navy) rather than --accent: the light theme's
   accent is a mint green too close to the light-blue ocean to read as a
   grid overlay — the dark void color keeps good contrast in both themes. */
.tissot {
  fill: var(--bg-globe);
  fill-opacity: 0.18;
  stroke: var(--bg-globe);
  stroke-width: 1px;
  stroke-opacity: 0.8;
}

.tissot-graticule {
  fill: none;
  stroke: var(--bg-globe);
  stroke-width: 0.5px;
  stroke-opacity: 0.45;
}

/* Reference lines — atlas red so they read as a different thing from
   the navy Tissot grid when both are on. Origins heavier, the named
   parallels dashed to tell them apart from the meridians. */
.reference-layer {
  pointer-events: none;
}

.reference-line {
  fill: none;
  stroke: var(--reference-line);
  stroke-width: 0.75px;
  stroke-opacity: 0.7;
  vector-effect: non-scaling-stroke;
}

.reference-major {
  stroke-width: 1.5px;
  stroke-opacity: 0.9;
}

.reference-parallel {
  stroke-width: 1.25px;
  stroke-dasharray: 6 4;
}

/* Flight path overlay — pointer-events off so it never blocks the
   click-to-place-point handler on the layers underneath it. */
.flightpath-layer {
  pointer-events: none;
}

.flightpath-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2px;
}

.flightpath-marker {
  fill: var(--accent);
  stroke: var(--bg-app);
  stroke-width: 1.5px;
}

/* ============================================================
   COMPARE MODE — two independent panels side by side
   ============================================================ */
#compare-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* The [hidden] attribute is only display:none in the UA stylesheet —
   the explicit display:flex above (author origin, higher precedence)
   would otherwise win and keep this container visible. */
#compare-container[hidden] {
  display: none;
}

.compare-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.compare-panel + .compare-panel {
  border-left: 1px solid var(--border);
}

.compare-select {
  margin: 8px;
  padding: 5px 8px;
  font-family: var(--font-family);
  font-size: 12px;
  background: var(--bg-app);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.compare-panel svg {
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* Stack for the map's floating popovers (info, compare), which can be open
   together: compare on top, info below it. Docked top-right, level with the
   zoom pill and just left of the toolbar column (12px + 40px + 12px gap):
   anchored to the bottom, they covered the toolbar and cut the compare
   card's country list off at the bottom of the screen. z-index sits one
   below the toolbar's so its hover tooltips, which pop out to the left,
   still paint over an open card. */
#floating-cards {
  position: absolute;
  top: 84px;
  right: 64px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 339px;
  max-width: calc(100% - 80px);
  max-height: calc(100% - 100px);
}

/* Figma drew only a dark card; it follows the theme instead (--card-*),
   the shadow lifting the light one off a light map. */
.floating-card {
  padding: 20px;
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--card-text);
  box-shadow: 0 4px 16px var(--card-shadow);
}

.floating-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.floating-card-title {
  font-size: 24px;
  font-weight: bold;
}

.floating-card-close {
  padding: 0;
  width: 24px;
  height: 24px;
  font-size: 14px;
  background: none;
  border: none;
  color: var(--card-text);
  cursor: pointer;
  opacity: 0.7;
}

.floating-card-close:hover {
  opacity: 1;
}

.floating-card-description {
  font-size: 16px;
  color: var(--card-text-muted);
  line-height: 1.5;
}

/* #info-name reuses .floating-card-title via its class in the HTML;
   #info-tradeoffs-content lays the three terms out inline (Figma flattens
   them into one running paragraph — this keeps them as distinguishable
   label/value pairs instead, at the same 16px size). */
/* Only the info card shrinks and scrolls when the stack outgrows a short
   window: the compare card must not clip its absolutely-positioned country
   list, which also paints over the info card below it. */
#projection-info {
  min-height: 0;
  overflow-y: auto;
}

#info-tradeoffs-content {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--card-text-muted);
}

#info-tradeoffs-content dt {
  font-weight: bold;
  color: var(--card-text);
  margin-top: 12px;
}

#info-tradeoffs-content dt:first-child {
  margin-top: 0;
}

#info-tradeoffs-content dd {
  margin: 2px 0 0;
}

/* Two columns: all the languages stay in view without a scrolling list. */
#language-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 14px;
}

/* Arabic and Urdu read right to left inside the panels, but the page keeps its
   layout: a map's east stays on the right, and the sidebar stays where the map
   leaves room for it. Hence no dir="rtl" on the page, only on what holds text. */
#sidebar:is(:lang(ar), :lang(ur)),
#help-modal:is(:lang(ar), :lang(ur)),
#tour-bubble:is(:lang(ar), :lang(ur)),
#floating-cards:is(:lang(ar), :lang(ur)),
.tool-btn[data-tooltip]:is(:lang(ar), :lang(ur)):hover::after {
  direction: rtl;
}

/* Nastaliq slants down across the line and needs far more room than other scripts. */
:is(#help-modal-body, #help-modal-borders, #tour-text, #info-tradeoffs-content, .floating-card-description, #language-note):lang(ur) {
  line-height: 2.2;
}

/* Spacing out the letters breaks up these scripts, whose letters join or sit
   in a fixed grid; it only reads as refinement in Latin, Greek and Cyrillic. */
#sidebar-header .tagline:is(:lang(hi), :lang(bn), :lang(zh), :lang(ja), :lang(ar), :lang(ur)),
.proj-family-header:is(:lang(hi), :lang(bn), :lang(zh), :lang(ja), :lang(ar), :lang(ur)) {
  letter-spacing: 0;
}

#language-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--card-text-muted);
}

/* Every name in its own script, whatever the language on screen: the letters
   come from the small font requests at the top of index.html. */
.language-option {
  padding: 8px 10px;
  font-family: 'Quicksand', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans SC', 'Noto Sans Arabic', sans-serif;
  font-size: 15px;
  text-align: start;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--card-text);
  cursor: pointer;
}

.language-option:hover {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.language-option.active {
  background: var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}

/* Compare card shell, triggered by the toolbar's comparison icon — a
   Figma-spec placeholder for now (see feat(toolbar) commit history):
   the two selects don't drive any comparison logic yet, since that
   behavior is being redesigned separately. */
#compare-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

/* Same [hidden]-vs-display:flex precedence issue as #compare-container
   above — the explicit display:flex here needs an explicit override. */
#compare-card[hidden] {
  display: none;
}

/* Always-white input fields per Figma, regardless of theme — they keep
   their own fixed light styling rather than the theme's --bg-app/--border. */
#compare-card select {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-family);
  font-size: 16px;
  background: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-border);
  border-radius: 4px;
}

/* Searchable country picker — an input instead of a plain <select> so
   typing can filter the (potentially 190+ item) alphabetical list. */
#compare-country-picker {
  position: relative;
}

#compare-country-input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-family);
  font-size: 16px;
  background: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-border);
  border-radius: 4px;
}

#compare-country-input:disabled {
  background: var(--field-disabled-bg);
  cursor: not-allowed;
}

/* Picked countries: swatch (the country's overlay colour) + show/hide
   checkbox + name + remove button, one row each. */
#compare-country-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

#compare-country-list[hidden] {
  display: none;
}

#compare-country-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

#compare-country-list label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

#compare-country-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.compare-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

/* Unticked: the row stays so the country can be shown again, but reads as off */
#compare-country-list li.hidden-country .compare-country-name,
#compare-country-list li.hidden-country .compare-swatch {
  opacity: 0.4;
}

#compare-country-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 4px;
}

#compare-country-results li {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--field-text);
  cursor: pointer;
}

#compare-country-results li:hover,
#compare-country-results li.highlighted {
  background: var(--field-hover-bg);
}

/* ============================================================
   MOBILE — off-canvas sidebar drawer + stacked comparison
   ============================================================ */
#sidebar-toggle {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 110;
  width: 36px;
  height: 36px;
  font-size: 16px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 3px;
  cursor: pointer;
}

#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--drawer-backdrop);
}

#sidebar-backdrop:not([hidden]) {
  display: block;
}

@media (max-width: 768px) {
  #sidebar-toggle {
    display: block;
  }

  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(80vw, 280px);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 12px var(--drawer-shadow);
  }

  #sidebar.open {
    transform: translateX(0);
  }

  #sidebar-header {
    padding-left: 56px; /* clears the fixed toggle button */
  }

  #compare-container {
    flex-direction: column;
  }

  .compare-panel + .compare-panel {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* ============================================================
   DARK MODE — the only override of the :root (light) variables.
   Sidebar/text tokens match the Figma dark frame; map-rendering
   tokens (ocean/globe/country) are unspecified by the design and
   keep their existing values for visual continuity.
   ============================================================ */
body[data-theme="dark"] {
  --bg-app:     #292929;
  --bg-sidebar: #292929;
  --bg-ocean:   #2264aa;
  --bg-globe:   #060f1c;

  --color-country:  #173753;
  --stroke-country: #4180b8;

  --text-primary:  #ffffff;
  --text-muted:    #b8b8b8;
  --accent:        #34835f;
  --border:        #ffffff;
  --active-bg:     #34835f;
  --active-border: #34835f;

  --reference-line: #ff8a7a;

  --card-bg:         #292929;
  --card-text:       #ffffff;
  --card-text-muted: #d9d9d9;
  --card-shadow:     rgba(0, 0, 0, 0.4);
}