/* ============================================================
   Amplify Camp — design tokens
   ============================================================ */
:root {
  --sand: #F2EAD8;
  --sand2: #E8DCC0;
  --sand3: #FBF6EA;
  --pine: #0E2A22;
  --pine2: #1F4A3D;
  --pine3: #2A6151;
  --coral: #E85A2E;
  --coral-dk: #C0431D;
  --sun: #F4C542;
  --sky: #7BB7CC;
  --leaf: #DBE0C6;       /* warm sage — admin duty band */
  --ink: #0E2A22;
  --ink-soft: #3D5048;
  --ink-dim: #6A7B72;
  --white: #FFFFFF;
  --danger: #B91C1C;

  --font-display: "Bricolage Grotesque", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-pill: 999px;
  --r-card: 22px;
  --r-card-lg: 24px;
  --r-chip: 14px;
  --r-icon: 12px;
  --r-photo: 18px;
  --r-eyebrow: 4px;

  --shadow-coral-sm: 0 8px 24px rgba(232, 90, 46, 0.33);
  --shadow-coral-lg: 0 10px 30px rgba(232, 90, 46, 0.4);

  --hairline: rgba(14, 42, 34, 0.08);
  --line: rgba(14, 42, 34, 0.13);
}

/* ============================================================
   Fonts (self-hosted variable woff2, latin subset)
   ============================================================ */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-var.woff2") format("woff2-variations"),
       url("/fonts/bricolage-grotesque-var.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-var.woff2") format("woff2-variations"),
       url("/fonts/geist-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-var.woff2") format("woff2-variations"),
       url("/fonts/jetbrains-mono-var.woff2") format("woff2");
}

/* ============================================================
   Reset + base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  background: var(--sand);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app { min-height: 100%; }

/* ============================================================
   Typography scale
   ============================================================ */
.t-display-hero {
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.02; letter-spacing: -1.2px;
  font-variation-settings: "opsz" 32;
}
.t-display-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 38px; line-height: 1.0; letter-spacing: -1px;
  font-variation-settings: "opsz" 32;
}
.t-display-now {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.4px;
  font-variation-settings: "opsz" 24;
}
.t-display-card {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.1; letter-spacing: -0.4px;
  font-variation-settings: "opsz" 24;
}
.t-display-tile {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1.05; letter-spacing: -0.3px;
  font-variation-settings: "opsz" 20;
}
.t-display-item {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; line-height: 1.2; letter-spacing: -0.2px;
  font-variation-settings: "opsz" 17;
}
.t-display-section {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; line-height: 1.2;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink);
}
.t-body {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.5; font-weight: 500;
}
.t-mono-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-dim);
}
.t-mono-time {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.3px;
}

/* ============================================================
   Loading states
   ============================================================ */
.loading,
.loading-inline {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
  font-family: var(--font-body);
}
.loading { min-height: 100vh; }
.loading-inline { padding: 40px 0; }

/* ============================================================
   Screen scaffold
   ============================================================ */
.screen {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--sand);
  color: var(--ink);
}
.screen.center {
  align-items: center; justify-content: center;
  padding: 24px;
}

/* Legacy header — no-op safety net while old screens still call it. */
.app-header {
  background: transparent;
  color: var(--ink);
  padding: calc(env(safe-area-inset-top) + 6px) 16px 6px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.app-header-left {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.app-header-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.2px;
  font-variation-settings: "opsz" 18;
}
.app-header-sub {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 1.4px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icon-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(14, 42, 34, 0.06); color: var(--ink);
  border: none; border-radius: var(--r-icon);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}

.content {
  padding: 0 16px calc(env(safe-area-inset-bottom) + 28px);
  display: flex; flex-direction: column; gap: 14px;
}

/* ============================================================
   Page header (new primitive) — first child of .content
   ============================================================ */
.page-header {
  padding: calc(env(safe-area-inset-top) + 6px) 0 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.page-header-top {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px;
}
.page-header-back {
  width: 36px; height: 36px; flex-shrink: 0;
  background: rgba(14, 42, 34, 0.06); color: var(--ink);
  border: none; border-radius: var(--r-icon);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.page-header-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 1.4px; text-transform: uppercase;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-header-action {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
}
.page-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 38px; line-height: 1.0; letter-spacing: -1px;
  color: var(--ink);
  margin: 4px 0 0;
  font-variation-settings: "opsz" 32;
}

/* ============================================================
   Stacks / sections
   ============================================================ */
.stack { display: flex; flex-direction: column; gap: 14px; }
.section { display: flex; flex-direction: column; gap: 8px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--sand3); border: none;
  border-radius: var(--r-card); padding: 16px;
}
.card h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: -0.2px;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 17;
}

.muted { color: var(--ink-dim); font-size: 13px; }
.muted.spaced { margin-bottom: 10px; }
.muted.hint { margin-top: 8px; text-align: center; }

/* ============================================================
   Login
   ============================================================ */
.login-card {
  background: var(--sand3); border: none;
  border-radius: var(--r-card-lg); padding: 22px 22px 26px;
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-brand {
  display: block;
  width: 100%; max-width: 260px;
  aspect-ratio: 1;
  border-radius: var(--r-card);
  margin: 0 auto 2px;
}
/* Legacy brand row (kept in case other screens use it) */
.brand {
  display: flex; align-items: center; gap: 10px;
}
.brand-icon { width: 40px; height: 40px; }
.brand h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 26px; letter-spacing: -0.4px;
  font-variation-settings: "opsz" 24;
}
.code-input {
  font-family: var(--font-mono);
  font-size: 1.4rem; letter-spacing: 0.15em; text-align: center;
  padding: 14px;
  background: var(--sand); color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-icon);
  text-transform: uppercase; width: 100%;
}
.code-input:focus {
  outline: none; border-color: var(--coral);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: block; width: 100%;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 14px 18px;
  border-radius: var(--r-pill); border: none; cursor: pointer;
  min-height: 48px;
  text-align: center;
  color: var(--ink);
  background: var(--sand2);
}
.btn-primary {
  background: var(--coral); color: var(--sand3);
}
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-cta {
  background: var(--coral); color: var(--sand3);
  box-shadow: var(--shadow-coral-lg);
}
.btn-secondary {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-danger {
  background: var(--danger); color: var(--white);
}
.btn-ghost {
  width: auto;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line);
  padding: 8px 14px; min-height: 0;
  font-size: 13px;
}
.btn-sm {
  width: auto; padding: 9px 14px;
  min-height: 0; font-size: 13px;
}

.form-error {
  color: var(--danger);
  font-size: 13px; min-height: 1.1em;
}
.form-ok {
  color: var(--pine3);
  font-size: 13px;
}

.push-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px;
}

.notif-body {
  font-size: 13px; color: var(--ink-soft); margin-top: 4px;
  white-space: pre-wrap;
}

.radio-group {
  display: flex; flex-direction: column; gap: 6px; margin-top: 4px;
}
.radio-option {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px; cursor: pointer; font-size: 15px;
}
.radio-option input {
  width: 18px; height: 18px; flex-shrink: 0;
  accent-color: var(--coral);
}

/* ============================================================
   Home menu (legacy fallback; Phase 2 replaces with tiles)
   ============================================================ */
.menu { display: flex; flex-direction: column; gap: 10px; }
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--sand3); border: none;
  border-radius: var(--r-card); padding: 18px;
  color: var(--ink);
}
.menu-item-text { min-width: 0; }
.menu-item-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.2px;
  font-variation-settings: "opsz" 18;
}
.menu-item-desc {
  font-size: 13px; color: var(--ink-dim); margin-top: 2px;
}

/* ============================================================
   Lists / rows
   ============================================================ */
.list-header {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--ink); padding: 0 4px;
}
.list {
  background: var(--sand3); border: none;
  border-radius: var(--r-card); overflow: hidden;
}
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: transparent; border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 14px 16px;
  color: var(--ink);
}
.row:last-child { border-bottom: none; }
.row-text { min-width: 0; }
.row-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 16px; letter-spacing: -0.15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sub {
  font-size: 13px; color: var(--ink-dim); margin-top: 1px;
}
.row-arrow {
  color: var(--ink-dim);
  font-size: 18px; flex-shrink: 0;
}
.row-current { background: rgba(232, 90, 46, 0.08); }

.empty {
  text-align: center; padding: 24px;
  color: var(--ink-dim); font-size: 14px;
}
.empty-sm { padding: 4px 2px; color: var(--ink-dim); }

/* ============================================================
   Form fields
   ============================================================ */
.field {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-body); font-size: 15px;
  background: var(--sand3); color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-chip);
}
.field:focus {
  outline: none; border-color: var(--coral);
}
textarea.field { resize: vertical; line-height: 1.4; }
.duty-notify-row {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 4px;
  font-size: 15px; color: var(--ink);
  cursor: pointer;
}
.duty-notify-row input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0;
  accent-color: var(--coral); cursor: pointer;
}
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin: 14px 0 6px;
}
.field-label:first-child { margin-top: 0; }

.search {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-body); font-size: 15px;
  background: var(--sand3); color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-chip);
  margin-bottom: 8px;
}
.search:focus {
  outline: none; border-color: var(--coral);
}

.code-display {
  font-family: var(--font-mono);
  font-size: 1.6rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink); padding: 6px 0;
}

/* ============================================================
   Checklist (group member picker)
   ============================================================ */
.checklist {
  max-height: 300px; overflow-y: auto;
  background: var(--sand3);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-chip);
  padding: 0 12px;
}
.check-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer; font-size: 15px;
}
.check-row:last-child { border-bottom: none; }
.check-row input {
  width: 20px; height: 20px; flex-shrink: 0;
  accent-color: var(--coral);
}

/* ============================================================
   Schedule: now/next legacy card (Phase 2 replaces structurally)
   ============================================================ */
.card-day {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.2px;
  margin-bottom: 8px;
  font-variation-settings: "opsz" 16;
}
.nn-block { margin-top: 12px; }
.nn-block:first-of-type { margin-top: 0; }
.nn-now {
  background: var(--sand2);
  border-radius: var(--r-chip);
  padding: 12px 14px;
}
.nn-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.6px; color: var(--coral);
}
.nn-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; margin-top: 4px; letter-spacing: -0.2px;
  font-variation-settings: "opsz" 18;
}
.nn-meta {
  font-size: 13px; color: var(--ink-dim); margin-top: 2px;
}

/* ============================================================
   Schedule: items + day tabs (legacy classes)
   ============================================================ */
.sched-item {
  background: var(--sand3); border: none;
  border-radius: var(--r-chip); padding: 14px;
}
.sched-item.sched-now {
  background: var(--coral); color: var(--sand3);
  box-shadow: var(--shadow-coral-sm);
}
.sched-time {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.sched-item.sched-now .sched-time { color: var(--sand3); opacity: 0.9; }
.sched-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; letter-spacing: -0.2px; margin-top: 4px;
  font-variation-settings: "opsz" 17;
}
.sched-loc { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }
.sched-item.sched-now .sched-loc { color: var(--sand3); opacity: 0.92; }
.sched-desc { font-size: 13px; margin-top: 6px; }
.sched-badge {
  display: inline-block; margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--ink);
  background: var(--sun); border-radius: var(--r-eyebrow);
  padding: 3px 6px;
}

.sched-tabs {
  display: flex; overflow-x: auto; gap: 8px;
  padding-bottom: 2px; justify-content: flex-start;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sched-tabs::-webkit-scrollbar { display: none; }
.sched-tab {
  flex-shrink: 0; padding: 8px 16px;
  border-radius: var(--r-chip);
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.sched-tab.active {
  background: var(--pine); color: var(--sand);
  border-color: var(--pine);
}
.sched-day-section { display: flex; flex-direction: column; gap: 8px; }
.sched-day-section[hidden] { display: none; }
.sched-item.sched-past { opacity: 0.45; }

/* ============================================================
   Pills (status badges)
   ============================================================ */
.pill {
  display: inline-block; flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.8px;
  background: var(--sand2); color: var(--ink);
}
.pill-ok      { background: var(--pine3); color: var(--sand3); }
.pill-wait    { background: var(--sun);   color: var(--ink); }
.pill-coral   { background: var(--coral); color: var(--sand3); }
.pill-neutral { background: var(--sand2); color: var(--ink); }

/* ============================================================
   Roll call: summary + sheet
   ============================================================ */
.summary-ok {
  background: var(--pine); color: var(--sand3);
  border: none;
}
.summary-wait {
  background: var(--coral); color: var(--sand3);
  border: none;
  box-shadow: var(--shadow-coral-sm);
}
.summary-big {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; letter-spacing: -0.5px;
  font-variation-settings: "opsz" 28;
}
.summary-sub {
  font-size: 13px; opacity: 0.9; margin-top: 4px;
}

.sheet-head {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.3px;
  font-variation-settings: "opsz" 22;
}
.sheet-sub {
  color: var(--ink-dim); font-size: 13px; margin-top: 2px;
}
.sheet-summary {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--coral);
  text-transform: uppercase; letter-spacing: 1px;
}
.sheet-group-picker {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 4px 0;
  background: transparent; border: none; font: inherit; cursor: pointer;
  color: var(--coral);
  font-size: 14px; font-weight: 600;
}
.picker-caret { font-size: 11px; line-height: 1; }

/* Clickable group-name title on the leader sheet — looks like a
   page-title but opens the group picker. */
.sheet-title-btn {
  background: none; border: none; padding: 0;
  font: inherit; cursor: pointer;
  text-align: left; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.sheet-title-caret {
  font-size: 22px; line-height: 1;
  color: var(--coral);
}

.roll-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 14px 16px;
  background: var(--sand3); border: none;
  border-bottom: 1px solid var(--hairline);
  font: inherit; text-align: left; cursor: pointer;
  color: var(--ink);
}
.roll-row:last-child { border-bottom: none; }
.roll-row.present {
  background: var(--pine3); color: var(--sand3);
}
.roll-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 16px; letter-spacing: -0.15px;
}
.roll-status {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--sand2); color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.roll-row.present .roll-status {
  background: rgba(251, 246, 234, 0.22);
  color: var(--sand3);
}

/* ============================================================
   Modal (bottom-sheet on mobile, centered on desktop)
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(14, 42, 34, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-card {
  background: var(--sand3);
  border-radius: var(--r-card-lg) var(--r-card-lg) 0 0;
  padding: 22px 16px calc(env(safe-area-inset-bottom) + 22px);
  width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
@media (min-width: 480px) {
  .modal-backdrop { align-items: center; padding: 24px; }
  .modal-card { border-radius: var(--r-card-lg); }
}
.modal-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: -0.3px;
  font-variation-settings: "opsz" 20;
}
.modal-actions {
  display: flex; gap: 8px; margin-top: 4px;
}
.modal-actions .btn { flex: 1; width: auto; }

/* ============================================================
   Photos: gallery + moderation
   ============================================================ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 480px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
}
.photo-cell {
  display: flex; flex-direction: column;
  background: var(--sand3); border: none;
  border-radius: var(--r-photo); overflow: hidden;
}
.photo-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; display: block; cursor: pointer;
}
.photo-name {
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: uppercase; letter-spacing: 0.6px;
}

.photo-review-card {
  background: var(--sand3); border: none;
  border-radius: var(--r-photo); overflow: hidden;
  padding: 0;
}
.photo-review-img {
  width: 100%; max-height: 260px;
  object-fit: cover; display: block; cursor: pointer;
}
.photo-review-meta {
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px;
}
.photo-review-actions {
  display: flex; gap: 8px; flex-shrink: 0;
}

/* ============================================================
   Lightbox (keeps dark backdrop — it's a photo viewer)
   ============================================================ */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.lightbox-img {
  max-width: 100%; max-height: calc(100vh - 90px);
  object-fit: contain; display: block;
}
.lightbox-caption {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-body);
  font-size: 13px; margin-top: 10px; text-align: center;
  padding: 0 60px;
}
.lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  background: rgba(255, 255, 255, 0.15); border: none; color: #fff;
  font-size: 1.6rem; line-height: 1; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15); border: none; color: #fff;
  font-size: 2rem; line-height: 1; width: 44px; height: 64px;
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }

/* Leader/admin "Take down" pill, top-left, mirrors the close button. */
.lightbox-takedown {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  background: var(--danger); color: var(--white);
  border: none; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  padding: 9px 16px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}
.lightbox-takedown:active { transform: scale(0.96); }
/* Transient error toast inside the lightbox (it has no status line). */
.lightbox-toast {
  position: absolute; left: 50%; bottom: 96px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 13px;
  padding: 10px 18px; max-width: 80%; text-align: center;
}

/* Lightbox like row: heart toggle + tappable "N likes" caption. Sits below
   the uploader caption. Heart turns coral when liked. */
.lightbox-likes {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px; padding: 0 60px;
}
.lightbox-heart {
  background: rgba(255, 255, 255, 0.12); border: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-heart:active { transform: scale(0.92); }
.lightbox-heart svg { width: 20px; height: 20px; display: block; }
.lightbox-heart-on { background: var(--coral); color: #fff; }
.lightbox-like-count {
  background: none; border: none; padding: 4px 0;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body); font-size: 13px;
  cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-like-count:disabled {
  color: rgba(255, 255, 255, 0.45);
  cursor: default;
}

/* Likers bottom sheet: one row per person, name on left, role on right. */
.likers-list {
  display: flex; flex-direction: column;
  max-height: 50vh; overflow-y: auto;
}
.likers-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.likers-row:last-child { border-bottom: none; }
.likers-name { color: var(--ink); font-weight: 500; }
.likers-role {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.8px;
}

/* ============================================================
   Tournaments: team rows + bracket
   ============================================================ */
.team-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  padding: 14px 16px;
}
.team-row:last-child { border-bottom: none; }
.team-row-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}

.bracket-section { gap: 12px; }
.bracket-round {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 6px;
}
.bracket-round-label {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--ink); padding: 4px 2px 0;
}

/* Round tabs — same scroll-strip behaviour as .day-tabs but single-line. */
.round-tabs {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 4px;
  margin: 0 -16px;
}
.round-tabs::-webkit-scrollbar { display: none; }
.round-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-chip);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.round-tab-active {
  background: var(--pine); color: var(--sand);
  border-color: var(--pine);
}

/* Collapsible section header (used by the teams list on tournament detail). */
button.collapse-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%;
  background: transparent; border: none; cursor: pointer;
  text-align: left;
  /* Inherit .list-header typography; reset just the button defaults. */
}
.collapse-toggle-label { flex: 1 1 auto; min-width: 0; }
.collapse-toggle-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease;
  color: var(--ink);
}
.collapse-toggle.collapse-open .collapse-toggle-chevron {
  transform: rotate(90deg);
}
.collapse-body { padding-top: 8px; }

/* Pending-invites list inside myTeamCard. */
.pending-invites {
  margin-top: 14px;
  background: var(--sand2);
  border-radius: var(--r-chip);
  padding: 10px 12px;
}
.pending-invites-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.pending-invite-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
}
.pending-invite-row:last-child { border-bottom: none; }
.pending-invite-name {
  font-weight: 500; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Invite picker — looks like the regular .list but each row is a button
   with a coral "Invite" pill on the right that flips to "Invited".
   Bounded scroll so the modal title + Done button stay visible when the
   roster is long (camp has ~150 students). */
.invite-picker {
  margin-top: 4px;
  max-height: 55vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.invite-picker-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; cursor: pointer;
}
.invite-picker-row[disabled] { cursor: default; opacity: 0.6; }
.invite-picker-sent { opacity: 0.65; }
.invite-send {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.invite-picker-sent .invite-send {
  background: var(--pine3); color: var(--sand3);
}

/* You-have-an-invite card sits in the same slot as createTeamCard. */
.invite-card h2 { margin-bottom: 4px; }

.match-card {
  background: var(--sand3); border: none;
  border-radius: var(--r-chip); overflow: hidden;
  display: flex; flex-direction: column;
}
.match-card > .btn-sm {
  margin: 8px 10px 10px; width: auto;
}
.match-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--sand2);
  border-bottom: 1px solid var(--hairline);
}
.match-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.8px;
}

.slot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 44px; padding: 10px 14px;
  background: transparent; border: none;
  border-bottom: 1px solid var(--hairline);
  font: inherit; text-align: left; width: 100%;
  color: var(--ink);
}
.slot-row:last-child { border-bottom: none; }
button.slot-row { cursor: pointer; }
.slot-name {
  font-weight: 600; font-size: 15px;
}
.slot-empty .slot-name {
  color: var(--ink-dim); font-style: italic; font-weight: 500;
}
.slot-advanced { background: var(--pine3); color: var(--sand3); }
.slot-advanced .slot-name { color: var(--sand3); }
.slot-eliminated .slot-name {
  color: var(--ink-dim); text-decoration: line-through;
}
.slot-selected {
  background: rgba(232, 90, 46, 0.08);
  outline: 1.5px solid var(--coral); outline-offset: -1.5px;
}
.slot-selected .slot-name { color: var(--ink); }

.slot-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--sand2); color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.tag-adv {
  background: rgba(251, 246, 234, 0.25); color: var(--sand3);
}
.tag-elim {
  background: rgba(14, 42, 34, 0.08); color: var(--ink-dim);
}

.swap-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(232, 90, 46, 0.08);
  outline: 1.5px solid var(--coral); outline-offset: -1.5px;
}
.swap-banner p { font-size: 13px; }

.mark-slot {
  text-align: center; font-size: 15px;
}

/* ============================================================
   Champions card
   ============================================================ */
.champion-card {
  background: var(--coral); color: var(--sand3);
  border: none; text-align: center;
  box-shadow: var(--shadow-coral-sm);
}
.champion-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.4px;
  opacity: 0.85;
}
.champion-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; margin-top: 6px; letter-spacing: -0.5px;
  font-variation-settings: "opsz" 28;
}
.champion-members {
  font-size: 14px; margin-top: 4px; opacity: 0.92;
}

.champions-home h2 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: -0.3px;
  margin-bottom: 8px;
  font-variation-settings: "opsz" 20;
}
.champions-home h2 svg { width: 22px; height: 22px; flex-shrink: 0; }
.champ-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.champ-row:last-child { border-bottom: none; padding-bottom: 0; }
.champ-row:first-of-type { padding-top: 8px; }
.champ-tournament {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 1.4px;
}
.champ-team {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; margin-top: 3px; letter-spacing: -0.2px;
  font-variation-settings: "opsz" 17;
}
.champ-members {
  font-size: 13px; color: var(--ink-dim); margin-top: 2px;
}

/* ============================================================
   Utility
   ============================================================ */
.btn-link {
  background: none; border: none; padding: 0;
  color: var(--coral); font-size: 13px;
  cursor: pointer; text-decoration: underline; font: inherit;
}
.spacer { height: 10px; }
.signout-link {
  display: block; margin: 32px auto 8px;
  background: none; border: none;
  color: var(--ink-dim); font-size: 13px;
  font-family: var(--font-body);
  text-decoration: underline; cursor: pointer;
  padding: 8px 16px;
}

/* ============================================================
   Phase 2: Greeting (home)
   ============================================================ */
.greeting {
  padding: calc(env(safe-area-inset-top) + 6px) 4px 6px;
}
.greeting-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 6px;
}
.greeting-headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.02; letter-spacing: -1.2px;
  color: var(--ink); margin: 0;
  font-variation-settings: "opsz" 32;
}
.greeting-name { color: var(--coral); }

/* ============================================================
   Phase 2: Tile grid (action tiles on home)
   ============================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tile {
  display: flex; flex-direction: column;
  width: 100%; min-height: 132px;
  padding: 16px 16px 18px;
  background: var(--sand3); color: var(--ink);
  border: none; border-radius: var(--r-card);
  text-align: left; cursor: pointer;
  font-family: var(--font-body);
  position: relative; overflow: hidden;
}
.tile-span-2 { grid-column: span 2; min-height: 110px; }
.tile-icon { margin-bottom: auto; line-height: 0; }
.tile-label {
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1.05; letter-spacing: -0.3px;
  font-variation-settings: "opsz" 20;
}
.tile-sub {
  font-size: 12px; margin-top: 4px;
  color: var(--ink-dim);
}
.tile-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--coral); color: var(--sand3);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 10px;
  letter-spacing: 0.4px;
}
.tile-sand  { background: var(--sand3); color: var(--ink); }
.tile-sand  .tile-sub { color: var(--ink-dim); }
.tile-coral { background: var(--coral); color: var(--sand3); }
.tile-coral .tile-sub { color: var(--sand2); }
.tile-sun   { background: var(--sun);   color: var(--ink); }
.tile-sun   .tile-sub { color: var(--ink-soft); }
.tile-pine  { background: var(--pine2); color: var(--sand3); }
.tile-pine  .tile-sub { color: var(--sand2); }
.tile-sky   { background: var(--sky);   color: var(--ink); }
.tile-sky   .tile-sub { color: var(--ink-soft); }

/* ============================================================
   Phase 2: Now/Next stacked card (dark pine, design signature)
   ============================================================ */
.nn-card {
  background: var(--pine); color: var(--sand3);
  border-radius: var(--r-card-lg);
  padding: 18px 18px 4px;
  overflow: hidden; position: relative;
}
.nn-card-empty {
  padding: 22px;
}
.nn-card-tappable {
  cursor: pointer; padding-right: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.nn-card-tappable:active { transform: scale(0.992); }
.nn-card-go {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  display: flex; opacity: 0.6; pointer-events: none;
}
.nn-card-go svg { width: 22px; height: 22px; display: block; }
.nn-row {
  display: flex; gap: 12px; margin-bottom: 14px;
}
.nn-row:last-child { margin-bottom: 14px; }
.nn-rail {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
.nn-rail-now { padding-top: 6px; }
.nn-dot-now {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(232, 90, 46, 0.2);
}
.nn-rail-line {
  flex: 1; width: 2px;
  background: rgba(242, 234, 216, 0.13);
  margin-top: 4px;
}
.nn-dot-next {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(242, 234, 216, 0.4);
  margin-top: 7px;
}
.nn-text { flex: 1; padding-bottom: 18px; }
.nn-divider { border-bottom: 1px solid rgba(242, 234, 216, 0.1); }
.nn-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sand2); margin-bottom: 4px;
}
.nn-eyebrow-now {
  font-weight: 600; color: var(--coral);
  letter-spacing: 1.6px; margin-bottom: 6px;
}
.nn-title-now {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.4px;
  font-variation-settings: "opsz" 24;
}
.nn-title-next {
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; line-height: 1.15; letter-spacing: -0.2px;
  font-variation-settings: "opsz" 18;
}
.nn-meta {
  font-family: var(--font-body);
  font-size: 13px; margin-top: 6px;
  color: var(--sand2);
  display: flex; align-items: center; gap: 5px;
}
.nn-meta-next {
  color: var(--sand2); font-weight: 400;
}

/* ============================================================
   Phase 2: Look-ahead list
   ============================================================ */
.lookahead { padding: 12px 0 0; }
.lookahead-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 10px;
}
.lookahead-rows { display: flex; flex-direction: column; }
.lookahead-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.lookahead-row-last { border-bottom: none; }
.lookahead-time {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-dim);
  width: 72px; flex-shrink: 0; letter-spacing: 0.3px;
}
.lookahead-name {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500; color: var(--ink);
}

/* ============================================================
   Phase 2: Floating CTA
   ============================================================ */
.fcta-wrap {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  left: 16px; right: 16px;
  z-index: 100;
  pointer-events: none;
}
.fcta-wrap > * { pointer-events: auto; }
.fcta-btn {
  width: 100%;
  background: var(--coral); color: var(--sand3);
  border: none; border-radius: var(--r-pill);
  padding: 16px 20px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow-coral-lg);
}
/* "Quota exhausted" treatment for the student daily upload limit.
   Stays clickable so we can show a helpful error on tap rather than
   inertly ignoring it. */
.fcta-btn-at-limit {
  background: var(--sand2);
  color: var(--ink-dim);
  box-shadow: none;
  cursor: not-allowed;
}
.fcta-disclaimer {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--ink-dim);
  text-align: center; margin-top: 10px;
  letter-spacing: 0.4px;
}
.has-fcta-spacer { height: 110px; flex-shrink: 0; }

/* Segmented control (mode picker on notification compose) */
.segmented {
  display: flex; gap: 6px;
  margin: 4px 0 4px;
}
.segmented .chip {
  flex: 1; justify-content: center;
  padding: 9px 10px;
}

/* Mono inline login-code badge (people row sub) */
.row-sub-code {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ============================================================
   Sign-in activity summary
   ============================================================ */
.activity-card { margin-bottom: 16px; }
.activity-stat { display: flex; align-items: baseline; gap: 6px; }
.activity-stat-num {
  font-family: var(--font-display);
  font-size: 40px; line-height: 1;
  color: var(--coral);
}
.activity-stat-of { font-size: 15px; color: var(--ink-soft); }
.activity-bar {
  height: 10px; border-radius: var(--r-pill);
  background: var(--sand2); overflow: hidden;
  margin-top: 12px;
}
.activity-bar-fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--coral);
  transition: width 0.4s ease;
}

/* ============================================================
   Phase 2: Filter chips
   ============================================================ */
.chip-row {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 4px;
  margin: 0 -16px;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.chip-active {
  background: var(--pine); color: var(--sand);
  border-color: var(--pine);
}
.chip-count {
  font-family: var(--font-mono);
  font-size: 10px; opacity: 0.6;
}
.chip-active .chip-count { opacity: 0.75; }

/* ============================================================
   Phase 2: Day tabs (schedule)
   ============================================================ */
.day-tabs {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 4px;
  margin: 0 -16px;
}
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  flex: 0 0 auto; min-width: 56px;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 8px 14px;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-chip);
  cursor: pointer;
  font-family: var(--font-body);
}
.day-tab-active {
  background: var(--pine); color: var(--sand);
  border-color: var(--pine);
}
.day-tab-label {
  font-size: 11px; font-weight: 500;
  opacity: 0.75; text-transform: uppercase;
  letter-spacing: 0.6px;
}
.day-tab-active .day-tab-label { opacity: 0.85; }
.day-tab-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; letter-spacing: -0.1px;
  font-variation-settings: "opsz" 15;
}

/* ============================================================
   Phase 2: Schedule timeline (78px | 1fr grid + rail + dots)
   ============================================================ */
.timeline { padding: 4px 0 24px; }
.timeline-part {
  display: grid; grid-template-columns: 78px 1fr;
  padding-top: 18px; padding-bottom: 6px;
}
.timeline-part-label {
  padding-left: 22px;
  display: flex; align-items: baseline; gap: 10px;
  grid-column: 2;
}
.timeline-part-label-text {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink);
}
.timeline-part-count {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--ink-dim); font-weight: 500;
  letter-spacing: 0.5px;
}
.timeline-row {
  display: grid; grid-template-columns: 78px 1fr;
  position: relative;
}
.timeline-row-past { opacity: 0.45; }
.timeline-time {
  padding-top: 14px; padding-right: 14px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  color: var(--ink); letter-spacing: 0.3px;
  text-align: right;
}
.timeline-row-now .timeline-time { padding-top: 18px; }
.timeline-row-past .timeline-time-start { text-decoration: line-through; }
.timeline-time-end {
  opacity: 0.5; font-size: 10px; margin-top: 2px;
}
.timeline-event {
  position: relative; padding-left: 22px;
}
.timeline-rail {
  position: absolute; left: 5px; top: 0; bottom: 0;
  width: 2px;
  background: rgba(14, 42, 34, 0.12);
}
.timeline-rail-last { bottom: 50%; }
.timeline-dot {
  position: absolute; left: 0; top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
}
.timeline-row-now .timeline-dot {
  top: 22px;
  background: var(--coral);
  box-shadow: 0 0 0 5px rgba(232, 90, 46, 0.2);
}
.timeline-dot-worship  { background: var(--pine2); }
.timeline-dot-meal     { background: var(--coral); }
.timeline-dot-activity { background: var(--sun); }
.timeline-dot-chore    { background: var(--ink-dim); }
.timeline-dot-free     { background: var(--sky); }
.timeline-dot-staff    { background: var(--ink-dim); }
.timeline-card-now {
  background: var(--coral); color: var(--sand3);
  padding: 14px 16px 16px;
  border: none; border-radius: 18px; margin-bottom: 16px;
  box-shadow: var(--shadow-coral-sm);
  cursor: pointer;
  width: 100%; text-align: left;
  font-family: var(--font-body);
}
.timeline-eyebrow-now {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase;
  opacity: 0.85; margin-bottom: 6px;
}
.timeline-title-now {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.1; letter-spacing: -0.4px;
  font-variation-settings: "opsz" 24;
}
.timeline-loc-now {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  margin-top: 8px;
  display: flex; align-items: center; gap: 5px;
  opacity: 0.95;
}
.timeline-row-regular {
  background: transparent; border: none;
  padding: 14px 14px 16px;
  margin-bottom: 0;
  cursor: pointer;
  width: 100%; text-align: left;
  font-family: var(--font-body); color: var(--ink);
}
.timeline-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; line-height: 1.2; letter-spacing: -0.2px;
  color: var(--ink);
  font-variation-settings: "opsz" 17;
  display: flex; align-items: center; gap: 8px;
}
.timeline-up-next {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  background: var(--sun); color: var(--ink);
  padding: 3px 6px; border-radius: 4px;
  flex-shrink: 0;
}
.timeline-check { margin-left: auto; flex-shrink: 0; line-height: 0; }
.timeline-loc {
  font-family: var(--font-body);
  font-size: 12px; color: var(--ink-dim);
  margin-top: 3px;
  display: flex; align-items: center; gap: 4px;
}

/* ============================================================
   Phase 2: Photo masonry (replaces .photo-grid for the gallery)
   ============================================================ */
.photo-masonry {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.photo-masonry-col {
  display: flex; flex-direction: column; gap: 8px;
}
.photo-card {
  position: relative;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--sand2);
  cursor: pointer;
  line-height: 0;
}
.photo-card-img {
  width: 100%; display: block;
}
.photo-time-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(14, 42, 34, 0.55);
  color: var(--sand3);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 500; line-height: 1.2;
  padding: 3px 6px; border-radius: 6px;
  letter-spacing: 0.4px;
}

/* Heart pill: bottom-left overlay on a photo card. Tap to toggle like.
   Default state is a translucent dark pill with a white outline heart;
   the .heart-pill-on modifier paints it coral with a filled heart. */
.heart-pill {
  position: absolute; bottom: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(14, 42, 34, 0.55);
  color: var(--sand3);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: none; cursor: pointer;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  line-height: 1; letter-spacing: 0.4px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.heart-pill:active { transform: scale(0.94); }
.heart-pill-icon { display: inline-flex; line-height: 0; }
.heart-pill-icon svg { width: 14px; height: 14px; display: block; }
.heart-pill-count { line-height: 1; }
.heart-pill-on {
  background: var(--coral);
  color: #fff;
}

/* Pending overlay: dims the thumb and shows an "Awaiting approval" label
   over the image. Only the submitter sees their own pending photos. */
.photo-card-pending { cursor: pointer; }
.photo-card-pending .photo-card-img {
  filter: grayscale(0.3) brightness(0.55);
}
.photo-pending-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.photo-pending-label {
  background: rgba(14, 42, 34, 0.78);
  color: var(--sand3);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}

/* Invisible sentinel below the masonry — IntersectionObserver watches
   this to trigger load-more. Reserves a hair of vertical space so it
   actually counts as in-viewport. */
.photo-load-sentinel {
  height: 1px;
  width: 100%;
}

/* "N new photos · tap" pill that drops in when polling finds uploads.
   Fixed near the top so it stays visible even when the user has
   scrolled deep into the gallery. The wrap is pointer-events:none
   so only the button itself catches taps — the rest of the screen
   keeps responding under it. */
.photo-new-pill-wrap {
  position: fixed;
  top: 16px; left: 0; right: 0;
  display: flex; justify-content: center;
  z-index: 90;
  pointer-events: none;
}
.photo-new-pill {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--coral); color: #fff;
  border: none; cursor: pointer;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-coral-lg);
  -webkit-tap-highlight-color: transparent;
  animation: photoNewPillDrop 0.4s cubic-bezier(0.2, 0.7, 0.4, 1);
}
.photo-new-pill svg { display: block; }
@keyframes photoNewPillDrop {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Home-screen action banners — coral, prominent, tap-to-act.
   Used for the leader roll-call banner and the tournament-invite
   banner; styles are shared so both look like the same family.
   ============================================================ */
.rollcall-banner,
.invite-banner {
  width: 100%;
  background: var(--coral); color: var(--sand3);
  border: none; border-radius: var(--r-card);
  padding: 16px 18px;
  cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-body);
  box-shadow: var(--shadow-coral-sm);
}
.rollcall-banner-icon,
.invite-banner-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(251, 246, 234, 0.13);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rollcall-banner-body,
.invite-banner-body { flex: 1; min-width: 0; }
.rollcall-banner-eyebrow,
.invite-banner-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  opacity: 0.85; margin-bottom: 3px;
}
.rollcall-banner-title,
.invite-banner-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1.05; letter-spacing: -0.3px;
  font-variation-settings: "opsz" 20;
}
.rollcall-banner-sub,
.invite-banner-sub {
  font-size: 12px; opacity: 0.9; margin-top: 2px;
}
/* Multiple pending invites stack with a gap. */
.invite-banner-stack {
  display: flex; flex-direction: column; gap: 10px;
}

/* ============================================================
   Roll Call: bucketed lists (Current / Upcoming / Past)
   ============================================================ */
/* Upcoming rolls are reference info — visible, but visually quieter
   than the current sheets. We desaturate the row container and bump
   the type color down a notch. */
.section-upcoming .list {
  background: var(--sand2);
}
.section-upcoming .row-title { color: var(--ink-soft); }
.section-upcoming .row-sub  { color: var(--ink-dim); }

/* ============================================================
   Phase 2: Push prompt as sand banner
   ============================================================ */
.push-banner {
  background: var(--sand2); color: var(--ink-soft);
  border: none; border-radius: var(--r-card);
  padding: 16px 18px;
}
.push-banner p { font-size: 14px; }
.push-banner .push-actions { margin-top: 12px; }

/* ============================================================
   Phase 2: Bottom-sheet event details
   ============================================================ */
.event-sheet-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: var(--coral);
  letter-spacing: 1.6px; text-transform: uppercase;
  margin-bottom: 6px;
}
.event-sheet-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.4px;
  color: var(--ink);
  font-variation-settings: "opsz" 24;
}
.event-sheet-loc {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink-soft); margin-top: 8px;
  display: flex; align-items: center; gap: 6px;
}
.event-sheet-desc {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink); line-height: 1.5; margin-top: 12px;
  white-space: pre-wrap;
}
.event-sheet-badge {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--sand2); color: var(--ink);
  padding: 4px 8px; border-radius: var(--r-eyebrow);
}

/* ============================================================
   Leader duties — table column + visual treatment
   - Home page "Your duties today" list
   - Timeline "FOR YOU" eyebrow + coral left accent for my duty
   - "STEPHEN" name-tag on other leaders' duties in the timeline
   - Quick-duty form (admin) + day-grid editor (admin)
   ============================================================ */

/* Page-header action group: pairs "+ Duty" + "+ New" buttons compactly. */
.hdr-action-group {
  display: flex; gap: 6px; align-items: center;
}

/* Sunny secondary button — used for the "+ Duty" shortcut so it reads as
   a distinct affordance next to the coral "+ New". */
.btn-sun {
  background: var(--sun); color: var(--ink);
  width: auto; padding: 9px 14px;
  min-height: 0; font-size: 13px;
  font-weight: 600; font-family: var(--font-body);
  border: none; border-radius: var(--r-pill, 999px);
  cursor: pointer;
}
.btn-sun:hover { background: #ECB930; }

/* Small inline hint under a label, e.g. "Assigning auto-shares with leaders". */
.field-hint {
  font-size: 12px; color: var(--ink-dim);
  margin: -6px 0 10px;
}

/* Inline field variants for compact picker rows in the day-grid editor. */
.field-inline {
  width: auto; max-width: 220px; display: inline-block;
}

/* ---- Schedule page: mode segmented control ---- */
.sched-mode { margin: 8px 0 14px; }

/* ---- Home: "Your duties today" list ---- */
.my-duties {
  margin: 14px 0 6px;
}
.my-duties-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.my-duties-list {
  background: var(--sand3);
  border-radius: var(--r-card);
  overflow: hidden;
}
.my-duties-row {
  display: grid;
  grid-template-columns: 44px 78px 1fr;
  align-items: center; gap: 10px;
  background: transparent; border: none;
  width: 100%; padding: 10px 14px 10px 6px;
  text-align: left; cursor: pointer;
  border-bottom: 1px solid rgba(14, 42, 34, 0.06);
}
.my-duties-row:last-child { border-bottom: none; }
.my-duties-row:hover { background: rgba(14, 42, 34, 0.02); }
.my-duties-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--coral);
  background: var(--sand3);
  color: var(--sand3);
  font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; user-select: none;
  margin-left: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.my-duties-check:hover { background: rgba(232, 90, 46, 0.08); }
.my-duties-check-done {
  background: var(--pine3);
  border-color: var(--pine3);
  color: var(--sand3);
}
.my-duties-time {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: 0.5px;
  text-align: right;
}
.my-duties-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
}
.my-duties-row-done .my-duties-title {
  text-decoration: line-through;
  text-decoration-color: rgba(14, 42, 34, 0.4);
  color: var(--ink-dim);
}
.my-duties-row-done .my-duties-with,
.my-duties-row-done .my-duties-time { opacity: 0.55; }
/* Drop-down toggle that lives at the bottom of the my-duties card when
   the user has more than 3 duties for the day.  Sits inside the list
   card so it reads as part of the same surface. */
.my-duties-more {
  display: block; width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 12px 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--coral);
  border-top: 1px solid rgba(14, 42, 34, 0.06);
}
.my-duties-more:hover { background: rgba(232, 90, 46, 0.06); }

/* ---- Timeline: "FOR YOU" eyebrow + my-duty card accent ---- */
.timeline-row-mine .timeline-row-regular {
  background: rgba(232, 90, 46, 0.06);
  border-left: 4px solid var(--coral);
  border-radius: 10px;
  padding: 10px 12px 10px 12px;
}
.timeline-eyebrow-mine {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 4px;
}

/* "— Stephen" leader-name suffix on duty rows in the timeline.  Visible to
   all leaders (and admins) so it's immediately clear whose duty it is —
   surfaces on the user's own duties too, alongside the "FOR YOU" eyebrow. */
.timeline-duty-leader {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 0;
}

/* Other people's duties (admin-only after the server filter): smaller and
   dimmer than a camp-wide event so chores don't crowd out the schedule's
   real pulse.  Title shrinks 17→14, the row itself fades to 75%. */
.timeline-row-other-duty .timeline-row-regular {
  padding: 6px 12px 8px;
  opacity: 0.75;
}
.timeline-row-other-duty .timeline-title {
  font-size: 14px;
  font-variation-settings: "opsz" 14;
  color: var(--ink-dim);
}
.timeline-row-other-duty .timeline-duty-leader {
  font-size: 12px;
}
.timeline-row-other-duty .timeline-loc { font-size: 11px; }
.timeline-row-other-duty .timeline-time { padding-top: 8px; }
.timeline-row-other-duty .timeline-dot { top: 12px; }

/* Admin-only: every duty on the timeline renders as a compact dark band
   so the schedule reads as "who's doing what" at a glance.  Leader names
   become small mono-uppercase pills; title sits beside them on one line.
   The admin's own duties get a coral inset border so they're still easy
   to spot among the others without breaking the compact pattern. */
.timeline-row-admin-duty .timeline-row-regular {
  background: var(--leaf);
  color: var(--ink);
  border-radius: 10px;
  padding: 6px 10px 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.timeline-row-admin-duty .timeline-title {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  font-variation-settings: normal;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1; min-width: 0;
}
.timeline-row-admin-duty .timeline-duty-leader {
  display: inline-block;
  background: rgba(31, 74, 61, 0.12);
  color: var(--pine2);
  padding: 2px 6px;
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.timeline-row-admin-duty .timeline-time {
  padding-top: 4px;
}
.timeline-row-admin-duty .timeline-time-start {
  font-size: 10px;
  color: var(--ink-dim);
}
.timeline-row-admin-duty .timeline-dot {
  background: var(--pine3);
  width: 8px; height: 8px;
  top: 12px;
}
.timeline-row-admin-duty .timeline-up-next {
  background: var(--sun);
  color: var(--ink);
  font-size: 9px;
  padding: 2px 5px;
}
.timeline-row-admin-duty .timeline-check-admin {
  color: var(--pine2);
  font-weight: 700;
  font-size: 12px;
  margin-left: auto;
}
.timeline-row-admin-mine .timeline-row-regular {
  box-shadow: inset 4px 0 0 var(--coral);
  padding-left: 16px;
}

/* Admin "duty stack": several duties at one time share a single sage bar.
   Sub-rows sit inside with a hairline divider so it reads as one connected
   bar going across, with the time shown once. */
.timeline-row-admin-group .admin-duty-group {
  background: var(--leaf);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
.admin-duty-sub {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 10px;
}
.admin-duty-sub + .admin-duty-sub {
  border-top: 1px solid rgba(14, 42, 34, 0.10);
}
.admin-duty-sub-title {
  font-size: 13px;
  font-weight: 500;
}
.admin-duty-sub-mine {
  box-shadow: inset 3px 0 0 var(--coral);
}
.admin-duty-sub-done { opacity: 0.72; }
.admin-duty-sub-past { opacity: 0.5; }
.admin-duty-sub-done .admin-duty-sub-title {
  text-decoration: line-through;
  text-decoration-color: rgba(14, 42, 34, 0.40);
  color: rgba(14, 42, 34, 0.55);
}
.timeline-row-admin-group .timeline-check-admin { margin-left: auto; }

/* Done state on the admin compact band: dimmed band + struck-through
   title.  Overrides the generic .timeline-row-duty-done rules which
   target the light-card variant. */
.timeline-row-admin-duty.timeline-row-duty-done .timeline-row-regular {
  opacity: 0.62;
}
.timeline-row-admin-duty.timeline-row-duty-done .timeline-title {
  text-decoration: line-through;
  text-decoration-color: rgba(14, 42, 34, 0.40);
  color: rgba(14, 42, 34, 0.55);
}
.timeline-row-admin-duty.timeline-row-duty-done .timeline-duty-leader {
  opacity: 0.65;
}

/* Event sheet (bottom drawer) — assigned-to row. */
.event-sheet-assignee {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--ink-dim);
}
.event-sheet-assignee-mine { color: var(--coral); }

/* ---- Quick-duty form ---- */
.duty-quick-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.duty-quick-field { display: flex; flex-direction: column; }
.duty-form-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
}
.duty-toast {
  position: sticky; top: 12px;
  background: var(--pine); color: var(--sand3);
  padding: 10px 14px; border-radius: var(--r-pill, 999px);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(14, 42, 34, 0.15);
  z-index: 5;
}
.duty-toast[hidden] { display: none; }

/* Datalist-backed assignee picker.  Visually identical to a regular .field
   input — the wrap is just a positioning container in case we ever need
   to overlay a custom dropdown. */
.duty-assignee-slot { display: block; }
.duty-assignee-field { display: block; }

/* ---- Day-grid duty editor ---- */
.duty-grid-pickers {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.duty-pick { display: flex; flex-direction: column; gap: 4px; }
.duty-grid-status { padding: 8px 0; }
.duty-grid-empty-note {
  margin: 0 0 12px; font-style: italic;
}
.duty-grid {
  background: var(--sand3);
  border-radius: var(--r-card);
  overflow: hidden;
}
.duty-grid-slot {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px;
  align-items: start;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(14, 42, 34, 0.06);
}
.duty-grid-slot:last-child { border-bottom: none; }
.duty-grid-time {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: 0.5px; text-align: right;
  padding-top: 8px;
}
.duty-grid-right {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}

/* Existing schedule item (non-duty) rendered inside a grid slot. */
.duty-grid-event {
  display: flex; align-items: center; gap: 8px;
  background: var(--sand2);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.duty-grid-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.duty-grid-event-title { flex: 1; min-width: 0; }
.duty-grid-event-end {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: var(--ink-dim);
}

/* Existing duty (already saved) rendered inside its slot. */
.duty-grid-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(232, 90, 46, 0.10);
  border-left: 3px solid var(--coral);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
.duty-grid-chip-name {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  background: var(--coral); color: var(--sand3);
  padding: 2px 6px; border-radius: var(--r-chip);
}
.duty-grid-chip-title {
  font-family: var(--font-body);
  font-weight: 500; color: var(--ink);
  flex: 1; min-width: 0;
}
.duty-grid-chip-check {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--pine3); font-weight: 700;
}
.duty-grid-chip-saved { background: rgba(46, 125, 50, 0.10); border-left-color: var(--pine3); }
.duty-grid-chip-saved .duty-grid-chip-name { background: var(--pine3); }

/* Inline editor row (empty slot, or "+ Add" pressed). */
.duty-grid-editor-holder { display: flex; flex-direction: column; gap: 6px; }
.duty-grid-add {
  background: transparent;
  color: var(--coral);
  border: 1px dashed rgba(232, 90, 46, 0.45);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
}
.duty-grid-add:hover {
  background: rgba(232, 90, 46, 0.05);
  border-style: solid;
}
.duty-grid-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto 36px;
  gap: 6px;
  align-items: stretch;
}
.duty-grid-editor-name { min-width: 0; }
.duty-grid-editor-name .field { width: 100%; }
.duty-grid-title {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white, #fff);
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink);
}
.duty-grid-editor-name input.field {
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; min-height: 0;
}
.duty-grid-save {
  background: var(--coral); color: var(--sand3);
  border: none; border-radius: 8px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.duty-grid-save:disabled { opacity: 0.5; cursor: wait; }
.duty-grid-err {
  grid-column: 1 / -1;
  font-size: 11px; color: var(--danger);
  min-height: 0;
}
.duty-grid-err:empty { display: none; }
.duty-grid-editor-notify {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; cursor: pointer;
}
.duty-grid-editor-notify input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--coral); cursor: pointer;
}

/* ---- Duty completion: done state across timeline + day grid + event sheet ---- */
.timeline-row-duty-done .timeline-title {
  text-decoration: line-through;
  text-decoration-color: rgba(14, 42, 34, 0.4);
  color: var(--ink-dim);
}
.timeline-row-duty-done .timeline-row-regular {
  opacity: 0.72;
}
.timeline-row-duty-done .timeline-duty-leader { opacity: 0.6; }

.duty-grid-chip-done {
  background: rgba(46, 125, 50, 0.10);
  border-left-color: var(--pine3);
  opacity: 0.78;
}
.duty-grid-chip-done .duty-grid-chip-name { background: var(--pine3); }
.duty-grid-chip-done .duty-grid-chip-title {
  text-decoration: line-through;
  text-decoration-color: rgba(14, 42, 34, 0.4);
}
.duty-grid-chip-done .duty-grid-chip-check {
  margin-left: auto;
  color: var(--pine3);
  font-weight: 700;
}

.event-sheet-done-line {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--pine3);
}
.event-sheet-done-line:empty { display: none; }
.event-sheet-done-tick {
  display: inline-block; margin-right: 4px;
}
.event-sheet-actions {
  display: flex; gap: 8px; margin-top: 14px;
}

/* ---- Tag-input picker (multi-assignee) ----
   chips render above the input; type a name + Enter or pick from the
   datalist to add; tap × on a chip to remove. */
.duty-tag-input {
  display: flex; flex-direction: column; gap: 6px;
}
.duty-tag-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.duty-tag-chips[hidden] { display: none; }
.duty-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--coral); color: var(--sand3);
  padding: 4px 4px 4px 10px;
  border-radius: var(--r-pill, 999px);
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  line-height: 1;
}
.duty-tag-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: rgba(251, 246, 234, 0.18);
  border: none; border-radius: 50%;
  color: var(--sand3); font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0;
}
.duty-tag-chip-x:hover { background: rgba(251, 246, 234, 0.32); }
.duty-tag-input-field { /* keeps the same look as .field, scoped for any future tweaks */ }

/* ---- Multi-assignee on home page my-duties cell ---- */
.my-duties-cell {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.my-duties-with {
  font-family: var(--font-body);
  font-size: 11px; color: var(--ink-dim);
  font-weight: 500;
}

/* ============================================================
   Mini-games — lobby + game stage.
   The .flappy-* classes are shared by Flappy Bird (flappybird.js)
   AND Tower Stack (tower.js) so the two games read as siblings —
   don't rename them without touching both files.
   ============================================================ */
.flappy-lobby-blurb {
  font-size: 14px; color: var(--ink-soft);
  margin: 0 4px;
}
.flappy-board { /* extends .list */ }
.flappy-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.flappy-rank {
  font-family: var(--font-mono);
  font-size: 16px; font-weight: 700;
  color: var(--ink-dim);
  letter-spacing: -0.5px;
}
.flappy-row.row-current .flappy-rank { color: var(--coral); }
.flappy-who { min-width: 0; }
.flappy-score-cell {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.5px;
}
.flappy-me-line {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.4px;
  text-align: center;
  padding: 6px 4px 0;
}
.flappy-fcta-error { min-height: 0; margin: 0 4px; }
.flappy-fcta-error:empty { display: none; }

/* Game stage — full-bleed fixed overlay on top of the app shell. */
body.flappy-active { overflow: hidden; }
.flappy-stage {
  position: fixed; inset: 0;
  background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.flappy-canvas {
  display: block;
  background: var(--sand);
  /* Preserve 360:640 aspect; fit whichever viewport dimension is tighter. */
  width: min(100vw, calc(100vh * 360 / 640));
  height: min(100vh, calc(100vw * 640 / 360));
  pointer-events: none;
}
.flappy-back {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: rgba(14, 42, 34, 0.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.flappy-back:active { background: rgba(14, 42, 34, 0.75); }
.flappy-score {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800;
  font-size: 56px; line-height: 1;
  color: var(--ink);
  letter-spacing: -1.5px;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(251, 246, 234, 0.6);
  z-index: 2;
}
.flappy-overlay {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 240px; max-width: 80vw;
  background: rgba(251, 246, 234, 0.96);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 22px 18px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 3;
  box-shadow: 0 12px 36px rgba(14, 42, 34, 0.25);
}
.flappy-overlay-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 1.4px; text-transform: uppercase;
}
.flappy-overlay-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 1;
  color: var(--ink);
  letter-spacing: -0.6px;
}
.flappy-overlay-sub {
  font-size: 13px; color: var(--ink-soft);
  max-width: 240px;
}
.flappy-overlay-status { min-height: 18px; }
.flappy-overlay-bignum {
  font-family: var(--font-display); font-weight: 800;
  font-size: 64px; line-height: 1;
  color: var(--ink);
  letter-spacing: -2px;
  margin: 2px 0 6px;
}
.flappy-overlay-badge {
  display: inline-block;
  background: var(--coral); color: var(--sand3);
  font-family: var(--font-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 2px;
}
.flappy-overlay-actions {
  display: flex; gap: 8px; margin-top: 10px;
  width: 100%; justify-content: center;
}
.flappy-overlay-btn { min-width: 120px; }
.flappy-overlay-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Make the "X plays left today" line read clearly under the score. */
.flappy-overlay-status:not(.form-error) {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.4px;
}

/* Tower Stack extras — wall-bounce indicator pinned under the score.
   Each block may bounce off a wall twice; the 3rd hit ends the run (the
   first block is exempt and shows the warm-up pill instead). */
.tower-bounce {
  position: absolute;
  top: max(84px, calc(env(safe-area-inset-top, 0px) + 64px));
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  pointer-events: none;
  z-index: 2;
}
.tower-bounce-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-dim);
}
.tower-bounce-dots { display: flex; gap: 5px; }
.tower-bounce-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 1px 2px rgba(14, 42, 34, 0.25);
}
.tower-bounce-dot.is-spent {
  background: transparent;
  border: 1.5px solid rgba(14, 42, 34, 0.28);
  box-shadow: none;
}
.tower-bounce-free {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--sun); color: var(--pine);
}

/* Character picker (lobby) — scrolling row of bird + leader-head chips. */
.flappy-skins-wrap { margin: 2px 4px 4px; }
.flappy-skins-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.flappy-skins {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.flappy-skins::-webkit-scrollbar { display: none; }
.flappy-skin {
  flex: 0 0 auto;
  width: 76px;
  background: none; border: none; padding: 4px 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; font: inherit; color: inherit;
}
.flappy-skin:disabled { cursor: default; }
.flappy-skin-av {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--sand2);
  border: 2.5px solid transparent;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(14, 42, 34, 0.10);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.flappy-skin.is-selected .flappy-skin-av {
  border-color: var(--coral);
  box-shadow: var(--shadow-coral-sm);
}
.flappy-skin-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flappy-skin-av svg { width: 84%; height: 84%; }
.flappy-skin.is-locked .flappy-skin-img { filter: grayscale(1) brightness(0.85); }
.flappy-skin-lock {
  position: absolute; inset: 0;
  background: rgba(14, 42, 34, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.flappy-skin-name {
  font-size: 12px; font-weight: 600; color: var(--ink);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flappy-skin-req {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--ink-dim);
}
.flappy-skin.is-selected .flappy-skin-req { color: var(--coral); }

/* Death-screen "new character unlocked" callout — head row + full-width Use
   button stacked, so it stays readable on the narrow in-game overlay. */
.flappy-unlock {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
  background: var(--sand2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-chip);
  padding: 10px;
  margin-top: 10px;
  text-align: left;
}
.flappy-unlock-head { display: flex; align-items: center; gap: 10px; }
.flappy-unlock-av {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden; background: var(--sand3);
  border: 2px solid var(--coral);
}
.flappy-unlock-text { flex: 1 1 auto; min-width: 0; }
.flappy-unlock-title {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--coral);
}
.flappy-unlock-sub { font-size: 12px; color: var(--ink-soft); }
.flappy-unlock-use { width: 100%; min-height: 42px; padding: 10px 14px; }

/* ============================================================
   Offline UI — chip shown when a screen is rendering from the
   IndexedDB cache (no signal), and a floating toast for one-shot
   confirmations like "Saved offline".
   ============================================================ */
.offline-chip {
  display: inline-block;
  align-self: flex-start;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}

.toast-host {
  position: fixed;
  left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex; justify-content: center;
  pointer-events: none;
  z-index: 1000;
}
.toast {
  pointer-events: auto;
  max-width: min(90vw, 360px);
  background: var(--pine); color: var(--sand3);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 14px;
  box-shadow: 0 12px 28px rgba(14, 42, 34, 0.28);
}
.toast-warn { background: var(--sun); color: var(--ink); }

/* ============================================================
   Parent Feed
   ============================================================ */

/* Parent home is read on phones AND desktops — keep it from stretching. */
.content-narrow { max-width: 600px; margin-inline: auto; width: 100%; }

/* Two buttons in a page header action slot (People: Parents + Add). */
.header-actions { display: inline-flex; align-items: center; gap: 8px; }

.feed-home-label {
  font-family: var(--font-display); font-weight: 800;
  font-size: 19px; color: var(--ink);
  margin: 4px 2px -2px;
}

.feed-list { display: flex; flex-direction: column; gap: 14px; }
.feed-tabs:empty { display: none; }
.feed-stack { display: flex; flex-direction: column; gap: 14px; }

/* New-posts pill — inline + centered (not fixed) so it sits above the feed. */
.feed-new-pill-wrap { display: flex; justify-content: center; }
.feed-new-pill-wrap:empty { display: none; }
.feed-new-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--coral); color: #fff;
  border: none; cursor: pointer;
  padding: 9px 16px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-coral-sm);
  -webkit-tap-highlight-color: transparent;
  animation: photoNewPillDrop 0.4s cubic-bezier(0.2, 0.7, 0.4, 1);
}
.feed-new-pill svg { display: block; }

/* ---- Card ---- */
.feed-card {
  background: var(--sand3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
}
.feed-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.feed-author { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.feed-time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); flex: none; }
.feed-caption { color: var(--ink-soft); font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ---- Photo (single) ---- */
.feed-photo-single { cursor: pointer; border-radius: var(--r-photo); overflow: hidden; background: var(--sand2); }
.feed-photo-img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; }

/* ---- Carousel (photo group) ---- */
.feed-carousel-wrap { position: relative; border-radius: var(--r-photo); overflow: hidden; background: var(--pine); }
.feed-carousel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.feed-carousel::-webkit-scrollbar { display: none; }
.feed-carousel-cell { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; aspect-ratio: 1 / 1; }
.feed-carousel-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feed-carousel-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(14, 42, 34, 0.66); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-pill);
}
.feed-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 9px;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.feed-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.feed-dot-on { background: #fff; }

/* ---- Video ---- */
.feed-video {
  display: block; width: 100%; max-height: 78vh;
  border-radius: var(--r-photo); background: #000;
}

/* ---- YouTube facade ---- */
.feed-yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-photo); overflow: hidden; background: #000; cursor: pointer; }
.feed-yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(232, 90, 46, 0.92); box-shadow: var(--shadow-coral-sm);
}
.feed-yt-play::before {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.feed-yt-frame { width: 100%; height: 100%; border: 0; display: block; }
.feed-yt-playing { cursor: default; }

/* ---- Actions row (like + comment) ---- */
.feed-actions {
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--hairline); padding-top: 8px; margin-top: 2px;
}
.feed-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 10px; border-radius: var(--r-pill);
  -webkit-tap-highlight-color: transparent;
}
.feed-action-btn:hover { background: var(--sand2); }
.feed-action-btn svg { display: block; }
.feed-heart-icon { display: inline-flex; }
.feed-heart.feed-heart-on { color: var(--coral); }
.feed-heart-wrap { display: inline-flex; align-items: center; }
/* Tappable "N likes" that opens the likers sheet; sits beside the heart. */
.feed-likes-link {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 8px; border-radius: var(--r-pill);
  -webkit-tap-highlight-color: transparent;
}
.feed-likes-link:hover { background: var(--sand2); text-decoration: underline; }

.feed-sentinel { height: 1px; }

/* ---- Detail ---- */
.feed-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.feed-detail-caption { color: var(--ink-soft); font-size: 16px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.feed-detail-media { border-radius: var(--r-photo); overflow: hidden; background: var(--sand2); position: relative; }
.feed-detail-img { display: block; width: 100%; height: auto; }
.feed-detail-media-actions { padding: 6px 2px 0; }
.feed-detail-actions { border-top: none; padding-top: 0; }
/* Edit / Delete in the detail header's top-right action slot. */
.detail-header-actions { display: flex; align-items: center; gap: 8px; }
.detail-header-actions .btn { padding: 7px 14px; font-size: 13px; }
.feed-hdr-del { color: var(--danger); border-color: var(--danger); }

.feed-comments-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-top: 4px; }
.feed-comments { display: flex; flex-direction: column; gap: 12px; }
.feed-comment { position: relative; padding-right: 22px; }
.feed-comment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.feed-comment-author { font-weight: 700; font-size: 14px; color: var(--ink); }
.feed-comment-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.feed-comment-body { color: var(--ink-soft); font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.feed-comment-del {
  position: absolute; top: -2px; right: -2px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim); font-size: 20px; line-height: 1; padding: 0 4px;
}
.feed-comment-compose { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.feed-comment-compose .btn { align-self: flex-end; }

/* ---- Compose ---- */
.compose-attach-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.compose-preview:empty { display: none; }
.compose-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.compose-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r-icon); border: 1px solid var(--line); }
.compose-file-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--sand2); color: var(--ink);
  padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px;
  max-width: 100%;
}
.compose-file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-file-size { color: var(--ink-dim); font-family: var(--font-mono); font-size: 12px; flex: none; }
.compose-yt-thumb { width: 100%; max-width: 320px; border-radius: var(--r-photo); display: block; }
.compose-thumb-wrap { position: relative; display: inline-flex; }
.compose-thumb-x {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: var(--r-pill); border: none;
  background: var(--ink); color: var(--sand);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---- Contacts (student form) ---- */
.contacts-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.contact-row {
  border: 1px solid var(--line); border-radius: var(--r-chip);
  padding: 12px; background: var(--sand);
}
.contact-name-row { display: flex; gap: 8px; }
.contact-name-row .field { margin: 0; }
.contact-remove { color: var(--danger); margin-top: 8px; display: inline-block; }

/* ============================================================
   Person detail view (read-only)
   ============================================================ */
.person-detail-row { margin-top: 14px; }
.person-detail-value { font-size: 15px; color: var(--ink); margin-top: 2px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.person-contact {
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.person-contact:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.person-contact-name { font-weight: 600; font-size: 15px; }
.person-contact-phone {
  display: block; color: var(--coral); text-decoration: none;
  font-size: 15px; margin: 4px 0;
}
.person-contact-phone:hover { text-decoration: underline; }
.person-contact-code { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.person-contact-code-key {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--ink-dim); letter-spacing: 1.2px; text-transform: uppercase;
}
.person-contact-code-val {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--ink); letter-spacing: 0.08em;
}

/* ============================================================
   Gaga pool-play tournament views
   ============================================================ */

/* Round card */
.gaga-round-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.gaga-round-header { display: flex; align-items: center; justify-content: space-between; }
.gaga-round-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }

/* Pool card */
.gaga-pool-card {
  background: var(--sand2); border-radius: var(--r-chip);
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.gaga-pool-header { display: flex; align-items: center; justify-content: space-between; }
.gaga-pool-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-dim); }
.gaga-pool-teams { display: flex; flex-direction: column; gap: 4px; }
.gaga-pool-team-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gaga-pool-team-row:last-child { border-bottom: none; }
.gaga-pool-team-name { font-size: 15px; color: var(--ink); }

/* Mark modal — place rows */
.gaga-place-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gaga-place-row:last-child { border-bottom: none; }
.gaga-place-label { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); }
.gaga-place-pts { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); font-weight: 400; }

/* Leaderboard */
.gaga-lb-card { padding: 0; overflow: hidden; }
.gaga-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.gaga-lb-row:last-child { border-bottom: none; }
.gaga-lb-row-elim { opacity: 0.45; }
.gaga-rank-num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ink-dim); width: 24px; text-align: right; flex: none; }
.gaga-lb-name { flex: 1; font-size: 15px; color: var(--ink); }
.gaga-lb-pts { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--pine); flex: none; }

/* Eliminate modal */
.gaga-elim-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-chip);
  background: var(--sand2); margin-bottom: 6px;
  cursor: pointer; border: 2px solid transparent; width: 100%; text-align: left;
}
.gaga-elim-row-checked { border-color: var(--coral); background: var(--sand3); }
.gaga-elim-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--coral); flex: none; }
.gaga-elim-row-checked .gaga-elim-check { background: var(--coral); border-color: var(--coral); color: white; }
.gaga-elim-name { flex: 1; font-size: 15px; color: var(--ink); }
.gaga-elim-pts { font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); flex: none; }

/* Reorder modal */
.gaga-reorder-pool { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.gaga-reorder-pool:last-child { border-bottom: none; }
.gaga-reorder-pool-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-dim); }
.gaga-reorder-team-list { display: flex; flex-direction: column; gap: 4px; }
.gaga-reorder-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 15px; color: var(--ink); }
.gaga-reorder-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.gaga-reorder-unassigned-section { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }

/* ============================================================
   Kitchen (weekly menu + per-meal prep checklists, leader/admin)
   ============================================================ */
.kitchen-intro { margin-bottom: 12px; }
.kitchen-day-note {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.3px;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.kitchen-meals { margin-top: 12px; }
.kitchen-meal-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; cursor: pointer;
  background: var(--sand3); border: none;
  border-radius: var(--r-card); padding: 14px 16px;
}
.kitchen-meal-main { flex: 1; min-width: 0; }
.kitchen-meal-slot {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 3px;
}
.kitchen-meal-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1.1; letter-spacing: -0.3px;
  font-variation-settings: "opsz" 20;
  color: var(--ink);
}
.kitchen-meal-preview {
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-dim); line-height: 1.4; margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kitchen-meal-go { flex: none; display: flex; align-items: center; }

/* Prep checklist inside the bottom sheet */
.kitchen-prep-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-dim);
  margin: 16px 0 8px;
}
.kitchen-prep-list { display: flex; flex-direction: column; gap: 2px; }
.kitchen-prep-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; cursor: pointer;
  border-bottom: 1px solid var(--hairline);
}
.kitchen-prep-item:last-child { border-bottom: none; }
.kitchen-prep-box {
  flex: none; width: 22px; height: 22px;
  border-radius: 6px; border: 2px solid var(--line);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.kitchen-prep-box svg { opacity: 0; }
.kitchen-prep-text {
  flex: 1; font-family: var(--font-body); font-size: 15px;
  color: var(--ink); line-height: 1.35;
}
.kitchen-prep-item-done .kitchen-prep-box {
  background: var(--pine3); border-color: var(--pine3);
}
.kitchen-prep-item-done .kitchen-prep-box svg { opacity: 1; }
.kitchen-prep-item-done .kitchen-prep-text {
  color: var(--ink-dim); text-decoration: line-through;
}

/* ===== Photo slideshow (admin wall display) ============================= */
body.slideshow-active { overflow: hidden; }

.slideshow-root {
  position: fixed; inset: 0; z-index: 1000;
  background: #000; color: #fff;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.slideshow-stage { position: absolute; inset: 0; }
.slideshow-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;          /* portrait shots letterbox, never crop */
  opacity: 0;
  transition: opacity 0.8s ease;
  background: #000;
}
.slideshow-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 22px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  pointer-events: none;
}

.slideshow-chrome {
  position: absolute; top: 0; right: 0;
  display: flex; gap: 10px; padding: 16px;
  opacity: 0; transition: opacity 0.25s ease;
  pointer-events: none;
}
.slideshow-root.slideshow-show-chrome .slideshow-chrome {
  opacity: 1; pointer-events: auto;
}
.slideshow-ctrl {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1; color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  padding: 10px 18px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.slideshow-ctrl:hover { background: rgba(0, 0, 0, 0.7); }
.slideshow-close { font-size: 20px; padding: 6px 14px; }

.slideshow-lobby {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 24px;
  background: radial-gradient(circle at 50% 38%, #15352b, #0a1f19 72%);
}
.slideshow-lobby h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 34px; margin: 0; color: #fff;
}
.slideshow-sub {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.slideshow-start {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: #0E2A22; background: var(--coral);
  border: none; border-radius: var(--r-pill);
  padding: 16px 30px; margin-top: 4px; cursor: pointer;
  box-shadow: var(--shadow-coral-lg);
}
.slideshow-start svg { width: 26px; height: 26px; }
.slideshow-start:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.slideshow-back {
  margin-top: 8px;
  font-family: var(--font-body); font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  background: none; border: none; cursor: pointer; text-decoration: underline;
}

/* ---- Birthday banner (home, on-site roles) ----
   A deliberately loud, colorful celebration — the one place we splash all
   three accent colors at once. Each birthday person gets a sand "name tag"
   chip for legibility over the bright gradient; confetti bits float behind. */
.bday-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card-lg);
  padding: 22px 22px 24px;
  text-align: center;
  background: linear-gradient(125deg, var(--coral) 0%, #F0852E 34%, var(--sun) 66%, var(--sky) 100%);
  box-shadow: var(--shadow-coral-lg);
  animation: bday-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.bday-eyebrow {
  position: relative; z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pine); opacity: 0.85;
}
.bday-title {
  position: relative; z-index: 1;
  margin: 3px 0 12px;
  font-family: var(--font-display); font-variation-settings: "opsz" 36;
  font-size: clamp(30px, 9vw, 46px); line-height: 1.02; color: #fff;
  text-shadow: 0 2px 0 var(--coral-dk), 0 4px 12px rgba(14, 42, 34, 0.28);
}
.bday-names {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.bday-name-chip {
  background: var(--sand); color: var(--pine);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 4.4vw, 19px);
  padding: 6px 15px; border-radius: var(--r-pill);
  box-shadow: 0 2px 0 rgba(14, 42, 34, 0.2);
}
.bday-confetti { position: absolute; inset: 0; pointer-events: none; }
.bday-bit {
  position: absolute; width: 10px; height: 10px; border-radius: 2px;
  opacity: 0.9; transform: rotate(var(--bday-rot, 0deg));
  animation: bday-float 3.4s ease-in-out infinite;
}
.bday-bit-round { border-radius: 50%; }
.bday-bit-pine  { background: var(--pine); }
.bday-bit-white { background: #fff; }
.bday-bit-sun   { background: var(--sun); }
.bday-bit-sky   { background: var(--sky); }
.bday-bit-coral { background: var(--coral-dk); }
@keyframes bday-float {
  0%, 100% { transform: translateY(0) rotate(var(--bday-rot, 0deg)); }
  50%      { transform: translateY(-8px) rotate(calc(var(--bday-rot, 0deg) + 20deg)); }
}
@keyframes bday-pop {
  0%   { opacity: 0; transform: scale(0.94) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bday-bit { animation: none; }
  .bday-banner { animation: none; }
}

/* ============================================================
   Small Group Discussion — rendered doc + admin editor
   ============================================================ */
/* The rendered document (also the contenteditable surface in the editor).
   Tuned for comfortable reading of a list of questions. */
.discussion-doc {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
.discussion-doc > *:first-child { margin-top: 0; }
.discussion-doc > *:last-child  { margin-bottom: 0; }
.discussion-doc h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.3px;
  color: var(--pine);
  margin: 20px 0 8px;
  font-variation-settings: "opsz" 22;
}
.discussion-doc h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.2px;
  color: var(--pine);
  margin: 16px 0 6px;
  font-variation-settings: "opsz" 18;
}
.discussion-doc h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 15px; color: var(--ink-soft);
  margin: 14px 0 4px;
}
.discussion-doc p { margin: 0 0 10px; }
.discussion-doc ul,
.discussion-doc ol { margin: 0 0 12px; padding-left: 22px; }
.discussion-doc li { margin: 0 0 6px; }
.discussion-doc blockquote {
  margin: 12px 0; padding: 8px 14px;
  border-left: 3px solid var(--coral);
  color: var(--ink-soft); font-style: italic;
}
.discussion-doc strong, .discussion-doc b { font-weight: 700; }

/* Editor */
.discussion-edit-hint { margin: 0 0 12px; }
.discussion-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.discussion-tool {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--ink);
  background: var(--sand2); border: none;
  border-radius: var(--r-chip);
  padding: 8px 12px; min-height: 38px;
  cursor: pointer;
}
.discussion-tool:active { background: var(--coral); color: var(--sand3); }
.discussion-tool-b { font-weight: 800; }
.discussion-tool-i { font-style: italic; }
.discussion-tool-u { text-decoration: underline; }
.discussion-editor {
  min-height: 260px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-icon);
  padding: 14px;
  outline: none;
  margin-bottom: 12px;
}
.discussion-editor:focus { border-color: var(--coral); }
.discussion-editor:empty:before {
  content: "Start typing your questions…";
  color: var(--ink-dim);
}