/* Field green with a solar-amber accent, on faintly green-tinted neutrals (user-approved mock-up, 2026-10-15) */
:root {
  color-scheme: light;
  --page: #f5f7f2;
  --surface: #fdfdfb;
  --ink: #17211a;
  --ink-2: #47524a;
  --muted: #636d65;      /* 5.3:1 on the surface: small grey text stays readable */
  --grid: #e0e5dd;
  --axis: #c5ccc3;
  --border: rgba(23, 33, 26, 0.10);
  --series-1: #3c8158;   /* bars */
  --link: #2d6a46;
  --sun: #d99a12;        /* accent: the largest bar in each chart; field crops on the map */
  --series-2: #d4502a;   /* new plans */
  --national: #e0709a;   /* national plan TAMA 10/D/15: mostly planned, not built */
  --other: #b9bfb7;      /* no appendix */
  --orchard: #2f9a62;    /* map: orchard plans */
  --both: #7b5cc4;       /* map: field crops and orchards */
  --wash: rgba(45, 106, 70, 0.08);
  /* districts (slope compass rose) */
  --d-north: #3c8158;
  --d-haifa: #3d7fc1;
  --d-center: #8a9a3a;
  --d-jerusalem: #b0607a;
  --d-south: #d99a12;
  /* "Colour by" options on the map and size chart: planning stage (early -> approved), size (small -> large), developer */
  --st-1: #f2cf7a; --st-2: #d99a12; --st-3: #5fae7c; --st-4: #24603d;
  --sz-1: #c9e3d1; --sz-2: #7fbf95; --sz-3: #3c8158; --sz-4: #1b4a2e;
  --dev-1: #3d7fc1; --dev-2: #d99a12; --dev-3: #3c8158; --dev-4: #7b5cc4; --dev-5: #d4502a; --dev-6: #2aa5a0;
  --dev-other: #a0866a;
  --seg-on: #cfe6d6; --seg-on-ink: #133a22;   /* chosen option of the "Colour by" switch */
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0e1310;
    --surface: #151c17;
    --ink: #eef2ec;
    --ink-2: #c0c8c1;
    --muted: #959e96;
    --grid: #253029;
    --axis: #344038;
    --border: rgba(255, 255, 255, 0.10);
    --series-1: #4f9e70;
    --link: #6cc08e;
    --sun: #f0b53d;
    --series-2: #e0663d;
    --national: #e57fa7;
    --other: #4c554e;
    --orchard: #4fbf86;
    --both: #a088e0;
    --wash: rgba(108, 192, 142, 0.12);
    --d-north: #4f9e70;
    --d-haifa: #6aa5e0;
    --d-center: #b4c458;
    --d-jerusalem: #d0849c;
    --d-south: #f0b53d;
    --st-1: #f5dc9c; --st-2: #f0b53d; --st-3: #6cc08e; --st-4: #3c8f5c;
    --sz-1: #2f5a3d; --sz-2: #3f8a5c; --sz-3: #6cc08e; --sz-4: #b4e3c4;
    --dev-1: #6aa5e0; --dev-2: #f0b53d; --dev-3: #4f9e70; --dev-4: #a088e0; --dev-5: #e0663d; --dev-6: #4fc9c3;
    --dev-other: #b89c80;
    --seg-on: #2b4b36; --seg-on-ink: #d6f0de;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.55 "IBM Plex Sans", "IBM Plex Sans Hebrew", "Segoe UI", system-ui, sans-serif;
}
a { color: var(--link); text-underline-offset: 2px; }
.page { max-width: 1180px; margin: 0 auto; padding: 32px 20px 48px; }

/* Header card with line art of panel rows over field rows */
.top { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
       border-radius: 14px; padding: 26px 26px 22px; }
.top > *:not(.art):not(.lang) { position: relative; max-width: 640px; }
.top .art { position: absolute; inset-block: 0; inset-inline-end: 0; width: 46%; pointer-events: none; }
.top .art svg { width: 100%; height: 100%; display: block; }
[dir="rtl"] .top .art svg { transform: scaleX(-1); }
.top h1 { font-size: 31px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; padding-inline-end: 90px;
          text-wrap: balance; }
.lang { position: absolute; top: 18px; inset-inline-end: 18px; z-index: 1; font-size: 14px; text-decoration: none;
        display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--surface);
        border: 1px solid var(--axis); border-radius: 8px; color: var(--ink); }
.lang:hover { background: var(--wash); }
.lede { margin: 0; color: var(--ink-2); font-size: 16px; }
.byline { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.checked { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 8px; }
.context { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
       display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: start;
       transition: transform 0.2s, box-shadow 0.2s; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(23, 33, 26, 0.08); }
.kpi .ic { grid-row: span 3; width: 38px; height: 38px; border-radius: 10px; background: var(--wash);
           color: var(--link); display: grid; place-items: center; }
.kpi .label { color: var(--ink-2); font-size: 13px; }
.kpi .value { font-size: 32px; font-weight: 700; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .note { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.alert { background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--series-2);
         border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; }
.alert h2 { font-size: 16px; margin: 0 0 6px; }
.alert ul { margin: 0; padding-inline-start: 20px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
        padding: 22px; margin-bottom: 20px; }
.card h2, .chart h3 { font-size: 17px; margin: 0; }
.card h2 { font-size: 19px; font-weight: 600; }
/* One-line takeaway under a section title, worked out from the data */
.headline { color: var(--ink-2); font-size: 15px; margin: -8px 0 16px; max-width: 75ch; }
.sub { color: var(--ink-2); margin: 2px 0 12px; font-size: 13px; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
/* "Colour by" above the map: a segmented button in the Android (Material 3) style */
.mode-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; font-size: 13px; }
.mode-switch .mode-label { color: var(--ink-2); }
.seg { display: inline-flex; border: 1px solid var(--axis); border-radius: 999px; overflow: hidden; max-width: 100%; }
.seg button { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px;
              font: inherit; font-weight: 500; color: var(--ink); background: transparent; border: 0;
              border-inline-start: 1px solid var(--axis); cursor: pointer; white-space: nowrap;
              transition: background-color 0.15s ease; }
.seg button:first-child { border-inline-start: 0; }
.seg button:hover { background: var(--wash); }
.seg button[aria-checked="true"] { background: var(--seg-on); color: var(--seg-on-ink); }
.seg button:focus-visible { outline: 2px solid var(--link); outline-offset: -3px; }
.seg .tick { width: 0; height: 16px; opacity: 0; transition: width 0.15s ease, opacity 0.15s ease; }
.seg button[aria-checked="true"] .tick { width: 16px; opacity: 1; }
@media (max-width: 520px) {
  .seg { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; width: 100%; }
  .seg button { justify-content: center; border-inline-start: 0; border-top: 1px solid var(--axis); }
  .seg button:nth-child(-n+2) { border-top: 0; }
  .seg button:nth-child(even) { border-inline-start: 1px solid var(--axis); }
}
@media (prefers-reduced-motion: reduce) { .seg button, .seg .tick { transition: none; } }
.map-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
#map { height: 640px; border-radius: 8px; z-index: 0; }
.map-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; max-width: 640px; }
/* Grey basemap, so only the data dots carry colour */
#map .leaflet-tile-pane { filter: grayscale(1) contrast(0.85) brightness(1.04); }
.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }

.card h2.section-title { margin-bottom: 16px; }
/* Charts side by side inside one section card */
.chart-cols { display: grid; gap: 32px; align-items: start; }
.chart-cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chart { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.chart .foot-note { color: var(--muted); font-size: 13px; margin-top: 10px; }
/* Charts inside another card (beside the map): no frame of their own */
.chart.plain { background: none; border: 0; border-radius: 0; padding: 0; }
.map-side .chart.plain + .chart.plain { margin-top: 32px; }
.chart.plain h3 { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }

/* horizontal bars: label | bar | value */
.bars { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; row-gap: 2px; column-gap: 10px;
        align-items: center; }
.bars .lab { font-size: 13px; color: var(--ink-2); text-align: right; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.bars .row { position: relative; display: flex; align-items: center; gap: 8px; height: 26px; cursor: default;
             border-radius: 4px; }
.bars .row:hover, .bars .row:focus-visible { background: var(--wash); outline: none; }
[dir="rtl"] .bars .lab { text-align: left; }
.bars .bar { height: 14px; background: var(--series-1); border-start-end-radius: 7px; border-end-end-radius: 7px;
             min-width: 3px; transform-origin: left; }
[dir="rtl"] .bars .bar { transform-origin: right; }
/* The largest value in each chart is amber */
.bars .row.lead .bar, .hist .col.lead .bar { background: var(--sun); }
.bars .val { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* vertical histogram */
.hist, .hist-axis { direction: ltr; }
.hist { display: flex; align-items: flex-end; gap: 2px; height: 180px; border-bottom: 1px solid var(--axis);
        padding-top: 18px; }
.hist .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
             align-items: center; border-radius: 4px 4px 0 0; }
.hist .col:hover, .hist .col:focus-visible { background: var(--wash); outline: none; }
.hist .bar { width: 72%; background: var(--series-1); border-radius: 6px 6px 0 0; transform-origin: bottom; }
/* Panel layout range bars: numbers run left to right on both pages */
.range-chart svg { direction: ltr; display: block; width: 100%; height: auto; overflow: visible; }
.range-chart .grid { stroke: var(--grid); }
.range-chart .tick { font-size: 12px; fill: var(--ink-2); }
.range-chart .range-label { font-size: 13px; fill: var(--ink); }
.range-chart .range-n { font-size: 12px; font-weight: 600; fill: var(--ink); }
.range-chart .range-row { outline: none; cursor: default; }
.range-chart .range-row circle { stroke: var(--surface); stroke-width: 2; }
.range-chart .range-row:hover circle, .range-chart .range-row:focus-visible circle { stroke: var(--ink); }

/* Slope direction compass rose: north is always up, also on the Hebrew page */
.rose svg { direction: ltr; display: block; width: 100%; max-width: 520px; margin: 0 auto; height: auto; overflow: visible; }
.rose .ring { fill: none; stroke: var(--grid); }
.rose .spoke { stroke: var(--grid); }
.rose .dir { font-size: 13px; fill: var(--ink-2); dominant-baseline: middle; }
.rose .dir.lead { fill: var(--ink); font-weight: 600; }
.rose .petal path { stroke: var(--surface); stroke-width: 1.5; }
.rose .petal { outline: none; cursor: default; }
.rose .petal:hover path, .rose .petal:focus-visible path { stroke: var(--ink); stroke-width: 1; }
.rose .petal-n { font-size: 12px; fill: var(--ink-2); text-anchor: middle; dominant-baseline: middle; }
.rose .petal.lead .petal-n { fill: var(--ink); font-weight: 600; }
@media (max-width: 600px) { .rose .dir { font-size: 19px; } .rose .petal-n { font-size: 17px; } }
.rose .foot-note { color: var(--muted); font-size: 13px; margin-top: 6px; text-align: center; }

/* Bars grow in when their section scrolls into view; at rest they are drawn in full */
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes rose-grow { from { transform: scale(0); } }
@media (prefers-reduced-motion: no-preference) {
  .grow .bars .bar { animation: grow-x 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 45ms); }
  .grow .rose .petal { animation: rose-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 60ms);
    transform-box: view-box; transform-origin: 50% 50%; }
  .grow .hist .bar, .grow .hist .stack { animation: grow-y 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i) * 45ms); }
}
.hist .n { font-size: 12px; color: var(--ink-2); margin-bottom: 2px; }
/* Stacked column (plans by size): segments in legend order, from the bottom up */
.hist.tall { height: 220px; }
.hist .stack { width: 72%; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden;
               transform-origin: bottom; }
.hist .stack > div { min-height: 2px; border-top: 1px solid var(--surface); }
.tip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 5px; }
.hist-axis { display: flex; gap: 2px; font-size: 12px; color: var(--muted); }
.hist-axis span { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }

.table-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: start; color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--axis);
     padding: 8px; white-space: nowrap; }
td { border-bottom: 1px solid var(--grid); padding: 8px; vertical-align: top; }
td.num { text-align: end; font-variant-numeric: tabular-nums; }
td:first-child, td:nth-child(5) { white-space: nowrap; }
td:nth-child(6) { min-width: 260px; max-width: 380px; }
td.go { color: var(--link); white-space: nowrap; text-align: end; font-weight: 600; }
.go-text { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* OSM tiles are light only: on the dark page, invert the grey map */
@media (prefers-color-scheme: dark) {
  #map .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(0.9) contrast(0.85); }
}
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr:focus-visible { background: var(--wash); outline: none; }
.ns { color: var(--muted); }

.panel { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; width: min(560px, 100%); background: var(--surface);
         border-inline-start: 1px solid var(--border); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15); overflow-y: auto;
         padding: 24px; z-index: 1000; }
.panel .close { position: absolute; top: 12px; inset-inline-end: 14px; font-size: 26px; background: none; border: 0;
                color: var(--ink-2); cursor: pointer; line-height: 1; }
.panel h2 { margin: 0 0 4px; margin-inline-end: 32px; font-size: 20px; }
.panel h3 { font-size: 14px; margin: 20px 0 6px; color: var(--ink-2); text-transform: uppercase;
            letter-spacing: 0.04em; }
.panel dl { margin: 0; }
.panel .f { padding: 8px 0; border-bottom: 1px solid var(--grid); }
.panel dt { font-size: 12px; color: var(--muted); }
.panel dd { margin: 0; }
.panel .quote { font-size: 12px; color: var(--ink-2); margin-top: 3px; padding-inline-start: 8px;
                border-inline-start: 2px solid var(--axis); }
.panel .fnote { font-size: 12px; color: var(--muted); margin-top: 2px; }
.panel .doc-note { font-size: 13px; color: var(--ink-2); background: var(--page); border-radius: 8px; padding: 10px 12px; }

.tip { position: fixed; pointer-events: none; z-index: 2000; background: var(--ink); color: var(--surface);
       font-size: 12px; padding: 6px 9px; border-radius: 6px; max-width: 260px; }

.foot { color: var(--ink-2); font-size: 13px; max-width: 820px; }
.disclaimer { color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.about { scroll-margin-top: 16px; }
.about > * { max-width: 820px; }
.about h3 { font-size: 15px; margin: 16px 0 6px; }
.about p { margin: 8px 0; }
.about ul { margin: 0; padding-inline-start: 20px; }
.about li { margin-bottom: 4px; }
.about .signoff { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grid); }

.leaflet-popup-content { font: 13px/1.45 "IBM Plex Sans", "IBM Plex Sans Hebrew", "Segoe UI", system-ui, sans-serif; }
.leaflet-popup-content button { font: inherit; margin-top: 8px; min-height: 36px; padding: 4px 12px; border-radius: 6px;
  border: 1px solid var(--link); background: none; color: var(--link); cursor: pointer; }

@media (max-width: 800px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .chart-cols.two, .chart-cols.three { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: 1fr; }
  #map { height: 460px; }
  .top .art { width: 100%; opacity: 0.35; }
  .top h1 { font-size: 25px; }
}

/* Phones: each plan as a card instead of a wide table */
@media (max-width: 700px) {
  .lang { min-height: 44px; }
  .table-wrap { overflow: visible; }
  #table thead { display: none; }
  #table, #table tbody, #table tr, #table td { display: block; }
  #table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 14px 4px;
              border-bottom: 1px solid var(--grid); }
  #table td { border: 0; padding: 0; text-align: start; min-width: 0; max-width: none; white-space: normal; }
  #table tbody.locked td { overflow: hidden; }
  #table tbody.locked tr:nth-child(n+4) { display: none; }
  #table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  #table td[data-k="crops"] { grid-column: 1 / -1; }
  #table td.go { grid-column: 1 / -1; min-height: 44px; display: flex; align-items: center; gap: 4px; }
  #table td.go::before { content: none; }
  .go-text { display: inline; }
}

/* Withheld part of the plan table: placeholder rows, blurred, under a note */
.table-wrap { position: relative; }
tbody.locked td { filter: blur(5px); color: var(--ink-2); user-select: none; letter-spacing: -1px; }
tbody.locked tr { cursor: default; }
tbody.locked tr:hover { background: none; }
.locked-note { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: min(560px, 90%);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px;
  text-align: center; font-size: 14px; color: var(--ink); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }