/* branch.css — the fourteen branches, on the ground they actually stand on.
 *
 *  THE PLATE. Land and dots are drawn through ONE equal-scale projection
 *  (longitude × cos of the mean latitude), so a kilometre east is the same
 *  length on the page as a kilometre north: 160km across by 435km down, and the
 *  distance and direction between any two dots are real. The coastline comes
 *  from Natural Earth 1:10m — public domain — and is checked at build time so
 *  every dot lands on drawn ground rather than beside it.
 *
 *  ON THE BORDER. DESIGN-LOG v46 ruled a map out because «an outline of this
 *  country is a border argument». The owner has since asked for the map, so it
 *  exists — but it is drawn to make as little of that argument as a map can.
 *  Upstream files Israel and Palestine as separate features; both are painted
 *  in one ink as one body with NO stroke, because stroking the rings is what
 *  draws the line between them. What is left says only «this is the ground we
 *  teach on». That is a choice, not a neutral fact, and it is the owner's to
 *  revisit.
 *
 *  THE NAMES. Eight of the fourteen fall inside one 35km cluster and cannot sit
 *  on their dots, so they are dealt evenly down the side and tied back by a
 *  leader that starts AT the dot. The leader is the honest part: the dot is the
 *  measurement, the label is only typography, and the fan of leaders across the
 *  Galilee is the crowding, drawn instead of asserted. Nothing on this page
 *  encodes a quantity as a length.
 *
 *  Markup for the plate and the register is generated by data/branches/build.mjs
 *  from branches.json + land.geojson. Edit the JSON, re-run the script.
 *
 *  All colour rides the room tokens from course.css, so the page flips with the
 *  light switch like every other sheet. No fixed inks.
 */

/* ———————————————————————————————————————————— the head ———
   room.css sets this title with every other register's, on a curve drawn for a
   heading that has room. On a phone it does not: at 320px it lands 33px inside
   a 280px column, fills the first line to «فروعنا — من معليا» and drops
   «للنقب.» onto a second line that is otherwise empty. Two heavy lines and an
   orphan, before the map has said anything.

   This page is the only one that loads branch.css, so nothing below leaves it.

   The size follows a line that meets room.css's own value exactly at 560px —
   41.4px, both of them — so the boundary has no step in it, only a steeper
   fall underneath: 26px on a 390px phone, floored at 1.35rem for the
   narrowest. From 560 up, none of this applies and the page sets with its
   siblings. */
@media (max-width: 559.98px){
  .reg-title{
    font-size: clamp(1.35rem, 9.06vw - 9.3px, 2.6rem);
    line-height: 1.22;
  }
  /* and the break goes where the sentence already pauses. Left to fill, the
     line splits «من معليا / للنقب.» — one phrase across two lines. Giving the
     highlighted half its own line breaks at the dash instead, which is the
     joint the headline was written around. */
  .reg-title .hl{ display: block; }
  /* 1.85 is a printed-page leading; at four lines in a 280px column it turns
     the lede into most of the first screen. The size drops with it — phone
     body text next to a 26px title, not desktop text in a narrow column. */
  .reg-lede{ font-size: .95rem; line-height: 1.7; }
  /* the tail of the page follows the same drop: caption, helper line and
     footer all one notch down, so nothing below the map outweighs the map */
  .boxmap-fig figcaption{ font-size: .75rem; }
  .tw-l{ font-size: 1rem; }
  .tw-say{ font-size: .8rem; }
  .tw-wa{ font-size: .84rem; }
  .foot{ font-size: .78rem; margin-block: 44px 0; padding-block: 20px 30px; }
  .foot p{ margin-bottom: 6px; }
}

/* ——————————————————————————————————————————— the plate ——— */

.boxmap-fig{ margin: 26px 0 0; }

.boxmap{
  position: relative;
  width: 100%;
  max-width: 560px;                 /* a plate, not a wall */
  margin-inline: auto;
  aspect-ratio: var(--vw) / var(--vh);
}

/* The land. Quiet — it is the ground the branches stand on, not the subject.
   Filled softly so the coastline reads as a body rather than a wire, and the
   hairline is what makes the shape recognisable at plate size. Israel and
   Palestine arrive as separate rings upstream and are painted in ONE ink with
   no line between them: the page needs the shape of the ground it teaches on,
   and it is not the place to litigate where a line goes. */
.bx-land{
  fill: var(--fg); fill-opacity: .14;
  /* NO stroke, and that is the whole point. Israel and Palestine arrive as
     separate rings, and stroking each one draws the line BETWEEN them — the
     exact border argument this page has no business making. Filled with no
     outline they merge into one body, the coastline still reads, and the
     drawing says only «this is the ground we teach on». */
  stroke: none;
}
.bx-svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* the leaders. Hairline, and they must NOT thicken as the plate scales up —
   vector-effect keeps them one device pixel at every size. */
.bx-lead{
  fill: none;
  stroke: var(--fg-mute); stroke-opacity: .5;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke .22s ease, stroke-opacity .22s ease;
}
/* the spine the leaders land on */
.bx-spine{
  fill: none; stroke: var(--fg-mute); stroke-opacity: .3;
  stroke-width: 1; vector-effect: non-scaling-stroke;
}

/* ————————————————————————————————— the markers ———
   Every branch is a real button. One with a Waze link opens Waze; one without
   opens WhatsApp with its own name already written, so a student always lands
   somewhere. That is the price of letting a marker LOOK pressable — a pin that
   invites a tap and does nothing is a lie the student only finds after tapping.

   The glyph is Waze's own mark (simple-icons, paths CC0), used nominatively to
   label a button that opens Waze. Two rules follow from that and are not
   stylistic: the shape is never stretched, and it only wears the brand cyan on
   markers that actually open Waze. A branch still waiting for its link keeps
   the page ink, because wearing someone's badge while opening WhatsApp would
   misdescribe where the tap goes. As you paste links in, the plate turns cyan
   one branch at a time. */
:root{ --waze: #33ccff; }

.bx-pin{ cursor: pointer; }
/* The tap area — invisible, and sized by the build at half the tightest pair of
   markers so two of them can never claim the same pixel. It used to be a flat
   r=16 on centres 20.4 apart, which meant pointing at سخنين opened الشاغور.
   It sits outside .bx-mark so it does not move when the mark grows.
   The name chips beside the plate remain the comfortable targets. */
.bx-hit{ fill: transparent; }

/* Coin, ring and badge scale as ONE object. Scaling the badge on its own left
   it hanging 5 units off the coin it is supposed to be sitting on. */
.bx-mark{ transition: transform .22s var(--out); }

.bx-inf{
  /* the badge's two inks, the landing's own .im1/.im2 convention. Custom
     properties inherit into a <use> shadow tree, which is the only reason the
     mark can flip rooms without inlining it fourteen times. */
  --im1: var(--mark-1);
  --im2: var(--mark-2);
  transition: opacity .22s ease;
}
/* a paper coin under the badge: eight of these sit inside one cluster, and the
   disc is what keeps them countable where they nearly touch. The fill change on
   hover is transitioned — unstated, it snapped while the mark was still
   growing, and two halves of one gesture running at different speeds is most of
   what read as broken. */
.bx-coin{ fill: var(--paper); transition: fill .22s ease; }

/* an area, not a town: dimmed, because the mark points at the area's main town
   until a Waze link pins the real door */
.bx-pin-approx .bx-inf{ opacity: .55; }

/* 1.16, not 1.3 — the badges are 20 units wide and the closest pair is 20.4
   apart, so ANY growth crosses into a neighbour and the size only decides by
   how much. Enough to feel the press, little enough to stay a map. What keeps
   it from looking broken is the raise: branch.js moves the pointed-at marker to
   the front, because a badge that grows underneath its neighbour is exactly
   what a bug looks like. */
.bx-pin:is(:focus-visible, .lit) .bx-mark{ transform: scale(1.16); }
.bx-pin:is(:focus-visible, .lit) .bx-coin{ fill: var(--card-solid); }
/* and it comes to full strength — you should see plainly what you are pointing
   at, including the two markers that stand for an area */
.bx-pin:is(:focus-visible, .lit) .bx-inf{ opacity: 1; }

/* Hover is for pointers that can hover. On a touch screen :hover latches after
   the tap and would leave a badge sitting grown until you press somewhere else. */
@media (hover: hover){
  .bx-pin:hover .bx-mark{ transform: scale(1.16); }
  .bx-pin:hover .bx-coin{ fill: var(--card-solid); }
  .bx-pin:hover .bx-inf{ opacity: 1; }
}

/* «in your region» is a RING, not a recolour — the badge keeps its own colour */
.bx-ring{
  fill: none; stroke: var(--accent); stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0; transition: opacity .18s ease;
}
.bx-pin:focus-visible{ outline: none; }
.bx-pin:focus-visible .bx-ring{ opacity: 1; stroke-dasharray: 3 3; }

/* The labels are real HTML, not <text>: they must stay a readable size while
   the plate scales, lay out as Arabic, and — now that the register is gone —
   be the page's actual controls. Each is a chip so it reads as pressable
   without shouting; fourteen loud buttons in a column would be a toolbar. */
.bx-label{
  position: absolute;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  white-space: nowrap; text-decoration: none;
  font-size: clamp(.72rem, 2.6vw, .92rem);
  line-height: 1.2;
  color: var(--fg-soft);
  background: var(--card-solid);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s var(--out);
}
.bx-label b{ font-weight: 600; }
.bx-lic{
  flex: none; width: 1.05em; height: 1.05em;
  color: var(--fg-mute); fill: currentColor;
  transition: color .18s ease;
}
.bx-live .bx-lic{ color: var(--waze); }
.bx-label:hover, .bx-label:focus-visible{
  color: var(--fg); border-color: var(--accent); background: var(--card-solid);
  transform: translateY(-50%) translateX(-2px);
}
.bx-label:hover .bx-lic, .bx-label:focus-visible .bx-lic{ color: var(--accent); }
.bx-label:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.bx-label:active{ transform: translateY(-50%) scale(.97); }
/* the same chip state, reached from the map instead of from the list */
.bx-label.lit{ color: var(--fg); border-color: var(--accent); }
.bx-label.lit .bx-lic{ color: var(--accent); }

/* Point at a name and its own thread lights — set by branch.js, both ways round,
   so the marker also names itself when you point at IT.
   What was here dimmed all fourteen leaders and all fourteen badges, the
   pointed-at one included, and lit nothing: subtractive, and it did not even
   do the thing its own comment claimed. This page is additive by rule. */
.bx-lead.lit{ stroke-opacity: 1; }

.boxmap-fig figcaption{
  margin-top: 22px; padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.75; color: var(--fg-mute);
}

/* ——————————————————————————————————— وين إنت؟ ——— */

.townwrap{
  margin: 30px 0 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  background: var(--card);
}
.tw-l{
  display: block; margin-bottom: 9px;
  font-family: 'Baloo Bhaijaan 2', sans-serif; font-weight: 700;
  font-size: 1.05rem; color: var(--fg);
}
.tw-i{
  width: 100%; box-sizing: border-box;
  padding: 11px 13px;
  font: inherit; font-size: 1rem; color: var(--fg);
  background: var(--card-solid);
  border: 1px solid var(--card-line); border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tw-i::placeholder{ color: var(--fg-mute); opacity: .75; }
.tw-i:focus{
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16);
}
.tw-say{ margin: 11px 0 0; font-size: .84rem; line-height: 1.7; color: var(--fg-mute); }
.tw-say-hit{ color: var(--accent); font-weight: 600; }
.tw-say-ask{ color: var(--fg-soft); }
/* The WhatsApp door stays put whatever the field says: a student whose town we
   do not list must never reach a dead end, and one whose town we DO list still
   wants a person. Never hidden, never conditional.

   The green is the landing's — WhatsApp's own #25d366, the one the home page
   wears — by the founder's call, over the paper pages' daylight teal. It keeps
   that green in BOTH rooms, so the door looks the same wherever you meet it;
   the ink text is what makes that legal on paper, where white on this green
   is a 1.9:1 whisper. */
.tw-wa{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px; padding: 9px 15px;
  font-size: .87rem; font-weight: 600; text-decoration: none;
  color: var(--ink); background: #25d366;
  border-radius: 999px;
  transition: filter .18s ease, transform .18s var(--out);
}
.tw-wa:hover, .tw-wa:focus-visible{ filter: brightness(1.07); transform: translateY(-1px); }
.tw-wa svg{ flex: none; fill: currentColor; }

/* ——————————————————————— the match, set by branch.js ———
   Additive only. The marking never removes a branch: this page's promise is
   «كلّ الفروع», and answering by hiding some of them breaks it. Accent means
   exactly ONE thing on this page — «this is in your region» — which is why the
   HQ is told apart by size and weight instead of by colour. */
.bx-pin.near .bx-ring{ opacity: 1; }
.bx-lead.near{ stroke: var(--accent); stroke-opacity: 1; }
.bx-label.near{
  color: var(--accent); border-color: var(--accent);
  background: rgba(var(--accent-rgb), .07);
}
.bx-label.near .bx-lic{ color: var(--accent); }
.bx-label.near b{ font-weight: 700; }

/* ——— nearest first, then the next ———
   Three branches light and the order is legible without reading a word: the
   nearest at full strength, the second lighter, the third lighter still. They
   arrive a beat apart, closest first, so the sequence IS the ranking — drawn,
   not asserted.

   Rank rides on the ring and the chip, never on the size of the mark. Growth
   means one thing on this plate — «you are pointing at this» — and a marker
   that grew because it was near would collide with the marker that grew because
   the cursor was on it.

   `.near` with no rank is the fallback for the four towns with no published
   position: every branch in the region, at ONE weight, claiming no order it
   cannot compute. */
.bx-pin.near-2 .bx-ring{ opacity: .58; }
.bx-pin.near-3 .bx-ring{ opacity: .32; }
.bx-lead.near-2{ stroke-opacity: .55; }
.bx-lead.near-3{ stroke-opacity: .34; }
.bx-label.near-2{ background: none; }
.bx-label.near-2 b{ font-weight: 600; }
/* the third keeps the accent — it IS one of the three — and gives up the tinted
   border instead. Greying the text made the chip read «not lit» while its own
   marker and thread were still tinted, which is the map and the list disagreeing. */
.bx-label.near-3{ background: none; border-color: var(--card-line); }
.bx-label.near-3 b{ font-weight: 600; }

/* the beat between them — the whole point of the effect */
.bx-pin.near-2 .bx-ring, .bx-lead.near-2, .bx-label.near-2, .bx-cell.near-2{ transition-delay: .09s; }
.bx-pin.near-3 .bx-ring, .bx-lead.near-3, .bx-label.near-3, .bx-cell.near-3{ transition-delay: .18s; }



/* ————————————————————————————————————— floors ———
   The crop made the plate squarer, which costs the chip column its vertical
   room: at a 280px plate the slots fall ~25px apart, and a 26px pill collides
   with its neighbour. Only below 360px — where the pill genuinely will not fit —
   do the chips drop it and become plain
   marked-up names — still links, still carrying the icon, just no longer
   wearing a box there is no room for. */
@media (max-width: 359px){
  .bx-label{
    padding: 1px 2px; gap: 3px; font-size: .66rem; font-weight: 600;
    background: none; border-color: transparent;
  }
  .bx-label.near{ background: none; }
  .bx-label:hover, .bx-label:focus-visible{ background: none; }
  .bx-lic{ width: .95em; height: .95em; }
}
@media (min-width: 360px) and (max-width: 559px){
  .bx-label{ padding: 3px 7px 3px 5px; gap: 5px; font-size: .73rem; }
}

/* ———————————————————————————————— how to reach us ——— */

.reach-block{ margin-top: 42px; }
.rb-rows{
  margin: 14px 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line);
}
.rb-rows li{
  display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.rb-k{ flex: 0 0 auto; min-width: 104px; font-size: .76rem; font-weight: 600; color: var(--fg-mute); }
.rb-v{ font-size: .93rem; color: var(--fg); }
.rb-v a{ color: var(--fg); text-decoration-color: rgba(var(--accent-rgb), .45); }
.rb-v a:hover, .rb-v a:focus-visible{ color: var(--accent); }

@media (prefers-reduced-motion: reduce){
  .bx-mark, .bx-inf, .bx-ring, .bx-lead, .bx-label, .bx-lic, .tw-wa, .bx-coin, .bx-cell{ transition: none; }
  /* the three still rank by weight; they just stop arriving one at a time */
  .bx-pin.near-2 .bx-ring, .bx-lead.near-2, .bx-label.near-2, .bx-cell.near-2,
  .bx-pin.near-3 .bx-ring, .bx-lead.near-3, .bx-label.near-3, .bx-cell.near-3{ transition-delay: 0s; }
  /* the mark still answers, it just stops growing to say so */
  .bx-pin:is(:hover, :focus-visible, .lit) .bx-mark{ transform: none; }
}

/* ————————————————————————————————— the catchments ———
   The build partitions the drawn land by nearest branch — every hairline is
   the computed half-way line between two neighbours, so the seams are
   MEASUREMENTS, at the plate's own equal scale. The lines stay near-invisible
   because they are the ground truth, not the subject: what they exist for is
   the answer moment, when the وين-إنت ranking hands each cell the same
   near-1/2/3 classes as its pin and the student's own region fills in under
   their nearest branches, strongest first.

   Hairlines at one device pixel, like the leaders — a seam that thickened as
   the plate scaled would start to read as a border, and these must never:
   they cross the one-ink land as geometry, the way a graticule would. */
.bx-cell{
  fill: var(--accent); fill-opacity: 0;
  stroke: var(--fg-mute); stroke-opacity: .22;
  stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  transition: fill-opacity .3s ease;
  pointer-events: none;
}
.bx-cell.lit{ fill-opacity: .10; }
.bx-cell.near-1{ fill-opacity: .13; }
.bx-cell.near-2{ fill-opacity: .07; }
.bx-cell.near-3{ fill-opacity: .04; }