/* 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; }
@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: #efece6;
  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: #0c2436; text-decoration: none; }
a:hover { color: #F7A70B; }

/* 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: #F7F6F3;
  min-height: 100dvh;
  box-shadow: 0 0 60px rgba(12, 36, 54, .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: 1.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: #F7A70B;
  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; }

.opt { background: #fff; border: 1px solid #EFEBE3; }
.opt:hover { border-color: #0c2436; }
.opt.is-on {
  background: #0c2436;
  border-color: #0c2436;
  box-shadow: 0 12px 26px rgba(12, 36, 54, .18);
}
.opt .opt-dot i { opacity: 0; }
.opt.is-on .opt-dot { background: #F7A70B; border-color: #F7A70B; }
.opt.is-on .opt-dot i { opacity: 1; }
.opt.is-on .opt-t { color: #fff; }
.opt.is-on .opt-s { color: #F7A70B; }

.pick { background: #fff; border: 1px solid #EFEBE3; }
.pick:hover { border-color: #0c2436; }
.pick.is-on {
  border-color: #1FA855;
  box-shadow: 0 10px 24px rgba(31, 168, 85, .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,
  .blink { animation: none; }
}

/* ── splash / language / welcome (pre-auth) ── */
.stripes {
  background-image: repeating-linear-gradient(
    115deg, rgba(12, 36, 54, .028) 0 16px, rgba(12, 36, 54, 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; }

.lang-card {
  border-color: #EFEBE3;
  box-shadow: 0 8px 22px rgba(12, 36, 54, .04);
  cursor: pointer;
}
.lang-card:hover { border-color: #DCD7CC; }
.lang-card .badge { background: #F5F3EE; color: #0C2436; }
.lang-card .tick { border-color: #DCD7CC; background: transparent; }
.lang-card .check { opacity: 0; }
.lang-card[aria-checked="true"] {
  border-color: #0C2436;
  box-shadow: 0 14px 32px rgba(12, 36, 54, .10);
}
.lang-card[aria-checked="true"] .badge { background: #0C2436; color: #F7A70B; }
.lang-card[aria-checked="true"] .tick { border-color: #F7A70B; background: #F7A70B; }
.lang-card[aria-checked="true"] .check { opacity: 1; }
.lang-card:focus-visible { outline: 3px solid rgba(247, 167, 11, .55); outline-offset: 3px; }

.dot { width: 7px; background: #EFEBE3; cursor: pointer; border: 0; padding: 0; }
.dot[aria-current="true"] { width: 22px; background: #F7A70B; }

/* ── 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: #0c2436;
    --gold: #F7A70B;
    --cream: #F7F6F3;
    --line: #EFEBE3;
  }
  
  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, rgba(12, 36, 54, .62), rgba(12, 36, 54, 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, rgba(247, 246, 243, 0), var(--cream) 40%); }
  
  @media (prefers-reduced-motion: reduce) {
    .rail { scroll-behavior: auto; }
    * { transition: none !important; }
  }
  .hover-black:hover {
    color: #0c2436 !important;
  }