/* ==========================================================================
   StudentFlow — public Journey Estimator (/plan). Loaded after studentflow.css + public.css.
   Design tokens only (--ink, --lime, …). Works without JavaScript; print-friendly.
   ========================================================================== */

/* ---------- hero ---------- */
.plan-hero h1 { font-size: var(--fs-3xl); line-height: 1.02; text-wrap: balance; margin-bottom: .35em; max-width: 22ch; }
.plan-hero--result h1 { font-size: var(--fs-2xl); max-width: 30ch; line-height: 1.08; }
.plan-hero h1 mark { background: none; color: var(--lime); }
.plan-hero .lead { color: #e2e2ee; max-width: 62ch; }
.plan-hero .crumbs a { color: #fff; }
.plan-hero__cta { margin-top: 1.25rem; }
.plan-hero__fine { margin: 1.25rem 0 0; font-size: var(--fs-sm); color: #cfcfde; max-width: 70ch; }
.plan-hero .btn--ghost, .plan-hero .btn--ghost:hover { box-shadow: none; border-color: var(--white); }
.plan-hero .btn--ghost { color: var(--white); }
.plan-hero .btn--ghost:hover { color: var(--ink); }

/* ---------- the one-sentence question bar ---------- */
.plan-ask { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1rem; max-width: 820px; }
.plan-ask__input { flex: 1 1 280px; min-width: 0; min-height: 58px; font-size: var(--fs-base); }
.plan-ask .btn { flex: 0 0 auto; }
.plan-examples__label { margin: 1.25rem 0 .25rem; font-weight: 800; font-size: var(--fs-sm); color: #dcdce8; }
.plan-examples { margin-top: .5rem; }
.plan-or { margin: 1.5rem 0 .5rem; font-weight: 800; }

/* ---------- status pill ---------- */
.plan-status {
  display: inline-flex; align-items: center; gap: .55rem; margin: .25rem 0 1rem; padding: .5rem 1.1rem; min-height: 44px;
  border: var(--bw) solid var(--ink); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); font-size: var(--fs-lg); color: var(--ink);
}
.plan-status__mark { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--white); font-weight: 900; line-height: 1; font-size: .85em; }
.plan-status--ok { background: var(--lime); }
.plan-status--tight { background: var(--yellow); }
.plan-status--late { background: var(--red-soft); border-color: var(--red); box-shadow: 2px 2px 0 var(--red); }
.plan-status--late .plan-status__mark { border-color: var(--red); }

/* ---------- "We understood" ---------- */
.plan-understood {
  margin: 0 0 1.25rem; padding: 1rem 1.25rem; background: var(--paper-2); color: var(--ink);
  border: var(--bw) solid var(--ink); border-left: 10px solid var(--violet); border-radius: 0 var(--r-md) var(--r-md) 0; box-shadow: var(--shadow-sm);
}
.plan-understood__label { margin: 0 0 .15rem; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.plan-understood__text { margin: 0; font-size: var(--fs-lg); font-weight: 800; }
.plan-understood__fix { margin: .25rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.plan-understood__q { margin: .5rem 0 0; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.plan-notes { margin: .6rem 0 0; padding-left: 1.2rem; font-size: var(--fs-sm); font-weight: 700; }
.plan-tag { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--violet-soft); font-size: var(--fs-xs); font-weight: 700; vertical-align: middle; }
.plan-edit { margin-top: 1rem; }

/* ---------- forms ---------- */
.plan-card { padding: clamp(1rem, 3vw, 1.75rem); }
.plan-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.plan-form legend { margin-bottom: .5rem; padding: 0; }
.plan-form .is-missing .choice input + span { border-style: dashed; }
.plan-form__row { margin-bottom: .25rem; }
.plan-personas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }
.plan-personas .choice > input + span { min-height: 72px; align-items: center; }
.plan-personas .choice small { font-size: var(--fs-xs); line-height: 1.35; margin-top: .15rem; }

/* ---------- landing ---------- */
.plan-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.plan-gets .card { display: flex; flex-direction: column; gap: .35rem; }
.plan-gets h3 { font-size: var(--fs-lg); margin: .5rem 0 0; }
.plan-gets p { margin: 0; font-size: var(--fs-sm); }

/* ---------- at a glance ---------- */
.plan-kpis { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.plan-kpis .stat { display: flex; flex-direction: column; gap: .15rem; }
.plan-kpis .stat b { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.plan-kpis .stat small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }

/* ---------- timeline ---------- */
.plan-timeline { max-width: 960px; }
.plan-phase { padding: 1.1rem 1.25rem; }
.plan-phase__dates { margin: 0 0 .25rem; font-weight: 700; font-size: var(--fs-sm); color: var(--muted); }
.plan-ms { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.plan-ms__item { display: grid; gap: .25rem .9rem; grid-template-columns: 7.2rem 1fr; padding: .7rem .85rem; border: var(--bw) solid var(--ink); border-radius: var(--r-md); background: var(--white); }
.plan-ms__item.is-behind { background: var(--red-soft); border-color: var(--red); }
.plan-ms__date { font-weight: 800; font-size: var(--fs-sm); line-height: 1.3; }
.plan-ms__by { font-weight: 600; color: var(--muted); }
.plan-ms__body { display: grid; gap: .3rem; min-width: 0; }
.plan-ms__title { font-weight: 800; overflow-wrap: anywhere; }
.plan-ms__meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.plan-ms__src { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.plan-ms__src a { color: var(--ink); font-weight: 800; text-underline-offset: 3px; }
.plan-ms--compact .plan-ms__item { padding: .5rem .7rem; }
.plan-more { margin-top: 1rem; }
.plan-more > summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 560px) { .plan-ms__item { grid-template-columns: 1fr; } }

/* ---------- workload bars ---------- */
.plan-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-width: 820px; }
.plan-bar { display: grid; gap: .25rem .75rem; grid-template-columns: 6.2rem 1fr 8.5rem; align-items: center; font-size: var(--fs-sm); font-weight: 700; }
.plan-bar__track { display: block; height: 20px; background: var(--white); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); overflow: hidden; }
.plan-bar__track > span { display: block; height: 100%; min-width: 0; background: repeating-linear-gradient(45deg, var(--cyan), var(--cyan) 8px, #6ee3f4 8px, #6ee3f4 16px); border-right: var(--bw) solid var(--ink); }
.plan-bar.is-peak .plan-bar__track > span { background: repeating-linear-gradient(45deg, var(--orange), var(--orange) 8px, #ff8a57 8px, #ff8a57 16px); }
.plan-bar__track > span[style*="width: 0%"] { border-right: 0; }
@media (max-width: 560px) { .plan-bar { grid-template-columns: 1fr auto; } .plan-bar__track { grid-column: 1 / -1; order: 3; } }

/* ---------- documents ---------- */
.plan-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.plan-doc { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 1.1rem; }
.plan-doc h3 { font-size: var(--fs-base); margin: 0 0 .15rem; }
.plan-doc p { margin: 0; }
.plan-doc__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: var(--bw) solid var(--ink); border-radius: 14px; background: var(--cyan); font-size: 1.3rem; }
.plan-doc__by { font-size: var(--fs-sm); font-weight: 800; margin-top: .15rem; }

/* ---------- services + budget ---------- */
.plan-demo-label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-base) !important; }
.plan-svcs { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.plan-svc { display: flex; flex-direction: column; gap: .35rem; background: var(--white); border-top: 10px solid var(--accent, var(--lime)); }
.plan-svc h3 { font-size: var(--fs-lg); margin: 0; }
.plan-svc p { margin: 0; }
.plan-svc__when { font-size: var(--fs-sm); font-weight: 700; }
.plan-price { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-lg); }
.plan-price strong { font-family: var(--font-display); font-size: var(--fs-lg); overflow-wrap: anywhere; }
.plan-demo-badge { background: var(--yellow); }
.plan-svc .link-arrow { margin-top: auto; padding-top: .5rem; }
.plan-total { margin-top: 1.25rem; }
.plan-total__label { margin: 0; font-weight: 800; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--lime); }
.plan-total__value { margin: .25rem 0; font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.1; overflow-wrap: anywhere; }
.plan-total__fine { margin: 0; font-size: var(--fs-sm); color: #dcdce8; }

/* ---------- official fees ---------- */
.plan-fees { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.plan-fee { display: flex; flex-direction: column; gap: .35rem; }
.plan-fee h3 { font-size: var(--fs-lg); margin: 0; }
.plan-fee p { margin: 0; font-size: var(--fs-sm); }
.plan-fee .link-arrow { margin-top: auto; padding-top: .5rem; overflow-wrap: anywhere; }

/* ---------- assumptions, share ---------- */
.plan-assume { max-width: 860px; margin-bottom: 1.25rem; }
.plan-assume .ticks { margin-bottom: 1rem; }
.plan-share { max-width: 860px; }
.plan-share__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.plan-share__row .input { flex: 1 1 280px; min-width: 0; font-size: var(--fs-sm); }

/* ---------- waitlist ---------- */
.plan-wait { padding: clamp(1rem, 3vw, 1.75rem); }

/* ---------- print: the estimate on paper ---------- */
@media print {
  .site-header, .site-footer, .toast-wrap, .cta-band, .plan-ask, .plan-edit, .plan-sharebar, .plan-hero__cta, .skip-link, .plan-examples, .menu-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .plan-hero { background: #fff !important; color: #000 !important; }
  .hero::before, .hero::after { display: none !important; }
  .plan-hero h1, .plan-hero .lead, .plan-hero__fine, .plan-hero .crumbs a { color: #000 !important; }
  .card, .stat, .plan-ms__item { box-shadow: none !important; break-inside: avoid; }
  .card--ink { background: #fff !important; color: #000 !important; border-color: #000; }
  .plan-total__label, .plan-total__fine { color: #000 !important; }
  .pub-section, .pub-section--tight { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; font-weight: 400; word-break: break-all; }
}

/* "we don't cover X yet" capture */
.plan-interest { margin-top: .9rem; padding: .9rem 1rem; background: var(--white); border: var(--bw) dashed var(--ink); border-radius: var(--r-md); display: grid; gap: .6rem; }
.plan-interest__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.plan-interest__row .input { flex: 1 1 220px; min-height: 46px; }