/* Course Finder ("Help Me Choose") — tool-scoped styles layered on
   tokens.css + app.css, same convention as bess.css / simulator.css.
   Mobile-first: base rules are the 375px view, desktop refinements after.

   Layout (08-Decision-Tree-Plan.md §6): a single-column guided wizard —
   one question per screen, then the country question, then the
   recommendation — instead of the two-column .tool-grid other tools use.
   The column is capped at a comfortable reading width on desktop; on a
   phone it's simply the container. */

/* --- Wizard shell ---------------------------------------------------------- */
.qf-wizard { max-width: 640px; }
.qf-tool-head { padding-bottom: var(--space-4); }
.qf-tool-head h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
@media (min-width: 640px) {
  .qf-tool-head h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
}
.qf-noscript { margin: 0 auto var(--space-6); }
.qf-loading { margin: 0; color: var(--color-text-muted); text-align: center; padding: var(--space-6) 0; }

/* --- Progress row ---------------------------------------------------------- */
.qf-progress-row {
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.qf-progress-row__label {
  flex: none; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 6.5ch; }
.qf-progress {
  flex: 1 1 auto; height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-alt);
  overflow: hidden; }
.qf-progress__bar {
  display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gold);
  transition: width var(--dur-base) var(--ease); }

/* --- The screen (one question / the result) -------------------------------- */
.qf-screen { padding: var(--space-5) var(--space-4); scroll-margin-top: 84px;
  transition: opacity var(--dur-base) var(--ease); }
@media (min-width: 640px) { .qf-screen { padding: var(--space-6); } }
.qf-screen.is-swapping { opacity: 0; }
.qf-screen__eyebrow {
  margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-active); }
.qf-screen__title {
  margin: 0; font-size: var(--text-xl); line-height: var(--lh-xl); color: var(--color-heading);
  text-wrap: balance; outline: none; }
.qf-screen__title:focus-visible { box-shadow: none; }
.qf-screen__help { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.qf-screen .qf-options { margin-top: var(--space-5); }

/* TICKET-26: shown once, only when a shared-link replay had to truncate a
   stale answer — neutral/informational (--info), never alarming, since
   nothing is actually broken. */
.qf-shared-note {
  margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--info-bg); color: var(--info);
  font-size: var(--text-sm); font-weight: var(--fw-medium); }

/* --- Nav row under a screen: Back · hint · Continue (keyboard only) --------- */
.qf-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; margin-top: var(--space-5); font-size: var(--text-sm); }
.qf-nav__hint { color: var(--color-text-muted); font-size: var(--text-xs); }
.qf-nav__hint[hidden] { display: none; }
.qf-back {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-2) 0 0;
  border: 0; background: none; cursor: pointer; font-family: inherit; font-size: var(--text-sm);
  font-weight: var(--fw-medium); color: var(--color-link); }
.qf-back svg { width: 18px; height: 18px; }
.qf-back:hover { color: var(--color-link-hover); }
.qf-back:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.qf-continue { flex: 1 1 100%; }
.qf-continue[hidden] { display: none; }
.qf-continue svg { width: 16px; height: 16px; }
@media (min-width: 480px) { .qf-continue { flex: 0 0 auto; } }
.qf-link {
  border: 0; background: none; padding: 0; margin-left: var(--space-2); cursor: pointer;
  font-family: inherit; font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--color-link);
  text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.qf-link:hover { color: var(--color-link-hover); }

/* --- "Your answers" recap on the result screen ------------------------------ */
.qf-answers { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); }
.qf-answers__title {
  margin: 0 0 var(--space-3); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); }
.qf-answers ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.qf-answers li {
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--color-surface-alt); font-size: var(--text-sm); }
.qf-answers__q { color: var(--color-text-secondary); font-size: var(--text-xs); }
.qf-answers__a { color: var(--color-text); font-weight: var(--fw-medium); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
@media (min-width: 480px) {
  .qf-answers li { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .qf-answers__q { font-size: var(--text-sm); }
}
.qf-nav--result { margin-top: var(--space-5); }

/* --- Answer pills ---------------------------------------------------------- */
/* Flex-wrap, not a fixed grid: option count varies per question. */
.qf-options { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.qf-option {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  /* Sized against mv_configurator's AttributeSelector.tsx — same real
     "pick one of these" pattern, checked directly: font-size already
     matched (text-sm, 14px, both sides), so the bulk a learner flagged on
     a real phone was the padding/min-height, not the type size. Mobile
     keeps a touch-friendly 44px min-height (Apple/Google's own floor,
     down from our earlier 48px); desktop drops the forced min-height
     entirely, same as that reference — a mouse doesn't need a fat target. */
  min-height: 44px; padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: var(--lh-sm);
  text-align: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease); }
@media (min-width: 640px) {
  .qf-option { min-height: 0; padding: 6px var(--space-3); }
}
/* Real radio underneath, visually hidden — same technique as .segmented__opt,
   so keyboard + screen-reader semantics come for free. */
.qf-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qf-option:hover { border-color: var(--grey-400); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.qf-option:active { transform: translateY(0); }
.qf-option.is-selected,
.qf-option:has(input:checked) {
  background: var(--color-primary); color: var(--color-text-on-navy); border-color: var(--color-primary);
  box-shadow: var(--shadow-sm); }
/* When :has() is live, a stale .is-selected on a sibling must not linger. */
.qf-options:has(input:checked) .qf-option.is-selected:not(:has(input:checked)) {
  background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.qf-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Long phrase options ("I'm new to electrical design") read better stretched
   to share the row than shrink-wrapped; short ones ("Yes"/"No") stay pills.
   Phones stack them one per row (tidier than a 2+1 wrap); wider screens
   split them evenly, three-up for exactly three options. */
.qf-options--long .qf-option {
  flex: 1 1 100%; border-radius: var(--radius-md); padding-inline: var(--space-4); }
@media (min-width: 520px) {
  .qf-options--long .qf-option { flex: 1 1 calc(50% - var(--space-3)); }
  /* Three-up only when each pill still gets a readable width; otherwise
     fall back to the 2-column wrap above. */
  .qf-options--long.qf-options--3 .qf-option { flex-basis: calc(33.333% - var(--space-3)); min-width: 22ch; }
}

/* --- Rise-in for cards when the result screen first renders (§B5) ---------- */
/* animation-delay for the 2nd/3rd step is set inline per-step
   (course_finder.js::stepHTML) — .qf-step and .qf-connector alternate as
   siblings, so :nth-of-type can't count "step position" alone. */
@keyframes qf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qf-step .cta, .qf-fallback, .qf-package {
  animation: qf-rise var(--dur-base) var(--ease) both;
  animation-delay: var(--qf-rise-delay, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .qf-screen { transition: none; }
  .qf-step .cta, .qf-fallback, .qf-package, .qf-progress__bar, .qf-option { animation: none; transition: none; }
}

/* --- Recommendation path: numbered/lettered .qf-step cards ----------------- */
/* .cta itself is reused unmodified from app.css; it carries a top margin
   meant for sitting below a calculator result, which the path doesn't want. */
.qf-path .cta { margin-top: 0; }
/* app.css's shared .cta goes thumbnail-left/text-right at >=640px (sized
   for the wide promo banners it was built for) and hides the thumbnail
   entirely below that. Course Finder wants the same stacked layout at
   every width instead — image on top, full-width title below it, price
   button below that — never the side-by-side arrangement, and never no
   thumbnail on a phone. Only override .cta here, never app.css itself,
   since other tools reuse that component in a context where the shared
   behavior is correct. */
.qf-step .cta {
  grid-template-columns: 1fr; padding: var(--space-4); gap: var(--space-2);
  border-radius: var(--radius-lg); }
.qf-step .cta__media { display: block; }
/* A tall/square staff thumbnail (e.g. a portrait equipment photo) would
   otherwise dictate an oversized card height on its own. Cap it to a
   consistent wide aspect ratio and crop (never stretch) whatever staff
   uploaded. */
.qf-step .cta__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* Smaller heading in this narrower card reduces wrapping further, and
   reads better next to the now-more-compact answer pills (§ answer pill
   sizing above) than the 22px size .cta__headline uses elsewhere. */
.qf-step .cta__headline { font-size: var(--text-lg); line-height: var(--lh-lg); }

.qf-step { position: relative; }
/* Left offset shared by the badge and the "then" connector line, so the
   line drops straight out of the badge above it instead of running down
   the middle of the card. Scoped to .qf-path, not :root — this shape is
   specific to the recommendation path, not a sitewide token. */
.qf-path {
  --qf-badge-x: 22px; --qf-badge-d: 30px;
  margin-top: var(--space-5); padding-top: calc(var(--qf-badge-d) / 2); }
.qf-badge {
  position: absolute; top: calc(var(--qf-badge-d) / -2); left: var(--qf-badge-x); z-index: 1;
  width: var(--qf-badge-d); height: var(--qf-badge-d); border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--color-surface);
  background: var(--color-primary); color: var(--color-text-on-navy);
  font-size: var(--text-xs); font-weight: var(--fw-bold); box-shadow: var(--shadow-sm); }
/* An "or" path is a choice, not a sequence — gold + a letter, never a
   number, so it never reads as "do this, then that". */
.qf-path--choice .qf-badge { background: var(--gold); color: var(--color-text-on-gold); }

.qf-step__caption {
  margin: var(--space-3) 0 var(--space-2); padding-left: var(--qf-badge-x);
  font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--lh-sm);
  /* Preserve an intentional line break a staff member typed into the
     reason text (a plain <p>'s default whitespace collapsing would
     silently eat it) — still wraps normally otherwise. */
  white-space: pre-line; }

.qf-connector { height: 36px; position: relative; }
.qf-connector--then .qf-connector__line {
  position: absolute; top: 0; bottom: 0; left: calc(var(--qf-badge-x) + var(--qf-badge-d) / 2 - 1.5px);
  width: 3px; border-radius: var(--radius-pill); background: var(--grey-400); }
.qf-connector--then .qf-connector__arrow {
  position: absolute; bottom: -4px; left: calc(var(--qf-badge-x) + var(--qf-badge-d) / 2 - 9px);
  width: 18px; height: 18px; color: var(--color-primary); }
.qf-connector--or {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-3) var(--qf-badge-x); height: auto; }
.qf-connector__label {
  font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-text-secondary); }

/* --- Merged price + CTA pill ------------------------------------------------ */
.qf-cta-pill {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 48px; margin-top: var(--space-4);
  padding: 0 6px 0 var(--space-5); border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-accent); color: var(--color-text-on-gold); box-shadow: var(--shadow-gold);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  text-align: left; text-decoration: none;
  transition: background var(--dur-fast) var(--ease); }
/* Rendered as a real <a>, so app.css's global `a:hover { color:
   --color-link-hover }` (gold-700) outranks this class's own base color on
   specificity (element+pseudo-class beats a lone class) and would otherwise
   silently swap the pill's navy text for a gold tone barely different from
   the gold-600 hover background — unreadably low contrast. Repeat the
   navy color explicitly here so it wins. */
.qf-cta-pill:hover { background: var(--color-accent-hover); color: var(--color-text-on-gold); }
.qf-cta-pill:active { background: var(--color-accent-active); color: var(--color-text-on-gold); }
.qf-cta-pill:focus-visible { box-shadow: var(--focus-ring); }
.qf-cta-pill__price { flex: 1 1 auto; min-width: 0; }
.qf-cta-pill__arrow {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-text-on-gold); color: var(--color-accent);
  display: grid; place-items: center; }
.qf-cta-pill__arrow svg { width: 16px; height: 16px; }
/* A price that isn't a confident number yet (still muted per E4) shouldn't
   dress up in the gold "buy" treatment — visibly a different, calmer
   action, per the "never look confident about data you're not sure of" rule. */
.qf-cta-pill:has(.qf-cta__price--muted) {
  background: var(--color-primary); color: var(--color-text-on-navy); box-shadow: none; }
.qf-cta-pill:has(.qf-cta__price--muted) .qf-cta-pill__arrow {
  background: var(--navy-100); color: var(--color-primary); }
.qf-cta__price--muted { font-weight: var(--fw-medium); }

/* India-only note (pre-tax pricing, see priceText()'s GST_NOTE_HTML comment
   in course_finder.js) — small and muted so it reads as a footnote next to
   the price, never competing with it. */
.qf-price-gst { font-size: var(--text-xs); font-weight: var(--fw-regular); opacity: 0.75; }

/* --- Package deal banner: sits alongside the individual course CTAs, --- */
/* never replacing them (see course_finder.js::packageHTML). Gold-outlined
   and set apart from the navy .cta cards above it so it reads as a
   bonus offer, not a third course in the path. */
.qf-package {
  margin-top: var(--space-5); padding: var(--space-4);
  border: 1.5px dashed var(--gold); border-radius: var(--radius-lg);
  background: var(--color-surface-alt); }
.qf-package__badge {
  display: inline-block; margin-bottom: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-accent-active); }
.qf-package__text { margin: 0 0 var(--space-4); color: var(--color-text); font-size: var(--text-sm); white-space: pre-line; }
.qf-package .qf-cta-pill { margin-top: 0; }

/* Original (pre-discount) value, struck through, next to the real
   (discounted) amount — both real Price Tracker numbers, per the "never
   fabricate a saving" rule this whole tool follows for prices. */
.qf-package__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.qf-package__original { color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: line-through; }
.qf-package__amount { color: var(--color-heading); font-size: var(--text-lg); font-weight: var(--fw-bold); }
.qf-package__save {
  display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--success-bg); color: var(--success); font-size: var(--text-xs); font-weight: var(--fw-bold); }
/* Standalone here (not inside the gold .qf-cta-pill, where this class
   relies on the pill's own :has() override to stay legible on navy) — an
   explicit muted grey reads correctly against the banner's light background. */
.qf-package__price .qf-cta__price--muted { color: var(--color-text-muted); }

/* --- Broken thumbnail (E6): neutral placeholder, never a broken-image icon -- */
.cta__media--fallback {
  aspect-ratio: 4 / 3; border-radius: var(--radius-md);
  background: var(--color-surface-alt); color: var(--color-text-muted);
  display: grid; place-items: center; }
.cta__media--fallback svg { width: 40px; height: 40px; }

/* --- Known-broken CTA (E5): button stays, click is guarded ----------------- */
.qf-cta__error {
  font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--gold);
  margin: var(--space-3) 0 0; }

/* --- Full-page unavailable state (E1) ------------------------------------- */
.qf-unavailable {
  max-width: 560px; margin: var(--space-8) auto; text-align: center; }
.qf-unavailable h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-3); }
.qf-unavailable p { margin: 0; }
.qf-unavailable__text { color: var(--color-text-secondary); }
.qf-unavailable__back { margin-top: var(--space-5) !important; }

/* Neutral chip variant (tool-scoped for now; promote to app.css only if a
   second tool needs it) — the "Popular courses" badge on the no-match
   fallback below. */
.chip--neutral { background: var(--color-surface-alt); color: var(--color-text-secondary); }

/* --- No-match fallback (E3): honest, not dramatic ------------------------- */
.qf-fallback {
  margin-top: var(--space-5); padding: var(--space-5) var(--space-4);
  border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }
.qf-fallback .chip { margin-bottom: var(--space-3); }
.qf-fallback__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-heading); margin: 0 0 var(--space-2); }
.qf-fallback__text { color: var(--color-text-secondary); margin: 0 0 var(--space-5); }