/* ============================================================
   components/path.css
   02 Nov 2026 v13

   v13 - P-26 ONE-BUILD-PAGE: Build a session (.bs-*): Lately, the three
   parts (each in its kind's colour, with its icon and name), a move's row
   (figure, name and dose, the heart, Swap), Help me fill this, and When's
   it for?. A move left out on a sore day says so (.path-mv__out). Found
   by the new browser check: a heading beside its tile (.path-head) and
   Home's row (.path-coach) now wrap rather than split a long word or run
   off a 320 px phone at the largest text (a name like Wednesday).

   02 Nov 2026 v12

   v12 - P-23: a proposal's Swap opens a panel under its row (.path-swp):
   like this one, then the shared search (workout.css, .swap-find).

   01 Nov 2026 v11

   v11 - P-20: .path-effort and .pr-trend have their own rules (verify-css
   found them classes with none on v697).

   v10 - P-20 TRENDS-BUILD session 1: the Plan finish's Count this as a
   session (a snack), a 44 px target.

   v9 - P-13 Classes (mock-up v1 approved 01 Nov): a class's own page on the
   Plan (Before you start, its parts with their figures) and the player's
   figure.

   31 Oct 2026 v8

   v8 - P-13 LIBRARY: the Plan's Library says what it holds (.library-purpose).

   31 Oct 2026 v7

   v7 - STAGE PATH Session 9 (CLOSE; P-12 F3, F4, F5; Graeme, 31 Oct: "‹ Back,
   Exit in a session", "24 px, left", every Plan screen outside P-13's rooms).
   One look for every Plan room: the page heading 24 px at the left; one
   way back, ".plan-back" (‹ Back) or ".plan-exit" (Exit, once a session has
   started), and the house hidden beside it (only the Plan's markup carries
   these classes, so Free's house is untouched); ".plan-link", a link that
   was bare text, drawn as a pill; rooms whose heading sat beside the way
   back or centred, stacked at the left; the check-in's heading, I know
   what I want's rows and Privacy's two pills.

   31 Oct 2026 v6

   v6 - STAGE PATH Session 8 (P-8, P-12): the Plan's look reaches Outside's
   rooms, Log what I did, Walk, Run, Cycle and Swim (line icons in the
   door's colour, the page heading at its size).

   v5 - STAGE PATH Session 7 (P-7, P-12): Progress's Before and after, and
   the Plan's look for a shared room (.is-plan: Your year, Your impact):
   "‹ Back" and the heading at the left at the page size, the coach's words
   as a line, without the avatar card. Free's rooms are untouched.

   v4 - STAGE PATH Session 6 (P-6, P-12): one proposal shape (Swap beside
   each movement's video link; each figure on Today's plan's rows), the
   Plan's finish (.plan-finish, .pf-*), the player's halfway check.

   v3 - STAGE PATH Session 5 (P-5): the door routes (views/path.js) and,
   on Today's plan, What I've adjusted with Change my check-in
   (.cp-adjusted, the Plan only). Same tokens, sizes from --text-*.

   STAGE PATH P-4 (blueprint Session 4). The Plan's Home
   (views/plan-home.js), as mock-up v10 (Graeme, 29 Oct: "I like v10").
   Later Stage PATH screens add their rules here.

   One kind, one colour (LOOK-3, --kind-*): Get stronger amber, Keep moving
   blue, Stretch violet, Move to feel better green; teal for the app's own
   (check in, carry on). A colour is never said alone: every tile sits
   beside its words (WCAG 1.4.1). Sizes are the --text-* tokens, so the
   text size setting reaches every word (D-12). Nothing below the fold at
   text 1 on a 390 x 844 phone: the doors sit two by two until the words
   need a column of their own.
   ============================================================ */

.path-home {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* .main-content already gives the side gutter and the room above the nav. */
  padding: 0;
  box-sizing: border-box;
}
.path-greeting {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: var(--color-text);
  text-wrap: balance;
}
.path-greeting:focus { outline: none; }
.path-note {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--color-text);
}

/* The arc, said (it opens from Progress, Change my arc). */
.path-arcline {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.path-arcline .line-icon { color: var(--kind-teal); margin-top: 2px; }
.path-arcline strong { color: var(--color-text); font-weight: 600; }

/* ── The Today card: tinted with its door's colour ───────────────── */
.path-today {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1.5px solid var(--k, var(--color-primary));
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--k, var(--color-primary)) 12%, var(--color-bg));
  color: var(--color-text);
}
.path-today__head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.path-today__head > .kind-tile { width: 40px; height: 40px; }
.path-today__titles { flex: 1 1 calc(9.5rem * var(--user-text-scale, 1)); min-width: 0; }
.path-today__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.path-today__title { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); line-height: 1.2; }
.path-today__meta  { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.path-today__coach { margin: 0; font-size: var(--text-base); line-height: 1.45; }
.path-today__go { margin-top: var(--space-1); }
/* On the card's tint the app's teal-on-clear secondary falls below 4.5:1 in the light scheme: words in text colour, the edge in the border colour. */
.path-today .btn-secondary { color: var(--color-text); border-color: var(--color-border); }
.path-today__link {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-base);
  text-decoration: underline;
  cursor: pointer;
}
.path-today__link:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.path-today__bar { height: 8px; border-radius: 4px; background: var(--color-border-light); overflow: hidden; }
.path-today__bar i { display: block; height: 100%; background: var(--k, var(--color-primary)); }

/* What I've adjusted / I'll remember: two on Home, all on the plan. */
.path-adj__lbl {
  margin: 0 0 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.path-adj ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); line-height: 1.45; }
.path-adj li { display: flex; gap: var(--space-2); align-items: flex-start; }
.path-adj li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.5em; border-radius: 2px; background: var(--k, var(--color-primary)); }

/* The first movement, drawn: its frames take turns, still under Reduce motion. */
.path-today__fig { flex: none; width: calc(84px * min(var(--user-text-scale, 1), 1.2)); }
.path-today__fig .xfig { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.path-today__fig .xfig__frame {
  grid-area: 1 / 1;
  max-width: none; width: 100%;
  padding: 2px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--k, var(--color-primary)) 8%, var(--color-bg-deep));
}
.path-today__fig .xfig__cap { display: none; }
.path-today__fig .xfig__frame:not(:first-child) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.reduce-motion) .path-today__fig .xfig--2 .xfig__frame { animation: path-fig2 5s ease-in-out infinite; }
  :root:not(.reduce-motion) .path-today__fig .xfig--2 .xfig__frame:nth-child(2) { animation-delay: -2.5s; }
  :root:not(.reduce-motion) .path-today__fig .xfig--3 .xfig__frame { animation: path-fig3 7.5s ease-in-out infinite; }
  :root:not(.reduce-motion) .path-today__fig .xfig--3 .xfig__frame:nth-child(2) { animation-delay: -5s; }
  :root:not(.reduce-motion) .path-today__fig .xfig--3 .xfig__frame:nth-child(3) { animation-delay: -2.5s; }
}
@keyframes path-fig2 { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes path-fig3 { 0%, 27% { opacity: 1; } 33%, 94% { opacity: 0; } 100% { opacity: 1; } }

/* Done today: before and after on the person's own five words (never a score). */
.path-moodpath { display: block; width: 100%; height: auto; max-height: 48px; }
.path-moodpath__line { stroke: var(--color-border); stroke-width: 2; stroke-linecap: round; }
.path-moodpath__tick { fill: var(--color-border); }
.path-moodpath__before { fill: var(--color-bg); stroke: var(--color-text-secondary); stroke-width: 3; }
.path-moodpath__after { fill: var(--k, var(--color-primary)); stroke: var(--k, var(--color-primary)); stroke-width: 3; }
.path-moodpath__move { stroke: var(--k, var(--color-primary)); stroke-width: 4; stroke-linecap: round; fill: none; }
.path-moodpath__ends { display: flex; justify-content: space-between; margin: -6px 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.reduce-motion) .path-moodpath__move { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: path-move 0.9s 0.2s ease-out forwards; }
  :root:not(.reduce-motion) .path-moodpath__after { transform-box: fill-box; transform-origin: center; animation: path-pop 0.45s 1s ease-out both; }
}
@keyframes path-move { to { stroke-dashoffset: 0; } }
@keyframes path-pop { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }

/* ── The doors ───────────────────────────────────────────────────── */
.path-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(9.5rem * var(--user-text-scale, 1))), 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.path-doors li { display: flex; }
.path-doors__wide { grid-column: 1 / -1; }
.path-door {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.path-door:hover { border-color: var(--k, var(--color-primary)); }
.path-door:active { transform: scale(0.99); }
.path-door:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.path-door__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.path-door__t { font-size: var(--text-base); font-weight: 700; line-height: 1.25; }
.path-door__d { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.4; }
.path-door__chev { flex: none; color: var(--color-text-secondary); }
.path-door--wide { min-height: 60px; }
@media (prefers-reduced-motion: reduce) { .path-door { transition: none; } .path-door:active { transform: none; } }
:root.reduce-motion .path-door { transition: none; }
:root.reduce-motion .path-door:active { transform: none; }

/* The coach's row, or your week's day: one action, tinted (mock-up v10). */
.path-coach {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 64px;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--k, var(--color-primary));
  border-radius: var(--radius-lg, 16px);
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--k, var(--color-primary)) 12%, var(--color-bg));
  color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
}
.path-coach:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.path-coach__text { flex: 1 1 0; min-width: min-content; display: flex; flex-direction: column; }   /* v13: a word never splits; the row wraps instead */
.path-coach__t { font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.path-coach__d { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.4; }

/* Lately: mood before and after, and what seems to help. Never a count of days. */
.path-lately { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(9.5rem * var(--user-text-scale, 1))), 1fr)); gap: var(--space-2); }
.path-lately__tile { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); min-width: 0; }
.path-lately__lbl { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-secondary); }
.path-lately__spark { display: block; width: 100%; height: 40px; }
.path-lately__before { fill: var(--color-text-secondary); }
.path-lately__after { fill: var(--kind-green); }
.path-lately__line { margin: 0; font-size: var(--text-sm); line-height: 1.4; color: var(--color-text); }

/* ── The door routes (views/path.js, Session 5) ───────────────────── */
.path-view { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 480px; margin: 0 auto; box-sizing: border-box; }
.path-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; min-width: 44px; padding: 0 var(--space-2) 0 0;
  background: none; border: 0; color: var(--color-text); font: inherit; font-size: var(--text-base); cursor: pointer;
}
.path-back:focus-visible, .path-link:focus-visible, .path-mv__yt:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.path-stepbar { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.path-stepbar li { flex: 1; height: 6px; border-radius: 3px; background: var(--color-border); }
.path-stepbar li.is-on { background: var(--k, var(--color-primary)); }
.path-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.path-head > .path-h1 { flex: 1 1 0; min-width: min-content; }   /* v13: a long name drops under its tile rather than run off the phone */
.path-head > .kind-tile { flex: none; }
.path-h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: 1.2; color: var(--color-text); text-wrap: balance; }
.path-h1:focus { outline: none; }
.path-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.path-list li { display: flex; }
.path-row.is-tint { border-color: var(--k, var(--color-primary)); background: color-mix(in srgb, var(--k, var(--color-primary)) 12%, var(--color-bg)); }
.path-row.is-dashed { border-style: dashed; background: transparent; }
.path-badge {
  display: inline-block; margin-left: 4px; padding: 0 6px; vertical-align: 2px;
  border: 1.5px solid var(--k, var(--color-primary)); border-radius: 999px;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text);
}
.path-why { display: block; color: var(--color-text); }
.path-coachline { margin: 0; font-size: var(--text-base); line-height: 1.45; color: var(--color-text); }
.path-small { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-secondary); }
.path-note {
  margin: 0; padding: var(--space-2) var(--space-3); border: 1.5px solid var(--kind-amber); border-radius: 12px;
  background: color-mix(in srgb, var(--kind-amber) 12%, var(--color-bg)); color: var(--color-text); font-size: var(--text-sm); line-height: 1.45;
}
.path-link {
  align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0;
  color: var(--color-text); font: inherit; font-size: var(--text-base); text-decoration: underline; cursor: pointer; text-align: left;
}
.path-seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.path-seg legend { padding: 0; margin-bottom: 6px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-secondary); }
.path-seg__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.path-seg label {
  position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%;
  min-height: 44px; min-width: 56px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: var(--text-sm);
}
.path-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.path-seg label:has(input:checked) { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); font-weight: 700; }
.path-seg label:has(input:focus-visible) { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.path-mvs { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.path-mv { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); background: var(--color-surface); }
.path-mv .xfig { max-width: 160px; }
.path-mv .xfig__cap { display: none; }
.path-mv__nm { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.path-mv__yt { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text); font-size: var(--text-sm); text-decoration: underline; }
.path-view .path-adj { display: flex; flex-direction: column; gap: 2px; }

/* Today's plan, the Plan only: every adjustment, and Change my check-in. */
.cp-adjusted { display: flex; flex-direction: column; gap: 4px; margin: var(--space-2) 0; }
.cp-adjusted__lbl { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-secondary); }
.cp-adjusted__list { margin: 0; padding-left: 1.2em; font-size: var(--text-sm); line-height: 1.45; color: var(--color-text); }
.cp-adjusted__redo {
  align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0;
  color: var(--color-text); font: inherit; font-size: var(--text-base); text-decoration: underline; cursor: pointer;
}
.cp-adjusted__redo:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }

/* ── One proposal shape (Session 6) ──────────────────────────────── */
.path-mv__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.path-mv__swap { min-height: 44px; min-width: 64px; }
.cp-plan__fig { flex: none; width: calc(56px * min(var(--user-text-scale, 1), 1.2)); }
.cp-plan__fig .xfig { display: grid; grid-template-columns: 1fr; margin: 0; }
.cp-plan__fig .xfig__frame { grid-area: 1 / 1; max-width: none; width: 100%; padding: 2px; border-radius: 10px; background: var(--color-bg-deep); }
.cp-plan__fig .xfig__frame:not(:first-child), .cp-plan__fig .xfig__cap { display: none; }

/* ── The Plan's finish (views/plan-finish.js) ─────────────────────── */
.plan-finish { display: flex; flex-direction: column; gap: var(--space-4); max-width: 480px; margin: 0 auto; }
.plan-finish h1 { margin: 0; }
.plan-finish h1:focus { outline: none; }
.pf-fb { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pf-fb__row { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); background: var(--color-surface); }
.pf-fb__nm { font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.pf-fb__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pf-tog {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm);
}
.pf-tog[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); font-weight: 700; }
.pf-tog:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.pf-tog .line-icon { flex: none; }

/* The player's halfway check (workout.js v36, the Plan). */
.wo-halfway .coach-message-text { margin: var(--space-3) 0 var(--space-4); }
/* The session moments' answers on the Plan's finish: 44 px targets (they are 36 on Free's, unchanged). */
.plan-finish .card-coach button { min-height: 44px; }

/* ── Progress, Before and after (Session 7, the Plan) ─────────────── */
.pr-mood { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }
.path-lately__key { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-xs); color: var(--color-text-secondary); }
.path-lately__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.path-lately__swatch.is-before { background: var(--color-text-secondary); }
.path-lately__swatch.is-after { background: var(--kind-green); margin-left: var(--space-2); }

/* ── The Plan's look for a shared room (.is-plan; P-12, Session 7) ─── */
.is-plan .workout-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding-left: 0; padding-right: 0; position: static; background: none; border: 0; }
.is-plan .workout-header .btn-ghost { min-height: 44px; padding-left: 0; color: var(--color-text); font-weight: 400; }
.is-plan .workout-header > .workout-header-title { flex-basis: auto; }
.is-plan .workout-header-title { margin: 0; font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: 1.2; text-align: left; color: var(--color-text); }
.is-plan .card-coach { background: none; border: 0; box-shadow: none; padding: 0; }
.is-plan .card-coach .coach-icon-small { display: none; }
.is-plan .card-coach .coach-message-text { font-size: var(--text-base); line-height: 1.45; color: var(--color-text); }
.is-plan .card:not(.card-coach) { border-radius: var(--radius-lg, 16px); }

/* Outside's rooms on the Plan (Session 8). */
.is-plan .view-header h1 { font-size: var(--text-2xl); text-align: left; }
.is-plan .ws-type-icon, .is-plan .activity-type-card > span[aria-hidden="true"] { display: inline-flex; color: var(--kind-blue); }
.is-plan .ws-type-icon .line-icon, .is-plan .activity-type-card .line-icon { width: 22px; height: 22px; }
/* Log what I did's choices wrap as the text grows (both tiers: at text 2 three columns ran off the page, a fault, not a look). */
.activity-type-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(6.5rem * var(--user-text-scale, 1))), 1fr)); }

/* ── One look for every Plan room (Session 9) ────────────────────────── */
.is-plan h1:not(.sr-only) { font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: 1.2; text-align: left; }
.plan-back, .plan-exit { min-height: 44px; padding-left: 0; padding-right: var(--space-3); background: none; border: 0; color: var(--color-text); font-weight: 400; justify-content: flex-start; }
/* One way back: a room with its own does not draw the house beside it. */
body:has(#main-content .plan-back, #main-content .plan-exit) #hidden-nav-home-btn { display: none; }
.plan-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-strong, var(--color-border)); border-radius: 999px; background: var(--color-surface); color: var(--color-text); text-decoration: none; font-weight: var(--font-medium, 500); }
/* Rooms whose heading sat beside the way back, or centred, on the Plan. */
.is-plan .je-header, .is-plan .practices-header, .is-plan .library-sub-header, .is-plan .mc-header, .is-plan .prescribed-view-header, .is-plan .privacy-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); border-bottom: 0; }
.is-plan .finish-head { align-items: flex-start; text-align: left; }
.is-plan.gp-no-session { text-align: left; align-items: flex-start; }
/* The check-in's heading and way back (the Plan), I know what I want's rows, Privacy's two pills. */
.ci-plan-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.ci-plan-head h1 { margin: 0; }
.kw-rows { margin-top: var(--space-3); }
.privacy-docs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
/* P-13: the Plan's Library says what it holds. */
.library-purpose { margin: var(--space-1) 0 0; color: var(--color-text-secondary); }
/* P-13 Classes: a class's own page, and the player's figure (the Plan). */
.class-page .path-seg { margin: var(--space-3) 0; }
.class-before { background: var(--color-surface); border-radius: var(--radius-lg, 16px); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.class-before__h { font-size: var(--text-base); margin: 0 0 var(--space-1); }
.class-before p { margin: 0 0 var(--space-1); color: var(--color-text-secondary); }
.class-parts { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.class-part { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); padding: var(--space-2) var(--space-3); min-height: 56px; }
.class-part__fig { flex: none; width: calc(56px * min(var(--user-text-scale, 1), 1.2)); display: grid; place-items: center; }
.class-part__fig svg { width: 100%; height: auto; border-radius: 10px; background: var(--color-bg-deep, var(--color-bg)); }
.class-part__fig.is-none::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); }
.class-player__fig { display: grid; place-items: center; background: var(--color-surface); border-radius: var(--radius-lg, 16px); padding: var(--space-3); margin: var(--space-2) 0 var(--space-3); }
.class-player__fig svg { width: min(100%, 220px); height: auto; }

/* P-20 (path.css v10): the Plan finish's Count this as a session, a 44 px target. */
.pf-count { margin: 0.75rem 0; }
.pf-count__lbl { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: var(--text-base, 1rem); }
.pf-count__lbl input { width: 1.4rem; height: 1.4rem; flex: none; }
/* P-20: a trend session's effort in the talk test's words, and Progress's Zone 2 week. */
.path-effort { font-weight: 600; }
.pr-trend { margin: 1rem 0; }

/* ── P-23: a proposal's Swap, opened under its row ─────────────────── */
.path-swp { flex-basis: 100%; width: 100%; margin-top: var(--space-2); padding: var(--space-3); border: 2px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--color-surface); }
.path-swp__h { font-size: var(--text-base); margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.path-swp__sub { margin: var(--space-2) 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.path-swp__list { list-style: none; margin: 0; padding: 0; }
.path-swp__pick { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--space-2); width: 100%; min-height: 48px; margin: var(--space-1) 0;
  padding: var(--space-2) var(--space-3); text-align: left; font: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; }
.path-swp__pick:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.path-swp__name { font-weight: var(--font-bold); flex: 1 1 10em; min-width: 0; overflow-wrap: break-word; font-size: min(1em, 6.4vw); }
.path-swp__kit { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ── P-26 Build a session ─────────────────────────────────────────── */
.bs-view { gap: var(--space-4); }
.saved-build { align-self: flex-start; min-height: 44px; margin-top: var(--space-2); }
.bs-lately { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); background: var(--color-surface); }
.bs-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bs-quiet { color: var(--color-text-secondary); }
.bs-part { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); background: var(--color-surface); min-width: 0; }
.bs-part__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bs-part__head > .kind-tile { flex: none; }
.bs-part__h { margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text); }
.bs-part__min { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-mvs, .bs-picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bs-mv { display: flex; flex-direction: column; min-width: 0; }
.bs-mv__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 56px; }
.bs-mv__acts { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.bs-mv__fig { flex: none; width: 64px; }
.bs-mv__fig .xfig { display: block; width: 64px; max-width: 64px; margin: 0; }
.bs-mv__fig .xfig__frame { display: block; width: 64px; margin: 0; }
.bs-mv__fig .xfig__frame svg { display: block; width: 64px; height: auto; }
.bs-mv__fig .xfig__frame:not(:first-child), .bs-mv__fig .xfig__cap { display: none; }
.bs-mv__txt { display: flex; flex-direction: column; flex: 1 1 6em; min-width: min-content; }
.bs-pick__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bs-mv__nm { font-weight: 600; color: var(--color-text); }
.bs-fav { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--color-text-secondary); cursor: pointer; }
.bs-fav[aria-pressed="true"] { color: var(--color-danger-text, var(--color-text)); }
.bs-fav[aria-pressed="true"] svg { fill: currentColor; }
.bs-fav:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.bs-swap { flex: none; min-height: 44px; }
.bs-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bs-acts .btn { flex: 1 1 auto; min-height: 44px; }
.bs-help { border-color: var(--k, var(--color-primary)); }
.bs-panel { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 2px solid var(--color-primary); border-radius: var(--radius-lg, 16px); background: var(--color-bg); }
.bs-panel .path-swp__h:focus { outline: none; }
.bs-pick { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md, 12px); background: var(--color-surface); cursor: pointer; }
.bs-pick input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--color-primary); }
.bs-pick:has(input:focus-visible) { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.bs-pick__why { font-size: var(--text-sm); color: var(--color-text-secondary); }
.bs-sum { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.bs-field { display: flex; flex-direction: column; gap: 6px; }
.bs-field label { font-weight: 600; color: var(--color-text); }
.bs-field .form-input { min-height: 48px; max-width: 100%; box-sizing: border-box; }
.bs-when { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bs-when__lg { padding: 0; margin-bottom: var(--space-2); font-weight: 600; color: var(--color-text); }
.bs-opt { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); background: var(--color-surface); }
.bs-opt.is-on { border-color: var(--color-primary); }
.bs-radio { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-weight: 600; color: var(--color-text); cursor: pointer; }
.bs-radio input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--color-primary); }
.bs-opt__sub { margin-left: calc(22px + var(--space-3)); }
.path-mv__out { color: var(--color-text); font-weight: 600; }