/* Design system, ported from the original dashboards. The one deliberate departure is
   the capability ramp - see --cap3 below. */
:root {
  --ink: #060D1E;
  --panel: #101C36;   /* every box: panels, KPI cells, popovers */
  --panel2: #132340;
  --raise: #1B2E52;
  --line: #1F3159;
  --line2: #2B4272;

  --text: #E3EAF8;
  --muted: #93A3C6;
  --dim: #6B7BA4;

  --ui: #6E9BE8;
  --gold: #F2C14E;

  /* distance bands D1 -> D5 */
  --d1: #3FE0A8;
  --d2: #5FC9AE;
  --d3: #9DBE84;
  --d4: #CFA352;
  --d5: #B0603C;

  /* Capability, as a ramp that means something (agreed with the client):
     3 capable -> 4 capable with restrictions -> 5 and 6 not capable, no planting.
     Green through olive and amber to rust, reusing the palette's existing ramp
     colours so it stays on-theme. This deliberately replaces the source dashboards'
     blue/purple, which carried no meaning. */
  --cap3: #3FE0A8;
  --cap4: #9DBE84;
  --cap5: #E8A33D;
  --cap6: #D9534F;

  /* crop suitability grades */
  --s1: #3FE0A8;
  --s2: #9DBE84;
  --s3: #CFA352;
  --sn: #B0603C;

  --r: 3px;

  /* MapLibre, unlike Leaflet, does not squat 400-1000; .mapwrap is an isolated
     stacking context so nothing inside can escape. These are the app's own scale. */
  --z-map-ctl: 900;
  --z-header: 1500;
  --z-dropdown: 3000;
  --z-tip: 4000;
}

* { box-sizing: border-box; }

/* Scrollbars. Without this the browser paints its default light bar, which reads as a
   bright stripe down a navy panel. The TRACK is transparent rather than a fixed colour
   so each scrolling area shows its own background through it - the rails, the popovers
   and the tables all sit on slightly different navies. */
:root { color-scheme: dark; }          /* dark native scrollbars and form controls */

* {
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: var(--line2) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line2);
  border: 3px solid transparent;                /* inset, so the thumb reads as a pill */
  border-radius: 6px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ui);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 13px;
}

h1, h2, h3, .fig {
  font-family: "Barlow Semi Condensed", "IBM Plex Sans", sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
}

:lang(ar), .ar {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
}

/* keep Arabic data values rendering right-to-left inside English text */
.ar { direction: rtl; unicode-bidi: isolate; }
/* keep numerals and units upright inside Arabic text */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

svg { direction: ltr; }

a { color: var(--ui); }