/* Shared components. Theme tokens only (see docs/DESIGN.md).
   Status, stage card, battle card, prompt card, tool shell, notes, chips. */

.icon { flex-shrink: 0; }

/* Status label: shape + colour + word. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-badge);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.status--compact { font-size: 0.875rem; padding: 0.2rem 0.7rem; }
.status--live { background: var(--color-live-bg); color: var(--color-live-text); }
.status--being-built { background: var(--color-built-bg); color: var(--color-built-text); }
.status--coming-soon { background: var(--color-soon-bg); color: var(--color-soon-text); }

/* Chips: sources and the unsourced flag. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-badge);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.chip--sources { background: var(--color-surface); border: 1px solid var(--color-note-border); color: var(--color-text); }
.chip--sources .icon { color: var(--color-primary); }
.chip--unsourced { background: var(--color-surface); border: 1.5px dashed var(--color-warn-border); color: var(--color-warn-text); font-weight: 700; }

/* Notes. */
.note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-panel);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.note .icon { color: var(--color-primary); margin-top: 0.1rem; }
.note--safe { background: var(--color-tint); }
.note--transparency { background: var(--color-note-bg); border: 1px solid var(--color-note-border); }

/* Stage card: a card from 640px up, a compact row below. */
.stage-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .stage-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem; } }

.stage-card {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.5rem;
  padding: 0.875rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
  text-decoration: none;
}
.stage-card--link:hover { color: var(--color-text); border-color: var(--color-primary); box-shadow: var(--shadow-hover); }
.stage-card__number {
  font-family: var(--font-stage-number);
  font-weight: var(--stage-number-weight);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-primary);
}
.stage-card__body { display: flex; flex-direction: column; }
.stage-card__name {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--heading-weight);
  font-size: 1.125rem;
  letter-spacing: var(--stage-tracking);
}
.stage-card__promise { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.45; }
.stage-card__footer { display: flex; align-items: center; gap: 0.75rem; }
.stage-card__meta { display: none; }
@media (max-width: 639px) {
  /* On phones the badge shrinks to its shape; the word stays for screen readers. */
  .stage-card .status { padding: 0; background: none; }
  .stage-card .status__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 640px) {
  .stage-card { grid-template-columns: 1fr; align-content: start; gap: 0.625rem; padding: 1.5rem; }
  .stage-card__number { font-size: 3rem; }
  .stage-card__name { font-size: 1.5rem; }
  .stage-card__promise { font-size: 1.0625rem; color: var(--color-text); line-height: 1.5; }
  .stage-card__footer { justify-content: space-between; border-top: 1px solid var(--color-border-soft); padding-top: 0.875rem; margin-top: auto; }
  .stage-card__meta { display: inline; font-size: 0.875rem; color: var(--color-text-muted); }
}

/* Shared card head, used by prompt cards and tools. */
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1rem; }
.card-head__text { display: flex; flex-direction: column; gap: 0.375rem; }
.card-title { font-size: clamp(1.5rem, 2.4vw, 1.75rem); }
.card-summary { color: var(--color-text-muted); font-size: 1rem; }

/* Battle card. */
.battle-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.battle-card__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.5rem;
  background: var(--color-cardhead-bg);
  color: var(--color-cardhead-text);
}
.battle-card__head .eyebrow { color: var(--color-cardhead-accent); }
.battle-card__time { font-size: 0.875rem; }
.battle-card__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.battle-card__title { font-size: clamp(1.375rem, 2.2vw, 1.625rem); }
.battle-card__rows { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.battle-card__row { display: grid; gap: 0.125rem; }
.battle-card__row dt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.battle-card__row dd { margin: 0; line-height: 1.5; }
@media (min-width: 640px) {
  .battle-card__row { grid-template-columns: 9rem 1fr; gap: 1rem; }
  .battle-card__row dt { padding-top: 0.2rem; }
}
@media (max-width: 639px) { .battle-card__head, .battle-card__body { padding-inline: 1rem; } .battle-card__time { display: none; } }

/* Form controls. */
.field-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .field-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .field-grid--numbers { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}
.field--wide { grid-column: 1 / -1; }
.field-grid--numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field__label { font-size: 0.9375rem; font-weight: 700; }
.control {
  width: 100%;
  min-height: 3rem;
  padding: 0 0.875rem;
  border: 1.5px solid var(--color-border-control);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
}
textarea.control { padding-block: 0.75rem; line-height: 1.5; resize: vertical; }
.control--number { font-family: var(--font-mono); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.control--small { max-width: 8rem; }

/* Prompt card. */
.prompt-card, .tool {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 640px) { .prompt-card, .tool { padding: 1.75rem; } }
.prompt-preview {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-panel);
  padding: 1rem 1.125rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.blank { background: var(--color-blank); color: var(--color-text); padding: 0.05em 0.25em; border-radius: 3px; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1rem; }
.card-hint { font-size: 0.875rem; color: var(--color-text-muted); }
.copy-status { flex-basis: 100%; font-size: 0.9375rem; color: var(--color-text); }
.copy-status:empty { display: none; }
@media (max-width: 639px) {
  .card-actions .btn { width: 100%; }
  .card-actions { flex-direction: column-reverse; align-items: stretch; }
  .card-hint { text-align: center; }
}

/* Tool shell. */
.assumption {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-panel);
}
.assumption__field { display: flex; flex-direction: column; gap: 0.375rem; }
.assumption__note { flex: 1 1 14rem; font-size: 0.875rem; line-height: 1.45; color: var(--color-text-muted); padding-bottom: 0.25rem; }
.tool__note { font-size: 0.875rem; line-height: 1.45; color: var(--color-text-muted); }
.result {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem 1.25rem;
  background: var(--color-tint);
  border-radius: var(--radius-panel);
}
.result__label { font-size: 0.9375rem; color: var(--color-text-muted); }
.result__value {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.result__note { font-size: 0.9375rem; }
.range-bar { position: relative; display: block; height: 0.75rem; border-radius: 999px; background: var(--color-range-track); margin-block: 0.375rem; }
.range-bar[hidden] { display: none; }
.range-bar__fill { position: absolute; top: -0.125rem; bottom: -0.125rem; left: 0; width: 0; border-radius: 999px; background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-tint); }
.math summary { cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }
.math__steps {
  margin: 0;
  padding: 0.5rem 0 0 1.75rem;
  border-top: 1px solid var(--color-border-soft);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}
.math__steps li::marker { color: var(--color-text-muted); }

/* Component library page only. */
.demo-grid { display: grid; gap: 1.5rem; }
@media (min-width: 960px) {
  .demo-grid--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .demo-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.demo-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.swatch { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
.swatch__chip { height: 4.5rem; border-radius: var(--radius-panel); border: 1px solid var(--color-border); }
.swatch__name { font-weight: 700; font-size: 0.9375rem; }
.swatch code { font-family: var(--font-mono); color: var(--color-text-muted); }
.type-specimen { display: flex; flex-direction: column; gap: 1rem; }
.specimen-display {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--display-weight);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.03;
  letter-spacing: var(--display-tracking);
}
.type-specimen .mono { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; }

.swatch__chip--bg { background: var(--color-bg); }
.swatch__chip--surface { background: var(--color-surface); }
.swatch__chip--text { background: var(--color-text); }
.swatch__chip--text-muted { background: var(--color-text-muted); }
.swatch__chip--primary { background: var(--color-primary); }
.swatch__chip--primary-strong { background: var(--color-primary-strong); }
.swatch__chip--tint { background: var(--color-tint); }
.swatch__chip--highlight { background: var(--color-highlight); }
.swatch__chip--border { background: var(--color-border); }
.swatch__chip--focus { background: var(--color-focus); }

/* ---------- Prompt page template ---------- */

.sample-banner { margin: 0; background: var(--color-built-bg); color: var(--color-built-text); font-size: 0.9375rem; }
.sample-banner > .wrap { display: flex; gap: 0.625rem; align-items: flex-start; padding-block: 0.75rem; }
.sample-banner .icon { margin-top: 0.15rem; }

.chip--info { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.chip--info .icon { color: var(--color-primary); }

.prompt-head { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.prompt-head__inner { display: flex; flex-direction: column; gap: 0.75rem; padding-block: 1.25rem 1.75rem; }
@media (min-width: 960px) { .prompt-head__inner { padding-block: 2rem 2.5rem; } }
.prompt-head__title { font-size: clamp(1.875rem, 5vw, 3rem); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.08; text-wrap: balance; max-width: 22ch; }
.prompt-head__summary { font-size: 1.0625em; color: var(--color-text-muted); max-width: 60ch; }
.prompt-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.prompt-head__level { font-size: 0.9375rem; color: var(--color-text-muted); }

.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.875rem; color: var(--color-text-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--color-border-control); }
.breadcrumb a { color: var(--color-text-muted); }

.prompt-layout { display: grid; gap: 2rem; padding-block: 1.75rem 0; }
@media (min-width: 960px) {
  .prompt-layout { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem; padding-block: 2.5rem 0; align-items: start; }
  .prompt-side { position: sticky; top: 1.5rem; }
}
.prompt-main, .prompt-side { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.prompt-step { display: flex; flex-direction: column; gap: 1rem; }
.prompt-step__title { display: flex; align-items: center; gap: 0.625rem; font-size: 1.25rem; }
.prompt-step__n {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.field-grid--prompt { grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-grid--prompt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field__hint { font-size: 0.875rem; line-height: 1.45; color: var(--color-text-muted); }
.field__leave { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.875rem; line-height: 1.45; }
.field__leave .icon { color: var(--color-primary); margin-top: 0.1rem; }
.field__warn { font-size: 0.875rem; line-height: 1.45; color: var(--color-warn-text); }
.field__warn:empty { display: none; }
.field--warned .control { border-color: var(--color-warn-border); border-style: dashed; }
.field--warned .field__warn { padding: 0.5rem 0.75rem; border: 1.5px dashed var(--color-warn-border); border-radius: var(--radius-control); }

.note--privacy { background: var(--color-surface); border: 1px solid var(--color-border); }

.browse { margin: 0; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.browse legend { padding: 0 0.25rem; }
.browse__choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.choice { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 1rem; cursor: pointer; }
.choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); }
.browse__fallback { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border-soft); }
.browse__fallback[hidden] { display: none; }

.prompt-side .prompt-preview { max-height: none; }
@media (min-width: 960px) { .prompt-side .prompt-preview { max-height: 60vh; overflow-y: auto; } }
.copy-bar { display: flex; flex-direction: column; gap: 0.5rem; }
@media (max-width: 959px) {
  .copy-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
  }
}
.then-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.9375rem; }

.prompt-foot { display: flex; flex-direction: column; gap: 2rem; padding-block: 2.5rem 1rem; }
.next-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1.25rem;
  background: var(--color-tint);
  border-radius: var(--radius-card);
}
.next-step .eyebrow { flex-basis: 100%; margin: 0; font-weight: 400; }
.next-step__label, .next-step__link { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.25rem; }
.next-step__link { color: var(--color-text); }
.about-prompt { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid var(--color-border); padding-top: 1.75rem; }
.about-prompt h2 { font-size: 1.25rem; }
.about-prompt__list { margin: 0; display: flex; flex-direction: column; gap: 0.875rem; font-size: 0.9375rem; }
.about-prompt__list > div { display: grid; gap: 0.25rem; }
@media (min-width: 640px) { .about-prompt__list > div { grid-template-columns: 9rem 1fr; gap: 1rem; } }
.about-prompt__list dt { font-weight: 700; }
.about-prompt__list dd { margin: 0; display: flex; flex-direction: column; gap: 0.375rem; align-items: flex-start; }
.about-prompt__list ul { margin: 0; padding-left: 1.25rem; }
.browse__unsure[hidden] { display: none; }

/* ---------- Prompt library ---------- */

.library { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 1.75rem 1rem; }
.library__filters { display: grid; gap: 1rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.library__filters[hidden] { display: none; }
.library__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.library__search, .library__stage { grid-column: 1 / -1; }
@media (min-width: 640px) { .library__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .library__stage { grid-column: auto; } }
@media (min-width: 960px) { .library__filters { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); padding: 1.25rem; } .library__search { grid-column: auto; } }
.library__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; min-height: 3rem; }
.library__count { font-size: 0.9375rem; color: var(--color-text-muted); }
.library__group { display: flex; flex-direction: column; gap: 0.875rem; }
.library__group[hidden] { display: none; }
.library__group-title { display: flex; align-items: baseline; gap: 0.75rem; font-size: 1.25rem; letter-spacing: var(--stage-tracking); padding-bottom: 0.625rem; border-bottom: 1px solid var(--color-border); }
.library__group-number { font-family: var(--font-stage-number); font-weight: var(--stage-number-weight); color: var(--color-primary); font-size: 1.5rem; line-height: 1; }
.library__group-promise { display: block; font-family: var(--font-body); font-stretch: normal; font-weight: 400; font-size: 0.9375rem; letter-spacing: 0; color: var(--color-text-muted); margin-top: 0.125rem; }
.library__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 960px) { .library__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.prompt-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  position: relative;
}
.prompt-item[hidden] { display: none; }
@media (min-width: 640px) { .prompt-item { padding: 1.25rem 1.5rem; } }
.prompt-item:not(.prompt-item--unlinked):hover { border-color: var(--color-primary); box-shadow: var(--shadow-hover); }
.prompt-item__text { display: flex; flex-direction: column; gap: 0.25rem; }
.prompt-item__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.1875rem; line-height: 1.25; color: var(--color-text); text-decoration: none; }
a.prompt-item__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
a.prompt-item__title:hover { color: var(--color-primary-strong); }
.prompt-item__summary { font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); }
.prompt-item--unlinked { background: var(--color-surface-sunken); border-style: dashed; }
.prompt-item__note { font-size: 0.875rem; color: var(--color-text-muted); font-style: italic; }
.prompt-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; }
.chip--small { font-size: 0.8125rem; padding: 0.2rem 0.65rem; gap: 0.35rem; }
.prompt-item__sample { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-built-text); }
.library__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.5rem; background: var(--color-surface); border: 1px dashed var(--color-border-control); border-radius: var(--radius-card); }
.library__empty[hidden] { display: none; }
.library__empty h2 { font-size: 1.25rem; }

/* ---------- Guide page template ---------- */

.guide__layout { display: grid; gap: 1.5rem; padding-block: 1.5rem 0; }
.guide__body { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; max-width: 44rem; }
@media (min-width: 960px) {
  .guide__layout { grid-template-columns: minmax(0, 44rem) minmax(0, 16rem); justify-content: space-between; gap: 4rem; padding-block: 2.5rem 0; }
  .guide__toc { grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; align-self: start; }
  .guide__body { grid-column: 1; grid-row: 1; }
}
.toc { border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.toc summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; padding: 0 1rem; font-weight: 700; font-size: 0.9375rem; }
.toc ol { margin: 0; padding: 0 0.5rem 0.75rem 2.25rem; display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.9375rem; line-height: 1.4; }
.toc a { display: block; min-height: 2.75rem; padding: 0.625rem 0.5rem; margin-left: -0.5rem; border-radius: var(--radius-control); color: var(--color-text); text-decoration: none; }
.toc a:hover { color: var(--color-primary); text-decoration: underline; }

/* Long-form reading: about 65 characters a line, generous rhythm. */
.prose { font-size: 1.0625em; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 3.5vw, 1.875rem); margin-top: 2.25em; scroll-margin-top: 1.5rem; text-wrap: balance; }
.prose h3 { font-size: 1.25rem; margin-top: 1.75em; scroll-margin-top: 1.5rem; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose strong { font-weight: 700; }
.source-ref { font-size: 0.75em; line-height: 0; margin-left: 0.1em; }
.source-ref a { text-decoration: none; font-weight: 700; padding: 0 0.1em; }

.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 0.9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.table-scroll th, .table-scroll td { text-align: left; vertical-align: top; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--color-border-soft); }
.table-scroll th { font-weight: 700; background: var(--color-surface-sunken); }
.table-scroll tr:last-child td { border-bottom: 0; }

.callout {
  padding: 1rem 1.125rem;
  border-radius: var(--radius-panel);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.9375em;
  line-height: 1.6;
}
.callout > * + * { margin-top: 0.6em; }
.callout ul, .callout ol { padding-left: 1.3em; }
.callout__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.callout__label + .callout__title { margin-top: 0.15em; }
.callout__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.125rem; line-height: 1.3; }
.callout--tip { background: var(--color-tint); border-color: transparent; }
.callout--caution { border: 1.5px dashed var(--color-warn-border); }
.callout--caution .callout__label { color: var(--color-warn-text); }
.callout--example { background: var(--color-surface-sunken); }
.callout--checklist { background: var(--color-surface); }
.callout--checklist ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.callout--checklist li { margin: 0; }
.callout--checklist label { display: flex; gap: 0.75rem; align-items: flex-start; min-height: 2.75rem; padding-block: 0.4rem; cursor: pointer; }
.callout--checklist input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.2em; accent-color: var(--color-primary); }
.callout--checklist input:checked + span { color: var(--color-text-muted); text-decoration: line-through; }

.learn-do { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.learn-do .eyebrow { margin: 0; }
.learn-do__heading { font-size: 1.5rem; }
.learn-do__card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.learn-do__kind { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.learn-do__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.3125rem; line-height: 1.25; color: var(--color-text); }
.learn-do__summary { font-size: 0.9375rem; color: var(--color-text-muted); }
.learn-do__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.875rem; }
.next-action { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; background: var(--color-tint); border-radius: var(--radius-card); }
.next-action__heading { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; }
.next-action__heading .icon { color: var(--color-primary); }
.sources { margin: 0; padding-left: 1.5rem; }
.sources li:target { background: var(--color-blank); border-radius: 3px; }

/* Guides: primary sections are numbered in the article, matching the contents list. Subheadings aren't. */
.prose { counter-reset: guide-section; }
.prose h2 { counter-increment: guide-section; display: flex; gap: 0.625rem; align-items: baseline; }
.prose h2::before {
  content: counter(guide-section);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 500;
  color: var(--color-primary);
}

/* ---------- Battle card template: built for a glance on a phone ---------- */

.bcard__head { background: var(--color-cardhead-bg); color: var(--color-cardhead-text); }
.bcard__head-inner { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 0.75rem 1rem; }
@media (min-width: 960px) { .bcard__head-inner { padding-block: 1.75rem 2rem; } }
.bcard__head .breadcrumb ol, .bcard__head .breadcrumb a { color: var(--color-cardhead-text); }
.bcard__head .breadcrumb li + li::before { color: var(--color-cardhead-accent); }
.bcard__eyebrow { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-cardhead-accent); }
.bcard__kind { padding: 0.15rem 0.6rem; border: 1px solid currentColor; border-radius: var(--radius-badge); }
.bcard__title { font-size: clamp(1.625rem, 5vw, 2.5rem); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.1; text-wrap: balance; }
.bcard__matchup { font-size: 0.9375rem; color: var(--color-cardhead-accent); }
.bcard__heard { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 1rem; border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-text); }
.bcard__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.bcard__heard-text { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: clamp(1.125rem, 3.5vw, 1.375rem); line-height: 1.35; }
.bcard__meta { gap: 0.375rem 0.5rem; }
.bcard__meta .chip { background: var(--color-surface); }
.bcard__meta .chip--unsourced { color: var(--color-warn-text); }
.bcard__stale { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 1rem; border-radius: var(--radius-panel); background: var(--color-built-bg); color: var(--color-built-text); font-size: 0.9375rem; line-height: 1.45; }

/* Jump bar: stays at the top while the rep scrolls. Five short labels fit a phone. */
.bcard__jump { position: sticky; top: 0; z-index: 3; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.bcard__jump ul { list-style: none; margin: 0; display: flex; justify-content: space-between; gap: 0.25rem; }
@media (min-width: 640px) { .bcard__jump ul { justify-content: flex-start; gap: 0.5rem; } }
.bcard__jump a { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.5rem; border-radius: var(--radius-control); font-weight: 700; font-size: 0.9375rem; color: var(--color-text); text-decoration: none; }
.bcard__jump a:hover { color: var(--color-primary); background: var(--color-tint); }

.bcard__grid { display: grid; gap: 0.75rem; padding-block: 1rem 0; }
@media (min-width: 960px) { .bcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding-block: 2rem 0; align-items: start; } .bblock--aim { grid-column: 1 / -1; } }
.bblock { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 1rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); scroll-margin-top: 3.5rem; }
@media (min-width: 640px) { .bblock { padding: 1.125rem 1.25rem 1.25rem; } }
.bblock__label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-stretch: normal; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.bblock__list { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 1rem; line-height: 1.5; }
.bblock__list--numbered { padding-left: 1.5rem; }
.bblock__list--numbered li::marker { font-family: var(--font-mono); color: var(--color-text-muted); }
.bblock__list--lines { list-style: none; padding: 0; gap: 0.625rem; }
.bblock__list--lines li { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 600; font-size: 1.0625rem; line-height: 1.45; }
.bblock--say { background: var(--color-tint); border-color: transparent; }
.bblock--say .bblock__list--lines li + li { padding-top: 0.625rem; border-top: 1px solid var(--color-border); }
.bblock--avoid { border-style: dashed; border-color: var(--color-warn-border); }
.bblock--avoid .bblock__label { color: var(--color-warn-text); }
.bblock__note { font-size: 0.8125rem; color: var(--color-text-muted); }
.bblock--aim { background: var(--color-cardhead-bg); color: var(--color-cardhead-text); border-color: transparent; }
.bblock--aim .bblock__label { color: var(--color-cardhead-accent); }
.bblock__aim { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.1875rem; line-height: 1.4; }
.bblock .source-ref a, .bblock--aim a { color: inherit; }

.related { display: flex; flex-direction: column; gap: 0.75rem; }
.related .eyebrow { margin: 0; font-weight: 400; }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.related__item { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.related__kind { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.related__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.125rem; line-height: 1.3; color: var(--color-text); }
.related__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.placeholder { font-family: var(--font-mono); font-size: 0.9em; padding: 0 0.2em; border: 1px dashed var(--color-warn-border); border-radius: 3px; color: var(--color-warn-text); background: var(--color-surface); white-space: normal; }
.bblock--aim .placeholder { color: var(--color-text); }

/* ---------- Calculator template ---------- */

.tool-page__body { padding-block: 1.5rem 0; }
@media (min-width: 960px) { .tool-page__body { padding-block: 2.5rem 0; } }
.calc { display: grid; gap: 1.5rem; }
@media (min-width: 960px) {
  .calc { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.5rem; align-items: start; }
  .calc__result { position: sticky; top: 1.5rem; }
}
.calc__inputs { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.calc-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); min-width: 0; }
@media (min-width: 640px) { .calc-panel { padding: 1.5rem; } }
.calc-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.calc-fields { display: flex; flex-direction: column; gap: 1.25rem; }
.calc-assumption { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-soft); }
.calc-assumption:first-child { padding-top: 0; border-top: 0; }
.calc-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.calc-unit-label { font-weight: 400; color: var(--color-text-muted); }
.calc-field__sub { font-size: 0.875rem; font-weight: 700; color: var(--color-text-muted); }
.calc-pair { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.calc-pair legend { padding: 0; margin-bottom: 0.375rem; }
.calc-pair__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.unit-input { position: relative; display: flex; align-items: center; }
.unit-input .control { padding-right: 5.5rem; }
.unit-input__unit { position: absolute; right: 0.875rem; font-size: 0.875rem; color: var(--color-text-muted); pointer-events: none; max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-pair .unit-input .control { padding-right: 0.875rem; }
.calc-pair .unit-input__unit { display: none; }
/* Calculator fields read as places to type even before they're tapped: a tinted,
   recessed box with a firm border (shape, not just colour). Focus lifts it to
   the page colour with a primary border on top of the usual focus ring. */
.calc .control {
  background: var(--color-surface-sunken);
  border-width: 2px;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.08);
}
.calc .control:hover { border-color: var(--color-text); }
.calc .control:focus { background: var(--color-surface); border-color: var(--color-primary); box-shadow: none; outline: 3px solid var(--color-focus); outline-offset: 2px; }
.calc-field__error, .calc-field__warn { font-size: 0.875rem; line-height: 1.45; }
.calc-field__error:empty, .calc-field__warn:empty { display: none; }
.calc-field__error { color: var(--color-warn-text); font-weight: 700; }
.calc-field--error .control { border-color: var(--color-warn-text); border-width: 2px; }
.calc-field--error .control:focus { border-color: var(--color-warn-text); }
.calc-field__warn { padding: 0.5rem 0.75rem; border: 1.5px dashed var(--color-warn-border); border-radius: var(--radius-control); color: var(--color-warn-text); }
.calc-field--warn .control { border-style: dashed; border-color: var(--color-warn-border); }
.calc-source { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
.calc-source .icon { margin-top: 0.15rem; color: var(--color-primary); }
.calc-source strong { color: var(--color-text); font-weight: 700; }
.calc__warnings { padding: 0.75rem 1rem; border-radius: var(--radius-panel); background: var(--color-built-bg); color: var(--color-built-text); font-size: 0.9375rem; line-height: 1.45; }
.calc__secondary { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.calc__secondary:empty { display: none; }
.calc__secondary > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border-soft); font-size: 0.9375rem; }
.calc__secondary dt { color: var(--color-text-muted); }
.calc__secondary dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.calc__meaning { font-size: 0.9375rem; line-height: 1.55; }
.calc__copy { display: flex; flex-direction: column; gap: 0.5rem; }
.calc__copy[hidden] { display: none; }
.math__steps--plain { font-family: var(--font-body); line-height: 1.6; }
.tool__note { display: flex; gap: 0.4rem; align-items: center; }
.tool__note .icon { color: var(--color-primary); }

/* Phone: the result stays in view at the top while the rep edits the numbers below it. */
.calc__sticky { display: none; }
@media (max-width: 959px) {
  html:has(.calc__sticky:not([hidden])) { scroll-padding-top: 4.5rem; }
  .calc__sticky:not([hidden]) {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.625rem var(--gutter);
    min-height: 3.5rem;
    background: var(--color-cardhead-bg);
    color: var(--color-cardhead-text);
    text-decoration: none;
  }
  .calc__sticky:hover { color: var(--color-cardhead-text); }
  .calc__sticky-label { font-size: 0.875rem; }
  .calc__sticky-value { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); font-size: 1.25rem; font-variant-numeric: tabular-nums; text-align: right; }
}

/* Learn → Do → Next strip. */
.ldn { display: flex; flex-direction: column; gap: 0.75rem; }
.ldn .eyebrow { margin: 0; font-weight: 400; }
.ldn__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 960px) { .ldn__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ldn__step { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); font-size: 0.9375rem; }
.ldn__step--here { background: var(--color-tint); border-color: transparent; }
.ldn__step--next { border-style: dashed; }
.ldn__kind { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.ldn__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.0625rem; line-height: 1.35; color: var(--color-text); }
.ldn__related { font-size: 0.875rem; }
.demo-calc { margin-top: 1.5rem; }
.calc .result__value { font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.15; overflow-wrap: anywhere; }

/* ---------- Stage page template: action first ---------- */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stage-head { background: var(--color-header-bg); color: var(--color-header-text); }
.stage-head__inner { display: flex; flex-direction: column; gap: 1.25rem; padding-block: 1rem 1.75rem; }
@media (min-width: 960px) { .stage-head__inner { padding-block: 1.5rem 2.5rem; } }
.stage-strip ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.stage-strip li > * { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 0.75rem; border-radius: var(--radius-badge); font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 0.875rem; letter-spacing: var(--stage-tracking); text-decoration: none; }
.stage-strip a { color: var(--color-header-text); border: 1px solid var(--color-header-muted); }
.stage-strip .stage-strip__off { color: var(--color-header-muted); border: 1px dashed var(--color-header-muted); }
.stage-strip .is-current > span { background: var(--color-header-cta-bg); color: var(--color-header-cta-text); }
.stage-strip__n { font-family: var(--font-stage-number); font-weight: var(--stage-number-weight); }
.stage-head__title { display: flex; gap: 1rem; align-items: center; }
.stage-head__number { font-family: var(--font-stage-number); font-weight: var(--stage-number-weight); font-size: clamp(3rem, 12vw, 5.5rem); line-height: 0.9; color: var(--color-header-accent); }
.stage-head__name { font-size: clamp(2rem, 7vw, 3.5rem); font-weight: var(--display-weight); letter-spacing: var(--stage-tracking); line-height: 1; }
.stage-head__promise { font-size: 1.125em; color: var(--color-header-muted); margin-top: 0.25rem; }

.stage-layout { display: grid; gap: 2rem; padding-block: 1.5rem 0; }
@media (min-width: 960px) { .stage-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; padding-block: 2.5rem 0; align-items: start; } .stage-side { position: sticky; top: 1.5rem; } }
.stage-main, .stage-side { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.stage-main > section { display: flex; flex-direction: column; gap: 0.75rem; }
.stage-section__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.375rem; }
.stage-section__title .icon { color: var(--color-primary); }
.stage-section__title--small { font-size: 1.125rem; }
.stage-sub { font-family: var(--font-mono); font-stretch: normal; font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 0.25rem; }

.item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
/* One item fills the row; two or more sit side by side. */
@media (min-width: 640px) { .item-list { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .item-list--compact { grid-template-columns: 1fr; } }
.item-card { position: relative; display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.item-card:not(.item-card--unlinked):hover { border-color: var(--color-primary); box-shadow: var(--shadow-hover); }
.item-card--unlinked { background: var(--color-surface-sunken); border-style: dashed; }
.item-card--featured { grid-column: 1 / -1; padding: 1.25rem 1.375rem; border: 2px solid var(--color-primary); background: var(--color-surface); }
.item-card--featured.item-card--unlinked { border-style: dashed; }
.item-card__kind { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.item-card__detail { color: var(--color-text-muted); letter-spacing: 0.06em; }
.item-card__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.125rem; line-height: 1.3; color: var(--color-text); text-decoration: none; }
.item-card--featured .item-card__title { font-size: clamp(1.25rem, 3vw, 1.5rem); }
a.item-card__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.item-card__why, .item-card__summary { font-size: 0.9375rem; line-height: 1.5; }
.item-card__summary { color: var(--color-text-muted); }
.item-card__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; font-size: 0.875rem; margin-top: auto; padding-top: 0.25rem; }
.item-card__also { font-size: 0.8125rem; color: var(--color-text-muted); font-style: italic; }

.stage-success { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; background: var(--color-tint); border-radius: var(--radius-card); }
.stage-success__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.5; }
.stage-success__list li { display: flex; gap: 0.5rem; align-items: flex-start; }
.stage-success__list .icon { color: var(--color-primary); flex-shrink: 0; margin-top: 0.15rem; }
.stage-everyday { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.25rem; border: 1px dashed var(--color-border-control); border-radius: var(--radius-card); }
.stage-everyday__promise { font-size: 0.9375rem; color: var(--color-text-muted); }

.stage-next { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 2.5rem; padding: 1.5rem; background: var(--color-cardhead-bg); color: var(--color-cardhead-text); border-radius: var(--radius-card); }
.stage-next .eyebrow { color: var(--color-cardhead-accent); display: block; }
.stage-next__title { display: flex; flex-direction: column; gap: 0.25rem; font-size: 1rem; }
.stage-next__name { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: var(--display-weight); letter-spacing: var(--stage-tracking); }
.stage-next__name a { color: var(--color-cardhead-text); }
.stage-next__promise { color: var(--color-cardhead-accent); }
.stage-next__when { font-size: 0.9375rem; line-height: 1.5; }
.stage-next .muted { color: var(--color-cardhead-accent); font-size: 0.875rem; }
.stage-next__prev { font-size: 0.875rem; }
.stage-next__prev a { color: var(--color-cardhead-text); }

/* ---------- Pal page: a portable setup prompt with its fit and examples ---------- */
.pal-role { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: clamp(1.125rem, 3vw, 1.375rem); line-height: 1.3; max-width: 40ch; }
.pal-stages { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-size: 0.9375rem; }
.pal-stages__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.pal-stages a { font-weight: 600; }
.pal-jump { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
@media (min-width: 960px) { .pal-jump { display: none; } }
.pal-who { display: flex; flex-direction: column; gap: 0.75rem; }
.pal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.5; }
.pal-list li { display: flex; gap: 0.5rem; align-items: flex-start; }
.pal-list .icon { flex-shrink: 0; margin-top: 0.15rem; color: var(--color-primary); }
.pal-fit { display: grid; gap: 1rem; }
@media (min-width: 640px) { .pal-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pal-fit__box { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.125rem 1.25rem; background: var(--color-tint); border-radius: var(--radius-card); }
.pal-fit__box--not { background: var(--color-surface); border: 1.5px dashed var(--color-warn-border); }
.pal-fit__box--not .icon { color: var(--color-warn-text); }
.pal-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.pal-example { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.pal-example__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.pal-example__text { font-size: 0.9375rem; line-height: 1.5; }
.pal-example__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pal-example__copy .btn { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.375rem; }
.pal-example__copy .copy-status { font-size: 0.8125rem; color: var(--color-text-muted); }
.source-unverified { display: block; font-size: 0.8125rem; color: var(--color-warn-text); }
.pal-type { display: inline-flex; align-items: flex-start; gap: 0.5rem; align-self: flex-start; padding: 0.375rem 0.875rem; border-radius: var(--radius-badge); background: var(--color-tint); font-size: 0.9375rem; line-height: 1.4; }
.pal-type .icon { flex-shrink: 0; margin-top: 0.1rem; color: var(--color-primary); }

/* ---------- Toolbox: where am I, and where next ---------- */
.toolbox-layout { display: grid; gap: 2rem; padding-block: 1.5rem 0; }
@media (min-width: 960px) { .toolbox-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; padding-block: 2.5rem 0; align-items: start; } .toolbox-side { position: sticky; top: 1.5rem; } }
.toolbox-side { display: flex; flex-direction: column; gap: 1rem; }
.toolbox-side__more { font-size: 0.9375rem; }
.tb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
/* Each stage: number on the left, joined to the next by a thin line. */
.tb-stage { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.75rem; padding: 1rem 1rem 1rem 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
@media (min-width: 640px) { .tb-stage { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem 1.5rem 1.25rem 1rem; } }
.tb-stage:not(:last-child)::after { content: ""; position: absolute; left: calc(0.75rem + 1.5rem); bottom: -0.8rem; width: 2px; height: 0.8rem; background: var(--color-border-control); }
@media (min-width: 640px) { .tb-stage:not(:last-child)::after { left: calc(1rem + 2.25rem); } }
.tb-stage__number { font-family: var(--font-stage-number); font-weight: var(--stage-number-weight); font-size: clamp(1.75rem, 7vw, 2.75rem); line-height: 1; color: var(--color-primary); text-align: center; padding-top: 0.125rem; }
.tb-stage__body { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.tb-stage__name { font-size: 1.375rem; font-weight: var(--display-weight); letter-spacing: var(--stage-tracking); line-height: 1.1; }
.tb-stage__name a { color: var(--color-text); text-decoration: none; }
.tb-stage__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.tb-stage--linked:hover { border-color: var(--color-primary); box-shadow: var(--shadow-hover); }
.tb-stage--linked:has(.tb-stage__name a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tb-stage__name a:focus-visible { outline: none; }
.tb-stage__promise { font-weight: 600; font-size: 1rem; }
.tb-stage__about, .tb-stage__here { font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); }
.tb-stage__here strong { color: var(--color-text); font-weight: 600; }
.tb-stage__pals { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9375rem; }
.tb-stage__pals li { display: flex; gap: 0.5rem; align-items: flex-start; }
.tb-stage__pals .icon { flex-shrink: 0; margin-top: 0.2rem; color: var(--color-primary); }
.tb-stage__pals a { position: relative; z-index: 1; }
.tb-stage__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin-top: 0.375rem; font-size: 0.875rem; }
.tb-stage__ready { font-weight: 600; }
.tb-stage__go { margin-left: auto; font-weight: 600; color: var(--color-primary); }
/* Stages with nothing yet stay in the sequence, quieter. */
.tb-stage--coming-soon { background: var(--color-surface-sunken); border-style: dashed; }
.tb-stage--coming-soon .tb-stage__number { color: var(--color-text-muted); }
.tb-everyday { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.tb-everyday li { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.625rem; border-top: 1px solid var(--color-border-soft); }
.tb-everyday__kind { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.tb-everyday__title { font-weight: 600; }
.tb-everyday__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.stage-everyday > .muted { font-size: 0.9375rem; }
/* Phones: promise + "You're here if" is enough to orient; the longer line waits for wider screens. */
@media (max-width: 639.98px) { .tb-stage__about { display: none; } }

/* ---------- Glossary: short entries, A–Z and search ---------- */
.glossary { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 1.5rem 0; }
.glossary > * { width: 100%; max-width: 46rem; }
.glossary__tools { display: flex; flex-direction: column; gap: 0.75rem; }
.glossary__search { display: flex; flex-direction: column; gap: 0.375rem; }
.glossary__az ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.glossary__az a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--color-border-control); border-radius: var(--radius-badge); font-family: var(--font-display); font-weight: var(--heading-weight); text-decoration: none; color: var(--color-text); background: var(--color-surface); }
.glossary__az a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.glossary__count { font-size: 0.875rem; color: var(--color-text-muted); }
.glossary__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.glossary__letter { display: flex; flex-direction: column; gap: 0.75rem; scroll-margin-top: 1rem; }
.glossary__letter-h { font-family: var(--font-stage-number); font-weight: var(--stage-number-weight); font-size: 1.75rem; color: var(--color-primary); padding-bottom: 0.25rem; border-bottom: 1px solid var(--color-border); }
.glossary__top { font-size: 0.875rem; }
.gl-term { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); scroll-margin-top: 1rem; }
.gl-term:target { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.gl-term__name { font-size: 1.1875rem; }
.gl-term__also { font-size: 0.875rem; color: var(--color-text-muted); font-style: italic; }
.gl-term__def { font-size: 1rem; line-height: 1.55; }
.gl-term__here, .gl-term__example { font-size: 0.9375rem; line-height: 1.5; }
.gl-term__here { padding: 0.5rem 0.75rem; background: var(--color-tint); border-radius: calc(var(--radius-card) / 2); }
.gl-term__meta { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border-soft); font-size: 0.875rem; line-height: 1.5; }
.gl-term__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 0.375rem; }
.gl-term__source { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.375rem 0.5rem; }
.gl-term__source--sourced { flex-wrap: nowrap; }
.gl-term__source > .icon { flex-shrink: 0; margin-top: 0.2rem; color: var(--color-primary); }

/* ---------- Learning path: periods, modules, activities and evidence ---------- */
.path { display: flex; flex-direction: column; gap: 2rem; padding-block: 1.5rem 0; }
.path > * { width: 100%; max-width: 48rem; }
.path-periods ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
.path-periods a { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; min-height: 3.5rem; height: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--color-border-control); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.path-periods a:hover { border-color: var(--color-primary); }
.path-periods__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 0.9375rem; line-height: 1.2; }
.path-periods__count { font-size: 0.75rem; color: var(--color-text-muted); }
.path-period { display: flex; flex-direction: column; gap: 0.75rem; scroll-margin-top: 1rem; }
.path-period__title { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: var(--display-weight); letter-spacing: var(--display-tracking, 0); }
.path-period__focus { color: var(--color-text-muted); margin-top: -0.25rem; }
.path-module { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); scroll-margin-top: 1rem; }
.path-module[open] { border-color: var(--color-border-control); }
.path-module__summary { display: grid; gap: 0.25rem; padding: 1rem 2.75rem 1rem 1.125rem; cursor: pointer; list-style: none; position: relative; min-height: 2.75rem; }
.path-module__summary::-webkit-details-marker { display: none; }
.path-module__summary::after { content: "+"; position: absolute; right: 1rem; top: 0.875rem; font-size: 1.5rem; line-height: 1; color: var(--color-primary); }
.path-module[open] > .path-module__summary::after { content: "–"; }
.path-module__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.1875rem; line-height: 1.25; }
.path-module__goal { font-size: 0.9375rem; line-height: 1.45; }
.path-module__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.path-module__meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.path-module__body { display: flex; flex-direction: column; gap: 1rem; padding: 0 1.125rem 1.125rem; }
.path-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.path-step { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.875rem; border-left: 3px solid var(--color-border-control); background: var(--color-surface-sunken); border-radius: 0 calc(var(--radius-card) / 2) calc(var(--radius-card) / 2) 0; }
.path-step__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.path-step__type { color: var(--color-text-muted); letter-spacing: 0.06em; margin-left: 0.25rem; }
.path-step__title { font-weight: 600; line-height: 1.4; }
.path-step__how { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.45; }
.path-step__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.path-tick { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; min-height: 2.75rem; font-size: 0.875rem; cursor: pointer; }
.path-tick input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); }
/* Evidence is set apart from activity: a bordered box, no tick. */
.path-prove { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.875rem 1rem; border: 2px solid var(--color-primary); border-radius: calc(var(--radius-card) / 1.5); }
.path-prove__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.path-prove__title .icon { color: var(--color-primary); }
.path-prove__text { font-weight: 600; line-height: 1.45; }
.path-prove__check { font-size: 0.875rem; line-height: 1.45; }
.path-prove__note { font-size: 0.8125rem; color: var(--color-text-muted); }
.path-next { font-size: 0.9375rem; line-height: 1.45; }
.path-next__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 0.25rem; }
.nowrap { white-space: nowrap; }

/* ---------- Homepage: built from the shared system, per-edition theme ---------- */
.home-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.25rem; }
.home-hero__secondary { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-header-text); font-weight: 700; text-underline-offset: 4px; }
.home-hero__secondary:hover { color: var(--color-header-text); }
.home-intro { color: var(--color-text-muted); max-width: 60ch; margin: 0.5rem 0 1.25rem; }
.section > .wrap > h2 { font-size: clamp(1.5rem, 4.5vw, 2.125rem); font-weight: var(--display-weight); letter-spacing: var(--display-tracking, 0); max-width: 30ch; }
.home-use h2 { margin-bottom: 1.25rem; }
/* What you can use: a few primary types get cards; the rest are a quiet list. */
.home-use__primary { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .home-use__primary { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; } }
.home-use__card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-primary); border-radius: var(--radius-card); }
.home-use__card h3 { font-size: 1.25rem; }
.home-use__card p { font-size: 0.9375rem; line-height: 1.55; }
.home-use__link { margin-top: auto; padding-top: 0.25rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; }
.home-use__secondary { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); max-width: 60ch; }
.home-use__secondary strong { color: var(--color-text); }
/* One journey: numbered steps joined by a line. */
.home-journey { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.home-journey__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 44rem; }
.home-journey__step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.875rem; padding-bottom: 1.25rem; }
.home-journey__step:not(:last-child)::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: 0.25rem; width: 2px; background: var(--color-border-control); }
.home-journey__n { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast); font-family: var(--font-stage-number); font-weight: var(--stage-number-weight); }
.home-journey__body { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.375rem; }
.home-journey__label { font-size: 1.0625rem; }
.home-journey__body p { font-size: 0.9375rem; line-height: 1.5; }
.home-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.875rem; }
.home-item__kind { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.home-item__title { font-weight: 600; }
/* 90-day path: three stretches. */
.home-path__periods { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .home-path__periods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.home-path__periods li { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.125rem; background: var(--color-tint); border-radius: var(--radius-card); }
.home-path__title { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--heading-weight); font-size: 1.125rem; }
.home-path__focus { font-size: 0.9375rem; line-height: 1.5; }
.home-path__note { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.home-path__note .icon { flex-shrink: 0; margin-top: 0.15rem; color: var(--color-primary); }
/* Pals: the two types, then one or two examples. */
.home-pals { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.home-pals__types { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .home-pals__types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.home-pals__type { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.125rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.home-pals__type h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; }
.home-pals__type h3 .icon { color: var(--color-primary); }
.home-pals__type p { font-size: 0.9375rem; line-height: 1.5; }
.home-pals__examples { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.home-pals__examples li { display: flex; flex-direction: column; gap: 0.125rem; }
.home-pals__role { font-size: 0.875rem; color: var(--color-text-muted); }
/* Trust. */
.home-trust__points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 768px) { .home-trust__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; } }
.home-trust__points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.home-trust__points .icon { color: var(--color-primary); margin-top: 0.125rem; }
.home-trust__points h3 { font-size: 1.0625rem; margin-bottom: 0.125rem; }
.home-trust__points p { font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); }
/* Final call to action. */
.home-final { background: var(--color-header-bg); color: var(--color-header-text); padding-block: 2.5rem; }
.home-final__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
@media (min-width: 768px) { .home-final__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.home-final h2 { font-size: clamp(1.375rem, 4vw, 2rem); font-weight: var(--display-weight); max-width: 26ch; color: var(--color-header-text); }
/* Homepage stages: one row on wide screens, however many stages the edition has. */
@media (min-width: 1100px) { .home-stages { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; } }

/* ---------- Information pages: About, Privacy, Terms ---------- */
.info-reviewed { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--color-text-muted); }
.info { display: flex; flex-direction: column; gap: 2rem; padding-block: 1.5rem 0; }
.info > * { width: 100%; max-width: 44rem; }
.info__toc { padding: 1rem 1.125rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.info__toc-title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 500; margin-bottom: 0.5rem; }
.info__toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.125rem; }
.info__toc a { display: inline-block; padding-block: 0.3rem; }
.info__others ul { list-style: none; margin: 0; padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; border-top: 1px solid var(--color-border); }
.info__others a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.owner-note { padding: 0.05em 0.35em; border-radius: 0.25em; background: var(--color-built-bg); color: var(--color-built-text); box-shadow: inset 0 0 0 1px var(--color-warn-border); }
.owner-note__label { font-weight: 700; }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }

/* ---------- Release presentation (edition.json "release") ----------
   Used only when an edition has a release block: stages lead straight to
   their Live tools, Every day sits apart from the stages, and future content
   types appear as a compact roadmap rather than unfinished cards. */
.sample-banner--preview { background: var(--color-note-bg); color: var(--color-text); border-bottom: 1px solid var(--color-note-border); }
.sample-banner--preview .icon { color: var(--color-primary); }

/* Toolbox: the stage's Live tools, as clear links. */
.tb-tools { list-style: none; margin: 0.375rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tb-tool { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind go" "title go"; align-items: center; column-gap: 0.75rem; min-height: 2.75rem; padding: 0.625rem 0.875rem; background: var(--color-bg); border: 1px solid var(--color-border-control); border-left: 4px solid var(--color-primary); border-radius: var(--radius-card); color: var(--color-text); text-decoration: none; }
.tb-tool:hover { border-color: var(--color-primary); box-shadow: var(--shadow-hover); color: var(--color-text); }
.tb-tool__kind { grid-area: kind; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.tb-tool__title { grid-area: title; font-weight: 600; line-height: 1.35; }
.tb-tool__go { grid-area: go; font-weight: 700; color: var(--color-primary); }
.stage-everyday__note { font-size: 0.9375rem; line-height: 1.5; }

/* Homepage: Every day, apart from the five stages. */
.home-everyday { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1.25rem; padding: 1rem 1.25rem; border: 1px dashed var(--color-border-control); border-radius: var(--radius-card); background: var(--color-surface); max-width: 44rem; }
.home-everyday__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0; }
.home-everyday__when { font-size: 0.875rem; color: var(--color-text-muted); }
.home-everyday__tools { list-style: none; margin: 0; padding: 0; }
.home-everyday__tools a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 700; font-size: 1.0625rem; }
.home-everyday__note { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); }

/* Homepage: what's live now, then a compact roadmap. */
.home-use__label, .home-roadmap__label { font-size: 0.875rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.home-use__label { margin: 0 0 0.75rem; color: var(--color-primary); }
.home-roadmap { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-soft); max-width: 60ch; }
.home-roadmap__label { color: var(--color-text-muted); }
.home-roadmap__intro { margin: 0.375rem 0 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-muted); }
.home-roadmap__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.home-roadmap__items li { padding: 0.25rem 0.75rem; border: 1px dashed var(--color-border-control); border-radius: 999px; font-size: 0.875rem; color: var(--color-text-muted); }