/* ==========================================================================
   JETT — Base layer. Mobile-first; desktop is an enhancement at the bottom.
   ========================================================================== */

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

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

body {
  min-height: 100dvh;
  background: var(--bg-page);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}
html[lang="ar"] body { font-family: var(--font-arabic), var(--font-latin); }

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* The router focuses each screen's heading so assistive tech announces the new
   view. That is programmatic, not keyboard — it must not paint a ring. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

::selection { background: var(--petrol-300); color: #fff; }

/* --------------------------------------------------------------------------
   Bidi. Arabic and English are peers; direction is a document property and is
   never baked into a translated string.
   -------------------------------------------------------------------------- */
.num, time, .price {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.code, .ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-transform: uppercase;
}
.dir-flip { transition: transform var(--dur-base) var(--ease-out); }
[dir="rtl"] .dir-flip { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Type scale. Both brand faces ship a single weight, so hierarchy comes from
   size, colour and tracking rather than a synthesised bold.
   -------------------------------------------------------------------------- */
.t-display { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: -0.02em; }
.t-h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -0.015em; }
.t-h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.t-h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
.t-body { font-size: var(--fs-md); line-height: var(--lh-normal); }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.t-xs { font-size: var(--fs-xs); line-height: var(--lh-snug); }

/* The reference's letterspaced small-caps supporting line. */
.t-eyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.t-label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.t-muted { color: var(--text-2); }
.t-faint { color: var(--text-3); }
.t-brand { color: var(--jett-navy); }
.t-accent { color: var(--orange-700); }

/* --------------------------------------------------------------------------
   App frame
   -------------------------------------------------------------------------- */
#app {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  margin-inline: auto;
  background: var(--bg-page);
  overflow: clip;
  isolation: isolate;
}

.screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
}
.screen__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-8);
}
.screen__body--gutter { padding-inline: var(--gutter); }
.screen__body--tabbar { padding-bottom: calc(var(--tabbar-h) + var(--sp-6) + var(--safe-b)); }

@keyframes screen-in {
  from { opacity: 0; transform: translate3d(var(--push-from, 16px), 0, 0); }
  to   { opacity: 1; transform: none; }
}
.screen[data-anim="push"] { --push-from: 20px; animation: screen-in var(--dur-base) var(--ease-out) both; }
[dir="rtl"] .screen[data-anim="push"] { --push-from: -20px; }
.screen[data-anim="pop"]  { --push-from: -20px; animation: screen-in var(--dur-base) var(--ease-out) both; }
[dir="rtl"] .screen[data-anim="pop"] { --push-from: 20px; }
.screen[data-anim="fade"] { --push-from: 0px; animation: screen-in var(--dur-base) var(--ease-out) both; }

@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise-in var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-4)); }
.row { display: flex; align-items: center; gap: var(--gap, var(--sp-3)); }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { display: grid; place-items: center; }
.hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 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(--sp-4); top: -100px; z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-4); background: var(--jett-orange); color: #fff;
  border-radius: var(--r-md); transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: calc(var(--safe-t) + var(--sp-3)); }

/* --------------------------------------------------------------------------
   Desktop — the flow stays a phone-width column against a brand backdrop.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  body {
    background: var(--jett-navy);
    background-image: radial-gradient(120% 80% at 78% 0%, rgba(5, 176, 255, 0.22) 0%, rgba(5, 176, 255, 0) 60%);
    background-attachment: fixed;
  }
  #app {
    width: var(--app-max-w);
    min-height: min(900px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    margin-block: 24px;
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow-lg);
  }
  .screen { min-height: min(900px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); }
  .app-stage {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: var(--sp-12); padding-inline: var(--sp-8);
  }
  .app-stage__aside { max-width: 380px; color: #fff; }
  .app-stage__aside--end { justify-self: start; }
}
@media (max-width: 899px) { .app-stage__aside { display: none; } }