/* Design language: six colours with a light and a dark value; everything else is mixed
   from them. The admin design page shows every token and component. */
:root {
  color-scheme: light;
  --bg: #f3f3f1;
  --surface: #fff;
  --text: #202124;
  --muted: #70757a;
  --accent: #fc4c02;
  --danger: #8b0000;
  --border: color-mix(in srgb, var(--text) 20%, var(--surface));
  --accent-ink: color-mix(in srgb, var(--accent) 75%, var(--text));
  --tint: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --danger-tint: color-mix(in srgb, var(--danger) 10%, var(--surface));
  --radius: 0.6rem;
  --radius-sm: 0.42rem;
  --shadow: 0 0.35rem 1rem rgb(0 0 0 / 8%);
  --control: 2.75rem;
  --control-lg: 3.25rem;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.45rem;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --width: 58rem;
  font-family: var(--font);
  font-size: 18px;
  color: var(--text);
  background: var(--bg);
}
/* Dark mode follows the phone's setting: the app is mostly used in dark bars late at night. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111213;
    --surface: #1c1d1f;
    --text: #ececec;
    --muted: #a4a8ad;
    --accent: #fc5a14;
    --danger: #ff7b7b;
    --shadow: 0 0.35rem 1rem rgb(0 0 0 / 45%);
  }
}
/* Chosen in Settings > Appearance. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111213;
  --surface: #1c1d1f;
  --text: #ececec;
  --muted: #a4a8ad;
  --accent: #fc5a14;
  --danger: #ff7b7b;
  --shadow: 0 0.35rem 1rem rgb(0 0 0 / 45%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
body { margin: 0; line-height: 1.5; background: var(--bg); color: var(--text); }
a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 0.09em; text-underline-offset: 0.16em; }

/* Header and layout */
body > header { background: var(--surface); border-bottom: 2px solid var(--text); }
.header-inner, main { width: min(100% - 2rem, var(--width)); margin-inline: auto; }
.header-inner { min-height: 4.5rem; display: flex; align-items: center; gap: 1.5rem; }
.header-inner > strong { display: flex; align-items: center; font-size: var(--text-lg); line-height: 1; }
.brand { min-height: var(--control-lg); display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); }
.brand img { width: 2.35rem; height: 2.35rem; object-fit: contain; }
.header-menu { min-height: var(--control-lg); display: flex; align-items: center; gap: 1.5rem; flex: 1; }
.header-inner nav { min-height: var(--control-lg); display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.header-inner nav a { min-height: var(--control-lg); display: inline-flex; align-items: center; padding: 0 0.75rem; font-weight: var(--weight-medium); line-height: 1; text-decoration: none; }
.menu-toggle { display: none; }
.notification-bell { position: relative; min-width: var(--control); min-height: var(--control); display: inline-grid; place-items: center; order: 2; border-radius: var(--radius-sm); color: var(--text); }
.notification-count { position: absolute; top: 0.1rem; right: 0; min-width: 1.4rem; min-height: 1.4rem; padding: 0 0.25rem; }
.notification-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.notification-panel { position: absolute; right: max(1rem, calc((100vw - var(--width)) / 2)); z-index: 40; width: min(26rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); overflow-y: auto; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.notification-panel[hidden] { display: none; }
.notification-panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.notification-panel-heading h2 { margin: 0; font-size: var(--text-lg); }
.notification-panel .notification-actions + p, .notification-panel .notification > .field-notice { margin: 0; padding-left: calc(2.5rem + 0.75rem); }
.notification { display: grid; gap: 0.5rem; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--border); }
.notification.unread { background: var(--tint); }
.notification-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.notification-link .avatar { width: 2.5rem; height: 2.5rem; }
.notification-glyph { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--accent-ink); }
.notification-text { min-width: 0; font-size: var(--text-sm); line-height: 1.35; }
.notification-link time { color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.notification-actions { display: flex; gap: 0.5rem; padding-left: calc(2.5rem + 0.75rem); }
.notification-actions form { margin: 0; }
.notification-actions button { min-height: var(--control); padding: 0.25rem 1rem; }
.header-sign-in { min-height: var(--control); display: inline-flex; align-items: center; margin-left: auto; font-weight: var(--weight-bold); }

main { padding-block: 2rem 5rem; }
h1 { margin-block: 0 1.5rem; font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.05; }
h2 { margin-block: 2rem 1rem; font-size: var(--text-xl); line-height: 1.2; }
h3 { margin-block: 0 0.75rem; font-size: var(--text-lg); }
p { margin-block: 1rem; }
section { margin-block: 2rem; }
article { margin: 0; }
small { font-weight: var(--weight-regular); }
.narrow { max-width: 30rem; margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.site-footer { width: min(100% - 2rem, var(--width)); margin: 2rem auto; padding: 1rem 0; display: flex; gap: 1rem; border-top: 1px solid var(--border); }
.field-notice, .legal-notice { color: var(--muted); font-size: var(--text-sm); }
.legal-page { max-width: 46rem; }
.legal-page h2 { margin-top: 2rem; }

/* Cards: one treatment everywhere. A card inside a card loses its border and shadow. */
.card, .session-card, .group-card, .quick-round, .stats > div, .connection-summary button, .admin-card, dialog, fieldset,
.plan-row, .flag-card, .admin-panel, .admin-metric, details.admin-section, .admin-profile-card, .session-activity-page, .create-group, .locked-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.card { padding: 1rem; }
.card .card, .session-section .session-card, .admin-panel .admin-panel { border: 0; box-shadow: none; }
[role="status"], [role="alert"] { padding: 0.75rem 1rem; border: 2px solid var(--tint); border-radius: var(--radius-sm); background: var(--tint); color: var(--text); }
[role="alert"] { border-color: var(--danger); background: var(--danger-tint); }

/* Controls: inputs are --control-lg tall; buttons are default, primary or danger. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  max-width: 100%;
  min-height: var(--control-lg);
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
textarea { min-height: 7rem; resize: vertical; }
button, .btn, .file-button, .secondary-action, .cheers-button {
  min-height: var(--control);
  padding: 0.5rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: var(--weight-bold);
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.btn, .file-button, .secondary-action, .cheers-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: 0.45; }
.primary-action, .btn-primary, .stack > button {
  display: inline-flex;
  min-height: var(--control-lg);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.danger-button, .btn-danger, .stack > .danger-button, .invite-link-admin .invite-revoke { border-color: var(--danger); background: var(--surface); color: var(--danger); }
/* A state where a button would be ("Requested", "Saved") is muted text, not a button. */
.button-status { display: inline-flex; align-items: center; min-height: var(--control); color: var(--muted); font-weight: var(--weight-medium); }
/* Pressed and selected: orange outline on the orange tint. */
.btn[aria-pressed="true"] { border-color: var(--accent); background: var(--tint); }

/* Badges: one shape, plain for facts, orange for live or on. */
.badge, .activity-status, .admin-badge, .admin-pill, .flag-status, .plan-response, .admin-count, .notification-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-accent, .activity-status, .admin-badge.is-live, .flag-status-some, .flag-status-everyone, .notification-count { border-color: var(--tint); background: var(--tint); color: var(--accent-ink); }

/* Lists: an optional avatar, a title with a line under it, and one thing at the end. */
.list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.list > li { border-bottom: 1px solid var(--border); }
.list-row { min-height: 3.5rem; display: flex; align-items: center; gap: 0.75rem; padding-block: 0.5rem; color: var(--text); text-decoration: none; }
.list-text { flex: 1; min-width: 0; display: grid; }
.list-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-text small { color: var(--muted); font-size: var(--text-sm); }
.list-chevron { color: var(--muted); font-size: var(--text-xl); line-height: 1; }
a.list-row:hover strong { text-decoration: underline; text-decoration-color: var(--accent); }

/* Type sizes. */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.text-xl { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1.2; }

.stack { display: grid; gap: 1rem; max-width: 36rem; }
.stack > label, details > label { display: grid; gap: 0.25rem; font-weight: var(--weight-medium); }
fieldset { min-width: 0; margin: 0; padding: 1rem; }
.session-activity-page fieldset { box-shadow: none; }
/* Forms start with a hidden token, so "first" means after any visible field. */
.stack > :not(input[type="hidden"]) ~ :is(.body-fields, .time-fields) { margin-top: 0.5rem; }
/* Floating the legend keeps long legends inside the box instead of across its border. */
legend { float: left; width: 100%; margin-bottom: 0.75rem; padding: 0; font-weight: var(--weight-bold); }
legend + * { clear: both; }
.choice-list { display: grid; gap: 0.5rem; }
.choice-list label { min-height: var(--control); display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; }
.choice-list label > span { display: grid; gap: 0; font-weight: var(--weight-medium); }
.choice-list label small { color: var(--muted); }
.choice-list input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-top: 0.25rem; }
.actions, .profile-actions, .session-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.profile-actions { margin-top: 1.5rem; }
/* The controls continue the Cheers and Share grid above them, so they sit one grid gap below it. */
.session-controls { margin-block: 0.5rem 0; }
.profile-actions form, .session-controls form { margin: 0; }
.profile-actions button, .profile-actions .primary-action { min-width: 10rem; }
details { margin-block: 1rem; padding: 0; }
summary { min-height: var(--control); font-weight: var(--weight-bold); cursor: pointer; }
details[open] summary { margin-bottom: 1rem; }
.danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--danger); }
.danger-zone > :first-child { margin-top: 0; }

/* Login */
.login-logo { width: 7rem; height: 7rem; object-fit: contain; margin-bottom: 1rem; }
.login-actions { display: grid; gap: 0.75rem; max-width: 22rem; margin-top: 1.5rem; }
.login-actions .primary-action { width: 100%; box-shadow: none; }
/* Provider brand colours are fixed by each provider's guidelines. */
.login-actions .oauth-github { border-color: #24292f; background: #24292f; color: #fff; }
.login-actions .oauth-strava { border-color: #fc4c02; background: #fc4c02; color: #fff; }
.login-actions .oauth-google { border-color: #747775; background: #fff; color: #1f1f1f; }
.login-actions .oauth-facebook { border-color: #1877f2; background: #1877f2; color: #fff; }
.provider-options { display: grid; gap: 0.75rem; max-width: 30rem; }
.provider-options button { width: 100%; text-align: left; }
.provider-person { display: flex; align-items: center; gap: 0.75rem; }

/* Session cards */
.session-list, .group-list { display: grid; gap: 1rem; }
.session-card { padding: 1rem; }
.session-card p:last-child { margin-bottom: 0; }
.activity-heading { min-width: 0; }
.activity-heading h3 { margin: 0; overflow-wrap: anywhere; }
.activity-heading h3 .activity-status { vertical-align: middle; }
.activity-reason { display: block; margin-top: 0.25rem; color: var(--muted); font-weight: var(--weight-medium); }
.activity-facepile, .round-photo-facepile { display: flex; }
/* The facepile sits to the left of the title, details and host. */
.activity-header { display: flex; align-items: center; gap: 0.75rem; }
.activity-header-copy { flex: 1; min-width: 0; }
.activity-facepile { flex: 0 0 auto; padding-left: 0.5rem; }
.activity-facepile > *, .round-photo-facepile > * { position: relative; }
.activity-facepile > :nth-child(1), .round-photo-facepile > :nth-child(1) { z-index: 6; }
.activity-facepile > :nth-child(2), .round-photo-facepile > :nth-child(2) { z-index: 5; }
.activity-facepile > :nth-child(3), .round-photo-facepile > :nth-child(3) { z-index: 4; }
.activity-facepile > :nth-child(4), .round-photo-facepile > :nth-child(4) { z-index: 3; }
.activity-facepile > :nth-child(5), .round-photo-facepile > :nth-child(5) { z-index: 2; }
.activity-facepile > :nth-child(6) { z-index: 1; }
.activity-facepile a { display: block; margin-left: -0.5rem; border-radius: 50%; }
.activity-facepile > .avatar { display: grid; place-items: center; margin-left: -0.5rem; border-radius: 50%; }
.activity-facepile .avatar { width: 2.5rem; height: 2.5rem; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.activity-facepile .hidden-people { min-width: 2.5rem; min-height: 2.5rem; height: 2.5rem; display: grid; place-items: center; margin-left: -0.5rem; padding: 0 0.5rem; border: 2px solid var(--surface); border-radius: 999px; background: var(--bg); box-shadow: 0 0 0 1px var(--border); color: inherit; font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1; }
/* Meta lines put a dot before every item, then clip one dot's width off the left edge so
   whichever item starts a line, after any wrap, shows no leading dot. */
.activity-context, .session-host { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.25rem; margin-left: -1.5em; clip-path: inset(0 0 0 1.5em); color: var(--muted); }
.activity-context > :not(.activity-status)::before, .session-host > :not(.activity-status)::before { content: "·"; display: inline-block; width: 1.5em; text-align: center; }
/* Each item stays on one line, so a wrapped line always starts at an item's dot, inside the
   clipped strip, rather than partway through an item (which used to clip "12:18 am" to "18 am"). */
.activity-context > *, .session-host > * { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.session-host > .activity-status { margin-left: 1.5em; margin-right: 0.6em; }
.activity-context { margin-top: 0.25rem; font-size: var(--text-sm); }
.activity-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 1rem; }
.activity-stats > div { display: grid; gap: 0; }
.activity-stats span { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.activity-stats strong { font-size: var(--text-lg); line-height: 1.15; }
.chart-empty { color: var(--muted); }
.activity-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.activity-actions form { margin: 0; }
.activity-actions .share-actions { margin-left: auto; }
.share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share-actions button { min-height: var(--control); padding: 0.5rem 0.75rem; }

.cheers-button strong { min-width: 1.25rem; font-size: var(--text-sm); text-align: center; }
.uncheer-form { margin-top: 1rem; }
.uncheer-form button { width: 100%; }
.cheers-button.cheered { border-color: var(--accent); background: var(--tint); color: var(--accent-ink); }
.cheers-icon { width: 1.5rem; height: 1.5rem; display: block; flex: 0 0 auto; overflow: visible; }
.share-feedback { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; max-width: min(24rem, calc(100% - 2rem)); margin: 0; background: var(--surface); box-shadow: var(--shadow); }

/* Chart and photo carousel */
.session-chart { width: 100%; height: 100%; display: block; background: var(--bg); }
.session-chart .axis, .session-chart .tick { stroke: var(--muted); stroke-width: 2; }
.session-chart polyline { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.session-chart text { fill: var(--text); font-size: 18px; font-family: inherit; }
.session-chart .axis-title { font-size: 16px; font-weight: var(--weight-bold); }
/* The image chart mirrors the chart panel of the shared activity image. */
.activity-media-slide.image-chart-slide { flex-basis: min(100%, 38rem); aspect-ratio: 936 / 630; background: #000; }
.image-chart { width: 100%; height: 100%; display: block; }
.image-chart-base { fill: #303030; }
.image-chart-shade { fill: rgb(0 0 0 / 34%); }
.image-chart-grid { stroke: rgb(255 255 255 / 65%); stroke-width: 2; }
.image-chart-title { fill: #fff; font: 750 18px var(--font); }
.image-chart-pill rect { fill: rgb(23 23 23 / 82%); }
.image-chart-pill text { fill: #fff; font: 650 20px var(--font); }
.image-chart polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.image-chart-halo { stroke: rgb(255 255 255 / 95%); stroke-width: 29; }
.image-chart-line { stroke: var(--accent); stroke-width: 17; }
.activity-carousel { position: relative; width: 100%; margin-top: 1rem; }
/* The arrows sit under the slides so they never cover the chart's latest point. */
.activity-carousel { display: flex; flex-direction: column; }
.activity-carousel-heading { order: 1; display: flex; justify-content: flex-end; align-items: center; margin-top: 0.5rem; }
.activity-carousel-controls { display: flex; gap: 0.5rem; margin-left: auto; }
.activity-carousel-controls button { width: var(--control); min-height: var(--control); padding: 0; font-size: var(--text-lg); line-height: 1; }
.activity-carousel-track { display: flex; gap: 0.75rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.activity-media-slide { flex: 0 0 min(68%, 26rem); aspect-ratio: 1; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); scroll-snap-align: start; }
.activity-media-slide:last-child { scroll-snap-align: end; }
/* The chart is wide rather than square so it doesn't dominate the feed on phones. */
.session-chart-slide { display: flex; align-items: center; flex-basis: min(100%, 38rem); aspect-ratio: 600 / 320; background: var(--bg); }
.round-photo-slide { position: relative; background: #000; }
.round-photo-slide > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.round-photo-slide figcaption { position: absolute; inset: auto 0 0; min-height: 5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; padding: 1.5rem 0.75rem 0.75rem; background: linear-gradient(transparent, rgb(0 0 0 / 78%)); color: #fff; }
.round-photo-marker { min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.round-photo-facepile { flex: 0 0 auto; padding-left: 0.5rem; }
.round-photo-facepile a { display: block; margin-left: -0.5rem; border-radius: 50%; }
.round-photo-facepile > .avatar { display: grid; place-items: center; margin-left: -0.5rem; border-radius: 50%; }
.round-photo-facepile .avatar { width: 2rem; height: 2rem; border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 35%); }
.round-photo-facepile .hidden-people { min-width: 2rem; height: 2rem; display: grid; place-items: center; margin-left: -0.5rem; padding: 0 0.25rem; border: 2px solid #fff; border-radius: 999px; background: #000; color: #fff; font-size: var(--text-xs); font-weight: var(--weight-bold); }

/* Session page */
.session-activity-page { overflow: hidden; }
.session-header { padding: clamp(1rem, 4vw, 1.5rem); padding-bottom: 0; }
.session-header h1 { margin-bottom: 0.5rem; font-size: clamp(1.65rem, 7vw, 2.5rem); overflow-wrap: anywhere; }
.session-host { margin-block: 0; }
.session-section { margin: 0; padding: clamp(1rem, 4vw, 1.5rem); }
.session-section + .session-section { border-top: 1px solid var(--border); }
.session-section > h2 { margin-top: 0; }
.session-section .session-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.session-add-people { margin-top: 1rem; border-top: 1px solid var(--border); }
/* The round form fills the card, so its edges line up with the overview below it. */
.session-add-round .round-form { max-width: none; }
.session-activity-page > .danger-zone { margin: 0; padding-top: clamp(1rem, 4vw, 1.5rem); }
.quick-round { padding: 1rem; }
.quick-round h2 { margin-top: 0; }
.quick-round-last { margin: -0.25rem 0 0.75rem; color: var(--muted); }
.quick-round-last strong { color: var(--text); }
.quick-round-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.quick-round-grid button { width: 100%; height: 100%; min-height: var(--control-lg); }

/* Rounds */
.round-feed { margin: 0; padding-left: 1.5rem; }
.round-feed li { padding: 0.5rem 0; border-top: 1px solid var(--border); }
.round-feed li:first-child { border-top: 0; }
.round-feed li::marker { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.round-feed-line { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.round-feed-line strong { flex: 0 0 auto; }
.round-feed-who { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.round-feed-line > time { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.round-feed-photo { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: var(--control); min-height: var(--control); margin: -0.75rem -0.5rem; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.round-feed-photo svg { width: 1em; height: 1em; }
.round-feed-photo:hover, .round-feed-photo:focus-visible { color: var(--text); }
.round-feed-line time { flex: 0 0 auto; color: var(--muted); font-size: var(--text-sm); }
.round-feed-note { display: block; color: var(--muted); }
.round-list { margin: 0; padding-left: 1.5rem; }
.round-list li { margin: 0; padding: 1rem 0.25rem; border-top: 1px solid var(--border); }
.round-list li:first-child { border-top: 0; }
.round-list li::marker { font-weight: var(--weight-bold); }
.round-list li > div { display: block; }
.round-summary { display: grid !important; grid-template-columns: auto 1fr auto; gap: 0.25rem 0.75rem; align-items: baseline; }
.round-summary > span, .round-summary > small { color: var(--muted); }
.round-summary > small { white-space: nowrap; }
.round-summary > p { grid-column: 1 / -1; margin: 0.25rem 0 0; }
.round-photo { width: min(100%, 22rem); aspect-ratio: 1; display: block; grid-column: 1 / -1; margin-top: 0.75rem; border-radius: var(--radius-sm); object-fit: cover; }
.round-actions { display: flex !important; gap: 0.5rem; margin-top: 0.75rem; }
.round-actions form { margin: 0; }
.round-actions button { min-height: var(--control); padding: 0.25rem 0.75rem; }
.round-photo-control video, .round-photo-control > [data-photo-preview] { width: 100%; aspect-ratio: 1; display: block; margin-bottom: 0.75rem; border-radius: var(--radius-sm); background: #000; object-fit: cover; }
.round-photo-control [hidden] { display: none; }
.round-photo-control > small { display: block; margin-top: 0.75rem; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.camera-switch { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--control); margin-bottom: 0.75rem; font-weight: var(--weight-bold); cursor: pointer; }
.camera-switch input { appearance: none; position: relative; width: 3rem; height: 1.75rem; margin: 0; border: 2px solid var(--border); border-radius: 999px; background: var(--bg); cursor: pointer; transition: background 0.15s; }
.camera-switch input::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--surface); box-shadow: 0 0.05rem 0.2rem rgb(0 0 0 / 30%); transition: transform 0.15s; }
.camera-switch input:checked { border-color: var(--accent); background: var(--accent); }
.camera-switch input:checked::after { transform: translateX(1.25rem); }
.camera-switch input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.file-button { display: inline-flex; align-items: center; justify-content: center; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.remove-photo-choice { display: flex; align-items: center; gap: 0.5rem; margin-block: 0.75rem; }
.remove-photo-choice input { width: 1.25rem; height: 1.25rem; }

.session-photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.75rem; margin: 1.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--border); list-style: none; }
.session-photo-list li { display: grid; gap: 0.25rem; }
.session-photo-list img { width: 100%; aspect-ratio: 1; display: block; border-radius: var(--radius-sm); object-fit: cover; }
.session-photo-list small { color: var(--muted); }
.session-photo-list form { margin: 0; }
.session-photo-list button { width: 100%; min-height: var(--control); padding: 0.25rem 0.5rem; }

.feature-picker .tile-picker input + span { min-height: 0; aspect-ratio: 1; padding: 0.25rem; overflow: hidden; }
.feature-picker .tile-picker img { width: 100%; height: 100%; display: block; border-radius: calc(var(--radius-sm) - 0.15rem); object-fit: cover; }

.avatar-current { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.avatar-current .avatar { width: 4.5rem; height: 4.5rem; }
.avatar-current p { margin: 0; }
.avatar-form { margin-top: 1.5rem; }
.avatar-form + form { margin-top: 1rem; }

/* Pickers */
.tile-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.drink-types { margin-bottom: 1rem; }
/* Tiles fill their grid cell so every tile in a row, including "+ Add", is the same height. */
.tile-picker label { display: grid; margin: 0; }
.tile-picker input { position: absolute; opacity: 0; }
.tile-picker input + span { min-height: var(--control-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: var(--weight-bold); text-align: center; }
/* Selected tiles are tinted with a check mark, so a full round of drinkers isn't a wall of
   orange and the solid Add round button still stands out. */
.tile-picker input + span { position: relative; }
.tile-picker input:checked + span { border-color: var(--accent); background: var(--tint); color: var(--text); }
.tile-picker input:checked + span::after { content: "✓"; position: absolute; top: 0.2rem; right: 0.35rem; color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1; }
.tile-picker input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.tile-picker small { display: block; }
.people-picker input + span { gap: 0.25rem; }
.tile-add { min-height: var(--control-lg); }
.add-drinker-dialog label { display: grid; gap: 0.25rem; font-weight: var(--weight-medium); }
.add-drinker-results { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.add-drinker-results li[hidden] { display: none; }
.add-drinker-results button { width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left; }
.add-drinker-results button small { color: var(--muted); font-weight: var(--weight-regular); }
.add-drinker-results [data-add-guest] { justify-content: center; border-style: dashed; color: var(--accent-ink); }
.people-picker .avatar { width: 2.5rem; height: 2.5rem; margin-bottom: 0.25rem; }
.people-picker b { line-height: 1.15; }
.quick-drinks { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: quick; }
.quick-drinks li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: var(--control); padding: 0.25rem 0.5rem 0.25rem 0.75rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); counter-increment: quick; }
.quick-drink-name { min-width: 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.quick-drink-name::before { content: counter(quick) ". "; color: var(--muted); }
.quick-drink-name small { display: block; color: var(--muted); font-weight: var(--weight-regular); }
.quick-drink-actions { display: flex; flex: 0 0 auto; gap: 0.25rem; }
.quick-drink-actions button { min-height: var(--control); padding: 0.25rem 0.5rem; }
.editable-list { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.editable-list > div { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }

/* Invites */
.invite-panel, .invite-panel > div:not([hidden]) { display: grid; gap: 1rem; }
.invite-panel p { margin: 0; }
.invite-panel label { display: grid; gap: 0.25rem; font-weight: var(--weight-medium); }
.invite-link-actions, .invite-link-admin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.invite-link-actions button { width: 100%; }
.invite-link-admin { padding-top: 1rem; border-top: 1px solid var(--border); }
.invite-link-admin form, .invite-link-admin button, .invite-panel [data-invite-empty] form, .invite-panel [data-invite-empty] button { width: 100%; margin: 0; }
.invite-panel [data-invite-status], [data-add-guest-status] { padding: 0; border: 0; background: transparent; }
.invite-panel [data-invite-status][data-error="true"] { color: var(--danger); }

/* Calendar and plans */
.calendar-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 0.75rem; margin-bottom: 1.5rem; }
.calendar-heading h1 { margin: 0; }
.calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.calendar-nav h2 { margin: 0; }
.calendar-nav a { min-width: var(--control); min-height: var(--control); display: grid; place-items: center; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: var(--weight-bold); text-decoration: none; }
.calendar-grid { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.calendar-grid th { padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.calendar-grid td { height: 6.5rem; padding: 0.25rem; border: 1px solid var(--border); vertical-align: top; overflow: hidden; }
.calendar-grid td.outside { background: var(--bg); color: var(--muted); }
.calendar-day { display: inline-grid; min-width: 1.7rem; height: 1.7rem; place-items: center; margin-bottom: 0.25rem; border-radius: 999px; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.calendar-grid td.today .calendar-day { background: var(--accent); color: #fff; }
.calendar-chip { display: block; margin-top: 0.25rem; padding: 0 0.25rem; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 0.3rem; background: var(--tint); color: var(--accent-ink); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.35; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.calendar-chip[data-kind="plan"] { border: 1.5px dashed var(--accent); background: var(--surface); }
.calendar-chip[data-kind="plan"][data-status="not_going"] { opacity: 0.55; }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--muted); font-size: var(--text-sm); }
.calendar-legend .calendar-chip { width: 1.4rem; height: 0.9rem; margin: 0 0 0 0.5rem; padding: 0; }
.calendar-legend .calendar-chip:first-child { margin-left: 0; }
.plan-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem; }
.plan-row > a { min-width: 0; display: grid; gap: 0; color: inherit; text-decoration: none; }
.plan-row time, .plan-row a > span { color: var(--muted); font-size: var(--text-sm); }
.plan-row strong { overflow-wrap: anywhere; }
.plan-response[data-response="going"], .plan-response[data-response="hosting"] { border-color: var(--tint); background: var(--tint); color: var(--accent-ink); }
.plan-response[data-response="not_going"] { text-decoration: line-through; }
.plan-kicker { margin: 0 0 0.5rem; }
.plan-invitees li { display: flex; align-items: center; gap: 0.75rem; }
.plan-invitees .person-link { flex: 1; min-width: 0; }
.plan-invitees form { margin: 0; }
.plan-invitees button { min-height: var(--control); padding: 0.25rem 0.75rem; }
.rsvp-actions form { margin: 0; }
.rsvp-actions button { min-width: 8rem; }

/* Lists and dialogs */
.item-list { padding: 0; list-style: none; border-top: 1px solid var(--border); }
.item-list li { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--border); }
.connection-list { margin: 0; padding: 0; list-style: none; }
.connection-list li { padding-block: 0.5rem; border-top: 1px solid var(--border); }
dialog { width: min(100% - 2rem, 30rem); max-height: min(80vh, 38rem); padding: 1.5rem; overflow-y: auto; }
dialog::backdrop { background: rgb(0 0 0 / 45%); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialog-heading h2 { margin: 0; }
.dialog-heading button { min-height: var(--control); padding-block: 0.25rem; }
.edit-dialog { width: min(100% - 2rem, 36rem); }
.edit-dialog .dialog-heading { position: sticky; top: -1.5rem; z-index: 1; margin: -1.5rem -1.5rem 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.edit-dialog .dialog-heading form { margin: 0; }
.edit-dialog .stack { max-width: none; }
.attendee-dialog .connection-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.attendee-dialog .connection-list form { margin: 0; }
.attendee-dialog .connection-list button { min-height: var(--control); padding: 0.25rem 0.75rem; }

/* People and profiles */
.avatar { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; display: inline-grid; place-items: center; overflow: hidden; border: 2px solid var(--border); border-radius: 50%; background: var(--bg); object-fit: cover; color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: none; }
.profile-nav { gap: 0.5rem; }
.avatar-sm { width: 2rem; height: 2rem; font-size: var(--text-xs); }
.avatar-lg { width: 4.5rem; height: 4.5rem; font-size: var(--text-xl); }
.profile-nav .avatar { width: 2rem; height: 2rem; border-width: 1px; }
.profile-hero { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.profile-hero > .avatar { width: 4.5rem; height: 4.5rem; font-size: var(--text-xl); }
.profile-hero h1 { margin-bottom: 0.5rem; }
.profile-hero p { margin: 0; }
.person-link { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; }
.stats > div, .connection-summary button { display: grid; align-content: start; gap: 0.25rem; padding: 1rem; font: inherit; text-align: left; }
.stats strong, .connection-summary strong { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1.1; overflow-wrap: anywhere; }
.stats span, .connection-summary span { font-size: var(--text-sm); font-weight: var(--weight-regular); }
.connection-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: 0.75rem; }
.connection-summary button { justify-items: start; height: auto; min-height: 4.5rem; }

.suggestion-list form { margin: 0; flex: 0 0 auto; }
.suggestion-reasons { color: var(--muted); }

/* Groups */
.group-card { padding: 1rem; }
.group-card h3 { margin-bottom: 0.25rem; }
.group-card p { margin-block: 0.25rem 0; }
.group-meta { color: var(--muted); font-size: var(--text-sm); }
.create-group { padding: 0.5rem 1rem; }
/* Even padding centres the summary and keeps its disclosure arrow. */
.create-group summary { min-height: 0; margin: 0; padding-block: 0.5rem; }

/* Admin */
.admin-list { display: grid; gap: 0.75rem; }
.admin-card { padding: 1rem; }
.admin-card-heading { display: flex; align-items: center; gap: 0.75rem; }
.admin-card-heading > div { min-width: 0; flex: 1; }
.admin-card-heading > span { font-size: var(--text-xs); font-weight: var(--weight-bold); }
.admin-card > small { display: block; overflow-wrap: anywhere; }
.admin-actions { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; margin-top: 0.75rem; }
.admin-actions form, .admin-moderation-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.admin-actions form:first-child { display: grid; grid-template-columns: 1fr auto; }
.admin-actions input, .admin-moderation-form input { min-width: 8rem; }
.admin-moderation-form { margin-top: 0.75rem; }
.admin-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; }
.admin-photo-card { min-width: 0; }
.admin-photo-card > button { width: 100%; height: auto; min-height: 0; display: grid; gap: 0.25rem; padding: 0.5rem; text-align: left; }
.admin-photo-card img { width: 100%; aspect-ratio: 1; display: block; border-radius: var(--radius-sm); object-fit: cover; }
.admin-photo-card span { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.admin-photo-card strong { color: var(--danger); font-size: var(--text-xs); }
.admin-photo-card.hidden img { opacity: 0.5; }
.admin-photo-dialog { width: min(100% - 2rem, 44rem); max-height: 90vh; }
.admin-photo-dialog > img { width: 100%; max-height: 60vh; display: block; border-radius: var(--radius-sm); background: #000; object-fit: contain; }
.admin-photo-danger { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--danger); }
.admin-photo-danger h3 { margin-top: 0; }
.admin-photo-danger form { margin-block: 0.75rem; }
.admin-photo-danger button { border-color: var(--danger); color: var(--danger); }

.admin-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.admin-search input { flex: 1 1 16rem; }
.admin-search-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0 1.5rem; }
.admin-search-results section { margin-block: 0.5rem 1.5rem; }
.admin-items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.admin-items li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--control); padding-block: 0.5rem; border-bottom: 1px solid var(--border); }
.admin-item-label { min-width: 0; overflow-wrap: anywhere; }
.admin-item-label small { color: var(--muted); }
.admin-inline-form { display: inline-flex; flex: 0 0 auto; gap: 0.5rem; margin: 0; }
.admin-inline-form button, .admin-inline-form select { min-height: var(--control); padding: 0.25rem 0.5rem; }
.admin-inline-form select { width: auto; }
.admin-add-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; max-width: 30rem; }
.admin-add-form input { flex: 1; min-height: var(--control); }
.admin-add-form button { min-height: var(--control); }
.admin-record-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.admin-record-heading > .avatar { width: 4.5rem; height: 4.5rem; }
.admin-record-heading h1 { margin-bottom: 0.25rem; }
.admin-record-heading p { margin: 0; color: var(--muted); }
.admin-round { margin-bottom: 0.75rem; }
.admin-round h3 { margin-bottom: 0.25rem; }
.admin-round h4 { margin: 1rem 0 0.5rem; }
.admin-round-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; gap: 1rem; }
.admin-round-form label { display: grid; gap: 0.25rem; font-weight: var(--weight-medium); }
.admin-drink-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: end; gap: 1rem; margin-block: 0.75rem; }
.admin-drink-form label { display: grid; gap: 0.25rem; font-weight: var(--weight-medium); }
.admin-drink summary { min-height: var(--control); display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.admin-drink summary small { color: var(--muted); font-weight: var(--weight-regular); }
.admin-drink.retired summary strong { color: var(--muted); text-decoration: line-through; }
.admin-photo-card small { display: block; overflow-wrap: anywhere; font-size: var(--text-xs); }
.admin-photo-card .admin-inline-form { margin-top: 0.25rem; }

/* Error page */
.error-page { min-height: 65vh; display: grid; align-content: center; justify-items: center; gap: 0.75rem; text-align: center; }
.error-page img { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.error-page .error-code { margin: 0; color: var(--accent-ink); font-size: clamp(3rem, 12vw, 6rem); font-weight: var(--weight-bold); line-height: 1; }
.error-page h1, .error-page p { margin: 0; }
.error-page > p:not(.error-code) { max-width: 30rem; color: var(--muted); }
.error-page .primary-action { margin-top: 0.75rem; }

@media (max-width: 36rem) {
  :root { font-size: 17px; }

  main { padding-top: 1.5rem; }
  .primary-action, .btn-primary, .stack > button { width: 100%; }
  .profile-actions, .profile-actions form, .profile-actions button, .profile-actions .primary-action { width: 100%; }
  .share-actions button { flex: 1; }
  .activity-actions .share-actions { flex: 1; }
  .activity-actions .share-actions button { width: 100%; }
  .session-card { padding: 1rem; }
  .activity-facepile { padding-left: 0.75rem; }
  .activity-facepile a, .activity-facepile > .avatar, .activity-facepile .hidden-people { margin-left: -0.75rem; }
  .activity-facepile .avatar { width: 2rem; height: 2rem; }
  .activity-facepile .hidden-people { min-width: 2rem; min-height: 2rem; height: 2rem; padding-inline: 0.25rem; }
  .round-summary { grid-template-columns: 1fr auto; }
  .round-summary > span { grid-column: 1 / -1; }
  .photo-actions > * { flex: 1 1 auto; }
  .edit-dialog { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; border-width: 2px 0 0; border-radius: 0.8rem 0.8rem 0 0; }
  .item-list li { align-items: flex-start; }
  .tile-picker { grid-template-columns: repeat(2, 1fr); }
  .quick-round-grid { grid-template-columns: repeat(2, 1fr); }
  .connection-summary { grid-template-columns: repeat(2, 1fr); }
  .admin-actions { grid-template-columns: 1fr; }
  .calendar-grid td { height: 3.4rem; padding: 0.25rem; text-align: center; }
  .calendar-grid th { padding-inline: 0; font-size: var(--text-xs); }
  .calendar-day { min-width: 1.5rem; height: 1.5rem; font-size: var(--text-xs); }
  /* Phones show a dot per entry; the list below the grid carries the details. */
  .calendar-grid .calendar-chip, .calendar-legend .calendar-chip { display: inline-block; width: 0.6rem; height: 0.6rem; margin: 0; padding: 0; border-radius: 50%; background: var(--accent); vertical-align: middle; }
  .calendar-grid .calendar-chip[data-kind="plan"], .calendar-legend .calendar-chip[data-kind="plan"] { background: var(--surface); border-width: 2px; }
  .calendar-grid .calendar-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .secondary-action { width: 100%; }
  .admin-actions form button, .admin-moderation-form button { flex: 1; }
}

/* "Round 9 added: Beer × 4 · Undo" sits above the thumb for a few seconds after adding a round. */
.undo-toast { position: fixed; z-index: 30; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(30rem, calc(100% - 2rem)); display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: var(--radius-sm); background: var(--text); color: var(--surface); box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25); transition: opacity 0.4s, transform 0.4s; }
.undo-toast span { flex: 1; font-weight: var(--weight-bold); }
.undo-toast form { margin: 0; }
.undo-toast button { min-height: var(--control); padding: 0.5rem 1rem; border: 2px solid currentColor; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; font-weight: var(--weight-bold); }
.undo-toast.is-leaving { opacity: 0; transform: translate(-50%, 0.5rem); }
@media (prefers-reduced-motion: reduce) { .undo-toast { transition: none; } }

.step-out-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.step-out-form .field-notice { margin: 0; }
.session-stepped-out { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.session-stepped-out p { margin: 0; font-weight: var(--weight-bold); }
.session-stepped-out form { margin: 0; }

/* The in-app confirm: a bottom sheet on phones, with Cancel as the big button under the thumb. */
.confirm-sheet { width: min(100% - 2rem, 26rem); padding: 1.5rem; }
.confirm-sheet h2 { margin: 0 0 0.25rem; font-size: var(--text-lg); }
.confirm-sheet p { margin: 0 0 1rem; color: var(--muted); }
.confirm-actions { display: grid; gap: 0.5rem; margin-top: 1rem; }
.confirm-actions button { width: 100%; min-height: var(--control-lg); }
.confirm-actions .confirm-danger { border-color: var(--danger); background: var(--surface); color: var(--danger); }
@media (max-width: 36rem) {
  .confirm-sheet { width: 100%; max-width: none; margin: auto 0 0; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); border-width: 2px 0 0; border-radius: 0.8rem 0.8rem 0 0; }
}

.save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
/* Forms that save as they change hide their button; until something is saved the row is
   empty and mustn't add a gap. */
.save-row:not(:has(> :not([hidden]):not(:empty))) { display: none; }
.save-status { color: var(--muted); font-weight: var(--weight-bold); }
.field-error { display: block; margin-top: 0.25rem; color: var(--danger); font-weight: var(--weight-bold); }
.field-error[hidden] { display: none; }

.empty-sessions { margin-top: 1rem; color: var(--muted); }
.empty-sessions summary { min-height: var(--control); display: flex; align-items: center; cursor: pointer; font-weight: var(--weight-bold); }
.empty-sessions ul { margin: 0.25rem 0 0; padding-left: 1rem; }
.empty-sessions li { margin: 0.25rem 0; }

.people-results { margin: 0 0 0.5rem; }
.people-results[hidden] { display: none; }
.share-profile { margin: 1rem 0; }
.share-profile summary { min-height: var(--control); display: flex; align-items: center; cursor: pointer; font-weight: var(--weight-bold); }
.share-profile-body { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.share-profile-body img { width: 200px; height: 200px; border-radius: var(--radius-sm); background: #fff; image-rendering: pixelated; }
.share-profile-body p { margin-top: 0; }

/* Session controls: while a session is active, Invite and Finish stay out and the rest
   fold into More. */
.more-controls { position: relative; }
.more-controls summary { min-height: var(--control); display: inline-flex; align-items: center; padding: 0.5rem 1rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-weight: var(--weight-bold); list-style: none; }
.more-controls summary::-webkit-details-marker { display: none; }
.more-controls summary::after { content: "▾"; margin-left: 0.5rem; }
.more-controls[open] summary::after { content: "▴"; }
.more-controls-body { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.more-controls-body form { margin: 0; }
/* Photo and note are optional, so they wait under the Add round button. */
.round-extras { margin-top: 0.25rem; }
.round-extras summary { min-height: var(--control); display: inline-flex; align-items: center; color: var(--muted); cursor: pointer; font-weight: var(--weight-bold); }
.round-extras[open] > :not(summary) { margin-top: 0.75rem; }
.dialog-danger { margin-top: 2rem; }
.dialog-danger h3 { margin: 0 0 0.25rem; }
@media (max-width: 36rem) {
  /* On phones the title and its meta get the full width, with the faces underneath. */
  .session-header.activity-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .session-header .activity-facepile { order: 2; }
  .session-header .activity-header-copy { width: 100%; }
}

.learn-more { color: var(--muted); }
.learn-more summary { min-height: var(--control); display: inline-flex; align-items: center; cursor: pointer; font-weight: var(--weight-bold); }

/* Account menu: Profile, Settings, Admin and Sign out sit behind your avatar. */
.account-menu { position: relative; margin-left: auto; }
.account-menu summary { min-height: var(--control-lg); display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: var(--weight-medium); list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary .avatar { width: 2rem; height: 2rem; }
.account-menu-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-body { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 40; min-width: 12rem; display: grid; gap: 0.25rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.account-menu-body a, .account-menu-body button { min-height: var(--control); display: flex; align-items: center; width: 100%; padding: 0 0.75rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-weight: var(--weight-medium); text-align: left; text-decoration: none; box-shadow: none; }
.account-menu-body a:hover, .account-menu-body button:hover { background: var(--bg); }
.account-menu-body form { margin: 0; }

/* Session page buttons are one size: two to a row, full width. */
.session-activity-page .activity-actions, .session-controls, .more-controls-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.session-activity-page .activity-actions .share-actions { display: contents; }
.session-activity-page .activity-actions > *, .session-controls > *, .more-controls-body > * { min-width: 0; }
.session-activity-page .activity-actions button, .session-activity-page .activity-actions .primary-action, .session-controls button, .session-controls .primary-action, .session-controls .button-status, .more-controls-body button, .more-controls-body .primary-action { box-sizing: border-box; width: 100%; height: 3.25rem; min-height: 0; padding-block: 0; padding-inline: 0.5rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-controls form, .more-controls-body form, .session-activity-page .activity-actions form { margin: 0; }
.more-controls { grid-column: 1 / -1; }
.more-controls, .more-controls[open] { margin: 0; }
.more-controls[open] summary { margin-bottom: 0; }
.more-controls summary { box-sizing: border-box; width: 100%; height: 3.25rem; min-height: 0; justify-content: center; }

/* Person rows link to the profile; the name doesn't need an underline. */
.person-link { color: var(--text); text-decoration: none; }

@media (max-width: 56rem) {
  .header-inner { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; padding-block: 0.75rem; }
  .menu-toggle { display: block; }
  .header-inner { grid-template-columns: 1fr auto auto; }
  .notification-bell { grid-column: 2; grid-row: 1; }
  .menu-toggle { grid-column: 3; grid-row: 1; }
  .header-menu { grid-column: 1 / -1; display: none; }
  .header-menu[data-open="true"] { display: grid; gap: 0.5rem; }
  .header-inner nav { display: grid; grid-template-columns: 1fr; gap: 0.25rem; }
  .header-inner nav a { min-height: var(--control); display: flex; align-items: center; justify-content: center; padding-inline: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .header-inner nav { grid-template-columns: repeat(2, 1fr); }
  /* In the phone menu the account links are always shown, under the main ones. */
  .account-menu { margin-left: 0; }
  .account-menu summary { display: none; }
  .account-menu-body { position: static; grid-template-columns: repeat(2, 1fr); min-width: 0; padding: 0.5rem 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; background: none; }
  .account-menu-body a, .account-menu-body button { min-height: var(--control); justify-content: center; border: 1px solid var(--border); text-align: center; }
  .account-menu-body form { grid-column: 1 / -1; }
}
[data-people-submit][hidden] { display: none; }
.account-menu, .account-menu[open] { margin-block: 0; padding: 0; }
.account-menu[open] summary { margin-bottom: 0; }

/* The logo is drawn in dark ink; dark mode swaps in the light copy. */
.logo-ink-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-ink-dark { display: none; }
  :root:not([data-theme="light"]) .logo-ink-light { display: inline-block; }
}
:root[data-theme="dark"] .logo-ink-dark { display: none; }
:root[data-theme="dark"] .logo-ink-light { display: inline-block; }
/* Mid widths: the avatar alone opens the account menu, so the five links fit on one line. */
@media (max-width: 72rem) { .account-menu-name { display: none; } }

/* Open plans you aren't part of are on the calendar too, but quieter than your own. */
.calendar-chip[data-open] { border-color: var(--border); color: var(--muted); opacity: 0.8; }
.calendar-grid .calendar-chip[data-open] { border-style: dotted; }
.plan-row-open { border-style: dashed; background: none; }
.plan-row-open strong { color: var(--muted); }
.plan-visibility { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-bold); }

/* Cheers icon. At rest the glasses are frozen mid-clink with the sparks lit. Tapping Cheers
   snaps them back to the start and plays the clink, ending on the same frozen pose. */
.cheers-glass { transform-box: fill-box; transform-origin: 62% 48%; transform: rotate(15deg); }
.cheers-sparks { transform-box: fill-box; transform-origin: 50% 100%; opacity: 1; transform: scale(1.1); }
.cheers-button.is-clinking .cheers-glass { animation: cheers-clink-glass 0.65s ease-in-out; }
.cheers-button.is-clinking .cheers-sparks { animation: cheers-clink-sparks 0.65s ease-out; }
@keyframes cheers-clink-glass {
  0% { transform: rotate(0); }
  35% { transform: rotate(-9deg); }
  80% { transform: rotate(15deg); }
  90% { transform: rotate(11deg); }
  100% { transform: rotate(15deg); }
}
@keyframes cheers-clink-sparks {
  0%, 78% { opacity: 0; transform: scale(0.5); }
  86% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .cheers-button.is-clinking .cheers-glass, .cheers-button.is-clinking .cheers-sparks { animation: none; }
}

/* Weekly streak: an orange flame, greyed out when the streak has lapsed. */
.streak-stat strong { display: flex; align-items: center; gap: 0.25rem; }
.flame-icon { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; }
.flame-outer { fill: var(--accent); }
.flame-inner { fill: #ffb547; }
.streak-stat.is-cold .flame-outer, .streak-stat.is-cold .flame-inner { fill: var(--muted); opacity: 0.5; }

/* Feature flags on an admin user page. */
.admin-flag-choices { display: grid; gap: 0.5rem; justify-items: start; margin-block: 0.75rem; }
.admin-flag-choices fieldset { display: grid; gap: 0.25rem; margin: 0; }

/* Measurements for the alcohol estimate trial. */
.body-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem; }
.body-fields label, .round-size { display: grid; gap: 0.25rem; font-weight: var(--weight-medium); }
.stack > .round-size { gap: 0.75rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-weight: var(--weight-bold); }
.stack > .round-size small { font-weight: var(--weight-regular); }

/* Feature flags admin: one card per flag, status up front. */
.flags-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 0.75rem; }
.flags-heading h1 { margin-bottom: 0.25rem; }
.flag-new summary { display: inline-flex; align-items: center; min-height: var(--control); padding: 0.5rem 1rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-weight: var(--weight-bold); cursor: pointer; list-style: none; }
.flag-new summary::-webkit-details-marker { display: none; }
.flag-new[open] { flex-basis: 100%; }
.flag-new-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; gap: 1rem; margin-block: 0.75rem; }
.flag-new-form label { display: grid; gap: 0.25rem; font-weight: var(--weight-medium); }
.flag-list { display: grid; gap: 1rem; margin-block: 1.5rem 2rem; }
.flag-card { display: grid; gap: 1rem; padding: 1rem; }
.flag-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.flag-card-head h2 { margin: 0; font-size: var(--text-lg); }
.flag-card-head code { font-size: 1em; }
.flag-card-head p { margin: 0.25rem 0 0; color: var(--muted); }
.flag-audience { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }
.flag-audience .camera-switch { margin-bottom: 0; }
.flag-people { display: grid; gap: 0.5rem; }
.flag-people h3 { margin: 0; font-size: var(--text-md); }
.flag-people h3 small { color: var(--muted); font-weight: var(--weight-regular); }
.flag-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.flag-chips li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.flag-chips .avatar { width: 2rem; height: 2rem; }
.flag-chips a { font-weight: var(--weight-medium); text-decoration: none; }
.flag-chips form { margin: 0; }
.flag-chips button { width: var(--control); height: var(--control); min-height: 0; margin: -0.5rem 0 -0.5rem -0.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: var(--text-lg); line-height: 1; }
.flag-chips button:hover { background: var(--danger-tint); color: var(--danger); }
.flag-add { max-width: 30rem; }
.flag-more summary { color: var(--muted); cursor: pointer; }
.flag-more[open] { display: grid; gap: 0.5rem; }
.flag-card form, .flag-card details { margin: 0; }
.flag-card details, .flag-card details[open], .flag-new, .flag-new[open] { padding: 0; border: 0; background: none; }
.flag-card details[open] summary { margin-bottom: 0.5rem; }

/* The viewer's own BAC estimate among a session's stats (trial). */
.bac-stat { padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; border-radius: var(--radius-sm); background: var(--tint); }
.bac-note { margin: 0.5rem 0 0; color: var(--muted); font-size: var(--text-xs); }

/* Switched off, the alcohol estimate fields are hidden. */
.bac-toggle:has(input:not(:checked)) + .body-fields { display: none; }
.stack > .bac-toggle { display: inline-flex; margin-bottom: 0; }

/* The viewer's BAC estimate on a card's chart: a dashed line with its peak labelled. */
.session-chart polyline.bac-line { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bac-peak { fill: var(--text); }
.session-chart .bac-peak-label { font-size: 15px; font-weight: var(--weight-bold); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; }
.image-chart polyline.bac-line-image { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: 12 8; }
.bac-peak-image { fill: #fff; }
.bac-peak-label-image { fill: #fff; font: 700 22px system-ui, -apple-system, sans-serif; paint-order: stroke; stroke: rgb(0 0 0 / 70%); stroke-width: 6px; }
.bac-key { display: inline-block; width: 1.4rem; margin-right: 0.25rem; vertical-align: middle; border-top: 2px dashed currentColor; }

/* Start and end time side by side in the session editor. */
.time-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.time-fields label { display: grid; gap: 0.25rem; font-weight: var(--weight-medium); }

/* Admin record pages: a status bar, the public card, then admin sections. */
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block: 0.5rem 1rem; }
.admin-bar-status, .admin-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.admin-preview { margin-bottom: 1rem; }
.admin-round-feed li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.admin-round-meta { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--muted); }
.admin-round-note { flex-basis: 100%; color: var(--muted); }
.admin-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0 2rem; }
.admin-fields { margin-block: 1.5rem; }
.admin-fields dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.25rem 1rem; margin: 0.75rem 0 0; font-size: var(--text-sm); }
.admin-fields dt { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-fields dd { margin: 0; overflow-wrap: anywhere; }
.admin-round-number { margin-right: 0.5rem; color: var(--muted); font-weight: var(--weight-bold); }
.admin-preview[inert] { cursor: default; }
@media (max-width: 36rem) { .admin-bar-actions { width: 100%; } .admin-bar-actions > * { flex: 1; text-align: center; } }

/* ── Admin area ─────────────────────────────────────────────────────────────
   One navigation across every admin page, cards for panels and folding sections,
   and compact rows whose actions never squeeze the names beside them. */
.admin-nav { display: flex; gap: 0.25rem; margin: 0 -1rem 1.5rem; padding: 0 1rem 0.25rem; overflow-x: auto; scrollbar-width: none; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a, .admin-filter a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--control); padding: 0 1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
.admin-nav a:hover, .admin-filter a:hover { border-color: var(--text); }
.admin-nav a[aria-current="page"], .admin-filter a[aria-current="page"] { border-color: var(--text); background: var(--text); color: var(--surface); }
.admin-filter { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.admin-search { flex-wrap: nowrap; margin-bottom: 1.5rem; }
.admin-search input { flex: 1 1 auto; min-width: 0; }
.admin-search a { flex: 0 0 auto; }
.admin-search-meta { margin: -0.5rem 0 1rem; color: var(--muted); font-size: var(--text-sm); }
.admin-list-heading { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }
.admin-list-heading h1 { margin: 0; }
.admin-empty { margin: 0.5rem 0; color: var(--muted); font-size: var(--text-sm); }
.admin-more { margin: 1rem 0 0; text-align: center; }

.admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.admin-metric { display: grid; gap: 0.25rem; padding: 1rem; color: var(--text); text-decoration: none; }
a.admin-metric:hover { border-color: var(--text); }
.admin-metric strong { font-size: var(--text-xl); line-height: 1.1; }
.admin-metric span { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.admin-metric.is-live strong { color: var(--accent); }
.admin-metric.is-warn strong { color: var(--danger); }

.admin-panel { margin: 0 0 1rem; padding: 1rem; }
.admin-panel > h2, .admin-panel-heading h2 { margin: 0 0 0.5rem; font-size: var(--text-md); }
.admin-panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.admin-columns { gap: 0 1.5rem; }
ul.admin-panel { padding: 0 1rem; }

.admin-rows { margin: 0; padding: 0; list-style: none; }
.admin-rows li + li { border-top: 1px solid var(--border); }
.admin-row { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.5rem 0; color: var(--text); text-decoration: none; }
.admin-row:hover strong { text-decoration: underline; text-decoration-color: var(--accent); }
.admin-row .avatar { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; }
.admin-row-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 0; }
.admin-row-text strong, .admin-row-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-row-text small { color: var(--muted); font-size: var(--text-sm); }
.admin-row-chevron { flex: 0 0 auto; color: var(--muted); font-size: var(--text-xl); line-height: 1; }

.admin-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; margin-bottom: 1.5rem; }
details.admin-section, details.admin-section[open] { margin: 0 0 1rem; padding: 0; }
.admin-section > summary { display: flex; align-items: center; gap: 0.5rem; min-height: var(--control); margin: 0; padding: 0.5rem 1rem; cursor: pointer; list-style: none; }
.admin-section > summary::-webkit-details-marker { display: none; }
.admin-section > summary::after { content: "›"; margin-left: auto; color: var(--muted); font-size: var(--text-lg); transition: transform 0.15s; }
.admin-section[open] > summary::after { transform: rotate(90deg); }
.admin-section > summary h2 { margin: 0; font-size: var(--text-md); }
.admin-section[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--border); }
.admin-section > :not(summary) { margin-inline: 1rem; }
.admin-section > :last-child:not(summary) { margin-bottom: 1rem; }
.admin-section.is-empty > summary h2 { color: var(--muted); font-weight: var(--weight-medium); }
.admin-section .admin-items { border-top: 0; }
.admin-section .admin-photo-grid { margin-top: 0.75rem; }

.admin-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; min-height: var(--control); }
.admin-items li:last-child { border-bottom: 0; }
.admin-item-label { min-width: 0; display: grid; gap: 0; }
.admin-item-label > a, .admin-item-label > span, .admin-item-label > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-item-label > small { color: var(--muted); font-size: var(--text-xs); }
/* In lists, a remove button is a small "Remove"; its full label stays as its tooltip and accessible name. */
.admin-remove-short { display: none; }
.admin-items .admin-remove-button { min-height: var(--control); padding: 0.25rem 0.75rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--danger); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); box-shadow: none; }
.admin-items .admin-remove-button:hover { border-color: var(--danger); background: var(--danger-tint); }
.admin-items .admin-remove-button:has(.admin-remove-short) .admin-remove-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.admin-items .admin-remove-short { display: inline; }
.admin-items li.admin-invitee { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; }
.admin-invitee select { min-height: var(--control); font-size: var(--text-sm); }
.admin-add-form { max-width: none; margin-top: 0.75rem; }
.admin-add-form input { min-width: 0; }

.admin-audit { margin: 0; padding: 0; list-style: none; }
.admin-audit li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: var(--text-sm); }
.admin-audit li + li { border-top: 1px solid var(--border); }
.admin-audit small { display: block; color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.admin-audit time { flex: 0 0 auto; color: var(--muted); font-size: var(--text-sm); }
.admin-bar { margin-top: 0; }

.admin-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0 0 1rem; font-size: var(--text-sm); }
.admin-facts dt { color: var(--muted); }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }
.admin-account-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-account-actions form { margin: 0; }
/* Your own account has no role button, so its empty form mustn't take a slot in the row. */
.admin-account-actions form:not(:has(button)) { display: none; }
.admin-flag-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.admin-flag-switches h3 { flex-basis: 100%; margin: 0; font-size: var(--text-sm); }
.admin-flag-switches .camera-switch { margin: 0; }
.admin-flag-switches small { color: var(--muted); font-weight: var(--weight-regular); }
.admin-row-title { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.admin-row-title strong { min-width: 0; }

/* Drink catalog: categories fold, rows are compact, and a box filters as you type. */
.admin-catalog .admin-section { margin-bottom: 1rem; }
.admin-catalog-filter { width: 100%; margin-bottom: 1rem; }
.admin-items li.admin-drink { display: block; min-height: 0; padding: 0; }
.admin-drink > details, .admin-drink > details[open] { margin: 0; padding: 0; border: 0; }
.admin-drink summary { min-height: var(--control); padding: 0.25rem 0; }
.admin-items li.admin-drink[hidden], details.admin-section[data-catalog-group][hidden] { display: none; }
.admin-drink-form .remove-photo-choice { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; min-height: var(--control); }
.admin-drink-form .remove-photo-choice input { width: 1.2rem; height: 1.2rem; margin: 0; }
.admin-drink-form .admin-wide { grid-column: 1 / -1; }
.admin-drink-form textarea { min-height: 3.5rem; resize: vertical; }
.admin-size-new { margin-top: 0.75rem; }

.admin-round-feed { margin: 0; padding: 0; list-style: none; }
.admin-round-feed > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.admin-round-feed > li + li { border-top: 1px solid var(--border); }
.admin-round-number { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.admin-round-text { min-width: 0; display: grid; gap: 0; }
.admin-round-text small { color: var(--muted); font-size: var(--text-sm); }
.admin-round-edit { min-height: var(--control); padding: 0.25rem 1rem; }
.admin-row-text small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Statuses are stored lowercase; inline-block lets ::first-letter capitalise them. */
.admin-pill { display: inline-block; line-height: 1.4rem; }
.admin-pill::first-letter { text-transform: uppercase; }

/* Admin person page: one profile card with every stat in one even row. */
.admin-profile-card { display: grid; gap: 1rem; margin-bottom: 1rem; padding: 1rem; }
.admin-profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.admin-profile-head > .avatar { flex: 0 0 auto; width: 4.5rem; height: 4.5rem; }
.admin-profile-name { flex: 1 1 10rem; min-width: 0; display: grid; gap: 0.25rem; }
.admin-profile-name h1 { margin: 0; font-size: var(--text-xl); line-height: 1.1; }
.admin-profile-name p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.admin-profile-head .admin-bar-actions { margin-left: auto; }
.admin-profile-card [role="alert"] { margin: 0; }
.admin-profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 0.5rem; }
.admin-profile-stats > div { display: grid; gap: 0; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--bg); }
.admin-profile-stats strong { display: flex; align-items: center; gap: 0.25rem; font-size: var(--text-lg); line-height: 1.2; overflow-wrap: anywhere; }
.admin-profile-stats span { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-medium); }
/* Related records stack into columns without gaps beside shorter sections. */
/* Columns drop the last item's bottom margin unless items are inline-blocks, so they are. */
.admin-sections { display: block; columns: 2 22rem; column-gap: 1rem; margin-bottom: 0; }
.admin-sections > * { display: inline-block; width: 100%; break-inside: avoid; margin-bottom: 1rem; vertical-align: top; }
.admin-sections > details.admin-section, .admin-sections > details.admin-section[open] { margin: 0 0 1rem; }
details.admin-fields, details.admin-fields[open] { margin: 0 0 1rem; }
.admin-fields dl { margin: 0.75rem 1rem 1rem; }
@media (max-width: 36rem) { .admin-profile-head .admin-bar-actions { width: 100%; margin-left: 0; } }

/* A session the viewer can't see: a blurred stand-in behind who to follow for access. */
.locked-session { position: relative; display: grid; min-height: 32rem; margin-block: 1rem 2rem; }
.locked-preview { grid-area: 1 / 1; filter: blur(7px) saturate(0.8); opacity: 0.75; pointer-events: none; user-select: none; overflow: hidden; }
.locked-preview { display: grid; gap: 1rem; align-content: start; }
.locked-preview .session-card { margin: 0; }
@media (max-width: 36rem) { .locked-card { align-self: start; margin-top: 6rem; } }
.locked-chart { display: block; width: 100%; height: auto; margin-block: 1rem; color: var(--accent); background: var(--bg); border-radius: var(--radius-sm); }
.locked-card { grid-area: 1 / 1; align-self: center; justify-self: center; z-index: 1; width: min(100%, 24rem); display: grid; justify-items: center; gap: 0.75rem; padding: 1.5rem 1.5rem; text-align: center; }
.locked-card .avatar { width: 4.5rem; height: 4.5rem; font-size: var(--text-xl); }
.locked-card h1 { margin: 0; font-size: var(--text-xl); overflow-wrap: anywhere; }
.locked-card p { margin: 0; color: var(--muted); }
.locked-card form, .locked-card .primary-action { width: 100%; }
.locked-card form button { width: 100%; }
.locked-card small { color: var(--muted); }
.locked-card .locked-status { color: var(--text); font-weight: var(--weight-medium); }
.locked-secondary { color: var(--muted); }

/* Admin design page layout. */
.design-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.design-heading h1 { margin-bottom: 0.25rem; }
.design-theme { display: flex; gap: 0.25rem; }
.design-toc { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-block: 1rem 0; }
.design-toc a { min-height: var(--control); display: inline-flex; align-items: center; }
.design-section { margin-block: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); scroll-margin-top: 1rem; }
.design-section > h2 { margin-top: 0; }
.design-section h3 { margin-top: 1.5rem; font-size: var(--text-md); }
.design-rules { margin: 0.75rem 0 0; padding-left: 1rem; }
.design-rules li { margin-block: 0.25rem; }
.design-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block: 1rem; }
.design-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; align-items: start; }
.design-muted { color: var(--muted); }
.design-flush { margin: 0; }
.design-card-title { margin: 0 0 0.25rem; }
.design-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.design-swatch { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); }
.design-swatch i { flex: 0 0 auto; width: 3rem; height: 3rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.design-swatch span { min-width: 0; display: grid; gap: 0; color: var(--muted); }
.design-swatch code { color: var(--text); font-weight: var(--weight-bold); }
.design-swatch small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.design-swatch[data-token="bg"] i { background: var(--bg); }
.design-swatch[data-token="surface"] i { background: var(--surface); }
.design-swatch[data-token="text"] i { background: var(--text); }
.design-swatch[data-token="muted"] i { background: var(--muted); }
.design-swatch[data-token="accent"] i { background: var(--accent); }
.design-swatch[data-token="danger"] i { background: var(--danger); }
.design-swatch[data-token="border"] i { background: var(--border); }
.design-swatch[data-token="accent-ink"] i { background: var(--accent-ink); }
.design-swatch[data-token="tint"] i { background: var(--tint); }
.design-swatch[data-token="danger-tint"] i { background: var(--danger-tint); }
.design-type > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--border); }
.design-type > div > :last-child { margin: 0; overflow-wrap: anywhere; }
.design-label { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.design-label small { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: var(--weight-regular); }
.design-breakpoints { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.design-breakpoints li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.design-breakpoints li.is-current { border-color: var(--accent); background: var(--tint); }
.design-breakpoints code { font-weight: var(--weight-bold); }
@media (max-width: 36rem) { .design-type > div { grid-template-columns: 1fr; gap: 0.25rem; } }