/* ============================================================
   Direction D re-skin — Career Navigator (Step 2: Identify).
   Overrides career-navigator/css/styles.css (loaded before this) to the
   terminal aesthetic. dd-chrome.js injects the top bar / step nav / progress /
   footer, so the page's own header + footer are hidden here. ALL existing
   markup, ids, and JS hooks are preserved — this layer is purely presentational.

   CRITICAL: results.js paints DOMAIN IDENTITY with inline style="color:…" /
   "background-color:…" (real domain hex). A stylesheet !important would beat
   those inline styles and ERASE the domain color the DD spec wants. So we NEVER
   put color/background !important on the JS-inline-colored selectors
   (.result-summary__domain, .result-summary__runner strong, .domain-card__icon,
   .score-table__swatch, .score-table__bar-fill, .domain-rank-row__chip,
   .domain-rank-row__bar-fill, .domain-detail__icon) — we style only their
   typography/layout. Same for
   class-colored domain identity (.domain-card__score-value, .domain-card__bar-fill,
   .domain-card::before) which read var(--domain-*) from styles.css.

   The four assessment lenses are FOUR DIFFERENT UIs (passion = lettered options,
   skill = sliders, market = rank list, purpose = mission checklist) — each
   selection state is skinned to the DD red+selbg treatment.

   #assessment / #results / #explorer start display:none and JS adds --visible
   to reveal them. We NEVER set `display` on those section selectors — only on
   their children — so the show/hide flow keeps working.
   ============================================================ */

/* ---- full-bleed terminal layout ---- */
main { display: block; }
.container { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.container--narrow { max-width: none !important; }
section { border-top: 1px solid var(--line); background: transparent !important; }
#landing { border-top: none; }
.hero, .assessment, .results, .explorer { background: transparent !important; }
#assessment > .container,
#results > .container,
#explorer > .container { padding: 48px 44px !important; }

/* ============ HERO / LANDING ============ */
.hero { padding: 0 !important; color: var(--fg); }
.hero::before { display: none !important; }
.hero__content { max-width: none !important; margin: 0 !important; padding: 54px 44px !important; text-align: left !important; }
/* inject the DD step label on a VISIBLE element (#assessment starts hidden) */
.hero__content::before {
  content: "// step_02 :: identify — career_navigator";
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--red); margin-bottom: 22px;
}
.hero__badge {
  display: inline-block; background: transparent !important; color: var(--faint) !important;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  padding: 0 !important; margin-bottom: 18px; text-transform: none; border: none !important;
}
.hero__badge::before { content: "$ "; color: var(--red); }
.hero__title {
  font-family: var(--font-sans) !important; font-size: clamp(34px,5vw,50px); line-height: 1.18;
  font-weight: 600; letter-spacing: -0.025em; color: var(--fg) !important; margin: 0 0 20px; max-width: 620px;
  background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important;
  -webkit-text-fill-color: var(--fg) !important;
}
.hero__subtitle {
  font-family: var(--font-mono) !important; font-size: 14.5px; line-height: 1.7;
  color: var(--dim) !important; max-width: 540px;
}
.hero__subtitle::before { content: "# "; }

/* value props as a bordered grid */
.value-props {
  display: grid !important; grid-template-columns: repeat(3,1fr); gap: 0 !important;
  margin-top: 40px !important; border: 1px solid var(--line);
}
.value-prop {
  border: none !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; padding: 24px 22px !important; text-align: left !important;
}
.value-prop:last-child { border-right: none !important; }
.value-prop:hover { background: var(--surface) !important; transform: none !important; }
.value-prop__icon { color: var(--red) !important; background: transparent !important; border: none !important; width: auto !important; height: auto !important; margin: 0 0 14px !important; }
.value-prop__title { font-family: var(--font-sans) !important; font-size: 15px; color: var(--fg) !important; font-weight: 600; }
.value-prop__desc { font-family: var(--font-mono); font-size: 12px; color: var(--faint) !important; line-height: 1.5; }

/* ============ BUTTONS (shared) ============ */
.btn { border-radius: 0 !important; font-family: var(--font-mono) !important; font-size: 12px; letter-spacing: 0.05em; }
.btn--primary { background: var(--btn) !important; color: var(--btnfg) !important; border: none !important; }
.btn--primary:hover { background: var(--btn) !important; opacity: 0.9; }
.btn--secondary { background: transparent !important; color: var(--fg) !important; border: 1px solid var(--line) !important; }
.btn--secondary:hover { background: var(--surface) !important; }
.btn--outline { background: transparent !important; color: var(--red) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
.btn--lg { padding: 14px 24px !important; }
.btn:disabled { opacity: 0.4 !important; }

/* ============ ASSESSMENT ============ */
.persistence-notice {
  font-family: var(--font-mono); font-size: 13px; color: var(--red) !important;
  background: transparent !important; border: 1px solid var(--red) !important; border-radius: 0 !important;
}
/* DD RAIL: lens stepper (col 1) + question pane (col 2). The grid lives on the
   always-rendered .container child, so #assessment's display toggle is untouched. */
#assessment > .container {
  display: grid !important;
  grid-template-columns: 280px 1fr;
  grid-template-areas:
    "notice notice"
    "rail   header"
    "rail   live"
    "rail   question"
    "rail   nav";
  gap: 0 !important;
  align-items: start;
}
#persistenceNotice { grid-area: notice; margin: 0 0 24px; }
.assessment__header { grid-area: header; padding: 0 0 18px 36px; margin: 0 !important; text-align: left !important; }
#assessmentLive { grid-area: live; }
#questionContainer { grid-area: question; padding-left: 36px; }
.question-nav { grid-area: nav; padding-left: 36px; }
.progress { grid-area: rail; border-right: 1px solid var(--line); padding: 0 28px 0 0 !important; margin: 0 !important; }

.assessment__section-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--red) !important;
  background: transparent !important; padding: 0 !important; text-transform: lowercase; display: block; margin-bottom: 12px;
}
.assessment__section-label::before { content: "// "; }
.assessment__title { font-family: var(--font-sans) !important; font-size: clamp(24px,3.2vw,34px); font-weight: 600; letter-spacing: -0.02em; color: var(--fg) !important; }

/* progress: small --red fill bar + vertical lens list ("01 passion ▸" …) */
.progress__bar { background: var(--line) !important; border-radius: 0 !important; height: 3px !important; }
.progress__fill { background: var(--red) !important; border-radius: 0 !important; }
.progress__steps {
  display: flex !important; flex-direction: column; align-items: stretch !important;
  margin-top: 22px !important; gap: 0 !important;
}
.progress__step {
  display: flex !important; align-items: center; gap: 10px; flex: none !important;
  border: 1px solid var(--line); border-bottom: none; padding: 12px 14px;
  font-family: var(--font-mono); background: transparent !important;
}
.progress__step:last-child { border-bottom: 1px solid var(--line); }
.progress__step-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--line) !important; border: none !important; flex: none; margin: 0 !important; }
.progress__step--active { background: var(--btn) !important; }
.progress__step--active .progress__step-dot { background: var(--btnfg) !important; }
.progress__step--active .progress__step-label { color: var(--btnfg) !important; }
.progress__step--completed .progress__step-dot { background: var(--red) !important; }
.progress__step-text { display: flex !important; flex-direction: column; gap: 1px; min-width: 0; }
.progress__step-label { display: block !important; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--faint) !important; }
/* Visibly secondary vs. the label above it via size + letter-spacing only
   -- var(--faint) already measures 4.88:1 (light) / 6.08:1 (dark), so a
   colour change risked dropping below the 4.5:1 floor; smaller/looser
   type doesn't. */
.progress__step-sub { display: block !important; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--faint) !important; text-transform: lowercase; }
.progress__step--active .progress__step-sub { color: var(--btnfg) !important; }
.progress__step--active .progress__step-label::after { content: " \25B8"; }

/* question pane */
.question-card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
.question-card__number { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--faint) !important; text-transform: lowercase; }
.question-card__text { font-family: var(--font-sans) !important; font-size: clamp(19px,2.4vw,25px) !important; font-weight: 600; color: var(--fg) !important; letter-spacing: -0.015em; }
.question-card__text::before { content: "> "; color: var(--red); }
.lens-intro { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; color: var(--dim) !important; }

/* lens 1 — lettered options */
.question-option {
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important;
  font-family: var(--font-mono);
}
.question-option:hover { border-color: var(--line2) !important; background: var(--surface) !important; }
.question-option--selected { border: 1px solid var(--red) !important; background: var(--selbg) !important; }
.question-option__letter {
  font-family: var(--font-mono); border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--faint) !important;
}
.question-option--selected .question-option__letter { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.question-option__text { font-family: var(--font-mono); color: var(--fg) !important; }
.question-option--selected .question-option__text { color: var(--fg) !important; }
.question-option__check { color: var(--red) !important; }

/* lens 2 — skill sliders (round 2A item #2: unmistakable slider affordance —
   visible track, enlarged contrasting thumb w/ hover+focus ring, bold value
   bubble, pointer cursor). appearance:none on the input hands full control
   of the track/thumb to the pseudo-elements below in every browser. */
.skill-row { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important; }
.skill-row__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.skill-row__name { font-family: var(--font-mono); color: var(--fg) !important; font-size: 13px; }
.skill-row__value {
  font-family: var(--font-mono); color: var(--red) !important; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--red); background: var(--selbg);
  padding: 3px 10px; white-space: nowrap; flex-shrink: 0;
}
.skill-row__desc { font-family: var(--font-mono); color: var(--faint) !important; font-size: 12px; line-height: 1.5; }
.skill-row__slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  margin: 16px 0 4px; background: transparent; cursor: pointer;
}
.skill-row__slider::-webkit-slider-runnable-track { height: 6px; background: var(--line); border: 1px solid var(--line2); }
.skill-row__slider::-moz-range-track { height: 6px; background: var(--line); border: 1px solid var(--line2); }
.skill-row__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px;
  border-radius: 50%; background: var(--red); border: 3px solid var(--cardbg); box-shadow: 0 0 0 1px var(--red);
  cursor: pointer; transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.skill-row__slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--red); border: 3px solid var(--cardbg);
  box-shadow: 0 0 0 1px var(--red); cursor: pointer; transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.skill-row__slider:hover::-webkit-slider-thumb { transform: scale(1.08); }
.skill-row__slider:hover::-moz-range-thumb { transform: scale(1.08); }
.skill-row__slider:focus-visible { outline: none; }
.skill-row__slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring), 0 0 0 1px var(--red); }
.skill-row__slider:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring), 0 0 0 1px var(--red); }

/* lens 3 — rank list */
.rank-list { list-style: none; }
.rank-item { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important; }
.rank-item__pos { font-family: var(--font-mono); color: var(--red) !important; background: transparent !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
.rank-item__label { font-family: var(--font-sans) !important; color: var(--fg) !important; font-weight: 600; font-size: 13.5px; }
.rank-item__desc { font-family: var(--font-mono); color: var(--faint) !important; font-size: 12px; line-height: 1.5; }
.rank-btn { font-family: var(--font-mono); background: transparent !important; color: var(--dim) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
.rank-btn:hover:not(:disabled) { color: var(--red) !important; border-color: var(--red) !important; }
.rank-btn:disabled { opacity: 0.35 !important; }

/* lens 4 — mission checklist */
.mission-item { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important; }
.mission-item:hover { border-color: var(--line2) !important; background: var(--surface) !important; }
.mission-item--selected { border: 1px solid var(--red) !important; background: var(--selbg) !important; }
.mission-item__check { border: 1px solid var(--line) !important; border-radius: 0 !important; color: var(--red) !important; }
.mission-item--selected .mission-item__check { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.mission-item__label { font-family: var(--font-sans) !important; color: var(--fg) !important; font-weight: 600; font-size: 13.5px; }
.mission-item__desc { font-family: var(--font-mono); color: var(--faint) !important; font-size: 12px; line-height: 1.5; }

/* nav */
.question-nav { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }

/* ============ RESULTS ============ */
.results__header { text-align: left !important; }
/* DD "analysis_complete ✓" banner (--green mono) above the results title */
.results__header::before {
  content: "analysis_complete \2713";
  display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--green); margin-bottom: 12px;
}
.results__title { font-family: var(--font-sans) !important; font-size: clamp(26px,3.4vw,38px); font-weight: 600; letter-spacing: -0.02em; color: var(--fg) !important; }
.results__subtitle { font-family: var(--font-mono) !important; font-size: 13.5px; color: var(--dim) !important; line-height: 1.6; }

/* result summary — domain name is JS-inline-colored: style type/layout ONLY,
   and let the color dot inherit that inline color via currentColor. */
.result-summary { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important; }
.result-summary__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--faint) !important; text-transform: uppercase; }
.result-summary__domain { font-family: var(--font-sans) !important; font-size: clamp(24px,3vw,34px); font-weight: 600; letter-spacing: -0.02em; }
.result-summary__domain::before {
  content: ""; display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%;
  background: currentColor; margin-right: 0.5em; vertical-align: 0.05em;
}
.result-summary__confidence { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
.result-summary__confidence-value { font-family: var(--font-mono); color: var(--green) !important; }
.result-summary__confidence-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--faint) !important; }
.result-summary__explanation { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: var(--dim) !important; }
.result-summary__runner { font-family: var(--font-mono); font-size: 13px; color: var(--faint) !important; }

/* domain cards — domain identity (score-value, bar-fill, ::before accent, icon)
   stays domain-colored. Only chrome/typography is reskinned.
   round 2A item #5: #domainCards renders ONLY the secondary card now (the
   primary IS the summary above), so the base 2-col grid left it half-width
   with a blank second column. Force a single full-width column always. */
.domain-cards { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.domain-card { border: none !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important; box-shadow: none !important; }
.domain-card:hover { transform: none !important; box-shadow: none !important; background: var(--surface) !important; }
.domain-card--primary { border-color: var(--line) !important; }
.domain-card__badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--red) !important; background: transparent !important; border: 1px solid var(--red) !important; border-radius: 0 !important; text-transform: uppercase; }
.domain-card__title { font-family: var(--font-sans) !important; font-size: 16px; font-weight: 600; color: var(--fg) !important; letter-spacing: -0.01em; }
.domain-card__icon { border-radius: 0 !important; } /* keep JS inline bg/color (domain hex) */
.domain-card__score-value { font-family: var(--font-mono); } /* keep var(--domain-*) color */
.domain-card__score-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--faint) !important; }
.domain-card__bar { background: var(--line) !important; border-radius: 0 !important; }
.domain-card__bar-fill { border-radius: 0 !important; } /* keep var(--domain-*) color */
.domain-card__desc { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; line-height: 1.6; }
.domain-card__detail-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--faint) !important; text-transform: uppercase; }
.domain-card__detail-value { font-family: var(--font-mono); font-size: 12px; color: var(--fg) !important; }
.domain-card__detail-value:last-child, .domain-card__detail--salary .domain-card__detail-value { color: var(--green) !important; }

/* score vector — radar canvas is JS-painted hex (JS off-limits); box it with
   --line. The SR table is the visible <900px fallback; reskin it fully. */
.score-vector { border: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; }
.score-vector__title { font-family: var(--font-sans) !important; font-size: 16px; font-weight: 600; color: var(--fg) !important; }
.score-vector__chart { border: 1px solid var(--line); background: var(--cardbg) !important; }
.score-table { font-family: var(--font-mono); }
.score-table__caption { font-family: var(--font-mono); font-size: 11px; color: var(--faint) !important; }
.score-table th, .score-table td { border-color: var(--line) !important; color: var(--fg) !important; }
.score-table__row--primary { background: var(--selbg) !important; }
.score-table__tag { font-family: var(--font-mono); font-size: 9px; color: var(--red) !important; border: 1px solid var(--red) !important; border-radius: 0 !important; }
.score-table__swatch { border-radius: 0 !important; } /* keep JS inline bg (domain hex) */
.score-table__bar { background: var(--line) !important; border-radius: 0 !important; }
.score-table__bar-fill { border-radius: 0 !important; } /* keep JS inline bg (domain hex) */
.score-table__pct { font-family: var(--font-mono); color: var(--fg) !important; }

/* next steps */
.next-steps { border: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; }
.next-steps__title { font-family: var(--font-sans) !important; font-size: 18px; font-weight: 600; color: var(--fg) !important; }
.next-steps__title svg { color: var(--red) !important; }
.next-steps__item { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important; }
.next-steps__item-icon { color: var(--red) !important; background: transparent !important; border: none !important; }
.next-steps__item-title { font-family: var(--font-sans) !important; color: var(--fg) !important; font-weight: 600; font-size: 14px; }
.next-steps__item-desc { font-family: var(--font-mono); color: var(--dim) !important; font-size: 13px; line-height: 1.6; }
.next-steps__item-link { font-family: var(--font-mono); font-size: 11px; color: var(--red) !important; }

/* email capture */
.email-capture { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important; }
.email-capture__title { font-family: var(--font-sans) !important; color: var(--fg) !important; font-weight: 600; }
.email-capture__desc { font-family: var(--font-mono); color: var(--dim) !important; font-size: 13px; line-height: 1.6; }
.email-capture__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--faint) !important; text-transform: uppercase; }
.email-capture__input { background: var(--bg) !important; color: var(--fg) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; font-family: var(--font-mono); font-size: 13px; }
.email-capture__success-icon { background: var(--green) !important; border-radius: 0 !important; }
.email-capture__success h4 { font-family: var(--font-sans) !important; color: var(--fg) !important; }
.email-capture__success p { font-family: var(--font-mono); color: var(--dim) !important; }

/* community cta */
.community-cta { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important; }
.community-cta__icon { color: var(--red) !important; background: transparent !important; border: none !important; }
.community-cta__title { font-family: var(--font-sans) !important; color: var(--fg) !important; font-weight: 600; }
.community-cta__desc { font-family: var(--font-mono); color: var(--dim) !important; font-size: 13px; line-height: 1.6; }
.community-cta__btn { background: var(--btn) !important; color: var(--btnfg) !important; border: none !important; border-radius: 0 !important; }

/* ============ EXPLORER ============ */
.explorer__header { text-align: left !important; }
.explorer__title { font-family: var(--font-sans) !important; font-size: clamp(24px,3vw,32px); font-weight: 600; letter-spacing: -0.02em; color: var(--fg) !important; }
.explorer__header p { font-family: var(--font-mono); font-size: 13px; color: var(--dim) !important; }

/* round 2A item #9: the org-chart metaphor tested as unintuitive. Replaced
   with a plain ranked list — one row per domain, score order, primary
   visually emphasized. Re-presents the SAME data the score table shows. */
.domain-ranked-list { display: flex; flex-direction: column; border: 1px solid var(--line); }
.domain-rank-row {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  background: var(--cardbg); border: none; border-bottom: 1px solid var(--line);
  padding: 18px 20px; cursor: pointer; font-family: var(--font-mono); transition: background 0.12s ease;
}
.domain-rank-row:last-child { border-bottom: none; }
.domain-rank-row:hover { background: var(--surface); }
.domain-rank-row--active, .domain-rank-row--primary { background: var(--selbg); }
.domain-rank-row__chip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.domain-rank-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.domain-rank-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.domain-rank-row__name { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--fg); }
.domain-rank-row__badge { display: inline-block; margin-left: 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); border: 1px solid var(--red); padding: 2px 7px; vertical-align: middle; }
.domain-rank-row__pct { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--fg); flex-shrink: 0; }
.domain-rank-row__bar { display: block; height: 6px; background: var(--line); }
.domain-rank-row__bar-fill { display: block; height: 100%; }
.domain-rank-row__desc { font-family: var(--font-mono); font-size: 13px; color: var(--dim); line-height: 1.55; max-width: 640px; }
.domain-rank-row__roles { display: flex; flex-wrap: wrap; gap: 6px; }
.domain-rank-row__role { font-family: var(--font-mono); font-size: 10.5px; color: var(--dim); border: 1px solid var(--line); padding: 3px 8px; }
@media (max-width: 600px) {
  .domain-rank-row { padding: 14px 16px; }
  .domain-rank-row__head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

.domain-detail { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--cardbg) !important; }
.domain-detail__icon { border-radius: 0 !important; } /* keep JS inline bg (domain hex) */
.domain-detail__name { font-family: var(--font-sans) !important; color: var(--fg) !important; font-weight: 600; }
.domain-detail__desc { font-family: var(--font-mono); color: var(--dim) !important; font-size: 13px; line-height: 1.6; }
.domain-detail__section-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--faint) !important; text-transform: uppercase; }
.domain-detail__role { border-bottom: 1px solid var(--line) !important; font-family: var(--font-mono); }
.domain-detail__role-level { color: var(--faint) !important; font-size: 10px; }
.domain-detail__role-title { color: var(--fg) !important; font-size: 12px; }
.domain-detail__role-salary { color: var(--green) !important; font-size: 12px; }
.domain-detail__cert { border: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; font-family: var(--font-mono); }
.domain-detail__cert:hover { border-color: var(--red) !important; }
.domain-detail__cert-name { color: var(--fg) !important; font-size: 12px; }
.domain-detail__cert-org { color: var(--faint) !important; font-size: 10px; }
.domain-detail__skill { font-family: var(--font-mono); font-size: 11px; color: var(--dim) !important; background: transparent !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
.domain-detail__entry { font-family: var(--font-mono); color: var(--dim) !important; font-size: 12px; }

/* ============ TOAST ============ */
.toast { background: var(--cardbg) !important; color: var(--fg) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; font-family: var(--font-mono); font-size: 12px; }
.toast--success { border-color: var(--green) !important; }
.toast--error { border-color: var(--red) !important; }

/* ============ RESPONSIVE (mirrors dd.css breakpoints) ============ */
@media (max-width: 980px) {
  /* collapse the lens rail into a top stepper so the question pane gets full width */
  #assessment > .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "notice"
      "rail"
      "header"
      "live"
      "question"
      "nav";
  }
  .progress { border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 22px 0 !important; margin-bottom: 22px !important; }
  .progress__steps { flex-direction: row !important; }
  .progress__step { flex: 1 !important; border: 1px solid var(--line); border-right: none; border-bottom: 1px solid var(--line); }
  .progress__step:last-child { border-right: 1px solid var(--line); }
  .assessment__header, #questionContainer, .question-nav { padding-left: 0 !important; }
}
@media (max-width: 760px) {
  #assessment > .container, #results > .container, #explorer > .container { padding: 32px 18px !important; }
  .hero__content { padding: 38px 22px !important; }
  .value-props { grid-template-columns: 1fr; }
  .value-prop { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .value-prop:last-child { border-bottom: none !important; }
  .score-vector__body { flex-direction: column !important; }
}
@media (max-width: 520px) {
  /* F2 review (Opus M1): stacking all four steps full-width made the rail
     314px tall, pushing the first answer option below a 664px phone
     fold. A 2x2 grid instead -- each cell is roomier than a squeezed
     4-across flex item was, so the canonical-question labels still fit
     on one line, and the whole rail comes in well under 160px. */
  .progress__steps {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
    margin-top: 12px !important;
  }
  .progress__step {
    flex: none !important;
    padding: 9px 10px !important;
  }
  /* The 980px block above already gives every step border-right:none +
     border-bottom:1px (right for the single 4-across row's true right
     edge only, via :last-child). In a 2x2 grid that leaves the top row's
     right column open on its right edge, and doubles the row1/row2
     divider (row1's border-bottom sits right against row2's inherited
     border-top). Close the right edge on the top-right cell and drop
     row2's top border so only one 1px line separates the rows. */
  .progress__step:nth-child(2) { border-right: 1px solid var(--line); }
  .progress__step:nth-child(3), .progress__step:nth-child(4) { border-top: none; }
}

/* ---- character-strengths capture (VIA lens) ---- */
.via-capture { border:1px solid var(--line); border-top:none; padding:32px 44px; }
.via-capture__label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; color:var(--red); margin-bottom:10px; }
.via-capture__title { font-family:var(--font-sans); font-size:22px; font-weight:600; color:var(--fg); margin:0 0 8px; letter-spacing:-0.01em; }
/* NOTE: title left unchanged — display heading, not reading body copy */
.via-capture__note { font-family:var(--font-mono); font-size:13px; color:var(--dim); line-height:1.6; max-width:700px; margin:0; }
.via-capture__note a { color:var(--red); }
.via-capture__cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.via-capture__col-h { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:var(--faint); text-transform:uppercase; margin-bottom:8px; }
.via-capture__inputs { display:flex; flex-direction:column; gap:8px; }
.via-capture__input { background:var(--cardbg); color:var(--fg); border:1px solid var(--line); border-radius:0; font-family:var(--font-mono); font-size:13px; padding:9px 11px; }
.via-capture__actions { display:flex; align-items:center; gap:14px; margin-top:18px; }
.via-capture__btn { background:var(--btn); color:var(--btnfg); border:none; border-radius:0; font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em; padding:12px 20px; cursor:pointer; }
.via-capture__clear { background:transparent; border:none; color:var(--faint); font-family:var(--font-mono); font-size:12px; cursor:pointer; }
.via-guidance { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.via-guidance__row { font-family:var(--font-mono); font-size:13px; color:var(--dim); border:1px solid var(--line); border-left:2px solid var(--red); padding:9px 12px; }
.via-guidance__row--mind { border-left-color:var(--faint); }
/* round 2A item #8: label part bold so the three readout lines read as
   distinct sections (Lean on… / Mind… / the so-what:), not fluff. */
.via-guidance__k { color:var(--fg); font-weight:700; }
/* round 2A item #7: each strength in these lists gets its one-line
   definition rendered as a muted line underneath (readout "list" treatment —
   chips elsewhere get a title-attr tooltip instead). */
.via-guidance__list { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.via-guidance__item { display:flex; flex-direction:column; }
.via-guidance__item-name { color:var(--fg); }
.via-guidance__item-def { font-size:11px; color:var(--faint); line-height:1.5; margin-top:2px; }

/* one-tap chip picker */
.via-picker__modes { display:flex; gap:0; margin-top:20px; border:1px solid var(--line); width:fit-content; }
.via-picker__mode { background:transparent; color:var(--dim); border:none; border-right:1px solid var(--line); font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; padding:10px 16px; cursor:pointer; }
.via-picker__mode:last-child { border-right:none; }
.via-picker__mode.is-active { background:var(--btn); color:var(--btnfg); }
.via-picker__count { opacity:0.7; margin-left:4px; }
.via-picker__grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.via-chip { background:var(--cardbg); color:var(--dim); border:1px solid var(--line); border-radius:0; font-family:var(--font-mono); font-size:12px; padding:8px 12px; cursor:pointer; transition:border-color .12s, color .12s; }
.via-chip:hover { color:var(--fg); border-color:var(--faint); }
.via-chip--top { border-color:var(--red); color:var(--fg); box-shadow:inset 2px 0 0 var(--red); }
.via-chip--bottom { border-color:var(--faint); color:var(--fg); box-shadow:inset 2px 0 0 var(--faint); opacity:0.8; }
.via-chip__mark { color:var(--red); font-weight:700; }
.via-chip--bottom .via-chip__mark { color:var(--faint); }
@media (max-width:760px){ .via-capture{padding:24px 18px;} .via-capture__cols{grid-template-columns:1fr;} }

/* skills explainer (#24) */
.skillmap { border:1px solid var(--line); border-top:none; padding:32px 44px; }
.skillmap__label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; color:var(--red); margin-bottom:10px; }
.skillmap__title { font-family:var(--font-sans); font-size:22px; font-weight:600; color:var(--fg); margin:0 0 8px; letter-spacing:-0.01em; }
.skillmap__note, .skillmap__tech { font-family:var(--font-mono); font-size:13px; color:var(--dim); line-height:1.6; max-width:720px; }
.skillmap__note { margin:0 0 14px; }
.skillmap__tech { margin:14px 0 0; border:1px solid var(--line); border-left:2px solid var(--faint); padding:10px 12px; }
.skillmap__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.skillmap__list li { font-family:var(--font-mono); font-size:13px; color:var(--dim); }
.skillmap__skill { color:var(--fg); }
.skillmap__arrow { color:var(--red); margin:0 6px; }

/* career-changer on-ramps (#22) */
.onramps { border:1px solid var(--line); border-top:none; padding:32px 44px; }
.onramps__label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; color:var(--red); margin-bottom:10px; }
.onramps__title { font-family:var(--font-sans); font-size:22px; font-weight:600; color:var(--fg); margin:0 0 8px; letter-spacing:-0.01em; }
.onramps__note { font-family:var(--font-mono); font-size:13px; color:var(--dim); line-height:1.6; margin:0 0 20px; }
.onramps__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.onramp { border:1px solid var(--line); border-left:2px solid var(--red); padding:14px 16px; }
.onramp__from { font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--fg); margin-bottom:4px; }
.onramp__to { font-family:var(--font-mono); font-size:12px; color:var(--dim); margin-bottom:8px; }
.onramp__to strong { color:var(--red); }
.onramp__also { color:var(--faint); }
.onramp__why { font-family:var(--font-mono); font-size:13px; color:var(--dim); line-height:1.6; }
.onramp__strengths { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.onramp__tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em; color:var(--dim); border:1px solid var(--line); padding:3px 7px; }
.onramp__step { font-family:var(--font-mono); font-size:12px; color:var(--dim); margin-top:8px; line-height:1.5; }
.onramp__step-k { color:var(--fg); }

/* "why bother?" motivation callout on the strengths capture */
.via-capture__why { font-family:var(--font-mono); font-size:13px; color:var(--dim); line-height:1.65; max-width:760px; margin:10px 0 6px; border-left:2px solid var(--red); padding-left:12px; }
.via-capture__why strong { color:var(--fg); }
.via-capture__why em { color:var(--fg); font-style:italic; }

/* small "explore your primary domain" affordance on the summary */
.result-summary__explore { margin-top:16px; background:transparent; border:1px solid var(--line); color:var(--fg); font-family:var(--font-mono); font-size:12px; letter-spacing:0.03em; padding:9px 16px; cursor:pointer; transition:border-color .12s, color .12s; }
.result-summary__explore:hover { border-color:var(--red); color:var(--red); }

/* skills explainer: 2-column so it fills the width (mapping | the so-what) */
.skillmap__cols { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-top:6px; }
.skillmap__cols .skillmap__list { margin-top:4px; }
.skillmap__cols .skillmap__tech { margin-top:0; }

/* resources block under Your Next Steps (free learning / communities / job boards) */
.ns-resources { margin-top:24px; border-top:1px solid var(--line); padding-top:18px; }
.ns-resources__head { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--red); margin-bottom:14px; }
.ns-resources__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ns-resources__group-h { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
.ns-resources__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ns-resources__list li { font-family:var(--font-mono); font-size:12px; line-height:1.4; }
.ns-resources__list a { color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line); }
.ns-resources__list a:hover { color:var(--red); border-color:var(--red); }
.ns-resources__desc { display:block; color:var(--dim); font-size:11px; margin-top:2px; }
@media (max-width:760px){ .ns-resources__grid{ grid-template-columns:1fr; } }

/* floating "Join the Cybersecurity Circle" card (revealed at Next Steps) */
.community-float { position:fixed; right:20px; bottom:20px; z-index:60; width:300px; max-width:calc(100vw - 40px); background:var(--cardbg); border:1px solid var(--red); padding:18px 18px 16px; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s ease, transform .25s ease; box-shadow:0 8px 30px rgba(0,0,0,0.35); }
.community-float.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.community-float__close { position:absolute; top:6px; right:10px; background:none; border:none; color:var(--faint); font-size:20px; line-height:1; cursor:pointer; }
.community-float__close:hover { color:var(--fg); }
.community-float__title { font-family:var(--font-sans); font-weight:600; color:var(--fg); font-size:15px; margin-bottom:6px; }
.community-float__desc { font-family:var(--font-mono); font-size:11.5px; color:var(--dim); line-height:1.5; margin:0 0 12px; }
.community-float__actions { display:flex; gap:8px; }
.community-float__btn { flex:1; text-align:center; text-decoration:none; font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; padding:9px 8px; border:1px solid var(--line); color:var(--fg); transition:border-color .12s; }
.community-float__btn:hover { border-color:var(--red); }
.community-float__btn--primary { background:var(--btn); color:var(--btnfg); border-color:var(--btn); }
@media (max-width:760px){ .skillmap{padding:24px 18px;} .onramps{padding:24px 18px;} .onramps__grid{grid-template-columns:1fr;} .skillmap__cols{grid-template-columns:1fr; gap:14px;} }
@media (max-width:520px){ .community-float{ left:12px; right:12px; bottom:12px; width:auto; } }

/* market ranking: draggable (pointer = mouse + touch) reorder + grip handle
   (round 2A item #3: kill text selection while dragging, on the cards AND
   the body — a fast lift/drag otherwise selects the label/desc underneath). */
.rank-item { touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; }
.rank-item--dragging { cursor:grabbing; opacity:0.9; box-shadow:0 8px 24px rgba(0,0,0,0.35); position:relative; z-index:5; }
.rank-item__grip { display:inline-flex; align-items:center; color:var(--faint); margin-right:8px; flex-shrink:0; }
.rank-item:hover .rank-item__grip { color:var(--red); }
.rank-btn { cursor:pointer; touch-action:auto; }
body.is-dragging-rank { -webkit-user-select:none; user-select:none; }
.rank-hint { font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; color:var(--faint); margin:-8px 0 14px; }

/* ---- assessment rail: compact ikigai diagram (under the lens list) ---- */
.assessment-diagram-wrap { margin-top: 22px; }
.assessment-diagram-toggle {
  display: none; width: 100%; text-align: left; background: transparent; border: 1px solid var(--line);
  color: var(--fg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 10px 12px; cursor: pointer;
}
.assessment-diagram-toggle:hover { border-color: var(--red); color: var(--red); }
.assessment-diagram-toggle::after { content: " \25BE"; }
.assessment-diagram-toggle[aria-expanded="true"]::after { content: " \25B4"; }
.assessment-diagram { border: 1px solid var(--line); padding: 14px; background: var(--cardbg); }
@media (max-width: 640px) {
  .assessment-diagram-toggle { display: block; }
  .assessment-diagram { display: none; margin-top: 10px; }
  .assessment-diagram-wrap.is-open .assessment-diagram { display: block; }
}

/* inline "Use defaults & continue" helper line under the Next button */
.untouched-helper { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); margin-top: 10px; }

/* transient "front-runner changed" notice near the rail diagram (round2B #4) */
.leader-flip-notice {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg); margin: 10px 0 0;
  padding: 8px 12px; border: 1px solid var(--red); background: var(--cardbg);
  opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.leader-flip-notice.is-visible { opacity: 1; transform: translateY(0); }

/* ---- results: scope note + sticky anchor nav ---- */
.results-scope-note {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); line-height: 1.6;
  margin: 0 0 22px; border-left: 2px solid var(--line); padding-left: 12px; max-width: 760px;
}
.results-anchor-nav {
  position: sticky; top: 0; z-index: 30; display: flex; border: 1px solid var(--line);
  background: var(--bg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  margin-bottom: 24px; overflow-x: auto;
}
.results-anchor-nav a { padding: 10px 16px; color: var(--faint); border-right: 1px solid var(--line); white-space: nowrap; }
.results-anchor-nav a:last-child { border-right: none; }
.results-anchor-nav a:hover { color: var(--fg); }

/* round 2A item #1: the nav IS sticky at top:0, so a native anchor jump
   otherwise lands each section's heading directly under it, covered. Every
   jump target gets breathing room equal to the nav's own height + a gap. */
#resultSummary, #yourDiagram, #skillsSlot, #strengthsSlot, #nextSteps {
  scroll-margin-top: 64px;
}

/* ---- results: diagram centerpiece ---- */
.results-diagram-section { border: 1px solid var(--line); padding: 32px 44px; margin-bottom: 32px; }
.results-diagram-section__title { font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: var(--fg); margin: 0 0 18px; }
.results-diagram { max-width: 460px; margin: 0 auto; }
.results-diagram__notes { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.results-diagram__note { font-family: var(--font-mono); font-size: 13px; color: var(--dim); border-left: 2px solid var(--faint); padding-left: 10px; }
.results-diagram__note a { color: var(--red); }
@media (max-width: 760px) { .results-diagram-section { padding: 24px 18px; } }

/* ---- hero: match strength + signal word + disclosure + action row ---- */
.result-summary__matchstrength { display: flex; flex-direction: column; align-items: center; padding: 12px 24px; border: 1px solid var(--line); min-width: 150px; }
.result-summary__matchstrength-value { font-family: var(--font-mono); color: var(--green); font-size: 2rem; font-weight: 700; line-height: 1; }
.result-summary__matchstrength-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; margin-top: 4px; }
.result-summary__signal-word { color: var(--red); font-weight: 600; }
.result-summary__disclosure { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--dim); }
.result-summary__disclosure summary { cursor: pointer; color: var(--faint); }
.result-summary__disclosure summary:hover { color: var(--fg); }
.result-summary__disclosure p { margin: 8px 0 0; line-height: 1.6; }
.result-summary__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.result-summary__interview { font-family: var(--font-mono); font-size: 12px; color: var(--red); border: 1px solid var(--red); padding: 9px 16px; }
.result-summary__interview:hover { background: var(--red); color: #fff; }

/* strengths RESULT readout (the visible payoff of adding character strengths) */
.via-result { display:flex; flex-direction:column; gap:11px; }
.via-result__headline { font-family:var(--font-mono); font-size:14px; color:var(--fg); line-height:1.6; }
.via-result__headline strong { color:var(--red); }
.via-result__flag { display:inline-block; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--btnfg); background:var(--btn); padding:2px 7px; margin-right:6px; vertical-align:middle; }
.via-result__flag--change { background:var(--red); color:#fff; }
.via-result__bars-h { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:var(--faint); }
.via-result__bars { display:flex; flex-direction:column; gap:6px; }
.via-bar { display:grid; grid-template-columns:130px 1fr 34px; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; }
.via-bar__label { color:var(--dim); }
.via-bar__track { height:8px; background:var(--line); position:relative; }
.via-bar__fill { position:absolute; left:0; top:0; bottom:0; transition:width .4s ease; }
.via-bar__val { color:var(--fg); text-align:right; }
.via-result__sowhat { font-family:var(--font-mono); font-size:13px; color:var(--dim); line-height:1.6; border-left:2px solid var(--red); padding-left:12px; margin:4px 0 0; }
.via-result__sowhat strong { color:var(--fg); }
@media (max-width:520px){ .via-bar{ grid-template-columns:96px 1fr 30px; } }

/* in-app character-strengths survey overlay */
.via-capture__btn--ghost { background:transparent; color:var(--fg); border:1px solid var(--line); }
.via-capture__btn--ghost:hover { border-color:var(--red); color:var(--red); }
.vs-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.62); display:flex; align-items:center; justify-content:center; padding:20px; }
.vs-modal { background:var(--cardbg); border:1px solid var(--red); width:100%; max-width:560px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.vs-modal__bar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px 0; }
.vs-modal__bar-h { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--red); }
.vs-modal__close { background:none; border:none; color:var(--faint); font-size:22px; line-height:1; cursor:pointer; }
.vs-modal__close:hover { color:var(--fg); }
.vs-modal__track { height:3px; background:var(--line); margin:12px 0 0; }
.vs-modal__fill { display:block; height:100%; background:var(--red); transition:width .2s ease; }
.vs-modal__body { padding:24px 22px; overflow-y:auto; }
.vs-modal__lead { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--faint); text-transform:uppercase; margin:0 0 10px; }
.vs-modal__q { font-family:var(--font-sans); font-size:21px; font-weight:600; color:var(--fg); line-height:1.4; margin:0 0 22px; letter-spacing:-0.01em; }
.vs-modal__opts { display:flex; flex-direction:column; gap:8px; }
.vs-opt { display:flex; align-items:center; gap:12px; text-align:left; background:transparent; border:1px solid var(--line); color:var(--fg); font-family:var(--font-mono); font-size:14px; padding:12px 14px; cursor:pointer; transition:border-color .12s; }
.vs-opt:hover { border-color:var(--red); }
.vs-opt--sel { border-color:var(--red); }
.vs-opt__dot { width:12px; height:12px; border:1px solid var(--faint); border-radius:50%; flex-shrink:0; }
.vs-opt--sel .vs-opt__dot, .vs-opt:hover .vs-opt__dot { border-color:var(--red); background:var(--red); }
.vs-modal__nav { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 18px; border-top:1px solid var(--line); }
.vs-modal__back { background:none; border:none; color:var(--dim); font-family:var(--font-mono); font-size:12px; cursor:pointer; }
.vs-modal__back:disabled { color:var(--line); cursor:default; }
.vs-modal__count { font-family:var(--font-mono); font-size:11px; color:var(--faint); }
.vs-modal__finish { background:var(--btn); color:var(--btnfg); border:none; font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; padding:10px 16px; cursor:pointer; }
@media (max-width:520px){ .vs-modal__q{ font-size:17px; } }

/* ---- "Start fresh" scoped reset (spec 2026-07-15) — footer-weight, two
   placements: rail (under the assessment diagram) + results (next to
   retake). Same muted/ghost treatment as .assessment-diagram-toggle so it
   reads as a secondary/footer control, never competing with the primary
   btn--primary / btn--secondary actions. ---- */
.start-fresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  color: var(--faint); padding: 6px 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  cursor: pointer;
}
.start-fresh-btn:hover { color: var(--red); border-color: var(--red); }
.start-fresh-btn--rail { margin-top: 12px; width: 100%; justify-content: center; }
.start-fresh-btn--results { background: transparent; }

/* ---- Diagram philosophy aside (spec 2026-07-16) — "How this reflects
   ikigai" panel beside the results diagram. Sibling of #resultsDiagram
   (never nested inside it), so the diagram's click-to-zoom reparenting
   (which moves only #resultsDiagram into the overlay) leaves it in place.
   Single column by default; two-column grid at the same 900px breakpoint
   already used for .score-vector__body on this page. ---- */
.results-diagram-layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.diagram-philosophy__title { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--red) !important; margin: 0 0 12px; }
.diagram-philosophy__body { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: var(--dim) !important; margin: 0 0 14px; }
.diagram-philosophy__body:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .results-diagram-layout { grid-template-columns: 1.4fr 1fr; gap: 36px; }
}

/* ---- how-it-works inbound link (spec 2026-07-16, how-it-works-page.md
   item 3) — small muted link under the landing stat chips (.value-props). */
.hero__how-it-works-link {
  display: inline-block; margin-top: 18px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--faint) !important;
  border-bottom: 1px dotted var(--line);
}
.hero__how-it-works-link:hover { color: var(--red) !important; border-color: var(--red); }

/* ---- results scope note "how this works" link (how-it-works-page.md item 2) ---- */
.results-scope-note a { color: var(--red) !important; margin-left: 4px; }

/* ============================================================
   First-visit tour (spec 2026-07-16-navigator-tour.md)
   Offer card + relaunch "?" buttons + hand-rolled spotlight overlay.
   ============================================================ */

/* Offer card next to the Start button (first visit only). */
.tour-offer {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 0 12px; padding: 8px 14px;
  border: 1px solid var(--line); background: var(--cardbg);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--faint);
  vertical-align: middle;
}
.tour-offer__text { margin: 0; color: var(--fg) !important; }
.tour-offer__actions { display: flex; gap: 8px; }
.tour-offer__start, .tour-offer__skip {
  font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--line);
  border-radius: 0; background: transparent; color: var(--fg); padding: 5px 10px; cursor: pointer;
}
.tour-offer__start:hover { border-color: var(--red); color: var(--red) !important; }
.tour-offer__skip:hover { color: var(--faint); border-color: var(--faint); }

/* Persistent relaunch "?" buttons (landing + assessment rail). */
.tour-help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: 10px; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 50%; background: transparent;
  color: var(--faint); font-family: var(--font-mono); font-size: 12px; cursor: pointer;
}
.tour-help-btn:hover { border-color: var(--red); color: var(--red) !important; }
.tour-help-btn--rail {
  width: auto; height: auto; border-radius: 0; margin: 12px 0 0; padding: 5px 10px;
  display: flex; gap: 4px;
}

/* Click-catcher: covers the viewport so an outside click closes the tour.
   Transparent for targeted steps (the spotlight box-shadow below does the
   actual dimming so the target itself isn't darkened); solid dim for
   no-target steps (welcome / results), which have no cutout to preserve. */
.tour-catcher { position: fixed; inset: 0; z-index: 500; background: transparent; }
.tour-catcher--dim { background: rgba(10, 10, 10, 0.72); }

/* Spotlight: a box the exact size of the (padded) target rect, whose
   9999px box-shadow fills the rest of the viewport with the dim scrim —
   the classic CSS "cutout" technique, no SVG mask needed. pointer-events:
   none so it never blocks the catcher underneath. */
.tour-spotlight {
  position: fixed; z-index: 501; border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(10, 10, 10, 0.72);
  pointer-events: none;
  transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
}

.tour-card {
  position: fixed; z-index: 502; max-width: 340px;
  background: var(--cardbg); border: 1px solid var(--red); border-radius: 0;
  padding: 20px 22px 18px;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; color: var(--fg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transition: top 0.22s ease, left 0.22s ease;
}
.tour-card--center { position: fixed; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.tour-card__close {
  position: absolute; top: 8px; right: 10px; background: transparent; border: none;
  color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.tour-card__close:hover { color: var(--red); }
.tour-card__step {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); margin: 0 22px 10px 0;
}
.tour-card__body { margin: 0 0 16px; color: var(--fg) !important; }
.tour-card__body a, .tour-card__link { color: var(--red) !important; }
.tour-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-card__nav { display: flex; gap: 8px; }
.tour-card__btn {
  font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--fg); padding: 7px 14px; cursor: pointer;
}
.tour-card__btn:hover { border-color: var(--red); color: var(--red) !important; }
.tour-card__btn--primary { border-color: var(--red); color: var(--red) !important; }
.tour-card__btn--primary:hover { background: var(--red); color: #fff !important; }

/* prefers-reduced-motion: zero out every transition inside the overlay. */
.tour-reduced-motion, .tour-reduced-motion * { transition-duration: 0s !important; }

@media (max-width: 520px) {
  .tour-card { max-width: calc(100vw - 40px); }
}

/* Discovery → Identify context, shared by landing, skills and results. */
.ikigai-context { border:1px solid var(--border,#444); border-radius:8px; padding:16px; margin:18px 0; font-size:14px; line-height:1.6; text-align:left; overflow-wrap:anywhere; }
.ikigai-context label { display:block; margin:12px 0; cursor:pointer; }
.ikigai-context input { margin-right:7px; }
.ikigai-context p { margin:8px 0; }
.ikigai-context a { color:var(--fg,inherit); text-decoration:underline; }
.ikigai-context ul { padding-left:20px; }
.ikigai-context table { width:100%; border-collapse:collapse; font-size:12px; }
.ikigai-context th,.ikigai-context td { text-align:left; padding:8px 4px; border-bottom:1px solid var(--border,#444); }
.ikigai-context summary { cursor:pointer; }

/* ============================================================
   R2-A §5 — each rail tab carries its circle's canonical colour
   (--ikigai-c-* from ikigai-diagram.css, loaded on this page).
   Additive: only the resting-state dot; active/completed states
   above still win via source order + !important.
   ============================================================ */
.progress__step[data-section="passion"] .progress__step-dot { background: var(--ikigai-c-love, var(--line)) !important; }
.progress__step[data-section="skill"] .progress__step-dot { background: var(--ikigai-c-goodAt, var(--line)) !important; }
.progress__step[data-section="market"] .progress__step-dot { background: var(--ikigai-c-paidFor, var(--line)) !important; }
.progress__step[data-section="purpose"] .progress__step-dot { background: var(--ikigai-c-worldNeeds, var(--line)) !important; }

/* R2-A §7: strengths-survey handoff notice */
.strengths-handoff-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 44px; }
/* C4 (RO-2): same specificity as the rule above, so without this the
   [hidden] attribute lost to source order and the notice showed to every
   visitor (fresh or dismissed). The combined selector wins on
   specificity instead of relying on order. */
.strengths-handoff-notice[hidden] { display: none; }
.strengths-handoff-notice__dismiss { flex: none; }
@media (max-width: 760px) { .strengths-handoff-notice { margin: 12px 18px; } }

/* R2-A §5: compact ikigai figure in the Navigator's intro/hero */
.hero__ikigai-figure { margin: 6px 0 18px; }

/* D5 (RO2-5): C2 moved the figure above the subtitle so all four phrases
   are visible without scrolling at 390x844 -- but stacked under the H1 at
   desktop it also pushed "Start assessment" below the fold at 1280x800.
   >=900px: float the figure beside the H1/subtitle instead of stacking it.
   Floats only affect DOM siblings that come after them, so the badge/H1
   (before the figure) are unaffected, and the subtitle/links/button (after
   it, all narrower than container-width minus the float) flow beside it
   rather than being pushed down by its height -- recovering ~180px without
   moving the figure in the DOM (390px keeps the original stacked layout). */
@media (min-width: 900px) {
  .hero__ikigai-figure { float: right; width: 300px; margin: 2px 0 20px 32px; }
  .hero__ikigai-figure .ikigai-figure { flex-wrap: nowrap; }
}