/* A guide step's own workspace page (2026-08-11 chapter-3 build).
 *
 * Transcribed from docs/design-reference/extracted/nav-step-condensed-bar.html
 * — the rendered v3 step view for the "Being" statement step — and the
 * StepWorkspace / StepHead / Conversation / DraftPanel / StepFooter components
 * in wizard-setting-the-stage-source.jsx.js. Every size and color below is the
 * capture's own inline value or the token it referenced.
 *
 * The footer buttons are the app's shared .btn / .btn-ghost / .btn-primary,
 * whose rules already match the capture's inline styles exactly (0 radius,
 * uppercase font-ui, 0.75rem 1.5rem, calc(14px + var(--text-bump))), so
 * nothing is restated here.
 */

.step-workspace {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.75rem 0 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Entrance (motion & polish spec §5): the workspace's panels — head, body,
   conversation, draft, footer — fade up on a 40ms stagger, capped at the
   sixth. Enter tier; reduced motion pins it globally. */
.step-workspace > * {
  animation: motion-rise var(--motion-enter) var(--ease-out) backwards;
  animation-delay: 200ms;
}

.step-workspace > :nth-child(1) { animation-delay: 0ms; }
.step-workspace > :nth-child(2) { animation-delay: 40ms; }
.step-workspace > :nth-child(3) { animation-delay: 80ms; }
.step-workspace > :nth-child(4) { animation-delay: 120ms; }
.step-workspace > :nth-child(5) { animation-delay: 160ms; }

/* ── Head ─────────────────────────────────────────────────────────────── */

.step-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.step-eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--teal-ink);
  font-weight: 400;
  margin: 0;
  white-space: nowrap;
}

.step-question {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(28.5px * var(--text-scale));
  line-height: 1.3;
  color: var(--navy-primary);
  margin: 0 0 0.5rem;
}

.step-helper {
  font-family: var(--font-body);
  font-size: calc(17px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Roadmap mini-map ─────────────────────────────────────────────────────
   Six tiny boxes mirroring the roadmap's foundation grid, at the right end
   of the eyebrow row on the steps that write those boxes. Muted until the
   pointer (or keyboard focus) arrives; the current step's box is filled,
   the rest outlined. Square corners, tokens only — dark mode follows. */

.roadmap-minimap {
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(3, 15px);
  grid-auto-rows: 15px;
  gap: 4px;
  opacity: 0.45;
  transition: opacity var(--transition-fast);
}

.roadmap-minimap:hover,
.roadmap-minimap:focus-within {
  opacity: 1;
}

.roadmap-minimap-box {
  display: block;
  border: 1px solid var(--teal-ink);
  background: transparent;
}

.roadmap-minimap-box:hover {
  background: var(--border-light);
}

.roadmap-minimap-box[aria-current] {
  background: var(--teal-accent);
  border-color: var(--teal-accent);
}

/* A step's teaching video: a closed row until asked for. */
.step-video {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
}

.step-video summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: calc(16px * var(--text-scale));
  color: var(--teal-ink);
}

.step-video summary::-webkit-details-marker { display: none; }

.step-video summary .fa-sharp {
  font-size: 1.35em;
  color: var(--teal-accent);
}

/* The badge over a poster frame is white on the photograph, not teal on the
   page — components.css styles it, and this sheet loads after that one at the
   same specificity, so the rule above would otherwise win and paint it teal. */
.step-video summary .video-thumb-play {
  font-size: 1.4rem;
  color: #fff;
}

.step-video-frame {
  padding: 0 1.25rem 1.25rem;
}

/* ── Conversation ─────────────────────────────────────────────────────── */

.step-talk {
  display: flex;
  flex-direction: column;
}

/* Room for the floating New chat / History controls (modules/interview.css),
   which overlap the top of the transcript rather than owning a row. */
.step-talk-surface .step-chat {
  padding-top: 2.4rem;
}

/* The bubbles are the app's shared .message rules, which already match the
   capture (85% max-width, 1rem 1.25rem padding, the 4px corner on the
   speaker's side). Only the panel is local.

   The capture holds two bubbles and grows; a real conversation runs long, and
   the draft panel below it is the point of the page, so the panel scrolls
   inside itself rather than pushing the draft off the screen. */
.step-chat {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  /* Starts with room to breathe (owner, 2026-08-11): a panel hugging its
     one opener bubble reads as a finished transcript, not an invitation.
     The empty space below the opener says "your turn". Grows with the
     conversation up to the same ceiling as before. */
  min-height: 230px;
  max-height: min(52vh, 560px);
  overflow-y: auto;
}

/* ── The drafting offer under a cadence reply ─────────────────────────────
   messages/_message renders the row wherever the message renders (the same
   conversation can show behind its module door), but the button submits the
   step page's #step-synth-form, so it only exists where that form does:
   hidden by default, shown inside the step workspace's own chat. Quiet in the
   chat grammar, same family as the parking offer's affordance. */
.draft-offer-actions {
  display: none;
}

.step-talk .draft-offer-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.draft-offer-go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: calc(0.75rem + var(--text-bump));
  font-weight: 600;
  min-height: 38px;
  padding: 0.3rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--teal-accent);
  background: transparent;
  color: var(--teal-ink, #2F7A93);
  cursor: pointer;
  transition: all var(--motion-quick) var(--ease-out);
}

.draft-offer-go:hover {
  background: var(--teal-light, #e8f4f8);
}

/* ── The Try pill ─────────────────────────────────────────────────────────
   Between the conversation and the composer, on the steps that offer one
   (chapter 1 today). Moved here from the Setting the Stage modal, unchanged in
   look: dashed and muted on purpose, because it is an offer, not an
   instruction. An unfilled slot must not leave a gap behind. */

.step-try-slot:empty {
  display: none;
}

/* The ask that hides the suggestion until wanted (owner, 2026-08-13). The
   zone wrapper carries revealed state so stream refreshes never re-collapse. */
.step-try-zone .step-try-slot { display: none; }
.step-try-zone.is-revealed .step-try-slot { display: block; }
.step-try-zone.is-revealed .step-try-slot:empty { display: none; }
.step-try-zone.is-revealed .step-try-ask { display: none; }

.step-try-ask {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px dashed var(--border-medium);
  border-top: none;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(11.5px * var(--text-scale));
  color: var(--teal-ink);
}

.step-try-ask:hover { background: rgba(255, 255, 255, 0.9); }

/* The refresh carries its words now ("Another suggestion"), centered on the
   suggestion line rather than hanging at the top of the pill. */
.step-try-refresh {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: calc(10.5px * var(--text-scale));
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.3rem;
}

.step-try {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px dashed var(--border-medium);
  border-top: none;
  background: rgba(255, 255, 255, 0.6);
}

.step-try--waiting {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
}

.step-try-send {
  flex: 1;
  text-align: left;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-secondary);
}

.step-try-label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: calc(11px * var(--text-scale));
  color: var(--teal-ink);
  margin-right: 0.5rem;
}

/* Quiet enough that it never competes with the line it refreshes. */
.step-try-refresh {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0.1rem 0.2rem;
  cursor: pointer;
  line-height: 1;
  font-size: calc(14px * var(--text-scale));
  color: var(--text-muted);
}

.step-try-refresh:hover {
  color: var(--teal-ink);
}

.step-try-refresh:disabled {
  opacity: 0.4;
  cursor: progress;
}

.step-try-refresh-form {
  display: flex;
  flex-shrink: 0;
}

.step-composer {
  padding: 1rem 1.5rem;
  border: 1px solid var(--border-light);
  border-top: none;
  display: flex;
  gap: 0.75rem;
  background: var(--bg-primary);
}

.step-composer-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--text-dark);
  font-family: var(--font-body);
  /* 16px floor, member scale, no bump -- see .chat-input in roadmap.css. */
  font-size: calc(16px * var(--text-scale, 1));
  resize: none;
}

.step-composer-input:focus {
  border-color: var(--teal-accent);
}

.step-send {
  background: var(--teal-accent);
  border: none;
  border-radius: var(--radius-md);
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.step-send:hover {
  background: var(--teal-fill-hover);
}

.step-send .fa-sharp {
  color: var(--text-light);
  font-size: 1.1rem;
}

/* ── Draft panel ──────────────────────────────────────────────────────── */

.step-synth-form {
  display: contents;
}

.step-draft {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--teal-accent);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
  /* Anchors the synthesis payoff's drawn left rule (::after, below). */
  position: relative;
}

/* "Here is what I heard" (owner mockup, 2026-08-13): while a step synthesis
   is proposing, the panel becomes the card — sparkle eyebrow up top, the
   saves-into line stepping aside, the statement reading as display text
   rather than a form field. Choosing any answer settles the panel back to
   its plain editable self (draft-proposal#settle removes .is-proposal). */
.step-draft-heard-head {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.step-draft.is-proposal .step-draft-heard-head { display: flex; }
.step-draft.is-proposal .step-draft-head--proposing { display: none; }

.step-draft-heard-head .fa-sharp {
  color: var(--teal-accent);
  font-size: calc(1.3rem + var(--text-bump));
}

.step-draft-heard-eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: calc(0.78rem + var(--text-bump));
  color: var(--teal-ink);
}

.step-draft.is-proposal--step .step-draft-text {
  border: none;
  background: transparent;
  padding: 0;
  resize: none;
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--text-dark);
}

.step-draft.is-proposal--step .step-draft-text:focus {
  border: none;
}

.step-draft-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* The coach payoff card (motion & polish spec §3): when a synthesis lands —
   the panel arrives over a Turbo Stream wearing .is-synthesized or
   .is-proposal — it settles in, and the teal left rule draws itself top to
   bottom once. A plain page render never carries these classes, so reloading
   an already-synthesized step stays still. */
.step-draft.is-synthesized,
.step-draft.is-proposal {
  animation: motion-settle var(--motion-enter) var(--ease-out);
}

.step-draft.is-synthesized::after,
.step-draft.is-proposal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px; /* over the border-left the panel already wears */
  width: 4px;
  background: var(--teal-dark);
  transform-origin: top;
  animation: step-draft-rule var(--motion-ceremony) var(--ease-out) both;
  animation-delay: var(--motion-enter);
}

@keyframes step-draft-rule {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.step-draft-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.step-draft-icon {
  color: var(--teal-ink);
}

.step-draft-label {
  flex: 1;
  font-family: var(--font-heading);
  font-size: calc(17px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

/* The quoted destination as a door: stage steps link their label to the
   Notebook shelf entry the words land on. Same ink as the sentence, with the
   underline saying it goes somewhere. */
.step-draft-label-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--teal-accent);
  text-underline-offset: 3px;
}

.step-draft-label-link:hover,
.step-draft-label-link:focus-visible {
  color: var(--teal-ink);
}

.step-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: calc(11.5px * var(--text-scale));
  color: var(--teal-ink);
}

.step-draft-text {
  width: 100%;
  min-height: 90px;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border-light);
  border-radius: 0;
  font-family: var(--font-body);
  /* Exactly the 16px iOS floor, scaled by the member's text-size setting,
     no --text-bump: same rule as .chat-input, so the box reads at the
     page's own text size (owner, 2026-08-14). */
  font-size: calc(16px * var(--text-scale, 1));
  line-height: 1.7;
  color: var(--text-dark);
  background: var(--bg-primary);
  resize: vertical;
  box-sizing: border-box;
}

.step-draft.is-synthesized .step-draft-text {
  border: 2px solid var(--teal-accent);
}

.step-draft-text:focus {
  border-color: var(--teal-accent);
}

/* The autosave's own line, under the box. Sits on its own row so nothing
   reflows when it fills in and empties again (.autosave-status carries the
   colour and the idle fade). */
.step-draft-status {
  display: block;
  min-height: 1.1rem;
}

.step-draft-note {
  margin: 0.6rem 0 0;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-muted);
}

/* A synthesis that would land on top of words the member already wrote shows
   as a proposal instead of saving (draft_proposal_controller). The dashed edge
   says "not yours yet" without shouting. */
.step-draft.is-proposal {
  border-left-color: var(--gold-accent, var(--teal-accent));
}

.step-draft.is-proposal:not(.is-proposal--step) .step-draft-text {
  border: 2px dashed var(--teal-accent);
}

.step-draft-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.step-save-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.step-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.step-footer-spacer {
  flex: 1;
}

/* "Next up: [step]" under the footer buttons — a quiet preview of where
   Save and continue goes. */
.step-next-up {
  text-align: right;
  margin: 0.4rem 0 0;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-secondary);
}

/* The action-area offer under the footer (guide_steps/_action_area_offer):
   quiet by design — a card the weight of a note, not of a decision. Same teal
   left edge as the post-save suggestion card (layout.css) so a member meets
   one idea in two places rather than two ideas. */
.step-area-offer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--teal-accent);
  border-radius: 6px;
}

.step-area-offer-icon {
  color: var(--teal-accent);
}

.step-area-offer-text {
  flex: 1;
  min-width: 14rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-secondary);
}

.step-area-offer-text strong {
  font-weight: 500;
  color: var(--text-primary);
}

/* button_to wraps the button in a form; the form must not take a line of its
   own inside the flex row. */
.step-area-offer-form {
  display: inline-flex;
  margin: 0;
}

/* "What do you call your spouse?" (guide_steps/_spouse_name) — the one place
   the app asks, on the two steps that are already about the member's marriage.
   Deliberately the quietest thing on the page: no card, no teal edge, no icon.
   It is a line of the step's own body with a field in it, and it disappears
   for good once it is answered. */
.step-spouse-ask {
  margin: -0.2rem 0 0;
}

.step-spouse-label {
  display: block;
  max-width: 46rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-muted);
}

.step-spouse-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* max(16px, ...) is the iPad zoom floor the 2026-08-11 audit set on every
   typed field (test/system/input_zoom_test.rb). */
.step-spouse-input {
  width: 15rem;
  max-width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  font-family: var(--font-body);
  font-size: max(16px, calc(15px * var(--text-scale)));
  color: var(--text-dark);
}

/* The keyboard ring itself is base.css's :focus-visible rule, defined once
   (test/assets/focus_ring_test.rb). This only warms the border. */
.step-spouse-input:focus {
  border-color: var(--teal-accent);
}

.step-spouse-form {
  margin: 0;
}

/* Already fed: a statement, not an offer, so the edge goes quiet. */
.step-area-offer--done {
  border-left-color: var(--border-light);
}

.step-area-offer--done .step-area-offer-icon {
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .step-workspace {
    padding-top: 1.1rem;
  }

  .step-composer {
    padding: 0.8rem 0.9rem;
  }

  .step-footer-spacer {
    display: none;
  }

  .step-footer .step-footer-btn {
    flex: 1 1 auto;
  }
}

/* ── Bespoke step bodies (2026-08-11 chapter-4 build) ───────────────────────
 *
 * The prototype's TimeBody / FaithBody / CouplesBody / FamilyBody / BoardBody
 * components in wizard-setting-the-stage-source.jsx.js, plus the rendered
 * capture of the board step (state-in-capacity-stepview.html). Every size and
 * color below is the component's own inline value or the token it referenced.
 *
 * A body's inputs belong to the step's save form via the HTML `form`
 * attribute, so nothing here is inside a <form> of its own and no layout
 * depends on one.
 */

.step-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* A body's head row: the section label with the autosave status beside it —
   the same seating the areas chooser gave it first (.step-areas-head). */
.step-body-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

/* The prototype's SectionLabel above a body's content. */
.step-body-label {
  margin: 0;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: calc(12px * var(--text-scale));
  color: var(--text-secondary);
}

.step-body-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Step 11: the HIGO grid (TimeBody) ─────────────────────────────────── */

/* The Member Guide's capacity framing above the grid (p. 49): member-facing
   methodology prose, so it reads at body size rather than as a muted note. */
/* Mission (p. 42): same framing panel as the week's; the scaffold line is
   the guide's fill-in, italic with breathing dots. */
.step-mission-scaffold {
  font-style: italic;
  color: var(--text-secondary);
}

.step-mission-scaffold span {
  display: inline-block;
  min-width: 5rem;
  border-bottom: 1px solid var(--border-medium);
  text-align: center;
}

/* A quoted voice inside a framing panel (Buford on the metrics step):
   italic, quietly inset, the panel's own type otherwise. */
.step-context-quote {
  font-style: italic;
  color: var(--text-secondary);
  padding-left: 0.9rem;
  border-left: 2px solid var(--border-medium);
}

.step-week-context {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.65;
  color: var(--text-dark);
}

.step-week-context p,
.step-week-context ul {
  margin: 0;
}

.step-week-context ul {
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* The component's Panel with padding:0 wrapping a 1px-gutter grid: the gutter
   IS the rule, drawn by the grid's own background showing through. */
.step-week-grid {
  display: grid;
  grid-template-columns: 1fr repeat(5, 66px);
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.step-week-head {
  background: var(--surface-inverse);
  color: #fff;
  padding: 0.6rem 0.7rem;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
}

.step-week-head.is-num,
.step-week-cell.is-num {
  text-align: center;
}

.step-week-cell {
  background: var(--bg-primary);
  padding: 0.35rem 0.4rem;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-dark);
  display: flex;
  align-items: center;
}

.step-week-cell.is-num {
  justify-content: center;
}

.step-week-name {
  padding: 0.35rem 0.5rem;
}

.step-week-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.3rem 0.35rem;
  font-family: var(--font-body);
  /* 16px floor: iOS Safari zooms the whole page when a focused field is set
     smaller, which throws the layout out from under the member. */
  font-size: max(16px, calc(15px * var(--text-scale)));
  color: var(--text-dark);
}

.step-week-input:focus {
  border-color: var(--teal-accent);
  background: var(--bg-primary);
}

.step-week-score {
  /* The 1 and 5 options carry rubric sentences, so the select's intrinsic
     width is far wider than its 66px column. Pin it to the cell: the open
     list shows the full wording, and the closed control clips after the
     number (text stays left-aligned so the number is what survives). */
  width: 100%;
  min-width: 0;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-body);
  /* 16px floor: iOS Safari zooms the whole page when a focused field is set
     smaller, which throws the layout out from under the member. */
  font-size: max(16px, calc(15px * var(--text-scale)));
  color: var(--text-dark);
  padding: 0.25rem;
  cursor: pointer;
}

.step-week-score:focus {
  border-color: var(--teal-accent);
}

/* v <= 2 prints in warning ink, per the component. */
.step-week-score.is-low {
  color: var(--status-warning-deep);
}

.step-week-total {
  background: var(--teal-light);
  color: var(--teal-ink);
  font-weight: 600;
  justify-content: center;
}

/* total <= 8 takes the warning ground, per the component. */
.step-week-total.is-low {
  background: var(--status-warning-bg);
  color: var(--status-warning-deep);
}

/* The component's "Add an activity" strip, reused for the scoring key. */
.step-week-note {
  grid-column: 1 / -1;
  background: var(--bg-secondary);
  margin: 0;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-secondary);
}

.step-week-hours {
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--teal-light);
  background: var(--bg-primary);
  padding: 0.9rem 1rem;
}

.step-week-hours-head {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
}

.step-week-hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.5rem 0.85rem;
}

.step-week-hour {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.step-week-hour-label {
  flex: 1;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-dark);
}

.step-week-hour-input {
  width: 72px;
  flex-shrink: 0;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  padding: 0.35rem 0.5rem;
  font-family: var(--font-body);
  /* 16px floor: iOS Safari zooms the whole page when a focused field is set
     smaller, which throws the layout out from under the member. */
  font-size: max(16px, calc(15px * var(--text-scale)));
  color: var(--text-dark);
  text-align: center;
}

.step-week-hour-input:focus {
  border-color: var(--teal-accent);
}

/* ── Step 12: goals and the gap ────────────────────────────────────────── */

.step-gap-grid {
  display: grid;
  grid-template-columns: 1fr 76px 96px 96px;
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.step-gap-head {
  background: var(--surface-inverse);
  color: #fff;
  padding: 0.6rem 0.7rem;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
}

.step-gap-head.is-num,
.step-gap-cell.is-num {
  text-align: center;
}

.step-gap-cell {
  background: var(--bg-primary);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-dark);
  display: flex;
  align-items: center;
}

.step-gap-cell.is-num {
  justify-content: center;
}

.step-gap-area {
  gap: 0.55rem;
}

.step-gap-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.step-gap-input {
  width: 64px;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  padding: 0.3rem 0.4rem;
  font-family: var(--font-body);
  /* 16px floor: iOS Safari zooms the whole page when a focused field is set
     smaller, which throws the layout out from under the member. */
  font-size: max(16px, calc(15px * var(--text-scale)));
  color: var(--text-dark);
  text-align: center;
}

.step-gap-input:focus {
  border-color: var(--teal-accent);
}

.step-gap-change.is-up {
  color: var(--teal-ink);
  font-weight: 600;
}

.step-gap-change.is-down {
  color: var(--status-warning-deep);
  font-weight: 600;
}

.step-gap-total {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--teal-ink);
}

.step-gap-total.is-off {
  color: var(--status-warning-deep);
}

.step-gap-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-muted);
}

.step-gap-link {
  color: var(--teal-ink);
}

/* ── Step 15: the two priorities (FaithBody) ───────────────────────────── */

.step-priority {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1rem;
}

.step-priority-ordinal {
  font-family: var(--font-body);
  font-size: calc(16px * var(--text-scale));
  color: var(--teal-ink);
  padding-top: 1.35rem;
}

.step-priority-fields {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem 0.85rem;
}

.step-priority-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.step-priority-label {
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-secondary);
}

.step-priority-input {
  width: 100%;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  padding: 0.6rem 0.75rem;
  font-family: var(--font-body);
  font-size: calc(16px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-dark);
  resize: vertical;
  box-sizing: border-box;
}

.step-priority-input:focus {
  border-color: var(--teal-accent);
}

/* ── Step 16: the practice strip (FaithBody) ───────────────────────────── */

.step-practice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.step-practice {
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.step-practice:hover,
.step-practice:focus-visible {
  background: var(--teal-light);
  border-color: var(--teal-accent);
  color: var(--teal-ink);
}

/* ── Step 17: the serving models (CouplesBody) ─────────────────────────── */

.step-couples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.step-couple {
  position: relative;
  cursor: pointer;
  text-align: center;
  padding: 1rem 0.8rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  display: block;
}

/* The chosen card is the checked one, full stop. Keying this off a class
   written at render time meant a pick showed nothing until the save came back,
   and lighting both meant two cards looked chosen at once. */
.step-couple:has(.step-couple-radio:checked) {
  background: var(--teal-light);
  border: 2px solid var(--teal-accent);
  padding: calc(1rem - 1px) calc(0.8rem - 1px);
}

/* The radio itself is the label's state, not its furniture: hidden visually,
   still focusable and still announced. */
.step-couple-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.step-couple:focus-within {
  border-color: var(--teal-accent);
}

.step-couple-diagram {
  position: relative;
  display: block;
  height: 52px;
  margin-bottom: 0.5rem;
}

.step-couple-circle {
  position: absolute;
  top: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--teal-accent);
  background: rgba(72, 156, 184, 0.08);
}

.step-couple-label {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(16px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.step-couple-body {
  display: block;
  font-size: calc(14px * var(--text-scale));
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Step 18: the six components (FamilyBody) ──────────────────────────── */

.step-components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.6rem;
}

.step-component {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: calc(16px * var(--text-scale));
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
}

.step-component:hover {
  border-color: var(--teal-accent);
  color: var(--text-dark);
}

.step-component.is-on {
  background: var(--teal-light);
  border: 2px solid var(--teal-accent);
  padding: calc(0.75rem - 1px) calc(0.85rem - 1px);
}

.step-component-mark {
  color: var(--border-medium);
  flex-shrink: 0;
}

.step-component.is-on .step-component-mark {
  color: var(--teal-ink);
}

/* ── Step 19: the chummery (BoardBody) ─────────────────────────────────── */

.step-board-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.step-board-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

.step-board-initials {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: calc(14px * var(--text-scale));
}

.step-board-fields {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(130px, 0.9fr) minmax(180px, 1.4fr);
  gap: 0.25rem 0.6rem;
}

/* Step 22 embeds the Library's growth assessment (its own classes, its own
   autosave) above the priorities; the wrapper gives it card framing and
   settles the library spacing into the step's rhythm (the activity classes
   assume a library-article parent). */
.step-growth-plan {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  padding: 1.5rem;
}

.step-growth-plan .activity-intro p {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(16px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-secondary);
}

.step-growth-plan .activity-grace-note {
  margin: 1.1rem 0 1.4rem;
  overflow-wrap: break-word;
}

.step-growth-plan .activity-step-head {
  margin-top: 0;
}

.step-board-relationship {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  padding: 0.3rem 0.4rem;
  font-family: var(--font-body);
  color: var(--text-dark);
  font-size: max(16px, calc(14px * var(--text-scale)));
}

.step-board-name,
.step-board-role {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.3rem 0.4rem;
  font-family: var(--font-body);
  color: var(--text-dark);
}

.step-board-name {
  font-family: var(--font-heading);
  font-size: calc(16.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.step-board-role {
  /* 16px floor: iOS Safari zooms the whole page when a focused field is set
     smaller, which throws the layout out from under the member. */
  font-size: max(16px, calc(14.5px * var(--text-scale)));
  color: var(--text-secondary);
}

.step-board-name:focus,
.step-board-role:focus {
  border-color: var(--teal-accent);
  background: var(--bg-primary);
}

.step-board-tally {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--border-medium);
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-muted);
}

.step-board-tally .fa-sharp {
  color: var(--teal-ink);
}

.step-board-tally.is-enough {
  border-color: var(--teal-accent);
  color: var(--teal-ink);
}

@media (max-width: 640px) {
  .step-couples-grid {
    grid-template-columns: 1fr;
  }

  .step-board-fields {
    grid-template-columns: 1fr;
  }

  .step-week-grid {
    grid-template-columns: minmax(160px, 1fr) repeat(5, 56px);
  }
}

/* ══ Chapter 5, "Your context" ═══════════════════════════════════════════
 *
 * Step 27's six models (ModelsBody), step 28's three scenarios, step 29's
 * probe cards (ProbesBody), step 31's areas chooser (AreasBody) and step 32's
 * plan treatment (the StepWorkspace's own `kind === 'plan'` branch). Same
 * source as the chapter-4 bodies above: the component's inline values, or the
 * token each referenced.
 */

/* ── Step 27: the six models (ModelsBody) ──────────────────────────────── */

/* Three across, so the six models read as two rows of three rather than as a
   row of four and a stranded pair (owner, 2026-08-15). auto-fit filled the
   width and left the second row half empty. */
.step-models-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

/* A narrow tablet or a split window takes two, before the single column. */
@media (max-width: 900px) {
  .step-models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.step-model {
  position: relative;
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  text-align: left;
  padding: 1rem;
  cursor: pointer;
  font-family: var(--font-body);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.step-model:has(.step-model-radio:checked) {
  background: var(--teal-light);
  border: 2px solid var(--teal-accent);
  padding: calc(1rem - 1px);
}

.step-model:focus-within {
  border-color: var(--teal-accent);
}

/* The radio is the label's state, not its furniture (see .step-couple-radio). */
.step-model-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.step-model-number {
  font-family: var(--font-ui);
  font-size: calc(14px * var(--text-scale));
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.step-model:has(.step-model-radio:checked) .step-model-number {
  background: var(--teal-fill);
  color: #fff;
}

.step-model-text {
  display: block;
  min-width: 0;
}

.step-model-label {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(17px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  line-height: 1.35;
}

.step-model-body {
  display: block;
  font-size: calc(14.5px * var(--text-scale));
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* ── Step 28: the three scenarios ──────────────────────────────────────── */

.step-scenario {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

.step-scenario-ordinal {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: calc(14px * var(--text-scale));
}

.step-scenario-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.step-scenario-title {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.3rem 0.4rem;
  font-family: var(--font-heading);
  font-size: calc(17.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.step-scenario-description {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0;
  background: var(--bg-primary);
  font-family: var(--font-body);
  /* 16px floor: iOS Safari zooms the whole page when a focused field is set
     smaller, which throws the layout out from under the member. */
  font-size: max(16px, calc(15.5px * var(--text-scale)));
  line-height: 1.7;
  color: var(--text-dark);
  resize: vertical;
  box-sizing: border-box;
}

.step-scenario-title:focus,
.step-scenario-description:focus {
  border-color: var(--teal-accent);
  background: var(--bg-primary);
}

/* ── Step 29: the probe cards (ProbesBody) ─────────────────────────────── */

/* The component's Panel with a 4px status-coloured left edge: teal once a
   probe is running, amber while it is still being designed. */
.step-probe {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--status-warning);
  box-shadow: var(--shadow-sm);
}

.step-probe--developing,
.step-probe--ready {
  border-left-color: var(--teal-accent);
}

.step-probe-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.step-probe-name {
  flex: 1;
  font-family: var(--font-heading);
  font-size: calc(18.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.step-probe-status {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: calc(11.5px * var(--text-scale));
  padding: 0.2rem 0.55rem;
  background: var(--status-warning-bg);
  color: var(--status-warning-deep);
}

.step-probe-status[data-status="developing"],
.step-probe-status[data-status="ready"] {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.step-probe-field {
  display: block;
}

.step-probe-label {
  display: block;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.step-probe-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0;
  background: var(--bg-primary);
  font-family: var(--font-body);
  /* 16px floor: iOS Safari zooms the whole page when a focused field is set
     smaller, which throws the layout out from under the member. */
  font-size: max(16px, calc(15.5px * var(--text-scale)));
  line-height: 1.7;
  color: var(--text-dark);
  resize: vertical;
  box-sizing: border-box;
}

.step-probe-input:focus {
  border-color: var(--teal-accent);
}

.step-probe-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.step-probe-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.step-probe-choice:has(.step-probe-radio:checked) {
  background: var(--teal-light);
  border-color: var(--teal-accent);
  color: var(--teal-ink);
}

.step-probe-choice:focus-within {
  border-color: var(--teal-accent);
}

.step-probe-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.step-probes-empty,
.step-plan-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border-medium);
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-muted);
}

.step-probes-empty .fa-sharp,
.step-plan-empty .fa-sharp {
  color: var(--teal-ink);
}

.step-body-link {
  color: var(--teal-ink);
  text-decoration: underline;
}

/* ── Step 31: the areas chooser (AreasBody) ────────────────────────────── */

/* Lloyd's sentence on how a member lands on their areas, above the three
   sources it names. Body measure, so it reads as prose rather than chrome. */
.step-areas-explain {
  margin: 0 0 1.15rem;
  font-family: var(--font-body);
  font-size: calc(15.5px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 62ch;
}

.step-areas-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.step-areas-count {
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-secondary);
}

.step-areas-list {
  display: grid;
  gap: 0.6rem;
}

.step-area {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

.step-area.is-on {
  background: var(--teal-light);
  border: 2px solid var(--teal-accent);
  padding: calc(0.85rem - 1px) calc(1rem - 1px);
}

.step-area-mark {
  color: var(--border-medium);
  font-size: calc(17.5px * var(--text-scale));
  margin-top: 2px;
  flex-shrink: 0;
}

.step-area.is-on .step-area-mark {
  color: var(--teal-ink);
}

.step-area-fields {
  flex: 1;
  min-width: 0;
}

.step-area-name {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.2rem 0.35rem;
  font-family: var(--font-heading);
  font-size: calc(17.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.step-area-name:focus {
  border-color: var(--teal-accent);
  background: var(--bg-primary);
}

.step-area-note {
  display: block;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-secondary);
  padding-left: 0.35rem;
  margin-top: 2px;
}

/* ── Step 32: the plan (the workspace's own plan branch) ───────────────── */

.step-plan-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.step-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  color: var(--text-secondary);
}

.step-plan-chip.is-on {
  border-color: var(--teal-accent);
  background: var(--teal-light);
  color: var(--teal-ink);
}

.step-plan-chip .fa-sharp {
  color: var(--teal-ink);
}

.step-plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.3rem;
}

.step-plan-count {
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-secondary);
}

.step-plan-rows {
  display: grid;
  gap: 0.6rem;
}

.step-plan-row {
  display: block;
  padding: 0.8rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

.step-plan-row-label {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(16.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.step-plan-row-hint {
  display: block;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.step-plan-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 0;
  background: var(--bg-primary);
  font-family: var(--font-body);
  /* 16px floor: iOS Safari zooms the whole page when a focused field is set
     smaller, which throws the layout out from under the member. */
  font-size: max(16px, calc(15.5px * var(--text-scale)));
  line-height: 1.7;
  color: var(--text-dark);
  resize: vertical;
  box-sizing: border-box;
}

.step-plan-input:focus {
  border-color: var(--teal-accent);
}

@media (max-width: 640px) {
  .step-models-grid {
    grid-template-columns: 1fr;
  }

  .step-areas-head,
  .step-body-head,
  .step-plan-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
}

/* ── Step 11 body: the assessment debrief ─────────────────────────────────
 *
 * The table itself is the assessments page's own .worlds-results (worlds.css),
 * rendered from the same partial, so nothing about it is restated here. What
 * this adds is the two things the workspace has and the module page does not:
 * the empty state for a member with no scores, and the named-but-waiting peer
 * columns.
 *
 * .worlds-results carries `margin-top: var(--spacing-xl)` for the module page,
 * where it follows a section head. Here it is the first thing under the
 * question and the workspace's own flex `gap` already spaces it.
 */
.step-compare .worlds-results {
  margin-top: 0;
}

.step-compare-empty {
  border-left: 3px solid var(--teal-accent);
}

.step-compare-empty-lead {
  font-family: var(--font-body);
  font-size: calc(16px * var(--text-scale));
  color: var(--text-dark);
  margin: 0 0 0.5rem;
}

.step-compare-empty-body {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 1.1rem;
}

.step-compare-cta {
  display: inline-block;
}

/* A peer who was asked and has not answered: their name holds the column so
 * the member can see who they are waiting on, at the weight of a placeholder
 * rather than of a result. */
.worlds-results-table th.worlds-results-waiting,
.module-page .worlds-results-table th.worlds-results-waiting {
  color: var(--text-muted);
  background: var(--bg-secondary);
  font-style: italic;
}

.worlds-waiting-note {
  display: block;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: calc(0.68rem + var(--text-bump));
  font-style: normal;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.worlds-results-table td.worlds-results-waiting {
  color: var(--border-medium);
}

.step-compare-note {
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 68ch;
}

.step-compare-link {
  color: var(--teal-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Dark mode: the ask pill's translucent-white wash reads as a bright band
   on a dark chat (owner, 2026-08-13) — flip it to a faint light-on-dark
   wash instead. */
[data-theme="dark"] .step-try-ask {
  background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .step-try-ask:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* A drafting offer is only live while it is the newest thing said: any later
   message (the member's reply, the coach's next turn) retires the button so
   the thread never stacks offers (owner, 2026-08-13). */
.discussion-history > *:not(:last-child) .draft-offer-actions {
  display: none;
}

/* The one gentle reminder after declining a draft: a small popover above
   the SYNTHESIZE button, self-dismissing. */
.step-synth-popover {
  position: fixed;
  z-index: 1054;
  max-width: 260px;
  padding: 0.55rem 0.85rem;
  background: var(--navy-primary);
  color: var(--bg-primary);
  font-family: var(--font-ui);
  font-size: calc(13px * var(--text-scale));
  line-height: 1.4;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  animation: synth-popover-in 320ms var(--ease-out, ease-out) both;
}

.step-synth-popover::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 28px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}

.step-synth-popover.is-leaving {
  opacity: 0;
  transition: opacity 240ms ease;
}

@keyframes synth-popover-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .step-synth-popover { animation: none; }
}

/* The offer's second answer (owner, 2026-08-14): quiet next to the filled
   Draft button. */
.draft-offer-keep {
  min-height: 38px;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: calc(12px * var(--text-scale, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.draft-offer-keep:hover {
  border-color: var(--teal-accent);
  color: var(--teal-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Switch-to-Unhurried offer (lib/depth_offer.js) — the one quiet card above
   the composer after repeated drafting declines. Append-only section; theme
   tokens only, so dark mode falls out of [data-theme="dark"] in variables.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.depth-offer {
  margin: 0.5rem 0;
  padding: 0.75rem 0.85rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--teal-accent);
  border-radius: 10px;
  font-family: var(--font-ui);
  animation: depth-offer-in 320ms var(--ease-out, ease-out) both;
}

.depth-offer-text {
  margin: 0 0 0.6rem;
  color: var(--text-dark);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.5;
}

.depth-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.depth-offer-switch,
.depth-offer-keep {
  min-height: 44px;
  min-width: 44px;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: calc(13px * var(--text-scale, 1));
  cursor: pointer;
}

.depth-offer-switch {
  border: 1px solid var(--navy-primary);
  background: var(--navy-primary);
  color: var(--bg-primary);
}

.depth-offer-switch:hover {
  border-color: var(--teal-accent);
}

.depth-offer-keep {
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-dark);
}

.depth-offer-keep:hover {
  border-color: var(--teal-accent);
  background: var(--teal-light);
}

.depth-offer-switch:focus-visible,
.depth-offer-keep:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.depth-offer.is-leaving {
  opacity: 0;
  transition: opacity 240ms ease;
}

@keyframes depth-offer-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .depth-offer { animation: none; }
  .depth-offer.is-leaving { transition: none; }
}

/* ===== Step 11's debrief questions (Member Guide p. 18) =====
 * The binder's questions under the comparison table, so the member sees the
 * shape of the conversation. Tokens only, so dark mode follows variables.css. */
.step-debrief-questions {
  max-width: 68ch;
}

.step-debrief-questions-title {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: calc(0.72rem + var(--text-bump));
  color: var(--text-muted);
  margin: 0 0 0.45rem;
}

.step-debrief-questions ul {
  margin: 0;
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── Step 28: the mission over the three scenarios ───────────────────────
   The worksheet flows mission into scenarios (Member Guide p. 96), so the
   member can read theirs while they write against it. */
.step-scenarios-mission {
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.9rem;
  border-left: 3px solid var(--teal-accent);
  background: var(--teal-light);
}

.step-scenarios-mission-label {
  display: block;
  font-family: var(--font-ui);
  font-size: calc(11.5px * var(--text-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 0.2rem;
}

.step-scenarios-mission-text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.55;
  color: var(--text-dark);
}

/* The guide's own worked example, folded away until it is wanted. */
.step-scenarios-example {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-secondary);
}

.step-scenarios-example > summary {
  cursor: pointer;
  color: var(--teal-ink);
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

.step-scenarios-example-body {
  padding: 0.5rem 0 0.2rem;
  line-height: 1.65;
}

.step-scenarios-example-body ul {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.step-scenarios-example-name {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(12px * var(--text-scale));
  color: var(--text-dark);
  margin-right: 0.4rem;
}