/* Reservision admin: "The People's Club" mood (docs/design/brief.md): ivory surfaces, black type,
   structured rows, pills, 1px warm-grey rules, no shadows. Colours and fonts come only from tokens.css;
   the aliases below name what this page needs, each falling back to an older token or the brief's value. */
:root {
  /* Role tokens, so the dark values in tokens.css section 5 flow through (light values unchanged). */
  --a-bg: var(--bg, #F8F5EE);
  --a-surface: var(--raised, #F4F1EA);
  --a-card: var(--surface, #F5F3EC);
  --a-ink: var(--text, #000000);
  --a-ink-2: var(--charcoal, #1A1A1A);
  --a-muted: var(--muted, #6b6b6b);
  --a-rule: var(--rule, #D1CDC9);
  --a-on-ink: var(--on-text, #ffffff);
  --a-gold: var(--money, #D4AF37);
  --a-err: var(--alert, #9B1C1C);
  --f-wordmark: var(--font-wordmark, "Anton", "Archivo Narrow", "Arial Narrow", Impact, sans-serif);
  --f-headline: var(--font-headline, var(--f-wordmark));
  --f-name: var(--font-name, var(--font-display, "Archivo Black", "Arial Black", sans-serif));
  --f-body: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --a-max: 1040px;
  --a-gutter: var(--s4, 16px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--a-bg);
  color: var(--a-ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--a-ink); }
[hidden] { display: none !important; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--a-bg);
  border-bottom: 1px solid var(--a-rule);
}
.top-in, .tabs {
  max-width: var(--a-max); margin: 0 auto; padding: 0 var(--a-gutter);
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3, 12px); height: 60px; }
.lockup { display: flex; align-items: center; gap: var(--s2, 8px); text-decoration: none; color: var(--a-ink); min-width: 0; }
.mascot { width: 34px; height: 34px; object-fit: contain; flex: none; }
.wordmark {
  font-family: var(--f-wordmark); font-size: 26px; line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase; white-space: nowrap;
}
.top-right { display: flex; align-items: center; gap: var(--s3, 12px); min-width: 0; }
.theme-btn {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--a-ink); background: transparent; color: var(--a-ink); cursor: pointer;
}
.theme-btn:hover { background: var(--a-surface); }
.theme-btn:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.theme-btn .ico { width: 20px; height: 20px; }
.theme-btn .sun, :root[data-theme="dark"] .theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
.on-dark { display: none !important; }
:root[data-theme="dark"] .on-light { display: none !important; }
:root[data-theme="dark"] .on-dark { display: block !important; }
.who { font-size: 13px; font-weight: 500; color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px;
  background: var(--a-card); border: 1px solid var(--a-ink); border-radius: var(--radius, 6px);
  padding: var(--s1, 4px); display: flex; flex-direction: column; z-index: 20;
}
.menu-list a, .menu-list button { padding: 10px 12px; text-decoration: none; font-weight: 500; font-size: 14px; border-radius: 4px; }
.menu-list button { background: none; border: 0; text-align: left; width: 100%; font: inherit; font-weight: 500; font-size: 14px; color: inherit; cursor: pointer; }
.menu-list a:hover, .menu-list a:focus-visible, .menu-list button:hover, .menu-list button:focus-visible { background: var(--a-surface); outline: none; }
.menu-list button[aria-current="true"] { font-weight: 700; }

.tabs { display: flex; gap: var(--s5, 24px); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: 0; padding: 12px 0 11px; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--a-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--a-ink); }
.tab[aria-current="page"] { color: var(--a-ink); font-weight: 700; border-bottom-color: var(--a-ink); }

/* ---------- page ---------- */
.main { flex: 1; width: 100%; max-width: var(--a-max); margin: 0 auto; padding: var(--s5, 24px) var(--a-gutter) var(--s6, 40px); }
.loading { color: var(--a-muted); }
.page-head { margin: var(--s2, 8px) 0 var(--s5, 24px); }
.row-between { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4, 16px); flex-wrap: wrap; }
.h1 { font-family: var(--f-body); font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--s1, 4px); }
.h2 { font-family: var(--f-body); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin: 0; }
.lead { font-size: 17px; font-weight: 500; margin: 0 0 var(--s2, 8px); }
.muted { color: var(--a-muted); margin: 0; }
.label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-ink); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3, 12px); margin-bottom: var(--s3, 12px); flex-wrap: wrap; }
.section-actions { display: flex; gap: var(--s2, 8px); flex-wrap: wrap; }
.block { margin-top: var(--s5, 24px); }
.err { color: var(--a-err); font-weight: 500; margin: var(--s3, 12px) 0 0; }
.empty-line { padding: var(--s4, 16px) 0; }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; }
.num { font-variant-numeric: var(--num, tabular-nums); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 22px; border-radius: var(--radius-pill, 999px);
  background: var(--a-ink); color: var(--a-on-ink); border: 1.5px solid var(--a-ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform 80ms ease, background 120ms ease, color 120ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:focus-visible, .tab:focus-visible, .seg:focus-visible, .link:focus-visible, .row-click:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.btn-ghost { background: transparent; color: var(--a-ink); }
.btn-ghost:hover { background: var(--a-surface); }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 11px; }
.btn-danger { color: var(--a-err); border-color: var(--a-err); }
.btn.armed { background: var(--a-err); border-color: var(--a-err); color: var(--a-on-ink); }
.link { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--a-ink); }
.back { text-decoration: none; color: var(--a-muted); font-size: 14px; margin-bottom: var(--s2, 8px); display: inline-block; }
.back:hover { color: var(--a-ink); }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--a-ink); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle; margin-left: var(--s2, 8px); background: transparent;
}
.pill-upcoming { background: var(--a-ink); color: var(--a-on-ink); }
.pill-past, .pill-removed { border-color: var(--a-rule); color: var(--a-muted); }
.pill-cancelled { border-color: var(--a-err); color: var(--a-err); }
.pill-bday { border-color: var(--a-gold); }
/* Host PIN (C8, K4): whether the host has opened their link and set a PIN; one quiet grey either way. */

/* ---------- cards, rows ---------- */
.card { background: var(--a-card); border: 1px solid var(--a-rule); border-radius: var(--radius, 6px); padding: var(--s4, 16px) var(--s5, 24px); }
.card.empty { text-align: left; padding: var(--s5, 24px); }
.card.empty .btn { margin-top: var(--s3, 12px); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows-boxed { background: var(--a-card); border: 1px solid var(--a-rule); border-radius: var(--radius, 6px); padding: 0 var(--s4, 16px); }
.row { display: flex; align-items: center; gap: var(--s3, 12px); padding: var(--s3, 12px) 0; border-top: 1px solid var(--a-rule); }
.rows > .row:first-child { border-top: 0; }
.row-click { cursor: pointer; }
.row-click:hover .row-main { text-decoration: underline; text-underline-offset: 3px; }
.row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row-main { font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.row .muted { font-size: 13px; overflow-wrap: anywhere; }
.chev { font-size: 22px; color: var(--a-muted); line-height: 1; }
.initials {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--a-rule); border-radius: 50%; background: var(--a-surface);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.removed { opacity: 0.55; }

/* the condensed date box, as the mockup's SAT / OCT 17 */
.stamp {
  flex: none; width: 66px; padding: 6px 0 5px; border: 1px solid var(--a-ink); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--f-headline); text-transform: uppercase; line-height: 1; background: var(--a-card);
}
.stamp-day { font-size: 13px; letter-spacing: 0.06em; }
.stamp-date { font-size: 19px; margin-top: 3px; white-space: nowrap; }

/* ---------- overview ---------- */
.news { margin: 0 0 var(--s4, 16px); font-size: 15px; font-weight: 500; color: var(--a-muted); }
.news.has-news { color: var(--a-ink); font-weight: 700; font-size: 17px; }
.card.next { padding: 0; }
.next .label-row, .event-head .label-row { display: flex; justify-content: space-between; padding: 10px var(--s5, 24px); border-bottom: 1px solid var(--a-rule); }
.next-body { display: flex; align-items: center; gap: var(--s4, 16px); padding: var(--s4, 16px) var(--s5, 24px); }
.next-text { flex: 1; min-width: 0; }
.next-name { font-family: var(--f-body); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; margin: 0 0 2px; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--s4, 16px);
  background: var(--a-card); border: 1px solid var(--a-rule); border-radius: var(--radius, 6px);
}
.stats-3 { grid-template-columns: repeat(3, 1fr); }
.stat { display: flex; flex-direction: column; gap: 4px; padding: var(--s4, 16px) var(--s5, 24px); border-left: 1px solid var(--a-rule); min-width: 0; }
.stat:first-child { border-left: 0; }
.stat .label { color: var(--a-muted); }
.stat-num { font-family: var(--f-headline); font-size: 44px; line-height: 1; font-variant-numeric: var(--num, tabular-nums); }
.stat-sub { font-size: 12px; color: var(--a-muted); }

/* ---------- events ---------- */
.event-head-top { display: flex; align-items: flex-start; gap: var(--s4, 16px); }
.event-head .pill { margin-left: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s5, 24px); margin: var(--s4, 16px) 0 0; padding-top: var(--s4, 16px); border-top: 1px solid var(--a-rule); }
.facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); padding-top: 2px; }
.facts dd { margin: 0; white-space: pre-line; }
.notes { white-space: pre-line; margin: var(--s3, 12px) 0 0; }
.links { margin: var(--s3, 12px) 0 0; font-weight: 600; }
.flyer-state { font-size: 13px; }
.door-tools { display: flex; align-items: center; gap: var(--s3, 12px); flex-wrap: wrap; margin-bottom: var(--s3, 12px); }
.paste { width: 100%; resize: vertical; background: var(--a-bg); }
.host-group { border-top: 1px solid var(--a-ink); }
.host-group:last-child { border-bottom: 1px solid var(--a-ink); }
.host-group[open] { padding-bottom: var(--s3, 12px); }
.host-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3, 12px); flex-wrap: wrap; }
.host-group-tag { margin-right: auto; }
.host-group > summary { cursor: pointer; list-style: none; padding: var(--s2, 8px) 0; }
.host-group > summary::-webkit-details-marker { display: none; }
.host-group > summary::before { content: "\25B8"; color: var(--a-muted); width: 1em; flex: none; transition: transform .15s; }
.host-group[open] > summary::before { transform: rotate(90deg); }
.host-group > summary:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.door-name { font-family: var(--f-name); font-size: 17px; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.guest .row-main .pill { margin-left: var(--s2, 8px); }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--s4, 16px); padding: var(--s5, 24px); }
.form p, .form h2 { margin: 0; }
.rows-boxed + .card { margin-top: var(--s4, 16px); }
.event-head .form-actions { margin-top: var(--s4, 16px); }
.grid2, .grid3, .grid4 { display: grid; gap: var(--s4, 16px); }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-end { align-items: end; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.field-hint { font-size: 12px; color: var(--a-muted); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--a-bg); border: 1px solid var(--a-rule); border-radius: var(--radius, 6px);
  font-size: 15px; color: var(--a-ink);
}
.input:focus { outline: none; border-color: var(--a-ink); box-shadow: inset 0 0 0 1px var(--a-ink); }
.input::placeholder { color: var(--a-muted); opacity: 0.7; }
.textarea { min-height: 80px; resize: vertical; line-height: 1.4; }
.input-num { font-variant-numeric: var(--num, tabular-nums); }
.prefix { display: flex; align-items: center; border: 1px solid var(--a-rule); border-radius: var(--radius, 6px); background: var(--a-bg); }
.prefix:focus-within { border-color: var(--a-ink); box-shadow: inset 0 0 0 1px var(--a-ink); }
.prefix > span { padding-left: 12px; color: var(--a-muted); font-weight: 600; }
.prefix .input { border: 0; box-shadow: none; padding-left: 4px; background: transparent; }
.form-actions { display: flex; align-items: center; gap: var(--s3, 12px); flex-wrap: wrap; }
.flyer-pick { display: flex; align-items: center; gap: var(--s4, 16px); flex-wrap: wrap; }
.flyer-preview { display: flex; align-items: center; gap: var(--s3, 12px); min-height: 44px; }
.flyer-preview img { width: 96px; height: 120px; object-fit: cover; border: 1px solid var(--a-rule); border-radius: 4px; background: var(--a-surface); }
.file-btn { position: relative; overflow: hidden; }
.file-btn .file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* segment + switch */
.segment { display: inline-flex; align-self: flex-start; border: 1.5px solid var(--a-ink); border-radius: var(--radius-pill, 999px); padding: 3px; gap: 2px; flex-wrap: wrap; max-width: 100%; }
.seg { background: transparent; border: 0; border-radius: var(--radius-pill, 999px); min-height: 34px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg[aria-checked="true"] { background: var(--a-ink); color: var(--a-on-ink); }
.switch { display: inline-flex; align-items: center; gap: var(--s3, 12px); cursor: pointer; min-height: 44px; }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--a-rule); position: relative; transition: background 120ms ease; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--a-card); transition: transform 120ms ease; }
.switch-input:checked + .switch-track { background: var(--a-ink); }
.switch-input:checked + .switch-track::after { transform: translateX(18px); }
:root[data-theme="dark"] .switch-track::after { background: var(--a-muted); }
:root[data-theme="dark"] .switch-input:checked + .switch-track::after { background: var(--a-on-ink); }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.switch-label { font-weight: 500; }

/* ---------- hosts ---------- */
/* 0.11.0 View as: the look-only line under the tabs (MIRROR .join-line, gold edge). */
.view-banner { border: 1px solid var(--a-rule); border-left: 3px solid var(--a-gold); border-radius: var(--radius, 6px); background: var(--a-card); padding: var(--s2, 8px) var(--s4, 16px); margin: var(--s2, 8px) 0; font-size: 13px; }
.view-banner .link { display: inline; font-size: 13px; }
.view-picker .put-on { margin-top: var(--s3, 12px); }
.testing .testing-actions { display: flex; align-items: center; gap: var(--s3, 12px); flex-wrap: wrap; margin-bottom: var(--s3, 12px); }
.testing .row { flex-wrap: wrap; }
.testing .row-actions { display: flex; gap: var(--s2, 8px); flex-wrap: wrap; margin-left: auto; }
#versions-line:empty { display: none; }

.join-line { border: 1px solid var(--a-rule); border-left: 3px solid var(--a-ink); border-radius: var(--radius, 6px); background: var(--a-card); padding: var(--s3, 12px) var(--s4, 16px); margin-bottom: var(--s4, 16px); }
.join-msg { margin: 4px 0 0; overflow-wrap: anywhere; }
.add-host { margin-bottom: var(--s4, 16px); }
.add-result { border-top: 1px solid var(--a-rule); padding-top: var(--s4, 16px); }
.add-result .label { margin: 0 0 6px; display: block; }
/* The one-time new link after a Reset link (C8): a card above the host table, outside it. */
.link-line { display: flex; align-items: center; gap: var(--s3, 12px); flex-wrap: wrap; }
.link-line code { background: var(--a-bg); border: 1px solid var(--a-rule); border-radius: 4px; padding: 8px 10px; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.host-table { background: var(--a-card); border: 1px solid var(--a-rule); border-radius: var(--radius, 6px); }
.host-table .card.empty { border: 0; }
.host-row {
  display: grid; grid-template-columns: minmax(150px, 1.5fr) 1fr 1fr 1fr 80px 1fr 96px 1fr;
  grid-template-areas: "name ig phone by next last acct team" "actions actions actions actions actions actions actions actions";
  column-gap: var(--s4, 16px); row-gap: var(--s2, 8px); align-items: center;
  padding: var(--s3, 12px) var(--s4, 16px); border-top: 1px solid var(--a-rule); font-size: 14px;
}
.host-row:first-child { border-top: 0; }
.host-row-head { grid-template-areas: "name ig phone by next last acct team"; padding-top: 10px; padding-bottom: 10px; }
.host-row-head > span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); }
.host-row-head > span:last-child { display: none; }
.host-row > :nth-child(1) { grid-area: name; }
.host-row > :nth-child(2) { grid-area: ig; }
.host-row > :nth-child(3) { grid-area: phone; }
.host-row > :nth-child(4) { grid-area: by; }
.host-row > :nth-child(5) { grid-area: next; }
.host-row > :nth-child(6) { grid-area: last; }
.host-row > :nth-child(7) { grid-area: actions; }
/* CP1 accounts: the Account column (Connected · Not yet). A class, not a position: in a row it is the 8th cell
   (after actions), in the head the 7th (the head's empty last cell stays hidden). span.hc-acct outranks :nth-child. */
.host-row > span.hc-acct { grid-area: acct; }
/* CP3 teams: the Team column, placed by class after Account (row: 9th cell; head: 8th, before the hidden empty cell). */
.host-row > span.hc-team { grid-area: team; min-width: 0; overflow-wrap: anywhere; }
.acct-on { color: var(--a-ink); font-weight: 600; }
.acct-off { color: var(--a-muted); }
.hc-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.hc-name .pill { margin-left: 0; }
/* a host's own share message (migration 0002): a tag that opens to the text, read-only */
.msg-tag { max-width: 100%; }
.msg-tag > summary { list-style: none; cursor: pointer; gap: 4px; }
.msg-tag > summary::-webkit-details-marker { display: none; }
.msg-tag > summary::after { content: "+"; font-weight: 700; }
.msg-tag[open] > summary::after { content: "−"; }
.msg-tag > summary:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.msg-tag-text { margin: var(--s1, 4px) 0 0; padding: var(--s2, 8px) var(--s3, 12px); max-width: 320px; font-size: 13px; line-height: 1.45;
  background: var(--a-surface); border: 1px solid var(--a-rule); border-radius: var(--radius, 6px); white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-when { font-size: 12px; }
.hc { min-width: 0; overflow-wrap: anywhere; }
.hc-actions { display: flex; gap: var(--s2, 8px); flex-wrap: wrap; }
.host-edit { border: 0; border-top: 1px solid var(--a-rule); border-radius: 0; }

/* ---------- settings ---------- */
.settings { display: flex; flex-direction: column; gap: var(--s4, 16px); }
.settings .block { margin-top: 0; display: flex; flex-direction: column; gap: var(--s4, 16px); }
.settings .section-head { margin-bottom: 0; }
.model-block { display: flex; flex-direction: column; gap: var(--s4, 16px); }
.tier-table { border: 1px solid var(--a-rule); border-radius: var(--radius, 6px); background: var(--a-bg); }
.tier-row { display: grid; grid-template-columns: 44px repeat(4, minmax(0, 1fr)); gap: var(--s3, 12px); align-items: center; padding: var(--s2, 8px) var(--s3, 12px); border-top: 1px solid var(--a-rule); }
.tier-row:first-child { border-top: 0; }
.tier-head > span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); }
.tier-n { font-family: var(--f-headline); font-size: 24px; text-align: center; }
.tc { display: block; min-width: 0; }
.preview { border-top: 1px solid var(--a-rule); padding-top: var(--s3, 12px); }
.share-preview { margin: 6px 0 0; overflow-wrap: anywhere; }
.hosts-read { border-color: var(--a-ink); border-width: 1.5px; }
.sentence { font-size: 18px; font-weight: 600; line-height: 1.45; margin: 0; letter-spacing: -0.005em; }
/* What hosts read: the same numbered steps hosts see (mirrors app.css .rule-steps, in the admin's tokens) */
.hosts-read .rule-steps { margin: var(--s3, 12px) 0 0; padding-left: 20px; font-size: 15px; line-height: 1.45; }
.hosts-read .rule-steps li { margin-bottom: var(--s2, 8px); }
.hosts-read .rule-steps li::marker { font-weight: 700; }
.hosts-read .rule-items { list-style: disc; margin: 4px 0 0; padding-left: 18px; }
.hosts-read .rule-items li { margin-bottom: 2px; }
.hosts-read .rule-items li::marker { font-weight: 400; }
.hosts-read .rule-example { margin: var(--s3, 12px) 0 0; padding: var(--s2, 8px) var(--s3, 12px); border-left: 1.5px solid var(--a-ink); font-size: 14px; line-height: 1.45; }
.hosts-read .rule-example span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); }
.hosts-read .referral-line { margin: var(--s3, 12px) 0 0; font-size: 14px; line-height: 1.45; font-weight: 600; }
.hosts-read .referral-line span { display: block; font-weight: 400; color: var(--a-muted); }
.sticky-actions { position: sticky; bottom: 0; background: var(--a-bg); padding: var(--s3, 12px) 0; border-top: 1px solid var(--a-rule); }

/* ---------- gate (401 / 403) ---------- */
.gate { max-width: 460px; margin: 12vh auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3, 12px); }
/* Walk 11-04: the sign-in page's email and code steps (a .gate inside the .gate) sit in the heading's column,
   left edges aligned, the box full column width up to 360px, the button below it at its own width. */
.gate .gate { margin: var(--s2, 8px) 0 0; width: 100%; max-width: 360px; align-items: stretch; }
.gate .gate > .btn { align-self: flex-start; }
body.blocked .tabs, body.blocked .menu { display: none; }

/* ---------- toast, footer ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--a-ink); color: var(--a-on-ink); border-radius: var(--radius-pill, 999px);
  padding: 10px 18px; font-size: 13px; font-weight: 600; transition: opacity 150ms ease, transform 150ms ease; z-index: 50;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.foot {
  max-width: var(--a-max); width: 100%; margin: 0 auto; padding: var(--s4, 16px) var(--a-gutter) var(--s5, 24px);
  display: flex; justify-content: space-between; gap: var(--s3, 12px); flex-wrap: wrap;
  font-size: 12px; color: var(--a-muted); border-top: 1px solid var(--a-rule);
}

/* ---------- narrow screens (Adrian and Bammo on phones) ---------- */
@media (max-width: 760px) {
  .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(3) { border-left: 0; }
  .stats .stat:nth-child(n+3) { border-top: 1px solid var(--a-rule); }
  .stats-3 { grid-template-columns: repeat(3, 1fr); }
  .stats-3 .stat:nth-child(3) { border-left: 1px solid var(--a-rule); border-top: 0; }
  .host-row-head { display: none; }
  .host-row { grid-template-columns: 1fr 1fr; grid-template-areas: "name name" "ig phone" "by next" "last acct" "team team" "actions actions"; }
  .hc[data-k]::before { content: attr(data-k); display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); }
  .hc:empty { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 14px; }
  .top-in { height: auto; flex-wrap: wrap; row-gap: 2px; padding-top: 10px; padding-bottom: 4px; }
  .top-right { display: contents; }
  .lockup { order: 1; margin-right: auto; }
  .theme-btn { order: 2; }
  .menu { order: 2; }
  .who { order: 3; flex-basis: 100%; max-width: none; font-size: 12px; }
  .wordmark { font-size: 22px; }
  .mascot { width: 28px; height: 28px; }
  .tabs { gap: var(--s4, 16px); }
  .main { padding-top: var(--s4, 16px); }
  .h1 { font-size: 28px; }
  .grid2, .grid3, .grid4 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--s4, 16px); }
  .form { padding: var(--s4, 16px); }
  .next .label-row, .event-head .label-row { padding: 10px var(--s4, 16px); }
  .next-body { padding: var(--s4, 16px); flex-wrap: wrap; }
  .next-body .btn { width: 100%; }
  .stat { padding: var(--s3, 12px) var(--s4, 16px); }
  .stat-num { font-size: 36px; }
  .stats-3 .stat { padding: var(--s3, 12px); }
  .row-between .section-actions { width: 100%; }
  .row-between .section-actions .btn { flex: 1; }
  .tier-row { grid-template-columns: 28px repeat(2, minmax(0, 1fr)); }
  .tier-head { display: none; }
  .card.next { padding: 0; }
  .tc[data-k]::before { content: attr(data-k); display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); margin-bottom: 2px; }
  .tier-n { grid-row: span 2; align-self: start; padding-top: 18px; }
  .segment { display: flex; width: 100%; }
  .seg { flex: 1; padding: 0 10px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 6px; }
  .door-tools .segment { width: 100%; }
}
.form .add-result .field-hint { margin-top: var(--s2, 8px); }

/* Covers as two number boxes (10-12) */
.cover-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2, 8px); }
.cover-box { display: grid; gap: 4px; }

/* Hosts: the count line carries the Show removed / Hide removed button (Khalil 10-12). */
.host-count-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.host-count-line [hidden] { display: none; }

/* ---------- 0.9.0: roles + per-night hosting ---------- */
/* Members: the role word as a pill (Admin filled, Party partner outlined) */
.pill-role { border-color: var(--a-ink); }
.pill-role-admin { background: var(--a-ink); color: var(--a-on-ink); }
/* Event detail: "Hosting this night" (registered rows, the Put on picker) */
.pill-hosting { background: var(--a-ink); color: var(--a-on-ink); }
.pill-out { border-color: var(--a-rule); color: var(--a-muted); }
.hosting .section-head { margin-bottom: var(--s2, 8px); }
.hosting-row .pill { margin-left: 0; flex: none; }
.hosting-row .door-name { font-size: 15px; }
.put-on-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s3, 12px); padding-top: var(--s3, 12px); border-top: 1px solid var(--a-rule); }
.put-on { display: flex; align-items: center; gap: var(--s2, 8px); flex-wrap: wrap; }
.put-on .select { flex: 1 1 200px; width: auto; min-width: 0; max-width: 360px; cursor: pointer; }
.put-on .btn { flex: none; min-height: 44px; }
/* 0.15.0 host collabs: the pair pill, "Pairs tonight", "Pair two hosts" */
.pill-paired { border-color: var(--a-ink); color: var(--a-ink); }
.pairs { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s3, 12px); padding-top: var(--s3, 12px); border-top: 1px solid var(--a-rule); }
.pairs .row { display: flex; align-items: center; gap: var(--s2, 8px); }
.pairs .row .row-text { flex: 1 1 auto; min-width: 0; }
.pairs .row .btn { flex: none; }
.pair-two { display: flex; align-items: center; gap: var(--s2, 8px); flex-wrap: wrap; }
.pair-two .select { flex: 1 1 160px; width: auto; min-width: 0; max-width: 260px; cursor: pointer; }
.pair-two .btn { flex: none; min-height: 44px; }
/* Overview: five tiles (Hosting next night added) */
.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Hosts for a partner: no Phone column (the cell stays in the DOM, hidden, so the nth-child areas hold) */
.host-table.no-phone .host-row { grid-template-columns: minmax(150px, 1.5fr) 1fr 1fr 80px 1fr 96px 1fr; grid-template-areas: "name ig by next last acct team" "actions actions actions actions actions actions actions"; }
.host-table.no-phone .host-row-head { grid-template-areas: "name ig by next last acct team"; }
@media (max-width: 760px) {
  .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-5 .stat:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
  .host-table.no-phone .host-row { grid-template-columns: 1fr 1fr; grid-template-areas: "name name" "ig by" "next last" "acct team" "actions actions"; }
}
@media (max-width: 520px) {
  .hosting-row { flex-wrap: wrap; }
  .hosting-row .row-text { flex-basis: 60%; }
  .put-on .select { max-width: none; flex-basis: 100%; }
  .put-on .btn { width: 100%; }
  .pair-two .select { max-width: none; flex-basis: 100%; }
  .pair-two .btn { width: 100%; }
  .pairs .row { flex-wrap: wrap; }
}

/* ---------- 0.21.0 (Khalil 10-21) ---------- */
/* Hosting this night: tick hosts and take them all off in one go. */
.pick { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--a-ink); cursor: pointer; }
.bulk-bar { display: flex; align-items: center; gap: var(--s3, 12px); padding: var(--s2, 8px) 0; border-bottom: 1px solid var(--a-rule); flex-wrap: wrap; }
.bulk-all { display: inline-flex; align-items: center; gap: var(--s2, 8px); font-weight: 600; cursor: pointer; }
.bulk-bar .muted { flex: 1; font-size: 13px; }
.bulk-bar .btn:disabled { opacity: 0.4; cursor: default; }
/* Events (Khalil 10-21): bigger night cards, as 9ambanger's tour list, in Reservision's own type. */
.event-list .row { padding: 20px 0; gap: var(--s4, 16px); }
.event-list .stamp { width: 84px; padding: 10px 0 8px; }
.event-list .stamp-day { font-size: 15px; }
.event-list .stamp-date { font-size: 26px; margin-top: 4px; }
.event-list .row-main { font-family: var(--f-headline); font-weight: 400; font-size: 28px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
.event-list .row .muted { font-size: 14px; margin-top: 4px; }
.event-list .row-text { padding-left: 14px; border-left: 2px dashed transparent; }
@media (max-width: 520px) {
  .event-list .row { gap: var(--s3, 12px); padding: 16px 0; }
  .event-list .stamp { width: 70px; }
  .event-list .stamp-date { font-size: 21px; }
  .event-list .row-main { font-size: 21px; }
  .event-list .row-text { padding-left: 0; border-left: 0; }
}
/* Events hover, the ticket stub (Khalil 10-21, his pick: 1 + 3 of the preview): on a mouse, the night slides right,
   the row fills in flat from the left, a dashed tear line appears, the name steps 6px right and the date box lifts
   off at an angle in gold, like a stub being torn. A phone has no hover, so nothing moves there. */
@media (hover: hover) and (pointer: fine) {
  .event-list .row { position: relative; transition: transform 0.22s ease; }
  .event-list .row::before {
    content: ""; position: absolute; inset: 0 calc(-1 * var(--s4, 16px)); z-index: 0; pointer-events: none;
    background: var(--a-surface); transform: scaleX(0); transform-origin: left;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .event-list .row > * { position: relative; z-index: 1; }
  .event-list .row-text { transition: transform 0.22s ease, border-color 0.2s; }
  .event-list .stamp { transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.3, 1.3), box-shadow 0.25s, background 0.15s, border-color 0.15s, color 0.15s; }
  .event-list .row:hover, .event-list .row:focus-visible { transform: translateX(8px); outline: none; }
  .event-list .row:hover::before, .event-list .row:focus-visible::before { transform: scaleX(1); }
  .event-list .row:hover .row-main, .event-list .row:focus-visible .row-main { text-decoration: none; }
  .event-list .row:hover .row-text, .event-list .row:focus-visible .row-text { transform: translateX(6px); border-left-color: var(--a-muted); }
  .event-list .row:hover .stamp, .event-list .row:focus-visible .stamp {
    background: var(--a-gold); border-color: var(--a-gold); color: #000;
    transform: translate(-10px, -3px) rotate(-7deg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .event-list .row, .event-list .row::before, .event-list .row-text, .event-list .stamp { transition: none; }
}
.old-toggle { margin-top: var(--s3, 12px); }
/* 0.22.0 (Khalil 10-21): a night's tag above its name, a set list. Special Event stands out in gold; the others are quieter. */
.tag-chip { align-self: flex-start; display: inline-block; font-family: var(--f-headline); font-size: 12px; line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 5px 8px 4px; border-radius: 3px; border: 1px solid var(--a-ink); color: var(--a-ink); margin-bottom: 6px; }
.tag-special { background: var(--a-gold); border-color: var(--a-gold); color: #000; }
.tag-birthday { border-color: var(--a-gold); }

/* ---------- CP1 accounts: Connect hosts and Waiting on NV (Hosts tab, mock page 11) ---------- */
.acct-count-line { margin: var(--s1, 4px) 0 0; }
.org-block { margin: 0 0 var(--s4, 16px); display: flex; flex-direction: column; gap: var(--s3, 12px); }
.org-block .section-head { margin-bottom: 0; }
.org-block .field-hint { margin: 0; }
.org-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s3, 12px); align-items: center;
  padding-top: var(--s3, 12px); border-top: 1px solid var(--a-rule); }
.org-row:first-of-type { border-top: 0; padding-top: 0; }
.org-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.org-who .mono { font-size: 12px; }
.org-arrow { color: var(--a-muted); }
.org-actions { display: flex; gap: var(--s2, 8px); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.org-actions .select { min-height: 36px; max-width: 220px; }
.flags-line { margin: 0 0 var(--s4, 16px); }
.flags-line span + span::before { content: " · "; }
@media (max-width: 760px) {
  .org-row { grid-template-columns: 1fr; }
  .org-actions { justify-content: flex-start; }
  .org-actions .select { max-width: none; flex-basis: 100%; }
}

/* CP2 (public-site plan, mock page 12): the night's Hosting section, Waiting for your yes, Hide / Erase */
.pill-hidden { border-color: var(--a-muted); color: var(--a-muted); border-style: dashed; }
.event-list .copy-public { flex: none; min-height: 36px; }
.public-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); word-break: break-all; }
.night-actions { flex-wrap: wrap; }
.hosting-settings .hs-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3, 12px); align-items: start; padding: var(--s3, 12px) 0; border-top: 1px solid var(--a-rule); }
.hosting-settings .hs-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--a-rule); font-size: 12px; font-weight: 600; color: var(--a-muted); }
.hosting-settings .pay-flat-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); margin-top: var(--s2, 8px); }
.hosting-settings .pay-flat-line .input-num { width: 88px; }
.hosting-settings .tier-row { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); }
.hosting-words { margin-top: var(--s3, 12px); }
.team-ticks { display: flex; flex-wrap: wrap; gap: var(--s3, 12px); }
.waiting-yes .row .btn { flex: none; }
.erase-sheet { border-color: var(--a-err); }
.erase-sheet .erase-list { margin: 0 0 var(--s3, 12px) 1.2em; padding: 0; }
.erase-sheet .erase-list li { margin: 2px 0; }
.erase-sheet .btn-danger:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) {
  .event-list .copy-public { display: none; }
}

/* ---------- CP3 teams: the Teams tab (mock page 10, admin side), Waiting on NV team rows ---------- */
.team-list { display: flex; flex-direction: column; gap: var(--s4, 16px); }
.team-card { display: flex; flex-direction: column; gap: var(--s2, 8px); }
.team-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2, 8px) var(--s4, 16px); }
.team-open { display: inline-flex; align-items: center; gap: var(--s2, 8px); min-height: 44px; text-decoration: none; text-align: left; }
.team-name { font-family: var(--f-name); font-size: 20px; letter-spacing: -0.01em; }
.team-open[aria-expanded="true"] .team-name { text-decoration: underline; text-underline-offset: 4px; }
.team-tag { margin-left: 0; letter-spacing: 0.06em; }
.team-facts { display: flex; flex-wrap: wrap; gap: 2px var(--s3, 12px); margin: 0; }
.team-facts span + span::before { content: "· "; }
.team-request { margin: 0; padding: var(--s2, 8px) var(--s3, 12px); border: 1px solid var(--a-ink); border-radius: var(--radius, 6px); }
.team-actions { flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s3, 12px); }
.team-edit { padding-top: var(--s3, 12px); border-top: 1px solid var(--a-rule); }
.team-edit-form { padding: 0; border: 0; }
.team-pay .pay-flat-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); margin-top: var(--s2, 8px); }
.team-pay .pay-flat-line .input-num { width: 88px; }
.team-pay .tier-row { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); }
.team-members { border-top: 1px solid var(--a-rule); padding-top: var(--s2, 8px); }
.member-row { display: grid; grid-template-columns: minmax(140px, 1.5fr) minmax(0, 1.5fr) 72px 110px 110px; gap: var(--s3, 12px); align-items: center;
  padding: var(--s2, 8px) 0; border-top: 1px solid var(--a-rule); font-size: 14px; }
.member-row:first-child { border-top: 0; }
.member-head > span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); }
.member-off { color: var(--a-muted); }
.mc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2, 8px); min-width: 0; overflow-wrap: anywhere; }
.mc-name .pill { margin-left: 0; }
.member-row .mc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px); }
.member-row .num { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.team-ended { margin-top: var(--s4, 16px); }
.team-ended > summary { list-style: none; display: inline-flex; }
.team-ended > summary::-webkit-details-marker { display: none; }
.team-ended .rows { margin-top: var(--s3, 12px); }
@media (max-width: 760px) {
  .member-head { display: none; }
  .member-row { grid-template-columns: 1fr 1fr; }
  .mc-name { grid-column: 1 / -1; }
  .member-row .mc[data-k]::before { content: attr(data-k); display: block; flex-basis: 100%; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-muted); }
  .member-row .num { justify-content: flex-start; text-align: left; }
}
/* CP4 (plans/reservision-public-site.md): Organizations tab (K-P1) and the merge picker (K-P2). */
.org-card .rows { margin-top: var(--s2, 8px); }
.org-card .org-slug { margin: var(--s3, 12px) 0 var(--s4, 16px); }
.org-card .org-ig { margin-bottom: var(--s4, 16px); }
.input-btn { display: flex; align-items: stretch; gap: var(--s2, 8px); max-width: 28rem; }
.input-btn .prefix { flex: 1; min-width: 0; }
@media (max-width: 520px) { .input-btn { flex-direction: column; max-width: none; } }
.org-create { margin: var(--s2, 8px) 0; }
.move-row .input { min-width: 0; width: 100%; }
.merge-pick { max-width: 16rem; }