/* Engineerz app — base styles + responsive shell */
html, body, #__nuxt, *, *::before, *::after {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
html, body {
  margin: 0;
  padding: 0;
}
::selection,
::-moz-selection {
  background: transparent;
  color: inherit;
}

:root {
  font-size: 16px;

  /* Design-system color channels (consumed by Tailwind + legacy CSS vars) */
  --c-navy: 12 36 54;
  --c-navy-600: 23 63 92;
  --c-navy-500: 29 82 115;
  --c-navy2: 23 63 92;
  --c-navy3: 20 52 76;
  --c-ink: 28 28 28;
  --c-gold: 247 167 11;
  --c-gold-600: 217 145 10;
  --c-gold-700: 184 123 8;
  --c-gold-800: 138 90 2;
  --c-gold-500: 232 150 26;
  --c-gold2: 232 150 26;
  --c-goldink: 184 123 8;
  --c-goldsoft: 255 246 230;
  --c-ember: 224 122 44;
  --c-sand: 247 246 243;
  --c-sand-100: 245 243 238;
  --c-sand-200: 238 234 225;
  --c-sand-50: 242 238 230;
  --c-sand-300: 231 226 216;
  --c-sand-75: 246 244 240;
  --c-mist: 245 243 238;
  --c-line: 239 235 227;
  --c-line-100: 244 241 234;
  --c-line-150: 241 238 231;
  --c-line-300: 228 223 213;
  --c-line2: 220 215 204;
  --c-stone: 220 215 204;
  --c-line-200: 236 236 236;
  --c-muted: 138 133 120;
  --c-muted-700: 122 122 122;
  --c-muted-800: 122 117 104;
  --c-muted-600: 110 106 98;
  --c-muted-400: 154 149 141;
  --c-muted2: 154 149 141;
  --c-muted-500: 162 155 144;
  --c-muted-300: 196 190 178;
  --c-muted-200: 199 199 199;
  --c-cream: 255 246 230;
  --c-cream-100: 255 244 223;
  --c-cream-line: 246 231 196;
  --c-cream-line-2: 235 213 163;
  --c-green: 31 157 91;
  --c-green-600: 33 163 91;
  --c-green-50: 234 246 239;
  --c-green-75: 234 247 239;
  --c-wa: 31 168 85;
  --c-wamint: 76 208 125;
  --c-greensoft: 232 244 236;
  --c-greenink: 23 112 60;
  --c-plum: 106 79 163;
  --c-plum-50: 243 239 248;
  --c-plum-100: 231 224 241;
  --c-plum-200: 211 199 230;
  --c-rose: 204 90 96;
  --c-rose-600: 229 72 77;
  --c-rose-50: 252 239 239;
  --c-teal: 42 127 140;
  --c-teal-50: 233 244 245;
  --c-teal-600: 42 122 140;
  --c-sky-50: 238 243 248;
  --c-sky-75: 238 243 247;
  --c-shell: 239 236 230;
  --c-danger: 212 69 43;
  --c-danger-600: 187 58 35;
  --c-danger-bg: 253 237 234;
  --c-danger-line: 246 211 204;
  --c-danger-text: 168 51 29;
  --c-danger-soft: 169 97 79;
  --c-success-line: 203 235 216;
  --c-success-text: 18 105 60;
  --c-success-soft: 63 122 92;
  --c-warning-soft: 154 117 41;

  --navy: rgb(var(--c-navy));
  --gold: rgb(var(--c-gold));
  --cream: rgb(var(--c-sand));
  --line: rgb(var(--c-line));
}
@media (min-width: 640px)  { :root { font-size: 17px; } }
@media (min-width: 768px)  { :root { font-size: 18px; } }
@media (min-width: 1024px) { :root { font-size: 17px; } }

body {
  background: rgb(var(--c-shell));
  font-family: Almarai, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}
a { color: rgb(var(--c-navy)); text-decoration: none; }
a:hover { color: rgb(var(--c-gold)); }

/* phone-width app column — grows with root rem; widens at lg */
.app-shell {
  width: 100%;
  max-width: 25.125rem; /* 402px at 16px root */
  margin-inline: auto;
  background: rgb(var(--c-sand));
  min-height: 100dvh;
  box-shadow: 0 0 60px rgb(var(--c-navy) / 0.09);
}
@media (min-width: 1024px) {
  .app-shell {
    max-width: 72rem;
  }
}

/* layout offset when left nav rail is visible */
.app-frame {
  min-height: 100dvh;
}
@media (min-width: 1024px) {
  .app-frame {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 72rem;
    margin-inline: auto;
  }
  .app-frame > .app-shell {
    flex: 1;
    max-width: none;
    margin-inline: 0;
    box-shadow: none;
  }
}

/* safe-area insets: keep design spacing, grow on notched devices */
.pt-status {
  /* padding-top: max(3.125rem, calc(env(safe-area-inset-top, 0px) + 0.875rem)); */
  padding-top: 0.5rem;
}
.pb-home {
  /* padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 0.5rem)); */
  padding-bottom: 0.5rem;
}

/* horizontal card rails: keep the native scroll, hide the bar */
.app-shell [class*="overflow-x-auto"] { scrollbar-width: none; }
.app-shell [class*="overflow-x-auto"]::-webkit-scrollbar { width: 0; height: 0; }

/* tablet+: card rails become auto-filling grids */
@media (min-width: 768px) {
  .rail {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(var(--rail-min, 7rem), 1fr));
    overflow-x: visible !important;
  }
  .rail > * {
    width: auto !important;
    flex: none;
  }
}

/* hero carousel: full-width slides on tablet+ */
@media (min-width: 768px) {
  .carousel > * {
    width: 100% !important;
    flex: 0 0 100%;
  }
}

@keyframes stepsPulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* shimmer skeleton loading */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer {
  background: linear-gradient(100deg, #e8e4dc 8%, #f5f2eb 18%, #e8e4dc 33%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* skeleton state — put `.skeleton-loading` on a container to mask its real
   content with shimmer blocks, and drop the class once the data is in */
.skeleton-loading {
  pointer-events: none;
  user-select: none;
}
.skeleton-loading :is(h1, h2, h3, h4, h5, h6, p, li, a, button, span, i, strong, b, em, small, label, input, textarea, select, img, svg) {
  color: transparent !important;
  text-shadow: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transition: none !important;
  border-radius: 0.625rem !important;
  background: linear-gradient(100deg, #e8e4dc 8%, #f5f2eb 18%, #e8e4dc 33%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.4s linear infinite !important;
}
/* each branch renders one clean block: descendants keep their space but stay hidden */
.skeleton-loading :is(h1, h2, h3, h4, h5, h6, p, li, a, button, span, i, strong, b, em, small, label, input, textarea, select, img, svg) * {
  visibility: hidden !important;
  background: none !important;
  animation: none !important;
}

/* content reveal after skeleton */
@keyframes homeFadeIn {
  from { opacity: 0; transform: translateY(0.375rem); }
  to { opacity: 1; transform: none; }
}
.home-fade-in { animation: homeFadeIn .45s ease both; }

/* ── onboarding (ported from steps-auth) ── */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; }

.diamond {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: rgb(var(--c-gold));
  flex: none;
}

.stripe {
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, .05) 0 12px,
    rgba(255, 255, 255, 0) 12px 24px
  );
}

@keyframes ringPulse {
  0% { transform: scale(.85); opacity: .5; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.ring-pulse { animation: ringPulse 2.4s ease-out infinite; }
.ring-pulse-delay { animation: ringPulse 2.4s ease-out .8s infinite; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.blink { animation: blink 1.2s ease-in-out infinite; }

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 12px 26px rgb(var(--c-navy) / 0.22), 0 0 0 0 rgb(var(--c-gold) / 0.45); }
  50% { box-shadow: 0 12px 26px rgb(var(--c-navy) / 0.22), 0 0 0 .5rem rgb(var(--c-gold) / 0); }
}
.cta-pulse { animation: ctaPulse 2s ease-out infinite; }
.cta-pulse:disabled { animation: none; }

@keyframes ctaSheen {
  0% { transform: translateX(-160%) skewX(-18deg); }
  55%, 100% { transform: translateX(260%) skewX(-18deg); }
}
.cta-sheen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  animation: ctaSheen 2.8s ease-in-out infinite;
  pointer-events: none;
}
.cta-sheen:disabled::after { animation: none; opacity: 0; }

.opt { background: #fff; border: 1px solid rgb(var(--c-line)); }
.opt:hover { border-color: rgb(var(--c-navy)); }
.opt.is-on {
  background: rgb(var(--c-navy));
  border-color: rgb(var(--c-navy));
  box-shadow: 0 12px 26px rgb(var(--c-navy) / 0.18);
}
.opt .opt-dot i { opacity: 0; }
.opt.is-on .opt-dot { background: rgb(var(--c-gold)); border-color: rgb(var(--c-gold)); }
.opt.is-on .opt-dot i { opacity: 1; }
.opt.is-on .opt-t { color: #fff; }
.opt.is-on .opt-s { color: rgb(var(--c-gold)); }

.pick { background: #fff; border: 1px solid rgb(var(--c-line)); }
.pick:hover { border-color: rgb(var(--c-navy)); }
.pick.is-on {
  border-color: rgb(var(--c-wa));
  box-shadow: 0 10px 24px rgb(var(--c-wa) / 0.12);
}
.pick .pick-check { display: none; }
.pick.is-on .pick-check { display: flex; }
.pick.is-on .pick-arrow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ring-pulse,
  .ring-pulse-delay,
  .cta-pulse,
  .cta-sheen::after,
  .blink { animation: none; }
}

/* ── splash / language / welcome (pre-auth) ── */
.stripes {
  background-image: repeating-linear-gradient(
    115deg, rgb(var(--c-navy) / 0.028) 0 16px, rgb(var(--c-navy) / 0) 16px 32px
  );
}

@keyframes splashLoad { from { width: 0% } to { width: 92% } }
.animate-load { width: 0; animation: splashLoad 1.8s cubic-bezier(.2,.7,.3,1) forwards; }

/* Splash entrance + boot bar (ported from splash/splash.html) */
@keyframes splashRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes splashLoadBar {
  from { width: 14%; }
  60% { width: 72%; }
  to { width: 96%; }
}
@keyframes splashMark {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(45deg) scale(1.08); }
}
@keyframes splashLogoIn {
  from {
    opacity: 0;
    transform: scale(0.18);
    filter: blur(6px);
  }
  70% {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
.splash-rise { animation: splashRise .6s cubic-bezier(.2, .8, .25, 1) both; }
.splash-rise-late { animation-delay: .18s; }
.splash-loadbar { animation: splashLoadBar 1.9s ease-in-out infinite alternate; }
.splash-mark { animation: splashMark 1.6s ease-in-out infinite; }
.splash-logo-in {
  transform-origin: center center;
  animation: splashLogoIn .75s cubic-bezier(.16, .84, .32, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .splash-rise,
  .splash-loadbar,
  .splash-mark,
  .splash-logo-in { animation: none; }
  .splash-loadbar { width: 62%; }
  .splash-mark { transform: rotate(45deg); }
}

.lang-card {
  border-color: rgb(var(--c-line));
  box-shadow: 0 8px 22px rgb(var(--c-navy) / 0.04);
  cursor: pointer;
}
.lang-card:hover { border-color: rgb(var(--c-stone)); }
.lang-card .badge { background: rgb(var(--c-sand-100)); color: rgb(var(--c-navy)); }
.lang-card .tick { border-color: rgb(var(--c-stone)); background: transparent; }
.lang-card .check { opacity: 0; }
.lang-card[aria-checked="true"] {
  border-color: rgb(var(--c-navy));
  /* box-shadow: 0 14px 32px rgb(var(--c-navy) / 0.10); */
}
.lang-card[aria-checked="true"] .badge { background: rgb(var(--c-navy)); color: rgb(var(--c-gold)); }
.lang-card[aria-checked="true"] .tick { border-color: rgb(var(--c-gold)); background: rgb(var(--c-gold)); }
.lang-card[aria-checked="true"] .check { opacity: 1; }
.lang-card:focus-visible { outline: 3px solid rgb(var(--c-gold) / 0.55); outline-offset: 3px; }

.dot { width: 7px; background: rgb(var(--c-line)); cursor: pointer; border: 0; padding: 0; }
.dot[aria-current="true"] { width: 22px; background: rgb(var(--c-gold)); }

/* ── payment print ── */
@media print {
  body { background: #fff !important; }
  .app-frame { display: block !important; max-width: none !important; }
  .app-frame > :not(main) { display: none !important; }
  .app-shell {
    max-width: none !important;
    width: 100% !important;
    min-height: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .payments-chrome,
  .payment-print-btn { display: none !important; }
  .payment-card {
    break-inside: avoid;
    box-shadow: none !important;
  }
  body.printing-one .payment-card:not(.print-target) {
    display: none !important;
  }
  @page { margin: 14mm; }
}

.font-mono {
  font-family: Almarai, "Almarai Fallback: BlinkMacSystemFont", "Almarai Fallback: Segoe UI", "Almarai Fallback: Helvetica Neue", "Almarai Fallback: Arial", "Almarai Fallback: Noto Sans", system-ui, sans-serif !important;
}

/* Engineerz — home screen
   Only what Tailwind utilities cannot express: resets, scroll rails, scrim. */

   :root {
    --navy: rgb(var(--c-navy));
    --gold: rgb(var(--c-gold));
    --cream: rgb(var(--c-sand));
    --line: rgb(var(--c-line));
  }
  
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--cream);
    font-family: Almarai, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
  }
  a { color: var(--navy); text-decoration: none; }
  a:hover { color: var(--gold); }
  
  /* horizontal card rails */
  .rail {
    display: flex;
    overflow-x: auto;
    /* scroll-snap-type: x mandatory; */
    /* scroll-behavior: smooth; */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { width: 0; height: 0; }
  .rail > * { scroll-snap-align: start; flex: none; }
  .rail-center > * { scroll-snap-align: center; }
  
  .no-bar { scrollbar-width: none; }
  .no-bar::-webkit-scrollbar { width: 0; height: 0; }
  
  /* diamond section marker */
  .diamond {
    width: 6px; height: 6px; border-radius: 1px;
    background: var(--gold); transform: rotate(45deg); flex: none;
  }
  
  /* image scrim under card titles */
  .scrim { background: linear-gradient(to top, rgb(var(--c-navy) / 0.62), rgb(var(--c-navy) / 0)); }
  
  /* clamp card titles to two lines */
  .clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* play triangle */
  .play-tri {
    width: 0; height: 0;
    border-left: 10px solid var(--navy);
    border-top: 6.5px solid transparent;
    border-bottom: 6.5px solid transparent;
    margin-left: 3px;
  }
  
  /* fade behind the floating mobile tab bar */
  .tab-fade { background: linear-gradient(to bottom, rgb(var(--c-sand) / 0), var(--cream) 40%); }
  
  @media (prefers-reduced-motion: reduce) {
    .rail { scroll-behavior: auto; }
    * { transition: none !important; }
  }
  .hover-black:hover {
    color: rgb(var(--c-navy)) !important;
  }