/* ═══════════════════════════════════════════════════════════════════
 * /start/ — "ابدأ هدفك" quiz funnel (batch B-13)
 * Every selector below is prefixed .sf- so nothing here can collide with
 * the shared header/footer/cookie-banner chrome that base.njk renders on
 * this same page. Custom properties alias the site's own tokens
 * (_landing.css) rather than inventing new colors — the approved
 * prototype's shapes and spacing are kept, its raw hex values are not.
 * No prefers-color-scheme block: the site has no dark theme anywhere
 * (recipes/recipes-landing.css documents this as a deliberate, tested
 * absence), so this page matches that rather than being the one exception.
 * ═══════════════════════════════════════════════════════════════════ */
/* On :root, not scoped to .sf-page: the quiz overlay (.sf-quiz) is a sibling
   of .sf-page in the markup (a full-screen takeover appended after it, same
   shape as the approved prototype), not a descendant — a custom property
   defined only on .sf-page would never reach it, and every var(--sf-*) used
   inside the quiz would silently resolve to nothing. This file loads only on
   /start/, so :root here cannot leak onto any other page. */
:root {
  --sf-bg: var(--bg-soft);
  --sf-card: var(--white);
  --sf-ink: var(--text);
  --sf-muted: var(--text-soft);
  --sf-green-700: var(--olive-darker);
  --sf-green-600: var(--olive-dark);
  --sf-green-hover: var(--olive-hover);
  --sf-line: var(--border);
  --sf-tint: var(--olive-tint);
  --sf-tint-strong: var(--bg-section);
  --sf-shadow: var(--shadow-lg);
  --sf-radius: 18px;
}
.sf-page {
  background: var(--sf-bg);
  color: var(--sf-ink);
}
.sf-page * { box-sizing: border-box; }
.sf-page button { font: inherit; cursor: pointer; }
.sf-page button:focus-visible,
.sf-page a:focus-visible,
.sf-page input:focus-visible { outline: 3px solid var(--sf-green-600); outline-offset: 2px; border-radius: 8px; }

/* ───── Buttons (page-local — the sitewide .btn is a pill; the approved
   prototype's own buttons are 13px rounded rects, kept as-is here) ───── */
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15.5px; border-radius: 13px; padding: 14px 26px;
  border: 1.5px solid transparent; text-decoration: none; white-space: nowrap;
  transition: transform 150ms var(--ease-out-quart), background 150ms var(--ease-out-quart), border-color 150ms var(--ease-out-quart);
}
.sf-btn:active { transform: scale(0.97); }
.sf-btn-primary { background: var(--sf-green-600); color: var(--white); }
.sf-btn-primary:hover { background: var(--sf-green-hover); }
.sf-btn-ghost { border-color: var(--sf-green-600); color: var(--sf-green-700); background: transparent; }
.sf-btn-ghost:hover { background: var(--sf-tint); }
.sf-btn-outline { border-color: var(--sf-line); color: var(--sf-ink); background: var(--sf-card); }
.sf-btn-outline:hover { border-color: var(--sf-green-600); color: var(--sf-green-700); }
.sf-btn-block { width: 100%; }
.sf-btn svg { flex: none; }

/* ───── Intro (new — indexable, pre-quiz; no equivalent in the prototype) ───── */
.sf-intro {
  padding-block: calc(var(--nav-h) + clamp(28px, 4vw, 48px)) clamp(32px, 4vw, 48px);
  padding-inline: var(--gutter, 20px);
  text-align: center;
}
.sf-intro-inner { max-width: 640px; margin-inline: auto; }
.sf-intro-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sf-tint); color: var(--sf-green-700);
  border: 1px solid color-mix(in srgb, var(--olive) 30%, transparent);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  margin-block-end: 18px;
}
/* Owner feedback (2026-09-13, polish sprint): "أريد التصميم احترافياً
   أكثر" — the intro h1 is bumped to a bigger, more confident scale and its
   weight brought down from 700 to 600, matching the weight every other
   hero H1 on the site already uses (.rl-hero h1, .rcp-title — both 600):
   a heavier 700 read as louder, not more premium, next to those. */
.sf-intro h1 {
  font-size: clamp(32px, 5.4vw, 48px); font-weight: 600; line-height: 1.22;
  letter-spacing: -0.02em; margin: 0 0 16px; color: var(--sf-green-700);
}
.sf-intro-values { display: grid; gap: 10px; max-width: 480px; margin-inline: auto 22px; text-align: start; }
.sf-intro-value { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.75; color: var(--sf-ink); }
.sf-intro-value svg { flex: none; width: 20px; height: 20px; margin-block-start: 2px; color: var(--sf-green-600); }
.sf-intro-cta { margin-block-start: 8px; }
.sf-intro-cta .sf-btn { padding: 16px 40px; font-size: 17px; }
.sf-intro-note { margin-block-start: 14px; font-size: 12.5px; color: var(--sf-muted); }

/* ───── Trust strip (new) — real, build-time numbers only: the exact
   published-recipe count from recipeIndex (never hand-typed — see
   start/index.njk) and the "computed GI" claim the quiz itself already
   makes on its first goal step ("خطط ووصفات بمؤشر جلايسيمي محسوب"), quoted
   here rather than restated differently. No invented statistic. ───── */
.sf-intro-stats {
  display: flex; align-items: stretch; justify-content: center; gap: 18px;
  margin-block-start: 22px; flex-wrap: wrap;
}
.sf-intro-stat { display: flex; align-items: center; gap: 9px; text-align: start; }
.sf-intro-stat-ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sf-tint); color: var(--sf-green-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.sf-intro-stat-ico svg { width: 17px; height: 17px; }
.sf-intro-stat b { display: block; font-size: 14.5px; font-weight: 700; color: var(--sf-green-700); line-height: 1.3; font-variant-numeric: tabular-nums; }
.sf-intro-stat span { display: block; font-size: 11.5px; color: var(--sf-muted); line-height: 1.4; }
.sf-intro-stat-sep { width: 1px; align-self: center; height: 30px; background: var(--sf-line); }
@media (max-width: 420px) { .sf-intro-stat-sep { display: none; } }

/* ───── Sections used before the quiz opens (kept minimal — SEO shell) ───── */
.sf-page .rcp-jumpnav { display: none; } /* defensive: /start never loads the recipe stylesheet, rule kept as a no-op guard only */

/* ───── Quiz overlay ───── */
.sf-quiz {
  position: fixed; inset: 0; z-index: 1000; /* full-screen takeover — same tier as cook-mode/.eeina-share, above the header (100) and cookie banner (90) */
  background: var(--sf-bg); color: var(--sf-ink);
  display: flex; flex-direction: column; overflow-y: auto;
  font-family: var(--font-ar);
}
.sf-quiz[hidden] { display: none; }
.sf-q-head { display: flex; align-items: center; gap: 12px; padding: 14px var(--gutter, 20px) 6px; max-width: 680px; width: 100%; margin-inline: auto; }
.sf-q-back, .sf-q-close {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--sf-line); background: var(--sf-card); color: var(--sf-muted);
}
.sf-q-progress { flex: 1; height: 6px; background: var(--sf-tint-strong); border-radius: 999px; overflow: hidden; }
/* Smoother fill: the site's own decelerate curve instead of plain ease, and
   a touch longer so a two-step jump (e.g. back navigation) doesn't snap. A
   faint gradient on the fill itself (same two greens buttons already use)
   reads less flat than one solid tone at this size. */
.sf-q-progress i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--sf-green-600), var(--sf-green-hover));
  transition: width 420ms var(--ease-out-quart, ease);
}
.sf-q-count { font-size: 12.5px; color: var(--sf-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-q-body { flex: 1; width: 100%; max-width: 680px; margin-inline: auto; padding: 18px var(--gutter, 20px) 48px; }
.sf-q-step[hidden] { display: none; }
.sf-q-kicker { font-size: 13px; font-weight: 600; color: var(--sf-green-600); }
.sf-q-title { font-size: clamp(21px, 5.5vw, 27px); font-weight: 700; margin: 6px 0 0; line-height: 1.35; }
.sf-q-why { font-size: 13.5px; color: var(--sf-muted); margin: 6px 0 0; }
.sf-q-opts { display: grid; gap: 10px; margin-block-start: 18px; }
@media (min-width: 480px) { .sf-q-opts.sf-two { grid-template-columns: 1fr 1fr; } }
.sf-q-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: start; background: var(--sf-card); border: 1.5px solid var(--sf-line); border-radius: 14px;
  padding: 15px 18px; font-size: 16.5px; font-weight: 500; color: var(--sf-ink);
  transition: border-color 150ms var(--ease-out-quart, ease), background 150ms var(--ease-out-quart, ease), box-shadow 150ms var(--ease-out-quart, ease);
}
.sf-q-opt:hover { border-color: var(--sf-green-600); }
/* Selected state, made clearer (owner feedback): border alone read too
   subtle to register at a glance as "this one's chosen" — a soft ring
   (box-shadow, so it never shifts layout the way a thicker border would)
   is added on top of the existing border+tint combination. */
.sf-q-opt[aria-pressed="true"] {
  border-color: var(--sf-green-600); background: var(--sf-tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-green-600) 16%, transparent);
}
.sf-q-opt small { display: block; font-weight: 400; color: var(--sf-muted); font-size: 13px; margin-block-start: 2px; }
/* Icon tile — goal step only (data-set="goal"), same circular tinted-badge
   language .rcp-quick-meta-item/.rcp-gi-macros already use sitewide, so
   this reads as one more instance of an existing pattern, not a new one. */
.sf-q-opt-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sf-tint); color: var(--sf-green-600);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms var(--ease-out-quart, ease), color 150ms var(--ease-out-quart, ease);
}
.sf-q-opt-ico svg { width: 20px; height: 20px; }
.sf-q-opt[aria-pressed="true"] .sf-q-opt-ico { background: var(--sf-green-600); color: #fff; }
.sf-q-opt-text { flex: 1; min-width: 0; }
.sf-q-opt .sf-tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sf-line);
  display: grid; place-items: center; color: #fff;
  transition: background 150ms var(--ease-out-quart, ease), border-color 150ms var(--ease-out-quart, ease);
}
.sf-q-opt .sf-tick svg { width: 13px; height: 13px; opacity: 0; transition: opacity 150ms var(--ease-out-quart, ease); }
.sf-q-opt[aria-pressed="true"] .sf-tick { background: var(--sf-green-600); border-color: var(--sf-green-600); }
.sf-q-opt[aria-pressed="true"] .sf-tick svg { opacity: 1; }

/* Step micro-transition — fade + slight rise, ~200ms, restarted on every
   show() call (start/index.njk toggles this class off/on with a reflow in
   between). Reduced-motion is handled by the site-wide rule further down
   this file, extended to cover .sf-quiz (see that rule's own comment). */
@keyframes sfStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sf-q-step.sf-step-in { animation: sfStepIn 220ms var(--ease-out-quart, ease) both; }
.sf-q-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block-start: 18px; }
.sf-q-field { display: flex; flex-direction: column; gap: 6px; }
.sf-q-field.sf-full { grid-column: 1 / -1; }
.sf-q-field label { font-size: 13.5px; font-weight: 500; color: var(--sf-muted); }
.sf-q-field input {
  font: inherit; color: var(--sf-ink); background: var(--sf-card); border: 1.5px solid var(--sf-line);
  border-radius: 12px; padding: 13px 14px; width: 100%; font-variant-numeric: tabular-nums;
}
.sf-q-field input:focus { border-color: var(--sf-green-600); outline: none; }
.sf-q-feedback { margin-block-start: 14px; background: var(--sf-tint); border: 1px solid var(--sf-line); border-radius: 12px; padding: 11px 15px; font-size: 14px; color: var(--sf-ink); }
.sf-q-feedback[hidden] { display: none; }
.sf-q-next { margin-block-start: 22px; width: 100%; }
.sf-q-consent { display: flex; gap: 10px; align-items: flex-start; margin-block-start: 14px; font-size: 13.5px; color: var(--sf-muted); }
.sf-q-consent input { width: 20px; height: 20px; flex: none; margin-block-start: 3px; accent-color: var(--sf-green-600); }
.sf-q-privacy { font-size: 12.5px; color: var(--sf-muted); margin-block-start: 10px; line-height: 1.7; }

/* ───── Result screen ───── */
/* Hero card, given real depth (owner feedback: "أريد التصميم احترافياً
   أكثر") — a very quiet olive-tinted gradient layer, not a loud fill (the
   identity — cream ground, olive-zeitoun accent — is unchanged, just given
   dimension), plus a two-layer shadow (a tight contact shadow under the
   existing soft blur, the same combination .rcp-gi-widget already uses
   elsewhere on the site) instead of one flat blur. */
.sf-r-hero {
  background: linear-gradient(165deg, var(--sf-tint) 0%, var(--sf-card) 55%);
  border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: 28px 22px;
  text-align: center; box-shadow: 0 1px 3px rgba(46, 90, 24, 0.05), var(--sf-shadow);
}
.sf-r-label { font-size: 14px; color: var(--sf-muted); }
/* Bigger, clearer scale for the headline number, plus a short gradient
   divider under it instead of the sub-line running straight into it. */
.sf-r-kcal { font-size: clamp(52px, 12vw, 68px); font-weight: 700; color: var(--sf-green-700); font-variant-numeric: tabular-nums; line-height: 1.05; margin-block-start: 6px; }
.sf-r-kcal small { font-size: 17px; font-weight: 500; color: var(--sf-muted); }
.sf-r-divider { width: 44px; height: 3px; border-radius: 999px; margin: 14px auto 0; background: linear-gradient(90deg, var(--sf-green-600), var(--sf-green-hover)); }
.sf-r-sub { font-size: 14.5px; color: var(--sf-muted); margin-block-start: 12px; line-height: 1.7; }
/* Macro badges — small linear SVG icons (site's own 256-viewBox stroke
   style, see start/index.njk), never emoji. */
.sf-r-macros { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-block-start: 16px; }
.sf-r-macro { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 999px; padding-block: 5px; padding-inline: 6px 13px; color: var(--sf-ink); }
.sf-r-macro svg { flex: none; width: 15px; height: 15px; color: var(--sf-green-600); }

.sf-r-recipes { margin-block-start: 26px; }
.sf-r-recipes h2 { font-size: 16.5px; font-weight: 700; margin: 0; }
.sf-r-list { display: flex; flex-direction: column; gap: 10px; margin-block-start: 12px; }
/* Result recipe cards — the recipe's real WebP photo (recipeIndex's own
   480×360 card derivative, see _data/startFunnel.js), name, meal tag, and
   calories/GI in the library card's own established text pattern
   (recipe-card.njk: "GI تقديري ١٣ (منخفض جداً)", muted text, no invented
   colour-coding this screen doesn't already have precedent for). Whole
   card is the link. Horizontal media-card shape rather than the library's
   image-TOP grid tile: this list lives in a max-680px overlay column, and
   three image-top tiles side by side here would crush titles the
   library's own 3-per-row desktop grid never has to fit into — everything
   else about the card (border/radius/hover) is that same card's language,
   just laid out for this narrower column. */
.sf-r-card { display: flex; align-items: center; gap: 14px; background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 14px; padding: 10px; text-decoration: none; color: inherit; transition: border-color 160ms var(--ease-out-quart, ease), transform 160ms var(--ease-out-quart, ease), box-shadow 160ms var(--ease-out-quart, ease); }
.sf-r-card:hover { border-color: var(--sf-green-600); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(46, 90, 24, 0.08); }
.sf-r-card-img { flex: none; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--sf-tint-strong); }
.sf-r-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-r-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sf-r-card-title { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--sf-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-r-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-r-card-meal { flex: none; font-size: 11px; font-weight: 600; color: var(--sf-green-700); background: var(--sf-tint); border-radius: 999px; padding: 3px 10px; }
.sf-r-card-gi { color: var(--sf-muted); }

.sf-r-cta { display: grid; gap: 10px; margin-block-start: 24px; }
.sf-r-other { text-align: center; font-size: 13.5px; color: var(--sf-muted); margin-block-start: 16px; }
.sf-r-other a { color: var(--sf-green-700); font-weight: 600; text-decoration: underline; }
.sf-r-disclaimer { font-size: 12.5px; color: var(--sf-muted); text-align: center; margin-block-start: 16px; line-height: 1.7; max-width: 52ch; margin-inline: auto; }

@media (max-width: 420px) {
  .sf-q-fields { grid-template-columns: 1fr 1fr; }
  .sf-r-kcal { font-size: 42px; }
  .sf-r-card-img { width: 72px; height: 72px; }
}

/* .sf-quiz is a SIBLING of .sf-page in the markup (see this file's header
   comment), not a descendant — ".sf-page *" alone has never actually
   reached the quiz overlay's own hover/selected/progress transitions, or
   (new, this sprint) its step-change animation. Extending the selector is
   a correctness fix this sprint's new motion made worth making, not scope
   creep: every transition in this file, old and new, now actually honours
   the setting site-wide policy already promises. */
@media (prefers-reduced-motion: reduce) {
  .sf-page *, .sf-quiz * { animation: none !important; transition: none !important; }
}

@media print {
  .sf-quiz { display: none !important; }
}