/* ============================================================
   YerTruth — gate, wallet, timestamp, the toll
   loads after styles.css
   ============================================================ */

:root {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

body.is-gated { overflow: hidden; }
.site[hidden] { display: none; }

/* the site wrapper takes over the column layout body used to own */
.site {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- the gate ---------- */

/* must come first: `display: grid` below is an author rule and would otherwise
   beat the UA's [hidden] rule, leaving an opaque overlay covering the site */
.gate[hidden] { display: none; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 40px);
  background: radial-gradient(90vw 90vh at 50% 40%, var(--bg-lift), var(--bg) 70%);
  animation: gateIn 420ms var(--ease) both;
}
@keyframes gateIn { from { opacity: 0; } }
.gate.is-leaving { animation: gateOut 400ms var(--ease) both; }
@keyframes gateOut { to { opacity: 0; transform: scale(1.02); } }

.gate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background: repeating-linear-gradient(
    180deg, var(--hover) 0 1px, transparent 1px 3px
  );
}

.gate__panel {
  position: relative;
  z-index: 1;
  width: min(820px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 14px;
  background: var(--panel-solid);
  box-shadow: 0 40px 120px -40px var(--shadow-deep), 0 0 80px -30px var(--glow);
  overflow: hidden;
}

.gate__head {
  flex: 0 0 auto;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent);
}
.gate__title {
  margin: 0;
  font: 700 clamp(15px, 2.6vw, 21px)/1.2 var(--mono);
  letter-spacing: .13em;
  color: var(--accent);
  text-shadow: 0 0 24px var(--glow);
}
.gate__sub {
  margin: 8px 0 0;
  font: 500 11.5px/1.4 var(--mono);
  letter-spacing: .1em;
  color: var(--ink-faint);
}

.gate__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 26px 26px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) transparent;
}
.gate__scroll::-webkit-scrollbar { width: 9px; }
.gate__scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.gate__scroll:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }

.gate__nature {
  margin: 0 0 18px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font: 600 11px/1.6 var(--mono);
  letter-spacing: .09em;
  color: var(--accent-ink);
}
.gate__preamble {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
}

.clause { margin: 0 0 22px; }
.clause__title {
  margin: 0 0 7px;
  font: 700 11.5px/1.45 var(--mono);
  letter-spacing: .1em;
  color: var(--ink);
}
.clause__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ink-dim);
}

.gate__status {
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font: 700 12px/1 var(--mono);
  letter-spacing: .18em;
  color: var(--accent);
}

.gate__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 15px 26px;
  border-top: 1px solid var(--line);
  background: var(--well-2);
}
.gate__note {
  flex: 1 1 auto;
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.gate__note.is-done { color: var(--accent); }
.gate__filed {
  flex: 1 1 auto;
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .08em;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.gate__btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 18px;
  font: 700 11.5px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--ink-dim);
  background: var(--hover);
  cursor: pointer;
  transition: all 200ms var(--ease);
}
.gate__btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.gate__btn--ghost:hover { color: var(--ink-dim); }
.gate__btn--go {
  color: var(--on-accent);
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  box-shadow: 0 8px 24px -10px var(--glow);
}
.gate__btn--go:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.gate__btn:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.gate__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.gate__denied {
  padding: 60px 30px 10px;
  text-align: center;
  font: 700 clamp(20px, 5vw, 34px)/1 var(--mono);
  letter-spacing: .16em;
  color: var(--alarm);
  text-shadow: 0 0 30px var(--alarm-glow);
}
.gate__deniedSub {
  padding: 0 30px 60px;
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* ---------- wallet chip ---------- */

/* ---------- back to the list ----------
   A thread is one of many now, so there has to be a way out of it. Pinned
   top-left; the wallet chip sits to its right rather than under it. */
.home {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 18px;
  z-index: 41;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .16em;
  color: var(--ink-faint);
  text-decoration: none;
  transition: all 220ms var(--ease);
}
.home:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 24px -10px var(--glow);
}
.home:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home__arrow {
  font-size: 12px;
  line-height: 1;
  transition: transform 220ms var(--ease);
}
.home:hover .home__arrow { transform: translateX(-2px); }

/* ---------- the right-hand controls ----------

   One group, laid out by flexbox. They used to be three separately fixed
   elements whose spacing was a guess at how wide the neighbour was — and the
   wallet changes width the moment somebody connects, because an address is
   longer than the word CONNECT. Anything anchored to its edge moved when they
   connected.

   Each child keeps its own look and gives up its own position. new.html still
   has a lone .wallet with no group around it, so the fixed positioning stays
   on the class and is only overridden in here. */
.topright {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  z-index: 41;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Named rather than `.topright > *`, and that is the whole point: .wallet and
   .sayall are declared further down this same file with position:fixed, and a
   single class beats nothing — an equal-specificity rule that comes first
   loses. So the wallet stayed pinned at left:142px inside a group that had
   already moved to the right. */
.topright > .wallet,
.topright > .sayall,
.topright > .pills {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  margin: 0;
}

/* The door to the compact view. Sits in the group above rather than
   beside the wallet, because the wallet's width changes the moment somebody
   connects — an address is wider than the word CONNECT, and anything anchored
   to its right edge would move when they did. */
.sayall {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 86px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  /* Filled, not outlined. It was a ghost pill among three other ghost pills
     and read as chrome — but it is the only control on the page that opens
     somewhere else, so it has to look like the thing you can do rather than
     the things you can adjust. */
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .13em;
  cursor: pointer;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: all 220ms var(--ease);
}
.sayall::before {
  /* three lines: the list this opens, in the shape of a list */
  content: "≡";
  font-size: 13px;
  line-height: 1;
  opacity: .8;
}
.sayall:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent);
}
.sayall:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wallet {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 142px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all 220ms var(--ease);
}
.wallet:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.wallet__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: all 260ms var(--ease);
}
.wallet.is-on { color: var(--accent-ink); }
.wallet.is-on .wallet__dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.wallet:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- bottom timestamp ---------- */

.stamp {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 max(14px, env(safe-area-inset-bottom));
  padding: 0 16px;
}
.stamp__time {
  font: 600 12px/1 var(--mono);
  letter-spacing: .13em;
  color: var(--accent);
  text-shadow: 0 0 18px var(--glow);
}
/* secondary zone — same instant, dimmed, with a hairline divider */
.stamp__alt {
  position: relative;
  padding-left: 15px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .11em;
  color: var(--ink-faint);
}
.stamp__alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 11px;
  background: var(--line);
}
.stamp__alt[hidden] { display: none; }

.stamp__rel {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stamp__terms {
  border: 0;
  background: transparent;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--ink-faint);
  opacity: .5;
  cursor: pointer;
  padding: 4px 6px;
  transition: opacity 200ms, color 200ms;
}
.stamp__terms:hover { opacity: 1; color: var(--accent); }
.stamp__terms:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ---------- offscreen cards ---------- */

/* far from centre: let the browser skip rendering the subtree entirely.
   Width and height are already fixed, so nothing reflows when it does. */
.card.is-far {
  content-visibility: auto;
  contain-intrinsic-size: var(--card-w) var(--card-h);
  pointer-events: none;
}

/* ---------- stand-in media on a dead embed ---------- */

.embed__media {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  border-radius: 10px;
  margin: 0 0 12px;
  background: var(--letterbox);
  border: 1px solid var(--line-soft);
}
/* the archived still — paints before X's iframe, and stays if it never comes */
.embed__poster {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 14px;
  margin: 10px 2px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
}

/* the post's own words, carried in posts.js since import — line breaks and all */
.embed__text {
  margin: 0 0 12px;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--line);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
  color: var(--ink);
}
.embed__note {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
/* the reason sits under the content, not over it */
.embed__why {
  margin: 0 0 10px;
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* ---------- framed embeds ----------
   YouTube and TikTok hand back an iframe rather than a scripted widget, so
   they only need a box of the right shape. Aspect ratio rather than a fixed
   height, or they letterbox themselves on a narrow card. */

.embed__frame {
  display: block;
  width: 100%;
  margin: 10px 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--letterbox);
}
.embed__frame--wide { aspect-ratio: 16 / 9; }

/* a chart wants height more than width, but not a phone's whole screen */
.embed__frame--chart {
  aspect-ratio: 4 / 5;
  max-height: min(64vh, 620px);
}

/* TikTok is portrait and their embed carries its own chrome below the video,
   so it needs more height than a bare 9:16 would give it */
.embed__frame--tall {
  aspect-ratio: 9 / 16;
  max-height: min(72vh, 740px);
  margin-inline: auto;
  max-width: 340px;
}

/* ---------- tokens ----------
   A Dexscreener link is a project, not a post: its banner (or its icon, if
   that is all it has) and its name. */

.token {
  margin: 10px 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--well);
  overflow: hidden;
}
.token__art {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  background: var(--letterbox);
}
.token__body { padding: 14px 16px 16px; }
.token__name {
  margin: 0 0 10px;
  font: 600 13px/1.5 var(--mono);
  letter-spacing: .04em;
  color: var(--ink);
}
.token__link {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.token__link:hover { text-decoration: underline; }

/* ---------- context embeds ---------- */

.context__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 2px 8px;
  font: 600 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.context__bar::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* attached posts sit visually subordinate to the post they answer */
.embed--context {
  position: relative;
  padding-left: 13px;
  opacity: .88;
}
.embed--context::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
}

/* ---------- the toll ---------- */

.locked {
  margin: 0 2px 18px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--well);
  text-align: center;
}
.locked__why {
  margin: 0 0 13px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}
.btn--ghost {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent-ink);
  box-shadow: none;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .12em;
  padding: 10px 16px;
}
.btn--ghost:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.toll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 4px;
  border-top: 1px solid var(--line-soft);
}
.toll__tokens, .toll__amounts { display: flex; gap: 6px; flex-wrap: wrap; }
.toll__foot { display: flex; align-items: center; gap: 10px; padding-top: 3px; }

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--ink-faint);
  background: var(--hover);
  cursor: pointer;
  transition: all 180ms var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip.is-on {
  color: var(--on-accent);
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  box-shadow: 0 4px 14px -6px var(--glow);
}
.chip--amt { min-width: 52px; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.toll__custom {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--well-2);
  color: var(--ink);
  font: 500 12px/1 var(--mono);
  padding: 10px 11px;
  outline: none;
  -moz-appearance: textfield;
}
.toll__custom::-webkit-outer-spin-button,
.toll__custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.toll__custom:focus { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.toll__custom::placeholder { color: var(--ink-faint); }

.composer .btn {
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .1em;
  padding: 11px 16px;
  white-space: nowrap;
}

.toll__status {
  margin: 0;
  padding: 0 12px 10px;
  min-height: 15px;
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.toll__status.is-busy { color: var(--accent); }
.toll__status.is-ok { color: var(--ok); }
.toll__status.is-err { color: var(--err); }

/* ---------- conviction on a comment ---------- */

.comment__av { font: 700 10px/1 var(--mono); letter-spacing: .04em; }
.comment__who { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; }

.paid {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}
.paid__pips { display: inline-flex; gap: 3px; }
.paid__pips i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line);
}
.paid__pips i.on {
  background: var(--accent);
  box-shadow: 0 0 7px var(--glow);
}
.paid__amt {
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .07em;
  color: var(--accent);
}
.paid__sig {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .09em;
  color: var(--ink-faint);
  text-decoration: none;
}
.paid__sig:hover { color: var(--accent); }

/* ---------- dense rail (many posts) ---------- */

/* labels can't fit once there are dozens of nodes, so the rail becomes a
   pure scrubber — position and progress only */
.rail.is-dense { height: 44px; }
.rail.is-dense .node__date { display: none; }
/* no side padding here — at 122 nodes even 2px each side reserves 500px the
   rail hasn't got, and the dots get crushed rather than spaced */
.rail.is-dense .node {
  padding: 10px 0 0;
  gap: 0;
  flex: 1 1 0;
  min-width: 0;
}
/* on a crowded rail a small bright dot reads; a large dim one is a smudge.
   The 1px border ate most of a 6px dot, so it goes. */
.rail.is-dense .node__dot {
  width: 5px;
  height: 5px;
  border: 0;
  background: var(--dot);
}
.rail.is-dense .node.is-past .node__dot {
  background: color-mix(in srgb, var(--accent) 70%, var(--dot));
}
.rail.is-dense .node.is-active .node__dot { transform: scale(2); }

/* the whole rail is a scrub track, so it must not fight a touch gesture */
.rail { touch-action: none; }
.rail.is-scrubbing { cursor: grabbing; }
.rail:hover { cursor: pointer; }

/* where you'd land if you let go now */
.node.is-preview .node__dot {
  background: var(--accent);
  transform: scale(2);
}

/* the readout that rides along with your finger */
.rail__bubble {
  position: absolute;
  bottom: 100%;
  margin-bottom: 2px;
  transform: translateX(-50%);
  z-index: 6;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-solid);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -12px var(--shadow);
  pointer-events: none;
}
.rail.is-dense .node:hover .node__dot { transform: scale(1.6); background: var(--ink-dim); }

/* ---------- left index: jump to a date or time ---------- */

.index {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 30;
  width: 146px;
  display: flex;
  flex-direction: column;
  padding: max(62px, calc(env(safe-area-inset-top) + 54px)) 0 14px;
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(90deg, var(--panel), var(--panel-soft));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.index__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 10px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.index__total {
  flex: 1 1 auto;
  min-width: 0;
  font: 700 9px/1.5 var(--mono);
  letter-spacing: .13em;
  color: var(--accent);
}

/* collapse / expand every day at once */
.index__all {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 200ms var(--ease);
}
.index__all::before {
  content: "";
  width: 6px;
  height: 6px;
  border-left: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: translateY(-1px) rotate(135deg);
  transition: transform 260ms var(--ease), border-color 200ms var(--ease);
}
.index__all.is-folded::before { transform: translateY(1px) rotate(-45deg); }
.index__all:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.index__all:hover::before { border-color: var(--accent); }
.index__all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* minimize the whole panel */
.index__min {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 200ms var(--ease);
}
.index__min::before {
  content: "";
  width: 6px;
  height: 6px;
  border-left: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: translateX(1px) rotate(45deg);
  transition: transform 260ms var(--ease), border-color 200ms var(--ease);
}
.index__min.is-min::before { transform: translateX(-1px) rotate(-135deg); }
.index__min:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.index__min:hover::before { border-color: var(--accent); }
.index__min:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* minimized state — panel shrinks to a stub, deck reclaims the room */
.index { transition: width 280ms var(--ease); }
.site { transition: padding-left 280ms var(--ease); }
/* desktop only — below 900px the panel is a drawer and has no stub state */
@media (min-width: 900px) {
  .site.is-index-min .index { width: 34px; }
  .site.is-index-min .index__head {
    padding: 0 0 10px;
    justify-content: center;
  }
  .site.is-index-min .index__total,
  .site.is-index-min .index__all,
  .site.is-index-min .index__scroll { display: none; }
  .site.is-index-min { padding-left: 34px; }
}

.index__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 10px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.index__scroll::-webkit-scrollbar { width: 6px; }
.index__scroll::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
}

.idx-day { position: relative; padding-bottom: 13px; }
/* the connecting spine, running through the dots */
.idx-day::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 24px;
  bottom: 15px;
  width: 1px;
  background: var(--line);
}

.idx-day__head {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 8px 2px 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 5px;
  transition: background 180ms var(--ease);
}
.idx-day__head:hover { background: var(--hover); }
.idx-day__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.idx-day__chev {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-left: 1px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform 240ms var(--ease), border-color 200ms var(--ease);
}
.idx-day.is-collapsed .idx-day__chev { transform: rotate(-45deg); }
.idx-day__head:hover .idx-day__chev { border-color: var(--ink); }

.idx-day__date {
  flex: 1 1 auto;
  min-width: 0;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* folded days still say where you are */
.idx-day.is-current .idx-day__date { color: var(--accent); }
.idx-day.is-current .idx-day__chev { border-color: var(--accent); }
.idx-day.is-collapsed.is-current .idx-day__count {
  color: var(--on-accent);
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}

.idx-day.is-collapsed { padding-bottom: 2px; }
.idx-day.is-collapsed::before { display: none; }
.idx-day.is-collapsed .idx-day__posts { display: none; }
.idx-day__count {
  min-width: 15px;
  padding: 2px 4px;
  border-radius: 4px;
  text-align: center;
  font: 700 8.5px/1.3 var(--mono);
  color: var(--ink-faint);
  background: var(--hover-2);
}

.idx-post {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 5px;
  color: var(--ink-faint);
  transition: color 200ms var(--ease), background 180ms var(--ease);
}
.idx-post:hover { background: var(--hover); }
.idx-post__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--dot);
  border: 1px solid var(--line);
  transition: all 260ms var(--ease);
}

.idx-post__times {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.idx-post__row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.idx-post__time {
  font: 600 11px/1.25 var(--mono);
  letter-spacing: .06em;
}
.idx-post__zone {
  font: 500 8px/1.25 var(--mono);
  letter-spacing: .1em;
  opacity: .62;
}
/* the second zone reads as a footnote to the first */
.idx-post__row--alt { opacity: .5; }
.idx-post__row--alt .idx-post__time { font-size: 9.5px; font-weight: 500; }
.idx-post__row--alt .idx-post__zone { font-size: 7.5px; }
.idx-post:hover { color: var(--ink); }
.idx-post:hover .idx-post__dot { border-color: var(--ink-faint); transform: scale(1.2); }
.idx-post.is-past .idx-post__dot { background: color-mix(in srgb, var(--accent) 40%, var(--dot)); border-color: transparent; }
.idx-post.is-active { color: var(--accent); }
.idx-post.is-active .idx-post__time { font-weight: 700; }
.idx-post.is-active .idx-post__dot {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 12px var(--glow);
}
.idx-post:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 5px; }

/* make room for it without breaking the centred deck */
@media (min-width: 900px) {
  .site { padding-left: 146px; }
}
/* ---------- narrow screens: the index becomes a drawer ---------- */

/* opens the drawer — desktop keeps the panel in view, so it isn't needed there */
.burger {
  display: none;
  position: fixed;
  z-index: 42;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  width: 38px;
  height: 34px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color 200ms var(--ease);
}
.burger span {
  width: 15px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink-dim);
  transition: transform 260ms var(--ease), opacity 200ms var(--ease), background 200ms var(--ease);
}
.burger:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.burger:hover span { background: var(--accent); }
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* open: the three bars fold into an X */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* tap anywhere else to close */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 280ms var(--ease);
}
.scrim.is-open { opacity: 1; }

@media (max-width: 899px) {
  .burger { display: flex; }

  /* burger, then home, then the wallet — three chips across the top */
  .home { left: 58px; }
  .site .topright .wallet { left: auto; }
  .wallet { left: 176px; }

  /* off-canvas until opened — never display:none, so it can animate in */
  .index {
    width: 214px;
    transform: translateX(-100%);
    transition: transform 300ms var(--ease);
    box-shadow: 24px 0 60px -30px var(--shadow-deep);
    background: linear-gradient(90deg, var(--panel-solid), var(--panel-solid));
  }
  .site.is-drawer-open .index { transform: none; }

  /* the desktop minimize control has no meaning in a drawer */
  .index__min { display: none; }

  /* closed, it must not swallow swipes meant for the deck behind it */
  .site:not(.is-drawer-open) .index { pointer-events: none; }
}

/* ---------- the label market ---------- */

.labels { margin-top: 22px; }

.labelForm {
  margin: 0 2px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--well);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.labelForm:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
}
.labelForm__text {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 14px/1.4 inherit;
  padding: 13px 14px 4px;
  outline: none;
}
.labelForm__text::placeholder { color: var(--ink-faint); font-weight: 400; }

.labelList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

.label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid transparent;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.label:hover { background: var(--hover); }
.label.is-top {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.label__rank {
  flex: 0 0 auto;
  width: 17px;
  text-align: center;
  font: 700 10px/1 var(--mono);
  color: var(--ink-faint);
}
.label.is-top .label__rank { color: var(--accent); font-size: 12px; }

.label__mid { flex: 1 1 auto; min-width: 0; }
.label__text {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.label__meta { font: 500 10px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink-faint); }

.label__amt {
  flex: 0 0 auto;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .05em;
  color: var(--accent);
  white-space: nowrap;
}

.label__back {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  font: 700 9px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--ink-faint);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: all 180ms var(--ease);
}
.label:hover .label__back,
.label__back:focus-visible { opacity: 1; }
.label__back:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }

/* ---------- the header label + hover panel ---------- */

.card__labelWrap { position: relative; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.card__label.is-unlabeled { color: var(--ink-faint); font-style: italic; }

.labelPop {
  position: absolute;
  top: calc(100% + 9px);
  left: -10px;
  z-index: 6;
  min-width: 232px;
  max-width: 300px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  background: var(--panel-solid);
  box-shadow: 0 22px 50px -20px var(--shadow-deep), 0 0 40px -20px var(--glow);
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.card.is-active .card__labelWrap:hover .labelPop,
.card.is-active .card__labelWrap:focus-within .labelPop,
.card.is-active .card__labelWrap.is-open .labelPop {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.labelPop__head {
  padding: 0 4px 7px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--line-soft);
  font: 700 9px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.labelPop__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.labelPop__row.is-top {
  color: var(--ink);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.labelPop__text { min-width: 0; overflow-wrap: anywhere; }
.labelPop__amt {
  flex: 0 0 auto;
  font: 700 10px/1 var(--mono);
  color: var(--accent);
  white-space: nowrap;
}
.labelPop__more {
  padding: 6px 4px 2px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  /* no room for the wordmark on a phone — the arrow carries it */
  .home { top: max(12px, env(safe-area-inset-top)); left: 58px; padding: 7px 10px; }
  .home__word { display: none; }
  .wallet { top: max(12px, env(safe-area-inset-top)); left: 106px; padding: 7px 11px; }
  .topright .wallet { top: auto; left: auto; }
  .labelPop { min-width: 0; width: calc(100vw - 60px); max-width: 300px; }
  .gate__head, .gate__scroll, .gate__foot { padding-left: 17px; padding-right: 17px; }
  .stamp { gap: 9px; }
  .stamp__time { font-size: 10.5px; letter-spacing: .08em; }
  .stamp__alt { font-size: 9.5px; letter-spacing: .07em; padding-left: 11px; }
}

/* ---------- preview ----------
   Shown while a preview window waits to be handed a draft. It exists so a
   broken handshake looks broken: the alternative was falling through to
   whatever posts.js held, which rendered somebody else's timeline and looked
   like the feature working. */
.waiting {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink-faint);
  font: 600 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  z-index: 60;
}

/* a preview is framed inside the create page, so it has no business
   scrolling the page behind it */
body.is-preview { overflow: hidden; }

/* a token this truth's author named that Jupiter has not verified — shown,
   not hidden, because the vouch is the reason it is on offer */
.chip--vouched { border-style: dashed; }
.chip--vouched.is-on { border-style: solid; }

/* ---------- send or burn ----------
   The choice sits above the tokens because it changes what the money does,
   which matters more than which coin it is. */
.toll__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}
.chip--mode { letter-spacing: .1em; }

/* burning is irreversible, so the chosen state says so in the one way a
   button can — it stops looking like the safe option */
.chip--mode.is-on { font-weight: 700; }

/* what happens to the money, in words, before the button is pressed */
.toll__cost {
  margin: 9px 0 0;
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- what you are about to sign ----------
   Deliberately plain. This is the number a payer checks their wallet against,
   so it should look like a statement rather than a piece of marketing. */

.sure {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.sure.is-in { opacity: 1; }

.sure__panel {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-solid);
  box-shadow: 0 30px 80px -30px var(--shadow-deep);
  transform: translateY(10px);
  transition: transform 240ms var(--ease);
}
.sure.is-in .sure__panel { transform: none; }

.sure__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--ink);
}
.sure__lede {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.sure__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 16px;
  margin: 0 0 16px;
  padding: 14px;
  border-radius: 10px;
  background: var(--well);
}
.sure__rows dt {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sure__rows dd {
  margin: 0;
  text-align: right;
  font: 600 12.5px/1.4 var(--mono);
  color: var(--ink);
  word-break: break-all;
}
.sure__rows dd.is-burn { color: var(--err); }
.sure__rows dd.is-back { color: var(--ok); }
.sure__rows dd.is-addr {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-faint);
}

/* the instruction that makes the panel worth showing at all */
.sure__check {
  margin: 0 0 18px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-faint);
}

.sure__foot { display: flex; gap: 10px; justify-content: flex-end; }

.sure__no,
.sure__yes {
  border-radius: 9px;
  padding: 11px 18px;
  cursor: pointer;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .15em;
}
.sure__no {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-faint);
}
.sure__no:hover { color: var(--ink-dim); }
.sure__yes {
  border: 1px solid var(--accent-deep);
  background: var(--accent);
  color: var(--on-accent);
}
.sure__no:focus-visible,
.sure__yes:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The dropdown on the comment form. Deliberately quiet: it is optional, and
   a control that shouts would read as something you have to fill in. */
.composer__to {
  width: 100%;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
}
.composer__to:focus { outline: none; border-color: var(--accent); }
/* once something is picked it is no longer optional-looking */
.composer__to:valid:not(:has(option[value=""]:checked)) { color: var(--accent); }

/* ---------- who answered a comment ----------

   Under the comment, not in a strip at the top of the card. A reply points at
   one person; anywhere else and the reader has to work out who. */

.answers {
  margin: 8px 0 2px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.answers__head {
  font: 700 8.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.answers__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 4px 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.answers__row:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }

.answers__tag {
  font: 700 9px/1.4 var(--mono);
  letter-spacing: .07em;
  color: var(--accent);
}
.answers__text {
  font: 400 11px/1.4 var(--sans, inherit);
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.answers__amt {
  font: 700 9.5px/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* the second step of the picker: which comment on the post you chose */
.composer__which {
  width: 100%;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
}
.composer__which:focus { outline: none; border-color: var(--accent); }
.composer__which[hidden] { display: none; }
.composer__which:disabled { color: var(--ink-faint); cursor: not-allowed; }

/* Arriving by following a link marks what you were sent to. Landing among
   forty rows with none of them marked is the same as not arriving — so this
   is deliberately loud, and outlines as well as tints because a comment row
   may already carry a background of its own. */
.is-found {
  animation: found 2400ms var(--ease);
  border-radius: 8px;
}
@keyframes found {
  0% {
    background: color-mix(in srgb, var(--accent) 34%, transparent);
    box-shadow: 0 0 0 2px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  65% {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  100% { background: transparent; box-shadow: none; }
}

/* A comment pointing at a whole other truth, and the owner's answer to it.

   The link is drawn like any other claim. The pin is only drawn for the
   owner, because for everybody else it is a button that can only refuse. */
.clink--truth {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.clink--pin {
  margin-left: 6px;
  border-style: dashed;
  background: transparent;
  color: var(--ink-faint);
}
.clink--pin:hover { color: var(--accent); border-color: var(--accent); }
.clink--pin.is-on {
  border-style: solid;
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.clink--pin:disabled { opacity: .5; cursor: wait; }

/* the second picker: a whole truth rather than a comment in this one */
.composer__truth {
  width: 100%;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
}
.composer__truth:focus { outline: none; border-color: var(--accent); }
.composer__truth[hidden] { display: none; }

/* ---------- a token for somebody's own tooling ----------

   Two kinds, and the difference is the point of offering a choice: a read
   token cannot be talked into deleting anything, which is what makes it safe
   to hand to something that reads strangers' comments. */

.tokenBtn {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink-faint);
  cursor: pointer;
  font: 700 10px/1 var(--mono);
  letter-spacing: .1em;
  transition: all 220ms var(--ease);
}
.tokenBtn:hover { color: var(--accent); border-color: var(--accent); }

.tokenPanel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 420;
  width: min(560px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 40px 90px -30px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tokenPanel__head { display: flex; align-items: center; gap: 14px; }

.tokenPanel__title {
  font: 700 13px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.tokenPanel__shut {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  padding: 6px 10px;
  cursor: pointer;
  font: 700 9px/1 var(--mono);
  letter-spacing: .12em;
}
.tokenPanel__shut:hover { color: var(--accent); border-color: var(--accent); }

.tokenPanel__why {
  margin: 0;
  font: 400 12px/1.55 var(--sans, inherit);
  color: var(--ink-faint);
}

.tokenPanel__row { display: flex; gap: 9px; }

.tokenPanel__go {
  flex: 1 1 0;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
  transition: opacity 200ms var(--ease);
}
.tokenPanel__go:hover { opacity: .85; }

/* Full access is the sharper choice, so it does not get the inviting fill.
   The recommended one is the one that looks like the button. */
.tokenPanel__go--full {
  background: transparent;
  color: var(--ink-faint);
  border-color: var(--line);
}
.tokenPanel__go--full:hover { color: var(--ink); border-color: var(--ink-faint); }

.tokenPanel__out {
  width: 100%;
  resize: none;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink);
  font: 500 10.5px/1.5 var(--mono);
  word-break: break-all;
}
.tokenPanel__out:focus { outline: none; border-color: var(--accent); }

.tokenPanel__say {
  margin: 0;
  font: 500 11px/1.5 var(--mono);
  color: var(--accent);
  min-height: 16px;
}

/* The armed state of a control that hands out something irreversible. Red
   rather than the accent, because the accent is what every safe button on
   this site already wears. */
.tokenPanel__go--full.is-armed {
  background: #c8322b;
  border-color: #c8322b;
  color: #fff;
}
.tokenPanel__go--full.is-armed:hover { opacity: .9; }

.tokenPanel__say.is-warning {
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #c8322b;
  background: color-mix(in srgb, #c8322b 12%, transparent);
  font: 400 11.5px/1.55 var(--sans, inherit);
}
.tokenPanel__say.is-warning strong { color: #ff6b63; }

/* ---------- the connection a comment makes ----------

   Rendered as label_NN — "signs_10", "walked_it_back_04" — so the reason and
   the destination arrive together. An arrow alone says where and never why,
   and why is the whole claim. */

.clink {
  display: inline-block;
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  padding: 4px 8px;
  cursor: pointer;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .07em;
  transition: all 200ms var(--ease);
}
.clink:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* Quieter than the link itself. The link is the claim; this only offers to
   show where the claim goes next. */
.clink--path {
  margin-left: 6px;
  border-style: dashed;
  background: transparent;
  color: var(--ink-faint);
  letter-spacing: .12em;
}
.clink--path:hover { color: var(--accent); }

/* ---------- the path a chain of links makes ----------

   One hop is a link. Several in a row is an argument, and clicking through
   them one at a time makes the shape impossible to hold — you see 01 -> 10
   and never that it carries on to 03 and back out to 16. */

.trail {
  margin: 8px 0 2px;
  padding: 8px 4px 6px 10px;
  border-left: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.trail[hidden] { display: none; }

.trail__head {
  font: 700 8.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.trail__hop {
  display: grid;
  grid-template-columns: 14px 22px auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 4px 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.trail__hop:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.trail__arrow { font: 700 10px/1.4 var(--mono); color: var(--ink-faint); }
.trail__num {
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.trail__label {
  font: 700 9px/1.4 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-faint);
}
.trail__text {
  font: 400 10.5px/1.4 var(--sans, inherit);
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trail__amt {
  font: 700 9.5px/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* A hop that runs backwards through time is the interesting one — a path that
   only ever goes forwards is just the timeline, which nobody pays to draw. */
.trail__hop.is-back .trail__arrow,
.trail__hop.is-back .trail__num { color: var(--ink); }
.trail__hop.is-back {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.clink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the label field, which only exists once a destination is picked */
.composer__label {
  width: 100%;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: .04em;
}
.composer__label::placeholder { color: color-mix(in srgb, var(--ink-faint) 75%, transparent); }
.composer__label:focus { outline: none; border-color: var(--accent); }
.composer__label[hidden] { display: none; }

/* ---------- backing somebody else's comment ---------- */

.paid__backers {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--accent);
}

/* ---------- folding a whole section ----------

   A card is a post, a label market and a comment thread, and each of the last
   two carries a form. Somebody who came to read is scrolling past all of it
   on every card, so the bar that names a section folds it. */

.thread__bar {
  cursor: pointer;
  user-select: none;
}
.thread__bar:hover { color: var(--accent); }
.thread__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The caret, and what it opens. Louder than the bar it sits on, because the
   bar is a heading somebody has already read and this is the one thing on a
   folded section that invites a click. */
.thread__fold {
  margin-left: 8px;
  font: 700 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .8;
  transition: opacity 200ms var(--ease);
}
.thread__bar:hover .thread__fold { opacity: 1; }

/* Hidden by class rather than by [hidden], because these elements each carry
   their own display and would win the tie — the trap this file has now been
   caught by three times. */
.is-folded { display: none !important; }

/* A folded section keeps its bar — that bar is the only way back. Which
   means the class on the section itself must not hide it: the display:none
   above applies to the children it was given, and a section carrying the
   same class would take its own header down with it. */
section.is-folded {
  display: block !important;
  padding-bottom: 2px;
}

/* ---------- the folded toll ----------

   Collapsed, a toll is a button. It unfolds on the first keystroke, so the
   controls arrive at the moment they become relevant rather than sitting on
   every card waiting. */

/* `contents` so the three rows stay direct children of the toll's column
   flex — a real box here would collapse their 8px gap into one. */
.toll__fold { display: contents; }

/* And the reason that needs saying out loud: a class selector beats the UA
   rule behind [hidden], so `display: contents` would keep the rows on screen
   with the attribute set. The fold would have looked closed in the code and
   open on the page. */
.toll__fold[hidden] { display: none; }

.toll__custom[hidden], .toll__cost[hidden] { display: none; }

/* Dollars or the token. Sits with the amount box because it is about how the
   numbers are written, not about what is being paid — and it is small,
   because most readers will pick once and never think about it again. */
.toll__unit {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font: 700 9px/1 var(--mono);
  letter-spacing: .1em;
  transition: all 200ms var(--ease);
}
.toll__unit:hover { color: var(--ink); border-color: var(--ink-faint); }
.toll__unit.is-token {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.toll__unit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- the folded half of a comment's money ----------

   The total and BACK THIS stay out; the accounting folds. Reading the
   comments and auditing them are different jobs, and only one of them is
   what most people came for. */

.paid__toggle {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--accent);
  transition: opacity 200ms var(--ease);
}
.paid__toggle:hover { opacity: .7; }
.paid__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Same trap as .toll__fold below: this class sets a display, which outranks
   the UA rule behind [hidden]. Without this line the fold is closed in the
   code and open on the page — and with a backer list under every comment,
   that is every card several screens taller than it should be. */
.paid__detail[hidden] { display: none; }

.paid__detail {
  margin: 7px 0 2px;
  padding: 8px 10px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.paid__own {
  display: flex;
  align-items: center;
  gap: 8px;
}
.paid__ownamt {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-faint);
}

.backers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.backers__row {
  display: grid;
  /* who | amount | ticker | when | tx — the amount right-aligned so a column
     of them can be compared at a glance rather than read one by one */
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: baseline;
  gap: 9px;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-faint);
}
.backers__amt {
  color: var(--accent);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.backers__tok { opacity: .55; }
.backers__when { opacity: .55; }
.backers__sig { color: var(--ink-faint); text-decoration: none; }
.backers__sig:hover { color: var(--accent); }

@media (max-width: 560px) {
  /* the ticker is the first thing worth losing — it is already implied by
     the amount beside it */
  .backers__tok { display: none; }
  .backers__row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
}

.paid__back {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  padding: 5px 8px;
  cursor: pointer;
  font: 700 8.5px/1 var(--mono);
  letter-spacing: .1em;
  transition: all 200ms var(--ease);
}
.paid__back:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.paid__back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the panel that replaces the list while you decide */
.backing {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 14px;
  background: var(--well);
}
.backing__who {
  margin: 0 0 8px;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}

/* what you are agreeing with, quoted so it cannot be mistaken for your own */
.backing__text {
  margin: 0 0 14px;
  padding-left: 11px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.backing__form { display: block; }
.backing__cancel {
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font: 600 9px/1 var(--mono);
  letter-spacing: .13em;
}
.backing__cancel:hover { color: var(--ink-dim); }

/* ---------- the queue ----------

   Hidden until somebody has asked for something, so it is never a control
   that says "nothing". When it does appear it is the accent, because a
   request waiting on a decision is the one thing in this header that is
   waiting on YOU. */

.inbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  cursor: pointer;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .12em;
  transition: all 200ms var(--ease);
}
.inbox:hover { background: var(--accent); color: var(--bg); }
.inbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inbox[hidden] { display: none !important; }
.inbox__n { font-size: 11px; }

.inboxPanel {
  position: fixed;
  top: 64px;
  right: max(18px, env(safe-area-inset-right));
  z-index: 60;
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  overflow-y: auto;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}

.inboxPanel__head { position: relative; margin-bottom: 14px; }
.inboxPanel__title {
  margin: 0 0 5px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .16em;
  color: var(--accent);
}
.inboxPanel__sub {
  margin: 0;
  padding-right: 58px;
  font: 400 11px/1.5 var(--sans, inherit);
  color: var(--ink-faint);
}
.inboxPanel__shut {
  position: absolute;
  top: -2px;
  right: 0;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font: 700 8.5px/1 var(--mono);
  letter-spacing: .14em;
}
.inboxPanel__shut:hover { color: var(--ink); }

.inboxRow {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
/* Decided, and out of the way without vanishing — a row that disappears the
   moment it is answered leaves nothing to confirm what was answered. */
.inboxRow.is-done { opacity: .45; }
.inboxRow.is-done .inboxRow__acts { display: none; }

.inboxRow__who {
  margin: 0 0 4px;
  font: 700 10px/1.3 var(--mono);
  letter-spacing: .06em;
  color: var(--ink);
}
.inboxRow__note {
  margin: 0 0 4px;
  font: 400 12px/1.5 var(--sans, inherit);
  color: var(--ink);
}
.inboxRow__links {
  margin: 0 0 9px;
  font: 400 10.5px/1.4 var(--mono);
  color: var(--ink-faint);
}

.inboxRow__acts { display: flex; gap: 7px; }
.inboxRow__yes,
.inboxRow__no {
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: 700 9px/1 var(--mono);
  letter-spacing: .12em;
  transition: all 200ms var(--ease);
}
.inboxRow__yes {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
}
.inboxRow__no {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-faint);
}
.inboxRow__no:hover { color: #ff6b63; border-color: #c8322b; }
.inboxRow__yes:disabled,
.inboxRow__no:disabled { opacity: .5; cursor: default; }

.inboxRow__say {
  margin: 7px 0 0;
  min-height: 14px;
  font: 500 10.5px/1.4 var(--mono);
  color: var(--accent);
}

@media (max-width: 900px) {
  .inboxPanel { top: 56px; right: 12px; left: 12px; width: auto; }
}