/* Referral Market
   Layout: a left-aligned document on one wide column. The terms sheet (a listing,
   a pass) is the only drawn object; everything else is type, tables and hairlines. */

@font-face { font-family: "Darkly Exchange"; src: url("../fonts/DarklyExchange-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Darkly Exchange"; src: url("../fonts/DarklyExchange-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #F5F3F8;
  --surface: #FFFFFF;
  --ink: #1B1324;
  --ink-soft: #574C64;
  --rule: #DCD5E5;
  --rule-strong: #B4A9C2;
  --control: #857A94;
  --plum: #47196B;
  --plum-hover: #391256;
  --on-plum: #FFFFFF;
  --link: #5A2590;
  --brass: #7A5A12;
  --good: #1D6F47;
  --good-soft: #DDF1E6;
  --wait: #7A5200;
  --wait-soft: #F6E9C9;
  --bad: #9B2730;
  --bad-soft: #F8DEE0;
  --idle-soft: #E9E4F0;
  --focus: #7A3FC0;
  --qr-ink: #1B1324;
  --qr-ground: #FFFFFF;

  --display: "Darkly Exchange", "Public Sans", system-ui, sans-serif;
  --text: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 70rem;
  --gutter: 1.25rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #130C1A;
    --surface: #1B1225;
    --ink: #EEE8F4;
    --ink-soft: #A99DB7;
    --rule: #30233E;
    --rule-strong: #4C3B5F;
    --control: #7A6A8E;
    --plum: #7A3DB3;
    --plum-hover: #8B4BC7;
    --on-plum: #FFFFFF;
    --link: #CDB0EF;
    --brass: #E0BF6A;
    --good: #6CCB9A;
    --good-soft: #143524;
    --wait: #E3BC5E;
    --wait-soft: #3A2E10;
    --bad: #F09097;
    --bad-soft: #42161B;
    --idle-soft: #2A1F36;
    --focus: #C39BEF;
    --qr-ink: #1B1324;
    --qr-ground: #FFFFFF;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #130C1A;
  --surface: #1B1225;
  --ink: #EEE8F4;
  --ink-soft: #A99DB7;
  --rule: #30233E;
  --rule-strong: #4C3B5F;
  --control: #7A6A8E;
  --plum: #7A3DB3;
  --plum-hover: #8B4BC7;
  --on-plum: #FFFFFF;
  --link: #CDB0EF;
  --brass: #E0BF6A;
  --good: #6CCB9A;
  --good-soft: #143524;
  --wait: #E3BC5E;
  --wait-soft: #3A2E10;
  --bad: #F09097;
  --bad-soft: #42161B;
  --idle-soft: #2A1F36;
  --focus: #C39BEF;
  --qr-ink: #1B1324;
  --qr-ground: #FFFFFF;
  color-scheme: dark;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.25rem); line-height: 1.08; }
h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.15; }
h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.lede { font-size: 1.125rem; color: var(--ink-soft); max-width: 36rem; }
.soft { color: var(--ink-soft); }
.small { font-size: 0.875rem; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header and footer */

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.875rem; }
.wordmark { column-gap: 0.25em; font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark span { font-weight: 400; }
.header-action { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.8rem; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.header-action:hover { border-color: var(--control); }
.site-header .site-nav { margin-left: auto; }
.header-action svg { width: 1.375rem; height: 1.375rem; flex: none; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; font-size: 0.9375rem; }
.site-nav a { color: var(--ink); text-decoration: none; padding-block: 0.375rem; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--rule-strong); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--plum); font-weight: 600; }
.site-nav .account { color: var(--ink-soft); }

.site-footer { border-top: 1px solid var(--rule); margin-top: clamp(2rem, 5vw, 3rem); font-size: 0.875rem; color: var(--ink-soft); }
.site-footer .wrap { display: flex; flex-direction: column; gap: 0.125rem; padding-block: 0.75rem 1.125rem; }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover, .theme-toggle:hover { color: var(--ink); }
.theme-toggle { display: inline-flex; align-items: center; font: inherit; color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; font-size: 0.8125rem; }
.footer-legal a { white-space: nowrap; }
@media (min-width: 48rem) {
  .site-footer .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.25rem; }
  .footer-legal { order: -1; }
}

main { padding-block: clamp(1.25rem, 3.5vw, 2.5rem) 0; flex: 1 0 auto; }
main:focus { outline: none; }
.section { padding-block: clamp(1.75rem, 4.5vw, 2.75rem); border-top: 1px solid var(--rule); }
.section > h2 { margin-bottom: 1rem; }
.section.columns > h2, .section.columns > div > h2 { margin-bottom: 0; }
.page-head { padding-bottom: clamp(1.5rem, 3.5vw, 2rem); }
.page-head h1 { max-width: 22ch; }
.page-head .lede { margin-top: 1rem; }
.page-head .actions { margin-top: 1.25rem; }
.page-head .prose { margin-top: 0.75rem; }

/* Buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.6rem 1.15rem; border: 1px solid transparent; border-radius: 4px; font: 600 0.9375rem/1.2 var(--text); text-align: center; text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--plum); color: var(--on-plum); }
.btn-primary:hover { background: var(--plum-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--control); }
.btn-secondary:hover { border-color: var(--ink-soft); }
.btn-quiet { background: none; color: var(--link); padding-inline: 0.25rem; min-height: 2.25rem; }
.btn-danger { background: var(--surface); color: var(--bad); border-color: var(--control); }
.btn-small { min-height: 2.25rem; padding: 0.35rem 0.8rem; font-size: 0.875rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Home */

.hero { display: grid; gap: 2.5rem; align-items: start; padding-bottom: 3rem; }
.hero h1 { max-width: 19ch; }
.hero .lede { margin-top: 1.25rem; }
.hero .actions { margin-top: 1.75rem; }
.hero .specimen { max-width: 30rem; }
.stage { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ink-soft); max-width: 34rem; }
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; padding-block: 1.5rem 4rem; }
}

.sides { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .sides { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.sides h3 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.sides p { margin-top: 0.5rem; color: var(--ink-soft); }
.plain-list { margin-top: 1rem; display: grid; gap: 0; }
.plain-list li { padding-block: 0.7rem; border-top: 1px solid var(--rule); }
.plain-list li:last-child { border-bottom: 1px solid var(--rule); }
.sides .actions { margin-top: 1.25rem; }

.columns { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 48rem) { .columns { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.columns p + p { margin-top: 0.75rem; }
.prose { max-width: 40rem; }
.prose p + p { margin-top: 0.75rem; }

/* Terms sheet: one listing, or one pass */

.sheet { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px; }
.sheet-head { padding: 1.125rem 1.25rem 1rem; border-bottom: 1px solid var(--rule); }
.sheet-head h1, .sheet-head h2, .sheet-head h3 { font-family: var(--text); font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }
.pass .sheet-head h1 { font-size: 1.375rem; }
.sheet-head p { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.125rem; }
.sheet-fee { padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.sheet-fee strong { font-family: var(--display); font-weight: 700; font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sheet-fee span { color: var(--ink-soft); }
.terms { display: grid; }
.terms > div { display: grid; grid-template-columns: minmax(5.5rem, 2fr) minmax(0, 3fr); gap: 1rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--rule); }
.terms > div:last-child { border-bottom: 0; }
.terms dt { color: var(--ink-soft); font-size: 0.9375rem; }
.terms dd { font-size: 0.9375rem; overflow-wrap: anywhere; }
.sheet-foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--rule); display: grid; gap: 0.75rem; }
figure.specimen figcaption { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--ink-soft); }

/* Tables */

.table-scroll { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ledger th { text-align: left; font-weight: 600; font-size: 0.8125rem; color: var(--ink-soft); padding: 0 0.75rem 0.5rem 0; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.ledger td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .nowrap { white-space: nowrap; }
.ledger td.who { color: var(--ink-soft); }
.ledger .step { width: 2.5rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ledger th.term { width: 11rem; }
.ledger tbody th { text-align: left; font-weight: 400; font-size: 0.9375rem; color: var(--ink); padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; white-space: normal; }
@media (max-width: 30rem) { .ledger th.term { width: 7.5rem; } }
/* On a phone the answered-passes table reads as a list: each row a block, the fee on the first line's right. */
@media (max-width: 40rem) {
  .ledger.stack, .ledger.stack tbody { display: block; }
  .ledger.stack thead { display: none; }
  .ledger.stack tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  .ledger.stack td { display: block; padding: 0; border: 0; }
  .ledger.stack td:nth-child(1) { grid-column: 1; grid-row: 1; color: var(--ink-soft); font-size: 0.875rem; align-self: baseline; }
  .ledger.stack td:nth-child(2) { grid-column: 2; grid-row: 1; align-self: baseline; }
  .ledger.stack td:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
  .ledger.stack td:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
}

.status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; background: var(--idle-soft); color: var(--ink); }
.status-good { background: var(--good-soft); color: var(--good); }
.status-wait { background: var(--wait-soft); color: var(--wait); }
.status-bad { background: var(--bad-soft); color: var(--bad); }

.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); margin-bottom: 1.5rem; }
.totals > div { padding: 0.75rem 1rem 0.75rem 0; }
.totals dt { font-size: 0.875rem; color: var(--ink-soft); }
.totals dd { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (max-width: 33.99rem) {
  .totals { grid-template-columns: 1fr; }
  .totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--rule); }
  .totals > div:first-child { border-top: 0; }
  .totals dd { font-size: 1.375rem; }
}

/* Forms */

.form { display: grid; gap: 1.125rem; max-width: 34rem; }
.form-row { display: grid; gap: 1.125rem; }
@media (min-width: 34rem) { .form-row { grid-template-columns: 1fr 1fr; } .form-row.city { grid-template-columns: 2fr 1fr; } }
.field { display: grid; gap: 0.35rem; min-width: 0; align-content: start; }
.field label, .field .label { font-size: 0.875rem; font-weight: 600; }
.field .hint { font-size: 0.8125rem; color: var(--ink-soft); font-weight: 400; }
.field input, .field select, .field textarea, .control {
  width: 100%; min-height: 2.75rem; padding: 0.55rem 0.7rem; font: 400 1rem/1.3 var(--text); color: var(--ink);
  background: var(--surface); border: 1px solid var(--control); border-radius: 4px;
}
.field input::placeholder, .control::placeholder { color: var(--ink-soft); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .control:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.form .btn { justify-self: start; }
.notice { font-size: 0.875rem; color: var(--ink-soft); border-left: 2px solid var(--rule-strong); padding-left: 0.875rem; max-width: 40rem; }
.notice p + p { margin-top: 0.5rem; }
.banner { font-size: 0.875rem; padding: 0.55rem 0.8rem; border: 1px dashed var(--rule-strong); border-radius: 4px; color: var(--ink-soft); margin-bottom: 1.25rem; }

/* Working app: offers */

.app-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; margin-bottom: 1rem; }
.app-head h1 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); }
.filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.625rem 0.75rem; margin-bottom: 1rem; align-items: end; }
.filters .field { gap: 0.2rem; }
.filters select, .filters input { width: 100%; min-width: 0; }
.filters select { padding-left: 0.6rem; padding-right: 1.6rem; text-overflow: ellipsis; }
.search-box { display: flex; gap: 0.375rem; }
.search-box input { flex: 1 1 auto; }
.search-box .btn { flex: none; padding-inline: 0.75rem; }
@media (min-width: 52rem) {
  .filters { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.5fr); max-width: 64rem; }
}
.offer-record { display: block; margin-top: 0.1rem; color: var(--ink); }
.filters .field label { font-weight: 500; color: var(--ink-soft); font-size: 0.8125rem; }

.offer-list { border-top: 1px solid var(--rule-strong); }
.offer-list > li { border-bottom: 1px solid var(--rule); }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; padding: 0.95rem 0; color: var(--ink); text-decoration: none; }
.offer:hover .offer-name { text-decoration: underline; text-underline-offset: 0.18em; }
.offer-name { font-weight: 600; grid-column: 1; grid-row: 1; overflow-wrap: anywhere; min-width: 0; }
.offer-fee { grid-column: 2; grid-row: 1 / span 2; align-self: start; text-align: right; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.offer-fee small { display: block; max-width: 9rem; white-space: normal; font: 400 0.8125rem/1.35 var(--text); color: var(--ink-soft); }
.offer-where { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 0.9rem; font-size: 0.875rem; color: var(--ink-soft); }
.offer-where .cat::before { content: "\00b7"; margin-right: 0.9rem; }
.offer-terms { grid-column: 1 / -1; grid-row: 3; font-size: 0.875rem; color: var(--ink-soft); }
@media (min-width: 52rem) {
  .offer { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 2.5fr) 12rem; grid-template-rows: auto auto; gap: 0.1rem 1.5rem; }
  .offer-where { display: contents; }
  .offer-where .cat { display: block; grid-column: 1; grid-row: 2; font-size: 0.875rem; color: var(--ink-soft); }
  .offer-where .cat::before { content: none; margin: 0; }
  .offer-where .place { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.9375rem; color: var(--ink); }
  .offer-terms { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .offer-fee { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
  .offer-fee small { max-width: none; }
}
.empty { padding: 1.5rem 0; max-width: 34rem; }
.empty h2 { font-family: var(--text); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
.empty p { color: var(--ink-soft); margin-top: 0.4rem; }
.empty .actions { margin-top: 1rem; }

.detail { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .detail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; } }
.back { display: inline-block; font-size: 0.9375rem; margin-bottom: 1rem; }

/* Pass */

.pass { max-width: 24rem; margin-inline: auto; }
.pass .sheet-head { text-align: center; }
.pass-code { padding: 1.25rem; display: grid; justify-items: center; gap: 0.9rem; border-bottom: 1px solid var(--rule); }
.pass-qr { width: min(14rem, 100%); background: var(--qr-ground); color: var(--qr-ink); border-radius: 4px; line-height: 0; }
.pass-qr svg { width: 100%; height: auto; display: block; }
.pass-id { font-family: var(--display); font-weight: 700; font-size: 1.75rem; letter-spacing: 0.08em; line-height: 1; }

/* Phone tab bar for the working app */

/* The scanner: the camera in a square, with the status line under it. */
.scanner { max-width: 26rem; }
/* The picture is never taller than about half the screen, so the line under it stays in view. */
.scanner-view { position: relative; aspect-ratio: 1; max-height: 46vh; max-height: 46dvh; border-radius: 0.875rem; overflow: hidden; background: #000; }
.scanner-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-view::after { content: ""; position: absolute; inset: 0; margin: auto; height: 74%; aspect-ratio: 1; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 0.75rem; pointer-events: none; }
.recent-next { margin-top: 2rem; }
.scanner-status { margin-top: 0.75rem; font-weight: 500; }
.from-connector { margin-bottom: 1rem; max-width: 40rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--plum); background: var(--surface); overflow-wrap: anywhere; line-height: 1.4; }
.from-connector .soft { font-size: 0.8125rem; margin-right: 0.35rem; }
.from-connector .soft::after { content: ":"; }
/* The answer page on a phone: less air above, so the pass, the note and the button share one screen. */
@media (max-width: 47.99rem) {
  .answer-page { margin-top: -1.25rem; }
  .answer-page .app-head { margin-bottom: 0.625rem; }
  .answer-page .request-option { margin-top: 0.1rem; }
.answer-facts { margin-bottom: 0.875rem; line-height: 1.45; }
  .answer-page .answer .form { gap: 0.875rem; }
}
.more > summary { cursor: pointer; color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; min-height: 2.75rem; display: flex; align-items: center; width: fit-content; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+"; display: inline-block; width: 1.1em; font-weight: 600; text-decoration: none; }
.more[open] > summary::before { content: "\2212"; }
.more-body { margin-top: 0.5rem; }
.answer-facts { margin-bottom: 1.25rem; max-width: 40rem; overflow-wrap: anywhere; }
.recent .pending > li { flex-wrap: nowrap; }
.recent .pending > li > div:first-child { flex: 1 1 auto; }
.recent .btn { white-space: nowrap; }
.quick-fill { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: -0.375rem; }
.quick-fill .btn { min-width: 2.75rem; }
.quick-fill.phrases .btn { font-weight: 500; }
.quick-fill .btn[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: var(--on-plum); }

/* The pass as it is held up at the business. It fills the screen it is shown on and never
   scrolls: the words take the height they need and the code takes the rest. The ticket keeps
   its own colours in Day and Night view, so a pass always looks like a pass. */
body.show-pass { height: 100vh; height: 100dvh; min-height: 0; }
body.show-pass main { flex: 1 1 auto; min-height: 0; padding-block: 0; display: flex; flex-direction: column; }
.pass-screen {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 27rem; margin-inline: auto;
  display: flex; flex-direction: column; gap: 0.375rem;
  padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.875rem, env(safe-area-inset-right, 0px)) max(0.25rem, env(safe-area-inset-bottom, 0px)) max(0.875rem, env(safe-area-inset-left, 0px));
}
.pass-flash { font-size: 0.875rem; line-height: 1.35; color: var(--ink-soft); text-align: center; }
.ticket {
  --t-ground: #3F1661; --t-ink: #F7F2FC; --t-soft: #CFBFE2; --t-rule: rgba(247, 242, 252, 0.3); --t-gold: #EBCB7A;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: var(--t-ground); color: var(--t-ink); border-radius: 1.125rem;
}
.ticket-head { padding: clamp(0.875rem, 2.6vh, 1.75rem) 1.25rem 0; text-align: center; }
.ticket-head h1 {
  font-size: clamp(1.375rem, 0.85rem + 2.5vh, 2.125rem); line-height: 1.1; letter-spacing: -0.02em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.ticket-head p { margin-top: 0.3rem; font-size: 0.875rem; line-height: 1.3; color: var(--t-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-scan { flex: 1 1 0; min-height: 7rem; container-type: size; display: grid; place-items: center; margin: clamp(0.625rem, 2vh, 1.25rem) 1.25rem clamp(0.5rem, 1.6vh, 1rem); }
.ticket .pass-qr { width: min(62vw, 34vh, 19rem); width: min(100cqw, 100cqh, 19rem); aspect-ratio: 1; border-radius: 0.75rem; overflow: hidden; }
.ticket .pass-qr svg { width: 100%; height: 100%; }
/* A browser that cannot measure the space left for the code gets a code sized from the screen instead,
   small enough that it never reaches the number under it. */
@supports not (width: 1cqh) {
  .ticket-scan { flex: 0 1 auto; min-height: 0; }
  .ticket .pass-qr { width: min(60vw, 24vh, 19rem); }
  .ticket-stub { margin-top: auto; }
}
.ticket-word { font-family: var(--display); font-weight: 700; font-size: clamp(1.875rem, 1rem + 4vh, 3rem); line-height: 1.05; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.ticket-id { display: grid; justify-items: center; gap: 0.4rem; padding: 0 1.25rem clamp(0.75rem, 2.2vh, 1.375rem); text-align: center; font-size: 0.875rem; line-height: 1.35; }
.ticket .pass-id { font-size: clamp(1.5rem, 0.9rem + 2.6vh, 2.125rem); letter-spacing: 0.12em; margin-right: -0.12em; }
.ticket-soft { color: var(--t-soft); }
.ticket-stub { position: relative; display: grid; gap: 0.45rem; padding: clamp(0.75rem, 2.2vh, 1.25rem) 1.25rem clamp(0.625rem, 1.8vh, 1rem); border-top: 2px dashed var(--t-rule); }
.ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; top: -0.6875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--paper); }
.ticket-stub::before { left: -0.625rem; }
.ticket-stub::after { right: -0.625rem; }
.ticket-perk { font-weight: 600; font-size: 1.125rem; line-height: 1.25; color: var(--t-gold); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ticket-how { font-size: 0.9375rem; line-height: 1.4; }
.invite-points { display: grid; gap: 0.2rem; font-size: 0.9375rem; line-height: 1.35; }
.invite-points li { padding-left: 1rem; position: relative; }
.invite-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--t-gold); }
.ticket-note { font-size: 0.75rem; line-height: 1.4; color: var(--t-soft); }
.ticket-brand { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 0.2rem; padding-top: 0.55rem; border-top: 1px solid var(--t-rule); font-size: 0.8125rem; line-height: 1.2; color: var(--t-soft); }
.ticket-brand .wordmark { color: var(--t-ink); font-size: 1rem; min-height: 0; display: inline; }
.ticket a:focus-visible { outline-color: var(--t-ink); }
.pass-actions { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0 1rem; min-height: 2.75rem; font-size: 0.9375rem; color: var(--ink-soft); }
.pass-actions a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.pass-actions .btn { margin-right: auto; }
/* A screen much taller than a phone: the pass keeps a phone's proportions and sits in the middle. */
@media (min-height: 56rem) { .pass-screen { flex: 0 0 auto; height: 52rem; margin-block: auto; } }
/* A short screen: the line under the name goes first, then the spacing tightens. */
@media (max-height: 38rem) {
  .ticket-head p { display: none; }
  .ticket-scan { min-height: 6rem; }
  .ticket-perk { font-size: 1rem; -webkit-line-clamp: 1; line-clamp: 1; }
  .ticket-how { font-size: 0.875rem; }
  .ticket-note { font-size: 0.6875rem; line-height: 1.3; }
  .pass-flash { font-size: 0.8125rem; }
}
/* A very short screen: one line each for the name and the offer, and the code may go a little smaller. */
@media (max-height: 33rem) and (orientation: portrait) {
  .pass-screen { padding-top: 0.5rem; gap: 0; }
  .ticket-head { padding-top: 0.625rem; }
  .ticket-head h1 { font-size: 1.25rem; -webkit-line-clamp: 1; line-clamp: 1; }
  .ticket-scan { min-height: 5.5rem; margin-block: 0.5rem 0.375rem; }
  .ticket .pass-id { font-size: 1.375rem; }
  .ticket-id { padding-bottom: 0.5rem; gap: 0.25rem; }
  .ticket-stub { padding-block: 0.5rem 0.5rem; gap: 0.3rem; }
  .ticket-perk { font-size: 1rem; -webkit-line-clamp: 1; line-clamp: 1; }
  .ticket-brand { padding-top: 0.35rem; margin-top: 0; }
}
/* A phone turned on its side: the code on the left, the words beside it, each kept to a line or two. */
@media (orientation: landscape) and (max-height: 30rem) {
  .pass-screen { max-width: 48rem; padding-top: 0.5rem; gap: 0; }
  .ticket { display: grid; grid-template-columns: minmax(9rem, 38%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .ticket-scan { grid-column: 1; grid-row: 1 / -1; margin: 0.75rem 0.25rem 0.75rem 0.875rem; min-height: 0; }
  .ticket-head { grid-column: 2; text-align: left; padding: 0.75rem 1.125rem 0 0.75rem; }
  .ticket-head h1 { font-size: 1.25rem; -webkit-line-clamp: 1; line-clamp: 1; }
  .ticket-head p { display: none; }
  .ticket-id { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.75rem; text-align: left; padding: 0.3rem 1.125rem 0.4rem 0.75rem; }
  .ticket .pass-id { font-size: 1.375rem; }
  .ticket-stub { grid-column: 2; align-content: end; gap: 0.3rem; padding: 0.5rem 1.125rem 0.625rem 0.75rem; border-top-width: 1px; overflow: hidden; }
  .ticket-stub::before, .ticket-stub::after { display: none; }
  .ticket-perk { font-size: 1rem; -webkit-line-clamp: 1; line-clamp: 1; }
  .ticket-how { font-size: 0.875rem; line-height: 1.3; }
  .ticket-note { font-size: 0.6875rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .ticket-brand { padding-top: 0.35rem; margin-top: 0; }
}

.tabbar { display: none; }
@media (max-width: 47.99rem) {
  body.has-tabbar { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .site-nav.app-nav { display: none; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset: auto 0 0 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--rule-strong); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tabbar a { display: grid; justify-items: center; gap: 0.15rem; padding: 0.5rem 0.25rem 0.45rem; font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; border-top: 2px solid transparent; margin-top: -1px; }
  .tabbar a[aria-current="page"] { color: var(--ink); border-top-color: var(--plum); font-weight: 600; }
  .tabbar svg { width: 1.375rem; height: 1.375rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .site-nav a, .theme-toggle { transition: background-color 120ms, border-color 120ms, color 120ms; }
}

/* Business console */

.block { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 0.75rem; }
.block-head h2 { font-size: 1.375rem; }
.code-entry { display: flex; gap: 0.5rem; flex: 1 1 16rem; max-width: 24rem; }
.code-entry .control { min-width: 0; }
/* Opening hours: one block per day, the two times side by side, fitting any phone. */
.hours-week { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); margin-top: 0.75rem; }
.hours-day { padding: 0.6rem 0 0.8rem; border-bottom: 1px solid var(--rule); }
.hours-day-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hours-day-name { font-weight: 600; }
.hours-closed { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; font-size: 0.9375rem; }
.hours-closed input { width: 1.25rem; height: 1.25rem; }
.hours-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
.hours-times label { display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--ink-soft); }
.hours-times .control { width: 100%; min-width: 0; }
.hours-day.is-closed .hours-times { opacity: 0.45; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { font-weight: 600; padding: 0; }
/* Open now, closing soon, closed: words first, a colour second. */
.open-state { font-size: 0.875rem; font-weight: 600; }
.open-state.is-open { color: var(--good); }
.open-state.is-closing { color: var(--wait); }
.open-state.is-closed { color: var(--ink-soft); font-weight: 400; }
.code-entry .btn { white-space: nowrap; }
.pending { border-top: 1px solid var(--rule-strong); }
.pending > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.pending > li > div:first-child { min-width: 0; }

/* Spacing helpers */

.flush { margin-top: 0; }
.wrap-any { overflow-wrap: anywhere; min-width: 0; }
.mt-s { margin-top: 0.75rem; }
.mt-m { margin-top: 1.25rem; }
.mt-l { margin-top: 2rem; }
.form.narrow { max-width: 24rem; }

/* Records: one row per referral. A table on wide screens, stacked lines on a phone. */

.records { border-top: 1px solid var(--rule-strong); font-size: 0.9375rem; }
.records > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.records .records-head { display: none; }
.r-biz { grid-column: 1; grid-row: 1; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.r-biz small { display: block; font-weight: 400; font-size: 0.875rem; color: var(--ink-soft); }
.r-amt { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.r-line { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.r-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.9rem; font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.r-status { text-align: right; }
.r-note { grid-column: 1 / -1; font-size: 0.875rem; color: var(--ink-soft); }
@media (min-width: 46rem) {
  .records > li { grid-template-columns: 5.5rem minmax(0, 2.4fr) 7.5rem minmax(0, 2fr) 6.5rem; align-items: baseline; gap: 0.15rem 1.25rem; }
  .records .records-head { display: grid; padding: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); border-bottom-color: var(--rule-strong); }
  .records { border-top: 0; }
  .records-head > span { grid-row: 1; }
  .r-line, .r-meta { display: contents; }
  .r-meta .r-date { grid-column: 1; grid-row: 1; font-size: 0.9375rem; color: var(--ink); }
  .r-biz { grid-column: 2; font-weight: 400; }
  .r-biz small { display: block; margin-left: 0; }
  .r-meta .r-id { grid-column: 3; grid-row: 1; font-size: 0.9375rem; color: var(--ink); }
  .r-status { grid-column: 4; grid-row: 1; text-align: left; }
  .r-note { grid-column: 4; grid-row: 2; }
  .r-amt { grid-column: 5; font-weight: 400; }
}

/* Form extras: a tick box, a hint under a label, a multi-line box, a plain note */

.field .hint { margin: 0; }
.field textarea { min-height: 5.5rem; resize: vertical; }
.field.check label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; font-weight: 400; font-size: 0.9375rem; cursor: pointer; }
.field.check input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0.15rem 0 0; padding: 0; accent-color: var(--plum); }
.form-note { font-size: 0.9375rem; color: var(--ink); background: var(--idle-soft); border-radius: 4px; padding: 0.6rem 0.8rem; max-width: 44rem; margin-bottom: 1.25rem; scroll-margin-top: 5rem; }
.form-note:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-error.narrow { max-width: 24rem; }
.mb-s { margin-bottom: 0.6rem; }
.mb-m { margin-bottom: 1rem; }
.note-line { margin-bottom: 1.25rem; }
.cost-table { width: 100%; max-width: 30rem; }
.weekly-fee { padding: 0.75rem 1rem; border-radius: 8px; background: color-mix(in srgb, var(--plum) 14%, transparent); border: 1px solid color-mix(in srgb, var(--plum) 45%, transparent); font-size: 0.9375rem; }
.weekly-fee strong { color: var(--ink); }
.payouts { margin-bottom: 1.25rem; padding: 0.875rem 1rem; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--surface); }
.payouts .status { margin-right: 0.35rem; }
.cashout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.cashout-amount { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.cashouts { display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--ink-soft); }
.cashouts li { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 0.25rem; }

/* Business pages: the two sections, and the confirm and decline forms side by side */

.cost-line { padding: 0.75rem 1rem; border-left: 3px solid var(--plum); background: var(--surface); font-size: 0.9375rem; }
.section-pick { margin-bottom: 1rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--rule); }
/* A list directly under the tabs has its own top rule; two hairlines a gap apart would look like a mistake. */
.section-pick + .records, .section-pick + .offer-list, .section-pick + .pending, .section-pick + .apps, .section-pick + .totals { border-top: 0; }
.block-head > p { max-width: 36rem; }
.answer { display: grid; gap: 1.75rem; }
.answer > form + form { padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.answer h2 { font-family: var(--text); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
.pending > li p { overflow-wrap: anywhere; }
.pending .fee { font-weight: 600; white-space: nowrap; }
.pending form { display: contents; }

/* Form errors and the bot trap */

.field-error { font-size: 0.8125rem; color: var(--bad); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--bad); }
.form-error { font-size: 0.9375rem; color: var(--bad); background: var(--bad-soft); border-radius: 4px; padding: 0.6rem 0.8rem; scroll-margin-top: 5rem; }
.form-error:focus { outline: 2px solid var(--bad); outline-offset: 2px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Admin */

.admin-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-bottom: 1.25rem; }
.pick { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: 0.9375rem; }
.pick a { color: var(--ink-soft); text-decoration: none; padding-block: 0.25rem; border-bottom: 2px solid transparent; }
.pick a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--plum); }
/* The kinds of place on the Send page: big enough to hit in a moving car. */
.pick.chips { gap: 0.5rem; margin: 0 -1rem 0.5rem; padding: 0 1rem 0.25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pick.chips::-webkit-scrollbar { display: none; }
.pick.chips a { flex: none; }
.pick.chips a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.95rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); }
.pick.chips a[aria-current="page"] { background: var(--plum); border-color: var(--plum); color: #FFFFFF; }
.pick.chips a[aria-current="page"] .soft { color: inherit; opacity: 0.8; }
.send-head { align-items: center; }
.send-area select.control { width: auto; max-width: 12rem; min-height: 2.75rem; padding-block: 0.4rem; font-size: 0.9375rem; }
.send-list .btn { min-width: 5rem; }
.where-when .block-head { align-items: baseline; }
.terms.sheet-lite { border-top: 1px solid var(--rule-strong); }
.terms.sheet-lite > div { padding-inline: 0; }
.terms.sheet-lite > div:last-child { border-bottom: 1px solid var(--rule); }
.terms.hours-list > div { padding: 0.4rem 0; grid-template-columns: 3.5rem minmax(0, 1fr); }
.apps { border-top: 1px solid var(--rule-strong); }
.apps > li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 2rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.app-main { min-width: 0; flex: 1 1 22rem; display: grid; gap: 0.15rem; overflow-wrap: anywhere; }
.app-main h2 { font-family: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.app-main.confirm { padding-block: 1rem; border-block: 1px solid var(--rule); max-width: 40rem; }
.apps .actions { flex: 0 1 auto; }
@media (min-width: 60rem) { .apps .actions { flex: 0 0 27rem; } }
.list-count { margin-bottom: 0.6rem; }
.admin-search { margin-bottom: 0.75rem; max-width: 32rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.25rem; }
.app-details { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.app-details:empty { display: none; }
.message-body { white-space: pre-wrap; margin-block: 0.4rem; max-width: 44rem; }
.settings-sheet { max-width: 40rem; }
.settings-sheet > div { grid-template-columns: minmax(6rem, 1fr) minmax(0, 2.4fr); }

/* Skip link: off screen until it has keyboard focus */

.skip { position: absolute; left: 0.5rem; top: -4rem; z-index: 20; padding: 0.6rem 0.9rem; background: var(--surface); color: var(--ink); border: 1px solid var(--control); border-radius: 4px; }
.skip:focus { top: 0.5rem; }

/* Touch screens: every control is at least 44px tall */

@media (pointer: coarse) {
  .btn-small, .theme-toggle { min-height: 2.75rem; }
  .site-nav a, .pick a, .site-footer a, .back, .wordmark, .r-id a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .pick { gap: 0 1.1rem; }
  .pick a { min-width: 2.75rem; }
}

/* A focused control never sits under the phone tab bar */

@media (max-width: 47.99rem) {
  html:has(body.has-tabbar) { scroll-padding-bottom: 5rem; }
}

/* Paper: always the light palette, without the site chrome */

@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --paper: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --ink-soft: #333333; --rule: #BBBBBB; --rule-strong: #888888; --control: #888888;
    --link: #000000; --good: #000000; --wait: #000000; --bad: #000000; --good-soft: #FFFFFF; --wait-soft: #FFFFFF; --bad-soft: #FFFFFF; --idle-soft: #FFFFFF;
    color-scheme: light;
  }
  body { display: block; min-height: 0; }
  .site-nav, .tabbar, .theme-toggle, .skip, .site-footer nav, .banner, .form-note, .section-pick, form .btn { display: none !important; }
  body.has-tabbar { padding-bottom: 0; }
  .section, .apps > li, .records > li, .offer-list > li { break-inside: avoid; }
  body.show-pass { height: auto; }
  .ticket { --t-ground: #FFFFFF; --t-ink: #000000; --t-soft: #333333; --t-rule: #888888; --t-gold: #000000; border: 1px solid #888888; break-inside: avoid; }
  .pass-actions { display: none; }
}

/* The counter screen: laid over a business page left idle at the counter (see site.js). It keeps its
   own colours in Day and Night view, drifts slowly so nothing burns into the screen, and hides
   every fee and pass underneath. */
body.covered { overflow: hidden; }
.counter-cover {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 1rem;
  padding: max(1.5rem, env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
  background: #1B0A2A; color: #F7F2FC; animation: cover-in 0.6s ease both;
}
.counter-cover[hidden] { display: none; }
.cover-light {
  position: absolute; inset: -35%; pointer-events: none;
  background:
    radial-gradient(38% 32% at 28% 30%, rgba(122, 61, 179, 0.6), transparent 70%),
    radial-gradient(30% 28% at 72% 68%, rgba(235, 203, 122, 0.16), transparent 70%),
    radial-gradient(45% 40% at 60% 20%, rgba(71, 25, 107, 0.7), transparent 75%);
  animation: cover-light 45s ease-in-out infinite alternate;
}
.cover-body {
  position: relative; display: grid; justify-items: center; gap: clamp(0.875rem, 2.4vh, 1.5rem);
  max-width: 36rem; text-align: center; animation: cover-float 480s ease-in-out infinite alternate;
}
.cover-time { display: grid; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.cover-time span { font-size: clamp(3.25rem, 2rem + 7vw, 6.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.cover-time small { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: #CFBFE2; }
.cover-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.75rem, 1.1rem + 3.2vw, 3.25rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: anywhere; color: #F7F2FC; }
.cover-name::after { content: ""; display: block; width: 2.75rem; height: 2px; margin: clamp(0.75rem, 2vh, 1.125rem) auto 0; background: #EBCB7A; }
.cover-line { font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem); color: #E8DFF3; }
.cover-scan {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3.5rem; padding: 0 1.75rem; margin-top: 0.25rem;
  border-radius: 999px; background: #F7F2FC; color: #2A0E40; font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  box-shadow: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.3);
}
.cover-scan svg { width: 1.375rem; height: 1.375rem; }
.cover-scan:focus-visible { outline: 3px solid #EBCB7A; outline-offset: 3px; }
.cover-invite {
  display: flex; align-items: center; gap: 1rem; max-width: 25rem; margin-top: 0.5rem; padding: 0.875rem 1rem;
  border: 1px solid rgba(247, 242, 252, 0.2); border-radius: 1rem; background: rgba(255, 255, 255, 0.05); text-align: left;
}
.cover-qr { flex: none; width: 6rem; aspect-ratio: 1; padding: 0.3rem; border-radius: 0.5rem; overflow: hidden; background: #FFFFFF; color: #1B0A2A; }
.cover-qr svg { display: block; width: 100%; height: 100%; }
.cover-invite p { font-size: 0.9375rem; line-height: 1.4; color: #E8DFF3; }
.cover-invite strong { display: block; color: #F7F2FC; }
.cover-foot { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; max-width: 44rem; font-size: 0.8125rem; color: #CFBFE2; }
.cover-foot .wordmark { display: inline; color: #F7F2FC; font-size: 1rem; min-height: 0; }
.cover-foot .wordmark span { color: #CFBFE2; }
@keyframes cover-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cover-light { from { transform: translate(-5%, -4%) rotate(0deg); } to { transform: translate(5%, 4%) rotate(10deg); } }
@keyframes cover-float { 0% { transform: translate(0, 0); } 25% { transform: translate(14px, -10px); } 50% { transform: translate(-12px, 9px); } 75% { transform: translate(9px, 13px); } 100% { transform: translate(-14px, -9px); } }
@media (max-height: 34rem) { .cover-time, .cover-invite { display: none; } }
@media (prefers-reduced-motion: reduce) { .counter-cover, .cover-light, .cover-body { animation: none; } }