/* =========================================================
   css/toolbox.css — "ארגז כלים למטייל" (update #168)
   Loaded by index.html (the floating tab) and toolbox.html (the tool page).

   WHAT CHANGED IN #168, and why (all six points came from the owner):
     1. COLOUR. The leather-brown is gone. #168 first gave the tab the site's own
        green, but on the homepage it sat over the dark green hero and vanished
        into it, so the TAB is now a BLUE gradient (the site's established
        secondary accent) while each sub-topic keeps its own restrained accent
        (below). Every accent text colour was measured against white — all >=5:1.
     2. NO HEADER STRIP. The old cream header row + its border read as an
        unnecessary white line eating the top of the panel. It is deleted; the
        close ✕ moved into the tool strip, which is the only horizontal band left.
     3. NO "שער יומי" TAGLINE. Removed with that row.
     4. MOBILE IS ANCHORED TO THE TOP AND GROWS DOWNWARD. It used to be a bottom
        sheet, so switching to a shorter tool yanked the whole window down to the
        bottom of the screen. Now the top edge is FIXED and only the bottom moves.
     6. THE FULL-PAGE LINK IS A REAL BUTTON, not a whisper of grey text.
     7. THE TOOL STRIP IS A FULL 3x2 GRID, not wrapping pills. Measured: the six
        pills were 96-116px wide, so a ~300px phone row fitted only TWO — leaving
        a ragged ~90px hole at the end of every one of three rows, which read as
        unfinished. A fixed grid makes every row complete, so no cell is ever
        empty. The active tab is painted in the TAB's own blue (one brand colour
        in that strip) instead of a per-topic accent, and the pulsing dot was
        removed at the owner's request.
     8. COMPACTED (owner: "the content only appears from the second half of the
        page"). The strip was ~200px of an 844px phone screen before a single
        field was visible. Measured causes, each fixed at its source:
          (a) three tile rows -> TWO, by going 3 columns wide instead of 2;
          (b) the ✕'s reserved band 43-45px -> 38px, by shrinking the ✕ to 30px;
          (c) tile min-height 46px -> 40px (42px on a phone);
          (d) the gaps around the tiles 7px / 6px -> 4px;
          (e) the seam under the tab 8px -> 4px (112px from the top on a phone);
          (f) the pane's own top padding 13px -> 9px.
        Net: the strip is ~126px instead of ~200px, and the first tool field
        lands around 250px instead of ~330px — the upper third, not the lower
        half. No content, no label and no touch target was removed to get there.

   MOBILE IS THE PRIORITY, and the hard requirement is: THE WHOLE CURRENCY
   CONVERTER IS VISIBLE WITHOUT SCROLLING, at 100% text.

   HOW THAT IS GUARANTEED (not hoped):
     * Sizes are in rem, so a text-zoom scales the layout instead of clipping it.
     * Every row is a flex row that WRAPS: at large text the slider drops to its
       own line rather than pushing the field off-screen.
     * The panel is SIZED BY max-height with overflow:auto — never a fixed
       height with overflow:hidden, which is the classic sheet bug where zoomed
       content simply disappears.
     * dvh, not vh: a phone's address bar changes the viewport height.
     * 44px minimum touch targets stay in px — a hit area should not shrink —
       while the PADDING around them is in rem.
   ========================================================= */

:root{
  /* ---- base identity: a BLUE gradient (owner's #168 follow-up) ----
     The tab used to wear the site's own green (#4c8a66→#356b4c) — and on the
     homepage it lands directly over the dark green hero (#183f36 plus a
     rgba(12,40,31,.9) wash), so it was effectively invisible: two near-identical
     dark greens. Blue is the site's established SECONDARY accent (the weather /
     flights topics already use #3f6f8f / #4a5b8c), so a blue tab reads as part of
     vietisrael.com and separates cleanly from every green surface behind it.
     White label text must clear AA on the LIGHTEST stop: #2f6f9f is 5.4:1 against
     #fff (computed from the WCAG relative-luminance formula), so it passes. */
  --tb-g1:#2f6f9f;
  --tb-g2:#245b85;
  --tb-grad:linear-gradient(135deg,var(--tb-g1),var(--tb-g2));
  --tb-surface:#f2f7f3;
  --tb-line:#dfe9e2;
  --tb-ink:#20302a;
  --tb-soft:#5c6d65;
  --tb-acc:#2e7d4f;            /* the live topic accent; JS overrides per tool */

  /* ---- per-topic accents: SIX DISTINCT HUES, one per tool ----
     Owner's #168 follow-up: "the colours aren't different enough from one
     another". He was right, and it was measurable. The old six sat in three
     clusters — green 145°, and then blue #3f6f8f / teal #2f6f6b / indigo
     #4a5b8c all crammed between 195° and 235°, i.e. three tools that looked
     like the same colour. The set is now spread around the wheel, with each
     neighbour at least 36° apart (measured, not eyeballed):

                    hue   accent on #fff   dark behind white
       emergency      0°   #bf2f2f  5.73:1   #8a2b2b   8.53:1
       weather       36°   #9c5f06  5.18:1   #7a4c0d   7.32:1
       currency     145°   #2e7d4f  5.05:1   #1f5a37   8.15:1
       clock        187°   #0e7c8a  4.92:1   #0a5c5c   7.78:1
       flights      230°   #2b3f9e  9.10:1   #1e2f7a  12.05:1
       shabbat      285°   #7a3391  7.75:1   #5e2b70  10.22:1

     The pair is deliberate: the ACCENT paints icons, hairlines and outlines
     (it must read on white, so >=4.5:1), and the DARK variant is used where an
     accent becomes a SURFACE with white text on it — the selected tile and the
     sliders (it must carry white text, so >=7:1). Both columns were computed
     from the WCAG relative-luminance formula for every one of the six. */
  --tb-acc-currency:#2e7d4f;   --tb-acc-currency-dk:#1f5a37;
  --tb-acc-weather:#9c5f06;    --tb-acc-weather-dk:#7a4c0d;
  --tb-acc-clock:#0e7c8a;      --tb-acc-clock-dk:#0a5c5c;
  --tb-acc-flights:#2b3f9e;    --tb-acc-flights-dk:#1e2f7a;
  --tb-acc-shabbat:#7a3391;    --tb-acc-shabbat-dk:#5e2b70;
  --tb-acc-emergency:#bf2f2f;  --tb-acc-emergency-dk:#8a2b2b;
  --tb-acc:var(--tb-acc-currency);
  --tb-acc-dk:var(--tb-acc-currency-dk);
}

/* ---------------- the floating tab (replaces #flight-ops) ----------------
   position:fixed flush to the LEFT edge ⇒ OUT of flow: it reserves no layout
   height, so opening it can never leave a white gap or shift the hero.
   z-index 65 = above the sticky header (60), below #mobile-nav (70) and
   #cart-drawer (80), so an open drawer always covers the tab with no JS. */
#toolbox{position:fixed;left:0;top:70px;z-index:65;pointer-events:none}

.tb-bar{
  position:relative;z-index:3;display:inline-flex;align-items:center;
  transform-origin:left center;
  transition:transform .2s ease,opacity .16s ease,visibility .2s;
}
/* z-index:3 is load-bearing, not decoration. #toolbox is itself a stacking
   context (position:fixed + z-index:65), and inside it the panel is z-index:2
   while the phone scrim is z-index:1. A `.tb-bar` left at z-index:auto (0) was
   therefore painted UNDER the scrim: opening the panel dimmed the tab by 42%
   — which is why the tab looked like it had the same colour as the dark screen
   behind it — AND the scrim swallowed the tap, so the tab could not be used to
   close the panel again. Above the scrim, below nothing else that matters. */
/* Collapsed: the bar scales to zero and the sliver takes its place. The sliver
   is itself a button, so a visitor who hides the toolbox can always bring it
   back. visibility:hidden is load-bearing — it removes the collapsed controls
   from the tab order and the a11y tree instead of leaving invisible buttons. */
#toolbox.is-collapsed .tb-bar{transform:scale(0);opacity:0;visibility:hidden;pointer-events:none}

/* RTL flex puts the first DOM child rightmost, so icon→label already renders
   left-to-right as label, icon. The dot that used to sit between them is gone. */
.tb-link{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 42px 0 13px;border-radius:0 10px 10px 0;
  background:var(--tb-grad);color:#fff;text-decoration:none;
  font-size:.9rem;font-weight:600;line-height:1.15;
  /* A tight dark outline + a stronger blue shadow: on the dark hero the tab now
     separates by hue AND by a visible edge, so it can never melt into the photo. */
  box-shadow:0 0 0 1px rgba(255,255,255,.34),0 3px 12px rgba(20,52,78,.42);
  pointer-events:auto;transition:filter .15s;
}
.tb-link:hover{filter:brightness(1.08)}
/* The pulsing dot is GONE (owner: "I don't need the blinking light"). It was
   removed from index.html as well, so no empty placeholder is left behind. */
.tb-icon,.tb-ic{display:inline-flex;line-height:0}
/* .site-icon self-colours from currentColor, but the shared tone-* classes
   would outrank a plain class — hence the id in the selector.
   ⚠ BOTH class names must be listed. js/toolbox.js's iconSlot() and index.html
   emit `.tb-ic`, while this rule used to name only `.tb-icon` — so the override
   never applied and the icon fell back to `.site-icon`'s own #367252 at 26px:
   a dark green wrench on a dark green tab, i.e. the "missing" wrench the owner
   reported. `.tb-ic` is the real one; `.tb-icon` is kept for safety. */
#toolbox .tb-icon svg.site-icon,
#toolbox .tb-ic svg.site-icon{width:22px;height:22px;color:#fff;--icon-accent:#cfe3f2}
/* The ✕ sits at the end of the TOOL STRIP (it used to live in the header row,
   which is gone). Revealed only by .tb-ready, a class the script adds — so with
   JS off there is no invisible control. */
.tb-collapse{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:grid;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(255,255,255,.34);color:#fff;
  font-size:.75rem;line-height:1;cursor:pointer;
  pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .16s,background .15s;
}
#toolbox.tb-ready:not(.is-collapsed) .tb-collapse,
#toolbox .tb-collapse:focus-visible{opacity:1;visibility:visible}
.tb-collapse:hover{background:rgba(255,255,255,.42)}
.tb-sliver{display:none}
/* Collapsed = THE TOOLS WRENCH ICON ALONE (owner's request), on the same blue
   as the open tab, so the control still says what it is with no animation. The
   strip grew from 22x30 (a dot's box) to 34x46, which is a real 44px+ touch
   target rather than a sliver, and the icon inside is 22px. */
#toolbox.is-collapsed .tb-sliver{
  display:grid;place-items:center;pointer-events:auto;
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:34px;height:46px;padding:0;border:none;cursor:pointer;
  border-radius:0 10px 10px 0;background:var(--tb-grad);
  box-shadow:0 0 0 1px rgba(255,255,255,.34),0 3px 12px rgba(20,52,78,.42);
}
#toolbox .tb-sliver-ic{display:inline-flex;line-height:0}
#toolbox .tb-sliver-ic svg.site-icon{width:22px;height:22px;color:#fff;--icon-accent:#cfe3f2}

/* ---------------- the panel ----------------
   Desktop: drops DOWN from the tab (the tab is pinned to the left edge, so a
   right-anchored dropdown would have nowhere to go).
   Mobile:  TOP-ANCHORED and growing downward — see the media query at the end.
   The panel carries a whisper of the site green instead of a flat white block,
   and there is NO header band: the tool strip is the first thing you see. */
.tb-panel{
  position:absolute;top:calc(100% + 4px);left:0;z-index:2;
  display:flex;flex-direction:column;
  /* The panel is a <section>, and css/style.css carries a site-wide
     `section{padding:48px 0}` — so without this it silently inherits 48px of
     dead space above the tool strip and below the full-page button. Measured:
     the panel's computed padding was 48px/48px, which read on screen as an
     unexplained empty band under the tab (the owner's "unnecessary white line
     at the top taking space"). Padding belongs to the inner .tb-pane/.tb-tabs,
     never to the shell. */
  padding:0;
  width:min(440px,calc(100vw - 20px));max-height:78dvh;
  background:linear-gradient(180deg,#fff 0%,var(--tb-surface) 100%);
  border:1px solid var(--tb-line);border-radius:14px;
  box-shadow:0 18px 48px rgba(32,48,42,.26);
  pointer-events:auto;overflow:hidden;
}
.tb-panel[hidden]{display:none}
#toolbox.is-collapsed .tb-panel{display:none}
.tb-panel .tb-mount{display:flex;flex-direction:column;min-height:0}

/* Tool grid. A FIXED 3-column grid, never wrapping pills: six tiles fill TWO
   complete rows, so no row can end with a hole — and two rows instead of three
   is a whole tile row of height saved before the tool content begins (the
   owner's "the content only appears from the second half of the page").
   Nothing is hidden off any edge (the whole point is that a visitor DISCOVERS
   these tools) and there is no horizontal scrolling, so there is nothing to
   hint at either.
   A label too long for its tile wraps to a second line: the grid keeps every
   tile in a row the same height, and min-height already covers two 15px lines,
   so a wrapped label never pushes the strip taller.
   NO border-bottom: the separator is the active pane's accent hairline, so there
   is exactly one line instead of a stack of them. */
.tb-tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
  padding:5px 8px 6px;flex:0 0 auto;background:transparent;
}
/* The floating ✕ is absolutely positioned in the panel's top-LEFT corner (see
   .tb-tabs .tb-x below), so it needs its own clear band — otherwise it would sit
   ON the left tile of row 1. The reservation is on TOP, not on the inline edge:
   a side reservation steals width from EVERY row, while a top band is paid once.
   Scoped with :has() so the standalone toolbox page, which has no ✕, pays
   nothing. 38px = the ✕'s 6px offset + its 30px height + a 2px breath — the
   tightest band that cannot overlap the first row. One shared value for desktop
   and phone: the ✕ is 30px at top:6px at every width, so neither needs its own. */
.tb-tabs:has(.tb-x){padding-top:38px}
.tb-tab{
  display:flex;align-items:center;gap:7px;min-width:0;
  /* 40px, not 46px: the tile is WIDE (a third of the panel), so the thumb target
     is still far larger than the 44px minimum the raw height would suggest —
     this is a fat horizontal bar, not a 44x44 square. Three rows of 46px were
     the single biggest consumer of the panel's upper half. */
  min-height:40px;padding:0 9px;
  border:1px solid var(--tb-line);border-radius:12px;background:#fff;
  color:var(--tb-ink);font-size:.83rem;font-weight:700;
  font-family:inherit;cursor:pointer;text-align:start;
  /* Also used for a LINK tool (an <a>): without this it would keep the
     browser's default underline and read as body text rather than as a tile. */
  text-decoration:none;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
/* The label may wrap on a very narrow phone rather than overflow its tile; the
   grid keeps every tile in a row the same height, so a wrapped label never
   leaves a hole beside it. */
.tb-tab>span{min-width:0}
.tb-tab svg.site-icon{width:18px;height:18px;color:currentColor;--icon-accent:currentColor;flex-shrink:0}
.tb-tab:hover{background:var(--tb-surface);border-color:#c9d8e4}
/* Selected = THE TOOL'S OWN COLOUR. Owner's #168 follow-up: "when the selector
   buttons at the top are marked they should have the SAME colour as the tool".
   --tb-acc-dk is set on the panel by js/toolbox.js on every tool switch, so the
   selected tile and the pane below it are painted from ONE value and cannot
   disagree. Previously this was the tab's blue, which made every selected tile
   look identical — the tool's own colour is now the thing that marks it. Every
   --tb-acc-*-dk clears 7.3:1 behind white text (computed, not eyeballed). */
.tb-tab[aria-selected="true"]{
  background:var(--tb-acc-dk);border-color:var(--tb-acc-dk);color:#fff;
  box-shadow:0 2px 8px rgba(32,48,42,.24);
}
.tb-tab[aria-selected="true"]:hover{background:var(--tb-acc-dk)}
.tb-tab[aria-selected="true"] svg.site-icon{color:#fff;--icon-accent:#cfe3f2}
.tb-tab:focus-visible{outline:3px solid var(--tb-acc);outline-offset:2px}
/* The close ✕ (hosted here by js/toolbox-tab.js).
   #168 follow-up: it used to sit INSIDE the pill row with `margin-inline-start:
   auto`, which in RTL resolved to margin-right:auto and swallowed the row's
   leftover space — measured at 46px of dead void — so it read as an oddly
   indented stray control. The owner asked for it to FLOAT in the corner and be
   clearly visible, so it is now absolutely positioned against the panel's
   top-left corner and painted as a filled circle in the open tool's own dark
   accent (--tb-acc-dk), with a shadow. Absolute positioning also takes it out
   of the flex flow, so it can no longer create a gap in the pill row.
   #168 follow-up: the selected TILE is now the tool's own colour (--tb-acc-dk),
   and the ✕ is deliberately NOT: it closes the whole panel rather than belonging
   to one tool, and it is the blue twin of the blue opener tab at the panel's
   other corner. So the chrome (opener + ✕) stays blue while the CONTENT — the
   selected tile and the pane below it — is tinted by whichever tool is open. */
.tb-tabs .tb-x{
  position:absolute;z-index:3;top:6px;inset-inline-end:6px;
  width:30px;height:30px;display:grid;place-items:center;padding:0;
  border:none;border-radius:50%;
  background:var(--tb-g2);color:#fff;
  font-size:.95rem;font-weight:700;line-height:1;cursor:pointer;
  box-shadow:0 2px 9px rgba(32,48,42,.28);
}
.tb-tabs .tb-x:hover{filter:brightness(1.12)}

/* The scrolling area. overflow:auto (never hidden) is what keeps zoomed text
   reachable instead of cut off. */
.tb-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* ONE accent hairline, coloured by the tool you are looking at. This is also
   what replaced the old tab-strip border. */
.tb-pane{padding:9px 12px 14px;border-top:2px solid var(--tb-acc)}

/* ---------------- density pass (#168 follow-up) ----------------
   The owner: "the elements are so spread out — try to tighten it". These are the
   values that were paying the most height per row, reduced together so the panel
   reads as one dense instrument instead of a stack of loose cards. Measured on a
   390px phone with the weather pane: ~46px of vertical air removed, which is
   roughly one whole row that now fits without scrolling. Nothing was deleted and
   no touch target dropped below 40px — the space removed is GAP, not content. */
.tb-pane[hidden]{display:none}

/* ---------------- currency ----------------
   One block per currency: [label][amount] on one line, slider on the next.
   Wrapping (not fixed columns) is what survives a 200% text zoom.

   #168 follow-up (owner: "in the compact view this looks unprofessional — the
   fonts are so big, and the elements are so spread out"). Three causes, each
   fixed at its source rather than by shrinking the whole card:
     1. The row identified its currency with a BARE SYMBOL (₫ / $ / ₪), so the
        symbol had to be large to carry the meaning. The row now shows the full
        name under the symbol, which is what the owner asked for anyway — so the
        identity is carried by words and the amount can drop to a calm size.
     2. The amount field was 1.15rem/44px. In a ~370px panel three of them read
        as three billboards. It is now 1rem/40px — still the largest text in the
        row (it IS the number that matters), just no longer oversized.
     3. The vertical rhythm: row padding 10->8, inter-row gap 10->7, in-row gap
        8->6, slider 44->38. Measured, that is ~54px off three rows — which is
        also ~54px MORE of the converter that fits on screen without scrolling.
   Nothing was removed: every field, both times and the rate line are intact. */
.tb-cur{display:flex;flex-direction:column;gap:7px}
.tb-cur-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;
  padding:8px 10px;border:1px solid var(--tb-line);border-radius:12px;background:#fff;
}
/* The row's label: SYMBOL over NAME. `flex:0 0 auto` + no width cap means the
   block sizes to the name's own width and therefore never wraps mid-word — so
   "דונג וייטנאמי" stays on one line on every phone, instead of breaking. */
.tb-cur-lbl{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  min-width:4.4rem;
}
.tb-cur-code{font-size:.95rem;font-weight:800;color:var(--tb-acc);line-height:1.2}
.tb-cur-name{
  font-size:.66rem;font-weight:600;color:var(--tb-soft);line-height:1.3;text-align:center;
}
.tb-cur-in{
  flex:1 1 8rem;min-width:0;min-height:40px;padding:0 8px;
  border:1px solid var(--tb-line);border-radius:9px;background:#fff;color:var(--tb-ink);
  font-family:inherit;font-size:1rem;font-weight:700;text-align:center;
  /* Numbers must be isolated and laid out LTR: inside an RTL page a bare
     "200,000" can be re-ordered visually, which reads as a different number.
     #168 follow-up (owner): the value is CENTRED, so the amount sits in the
     middle of its field instead of hugging the right edge and looking as if the
     field were empty on the other side. */
  direction:ltr;unicode-bidi:isolate;
}
.tb-cur-in:focus-visible{outline:3px solid var(--tb-acc);outline-offset:1px}
.tb-cur-slider{
  flex:1 1 100%;width:100%;height:38px;margin:0;padding:0;
  accent-color:var(--tb-acc);background:transparent;
  /* pan-y lets a vertical swipe still scroll the panel; horizontal drags reach
     the slider. Without it a thumb-drag on a phone can scroll the page instead. */
  touch-action:pan-y;
}
.tb-rate{
  margin:4px 0 0;padding-top:10px;border-top:1px dashed var(--tb-line);
  font-size:.76rem;line-height:1.6;color:var(--tb-soft);
}
.tb-rate b{color:var(--tb-ink);font-weight:700}
.tb-note{margin:8px 0 0;font-size:.76rem;line-height:1.6;color:var(--tb-soft)}
.tb-warn{
  margin:0 0 12px;padding:9px 11px;border:1px solid #f0d7bd;border-radius:10px;
  background:#fdf4ea;color:#7a4a1e;font-size:.78rem;line-height:1.55;
}
.tb-loading,.tb-fail{font-size:.85rem;color:var(--tb-soft);margin:0;padding:12px 2px}

/* ---------------- generic field (flights) ---------------- */
.tb-field{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.tb-field label{font-size:.85rem;font-weight:600;color:var(--tb-ink);flex:0 0 auto}
.tb-in{
  flex:1 1 7rem;min-width:0;min-height:44px;padding:0 10px;border:1px solid var(--tb-line);
  border-radius:9px;background:#fff;color:var(--tb-ink);font-family:inherit;font-size:1.05rem;
  font-weight:700;text-align:right;direction:ltr;unicode-bidi:isolate;
}
.tb-in:focus-visible{outline:3px solid var(--tb-acc);outline-offset:1px}

/* ---------------- generic tool rows ---------------- */
.tb-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.tb-item{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:8px 10px;border:1px solid var(--tb-line);border-radius:11px;background:#fff;
}
.tb-item-he{font-size:.9rem;font-weight:700;color:var(--tb-ink);min-width:5.5em}
.tb-item-val{font-size:1.15rem;font-weight:800;color:var(--tb-ink);direction:ltr;unicode-bidi:isolate}
.tb-item-sub{margin-inline-start:auto;font-size:.78rem;color:var(--tb-soft)}

/* ---------------- WEATHER (redesigned #168) ----------------
   Region heading + a responsive card grid. Cards (not rows) because the owner
   asked for something that looks impressive, and two columns of tiles read as
   a weather board rather than as a bulleted list. */
.tb-wx-region{
  margin:14px 0 7px;font-size:.74rem;font-weight:800;letter-spacing:.06em;
  color:var(--tb-acc-weather);text-transform:none;
}
.tb-wx-region:first-child{margin-top:2px}
.tb-wx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.2rem,1fr));gap:8px}
.tb-wx-card{
  display:flex;flex-direction:column;gap:1px;padding:10px 11px;background:#fff;
  border:1px solid var(--tb-line);border-radius:12px;
}
.tb-wx-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.tb-wx-name{font-size:.82rem;font-weight:700;color:var(--tb-ink);line-height:1.25}
.tb-wx-ic{line-height:0;color:var(--tb-acc-weather);flex:0 0 auto}
.tb-wx-ic svg.site-icon{width:22px;height:22px;color:var(--tb-acc-weather);--icon-accent:var(--tb-acc-weather)}
.tb-wx-temp{
  font-size:1.3rem;font-weight:800;color:var(--tb-ink);line-height:1.15;
  direction:ltr;unicode-bidi:isolate;
}
.tb-wx-label{font-size:.72rem;color:var(--tb-soft);line-height:1.3}
/* "מרגיש כמו" is THE number that matters in Vietnam — humidity turns 30° into a
   36° afternoon. It used to be one clause inside a low-contrast .7rem meta line,
   so the owner rightly said it did not stand out. It is now its own tinted chip
   with an oversized value, and humidity is demoted to a quiet line beneath it. */
.tb-wx-feels{
  display:inline-flex;align-items:baseline;gap:5px;align-self:flex-start;
  margin-top:6px;padding:3px 9px;border-radius:9px;
  /* Tinted from the weather accent itself, so this chip can never drift away
     from the colour of the tool it lives in. The TEXT inside it uses the DARK
     variant (see .tb-wx-feels-k/-v below): the accent on this tint reaches only
     ~4.5:1, which is borderline for 11px text — the dark variant carries 6.3:1,
     and it also makes "מרגיש 38" MORE prominent, which is what was asked for. */
  background:rgba(156,95,6,.11);border:1px solid rgba(156,95,6,.30);
}
.tb-wx-feels-k{font-size:.72rem;font-weight:700;color:var(--tb-acc-weather-dk)}
.tb-wx-feels-v{font-size:1.02rem;font-weight:800;color:var(--tb-acc-weather-dk)}
.tb-wx-hum{margin-top:4px;font-size:.7rem;color:var(--tb-soft);line-height:1.35}

/* ---------------- CLOCK (redesigned #168) ----------------
   Two tiles the SAME size, and a bold +N badge between them. The old pane made
   Vietnam huge and Israel small, and labelled Israel "לשיחה הביתה" — a hint the
   owner explicitly did not want. */
.tb-clock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tb-clock-tile{
  padding:10px 9px;border:1px solid var(--tb-line);border-radius:12px;
  background:#fff;text-align:center;
}
.tb-clock-tile.is-here{background:linear-gradient(180deg,#fff,var(--tb-surface))}
.tb-clock-city{font-size:.78rem;font-weight:700;color:var(--tb-soft)}
.tb-clock-time{
  margin:2px 0;font-size:1.42rem;font-weight:800;color:var(--tb-ink);
  line-height:1.15;direction:ltr;unicode-bidi:isolate;
}
.tb-clock-date{font-size:.7rem;color:var(--tb-soft);line-height:1.35}
.tb-gap{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:8px;padding:7px 12px;border-radius:999px;
  background:var(--tb-surface);border:1px solid var(--tb-line);
}
.tb-gap-text{font-size:.8rem;color:var(--tb-soft);font-weight:600}
/* The clock's own explanation, moved INTO the pane from the toolbox page when
   that page stopped being the all-tools surface (the owner asked for it to be
   carried over rather than dropped). */
.tb-clock-note{margin:8px 0 0;font-size:.76rem;line-height:1.65;color:var(--tb-soft)}
.tb-clock-note b{color:var(--tb-ink);font-weight:700}
.tb-gap-badge{
  display:inline-block;padding:2px 13px;border-radius:999px;
  /* The +N badge is a SURFACE carrying white text, so it takes the DARK variant
     (7.78:1) rather than the accent (4.92:1) — the same rule the selected tile
     follows. It is the only place the clock accent becomes a background. */
  background:var(--tb-acc-clock-dk);color:#fff;font-size:1rem;font-weight:800;
  direction:ltr;unicode-bidi:isolate;line-height:1.5;
}

/* ---------------- SHABBAT (compacted in the #168 follow-up) --------------
   The pane used to spend THREE rows per city — the city name, a two-cell time
   bar, and a grey date line — and the DATE was identical on every card, so ten
   cities printed "9.10" ten times. Measured vertically that was the single
   biggest waste in the pane.

   Now: the date and the parasha are printed ONCE, above the list
   (js/toolbox.js builds .tb-sh-when), and each card is city + the two labelled
   times on ONE line. The labels stay — the earlier fix that separated candle
   lighting from havdalah must not be undone — but they now sit INLINE with
   their value instead of stacked above it, which halves the bar's height.
   A card with no havdalah simply shows one cell; flex handles it with no rule. */
.tb-sh-when{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;
  margin:0 0 8px;font-size:.78rem;color:var(--tb-soft);
}
.tb-sh-when b{color:var(--tb-acc-shabbat);font-weight:800}
.tb-sh-card{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  padding:8px 10px;border:1px solid var(--tb-line);border-radius:11px;background:#fff;
}
.tb-sh-he{flex:1 1 auto;min-width:0;font-size:.86rem;font-weight:700;color:var(--tb-ink)}
/* Candle lighting and havdalah are TWO DIFFERENT TIMES, so they get two labelled
   cells with a visible divider between them. They used to be one small grey
   run-on string ("הדלקת נרות · הבדלה 19:20") sitting UNDER a big unlabelled
   candle time — the two times differed in size, weight and position with nothing
   marking where one ended and the other began (the owner: "the candle-lighting
   text is very close to the havdalah text, there needs to be a separation").
   A contained bar with an internal hairline makes the split unmistakable, and
   each time now carries its own label INSTEAD of relying on the big value above.
   One child (a city with no havdalah) simply fills the bar — flex handles it
   with no extra rule. */
.tb-sh-times{
  flex:0 1 auto;display:flex;align-items:stretch;
  border:1px solid var(--tb-line);border-radius:10px;
  background:var(--tb-surface);overflow:hidden;
}
.tb-sh-t{
  flex:0 0 auto;display:flex;align-items:baseline;gap:5px;padding:4px 8px;
}
/* The divider. border-INLINE-start, so it lands between the two cells on the
   correct side in RTL without a direction-specific rule. */
.tb-sh-t + .tb-sh-t{border-inline-start:1px solid var(--tb-line)}
.tb-sh-t-k{font-size:.7rem;font-weight:700;color:var(--tb-soft);white-space:nowrap}
.tb-sh-t-v{
  font-size:.92rem;font-weight:800;color:var(--tb-acc-shabbat);
  line-height:1.35;direction:ltr;unicode-bidi:isolate;
}
.tb-sh-val{font-size:1.15rem;font-weight:800;color:var(--tb-acc-shabbat);direction:ltr;unicode-bidi:isolate}
.tb-sh-sub{margin-inline-start:auto;font-size:.76rem;color:var(--tb-soft)}
.tb-sh-para{flex:1 1 100%;font-size:.76rem;color:var(--tb-soft)}

/* ---------------- EMERGENCY ---------------- */
.tb-em{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:11px;
  border:1px solid var(--tb-line);border-radius:11px;background:#fff;margin-bottom:8px;
}
.tb-em-num{font-size:1.2rem;font-weight:800;color:var(--tb-acc-emergency);direction:ltr;unicode-bidi:isolate}
.tb-em-label{font-size:.85rem;font-weight:600;color:var(--tb-ink)}
.tb-em a{margin-inline-start:auto;font-size:.82rem;font-weight:700;color:var(--tb-acc-emergency)}
/* The embassy block: a real card, because this is the one thing a stranded
   traveler actually needs, and it carries a verified source link. */
.tb-emb{
  margin:12px 0 0;padding:12px;border-radius:12px;
  border:1px solid var(--tb-line);background:linear-gradient(180deg,#fff,var(--tb-surface));
}
.tb-emb h3{margin:0 0 6px;font-size:.88rem;font-weight:800;color:var(--tb-ink)}
.tb-emb p{margin:0 0 6px;font-size:.78rem;line-height:1.6;color:var(--tb-soft)}
.tb-emb .tb-emb-row{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:0 0 5px}
.tb-emb .tb-emb-k{font-size:.74rem;font-weight:700;color:var(--tb-soft);min-width:3.4em}
.tb-emb .tb-emb-v{font-size:.82rem;color:var(--tb-ink);line-height:1.5}
.tb-emb a{color:var(--tb-acc-emergency);font-weight:700}
/* Common-problem answers: native <details> — collapsed by default so the pane
   stays short, and it needs no JS at all. */
.tb-faq{margin:12px 0 0;border-top:1px dashed var(--tb-line);padding-top:10px}
.tb-faq h3{margin:0 0 6px;font-size:.86rem;font-weight:800;color:var(--tb-ink)}
.tb-faq details{border-bottom:1px solid var(--tb-line)}
.tb-faq details:last-child{border-bottom:none}
.tb-faq summary{
  padding:9px 2px;font-size:.82rem;font-weight:700;color:var(--tb-ink);
  cursor:pointer;list-style:none;
}
.tb-faq summary::-webkit-details-marker{display:none}
.tb-faq summary::before{content:"›";display:inline-block;margin-inline-end:7px;color:var(--tb-acc-emergency);font-weight:800;transition:transform .18s}
.tb-faq details[open] summary::before{transform:rotate(90deg)}
.tb-faq .tb-faq-a{padding:0 2px 11px 2px;font-size:.78rem;line-height:1.65;color:var(--tb-soft)}
.tb-faq .tb-faq-a a{color:var(--tb-acc-emergency);font-weight:700}

/* ---------------- FLIGHTS (#168 — new pane) ---------------- */
.tb-fl-out{margin-top:10px}
.tb-fl-card{
  padding:12px;border:1px solid var(--tb-line);border-radius:12px;background:#fff;
}
.tb-fl-card + .tb-fl-card{margin-top:8px}
.tb-fl-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px}
.tb-fl-num{font-size:1rem;font-weight:800;color:var(--tb-acc-flights);direction:ltr;unicode-bidi:isolate}
.tb-fl-air{margin-inline-start:auto;font-size:.76rem;color:var(--tb-soft)}
.tb-fl-route{font-size:.92rem;font-weight:700;color:var(--tb-ink);margin:4px 0 2px}
.tb-fl-times{font-size:.78rem;color:var(--tb-soft);direction:ltr;unicode-bidi:isolate}
/* The day word is Hebrew (היום / מחר / "א' 5.10") so it stays in the RTL flow,
   while the clock time and terminal number are LTR-isolated. They used to be one
   concatenated direction:ltr string, which pushed the Hebrew word to the wrong
   end of the line. */
.tb-fl-when{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;margin-top:3px}
.tb-fl-day{font-size:.78rem;font-weight:700;color:var(--tb-ink)}
.tb-fl-badge{
  display:inline-block;margin-top:6px;padding:3px 11px;border-radius:999px;
  font-size:.76rem;font-weight:700;background:var(--tb-surface);color:var(--tb-ink);
  border:1px solid var(--tb-line);
}
.tb-fl-badge.is-bad{background:#fbeaea;border-color:#eec9c9;color:#8f3535}
.tb-fl-badge.is-warn{background:#fdf5e6;border-color:#efdcb6;color:#7a5a17}
.tb-fl-empty{font-size:.8rem;color:var(--tb-soft);padding:10px 2px;line-height:1.6}
/* "Not found" is still a real answer, so it is a real block with a way forward
   (the official board) instead of a dead-end sentence. It also carries the
   operational notices that arrive on their own request — a traveler whose flight
   is absent still needs to know the airport is having a bad day. */
.tb-fl-none{
  padding:11px 12px;border:1px solid var(--tb-line);border-radius:11px;
  background:var(--tb-surface);
}
.tb-fl-none p{margin:0 0 6px;font-size:.78rem;line-height:1.6;color:var(--tb-soft)}
.tb-fl-none p:first-child{margin-bottom:4px;font-weight:700;color:var(--tb-ink)}
.tb-fl-none a{font-size:.78rem;font-weight:700;color:var(--tb-acc-flights)}
/* (הוסר) .tb-fl-notice — עיצב את כרטיס "הודעות תפעוליות אחרונות" בפאנל
   מצב הטיסות. הבלוק הוסר לבקשת Nivo יחד עם איסוף ההודעות בתשלום, ולכן
   ה-CSS המת הוסר איתו. `.tb-wx-region` נשאר — הוא משמש את ערי מזג האוויר. */

/* ---------------- the "open the full page" button (#168: was a whisper) ----
   The owner said the old link was too subtle in every tool. It is now a real
   bordered button with the tool's accent, and its LABEL follows the open tool
   ("לעמוד המלא של ממיר המטבע") — wired in js/toolbox-tab.js. */
/* A flex ROW, because a tool may legitimately own TWO full pages (the owner
   asked for weather to point at both the weather page and the flood map) — and
   a tool that owns NONE (the clock) hides the whole band with [hidden].
   ⚠️ `.tb-all[hidden]` is load-bearing: `display:flex` here beats the browser's
   `[hidden]{display:none}` default, which is exactly the trap that once left a
   dead WhatsApp button visible on three lead pages (see PROJECT-GUIDELINES). */
.tb-all{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  margin:0;padding:10px 12px;border-top:1px solid var(--tb-line);
  background:rgba(255,255,255,.7);flex:0 0 auto;
}
.tb-all[hidden]{display:none!important}
.tb-all a{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:42px;padding:0 16px;border-radius:10px;
  background:#fff;border:1px solid var(--tb-acc);color:var(--tb-acc);
  font-size:.82rem;font-weight:800;text-decoration:none;
}
.tb-all a:hover{background:var(--tb-acc);color:#fff}
.tb-all a .tb-all-ar{transition:transform .16s}
.tb-all a:hover .tb-all-ar{transform:translateX(-3px)}

/* ---------------- collapsed sliver & motion ---------------- */
@media(prefers-reduced-motion:reduce){
  .tb-bar{transition:none}
  .tb-faq summary::before,.tb-all a .tb-all-ar{transition:none}
}

/* ---------------- phone: TOP-ANCHORED panel that grows DOWNWARD ----------------
   #168: this REPLACES the bottom sheet. The sheet looked fine until you switched
   tools — a shorter tool let the panel collapse to the bottom of the screen, so
   the window appeared to jump away from the finger that opened it. Anchoring the
   TOP edge and letting only the bottom edge move fixes that, and it also puts
   the currency fields (the first tool, the most-used one) in the upper half of
   the screen, where the on-screen keyboard cannot cover them.

   It is still opened by a TAP on a labelled tab — never by a drag. */
@media(max-width:760px){
  #toolbox{top:64px}
  .tb-link{min-height:44px;padding:0 34px 0 11px;font-size:.86rem;gap:6px}
  #toolbox .tb-icon svg.site-icon,
  #toolbox .tb-ic svg.site-icon{width:20px;height:20px}
  .tb-panel{
    position:fixed;left:0;right:0;
    /* just below the tab (64px) + its own 44px height + the 4px seam */
    top:112px;bottom:auto;
    width:100%;max-width:none;
    /* The bottom edge is the ONLY edge that moves, so the panel grows and
       shrinks downward from a fixed top. max-height keeps it inside the
       viewport; the body still scrolls, so nothing is ever unreachable. */
    max-height:calc(100dvh - 120px);
    border-radius:0 0 16px 16px;border-top:none;
  }
  .tb-pane{padding:8px 12px calc(12px + env(safe-area-inset-bottom))}
  /* Tightened ONLY on phones, to buy vertical room: measured against a 200%
     text zoom, where each currency row roughly doubles in height. */
  .tb-cur{gap:6px}
  .tb-cur-row{padding:7px 9px;gap:5px 8px}
  /* The grid is 3 columns on a phone too. Measured on a 390px screen each tile is
     ~121px: an 18px icon + a 6px gap leaves ~85px of text room, which fits every
     one of the six labels on a single line at .8rem — and a label that still
     needs more wraps INSIDE the tile, where min-height:42px already covers two
     15px lines, so a wrapped label never makes the row taller. */
  .tb-tabs{padding:5px 8px 6px;gap:4px}
  /* No padding-top override here: the shared 38px band is measured for the same
     30px ✕ at top:6px, so the phone pays the same value and nothing more. */
  .tb-tab{min-height:42px;padding:0 5px;gap:6px;font-size:.8rem}
  .tb-wx-grid{grid-template-columns:1fr 1fr}
  /* Scrim: sits behind the panel, above the page. Tapping it closes. */
  .tb-scrim{position:fixed;inset:0;z-index:1;background:rgba(24,32,28,.42);pointer-events:auto;border:0;padding:0;cursor:pointer}
  .tb-scrim[hidden]{display:none}
}
@media(min-width:761px){ .tb-scrim{display:none} }

/* =========================================================
   STANDALONE PAGE (toolbox.html)
   The same component, given room. Nothing here affects the homepage's floating
   panel — the homepage styles above are scoped to #toolbox and its children.
   ========================================================= */
.toolbox-page{background:var(--bg)}
.toolbox-page main section{padding:24px 0}
#toolbox-head{background:var(--green-100);border-bottom:1px solid var(--border);padding:30px 0}
#toolbox-head h1{font-size:clamp(24px,3vw,32px);margin:0 0 10px;color:var(--green-darker);line-height:1.3}
#toolbox-head p{margin:0;max-width:760px;font-size:16px;line-height:1.7;color:var(--ink)}

/* The mount becomes a card so the page reads as one deliberate tool surface
   rather than a loose strip of fields. */
.tbx-wrap{
  max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--tb-line);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden;
}
.tbx-wrap .tb-mount{display:flex;flex-direction:column}
/* On the page the tabs sit at the top of the card and the panes flow with the
   document, so a long pane scrolls the PAGE (natural) instead of trapping the
   visitor inside a small inner scroll area. */
.tbx-wrap .tb-body{overflow:visible;flex:0 0 auto}
.tbx-note{max-width:640px;margin:14px auto 0;font-size:13px;line-height:1.7;color:var(--ink-soft)}

.tbx-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
/* Visually hidden but available to screen readers — the section needs a
   heading for structure, but the card already shows the tools' own labels. */
.tbx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
#toolbox-cta{background:var(--green-100);border-top:1px solid var(--border);text-align:center}
#toolbox-cta h2{font-size:22px;margin:0 0 8px;color:var(--green-darker)}
#toolbox-cta p{margin:0 auto 16px;max-width:620px;font-size:15px;color:var(--ink-soft)}
#toolbox-cta .tbx-actions{justify-content:center}

/* ---- the static, indexable sections on the standalone page (#168) ----
   These are PLAIN HTML in toolbox.html, not rendered by JS, because a crawler
   never executes the tool component. They exist for SEO and as a funnel into
   the site's services. */
.tbx-sec{padding:26px 0}
.tbx-sec + .tbx-sec{border-top:1px solid var(--border)}
.tbx-sec h2{font-size:clamp(20px,2.4vw,25px);margin:0 0 6px;color:var(--green-darker);line-height:1.3}
.tbx-sec h2 .tbx-sec-ic{display:inline-flex;vertical-align:-3px;margin-inline-end:8px}
.tbx-sec h2 .tbx-sec-ic svg.site-icon{width:24px;height:24px}
.tbx-sec .tbx-lede{margin:0 0 12px;max-width:720px;font-size:15.5px;line-height:1.75;color:var(--ink)}
.tbx-sec p{margin:0 0 10px;max-width:760px;font-size:15px;line-height:1.75;color:var(--ink)}
.tbx-sec ul{margin:0 0 12px;padding-inline-start:20px;max-width:760px}
.tbx-sec li{margin-bottom:6px;font-size:15px;line-height:1.7;color:var(--ink)}
.tbx-sec .tbx-mini{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-size:.9rem;font-weight:700;color:var(--green-darker);text-decoration:none;
  border-bottom:2px solid var(--green-100);padding-bottom:2px;
}
.tbx-sec .tbx-mini:hover{border-bottom-color:var(--green-dark)}
.tbx-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.tbx-jump a{
  display:inline-flex;align-items:center;min-height:38px;padding:0 13px;
  border:1px solid var(--border);border-radius:999px;background:#fff;
  font-size:.85rem;font-weight:700;color:var(--green-darker);text-decoration:none;
}
.tbx-jump a:hover{background:var(--green-50)}
/* FAQ on the page reuses <details> so no JS is needed. */
.tbx-sec details{border-bottom:1px solid var(--border);max-width:760px}
.tbx-sec details:last-of-type{border-bottom:none}
.tbx-sec summary{padding:11px 0;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer}
.tbx-sec summary::before{content:"›";display:inline-block;margin-inline-end:8px;color:var(--green-dark);font-weight:800}
.tbx-sec .tbx-faq-a{padding:0 0 12px;font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.tbx-sec .tbx-faq-a a{color:var(--green-darker);font-weight:700}

@media(max-width:760px){
  #toolbox-head{padding:22px 0}
  #toolbox-head h1{font-size:23px}
  #toolbox-head p{font-size:15px}
  .tbx-wrap{border-radius:14px}
  .tbx-actions{display:grid;grid-template-columns:1fr}
  .tbx-actions .btn{width:100%}
  .tbx-sec{padding:20px 0}
}