/* The public apex pages: home, done, support, help, legal, status. Built inside the
   tokens only; the owner review of 2026-10-31 moved and resized them (DECISIONS 138). */

/* Home: hero. One centred column: wordmark, line, name, drop zone (DECISIONS 141). */
.hero {
  display: grid;
  justify-items: center;
  gap: var(--s-8);
  padding-top: var(--s-12);
  text-align: center;
}

.hero__intro {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  max-width: 920px;
}

.hero__mark {
  font-size: clamp(5.5rem, 25vw, 17rem);
  color: var(--text);
}

.hero__line {
  font-size: clamp(1.75rem, 5vw, 3rem);
}

.hero__sub {
  max-width: 44ch;
  color: var(--text-2);
  font-size: var(--fs-17);
}

.hero__sub em {
  color: var(--text);
}

.hero__body {
  width: min(100%, 800px);
  text-align: left;
}

/* Upload column: name, drop zone, the check, one line of fine print. The name's message line
   already leaves room under the field, so the gap stays small. */
.upload {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

/* The drop zone is a little wider and taller than the name field (owner review 3, DECISIONS 155). */

.upload .drop__title {
  font-size: clamp(var(--fs-24), 2.4vw, 1.75rem);
}

.upload .name-field {
  justify-self: center;
}

.upload__fine {
  color: var(--text-2);
  font-size: var(--fs-14);
  font-style: italic;
  text-align: center;
}

/* Home: the check sits centred under the drop zone at Turnstile's normal 300 px, the smallest
   size that keeps one row (compact, 150 by 140, only where there is less room). Once it passes
   it folds away and the note and everything under it close up; a new check opens it again
   (DECISIONS 159). */
.upload .drop {
  min-height: 260px;
}

.upload .human {
  display: grid;
  justify-self: center;
  align-self: start;
  grid-template-rows: 1fr;
  animation: fade-in var(--d-enter) var(--ease-state) backwards;
  transition:
    grid-template-rows var(--d-enter) var(--ease-state),
    margin-top var(--d-enter) var(--ease-state),
    opacity var(--d-hover) var(--ease-state);
}

.upload .human > * {
  min-height: 0;
  overflow: hidden;
}

.upload .human.is-passed {
  grid-template-rows: 0fr;
  margin-top: calc(-1 * var(--s-4));
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .upload .human {
    transition: none;
  }
}

.human:empty {
  display: none;
}

.over__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Other ways to upload: an open section, not a second box like the drop zone. A plain centred
   heading, centred tabs, and the content in a recessed well (DECISIONS 151, 155). */
.ways {
  display: grid;
  justify-items: center;
}

.ways .agent {
  width: calc(min(100%, 720px) * .94);
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Same size and weight as the other home section headings (h2 in base.css, DECISIONS 162). The
   section is also a .panel, whose h2 rule is smaller, so the size is set here. */
.ways .ways__title {
  font-size: var(--fs-32);
  color: var(--text);
  text-align: center;
}

/* In tab mode the closed panels still sit in the grid; without this each adds a gap. */
.ways .agent:not(.is-accordion) {
  gap: 0;
}

.ways .agent:not(.is-accordion) .agent__tabs {
  margin: var(--s-3) 0 var(--s-4);
}

.ways .agent__tabs {
  justify-content: center;
  box-shadow: none;
}

.ways .agent__body {
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-panel);
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px var(--line);
}

.ways .agent.is-accordion .agent__item {
  box-shadow: inset 0 calc(-1 * var(--s-px)) 0 var(--line);
}

.ways .agent.is-accordion .agent__body {
  margin-bottom: var(--s-4);
  padding: var(--s-4);
}

.agent {
  width: min(100%, 680px);
}

.agent {
  gap: var(--s-4);
}

.agent__body {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
}

/* A command or URL to copy: the agent panel and /agents. */
.cmd {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.cmd__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}

.cmd__prompt {
  font-size: var(--fs-17);
  line-height: 1.5;
}

.agent__head {
  display: none;
  margin: 0;
  font-size: var(--fs-16);
}

.agent__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--control-h);
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: none;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--d-hover) var(--ease-state);
}

.agent__toggle::after {
  content: "";
  width: var(--s-2);
  height: var(--s-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--d-enter) var(--ease-enter);
}

.agent__toggle[aria-expanded="true"]::after {
  transform: rotate(225deg);
}

.agent__toggle:hover {
  color: var(--accent-ink);
}

.agent.is-accordion .agent__tabs {
  display: none;
}

.agent.is-accordion .agent__head {
  display: block;
}

.agent.is-accordion .agent__item + .agent__item {
  box-shadow: inset 0 var(--s-px) 0 var(--line);
}

.agent.is-accordion .agent__body {
  padding: 0 0 var(--s-4);
}

/* Steps: a timeline on one hairline, not three cards. Centred, one line each. */
.steps,
.limits {
  display: grid;
  justify-items: center;
  gap: var(--s-8);
}

.steps h2,
.limits h2 {
  text-align: center;
}

.steps__list {
  display: grid;
  gap: var(--s-8);
  width: min(100%, 1080px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps__item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s-2);
  padding-top: var(--s-6);
  box-shadow: inset 0 var(--s-px) 0 var(--line);
  text-align: center;
}

.steps__item::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s-1));
  left: 50%;
  width: var(--s-2);
  height: var(--s-2);
  border-radius: 50%;
  background: var(--accent);
  translate: -50% 0;
}

.steps__n {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: 1;
  color: var(--accent-ink);
}

.steps__item p {
  max-width: 30ch;
  color: var(--text-2);
}

@media (min-width: 768px) {
  .steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
  }
}

/* Limits table: maximums per site. */
.limits__scroll {
  width: min(100%, 880px);
  overflow-x: auto;
}

.limits__table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.limits__table th,
.limits__table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
}

.limits__table thead th {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.limits__table tbody tr {
  box-shadow: inset 0 var(--s-px) 0 var(--line);
  transition: background-color var(--d-hover) var(--ease-state);
}

.limits__table tbody tr:hover {
  background: var(--surface-2);
}

.limits__table tbody th {
  font-weight: 600;
}

/* "Free per site" and "Supporter key per site", underlined in the accent ink. */
.limits__head {
  text-decoration: underline;
  text-decoration-color: var(--accent-ink);
  text-decoration-thickness: var(--s-px);
  text-underline-offset: var(--s-1);
}

.limits__note {
  color: var(--text-2);
  font-size: var(--fs-15);
  text-align: center;
}

.limits__scroll + .limits__note {
  margin-top: calc(-1 * var(--s-4));
  font-style: italic;
}

/* Keep the takedown note close to the site limits. */
.limits__rule {
  margin-top: calc(-1 * var(--s-6));
}

.limits__rule a {
  color: var(--accent-ink);
  text-decoration-line: underline;
  text-decoration-thickness: var(--s-px);
  text-underline-offset: .22em;
  transition: text-decoration-thickness var(--d-hover) var(--ease-state), color var(--d-hover) var(--ease-state);
}

.limits__rule a:hover {
  color: var(--text);
  text-decoration-thickness: var(--s-half);
}

/* Narrow text pages: done, help, legal, status, support, report. */
.narrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  width: min(100%, 760px);
  margin: 0 auto;
  padding: var(--s-8) var(--gutter) 0;
}

.narrow h1 {
  font-size: clamp(2rem, 6vw, var(--fs-44));
}

/* Split pages (help, agents, support, report, claim): one column up to 1280px. Wider,
   the page head and its index stay on the left and the content reads on the right, so the
   width is used without stretching the lines (DECISIONS 141). */
.split__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--s-8);
  min-width: 0;
}

.split__body.prose {
  gap: var(--s-4);
}

@media (min-width: 1280px) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--s-16);
    width: min(100%, 1200px);
    padding-top: var(--s-12);
  }

  .split > header {
    position: sticky;
    top: var(--s-24);
    align-self: start;
  }
}

/* Done */
.done,
.done__head {
  display: grid;
  gap: var(--s-4);
}

.done__url {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

.done__link {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.done__link.is-typing {
  font-family: var(--font-display);
  font-weight: 500;
}

.done__expiry {
  font-size: var(--fs-17);
}

/* Legal pages (terms, privacy): short, so no index. The head spans the page and the sections
   flow into two columns from 1024px, so a wide screen is used without one long, thin column
   (DECISIONS 153). */
.legal {
  width: min(100%, 1080px);
}

.legal__head {
  max-width: 64ch;
}

.legal__sections > section {
  margin-bottom: var(--s-8);
}

.legal__sections h2 {
  margin-top: 0;
  text-decoration: underline;
  text-decoration-color: var(--accent-ink);
  text-decoration-thickness: var(--s-half);
  text-underline-offset: .22em;
}

/* Columns rather than a grid, so a short section never leaves a hole beside a long one. */
@media (min-width: 1024px) {
  .legal {
    padding-top: var(--s-12);
  }

  .legal__sections {
    columns: 2;
    column-gap: var(--s-12);
  }

  .legal__sections > section {
    break-inside: avoid;
  }
}

/* Done reads centred: the link, its expiry and the key step, plus the short panels after it.
   The password form and the key reveal keep their own left-aligned layout. */
.done-page .done__head,
.done-page .done__key,
.done-page #skipped,
.done-page #made,
.done-page #empty {
  justify-items: center;
  text-align: center;
}

.done-page .done__url {
  justify-content: center;
}

/* The line sits on the top glow, where --warn text measured 4.47 in light, so a soon
   expiry is marked by a warn dot and the words stay --text. */
.done__dot {
  display: none;
}

.done__expiry.is-soon .done__dot {
  display: inline-block;
  width: var(--s-2);
  height: var(--s-2);
  margin-right: var(--s-2);
  border-radius: 50%;
  background: var(--warn);
  vertical-align: middle;
}

.done__key {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}

.done__skip {
  box-shadow: inset 0 0 0 1px var(--line), inset var(--s-half) 0 0 var(--warn);
}

/* Prose: help, terms, privacy */
.prose {
  display: grid;
  gap: var(--s-4);
  max-width: 64ch;
}

.prose h2 {
  margin-top: var(--s-4);
  font-size: var(--fs-24);
}

.prose ul {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding-left: var(--s-5);
}

.updated {
  color: var(--text-2);
  font-size: var(--fs-14);
}

/* FAQ: native details, one hairline between questions. */
.faq {
  display: grid;
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.faq details + details {
  box-shadow: inset 0 var(--s-px) 0 var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-panel);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color var(--d-hover) var(--ease-state);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: var(--s-2);
  height: var(--s-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--d-enter) var(--ease-enter);
}

.faq details[open] summary::after {
  transform: rotate(225deg);
}

.faq summary:hover {
  color: var(--accent-ink);
}

.faq__answer {
  display: grid;
  gap: var(--s-2);
  padding: 0 var(--s-5) var(--s-5);
  color: var(--text-2);
  animation: enter var(--d-enter) var(--ease-enter);
}

/* Report form */
.report,
.claim {
  display: grid;
  gap: var(--s-4);
}

.report > .btn,
.claim > .btn {
  justify-self: start;
}

.field__input--area {
  height: auto;
  min-height: 120px;
  padding: var(--s-3);
  resize: vertical;
  line-height: 1.55;
}

/* Status page */
/* Status: a centred page that uses the width. The count sits in its own card and scales with
   its digits, so a 7-digit number still fits at 360px (DECISIONS 141). */
.status-page {
  display: grid;
  gap: var(--s-10);
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: var(--s-12) var(--gutter) 0;
}

.status-page__head {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  text-align: center;
}

.status-page__head h1 {
  font-size: clamp(2rem, 6vw, var(--fs-44));
}

.status-now {
  display: grid;
  gap: var(--s-6);
  align-items: stretch;
}

.status-now > .loader {
  justify-self: center;
}

.status-card {
  display: grid;
  align-content: center;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-8) var(--s-6);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--hairline);
}

.status-now__live {
  justify-items: center;
  text-align: center;
  container-type: inline-size;
}

.status-now__num {
  font-family: var(--font-display);
  font-size: min(9rem, calc(100cqi / (var(--digits, 3) * .7)));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.status-now__label {
  color: var(--text-2);
  font-size: var(--fs-17);
}

.status-now .gauge__dots {
  max-width: none;
}

/* The count changes colour without moving. */
.status-now__num {
  transition: color var(--d-hover) var(--ease-state);
}

@media (hover: hover) {
  .status-now__num:hover {
    color: var(--accent-ink);
  }
}

.status-now .form-msg {
  text-align: center;
}

@media (min-width: 1024px) {
  .status-now {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .status-now > .loader,
  .status-now .form-msg {
    grid-column: 1 / -1;
  }
}

/* Support: coin tabs with a QR plate that stays dark on light for readers. */
.donate__unset {
  padding: var(--s-4);
  border-radius: var(--r-control);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-15);
}

.coin {
  display: grid;
  gap: var(--s-5);
  align-items: start;
  padding-top: var(--s-5);
}

@media (min-width: 640px) {
  .coin {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.qr {
  display: inline-grid;
  padding: var(--s-2);
  border-radius: var(--r-control);
  background: var(--qr-bg);
  color: var(--qr-fg);
}

.qr svg {
  display: block;
  width: 168px;
  height: auto;
}

.coin__body {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  min-width: 0;
}

.coin__name {
  font-weight: 600;
}

.coin__address {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 404 and asleep: the two Bitcount Ink moments. */
.oops {
  display: grid;
  place-content: center;
  justify-items: start;
  gap: var(--s-5);
  min-height: 60vh;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: var(--s-12) var(--gutter);
}

.oops__ink {
  font-family: "Bitcount Ink", var(--font-display);
  font-size: clamp(6rem, 30vw, 14rem);
  font-weight: 400;
  line-height: 1;
  font-palette: --ink-dark;
  animation: enter var(--d-hero) var(--ease-enter) backwards;
}

[data-theme="light"] .oops__ink {
  font-palette: --ink-light;
}

.oops__ink--word {
  font-size: clamp(3.5rem, 17vw, 11rem);
}

.oops h1 {
  font-size: var(--fs-32);
}

.oops__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

@media (prefers-reduced-motion: reduce) {
  .faq__answer,
  .oops__ink {
    animation-name: fade-in;
  }

  .agent__toggle::after,
  .faq summary::after {
    transition: none;
  }
}

@media print {
  body.page {
    display: block;
    background: none;
  }

  .glow,
  .grain::after {
    display: none;
  }
}