/**
 * Shared "Your Guide" surfaces (2026-08-10 roadmap redesign), transcribed from
 * docs/design-reference/extracted/:
 *   - .guide-sidebar: the guide rail docked to the LEFT of the page content —
 *     60px of chapter glyphs closed, a clamp(276px, 22vw, 320px) panel open
 *     (state-in-capacity-stepview.html, state-in-context-stepview.html,
 *     module-platform.html, module-platform-guide-rail-open.html).
 *   - .guide-chrome: the chapter/score chips plus the "your guide steps here"
 *     card on each module page (module-platform.html).
 *   - .guide-chip: the pill both surfaces share.
 *
 * Literal pixel type from the captures is written calc(Npx * var(--text-scale)),
 * the convention modules/hub.css established, so Settings -> text size keeps
 * working.
 */

/* ── The pill both surfaces use ────────────────────────────────── */

.guide-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  line-height: 1.5;
}

.guide-chip--dependency {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.guide-chip--flag {
  background: var(--status-warning-bg);
  color: var(--status-warning-deep);
}

/* ── Journey map: the five-chapter strip ────────────────────────────
   Transcribed from docs/design-reference/extracted/hub-journey-expanded.html
   (max-width 760px, 28px nodes on a 2px rail at top:13px, uppercase 13px
   labels, 13px muted status sublabel). Shared verbatim by the Hub's "Your
   journey at a glance" disclosure and the strip at the top of every module
   page, which is why it lives here rather than in modules/hub.css. */

.journey-map {
  display: flex;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto 1rem;
}

.journey-map-node {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

/* The module-page variant makes the whole node one link. */
a.journey-map-node {
  text-decoration: none;
}

.journey-map-line {
  position: absolute;
  top: 13px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--border-light);
}

.journey-map-node.is-complete .journey-map-line {
  background: var(--teal-accent);
}

.journey-map-dot {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: calc(13.5px * var(--text-scale));
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 2px dashed var(--border-medium);
  padding: 0;
  flex-shrink: 0;
}

.journey-map-node.is-complete .journey-map-dot,
.journey-map-node.is-active .journey-map-dot {
  color: #fff;
  background: var(--teal-fill);
  border: none;
}

.journey-map-node.is-active .journey-map-dot {
  box-shadow: 0 0 0 6px rgba(72, 156, 184, 0.22);
}

/* Progress ceremony (spec §1): the dot of a chapter that just went complete
   ripples once on arrival (progress_ceremony_controller adds .just-done). */
.journey-map-node.just-done .journey-map-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: journey-node-ripple var(--motion-ceremony) var(--ease-out) both;
}

.journey-map-label {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: center;
}

.journey-map-title {
  display: block;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: calc(13px * var(--text-scale));
  line-height: 1.35;
  color: var(--text-muted);
  font-weight: 400;
}

.journey-map-node.is-complete .journey-map-title,
.journey-map-node.is-active .journey-map-title {
  color: var(--navy-primary);
}

.journey-map-node.is-active .journey-map-title {
  font-weight: 600;
}

.journey-map-state {
  display: block;
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  color: var(--text-muted);
  margin-top: 2px;
}

/* The strip's own band at the top of a module page: same rhythm as the
   header block above it, no card of its own (the Hub shows it on the page
   background too). */
.module-journey {
  margin: 0.9rem 0 1.4rem;
}

@media (max-width: 768px) {
  .journey-map {
    flex-wrap: wrap;
    gap: 1rem 0;
  }

  .journey-map-node {
    flex: 0 0 33.333%;
  }

  .journey-map-line {
    display: none;
  }
}

/* ── Module page header: chapter line + "about this step" popover ──────
   Transcribed from docs/design-reference/extracted/nav-step-condensed-bar.html:
   the teal uppercase eyebrow, and a borderless info circle with a --tap hit
   target pulled back over the eyebrow's trailing space (margin-left: -0.35rem).
   The popover's own interior was never captured open; its geometry follows the
   chapter popover in the journey rail (250px, 1px border, shadow-lg). */

.module-page-chapter {
  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;
}

.guide-info {
  position: relative;
  display: inline-flex;
  margin-left: -0.35rem;
}

.guide-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--text-muted);
  cursor: pointer;
  font-size: calc(15px * var(--text-scale));
  list-style: none;
}

.guide-info-btn::-webkit-details-marker {
  display: none;
}

.guide-info-btn:hover,
.guide-info[open] .guide-info-btn {
  color: var(--teal-ink);
}

.guide-info-pop {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  z-index: 40;
  width: 280px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  padding: 0.7rem 0.8rem;
}

.guide-info-title {
  font-family: var(--font-heading);
  font-size: calc(15px * var(--text-scale));
  color: var(--navy-primary);
  margin-bottom: 3px;
}

.guide-info-line {
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.5;
}

.guide-info-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.guide-info-chips:empty {
  margin-top: 0;
}

/* ── Guide chrome (chips + "your guide steps here" card) ───────────── */

/* The steps block itself takes .module-card / .module-card-head from
   modules/module-page.css — there is no separate .guide-chrome-card
   treatment (the rules that used to sit here styled nothing).

   The block is a collapsed <details> at the top of the page: its
   summary is the card head, with the chevron as the only added affordance. */
.guide-chrome-summary {
  cursor: pointer;
  list-style: none;
  align-items: center;
  margin-bottom: 0;
}

.guide-chrome-summary::-webkit-details-marker { display: none; }

.guide-chrome-summary .module-section-label { flex: 1; }

.guide-chrome-chevron {
  font-size: calc(12px * var(--text-scale));
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.guide-chrome-disclosure[open] .guide-chrome-chevron {
  transform: rotate(180deg);
}

.guide-chrome-disclosure[open] .guide-chrome-summary {
  margin-bottom: 0.85rem;
}

.guide-chrome-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Step rows stagger up when the disclosure opens (spec §5 — chapter lists).
   Keyed off [open] flipping display, so it plays once per open. */
.guide-chrome-disclosure[open] .guide-chrome-step {
  animation: motion-rise var(--motion-enter) var(--ease-out) backwards;
  animation-delay: 200ms;
}

.guide-chrome-disclosure[open] .guide-chrome-step:nth-child(1) { animation-delay: 0ms; }
.guide-chrome-disclosure[open] .guide-chrome-step:nth-child(2) { animation-delay: 40ms; }
.guide-chrome-disclosure[open] .guide-chrome-step:nth-child(3) { animation-delay: 80ms; }
.guide-chrome-disclosure[open] .guide-chrome-step:nth-child(4) { animation-delay: 120ms; }
.guide-chrome-disclosure[open] .guide-chrome-step:nth-child(5) { animation-delay: 160ms; }

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

.guide-chrome-step-mark {
  margin-top: 3px;
  color: var(--border-medium);
}

.guide-chrome-step-mark.fa-circle-check {
  color: var(--teal-ink);
}

.guide-chrome-step-body {
  flex: 1;
  min-width: 0;
}

.guide-chrome-step-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.guide-chrome-step-title {
  font-family: var(--font-heading);
  font-size: calc(17.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.guide-chrome-step-question {
  display: block;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 2px;
}

/* The state marker reads as the reference's outlined action button. */
.guide-chrome-step-state {
  flex-shrink: 0;
  justify-content: center;
  white-space: nowrap;
}

/* ── Guide rail (docked left; 60px closed, panel open) ────────────── */

/* Sticks under the module nav, which is itself sticky at the top of the
   viewport, so --guide-rail-top is that nav's measured height (68px at the
   default text size). The rail is a full-height column, as in the captures:
   a white gutter with a border down its right edge, its footer pinned to the
   bottom rather than trailing the chapter list. */
.guide-sidebar {
  --guide-rail-top: 68px;

  width: 60px;
  flex-shrink: 0;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  /* The COLUMN stretches with the page (align-items: stretch on .app-body),
     so the border runs the page's full height and the rail never dictates
     page height. The sticky parts are INSIDE it: the glyph strip (summary)
     and the open panel each pin under the header with their own top, so
     they hold still while the page scrolls past the footer overhang that
     used to drag the whole rail up (owner, 2026-08-14). */
  z-index: 2;
}

.guide-sidebar[open] {
  width: clamp(276px, 22vw, 320px);
  /* OPEN, the drawer is one sticky unit again (summary head + panel inside
     it are static): two independently-sticky parts overlapped each other
     under scroll. Closed keeps the stretched column + sticky glyph strip. */
  position: sticky;
  top: var(--guide-rail-top);
  align-self: flex-start;
  height: calc(100dvh - var(--guide-rail-top));
  overflow: hidden;
}

.guide-sidebar[open] .guide-sidebar-rail {
  position: static;
}

/* Chrome puts a <details>' content inside a ::details-content box, so the
   panel is that box's child rather than a flex item of the <details> itself
   and would not otherwise shrink to the rail's height (the pinned footer
   would slide off the bottom). Browsers without ::details-content ignore this
   and get the same result from .guide-sidebar-panel's own flex rules below. */
.guide-sidebar[open]::details-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.guide-sidebar-rail {
  position: sticky;
  top: var(--guide-rail-top);
  list-style: none;
  cursor: pointer;
  flex-shrink: 0;
}

.guide-sidebar-rail::-webkit-details-marker { display: none; }

/* Closed: the glyph column. */
.guide-rail-glyphs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 0;
}

.guide-sidebar[open] .guide-rail-glyphs { display: none; }

.guide-rail-glyph {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Chapters the member has not finished get the app's neutral surface; the
     captures only ever show the finished and current treatments. */
  background: var(--bg-secondary);
  color: var(--text-muted);
  /* The chapter glyphs are <button>s (they jump the rail to their chapter) —
     neutralize button chrome so they render identically to the old spans. */
  border: none;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
}

button.guide-rail-glyph:hover {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.guide-rail-glyph--open,
.guide-rail-glyph.is-complete {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.guide-rail-glyph--open {
  width: 38px;
  height: 38px;
}

/* The chapter badge: one corner slot, three states (shared/_chapter_badge).
   It sits ON the tile rather than being printed into it, so it keeps a ring
   of the page colour whatever the tile is doing — hovered, current, complete.
   The glyph underneath is never replaced; it is the only thing saying WHICH
   chapter a tile is. */
.guide-rail-glyph { position: relative; }

.progress-badge {
  position: absolute;
  line-height: 1;
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  box-shadow: 0 0 0 1.5px var(--bg-primary);
}

.progress-badge--rail { right: -2px; bottom: -2px; }
.progress-badge--panel { right: -4px; bottom: -3px; }
.progress-badge--chip {
  right: -5px;
  bottom: -4px;
  /* The chip sits on a translucent white; the badge's ring matches the page
     underneath it so the tick reads as sitting ON the chip. */
  background: var(--bg-secondary);
  box-shadow: 0 0 0 1.5px var(--bg-secondary);
}

/* The Hub's module chips (hub/show): the icon needs a box of its own for the
   badge to sit on the corner of. */
.hub-chip-icon {
  position: relative;
  display: inline-flex;
  flex: none;
}

.progress-badge.is-done { color: var(--teal-accent); }
.progress-badge--rail.is-done { font-size: 11px; }
.progress-badge--panel.is-done { font-size: 10px; }
.progress-badge--chip.is-done { font-size: 10px; }

/* Part-done: a ring filled to the fraction. Rotated a quarter turn so it
   starts at twelve o'clock and fills clockwise, which is the direction
   everybody reads a dial. */
svg.progress-badge.is-part {
  transform: rotate(-90deg);
  overflow: visible;
}

.progress-badge--rail.is-part { width: 13px; height: 13px; }
.progress-badge--panel.is-part { width: 12px; height: 12px; }
.progress-badge--chip.is-part { width: 12px; height: 12px; }

.progress-badge__track,
.progress-badge__value {
  fill: none;
  stroke-width: 3.5;
}

.progress-badge__track { stroke: var(--border-medium); opacity: 0.5; }

.progress-badge__value {
  stroke: var(--teal-accent);
  stroke-linecap: butt;
}

/* In the open panel the glyph sits inline in the summary row. */
.guide-chapter-icon-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
}

.guide-rail-glyph.is-current {
  border: 2px solid var(--teal-accent);
  background: var(--teal-light);
  color: var(--teal-ink);
}

/* Open: the header row. */
.guide-rail-head { display: none; }

.guide-sidebar[open] .guide-rail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--border-light);
}

.guide-rail-eyebrow {
  display: block;
  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-bottom: 2px;
}

.guide-rail-step-count {
  display: block;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-secondary);
}

.guide-rail-collapse {
  min-width: var(--tap);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--text-secondary);
  padding: 2px;
}

.guide-sidebar-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.guide-sidebar-chapters {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0 0.6rem;
}

.guide-sidebar-chapter {
  padding: 0.25rem 0.4rem;
}

.guide-chapter-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  list-style: none;
}

.guide-chapter-summary::-webkit-details-marker { display: none; }

.guide-chapter-icon {
  font-size: calc(13.5px * var(--text-scale));
  color: var(--text-muted);
  flex-shrink: 0;
}

.guide-chapter-icon.is-done,
.guide-chapter-summary.is-current .guide-chapter-icon {
  color: var(--teal-ink);
}

.guide-chapter-title {
  flex: 1;
  font-family: var(--font-ui);
  font-size: calc(12.5px * var(--text-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}

.guide-chapter-summary.is-current .guide-chapter-title {
  color: var(--teal-ink);
}

.guide-chapter-count {
  font-family: var(--font-body);
  font-size: calc(12.5px * var(--text-scale));
  color: var(--text-muted);
}

.guide-chapter-chevron {
  font-size: calc(11.5px * var(--text-scale));
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.guide-sidebar-chapter[open] > .guide-chapter-summary .guide-chapter-chevron {
  transform: rotate(180deg);
}

.guide-chapter-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-step {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.45rem 0.6rem;
  border-left: 3px solid transparent;
  font-family: var(--font-body);
  text-decoration: none;
}

.guide-step.is-current {
  border-left-color: var(--teal-accent);
  background: var(--teal-light);
}

.guide-step-mark {
  color: var(--border-medium);
  font-size: calc(15.5px * var(--text-scale));
  line-height: 1.5;
}

.guide-step.is-current .guide-step-mark,
.guide-step.is-done .guide-step-mark {
  color: var(--teal-ink);
}

/* Progress ceremony (spec §1): the checkmark of the step that just saved
   settles in — one scale-settle, then still. */
.guide-step.just-done .guide-step-mark {
  animation: guide-mark-settle var(--motion-ceremony) var(--ease-out);
  transform-origin: center;
}

@keyframes guide-mark-settle {
  0% {
    transform: scale(0.4);
    opacity: 0.4;
  }
  60% {
    transform: scale(1.18);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.guide-step-body {
  flex: 1;
  min-width: 0;
}

.guide-step-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.guide-step-title {
  flex: 1;
  font-size: calc(15px * var(--text-scale));
  line-height: 1.4;
  color: var(--text-dark);
  font-weight: 400;
}

.guide-step.is-current .guide-step-title {
  font-weight: 600;
}

.guide-step-module-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: calc(13.5px * var(--text-scale));
}

.guide-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 3px;
}

.guide-step-module {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: calc(11.5px * var(--text-scale));
  color: var(--text-muted);
}

.guide-sidebar-foot {
  flex-shrink: 0;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.guide-sidebar-continue {
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

/* Narrow screens have no room for a docked column: the rail becomes a
   full-width band above the page content. */
@media (max-width: 900px) {
  .app-body {
    flex-direction: column;
  }

  .guide-sidebar,
  .guide-sidebar[open] {
    width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .guide-sidebar-rail,
  .guide-sidebar-panel {
    position: static;
    height: auto;
  }

  .guide-rail-glyphs {
    flex-direction: row;
    justify-content: center;
    padding: 0.6rem 0.9rem;
  }

  .guide-sidebar-chapters {
    max-height: 60vh;
  }
}

/* ── Action Plan cross-module context (Time / People pulls) ─────────── */

/* The card treatment comes from .module-card (modules/module-page.css); this
   only lays the pulled-in lines out inside it. */
/* The explanation above the plan (action_plans/show): what an action area is
   and how the member landed on theirs. Prose measure, no card — it is the
   page talking, not a widget. */
.action-plan-explain {
  max-width: 68ch;
  margin: 0 0 1.4rem;
}

.action-plan-explain-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(15.5px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-secondary);
}

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

.action-plan-context {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-plan-context-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-secondary);
}

.action-plan-context-item i {
  color: var(--teal-ink);
}

/* The collapsed strip names itself (owner, 2026-08-14). Hidden with the
   glyphs when the drawer opens. */
.guide-rail-label {
  /* Same voice as the journey bar's HUB pill (owner, 2026-08-14). */
  font-family: var(--font-ui);
  font-size: calc(12.5px * var(--text-scale, 1));
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  padding-top: 0.4rem;
}

/* The count badge: a number rather than a fraction, for a module that is
   "how many have you named" rather than a sequence with a finish line. */
.progress-badge.is-count {
  display: grid;
  place-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--radius-full);
  background: var(--teal-accent);
  color: var(--bg-primary);
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
}

.progress-badge--chip.is-count {
  box-shadow: 0 0 0 1.5px var(--bg-secondary);
}

/* ── Quiet chapters (returning-member de-emphasis) ─────────────────────────
   A chapter marked quiet (Guide::Progress#chapter_progress, chapter 1 for a
   returning member) reads muted on every chapter surface: an invitation to
   dip into, never unfinished homework. Tokens only, so both themes follow. */
.journey-map-node.is-quiet .journey-map-title,
.journey-map-node.is-quiet .journey-map-state {
  color: var(--text-muted);
}

.journey-map-node.is-quiet .journey-map-dot {
  opacity: 0.55;
}

.guide-chapter-summary.is-quiet .guide-chapter-title,
.guide-chapter-summary.is-quiet .guide-chapter-count {
  color: var(--text-muted);
}

.guide-chapter-summary.is-quiet .guide-chapter-icon {
  opacity: 0.55;
}