/* ===========================================================================
   Page styling.

   Colours, fonts, spacing and layout all come from custom properties that the
   Worker writes into a <style> block per request — so editing settings in
   /admin restyles this file's output without touching this file.

   The values below are fallbacks only, used if that block is ever missing.
   Derived shades (hover, strong border, focus ring) are computed with
   color-mix so the editor only has to expose one colour per role.
   =========================================================================== */

:root {
  --bg: #fbfbfa;
  --bg-card: #ffffff;
  --bg-subtle: #f4f4f2;
  --text: #1a1a19;
  --text-muted: #6b6a66;
  --border: #e3e2de;
  --accent: #1a1a19;
  --accent-text: #ffffff;

  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size: 16px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --card-width: 432px;
  --amount-cols: 3;
  --pad: 24px;
  --gap: 8px;
  --page-fill: auto;
}

/* Derived from the eight editable colours above. */
:root {
  --bg-subtle-hover: color-mix(in srgb, var(--bg-subtle) 92%, var(--text));
  --border-strong: color-mix(in srgb, var(--border) 65%, var(--text));
  --accent-ring: color-mix(in srgb, var(--accent) 18%, transparent);
  --success: color-mix(in srgb, var(--accent) 40%, #1c7c54);
}

/* ===========================================================================
   Base
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

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

/* ===========================================================================
   Layout
   =========================================================================== */

/*
 * Centred vertically by auto margins rather than by justify-content.
 *
 * `justify-content: center` on a column taller than the window pushes the top
 * of the content above the scroll origin, where no amount of scrolling can
 * reach it — the heading is simply gone. Auto margins collapse to nothing once
 * the content fills the window, so a long page scrolls from its true top.
 */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  min-height: 100dvh;
  padding: 44px 20px;
}

.page > :first-child {
  margin-top: var(--page-fill);
}

.page > :last-child {
  margin-bottom: var(--page-fill);
}

.header {
  max-width: var(--card-width);
  text-align: center;
}

.header__name {
  margin: 0;
  font-size: 1.75em;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.header__tagline {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.975em;
}

/* The fee, stated before anyone reaches the card fields. */
.header__breakdown {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.card {
  width: 100%;
  max-width: var(--card-width);
  padding: var(--pad);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.footer {
  max-width: var(--card-width);
  color: var(--text-muted);
  font-size: 0.8125em;
  text-align: center;
}

.footer p {
  margin: 6px 0;
}

.footer__tip {
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
}

.footer__tip:empty {
  display: none;
}

/* Visibility toggles from settings, applied as body classes so that the
   server render and the editor's live preview stay in agreement. */
.hide-step-numbers .step__number {
  display: none;
}

.hide-footer-tip .footer__tip {
  display: none;
}

/* ===========================================================================
   Steps
   =========================================================================== */

.step + .step {
  margin-top: calc(var(--pad) + 2px);
  padding-top: calc(var(--pad) - 2px);
  border-top: 1px solid var(--border);
}

.step__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 0.9375em;
  font-weight: 600;
}

.step__number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.35em;
  height: 1.35em;
  background: var(--bg-subtle);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 600;
}

.step__hint {
  margin: -6px 0 12px;
  color: var(--text-muted);
  font-size: 0.8125em;
}

/* ===========================================================================
   Amounts
   =========================================================================== */

.amounts {
  display: grid;
  grid-template-columns: repeat(var(--amount-cols), 1fr);
  gap: var(--gap);
}

.amount {
  padding: 12px 4px;
  background: var(--bg-subtle);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.amount:hover {
  background: var(--bg-subtle-hover);
}

.amount[aria-pressed='true'] {
  background: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.amount--custom {
  grid-column: 1 / -1;
}

/* ===========================================================================
   Custom amount field
   =========================================================================== */

.field {
  display: block;
  margin-top: 12px;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 0.8125em;
  font-weight: 500;
}

.field__input {
  width: 100%;
  padding: 11px 13px 11px 28px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.field__hint {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.75em;
}

/* Same thing, inside a <label> where a <p> would be invalid markup. */
.field__note {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.75em;
  line-height: 1.5;
}

.currency {
  position: relative;
  display: block;
}

.currency__symbol {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* ===========================================================================
   Payment methods
   =========================================================================== */

.methods {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  transition: opacity 0.15s ease;
}

.methods.is-disabled {
  opacity: 0.45;
}

.method {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.method__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  background: var(--bg-card);
  color: var(--text);
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.method__button:hover:not(:disabled) {
  background: var(--bg-subtle);
}

.method__button:disabled {
  cursor: not-allowed;
}

.method__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.method__name {
  font-weight: 600;
}

.method__note {
  color: var(--text-muted);
  font-size: 0.75em;
  line-height: 1.35;
}

.method__action {
  flex-shrink: 0;
  padding: 7px 12px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: calc(var(--radius) * 0.6);
  font-size: 0.8125em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===========================================================================
   Expanded detail (Zelle, Apple Cash)
   =========================================================================== */

.method__detail {
  padding: 4px 15px 15px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

/* Label on its own line so long emails get the full width to themselves. */
.copyrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'label button'
    'value value';
  align-items: center;
  gap: 3px 10px;
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: calc(var(--radius) * 0.6);
}

.copyrow__label {
  grid-area: label;
  color: var(--text-muted);
  font-size: 0.6875em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.copyrow__value {
  grid-area: value;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 0.875em;
  font-weight: 550;
}

.copyrow__button {
  grid-area: button;
  padding: 5px 11px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius) * 0.45);
  font: inherit;
  font-size: 0.75em;
  font-weight: 600;
  cursor: pointer;
}

.copyrow__button.is-copied {
  color: var(--success);
  border-color: var(--success);
}

.steps {
  margin: 0;
  padding-left: 20px;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.steps li + li {
  margin-top: 5px;
}

.detail__action {
  display: block;
  margin-top: 13px;
  padding: 11px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius);
  font-size: 0.875em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Shown inside a payment row when starting a card payment fails. */
.method__error {
  margin: 0;
  padding: 0 15px 12px;
  color: color-mix(in srgb, var(--text) 35%, #b3261e);
  font-size: 0.8125em;
}

/* ===========================================================================
   Result page (after a card payment)
   =========================================================================== */

.result {
  text-align: center;
}

.result__badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  background: var(--bg-subtle);
  border-radius: 50%;
  color: var(--success);
  font-size: 1.25em;
}

.result__title {
  margin: 0 0 8px;
  font-size: 1.25em;
  font-weight: 650;
}

.result__body {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375em;
}

.link {
  display: inline-block;
  margin-top: 20px;
  color: var(--text);
  font-size: 0.875em;
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
}

.link:hover {
  border-color: var(--accent);
}

.result__badge--muted {
  color: var(--text-muted);
}

/* ===========================================================================
   Home page form
   =========================================================================== */

/* The payment page's amount box has a currency symbol; these don't. */
.field__input--plain {
  padding-left: 13px;
}

.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  margin: 12px 0 0;
  font-size: 0.8125em;
}

.form__note.is-error {
  color: color-mix(in srgb, var(--text) 30%, #b3261e);
}

.form__thanks {
  margin: 0;
  padding: 8px 0;
  color: var(--text);
  font-size: 0.9375em;
  text-align: center;
}

.field__textarea {
  width: 100%;
  min-height: 84px;
  padding: 11px 13px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.submit {
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.submit:hover:not(:disabled) {
  opacity: 0.88;
}

.submit:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* ===========================================================================
   One-time / monthly choice
   =========================================================================== */

.frequency {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: var(--gap);
  padding: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
}

.frequency__option {
  padding: 9px 4px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: calc(var(--radius) * 0.75);
  font: inherit;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.frequency__option[aria-pressed='true'] {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.monthly-note {
  margin: -4px 0 12px;
  color: var(--text-muted);
  font-size: 0.75em;
}

/* ===========================================================================
   The card page (/checkout)
   =========================================================================== */

.checkout-card {
  text-align: center;
}

/* Stripe draws its form inside here. The form itself lives in an iframe, so
   its own colours come from your Stripe branding settings, not from this file. */
.checkout {
  min-height: 220px;
}

.checkout__status {
  margin: 0;
  padding: 24px 0;
  color: var(--text-muted);
  font-size: 0.875em;
}

.checkout__status--error {
  color: var(--text);
  padding: 8px 0 16px;
}

.checkout__back {
  display: inline-block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.8125em;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}

.checkout__back:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* ===========================================================================
   Social links
   =========================================================================== */

/* A business's address and hours, under its name. */
.trade {
  display: block;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.875em;
  font-style: normal;
  line-height: 1.5;
}

.trade span {
  display: block;
}

/* In the header now, so the spacing is the header's rather than a section's
   of its own. */
.socials {
  width: 100%;
  max-width: var(--card-width);
  margin: 14px auto 0;
  text-align: center;
}

.socials__heading {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.8125em;
  font-weight: 500;
}

.socials__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.socials__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.socials__link:hover {
  color: var(--text);
  border-color: var(--border-strong, var(--text-muted));
  transform: translateY(-1px);
}

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

.socials__icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Readable by a screen reader, invisible to everyone else. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   An invoice, when the page is showing one
   =========================================================================== */

/* An invoice leaves one step, so the numbering and the divider between the
   two steps stop making sense. */
.is-invoice .step + .step {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.is-invoice .step__number {
  display: none;
}

.is-invoice .header__tagline:empty {
  display: none;
}

.invoice {
  padding-bottom: calc(var(--pad) - 2px);
  margin-bottom: calc(var(--pad) - 8px);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.invoice__label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.invoice__amount {
  margin: 4px 0 2px;
  font-size: 2.1em;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.invoice__what {
  margin: 0;
  font-size: 0.975em;
}

/* What an invoice is made of, when it carries tax. */
.invoice__lines {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  font-size: 0.875em;
  text-align: left;
}

.invoice__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-muted);
}

.invoice__line dt,
.invoice__line dd {
  margin: 0;
}

.invoice__line dd {
  font-variant-numeric: tabular-nums;
}

.invoice__line--total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}

/* Who is billing, for a page set up as a business. */
.invoice__from {
  display: block;
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.8125em;
  font-style: normal;
  text-align: left;
}

.invoice__from span {
  display: block;
}

.invoice__note {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.8125em;
  text-align: left;
  white-space: pre-wrap;
}

.invoice__due {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.invoice__due.is-late {
  color: var(--text);
  font-weight: 550;
}

/* ===========================================================================
   Nothing here (404)
   =========================================================================== */

.result__actions {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.result__actions .submit {
  display: block;
  text-align: center;
  text-decoration: none;
}

.result__link {
  justify-self: center;
}

/* ===========================================================================
   Support assistant

   A button fixed to the corner of the page, and the panel it opens. It sits
   above everything, so it is deliberately the only thing on the site with a
   z-index — anything else that needed one would be competing with the help.
   =========================================================================== */

.agent-open {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font: inherit;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.agent-open:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.agent-open__icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.agent {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 32px));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.agent[hidden] {
  display: none;
}

.agent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px 13px 16px;
  border-bottom: 1px solid var(--border);
}

.agent__title {
  margin: 0;
  font-size: 0.9375em;
  font-weight: 650;
}

.agent__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  font: inherit;
  font-size: 1.125em;
  line-height: 1;
  cursor: pointer;
}

.agent__close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.agent__log {
  flex: 1;
  min-height: 120px;
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent__msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 0.875em;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent__msg--them {
  align-self: flex-start;
  background: var(--bg-subtle);
  color: var(--text);
}

.agent__msg--you {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-text);
}

.agent__msg--problem {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Three dots while it is thinking. Kept as text so it needs no extra markup. */
.agent__msg--waiting {
  color: var(--text-muted);
  font-style: italic;
}

.agent__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}

.agent__chip {
  padding: 7px 11px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.8125em;
  cursor: pointer;
  text-align: left;
}

.agent__chip:hover {
  border-color: var(--border-strong);
}

.agent__form {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}

.agent__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.875em;
}

.agent__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.agent__send {
  padding: 0 14px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
}

.agent__send:disabled {
  opacity: 0.5;
  cursor: progress;
}

.agent__foot {
  margin: 0;
  padding: 0 16px 12px;
  color: var(--text-muted);
  font-size: 0.75em;
  text-align: center;
}

/* ===========================================================================
   Events: a goal and how close it is
   =========================================================================== */

.goal {
  padding-bottom: var(--pad);
  margin-bottom: var(--pad);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.goal__title {
  margin: 0 0 6px;
  font-size: 1.25em;
  font-weight: 650;
}

.goal__blurb {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.9375em;
  line-height: 1.5;
  white-space: pre-wrap;
  text-align: left;
}

.goal__bar {
  height: 10px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.goal__fill {
  height: 100%;
  min-width: 3px;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.goal__figures {
  margin: 10px 0 0;
  font-size: 0.9375em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.goal__figures.is-reached {
  color: var(--success);
}

.goal__ends {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.8125em;
}

/* The way in to an event, from the page that advertises it. */
.events {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: var(--card-width);
  margin: 0 auto 14px;
}

.events__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.events__item:hover {
  border-color: var(--border-strong);
}

.events__name {
  font-weight: 600;
  font-size: 0.9375em;
}

.events__progress {
  color: var(--text-muted);
  font-size: 0.8125em;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

.events__bar {
  grid-column: 1 / -1;
  height: 6px;
  margin-top: 4px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.events__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* ===========================================================================
   Reading pages: terms, privacy, about
   =========================================================================== */

/* The gate. Its own card, in the site's theme, with nothing else on the page —
   there is nothing else to show, which is the point. */
.locked {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.locked__title {
  margin: 0 0 8px;
  font-size: 1.4em;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.locked__blurb {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 0.925em;
  white-space: pre-wrap;
}

/* The wait. Bigger and darker than the date under it, because "opens in 3
   hours" is what somebody at a locked door actually wants to know. */
.locked__countdown {
  margin: 10px 0 2px;
  color: var(--text);
  font-size: 1.0625em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.locked__until {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.8125em;
}

/* With nothing to count down to there is no heading for the date to sit
   under, so it keeps the room the countdown would have had. */
.locked__countdown[hidden] + .locked__until {
  margin-top: 10px;
}

.locked .field {
  text-align: left;
}

/* The trail at the top of a reading page: where this is, and the way back. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.85em;
  color: var(--text-muted);
}

.crumbs__sep {
  color: var(--border);
}

.crumbs__here {
  color: var(--text-muted);
}

/* Reading pages start at the top whatever the theme says. */
.page--reading {
  align-items: flex-start;
  padding-top: 48px;
  padding-bottom: 48px;
  --page-fill: 0;
}

.prose {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--pad);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.prose__title {
  margin: 0 0 4px;
  font-size: 1.5em;
  font-weight: 650;
}

.prose__updated {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.prose__heading {
  margin: 28px 0 8px;
  font-size: 1.0625em;
  font-weight: 650;
}

.prose__p {
  margin: 0 0 14px;
  font-size: 0.9375em;
  line-height: 1.65;
  /* Single line breaks inside a paragraph are kept, because somebody writing a
     policy in a plain box uses them to mean something. */
  white-space: pre-wrap;
}

.prose__list {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 0.9375em;
  line-height: 1.65;
}

.prose__list li {
  margin-bottom: 6px;
}

.prose__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.prose__link {
  margin-top: 0;
}

/* The agreement box on the request form. */
.agree__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.875em;
  line-height: 1.5;
}

.agree__link {
  margin-top: 0;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

/* The About text on the home page, above the form. */
/* The way on to the About page, under the introduction. */
.header__more {
  margin: 10px 0 0;
  font-size: 0.925em;
}

/* ===========================================================================
   Gift lists

   A list is a column of things rather than one card, so it is allowed to be
   wider than a payment page — but it keeps the same colours, the same corners
   and the same type, because it is the same person's page.
   =========================================================================== */

.page--wide .header,
.page--wide .footer {
  max-width: 560px;
}

.gifts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}

.gifts__blurb {
  margin: 10px 0 0;
  color: var(--text-muted);
  white-space: pre-line;
}

.gifts__how {
  max-width: 560px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  text-align: center;
}

.gifts__empty {
  color: var(--text-muted);
}

.gift {
  padding: var(--pad);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Taken things stay on the list — crossing them out is the point — but they
   step back so the things still wanted are what you read. */
.gift--bought {
  opacity: 0.62;
}

.gift__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gift__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
}

.gift--bought .gift__name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.gift__mark {
  flex: none;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.gift__mark--bought {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.gift__mark--thinking {
  background: var(--bg-subtle);
  color: var(--text);
}

.gift__note {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.gift__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.gift__link {
  padding: 6px 12px;
  background: var(--bg-subtle);
  color: var(--text);
  border-radius: 99px;
  font-size: 0.82rem;
  text-decoration: none;
}

.gift__link:hover {
  background: var(--accent);
  color: var(--accent-text);
}

/* The same button as the one that takes a payment, because it is the same
   page and the theme decides what a button looks like here. Left to the
   browser it would come out in the browser's own blue, which belongs to no
   theme anybody chose. */
.gift__take {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.gift__take:hover:not(:disabled) {
  opacity: 0.88;
}

.gift__take:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* The form for saying you have got one. */
.giftbox {
  width: calc(100% - 32px);
  max-width: 460px;
  padding: 0;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.giftbox::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.giftbox__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.giftbox__title {
  margin: 0;
  font-size: 1.1rem;
}

.giftbox__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.giftbox__row {
  display: flex;
  gap: 10px;
}

.giftbox__row .giftbox__field {
  flex: 1;
  min-width: 0;
}

.giftbox__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.giftbox__field input {
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
}

.giftbox__sure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}

.giftbox__sure legend {
  padding: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.giftbox__sure input[type='radio'] {
  margin-top: 2px;
  accent-color: var(--accent);
}

.giftbox__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.giftbox__option:has(input:checked) {
  border-color: var(--accent);
  background: var(--bg-subtle);
}

.giftbox__option > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.giftbox__hint {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.giftbox__error {
  margin: 0;
  color: #b3261e;
  font-size: 0.85rem;
}

.giftbox__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.giftbox__button {
  flex: 1;
  padding: 12px;
  background: var(--bg-subtle);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.giftbox__button:hover:not(:disabled) {
  background: var(--bg-subtle-hover);
}

.giftbox__button--go {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
}

.giftbox__button--go:hover:not(:disabled) {
  background: var(--accent);
  opacity: 0.88;
}

.giftbox__button:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* ===========================================================================
   Things on a list that are bought here

   A picture, a price and a button. The price is shown broken into its parts
   whenever it has parts, because a total that turns out to have had tax and
   delivery folded into it is where people stop trusting a page.
   =========================================================================== */

.gift__picture {
  display: block;
  width: 100%;
  max-height: 260px;
  margin: 12px 0 0;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--bg-subtle);
}

.gift__about {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 0.9rem;
  white-space: pre-line;
}

.gift__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 12px 0 0;
  font-size: 1.15rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.gift__parts {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.gift__trouble {
  margin: 8px 0 0;
  color: #b3261e;
  font-size: 0.85rem;
}

/* ===========================================================================
   Where your parcel has got to

   Read in a hurry, usually on a phone, usually by somebody who wants one
   fact. The newest line is the loudest thing on the page and everything else
   is below it in the order it happened.
   =========================================================================== */

.track__label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.track__state {
  margin: 6px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.track {
  margin-top: var(--gap);
}

.track__steps {
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
  border-left: 2px solid var(--border);
}

.step {
  position: relative;
  padding: 0 0 18px;
}

.step:last-child {
  padding-bottom: 0;
}

/* The dot on the line. Drawn rather than bulleted, so the newest one can be
   the filled one without the list changing shape. */
.step::before {
  position: absolute;
  top: 4px;
  left: -29px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 50%;
  content: '';
}

.step--now::before {
  background: var(--accent);
  border-color: var(--accent);
}

.step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.step__what {
  font-weight: 600;
}

.step--now .step__what {
  color: var(--accent);
}

.step__when {
  flex: none;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.step__where,
.step__note {
  margin: 3px 0 0;
  font-size: 0.88rem;
}

.step__note {
  color: var(--text-muted);
}

.track__card {
  margin-top: var(--gap);
  padding: var(--pad);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.track__heading {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.track__number {
  margin: 0;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.track__who {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.track__out {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-size: 0.88rem;
}

.track__lines {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  margin: 0;
  font-size: 0.92rem;
}

.track__lines dt {
  color: var(--text-muted);
}

.track__lines dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.track__lines .track__total {
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 650;
}

.track__address {
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
  font-style: normal;
}

.track__note {
  margin: var(--gap) 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ===========================================================================
   A page that is a menu

   When a part of a page lives at its own address, these are the ways through
   to it. Big targets, because this is the whole of what some pages are.
   =========================================================================== */

.menu {
  display: block;
  width: 100%;
  max-width: var(--card-width);
  margin: 0 auto var(--gap);
}

.menu__hint {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.9em;
  text-align: center;
}

.menu__row {
  display: grid;
  gap: 8px;
}

/* The same button as an amount, in the same colours. These sit a few
   centimetres from the amount buttons and the custom-amount button, and an
   outlined white button beside a filled grey one reads as two different
   kinds of thing when it is one: something on this page to press. */
.menu__one,
.links__one {
  display: block;
  padding: 14px 16px;
  background: var(--bg-subtle);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.menu__one:hover,
.links__one:hover {
  background: var(--bg-subtle-hover);
  border-color: var(--accent);
}

/* The first way through is the one most people want, so it leads. */
.menu__one:first-child {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
}

.menu__one:first-child:hover {
  background: var(--accent);
  border-color: transparent;
  opacity: 0.88;
}

.links {
  display: grid;
  gap: 8px;
}

/* Inside the card the links sit above the steps, so they need a parting line
   when there is something under them — and only then. */
.links:not(.links--alone):not(:last-child) {
  margin-bottom: var(--gap);
  padding-bottom: var(--gap);
  border-bottom: 1px solid var(--border);
}

.menu__back {
  margin: var(--gap) 0 0;
  text-align: center;
}

.menu__back a {
  color: var(--text-muted);
  font-size: 0.9em;
  text-decoration: none;
}

.menu__back a:hover {
  color: var(--text);
}

/* The reference on the something-went-wrong page: there to be read out or
   pasted into a message, so it is set apart and easy to select. */
.result__ref {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  user-select: all;
}