/* ============================================================
   TIMELINE
   blue pill / red pill · one card, sliding
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  transition: background 700ms var(--ease);
}

/* ---------- ambient light ---------- */

.aura {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58vw 46vh at 50% 8%,   var(--glow-soft), transparent 70%),
    radial-gradient(70vw 50vh at 50% 106%, var(--glow-soft), transparent 72%);
  transition: background 700ms var(--ease);
}
.aura::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(72vw 60vh at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(72vw 60vh at 50% 45%, #000 20%, transparent 78%);
}

/* ---------- blue pill / red pill ---------- */

.pills {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  z-index: 40;
  display: flex;
  gap: 9px;
  padding: 7px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pill {
  width: 34px; height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  display: grid;
  place-items: center;
  transition: transform 260ms var(--ease);
}
.pill:hover  { transform: translateY(-1px) scale(1.06); }
.pill:active { transform: scale(.94); }

.pill span {
  display: block;
  width: 30px; height: 15px;
  border-radius: 999px;
  opacity: .3;
  transform: rotate(-24deg);
  transition: opacity 300ms var(--ease), box-shadow 300ms var(--ease);
  background: linear-gradient(100deg, var(--pill-blue-1), var(--pill-blue-2) 46%, var(--pill-blue-3));
  box-shadow: inset 0 1px 0 var(--sheen), inset 0 -3px 6px var(--sheen-under);
}
.pill--red span { background: linear-gradient(100deg, var(--pill-red-1), var(--pill-red-2) 46%, var(--pill-red-3)); }

.pill[aria-checked="true"] span { opacity: 1; }
.pill--blue[aria-checked="true"] span { box-shadow: inset 0 1px 0 var(--sheen), 0 0 16px var(--pill-blue-glow); }
.pill--red[aria-checked="true"]  span { box-shadow: inset 0 1px 0 var(--sheen), 0 0 16px var(--pill-red-glow); }

.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- stage ---------- */

.stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.track {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--gap);
  transform: translate3d(0,0,0);
  will-change: transform;
}
.track.is-animating { transition: transform var(--slide) var(--ease); }

/* ---------- card ---------- */

.card {
  position: relative;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--surface-2), var(--surface) 42%),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -28px var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transform-origin: center;
  transition: transform var(--slide) var(--ease),
              opacity   var(--slide) var(--ease),
              filter    var(--slide) var(--ease),
              box-shadow 400ms var(--ease),
              border-color 400ms var(--ease);
}

/* --o is written by JS as the deck moves, so depth stays continuous mid-drag */
.card { opacity: var(--o, 1); }

/* neighbours peek — never full-bleed, desktop or phone */
.card:not(.is-active) {
  filter: saturate(.35) blur(1.2px);
  cursor: pointer;
}
.card:not(.is-active):hover {
  opacity: calc(var(--o, .35) + .28);
  filter: saturate(.7) blur(0);
}

.card.is-active {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow:
    0 34px 80px -30px var(--shadow-deep),
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
    0 0 60px -14px var(--glow);
}

/* thin accent seam along the top of the live card */
.card.is-active::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .85;
}

/* ---------- card head ---------- */

.card__head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.card__idx {
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .12em;
  color: var(--accent);
  padding: 5px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.card__label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
}
.card__date {
  margin-left: auto;
  font: 500 11.5px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Adding a post, from the card. Quiet until hovered — it is an action for
   the few people who want it, on a page whose subject is the post. */
/* Move it one seat. Quieter than ADD, because ADD is the thing everybody
   might do and these two only appear for the person who owns the truth — and
   because a control that reorders somebody's argument should not be the
   easiest thing on the card to hit by accident. */
.card__move {
  align-self: center;
  margin-left: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace;
  transition: all 200ms var(--ease);
}
.card__move:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.card__move:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Kept in place rather than hidden at the ends of the deck: a control that
   vanishes moves everything beside it, and the first card losing its left
   arrow would shift ADD under the reader's cursor. */
.card__move:disabled { opacity: .25; cursor: default; }
.card__move.is-err { color: #ff6b63; border-color: #c8322b; }

.card__add {
  /* Was a faint dashed square the same colour as the disabled text around it,
     which is not a button anybody finds. It is the only thing in this header
     you can DO, so it looks like it. */
  align-self: center;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  cursor: pointer;
  font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  transition: all 200ms var(--ease);
}
.card__add::after {
  content: "ADD";
  font-size: 8.5px;
  letter-spacing: .14em;
}
.card__add:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.card__add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.addPanel {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.addPanel__links {
  width: 100%;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: 500 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
}
.addPanel__links:focus { outline: none; border-color: var(--accent); }

.addPanel__row { display: flex; gap: 8px; align-items: center; }

/* The seat. Small, because most people want the end and the blank field says
   so — but present, because a truth is ordered by a stored sequence and where
   a post sits is a decision somebody is entitled to make. */
.addPanel__at {
  font: 700 9.5px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.addPanel__seat {
  width: 62px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: center;
  font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.addPanel__seat::placeholder {
  color: color-mix(in srgb, var(--ink-faint) 75%, transparent);
  font-weight: 500;
}
.addPanel__seat:focus { outline: none; border-color: var(--accent); }

.addPanel__go,
.addPanel__shut {
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  font: 700 9.5px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  transition: all 200ms var(--ease);
}
.addPanel__go {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
}
.addPanel__go:disabled { opacity: .5; cursor: not-allowed; }
.addPanel__shut {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-faint);
}
.addPanel__shut:hover { color: var(--ink); }

/* Where a pasted link will land. "Add" reads like "add here" and never means
   it — a truth is in time order — so this answers the question before it is
   asked rather than after somebody has watched nothing happen. */
.addPanel__where {
  margin: 0;
  font: 700 10.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  color: var(--accent);
  min-height: 16px;
}
.addPanel__where:empty { display: none; }

/* Whatever the server said — sealed, not yours, pays the owner. Each is a
   different answer and each is worth reading, so this is given room rather
   than truncated into a toast. */
.addPanel__say {
  margin: 0;
  font: 500 11px/1.5 ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink-faint);
}

/* Truths the owner has vouched for, beside the post's own label.

   Anybody can pay to say another timeline is relevant, and that claim lives
   in the comments with the rest. The owner agreeing is a different claim, so
   it sits where a reader meets it without scrolling. */
.card__pins {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
}
.card__pins[hidden] { display: none; }

.card__pin {
  font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .07em;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  transition: background 200ms var(--ease);
}
.card__pin:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* What this post is worth arguing about. Sits beside the date, in the
   accent, because on this site the money is the headline and not the
   footnote. Absent rather than "$0" while a post is quiet. */
.card__vol {
  font: 700 11.5px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  padding: 4px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  cursor: default;
}
.card__vol[hidden] { display: none; }

/* ---------- card body (the only scroller) ---------- */

.card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* the offsetParent for everything inside, so scrolling to a comment can be
     computed from layout instead of from rects — the deck is mid-transform
     when a link is followed, and rects inside a scaling ancestor lie */
  position: relative;
  overscroll-behavior: contain;
  padding: 4px 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.card__body::-webkit-scrollbar { width: 8px; }
.card__body::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.card:not(.is-active) .card__body { overflow: hidden; }

/* the X embed slot */
.embed { min-height: 120px; }
.embed .twitter-tweet { margin: 8px auto !important; }

.embed__skeleton {
  height: 190px;
  margin: 10px 2px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(100deg, var(--surface) 20%, var(--surface-2) 45%, var(--surface) 70%);
  background-size: 260% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { to { background-position: -260% 0; } }

.embed__fallback {
  margin: 10px 2px;
  padding: 20px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  background: var(--well);
  color: var(--ink-dim);
  font-size: 13.5px;
}
.embed__fallback a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---------- comments ---------- */

.thread { margin-top: 22px; }

.thread__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 14px;
  font: 600 10.5px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.thread__bar::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.thread__count { color: var(--accent); }

.composer {
  margin: 0 2px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--well);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.composer: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);
}

.composer textarea {
  display: block;
  width: 100%;
  min-height: 62px;
  max-height: 200px;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 13px 14px 6px;
  outline: none;
}
.composer textarea::placeholder { color: var(--ink-faint); }

.composer__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px 14px;
  border-top: 1px solid var(--line-soft);
}
.composer__name {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: 500 13px/1 inherit;
  outline: none;
}
.composer__name::placeholder { color: var(--ink-faint); }
.composer__len { font: 500 11px/1 ui-monospace, Menlo, monospace; color: var(--ink-faint); }
.composer__len.is-over { color: var(--accent); }

.btn {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font: 600 13px/1 inherit;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  cursor: pointer;
  transition: transform 180ms var(--ease), filter 180ms var(--ease), opacity 180ms var(--ease);
  box-shadow: 0 6px 18px -8px var(--glow);
}
.btn:hover:not(:disabled)  { transform: translateY(-1px); filter: brightness(1.09); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.btn:disabled { opacity: .32; cursor: default; }

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

.comment {
  display: flex;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 13px;
  transition: background 200ms var(--ease);
  animation: rise 380ms var(--ease) both;
}
.comment:hover { background: var(--hover); }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }

.comment__av {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 600 12px/1 inherit;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 20%, var(--hover-2));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.comment__main { min-width: 0; flex: 1; }
.comment__meta { display: flex; align-items: baseline; gap: 8px; }
.comment__who  { font-weight: 600; font-size: 13.5px; }
.comment__when { font-size: 11.5px; color: var(--ink-faint); }
.comment__text {
  margin: 3px 0 0;
  font-size: 14px;
  color: var(--on-accent);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment__del {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms, color 180ms;
}
.comment:hover .comment__del,
.comment__del:focus-visible { opacity: 1; }
.comment__del:hover { color: var(--accent); }

.thread__empty {
  padding: 16px 2px 6px;
  color: var(--ink-faint);
  font-size: 13.5px;
  font-style: italic;
}

/* ---------- arrows ---------- */

.arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 20;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 240ms var(--ease), border-color 240ms var(--ease),
              box-shadow 240ms var(--ease), transform 240ms var(--ease),
              opacity 240ms var(--ease);
}
.arrow--prev { left: 20px; }
.arrow--next { right: 20px; }
.arrow svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arrow:hover:not(:disabled) {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 24px -6px var(--glow);
  transform: scale(1.07);
}
.arrow:disabled { opacity: .2; cursor: default; }
.arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- the rail ---------- */

.rail {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  height: 72px;
  padding: 0 clamp(20px, 6vw, 80px);
}

.rail__line {
  position: absolute;
  left: clamp(20px, 6vw, 80px);
  right: clamp(20px, 6vw, 80px);
  top: 21px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.rail__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--accent));
  box-shadow: 0 0 12px var(--glow);
  transition: width var(--slide) var(--ease);
}

.rail__nodes {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 2px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink-faint);
  transition: color 300ms var(--ease);
}
.node__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dot);
  border: 1px solid var(--line);
  transition: transform 340ms var(--ease), background 340ms var(--ease),
              border-color 340ms var(--ease), box-shadow 340ms var(--ease);
}
.node__date {
  font: 500 10.5px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: .65;
  transition: opacity 300ms var(--ease);
}
.node:hover { color: var(--ink-dim); }
.node:hover .node__dot { transform: scale(1.25); border-color: var(--ink-faint); }

.node.is-active { color: var(--accent); }
.node.is-active .node__date { opacity: 1; }
.node.is-active .node__dot {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent),
              0 0 16px var(--glow);
}
.node.is-past .node__dot {
  background: color-mix(in srgb, var(--accent) 45%, var(--dot));
  border-color: transparent;
}
.node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ---------- hint ---------- */

.hint {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  margin: 0 0 max(14px, env(safe-area-inset-bottom));
  text-align: center;
  font: 500 10.5px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: .55;
  transition: opacity 600ms var(--ease);
}
.hint.is-gone { opacity: 0; }
.hint kbd {
  font: inherit;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--hover);
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  :root { --gap: 26px; }
  .arrow { display: none; }
}

/* drawer territory — the card takes the screen and the comments scroll inside it.
   Height is capped to the stage so the rail and stamp below never get clipped. */
@media (max-width: 899px) {
  :root {
    --card-w: 85vw;
    --card-h: min(85dvh, calc(100dvh - 132px));
  }
}

/* phone — card stays narrow so neighbours still peek */
@media (max-width: 700px) {
  :root {
    --gap: 18px;
    --radius: 18px;
  }
  .card__body { padding: 4px 12px 16px; }
  .card__head { padding: 13px 15px 10px; }
  .rail { height: 64px; padding: 0 16px; }
  .rail__line { left: 16px; right: 16px; }

  /* a phone is too narrow for 122 discrete dots at any size they'd still be
     visible at — so the filled line carries progress and only the position
     marker stays. Jumping to a date is the drawer index's job here. */
  /* hidden at rest, but they come back the moment you start scrubbing, so you
     can see the whole run of posts you're moving through */
  .rail.is-dense .node__dot { opacity: 0; transition: opacity 200ms var(--ease); }
  .rail.is-dense .node.is-active .node__dot,
  .rail.is-dense.is-scrubbing .node__dot { opacity: 1; }
  .node__date { font-size: 9.5px; letter-spacing: .06em; }
  /* the group moves in as one; the children never carried their own offsets */
  .topright { top: max(12px, env(safe-area-inset-top)); right: 12px; gap: 7px; }
  .pills { top: max(12px, env(safe-area-inset-top)); right: 12px; }
  .sayall { padding: 7px 10px; font-size: 9px; }
}

@media (max-width: 400px) {
  :root { --card-w: 85vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- drag feel ---------- */

.stage { cursor: grab; }
.stage:active { cursor: grabbing; }

/* while the finger is down the deck must track 1:1 — no easing lag */
.track.is-dragging { transition: none !important; }
.track.is-dragging .card {
  transition: box-shadow 400ms var(--ease), border-color 400ms var(--ease);
}

/* the card body is interactive, so it keeps a normal cursor */
.card__body, .composer, .comment { cursor: auto; }

/* ---------- paying by hand ----------
   The path for somebody with no wallet in the browser: an address of their
   own, a countdown, and a box for the receipt. Every colour here is a token,
   so a custom palette carries it without a rule being touched. */

.toll__manual {
  background: none;
  border: 0;
  padding: 4px 0;
  margin-top: 6px;
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
}
.toll__manual:hover { color: var(--accent); }

.manual {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--well);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual__ask { margin: 0; font-size: 0.85rem; color: var(--ink); }

.manual__addrRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* The address has to survive being read aloud and typed by hand, so it wraps
   rather than truncating — a cut-off address is a lost payment. */
.manual__addr {
  flex: 1 1 16ch;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  user-select: all;
}

.manual__qr {
  align-self: center;
  width: 148px;
  height: 148px;
  padding: 8px;
  border-radius: 8px;
  background: #fff; /* a QR needs real white to scan, whatever the palette is */
}
.manual__qr svg { width: 100%; height: 100%; display: block; }

.manual__note,
.manual__left {
  margin: 0;
  font-size: 0.74rem;
  color: var(--ink-dim);
}

.manual__row { display: flex; gap: 8px; flex-wrap: wrap; }

.manual__sig {
  flex: 1 1 18ch;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
}
.manual__sig:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.manual__status { margin: 0; font-size: 0.78rem; color: var(--ink-dim); }
.manual__status.is-err { color: var(--err); }
.manual__status.is-ok { color: var(--accent); }
.manual__status.is-busy { color: var(--ink-dim); }

@media (max-width: 480px) {
  .manual__qr { width: 124px; height: 124px; }
}

/* What this truth lets a stranger do, said before they type. "You cannot add
   to this", "you can ask", and "this costs money" are three different answers
   and only one of them is worth pasting links for. */
.addPanel__rule {
  margin: 0 0 8px;
  font: 400 11px/1.5 var(--sans, inherit);
  color: var(--ink-faint);
}

/* Why it belongs. Only shown when somebody is asking, because the owner is
   about to decide and a bare link gives them nothing to decide with. */
.addPanel__note {
  width: 100%;
  margin: 7px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: 400 12px/1.4 var(--sans, inherit);
}
.addPanel__note::placeholder { color: var(--ink-faint); }
.addPanel__note:focus { outline: none; border-color: var(--accent); }
.addPanel__note[hidden] { display: none; }