/* ==========================================================================
bus.instasite.space - Design System v1
RTL-first (logical properties only), mobile-first, light + dark.
Font: Rubik (Google Fonts) - load in :
========================================================================== */
/* ---------- 1. Tokens ---------- */
:root {
color-scheme: light dark;
/* Neutrals (light) */
--bg: #f6f7f9;
--surface: #ffffff;
--surface-2: #eef1f5;
--surface-3: #e2e7ee;
--border: #d5dbe3;
--border-strong: #a9b3c0;
--text: #121a24; /* 16.6:1 on --surface */
--text-muted: #4b5767; /* 7.4:1 on --surface, 6.8:1 on --bg */
--text-subtle: #5d6979; /* 5.6:1 - min for small text */
/* Brand: "signal ink" blue - civic, trustworthy, not a bus operator colour */
--brand: #0b4f9c; /* 8.0:1 on white */
--brand-hover: #083d7a;
--brand-soft: #e6effa;
--brand-contrast: #ffffff;
--link: #0b4f9c;
/* Reliability semantics - ALWAYS paired with text/icon, never colour only */
--good: #0d6b38; /* 6.6:1 */
--good-bg: #e3f4ea;
--good-fill: #1f9d55; /* graphic fill (3:1+ vs surface) */
--ok: #7a4f00; /* 6.9:1 */
--ok-bg: #fdf1d8;
--ok-fill: #d18f00;
--poor: #a61b1b; /* 7.0:1 */
--poor-bg: #fbe6e4;
--poor-fill: #d33a2c;
--none: #4b5767; /* cancelled / no data */
--none-bg: #eceff3;
--live: #0d7a3e; /* live pulse */
--focus: #1a5fd0;
--focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--focus);
/* Operator colours for line badges (white text ≥ 4.5:1) */
--op-default: #334155;
--op-kavim: #1554b8;
--op-extra: #a3195b;
--op-afikim: #0e6b4f;
--op-dan: #1c3d8f;
--op-egged: #2f6b1f;
--op-superbus: #8a3b00;
/* Spacing (4px base) */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
--s-12: 3rem; --s-16: 4rem;
/* Radius */
--r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
/* Shadows */
--sh-1: 0 1px 2px rgb(16 24 40 / .06), 0 1px 1px rgb(16 24 40 / .04);
--sh-2: 0 4px 12px rgb(16 24 40 / .08), 0 1px 3px rgb(16 24 40 / .06);
--sh-3: 0 12px 32px rgb(16 24 40 / .12);
/* Typography */
--font: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--fs-xs: .8125rem; /* 13 */
--fs-sm: .875rem; /* 14 */
--fs-base: 1rem; /* 16 */
--fs-md: 1.125rem; /* 18 */
--fs-lg: 1.375rem; /* 22 */
--fs-xl: 1.75rem; /* 28 */
--fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
--fs-3xl: clamp(2.125rem, 1.5rem + 3.2vw, 3.5rem);
--lh-tight: 1.2; --lh: 1.6;
--container: 1200px;
--gutter: 16px;
--tap: 44px;
--header-h: 64px;
}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) {
--bg: #0d1218;
--surface: #151c24;
--surface-2: #1c252f;
--surface-3: #263240;
--border: #2c3846;
--border-strong: #46556a;
--text: #e8edf3; /* 14.2:1 */
--text-muted: #a8b4c2; /* 8.0:1 */
--text-subtle: #95a2b2; /* 6.4:1 */
--brand: #7fb2f5;
--brand-hover: #a5c9fa;
--brand-soft: #172a42;
--brand-contrast: #0d1218;
--link: #8dbbf7;
--good: #5fd08f; --good-bg: #133222; --good-fill: #3fb872;
--ok: #f3c35a; --ok-bg: #3a2c0c; --ok-fill: #e0a526;
--poor: #ff8f85; --poor-bg: #3d1716; --poor-fill: #f0645a;
--none: #a8b4c2; --none-bg: #222c37;
--live: #5fd08f;
--focus: #8dbbf7;
--sh-1: 0 1px 2px rgb(0 0 0 / .4);
--sh-2: 0 4px 14px rgb(0 0 0 / .45);
--sh-3: 0 12px 32px rgb(0 0 0 / .55);
}
}
:root[data-theme="dark"] {
--bg: #0d1218;
--surface: #151c24;
--surface-2: #1c252f;
--surface-3: #263240;
--border: #2c3846;
--border-strong: #46556a;
--text: #e8edf3; /* 14.2:1 */
--text-muted: #a8b4c2; /* 8.0:1 */
--text-subtle: #95a2b2; /* 6.4:1 */
--brand: #7fb2f5;
--brand-hover: #a5c9fa;
--brand-soft: #172a42;
--brand-contrast: #0d1218;
--link: #8dbbf7;
--good: #5fd08f; --good-bg: #133222; --good-fill: #3fb872;
--ok: #f3c35a; --ok-bg: #3a2c0c; --ok-fill: #e0a526;
--poor: #ff8f85; --poor-bg: #3d1716; --poor-fill: #f0645a;
--none: #a8b4c2; --none-bg: #222c37;
--live: #5fd08f;
--focus: #8dbbf7;
--sh-1: 0 1px 2px rgb(0 0 0 / .4);
--sh-2: 0 4px 14px rgb(0 0 0 / .45);
--sh-3: 0 12px 32px rgb(0 0 0 / .55);
}
/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: calc(var(--header-h) + 16px); }
body {
margin: 0; background: var(--bg); color: var(--text);
font: 400 var(--fs-base)/var(--lh) var(--font);
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { display: block; max-inline-size: 100%; }
h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); font-weight: 600; }
h4 { font-size: var(--fs-md); font-weight: 600; }
p { margin: 0 0 var(--s-4); }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
small, .small { font-size: var(--fs-sm); }
.muted { color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; }
hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--s-8); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }
.sr-only {
position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; inset-inline-start: var(--s-4); inset-block-start: -100px; z-index: 100;
background: var(--brand); color: var(--brand-contrast); padding: var(--s-3) var(--s-4);
border-radius: var(--r-md); font-weight: 600; text-decoration: none;
}
.skip-link:focus { inset-block-start: var(--s-3); }
/* ---------- 3. Layout ---------- */
.container { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-10); }
.section--tight { padding-block: var(--s-6); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-block-end: var(--s-5); }
.section__head h2 { margin: 0; }
.stack > * + * { margin-block-start: var(--s-6); }
.grid { display: grid; gap: var(--s-4); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.page { display: grid; gap: var(--s-8); padding-block: var(--s-6) var(--s-12); }
.page__main { min-inline-size: 0; }
.page__aside { display: none; }
@media (min-width: 640px) {
:root { --gutter: 24px; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.page { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-10); }
.page__aside { display: block; }
.page__aside .sticky { position: sticky; inset-block-start: calc(var(--header-h) + 16px); }
}
/* ---------- 4. Header ---------- */
.site-header {
position: sticky; inset-block-start: 0; z-index: 50;
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: saturate(1.4) blur(10px);
border-block-end: 1px solid var(--border);
}
.site-header__row { display: flex; align-items: center; gap: var(--s-3); min-block-size: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text); text-decoration: none; font-weight: 700; font-size: var(--fs-md); min-block-size: var(--tap); }
.logo__mark { inline-size: 32px; block-size: 32px; border-radius: 9px; background: var(--brand); color: var(--brand-contrast); display: grid; place-items: center; }
.logo__mark svg { inline-size: 20px; block-size: 20px; }
.logo span small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }
.city-switch { position: relative; }
.city-switch select {
appearance: none; min-block-size: var(--tap); padding-inline: var(--s-3) var(--s-8);
border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2);
color: var(--text); font: 500 var(--fs-sm) var(--font); cursor: pointer;
}
.city-switch::after {
content: ""; position: absolute; inset-inline-end: 14px; inset-block-start: 50%;
inline-size: 7px; block-size: 7px; border: solid var(--text-muted); border-width: 0 2px 2px 0;
transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.header-search { display: none; flex: 1; max-inline-size: 440px; margin-inline-start: auto; }
.header-nav { display: none; gap: var(--s-1); margin-inline-start: auto; }
.header-nav a { display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--s-3); border-radius: var(--r-md); color: var(--text); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); }
.header-nav a:hover { background: var(--surface-2); }
.header-nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.header-search-toggle { margin-inline-start: auto; }
.site-header__mobile-search { padding-block-end: var(--s-3); }
@media (min-width: 860px) {
.header-search { display: block; }
.header-nav { display: flex; margin-inline-start: 0; }
.header-search-toggle, .site-header__mobile-search { display: none; }
}
/* ---------- 5. Forms / Search ---------- */
.search { position: relative; display: flex; }
.search input {
inline-size: 100%; min-block-size: var(--tap); padding-inline: 44px var(--s-4);
border: 1px solid var(--border-strong); border-radius: var(--r-pill);
background: var(--surface); color: var(--text); font: 400 var(--fs-base) var(--font);
}
.search input::placeholder { color: var(--text-subtle); }
.search input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); }
.search__icon { position: absolute; inset-inline-start: 14px; inset-block-start: 50%; transform: translateY(-50%); inline-size: 20px; block-size: 20px; color: var(--text-muted); pointer-events: none; }
.search--lg input { min-block-size: 56px; font-size: var(--fs-md); padding-inline: 52px 132px; box-shadow: var(--sh-2); border-color: var(--border); }
.search--lg .search__icon { inset-inline-start: 18px; inline-size: 22px; block-size: 22px; }
.search--lg .btn { position: absolute; inset-inline-end: 6px; inset-block: 6px; min-block-size: 0; }
.field-hint { font-size: var(--fs-sm); color: var(--text-muted); margin-block-start: var(--s-2); }
/* ---------- 6. Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-block-size: var(--tap); min-inline-size: var(--tap); padding-inline: var(--s-5);
border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
font: 600 var(--fs-sm) var(--font); text-decoration: none; white-space: nowrap;
background: var(--brand); color: var(--brand-contrast);
transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--brand-hover); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--brand); }
.btn--ghost:hover { background: var(--brand-soft); }
.btn--icon { padding: 0; inline-size: var(--tap); }
.btn--sm { min-block-size: 36px; padding-inline: var(--s-3); font-size: var(--fs-xs); }
.btn--sm::after { content: ""; position: absolute; inset: -4px; } /* keeps 44px effective target */
.btn--sm { position: relative; }
.btn svg { inline-size: 18px; block-size: 18px; flex: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* ---------- 7. Line badge ---------- */
.line-badge {
--op: var(--op-default);
display: inline-flex; align-items: center; justify-content: center;
min-inline-size: 2.75rem; block-size: 2rem; padding-inline: .6rem;
border-radius: var(--r-sm); background: var(--op); color: #fff;
font: 700 var(--fs-md)/1 var(--font); letter-spacing: -.01em;
direction: ltr; unicode-bidi: isolate; text-decoration: none; flex: none;
box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18);
}
.line-badge--sm { min-inline-size: 2.25rem; block-size: 1.625rem; font-size: var(--fs-sm); padding-inline: .45rem; }
.line-badge--lg { min-inline-size: 4rem; block-size: 3rem; font-size: var(--fs-xl); border-radius: var(--r-md); }
.line-badge[data-op="kavim"] { --op: var(--op-kavim); }
.line-badge[data-op="extra"] { --op: var(--op-extra); }
.line-badge[data-op="afikim"] { --op: var(--op-afikim); }
.line-badge[data-op="dan"] { --op: var(--op-dan); }
.line-badge[data-op="egged"] { --op: var(--op-egged); }
.line-badge[data-op="superbus"] { --op: var(--op-superbus); }
a.line-badge:hover { filter: brightness(1.12); }
a.line-badge { position: relative; }
a.line-badge::after { content: ""; position: absolute; inset: -6px; } /* 44px hit area */
a.line-badge.line-badge--sm::after { inset: -9px; }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .line-badge { box-shadow: inset 0 -3px 0 rgb(0 0 0 / .25), 0 0 0 1px rgb(255 255 255 / .12); } }
:root[data-theme="dark"] .line-badge { box-shadow: inset 0 -3px 0 rgb(0 0 0 / .25), 0 0 0 1px rgb(255 255 255 / .12); }
/* ---------- 8. Chips / status ---------- */
.chip {
display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem;
border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
background: var(--surface-2); color: var(--text-muted); white-space: nowrap;
}
.chip::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; flex: none; }
.chip--plain::before { display: none; }
.chip--good { background: var(--good-bg); color: var(--good); }
.chip--ok { background: var(--ok-bg); color: var(--ok); }
.chip--poor { background: var(--poor-bg); color: var(--poor); }
.chip--none { background: var(--none-bg); color: var(--none); }
.chip--none::before { border-radius: 1px; inline-size: 10px; block-size: 2px; } /* dash = cancelled */
.chip--ok::before { border-radius: 2px; transform: rotate(45deg); } /* diamond = late */
.chip--poor::before { border-radius: 1px; } /* square = poor */
/* shapes differ per state so state is legible without colour */
/* ---------- 9. Reliability score / gauge ---------- */
.score {
--score: 0; --c: var(--text-muted); --c-fill: var(--border-strong);
display: inline-flex; align-items: center; gap: var(--s-3);
}
.score[data-level="good"] { --c: var(--good); --c-fill: var(--good-fill); }
.score[data-level="ok"] { --c: var(--ok); --c-fill: var(--ok-fill); }
.score[data-level="poor"] { --c: var(--poor); --c-fill: var(--poor-fill); }
.score__ring {
position: relative; inline-size: 72px; block-size: 72px; flex: none; border-radius: 50%;
background: conic-gradient(var(--c-fill) calc(var(--score) * 1%), var(--surface-3) 0);
display: grid; place-items: center;
}
.score__ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.score__value { position: relative; font-weight: 700; font-size: var(--fs-lg); line-height: 1; color: var(--text); }
.score__value small { font-size: .55em; font-weight: 500; color: var(--text-muted); }
.score__text { display: grid; gap: 2px; }
.score__label { font-weight: 700; color: var(--c); font-size: var(--fs-md); line-height: 1.2; }
.score__desc { font-size: var(--fs-sm); color: var(--text-muted); }
.score--lg .score__ring { inline-size: 120px; block-size: 120px; }
.score--lg .score__ring::before { inset: 12px; }
.score--lg .score__value { font-size: var(--fs-2xl); }
.score--lg .score__label { font-size: var(--fs-lg); }
.score--sm .score__ring { inline-size: 44px; block-size: 44px; }
.score--sm .score__ring::before { inset: 5px; }
.score--sm .score__value { font-size: var(--fs-sm); }
.score--sm .score__label { font-size: var(--fs-sm); }
/* compact inline meter (tables / lists) */
.meter { --v: 0; display: inline-flex; align-items: center; gap: var(--s-2); min-inline-size: 120px; }
.meter__track { flex: 1; block-size: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.meter__fill { display: block; block-size: 100%; inline-size: calc(var(--v) * 1%); border-radius: inherit; background: var(--border-strong); }
.meter[data-level="good"] .meter__fill { background: var(--good-fill); }
.meter[data-level="ok"] .meter__fill { background: var(--ok-fill); }
.meter[data-level="poor"] .meter__fill { background: var(--poor-fill); }
.meter__num { font-weight: 600; font-size: var(--fs-sm); min-inline-size: 3ch; }
/* ---------- 10. Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-1); }
.card--flush { padding: 0; overflow: hidden; }
.card__title { font-size: var(--fs-md); font-weight: 600; margin: 0 0 var(--s-3); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-block-end: 1px solid var(--border); }
.card__head h2, .card__head h3 { margin: 0; font-size: var(--fs-md); }
.card__foot { padding: var(--s-3) var(--s-5); border-block-start: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted); }
.card--link { position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card--link:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
.card--link a.stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link a.stretched { color: inherit; text-decoration: none; }
.card--link:has(a.stretched:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.card--link a.stretched:focus-visible { outline: none; }
/* City card */
.city-card { display: grid; gap: var(--s-3); }
.city-card__name { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.city-card__meta { display: flex; gap: var(--s-4); font-size: var(--fs-sm); color: var(--text-muted); }
.city-card--soon { background: var(--surface-2); box-shadow: none; border-style: dashed; }
/* Stat card */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); align-content: start; }
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.stat__value { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; }
.stat__value small { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.stat__delta { font-size: var(--fs-xs); font-weight: 600; }
.stat__delta--up { color: var(--good); }
.stat__delta--down { color: var(--poor); }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (min-width: 760px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
/* ---------- 11. Live arrivals ---------- */
.live-dot { position: relative; display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--live); flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }
.live-label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 600; color: var(--live); text-transform: none; }
.live-label time { color: var(--text-muted); font-weight: 400; }
.arrivals { list-style: none; margin: 0; padding: 0; }
.arrival {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2) var(--s-3);
padding: var(--s-3) var(--s-5); min-block-size: 64px; border-block-end: 1px solid var(--border);
}
.arrival:last-child { border-block-end: 0; }
.arrival__dest { min-inline-size: 0; }
.arrival__dest strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrival__dest span { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: 2px; }
.arrival__eta { text-align: end; line-height: 1.1; }
.arrival__eta b { display: block; font-size: var(--fs-xl); font-weight: 700; }
.arrival__eta small { font-size: var(--fs-xs); color: var(--text-muted); }
.arrival__eta--now b { color: var(--live); font-size: var(--fs-lg); }
.arrival--cancelled .arrival__eta b { text-decoration: line-through; color: var(--text-subtle); font-size: var(--fs-lg); }
.arrival__gps { display: inline-flex; align-items: center; gap: 4px; }
.arrival__gps svg { inline-size: 12px; block-size: 12px; }
/* ---------- 12. Bar chart (delay by hour) ---------- */
.chart { margin: 0; }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-xs); color: var(--text-muted); margin-block-end: var(--s-3); }
.chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart__legend i { inline-size: 12px; block-size: 12px; border-radius: 3px; display: inline-block; }
.chart__plot {
--max: 15; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
align-items: end; gap: 3px; block-size: 200px; padding-block-start: var(--s-2);
border-block-end: 1px solid var(--border-strong);
background-image: linear-gradient(to top, var(--border) 1px, transparent 1px);
background-size: 100% 25%;
direction: ltr; /* time flows left→right on the axis, matching Israeli schedule tables */
}
.chart__bar { --v: 0; position: relative; block-size: calc(var(--v) / var(--max) * 100%); min-block-size: 2px; border-radius: 4px 4px 0 0; background: var(--good-fill); }
.chart__bar[data-level="ok"] { background: var(--ok-fill); }
.chart__bar[data-level="poor"] { background: var(--poor-fill); background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgb(255 255 255 / .22) 4px 7px); } /* hatch = non-colour cue */
.chart__bar[data-empty] { background: var(--surface-3); block-size: 2px; }
.chart__bar:hover, .chart__bar:focus-visible { filter: brightness(1.1); outline-offset: 1px; }
.chart__bar .chart__tip {
position: absolute; inset-block-end: calc(100% + 6px); left: 50%; transform: translateX(-50%);
background: var(--text); color: var(--surface); font-size: var(--fs-xs); padding: 3px 7px; border-radius: var(--r-sm);
white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; direction: rtl; z-index: 2;
}
.chart__bar:hover .chart__tip, .chart__bar:focus-visible .chart__tip { opacity: 1; }
.chart__x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; direction: ltr; font-size: 11px; color: var(--text-muted); text-align: center; margin-block-start: 6px; }
.chart__x span:nth-child(even) { visibility: hidden; }
@media (min-width: 760px) { .chart__x span:nth-child(even) { visibility: visible; } }
.chart__y-note { font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: var(--s-2); }
/* ---------- 13. Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table caption { text-align: start; padding: var(--s-4) var(--s-5) 0; font-weight: 600; color: var(--text); }
.table th, .table td { padding: var(--s-3) var(--s-4); text-align: start; border-block-end: 1px solid var(--border); vertical-align: middle; }
.table thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); background: var(--surface-2); white-space: nowrap; }
.table tbody tr:last-child > * { border-block-end: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table td.num, .table th.num { text-align: end; }
.table .rank { inline-size: 2.5rem; color: var(--text-muted); font-weight: 600; }
.table a { font-weight: 500; }
.line-cell { display: flex; align-items: center; gap: var(--s-3); min-inline-size: 220px; }
.line-cell a { color: var(--text); text-decoration: none; }
.line-cell a:hover { text-decoration: underline; }
.line-cell small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
/* ---------- 14. Stops timeline ---------- */
.stops { list-style: none; margin: 0; padding: 0; counter-reset: stop; }
.stops li { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s-3); align-items: center; min-block-size: 52px; padding-inline-end: var(--s-5); }
.stops li::before {
content: ""; position: absolute; inset-inline-start: 13px; inset-block: 0; inline-size: 3px; background: var(--brand);
}
.stops li:first-child::before { inset-block-start: 50%; }
.stops li:last-child::before { inset-block-end: 50%; }
.stops__dot { position: relative; z-index: 1; justify-self: center; inline-size: 13px; block-size: 13px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }
.stops li:first-child .stops__dot, .stops li:last-child .stops__dot { inline-size: 17px; block-size: 17px; background: var(--brand); }
.stops__name { padding-block: var(--s-2); border-block-end: 1px solid var(--border); }
.stops__name a { color: var(--text); text-decoration: none; font-weight: 500; }
.stops__name a:hover { text-decoration: underline; }
.stops__name small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.stops__delay { font-size: var(--fs-sm); font-weight: 600; }
.stops__bus { position: absolute; inset-inline-start: 4px; inset-block-start: 50%; transform: translateY(-50%); z-index: 2; inline-size: 21px; block-size: 21px; border-radius: 6px; background: var(--live); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface); }
.stops__bus svg { inline-size: 13px; block-size: 13px; }
/* ---------- 15. Tabs ---------- */
.tabs { display: flex; gap: var(--s-1); border-block-end: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs [role="tab"] {
min-block-size: var(--tap); padding-inline: var(--s-4); border: 0; background: none; cursor: pointer;
font: 500 var(--fs-sm) var(--font); color: var(--text-muted); white-space: nowrap;
border-block-end: 3px solid transparent; margin-block-end: -1px;
}
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--brand); border-block-end-color: var(--brand); font-weight: 600; }
.tabs [role="tab"]:focus-visible { outline-offset: -3px; }
.tabpanel { padding-block-start: var(--s-5); }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); }
.segmented button { min-block-size: 38px; padding-inline: var(--s-4); border: 0; border-radius: var(--r-pill); background: none; font: 500 var(--fs-sm) var(--font); color: var(--text-muted); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); font-weight: 600; }
/* ---------- 16. Breadcrumbs ---------- */
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); color: var(--text-muted); }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: "‹"; margin-inline: var(--s-2); color: var(--text-subtle); } /* points "forward" in RTL */
.breadcrumbs a { color: var(--text-muted); display: inline-flex; align-items: center; min-block-size: 32px; }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 500; }
/* ---------- 17. Notice / alert ---------- */
.notice { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); font-size: var(--fs-sm); }
.notice svg { inline-size: 20px; block-size: 20px; color: var(--brand); margin-block-start: 2px; }
.notice p { margin: 0; }
.notice strong { display: block; margin-block-end: 2px; }
.notice--warn { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.notice--warn svg { color: var(--ok); }
.notice--danger { background: var(--poor-bg); border-color: color-mix(in srgb, var(--poor) 30%, transparent); }
.notice--danger svg { color: var(--poor); }
/* Answer-first summary (blog + FAQ snippets) */
.answer-box { border-inline-start: 4px solid var(--brand); background: var(--surface); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--sh-1); }
.answer-box__kicker { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); letter-spacing: .02em; margin-block-end: var(--s-2); }
.answer-box p:last-child, .answer-box ul:last-child { margin-block-end: 0; }
/* ---------- 18. Hero ---------- */
.hero { padding-block: var(--s-10) var(--s-12); background:
radial-gradient(1200px 400px at 85% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
var(--bg); border-block-end: 1px solid var(--border); }
.hero h1 { font-size: var(--fs-3xl); max-inline-size: 16ch; margin-block-end: var(--s-4); }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lede { font-size: var(--fs-md); color: var(--text-muted); max-inline-size: 52ch; margin-block-end: var(--s-6); }
.hero__search { max-inline-size: 620px; }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-block-start: var(--s-6); font-size: var(--fs-sm); color: var(--text-muted); }
.hero__proof b { color: var(--text); font-weight: 700; }
.quick-picks { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-4); align-items: center; font-size: var(--fs-sm); color: var(--text-muted); }
/* Entity header (line / stop pages) */
.entity { display: grid; gap: var(--s-4); padding-block: var(--s-5) var(--s-6); }
.entity__title { display: flex; align-items: flex-start; gap: var(--s-4); }
.entity__title h1 { font-size: var(--fs-xl); margin: 0 0 var(--s-1); }
.entity__route { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--fs-sm); }
.entity__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 860px) { .entity { grid-template-columns: 1fr auto; align-items: end; } .entity__title h1 { font-size: var(--fs-2xl); } }
/* ---------- 19. Map placeholder ---------- */
.map {
position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border);
background:
linear-gradient(90deg, color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
linear-gradient(color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
var(--surface-2);
}
@media (min-width: 760px) { .map { aspect-ratio: 16 / 8; } }
.map svg.map__route { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.map__overlay { position: absolute; inset-inline-start: var(--s-3); inset-block-start: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.map__pill { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .35rem .75rem; font-size: var(--fs-xs); font-weight: 600; box-shadow: var(--sh-2); }
.map__note { position: absolute; inset-inline-end: var(--s-3); inset-block-end: var(--s-3); font-size: 11px; color: var(--text-muted); background: color-mix(in srgb, var(--surface) 85%, transparent); padding: 2px 6px; border-radius: 4px; }
/* ---------- 20. Lines grid ---------- */
.lines-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.lines-grid a { display: grid; justify-items: center; gap: 4px; padding: var(--s-2) var(--s-1); min-block-size: 64px; border-radius: var(--r-md); text-decoration: none; color: var(--text-muted); font-size: 11px; border: 1px solid transparent; }
.lines-grid a:hover { background: var(--surface-2); border-color: var(--border); }
.lines-grid .line-badge { inline-size: 100%; }
.lines-grid .lvl { display: inline-flex; align-items: center; gap: 3px; }
.lines-grid .lvl::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.lvl--good { color: var(--good); } .lvl--ok { color: var(--ok); } .lvl--poor { color: var(--poor); }
/* Simple list rows (nearby stops, alternatives) */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-block-end: 1px solid var(--border); }
.list > li:last-child { border-block-end: 0; }
.list__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); min-block-size: 56px; text-decoration: none; color: var(--text); }
a.list__item:hover { background: var(--surface-2); }
.list__main { flex: 1; min-inline-size: 0; }
.list__main strong { display: block; font-weight: 500; }
.list__main small { color: var(--text-muted); font-size: var(--fs-xs); }
.list__end { font-size: var(--fs-sm); color: var(--text-muted); text-align: end; }
/* ---------- 21. Post cards & article ---------- */
.post-card { display: grid; gap: var(--s-2); }
.post-card__tag { font-size: var(--fs-xs); font-weight: 600; color: var(--brand); }
.post-card h3 { font-size: var(--fs-md); margin: 0; line-height: 1.35; }
.post-card p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.post-card time { font-size: var(--fs-xs); color: var(--text-subtle); }
.article { max-inline-size: 72ch; }
.article__head { margin-block-end: var(--s-6); }
.article__head h1 { font-size: var(--fs-2xl); margin-block: var(--s-3); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); color: var(--text-muted); }
.byline__avatar { inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700; }
.byline__who { display: flex; align-items: center; gap: var(--s-2); color: var(--text); font-weight: 500; }
.prose { font-size: var(--fs-md); line-height: 1.75; }
.prose h2 { font-size: var(--fs-xl); margin-block: var(--s-10) var(--s-3); }
.prose h3 { margin-block: var(--s-8) var(--s-3); }
.prose ul, .prose ol { padding-inline-start: 1.4em; margin-block: 0 var(--s-4); }
.prose li + li { margin-block-start: var(--s-2); }
.prose blockquote { margin: var(--s-6) 0; padding-inline-start: var(--s-5); border-inline-start: 3px solid var(--border-strong); color: var(--text-muted); }
.prose figure { margin: var(--s-8) 0; }
.prose figcaption { font-size: var(--fs-sm); color: var(--text-muted); margin-block-start: var(--s-2); }
.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); }
.toc h2 { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--s-2); font-weight: 600; }
.toc ol { margin: 0; padding-inline-start: 1.2em; font-size: var(--fs-sm); }
.toc a { display: inline-block; padding-block: 6px; color: var(--text); }
.toc a[aria-current="true"] { color: var(--brand); font-weight: 600; }
/* ---------- 22. FAQ ---------- */
.faq { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.faq details + details { border-block-start: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-block-size: 56px; padding: var(--s-3) var(--s-5); cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4em; font-weight: 400; color: var(--text-muted); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline-offset: -3px; }
.faq .faq__a { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); }
.faq .faq__a p:last-child { margin: 0; }
/* ---------- 23. Ad slot ---------- */
/* Space is ALWAYS reserved (min-block-size) so filling/no-fill never shifts layout (CLS = 0). */
.ad-slot {
position: relative; display: grid; place-items: center; inline-size: 100%;
border: 1px dashed var(--border-strong); border-radius: var(--r-md);
background: var(--surface-2); color: var(--text-subtle); overflow: hidden; contain: layout paint;
padding-block-start: 22px;
}
.ad-slot::before {
content: "פרסומת"; position: absolute; inset-block-start: 4px; inset-inline-start: 10px;
font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: .02em;
}
.ad-slot--inline { min-block-size: 142px; } /* 120px creative + label */
.ad-slot--sidebar { min-block-size: 272px; } /* 300×250 */
.ad-slot--article { min-block-size: 302px; margin-block: var(--s-8); } /* 300×250 / 336×280 */
@media (min-width: 760px) { .ad-slot--inline { min-block-size: 112px; } } /* 728×90 */
.ad-slot__ph { font-size: var(--fs-xs); }
.ad-slot > ins, .ad-slot > iframe { display: block; max-inline-size: 100%; }
/* ---------- 24. Footer ---------- */
.site-footer { background: var(--surface); border-block-start: 1px solid var(--border); padding-block: var(--s-10) var(--s-6); font-size: var(--fs-sm); color: var(--text-muted); }
.site-footer__grid { display: grid; gap: var(--s-8); grid-template-columns: 1fr 1fr; }
.site-footer__grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .site-footer__grid > :first-child { grid-column: auto; } }
.site-footer h2 { font-size: var(--fs-sm); color: var(--text); margin-block-end: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-block-size: 36px; color: var(--text-muted); text-decoration: none; }
.site-footer li a:hover { color: var(--text); text-decoration: underline; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-block-start: var(--s-8); padding-block-start: var(--s-5); border-block-start: 1px solid var(--border); font-size: var(--fs-xs); }
/* ---------- 25. Utilities ---------- */
.mt-0 { margin-block-start: 0; } .mb-0 { margin-block-end: 0; }
.mt-4 { margin-block-start: var(--s-4); } .mt-6 { margin-block-start: var(--s-6); } .mt-8 { margin-block-start: var(--s-8); }
.mb-4 { margin-block-end: var(--s-4); }
.text-good { color: var(--good); } .text-ok { color: var(--ok); } .text-poor { color: var(--poor); }
.kicker { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); letter-spacing: .02em; margin-block-end: var(--s-2); display: block; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
/* ---------- 26. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.live-dot::after { display: none; }
}
@media (forced-colors: active) {
.chip::before, .live-dot, .chart__bar, .meter__fill { forced-color-adjust: none; }
.line-badge { border: 1px solid CanvasText; }
}
@media print {
.site-header, .ad-slot, .page__aside, .site-footer { display: none !important; }
body { background: #fff; color: #000; }
}
/* ---------- site additions on top of the design system ---------- */
.lead { font-size: var(--fs-md); color: var(--text-muted); max-inline-size: 60ch; margin-block-end: var(--s-6); }
.hero .search { max-inline-size: 640px; }
.ad-card { display: flex; gap: var(--s-3); align-items: center; inline-size: 100%; block-size: 100%; padding: var(--s-3); color: inherit; text-decoration: none; }
.ad-card img { inline-size: 72px; block-size: 72px; object-fit: cover; border-radius: var(--r-md); flex: none; }
.ad-card span { display: grid; gap: var(--s-1); }
.ad-card small { color: var(--text-muted); }
.ad-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.city-card { text-decoration: none; color: inherit; }
.city-card strong { font-size: var(--fs-lg); }
.post-card { text-decoration: none; color: inherit; display: grid; gap: var(--s-2); }
.ac-list { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-2); list-style: none; margin: 0; padding: var(--s-1); max-block-size: 60vh; overflow: auto; }
.ac-list a { display: grid; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: inherit; text-decoration: none; min-block-size: 44px; align-content: center; }
.ac-list a small { color: var(--text-muted); }
.ac-list a:hover, .ac-list a[aria-selected="true"] { background: var(--brand-soft); }
.search { position: relative; }
.saved-stops { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-4); }
.prose h2 { margin-block-start: var(--s-8); }
textarea { font: inherit; padding: var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
/* stop page — line cards (next + after) */
.next-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.next-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-1, none); }
.next-card.is-mine { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.next-card__head { display: flex; align-items: center; gap: var(--s-3); }
.next-card__dest { flex: 1; font-weight: 600; font-size: var(--fs-md); color: var(--text); text-decoration: none; min-inline-size: 0; overflow-wrap: anywhere; }
.next-card__dest:hover { text-decoration: underline; }
.next-card__star { inline-size: 48px; block-size: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 1.4rem; color: var(--brand); cursor: pointer; flex: none; }
.next-card__star[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); }
.next-card__status { display: inline-flex; margin: var(--s-3) 0 var(--s-2); white-space: normal; }
.next-card__when { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.next-card__when b { font-size: var(--fs-2xl, 1.75rem); line-height: 1.15; }
.next-card__when .num { font-size: var(--fs-md); color: var(--text-muted); }
.next-card__after { margin: var(--s-2) 0 0; color: var(--text-muted); }
.next-empty { padding: var(--s-4); background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border); }
.next-card [hidden], .next-card[hidden] { display: none !important; }
/* frequency */
.freq { display: flex; flex-wrap: wrap; gap: var(--s-2); direction: ltr; margin: var(--s-3) 0; }
.freq__chip { min-inline-size: 64px; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); font-size: var(--fs-sm); direction: rtl; }
.freq__chip[data-t="busy"] { background: var(--brand); color: var(--brand-contrast); }
.freq__chip[data-t="normal"] { background: #c9dbf3; color: var(--text); }
.freq__chip[data-t="sparse"] { background: var(--brand-soft); color: var(--text); }
.freq__sum { font-size: var(--fs-md); }
.freq-card { padding: var(--s-3) var(--s-4); margin-block-end: var(--s-2); }
.freq-card summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); list-style: none; }
.freq-card summary::-webkit-details-marker { display: none; }
.freq-card summary::after { content: "הצגת התדירות ▾"; color: var(--brand); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.freq-card[open] summary::after { content: "הסתרה ▴"; }
/* ad label is real HTML text (not only CSS) so every reader/tool sees "פרסומת" */
.ad-slot::before { content: none !important; }
.ad-slot__label { position: absolute; inset-block-start: 4px; inset-inline-start: 10px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
/* line badges: always white on the badge colour, even inside links/tables (contrast ≥ 4.5:1) */
.line-badge, a.line-badge, .line-badge:visited, .line-badge bdi, .line-cell a.line-badge, td .line-badge { color: #fff !important; }
/* accessibility menu */
.a11y-btn { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 60; inline-size: 56px; block-size: 56px; border-radius: 50%; border: 3px solid #fff; background: #0b4f9c; color: #fff; display: grid; place-items: center; box-shadow: 0 3px 12px rgb(0 0 0 / .3); cursor: pointer; }
.a11y-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.a11y-panel { position: fixed; inset-block-end: 84px; inset-inline-end: 16px; z-index: 61; inline-size: min(300px, calc(100vw - 32px)); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 8px 28px rgb(0 0 0 / .25); padding: var(--s-4); display: grid; gap: 8px; }
.a11y-panel[hidden] { display: none; }
.a11y-panel__head { display: flex; justify-content: space-between; align-items: center; }
.a11y-panel__head h2 { margin: 0; font-size: 1.15rem; }
.a11y-close { inline-size: 44px; block-size: 44px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--text); }
.a11y-row { display: flex; align-items: center; gap: 8px; } .a11y-row span { flex: 1; font-weight: 600; }
.a11y-opt { min-block-size: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.a11y-opt[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.a11y-reset { background: none; }
.a11y-link { text-align: center; padding-block: 6px; }
/* consent bar never covers the ♿ button (bottom inline-end corner) */
.consent { inset-inline-start: 12px !important; inset-inline-end: 84px !important; margin-inline: 0 !important; max-inline-size: none !important; }
@media (max-width: 859px) { .site-header .logo small { display: none !important; } }
html[data-a11y-contrast] { --bg: #fff; --surface: #fff; --surface-2: #fff; --text: #000; --text-muted: #000; --text-subtle: #000; --border: #000; --brand: #00308a; --link: #00308a; }
html[data-a11y-contrast] body { background: #fff; color: #000; }
html[data-a11y-contrast] .card, html[data-a11y-contrast] .next-card { border: 2px solid #000 !important; box-shadow: none !important; }
html[data-a11y-links] a { text-decoration: underline !important; text-decoration-thickness: 2px !important; background: #fff59d; color: #00308a !important; }
html[data-a11y-readable] body, html[data-a11y-readable] button, html[data-a11y-readable] input { font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing: .02em; word-spacing: .08em; line-height: 1.7; }
html[data-a11y-nomotion] *, html[data-a11y-nomotion] *::before, html[data-a11y-nomotion] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* help page */
.help-steps { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.help-step { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4); }
.help-step__n { flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; }
.help-step h3 { margin: 0 0 var(--s-2); }
.help-step p, .help-step ul { margin-block: 0 var(--s-2); }
/* live map */
.live-map { inline-size: 100%; aspect-ratio: 4 / 3; max-block-size: 70vh; border-radius: var(--r-lg); overflow: hidden; margin-block: var(--s-3); border: 1px solid var(--border); }
.live-map__controls { margin-block-start: var(--s-3); }
.live-map__controls .btn { min-block-size: 48px; min-inline-size: 48px; }
.bus-marker { display: flex; align-items: center; gap: 2px; background: var(--brand); color: #fff; border: 2px solid #fff; border-radius: 999px; padding: 2px 8px 2px 6px; font: 700 13px/1.2 Rubik, system-ui, sans-serif; box-shadow: 0 1px 4px rgb(0 0 0 / .35); }
.bus-marker.is-stale { background: #6b7280; }
.map-legend { display: flex; gap: 8px; margin-block: var(--s-3); overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.map-dot { flex: none; scroll-snap-align: start; min-inline-size: 44px; block-size: 44px; padding: 0 10px; border-radius: 22px; border: 0; background: var(--c, var(--brand)); color: #fff; font: 700 15px/1 Rubik, system-ui, sans-serif; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.map-dot[aria-pressed="true"] { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c, var(--brand)); }
.map-dot--all { background: var(--surface); color: var(--text); border: 1px solid var(--border); font-weight: 600; padding: 0 14px; }
.map-dot--all[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--brand); background: var(--brand-soft); }
@media (prefers-reduced-motion: reduce) { .map-dot { transition: none; } }
.live-map { position: relative; }
@media (max-width: 859px) { .live-map { aspect-ratio: auto; block-size: 62vh; min-block-size: 360px; } }
.map-back { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 2; min-block-size: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 14px Rubik, system-ui, sans-serif; box-shadow: 0 2px 8px rgb(0 0 0 / .15); cursor: pointer; }
.live-map__controls { display: none !important; }
.map-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 0 var(--s-3); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.map-chip i { inline-size: 14px; block-size: 14px; border-radius: 50%; flex: none; }
.map-chip small { font-weight: 400; color: var(--text-muted); max-inline-size: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-chip[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); background: var(--brand-soft); }
.bus-marker__arrow { display: inline-block; font-size: 11px; }
/* big-text view */
html[data-big] { font-size: 125%; }
html[data-big] .next-card { box-shadow: none; border-width: 2px; }
html[data-big] .next-card__when b { font-size: clamp(2.6rem, 11vw, 4.2rem); }
html[data-big] .ad-slot, html[data-big] .page__aside { display: none; }
html[data-big] .next-card__star, html[data-big] .btn { min-block-size: 56px; }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) .freq__chip[data-t="normal"] { background: #1f3b63; color: var(--text); } }
:root[data-theme="dark"] .freq__chip[data-t="normal"] { background: #1f3b63; color: var(--text); }
.consent { position: fixed; inset-inline: var(--s-3); inset-block-end: var(--s-3); z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; max-inline-size: 760px; margin-inline: auto; }
.consent p { margin: 0; flex: 1 1 260px; }
.consent__btns { display: flex; gap: var(--s-2); }
/* entity header: title gets the full width; direction tabs go on their own row below it */
.entity, .entity[class] { grid-template-columns: 1fr !important; align-items: start !important; gap: var(--s-3); }
.dir-tabs .segmented a { align-self: start; block-size: auto; white-space: normal; text-align: start; }
.entity__title h1 { max-inline-size: none; }
.dir-tabs .segmented { display: flex; flex-wrap: wrap; gap: var(--s-2); background: none; padding: 0; border: 0; }
.dir-tabs .segmented a { flex: 0 1 auto; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; min-block-size: 44px; }
/* mobile: nothing may push the page sideways */
.entity { flex-wrap: wrap; }
.entity__title { min-inline-size: 0; }
.entity__title h1 { overflow-wrap: anywhere; }
.segmented { flex-wrap: wrap; }
.lines-grid__item { min-inline-size: 0; }
.lines-grid__item > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; }
.line-cell > span:last-child, .arrival__dest, .list__main { min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 859px) {
.site-header__row { gap: var(--s-2); }
.logo small { display: none; }
.city-switch select { max-inline-size: 7.5rem; }
}
@media (max-width: 380px) { .city-switch { display: none; } }
.segmented a[aria-pressed="true"] { background: var(--brand); color: var(--brand-contrast); }
/* trains */
.train-form { display: grid; gap: var(--s-3); }
.train-form__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-2) var(--s-3); align-items: end; }
.train-form__row:has(> :only-of-type) { grid-template-columns: 1fr; }
.train-form label { display: block; font-weight: 600; margin-block-end: 4px; }
.train-form select { inline-size: 100%; min-block-size: 44px; font-size: 1rem; padding-inline: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
.train-form__swap { min-block-size: 44px; min-inline-size: 44px; font-size: 1.2rem; }
@media (max-width: 559px) { .train-form__row { grid-template-columns: 1fr; } .train-form__swap { justify-self: center; } }
.train-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.train-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.train-row__time { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.train-row__time small { font-size: .8rem; font-weight: 500; color: var(--text-muted); }
.train-row__main { display: grid; gap: 2px; min-inline-size: 0; }
.train-row__main small, .train-row__main summary { color: var(--text-muted); font-size: .875rem; }
.train-row__rel { font-weight: 600; white-space: nowrap; }
@media (max-width: 479px) { .train-row { grid-template-columns: 1fr auto; } .train-row__main { grid-column: 1 / -1; grid-row: 2; } }
.chip-list, .pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); max-inline-size: 100%; }
.pill-list > li { min-inline-size: 0; max-inline-size: 100%; }
.pill-list .pill { white-space: normal; }
.route-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); }
.route-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-decoration: none; min-inline-size: 0; }
.route-card:hover, .route-card:focus-visible { border-color: var(--brand, #0b4f9c); }
.route-card__icon { font-size: 1.5rem; flex: none; }
.route-card__text { display: grid; gap: 2px; min-inline-size: 0; }
.route-card__text strong { font-size: 1rem; line-height: 1.3; }
.route-card__text small { color: var(--text-muted); }
@media (max-width: 479px) { .route-cards { grid-template-columns: 1fr; } }
/* UI/UX pass (bus-design/uiux-rail.md): rows like bus arrivals, compact GPS legend, tiles as rows on phones */
.train-row { grid-template-columns: 4.25rem minmax(0, 1fr) auto; min-block-size: 64px; }
.train-row__time { text-align: center; direction: ltr; unicode-bidi: isolate; display: grid; justify-items: center; line-height: 1.15; font-size: 1.2rem; }
.train-row__time small { display: block; }
.train-row__main b { overflow-wrap: anywhere; }
.train-row__main .chip { justify-self: start; margin-block: 2px; font-size: .8rem; }
.train-row__main > small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.train-row__rel { font-size: 1rem; text-align: end; }
@media (max-width: 479px) { .train-row { grid-template-columns: 3.9rem minmax(0, 1fr); } .train-row__main { grid-column: auto; grid-row: auto; } .train-row__rel { grid-column: 2; text-align: start; font-size: .9rem; color: var(--text-muted); } }
.dep-legend { font-size: .85rem; color: var(--text-muted); margin: 0; }
.dep-legend a { color: inherit; }
@media (max-width: 599px) {
.mode-tiles { grid-template-columns: 1fr; gap: var(--s-2); }
.mode-tile { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: start; align-items: center; column-gap: var(--s-3); padding: var(--s-3) var(--s-4); min-block-size: 64px; }
.mode-tile span { grid-row: span 3; font-size: 1.75rem; }
}
/* every top-level block on every page gets breathing room (home/city pages had none → cards glued together) */
#main > * + *, .page__main > * + * { margin-block-start: var(--s-6); }
#main > .breadcrumbs + * { margin-block-start: var(--s-3); }
#main { padding-block-end: var(--s-10, 64px); }
body.is-stale [data-cards] .next-card__when, body.is-stale [data-cards] .next-card__after, body.is-stale [data-cards] .next-card__status { opacity: .35; }
.plan-form { gap: var(--s-2); }
.plan-field label { display: block; font-weight: 600; margin-block-end: 4px; }
.plan-form .search { position: relative; }
.plan-near { margin: 0; }
.plan-row .line-badge { margin-inline-end: 6px; vertical-align: middle; }
.plan-row .train-row__main small + small { display: block; }
.next-card__bell { background: none; border: 1px solid var(--border); border-radius: 999px; min-inline-size: 40px; min-block-size: 40px; padding-inline: 12px; font-size: .95rem; font-weight: 600; cursor: pointer; color: var(--text); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.next-card__bell:hover, .next-card__bell:focus-visible { border-color: var(--brand, #0b4f9c); }
@media (max-width: 340px) { .next-card__bell-txt { display: none; } }
@media (max-width: 479px) { .next-card__bell { padding-inline: 10px; font-size: .85rem; } }
.next-card { position: relative; }
.bell-hint { position: relative; margin-block-start: var(--s-3); display: grid; gap: 6px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--brand, #0b4f9c); color: #fff; }
.bell-hint::before { content: ""; position: absolute; inset-block-start: -8px; inset-inline-end: 70px; border: 8px solid transparent; border-block-end-color: var(--brand, #0b4f9c); border-block-start: 0; }
.bell-hint .btn { justify-self: start; background: #fff; color: #0b4f9c; }
.remind-menu__when { border: 0; padding: 0; margin: var(--s-3) 0; display: grid; gap: var(--s-2); }
.remind-menu__when label { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.remind-menu__when input { inline-size: 18px; block-size: 18px; }
.remind-list { padding-inline-start: 1.2em; display: grid; gap: 6px; }
.linklike { background: none; border: 0; padding: 0; color: var(--link, #8ab4f8); text-decoration: underline; cursor: pointer; font: inherit; }
.remind-menu { position: absolute; inset-inline: 16px; max-inline-size: 420px; margin-inline: auto; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: var(--s-4); }
.remind-menu .cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-3); }
/* .notice is an icon+text grid; notices that are plain text (no svg icon) must flow as one paragraph */
.notice:not(:has(> svg)) { display: block; line-height: 1.6; }
.install-hint { margin-block-start: var(--s-3); }
.next-dep { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2, rgba(127,127,127,.08)); margin-block-end: var(--s-4); }
.next-dep__main { font-size: 1.2rem; font-weight: 600; margin: 0; }
.next-dep__main b { font-size: 1.45rem; }
.next-dep__rel { font-weight: 500; color: var(--text-muted); }
.next-dep__after { margin: 4px 0 0; }
/* ads never touch neighbouring blocks, on any page (home, city, line, stop, rail) */
.ad-slot { margin-block: var(--s-8) !important; }
.next-card__bus { margin: 2px 0 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.pill { text-decoration: none; min-block-size: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500; }
.pill:hover, .pill:focus-visible { border-color: var(--brand, #0b4f9c); }
.pill small { color: var(--text-muted); font-weight: 400; }
.train-page > h1 + * { margin-block-start: var(--s-3); }
.train-page section > h2, .train-page section > h3 { margin-block-end: var(--s-3); }
.train-page .ad-slot { margin-block: var(--s-6); }
.train-city { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
[data-my-trip] { margin-block: var(--s-3); }
.mode-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-block: var(--s-4) var(--s-6); }
.mode-tile { display: grid; justify-items: center; gap: 2px; padding: var(--s-4) var(--s-2); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none; text-align: center; }
.mode-tile span { font-size: 2rem; line-height: 1.1; }
.mode-tile small { color: var(--text-muted); font-size: .8rem; }
.mode-tile:hover, .mode-tile:focus-visible { border-color: var(--brand, #0b4f9c); }
.tram-stops { columns: 2 220px; margin: var(--s-3) 0 0; padding-inline-start: 1.4em; }
.tram-stops li { break-inside: avoid; padding-block: 3px; }
/* mobile header: logo + city + theme + search must fit 360px */
@media (max-width: 559px) { .site-header__row { gap: 6px !important; } .site-header__row > * { min-inline-size: 0; } .city-switch select { max-inline-size: 118px; } .theme-toggle, .header-search-toggle { flex: none; } }
/* light/dark toggle: show the icon of the mode you'd switch TO */
.theme-toggle { font-size: 1.15rem; line-height: 1; }
.theme-toggle__sun { display: none; }
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]):not([data-theme="light"]) .theme-toggle__sun { display: inline; }:root:not([data-theme="light"]):not([data-theme="light"]) .theme-toggle__moon { display: none; } }
:root[data-theme="dark"]:not([data-theme="light"]) .theme-toggle__sun { display: inline; }:root[data-theme="dark"]:not([data-theme="light"]) .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: inline; } :root[data-theme="dark"] .theme-toggle__moon { display: none; }
.aside-m { margin-block: var(--s-4, 16px); } @media (min-width: 1000px) { .aside-m { display: none; } } html[data-big] .aside-m { display: none; }
.aside-m .ad-slot--sidebar { min-block-size: 0; }
.promo-band{display:grid;gap:16px;margin:28px 0 8px;grid-template-columns:minmax(0,1fr)}@media(min-width:900px){.promo-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
:root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }
/* ==========================================================================
road.instasite.space - append AFTER design-system.css (prefix rd-)
Re-points --brand to "petrol" so every bus component (btn, links, header,
search, focus) adopts the road identity automatically.
========================================================================== */
:root {
--brand: #0f5f6b; --brand-hover: #0c4d57; --brand-soft: #e3f1f3; /* 7.3:1 on white */
--brand-contrast: #ffffff; --link: #0f5f6b; --focus: #0f5f6b;
/* Severity: ordered by lightness (darkest = most severe), not by hue alone.
Fill = graphics (>=3:1 on --surface), ink = text (>=4.5:1 on --surface/--bg). */
--rd-fatal: #5b1a3a; --rd-fatal-ink: #5b1a3a; --rd-fatal-bg: #f6e8ee; /* 12.7 / 11.9 */
--rd-severe: #c2410c; --rd-severe-ink: #a83a0c; --rd-severe-bg: #fbeee6; /* fill 5.2, ink 6.4 */
--rd-light: #b98a2e; --rd-light-ink: #7a5600; --rd-light-bg: #f8f1e1; /* fill 3.1, ink 6.7 */
--rd-heat-lo: #eef1f5; --rd-heat-hi: #0c4d57; /* sequential, single hue */
--rd-bar: #2b6f7a; /* neutral data bar, 5.7:1 */
--rd-fs-stat: clamp(2rem, 1.55rem + 1.9vw, 2.75rem);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--brand: #6cc6d2; --brand-hover: #8fd6df; --brand-soft: #12303a; --brand-contrast: #0d1218;
--link: #8fd6df; --focus: #8fd6df;
/* dark: brightest = most severe (same rule: most contrast vs background) */
--rd-fatal: #ffa8c8; --rd-fatal-ink: #ffa8c8; --rd-fatal-bg: #3a1a28; /* 9.6 */
--rd-severe: #e8743b; --rd-severe-ink: #f08a4b; --rd-severe-bg: #3a2216; /* 5.7 / 6.9 */
--rd-light: #8f7a4a; --rd-light-ink: #b0904a; --rd-light-bg: #2e2818; /* 4.1 / 5.7 */
--rd-heat-lo: #1c252f; --rd-heat-hi: #6cc6d2; --rd-bar: #3fa7b4;
}
}
:root[data-theme="dark"] {
--brand: #6cc6d2; --brand-hover: #8fd6df; --brand-soft: #12303a; --brand-contrast: #0d1218;
--link: #8fd6df; --focus: #8fd6df;
--rd-fatal: #ffa8c8; --rd-fatal-ink: #ffa8c8; --rd-fatal-bg: #3a1a28;
--rd-severe: #e8743b; --rd-severe-ink: #f08a4b; --rd-severe-bg: #3a2216;
--rd-light: #8f7a4a; --rd-light-ink: #b0904a; --rd-light-bg: #2e2818;
--rd-heat-lo: #1c252f; --rd-heat-hi: #6cc6d2; --rd-bar: #3fa7b4;
}
/* ---------- numbers ---------- */
.rd-num { font-variant-numeric: tabular-nums lining-nums; direction: ltr; unicode-bidi: isolate; font-feature-settings: "tnum" 1, "lnum" 1; }
/* ---------- severity chip + legend (colour ALWAYS paired with a word) ---------- */
.rd-sev { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.rd-sev::before { content: ""; inline-size: 8px; block-size: 8px; background: currentColor; flex: none; }
.rd-sev--fatal { color: var(--rd-fatal-ink); background: var(--rd-fatal-bg); }
.rd-sev--fatal::before { border-radius: 1px; } /* square */
.rd-sev--severe { color: var(--rd-severe-ink); background: var(--rd-severe-bg); }
.rd-sev--severe::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* triangle */
.rd-sev--light { color: var(--rd-light-ink); background: var(--rd-light-bg); }
.rd-sev--light::before { border-radius: 50%; } /* circle */
.rd-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: 0 0 var(--s-3); padding: 0; font-size: var(--fs-sm); color: var(--text-muted); }
/* ---------- stat tile ---------- */
.rd-stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rd-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); display: grid; gap: var(--s-1); align-content: start; }
.rd-stat__label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 500; }
.rd-stat__value { font-size: var(--rd-fs-stat); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--text); }
.rd-stat__unit { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); margin-inline-start: var(--s-1); }
.rd-stat__delta { font-size: var(--fs-sm); color: var(--text-muted); } /* neutral wording: "גבוה ב־12% מ־2024" */
.rd-stat--fatal { border-block-start: 4px solid var(--rd-fatal); }
.rd-stat--severe { border-block-start: 4px solid var(--rd-severe); }
.rd-stat--light { border-block-start: 4px solid var(--rd-light); }
/* ---------- ranked junction list ---------- */
.rd-rank { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.rd-rank__row + .rd-rank__row { border-block-start: 1px solid var(--border); }
.rd-rank__link { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-areas: "n name count" "n bar bar"; gap: var(--s-1) var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); min-block-size: 64px; color: inherit; text-decoration: none; }
.rd-rank__link:hover { background: var(--surface-2); }
.rd-rank__link:focus-visible { outline-offset: -3px; }
.rd-rank__n { grid-area: n; align-self: start; inline-size: 2rem; block-size: 2rem; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); }
.rd-rank__row:nth-child(-n+3) .rd-rank__n { background: var(--brand-soft); color: var(--brand); }
.rd-rank__name { grid-area: name; font-weight: 600; overflow-wrap: anywhere; }
.rd-rank__name small { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); }
.rd-rank__count { grid-area: count; text-align: end; font-weight: 700; font-size: var(--fs-md); }
.rd-rank__count small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }
.rd-rank .rd-sevbar { grid-area: bar; }
/* severity mini-bar:
Optional --w (0-1) on the wrapper scales its length to this row's share of the max. */
.rd-sevbar { display: flex; gap: 2px; block-size: 8px; inline-size: calc(var(--w, 1) * 100%); min-inline-size: 12px; }
.rd-sevbar > i { min-inline-size: 3px; border-radius: 2px; } /* server omits zero segments */
.rd-sevbar__f { background: var(--rd-fatal); }
.rd-sevbar__s { background: var(--rd-severe); }
.rd-sevbar__l { background: var(--rd-light); }
/* ---------- horizontal bar chart (pure CSS) ---------- */
/* */
.rd-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.rd-bars > li { display: grid; grid-template-columns: minmax(6rem, 30%) minmax(0, 1fr) 4.5rem; align-items: center; gap: var(--s-3); min-block-size: 32px; font-size: var(--fs-sm); }
.rd-bars__label { overflow-wrap: anywhere; color: var(--text); }
.rd-bars__track { block-size: 14px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.rd-bars__fill { display: block; block-size: 100%; inline-size: calc(var(--v, 0) * 100%); min-inline-size: 2px; background: var(--rd-bar); border-radius: 3px; }
.rd-bars__val { text-align: end; font-weight: 600; }
.rd-bars > li.is-hl .rd-bars__fill { background: var(--brand); }
.rd-bars > li.is-hl .rd-bars__label { font-weight: 600; }
@media (max-width: 479px) {
.rd-bars > li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; row-gap: var(--s-1); }
.rd-bars__label { grid-area: l; } .rd-bars__val { grid-area: v; } .rd-bars__track { grid-area: t; }
}
/* ---------- hour x weekday heat grid ---------- */
/* Time axis runs LTR (00 -> 23) like the bus .freq chips. Each cell: ; --v = count / max (0-1). Provide a sr-only twin for AT. */
.rd-heat { overflow-x: auto; overscroll-behavior-x: contain; padding-block-end: var(--s-2); }
.rd-heat__grid { direction: ltr; display: grid; grid-template-columns: 2.25rem repeat(24, minmax(11px, 1fr)); gap: 2px; min-inline-size: 330px; font-size: 11px; color: var(--text-muted); }
.rd-heat__day { direction: rtl; text-align: right; padding-inline-end: 4px; align-self: center; font-weight: 500; }
.rd-heat__hr { text-align: center; }
.rd-heat__c { aspect-ratio: 1; min-block-size: 11px; border-radius: 2px;
background: color-mix(in oklab, var(--rd-heat-hi) calc(8% + var(--v, 0) * 92%), var(--rd-heat-lo)); }
.rd-heat__c.is-zero { background: var(--rd-heat-lo); box-shadow: inset 0 0 0 1px var(--border); }
.rd-heat__c:hover { outline: 2px solid var(--text); outline-offset: 0; }
.rd-heat__scale { direction: ltr; display: flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-2); font-size: var(--fs-xs); color: var(--text-muted); }
.rd-heat__scale > i { inline-size: 120px; block-size: 8px; border-radius: 2px; background: linear-gradient(to right, color-mix(in oklab, var(--rd-heat-hi) 8%, var(--rd-heat-lo)), var(--rd-heat-hi)); }
/* 057 תאונות
*/
/* ---------- source / as-of footnote ---------- */
.rd-source { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-block-start: var(--s-3); padding-block-start: var(--s-2); border-block-start: 1px dashed var(--border); font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.5; }
.rd-source a { color: inherit; }
.rd-source time { font-weight: 600; color: var(--text-muted); }
.rd-source__note { flex-basis: 100%; }
/* ---------- city search (wraps bus .search + .ac-list) ---------- */
.rd-search { max-inline-size: 640px; }
.rd-search .search input { border-color: var(--border-strong); }
.rd-search__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-3); }
.rd-search__chips a { display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--fs-sm); position: relative; }
.rd-search__chips a::after { content: ""; position: absolute; inset: -4px; }
.rd-search__chips a:hover { border-color: var(--brand); color: var(--brand); }
.rd-search .ac-list mark { background: none; color: inherit; font-weight: 700; }
/* ---------- breadcrumb ---------- */
.rd-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); list-style: none; margin: 0 0 var(--s-3); padding: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.rd-crumbs li + li::before { content: "‹"; content: "‹" / ""; margin-inline-end: var(--s-1); color: var(--text-subtle); }
.rd-crumbs a { color: var(--text-muted); text-decoration: none; display: inline-flex; min-block-size: 32px; align-items: center; }
.rd-crumbs a:hover { color: var(--link); text-decoration: underline; }
.rd-crumbs [aria-current="page"] { color: var(--text); font-weight: 500; }
/* ---------- map container ---------- */
.rd-map { position: relative; aspect-ratio: 4 / 3; max-block-size: 70vh; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; isolation: isolate; }
@media (min-width: 860px) { .rd-map { aspect-ratio: 16 / 9; } }
.rd-map > .rd-map__canvas { position: absolute; inset: 0; }
.rd-map__fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-6); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.rd-map[data-state="loading"] .rd-map__fallback { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: rd-shimmer 1.4s linear infinite; }
.rd-map[data-state="ready"] .rd-map__fallback { display: none; }
.rd-map__legend { position: absolute; inset-block-end: var(--s-3); inset-inline-start: var(--s-3); z-index: 2; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); box-shadow: var(--sh-1); font-size: var(--fs-xs); }
.rd-map__attr { position: absolute; inset-block-end: 0; inset-inline-end: 0; z-index: 2; direction: ltr; padding: 2px 6px; font-size: 10px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text-muted); }
@keyframes rd-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rd-map[data-state="loading"] .rd-map__fallback { animation: none; } }
@media print { .rd-map { display: none; } .rd-heat__c, .rd-sevbar > i, .rd-bars__fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
/* road.instasite.space - page layout bits not covered by design-system / rd- components */
.rd-main { padding-block: var(--s-4) var(--s-10, 64px); }
.rd-hero h1 { margin-block: var(--s-4) 0; }
.rd-lead { font-size: var(--fs-md, 18px); line-height: 1.6; max-inline-size: 68ch; margin: 0; }
.rd-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.rd-fig { margin: 0; padding: var(--s-4); }
.rd-fig__title { font-size: var(--fs-lg, 18px); margin: 0 0 var(--s-2); }
.rd-fig__cap { font-size: var(--fs-sm); color: var(--text-muted); margin-block-end: var(--s-3); }
.rd-table { margin-block-start: var(--s-3); font-size: var(--fs-sm); }
.rd-table summary { cursor: pointer; color: var(--link); min-block-size: 32px; display: inline-flex; align-items: center; }
.rd-table table, .prose table { border-collapse: collapse; inline-size: 100%; margin-block-start: var(--s-2); }
.rd-table th, .rd-table td, .prose th, .prose td { border-block-end: 1px solid var(--border); padding: 6px 8px; text-align: start; }
.rd-yt td:not(:first-child) { text-align: end; }
.rd-cities { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px var(--s-4); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.rd-cities li { display: flex; justify-content: space-between; gap: var(--s-2); border-block-end: 1px solid var(--border); padding-block: 8px; }
.rd-search { margin-block-start: var(--s-4); }
.rd-search input { min-block-size: 48px; font-size: 16px; }
.prose { max-inline-size: 75ch; }
.prose h2 { margin-block-start: var(--s-6); }
.prose li { margin-block-end: var(--s-2); }
.mt-2 { margin-block-start: var(--s-2); } .mt-3 { margin-block-start: var(--s-3); } .mt-4 { margin-block-start: var(--s-4); } .mt-6 { margin-block-start: var(--s-6); } .mt-8 { margin-block-start: var(--s-8, 48px); }
.rd-map[hidden] { display: none; }
/* .rd-num isolates LTR - keep label on the right and value on the left in the RTL bar rows */
.rd-bars__label { text-align: right; }
.rd-bars__val { text-align: left; white-space: nowrap; }
.rd-bars > li { grid-template-columns: minmax(6rem, 30%) minmax(0, 1fr) max-content; }
@media (max-width: 479px) { .rd-bars > li { grid-template-columns: minmax(0, 1fr) auto; } }
/* UX review 15.10 */
.rd-mnav { display: flex; gap: var(--s-2); padding-block: 0 var(--s-2); overflow-x: auto; }
.rd-mnav a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--s-3); border-radius: var(--r-pill); color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.rd-mnav a:hover { background: var(--surface-2); }
@media (min-width: 860px) { .rd-mnav { display: none; } }
.consent { inset-inline-end: 12px !important; }
@media (min-width: 860px) { .rd-heat__c { aspect-ratio: auto; block-size: 30px; } }
.rd-table th bdi { white-space: nowrap; }
.rd-table[open] { overflow-x: auto; }
h1 { text-wrap: balance; }
body { min-block-size: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1; inline-size: 100%; }
.rd-stats:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.rd-heat__grid { font-size: 12px; }
.footer__title { margin: 0 0 var(--s-2); }
@media (max-width: 859px) { .site-header .header-search { display: none !important; } }
@media (min-width: 860px) { .header-search-toggle, .site-header__mobile-search { display: none !important; } }
.site-header__mobile-search[hidden] { display: none !important; }
/* share any figure / fact */
.rd-fig { position: relative; }
.rd-share { position: relative; display: flex; justify-content: flex-end; margin-block-start: var(--s-3); }
.rd-lead + .rd-share { justify-content: flex-start; margin-block-start: var(--s-2); }
.rd-share__btn { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding: 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.rd-share__btn:hover, .rd-share__btn[aria-expanded="true"] { color: var(--brand); border-color: var(--brand); }
.rd-share__menu { position: absolute; inset-block-end: calc(100% + 6px); inset-inline-end: 0; z-index: 20; display: grid; gap: 2px; min-inline-size: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.rd-lead + .rd-share .rd-share__menu { inset-inline-end: auto; inset-inline-start: 0; }
.rd-share__menu[hidden] { display: none; }
.rd-share__menu a, .rd-share__menu button { display: flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); text-decoration: none; cursor: pointer; text-align: start; }
.rd-share__menu a:hover, .rd-share__menu button:hover { background: var(--surface-2); }
.rd-share__wa svg { color: #128c4b; }
:target { scroll-margin-block-start: 80px; }
.rd-fig:target { outline: 3px solid var(--brand); outline-offset: 2px; }
.rd-zoom { border: 0; background: none; padding: 4px 6px; margin: -4px 0; color: var(--link); font: inherit; font-size: var(--fs-xs); cursor: pointer; text-decoration: underline; min-block-size: 32px; }
/* shop products + chips (owner's ad network) */
/* quiet, informational-site style: a light card, small thumbnails, "ממומן" always visible */
.rd-shop { margin-block: var(--s-6); padding: var(--s-3) var(--s-4); background: var(--surface-2); border: 1px solid var(--border); box-shadow: none; }
.rd-shop__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-block-end: var(--s-2); font-size: var(--fs-sm); }
.rd-shop__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.rd-shop__list a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "i t" "i p"; column-gap: var(--s-3); row-gap: 2px; align-items: center; color: var(--text); text-decoration: none; padding: var(--s-2); border-radius: var(--r-md); background: var(--surface); min-block-size: 80px; }
.rd-shop__list a:hover .rd-shop__t { color: var(--link); }
.rd-shop__list img { grid-area: i; inline-size: 64px; block-size: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.rd-shop__t { grid-area: t; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; direction: auto; text-align: start; }
.rd-shop__p { grid-area: p; font-size: 13px; color: var(--text-muted); }
.rd-shop__p b { color: var(--text); }
.rd-shop__cta { display: none; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-block-start: var(--s-3); font-size: 13px; }
.rd-chips a { display: inline-flex; align-items: center; min-block-size: 32px; max-inline-size: min(100%, 260px); padding: 0 var(--s-3); border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--r-pill); color: var(--text-muted); font-size: 13px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-chips a:hover { border-style: solid; border-color: var(--brand); color: var(--brand); }
/* data stories */
.rd-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.rd-posts li { margin: 0; padding: 0; }
.rd-posts a { display: grid; gap: 6px; padding: var(--s-4); color: inherit; text-decoration: none; block-size: 100%; }
.rd-posts h2, .rd-posts h3 { font-size: var(--fs-md, 17px); margin: 0; line-height: 1.35; }
.rd-posts p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rd-posts a:hover h2, .rd-posts a:hover h3 { color: var(--link); }
.rd-post__more { color: var(--link); font-size: var(--fs-sm); font-weight: 500; }
.rd-article { max-inline-size: 760px; }
.rd-hero-img { inline-size: 100%; block-size: auto; max-block-size: 420px; object-fit: cover; border-radius: var(--r-lg); }
.rd-post-body { font-size: 17px; line-height: 1.75; }
.rd-post-body h2 { margin-block: var(--s-6) var(--s-2); }
.rd-post-body table { border-collapse: collapse; inline-size: 100%; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.rd-post-body th, .rd-post-body td { border-block-end: 1px solid var(--border); padding: 6px 8px; text-align: right; }
.rd-post-body details { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); margin-block: var(--s-2); }
/* data explorer */
.rd-xform { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; padding: var(--s-4); }
.rd-xform label { display: grid; gap: 4px; font-size: var(--fs-sm); font-weight: 500; flex: 1 1 200px; }
.rd-xform select { min-block-size: 44px; padding: 0 var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; }
.rd-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.rd-xt { border-collapse: collapse; inline-size: 100%; font-size: var(--fs-sm); }
.rd-xt caption { text-align: start; font-weight: 600; padding-block-end: var(--s-2); }
.rd-xt th, .rd-xt td { border-block-end: 1px solid var(--border); padding: 7px 8px; text-align: start; white-space: nowrap; }
.rd-xt thead th { color: var(--text-muted); font-weight: 600; position: sticky; top: 0; background: var(--surface); }
.rd-xt--grid td { background: color-mix(in oklab, var(--rd-heat-hi) calc(var(--v, 0) * 55%), transparent); }
.rd-xt--grid td small { color: var(--text-muted); }
.rd-xt tbody th { font-weight: 500; }
.rd-xt--wrap th, .rd-xt--wrap td { white-space: normal; }
/* numbers are LTR-isolated (.rd-num) - their "start" is the left; keep them under their (right-aligned) RTL headers */
.rd-xt td.rd-num, .rd-table td.rd-num, .rd-xt td, .rd-table td { text-align: right; }
.rd-xt th, .rd-table th { text-align: right; }
body > * { min-inline-size: 0; max-inline-size: 100vw; }
.rd-ac { position: relative; }
.rd-ac-list { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-2); max-block-size: 320px; overflow: auto; }
.rd-ac-list a { display: flex; justify-content: space-between; gap: var(--s-2); padding: 10px 12px; min-block-size: 44px; align-items: center; border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.rd-ac-list a:hover, .rd-ac-list a[aria-selected="true"] { background: var(--surface-2); }
.rd-pop a { color: var(--link); }
.maplibregl-popup-content { font-family: inherit; direction: rtl; text-align: right; }
/* layout ad/shop band (23.10.2026): hide when the network returned nothing (host switched off / no products) */
.promo-band:not(:has(> :not(:empty))) { display: none; }
.promo-band .rd-shop { margin-block: 0; }
/* flight.instasite.space ("טיסה אמת") - appended after road's rd- components. Dusk-purple brand (distinct from bus blue,
road teal, crime slate). Delay states are calm: never alarm red; meaning always also in text. */
:root { --brand: #5b3fa8; --brand-hover: #4a3290; --brand-soft: #f1edfa; --brand-contrast: #fff; --link: #5b3fa8; --focus: #5b3fa8;
--fl-late: #a1530a; --fl-few: #8a8f98; --rd-bar: #6f55b8; --rd-heat-lo: #f4f1fb; --rd-heat-hi: #4a3290; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #b9a6f2; --brand-hover: #cbbcf6; --brand-soft: #211a35; --brand-contrast: #120e1f; --link: #cbbcf6; --focus: #cbbcf6;
--fl-late: #f2b155; --fl-few: #8b93a1; --rd-bar: #a08ae6; --rd-heat-lo: #1d1830; --rd-heat-hi: #b9a6f2; } }
:root[data-theme="dark"] { --brand: #b9a6f2; --brand-hover: #cbbcf6; --brand-soft: #211a35; --brand-contrast: #120e1f; --link: #cbbcf6; --focus: #cbbcf6;
--fl-late: #f2b155; --fl-few: #8b93a1; --rd-bar: #a08ae6; --rd-heat-lo: #1d1830; --rd-heat-hi: #b9a6f2; }
.cr-note { border-inline-start: 3px solid var(--brand); background: var(--brand-soft); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.6; }
.fl-cold { margin: var(--s-3) 0 0; padding: .55rem .9rem; border-radius: var(--r-md, 10px); background: var(--brand-soft); color: var(--text); font-size: var(--fs-sm); }
.fl-late { color: var(--fl-late); font-weight: 600; }
.fl-few { color: var(--fl-few); font-style: italic; }
.rd-bars li.is-supp .rd-bars__fill { opacity: .45; background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.35) 4px 8px); }
.fl-jump { display: flex; flex-wrap: wrap; gap: .4rem; }
.fl-jump a { padding: .4rem .8rem; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--border, #d6d9e0); border-radius: 999px; text-decoration: none; font-size: var(--fs-sm); }
.fl-jump a:hover, .fl-jump a:focus-visible { background: var(--brand-soft); color: var(--brand); }
.fl-filter { width: 100%; max-width: 24rem; margin-block: var(--s-3); min-height: 44px; padding: .55em .9em; font: inherit; color: var(--text); background: var(--surface, transparent); border: 1px solid var(--border, #c9d1dc); border-radius: var(--r-md, 10px); }
.fl-filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.fl-heat td { text-align: center; background: color-mix(in srgb, var(--rd-heat-hi) calc(var(--v, 0) * 55%), var(--rd-heat-lo)); }
.fl-heat td small { display: block; font-size: .72em; opacity: .75; }
.fl-faq h3 { font-size: var(--fs-md, 1.05rem); margin-top: var(--s-4); }
.fl-faq p { margin-top: .25rem; }
table[data-sortable] th button { all: unset; cursor: pointer; font-weight: 600; }
table[data-sortable] th button:hover, table[data-sortable] th button:focus-visible { color: var(--brand); text-decoration: underline; }
table[data-sortable] th[aria-sort="ascending"] button::after { content: " ▲"; font-size: .7em; }
table[data-sortable] th[aria-sort="descending"] button::after { content: " ▼"; font-size: .7em; }
/* A–Z / א–ת index on list pages */
.cr-abc { display: flex; flex-wrap: wrap; gap: .35rem; }
.cr-abc a { min-width: 2.4rem; min-height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .5rem; border: 1px solid var(--border, #c9d1dc); border-radius: var(--r-md, 10px); text-decoration: none; font-weight: 600; }
.cr-abc a:hover, .cr-abc a:focus-visible { background: var(--brand-soft); color: var(--brand); }
.cr-abc__h { font-size: var(--fs-lg); color: var(--brand); scroll-margin-top: 5rem; }
@media (prefers-reduced-motion: reduce) { .rd-bars__fill { transition: none !important; } }
/* /live – live map (23.10.2026). Map + "בדרך עכשיו" list side by side; on phones the list is a bottom sheet over the map. */
:root { --lv-d: #5b3fa8; --lv-a: #0f766e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lv-d: #c4b2ff; --lv-a: #5eead4; } }
:root[data-theme="dark"] { --lv-d: #c4b2ff; --lv-a: #5eead4; }
.lv-wrap { position: relative; display: grid; grid-template-columns: 21rem minmax(0, 1fr); grid-template-areas: "side map"; block-size: min(76vh, 760px); min-block-size: 460px;
margin-block: var(--s-4); scroll-margin-block-start: 8rem; border: 1px solid var(--border, #d6d9e0); border-radius: var(--r-lg, 14px); overflow: hidden; background: var(--surface, #fff); }
.lv-map { grid-area: map; position: relative; min-inline-size: 0; background: #dfe3ea; }
:root[data-theme="dark"] .lv-map { background: #1b1d24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lv-map { background: #1b1d24; } }
.lv-map .maplibregl-canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.lv-side { grid-area: side; display: flex; flex-direction: column; min-block-size: 0; border-inline-end: 1px solid var(--border, #d6d9e0); background: var(--surface, #fff); }
.lv-sheet { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; font-weight: 700; font-size: 1.05rem; border-block-end: 1px solid var(--border, #d6d9e0); }
.lv-sheet__chev { display: none; }
.lv-panel { display: flex; flex-direction: column; min-block-size: 0; flex: 1; }
.lv-tools { display: flex; flex-wrap: wrap; gap: .45rem; padding: .6rem .75rem 0; align-items: center; }
.lv-tools .fl-filter { margin: 0; max-width: none; flex: 1 1 100%; }
.lv-tabs { display: flex; gap: .3rem; flex: 1 1 100%; }
.lv-tabs button { flex: 1; min-height: 40px; border: 1px solid var(--border, #c9d1dc); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.lv-tabs button[aria-pressed="true"] { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }
.lv-tabs button:focus-visible, .lv-item:focus-visible, .lv-sheet:focus-visible, .lv-card__x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lv-sort { font-size: var(--fs-sm); display: flex; gap: .4rem; align-items: center; }
.lv-sort select { min-height: 40px; font: inherit; color: var(--text); background: var(--surface, transparent); border: 1px solid var(--border, #c9d1dc); border-radius: var(--r-md, 10px); padding: 0 .5rem; }
.lv-upd { padding: .35rem .75rem 0; margin: 0; }
.lv-list { list-style: none; margin: .4rem 0 0; padding: 0 .4rem .6rem; overflow-y: auto; flex: 1; min-block-size: 0; }
.lv-list > li { margin: 0; padding: 0; }
.lv-list > li.muted, .lv-row { padding: .5rem .5rem; }
.lv-item { all: unset; box-sizing: border-box; display: block; inline-size: 100%; padding: .5rem .55rem; border-radius: var(--r-md, 10px); cursor: pointer; line-height: 1.45; }
.lv-item:hover { background: var(--brand-soft); }
.lv-item[aria-pressed="true"] { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.lv-item__l1 { display: block; }
.lv-item__l2 { display: block; font-size: var(--fs-sm); color: var(--text-muted, #5b6270); }
.lv-dot { display: inline-block; inline-size: .65rem; block-size: .65rem; border-radius: 50%; margin-inline-end: .35rem; vertical-align: .05em; }
.lv-dot--d { background: var(--lv-d); } .lv-dot--a { background: var(--lv-a); }
.lv-legend { position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem; z-index: 2; padding: .3rem .6rem; border-radius: 999px; font-size: .8rem; background: color-mix(in srgb, var(--surface, #fff) 88%, transparent); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.lv-legend .lv-dot { margin-inline-start: .3rem; }
.lv-card { position: absolute; z-index: 3; inset-block-end: .75rem; inset-inline-end: .75rem; inline-size: min(22rem, calc(100% - 23.5rem)); max-block-size: calc(100% - 1.5rem); overflow: auto;
padding: .8rem 1rem; border-radius: var(--r-lg, 14px); background: var(--surface, #fff); color: var(--text); border: 1px solid var(--border, #d6d9e0); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.lv-card[hidden] { display: none; }
.lv-card__head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.lv-card__title { font-size: 1.05rem; margin: 0; }
.lv-card__x { all: unset; cursor: pointer; font-size: 1.5rem; line-height: 1; min-inline-size: 40px; min-block-size: 40px; text-align: center; border-radius: 50%; }
.lv-card__x:hover { background: var(--brand-soft); }
.lv-card__dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: .5rem 0; font-size: var(--fs-sm); }
.lv-card__dl dt { color: var(--text-muted, #5b6270); } .lv-card__dl dd { margin: 0; }
.lv-card__link { font-weight: 600; }
.lv-off { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: .4rem; align-items: center; justify-content: center; text-align: center; padding: 1rem; background: color-mix(in srgb, var(--surface, #fff) 92%, transparent); }
.lv-off[hidden] { display: none; }
.lv-nomap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; margin: 0; }
.lv-follow { margin-block: var(--s-3); }
.lv-about p { max-inline-size: 72ch; }
.maplibregl-ctrl-attrib { font-size: 11px; }
@media (max-width: 767px) {
.lv-wrap { display: block; block-size: 74vh; min-block-size: 420px; margin-inline: calc(-1 * var(--gutter, 16px)); border-radius: 0; border-inline: 0; }
.lv-wrap .lv-map, .lv-wrap .lv-map.maplibregl-map { position: absolute; inset: 0; block-size: 100%; } /* maplibre-gl.css (loaded later) sets position: relative */
.lv-card { font-size: .9rem; padding: .6rem .8rem; }
.lv-card__dl { margin: .3rem 0; gap: .1rem .6rem; }
.lv-side { position: absolute; z-index: 5; inset-inline: 0; inset-block-end: 0; max-block-size: 3.4rem; border: 0; border-block-start: 1px solid var(--border, #d6d9e0);
border-radius: 16px 16px 0 0; box-shadow: 0 -4px 18px rgba(0,0,0,.18); transition: max-block-size .25s ease; }
.lv-side.is-open { max-block-size: 68%; }
.lv-side:not(.is-open) .lv-panel { display: none; }
.lv-sheet { cursor: pointer; min-block-size: 3.4rem; }
.lv-sheet__chev { display: inline; transition: transform .2s; }
.lv-side.is-open .lv-sheet__chev { transform: rotate(180deg); }
.lv-card { inset-block-start: .6rem; inset-block-end: auto; inset-inline: .6rem; inline-size: auto; max-block-size: 52%; }
.lv-legend { inset-block-start: auto; inset-block-end: 4rem; }
}
@media (prefers-reduced-motion: reduce) { .lv-side, .lv-sheet__chev { transition: none; } }