/* ERRA Analytics — city information pages (/cities/, /city/<slug>/)
   ERRA house style: a white editorial canvas (NOT a soft-grey dashboard).
   Same language as styles.css / investors.css — thin 300/500 headings, hairline
   "divided bands" (one bordered container, 1px gap → hairline grid) with mono
   index keys, square buttons, restrained blue / green / gold (+red) palette.
   Loaded after styles.css; reuses its tokens. Pure CSS/SVG; city.js adds optional
   reveal/fill/count-up + the programs filter + the hero map (gated on .js).

   FONT RULE (important): IBM Plex Mono has NO Hebrew glyphs, so it is used ONLY
   for figures/numbers and Latin (₪ amounts, %, counts, dates, index keys). ALL
   Hebrew text — labels, eyebrows, headings — stays in Heebo (var(--sans)); using
   mono on Hebrew falls back to an ugly system mono and must never be done. */

:root{
  /* asset-mix palette (category accents). Brand-safe: blue / green / gold — NO
     purple. Gold is the same "value" tone the trends + reports modules use. */
  --c-res:var(--blue);
  --c-land:var(--green);
  --c-com:#C98A00;
  --c-com-50:#FBF3E2;
}

/* The page sits on the clean white canvas like the rest of the site. We DON'T
   paint a background here: the body already carries one continuous soft blue
   top-glow that starts at the very top (behind the sticky header). Keeping
   .cdash transparent lets that single glow flow through seamlessly — painting an
   opaque bg + a second glow starting at .cdash's top edge produced a hard line. */
.cdash{background:transparent;padding:0 0 72px;overflow-x:clip}
.cwrap{max-width:1440px;margin:0 auto;padding:0 28px}
/* Generous, even editorial rhythm between stacked sections so the page breathes
   (one rule, more specific than per-section margins — keeps the cadence uniform). */
.cdash .cwrap > section{margin-top:40px}

/* ---- breadcrumbs ---- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted-2);
  font-weight:500;padding:20px 2px 0;flex-wrap:wrap}
.crumbs a{color:var(--muted-2)}
.crumbs a:hover{color:var(--ink)}
.crumbs b{color:var(--blue);font-weight:600}

/* ======================= shared card ======================= */
/* White, hairline-bordered, almost no shadow — editorial, not a floating tile. */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow-sm)}
/* eyebrows → small Heebo micro-label in brand blue (no pill) */
.card__eyebrow{font-size:14px;font-weight:600;color:var(--blue)}
.card__h2{font-size:26px;font-weight:500;color:var(--ink);margin:8px 0 0;line-height:1.18;
  letter-spacing:-.01em}
.card__sub{font-size:16px;color:var(--muted);margin:11px 0 0;line-height:1.6}
.src{font-size:13.5px;color:var(--muted-2);font-weight:500;margin:18px 0 0;line-height:1.6}
/* hero "last updated" caption — tighter than a source note, tabular digits */
.cupdated{margin:4px 0 0;font-size:12.5px;font-variant-numeric:tabular-nums}

/* hero district line — same Heebo micro-label, no pill, no dot */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--blue);background:transparent;padding:0;border-radius:0}
.eyebrow i{display:none}

/* generic legend dot */
.dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.dot--residential,.dot--city{background:var(--c-res)}
.dot--land{background:var(--c-land)}
.dot--commercial{background:var(--c-com)}
.dot--nat{background:#C3CCDE}
.dot--kids{background:#9CB4E8}
.dot--work{background:var(--blue)}
.dot--old{background:var(--navy)}

/* trend pill — mono figure (number only), quiet tint */
.trendpill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:13px;
  font-weight:500;border-radius:6px;padding:3px 9px;white-space:nowrap;line-height:1.3}
.trendpill--up{color:var(--green);background:var(--green-50)}
.trendpill--down{color:var(--red);background:var(--red-50)}

/* ======================= HERO ======================= */
.chero2{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;margin-top:16px}
.cherocard{display:flex;flex-direction:column;padding:24px 28px 22px}
.cherocard .eyebrow{align-self:flex-start}
.cherocard__title{font-size:clamp(26px,3.4vw,38px);font-weight:300;color:var(--ink);
  margin:10px 0 8px;letter-spacing:-.02em;line-height:1.08}
.cherocard__lede{color:var(--muted);font-size:15.5px;line-height:1.5;max-width:520px}
.cherocard__lede p{margin:0 0 6px}
.cherocard__stats{display:grid;grid-template-columns:repeat(2,auto);gap:16px 40px;
  margin-top:auto;padding-top:18px;justify-content:start}
.bignum{display:flex;flex-direction:column;gap:4px}
.bignum__row{display:flex;align-items:baseline;gap:10px}
/* figure → mono; label → Heebo */
.bignum b{font-family:var(--mono);font-size:clamp(21px,2.5vw,26px);font-weight:500;
  letter-spacing:-.01em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.bignum span{color:var(--muted-2);font-size:13.5px;font-weight:500}
/* the flagship median ₪/m² leads the hero — bigger, on its own row */
.bignum--lead{grid-column:1/-1}
.bignum--lead b{font-size:clamp(27px,3vw,35px)}
/* a long figure (e.g. the full ₪ market volume) gets its own row, normal size */
.bignum--wide{grid-column:1/-1}
.bignum--wide b{font-size:clamp(19px,2vw,23px)}
.cherocard__cta{margin-top:16px;align-self:flex-start}

/* hero service map */
.cheromap{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);min-height:250px;box-shadow:var(--shadow-sm)}
/* higher specificity than maplibre-gl.css's `.maplibregl-map{position:relative}`
   (which loads after this file) so the map container actually fills the box
   instead of collapsing to height:0. The soft tint is a loading state so the
   slot never reads as a blank white box before tiles paint / if the map fails. */
.cheromap .cheromap__canvas{position:absolute;inset:0;width:100%;height:100%;
  background:#E9EEF7 radial-gradient(120% 90% at 50% 0%, #EEF3FA, #E4EAF4)}
.cheromap__canvas--ph,.cheromap__img{position:absolute;inset:0;width:100%;height:100%}
.cheromap__img{object-fit:cover}
.cheromap__canvas--ph{background:
  repeating-linear-gradient(45deg,#E9EEF7,#E9EEF7 12px,#EFF3FA 12px,#EFF3FA 24px)}
.cheromap__logo{position:absolute;z-index:2;inset-inline-start:14px;top:14px;background:rgba(255,255,255,.92);
  border-radius:9px;padding:7px 11px;box-shadow:var(--shadow-sm);backdrop-filter:blur(3px)}
.cheromap__logo img{height:20px;width:auto}
.cheromap__tag{position:absolute;z-index:2;inset-inline-end:14px;bottom:14px;background:rgba(11,18,32,.78);
  color:#fff;font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px;backdrop-filter:blur(2px)}
/* MapLibre: pannable, with a grab cursor; rotation/scroll-zoom disabled in JS */
.cheromap .maplibregl-canvas{cursor:grab}
.cheromap .maplibregl-canvas:active{cursor:grabbing}
.cheromap .maplibregl-ctrl-attrib{font-size:9px;opacity:.55}
.cheromap .maplibregl-ctrl-logo{display:none}
.citymap-pin{width:16px;height:16px;border-radius:50%;background:var(--blue);
  border:3px solid #fff;box-shadow:0 0 0 5px rgba(0,80,201,.22)}
/* "annual reports" band — the link out to /city/<slug>/report/<year>/. Defined
   here, not in reports.css, because the city page never loads that file. */
.cyears{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.cyear{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:16px;font-weight:500;color:var(--ink-soft);
  padding:8px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .15s,color .15s}
.cyear:hover{border-color:var(--blue);color:var(--blue)}
/* basemap switcher (map ↔ satellite), injected by city.js into the map box.
   Corner budget on an RTL page — logical props resolve to MIRRORED physical
   sides, while MapLibre positions its controls PHYSICALLY:
     top-right    .cheromap__logo   (inset-inline-start)
     top-left     MapLibre zoom     ('top-left', physical)
     bottom-left  .cheromap__tag    (inset-inline-end)
     bottom-right ← the only free corner, so the switcher lives here.
   Putting it at inset-inline-end/top (the intuitive "opposite the logo") lands
   it exactly on the zoom buttons. */
.mapswitch{position:absolute;z-index:3;inset-inline-start:14px;bottom:14px;display:flex;
  background:rgba(255,255,255,.92);border-radius:9px;padding:3px;gap:3px;
  box-shadow:var(--shadow-sm);backdrop-filter:blur(3px)}
.mapswitch__btn{border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:13px;font-weight:600;color:var(--muted-2);padding:5px 12px;
  border-radius:7px;transition:background .15s,color .15s}
.mapswitch__btn:hover{color:var(--ink)}
.mapswitch__btn.is-on{background:var(--blue);color:#fff}

/* ======================= CITY PASSPORT (headline indicators) ======================= */
/* The investor's at-a-glance row: area / salary / median ₪/m² (land/res/com).
   ONE divided band — a line-coloured container with a 1px gap so every cell is
   separated by a crisp hairline (wrap-safe, RTL-safe). Mono numbers, Heebo labels
   prefixed with an editorial 01–05 mono index key. */
.passport{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:18px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  counter-reset:pst}
.passport .pstat{background:var(--bg);border:0;border-radius:0;box-shadow:none;
  padding:20px 22px;display:flex;flex-direction:column;gap:9px;counter-increment:pst}
.pstat span{font-size:14px;font-weight:600;color:var(--muted-2)}
.pstat span::before{content:counter(pst,decimal-leading-zero) "  ";font-family:var(--mono);
  font-weight:500;color:var(--blue);opacity:.85}
.pstat b{font-family:var(--mono);font-size:clamp(23px,2.5vw,29px);font-weight:500;color:var(--ink);
  letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums}
.pstat--wide b{font-size:clamp(19px,2vw,23px)}

/* ======================= ROWS ======================= */
.crow{display:grid;gap:24px;margin-top:18px}
.crow--2{grid-template-columns:1fr 1fr}
.crow--wide{grid-template-columns:1.45fr 1fr}

/* ---- market breakdown: two parallel panels (L1 main / L2 sub) ---- */
.mkt2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;align-items:stretch}
.mktcol{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);
  padding:22px 24px;display:flex;flex-direction:column}
.mktcol__lbl{font-size:14px;font-weight:600;color:var(--muted-2);padding-bottom:14px;
  margin-bottom:18px;border-bottom:1px solid var(--line)}

/* L1 — main category rows with key values */
.catlist{display:flex;flex-direction:column;gap:22px}
.catrow{display:flex;flex-direction:column;gap:12px}
.catrow+.catrow{padding-top:22px;border-top:1px solid var(--line-soft)}
.catrow__head{display:flex;align-items:center;gap:9px}
.catrow__name{display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:600;color:var(--ink)}
.catrow__share{margin-inline-start:auto;font-family:var(--mono);font-size:17px;font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums}
.catrow__bar{height:9px;background:var(--line-soft);border-radius:5px;overflow:hidden}
.catrow__fill{display:block;height:100%;border-radius:5px;width:var(--w);background:var(--blue)}
.catrow__fill--land{background:var(--c-land)}
.catrow__fill--commercial{background:var(--c-com)}
.catrow__fill--residential{background:var(--c-res)}
.catrow__metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px 18px;margin-top:6px}
.catrow__metrics span{display:flex;flex-direction:column;gap:4px}
.catrow__metrics i{font-style:normal;font-size:13px;font-weight:500;color:var(--muted-2)}
.catrow__metrics b{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* L2 — ranked subcategory list */
.sublist{display:flex;flex-direction:column;gap:13px}
.subrow{display:grid;grid-template-columns:minmax(96px,1.1fr) 1.4fr auto;align-items:center;gap:12px}
.subrow__name{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--ink-soft);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subrow__bar{height:9px;background:var(--line-soft);border-radius:5px;overflow:hidden}
.subrow__fill{display:block;height:100%;border-radius:5px;width:var(--w);background:var(--blue)}
.subrow__fill--land{background:var(--c-land)}
.subrow__fill--commercial{background:var(--c-com)}
.subrow__fill--residential{background:var(--c-res)}
.subrow__fill--other{background:#94A3B8}
.subrow__val{font-family:var(--mono);font-size:14.5px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:36px;text-align:left}
.sublist__legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:16px;
  font-size:13px;font-weight:500;color:var(--muted-2)}
.sublist__legend span{display:flex;align-items:center;gap:6px}
.dot--other{background:#94A3B8}
.trendpill--sm{font-size:12px;padding:2px 8px}

/* ---- city vs national bars ---- */
.benchbars{display:flex;flex-direction:column;gap:17px;margin-top:18px}
.benchrow__top{display:flex;justify-content:space-between;font-size:15px;font-weight:600;
  color:var(--ink);margin-bottom:8px}
.benchrow__delta{font-family:var(--mono);font-weight:500;font-size:13.5px}
.benchrow__delta.up{color:var(--green)}
.benchrow__delta.down{color:var(--red)}
.benchrow__pair{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.benchrow__track{flex:1;height:10px;background:var(--line-soft);border-radius:5px;overflow:hidden}
.benchrow__fill{display:block;height:100%;border-radius:5px;width:var(--w)}
.benchrow__fill--city{background:var(--blue)}
.benchrow__fill--nat{background:#C3CCDE}
.benchrow__num{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--blue);
  width:66px;text-align:left;flex:none;font-variant-numeric:tabular-nums}
.benchrow__num--muted{color:var(--muted-2)}
.benchlegend{display:flex;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:13px;font-weight:500;color:var(--muted-2)}
.benchlegend span{display:flex;align-items:center;gap:6px}

/* ---- demography ---- */
/* flat outlined tiles (no pastel fill) — quiet and editorial */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.statbox{background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px 16px}
.statbox b{display:block;font-family:var(--mono);font-size:24px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums}
.statbox span{font-size:13px;font-weight:600;color:var(--muted-2);margin-top:4px;display:block}

.agebd{margin-top:24px}
.agebd__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;
  margin-bottom:8px}
.agebd__ttl{font-size:15px;font-weight:600;color:var(--ink)}
.agebd__dep{font-size:13.5px;color:var(--muted-2);font-weight:500}
.agebd__dep b{font-family:var(--mono);font-weight:500;color:var(--ink)}
/* age as proportional ring "circles" (one per age band) */
.agecircles{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.agecirc{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-width:92px}
.agecirc__ring{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--col) calc(var(--p)*1%), var(--line-soft) 0)}
.agecirc__ring::before{content:"";position:absolute;inset:12px;background:var(--bg);border-radius:50%}
.agecirc__ring b{position:relative;font-family:var(--mono);font-size:20px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums}
.agecirc--kids{--col:#9CB4E8}
.agecirc--work{--col:var(--blue)}
.agecirc--old{--col:var(--navy)}
.agecirc__lbl{font-size:13px;font-weight:500;color:var(--muted-2);text-align:center}

/* ---- employers ---- */
/* divided band (1px-gap hairline grid), mono rank index — not pastel chips */
.emplist{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:18px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.empcard{display:flex;align-items:center;gap:14px;padding:15px 18px;background:var(--bg)}
.empcard__rank{font-family:var(--mono);font-weight:500;font-size:14.5px;color:var(--blue);
  width:26px;flex:none;font-variant-numeric:tabular-nums}
.empcard__main{flex:1;min-width:0}
.empcard__name{font-size:15.5px;font-weight:600;color:var(--ink)}
a.empcard__name:hover{color:var(--blue)}
.empcard__sector{display:block;font-size:13px;color:var(--muted-2);font-weight:500;margin-top:2px}

/* ======================= GUSHIM (cadastral blocks) ======================= */
.gush__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.gush__cta{display:inline-flex;align-items:center;gap:6px;flex:none;align-self:center;
  font-size:14.5px;font-weight:600;color:var(--blue);
  background:transparent;border:1px solid var(--line);border-radius:9px;padding:11px 17px;
  white-space:nowrap;transition:border-color .15s,color .15s}
.gush__cta:hover{border-color:var(--blue)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* scrollable table: all rows stay in the DOM (SEO/no-JS), long lists scroll
   inside a fixed-height box with a sticky header instead of stretching the page */
.gushwrap{margin-top:14px;max-height:300px;overflow-y:auto;border:1px solid var(--line);
  border-radius:var(--radius-sm)}
.gushtable{width:100%;border-collapse:collapse;font-size:14.5px}
.gushtable thead th{position:sticky;top:0;background:var(--bg);text-align:right;z-index:1;
  font-size:12.5px;font-weight:600;color:var(--muted-2);padding:9px 16px;
  border-bottom:1px solid var(--line)}
.gushtable tbody td{padding:8px 16px;border-bottom:1px solid var(--line-soft)}
.gushtable tbody tr:last-child td{border-bottom:0}
.gushtable tbody tr:hover{background:var(--bg-soft)}
/* "גוש 6034" = Hebrew + number → Heebo, but tabular figures so the column lines up */
.gushtable__num{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gushtable__helka{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.gushtable__act{text-align:left;width:1%;white-space:nowrap}
.gushtable__act a{font-size:14px;font-weight:600;color:var(--blue)}
.gushtable__act a:hover{text-decoration:underline}

/* ======================= NEWS · real-estate headlines ================== */
/* Yandex-Dzen-style compact feed: a small round publisher avatar (first letter
   of the source, no external favicon calls), a single-line headline that
   ellipsises, and a faint mono date on the far side. Borderless — rows are
   separated by spacing + a hairline, RTL-aware (avatar sits at the reading
   start = right). */
/* Compact, scrollable digest: ~20 latest items live in a short fixed-height box
   so the section stays small no matter how many headlines a city has. */
.newswrap{margin-top:14px;max-height:300px;overflow-y:auto;
  scrollbar-width:thin;overscroll-behavior:contain}
.newslist{list-style:none;margin:0;padding:0}
.newsrow{display:flex;align-items:center;gap:10px;padding:7px 2px;
  border-bottom:1px solid var(--line-soft)}
.newslist .newsrow:last-child{border-bottom:0}
.newsrow__ico{position:relative;flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--bg-soft);border:1px solid var(--line);overflow:hidden;
  display:flex;align-items:center;justify-content:center;line-height:1;user-select:none}
/* Letter fallback sits behind; the favicon (if it loads) covers it. On <img>
   error an inline onerror removes the img, revealing the letter. */
.newsrow__ltr{font-size:11px;font-weight:700;color:var(--blue)}
.newsrow__fav{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#fff}
.newsrow__title{flex:1 1 auto;min-width:0;font-size:14px;font-weight:500;color:var(--ink);
  line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.newsrow:hover .newsrow__title{color:var(--blue)}
.newsrow__date{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* ======================= RENTEN · דירה להשכיר ======================= */
/* A highlighted block: brand-blue accent on the reading edge marks it apart
   from the neutral cards around it. */
.renten{border-inline-start:3px solid var(--blue);padding:20px 22px}
/* brand badge in the header so the section is instantly recognisable as the
   government "דירה להשכיר" programme (official logo can be dropped in later). */
.renten__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.renten__brand{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);
  padding:4px 11px 4px 7px;border-radius:999px;line-height:1;white-space:nowrap}
.renten__brandimg{width:20px;height:20px;flex:none;object-fit:contain;display:block}
/* The projects render as a scannable table (same scrollable + sticky-header
   pattern as the gushim table), with the plan number + curated nuances tucked
   under the compound name so the row stays tabular. Only the header keeps the
   brand badge + blue accent edge. */
.rwrap{margin-top:16px;max-height:420px;overflow-y:auto;border:1px solid var(--line);
  border-radius:var(--radius-sm)}
.rtable{width:100%;border-collapse:collapse;font-size:14.5px}
.rtable thead th{position:sticky;top:0;background:var(--bg);text-align:right;z-index:1;
  font-size:12.5px;font-weight:600;color:var(--muted-2);padding:9px 16px;white-space:nowrap;
  border-bottom:1px solid var(--line)}
.rtable tbody td{padding:10px 16px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;color:var(--muted)}
.rtable tbody tr:last-child td{border-bottom:0}
.rtable tbody tr:hover{background:var(--bg-soft)}
.rtable__name{min-width:220px}
.rtable__name b{display:block;font-weight:600;color:var(--ink);line-height:1.3}
.rtable__sub{display:block;font-size:12.5px;color:var(--muted-2);margin-top:2px;
  font-variant-numeric:tabular-nums}
.rtable__notes{display:block;font-size:13px;color:var(--muted);margin-top:5px;line-height:1.5}
.rtable__co{white-space:nowrap}
.rtable__num{text-align:center;white-space:nowrap}
/* mono figures only on the data cells — the Hebrew <th> labels stay Heebo */
.rtable td.rtable__num{font-family:var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums}
.rtable__act{text-align:left;width:1%;white-space:nowrap}
.rtable__act a{font-size:14px;font-weight:600;color:var(--blue)}
.rtable__act a:hover{text-decoration:underline}

/* ======================= PROGRAMS · SMART FILTER ======================= */
.progs{margin-top:40px}
.progs__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.progs__count{font-size:14px;font-weight:500;color:var(--muted-2);border:1px solid var(--line);
  padding:8px 13px;border-radius:8px;white-space:nowrap}
.progs__count b{font-family:var(--mono);font-weight:500;color:var(--blue)}
.progs .prose{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.7;max-width:760px}

/* toolbar */
.ptools{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-top:16px;
  padding:12px 14px;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px}
.ptools__search{position:relative;display:flex;align-items:center;flex:1;min-width:200px}
.ptools__search input{width:100%;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 38px 10px 13px;outline:none}
.ptools__search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.ptools__icon{position:absolute;inset-inline-start:12px;color:var(--muted-2);font-size:16px;
  pointer-events:none}
.pgroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pgroup__lbl{font-size:13px;font-weight:600;color:var(--muted-2);white-space:nowrap}
.pchip{font-family:inherit;font-size:14px;font-weight:500;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;max-width:240px;overflow:hidden;
  text-overflow:ellipsis}
.pchip:hover{border-color:#C7D2E6;color:var(--ink)}
.pchip b{font-family:var(--mono);font-weight:500;font-size:12.5px;opacity:.7}
.pchip.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.pchip.is-active b{opacity:.85}
.pgroup--area{flex:1;min-width:210px;justify-content:flex-start}
.pgroup--area input[type=range]{accent-color:var(--blue);flex:1;min-width:90px;max-width:160px}
.pgroup__areaval{font-size:14px;font-weight:500;color:var(--blue);min-width:88px;white-space:nowrap}

/* results list */
.plangroup__list{margin-top:12px;border-top:1px solid var(--line-soft)}
.prow{display:flex;align-items:center;gap:14px;padding:10px 4px;border-bottom:1px solid var(--line-soft)}
.prow__main{flex:1;min-width:0}
.prow__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prow__num{font-size:14px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.prow__status{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:6px;
  background:var(--bg-soft);color:var(--muted)}
.prow__status--active{color:var(--green);background:var(--green-50)}
.prow__status--process{color:#C68A1E;background:#FBF3E2}
.prow__status--historical{color:var(--red);background:var(--red-50)}
.prow__type{font-size:12.5px;font-weight:500;color:var(--muted-2);background:var(--bg-soft);
  padding:3px 9px;border-radius:6px}
.prow__name{font-size:15px;font-weight:500;color:var(--ink);margin-top:4px;line-height:1.35}
.prow__meta{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:4px;font-size:12.5px;
  color:var(--muted-2);font-weight:500}
.prow__meta span{position:relative}
.prow__meta span+span::before{content:"·";position:absolute;inset-inline-start:-9px;color:var(--line)}
.prow__doc{font-size:14px;font-weight:600;color:var(--blue);white-space:nowrap;flex:none}
.prow__doc:hover{text-decoration:underline}
.prow[hidden]{display:none}
.progs__empty{font-size:15.5px;color:var(--muted-2);font-weight:500;text-align:center;padding:28px 0}
.ppage{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.ppage__btn{font-family:inherit;font-size:14.5px;font-weight:500;color:var(--blue);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:9px 17px;cursor:pointer;
  transition:background .15s,border-color .15s}
.ppage__btn:hover:not(:disabled){background:var(--blue-50);border-color:#C7D2E6}
.ppage__btn:disabled{color:var(--muted-2);opacity:.5;cursor:default}
.ppage__info{font-size:14px;font-weight:500;color:var(--muted-2);min-width:180px;text-align:center}

/* ============ housing-programs hub (rows are links) ============ */
.pfeatured{margin:8px 0 40px}
.pfeatured .section__head{margin-bottom:22px}
.proglist{margin-top:6px}

/* related-programs horizontal slider (detail page) */
.progslider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 12px;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.progcard{flex:0 0 262px;scroll-snap-align:start;text-decoration:none;color:inherit;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.progcard:hover{border-color:#C7D2E6;box-shadow:0 6px 20px rgba(15,23,42,.08);transform:translateY(-2px)}
.progcard__top{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.progcard__name{font-size:15.5px;font-weight:600;color:var(--ink);margin-top:10px;line-height:1.35}
.progcard__meta{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;
  color:var(--muted-2);font-variant-numeric:tabular-nums}
.progslider__nav{display:flex;gap:8px}
.progslider__btn{font-family:var(--mono);font-size:15px;color:var(--blue);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;width:38px;height:34px;cursor:pointer;
  transition:background .15s,border-color .15s}
.progslider__btn:hover:not(:disabled){background:var(--blue-50);border-color:#C7D2E6}
.progslider__btn:disabled{opacity:.4;cursor:default}
@media(max-width:560px){.progcard{flex-basis:82vw}}
.prow--link{text-decoration:none;color:inherit;border-radius:10px;padding:12px 12px;
  border-bottom:1px solid var(--line-soft);transition:background .15s}
.prow--link:hover{background:var(--bg-soft)}
.prow__go{flex:none;font-family:var(--mono);font-size:16px;color:var(--blue);opacity:.6;
  transition:transform .15s,opacity .15s}
.prow--link:hover .prow__go{opacity:1;transform:translateX(-3px)}
/* type tag on each row + the two type filter chips (blue = ותמ"ל, green = דירה) */
.ptag{font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px;white-space:nowrap}
.ptag--vatmal{color:var(--blue);background:var(--blue-50)}
.ptag--dira{color:var(--green);background:var(--green-50)}
.pchip--vatmal.is-active{background:var(--blue);border-color:var(--blue)}
.pchip--dira.is-active{background:var(--green);border-color:var(--green)}

/* ======================= CTA ======================= */
.ctabox{margin-top:40px;border-radius:var(--radius);padding:52px 30px;text-align:center;
  background:radial-gradient(120% 140% at 80% 0%, #14367F 0%, var(--navy) 58%)}
.ctabox h2{font-size:clamp(26px,3.6vw,34px);font-weight:300;color:#fff;margin:0;letter-spacing:-.01em}
.ctabox p{font-size:16.5px;color:#AEC0E8;margin:11px 0 0}
.ctabox .btn{margin-top:24px}

/* ======================= SEO long-form ======================= */
/* Landscape layout: the sections sit side-by-side in columns on wide screens
   (collapses to a single column on narrow ones). */
.seoblock{margin-top:40px}
.seoblock__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:18px;
  font-size:16px;line-height:1.85;color:var(--muted);font-weight:400}
.seoblock__cols p{margin:0 0 14px}
.seoblock__cols strong{color:var(--ink);font-weight:600}
.seoblock__sec{margin-bottom:0}
.seoblock__sec h3{font-size:15px;font-weight:600;color:var(--blue);margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.prose p{margin:0 0 12px}
.prose p:last-child{margin-bottom:0}

/* ======================= CITY HUB (/cities/) ======================= */
/* A region-grouped index: every published city as a link, alphabetical, under
   its מחוז. The page is a single tidy directory — jump-nav chips at the top,
   then one section per region with a multi-column list of links. */

/* Total count + jump-nav chips (anchor links to each region section). */
.cityfilter{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 4px}
.cityfilter__chip{display:inline-block;padding:6px 14px;border:1px solid var(--line);
  border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);background:var(--bg);
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.cityfilter__chip:hover{border-color:#C7D2E6;color:var(--ink)}
/* The `display:inline-block` above outranks the UA `[hidden]{display:none}` at
   equal specificity, so search-hidden chips need an explicit rule to disappear. */
.cityfilter__chip[hidden]{display:none}
.cityfilter__count{margin:16px 0 4px;color:var(--muted-2);font-size:14px;
  font-variant-numeric:tabular-nums}

/* Per-region section. scroll-margin keeps the heading clear of the floating
   header when a jump-nav anchor lands here. */
.cityidx{margin-top:40px;scroll-margin-top:90px}
.cityidx__h{display:flex;align-items:baseline;gap:10px;font-size:22px;font-weight:500;
  color:var(--ink);letter-spacing:-.01em;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cityidx__count{font-size:14px;font-weight:600;color:var(--muted-2);
  font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Multi-column alphabetical link list. RTL-safe; columns flow right→left. */
.cityidx__list{list-style:none;margin:16px 0 0;padding:0;
  column-width:220px;column-gap:32px}
.cityidx__list li{break-inside:avoid;margin:0 0 2px}
.cityidx__link{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 8px;border-radius:var(--radius-sm);color:var(--ink);font-size:16px;font-weight:500;
  transition:background .12s ease,color .12s ease}
.cityidx__link:hover{background:var(--bg-soft);color:var(--blue)}
.cityidx__pop{font-size:13px;color:var(--muted-2);font-weight:500;
  font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Live search over the rendered index (JS filters in place; full list stays for
   no-JS/SEO). Same look as the programs .ptools__search. */
.cityfind{position:relative;display:flex;align-items:center;max-width:420px;margin:14px 0 6px}
.cityfind input{width:100%;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:11px 40px 11px 16px;transition:border-color .15s ease,box-shadow .15s ease}
.cityfind input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.cityfind__icon{position:absolute;inset-inline-start:14px;color:var(--muted-2);font-size:16px;
  pointer-events:none}
.cityidx__legend{margin:0 0 4px;color:var(--muted-2);font-size:13px}
.cityidx__empty{margin:24px 0;color:var(--muted);font-size:15px}

/* ======================= reveal / fill animations (gated on .js) ======================= */
html.js .reveal{opacity:0;transform:translateY(10px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
html.js .benchrow__fill{width:0}
html.js .benchrow__fill.in{width:var(--w);transition:width .9s cubic-bezier(.22,1,.36,1)}

@media (prefers-reduced-motion: reduce){
  html.js .reveal,html.js .reveal.in{opacity:1;transform:none;transition:none}
  html.js .benchrow__fill{width:var(--w);transition:none}
}

/* ======================= responsive ======================= */
@media (max-width:920px){
  .chero2,.crow--2{grid-template-columns:1fr}
  .passport{grid-template-columns:repeat(3,1fr)}
  .passport .pstat--wide{grid-column:1/-1}
  .cheromap{min-height:240px;order:-1}
  .mkt2{grid-template-columns:1fr}
  .seoblock__cols{grid-template-columns:1fr;gap:0}
  .seoblock__sec{margin-bottom:24px}
}
@media (max-width:560px){
  .cwrap{padding:0 16px}
  .cdash .cwrap > section{margin-top:28px}
  .card{padding:22px 18px}
  .cherocard{padding:26px 18px}
  .cherocard__stats{grid-template-columns:1fr 1fr;gap:18px 24px}
  .passport{grid-template-columns:1fr 1fr}
  .passport .pstat--wide{grid-column:1/-1}
  .statgrid{grid-template-columns:1fr 1fr}
  .emplist{grid-template-columns:1fr}
  .catrow__metrics{grid-template-columns:1fr 1fr}
  .cityidx__list{column-width:auto;column-count:1}
  .cityfind{max-width:none}
  .ptools__search{min-width:100%}
  .prow{flex-direction:column;align-items:flex-start;gap:8px}
}