/* ============================================================
   Guided Journeys — Track pages & the private My Journey dashboard
   Built on the existing design tokens (colors_and_type.css).
   Progress lives only in the visitor's browser; nothing is sent.
   ============================================================ */

/* ── Shared: privacy note ─────────────────────────────────── */
.privacy-note{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:22px;padding:10px 16px;
  font-family:var(--font-display);font-size:12px;letter-spacing:.06em;
  color:var(--color-grey-600);
  background:var(--color-cream);border:1px solid var(--color-grey-200);
  border-radius:var(--radius-pill);
}
.privacy-note svg{flex:none;color:var(--fg-accent)}

/* ── Progress summary card ────────────────────────────────── */
.track-progress{
  margin:8px 0 8px;padding:30px 34px;
  background:var(--color-cream);
  border:1px solid var(--color-grey-200);border-radius:var(--radius-lg);
}
.track-progress__row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  justify-content:space-between;
}
.track-progress__count{
  font-family:var(--font-editorial);font-size:clamp(28px,4vw,40px);
  font-weight:300;line-height:1.1;color:var(--color-charcoal);
}
.track-progress__count b{font-weight:500;font-style:normal;color:var(--fg-brand)}
.track-progress__label{
  font-family:var(--font-display);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-grey-500);
}
.track-progress__bar{
  margin-top:20px;height:8px;border-radius:var(--radius-pill);
  background:var(--color-grey-200);overflow:hidden;
}
.track-progress__fill{
  display:block;height:100%;width:0;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--color-gold-600),var(--color-red-600));
  transition:width var(--duration-slow) var(--ease-in-out);
}
.track-progress__resume{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;
}
.track-progress__hint{
  margin:0;font-size:15px;color:var(--color-grey-600);
}

/* ── The ordered list of steps ────────────────────────────── */
.track-steps{
  list-style:none;margin:32px 0 0;padding:0;
  border-top:1px solid var(--color-grey-200);
}
.track-step{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px 24px;
  align-items:start;
  padding:28px 24px;
  border-bottom:1px solid var(--color-grey-200);
  transition:background var(--duration-base) var(--ease-out);
  scroll-margin-top:96px;
}
.track-step:hover{background:var(--color-grey-100)}
.track-step.is-complete{background:var(--color-gold-50)}
.track-step.is-next{
  background:var(--color-white);
  box-shadow:inset 3px 0 0 var(--color-red-600);
}

.track-step__index{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:15px;font-weight:600;
  color:var(--color-grey-500);
  border:1px solid var(--color-grey-300);background:var(--color-white);
  transition:all var(--duration-base) var(--ease-out);
}
.track-step.is-complete .track-step__index{
  color:var(--color-white);background:var(--color-gold-600);
  border-color:var(--color-gold-600);
}
.track-step.is-next .track-step__index{
  color:var(--fg-brand);border-color:var(--color-red-600);
}

.track-step__body{min-width:0}
.track-step__kicker{
  font-family:var(--font-display);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-accent);
}
.track-step__title{
  margin:8px 0 6px;font-family:var(--font-editorial);
  font-size:clamp(21px,2.6vw,26px);font-weight:400;line-height:1.2;
  letter-spacing:0;color:var(--color-charcoal);
}
.track-step__desc{
  margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--color-grey-600);
  max-width:52ch;
}
.track-step__links{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.track-step__open{
  font-family:var(--font-display);font-size:14px;font-weight:600;
  text-decoration:none;color:var(--fg-brand);
}
.track-step__open:hover{color:var(--brand-primary-dark)}
.track-step__done-note{
  font-family:var(--font-display);font-size:12px;letter-spacing:.06em;
  color:var(--color-gold-900);
}
.track-step.is-recommended .track-step__title::after{
  content:"Suggested start";
  display:inline-block;margin-left:12px;transform:translateY(-2px);
  font-family:var(--font-display);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-brand);background:var(--color-red-50);
  padding:4px 10px;border-radius:var(--radius-pill);vertical-align:middle;
}

/* ── The complete toggle ──────────────────────────────────── */
.track-step__toggle{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:10px 16px;white-space:nowrap;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.04em;color:var(--color-grey-600);
  background:var(--color-white);
  border:1px solid var(--color-grey-300);border-radius:var(--radius-pill);
  transition:all var(--duration-fast) var(--ease-out);
}
.track-step__toggle:hover{border-color:var(--color-grey-500);color:var(--color-charcoal)}
.track-step__toggle input{position:absolute;opacity:0;width:1px;height:1px}
.track-step__toggle:focus-within{
  outline:2px solid var(--state-focus-ring);outline-offset:2px;
}
.track-step__tick{
  width:20px;height:20px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  border:1.5px solid var(--color-grey-400);color:transparent;
  transition:all var(--duration-fast) var(--ease-out);
}
.track-step__tick svg{width:12px;height:12px}
.track-step.is-complete .track-step__toggle{
  color:var(--color-gold-900);border-color:var(--color-gold-500);
  background:var(--color-gold-50);
}
.track-step.is-complete .track-step__tick{
  background:var(--color-gold-600);border-color:var(--color-gold-600);
  color:var(--color-white);
}
.track-step__toggle-label--done{display:none}
.track-step.is-complete .track-step__toggle-label--todo{display:none}
.track-step.is-complete .track-step__toggle-label--done{display:inline}

/* ── Completion milestone ─────────────────────────────────── */
.track-complete{
  margin-top:40px;padding:44px 40px;text-align:center;
  background:var(--color-charcoal);color:var(--color-white);
  border-radius:var(--radius-lg);
}
.track-complete[hidden]{display:none}
.track-complete .eyebrow{color:var(--color-gold-400)}
.track-complete h2{margin:12px 0 16px;color:var(--color-white);font-weight:300}
.track-complete p{color:var(--color-grey-200);max-width:56ch;margin:0 auto 12px}
.track-complete .button--secondary{
  margin-top:20px;border-color:var(--color-grey-500);color:var(--color-white);
}
.track-complete .button--secondary:hover{background:rgba(255,255,255,.08)}

/* ── My Journey dashboard ─────────────────────────────────── */
.journey-empty{
  margin-top:8px;padding:34px;
  background:var(--color-cream);border:1px solid var(--color-grey-200);
  border-radius:var(--radius-lg);
}
.journey-empty[hidden]{display:none}
.journey-empty p{margin:0 0 20px;color:var(--color-grey-600);max-width:56ch}

.journey-dash{display:grid;gap:24px;margin-top:8px}
.journey-dash[hidden]{display:none}
@media(min-width:760px){.journey-dash{grid-template-columns:1fr 1fr}}

.journey-tile{
  padding:30px 32px;
  background:var(--color-white);
  border:1px solid var(--color-grey-200);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;
}
.journey-tile[hidden]{display:none}
.journey-tile--wide{grid-column:1/-1}
.journey-tile__meta{
  font-family:var(--font-display);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-accent);
}
.journey-tile h3{
  margin:10px 0 8px;font-family:var(--font-editorial);
  font-size:clamp(22px,3vw,28px);font-weight:400;letter-spacing:0;
  line-height:1.2;color:var(--color-charcoal);
}
.journey-tile p{margin:0 0 18px;font-size:16px;color:var(--color-grey-600)}
.journey-tile__spacer{flex:1}
.journey-tile .track-progress__bar{margin-top:6px}
.journey-tile__foot{margin-top:20px}

/* ── "Continue your journey" prompt (homepage) ────────────── */
.journey-resume-band{padding:0}
.journey-resume-band[hidden]{display:none}
.journey-resume{
  max-width:1120px;margin:28px auto 0;padding:24px 30px;
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  background:var(--color-cream);border:1px solid var(--color-grey-200);
  border-left:3px solid var(--color-gold-600);border-radius:var(--radius-lg);
}
.journey-resume__eyebrow{
  font-family:var(--font-display);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-accent);
}
.journey-resume__text{
  margin:6px 0 2px;font-family:var(--font-editorial);
  font-size:clamp(19px,2.4vw,24px);font-weight:400;letter-spacing:0;
  line-height:1.25;color:var(--color-charcoal);
}
.journey-resume__text strong{font-weight:500}
.journey-resume__meta{margin:0;font-size:13px;color:var(--color-grey-500)}
.journey-resume__actions{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}

@media(max-width:640px){
  .journey-resume{padding:22px;margin-top:22px}
  .journey-resume__actions{width:100%}
}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:640px){
  .track-step{grid-template-columns:auto 1fr;gap:16px}
  .track-step__toggle{grid-column:1/-1;justify-content:center;margin-top:4px}
  .track-progress{padding:24px 22px}
  .track-complete{padding:34px 24px}
}

@media(prefers-reduced-motion:reduce){
  .track-progress__fill,.track-step,.track-step__index,.track-step__toggle,.track-step__tick{transition:none}
}