/* =========================================================================
   Leeway — זימון תור לביקורת ביטחון בנתב"ג
   Design tokens mirrored 1:1 from the Figma file "Demo Final Project Ver 3"
   (file key mJc7QbFA7CpcJTj1Tf4WRq), collections: Color / Spacing /
   Typography / Radius. Variable names below match the Figma variable names,
   with "/" replaced by "-".
   ========================================================================= */

:root {
  /* ---- Color · primitives ------------------------------------------- */
  --color-white-base: #ffffff;
  --color-navy-900: #001b2a;
  --color-navy-950: #0a1220;
  --color-navy-800: #182a4a;
  --color-blue-800: #0f3673;
  --color-blue-700: #174691;
  --color-blue-600: #1e5aba;
  --color-blue-400: #63b3ed;
  --color-blue-200: #d6e6ff;
  --color-blue-100: #e9f2ff;
  --color-gray-100: #f4f6f8;
  --color-gray-300: #c9c8c8;
  --color-slate-600: #525f77;
  --color-slate-500: #606573;
  --color-slate-400: #808d95;
  --color-slate-300: #8b93a7;
  --color-cream-50: #f2efe9;
  --color-lavender-100: #e6e6ec;
  --color-green-700: #1e6b41;
  --color-green-600: #3e8e5c;
  --color-green-50: #e6f4ec;
  --color-blueinfo-700: #0238b5;
  --color-blueinfo-400: #4c8ce0;
  --color-amber-800: #8a5a0f;
  --color-amber-600: #cb8724;
  --color-amber-50: #fdf3e3;
  --color-red-700: #bb0307;
  --color-red-400: #e0534f;
  --color-red-50: #fcebea;

  /* ---- Color · semantic (Light mode) --------------------------------- */
  /* The canvas is the layer every card sits on. In light mode it is the
     primary blue, exactly as in Figma. It gets a token of its own rather
     than reading --color-primary-base directly, because primary is a fill
     colour (buttons, filled fields, the chosen slot) and in dark mode the
     canvas is the dark bg instead — see the dark block below. */
  --color-canvas-base: var(--color-primary-base);
  --color-surface-base: var(--color-white-base);
  --color-surface-raised: var(--color-blue-100);
  --color-border-base: var(--color-gray-100);
  --color-text-base: var(--color-navy-900);
  --color-text-muted: var(--color-slate-400);
  --color-text-on-primary: var(--color-white-base);
  --color-text-on-primary-muted: var(--color-blue-200);
  --color-primary-base: var(--color-blue-600);
  --color-primary-strong: var(--color-blue-700);
  --color-primary-deep: var(--color-blue-800);
  /* Primary wears two hats. As a fill (buttons, filled fields, the chosen
     slot) it is the deep blue above. As ink — interactive text, borders and
     small marks sitting on a card — it has to read against that card, and
     blue/700 on the dark card is 1.6:1. Splitting the roles lets dark mode
     swap the ink for accent while the fills stay exactly where Figma puts
     them. In light mode the two are the same colour, so nothing moves. */
  --color-primary-ink: var(--color-primary-base);
  --color-accent-base: var(--color-blue-400);
  --color-success-base: var(--color-green-600);
  --color-success-text: var(--color-green-700);
  --color-success-surface: var(--color-green-50);
  --color-info-base: var(--color-blueinfo-700);
  --color-warning-base: var(--color-amber-600);
  --color-warning-text: var(--color-amber-800);
  --color-warning-surface: var(--color-amber-50);
  --color-danger-base: var(--color-red-700);
  --color-danger-text: var(--color-red-700);
  --color-danger-surface: var(--color-red-50);
  --color-neutral-base: var(--color-slate-500);
  /* טקסט משני שיושב ישירות על רקע המסך ולא בתוך כרטיס לבן.
     --color-text-muted נותן שם יחס ניגודיות של 1.91:1 בלבד, מתחת לרף,
     ולכן לטקסט כזה יש טוקן משלו: 5.15:1 על הכחול. */
  --color-text-on-canvas: var(--color-blue-200);
  --color-muted-surface-base: var(--color-gray-300);
  --color-focus-on-dark: var(--color-white-base);
  --color-focus-on-light: var(--color-blue-600);
  --color-overlay-scrim: var(--color-navy-900);

  /* Not defined as a Figma variable — raw fill on the QR pass shell
     (node 2300:1344). Tokenised here so no rule carries a bare hex. */
  --color-pass-shell: #d9d9d9;

  /* ---- Spacing ------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radius -------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Inline icons (SVG data URI — no extra files) -------------------- */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---- Typography ---------------------------------------------------- */
  --typography-family-heading: "Heebo", "Rubik", system-ui, sans-serif;
  --typography-family-body: "Inter", "Source Sans 3", system-ui, sans-serif;
  --typography-size-2xs: 10px;
  --typography-size-xs: 12px;
  --typography-size-sm: 14px;
  --typography-size-md: 16px;
  --typography-size-lg: 20px;
  --typography-size-xl: 28px;
  --typography-size-1xl: 36px;
  --typography-size-2xl: 40px;
  --typography-size-3xl: 48px;

  --typography-line-2xs: 14px;
  --typography-line-xs: 18px;
  --typography-line-sm: 20px;
  --typography-line-md: 24px;
  --typography-line-lg: 28px;
  --typography-line-xl: 36px;
  --typography-line-1xl: 44px;
  --typography-line-2xl: 48px;
  --typography-line-3xl: 56px;

  --typography-weight-regular: 400;
  --typography-weight-medium: 500;
  --typography-weight-semibold: 600;
  --typography-weight-bold: 700;

  /* ---- Spacing · vertical (fluid) --------------------------------------
     ה-Figma צויר על קנבס של 412×917. אף טלפון אמיתי לא נותן 917 פיקסלים
     גובה גלויים — אייפון 17 נותן בערך 724 מתחת לסרגל של ספארי. לכן
     המרווחים האנכיים בלבד נמדדים ביחס לגובה החלון: הם מגיעים למספר
     המדויק של ה-Figma בגובה המקורי, ומתכווצים בהדרגה במסך נמוך יותר.
     הרוחב, הטיפוגרפיה ושטחי המגע לא נוגעים בזה ונשארים קבועים.
     ---------------------------------------------------------------------- */
  --v-2: clamp(6px,  0.90dvh,  8px);   /* = --space-2 at 917 */
  --v-3: clamp(8px,  1.31dvh, 12px);   /* = --space-3 */
  --v-4: clamp(10px, 1.75dvh, 16px);   /* = --space-4 */
  --v-5: clamp(13px, 2.62dvh, 24px);   /* = --space-5 */
  --v-6: clamp(16px, 3.49dvh, 32px);   /* = --space-6 */
  --v-7: clamp(20px, 5.24dvh, 48px);   /* = --space-7 */
  --v-8: clamp(26px, 6.98dvh, 64px);   /* = --space-8 */

  /* ---- Layout -------------------------------------------------------- */
  --canvas-width: 412px;
  --canvas-gutter: var(--space-5);
  --header-top: var(--v-7);
  --control-height: 48px;
  --field-height: 52px;

  /* ---- Motion · read from the Figma prototype (27 connections) -------- */
  --motion-dissolve: 300ms;
  --motion-move-fast: 300ms;
  --motion-move: 400ms;
  --motion-move-slow: 500ms;
  --motion-smart: 300ms;
  --motion-smart-slow: 500ms;
  --motion-splash-1: 200ms;
  --motion-splash-2: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-linear: linear;

  /* ---- Micro-motion · archetype "רגוע ואמין", mobile-adjusted ---------
     Derived: radius 3 + typeface 1 + palette 3 + category 2 = 9 / 4 = 2.25.
     Calm base 260ms, cut 15% because a phone in the hand is unforgiving;
     lift halved from 6px because travel reads bigger on a small screen.
     Easing is this product's own --ease-out, not the archetype default.   */
  --motion-press-in: 90ms;      /* a press must register almost instantly  */
  --motion-press-out: 160ms;    /* the release is allowed to relax slower  */
  --motion-fast: 140ms;
  --motion-base: 220ms;         /* calm 260ms − 15% for mobile             */
  --motion-lift: 3px;           /* calm 6px, halved for the phone          */
  --motion-press-scale: 0.97;
  --motion-stagger: 40ms;
  --motion-celebrate: 300ms;    /* the one delight beat, on Success        */
  --motion-spin: 700ms;         /* loading spinner revolution              */
  --motion-pulse: 1200ms;       /* the spinner's reduced-motion substitute */

  /* ---- Elevation ----------------------------------------------------- */
  --shadow-pass: 0 7.367px 18.419px -4px rgb(0 27 42 / 0.16);

  /* ---- Gradients · named styles gradient/reveal-mask/* ----------------
     All three fade into the screen behind them, so they follow the canvas
     rather than primary. In light mode the canvas *is* primary, so these
     resolve to the same blue the Figma styles specify.                    */
  --gradient-reveal-to-blue: linear-gradient(160deg, rgb(217 217 217 / 0) 0%, var(--color-canvas-base) 92%);
  --gradient-reveal-from-blue: linear-gradient(160deg, var(--color-canvas-base) 0%, rgb(115 115 115 / 0) 100%);
  --gradient-scrim-up: linear-gradient(to top, var(--color-canvas-base) 55%, rgb(30 90 186 / 0) 100%);

  color-scheme: light;
}

/* ---- Color · semantic (Dark mode) ------------------------------------
   Values read from the "Dark" mode of the Figma Color collection
   (Design System page, node 21:156).
   The page opens in whichever mode the phone is set to, and the switch on the
   Landing page (or in the menu) overrides that for the rest of the visit.
   script.js stamps data-theme on <html>; this block only reacts to it.
   It re-declares colour variables only — it never touches layout, so
   deleting it leaves the light design byte-for-byte identical.

   The layering is inverted from light mode on purpose. Light mode is a blue
   canvas carrying white cards; dark mode is Figma's dark bg (navy/950)
   carrying Figma's dark surface (navy/800). Those are the only two dark
   surfaces the Figma file defines, so a strip nested inside a card falls
   back to the canvas colour and reads as inset — canvas → card → inset,
   rather than inventing a third navy that is in no design file.         */
:root[data-theme="dark"] {
  --color-canvas-base: var(--color-navy-950);    /* Figma dark · bg      */
  --color-surface-base: var(--color-navy-800);   /* Figma dark · surface */
  --color-surface-raised: var(--color-navy-950);
  --color-border-base: var(--color-slate-600);
  --color-text-base: var(--color-cream-50);
  --color-text-muted: var(--color-lavender-100);
  --color-primary-base: var(--color-blue-700);
  --color-primary-strong: var(--color-blue-800);
  /* Down here primary is a fill and nothing else. Accent carries the ink:
     8.2:1 on the canvas, 6.2:1 on a card. */
  --color-primary-ink: var(--color-accent-base);
  --color-info-base: var(--color-blueinfo-400);
  --color-danger-base: var(--color-red-400);
  --color-neutral-base: var(--color-slate-300);
  /* On the blue canvas of light mode muted text needed a token of its own.
     On navy the muted lavender clears the bar on its own — 15:1. */
  --color-text-on-canvas: var(--color-text-muted);
  /* The ring on cards and on the settings screens is blue/600 in light
     mode, where it lands on white. On navy that is 2.2:1; accent is 6.2:1. */
  --color-focus-on-light: var(--color-accent-base);
  /* accent, success and warning are intentionally identical in both
     modes — contrast-checked in docs/DESIGN_SYSTEM_AUDIT.md. */
  color-scheme: dark;
}

/* =========================================================================
   Base
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-navy-900);
  font-family: var(--typography-family-body);
  font-size: var(--typography-size-md);
  line-height: var(--typography-line-md);
  color: var(--color-text-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--typography-family-heading);
  margin: 0;
}

p { margin: 0; }

img { max-width: 100%; display: block; }
picture { display: contents; }

button { font: inherit; color: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus-on-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.screen--light :where(a, button, input):focus-visible {
  outline-color: var(--color-focus-on-light);
}

/* headings receive focus programmatically after a screen change (for screen
   readers) — that must never paint a visible ring */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   App shell + screens
   ========================================================================= */

.app {
  position: relative;
  width: 100%;
  max-width: var(--canvas-width);
  min-height: 100dvh;
  margin-inline: auto;
  overflow: hidden;
  background: var(--color-canvas-base);
  isolation: isolate;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-inline: var(--canvas-gutter);
  padding-block-end: max(var(--v-5), env(safe-area-inset-bottom));
  background: var(--color-canvas-base);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.screen[hidden] { display: none !important; }

/* The screen leaving the stage sits underneath the incoming one. */
.screen.is-leaving { z-index: 1; }
.screen.is-entering { z-index: 2; }

/* =========================================================================
   Transitions — types, directions and durations read from the Figma
   prototype. Figma "Move in · Left" = the incoming frame travels leftwards,
   so it enters from the right edge; "Move in · Right" is the mirror.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .anim-dissolve-in {
    animation: fade-in var(--motion-dissolve) var(--ease-out) both;
  }
  .anim-dissolve-out {
    animation: fade-out var(--motion-dissolve) var(--ease-out) both;
  }
  .anim-move-in-left {
    animation: slide-from-end var(--duration, var(--motion-move-slow)) var(--ease, var(--ease-out)) both;
  }
  .anim-move-in-right {
    animation: slide-from-start var(--duration, var(--motion-move-slow)) var(--ease, var(--ease-out)) both;
  }
  .anim-smart-in {
    animation: smart-in var(--duration, var(--motion-smart)) var(--ease, var(--ease-out)) both;
  }
  .anim-smart-out {
    animation: smart-out var(--duration, var(--motion-smart)) var(--ease, var(--ease-out)) both;
  }
}

@keyframes fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes slide-from-end   { from { transform: translateX(100%) }  to { transform: translateX(0) } }
@keyframes slide-from-start { from { transform: translateX(-100%) } to { transform: translateX(0) } }
@keyframes smart-in  { from { opacity: 0; transform: scale(1.03) } to { opacity: 1; transform: scale(1) } }
@keyframes smart-out { from { opacity: 1; transform: scale(1) }    to { opacity: 0; transform: scale(0.985) } }

/* =========================================================================
   Header — hamburger (start) + logo (end)
   ========================================================================= */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-start: var(--header-top);
  min-block-size: 51px;
  flex: 0 0 auto;
}

.logo { width: 111px; height: auto; }
/* הלוגו הגדול של עמוד הנחיתה — 223px ב-Figma, מתכווץ במסך נמוך */
.logo--hero { width: clamp(150px, 24.3dvh, 223px); }

.hamburger {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-start: calc(var(--space-1) * -1);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hamburger img { width: 35px; }
.hamburger img.is-active { width: 44px; }   /* 43px of ink, matching Figma */

.home-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

/* =========================================================================
   Progress bar (Progress Bar V2 — node 2048:535)
   ========================================================================= */

.progress {
  --progress-fill: 0%;
  position: relative;
  margin-block-start: var(--v-6);
  padding-block-end: var(--v-1);
  flex: 0 0 auto;
}

.progress__track {
  position: relative;
  block-size: 4px;
  margin-inline: 8.5px;       /* half a dot, so the dots cap the rail exactly */
  border-radius: var(--radius-pill);
  background: var(--color-white-base);
}

.progress__fill {
  position: absolute;
  left: 0;                    /* physical on purpose — see the note below */
  top: 50%;
  transform: translateY(-50%);
  block-size: 9px;            /* Figma: 4px track, 9px filled segment */
  inline-size: var(--progress-fill);
  border-radius: var(--radius-pill);
  background: var(--color-accent-base);
  /* The one place a size is animated instead of a transform: this bar is
     absolutely positioned, so the reflow is confined to itself, and
     scaleX() would distort the pill-shaped cap on a 9px-tall element. */
  transition: inline-size var(--motion-base) var(--ease-out);
}

/* The rail runs physically left → right, matching the Figma layout, so the
   dots are placed with `left` rather than a logical property on purpose. */
.progress__dot {
  position: absolute;
  top: 50%;
  inline-size: 17px;
  block-size: 17px;
  border-radius: var(--radius-pill);
  background: var(--color-white-base);
  transform: translate(-50%, -50%);
}
.progress__dot:nth-of-type(1) { left: 0; }
.progress__dot:nth-of-type(2) { left: 50%; }
.progress__dot:nth-of-type(3) { left: 100%; }
.progress__dot.is-done { background: var(--color-accent-base); }

.progress__labels {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-block-start: var(--v-2);
}

.progress__label {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-md);
  color: var(--color-text-muted);
}
.progress__label.is-current {
  color: var(--color-white-base);
  font-weight: var(--typography-weight-bold);
}

/* =========================================================================
   Buttons (Button — node 2012:447 / Button V2 — node 2095:723)
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding-inline: var(--space-5);
  padding-block: var(--space-3);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--typography-family-body);
  font-size: var(--typography-size-md);
  font-weight: var(--typography-weight-bold);
  line-height: var(--typography-line-md);
  cursor: pointer;
}
/* no :hover — this is a touch product; hover sticks after a tap */

.btn--primary {
  background: var(--color-accent-base);
  border-color: var(--color-accent-base);
  color: var(--color-text-on-primary);
}
.btn--secondary {
  background: var(--color-surface-raised);
  border-color: var(--color-accent-base);
  color: var(--color-accent-base);
}
.btn--pass {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-sm);
  font-weight: var(--typography-weight-semibold);
  background: var(--color-accent-base);
  border-color: var(--color-accent-base);
  color: var(--color-white-base);
  min-block-size: 44px;
}

.btn-row {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--v-5);
}
.btn-row .btn { flex: 1 1 0; }
/* ב-RTL הפעולה הראשית יושבת מימין, וזה נכון. ב-LTR אותו סדר DOM היה שם
   אותה משמאל ואת "חזרה" מימין — הפוך מהמוסכמה. היפוך השורה מחזיר את
   הראשית לימין בלי לגעת ב-HTML. */
:root[dir="ltr"] .btn-row { flex-direction: row-reverse; }

.actions { display: grid; gap: var(--space-2); }

/* =========================================================================
   Inputs (Input — node 2007:432)
   ========================================================================= */

.field { display: block; }

.input {
  inline-size: 100%;
  block-size: var(--field-height);
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-sm);
  background: var(--color-surface-base);
  font-family: var(--typography-family-body);
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
  color: var(--color-text-base);
  text-align: start;
}
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
/* border-color alone is not a sufficient focus affordance — keep the ring */
.input:focus { border-color: var(--color-focus-on-light); }
.input:focus:not(:focus-visible) { outline: none; }

.input[aria-invalid="true"] {
  border-color: var(--color-red-700);
  background: var(--color-danger-surface);
  color: var(--color-navy-900);
}
.input[aria-invalid="true"]::placeholder { color: var(--color-slate-500); }

.field__error {
  display: none;
  margin-block-start: var(--v-1);
  font-size: var(--typography-size-xs);
  line-height: var(--typography-line-xs);
  color: var(--color-red-700);
  background: var(--color-danger-surface);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-2);
  padding-block: 2px;
  inline-size: fit-content;
}
.field.has-error .field__error { display: block; }

.name-row { display: flex; gap: var(--space-2); }
.name-row .field { flex: 1 1 0; min-inline-size: 0; }

/* =========================================================================
   Typography helpers
   ========================================================================= */

.display {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-2xl);
  line-height: var(--typography-line-2xl);
  font-weight: var(--typography-weight-bold);
  color: var(--color-white-base);
}
.display em { font-style: normal; color: var(--color-accent-base); }
.display em.is-success { color: var(--color-success-base); }
.display em.is-danger { color: var(--color-danger-base); }

.h3 {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-xl);
  line-height: var(--typography-line-xl);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-white-base);
}
.h3 em { font-style: normal; color: var(--color-accent-base); }

/* =========================================================================
   Landing page (node 24:1271)
   ========================================================================= */

.screen--landing { align-items: center; }
.screen--landing .header { justify-content: center; padding-block-start: var(--v-6); }

.landing__headline {
  align-self: stretch;
  text-align: start;
  margin-block-start: var(--v-7);

  /* ב-Figma (node 2039:923) הכותרת היא שתי שורות עם whitespace-nowrap:
     Heebo Bold 40/48, ותיבת הטקסט רחבה 369px — חמישה פיקסלים יותר
     מעמודת הכפתורים (364). בדיוק ההפרש הזה הוא מה שמכניס את
     "כדי לא לחכות אחר כך" לשורה אחת, ולכן הוא משוחזר כאן. */
  inline-size: calc(100% + 7px);
  margin-inline: -3.5px;

  /* היחס נמדד מ-Heebo Bold עצמו: "כדי לא לחכות אחר כך" ב-40px תופסת
     368.5px. היחס כאן מכויל כך שברוחב הקנבס של ה-Figma יוצא בדיוק
     40px כמו בעיצוב, ובכל רוחב אחר נשארים כ-2.5px אוויר שמונעים
     שבירה בגלל עיגול תת-פיקסלי. במסך צר הגופן יורד בדיוק כמה שנדרש
     כדי שהשורה תישאר שורה אחת — במקום להישבר לשלוש שורות. */
  font-size: min(var(--typography-size-2xl),
                 calc((min(100vw, var(--canvas-width)) - var(--canvas-gutter) * 2 + 7px) * 0.1079));
  line-height: 1.2;   /* 48 / 40, בדיוק כמו ב-Figma */
}

/* רק לעברית מובטחות שתי שורות, כי רק בשבילה נמדד היחס למעלה. שאר
   השפות ארוכות בהרבה ונשברות באופן טבעי — עדיף שלוש שורות מסודרות
   מאשר שורה אחת שנחתכת בקצה המסך. */
:root[lang="he"] .landing__headline > * { white-space: nowrap; }

/* האיור הוא צרכן הגובה הגדול ביותר במסך. במסך גבוה הוא נשאר full-bleed
   בדיוק כמו ב-Figma; במסך נמוך הוא מתכווץ לפי היחס הטבעי שלו (419:279)
   ומתמרכז, במקום לדחוף את כפתורי הפעולה מתחת לקו הקיפול. */
.landing__art {
  align-self: center;
  inline-size: calc(100% + var(--canvas-gutter) * 2);
  max-inline-size: none;
  margin-inline: calc(var(--canvas-gutter) * -1);
  margin-block-start: calc(var(--v-5) * -1);
  /* התיבה נשארת full-bleed בדיוק כמו ב-Figma. רק כשאין מספיק גובה
     התקרה נכנסת לפעולה, והאיור מצטמצם ומתמרכז בתוכה — במקום לדחוף
     את כפתורי הפעולה מתחת לקו הקיפול. */
  max-block-size: clamp(128px, 30dvh, 279px);
  block-size: auto;
  object-fit: contain;
  /* min-block-size:0 הוא מה שמתיר לתמונה בכלל להתכווץ בתוך flex column.
     בלעדיו התמונה נשארת בגובה הטבעי שלה ודוחפת את השאר החוצה. */
  flex: 0 1 auto;
  /* הרצפה: מתחת ל-96px האיור כבר נראה כמו מדבקה ולא כמו איור. משם
     והלאה המסך גולל — עדיף גלילה קטנה על איור מעוך. */
  min-block-size: 96px;
}

/* רק האיור מוותר על גובה. כל שאר האלמנטים בעמוד — כותרת, כפתורים,
   כרטיס הסטטוס, שורת ההגדרות — שומרים על הגובה המלא שלהם. */
.screen--landing > :not(.landing__art) { flex-shrink: 0; }

.landing__actions {
  align-self: stretch;
  display: grid;
  gap: var(--v-2);
  margin-block-start: var(--v-5);
}

/* My Status Card (node 2063:712) */
.status-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--v-2);
  margin-block-start: var(--v-4);
  padding: var(--v-5) var(--space-5);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-lg);
  background: var(--color-surface-base);
  text-align: start;
  cursor: pointer;
  inline-size: 100%;
}
.status-card__title {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-lg);
  line-height: var(--typography-line-lg);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-text-base);
}
.status-card__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 100%;
  padding-inline: var(--space-3);
  padding-block: 10px;
  border-radius: 10px;
  background: var(--color-surface-raised);
}
.status-card__chip img { inline-size: 24px; block-size: 24px; }
.status-card__chip-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.status-card__step {
  font-family: var(--typography-family-heading);
  font-size: 15px;
  font-weight: var(--typography-weight-semibold);
  color: var(--color-primary-ink);
}
.status-card__state {
  font-family: var(--typography-family-heading);
  font-size: 13px;
  color: var(--color-text-muted);
}
.status-card__note {
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
  color: var(--color-text-muted);
}
/* מצב פתיחה: אין עדיין הזמנה, אז אין שלב פעיל להאיר. הצ'יפ נשאר במקומו
   כדי שהכרטיס לא יקפוץ כשמצב אמיתי נכנס אליו — רק הצבע מתעמעם. */
.status-card[data-booking="none"] .status-card__step { color: var(--color-text-muted); }
.status-card[data-booking="none"] .status-card__chip img { opacity: .45; }

/* =========================================================================
   Onboarding — הדרכת כניסה ראשונה (אין לה node ב-Figma)

   שלוש שכבות מעל מסך הבית, כולן ילדות של המסך עצמו ולא של .app:
   רק כך אפשר להרים אלמנט שיושב *בתוך* המסך (הכפתור שמוסבר, שורת
   ההגדרות) מעל ההחשכה. שכבה מחוץ למסך הייתה מחייבת להרים את המסך
   כולו — כלומר לבטל את ההחשכה שהיא כל העניין.

     z 5  ההחשכה
     z 6  האלמנט שמוסבר כרגע
     z 7  הגיליון
     z 8  שורת ההגדרות — שפה ומצב תצוגה נשארים מעל הכול ופעילים.
          זה לא קישוט: מי שלא קורא עברית חייב להחליף שפה תוך כדי
          ההסבר, ולא אחריו.
   ========================================================================= */

.coach-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  /* 25% — חצי מהעוצמה של תפריט ההמבורגר (35%). ההסבר לא אמור למחוק
     את המסך שהוא מסביר, רק להוריד אותו רמה אחת. */
  background: rgb(0 27 42 / 0.25);
  animation: fade-in var(--motion-dissolve) var(--ease-out) both;
}
.coach-scrim[hidden] { display: none !important; }
.coach-scrim.is-leaving { animation: fade-out var(--motion-fast) var(--ease-out) both; }

/* האלמנט שמוסבר כרגע. outline ולא box-shadow: הוא עוקב לבד אחרי
   ה-border-radius של כל יעד (כפתור radius-md, כרטיס radius-lg) בלי
   שנצטרך לחזור על הרדיוס לכל אחד. הצבע הוא טוקן הפוקוס של הקנבס
   הכהה — בדיוק המקרה הזה: טבעת בהירה מעל רקע מוחשך. */
.screen--landing[data-coach] [data-coach-target] {
  position: relative;
  z-index: 6;
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 3px;
  animation: coach-ring 1400ms var(--ease-out) infinite alternate;
}

/* שורת ההגדרות מעל הכול. static→relative רק בזמן ההדרכה, כדי שה-z
   לא ישנה סדר ציור בשאר הזמן. */
.screen--landing[data-coach] .landing__foot { position: relative; z-index: 8; }

.coach {
  position: absolute;
  z-index: 7;
  /* הבלוק המכיל של אלמנט abs הוא תיבת ה-padding של המסך, כלומר כולל
     את המרווח הצדדי. inset של גוטר אחד מיישר את הגיליון בדיוק לקו של
     הכפתורים ושל כרטיס הסטטוס. */
  inset-inline: var(--canvas-gutter);
  /* עוגן מנוחה בלבד. המיקום בפועל נקבע ב-JS דרך --coach-lift, שנמדד
     מול שורת השפה כפי שהיא בחלון התצוגה — הגיליון הוא absolute בתוך
     המסך, ובמסכים נמוכים תיבת המסך גבוהה מהחלון והעיגון לתחתיתה לבדו
     היה מניח אותו מתחת לקצה. */
  inset-block-end: calc(max(var(--v-4), env(safe-area-inset-bottom)) + var(--v-3));
  display: flex;
  flex-direction: column;
  gap: var(--v-2);
  padding: var(--v-4) var(--space-5);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-lg);
  background: var(--color-surface-base);
  box-shadow: var(--shadow-pass);
  animation: coach-in var(--motion-move) var(--ease-out) both;
  /* ההרמה מעל היעד. translate ולא transform: ה-transform כאן כבר שייך
     ל-coach-in, ואנימציה עם fill both מחזיקה בו גם אחרי שנגמרה. שתי
     התכונות מצטרפות זו לזו, כך שהכניסה מלמטה וההרמה לא נלחמות. */
  translate: 0 calc(-1 * var(--coach-lift, 0px));
  transition: translate var(--motion-move) var(--ease-out);
}
/* בזמן מדידה, ובשינויים שאינם תנועה (סיבוב מסך, טעינת גופן, החלפת
   שפה) — המיקום מתעדכן בבת אחת ולא נוסע. */
.coach.is-anchoring { transition: none; }
.coach[hidden] { display: none !important; }
.coach.is-leaving { animation: coach-out var(--motion-fast) var(--ease-in) both; }
/* הטבעת של המערכת לבנה — היא נועדה לקנבס הכחול ונעלמת על הגיליון. */
.coach :focus-visible { outline-color: var(--color-focus-on-light); }

.coach__step {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-xs);
  line-height: var(--typography-line-xs);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-primary-ink);
}
.coach__title {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-lg);
  line-height: var(--typography-line-lg);
  font-weight: var(--typography-weight-bold);
  color: var(--color-text-base);
}
/* neutral ולא muted: --color-text-muted יוצא 3.44:1 מול משטח בהיר,
   כלומר AA לטקסט גדול בלבד — וזה כאן 14px. neutral נותן 5.8:1 בבהיר
   ו-4.6:1 בכהה. */
.coach__body {
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
  color: var(--color-neutral-base);
}

/* נקודות, דילוג והבא בשורה אחת. שורה נפרדת לכפתור הייתה מוסיפה
   כ-56px לגובה הגיליון, וכל פיקסל כאן נגרע מהשטח שבו רואים את
   האלמנט שמוסבר. */
.coach__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-1);
}
.coach .coach__skip { margin-inline-start: auto; color: var(--color-neutral-base); }
/* flex:0 0 auto — בלעדיו הכפתור נדחס בשורה והתווית נשברת לשתי שורות. */
.coach__next { flex: 0 0 auto; inline-size: auto; padding-inline: var(--space-5); white-space: nowrap; }
.coach__dots { display: flex; align-items: center; gap: var(--space-2); }
.coach__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-muted-surface-base);
  transition: inline-size var(--motion-base) var(--ease-out),
              background-color var(--motion-base) var(--ease-out);
}
.coach__dot.is-on { inline-size: 20px; background: var(--color-primary-base); }

/* החלפת שלב: התוכן החדש נכנס בדעיכה קצרה, אחרת הטקסט פשוט מתחלף
   בתוך קופסה שלא זזה וזה נקרא כתקלה ולא כמעבר. */
.coach.is-swapping .coach__step,
.coach.is-swapping .coach__title,
.coach.is-swapping .coach__body {
  animation: coach-swap var(--motion-base) var(--ease-out) both;
}

@keyframes coach-swap { from { opacity: 0; transform: translateY(var(--motion-lift)) } to { opacity: 1; transform: none } }
@keyframes coach-in  { from { opacity: 0; transform: translateY(100%) } to { opacity: 1; transform: none } }
@keyframes coach-out { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(var(--space-4)) } }
@keyframes coach-ring { from { outline-offset: 2px } to { outline-offset: 7px } }

/* =========================================================================
   Loading / splash (nodes 2072:1219, 2039:614)
   ========================================================================= */

.screen--splash {
  align-items: center;
  justify-content: center;
  padding-block: 0;
}
.screen--splash .logo { inline-size: 224px; }
.screen--splash[data-state="hidden"] .logo { opacity: 0; }
.screen--splash[data-state="shown"] .logo {
  opacity: 1;
  transition: opacity var(--motion-dissolve) var(--ease-out);
}

/* =========================================================================
   Registration (node 2173:4992)
   ========================================================================= */

.form { display: grid; gap: 10px; margin-block-start: var(--v-6); }

.passenger { display: grid; gap: 10px; }
.passenger__title {
  margin-block-start: var(--v-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* הסרת נוסע. בלי זה, נוסע שנוסף בטעות חוסם את הטופס לתמיד — הוא ריק,
   ולכן validate() נכשל עליו ואי אפשר להמשיך. */
.passenger__remove {
  flex: 0 0 auto;
  min-block-size: 44px;          /* שטח מגע, גם אם הטקסט קטן */
  padding-inline: var(--space-3);
  border: 0;
  background: none;
  color: var(--color-danger-base);
  font-family: var(--typography-family-body);
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
  font-weight: var(--typography-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.passenger__remove[data-pressed] {
  transform: scale(var(--motion-press-scale));
  transition-duration: var(--motion-press-in);
}

/* ‎.form הוא grid עם gap של 10px, שכבר תורם את המרווח מעל הפוטר. מחסירים
   אותו כדי ש"+ הוסף נוסע" ו"אישור" ישבו בדיוק 8px זה מזה, כמו שאר הזוגות. */
/* הודעת הטופס עצמו — מעל כפתור האישור, במקום מסך שגיאה נפרד.
   אותה שפה חזותית של שגיאת שדה, ברוחב מלא. */
.form__alert {
  margin-block-start: var(--space-3);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-danger-surface);
  color: var(--color-red-700);
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
  text-align: start;
}

.form__foot {
  margin-block-start: calc(var(--space-2) - 10px);
  display: grid;
  gap: var(--space-2);
}

.link-btn {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;          /* minimum touch target */
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: none;
  color: var(--color-white-base);
  font-size: var(--typography-size-sm);
  text-decoration: underline;
  cursor: pointer;
}

.add-passenger {
  inline-size: 100%;
  min-block-size: 44px;
  border: 1.5px dashed var(--color-accent-base);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-accent-base);
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-md);
  font-weight: var(--typography-weight-semibold);
  cursor: pointer;
}
.add-passenger:disabled { opacity: 0.45; cursor: not-allowed; }

/* תוצאת חיפוש מספר הטיסה — שורה שקטה מתחת לשדה. */
.flight-lookup {
  margin: var(--space-1) 0 0;
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
  color: var(--color-text-on-primary-muted);
}
.flight-lookup[hidden] { display: none; }
.flight-lookup[data-state="found"] { color: var(--color-text-on-primary); }
.flight-lookup[data-state="found"] strong { font-weight: var(--typography-weight-semibold); }
.flight-lookup__route { unicode-bidi: isolate; direction: ltr; display: inline-block; }

/* העננים הם קישוט. במסך גבוה הם בגודל המקורי מ-Figma, ובמסך נמוך הם
   הראשונים לוותר על גובה — לפני כל אלמנט שהמשתמש צריך לגעת בו. */
.clouds {
  align-self: center;
  inline-size: 253px;
  max-block-size: clamp(46px, 20.7dvh, 190px);
  block-size: auto;
  object-fit: contain;
  margin-block-start: var(--v-6);
  margin-block-end: var(--v-3);
  pointer-events: none;
}
.clouds--sm { inline-size: 137px; max-block-size: clamp(34px, 11.2dvh, 103px); }
/* העננים כבר מקבלים סולם נזיל דרך max-block-size למעלה, שמגיע לגודל
   ה-Figma במסך גבוה ומתכווץ באותו יחס כמו איורי התוצאה. מה שהרס את זה
   היה flex-shrink: במסך טופס ארוך הם היו האלמנט הגמיש היחיד, ונמעכו עד
   min-block-size — 36% מגודל העיצוב בטלפון רגיל, במקום 79% כמו המטוס.
   עכשיו הם לא נמעכים, וה-clamp לבדו קובע. מסך שנשאר ארוך מדי פשוט
   נגלל, וזה כבר הוגדר ב-.screen עם overflow-y: auto. */
.clouds { flex: 0 0 auto; }
.screen > :not(.clouds):not(.landing__art):not(.result__art) { flex-shrink: 0; }

/* =========================================================================
   Flight card + time chips (nodes 4014:2291 / 2072:1179)
   ========================================================================= */

/* flex ולא grid: הפתיחה והסגירה מכווצות את התמונה ואת רשימת הנוסעים
   לגובה 0, ורק ב-flex margin שלילי מבטל גם את ה-gap שנשאר אחריהן —
   אחרת נשארים 12px ריקים שקופצים בסוף האנימציה. */
.flight-card {
  margin-block-start: var(--v-6);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-base);
  text-align: start;
  inline-size: 100%;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* עוטף חותך: התמונה שומרת על גובהה המלא בזמן שהעוטף נפתח, כך שהיא
   נחשפת כמו וילון במקום להימתח. */
.flight-card__photo-wrap {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.flight-card__photo {
  inline-size: 100%;
  block-size: 125px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.flight-card__route {
  display: block;
  text-align: end;
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-1xl);
  line-height: var(--typography-line-xl);
  font-weight: var(--typography-weight-bold);
  color: var(--color-text-base);
}
.flight-card__meta {
  display: block;
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
  color: var(--color-neutral-base);
  margin-block-start: var(--v-1);
}
.flight-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.flight-card__count {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-md);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-text-base);
}
.flight-card__edit {
  font-size: var(--typography-size-sm);
  color: var(--color-primary-ink);
  text-decoration: underline;
}
/* הרשימה נבנית מהטופס, ולכן מספר השורות משתנה. אין גבהים קבועים:
   המרווחים בין השורות ובין הרשימה למסגרת הלבנה יוצאים מאותם טוקנים,
   כך שנוסע אחד ותשעה נוסעים נראים אותו דבר. */
.flight-card__pax {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--typography-size-sm);
  color: var(--color-text-base);
}
.flight-card__pax > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.flight-card__pax .pax__name { min-inline-size: 0; overflow-wrap: anywhere; }
.flight-card__pax .pax__doc { color: var(--color-neutral-base); white-space: nowrap; }
.flight-card__pax:empty { display: none; }

/* החצי התחתון שנפרש: שעת ההמראה והדלפקים מלוח רשות שדות התעופה, ואחריהם
   הנוסעים. אותם טוקני מרווח כמו שאר הכרטיס, כדי ששורה אחת ותשע שורות
   יישבו באותו יחס למסגרת הלבנה. */
.flight-card__extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.flight-card__when {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-text-base);
}
/* מופיע רק כשללוח יש משהו חריג לומר — ביטול, עיכוב, או טיסה שכבר המריאה. */
.flight-card__status {
  align-self: start;
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
  color: var(--color-danger-base);
}

/* display מפורש על מחלקה גובר על [hidden] של הדפדפן, אז המצב הסגור
   חייב את ההצהרה הזו — בלעדיה הכרטיס נפתח פתוח. */
.flight-card__photo-wrap[hidden],
.flight-card__extra[hidden],
.flight-card__when[hidden],
.flight-card__status[hidden],
.flight-card__pax[hidden],
.slots__mask[hidden] { display: none !important; }

/* שורה אחת שמסבירה למה דווקא השעות האלה. יושבת בין הכרטיס לחלונות,
   צמודה לשני הצדדים באותם 8px, כך שהמשפט והרשת נקראים כבלוק אחד ולא
   כשני אלמנטים שמרחפים בנפרד. */
.slots-note {
  margin-block-start: var(--space-2);
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-xs);
  line-height: var(--typography-line-sm);
  color: var(--color-text-on-canvas);
  text-align: start;
  /* שורה אחת, תמיד. אם שפה כלשהי בכל זאת ארוכה מדי, עדיף קיצור בשלוש
     נקודות מאשר שתי שורות שידחפו את הרשת מטה. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slots-note[hidden] { display: none !important; }
/* רק כשהמשפט באמת מוצג. כשאין נתוני לוח הוא נעלם, ואז .slots חוזר
   למרווח המקורי שלו מהכרטיס ולפריסה של הפריים כפי שהיה. */
.slots-note:not([hidden]) + .slots { margin-block-start: var(--space-2); }

.slots {
  position: relative;          /* מקום העגינה של שכבת העמעום */
  display: grid;
  /* minmax(0,1fr) ולא 1fr: עם 1fr עמודה שהתוכן שלה רחב מהחלק שלה גדלה
     על חשבון האחרות, והשעות הדו-ספרתיות ("20:40-21:00") נשברו לשתי
     שורות רק בחלק מהשבבים. minmax(0,...) מכריח שלוש עמודות זהות. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block-start: var(--v-5);
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.slots legend { padding: 0; }

/* גובה השורה השנייה — זו שנושאת את "מלא". שמורה בכל שבב, גם כשאין בו
   מלל, כדי שכל תשעת השבבים יהיו זהים בדיוק. */
.slots { --slot-tag-line: 13px; }

.slot {
  min-block-size: 46px;
  /* 8px לא הותירו מספיק מקום ל-"20:40-21:00" ברוחב מסך אמיתי — נשארו
     פחות מ-3px, ובמכשיר שמרנדר את הגופן מעט רחב יותר הטקסט נשבר. */
  padding-inline: var(--space-1);
  border: 1px solid var(--color-surface-base);
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
  font-family: var(--typography-family-body);
  font-size: var(--typography-size-sm);
  font-weight: var(--typography-weight-bold);
  /* ספרות ברוחב אחיד: כל תשע השעות יוצאות בדיוק באותו רוחב. */
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-ink);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}
/* שבב פנוי מקבל את אותה שורה שנייה כשורה ריקה, כך שגובהו זהה לשל שבב
   מלא בכל גודל גופן ובכל אחת מארבע השפות — בלי מספר קסם. */
.slot:not([data-full="true"])::after {
  content: "";
  display: block;
  block-size: var(--slot-tag-line);
}
.slot[aria-pressed="true"] {
  background: var(--color-primary-strong);
  border-color: var(--color-white-base);
  color: var(--color-white-base);
}
.slot[data-full="true"] {
  background: var(--color-muted-surface-base);
  border-color: var(--color-muted-surface-base);
  color: var(--color-slate-600);
}
.slot[data-full="true"][aria-pressed="true"] {
  background: var(--color-slate-600);
  color: var(--color-white-base);
}
.slot__full {
  display: block;
  font-size: 10px;
  line-height: var(--slot-tag-line);
  block-size: var(--slot-tag-line);
  font-weight: var(--typography-weight-regular);
}

/* שכבת העמעום מעל החלונות כשהכרטיס פתוח. פעם זו הייתה רצועה נפרדת
   במסך נפרד; היום זו שכבה אחת מעל אותה רשת, והיא גם כפתור החזרה. */
.slots__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  /* בלי פינות מעוגלות: הן היו משאירות פינה חשופה של השבב שמתחת. הקצה
     האטום ממילא באותו צבע של רקע המסך — כחול במצב הבהיר, נייבי במצב
     הכהה — ולכן הריבוע לא נראה. */
  border-radius: 0;
  background: var(--gradient-reveal-from-blue, linear-gradient(160deg, var(--color-canvas-base) 0%, rgb(115 115 115 / 0) 100%));
  cursor: pointer;
}
/* בזמן שהכרטיס פתוח הרשת חתוכה לשורה אחת (הגובה עצמו מונפש ב-JS). */
.slots[data-masked="true"] { overflow: hidden; }

/* =========================================================================
   Success / Fail (nodes 2038:534, 2058:1184)
   ========================================================================= */

.result { align-items: center; }
.result > .header,
.result > .progress { align-self: stretch; inline-size: 100%; }
.result__title { align-self: stretch; text-align: start; margin-block-start: var(--v-5); }
/* איורי התוצאה מתכווצים באותו היגיון כמו איור עמוד הנחיתה */
.result__art {
  inline-size: calc(100% + var(--canvas-gutter));
  max-inline-size: 377px;
  margin-inline: calc(var(--canvas-gutter) / -2);
  margin-block: var(--v-4);
  max-block-size: clamp(150px, 39dvh, 358px);   /* אותו היגיון כמו האיור בעמוד הנחיתה */
  block-size: auto;
  object-fit: contain;
  flex: 0 1 auto;
  min-block-size: 110px;
}
.result > :not(.result__art) { flex-shrink: 0; }
.result .actions { align-self: stretch; inline-size: 100%; margin-block-end: auto; }
.result__reason {
  align-self: stretch;
  margin-block-end: var(--v-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-danger-surface);
  color: var(--color-danger-text);
  font-size: var(--typography-size-sm);
  line-height: var(--typography-line-sm);
}
.result__reason:empty { display: none; }

/* =========================================================================
   Status screens (nodes 2039:541, 2081:1532)
   ========================================================================= */

.page-title { margin-block-start: var(--v-6); text-align: start; }
/* הכותרת דו-גונית כמו כל שאר הכותרות: הבסיס לבן, ורק מילת השייכות
   ("שלי" / "My" / "Мой" / "رحلتي") בכחול. איזו מהמילים זו — משתנה בין
   שפה לשפה, כי סדר המילים שונה, ולכן script.js מסמן את הנכונה. */
.page-title .is-accent { color: var(--color-accent-base); }
.page-title h1 {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-2xl);
  line-height: var(--typography-line-2xl);
  font-weight: var(--typography-weight-bold);
  color: var(--color-white-base);
}

.pass-shell {
  display: flex;
  flex-direction: column;
  gap: var(--v-2);
  margin-block-start: var(--v-5);
  padding: 13px 14px clamp(18px, 4.5dvh, 41px);
  border-radius: 14px;
  background: var(--color-pass-shell);
}

.qr-pass {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 15px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-base);
  box-shadow: var(--shadow-pass);
}
.qr-pass__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.qr-pass__thumb { inline-size: 66px; block-size: 66px; }
.qr-pass__meta { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.qr-pass__label {
  font-family: var(--typography-family-heading);
  font-size: 12px;
  font-weight: var(--typography-weight-medium);
  line-height: 18px;
  color: var(--color-slate-600);
}
.qr-pass__time {
  unicode-bidi: isolate;
  font-size: 18px;
  font-weight: var(--typography-weight-semibold);
  line-height: 26px;
  color: var(--color-text-base);
}
.qr-pass__where {
  font-family: var(--typography-family-heading);
  font-size: 11px;
  line-height: 17px;
  color: var(--color-slate-600);
}

/* full-screen pass */
.qr-pass--full { align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-5); }
.qr-pass--full .qr-pass__names {
  font-size: var(--typography-size-md);
  font-weight: var(--typography-weight-bold);
  color: var(--color-text-base);
}
.qr-pass--full .qr-pass__time { font-size: var(--typography-size-1xl); line-height: var(--typography-line-xl); }
.qr-pass--full .qr-pass__code { inline-size: 212px; max-inline-size: 100%; }
.qr-pass--full .qr-pass__scan { font-family: var(--typography-family-heading); font-size: 12px; color: var(--color-slate-600); }

/* Journey timeline (node 2067:830) */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(12px, 2.8dvh, 26px) 17px;
  border-radius: 10px;
  background: var(--color-surface-base);
}

.step { display: flex; flex-direction: row-reverse; gap: 10px; align-items: stretch; }

.step__rail {
  position: relative;
  flex: 0 0 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step__circle {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 27px;
  block-size: 27px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-base);
  color: var(--color-white-base);
  font-family: var(--typography-family-heading);
  font-size: 12px;
  font-weight: var(--typography-weight-bold);
  flex: 0 0 auto;
}
.step--done .step__circle { background: var(--color-success-base); }
.step--current .step__circle { background: var(--color-primary-base); }
.step__circle img { inline-size: 13px; }

.step__line {
  flex: 1 1 auto;
  inline-size: 0;
  border-inline-start: 2px dashed var(--color-neutral-base);
  margin-block: 2px;
}
.step--done .step__line { border-color: var(--color-success-base); }
.step:last-child .step__line { display: none; }

.step__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-end: var(--v-2);
}
.step__content { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; }
.step__content img { inline-size: 20px; block-size: 20px; flex: 0 0 auto; }
.step__text { display: flex; flex-direction: column; gap: 2px; }
.step__name {
  font-family: var(--typography-family-heading);
  font-size: 13px;
  font-weight: var(--typography-weight-semibold);
  color: var(--color-text-base);
}
.step__state {
  font-family: var(--typography-family-heading);
  font-size: 11px;
  color: var(--color-text-muted);
}
.step--upcoming .step__name { color: var(--color-text-muted); }
.step__time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: end;
  font-family: var(--typography-family-heading);
  font-size: 11px;
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-base);
}

.step__card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
}
.step__eta {
  font-family: var(--typography-family-heading);
  font-size: 11px;
  font-weight: var(--typography-weight-medium);
  color: var(--color-text-muted);
}

.icon-row {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-block-start: var(--v-5);
}
.icon-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.icon-btn img { inline-size: 60px; block-size: 60px; }

/* =========================================================================
   Theme switch — new control, no Figma source. Styled from existing tokens.
   ========================================================================= */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-block-size: 44px;
  padding-inline: var(--space-3);
  padding-block: var(--space-1);
  border: 1.5px solid var(--color-accent-base);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-accent-base);
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-xs);
  font-weight: var(--typography-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}

.theme-toggle svg { inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] .icon-moon { display: block; }

/* =========================================================================
   שורת ההגדרות המהירות בתחתית עמוד הנחיתה
   שפה בקצה אחד, מצב תצוגה בשני. space-between מצמיד כל אחת לקצה שלה,
   ולכן השורה מתהפכת נכון לבד כשעוברים לאנגלית או לרוסית.
   ========================================================================= */
.landing__foot {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-block-start: auto;          /* נדחפת לתחתית השטח הפנוי */
  padding-block-start: var(--v-3);
}

/* מתג השפה — מלבן קומפקטי מחולק לארבע. הקודים נשארים באותיות לטיניות
   בכל שפה, כי דובר רוסית מזהה "RU" גם כשהממשק בעברית. */
.lang-switch {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1.5px solid var(--color-accent-base);
  /* היה radius-sm וזה בלט: .btn, .lang ו-.slot כולם radius-md. */
  border-radius: var(--radius-md);
}

.lang-switch__btn {
  min-inline-size: 40px;
  min-block-size: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-accent-base);
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-xs);
  font-weight: var(--typography-weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out),
              transform var(--motion-press-out) var(--ease-out);
}
.lang-switch__btn + .lang-switch__btn {
  border-inline-start: 1px solid var(--color-accent-base);
}
.lang-switch__btn[aria-checked="true"] {
  background: var(--color-accent-base);
  color: var(--color-primary-deep);
}
.lang-switch__btn[data-pressed] {
  transform: scale(var(--motion-press-scale));
  transition-duration: var(--motion-press-in);
}

.theme-toggle--landing { flex: 0 0 auto; }
.screen--landing { padding-block-end: var(--v-5); }
.screen--landing .status-card { margin-block-end: var(--v-3); }

.theme-toggle--menu {
  align-self: flex-start;
  margin-block-start: var(--v-3);
  border-color: var(--color-accent-base);
}

/* =========================================================================
   Overlay menu (node 2161:4918)
   ========================================================================= */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgb(0 27 42 / 0.35);
  border: 0;
  padding: 0;
}
.overlay[hidden] { display: none !important; }

.overlay__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 0 var(--canvas-gutter) var(--space-6);
  min-block-size: 304px;
  background: var(--color-surface-base);
  animation: fade-in var(--motion-dissolve) var(--ease-out) both;
}
.overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  padding-block-start: var(--header-top);
  /* the row used to be 44px tall because it held the 44px hamburger; that
     moved out, so pin the height explicitly or the avatar drifts 3px up */
  min-block-size: calc(var(--header-top) + 44px);
}
.overlay__avatar { inline-size: 39px; block-size: 38px; border-radius: var(--radius-pill); }
.overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  inline-size: 100%;
  margin-block-start: var(--v-5);
}
.overlay__link {
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-xl);
  font-weight: var(--typography-weight-semibold);
  line-height: 44px;
  color: var(--color-accent-base);
  text-decoration: underline;
  cursor: pointer;
}

/* =========================================================================
   Narrow phones — the design is 412px, this keeps it honest at 360px
   ========================================================================= */

/* -------------------------------------------------------------------------
   The boarding pass is a "paper document" surface: it stays light in both
   colour modes. A QR code has to be dark-on-light to scan at all, and the
   timeline glyphs are exported from Figma with baked-in navy strokes, so
   flipping this card to navy in dark mode would make both unreadable.
   Figma has no dark variant of these screens — this is a deliberate call,
   not a token value, and it is the one place dark mode departs from light.
   ------------------------------------------------------------------------- */
[data-theme="dark"] .qr-pass,
[data-theme="dark"] .timeline,
[data-theme="dark"] .step__card {
  background: var(--color-white-base);
  border-color: var(--color-gray-100);
}
[data-theme="dark"] .qr-pass__time,
[data-theme="dark"] .qr-pass__names,
[data-theme="dark"] .step__name,
[data-theme="dark"] .step__time { color: var(--color-navy-900); }
[data-theme="dark"] .qr-pass__label,
[data-theme="dark"] .qr-pass__where,
[data-theme="dark"] .qr-pass__scan { color: var(--color-slate-600); }
[data-theme="dark"] .step__state,
[data-theme="dark"] .step__eta,
[data-theme="dark"] .step--upcoming .step__name { color: var(--color-slate-400); }

/* -------------------------------------------------------------------------
   Dark mode · the edges that light mode gets for free
   A white card on a blue canvas needs no outline; navy/800 on navy/950 is
   1.3:1 and does. Most surfaces already carry a --color-border-base hairline
   (.input, .status-card, .settings__row, .lang), so only the three that
   relied on their fill alone are treated here. Where no border exists the
   edge is an inset shadow rather than a real border: a border would grow
   the box by 2px and this file's dark block does not move layout.
   ------------------------------------------------------------------------- */
[data-theme="dark"] .flight-card,
[data-theme="dark"] .status-card__chip {
  box-shadow: inset 0 0 0 1px var(--color-border-base);
}
/* The slot already has a 1px border painted in its own fill colour — in
   light mode deliberately edgeless. Here it only needs a colour. Chosen and
   full chips are excluded: they carry their own border colour, and this
   selector outranks theirs. */
[data-theme="dark"] .slot:not([aria-pressed="true"]):not([data-full="true"]) {
  border-color: var(--color-border-base);
}
/* The profile screen's filled fields are blue-on-white in light mode, where
   the fill alone bounds the field. On a navy card the fill is 1.6:1, so the
   field needs a visible edge to still read as a field. */
[data-theme="dark"] .input--filled { border-color: var(--color-accent-base); }

/* מסך נמוך: הכותרת הראשית יורדת מדרגה אחת. שתי שורות של 48px הן
   96px מתוך תקציב גובה שאין ממנו הרבה — 42px לשורה עדיין קריאות
   לגמרי ומחזירות את כפתורי הפעולה אל מעל קו הקיפול. */
@media (height <= 620px) {
  :root {
    --typography-size-2xl: 34px;
    --typography-line-2xl: 42px;
    --typography-size-3xl: 40px;
    --typography-line-3xl: 48px;
  }
}

@media (width <= 380px) {
  :root {
    --canvas-gutter: var(--space-4);
    --typography-size-2xl: 34px;
    --typography-line-2xl: 42px;
    --typography-size-1xl: 30px;
  }
  .slots { gap: var(--space-1); }
  .slot { font-size: var(--typography-size-xs); }
  .progress__label { font-size: var(--typography-size-xs); }
}

/* =========================================================================
   MICRO-MOTION · פורמט: מובייל בלבד (מגע, בלי hover)
   ארכיטיפ: "רגוע ואמין" — 2.25 מתוך 4. הטוקנים בראש הקובץ.
   כל ההנפשות כאן נוגעות ב-transform וב-opacity בלבד.
   ========================================================================= */

/* ---- 1. בסיס למגע ------------------------------------------------------
   מבטלים את ההדגשה הכחולה של הדפדפן ומחליפים אותה במצב לחיצה משלנו;
   manipulation מוותר על השהיית ה-300ms של זיהוי לחיצה כפולה.            */
:where(button, a, [role="button"], .input, summary) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- 2. מצב לחוץ — הכוכב של מוצר מגע ----------------------------------
   נכנס ב-90ms כדי שהאצבע תרגיש מיד, משתחרר ב-160ms.
   data-pressed נקבע ב-JS על pointerdown ומתנקה גם ב-pointercancel,
   כך שגלילה שביטלה את הלחיצה לא משאירה כפתור תקוע.                      */
.btn,
.slot,
.status-card,
.flight-card,
.icon-btn,
.theme-toggle,
.overlay__link,
.add-passenger,
.link-btn,
.hamburger,
.pass-shell[role="button"],
.slots__mask {
  transition: transform var(--motion-press-out) var(--ease-out),
              background-color var(--motion-press-out) var(--ease-out);
}

.btn[data-pressed]:not([aria-busy="true"]),
.slot[data-pressed],
.status-card[data-pressed],
.flight-card[data-pressed],
.icon-btn[data-pressed],
.theme-toggle[data-pressed],
.overlay__link[data-pressed],
.add-passenger[data-pressed]:not(:disabled),
.link-btn[data-pressed],
.hamburger[data-pressed],
.pass-shell[data-pressed],
.slots__mask[data-pressed] {
  transform: scale(var(--motion-press-scale));
  transition-duration: var(--motion-press-in);
}

/* על אלמנטים גדולים ההקטנה כמעט לא נראית, אז הרקע נושא את המשקל */
.status-card[data-pressed],
.flight-card[data-pressed] { background-color: var(--color-blue-100); }
.slot[data-pressed]:not([aria-pressed="true"]) { background-color: var(--color-blue-100); }
.btn--primary[data-pressed] { background-color: var(--color-primary-strong); }
.btn--secondary[data-pressed] { background-color: var(--color-blue-200); }
.theme-toggle[data-pressed] { background-color: var(--color-blue-100); }

/* הלוגו הוא קישור לבית — הוא מקבל לחיצה, אבל עדינה יותר */
.logo[role="button"] {
  /* the image stays 37px tall; padding lifts the hit area to 45px */
  box-sizing: content-box;
  padding-block: 3.5px;          /* 37 + 7 = 44 exactly, so the header row
                                    height matches the hamburger's 44px and
                                    nothing lands on a half pixel */
  transition: transform var(--motion-press-out) var(--ease-out);
}
.logo[role="button"][data-pressed] {
  transform: scale(0.94);
  transition-duration: var(--motion-press-in);
}

/* ---- 3. מצב מושבת ------------------------------------------------------ */
.btn:disabled,
.add-passenger:disabled {
  opacity: 0.45;
  pointer-events: none;      /* בלי משוב לחיצה על משהו שאי אפשר ללחוץ */
}

/* ---- 4. מצב טעינה ------------------------------------------------------
   ה-PRD מגדיר ספינר קצר בזמן אימות מול נתוני הטיסה. הטקסט נשאר במקום
   ורק נעשה שקוף, כך שרוחב הכפתור לא קופץ.                               */
.btn[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
  position: relative;
}
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inline-size: 20px;
  block-size: 20px;
  border: 2px solid currentColor;
  border-block-start-color: var(--color-white-base);
  border-radius: var(--radius-pill);
  color: rgb(255 255 255 / 0.45);
  animation: spin var(--motion-spin) var(--ease-linear) infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ---- 5. מצב פוקוס ------------------------------------------------------
   נשאר חובה גם במובייל: מקלדת חיצונית, Switch Control וקורא מסך.       */
.slot:focus-visible,
.status-card:focus-visible,
.flight-card:focus-visible { outline-color: var(--color-focus-on-light); }

/* ---- 6. שגיאה בשדה — לא מקפיצה, אבל גם לא מתמהמהת --------------------
   המשתמש כבר תקוע, אז ההודעה נכנסת מהר: 140ms בלבד.                    */
.field__error {
  opacity: 0;
  transform: translateY(calc(var(--motion-lift) * -1));
  transition: opacity var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.field.has-error .field__error { opacity: 1; transform: translateY(0); }
.input { transition: border-color var(--motion-fast) var(--ease-out),
                     background-color var(--motion-fast) var(--ease-out); }

/* ---- 7. נוסע חדש נכנס לטופס -------------------------------------------
   בלי אנימציית גובה: רק transform ו-opacity, כדי לא לחשב פריסה מחדש.   */
.passenger--entering {
  animation: block-in var(--motion-base) var(--ease-out) both;
}
@keyframes block-in {
  from { opacity: 0; transform: translateY(calc(var(--motion-lift) * -2)) }
  to   { opacity: 1; transform: translateY(0) }
}

/* ---- 8. תפריט — <dialog> אמיתי -----------------------------------------
   מחליף את ה-div שהיה כאן. נותן מלכודת פוקוס, Escape ושכבה עליונה בחינם.
   @starting-style מגדיר את נקודת ההתחלה של הכניסה בלי JS; בדפדפן ישן
   הפאנל פשוט יופיע מיד, בלי תנועה — התנהגות תקינה, לא שבורה.            */
.overlay {
  margin: 0;
  padding: 0;
  border: 0;
  inset: 0;
  inline-size: 100%;
  max-inline-size: var(--canvas-width);   /* stay inside the phone frame */
  block-size: 100%;
  max-block-size: none;
  margin-inline: auto;
  background: transparent;
  overflow: hidden;
}
.overlay::backdrop {
  background: rgb(0 27 42 / 0.35);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out), overlay var(--motion-base) allow-discrete,
              display var(--motion-base) allow-discrete;
}
.overlay[open]::backdrop { opacity: 1; }
@starting-style { .overlay[open]::backdrop { opacity: 0 } }

.overlay__panel {
  transform: translateY(-100%);
  transition: transform var(--motion-base) var(--ease-out);
}
.overlay[open] .overlay__panel { transform: translateY(0); transition-delay: 60ms; }
@starting-style { .overlay[open] .overlay__panel { transform: translateY(-100%) } }

/* ההמבורגר של התפריט לא נוסע עם הפאנל. הוא יושב בדיוק במקום שבו יושב
   ההמבורגר של הכותרת, מתגלגל במקום, והפאנל מחליק מאחוריו.
   מיקום פיזי (left) בכוונה — הכותרת מציבה אותו בצד שמאל הפיזי גם ב-RTL. */
.hamburger--menu {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--header-top);
  inset-inline-end: var(--canvas-gutter);   /* trailing edge, both directions */
  margin-inline: 0;
}

/* ---- 9. גלגול ההמבורגר -------------------------------------------------
   שלושה <rect> באותה מערכת צירים. הפס העליון לא זז בכלל, האמצעי מחליק
   ימינה 8.31, והתחתון מתקצר מהקצה השמאלי — בדיוק מה שמצויר ב-Figma.     */
.burger { inline-size: 43.25px; block-size: auto; overflow: visible; display: block; }
.burger__bar {
  transform-box: fill-box;
  transition: fill var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out);
}
.burger__bar--top,
.burger__bar--bot { fill: var(--color-white-base); }
.burger__bar--mid { fill: var(--color-accent-base); }

.is-open .burger__bar--top,
.is-open .burger__bar--bot { fill: var(--color-gray-300); }
.is-open .burger__bar--mid { fill: var(--color-primary-ink); transform: translateX(8.31px); }
.is-open .burger__bar--bot { transform-origin: right center; transform: scaleX(0.659); }

/* ---- 10. פס ההתקדמות זז בין השלבים ------------------------------------
   הבר של המסך הנכנס מתחיל מהערך של השלב הקודם ורק אז מתמלא, אחרי
   שהמעבר בין המסכים כבר נחת. שלושת הברים נשארו נפרדים.                  */
.progress__dot { transition: background-color var(--motion-base) var(--ease-out); }
.progress__label { transition: color var(--motion-base) var(--ease-out); }

/* ---- 11. המטוס במסך ההצלחה --------------------------------------------
   הרגע היחיד בכל המוצר שמותר לו לחגוג. נכנס רק אחרי שהמעבר הסתיים.     */
.result__art--celebrate {
  animation: art-in var(--motion-celebrate) var(--ease-out) both;
}
@keyframes art-in {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* התמונות לא נגררות בעצמן — גרירה מובנית של הדפדפן חוטפת את המצביע
   ומבטלת את המחווה שלנו באמצע.                                          */
.screen img { -webkit-user-drag: none; user-drag: none; }

/* ---- 12. גרירה חזרה — שני החיבורים מסוג ON_DRAG שב-Figma --------------
   האלמנט עוקב אחרי האצבע 1:1 בזמן הגרירה, בלי שום easing; ההאטה שייכת
   רק לשחרור. גם touch-action מוגדר במפורש כדי לא להילחם בגלילה.         */
.screen[data-draggable] { touch-action: pan-y; }
.screen.is-dragging { transition: none; }
.screen.is-snapping { transition: transform var(--motion-base) var(--ease-out); }

/* ---- 13. תנועה מופחתת --------------------------------------------------
   פחות תנועה, לא אפס משוב: מבטלים הזזה וקנה מידה, משאירים דעיכות קצרות.
   הספינר הופך לפעימת שקיפות, כי הוא מידע ולא קישוט.                     */
@media (prefers-reduced-motion: reduce) {
  /* פחות תנועה, לא אפס משוב. מנטרלים את הטוקנים עצמם במקום להילחם
     בסלקטורים: כל כלל שמשתמש בהם מפסיק לזוז, והדעיכות נשארות.        */
  :root {
    --motion-press-scale: 1;
    --motion-lift: 0px;
  }
  .overlay__panel,
  .overlay[open] .overlay__panel { transform: none; }
  .passenger--entering { animation: fade-in var(--motion-fast) var(--ease-out) both; }
  /* ההדרכה נכנסת בדעיכה במקום מלמטה, הטבעת מפסיקה לנשום, וההדגמה
     קופאת על הפריים האחרון — זה שמראה את התוצאה. */
  /* הגיליון נדלק במקום להיכנס, ומדלג בין מיקומים במקום לנסוע. */
  .coach { animation: fade-in var(--motion-fast) var(--ease-out) both; transition: none; }
  .coach.is-leaving { animation: fade-out var(--motion-fast) var(--ease-out) both; }
  .screen--landing[data-coach] [data-coach-target] { animation: none; outline-offset: 4px; }
  .result__art--celebrate { animation: fade-in var(--motion-fast) var(--ease-out) both; }
  .is-open .burger__bar--mid,
  .is-open .burger__bar--bot { transform: none; }
  .btn[aria-busy="true"]::after { animation: pulse var(--motion-pulse) var(--ease-out) infinite; }
}
@keyframes pulse { 50% { opacity: 0.35 } }

/* =========================================================================
   מסכי הגדרות — פרופיל / התראות / שפה
   ב-Figma (node 4052:290) המסכים האלה הפוכים לשאר המוצר: קנבס לבן,
   שדות כחולים מלאים עם טקסט לבן. זו בחירה מכוונת בעיצוב, לא טעות.
   ========================================================================= */

.screen--light {
  background: var(--color-surface-base);
  align-items: center;
}

/* הכותרת נשארת ברוחב מלא כמו בכל שאר המסכים — ההמבורגר בקצה ההתחלה,
   הלוגו בקצה הסיום. כך היא מתהפכת נכון גם כשעוברים לאנגלית או לרוסית. */
.screen--light .header { align-self: stretch; }

/* על רקע לבן הלוגו הלבן והפסים הלבנים נעלמים */
.screen--light .burger__bar--top,
.screen--light .burger__bar--bot { fill: var(--color-text-base); }
.screen--light .burger__bar--mid { fill: var(--color-primary-ink); }

.settings__title {
  align-self: center;
  margin-block-start: var(--v-5);
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-xl);
  line-height: var(--typography-line-xl);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-accent-base);
  text-decoration: underline;
  text-align: center;
}

.settings__name {
  margin-block-start: var(--v-6);
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-2xl);
  line-height: var(--typography-line-2xl);
  font-weight: var(--typography-weight-bold);
  color: var(--color-text-base);
  text-align: center;
}

.settings__avatar {
  inline-size: 156px;
  block-size: auto;
  margin-block-start: var(--v-2);
  border-radius: var(--radius-pill);
}

.settings__link {
  margin-block-start: var(--v-2);
  padding: var(--space-3) var(--space-4);   /* 44px touch target */
  min-block-size: 44px;
  border: 0;
  background: none;
  font-size: var(--typography-size-xs);
  line-height: var(--typography-line-xs);
  color: var(--color-info-base);
  text-decoration: underline;
  cursor: pointer;
}

.settings__form {
  align-self: stretch;
  display: grid;
  gap: 10px;
  margin-block-start: var(--v-5);
}
.settings__form--wide { margin-block-start: var(--v-6); gap: var(--space-4); }

/* אזור המחיקה צמוד לכפתור השמירה שמעליו — 8px, כמו כל זוג כפתורים אחר. */
.danger-zone { margin-block-start: var(--space-2); }
.settings__form .btn { margin-block-start: var(--v-6); }

/* שדה מלא — הווריאנט של מסך הפרופיל */
.input--filled {
  background: var(--color-primary-base);
  border-color: var(--color-primary-base);
  color: var(--color-text-on-primary);
}
.input--filled::placeholder { color: var(--color-text-on-primary-muted); }

/* ---- מגירת האווטארים — גלילה אופקית עם עצירה על כל תמונה ------------- */
.avatar-lane {
  align-self: stretch;
  display: flex;
  gap: var(--space-4);
  inline-size: calc(100% + var(--canvas-gutter) * 2);
  margin-inline: calc(var(--canvas-gutter) * -1);
  padding-inline: var(--canvas-gutter);
  padding-block: var(--space-3);
  margin-block-start: var(--v-2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;          /* אצבע אופקית לנו, אנכית לדפדפן */
}
.avatar-lane::-webkit-scrollbar { display: none; }
.avatar-lane[hidden] { display: none !important; }

.avatar-lane__item {
  flex: 0 0 auto;
  padding: 0;
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  scroll-snap-align: center;
  cursor: pointer;
  line-height: 0;
  transition: transform var(--motion-press-out) var(--ease-out),
              border-color var(--motion-base) var(--ease-out);
}
.avatar-lane__item img { inline-size: 96px; block-size: auto; border-radius: var(--radius-pill); }
.avatar-lane__item[aria-checked="true"] { border-color: var(--color-primary-ink); }
.avatar-lane__item[data-pressed] {
  transform: scale(var(--motion-press-scale));
  transition-duration: var(--motion-press-in);
}

/* ---- שורת הגדרה עם בורר ---------------------------------------------- */
.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 56px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}
.settings__row-label {
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-md);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-text-base);
}

.select {
  min-block-size: 44px;
  min-inline-size: 104px;
  padding-inline: var(--space-3);
  border: 1.5px solid var(--color-primary-ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface-base);
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-sm);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-primary-ink);
  cursor: pointer;
}

/* ---- רשימת שפות -------------------------------------------------------- */
.lang-list {
  align-self: stretch;
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--v-6);
}

.lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 56px;
  padding-inline: var(--space-4);
  border: 1.5px solid var(--color-border-base);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  font-family: var(--typography-family-heading);
  font-size: var(--typography-size-lg);
  font-weight: var(--typography-weight-semibold);
  color: var(--color-text-base);
  cursor: pointer;
  transition: transform var(--motion-press-out) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              background-color var(--motion-base) var(--ease-out);
}
.lang[aria-checked="true"] {
  border-color: var(--color-primary-ink);
  background: var(--color-surface-base);
  color: var(--color-primary-ink);
}
.lang[aria-checked="true"]::after {
  content: "";
  inline-size: 20px; block-size: 20px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-ink);
  /* סימן וי לבן כ-SVG מוטבע — בלי קובץ נוסף ובלי פשרה על הצורה */
  background-image: var(--icon-check);
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}
.lang[data-pressed] {
  transform: scale(var(--motion-press-scale));
  transition-duration: var(--motion-press-in);
}
.lang__note {
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
  font-family: var(--typography-family-body);
  font-size: 11px;
  font-weight: var(--typography-weight-bold);
  text-transform: uppercase;
}


/* =========================================================================
   כיוון: אנגלית ורוסית הן LTR
   ארבעה כללים בקובץ משתמשים ב-row-reverse כדי לכפות סדר פיזי מסוים
   (המסילה של פס ההתקדמות ושל ציר המסע רצות תמיד משמאל לימין, כמו ב-Figma).
   ב-LTR הכיוון של row-reverse מתהפך, ולכן הם חוזרים ל-row.
   ========================================================================= */

/* פס ההתקדמות: שלב 1 נשאר בקצה השמאלי הפיזי, שם מתחילה גם ההתמלאות */
[dir="ltr"] .progress__labels { flex-direction: row; }

/* ציר המסע: המסילה נשארת משמאל, הטקסט לצידה, השעות בקצה הנגדי */
[dir="ltr"] .step,
[dir="ltr"] .step__body,
[dir="ltr"] .step__content { flex-direction: row; }
[dir="ltr"] .step__time { text-align: start; }