/* Educircle Website V2 — "Create My Australia Plan" journey.
   Full-screen editorial wizard. Depends on tokens.css + components.css. Premium
   personality: calm, confident, transform/opacity-only motion, no layout shift.
   Everything is fully visible without JS and honours prefers-reduced-motion. */

/* ============ Shell / chrome ============ */
.plan-body { min-height: 100svh; display: flex; flex-direction: column; background: var(--c-surface-2); }
.plan-shell { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.plan-shell--narrow { max-width: 780px; }
.plan-main { flex: 1; display: flex; flex-direction: column; }

/* Slim wizard header */
.plan-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--c-line); }
.plan-header__inner { max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter); height: 66px; display: flex; align-items: center; gap: var(--sp-4); }
.plan-header__logo { display: flex; align-items: center; }
.plan-header__logo img { height: 34px; width: auto; }
.plan-header__exit { margin-left: auto; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-muted); padding: .5rem .75rem; border-radius: var(--r-sm); }
.plan-header__exit:hover { color: var(--c-primary); }

/* Progress indicator (in header) */
.plan-progress { flex: 1; max-width: 420px; margin-inline: auto; display: grid; gap: 6px; }
.plan-progress__label { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
/* On narrow screens the label + logo + exit don't fit on one line — give the
   progress bar its own full-width row so nothing wraps awkwardly. */
@media (max-width: 639px){
  .plan-header__inner { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 6px; }
  .plan-progress { order: 3; flex-basis: 100%; max-width: none; margin: 0; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
}
.plan-progress__track { height: 6px; border-radius: var(--r-pill); background: var(--c-surface-3); overflow: hidden; }
.plan-progress__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad-primary); transition: width var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .plan-progress__fill { transition: none; } }

/* ============ Intro screen ============ */
.plan-intro { flex: 1; display: flex; align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.plan-intro__grid { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px){ .plan-intro__grid { grid-template-columns: 1.15fr .85fr; gap: var(--sp-12); } }
.plan-intro__title { font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--c-navy); margin-top: var(--sp-4); max-width: 18ch; }
.plan-intro__lead { font-size: var(--fs-body-lg); color: var(--c-muted); margin-top: var(--sp-5); max-width: 52ch; }
.plan-intro__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }
.plan-intro__note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--c-muted); }
.plan-intro__aside { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-2xl); box-shadow: var(--sh-lg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.plan-preview { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.plan-preview li { display: flex; align-items: center; gap: var(--sp-4); font-weight: var(--fw-semibold); color: var(--c-navy); }
.plan-preview .n { flex: none; width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--c-surface-3); color: var(--c-primary); font-weight: 800; font-size: 13px; display: grid; place-items: center; }

/* ============ Step screen ============ */
.plan-step { flex: 1; display: flex; align-items: center; padding-block: clamp(2rem, 5vw, 4rem); }
.plan-form { width: 100%; }
.plan-fieldset { border: 0; padding: 0; margin: 0; }
.plan-fieldset__legend { display: block; width: 100%; padding: 0; }
.plan-question { display: block; font-size: var(--fs-h2); font-weight: var(--fw-extrabold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--c-navy); margin-top: var(--sp-3); max-width: 20ch; }
.plan-help { display: block; font-size: var(--fs-body); color: var(--c-muted); margin-top: var(--sp-3); max-width: 54ch; }

.plan-error { margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: #FDECEC; border: 1px solid #F3C0C0; color: #A02020; font-size: var(--fs-small); font-weight: var(--fw-semibold); }

/* Option cards — a native radio group. The whole card is the label (big hit area,
   keyboard-native). Reserve the selected border with a transparent one => no CLS. */
.plan-options { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
@media (min-width: 640px){ .plan-options { grid-template-columns: 1fr 1fr; } }
.plan-option { position: relative; display: block; cursor: pointer; }
.plan-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-option__box { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-4) var(--sp-5); background: #fff; border: 2px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.plan-option__label { font-weight: var(--fw-bold); color: var(--c-navy); }
.plan-option__hint { color: var(--c-muted); font-size: var(--fs-small); margin-left: auto; padding-left: var(--sp-3); }
.plan-option__tick { flex: none; width: 24px; height: 24px; border-radius: var(--r-pill); border: 2px solid var(--c-line); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-left: var(--sp-2); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); transform: scale(.6); }
.plan-option__hint + .plan-option__tick { margin-left: 0; }
.plan-option:hover .plan-option__box { border-color: var(--c-primary); transform: translateY(-2px); }
.plan-option input:focus-visible + .plan-option__box { box-shadow: var(--sh-focus); border-color: var(--c-primary); }
.plan-option input:checked + .plan-option__box { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary), var(--sh-sm); background: var(--c-surface-2); }
.plan-option input:checked + .plan-option__box .plan-option__tick { background: var(--c-green-btn); border-color: var(--c-green-btn); transform: scale(1); }

/* Step nav */
.plan-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); }
.btn__arrow--back { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow--back { transform: translateX(-3px); }

/* ============ Result screen ============ */
.plan-result { padding-block: clamp(2rem, 5vw, 3.5rem); }
.plan-result__head { max-width: 62ch; }
.plan-result__title { font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--c-navy); margin-top: var(--sp-3); }
.plan-result__summary { font-size: var(--fs-body-lg); color: var(--c-muted); margin-top: var(--sp-4); }
.plan-disclaimer { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-left: 4px solid var(--c-vibrant); background: var(--c-surface-3); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-small); color: var(--c-ink); line-height: 1.55; }

.plan-result__grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 900px){ .plan-result__grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.plan-readiness { display: grid; gap: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.plan-readiness__row + .plan-readiness__row { border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.plan-readiness__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.plan-readiness__label { font-weight: var(--fw-bold); color: var(--c-navy); }
.plan-readiness__note { margin-top: 6px; font-size: var(--fs-small); color: var(--c-muted); }
.plan-status { flex: none; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .02em; padding: .3rem .7rem; border-radius: var(--r-pill); border: 1px solid transparent; }
.plan-status--good { background: rgba(76,122,43,.12); color: #3F6B24; border-color: rgba(76,122,43,.25); }
.plan-status--progress { background: rgba(0,74,173,.10); color: var(--c-primary); border-color: rgba(0,74,173,.22); }
.plan-status--attention { background: rgba(176,120,0,.12); color: #8A5E00; border-color: rgba(176,120,0,.25); }

.plan-actions-card { background: var(--grad-navy); color: var(--c-on-dark); border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.plan-actions-card .section-index { color: #6FD0FF; }
.plan-actions { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-4); counter-reset: none; }
.plan-actions li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.plan-actions__dot { flex: none; width: 24px; height: 24px; border-radius: var(--r-pill); background: rgba(112,163,68,.22); color: #B7E48A; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.plan-actions b { color: #fff; display: block; }
.plan-actions__detail { display: block; font-size: var(--fs-small); color: var(--c-on-dark-muted); margin-top: 3px; }

.plan-locked { display: flex; gap: var(--sp-4); align-items: flex-start; margin-top: var(--sp-6); padding: var(--sp-5); background: #fff; border: 1px dashed var(--c-line); border-radius: var(--r-lg); }
.plan-locked__icon { font-size: 1.5rem; line-height: 1; }
.plan-locked b { color: var(--c-navy); }
.plan-locked p { margin-top: 4px; font-size: var(--fs-small); color: var(--c-muted); max-width: 66ch; }

.plan-handoff { margin-top: var(--sp-6); display: grid; gap: var(--sp-5); align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-2xl); background: var(--grad-primary); color: #fff; box-shadow: var(--sh-lg); }
@media (min-width: 820px){ .plan-handoff { grid-template-columns: 1.2fr .8fr; } }
.plan-handoff__title { color: #fff; font-size: var(--fs-h3); }
.plan-handoff__copy p { color: rgba(255,255,255,.9); margin-top: var(--sp-3); font-size: var(--fs-small); max-width: 54ch; }
.plan-handoff__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.plan-handoff .btn--outline { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #fff; }
.plan-handoff .btn--outline:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

.plan-summary { margin-top: var(--sp-6); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.plan-summary > summary { cursor: pointer; font-weight: var(--fw-bold); color: var(--c-navy); }
.plan-summary__list { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.plan-summary__item { display: grid; gap: 3px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.plan-summary__item dt { font-size: var(--fs-small); color: var(--c-muted); }
.plan-summary__item dd { margin: 0; font-weight: var(--fw-semibold); color: var(--c-navy); display: flex; gap: var(--sp-3); align-items: baseline; }
.plan-summary__edit { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-primary); margin-left: auto; }
.plan-summary__edit:hover { text-decoration: underline; }
.plan-summary__reset { margin-top: var(--sp-4); }
.plan-linkbtn { background: none; border: 0; padding: 0; color: var(--c-muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: underline; }
.plan-linkbtn:hover { color: var(--c-primary); }

/* ============ Continuation screen (Phase 2B1) ============ */
.continue-progress { margin-top: var(--sp-4); }
.continue-progress__top { display: flex; justify-content: space-between; align-items: baseline; color: var(--c-on-dark); font-size: var(--fs-small); }
.continue-progress__top b { color: #fff; font-size: var(--fs-h4); }
.continue-progress__track { margin-top: 8px; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.14); overflow: hidden; }
.continue-progress__fill { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg,#70A344,#B7E48A); }
.continue-check { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
.continue-check li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--c-on-dark-muted); }
.continue-check li.is-done { color: #fff; }
.continue-check__mark { flex: none; width: 22px; height: 22px; border-radius: var(--r-pill); display: grid; place-items: center; font-weight: 800; font-size: 12px; background: rgba(255,255,255,.10); color: var(--c-on-dark-muted); }
.continue-check li.is-done .continue-check__mark { background: rgba(112,163,68,.30); color: #B7E48A; }
.continue-hint { color: var(--c-on-dark-muted); }
.continue-prefill { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2); }
.continue-prefill li { font-size: var(--fs-small); color: var(--c-ink); display: flex; gap: var(--sp-2); align-items: baseline; }
.continue-prefill strong { color: var(--c-navy); }
.plan-continue .plan-handoff__actions form { margin: 0; }

/* ============ Motion: entrance (progressive enhancement) ============
   Content is fully visible by default. Only when JS is active AND motion is allowed
   do we start elements slightly offset and settle them — transform/opacity only. */
html.js .plan-anim { opacity: 0; transform: translateY(18px); }
/* ---- Email-first save card ("Save your plan and start applying with Sage AI") ---- */
.plan-save { margin-top: var(--sp-6); padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-xl); background: var(--c-surface); border: 1.5px solid var(--c-line); box-shadow: var(--sh-md); }
.plan-save__title { font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--c-navy); line-height: var(--lh-snug); }
.plan-save__body { margin-top: var(--sp-2); color: var(--c-muted); font-size: var(--fs-small); line-height: 1.6; max-width: 56ch; }
.plan-save__form { margin-top: var(--sp-5); display: grid; gap: var(--sp-4); }
.plan-save__row { display: grid; gap: 6px; }
.plan-save__label { font-weight: var(--fw-semibold); color: var(--c-navy); font-size: var(--fs-small); }
.plan-save__controls { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.plan-save__controls input, .plan-save__row > input { flex: 1 1 240px; min-height: 48px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); padding: 10px var(--sp-4); font: inherit; color: var(--c-ink); background: #fff; width: 100%; }
.plan-save__controls input:focus, .plan-save__row > input:focus { outline: none; border-color: var(--c-vibrant); box-shadow: var(--sh-focus); }
.plan-save__controls .btn { min-height: 48px; }
.plan-save__error { color: #B3261E; font-size: 13px; font-weight: var(--fw-semibold); }
.plan-save__reassure { font-size: 12.5px; color: var(--c-muted); line-height: 1.55; }
.plan-save__reassure a { color: var(--c-primary); font-weight: var(--fw-semibold); }
.plan-save--sent { display: flex; gap: var(--sp-4); align-items: flex-start; border-color: var(--c-green); background: #F4FAF0; }
.plan-save__badge { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-green-btn); color: #fff; }
.plan-save__badge svg { width: 22px; height: 22px; }
.plan-save__actions { margin-top: var(--sp-4); display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) { .plan-save__controls .btn { width: 100%; } }

html.js .plan-anim.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js .plan-anim.is-in:nth-child(2) { transition-delay: 90ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .plan-anim, html.js .plan-anim.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .plan-option:hover .plan-option__box, .btn:hover { transform: none !important; }
}