/* A tracker's pages. Same field-and-dawn palette as the marketing site (platform.css): deep forest for the dark
   surfaces, warm paper for the page, one hot orange for the action that matters, the status greens and ambers.
   Bricolage Grotesque for headings and big numbers, Inter for everything else. */
:root {
  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-2: #f8f6f1;
  --ink: #14201b;
  --ink-2: #3f4d46;
  --muted: #6b776f;
  --line: #e3ded3;
  --line-2: #cfc8ba;
  --primary: #0f2e22;         /* the forest: solid buttons, selection, the active section */
  --primary-hover: #17452f;
  --primary-ink: #0f2e22;     /* header, hero, gate */
  --forest-2: #17452f;
  --primary-soft: #e6ece4;    /* the paper with a breath of forest in it: selected rows and cards */
  --green: #1d7a4c;
  --green-soft: #e3f3ea;
  --amber: #b45309;
  --amber-soft: #fff3df;
  --red: #b91c1c;
  --red-soft: #fde8e8;
  --blue: #0f2e22;            /* the old action blue is gone; anything still asking for it gets the forest */
  --blue-soft: #e6ece4;
  --grey-soft: #eeeae1;
  --hot: #ff5a1f;
  --hot-hover: #e64a10;
  --glow: #ffb454;            /* dawn: focus rings, the live dot's warmth */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 46, 34, .04), 0 12px 32px -20px rgba(15, 46, 34, .28);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --gutter: clamp(16px, 2.6vw, 40px);
  /* The one dark surface: the marketing hero's night-before-dawn. Header, home hero, the Sale Day button's stage, the gate. */
  --dark: radial-gradient(55% 110% at 92% -10%, rgba(255,166,77,.22) 0%, transparent 62%), radial-gradient(50% 110% at 4% 110%, rgba(29,122,76,.45) 0%, transparent 60%), linear-gradient(160deg, #0b2419 0%, #0f2e22 55%, #17452f 100%);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: #1f6b4a; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .35em; line-height: 1.2; letter-spacing: -.01em; }
h1, h2 { font-family: var(--display); font-optical-sizing: auto; }
h1 { font-size: 1.9rem; font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
h2 { font-size: 1.3rem; font-weight: 750; letter-spacing: -.015em; }
h3 { font-size: 1.05rem; font-weight: 700; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }
input:focus-visible, textarea:focus-visible { outline: none; }
p { margin: 0 0 .75em; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.tiny { font-size: .78rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- layout ---------- */
.topbar {
  background: var(--primary-ink); color: #fff; position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 18px -10px rgba(0,0,0,.6);
}
.topbar-inner { width: 100%; padding: 0 var(--gutter); display: flex; align-items: center; gap: 18px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: -.015em; font-size: 1.2rem; line-height: 1.1; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { height: 42px; width: auto; object-fit: contain; }
.brand small { display: block; font-family: var(--sans); font-weight: 500; font-size: .74rem; color: #b7d3c4; letter-spacing: .01em; margin-top: 2px; }
.nav { display: flex; gap: 4px; margin-left: 10px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: #d5e6dc; padding: 9px 13px; border-radius: 10px; font-weight: 650; font-size: .96rem; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center;
}
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav a.active { background: rgba(255,255,255,.14); color: #fff; }
.nav .badge { background: var(--glow); color: #1a1200; font-size: .72rem; padding: 1px 7px; border-radius: 999px; font-weight: 800; }
.nav .badge.zero { background: rgba(255,255,255,.18); color: #fff; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #d5e6dc; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.06); }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.live.on .dot { background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: pulse 2s infinite; }
.live.off .dot { background: var(--glow); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6);} 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0);} 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0);} }
.who { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: .85rem; cursor: pointer; }
.who:hover { background: rgba(255,255,255,.18); }
.who.unknown { background: var(--glow); color: #1a1200; border-color: transparent; }
.tour-btn { background: transparent; color: #d5e6dc; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tour-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 640px) { .tour-btn .lbl { display: none; } .tour-btn { padding: 5px 9px; } }

main { width: 100%; padding: 24px var(--gutter) 88px; }
@media (max-width: 640px) { main { padding: 16px var(--gutter) 80px; } .topbar-inner { gap: 8px; } .brand small { display: none; } footer.foot { padding: 0 var(--gutter) 24px; } }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-head .lede { color: var(--ink-2); max-width: 720px; margin: 0; }

/* Instruction strip: the minimum someone needs to know on this page */
.howto {
  display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 18px; font-size: .94rem;
}
.howto.amber { border-left-color: var(--glow); }
.howto .icon { font-size: 1.2rem; line-height: 1.2; }
.howto ol { margin: 4px 0 0; padding-left: 20px; }
.howto ol li { margin: 2px 0; }
.howto ol li strong { color: var(--ink); }
.howto .close { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 2px; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.card + .card { margin-top: 16px; }
.card.pad-0 { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.mt { margin-top: 16px; } .mt-sm { margin-top: 8px; } .mb { margin-bottom: 16px; }
.spread { justify-content: space-between; }

/* stat tiles */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .label { color: var(--muted); font-size: .86rem; font-weight: 600; }
.stat .value { font-family: var(--display); font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .sub { color: var(--muted); font-size: .84rem; margin-top: 2px; }
.stat.good .value { color: var(--green); }
.stat.warn .value { color: var(--amber); }

/* hero */
.hero { background: var(--dark); color: #fff; border-radius: 24px; padding: 32px 36px; position: relative; overflow: hidden; margin-bottom: 22px; box-shadow: 0 30px 60px -36px rgba(11,36,25,.7); }
.hero h1 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); margin-bottom: 8px; color: #fff; }
.hero .sub { color: #d9e8df; font-size: 1.05rem; line-height: 1.5; max-width: 60ch; }
.hero .countdown { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.hero .cd { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 10px 14px; min-width: 78px; text-align: center; }
.hero .cd b { display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hero .cd span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #b7d3c4; }
.hero .live-now { display: inline-block; margin-top: 12px; background: var(--glow); color: #1a1200; font-weight: 800; padding: 7px 14px; border-radius: 999px; animation: wobble 1.6s infinite; text-decoration: none; cursor: pointer; }
.hero .live-now:hover { background: #ffc46e; text-decoration: none; }
@keyframes wobble { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
.hero .actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero.split { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 30px 36px; }
.hero.split .hero-main { flex: 1 1 420px; min-width: 0; }
.hero.split .hero-side { flex: 0 1 auto; text-align: right; }
.hero.split .countdown { margin-top: 0; justify-content: flex-end; gap: 8px; }
.hero.split .cd { min-width: 64px; padding: 6px 10px; }
.hero.split .cd b { font-size: 1.45rem; }
.hero .signups { margin-top: 12px; color: #b7d3c4; font-size: .95rem; }
.hero .signups b { color: #fff; font-family: var(--display); font-size: 1.4rem; font-weight: 800; }
@media (max-width: 640px) { .hero, .hero.split { padding: 24px 22px; border-radius: 20px; } }
@media (max-width: 760px) { .hero.split .hero-side { text-align: left; width: 100%; } .hero.split .countdown { justify-content: flex-start; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  border-radius: 12px; padding: 9px 16px; font: inherit; font-weight: 650; font-size: .94rem; cursor: pointer; line-height: 1.2; transition: background .12s, transform .06s, box-shadow .12s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.hot { background: var(--hot); border-color: var(--hot); color: #fff; }
.btn.hot:hover { background: var(--hot-hover); }
.btn.danger { color: var(--red); border-color: #efc4c4; background: #fff; }
.btn.danger:hover { background: var(--red-soft); }
.btn.danger.solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger.solid:hover { background: #991b1b; }
.btn.success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.success:hover { background: #15803d; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--grey-soft); }
/* the second choice beside a primary button: the same size, drawn in outline (the inset shadow thickens the line without adding height) */
.btn.outline { background: transparent; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.btn.outline:hover { background: var(--surface-2); }
.btn.big { font-size: 1.08rem; padding: 14px 24px; border-radius: 14px; }
.btn.sm { padding: 6px 11px; font-size: .84rem; border-radius: 9px; }
.btn.block { width: 100%; }
.btn.light { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
.btn.light:hover { background: rgba(255,255,255,.24); }

/* copy button */
.copy {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .78rem; font-weight: 700; color: var(--primary); background: var(--primary-soft);
  border: 1px solid transparent; border-radius: 8px; padding: 4px 9px; cursor: pointer; transition: all .12s; white-space: nowrap;
}
.copy:hover { background: #d8e2d9; }
.copy.done { background: var(--primary); color: #fff; }
.copy.copied { background: var(--green-soft); color: var(--green); }
.copy.copied:hover { background: #c8f0d8; }
.copyval.copied .val { color: var(--green); }
.copy svg { width: 13px; height: 13px; }
.copyval { display: inline-flex; align-items: center; gap: 8px; }
.copyval .val { font-family: var(--mono); font-size: 1.02rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; padding: 2px 6px; border-radius: 6px; border: 1px dashed transparent; }
.copyval .val:hover { border-color: var(--line-2); background: var(--surface-2); }
.copyval .val.empty { color: var(--red); font-family: var(--sans); font-weight: 600; font-size: .85rem; cursor: default; }
.copyval .val.empty:hover { border-color: transparent; background: none; }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 750; letter-spacing: .01em; white-space: nowrap; }
.pill.notyet { background: var(--grey-soft); color: var(--ink-2); }
.pill.got { background: var(--green-soft); color: var(--green); }
.pill.dropped { background: #eee; color: #777; text-decoration: line-through; }
.pill.held { background: var(--amber-soft); color: var(--amber); }
.pill.held::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); animation: pulse-amber 1.4s infinite; }
@keyframes pulse-amber { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.pill.missing { background: var(--red-soft); color: var(--red); }
.pill.ready { background: var(--primary-soft); color: var(--primary); }
.pill.mine { background: var(--primary); color: #fff; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch.lg { width: 18px; height: 18px; border-radius: 6px; }

/* ---------- group cards ---------- */
/* A grid: the name and the status share the top row, so a long status never sits on a long name. */
.gcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: start; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .1s, box-shadow .12s; }
.gcard .gmeta, .gcard .members, .gcard .slots { grid-column: 1 / -1; }
.gcard:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 14px 32px -16px rgba(15,46,34,.35); }
.gcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, #999); }
.gcard.mine { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow); }
.gcard .gname { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; min-width: 0; }
.gcard .gmeta { color: var(--muted); font-size: .82rem; margin: 2px 0 8px; }
.gcard .members { display: flex; flex-wrap: wrap; gap: 4px; }
.gcard .member { font-size: .8rem; padding: 2px 8px; border-radius: 999px; background: var(--grey-soft); color: var(--ink-2); }
.gcard .member.got { background: var(--green-soft); color: var(--green); }
.gcard .member.dropped { text-decoration: line-through; opacity: .6; }
.gcard .member.held { background: var(--amber-soft); color: var(--amber); }
.gcard .member.open { border: 1px dashed var(--line-2); background: transparent; color: var(--muted); }
.gcard .gstatus { justify-self: end; margin-top: 2px; }
/* Narrow cards (the All groups grid): the status sits under the name rather than beside it. */
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid-3 .gcard { grid-template-columns: minmax(0, 1fr); }
.grid-3 .gcard .gstatus { justify-self: start; margin: 6px 0 2px; }
.group-list .gcard { padding: 14px 18px 14px 20px; }
.group-list .gcard .member { font-size: .86rem; padding: 3px 10px; }
.slots { display: flex; gap: 3px; margin-top: 8px; }
.slots i { flex: 1; height: 6px; border-radius: 3px; background: var(--grey-soft); }
.slots i.filled { background: var(--line-2); }
.slots i.got { background: var(--green); }
.slots i.held { background: var(--glow); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .82rem; color: var(--muted); font-weight: 650; padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2); }
tr.dim td { opacity: .55; }
tr.hl td { background: #fffbeb; }
tr.mine-row td { background: var(--primary-soft); }
tr.mine-row td:first-child { box-shadow: inset 4px 0 0 var(--primary); }
tr.held-row td { background: var(--amber-soft); }
tr.held-row td:first-child { box-shadow: inset 4px 0 0 var(--glow); }
tr.copied-row td { background: #dcfce7; }
tr.copied-row td:first-child { box-shadow: inset 4px 0 0 var(--green); }
tr.got-row td { background: #ecfdf3; color: var(--muted); }
tr.got-row td .name { color: var(--green); }
tr.got-row td:first-child { box-shadow: inset 4px 0 0 var(--green); }
tr.pickable { cursor: pointer; user-select: none; }
tr.pickable:hover td { background: var(--surface-2); }
tr.pickable.picked td { background: var(--primary-soft); }
tr.pickable.picked td:first-child { box-shadow: inset 4px 0 0 var(--primary); }
td.c-pick { width: 44px; }
td.c-pick input.pick { width: 24px; height: 24px; accent-color: var(--primary); cursor: pointer; display: block; }
.copyval .val.plain { cursor: default; border-color: transparent; }
.copyval .val.plain:hover { background: none; border-color: transparent; }
td .name { font-weight: 700; }
td .sub { color: var(--muted); font-size: .8rem; }
.slotnum { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grey-soft); font-weight: 800; font-size: .8rem; color: var(--ink-2); }
.checkout-table td { padding: 12px; }
td.c-status .pill { white-space: normal; line-height: 1.3; }
td.c-status .pill.held::before { flex: 0 0 7px; }
.checkout-table .copyval .val { font-size: 1.12rem; }

/* ---------- forms ---------- */
label.field { display: block; margin-bottom: 12px; }
label.field > span, .field-label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
label.field .hint, .hint { display: block; font-size: .8rem; color: var(--muted); margin-top: 4px; font-weight: 400; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=datetime-local], input[type=number], input[type=url], input[type=search], textarea {
  width: 100%; font: inherit; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); outline: none; transition: border .12s, box-shadow .12s;
}
input:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,46,34,.14); }
input.mono { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .04em; }
input.error { border-color: var(--red); }
textarea { min-height: 90px; resize: vertical; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .form-2 { grid-template-columns: 1fr; } }
.error-text { color: var(--red); font-size: .84rem; font-weight: 600; margin-top: 6px; }

/* segmented toggle (instead of dropdowns) */
.seg { display: inline-flex; background: var(--grey-soft); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { font: inherit; font-weight: 650; font-size: .9rem; padding: 7px 14px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg.block { display: flex; } .seg.block button { flex: 1; }

/* choice cards (instead of dropdowns) */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.choice { text-align: left; font: inherit; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border .12s, background .12s; position: relative; color: inherit; }
.choice:hover { border-color: var(--line-2); background: var(--surface-2); }
.choice.on { border-color: var(--primary); background: var(--primary-soft); }
.choice.on::after { content: "\2713"; position: absolute; right: 10px; top: 8px; color: var(--primary); font-weight: 900; }
.choice:disabled { opacity: .5; cursor: not-allowed; }
.choice .t { font-weight: 750; display: flex; align-items: center; gap: 8px; }
.choice .d { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.choice.big { padding: 18px 16px; }
.choice.big .t { font-size: 1.05rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: .84rem; font-weight: 650; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { background: var(--surface-2); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.on .swatch { box-shadow: 0 0 0 1px #fff; }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.check:hover { background: var(--surface-2); }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }

/* ---------- wizard ---------- */
.wizard { max-width: 640px; margin: 0 auto; }
.wizard .progress { height: 6px; background: var(--grey-soft); border-radius: 3px; overflow: hidden; margin-bottom: 22px; }
.wizard .progress i { display: block; height: 100%; background: var(--primary); transition: width .3s ease; }
.wizard .step { animation: fadeup .25s ease; }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none;} }
.wizard .q { font-family: var(--display); font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 6px; }
.wizard .why { color: var(--ink-2); margin-bottom: 18px; }
.wizard .stepnum { color: var(--muted); font-size: .84rem; font-weight: 650; margin-bottom: 6px; }
.wizard .actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.wizard .actions .spacer { flex: 1; }
/* The row is a container, so a long button can shed words when there is no room beside Back (small phones). */
.wizard .actions { container-type: inline-size; }
.wizard .actions .btn:has(.more) { white-space: nowrap; }
@container (max-width: 400px) { .wizard .actions .more { display: none; } }   /* the whole label and Back need about 392px */
.wizard input[type=text], .wizard input[type=email], .wizard input[type=tel] { font-size: 1.15rem; padding: 13px 14px; }
.wizard .review dt { color: var(--muted); font-size: .82rem; font-weight: 650; }
.wizard .review dd { margin: 0 0 12px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; }
.wizard .review dd .edit { font-size: .8rem; }
.done-big { font-size: 3.5rem; line-height: 1; margin-bottom: 8px; }

/* ---------- feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.feed li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; align-items: flex-start; }
.feed li:last-child { border-bottom: 0; }
.feed .k { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: .85rem; flex: none; background: var(--grey-soft); }
.feed .k.bought { background: var(--primary-soft); }
.feed .k.claim { background: var(--amber-soft); }
.feed .k.join, .feed .k.group { background: var(--blue-soft); }
.feed .k.drop, .feed .k.delete, .feed .k.reset { background: var(--red-soft); }
.feed time { color: var(--muted); font-size: .78rem; margin-left: auto; white-space: nowrap; flex: none; }
.feed li.new { animation: flash 1.2s ease; }
@keyframes flash { from { background: #fef9c3; } to { background: transparent; } }

/* ---------- banners ---------- */
.banner { border-radius: 14px; padding: 14px 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; border: 1px solid; }
.banner .txt { flex: 1; min-width: 200px; }
.banner.stop { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.banner.go { background: #16a34a; border-color: #15803d; color: #fff; box-shadow: 0 8px 24px -12px rgba(22,163,74,.7); }
.banner.go strong { color: #fff; font-size: 1.05rem; }
.banner.go a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.banner.hold { background: var(--amber-soft); border-color: #fcd34d; color: #78350f; }
.banner.info { background: var(--primary-soft); border-color: #cdd8cf; color: var(--primary); }
.banner strong { font-weight: 800; }
.banner .big-emoji { font-size: 1.6rem; }

/* ---------- login ---------- */
.gate {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; overflow: auto;
  background: radial-gradient(45% 60% at 82% 18%, rgba(255,166,77,.26) 0%, transparent 60%), radial-gradient(45% 60% at 10% 90%, rgba(29,122,76,.5) 0%, transparent 60%), linear-gradient(160deg, #0b2419 0%, #0f2e22 55%, #17452f 100%) #0f2e22;
}
.gate-box { width: 100%; max-width: 440px; display: grid; gap: 26px; justify-items: center; }
.gate-brand { display: block; width: min(320px, 82%); height: auto; }
.gate .card { width: 100%; padding: 30px 32px 28px; border-radius: 24px; border-color: rgba(255,255,255,.6); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75); }
.gate .card h2 { font-size: 1.6rem; margin-bottom: 4px; }
.gate .card .btn.primary.big { margin-top: 12px; }
.gate-foot { color: #b7d3c4; font-size: .86rem; text-align: center; margin: 0; }
.gate-foot a { color: #fff; font-weight: 600; }
@media (max-width: 480px) { .gate .card { padding: 24px 20px; border-radius: 20px; } }
.wordmark { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 18px; }

/* ---------- toast + modal ---------- */
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; width: min(92vw, 460px); pointer-events: none; }
.toast { background: #0b2419; color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); font-weight: 600; font-size: .92rem; animation: fadeup .2s ease; pointer-events: auto; display: flex; gap: 10px; align-items: center; }
.toast.ok { background: var(--green); }
.toast.err { background: var(--red); }
.toast.warn { background: #d97706; }
.modal-bg { position: fixed; inset: 0; background: rgba(8,20,14,.6); z-index: 150; display: grid; place-items: center; padding: 16px; animation: fadein .15s; }
@keyframes fadein { from { opacity: 0;} to { opacity: 1;} }
.modal { background: #fff; border-radius: 20px; width: min(100%, 560px); max-height: 92vh; overflow: auto; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); animation: fadeup .2s; }
.modal.wide { width: min(100%, 760px); }
.modal .m-head { padding: 22px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.modal .m-head h2 { margin: 0; }
.modal .m-body { padding: 14px 24px; }
.modal .m-foot { padding: 14px 24px 20px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); }
.modal .x { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 6px; }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.empty .big:not(.btn) { font-size: 2.4rem; margin-bottom: 6px; }   /* the emoji, not a .btn.big inside the same card */
.kbd { font-family: var(--mono); font-size: .78rem; background: var(--grey-soft); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.guide h2 { margin-top: 26px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.guide dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.guide dt { font-weight: 700; color: var(--ink-2); }
.guide dd { margin: 0; }
@media (max-width: 560px) { .guide dl { grid-template-columns: 1fr; } .guide dd { margin-bottom: 8px; } }
.guide ol li { margin-bottom: 6px; }
.hold-timer { font-variant-numeric: tabular-nums; font-weight: 800; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 12px; }
.section-title h2 { margin: 0; }
.searchbox { max-width: 320px; }
.fun { color: var(--muted); font-style: italic; font-size: .86rem; }
footer.foot { padding: 0 28px 30px; color: var(--muted); font-size: .8rem; text-align: center; }

/* ---------- console: a sidebar of sections on desktop, a strip of tabs on a phone ----------
   Used by the organiser pages on the platform and by a tracker's Admin page. Each section is its own address. */
.console { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.console-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 20px; }
.console-name { font-family: var(--display, "Bricolage Grotesque", var(--sans)); font-weight: 800; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.console-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.console-url { font-family: var(--mono); font-size: .78rem; color: var(--muted); margin-top: 8px; word-break: break-all; }
.console-nav { display: flex; flex-direction: column; gap: 2px; }
.console-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 650; }
.console-nav a svg { width: 18px; height: 18px; flex: 0 0 18px; }
.console-nav a:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.console-nav a.active, .console-nav a.active:hover { background: var(--primary-ink); color: #fff; }
.console-side-actions { display: flex; flex-direction: column; gap: 8px; }
.console-side-actions .btn { justify-content: center; }
.console-looking { border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.console-looking b { color: var(--ink); }
.console-looking a { display: inline-block; margin-top: 6px; font-weight: 700; }
@media (max-width: 900px) { .console-looking { margin-top: 4px; } }
.console-main { max-width: 880px; min-width: 0; }
.console-head { margin-bottom: 20px; }
.console-head h1 { font-family: var(--display, "Bricolage Grotesque", var(--sans)); font-size: 1.9rem; margin-bottom: 4px; overflow-wrap: anywhere; }
.console-head .lede { color: var(--ink-2); margin: 0; }
.console-main .card { padding: 22px 24px; }
.console-main .card + .card { margin-top: 18px; }
.console-main .card h2 { font-size: 1.2rem; margin-bottom: 10px; }
.console-main .card.attention { border-color: var(--glow); }
.invite-text { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; white-space: pre-wrap; font-size: .95rem; line-height: 1.5; }
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.numbers.dates { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.numbers .n { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.numbers .n b { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.numbers.dates .n b { font-size: 1.05rem; }
.numbers .n span { color: var(--muted); font-size: .8rem; }
.tracker-form { display: grid; gap: 14px; max-width: 520px; margin-top: 14px; }
.tracker-form .field { margin: 0; }
.tracker-form .field-set { display: grid; gap: 14px; }   /* a few fields the walkthrough points at together */
.upgrade-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.upgrade { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.upgrade .btn { align-self: flex-start; }
.receipts { width: 100%; border-collapse: collapse; font-size: .92rem; }
.receipts td { padding: 9px 12px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.receipts tr:first-child td { border-top: 0; }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.setup-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.5; }
.setup-steps li::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--primary-ink); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.audit { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.audit li { display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.audit li:first-child { border-top: 0; }
.audit li time { color: var(--muted); white-space: nowrap; min-width: 90px; }
.danger-zone { border-color: #efc4c4; }
.status-pill.draft { background: var(--amber-soft); color: var(--amber); }
.status-pill.active { background: var(--green-soft); color: var(--green); }
.status-pill.read_only, .status-pill.archived { background: var(--grey-soft); color: var(--ink-2); }
@media (max-width: 900px) {
  .console { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .console-side { position: static; gap: 14px; }
  .console-nav { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter, 14px)); padding: 2px var(--gutter, 14px); }
  .console-nav::-webkit-scrollbar { display: none; }
  .console-nav a { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 14px; }
  .console-side-actions { flex-direction: row; flex-wrap: wrap; }
  .console-side-actions .btn { flex: 1 1 auto; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- phones ---------- */
@media (max-width: 760px) {
  /* Three centred rows: brand, then live + walkthrough + who, then the pages */
  .topbar-inner { flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px 8px; min-height: 0; }
  .brand { justify-content: center; text-align: left; }
  .nav { width: 100%; margin: 4px 0 0; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.14); flex-wrap: wrap; justify-content: center; order: 3; }
  .nav a { padding: 7px 9px; font-size: .88rem; }
  .topbar-right { margin: 0; width: 100%; justify-content: center; }
  .who { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 700px) {
  /* On phones each person is one card. The card carries the colour (held amber, sorted green, you blue), the
     registration number and postcode are the big things, everything else steps back. */
  table.stack-sm thead { display: none; }
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr { display: block; width: 100%; }
  table.stack-sm tbody { padding: 8px 10px; }
  table.stack-sm tr { position: relative; margin: 0 0 10px; padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  table.stack-sm td { min-width: 0; }
  table.stack-sm td[data-l] .copyval .val { min-width: 0; overflow-wrap: anywhere; }
  table.stack-sm tr:last-child { margin-bottom: 0; }
  table.stack-sm td, table.stack-sm tr.held-row td, table.stack-sm tr.got-row td, table.stack-sm tr.mine-row td, table.stack-sm tr.hl td, table.stack-sm tr.clickable:hover td { padding: 0; border: 0; display: block; background: transparent; box-shadow: none; }
  table.stack-sm tr.dim td { opacity: 1; }
  table.stack-sm tr.dim { opacity: .55; }
  table.stack-sm tr.hl { background: #fffbeb; }
  table.stack-sm tr.held-row { background: var(--amber-soft); border-color: #f5cf8a; }
  table.stack-sm tr.copied-row { background: #dcfce7; border-color: #86efac; }
  table.stack-sm tr.got-row { background: #ecfdf3; border-color: #a7f3d0; }
  table.stack-sm tr.mine-row { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
  table.stack-sm td.c-slot { position: absolute; right: 12px; top: 11px; }
  table.stack-sm td.c-name { grid-column: 1 / -1; padding-right: 36px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  table.stack-sm td.c-name .name { font-size: 1.1rem; }
  table.stack-sm td[data-l] { grid-column: 1 / -1; }
  table.stack-sm td[data-l]::before { content: attr(data-l); display: block; font-size: .76rem; color: var(--muted); font-weight: 650; margin-bottom: 3px; }
  table.stack-sm td[data-l] .copyval { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 9px; padding: 6px 6px 6px 10px; }
  table.stack-sm td[data-l] .copyval .val { padding: 0; font-size: 1.2rem; border: 0; }
  table.stack-sm td[data-l] .copyval .val.empty { font-size: .95rem; }
  table.stack-sm td[data-l] .copy { padding: 7px 11px; font-size: .84rem; }
  table.stack-sm tr.got-row td[data-l] .copyval, table.stack-sm td[data-l] .copyval:has(.val.plain) { background: transparent; border-color: transparent; padding-left: 0; }
  table.stack-sm td.c-ticket { grid-column: 1 / -1; display: block; font-size: .82rem; color: var(--muted); }
  table.stack-sm td.c-ticket .sub { display: inline; }
  table.stack-sm td.c-ticket .sub::before { content: "\00a0\00b7\00a0"; }
  table.stack-sm td.c-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  table.stack-sm td.c-status .pill { white-space: normal; text-align: left; line-height: 1.3; padding: 4px 10px; max-width: 100%; }
  table.stack-sm td.c-status .pill.held::before { flex: 0 0 7px; }
  table.stack-sm td.c-status .sub { margin: 0; }
  table.stack-sm td.c-edit { grid-column: 2; text-align: right; align-self: center; }
  .page-head .stat { width: 100%; }
}

/* ---------- calmer sale-day mode + welcome ---------- */
.howto.compact { padding: 10px 14px; font-size: .88rem; }
.howto.compact .icon { display: none; }
.welcome { max-width: 680px; margin: 2vh auto 0; }
.welcome-hero { background: var(--dark); color: #fff; border-radius: 24px; padding: 34px 32px 30px; margin-bottom: 22px; box-shadow: 0 30px 60px -36px rgba(11,36,25,.7); }
.welcome-hero .wordmark { width: min(260px, 70%); margin: 0 0 26px; }
.welcome h1 { font-size: 2.3rem; color: #fff; margin-bottom: 8px; }
.welcome .lede { font-size: 1.05rem; color: #d9e8df; margin-bottom: 0; max-width: 52ch; }
.welcome-body { padding: 22px 24px; }
@media (max-width: 480px) { .welcome-hero { padding: 26px 22px 24px; border-radius: 20px; } .welcome h1 { font-size: 1.9rem; } .welcome-body { padding: 18px 16px; } }
.welcome .chips { max-height: 260px; overflow: auto; padding: 2px; }
.welcome .chip { font-size: .95rem; padding: 8px 14px; }
.welcome .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin: 18px 0; }
.welcome .or::before, .welcome .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.welcome-actions { display: grid; gap: 10px; }
.salebar { background: #fff7ed; border: 1px solid #fdba74; color: #7c2d12; border-radius: 10px; padding: 8px 14px; margin-bottom: 14px; font-weight: 600; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.salebar .spacer { flex: 1; }
.page-head.slim { margin-bottom: 10px; }
.page-head.slim h1 { font-size: 1.5rem; }

/* ---------- guide accordions ---------- */
.acc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin: 10px 0; box-shadow: var(--shadow); }
.acc > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 750; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "\25BE"; color: var(--muted); transition: transform .15s; }
.acc[open] > summary::after { transform: rotate(180deg); }
.acc > summary:hover { color: #1f6b4a; }
.acc-body { padding: 0 18px 16px; border-top: 1px solid var(--line); }
.acc-body > :first-child { margin-top: 14px; }
.guide h2 { margin: 0; }

/* ---------- walkthrough ---------- */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 2px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; text-align: center; transition: border-color .12s, background .12s; }
.dropzone:hover, .dropzone.over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone .dz-big { font-weight: 750; }
.dropzone .dz-small { color: var(--muted); font-size: .86rem; }
.tour { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
/* the tap cue: a fingertip pressing the thing that changes the page, played once at the moment of the change; invisible otherwise */
.tour-tap { position: fixed; display: none; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.45); }
.tour-tap::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #fff; }
.tour-tap.go { display: block; animation: tour-press-once 1.5s ease-in-out both; }
.tour-tap.swipe { display: block; }   /* the same fingertip dragging a tab strip; tour.js moves it frame by frame */
.tour-tap.go::after { animation: tour-ripple-once 1.5s ease-out both; }
.tour-pressed { transform: scale(.94) !important; transition: transform .16s !important; }
@keyframes tour-press-once { 0% { transform: scale(1.15); opacity: 0; } 12% { opacity: .95; } 35% { transform: scale(.55); opacity: 1; } 50% { transform: scale(1.05); } 80% { transform: scale(1); opacity: .95; } 100% { transform: scale(1); opacity: 0; } }
@keyframes tour-ripple-once { 0%, 33% { transform: scale(.7); opacity: 0; } 40% { opacity: .95; } 90%, 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tour-tap.go, .tour-tap.go::after { animation: none; } .tour-tap.go { opacity: 0; } }
.tour.nospot::before { content: ""; position: fixed; inset: 0; background: rgba(8, 20, 14, .6); }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 20, 14, .6); outline: 3px solid #fff; transition: left var(--tour-ms, .2s) cubic-bezier(.65, 0, .35, 1), top var(--tour-ms, .2s) cubic-bezier(.65, 0, .35, 1), width .2s, height .2s; }
.tour-card { position: fixed; pointer-events: auto; width: min(380px, calc(100vw - 24px)); background: #fff; color: var(--ink); border-radius: 18px; padding: 18px 20px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); transition: left var(--tour-ms, 0s) cubic-bezier(.65, 0, .35, 1), top var(--tour-ms, 0s) cubic-bezier(.65, 0, .35, 1), opacity .28s ease-out .05s; }
.tour.moving .tour-card { opacity: 0; transition: opacity .12s; }   /* the page moves first, then the explanation appears */
@media (prefers-reduced-motion: reduce) { .tour-card, .tour.moving .tour-card { transition: none; opacity: 1; } }
.tour-card .tour-count { font-size: .8rem; font-weight: 650; color: var(--muted); }
.tour-card h3 { margin: 4px 0 6px; font-family: var(--display); font-size: 1.25rem; letter-spacing: -.01em; }
.tour-card p { margin: 0 0 12px; color: var(--ink-2); }

/* ---------- celebration ---------- */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 500; }
.modal .m-head.bare { padding: 0; position: absolute; right: 8px; top: 8px; z-index: 1; }
.modal .m-head.bare h2 { display: none; }
.modal.celebrate-modal { overflow: hidden; position: relative; text-align: center; }
.modal.celebrate-modal .m-body { padding: 0; }
.modal.celebrate-modal .m-foot { justify-content: center; border-top: 0; padding-bottom: 24px; }
.celebrate-hero { background: linear-gradient(135deg, #0f2e22 0%, #1d7a4c 60%, #ea580c 100%); color: #fff; padding: 34px 24px 26px; }
.celebrate-hero h2 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.025em; margin: 6px 0 4px; color: #fff; }
.celebrate-hero p { margin: 0; color: #d9e8df; font-size: 1.05rem; }
.celebrate-hero b { color: #fff; }
.celebrate-emoji { font-size: 4rem; line-height: 1; animation: bounce 1.2s ease infinite; display: inline-block; }
@keyframes bounce { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
.celebrate-body { padding: 18px 24px 4px; }
.celebrate-buyers { display: grid; gap: 6px; max-width: 360px; margin: 0 auto 14px; text-align: left; }
.celebrate-buyers .buyer { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-radius: 10px; background: var(--grey-soft); font-weight: 600; }
.celebrate-buyers .buyer b { font-size: 1.1rem; }
.celebrate-buyers .buyer.top { background: #fef3c7; color: #78350f; }
.celebrate-line { color: var(--ink-2); font-style: italic; margin: 0 0 6px; }
.celebrate-video, .celebrate-clip { display: none; width: 100%; max-height: 300px; object-fit: cover; background: #000; }
.celebrate-video.ready, .celebrate-clip.ready { display: block; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: .8rem; font-weight: 700; color: var(--primary); background: var(--primary-soft); border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
input[type="datetime-local"], input[type="date"], input[type="time"] { cursor: pointer; }

/* ---------- coach pickup picker ---------- */
.pickups { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pickups .pk-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pickups .pk-top input { flex: 1; min-width: 160px; padding: 7px 10px; }
.pickups .pk-summary { font-size: .84rem; color: var(--ink-2); padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pickups .pk-summary b { color: var(--primary); }
.pickups .pk-regions { max-height: 340px; overflow: auto; padding: 4px 12px 10px; }
.pickups .pk-region { padding: 8px 0 4px; border-bottom: 1px dashed var(--line); }
.pickups .pk-region:last-child { border-bottom: 0; }
.pickups .pk-region-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pickups .pk-region-head h4 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pickups .chip.region { border-style: dashed; }
.pickups .chip.region.on { border-style: solid; }
.pickups .chip.implied { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.pickups .chip.anywhere { font-weight: 750; }
.pickups .chips { gap: 5px; }
.pickups .chip { padding: 4px 10px; font-size: .82rem; }
.pickups.compact .pk-regions { max-height: 240px; }
.town-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.town-picker .chip.on { background: var(--primary); }
.town-picker .count { opacity: .75; font-weight: 500; }
.town-options { display: grid; gap: 6px; }
.town-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; background: rgba(255,255,255,.7); border-radius: 10px; }
.shared-towns { margin-top: 12px; padding: 10px 12px; background: #fff; border: 1px dashed var(--line-2); border-radius: 10px; font-size: .9rem; }
.shared-towns .chip { cursor: default; }
.pickups .pk-pref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .84rem; }
.pickups .pk-pref:empty { display: none; }
.pickups .pk-pref-label { color: var(--ink-2); font-weight: 600; }
.coach-choice { width: 100%; padding: 12px 14px; background: var(--primary-soft); border-radius: 12px; }
.coach-choice-label { font-weight: 750; margin-right: 4px; }
.coach-choice .btn .count { opacity: .85; font-weight: 600; margin-left: 4px; }
.chip.lg { font-size: .95rem; padding: 7px 14px; }

/* Instruction steps as boxes side by side (stacking on narrow screens) */
.howto.steps .howto-body { flex: 1; min-width: 0; }
.howto.steps .howto-intro { margin-bottom: 10px; }
.howto .howto-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; counter-reset: step; }
.howto-steps li { counter-increment: step; position: relative; padding: 12px 14px 12px 44px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; margin: 0; line-height: 1.45; }
.howto-steps li::before { content: counter(step); position: absolute; left: 12px; top: 11px; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.howto.amber .howto-steps li::before { background: var(--glow); color: #1a1200; }
.howto.compact .howto-steps { gap: 8px; }
.howto.compact .howto-steps li { padding: 8px 10px 8px 36px; }
.howto.compact .howto-steps li::before { left: 9px; top: 8px; width: 20px; height: 20px; font-size: .72rem; }

/* The step boxes stand on their own: no container card around them */
.howto.steps { background: none; border: 0; box-shadow: none; padding: 0; position: relative; }
.howto.steps .icon { display: none; }
.howto.steps .close { position: absolute; right: -6px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: .85rem; line-height: 1; display: grid; place-items: center; padding: 0; }
.howto.steps .close:hover { color: var(--ink); }
.howto.steps .howto-intro { margin-bottom: 8px; }
.demo-ribbon { border-style: dashed; }
body.touring .btn:disabled { opacity: 1; cursor: default; }   /* preview buttons look real, just inert */

/* Sale Day: one big thing to press, and everything else quiet around it */
.howto-steps li { background: var(--surface); box-shadow: var(--shadow); padding: 14px 16px 14px 48px; }
.howto-steps li::before { left: 14px; top: 13px; }
.sale-status .pill { font-size: .82rem; padding: 4px 11px; }
.sale-go {
  position: relative; overflow: hidden; text-align: center; padding: 60px 24px 52px; margin: 0 0 18px; color: #fff;
  border-radius: 24px; box-shadow: 0 30px 60px -36px rgba(11,36,25,.7);
  background: var(--dark);
}
.sale-go::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 16px, transparent 16px 32px); }
.sale-go > * { position: relative; z-index: 1; }
.sale-go .btn.hot { font-size: 1.4rem; padding: 20px 48px; border-radius: 999px; border-color: transparent; box-shadow: 0 18px 40px -14px rgba(0,0,0,.7), 0 0 0 6px rgba(255,255,255,.14); transition: transform .12s, box-shadow .12s; }
.sale-go .btn.hot:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(0,0,0,.7), 0 0 0 8px rgba(255,255,255,.18); }
.sale-go .btn.hot:disabled { opacity: .5; box-shadow: none; }
.sale-go.on-sale .btn.hot:not(:disabled) { animation: hotpulse 1.8s ease-out infinite; }
@keyframes hotpulse {
  0% { box-shadow: 0 14px 34px -12px rgba(0,0,0,.7), 0 0 0 0 rgba(255,255,255,.45); }
  70% { box-shadow: 0 14px 34px -12px rgba(0,0,0,.7), 0 0 0 18px rgba(255,255,255,0); }
  100% { box-shadow: 0 14px 34px -12px rgba(0,0,0,.7), 0 0 0 0 rgba(255,255,255,0); }
}
.sale-go .next-up { margin: 18px 0 0; color: #d9e8df; font-size: 1rem; }
.sale-go .next-up strong { color: #fff; }
.sale-go h2 { color: #fff; margin: 4px 0 0; }
.sale-go .big { font-size: 3rem; line-height: 1; }
.sale-foot { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.sale-foot .acc { flex: 1 1 320px; margin: 0; }
.sale-foot .acc > summary { font-size: .95rem; padding: 11px 16px; }
.sale-foot .btn { margin-top: 2px; }
@media (max-width: 560px) {
  .sale-go { padding: 36px 16px 30px; border-radius: 20px; }
  .sale-go .btn.hot { width: 100%; font-size: 1.15rem; padding: 14px 18px; white-space: normal; line-height: 1.25; }
  /* Long labels break where the sentence does: after the comma or the full stop */
  .sale-go .btn.hot, .checkout-actions .btn { flex-direction: column; gap: 0; }
  .checkout-actions .btn { width: 100%; white-space: normal; line-height: 1.25; }
}
.modal-bg.locked .m-head.bare { display: none; }
.modal .big-emoji.center { font-size: 2.6rem; margin: 0 0 6px; text-align: center; }
.changes { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.changes li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.changes li .lbl { font-size: .8rem; font-weight: 650; color: var(--muted); }
.changes li .from { color: var(--ink-2); } .changes li .to b { color: var(--ink); }
.changes li.risky { background: var(--amber-soft); border-color: #fcd34d; }
.changes li.risky .lbl { color: var(--amber); }
.banner.small { padding: 10px 12px; font-size: .9rem; }
.pref-list { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px 10px; background: var(--surface); }
.pref-list .pk-region { padding: 8px 0 4px; border-bottom: 1px dashed var(--line); }
.pref-list .pk-region:last-child { border-bottom: 0; }
.pref-list h4 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* Edit modal: one row per thing, open a row to change it */
.edit-sections { display: grid; gap: 8px; }
.sec { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.sec > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary:hover { background: var(--surface-2); border-radius: 10px; }
.sec .lbl { font-size: .8rem; color: var(--muted); font-weight: 650; }
.sec .cur { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sec .cur.mono { font-family: var(--mono); font-size: 1.02rem; }
.sec .cur.missing { color: var(--red); }
.sec .chg { color: var(--primary); font-size: .84rem; font-weight: 700; }
.sec[open] .chg, .sec.readonly .chg { visibility: hidden; }
.sec[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.sec-body { padding: 10px 12px 12px; }
.sec-body .field:last-child { margin-bottom: 0; }
.hint.amber { color: var(--amber); }
@media (max-width: 560px) { .sec > summary { grid-template-columns: minmax(0, 1fr) auto; } .sec .lbl { grid-column: 1 / -1; } }
.sec .cur.soft { color: var(--muted); font-weight: 500; }
/* Group and backup cards under a group's list */
.group-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 16px; }
.group-cards .card { margin: 0; }
.group-cards .card-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.group-notes { background: var(--amber-soft); border: 1px solid #f5cf8a; border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.group-notes .lbl { display: block; font-size: .8rem; color: var(--amber); font-weight: 750; margin-bottom: 4px; }
.backup-card p { margin: 6px 0 0; }
textarea[name=notes] { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 9px; resize: vertical; }

/* ---------- key/value rows (admin's tracker card, the organiser's pages) ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; align-items: center; }
.kv .k { color: var(--muted); font-size: .86rem; font-weight: 600; }
.kv .v { font-family: var(--mono); word-break: break-all; }
.kv .v.sans { font-family: var(--sans); }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv .k { margin-top: 8px; } }

/* ---------- the demo at /demo/ ---------- */
.demo-strip { background: var(--glow); color: #1a1200; font-size: .8rem; padding: 6px 14px; text-align: center; }
body.demo .topbar { top: 0; }
/* Inside the phone frame on the landing page the demo scrolls like a phone: no scrollbar taking up the frame. */
html:has(body.demo) { scrollbar-width: none; }
html:has(body.demo)::-webkit-scrollbar { display: none; }
body.demo.dragging, body.demo.dragging * { cursor: grabbing; user-select: none; }
.demo-strip a { color: #1a1200; font-weight: 800; text-decoration: underline; margin-left: 6px; }

/* the stage modal: a dark stage that pops in, then a white list and one big button. The marketing site's Live demo
   modal, the organiser's welcome on their account, and the "now invite your friends" modal on the tracker. */
.modal.demo-modal { width: min(100%, 880px); border-radius: 24px; overflow: auto; overscroll-behavior: contain; animation: demo-in .55s cubic-bezier(.2, .9, .25, 1.12) both; }
/* On a short screen the modal scrolls, behind a thin bar on a see-through track that reads over the dark stage and the white list alike. */
.modal.demo-modal { scrollbar-width: thin; scrollbar-color: rgba(140, 150, 145, .55) transparent; }
.modal.demo-modal::-webkit-scrollbar { width: 6px; }
.modal.demo-modal::-webkit-scrollbar-track { background: transparent; }
.modal.demo-modal::-webkit-scrollbar-thumb { background: rgba(140, 150, 145, .55); border-radius: 999px; }
.modal.demo-modal::-webkit-scrollbar-thumb:hover { background: rgba(140, 150, 145, .8); }
@keyframes demo-in { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: none; } }
.modal.demo-modal .m-body { padding: 0; }
.modal.demo-modal .m-head.bare .x { color: #fff; font-size: 1.8rem; }
.demo-stage { position: relative; overflow: hidden; color: #fff; text-align: center; padding: clamp(36px, 5vw, 52px) clamp(20px, 4vw, 44px) clamp(32px, 4vw, 44px); background: linear-gradient(160deg, #0b2419 0%, #0f2e22 55%, #17452f 100%); }
.demo-tents { display: flex; justify-content: center; gap: clamp(12px, 2vw, 22px); margin-bottom: 22px; }
.demo-tents .img-slot.icon { display: grid; place-items: center; line-height: 0; width: clamp(64px, 8vw, 88px); height: clamp(64px, 8vw, 88px); border-radius: 22px; background: rgba(255,255,255,.1); color: #fff; flex: 0 0 auto; animation: tent-pop .6s cubic-bezier(.2, .9, .25, 1.35) both; }
.demo-tents .img-slot.icon:nth-child(2) { animation-delay: .12s; }
.demo-tents .img-slot.icon:nth-child(3) { animation-delay: .24s; }
.demo-tents .img-slot.icon svg { width: 46px; height: 46px; }
@keyframes tent-pop { from { opacity: 0; transform: translateY(34px) scale(.5) rotate(-8deg); } to { opacity: 1; transform: none; } }
.demo-stage h2 { font-family: var(--display); font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -.025em; line-height: 1.05; margin: 0 0 12px; color: #fff; animation: fadeup .5s .28s both; }
.demo-stage p { color: #d9e8df; font-size: 1.08rem; line-height: 1.55; max-width: 46ch; margin: 0 auto 26px; animation: fadeup .5s .38s both; }
.demo-stage .btn.demo-go { font-size: 1.15rem; padding: 16px 30px; border-radius: 14px; animation: fadeup .5s .48s both, demo-pulse 1.7s 1s infinite; }
.demo-note { color: #b7d3c4; font-size: .9rem; margin-top: 14px; animation: fadeup .5s .56s both; }
@keyframes demo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .55); } 60% { box-shadow: 0 0 0 16px rgba(255, 90, 31, 0); } }
.demo-try { padding: clamp(22px, 3vw, 30px) clamp(20px, 4vw, 44px) clamp(24px, 3vw, 34px); }
.demo-try h3 { font-family: var(--display); font-size: 1.25rem; margin: 0 0 14px; }
.demo-try .setup-steps li { animation: fadeup .45s both; }
.demo-try .setup-steps li:nth-child(1) { animation-delay: .5s; } .demo-try .setup-steps li:nth-child(2) { animation-delay: .58s; } .demo-try .setup-steps li:nth-child(3) { animation-delay: .66s; } .demo-try .setup-steps li:nth-child(4) { animation-delay: .74s; }
@media (prefers-reduced-motion: reduce) { .modal.demo-modal, .demo-tents .img-slot.icon, .demo-stage h2, .demo-stage p, .demo-stage .btn.demo-go, .demo-note, .demo-try .setup-steps li { animation: none; } }
/* the invite, on the stage: the message in a see-through box, then the big copy button and two smaller ones */
.invite-stage-text { text-align: left; max-width: 560px; margin: 0 auto 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #eef5f0; animation: fadeup .5s .42s both; }
.invite-stage-more { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; animation: fadeup .5s .52s both; }
@media (prefers-reduced-motion: reduce) { .invite-stage-text, .invite-stage-more { animation: none; } }
/* Where the group chat link goes before there is one: shown only while the walkthrough points at it. */
.chat-slot { display: none; }
body.touring .chat-slot { display: inline; }
.chat-slot-pill { display: inline-block; padding: 1px 10px; border: 1.5px dashed rgba(255,255,255,.6); border-radius: 999px; color: #fff; }