/* ============================================================================
   FADEZEN · Base
   טיפוגרפיה, גלילה, מיקוד, ופרימיטיבים שחוזרים בכל האפליקציה.
   ========================================================================= */

body{
  background: var(--c-bg);
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------- typography */
h1,h2,h3,h4{ font-family: var(--font-display); line-height: var(--lh-tight); font-weight: 700; }
h1{ font-size: var(--t-3xl); }
h2{ font-size: var(--t-2xl); }
h3{ font-size: var(--t-lg); }
h4{ font-size: var(--t-md); }

strong,b{ font-weight: 700; }
small{ font-size: var(--t-xs); }

.u-display { font-family: var(--font-display); font-weight: 700; }
.u-num     { font-family: var(--font-display); font-weight: 900; font-variant-numeric: tabular-nums; }
.u-muted   { color: var(--ink-2); }
.u-faint   { color: var(--ink-3); }
.u-live    { color: var(--live); }
.u-nav     { color: var(--nav); }
.u-busy    { color: var(--busy); }
.u-gold    { color: var(--gold); }
.u-truncate{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* מספרים וכיווניות: מחירים, שעות ומרחקים נשארים קריאים בתוך טקסט RTL */
.u-ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------------------------------------------------------------- a11y */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:focus-visible{
  outline: 2px solid var(--nav);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link{
  position: absolute; z-index: var(--z-splash);
  inset-inline-start: var(--s-3); top: calc(var(--s-3) + var(--safe-t));
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: var(--nav); color: var(--ink-on-nav); font-weight: 700;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--d-2) var(--ease-out);
}
.skip-link:focus{ transform: translateY(0); }

/* ---------------------------------------------------------------- scrollbars */
*::-webkit-scrollbar{ width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.24); }
*::-webkit-scrollbar-track{ background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }

.scroll-x{ overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
/* overflow-x: hidden אינו קישוט — הוא הכרחי.
   לפי המפרט, ברגע שציר אחד אינו visible, הציר השני מחושב מ-visible
   ל-auto. כלומר `overflow-y:auto` לבדו הפך כל מיכל גלילה באתר גם
   לגליל אופקית, וילד אחד רחב מדי גרם לכל הפאנל להיגרר הצידה
   ולהיחתך — בדיוק מה שקרה בגיליון פרטי המספרה בנייד. */
.scroll-y{
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain none;
  -webkit-overflow-scrolling: touch;
}
.no-bar{ scrollbar-width: none; }
.no-bar::-webkit-scrollbar{ display: none; }

/* ---------------------------------------------------------------- glass */
.glass{
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--e-3);
}
.glass-2{
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--e-3);
}

/* גרעין עדין מעל משטחים גדולים — מרכך את הבאנדינג של הגרדיאנטים */
.grain::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../assets/noise.svg");
  background-size: 180px 180px;
  opacity: .22; mix-blend-mode: overlay;
  border-radius: inherit;
}

/* ---------------------------------------------------------------- primitives */
.row{ display: flex; align-items: center; gap: var(--s-2); }
.row-t{ display: flex; align-items: flex-start; gap: var(--s-3); }
.col{ display: flex; flex-direction: column; }
.grow{ flex: 1; min-width: 0; }
.push{ margin-inline-start: auto; }
.wrap{ flex-wrap: wrap; }

.stack > * + *{ margin-top: var(--s-3); }
.divider{ height: 1px; background: var(--line); border: 0; margin: var(--s-4) 0; }

.section{ margin-top: var(--s-6); }
.section__head{
  display: flex; align-items: baseline; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.section__head h3{ font-size: var(--t-lg); }
.section__head .hint{ margin-inline-start: auto; font-size: var(--t-xs); color: var(--ink-3); }