/* ==========================================================================
   base.css — tokens, reset, typography, layout shell
   Tokens extracted from v11/index.php. Light theme per the target screenshots.
   ========================================================================== */

@font-face {
  font-family: "Hespress";
  src: url("../fonts/Hespress-Medium.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Hespress";
  src: url("../fonts/Hespress-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Hespress";
  src: url("../fonts/Hespress-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand */
  --c-primary: #F6252F;
  --c-primary-hover: #b82020;
  --c-primary-soft: #fff5f5;
  --c-primary-tint: #fff0f0;

  /* Accent — selection state, from the screenshots */
  --c-accent: #5b5bf5;
  --c-accent-soft: #eef0ff;

  /* Status */
  --c-success: #16a34a;
  --c-success-soft: #f0fdf4;
  --c-success-text: #15803d;
  --c-danger: #dc2626;
  --c-danger-soft: #fef2f2;
  --c-warning-bg: #fff8e6;
  --c-warning-text: #8a6d1f;

  /* Neutrals */
  --c-ink: #1a1a1a;
  --c-body: #333333;
  --c-muted: #666666;
  --c-faint: #aaaaaa;
  --c-line: #e0e0e0;
  --c-field: #fafafa;
  --c-surface-2: #f5f5f5;
  --c-white: #ffffff;
  --c-focus: #36454f;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 50px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;

  /* Shadows */
  --sh-card: 0 6px 18px rgba(224, 8, 8, .16);
  --sh-hover: 0 5px 16px rgba(224, 8, 8, .10);
  --sh-focus: 0 0 0 3px #dbe5eb;

  /* Control height — every interactive row matches */
  --h-control: 54px;

  /* Viewport, synced from JS against visualViewport */
  --form-vh: 100dvh;

  /* ── Motion ──────────────────────────────────────────────────────────
     One set of curves so everything moves like it belongs together.
     `--e-out` decelerates for things arriving, `--e-spring` overshoots
     slightly for things being selected, `--e-soft` is for colour and
     size changes that should not draw attention to themselves. */
  --e-out: cubic-bezier(.16, .84, .34, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);

  --d-fast: .16s;
  --d-base: .24s;
  --d-slow: .4s;

  /* Gap between staggered list items as a step enters. */
  --stagger: 45ms;
}

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

/* ── Bidirectional text ───────────────────────────────────────────────────
   The page flows LTR, but the copy is Arabic. Without help, an LTR paragraph
   reorders the runs of a mixed string: «عندي VPN خدام وقدرت ندخل للتطبيقات»
   renders as «خدام وقدرت ندخل للتطبيقات VPN عندي» — the words are all there
   but the sentence is wrong.

   `unicode-bidi: plaintext` derives each paragraph's direction from its own
   first strong character, so Arabic sentences keep their internal order
   whatever the page direction is. Applied to every element that holds copy
   rather than to a container, because it works per paragraph. */
.step-title,
.step-subtitle,
.qa-label,
.qa-head-cols span,
.rating-label,
.rating-header-title,
.agent-name,
.method-title,
.method-note,
.mic-hint,
.mic-label,
.audio-ctl-label,
.cam-btn,
.summary-key,
.summary-val,
.capture-note span,
.permission-steps,
.btn-label,
.review-id,
.error-text,
.upload-hint,
.stage-hint span {
  unicode-bidi: plaintext;
}

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

body {
  font-family: "Hespress", Arial, sans-serif;
  direction: ltr;
  color: var(--c-body);
  background: var(--c-white);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── App shell ─────────────────────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  height: var(--form-vh, 100dvh);
  max-height: var(--form-vh, 100dvh);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s-5);
  /* Trailing padding is the base padding plus the iOS home-indicator inset,
     so the footer controls never sit under the indicator. */
  padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  position: relative;
  overflow: hidden;
}

/* Touch devices only: pin the shell to the VISUAL viewport.

   A desktop browser has no software keyboard, its visual and layout viewports
   agree, and the shell already sits correctly in normal flow — so desktop
   keeps exactly the layout it has today. */
@media (pointer: coarse), (max-width: 640px) {
  .app {
    position: fixed;
    left: 0;
    right: 0;
    /* --vv-top is visualViewport.offsetTop: how far the visible area has slid
       down the layout viewport when the keyboard opens. Without it the shell
       stays pinned to the layout viewport and its bottom edge — carrying the
       footer — ends up underneath the keyboard. */
    top: var(--vv-top, 0px);
  }

  /* The shell is fixed and full-height, so the document behind it must not
     scroll as well; two nested scrollers is what makes a mobile page feel
     like it is fighting the user. `.app-body` remains the one scroller. */
  body {
    overflow: hidden;
    overscroll-behavior: none;
  }
}

.app-header {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-5);
}

/* Close button leads the header row, so it sits top-left in LTR. */
.close-btn {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  order: -1;
}
.close-btn:hover { background: var(--c-surface-2); border-color: var(--c-faint); }
.close-btn svg { width: 17px; height: 17px; }

/* ── Scroll body ───────────────────────────────────────────────────────── */
.app-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  /* Column flex so the active step can stretch: the capture screens need a
     stage that fills the available height, and `flex: 1` inside a plain
     block scroll container has nothing to grow against. */
  display: flex;
  flex-direction: column;
}

.step { display: none; flex-direction: column; }
.step.active {
  display: flex;
  flex: 1 0 auto;          /* grow to fill, never shrink below content */
  animation: stepEnter .3s ease both;
}
.step.active.slide-next { animation: stepSlideNext .4s cubic-bezier(.16,.84,.34,1) both; }
.step.active.slide-prev { animation: stepSlidePrev .4s cubic-bezier(.16,.84,.34,1) both; }

@keyframes stepEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Steps travel left-to-right: "next" enters from the left, "back" from the
   right, matching the page's LTR direction. */
@keyframes stepSlideNext {
  from { opacity: 0; transform: translateX(-42px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes stepSlidePrev {
  from { opacity: 0; transform: translateX(42px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Staggered entrance ───────────────────────────────────────────────────
   List items rise in sequence as their step arrives, so a screen full of
   options reads top-to-bottom instead of appearing as one wall. The delay is
   deliberately short: the last item of the longest list (8 questions) lands
   at ~315ms, well inside the step transition. */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step.active .agent-grid > *,
.step.active .qa-list > *,
.step.active .rating-list > *,
.step.active .method-list > *,
.step.active .summary-list > * {
  animation: riseIn var(--d-base) var(--e-out) both;
}

.step.active .agent-grid > *:nth-child(1),
.step.active .qa-list > *:nth-child(1),
.step.active .rating-list > *:nth-child(1),
.step.active .method-list > *:nth-child(1),
.step.active .summary-list > *:nth-child(1) { animation-delay: calc(var(--stagger) * 0); }

.step.active .agent-grid > *:nth-child(2),
.step.active .qa-list > *:nth-child(2),
.step.active .rating-list > *:nth-child(2),
.step.active .method-list > *:nth-child(2),
.step.active .summary-list > *:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }

.step.active .agent-grid > *:nth-child(3),
.step.active .qa-list > *:nth-child(3),
.step.active .rating-list > *:nth-child(3),
.step.active .method-list > *:nth-child(3),
.step.active .summary-list > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }

.step.active .agent-grid > *:nth-child(4),
.step.active .qa-list > *:nth-child(4),
.step.active .summary-list > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }

.step.active .agent-grid > *:nth-child(5),
.step.active .qa-list > *:nth-child(5),
.step.active .summary-list > *:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }

.step.active .agent-grid > *:nth-child(6),
.step.active .qa-list > *:nth-child(6),
.step.active .summary-list > *:nth-child(6) { animation-delay: calc(var(--stagger) * 5); }

.step.active .agent-grid > *:nth-child(7),
.step.active .qa-list > *:nth-child(7),
.step.active .summary-list > *:nth-child(7) { animation-delay: calc(var(--stagger) * 6); }

.step.active .agent-grid > *:nth-child(n + 8),
.step.active .qa-list > *:nth-child(n + 8),
.step.active .summary-list > *:nth-child(n + 8) { animation-delay: calc(var(--stagger) * 7); }

/* Headings lead the list in. */
.step.active > .step-title,
.step.active > .step-subtitle,
.step.active > .qa-head,
.step.active > .rating-header {
  animation: riseIn var(--d-base) var(--e-out) both;
}

/* ── Close button ─────────────────────────────────────────────────────── */
.close-btn:active { transform: scale(.92); }
.close-btn { transition: background .2s, border-color .2s, transform var(--d-fast) var(--e-spring); }

/* ── Step headings ─────────────────────────────────────────────────────── */
.step-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 10px;
  text-align: right;
}
.step-subtitle {
    line-height: 23px;
    font-size: 15px;
    color: var(--c-muted);
    margin-top: calc(var(--s-3) * -1);
    margin-bottom: var(--s-4);
    text-align: right;
    padding-top: 8px;
}

/* Column headers for the Yes/No grid */
.qa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
  direction: rtl;
}
.qa-head .step-title { margin-bottom: 0; }
.qa-head-cols {
  display: flex;
  gap: var(--s-3);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  direction: ltr;
  width: 80px;
  padding-left: 15px;
}
.qa-head-cols span { width: 60px; text-align: center; }

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .app { padding: var(--s-4); }
  .step-title { font-size: 16px; }
}

/* Keyboard-open: keep the nav reachable on mobile */
body.keyboard-open .app-header { display: none; }