/* The public sign-up surface: the flow, and the confirmation page it ends on.
*
* Paired with base.css, never app.css — see views/layouts/public.php for why a visitor does not
* download 95KB of vocabulary for an application they are not signed in to.
*
* ## Who this is for
*
* A parent entering four children, and a seventy-year-old entering themselves for the javelin. That
* shapes most of what follows: type starts at 1rem rather than base.css's 0.875rem, targets are at
* least 44px, nothing is revealed on hover alone, and every state a row can be in is stated in words
* as well as in colour.
*
* ## The trap worth knowing
*
* base.css sets `button:hover { background:#3f3f46; color:#fff }` at specificity (0,1,1), which
* beats any single class. Every button-shaped thing here that is not meant to go dark on hover has to
* restate its own hover, or it turns charcoal the first time somebody points at it.
*/
/* The `hidden` attribute, made to actually hide things.
*
* A browser hides [hidden] from its own stylesheet, at specificity (0,1,0) — so ANY author rule
* setting `display` beats it, and an element toggled with `el.hidden = true` stays on screen. This
* file hides several things that way; the division banner is a flex box, and without this it paints
* as an empty green bar above every event list.
*
* Stated once here rather than as `:not([hidden])` on each rule, which is what the old stylesheet
* did and what the next person adding a `display:` would forget.
*/
[hidden] { display: none !important; }
:root {
--reg-line: #d4d4d8;
--reg-line-soft: #e4e4e7;
--reg-ink: #18181b;
--reg-ink-soft: #52525b;
--reg-ink-faint: #71717a;
--reg-surface: #ffffff;
--reg-surface-alt: #fafafa;
/* The accent family. Emerald by default; an organizer who has picked a brand colour for their
meet replaces all five from views/layouts/public.php, derived by App\Branding\Palette.
Every accented rule below has to read one of these -- a literal green anywhere in this file
is a piece of the page that stays ours on somebody else's event. */
--reg-accent: #047857; /* the brand emerald, matching base.css --accent */
--reg-accent-hover: #065f46;
--reg-accent-soft: #ecfdf5; /* the near-white tint behind a selected row */
--reg-accent-line: #a7f3d0; /* the border that goes with it */
--reg-accent-deep: #065f46; /* text ON the tint -- measured against the tint, not white */
--reg-danger: #b91c1c;
--reg-danger-soft: #fef2f2;
--reg-danger-line: #fecaca;
--reg-radius: 10px;
}
/* ── Shell ─────────────────────────────────────────────────────────────────── */
.reg-layout {
background: #f4f4f5;
color: var(--reg-ink);
min-height: 100vh;
display: flex;
flex-direction: column;
font-size: 1rem;
line-height: 1.5;
}
/* Transparent so the host page's own background shows through, and min-height released because the
* frame is auto-sized.
*
* The min-height is not a tidy-up. `100vh` inside an auto-sized iframe means "as tall as the frame
* we just set", so the measured content can never come back smaller than the frame already is: the
* height ratchets up and never down, and somebody stepping back from the long events screen to the
* short one keeps a screenful of white space under it. See public/js/embed.js. */
.reg-layout--embed { background: transparent; min-height: 0; }
/* No header of ours: the event's band below is the top of the page. */
.reg-main { width: 100%; flex: 1; padding: 0 0 2.5rem; }
/* Everything in the page is a centred column except the band, which runs edge to edge. The sign-up
flow is as wide as a screen and its receipt; anything else on this layout -- the confirmation, a
closed notice -- is one reading column. The band's words line up with whichever it is. */
.reg-main > :not(.reg-hero) { width: calc(100% - 2rem); max-width: 44rem; margin-inline: auto; }
.reg-main > #reg-app { max-width: 66rem; }
/* One line at the foot: how to reach the organizer, and the credit that is ours. Quiet, but not
grey-on-grey -- in an embed it is the only thing answering "whose form is this". */
.reg-foot {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 0.5rem 0.9rem; padding: 0.5rem 1.25rem 2rem;
font-size: 0.85rem; color: var(--reg-ink-faint);
}
.reg-foot-ask { display: inline-flex; align-items: center; gap: 0.35rem; }
.reg-foot a { color: var(--reg-ink-soft); }
.reg-foot-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--reg-line); }
.reg-foot-brand { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
.reg-foot-brand:hover { text-decoration: underline; }
/* Ours whatever colour the organizer picked, so never var(--reg-accent). */
.reg-foot-mark { width: 0.95rem; height: 0.95rem; margin-left: 0.1rem; }
.reg-layout--embed .reg-foot { padding-bottom: 0.5rem; }
.reg-ic { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ── The event's band ───────────────────────────────────────────────────────────
The organizer's colour, edge to edge, with their name on it: the thing that tells somebody who
followed a link from a club newsletter that they are in the right place. --reg-accent is the
colour the buttons use, and App\Branding\Palette already guarantees white text reads on it. */
.reg-hero { background: var(--reg-accent); color: #fff; margin-bottom: 1.75rem; }
.reg-layout--embed .reg-hero { border-radius: var(--reg-radius); margin-inline: 0.5rem; }
.reg-hero-in { max-width: calc(66rem + 2rem); margin: 0 auto; padding: 1.75rem 1rem 1.6rem; }
.reg-hero--narrow .reg-hero-in { max-width: calc(44rem + 2rem); }
.reg-hero-row { display: flex; align-items: center; gap: 1.1rem; }
.reg-hero-row--stack { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.reg-hero-words { min-width: 0; }
.reg-hero-title {
margin: 0;
font-family: 'Archivo', 'Poppins', system-ui, sans-serif;
font-weight: 700; font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.01em;
color: #fff;
}
.reg-hero-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin-top: 0.5rem; font-size: 0.95rem; opacity: 0.92; }
.reg-hero-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.reg-hero-description { margin: 0.9rem 0 0; max-width: 46rem; font-size: 0.98rem; opacity: 0.92; }
/* The organizer's mark, on a white tile: marks are drawn for paper, and a navy crest dropped straight
onto a navy band would vanish. */
.reg-hero-logo { flex: none; display: grid; place-items: center; padding: 0.5rem; background: #fff; border-radius: 14px; }
.reg-hero-banner { margin-bottom: 1rem; background: #fff; border-radius: 12px; padding: 0.5rem; }
/* The mark's size. A box, not a size, and that is the whole trick: organizers arrive with 6:1
wordmarks, square crests and tall badges, and constraining BOTH edges lets each shape settle
itself. A wordmark runs out of width first and comes out short; a portrait runs out of height
first and comes out narrow; a square touches both. None is cropped.
width/height attributes are on the ![]()
from App\Branding\Logo::fit(), so the browser reserves
the right space before the bytes arrive; `height: auto` is what lets these caps override them
without squashing the picture. Keep the numbers in step with Logo::PAGE_BOX, BANNER_BOX and
BESIDE_BOX -- tests/logo-fit.php reads them out of this file and compares. */
.reg-logo {
display: block;
max-width: min(100%, 15rem);
max-height: 4.5rem;
width: auto;
height: auto;
}
/* Across the top of the band, for artwork built to be a header. Letterboxed rather than cropped
when the ceiling binds: the promise that a logo is never cut applies here too. */
.reg-logo--banner {
width: 100%;
max-width: 100%;
max-height: 12rem;
object-fit: contain;
object-position: left center;
}
.reg-logo--left {
max-width: 6rem;
max-height: 6rem;
}
/* The confirmation's own heading, under the band. */
.reg-header { margin-bottom: 1.25rem; }
.reg-title { font-family: 'Archivo', 'Poppins', system-ui, sans-serif; font-size: 1.7rem; line-height: 1.15; margin: 0 0 0.35rem; }
.reg-meta { color: var(--reg-ink-soft); font-size: 0.95rem; }
/* ── A screen ──────────────────────────────────────────────────────────────── */
.reg-panel {
background: var(--reg-surface);
border: 1px solid var(--reg-line-soft);
border-radius: 14px;
padding: 1.75rem;
box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
}
.reg-panel + .reg-panel { margin-top: 1rem; }
.reg-h {
font-family: 'Archivo', 'Poppins', system-ui, sans-serif;
font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
margin: 0 0 0.4rem;
}
.reg-h:focus { outline: none; }
.reg-h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 0.6rem; }
.reg-lede { color: var(--reg-ink-soft); margin: 0 0 1.25rem; }
.reg-sub { margin: 0; font-size: 0.92rem; color: var(--reg-ink-soft); }
/* A field that must be filled in. Red because it is the convention everybody has met before, and
paired with "optional" on the ones that need not be, so neither kind is left to be inferred. */
.form-required { color: var(--reg-danger); font-weight: 600; margin-left: 0.2rem; }
/* Back, in one place: the foot of the screen, left of the button that goes forward, and named with
where it goes. A text link with a chevron rather than the bordered pill it was -- the pill was at
the top as well, and two of them on one screen read as two different ways out. */
.reg-back {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 2.75rem;
padding: 0.5rem 0.25rem;
background: none;
border: 0;
font: inherit;
font-size: 0.95rem;
font-weight: 500;
color: var(--reg-ink-soft);
cursor: pointer;
}
.reg-back:hover { background: none; color: var(--reg-ink); text-decoration: underline; }
.reg-back-arrow { width: 1.1rem; height: 1.1rem; }
/* A button and its icon: the icon at the size of the words, a small gap, centred on the line. The
icon comes from signup.js's table of what each label does, so this is the one rule they share. */
.reg-layout .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.reg-layout .btn .reg-ic { width: 1.1em; height: 1.1em; flex: none; }
.reg-actions {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem;
margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--reg-line-soft);
}
.reg-actions .reg-back { order: -1; margin-right: auto; }
.reg-actions--end { justify-content: flex-end; }
.reg-actions .btn { min-height: 3.1rem; padding-inline: 1.5rem; font-size: 1rem; border-radius: 10px; }
.reg-boot { color: var(--reg-ink-faint); text-align: center; }
/* The guard's inputs are real, but nobody looks at them. */
.reg-guard-host { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.reg-guard-host .cf-turnstile { position: static; }
/* ── Progress ──────────────────────────────────────────────────────────────── */
/* Three numbered steps, whatever the event: who and what, your details, pay. Said in full, with the
number, so "where am I" is answered by reading rather than by counting bars. */
.reg-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.4rem; padding: 0; font-size: 0.9rem; color: var(--reg-ink-faint); }
.reg-steps-item { display: flex; align-items: center; gap: 0.5rem; }
.reg-steps-item + .reg-steps-item::before { content: ""; width: 1.75rem; height: 1px; background: var(--reg-line); margin-right: 0.15rem; }
.reg-steps-n {
width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center;
border: 1.5px solid var(--reg-line); background: var(--reg-surface);
font-size: 0.8rem; font-weight: 600;
}
.reg-steps-item.is-at { color: var(--reg-ink); font-weight: 600; }
.reg-steps-item.is-at .reg-steps-n { background: var(--reg-accent); border-color: var(--reg-accent); color: #fff; }
.reg-steps-item.is-done .reg-steps-n { background: var(--reg-accent-soft); border-color: var(--reg-accent-line); color: var(--reg-accent-deep); }
/* ── Big choices ───────────────────────────────────────────────────────────── */
.reg-choices { display: flex; flex-direction: column; gap: 0.75rem; }
.reg-choices--tight { margin-top: 1.25rem; gap: 0.5rem; }
.reg-choice {
display: flex;
flex-direction: column;
/* base.css's `button` rule sets align-items:center, which in a column flex box centres the
text. Restated here rather than fought over, the same way its hover has to be. */
align-items: flex-start;
gap: 0.2rem;
width: 100%;
min-height: 3.5rem;
padding: 1rem 1.1rem;
text-align: left;
background: var(--reg-surface);
border: 1px solid var(--reg-line);
border-radius: var(--reg-radius);
font: inherit;
color: inherit;
cursor: pointer;
}
.reg-choice:hover { background: var(--reg-accent-soft); border-color: var(--reg-accent-line); color: inherit; }
.reg-choice-label { font-size: 1.05rem; font-weight: 600; }
.reg-choice-note { font-size: 0.88rem; color: var(--reg-ink-soft); }
/* The three ways in: an icon, what it is, who it is for, and a chevron saying the card goes
somewhere. The whole card is the button. */
.reg-ways { gap: 0.75rem; }
.reg-way.reg-choice { flex-direction: row; align-items: center; gap: 1.1rem; padding: 1.1rem 1.2rem; border-width: 1.5px; }
.reg-way.reg-choice:hover { border-color: var(--reg-accent); }
.reg-choices--tight .reg-way.reg-choice { padding: 0.8rem 1rem; }
.reg-choices--tight .reg-way-icon { width: 2.5rem; height: 2.5rem; border-radius: 11px; }
.reg-way-icon { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 14px; display: grid; place-items: center; background: var(--reg-accent-soft); color: var(--reg-accent); }
.reg-way-icon .reg-ic { width: 1.6rem; height: 1.6rem; stroke-width: 1.75; }
.reg-way-words { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.reg-way .reg-choice-label { font-size: 1.1rem; }
.reg-way .reg-choice-note { font-size: 0.95rem; }
.reg-way-go { color: var(--reg-ink-faint); }
.reg-promises { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.4rem; font-size: 0.9rem; color: var(--reg-ink-soft); }
.reg-promises span { display: inline-flex; align-items: center; gap: 0.45rem; }
.reg-promises .reg-ic { color: var(--reg-accent); }
/* ── Stepper ───────────────────────────────────────────────────────────────── */
.reg-stepper { display: flex; align-items: center; gap: 1.25rem; justify-content: center; margin: 1.5rem 0; }
.reg-stepper-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 1px solid var(--reg-line);
border-radius: 50%;
background: var(--reg-surface);
font-size: 1.5rem;
line-height: 1;
color: inherit;
cursor: pointer;
}
.reg-stepper-btn:hover:not(:disabled) { background: var(--reg-accent-soft); border-color: var(--reg-accent); color: inherit; }
.reg-stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.reg-stepper-value { font-size: 2rem; font-weight: 600; min-width: 2.5rem; text-align: center; }
/* ── Sport grid ────────────────────────────────────────────────────────────── */
.reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; }
.reg-tile {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.3rem;
min-height: 6rem;
padding: 0.9rem 1rem;
text-align: left;
background: var(--reg-surface);
border: 1px solid var(--reg-line);
border-radius: var(--reg-radius);
font: inherit;
color: inherit;
cursor: pointer;
}
.reg-tile:hover { background: var(--reg-accent-soft); border-color: var(--reg-accent-line); color: inherit; }
.reg-tile--picked { border-color: var(--reg-accent); box-shadow: inset 0 0 0 1px var(--reg-accent); }
.reg-tile-name { font-weight: 600; line-height: 1.25; }
.reg-tile-when { font-size: 0.8rem; color: var(--reg-ink-faint); }
.reg-tile-foot { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; font-size: 0.82rem; color: var(--reg-ink-soft); }
.reg-tile-price { font-variant-numeric: tabular-nums; }
.reg-tile-picked { font-size: 0.8rem; font-weight: 600; color: var(--reg-accent); }
/* ── Event rows ────────────────────────────────────────────────────────────── */
.reg-crumbs { font-size: 0.82rem; color: var(--reg-ink-faint); margin-bottom: 0.35rem; }
.reg-shared-note { font-size: 0.85rem; color: var(--reg-ink-faint); margin-bottom: 0.75rem; }
.reg-filtered { margin: 1rem 0 0; font-size: 0.85rem; color: var(--reg-ink-faint); }
.reg-link { background: none; border: 0; padding: 0; font: inherit; font-size: inherit;
color: var(--reg-accent); text-decoration: underline; cursor: pointer; }
.reg-link:hover { background: none; color: var(--reg-accent); }
.reg-group + .reg-group, .reg-list + .reg-group, .reg-group + .reg-list, .reg-grid + .reg-group { margin-top: 1.25rem; }
.reg-group-head { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--reg-ink-faint); margin-bottom: 0.5rem; }
.reg-division {
display: flex;
gap: 0.5rem;
padding: 0.75rem 0.9rem;
margin-bottom: 1rem;
background: var(--reg-accent-soft);
border: 1px solid var(--reg-accent-line);
border-radius: var(--reg-radius);
color: var(--reg-accent-deep);
font-size: 0.92rem;
}
.reg-division--no { background: var(--reg-danger-soft); border-color: var(--reg-danger-line); color: #991b1b; }
/* Each event its own card with a big box to tick, rather than lines in one bordered list: a row that
is ticked turns the organizer's colour all the way round, and that is the thing somebody scanning
back up the list is looking for. */
.reg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.reg-row { border: 1.5px solid var(--reg-line); border-radius: var(--reg-radius); background: var(--reg-surface); overflow: hidden; }
.reg-row--on { background: var(--reg-accent-soft); border-color: var(--reg-accent); }
.reg-row--refused { background: var(--reg-surface-alt); border-style: dashed; border-color: var(--reg-line); }
.reg-row--refused .reg-row-label,
.reg-row--refused .reg-row-label:hover { cursor: not-allowed; background: none; }
.reg-row--refused .reg-row-name,
.reg-row--refused .reg-row-price { color: var(--reg-ink-faint); }
.reg-shared-note--room { color: var(--reg-ink-soft); font-variant-numeric: tabular-nums; }
.reg-shared-note--full {
color: #92400e;
background: #fffbeb;
padding: 0.6rem 0.75rem;
border-radius: var(--reg-radius);
font-weight: 600;
}
.reg-shared-note--refused {
color: var(--reg-danger);
background: var(--reg-danger-soft);
padding: 0.6rem 0.75rem;
border-radius: var(--reg-radius);
}
.reg-row--empty { padding: 1rem; color: var(--reg-ink-faint); font-size: 0.9rem; }
.reg-row-label { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.1rem; cursor: pointer; min-height: 2.75rem; }
.reg-row-label:hover { background: rgba(0, 0, 0, 0.015); }
.reg-row-label input { margin-top: 0.05rem; width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--reg-accent); cursor: inherit; }
.reg-row-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.reg-row-name { font-weight: 600; font-size: 1.02rem; }
.reg-row-rule { font-size: 0.82rem; color: var(--reg-ink-faint); }
.reg-row-rule::before { content: '• '; }
.reg-row-note { font-size: 0.82rem; color: var(--reg-ink-faint); }
/* ── How full it is ────────────────────────────────────────────────────────────
Said on every capacity-limited event and no other. Deliberately quiet while there is room -- it is
information, not an alarm -- and only raises its voice once there is none. Amber rather than red
for a queue, because "full, but you can still enter" is not a refusal. */
.reg-row-room { font-size: 0.82rem; color: var(--reg-ink-soft); font-variant-numeric: tabular-nums; }
.reg-row-room--full { color: #92400e; font-weight: 600; }
/* Full with a queue: still tickable, so it keeps a live label rather than the dead one. */
.reg-row--queue .reg-row-label { cursor: pointer; }
.reg-row--queued { background: #fffbeb; box-shadow: inset 2px 0 0 #d97706; }
.reg-row--queued .reg-row-room { color: #92400e; font-weight: 600; }
.reg-row-price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--reg-ink); white-space: nowrap; }
/* A row whose price a live discount restates: the old figure struck through, the new one beside it
and emphasised, so the reduction is legible as a reduction rather than as a cheaper event. */
.reg-row-price-was { color: var(--reg-ink-faint); margin-right: .4em; text-decoration-thickness: 1px; }
.reg-row-price-now { color: var(--reg-ink); font-weight: 600; }
.reg-row-status { font-size: 0.88rem; font-weight: 600; color: var(--reg-accent-deep); margin-top: 0.15rem; }
/* Why a row cannot be ticked, in words and in the ordinary text colour: it is an explanation, not an
error -- a nine-year-old is not wrong for being nine. */
.reg-row--refused .reg-row-status { color: var(--reg-ink-soft); font-weight: 500; }
/* A branch: not a choice, a way further in. */
.reg-row-open {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
width: 100%;
padding: 0.9rem 1rem;
min-height: 2.75rem;
background: none;
border: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.reg-row-open:hover { background: var(--reg-accent-soft); color: inherit; }
.reg-row-open .reg-row-name { flex: 1; }
.reg-row-meta { font-size: 0.82rem; color: var(--reg-ink-faint); }
.reg-row-chevron { color: var(--reg-ink-faint); font-size: 1.2rem; }
/* ── Per-event questions ───────────────────────────────────────────────────── */
.reg-perevent-host { margin-top: 1.25rem; }
.reg-perevent { border: 1px solid var(--reg-line-soft); border-radius: var(--reg-radius); padding: 0.9rem 1rem; }
.reg-perevent + .reg-perevent { margin-top: 0.6rem; }
.reg-perevent-head { font-size: 0.82rem; color: var(--reg-ink-faint); margin-bottom: 0.5rem; }
.reg-gates { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--reg-line-soft); }
.reg-gates .form-check { align-items: flex-start; gap: 0.6rem; }
.reg-gates .form-check input { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; }
/* ── Roster ────────────────────────────────────────────────────────────────── */
/* The roster: a LIST of players, one line each, and one player at a time opened in place to edit.
It was a grid of boxes, a column per thing asked, and the organizer's own per-player questions
made the columns too narrow to read -- see the team screen in signup-screens.js. */
.reg-pl-count { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.5rem; font-weight: 600; }
.reg-pl-needs { font-size: 0.9rem; font-weight: 400; color: var(--reg-ink-soft); }
.reg-pl-count--short .reg-pl-needs { color: #92400e; font-weight: 500; }
.reg-pl-meter { height: 6px; border-radius: 999px; background: var(--reg-line-soft); overflow: hidden; margin-bottom: 1rem; }
.reg-pl-meter > span { display: block; height: 100%; background: var(--reg-accent); transition: width 0.2s ease; }
.reg-pl-list { list-style: none; margin: 0; padding: 0; border: 1.5px solid var(--reg-line-soft); border-radius: var(--reg-radius); overflow: hidden; background: var(--reg-surface); }
.reg-pl-list > li + li { border-top: 1px solid var(--reg-line-soft); }
.reg-pl-row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto auto; gap: 0.9rem; align-items: center; padding: 0.7rem 0.75rem 0.7rem 1rem; transition: opacity 0.15s ease; }
.reg-pl-row.is-dim { opacity: 0.45; }
.reg-pl-n { width: 2.2rem; height: 2.2rem; border-radius: 999px; display: grid; place-items: center; background: var(--reg-surface-alt); border: 1px solid var(--reg-line-soft); color: var(--reg-ink-soft); font-size: 0.85rem; font-weight: 600; }
.reg-pl-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.reg-pl-facts { font-size: 0.88rem; color: var(--reg-ink-soft); margin-top: 0.1rem; overflow-wrap: anywhere; }
.reg-pl-state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; white-space: nowrap; padding: 0.2rem 0.6rem; border-radius: 999px; }
.reg-pl-state .reg-ic { width: 1rem; height: 1rem; }
.reg-pl-state.is-ready { color: var(--reg-accent-deep); }
.reg-pl-state.is-todo { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.reg-pl-acts { display: flex; align-items: center; gap: 0.25rem; }
.reg-pl-acts .btn { min-height: 44px; }
.reg-pl-remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--reg-radius); background: transparent; color: var(--reg-ink-faint); cursor: pointer; }
.reg-pl-remove:hover { background: var(--reg-danger-soft); color: var(--reg-danger); }
.reg-pl-edit-head .reg-pl-remove:hover { background: var(--reg-surface-alt); color: var(--reg-ink); }
.reg-pl-add.btn { display: flex; width: 100%; min-height: 52px; margin-top: 0.75rem; border: 1.5px dashed var(--reg-line); background: var(--reg-surface); color: var(--reg-accent-deep); font-weight: 600; }
.reg-pl-add.btn:hover { border-color: var(--reg-accent); background: var(--reg-accent-soft); }
.reg-pl-outstanding { margin-top: 0.9rem; padding: 0.85rem 1rem; border-radius: var(--reg-radius); background: #fffbeb; border: 1px solid #fde68a; color: #78350f; font-size: 0.95rem; }
/* One player open. The tint around it is the organizer's; the white card inside is the form. */
.reg-pl-edit { padding: 1rem; background: var(--reg-accent-soft); }
.reg-pl-edit-in { background: var(--reg-surface); border: 1.5px solid var(--reg-accent-line); border-radius: 12px; padding: 1.25rem; box-shadow: 0 6px 20px rgba(24, 24, 27, 0.06); }
.reg-pl-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -0.35rem -0.35rem 0.75rem 0; }
.reg-pl-edit-head h4 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.reg-pl-group { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--reg-line-soft); }
.reg-pl-group-t { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--reg-ink-faint); margin-bottom: 0.75rem; }
.reg-pl-missing input, .reg-pl-missing select, .reg-pl-missing textarea { border-color: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.reg-pl-missing-note { font-size: 0.86rem; color: #92400e; }
.reg-pl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.reg-pl-foot-r { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.reg-pl-foot .btn { min-height: 44px; }
@media (max-width: 40rem) {
.reg-pl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.5rem; padding: 0.75rem; }
.reg-pl-n { display: none; }
.reg-pl-state { grid-column: 1; grid-row: 2; justify-self: start; padding-left: 0; }
.reg-pl-state.is-todo { padding-left: 0.6rem; }
.reg-pl-acts { grid-column: 2; grid-row: 1 / span 2; }
.reg-pl-edit { padding: 0.5rem; }
.reg-pl-edit-in { padding: 1rem; }
/* Stacked, Save on top: side by side, "Save and add another" wraps to three lines. */
.reg-pl-foot { flex-direction: column-reverse; align-items: stretch; }
.reg-pl-foot-r { flex-direction: column-reverse; }
.reg-pl-foot .btn { width: 100%; justify-content: center; }
}
/* Pasting a list out of a spreadsheet: a box, a sentence saying what order the columns go in, and a
button that puts them into the rows to be checked. */
.reg-paste { margin-bottom: 1rem; padding: 1rem; background: var(--reg-surface-alt); border: 1px solid var(--reg-line-soft); border-radius: var(--reg-radius); display: flex; flex-direction: column; gap: 0.6rem; }
.reg-paste textarea { width: 100%; font: inherit; font-size: 0.95rem; }
.reg-paste-actions { display: flex; justify-content: flex-end; }
/* ── The cart ──────────────────────────────────────────────────────────────── */
.reg-cards { display: flex; flex-direction: column; gap: 0.75rem; }
.reg-card { border: 1px solid var(--reg-line); border-radius: var(--reg-radius); padding: 0.9rem 1rem; }
.reg-card--part { border-style: dashed; }
.reg-card-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.reg-card-name { font-weight: 600; font-size: 1.05rem; }
.reg-card-sum { font-variant-numeric: tabular-nums; color: var(--reg-ink-soft); }
.reg-card-lines { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.9rem; color: var(--reg-ink-soft); }
.reg-card-lines li + li { margin-top: 0.2rem; }
.reg-card-note { color: var(--reg-ink-faint); margin-left: 0.4rem; }
.reg-card-extra { color: var(--reg-ink-faint); }
.reg-card-warn { margin-top: 0.5rem; font-size: 0.85rem; color: #92400e; }
.reg-card-tools { display: flex; gap: 0.4rem; margin-top: 0.75rem; }
.reg-saved { margin: 1rem 0 0; font-size: 0.85rem; color: var(--reg-ink-faint); }
.reg-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--reg-line-soft); font-size: 1.1rem; }
/* Terms that apply to the total above, read before the button below. Quiet, but not grey-on-grey:
this is the one place a registrant is told how to get their money back, and small print nobody
can read is the same as not saying it. --reg-ink-soft, not --reg-ink-faint. */
.reg-fineprint { margin: 0.6rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--reg-ink-soft); }
/* ── Extras ────────────────────────────────────────────────────────────────── */
.reg-item { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem; border: 1px solid var(--reg-line); border-radius: var(--reg-radius); }
.reg-item--in { border-color: var(--reg-accent); box-shadow: inset 0 0 0 1px var(--reg-accent); }
.reg-item--needs { border-color: var(--reg-danger); }
.reg-item-name { font-weight: 600; }
.reg-item-price { color: var(--reg-ink-soft); font-variant-numeric: tabular-nums; }
.reg-item-note { font-size: 0.85rem; color: var(--reg-ink-faint); }
.reg-item-controls { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; }
/* ── The shop front ───────────────────────────────────────────────────────────
A card is a button now, so it has to undo what base.css does to one: align-items lands centred in
a column flex, text-align lands centred, and button:hover at (0,1,1) beats any single class --
which is why the hover below is written with two.
That hover has to restate COLOUR as well as background, and this is the half that was missed.
base.css sets `background: #3f3f46; color: #fff` together; overriding only the background left
the second half applying, so the card's name -- the one line inside with no colour of its own --
turned white on a pale hover. The price and the note were fine, which is exactly why it hid: they
set their own colours. Every other button-shaped surface in this file says `color: inherit` on
hover for the same reason -- see .reg-tile, .reg-choice, .reg-row-open. */
.reg-item--card {
align-items: stretch;
width: 100%;
text-align: left;
font: inherit;
color: inherit;
background: var(--reg-surface);
cursor: pointer;
}
.reg-item.reg-item--card:hover {
border-color: var(--reg-accent);
background: var(--reg-surface-alt);
color: inherit;
}
.reg-item.reg-item--card:focus-visible { outline: 2px solid var(--reg-accent); outline-offset: 2px; }
.reg-item-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; }
/* Two lines and then an ellipsis. An organizer with a paragraph to say about a hoodie would
otherwise set the height of every card in the row, and the front is a place to recognise a thing,
not to read about it -- the whole description is on the item's own page, one tap away. */
.reg-item-held {
flex: 1;
min-width: 0;
font-size: 0.82rem;
color: var(--reg-ink-faint);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.reg-item--in .reg-item-held { color: var(--reg-accent); font-weight: 600; }
/* ── The picture ───────────────────────────────────────────────────────────────
Chevrons over the image rather than a lightbox. This form is meant to be embedded in other
people's pages, and inside a short iframe an overlay is trapped in the frame's box -- the "large"
view ends up smaller than the page it opened from. The grid goes to one column on phones instead,
which makes the picture full-width where screens are smallest. */
.reg-item-frame { position: relative; }
.reg-item-shot { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--reg-surface-alt); }
/* The item's own page. `contain` rather than `cover`: on the front a consistent crop makes a tidy
grid, but this is the view somebody opened to see the whole shirt, and cropping it here is
cropping the thing they asked for. */
.reg-item-frame--big .reg-item-shot { aspect-ratio: 1 / 1; max-height: 22rem; object-fit: contain; }
.reg-item-thumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.reg-item-thumb {
width: 3.5rem;
height: 3.5rem;
padding: 0;
border: 2px solid var(--reg-line);
border-radius: 6px;
background: var(--reg-surface-alt);
overflow: hidden;
cursor: pointer;
}
.reg-item-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reg-item-thumb:hover { border-color: var(--reg-ink-faint); background: var(--reg-surface-alt); }
.reg-item-thumb--at, .reg-item-thumb--at:hover { border-color: var(--reg-accent); }
.reg-item-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
/* 44px, because it sits over a photograph and is the only way to the rest of them. */
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--reg-ink);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
/* base.css's `button:hover` is (0,1,1) and outranks any single class, so this has to be said out
loud or the arrows turn charcoal the moment somebody points at one. */
.reg-item-arrow:hover { background: #fff; color: var(--reg-ink); }
.reg-item-arrow--prev { left: 0.4rem; }
.reg-item-arrow--next { right: 0.4rem; }
.reg-item-count {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
padding: 0.1rem 0.45rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 0.72rem;
}
/* ── What is in the basket ─────────────────────────────────────────────────── */
.reg-item-add { width: 100%; justify-content: center; min-height: 2.75rem; }
.reg-item-add:disabled { opacity: 0.55; cursor: not-allowed; }
.reg-item-lines { display: flex; flex-direction: column; gap: 0.4rem; }
.reg-item-lines:not(:empty) { margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--reg-line-soft); }
.reg-item-line { display: flex; align-items: center; gap: 0.5rem; }
.reg-item-line-name { flex: 1; min-width: 0; font-size: 0.9rem; }
.reg-item-line-price { font-size: 0.9rem; color: var(--reg-ink-soft); font-variant-numeric: tabular-nums; }
.reg-item-lines-head { margin: 0 0 0.1rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--reg-ink-faint); }
.reg-item-page { display: flex; flex-direction: column; gap: 0.5rem; }
.reg-item-page.reg-item--needs .reg-item-add { border-color: var(--reg-danger); }
.reg-item-title { margin: 0.4rem 0 0; font-size: 1.15rem; }
.reg-item-price--big { font-size: 1.05rem; color: var(--reg-ink); font-weight: 600; }
.reg-item-page .reg-item-controls { margin-top: 0.35rem; }
.reg-item-remove {
background: none;
border: 0;
padding: 0.35rem 0.2rem;
font: inherit;
font-size: 0.82rem;
color: var(--reg-ink-faint);
text-decoration: underline;
cursor: pointer;
}
.reg-item-remove:hover { background: none; color: var(--reg-danger); }
.reg-item-problem { margin: 0; font-size: 0.85rem; color: var(--reg-danger); }
/* The same stepper as the "how many people" screen, which is sized for a full-page question. */
.reg-stepper--tight { gap: 0.4rem; margin: 0; }
.reg-stepper--tight .reg-stepper-btn { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
.reg-stepper--tight .reg-stepper-value { font-size: 1rem; min-width: 1.5rem; }
/* ── Review ────────────────────────────────────────────────────────────────── */
.reg-lines { list-style: none; margin: 0; padding: 0; }
.reg-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; }
.reg-line + .reg-line { border-top: 1px solid var(--reg-line-soft); }
.reg-line-who { font-weight: 600; color: var(--reg-ink); padding-bottom: 0.2rem; }
.reg-line-sub { font-size: 0.85rem; color: var(--reg-ink-faint); }
.reg-line-total { font-weight: 600; background: var(--reg-surface-alt); padding-inline: 0.6rem; }
.reg-status { margin-top: 1rem; font-size: 0.9rem; color: var(--reg-ink-soft); }
.reg-status .btn { margin-top: 0.5rem; margin-right: 0.4rem; }
/* ── The stage: a screen, and the receipt beside it ───────────────────────────
A screen alone sits in a 40rem column. A screen with a receipt takes the page's width: the screen
on the left, the running list of everyone and the total on the right. Below 56rem the receipt is
not drawn and the bar further down carries the total instead. */
.reg-stage { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.75rem; align-items: start; }
.reg-stage-main { min-width: 0; }
/* The receipt's column is held open even before there is a receipt, so the screen does not jump
wider and narrower as somebody's first name arrives. A roster is the exception: it is a table five
or six columns wide, and in the screen column alone it was clipping "Gender" to "Gende". */
.reg-stage--team:not(.reg-stage--aside) .reg-stage-main { grid-column: 1 / -1; }
.reg-receipt { background: var(--reg-surface); border: 1px solid var(--reg-line-soft); border-radius: 14px; overflow: hidden; }
.reg-receipt-head { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 1.2rem 0.75rem; font-weight: 600; }
.reg-receipt-head small { font-weight: 400; font-size: 0.85rem; color: var(--reg-ink-faint); }
.reg-receipt-who { padding: 0.75rem 1.2rem; border-top: 1px dashed var(--reg-line); }
.reg-receipt-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.reg-receipt-name .reg-ic { color: var(--reg-ink-faint); }
.reg-receipt-name .reg-ic.is-done { color: var(--reg-accent); }
.reg-receipt-now { margin-left: auto; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--reg-accent-soft); color: var(--reg-accent-deep); font-size: 0.75rem; }
.reg-receipt-line { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.2rem; padding-left: 1.6rem; font-size: 0.9rem; color: var(--reg-ink-soft); font-variant-numeric: tabular-nums; }
.reg-receipt-empty { margin-top: 0.15rem; padding-left: 1.6rem; font-size: 0.86rem; color: var(--reg-ink-faint); }
.reg-receipt-who--later .reg-receipt-name { color: var(--reg-ink-faint); }
.reg-receipt-total { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 1.2rem 0.35rem; border-top: 1px solid var(--reg-line-soft); background: var(--reg-surface-alt); font-weight: 600; }
.reg-receipt-total strong { font-family: 'Archivo', 'Poppins', system-ui, sans-serif; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.reg-receipt-foot { padding: 0 1.2rem 1rem; background: var(--reg-surface-alt); font-size: 0.84rem; color: var(--reg-ink-faint); }
/* The same card before anybody is on it: dashed, quiet, and saying what will appear. */
.reg-receipt--empty { border-style: dashed; border-color: var(--reg-line); background: transparent; }
.reg-receipt-blank { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.25rem 1.5rem 1.6rem; border-top: 1px dashed var(--reg-line); text-align: center; font-size: 0.88rem; color: var(--reg-ink-faint); }
.reg-receipt-blank strong { font-weight: 600; color: var(--reg-ink-soft); font-size: 0.95rem; }
.reg-receipt-blank-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 0.35rem; border-radius: 50%; background: var(--reg-accent-soft); color: var(--reg-accent); }
.reg-receipt-blank-icon .reg-ic { width: 1.3rem; height: 1.3rem; }
/* Beside the review: the three things pressing the button sets off, numbered. */
.reg-next { margin: 0; padding: 0.25rem 1.2rem 1.2rem; list-style: none; counter-reset: next; display: flex; flex-direction: column; gap: 0.75rem; }
.reg-next li { counter-increment: next; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.6rem; font-size: 0.9rem; color: var(--reg-ink-soft); }
.reg-next li::before { content: counter(next); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--reg-accent-soft); color: var(--reg-accent-deep); font-size: 0.8rem; font-weight: 600; }
/* Everybody in this registration: who is done, whose turn it is, and who is still to come. */
.reg-people { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.reg-person {
display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem;
padding: 0.3rem 0.95rem 0.3rem 0.35rem; border: 1.5px solid var(--reg-line-soft); border-radius: 999px;
background: var(--reg-surface); font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--reg-ink-soft);
}
button.reg-person { cursor: pointer; }
button.reg-person:hover { background: var(--reg-accent-soft); color: var(--reg-ink); }
.reg-person-av { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #f4f4f5; color: var(--reg-ink-faint); font-size: 0.78rem; font-weight: 600; }
.reg-person.is-done .reg-person-av { background: var(--reg-accent-soft); color: var(--reg-accent); }
.reg-person.is-now { border-color: var(--reg-accent); color: var(--reg-ink); box-shadow: 0 0 0 3px var(--reg-accent-soft); }
.reg-person.is-now .reg-person-av { background: var(--reg-accent); color: #fff; }
/* A person's details: two columns of labelled boxes, the birthday and anything long across both. */
.reg-fields.auth-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Big enough to hit and to read on a phone held at arm's length. */
.reg-panel input:not([type=checkbox]):not([type=radio]), .reg-panel select, .reg-panel textarea { min-height: 3rem; font-size: 1rem; border-radius: 10px; }
.reg-panel .form-field label, .reg-label { font-weight: 600; font-size: 0.95rem; color: var(--reg-ink); }
.reg-fields .form-field { margin: 0; }
.reg-fields-wide { grid-column: 1 / -1; }
.reg-label { display: block; font-weight: 500; font-size: 0.875rem; margin-bottom: 0.35rem; }
.reg-dob { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 0.5rem; }
.reg-dob select { width: 100%; min-width: 0; }
.reg-filled { display: flex; gap: 0.4rem; align-items: flex-start; color: var(--reg-accent-deep); }
.reg-filled .reg-ic { margin-top: 0.15rem; }
/* What a person is entering, under their details. */
.reg-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--reg-line-soft); }
.reg-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.reg-section-head .reg-h3 { margin: 0 0 0.2rem; }
/* The same rule above a heading that opens a new part of a screen with no section around it. */
.reg-panel > .reg-section-head { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--reg-line-soft); }
.reg-same.btn { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; background: var(--reg-accent-soft); border-color: var(--reg-accent-line); color: var(--reg-accent-deep); }
.reg-same.btn:hover { background: var(--reg-accent-soft); border-color: var(--reg-accent); color: var(--reg-accent-deep); }
/* Under a person's events: the team events they cannot tick, and the way to enter one. */
.reg-team-note { display: flex; align-items: center; gap: 0.9rem; margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--reg-radius); background: var(--reg-surface-alt); border: 1px solid var(--reg-line-soft); }
.reg-team-note > .reg-ic { color: var(--reg-accent); width: 1.3rem; height: 1.3rem; }
.reg-team-note-words { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.9rem; color: var(--reg-ink-soft); min-width: 0; }
.reg-team-note-words strong { color: var(--reg-ink); font-weight: 600; }
.reg-team-note .btn { flex: none; }
@media (max-width: 40rem) { .reg-team-note { flex-wrap: wrap; } .reg-team-note .btn { width: 100%; } }
/* The total, on a phone, where the receipt is not drawn. Held at the foot of the screen on the
organizer's own page; in an embed it cannot be -- the frame is as tall as the form -- so there it
simply ends the screen. */
.reg-bar {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
margin-top: 1rem;
padding: 0.9rem 1.1rem;
background: var(--reg-ink);
border: 0;
border-radius: var(--reg-radius);
color: #fff;
font: inherit;
cursor: pointer;
}
.reg-bar:hover { background: #000; color: #fff; }
.reg-bar-who { flex: 1; text-align: left; }
.reg-bar-total { font-variant-numeric: tabular-nums; font-weight: 600; }
.reg-bar-go { font-size: 0.85rem; opacity: 0.75; }
.reg-stage--aside .reg-bar { display: none; }
@media (max-width: 56rem) {
.reg-stage { display: block; max-width: 40rem; margin-inline: auto; }
.reg-stage--aside .reg-receipt { display: none; }
.reg-stage--aside .reg-bar { display: flex; }
.reg-layout:not(.reg-layout--embed) .reg-bar { position: sticky; bottom: 0.75rem; box-shadow: 0 6px 20px rgba(24, 24, 27, 0.18); }
}
/* ── "Are you sure?" ───────────────────────────────────────────────────────────
public/js/reg-confirm.js. The app's dialog look -- display-face title, a sentence, Cancel then the
act -- on a native