/* Screens: layout, navigation, forms, review queue.
 * Every colour reuses a token from tokens.css; no value is introduced
 * outside of var(--…) and color-mix() on these tokens.
 */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.wrap--narrow { max-width: 720px; }

/* ---- Topbar ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  /* Trois colonnes plutot que deux : la marque a gauche, le menu au CENTRE,
   * et une colonne vide a droite de la meme largeur que la marque. Sans cette
   * troisieme colonne le menu serait centre sur l espace restant, donc decale
   * vers la droite de la moitie de la marque. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background-color: color-mix(in oklch, var(--paper-100) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge-soft);
}

.topbar__brand {
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-lead);
  letter-spacing: var(--tracking-display);
  color: var(--text-loud);
  text-decoration: none;
}

.topbar__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.topbar__link {
  font-size: var(--size-small);
  font-weight: 500;
  color: var(--text-quiet);
  text-decoration: none;
  padding-bottom: 2px;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--dur-move) var(--ease-settle),
    box-shadow var(--dur-move) var(--ease-settle);
}
.topbar__link:hover { color: var(--text-loud); }
.topbar__link--active {
  color: var(--text-loud);
  box-shadow: inset 0 -2px 0 var(--signal-500);
}

/* ---- Topbar: the phone row ----------------------------------------------- */

/* The trigger only exists below the breakpoint; above it the links are the
 * navigation and a button pointing at them would be a second way to say the
 * same thing. */
.topbar__toggle {
  position: relative;
  z-index: 3;
  grid-column: -2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-200) 62%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  color: var(--text-loud);
  cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-settle),
    box-shadow var(--dur-tap) var(--ease-settle);
}
.topbar__toggle:hover { box-shadow: inset 0 0 0 1px var(--edge-firm); }
.topbar__toggle:active {
  background-color: color-mix(in oklch, var(--paper-300) 70%, transparent);
}

.topbar__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
}
.topbar__bars i {
  display: block;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  /* Spring on the way in, not on the way out: opening is the gesture that
   * deserves the overshoot, closing should get out of the way. */
  transition: transform var(--dur-move) var(--ease-spring),
    opacity var(--dur-tap) var(--ease-exit);
}
.topbar__toggle[aria-expanded="true"] .topbar__bars i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.topbar__toggle[aria-expanded="true"] .topbar__bars i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.topbar__toggle[aria-expanded="true"] .topbar__bars i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 720px) {
  .topbar {
    grid-template-columns: 1fr auto;
    padding: var(--space-3) var(--space-4);
  }
  .topbar__toggle { display: inline-flex; }

  /* Tapping anywhere outside closes the menu; the scrim is what says so
   * before the tap, rather than leaving the page looking live underneath. */
  .topbar::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: color-mix(in oklch, var(--paper-200) 34%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-move) var(--ease-settle);
  }
  .topbar:has(.topbar__nav[data-open="true"])::after { opacity: 1; }

  /* The panel hangs off the bar rather than pushing it: the bar is sticky, so
   * growing it would cost the same screen height the wrap cost. */
  .topbar__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    /* Opaque, not translucent. The first attempt reused the bar's own
     * blurred 88% ink and the page read straight through it -- "Open missions"
     * sat inside the word "Create". A menu is a sheet, not a scrim. The
     * surface still is not a flat fill: a muted vertical gradient plus the
     * same grain every other surface in this product carries. */
    background-color: var(--paper-50);
    background-image: linear-gradient(180deg,
      color-mix(in oklch, var(--paper-200) 82%, transparent),
      color-mix(in oklch, var(--paper-100) 40%, transparent) 58%,
      transparent);
    border-bottom: 1px solid var(--edge-firm);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: 0 22px 44px -28px oklch(0 0 0 / 0.9);
    z-index: 2;
    transform-origin: top center;
    transform: translateY(-10px) scaleY(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--dur-move) var(--ease-exit),
      opacity var(--dur-tap) var(--ease-exit),
      visibility 0s var(--dur-move);
  }
  .topbar__nav[data-open="true"] {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--dur-move) var(--ease-spring),
      opacity var(--dur-tap) var(--ease-settle),
      visibility 0s;
  }

  .topbar__nav .topbar__link {
    padding: var(--space-3) 2px;
    font-size: var(--size-body);
    border-bottom: 1px solid var(--edge-soft);
    box-shadow: none;
    /* Each link arrives slightly after the one above it: the panel reads as one
     * object unfolding rather than six that appeared at once. */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--dur-move) var(--ease-settle) var(--stagger, 0ms),
      transform var(--dur-move) var(--ease-spring) var(--stagger, 0ms),
      color var(--dur-move) var(--ease-settle);
  }
  /* Grain as its own layer rather than a second background-image: a
   * background cannot carry an opacity of its own, and at full strength the
   * texture read as static rather than as a surface. */
  .topbar__nav::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("../assets/grain.svg");
    background-size: 220px 220px;
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  .topbar__nav > * { position: relative; }

  .topbar__nav .topbar__link:last-child { border-bottom: 0; }
  .topbar__nav[data-open="true"] .topbar__link {
    opacity: 1;
    transform: translateY(0);
  }
  .topbar__nav .topbar__link--active {
    color: var(--text-loud);
    box-shadow: inset 2px 0 0 var(--signal-500);
    padding-left: var(--space-3);
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--paper-200) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
}
.chip__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background-color: var(--ink-900);
  background-image: linear-gradient(160deg, var(--ink-700), var(--ink-950));
  color: var(--paper-50);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-micro);
}
.chip__meta { display: flex; flex-direction: column; line-height: 1.2; }
.chip__pseudo { font-size: var(--size-small); font-weight: 600; color: var(--text-loud); }
.chip__sub { font-size: var(--size-micro); color: var(--text-faint); }

/* ---- Page headers -------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-quiet);
  text-decoration: none;
  font-size: var(--size-small);
  margin-bottom: var(--space-3);
  transition: color var(--dur-move) var(--ease-settle);
}
.back-link:hover { color: var(--text-loud); }

/* ---- Wallet ----------------------------------------------------------------
 * Never silent about who is signing: a real connected wallet (verified)
 * or the local demo key (signal). See wallet.js::isDemoWallet(). */

.wallet-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-300) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  font-size: var(--size-small);
  line-height: var(--leading-body);
  color: var(--text-plain);
}
.wallet-status:empty { display: none; }
.wallet-status svg { flex: none; margin-top: 2px; color: var(--verified-600); }
.wallet-status--demo svg { color: var(--signal-700); }
.wallet-status strong { color: var(--text-loud); font-weight: 600; }

/* ---- Bytes of the built instruction (create.html) -------------------------- */

.byte-dump {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-200) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--size-small);
  line-height: var(--leading-body);
  color: var(--text-plain);
  word-break: break-all;
  white-space: pre-wrap;
}
.byte-dump .byte-dump__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--space-2);
}
.byte-dump .byte-dump__label:first-child { margin-top: 0; }

/* ---- Mission grid & card -------------------------------------------------- */

.grid-missions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.mission-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.mission-card__body {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.mission-card__dial-col {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mission-card__dial-figures {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}
.mission-card__dial-figures .figure { font-size: var(--size-lead); line-height: 1.05; }
/* The ring's hole, not the column: a label sized to the box runs under the
 * stroke, which is what the first screenshot pass showed on every card. */
.mission-card__dial-figures > span:last-child {
  max-width: 62%;
  line-height: 1.15;
}

.mission-card__stats {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
}
.stat__label svg { color: var(--text-faint); flex: none; }
.stat__value { font-size: var(--size-body); color: var(--text-plain); font-weight: 500; }

.mission-card__footer {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.reach-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--size-micro);
  color: var(--text-faint);
}

.lock-note {
  border-radius: var(--radius-control);
  padding: var(--space-3);
  margin-top: var(--space-3);
  background-color: color-mix(in oklch, var(--rust-600) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--rust-500) 26%, transparent);
}
.lock-note .figure { color: var(--rust-600); font-size: var(--size-lead); }
.lock-note p { font-size: var(--size-small); color: var(--text-quiet); margin-top: 2px; }

/* ---- Buttons full-width helper ------------------------------------------- */

.action--block { width: 100%; }
.action[disabled] { pointer-events: none; }

/* ---- Mission detail ------------------------------------------------------- */

.detail-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; }
}

.detail-dial-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-4) 0;
}

.legend { display: flex; flex-direction: column; gap: var(--space-2); }
.legend__item { display: flex; align-items: center; gap: 8px; font-size: var(--size-small); color: var(--text-quiet); }
.legend__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); flex: none; }
.legend__dot--slots { background-color: var(--signal-500); }
.legend__dot--time { background-color: var(--verified-600); }

.kv-list { display: flex; flex-direction: column; gap: var(--space-3); }
.kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--edge-soft);
}
.kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-row__label { font-size: var(--size-small); color: var(--text-quiet); }
.kv-row__value { font-size: var(--size-body); color: var(--text-loud); font-weight: 500; }

/* The floor component that bites (create.html) -- signal, not grey:
 * it's the one figure of the three that decides whether publication blocks. */
.kv-row--binding .kv-row__label,
.kv-row--binding .kv-row__value { color: var(--signal-700); font-weight: 700; }

.disclosure-block {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-300) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  font-size: var(--size-small);
  color: var(--text-plain);
  font-style: italic;
  line-height: var(--leading-body);
}

.eligibility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.cost-figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}
.cost-figure .figure { font-size: var(--size-title); }

/* ---- Submit screen -------------------------------------------------------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px dashed var(--edge-firm);
  background-color: color-mix(in oklch, var(--paper-200) 55%, transparent);
  color: var(--text-quiet);
  cursor: pointer;
  transition: border-color var(--dur-move) var(--ease-settle),
    background-color var(--dur-move) var(--ease-settle);
}
.dropzone:hover { border-color: var(--edge-signal); }
.dropzone__filename { color: var(--text-loud); font-weight: 500; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.verify-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.verify-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-200) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  opacity: 0.45;
  transition: opacity var(--dur-move) var(--ease-settle),
    box-shadow var(--dur-move) var(--ease-settle);
}
.verify-step--active {
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--edge-signal);
}
.verify-step--done { opacity: 1; }
.verify-step__icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--paper-300) 70%, transparent);
  color: var(--text-quiet);
}
.verify-step--active .verify-step__icon { color: var(--signal-700); }
.verify-step--done .verify-step__icon { color: var(--verified-600); }
.verify-step__title { font-size: var(--size-body); font-weight: 600; color: var(--text-loud); }
.verify-step__detail { font-size: var(--size-small); color: var(--text-quiet); margin-top: 2px; }
.verify-step__sig { font-family: var(--font-body); font-variant-numeric: tabular-nums; color: var(--text-plain); word-break: break-all; }

.spin {
  animation: cm-spin 1.1s var(--ease-settle) infinite;
  transform-origin: 50% 50%;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ---- Create form ----------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--size-small);
  font-weight: 500;
  color: var(--text-plain);
}
.field__hint { font-size: var(--size-micro); color: var(--text-faint); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--text-loud);
  background-color: color-mix(in oklch, var(--paper-200) 78%, transparent);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-control);
  padding: 11px var(--space-3);
  transition: border-color var(--dur-move) var(--ease-settle),
    box-shadow var(--dur-move) var(--ease-settle);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--edge-signal);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--signal-500) 22%, transparent);
}
.field textarea { resize: vertical; min-height: 84px; line-height: var(--leading-body); }

.warning-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.warning {
  display: none;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  font-size: var(--size-small);
  line-height: var(--leading-body);
}
.warning--visible { display: flex; }
.warning__icon { flex: none; margin-top: 2px; }
/* L or est passe du fond au trait : un bandeau dore plein crie, une barre
 * doree sur du papier designe. */
.warning--info {
  border-left: 3px solid var(--signal-600);
  background-color: color-mix(in oklch, var(--paper-200) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--signal-500) 28%, transparent);
  color: var(--text-plain);
}
.warning--info .warning__icon { color: var(--signal-700); }
.warning--block {
  background-color: color-mix(in oklch, var(--rust-600) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--rust-500) 32%, transparent);
  color: var(--text-plain);
}
.warning--block .warning__icon { color: var(--rust-600); }

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ---- Review queue ------------------------------------------------------------ */

.review-list { display: flex; flex-direction: column; gap: var(--space-3); }

.review-row {
  display: grid;
  grid-template-columns: 88px 1.4fr 1.2fr auto;
  gap: var(--space-4);
  align-items: center;
}
@media (max-width: 900px) {
  .review-row { grid-template-columns: 1fr; }
}

.thumb {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-300) 65%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

.review-meta { display: flex; flex-direction: column; gap: 4px; }
.review-meta__name { font-weight: 600; color: var(--text-loud); }
.review-meta__line { font-size: var(--size-small); color: var(--text-quiet); }

.review-proof { display: flex; flex-direction: column; gap: 4px; font-size: var(--size-small); color: var(--text-quiet); }
.review-proof__sig { font-variant-numeric: tabular-nums; color: var(--text-plain); }

.auto-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.review-actions { display: flex; flex-direction: column; gap: var(--space-2); min-width: 190px; }
.review-actions__row { display: flex; gap: var(--space-2); }
.review-actions select {
  flex: 1;
  /* Without this the select claims the width of its longest option ("Token
   * shown differs from the mission"), which on a phone pushed the reject
   * button 18px off the right edge of the page. Measured 2026-09-24. */
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--size-small);
  color: var(--text-plain);
  background-color: color-mix(in oklch, var(--paper-200) 78%, transparent);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-control);
  padding: 8px 10px;
}

.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--text-quiet);
}

/* ---- Followers page ------------------------------------------------------------ */

.hero {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border-radius: var(--radius-sheet);
}
.hero h1 { margin-bottom: var(--space-3); }
.hero p { max-width: 56ch; margin: 0 auto; color: var(--text-quiet); font-size: var(--size-lead); }

.honest-block {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background-color: color-mix(in oklch, var(--paper-200) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  font-size: var(--size-small);
  color: var(--text-quiet);
  line-height: var(--leading-body);
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.promise-card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in oklch, var(--paper-200) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  color: var(--signal-700);
  margin-bottom: var(--space-3);
}
.promise-card h3 { margin-bottom: 6px; }
.promise-card p { font-size: var(--size-small); color: var(--text-quiet); }

.waitlist-form {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.waitlist-form .field { flex: 1; min-width: 220px; }

.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.leaderboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-200) 50%, transparent);
}
.leaderboard-rank {
  font-family: var(--font-display);
  color: var(--text-faint);
  width: 2ch;
}

.confirm-panel { text-align: center; padding: var(--space-5); }
.confirm-panel .icon-ring {
  width: 52px; height: 52px; margin: 0 auto var(--space-3);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background-color: color-mix(in oklch, var(--verified-600) 18%, transparent);
  color: var(--verified-600);
}

.section-gap { margin-top: var(--space-6); }

/* ---- Mark variants not covered by base.css ------------------------------ */
/* base.css defines .mark--open/--verified/--refused. A mission that is full
 * or has ended is neither of those, so it needs a quiet, neutral read. */
.mark--closed,
.mark--full {
  color: var(--text-quiet);
  background-color: color-mix(in oklch, var(--paper-300) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-firm);
}

/* ---- Follow missions ------------------------------------------------------ */
/* Same card language as a callout mission (mission-card__head, .stat, .mark),
 * minus the dial: a follow mission has no achat window to draw, just a price,
 * a slot count and a hold delay. */

.mission-card__stats--follow {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 560px) {
  .mission-card__stats--follow { grid-template-columns: 1fr; }
}

/* The "already following" and the post-claim confirmation reuse .lock-note's
 * shape (soft block on --radius-control, a figure line, a detail line) but
 * need their own colour: one is a refusal, the other is a reservation going well. */
.lock-note--success {
  background-color: color-mix(in oklch, var(--verified-600) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--verified-500) 26%, transparent);
}
.lock-note--success .figure { color: var(--verified-600); }

/* ---- Site chrome: footer, on every page ---------------------------------- */

.site-footer {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-top: 1px solid var(--edge-soft);
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-5);
}
/* Two columns on a phone rather than one. The sitemap grew to three groups
 * when the reading pages were split out, and stacking them added the height of
 * a full screen to the bottom of every page: the split would have bought
 * nothing. */
@media (max-width: 720px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .site-footer__brand { grid-column: 1 / -1; }
}
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__tag { font-size: var(--size-small); max-width: 32ch; }
.site-footer__group { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__group a {
  color: var(--text-quiet);
  text-decoration: none;
  font-size: var(--size-small);
  transition: color var(--dur-move) var(--ease-settle);
}
.site-footer__group a:hover { color: var(--text-loud); }
.site-footer__disclaimer {
  margin-top: var(--space-5);
  font-size: var(--size-micro);
  color: var(--text-faint);
  letter-spacing: var(--tracking-micro);
}

/* ---- Landing: the pool dial at page scale -------------------------------- */

.pool-hero {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  overflow: hidden;
  position: relative;
}
.pool-hero__dial-wrap { display: flex; justify-content: center; margin: var(--space-4) 0 var(--space-3); }
.pool-hero__dial-wrap svg { width: 236px; height: 236px; }
.pool-hero__figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 6vw, 52px);
  letter-spacing: var(--tracking-display);
  color: var(--text-loud);
}
.pool-hero__figure-label {
  display: block;
  margin-top: 2px;
  font-size: var(--size-small);
  color: var(--text-quiet);
}
.pool-hero__sub {
  color: var(--text-quiet);
  font-size: var(--size-lead);
  max-width: 60ch;
  margin: var(--space-3) auto 0;
}
.pool-hero__loop-line {
  margin: var(--space-2) auto 0;
  color: var(--text-faint);
  font-size: var(--size-small);
  max-width: 58ch;
}

/* ---- Landing: the two audience paths ------------------------------------- */

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 860px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card { display: flex; flex-direction: column; gap: var(--space-2); }
.audience-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}
.audience-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.audience-card__link {
  font-size: var(--size-small);
  color: var(--text-quiet);
  text-decoration: none;
  transition: color var(--dur-move) var(--ease-settle);
}
.audience-card__link:hover { color: var(--text-loud); }

/* ---- how-it-works --------------------------------------------------------- */

.how-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 860px) { .how-columns { grid-template-columns: 1fr; } }

.step-list { display: flex; flex-direction: column; gap: var(--space-3); }
.step { display: flex; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-200) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
}
.step__index {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--ink-900);
  background-image: linear-gradient(160deg, var(--ink-700), var(--ink-950));
  color: var(--paper-50);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-small);
}
.step__body h3 { font-size: var(--size-body); margin-bottom: 2px; }
.step__body p { font-size: var(--size-small); color: var(--text-quiet); }

.honesty-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background-color: color-mix(in oklch, var(--paper-200) 75%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
}
.honesty-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.honesty-row { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--size-small); color: var(--text-plain); }
.honesty-row svg { flex: none; margin-top: 3px; color: var(--verified-600); }
.honesty-row--limit svg { color: var(--signal-700); }
.honesty-row--limit { font-weight: 600; }

.gate-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.gate { padding: var(--space-3);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-200) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
}
.gate__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-small);
  color: var(--signal-700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
}
.gate p { font-size: var(--size-small); color: var(--text-quiet); margin-top: 4px; }

/* ---- token.html: the loop, drawn ------------------------------------------ */

.token-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.loop-step {
  flex: 1;
  min-width: 150px;
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-200) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  text-align: center;
}
.loop-step--signal { box-shadow: inset 0 0 0 1px var(--edge-signal); }
.loop-step__figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--signal-700);
  font-size: var(--size-lead);
}
.loop-step__label {
  font-size: var(--size-micro);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
}
.loop-arrow { flex: none; display: inline-flex; color: var(--text-faint); }
.loop-arrow--flip { transform: scaleX(-1); }
@media (max-width: 720px) { .loop-arrow--flip { transform: rotate(90deg); } }

.permissionless-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  margin-top: var(--space-3);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--verified-600) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--verified-500) 26%, transparent);
  font-size: var(--size-small);
  color: var(--text-plain);
}
.permissionless-note svg { flex: none; margin-top: 2px; color: var(--verified-600); }

/* ---- terms.html ------------------------------------------------------------ */

.legal-block {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background-color: color-mix(in oklch, var(--paper-200) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  margin-top: var(--space-4);
}
.legal-block h2 { margin-bottom: var(--space-2); }
.legal-block p { font-size: var(--size-small); color: var(--text-plain); line-height: var(--leading-body); }
.legal-block p + p { margin-top: var(--space-3); }

.not-promise {
  border-left: 3px solid var(--rust-500);
  padding-left: var(--space-3);
  margin-top: var(--space-3);
}

/* ---- 404.html --------------------------------------------------------------- */

.error-panel { text-align: center; padding: var(--space-6) var(--space-4); }
.error-panel .figure { font-size: var(--size-display); }
.error-panel p.quiet { max-width: 46ch; margin: var(--space-2) auto var(--space-4); }

/* ---- My callouts ---------------------------------------------------------- */

/* The signed message is shown, not summarised: a gate whose whole argument is
 * "you can read what you sign" has to actually print it. */
.proof-line {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background-color: color-mix(in oklch, var(--paper-200) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  font-family: var(--font-body);
  font-size: var(--size-small);
  color: var(--text-plain);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.claim-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.claim-list { display: flex; flex-direction: column; gap: var(--space-3); }

.claim-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* The verdict is the line the caller came for, so it is the only one carrying
 * a fill: the state has to be readable before any of the dates are. */
.claim-row__verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3);
  border-radius: var(--radius-control);
  font-size: var(--size-small);
  color: var(--text-plain);
  background-color: color-mix(in oklch, var(--paper-200) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
}
.claim-row__verdict--paid {
  color: var(--verified-600);
  background-color: color-mix(in oklch, var(--verified-600) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--verified-600) 32%, transparent);
}
.claim-row__verdict--refused {
  color: var(--rust-600);
  background-color: color-mix(in oklch, var(--rust-600) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--rust-500) 26%, transparent);
}
.claim-row__verdict--waiting { color: var(--signal-700); }

.claim-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.claim-step {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: var(--space-2);
  /* The rail is the progress bar: a step that has happened lights its own
   * segment, so four segments read as a timeline without drawing one. */
  border-top: 2px solid var(--edge-soft);
}
.claim-step--done { border-top-color: var(--signal-600); }
.claim-step__label {
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
}
.claim-step__value { font-size: var(--size-small); color: var(--text-plain); }
.claim-step:not(.claim-step--done) .claim-step__value { color: var(--text-faint); }

.claim-row__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* A hold whose clock has run out is not yet a verdict; it stops pulling the
 * eye, but it does not turn green on its own. */
.claim-row--hold-elapsed .claim-row__verdict--waiting { color: var(--text-quiet); }

@media (max-width: 720px) {
  .claim-steps { grid-template-columns: repeat(2, 1fr); }
  .claim-row__foot { flex-direction: column; align-items: stretch; }
  .claim-row__foot .action { width: 100%; text-align: center; }
}

/* ---- Reading pages: one subject each ------------------------------------- */

/* Narrower than the app screens. A page that is only prose reads badly at the
 * width of a mission wall, and the split into separate pages was the point. */
.wrap--reading { max-width: 860px; }

.crumb {
  font-size: var(--size-small);
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}
.crumb a {
  color: var(--text-quiet);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--edge-soft);
  transition: color var(--dur-tap) var(--ease-settle),
    box-shadow var(--dur-tap) var(--ease-settle);
}
.crumb a:hover {
  color: var(--text-loud);
  box-shadow: inset 0 -1px 0 var(--signal-500);
}

.lede {
  max-width: 62ch;
  margin-top: -6px;
  margin-bottom: var(--space-5);
  font-size: var(--size-lead);
  line-height: var(--leading-body);
  color: var(--text-quiet);
}

.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- The fork: pick a side ----------------------------------------------- */

.fork {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}
.fork__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  background-color: color-mix(in oklch, var(--paper-200) 78%, transparent);
  background-image: linear-gradient(168deg,
    color-mix(in oklch, var(--paper-50) 90%, transparent), transparent 64%);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  /* The card lifts on hover and settles rather than snapping: the whole card
   * is the target, so it has to behave like one object and not like a
   * rectangle that happens to contain a link. */
  transition: transform var(--dur-move) var(--ease-spring),
    box-shadow var(--dur-move) var(--ease-settle);
}
.fork__card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--edge-signal),
    0 26px 44px -30px oklch(0 0 0 / 0.85);
}
.fork__card h2 { margin: 0; }
.fork__go {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--signal-700);
}
.fork__go::after {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.5em;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.08em);
  transition: transform var(--dur-move) var(--ease-spring);
}
.fork__card:hover .fork__go::after {
  transform: rotate(45deg) translate(0.18em, -0.26em);
}

/* ---- Where to go next ----------------------------------------------------- */

/* Every reading page ends somewhere on purpose. Without this the split into
 * separate pages just becomes a set of dead ends, which is worse than the one
 * long scroll it replaced. */
.next-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.next-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4);
  border-radius: var(--radius-control);
  text-decoration: none;
  color: inherit;
  background-color: color-mix(in oklch, var(--paper-200) 46%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  transition: background-color var(--dur-move) var(--ease-settle),
    box-shadow var(--dur-move) var(--ease-settle);
}
.next-link:hover {
  background-color: color-mix(in oklch, var(--paper-200) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-firm);
}
.next-link__label {
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--signal-700);
}
.next-link__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-lead);
  color: var(--text-loud);
}
.next-link__sub { font-size: var(--size-small); color: var(--text-quiet); }

/* ---- A form in steps ------------------------------------------------------ */

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.step-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--paper-200) 52%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  color: var(--text-quiet);
  font-family: var(--font-body);
  font-size: var(--size-small);
  cursor: pointer;
  transition: color var(--dur-move) var(--ease-settle),
    background-color var(--dur-move) var(--ease-settle),
    box-shadow var(--dur-move) var(--ease-settle);
}
.step-chip__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--paper-300) 80%, transparent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-micro);
  color: var(--text-quiet);
  transition: background-color var(--dur-move) var(--ease-settle),
    color var(--dur-move) var(--ease-settle);
}
.step-chip:hover { color: var(--text-loud); }
.step-chip--done .step-chip__n {
  background-color: var(--verified-600);
  color: var(--paper-50);
}
.step-chip[aria-current="step"] {
  color: var(--text-loud);
  background-color: color-mix(in oklch, var(--paper-300) 74%, transparent);
  box-shadow: inset 0 0 0 1px var(--edge-signal);
}
.step-chip[aria-current="step"] .step-chip__n {
  background-color: var(--ink-900);
  color: var(--paper-50);
}

.step-pane {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0; /* a fieldset refuses to shrink below its content without this */
}
.step-pane__title {
  padding: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-lead);
  color: var(--text-loud);
}
.step-pane__sub {
  margin: 4px 0 var(--space-4);
  font-size: var(--size-small);
  color: var(--text-quiet);
}

.step-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--edge-soft);
}
.step-nav__count {
  margin-left: auto;
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The numbers that react to the fields are not part of any step: they are what
 * the form is for, and burying them under step four is how a warning goes
 * unread until the publish button refuses. */
.live-summary { margin-top: var(--space-5); }

/* The big figure is a number or it is nothing. A placeholder glyph at that
 * size reads as a stray mark rather than as "not computed yet", and the line
 * underneath already says what the figure will be. */
.cost-figure .figure[data-empty="true"] { display: none; }

@media (max-width: 560px) {
  .step-chip__label { display: none; }
  .step-chip { padding: 7px; }
  .step-nav { flex-wrap: wrap; }
  .step-nav__count { width: 100%; margin-left: 0; order: -1; }
}


/* A heading inside a panel is followed immediately by its paragraph on the
 * reading pages. Without this they sit on top of each other. */
.panel h2 + p,
.panel h2 + .quiet { margin-top: var(--space-3); }

/* ---- The landing: a statement, not a stack of cards ----------------------
 * Nothing on this page is in a box. Things are separated by a rule, by their
 * position on the grid, and by air. The one drawn object is the dial, and it
 * sits in the margin rather than in the middle. */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) 0 var(--space-5);
}
.masthead__say { min-width: 0; }
/* The mono is wide. Two lines is the target for this headline, so the measure
 * is set on the heading alone and not on the column that holds the buttons. */
.masthead h1 { max-width: 19ch; }
.masthead .lede {
  max-width: 46ch;
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--size-lead);
  color: var(--text-quiet);
}
/* The mark hangs past the reading column on the right. It is the only element
 * on the page allowed to break the grid, which is what makes it read as a
 * mark rather than as another block of content. */
.masthead__mark {
  justify-self: end;
  margin-right: calc(var(--space-5) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
}
.masthead__mark svg { width: 208px; height: 208px; }

/* ---- The ledger --------------------------------------------------------- */

.statement { padding: var(--space-5) 0 var(--space-6); }
.statement__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-small);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
}
/* The headline figure is the only thing on this page set larger than the h1,
 * because it is the only thing on this page that changes by itself. */
.statement__figure {
  display: block;
  margin: var(--space-3) 0 var(--space-5);
  font-size: clamp(26px, 5.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.statement__note {
  margin-top: var(--space-4);
  max-width: 62ch;
  font-size: var(--size-small);
}

.ledger { margin: 0; }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
  /* One rule per row, drawn under it, and nothing above: a table with a
   * hairline on both sides of every row is the laziest layout there is. */
  border-bottom: 1px solid var(--edge-soft);
}
.ledger__row:first-child { border-top: 1px solid var(--edge-firm); }
.ledger__row dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-small);
  color: var(--text-quiet);
}
.ledger__row dt svg { flex: none; color: var(--text-faint); }
.ledger__row dd {
  margin: 0;
  font-size: var(--size-body);
  text-align: right;
}
.ledger--tight .ledger__row { padding: 10px 0; }

/* ---- The two sides, deliberately unequal -------------------------------- */

.sides {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-6);
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--edge-firm);
}
.sides__major, .sides__minor { min-width: 0; }
/* The divider is a rule between the columns, not a border around each. */
.sides__minor {
  padding-left: var(--space-6);
  border-left: 1px solid var(--edge-soft);
}
.sides h2 { margin-bottom: var(--space-3); }
.sides p { max-width: 48ch; margin-bottom: var(--space-4); }

/* ---- The closing line --------------------------------------------------- */

.closer {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--edge-firm);
}
.closer p {
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 3.2vw, 26px);
  line-height: 1.32;
  letter-spacing: -0.03em;
  color: var(--text-loud);
}

/* ---- The forward link --------------------------------------------------
 * The site's tertiary action. Not a third button: an underline that grows
 * from the left, so it reads as reading rather than as clicking. */
.link-next {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--size-small);
  font-weight: 500;
  color: var(--signal-700);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-move) var(--ease-settle);
}
.link-next:hover { background-size: 100% 1px; }
.link-next::after {
  content: "";
  display: inline-block;
  width: 0.44em;
  height: 0.44em;
  margin-left: 0.55em;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.06em);
  transition: transform var(--dur-move) var(--ease-spring);
}
.link-next:hover::after { transform: rotate(45deg) translate(0.2em, -0.26em); }

@media (max-width: 860px) {
  .masthead {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-top: var(--space-5);
  }
  .masthead__say { max-width: none; }
  .masthead h1 { max-width: none; }
  /* On a phone the mark stops hanging and sits under the words, smaller:
   * a 208px ring above the fold would push the two actions off the screen. */
  .masthead__mark {
    order: -1;
    justify-self: start;
    margin-right: 0;
    min-height: 0;
  }
  .masthead__mark svg { width: 116px; height: 116px; }

  .sides { grid-template-columns: 1fr; gap: var(--space-5); }
  .sides__minor {
    padding-left: 0;
    padding-top: var(--space-5);
    border-left: 0;
    border-top: 1px solid var(--edge-soft);
  }
}

/* ---- Le releve reel -----------------------------------------------------
 * Douze callouts lus sur le fil public, avec l image du jeton et la mise
 * reelle. C est la seule chose sur ce site qui ne soit pas une demonstration,
 * et c est aussi la seule qu une maquette ne puisse pas fabriquer. */

.sample {
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--edge-firm);
}
.sample__say {
  max-width: 58ch;
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--size-lead);
  line-height: var(--leading-body);
  color: var(--text-quiet);
}
.sample__say .figure { font-size: inherit; }

.sample__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 620px;
}
.sample__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--edge-soft);
}
.sample__row:first-child { border-top: 1px solid var(--edge-firm); }
/* L image du jeton est carree et coupee court : elle identifie, elle ne
 * decore pas. Un rayon genereux la ferait passer pour un avatar. */
.sample__coin {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control);
  object-fit: cover;
  background-color: var(--paper-300);
}
.sample__who { display: flex; flex-direction: column; line-height: 1.32; min-width: 0; }
.sample__who b {
  font-family: var(--font-display);
  font-size: var(--size-small);
  color: var(--text-loud);
}
.sample__who span { font-size: var(--size-micro); }
.sample__stake { font-size: var(--size-body); }

/* Ce qui est sous le plancher n a ete vu que par les abonnes de la personne.
 * La ligne le dit, et les lignes du dessous se retirent sans disparaitre. */
.sample__row--unseen { opacity: 0.58; }
.sample__row--unseen .sample__coin { filter: saturate(0.35); }

.sample__floor {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  font-family: var(--font-display);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--signal-700);
  white-space: nowrap;
}
.sample__floor::after {
  content: "";
  flex: 1;
  height: 2px;
  background-image: linear-gradient(90deg, var(--signal-600), transparent);
}

.sample__note {
  margin-top: var(--space-4);
  max-width: 60ch;
  font-size: var(--size-small);
}

/* L image du jeton sur une carte de mission. Carree et coupee court comme sur
 * le releve : elle identifie le jeton, elle ne fait pas joli. */
.mission-card__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.token-face {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-control);
  object-fit: cover;
  background-color: var(--paper-300);
  box-shadow: inset 0 0 0 1px var(--edge-soft);
}

/* ---- La carte du tableau, refaite sur la porte ---------------------------
 * L ordre des questions devant une mission est fixe : est-ce que j ai le
 * droit, combien ca paie, ce que ca me coute et combien de temps, reste-t-il
 * de la place. La carte suit cet ordre, et le premier bloc est le seul qui
 * puisse rendre tous les autres sans objet. */

.mission { display: flex; flex-direction: column; }

.mission__id {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}
.mission__names { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mission__ticker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-body);
  color: var(--text-loud);
}
.mission__project { font-size: var(--size-micro); color: var(--text-quiet); }

.threshold { padding: var(--space-3) 0 var(--space-4); border-top: 1px solid var(--edge-firm); }
.threshold__label {
  font-family: var(--font-display);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
}
.threshold__figure {
  display: block;
  margin-top: 2px;
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(25px, 3.6vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-loud);
}
.threshold__unit {
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-quiet);
}
/* Un verdict, pas une pastille de statut : une phrase courte qui dit ou en est
 * CETTE personne par rapport a ce seuil. */
.threshold__verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--space-3);
  font-size: var(--size-small);
  font-weight: 500;
}
.threshold__verdict--clear { color: var(--verified-600); }
.threshold__verdict--short { color: var(--rust-600); }
.threshold__verdict svg { flex: none; }

.terms { margin: 0; }
.terms__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--edge-soft);
}
.terms__row:first-child { border-top: 1px solid var(--edge-soft); }
.terms__row dt { font-size: var(--size-small); color: var(--text-quiet); }
.terms__row dd {
  margin: 0;
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--size-small);
  letter-spacing: -0.02em;
  color: var(--text-loud);
  text-align: right;
}
.terms__row dd small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-micro);
  color: var(--text-faint);
  letter-spacing: 0;
}

/* Les places et le temps tiennent sur le meme cadran : ils se vident ensemble
 * et une mission pleine ne ressemble pas a une mission finie. */
.mission__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.mission__left .dial { width: 46px; height: 46px; flex: none; }
.mission__left-say { display: flex; flex-direction: column; line-height: 1.3; }
.mission__left-say b {
  font-family: var(--font-figure);
  font-variant-numeric: tabular-nums;
  font-size: var(--size-small);
  color: var(--text-loud);
}
.mission__left-say span { font-size: var(--size-micro); color: var(--text-quiet); }

.mission__foot { margin-top: auto; padding-top: var(--space-4); }
.mission__foot .action { width: 100%; }

/* Ce que la chaine peut prouver pour cette mission, dit avant de reserver. */
.vouch {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--size-micro);
  color: var(--text-faint);
  text-align: center;
  line-height: 1.45;
}

/* La connexion se propose, elle ne se prend pas : le bouton est dans le
 * bandeau, et l extension ne s ouvre que sur ce clic. */
.wallet-status__connect {
  min-height: 36px;
  margin-left: auto;
  padding: 0 var(--space-3);
  flex: none;
}

/* ---- L apercu du tableau, sur l accueil ---------------------------------
 * Trois missions telles qu elles sont ailleurs. Pas une illustration du
 * produit : le produit, avant toute explication. */

.peek { padding: var(--space-5) 0 var(--space-6); border-top: 1px solid var(--edge-firm); }
.peek__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.peek__head .link-next { margin-top: 0; }

.peek__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-3);
}
.peek__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
}
.peek__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.peek__pays { display: flex; flex-direction: column; line-height: 1.3; }
.peek__pays .figure { font-size: var(--size-title); letter-spacing: -0.03em; }
.peek__pays .quiet { font-size: var(--size-micro); }
/* Le seuil, meme sur une carte reduite : c est lui qui dit si la mission est
 * prenable, et c est la premiere question. */
.peek__gate {
  padding-top: var(--space-3);
  border-top: 1px solid var(--edge-soft);
  font-size: var(--size-small);
  color: var(--rust-600);
}
.peek__gate--clear { color: var(--verified-600); }
.peek__left { margin-top: auto; font-size: var(--size-small); color: var(--text-quiet); }