/* ============================================================================
   T386b: the client journey page, the approved T386a design on the member
   shell. Tokens only: every colour, radius and space is the design system's
   own (tokens.css). One rounded row per step, its ground saying its state, the
   state word and the one button on the right; on a phone the button takes the
   row's full width and every control is at least 44 px high.
   ========================================================================== */

.jy { max-width: 920px; }

.jy-card { background: var(--cx-surface); border-radius: var(--r-lg); box-shadow: var(--cx-shadow-2); padding: var(--cx-s-6); }
.jy-card__title { margin: 0; font-size: var(--t-h1); font-weight: 600; line-height: 1.2; color: var(--cx-ink); }
.jy-card__lead { margin: var(--cx-s-3) 0 0; max-width: 62ch; color: var(--cx-ink-2); font-size: var(--cx-t-body); line-height: var(--cx-lh-body); }

.jy-steps { list-style: none; margin: var(--cx-s-5) 0 0; padding: 0; display: grid; gap: var(--cx-s-3); }
.jy-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--cx-s-2) var(--cx-s-4);
  align-items: center; padding: var(--cx-s-4) var(--cx-s-5); border-radius: var(--r-lg);
  border: 1px solid transparent; background: var(--cx-surface); }
.jy-row__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--cx-surface); color: var(--cx-primary); }
.jy-row__icon svg { width: 24px; height: 24px; }
.jy-row__text { min-width: 0; }
.jy-row__name { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--cx-ink); }
.jy-row__meaning { margin: 2px 0 0; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-ink-2); }
.jy-row__why { margin: var(--cx-s-1) 0 0; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-ink); font-weight: 500; }
.jy-row__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--cx-s-3); }
.jy-row__state { white-space: nowrap; }
.jy-row__act { min-height: 44px; text-decoration: none; }
.jy-row__act:focus-visible { outline: 3px solid var(--cx-focus, var(--cx-primary)); outline-offset: 2px; }

/* the ground says the state */
.jy-row.is-not_started, .jy-row.is-in_progress { border-color: var(--cx-rule); }
.jy-row.has-action { border-color: var(--cx-primary); }
.jy-row.has-action .jy-row__icon { background: var(--cx-primary-wash); }
.jy-row.is-done { background: var(--cx-ok-wash); }
.jy-row.is-done .jy-row__icon, .jy-row.is-done .jy-row__name { color: var(--cx-ok); }
.jy-row.is-pending_us { background: var(--cx-info-wash); }
.jy-row.is-pending_us .jy-row__icon, .jy-row.is-pending_us .jy-row__name { color: var(--cx-info); }
.jy-row.is-not_applicable, .jy-row.is-locked { background: var(--cx-raised); }
.jy-row.is-not_applicable .jy-row__icon, .jy-row.is-locked .jy-row__icon { color: var(--cx-muted); }
.jy-row.is-not_applicable .jy-row__why, .jy-row.is-locked .jy-row__why { font-weight: 400; color: var(--cx-ink-2); }
.jy-row.is-unavailable { background: var(--cx-warn-wash); }
.jy-row.is-unavailable .jy-row__icon { color: var(--cx-warn); }

/* T431b: the page after the full scan, the plan row as its own panel above the list */
.jy-after { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--cx-s-4); align-items: start;
  margin-bottom: var(--cx-s-5); padding: var(--cx-s-6); border-radius: var(--r-lg); background: var(--cx-primary-wash);
  border: 1px solid var(--cx-primary); }
.jy-after__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--cx-surface); color: var(--cx-primary); }
.jy-after__icon svg { width: 28px; height: 28px; }
.jy-after__title { margin: 0; font-size: var(--t-h1); font-weight: 600; line-height: 1.2; color: var(--cx-ink); }
.jy-after__body { margin: var(--cx-s-3) 0 0; max-width: 62ch; color: var(--cx-ink); font-size: var(--cx-t-body); line-height: var(--cx-lh-body); }
.jy-after__act { margin-top: var(--cx-s-4); display: flex; flex-wrap: wrap; gap: var(--cx-s-3); }
.jy-card__title--sub { font-size: var(--t-h2, 22px); }
.jy-status { margin: var(--cx-s-3) 0 0; min-height: 0; font-size: var(--cx-t-body); line-height: var(--cx-lh-body); color: var(--cx-ink); font-weight: 500; }
.jy-status:empty { display: none; }
.jy-status.is-bad { color: var(--cx-warn); }
.jy-status:focus { outline: none; }
.jy-status:focus-visible { outline: 3px solid var(--cx-focus, var(--cx-primary)); outline-offset: 2px; }
button.jy-row__act[disabled] { opacity: .6; cursor: progress; }

/* the eleven devices, as information: a list, never a control */
.jy-devices { margin-top: var(--cx-s-2); }
.jy-devices__label { margin: 0; font-size: var(--cx-t-label); font-weight: var(--cx-w-label); letter-spacing: var(--cx-ls-label);
  text-transform: uppercase; color: var(--cx-muted); }
.jy-devices__list { list-style: none; margin: var(--cx-s-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--cx-s-4); }
.jy-devices__list li { font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-ink-2); }

@media (max-width: 600px) {
  .jy-card { padding: var(--cx-s-5) var(--cx-s-4); }
  .jy-row { grid-template-columns: 32px minmax(0, 1fr); padding: var(--cx-s-4); align-items: start; }
  .jy-row__icon { width: 32px; height: 32px; }
  .jy-row__icon svg { width: 20px; height: 20px; }
  .jy-row__side { grid-column: 1 / -1; justify-content: space-between; }
  .jy-row__act { flex: 1 1 100%; }
  .jy-after { grid-template-columns: 1fr; padding: var(--cx-s-5) var(--cx-s-4); }
  .jy-after__act .jy-row__act { flex: 1 1 100%; }
}

/* T496 round 2 (Jesse 2026-10-02): the first stage's mark after the meeting with the expert, the optional block (the
   neurotransmitter scan and the wearables), and the timeline of how the journey continues. Spacing on the 8 px
   grid; nothing moves on hover. */
.jy-stage { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--cx-s-4); align-items: center;
  margin-top: var(--cx-s-4); padding: var(--cx-s-4) var(--cx-s-5); border-radius: var(--r-lg); border: 1px dashed var(--cx-rule); }
.jy-stage__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--cx-muted); }
.jy-stage.is-done { border: 1px solid var(--cx-ok); background: var(--cx-ok-wash); }
.jy-stage.is-done .jy-stage__icon { background: var(--cx-ok); color: var(--cx-surface); }
.jy-stage__title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--cx-ink); }
.jy-stage.is-done .jy-stage__title { color: var(--cx-ok); }
.jy-stage__body { margin: 8px 0 0; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-ink-2); }

.jy-optional { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cx-rule); }
.jy-optional__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--cx-ink); }
.jy-optional .jy-steps { margin-top: var(--cx-s-4); }
.jy-tag { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--cx-rule);
  font-size: var(--cx-t-label); font-weight: 600; line-height: 22px; color: var(--cx-ink-2); vertical-align: 2px; }

.jy-next { margin-top: var(--cx-s-5); }
.jy-timeline { list-style: none; margin: var(--cx-s-5) 0 0; padding: 0; }
.jy-tl { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--cx-s-4); padding-bottom: 24px; }
.jy-tl::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--cx-rule); }
.jy-tl:last-child { padding-bottom: 0; }
.jy-tl:last-child::before { display: none; }
.jy-tl__dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cx-primary-wash);
  color: var(--cx-primary); font-weight: 600; }
.jy-tl__step { margin: 0; font-size: var(--cx-t-label); font-weight: var(--cx-w-label); letter-spacing: var(--cx-ls-label);
  text-transform: uppercase; color: var(--cx-muted); }
.jy-tl__name { margin: 8px 0 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--cx-ink); }
.jy-tl__body { margin: 8px 0 0; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-ink-2); max-width: 62ch; }
.jy-future { margin-top: 24px; padding: var(--cx-s-4) var(--cx-s-5); border-radius: var(--r-lg); background: var(--cx-primary-wash); }
.jy-future .jy-tl__name { margin-top: 0; }

@media (max-width: 600px) {
  .jy-stage { grid-template-columns: 32px minmax(0, 1fr); padding: var(--cx-s-4); }
  .jy-stage__icon { width: 32px; height: 32px; }
  .jy-tl { grid-template-columns: 32px minmax(0, 1fr); }
  .jy-tl__dot { width: 32px; height: 32px; }
  .jy-tl::before { left: 15px; top: 32px; }
  .jy-future { padding: var(--cx-s-4); }
}