/**
 * Hub — transcribed from the redesign reference captures
 * (docs/design-reference/extracted/state-*.html, hub-journey-expanded.html).
 *
 * Two conventions used throughout:
 *
 *  - Where the reference's inline style is a calc() on --text-bump, it is
 *    copied verbatim. Where it is a literal pixel size (the prototype hard-
 *    codes most Hub type), it is written as calc(Npx * var(--text-scale)) —
 *    identical to the reference at the default text size, while keeping
 *    Settings -> text size working.
 *  - The reference's page box is `max-width: 1080px; padding: 2rem var(--pad-x)
 *    3.5rem`. Here the layout's .container already supplies the --pad-x
 *    gutters and 1rem of vertical padding, so .hub subtracts both.
 */

.hub {
  max-width: calc(1080px - 2 * var(--pad-x));
  margin: 0 auto;
  padding: 1rem 0 2.5rem;
}

/* ── Entrance (motion & polish spec §5) ──
   Once per session, the hub's sections fade up on a 40ms stagger, capped at
   the sixth sibling. entrance_controller sets data-entrance="play" on the
   first sighting only and removes it after settling, so Turbo restores and
   mid-session returns render static. `backwards` holds each section invisible
   through its delay. */
.hub[data-entrance="play"] > * {
  animation: motion-rise var(--motion-enter) var(--ease-out) backwards;
  animation-delay: 200ms;
}

.hub[data-entrance="play"] > :nth-child(1) { animation-delay: 0ms; }
.hub[data-entrance="play"] > :nth-child(2) { animation-delay: 40ms; }
.hub[data-entrance="play"] > :nth-child(3) { animation-delay: 80ms; }
.hub[data-entrance="play"] > :nth-child(4) { animation-delay: 120ms; }
.hub[data-entrance="play"] > :nth-child(5) { animation-delay: 160ms; }

/* ===== Page title ===== */
.hub-title {
  text-align: center;
  /* Deliberate white space (owner, 2026-08-11: "calm it down") — generous
     air around the logo and greeting, even at the cost of pushing the hero
     down. */
  margin-top: 2.5rem;
  margin-bottom: 3.25rem;
}

/* The 100x Forum wordmark above the personal greeting. */
.hub-logo {
  height: 64px;
  width: auto;
  display: block;
  margin: 1.25rem auto 2.4rem;
}

.hub-title h1 {
  font-family: var(--font-heading);
  font-size: calc(33.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  margin: 0 0 0.3rem;
}

.hub-subtitle {
  font-family: var(--font-body);
  font-size: calc(18px * var(--text-scale));
  color: var(--text-secondary);
  margin: 0;
}

/* ===== One next thing ===== */
.hub-next {
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--teal-accent);
  padding: 1.5rem var(--card-x);
}

.hub-next-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

/* Small utility link at the hero's top right: re-open the welcome modal. */
.hub-next-welcome-link {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: calc(12.5px * var(--text-scale));
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hub-next-welcome-link:hover {
  color: var(--teal-ink);
}

.hub-next-eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--size-eyebrow);
  color: var(--teal-ink);
  font-weight: 400;
  margin: 0;
}

.hub-next-module {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-secondary);
}

.hub-next-question {
  font-family: var(--font-heading);
  font-weight: 500;
  /* Quieter than the original 28.5px (owner, 2026-08-11: too in-your-face). */
  font-size: calc(23px * var(--text-scale));
  line-height: 1.35;
  color: var(--navy-primary);
  margin: 0 0 0.6rem;
}

.hub-next-nudge {
  font-family: var(--font-body);
  font-size: calc(17px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1.2rem;
}

/* The quiet guide drops the nudge but keeps the card's rhythm. */
.hub-next-gap {
  height: 1.2rem;
}

.hub-next-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* button_to wraps its button in a form; unwrap it so the button is a direct
   flex child and sits on the reference's baseline. */
.hub-next-actions form.button_to,
.hub-pacing-options form.button_to {
  display: contents;
}

.hub-next-spring {
  flex: 1;
}

.hub-next-count {
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  color: var(--text-muted);
}

/* ===== What you are working on ===== */
.hub-chapter {
  margin-top: 0.9rem;
  padding: 1.05rem var(--card-x) 1.15rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--border-light);
}

.hub-chapter-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.hub-chapter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  background: var(--teal-light);
  color: var(--teal-ink);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(11.5px * var(--text-scale));
}

.hub-chapter-chip i {
  font-size: calc(10px * var(--text-scale));
}

.hub-chapter-meta {
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-muted);
  white-space: nowrap;
}

.hub-chapter-steps {
  display: flex;
  flex-direction: column;
}

.hub-chapter-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.hub-chapter-step + .hub-chapter-step {
  border-top: 1px solid var(--border-light);
}

.hub-chapter-step:hover .hub-chapter-step-title {
  color: var(--teal-ink);
}

.hub-chapter-marker {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(11px * var(--text-scale));
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border-medium);
}

.hub-chapter-marker.is-now {
  background: var(--teal-fill);
  color: #fff;
  border: none;
}

.hub-chapter-body {
  flex: 1;
  min-width: 0;
}

.hub-chapter-step-title {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(16.5px * var(--text-scale));
  font-weight: 500;
  color: var(--text-secondary);
}

.hub-chapter-step.is-now .hub-chapter-step-title {
  color: var(--navy-primary);
}

.hub-chapter-step-module {
  display: block;
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  color: var(--text-muted);
  margin-top: 1px;
}

.hub-chapter-when {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(11px * var(--text-scale));
  color: var(--text-muted);
}

.hub-chapter-when.is-now {
  color: var(--teal-ink);
}

/* ===== Your journey at a glance ===== */
.hub-disclosure {
  margin-top: 1rem;
}

.hub-disclosure-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8rem 1rem;
  background: transparent;
  border: 1px solid var(--border-light);
  cursor: pointer;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(13px * var(--text-scale));
  color: var(--text-secondary);
}

.hub-disclosure-label {
  flex: 1;
  text-align: left;
}

.hub-disclosure-count {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: calc(14px * var(--text-scale));
  color: var(--text-muted);
}

.hub-disclosure-body {
  padding-top: 0.9rem;
}

/* ── the five-chapter stepper ──
   Lives in modules/guide-chrome.css as .journey-map, shared verbatim with the
   strip at the top of every module page (shared/_journey_map). */

/* ── the chapter accordion ── */
.hub-chapters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Entering chapter cards and step rows stagger up when their disclosure
   opens (spec §5 — chapter lists). The animation keys off [hidden] flipping,
   so it plays once per open, not on every render. */
.hub-disclosure-body:not([hidden]) .hub-chapter-card,
.hub-chapter-card-steps:not([hidden]) .hub-step {
  animation: motion-rise var(--motion-enter) var(--ease-out) backwards;
  animation-delay: 200ms;
}

.hub-disclosure-body:not([hidden]) .hub-chapter-card:nth-child(1),
.hub-chapter-card-steps:not([hidden]) .hub-step:nth-child(1) { animation-delay: 0ms; }
.hub-disclosure-body:not([hidden]) .hub-chapter-card:nth-child(2),
.hub-chapter-card-steps:not([hidden]) .hub-step:nth-child(2) { animation-delay: 40ms; }
.hub-disclosure-body:not([hidden]) .hub-chapter-card:nth-child(3),
.hub-chapter-card-steps:not([hidden]) .hub-step:nth-child(3) { animation-delay: 80ms; }
.hub-disclosure-body:not([hidden]) .hub-chapter-card:nth-child(4),
.hub-chapter-card-steps:not([hidden]) .hub-step:nth-child(4) { animation-delay: 120ms; }
.hub-disclosure-body:not([hidden]) .hub-chapter-card:nth-child(5),
.hub-chapter-card-steps:not([hidden]) .hub-step:nth-child(5) { animation-delay: 160ms; }

.hub-chapter-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.hub-chapter-card.is-open {
  border-left-color: var(--status-warning);
}

.hub-chapter-card.is-complete {
  border-left-color: var(--teal-accent);
}

.hub-chapter-card-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem var(--card-x);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.hub-chapter-card-head > i {
  color: var(--text-secondary);
}

/* Returning members: chapter 1 folds to one slim de-emphasized row — title
   plus "optional · dip in anytime", no icon tile, no progress count. The
   click still expands the normal step list. Tokens only, so both themes
   follow. */
.hub-chapter-card--slim {
  background: var(--bg-secondary);
  border-left-color: var(--border-light);
  box-shadow: none;
}

.hub-chapter-card-head--slim {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem var(--card-x);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.hub-chapter-card-head--slim .hub-chapter-card-title {
  color: var(--text-secondary);
}

.hub-chapter-card-slim-note {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.hub-chapter-card-head--slim > i {
  color: var(--text-secondary);
}

.hub-chapter-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-chapter-card.is-complete .hub-chapter-card-icon {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.hub-chapter-card-body {
  flex: 1;
  min-width: 0;
}

.hub-chapter-card-title {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(18px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.hub-chapter-card-modules {
  display: block;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-muted);
  margin-top: 1px;
}

.hub-chapter-card-state {
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-muted);
  flex-shrink: 0;
}

.hub-chapter-card-steps {
  padding: 0 var(--card-x) 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Module subgroup label inside a multi-module chapter's step list. */
.hub-step-group-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: calc(11.5px * var(--text-scale));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin: 1.1rem 0 0.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-light);
}

.hub-step-group-label:first-child {
  margin-top: 0.2rem;
}

/* ── one step inside a chapter ── */
.hub-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);
}

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

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

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

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

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

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

.hub-step-module {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: calc(11.5px * var(--text-scale));
  color: var(--text-muted);
}

.hub-step-optional {
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  color: var(--text-muted);
}

.hub-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;
}

.hub-step-dep {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 5px;
  background: var(--teal-light);
  color: var(--teal-ink);
  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;
}

.hub-step > .btn {
  flex-shrink: 0;
  text-decoration: none;
}

/* ===== Six foundation cards on the Hub ===== */
.hub-roadmap-slot {
  margin-top: 1.5rem;
}

/* The toggle is a control over the cards below it, not a heading for them, so
   it sits at the far end of its own row rather than leading the block
   (owner, 2026-08-18). button_to wraps it in a form, which is what has to
   move. */
.hub-roadmap-slot > form {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.hub-roadmap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: calc(13px * var(--text-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
}

.hub-roadmap-toggle i {
  font-size: 1rem;
  color: var(--teal-accent);
}

.hub-roadmap {
  margin-top: 0.75rem;
}

/* ===== Your modules ===== */
.hub-shelf {
  margin-top: 1.25rem;
}

.hub-shelf-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.hub-shelf-label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(11.5px * var(--text-scale));
  color: var(--text-muted);
}

.hub-shelf-toggle {
  border: none;
  background: none;
  color: var(--teal-ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  padding: 0;
}

.hub-shelf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(14.5px * var(--text-scale));
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  text-decoration: none;
}

.hub-chip i {
  color: var(--text-muted);
}

/* A finished module keeps its own icon and wears the tick on its corner
   (shared/_progress_badge), so the icon itself just warms up. */
.hub-chip.is-complete i { color: var(--teal-ink); }
.hub-chip.is-complete .progress-badge.is-done { color: var(--teal-accent); }

.hub-chip:hover {
  color: var(--text-dark);
  border-color: var(--border-medium);
}

/* 3x3: nine modules, three columns (owner, 2026-08-12). Narrow screens
   collapse below. */
.hub-shelf-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

@media (max-width: 760px) {
  .hub-shelf-tiles { grid-template-columns: 1fr; }
}

.hub-tile {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--border-medium);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all var(--transition-fast);
}

/* Hover grammar (spec §6): cards lift 1px and their shadow deepens — and only
   for pointers that can hover, so an iPad tap never sticks a lifted card. */
@media (hover: hover) {
  .hub-tile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

.hub-tile.is-complete {
  border-left-color: var(--teal-accent);
}

.hub-tile-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hub-tile-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(15px * var(--text-scale));
}

.hub-tile.is-complete .hub-tile-icon {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.hub-tile-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  text-decoration: none;
}

.hub-tile-title {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(15.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
}

.hub-tile-count {
  display: block;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-muted);
}

.hub-tile-check {
  color: var(--teal-ink);
}

.hub-tile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.hub-attention {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--status-warning-bg);
  color: var(--status-warning-deep);
  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;
}

/* Action Plan tile only: "N finished steps could feed this" — the quiet
   progressive-action-plan count (hub/show.html.erb). A muted line, not a
   badge: it informs, it never nags. */
.hub-tile-feed {
  margin: 0.35rem 0 0;
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  color: var(--text-secondary);
}

.hub-tile-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* The grid stretches every tile to the tallest in its row; the bar and
     button belong on the tile's floor, not floating under a short head. */
  margin-top: auto;
}

.hub-tile-bar {
  flex: 1;
  display: block;
  background: var(--border-light);
  border-radius: var(--radius-full);
  height: 8px;
  overflow: hidden;
}

.hub-tile-fill {
  display: block;
  background: var(--teal-accent);
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--motion-ceremony) var(--ease-out);
}

.hub-tile-foot .btn {
  text-decoration: none;
}

/* ===== Recent conversations =====
   The design keeps activity in its own drawer, so there is no capture for
   this section; it is built from the same tokens and rhythm as the shelf
   above it. */
.hub-recent {
  margin-top: 1.25rem;
}

.hub-recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.hub-recent-all {
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  color: var(--teal-ink);
  text-decoration: none;
}

.hub-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
}

.hub-recent-list li + li {
  border-top: 1px solid var(--border-light);
}

.hub-recent-list a {
  display: block;
  padding: 0.75rem var(--card-x);
  text-decoration: none;
  color: inherit;
}

.hub-recent-list a:hover {
  background: var(--bg-secondary);
}

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

.hub-recent-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 2px;
}

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

/* ===== Cross-module insights =====
   Also outside the captures; same tokens and rhythm as the sections above. */
.hub-insights-section {
  margin-top: 1.25rem;
}

.hub-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0.85rem;
}

.hub-insight-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--teal-accent);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1rem;
}

.hub-insight-card > i {
  color: var(--teal-ink);
}

.hub-insight-card h4 {
  font-family: var(--font-heading);
  font-size: calc(15.5px * var(--text-scale));
  font-weight: 500;
  color: var(--navy-primary);
  margin: 0.35rem 0 0.2rem;
}

.hub-insight-card p {
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* ===== Parked ideas ===== */
.hub-parking-lot-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.375rem 0;
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  color: var(--teal-ink);
  cursor: pointer;
}

.hub-parking-lot-hint-link {
  background: none;
  border: none;
  color: var(--teal-ink);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.hub-parking-lot-hint-link:hover {
  color: var(--teal-ink);
}

/* ===== How loud the guide is ===== */
.hub-pacing {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hub-pacing-label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(11.5px * var(--text-scale));
  color: var(--text-muted);
}

.hub-pacing-options {
  display: flex;
  gap: 0.25rem;
}

.hub-pacing-btn {
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
}

.hub-pacing-btn.active {
  border-color: var(--teal-accent);
  background: var(--teal-light);
  color: var(--teal-ink);
}

.hub-pacing-caption {
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  color: var(--text-muted);
}

/* Settings -> Your guide reuses the pacing control. */
.hub-guide-pacing-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.hub-guide-pacing-btn {
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
}

.hub-guide-pacing-btn.active {
  border-color: var(--teal-accent);
  background: var(--teal-light);
  color: var(--teal-ink);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .hub-chapter-meta {
    white-space: normal;
  }

  .hub-step {
    flex-wrap: wrap;
  }
}

/* ===== Returning-member recap =====
   Same navy band and slot as .guide-gap-banner (guide-transition.css), which
   it replaces whenever there is a stored recap. Quieter than that banner by
   design: the recap has real sentences to carry, so nothing here competes with
   them for attention. */
.guide-recap {
  background: var(--surface-inverse);
  color: #fff;
  padding: 1.5rem var(--card-x);
  margin-bottom: 0.9rem;
  position: relative;
  overflow: hidden;
}

.guide-recap-topo {
  position: absolute;
  inset: 0;
  background-image: var(--texture-topography);
  background-size: 900px;
  background-attachment: fixed;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
}

.guide-recap-inner {
  position: relative;
  z-index: 1;
}

.guide-recap-eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: calc(11.5px * var(--text-scale));
  color: var(--teal-ink);
  margin-bottom: 0.45rem;
}

.guide-recap-meta {
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 0.6rem;
}

/* The prose the night wrote. Given the most room of anything in the card. */
.guide-recap-text {
  font-family: var(--font-body);
  font-size: calc(16.5px * var(--text-scale));
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  max-width: 62ch;
  margin: 0;
}

.guide-recap-continue {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.9rem;
  font-family: var(--font-ui);
  font-size: calc(14px * var(--text-scale));
  color: var(--teal-ink);
  text-decoration: none;
}

.guide-recap-continue:hover {
  color: #fff;
  text-decoration: underline;
}

/* Quiet door to the Notebook's recap stream, tucked at the card's edge —
   present, not competing with "Pick up with". */
.guide-recap-all {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 0.9rem;
  margin-left: 1.4rem;
  font-family: var(--font-ui);
  font-size: calc(13px * var(--text-scale));
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}

.guide-recap-all:hover,
.guide-recap-all:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* ===== Dark theme ===== */
[data-theme="dark"] .hub-chapter,
[data-theme="dark"] .hub-chip {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .hub-chapter-card,
[data-theme="dark"] .hub-tile,
[data-theme="dark"] .hub-recent-list {
  background: var(--bg-tertiary);
}

/* The Hub's six foundation cards are an equal-sized grid, so the statement
   box is a fixed height and the TYPE gives instead of the words
   (fit_text_controller). Server-side truncation used to do this job and cut
   statements mid-word — "and be intentional a…" — which defeats the point of
   putting the statement on the Hub (owner, 2026-08-18). */
.hub-roadmap .foundation-card-text {
  height: 11.5rem;
  overflow: hidden;
}

.hub-roadmap .foundation-card-text--empty { height: auto; }