/* fonts live on this site (no Google Fonts round trips). Variable files: one file covers every weight. */
@font-face { font-family: "Noto Sans Hebrew"; font-weight: 400 800; font-display: swap; src: url(fonts/noto-sans-hebrew-hebrew.woff2?v=1) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Noto Sans Hebrew"; font-weight: 400 800; font-display: swap; src: url(fonts/noto-sans-hebrew-latin.woff2?v=1) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 400 800; font-display: swap; src: url(fonts/noto-sans-latin.woff2?v=1) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans JP"; font-weight: 500 800; font-display: swap; src: url(fonts/noto-sans-jp-sub.woff2?v=1) format("woff2"); unicode-range: U+3099, U+30a2, U+30b7-30b8, U+30bf-30c0, U+30c6-30c7, U+30d2-30d3, U+30d5-30d6, U+30eb, U+30fc, U+4eac, U+4eca, U+524d, U+5927, U+5b85, U+5e30, U+65e5, U+6771, U+6839, U+6b21, U+6e08, U+795d, U+7a7a, U+7bb1, U+7dda, U+90fd, U+962a, U+99c5; }

/* איפה שיר? - Tokyo station-sign look. Palette: "Japanese colors" (colorguide.org) - Mikado Red leads,
   with black and Shiro white, and Yukata Teal, Asamurasaki, Daidai, Midori Mint, Yoshino Sakura, Mizu as accents. */
:root {
  --red: #CC1426;        /* Mikado Red - the flag, the lead colour */
  --teal: #019C9D;       /* Yukata Teal */
  --purple: #956C98;     /* Asamurasaki */
  --orange: #EC7207;     /* Daidai */
  --mint: #72DD97;       /* Midori Mint */
  --sakura: #F7D0DA;     /* Yoshino Sakura */
  --mizu: #BCE2E8;       /* Mizu */
  --olive: #BCC962;      /* Showa Olive Green */
  --bg: #FFFFFF;
  --panel: #FFFFFF;
  --panel-2: #F3F3F3;   /* Shiro */
  --ink: #111111;
  --muted: #666666;
  --line: #E1E1E1;
  --hanko: var(--red);
  --select: var(--ink);
  --board: #111111;
  --amber: var(--orange);
  --amber-dim: #A8A8A8;
  --booked: var(--teal);   --booked-bg: color-mix(in srgb, var(--mint) 45%, white);
  --tobook: #B05947;       --tobook-bg: var(--sakura);   /* Anko Mochi: not the Tokyo red */
  --task: var(--purple);   --task-bg: var(--mizu);
  --water: var(--teal);
  --now: var(--red);
  --r: 16px;
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 20px -10px rgba(0,0,0,.18);
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
/* always white, also when the phone is in dark mode (Yaniv, 14.11) */
:root { color-scheme: only light; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Noto Sans Hebrew", "Noto Sans", "Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.45;
  font-variant-numeric: tabular-nums; overflow-x: hidden;
}
.jp { font-family: "Noto Sans JP", "Noto Sans", sans-serif; }
.ltr, .pair { direction: ltr; unicode-bidi: isolate; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- header ---------- */
.sign-wrap { max-width: 760px; margin: 0 auto; padding: 14px 16px 6px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px; }
.brand h1 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.brand-hanko { width: 34px; height: 34px; border-radius: 8px; transform: rotate(-6deg); }
.brand-dates { margin-inline-start: auto; color: var(--muted); font-size: 13px; font-weight: 500; }

/* station name board (駅名標) */
.sign { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.sign-top { display: flex; align-items: center; gap: 16px; padding: 16px 18px 14px; }
.sign-names { min-width: 0; }
.sign-jp { font-size: 46px; font-weight: 800; line-height: 1.05; letter-spacing: .06em; }
.sign-en { font-size: 18px; font-weight: 600; margin-top: 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sign-he { color: var(--muted); font-weight: 500; font-size: 16px; }
.sign-badge, .badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 14px; background: var(--panel);
  border: 6px solid var(--now); color: var(--ink); font-weight: 800; line-height: 1; flex: none;
  direction: ltr;
}
.b-l { font-size: 15px; }
.b-n { font-size: 21px; margin-top: 2px; }
.b-i { font-size: 24px; color: var(--muted); }
.sign-bar {
  background: var(--now); color: var(--now-on, #fff); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; padding: 8px 14px; font-weight: 600; font-size: 15px; min-height: 38px;
  transition: background-color .4s var(--ease);
}
.sign-bar .ltr { font-weight: 700; }
.sign-prev { justify-self: start; display: inline-flex; align-items: center; gap: 4px; }
.sign-next { justify-self: end; display: inline-flex; align-items: center; gap: 4px; }
.sign-mid { text-align: center; font-size: 14px; opacity: .95; }
.sign-prev .arr svg { transform: rotate(-90deg); }
.sign-next .arr svg { transform: rotate(90deg); }
.sign-hotel { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 15px; color: var(--ink); background: var(--panel-2); }
.sign-hotel > svg { font-size: 20px; color: var(--muted); }
.sign-hotel .it-act { margin-inline-start: auto; }

/* chips: time, weather, sunset */
.chips { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
@media (min-width: 640px) { .chips { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.chip-k { font-size: 26px; color: var(--now); display: flex; transition: color .4s var(--ease); }
.chip-big { font-size: 24px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.chip-big small { font-size: 13px; font-weight: 500; color: var(--muted); }
.chip-mid { font-size: 20px; }
.chip-small { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mini-btn { display: inline-flex; padding: 2px; border-radius: 6px; color: var(--ink); }
.mini-btn svg { font-size: 15px; }

/* departure board: next timed thing */
.board { margin-top: 10px; background: var(--board); color: #fff; border-top: 4px solid var(--red); border-radius: 14px; padding: 10px 14px 12px; }
.board-k { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--amber-dim); font-weight: 600; letter-spacing: .02em; }
.board-k .jp { background: var(--red); color: #fff; border-radius: 4px; padding: 0 5px; font-weight: 800; font-size: 13px; line-height: 1.4; }
.board-row { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 14px; margin-top: 6px; }
.bd-time { font-size: 30px; font-weight: 800; letter-spacing: .02em; color: var(--orange); }
.bd-what { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bd-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-cd { margin-inline-start: auto; color: var(--amber); font-size: 13px; font-weight: 600; }
.bd-name { font-weight: 700; color: #fff; font-size: 16px; }
.bd-he { color: var(--amber-dim); font-size: 13px; }
.bd-sub { font-size: 12.5px; color: var(--amber-dim); margin-top: 2px; }
.bd-live { background: var(--red); color: #fff; padding: 2px 8px; border-radius: 999px; animation: blink 1.6s ease-in-out infinite; }
.bd-none { color: var(--amber-dim); font-size: 14px; }
@keyframes blink { 50% { opacity: .55; } }

.progress { margin: 12px 2px 4px; }
.progress-text { font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.progress-text b { font-size: 17px; }
.pt-left { margin-inline-start: auto; color: var(--muted); font-size: 13px; }
.progress-track { height: 6px; background: var(--line); border-radius: 99px; margin-top: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--now); border-radius: 99px; transform-origin: right center; transform: scaleX(0); transition: transform .6s var(--ease), background-color .4s; }

/* ---------- sticky line strip ---------- */
.strip {
  position: sticky; top: 0; z-index: 500; margin-top: 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s;
}
body.scrolled .strip { border-bottom-color: var(--line); box-shadow: 0 6px 16px -14px rgba(0,0,0,.4); }
.strip-scroll { display: flex; overflow-x: auto; scrollbar-width: none; padding: 8px max(16px, calc((100vw - 760px)/2 + 16px)); scroll-behavior: smooth; }
.strip-scroll::-webkit-scrollbar { display: none; }
.st { position: relative; flex: none; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 2px; border-radius: 10px; transition: background-color .2s, padding .25s var(--ease); }
.st-week { margin-inline-start: 8px; }
.st-week::after { content: ""; position: absolute; inset-inline-start: -5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.st-line { position: absolute; top: 15px; height: 6px; inset-inline: 0; background: var(--c); }
.st:first-child .st-line { inset-inline-start: 50%; border-radius: 3px; }
.st:last-child .st-line { inset-inline-end: 50%; }
.st-week .st-line { inset-inline-start: -8px; }
.st-dot {
  position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 4px solid var(--c);
  display: grid; place-items: center; transition: transform .25s var(--ease), background-color .25s;
}
.st-done { font-size: 9px; font-weight: 800; color: var(--on); opacity: 0; transform: scale(1.8); transition: opacity .25s, transform .3s var(--ease); }
.st.past .st-dot { background: var(--c); }
.st.past .st-done { opacity: 1; transform: scale(1); }
.st.today .st-dot { transform: scale(1.25); box-shadow: 0 0 0 0 var(--c); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.st-code { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1; direction: ltr; display: flex; height: 12px; align-items: center; }
.st-code svg { font-size: 12px; }
.st-date { font-size: 13px; font-weight: 700; line-height: 1.1; }
.st.past .st-date, .st.past .st-code { color: var(--muted); }
.st.today .st-date { color: var(--ink); }
.st.today { background: color-mix(in srgb, var(--c) 14%, transparent); }
.st.selected { outline: 2px dashed var(--select); outline-offset: -2px; }
.st-wx { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 2px; height: 14px; overflow: hidden; transition: height .25s var(--ease), opacity .2s; }
.st-wx svg { font-size: 13px; }
.st-hol { position: absolute; top: -1px; inset-inline-end: 6px; z-index: 2; font-size: 9px; font-weight: 800; background: var(--hanko); color: #fff; border-radius: 4px; padding: 0 3px; line-height: 14px; }
body.scrolled .st { padding: 2px 0 0; }
body.scrolled .st-code, body.scrolled .st-wx { height: 0; opacity: 0; }
.st-code { transition: height .25s var(--ease), opacity .2s; overflow: hidden; }

/* ---------- days: a vertical line map ---------- */
.days { max-width: 760px; margin: 0 auto; padding: 10px 16px 24px; position: relative; z-index: 0; } /* one layer for all days: nothing inside (map buttons, pins) can rise above the sticky strip */
.day { display: grid; grid-template-columns: 50px minmax(0,1fr); scroll-margin-top: 110px; }
.rail { position: relative; display: flex; justify-content: center; }
.rail-line { position: absolute; top: 0; bottom: 0; width: 8px; background: var(--c); }
.day:first-child .rail-line { top: 28px; border-radius: 4px 4px 0 0; }
.day:last-child .rail-line { bottom: calc(100% - 40px); }
.badge { position: relative; z-index: 1; width: 44px; height: 44px; border-width: 5px; border-color: var(--c); border-radius: 12px; margin-top: 12px; }
.badge .b-l { font-size: 11px; }
.badge .b-n { font-size: 16px; }
.badge .b-i { font-size: 19px; }
.day.past .badge { background: var(--c); color: var(--on); }
.day.past .badge .b-i { color: var(--on); }

.card { position: relative; margin: 6px 0 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); transition: border-color .3s, box-shadow .3s, opacity .3s; }
.day.today .card { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), var(--shadow); }
.day.selected .card { outline: 2.5px dashed var(--select); outline-offset: 4px; }
.day.past .card { background: var(--panel-2); }

.day-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-align: start; position: relative; }
.dh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dh-date { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dh-date b { color: var(--ink); font-size: 15px; }
.dh-hol { background: var(--hanko); color: #fff; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 0 6px; }
.dh-today { display: none; background: var(--c); color: var(--on); font-size: 11px; font-weight: 700; border-radius: 6px; padding: 0 7px; }
.day.today .dh-today { display: inline-block; animation: pop .35s var(--ease); }
.dh-city { font-size: 18px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dh-city .jp { font-size: 16px; font-weight: 800; color: var(--c); }
.dh-from { font-size: 13px; font-weight: 500; color: var(--muted); }
.dh-wx { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; flex: none; }
.dw-ic { font-size: 22px; display: flex; color: var(--ink); }
.dw-t { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.dw-rain { display: flex; align-items: center; gap: 2px; font-size: 11.5px; color: var(--water); font-weight: 500; }
.dw-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dw-none { font-size: 12px; color: var(--muted); font-weight: 400; }
.chev { display: flex; font-size: 18px; color: var(--muted); transition: transform .3s var(--ease); }
.day.open .chev { transform: rotate(180deg); }

/* hanko stamp on finished days */
.stamp {
  display: none; flex: none; width: 38px; height: 38px;
  border: 2.5px solid var(--hanko); color: var(--hanko); border-radius: 50%; place-items: center;
  font-size: 19px; font-weight: 800; opacity: .9; transform: rotate(-14deg); pointer-events: none;
}
.day.past .stamp { display: grid; animation: stampIn .35s var(--ease) both; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-14deg) scale(1.8); } to { opacity: .9; transform: rotate(-14deg) scale(1); } }

/* collapse: animated height via grid rows */
.day-body { display: grid; grid-template-rows: minmax(0,0fr); transition: grid-template-rows .3s var(--ease); }
.day.open .day-body { grid-template-rows: minmax(0,1fr); }
.day-clip { overflow: hidden; min-height: 0; }
.day-inner { padding: 0 14px 14px; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .3s var(--ease); }
.day.open .day-inner { opacity: 1; transform: none; }
.no-anim .day-body, .no-anim .day-inner, .no-anim .chev { transition: none !important; }
.no-anim .stamp { animation: none !important; }

.row-hol, .row-note, .row-hotel, .row-wear { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 10px; border-radius: 10px; margin-top: 8px; }
.row-hol { background: color-mix(in srgb, var(--hanko) 10%, transparent); color: var(--ink); }
.hol-k { background: var(--hanko); color: #fff; border-radius: 5px; padding: 0 5px; font-weight: 800; font-size: 13px; }
.row-note { background: var(--panel-2); color: var(--muted); }
.row-hotel { border: 1px dashed var(--line); }
.row-hotel > svg, .row-note > svg, .row-wear > svg { font-size: 19px; color: var(--muted); }
.row-hotel .it-act { margin-inline-start: auto; }
.row-muted { color: var(--muted); }
.row-wear { background: var(--panel-2); align-items: flex-start; }
.wear-txt { display: flex; flex-direction: column; gap: 2px; }
.wear-src { font-size: 12px; color: var(--muted); }

.items { list-style: none; margin: 6px 0 0; padding: 0; }
.it { display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.it:last-child { border-bottom: 0; }
.it-ic { display: grid; place-items: center; font-size: 20px; color: var(--muted); }
.it-booked .it-ic { color: var(--booked); }
.it-tobook .it-ic { color: var(--tobook); }
.it-task .it-ic { color: var(--task); }
.it-pin { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--c); display: grid; place-items: center; font-size: 16px; color: var(--c); background: var(--panel); }
.it-pin b, .pin-n { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--ink); color: var(--panel); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; font-style: normal; }
.it-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.it-en { font-weight: 600; }
.it-sub { color: var(--muted); font-size: 14px; }
.it-he { font-size: 14.5px; }
.it-en + .it-he, .it-sub + .it-he { color: var(--muted); font-size: 13.5px; }
.it-tag { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.it-tag-booked { color: var(--ink); background: var(--booked-bg); }
.it-tag-tobook { color: var(--ink); background: var(--tobook-bg); }
.it-tag-task { color: var(--ink); background: var(--task-bg); }
.it-approx { font-size: 11.5px; color: var(--muted); }
.it-time { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.it-time b { font-size: 16px; }
.it-time small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.it-acts { display: flex; gap: 2px; }
.it-act { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); transition: background-color .2s, color .2s, transform .15s; }
.it-act:hover { background: var(--panel-2); color: var(--ink); }
.it-act:active { transform: scale(.92); }
.it-act svg { font-size: 18px; }

/* maps */
.map-wrap { isolation: isolate; margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.map { height: 230px; background: var(--panel-2); direction: ltr; }
.leaflet-container { font-family: "Noto Sans Hebrew", "Noto Sans", sans-serif; background: var(--panel-2); }
.leaflet-tile-pane { filter: saturate(.9); }
.leaflet-control-attribution { font-size: 9px; background: color-mix(in srgb, var(--panel) 80%, transparent) !important; color: var(--muted); }
.leaflet-control-zoom a { background: var(--panel) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.pin-wrap { background: none; border: 0; }
.pin {
  position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--c); color: var(--c);
  display: grid; place-items: center; font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.28); cursor: pointer;
  animation: pinIn .35s var(--ease) both;
}
.pin svg { stroke-width: 2; }
.pin .pin-n { inset-inline-end: auto; right: -6px; background: #111; color: #fff; }
.pin:hover { scale: 1.1; }
.pin-h { border-radius: 9px; }
.pin-h svg, .pin-ap svg { font-size: 15px; stroke-width: 2.2; }
.pin-ap { width: 34px; height: 34px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); animation: pinIn .35s var(--ease) both; }
.pin-approx { border-style: dashed; }
@keyframes pinIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.foot { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; color: var(--muted); font-size: 13px; }
.foot-small { font-size: 11.5px; }

/* ---------- motion ---------- */
.swap-out { opacity: 0; transform: translateY(3px); transition: opacity .16s, transform .16s; }
.swap-in { opacity: 0; transform: translateY(-3px); }
#sign-badge, #sign-jp, #sign-en, #daypart, #daypart-icon, #wx-icon, #wx-desc, #board-row, .dh-wx, #sunrise, #sun-icon { transition: opacity .2s, transform .25s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* entrance: short, so the page is readable right away */
body.ready .sign { animation: rise .3s var(--ease) both; }
body.ready .chip { animation: rise .3s var(--ease) both; }
body.ready .chip:nth-child(2) { animation-delay: .04s; }
body.ready .board { animation: rise .3s .08s var(--ease) both; }
body.ready .day { animation: rise .3s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 420px) {
  .sign-jp { font-size: 38px; }
  .sign-top { gap: 12px; padding: 14px 14px 12px; }
  .chip-big { font-size: 21px; }
  .chip-mid { font-size: 18px; }
  .bd-time { font-size: 24px; }
  .stamp { width: 32px; height: 32px; font-size: 16px; }
  .day { grid-template-columns: 42px minmax(0,1fr); }
  .badge { width: 38px; height: 38px; border-width: 4px; }
  .it { grid-template-columns: 26px minmax(0,1fr) auto auto; gap: 6px; }
}

/* Leaflet draws routes in its own SVG: keep the icon sizing rule away from it */
.leaflet-overlay-pane svg { width: auto; height: auto; }
.pin, .pin-ap { transition: translate .25s var(--ease), scale .15s var(--ease); }
.day.past .dh-wx { display: none; }
.map-fail { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 13px; padding: 16px; text-align: center; direction: rtl; }

/* map tooltip: black card, shown on hover and on tap */
.leaflet-tooltip.tip { background: #111; color: #fff; border: 0; border-radius: 10px; padding: 8px 10px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.45);
  white-space: normal; width: max-content; max-width: 230px; font-family: "Noto Sans Hebrew", "Noto Sans", sans-serif; font-size: 13px; line-height: 1.35; }
.leaflet-tooltip-top.tip::before { border-top-color: #111; }
.tip-in { display: flex; align-items: flex-start; gap: 8px; text-align: right; }
.tip-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: var(--on); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.tip-txt { display: flex; flex-direction: column; gap: 1px; }
.tip-en { font-weight: 700; }
.tip-sub, .tip-he { color: #BDBDBD; font-weight: 400; }
.tip-time { color: var(--orange); font-weight: 600; }

/* tooltip arrow when it flips below / beside the pin */
.leaflet-tooltip-bottom.tip::before { border-bottom-color: #111; }
.leaflet-tooltip-left.tip::before { border-left-color: #111; }
.leaflet-tooltip-right.tip::before { border-right-color: #111; }

/* colour weather icons keep their own colours */
svg.wx { stroke: none; }

/* Japan time: in the station sign, and pinned in the strip */
.sign-clock { margin-inline-start: auto; text-align: center; flex: none; padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.sc-time { display: flex; align-items: center; gap: 6px; font-size: 30px; font-weight: 800; line-height: 1; }
.sc-ic { display: flex; font-size: 26px; }
.sc-label { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.3; }
.strip { display: flex; align-items: stretch; }
.strip-clock { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding-inline: max(12px, calc((100vw - 760px) / 2 + 12px)) 10px; border-inline-end: 1px solid var(--line);
  font-weight: 800; font-size: 16px; line-height: 1.05; background: var(--bg); }
.strip-clock .sc-ic { font-size: 20px; }
.strip-clock small { font-size: 10.5px; font-weight: 500; color: var(--muted); }
body.scrolled .strip-clock { flex-direction: row; gap: 5px; }
body.scrolled .strip-clock .sc-ic { font-size: 16px; }
.strip-scroll { flex: 1; min-width: 0; padding-inline: 10px 16px !important; }
.chips { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.chip-wx .chip-k, .chip-k { font-size: 30px; }
.dw-ic { font-size: 24px; }
.st-wx svg.wx { font-size: 14px; }
@media (max-width: 420px) {
  .sc-time { font-size: 24px; }
  .sc-ic { font-size: 21px; }
  .sign-clock { padding-inline-start: 10px; }
}