@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --bg:        #f5f3ef;
  --surface:   #ffffff;
  --border:    #e6e2d9;
  --accent:    #2d6a4f;
  --accent-dk: #1b4332;
  --accent-lt: #d8f3dc;
  --text:      #1c1b18;
  --muted:     #706e66;
  --err:       #b91c1c;
  --err-bg:    #fef2f2;
  --err-bdr:   #fecaca;
  --ok:        #15803d;
  --ok-bg:     #f0fdf4;
  --r:         8px;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06);
  --header-h:  60px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 54px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-dk);
  letter-spacing: -.2px;
}

/* ── FestWorks brand lockup ──────────────────────────────────────────────── */

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nav-wordmark {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}

.auth-wordmark {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

main { padding: 40px 24px 80px; }

/* ── Auth view ──────────────────────────────────────────────────────────── */

#view-auth   { max-width: 400px; margin: 60px auto 0; }
.auth-card h1 { font-size: 22px; margin-bottom: 24px; font-weight: 700; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--shadow);
}
.card h2 { font-size: 16px; font-weight: 700; margin-bottom: 20px; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

/* ── Forms ──────────────────────────────────────────────────────────────── */

form { display: flex; flex-direction: column; gap: 14px; }

label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=time],
select,
textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,106,79,.14);
}
textarea { resize: vertical; }

.label-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
  align-self: flex-start;
  white-space: nowrap;
}
.btn-primary:hover    { background: var(--accent-dk); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  transition: border-color .12s, color .12s;
}
.btn-ghost:hover { border-color: var(--text); color: var(--text); }

.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover { color: var(--accent-dk); }

.auth-switch {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}
.auth-back {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}
.auth-back a { color: var(--muted); text-decoration: none; }
.auth-back a:hover { color: var(--text); }

/* ── Dashboard ──────────────────────────────────────────────────────────── */

.dash-welcome {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}
.dash-welcome strong { color: var(--text); }

/* ── Response panel ─────────────────────────────────────────────────────── */

.response-card { padding: 0; overflow: hidden; }

.response-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  background: #fafaf8;
}
.response-meta code {
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
  font-size: 13px;
  color: var(--muted);
}

.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-ok  { background: var(--ok-bg);  color: var(--ok); }
.badge-err { background: var(--err-bg); color: var(--err); }

#response-body {
  margin: 0;
  padding: 20px 24px;
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.75;
  overflow-x: auto;
  white-space: pre;
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 0 0 var(--r) var(--r);
}

/* VS Code Dark+ inspired token colors */
.jk { color: #9cdcfe; }   /* key    */
.js { color: #ce9178; }   /* string */
.jn { color: #b5cea8; }   /* number */
.jb { color: #569cd6; }   /* bool / null */

/* ── Inline errors ──────────────────────────────────────────────────────── */

.form-error {
  font-size: 13px;
  color: var(--err);
  background: var(--err-bg);
  border: 1px solid var(--err-bdr);
  border-radius: 6px;
  padding: 8px 12px;
}

/* ── Event ribbon ─────────────────────────────────────────────────��─────────── */

#event-ribbon {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
}
.ribbon-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ribbon-main { min-width: 0; }
#ribbon-title {
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ribbon-meta {
  display: flex;
  gap: 0;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  flex-wrap: wrap;
}
.ribbon-meta span + span::before { content: ' · '; white-space: pre; }
.all-day-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--accent-lt);
  color: var(--accent-dk);
  padding: 3px 9px;
  border-radius: 4px;
}

/* ── Event page main ────────────────────────────────────────────────────────── */

/* Base rule for event.php — left-aligned, no max-width cap */
#page-main { padding: 16px 24px 80px; }

/* view.php: no padding (its own layout handles spacing) */
.view-page #page-main { padding: 0; }
.state-msg  { text-align: center; color: var(--muted); padding: 60px 0; font-size: 15px; }

/* ── Schedule grid ──────────────────────────────────────────────────────────── */

#schedule-wrap { overflow-x: auto; padding-bottom: 8px; }

.schedule-grid {
  display: grid;
  grid-template-columns: 86px repeat(var(--day-count, 1), 195px);
  width: max-content;   /* use natural track width, not container width */
  min-width: 100%;      /* still fill the wrapper when there's room */
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: clip;       /* clips corner cells without creating a BFC */
  background: var(--border); /* gap color */
  gap: 1px;
  box-shadow: var(--shadow);
}

.grid-cell         { background: var(--surface); }
.grid-corner       { background: var(--bg); min-height: 52px; }

.grid-day-header {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  min-height: 64px;       /* taller to house the + button */
  gap: 2px;
}
.day-dow  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.day-date { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 1px; }

/* [+] button inside each day header column */
.btn-add-day {
  margin-top: 6px;
  align-self: stretch;       /* override parent align-items:center → full width */
  width: 100%;
  height: 28px;
  background: var(--accent-lt);
  border: 1px solid #a8d5b8;
  border-radius: 5px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s, color .12s, background .12s;
  flex-shrink: 0;
  box-sizing: border-box;
}
.btn-add-day:hover { border-color: var(--accent); color: var(--accent-dk); background: #b7e4c7; }
.view-page:not(.is-editing) .btn-add-day { display: none !important; }

.grid-range-label {
  background: var(--bg);
  padding: 10px 8px 10px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  min-height: 64px;
}

.grid-body-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  min-height: 64px;
}

.sched-item {
  background: var(--accent-lt);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 5px 8px;
  cursor: pointer;
  transition: filter .12s;
}
.sched-item:hover { filter: brightness(.95); }
.sched-time  { display: block; font-size: 10px; font-weight: 700; color: var(--accent-dk); }
.sched-title { display: block; font-size: 12px; font-weight: 500; color: var(--text); margin-top: 1px; }

.btn-add-slot {
  margin-top: auto;
  align-self: stretch;
  width: 100%;           /* explicit belt-and-suspenders so it's always full-width */
  height: 30px;
  background: var(--accent-lt);
  border: 1px solid #a8d5b8;
  border-radius: 5px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: border-color .12s, color .12s, background .12s;
  box-sizing: border-box;
}
.btn-add-slot:hover { border-color: var(--accent); color: var(--accent-dk); background: #b7e4c7; }

/* Accommodations row — pinned just under the date headers */
.grid-accom-label {
  min-height: 80px;
  font-style: normal;
  letter-spacing: .04em;
  background: #fef9e7;
  justify-content: center;
  align-items: center;
}
.accom-row-icon { font-size: 18px; line-height: 1; }

.grid-accom-cell {
  min-height: 80px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef9e7;
}

/* Accommodation card — mirrors .sched-item visual style */
.accom-card {
  background: #fef3c7;
  border-left: 3px solid #d97706;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.accom-card-name  { font-weight: 600; }
.accom-card-dates { font-size: 11px; color: var(--muted); font-weight: 400; }

/* Clickable variant (edit mode) */
.accom-card-clickable {
  cursor: pointer;
  transition: filter .1s;
}
.accom-card-clickable:hover { filter: brightness(.95); }

/* "+" add button for empty accommodation cells */
.btn-accom-add {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1.5px dashed #d97706;
  border-radius: 50%;
  background: none;
  color: #d97706;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, color .1s;
}
.btn-accom-add:hover { background: #fef3c7; color: #92400e; }

/* ── Modal ──────────────────────────────────────────────────────────────────── */

#modal-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
#modal-backdrop[hidden] { display: none; }

.modal-card {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: 0 12px 48px rgba(0,0,0,.22);
  width: 100%;
  max-width: 420px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0;
}
.modal-header h2 { font-size: 16px; font-weight: 700; }

.btn-icon {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
}
.btn-icon:hover { background: var(--bg); color: var(--text); }

.modal-card form { padding: 14px 20px 20px; gap: 11px; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.modal-footer-right { display: flex; gap: 8px; }

.btn-danger {
  background: none;
  border: 1px solid var(--err-bdr);
  color: var(--err);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.btn-danger:hover         { background: var(--err-bg); }
.btn-danger-armed         { background: var(--err-bg) !important; border-color: var(--err) !important; }

.event-open-link {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.event-open-link:hover { color: var(--accent-dk); }

/* ═══════════════════════════════════════════════════════════════════════════
   APP SHELL  (index.php / new-event.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Auth screen ─────────────────────────────────────────────────────────── */

.screen-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Shell grid ──────────────────────────────────────────────────────────── */

.app-shell {
  display: flex;
  align-items: stretch;
  height: 100vh;
  height: 100dvh;
  overflow: hidden; /* page body never scrolls — nav bounce eliminated */
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.app-nav {
  position: sticky;
  top: 0;
  width: 240px;
  min-width: 240px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 50;
  transition: width 0.25s ease, min-width 0.25s ease;
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 12px 0 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
  position: relative;
}

.nav-links {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Mobile-only nav entry (e.g. Connect AI) — hidden on desktop.
   Must be more specific than .nav-link { display: flex } which comes next. */
.nav-link.nav-link-ai-mobile { display: none; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: background .12s, color .12s;
}
.nav-link:hover     { background: var(--bg); color: var(--text); }
.nav-link.is-active { background: var(--accent-lt); color: var(--accent-dk); font-weight: 600; }

.nav-icon { width: 18px; height: 18px; flex-shrink: 0; }

.nav-user {
  padding: 12px 8px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.nav-user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  overflow: hidden;
  background: none;
  border: none;
  border-radius: 6px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}
.nav-user-profile:hover { background: var(--bg); }
.nav-user-profile--static { cursor: default; }
.nav-user-profile--static:hover { background: none; }
.nav-user-icon {
  flex-shrink: 0;
  color: var(--muted);
}
.nav-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nav logout button — matches nav-link style */
.btn-nav-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.btn-nav-logout:hover { background: var(--err-bg); color: var(--err); }

/* ── App body ────────────────────────────────────────────────────────────── */

.app-body { flex: 1 1 0; min-width: 0; min-height: 0; overflow-y: auto; }

.app-header {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 60px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10;
}
.page-title {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  color: var(--text);
}
.back-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.back-link:hover { color: var(--text); }

/* ── Event banner (event.php + view.php) ─────────────────────────────────── */
/* A single sticky bar: hamburger | title · dates | action buttons.          */
/* Replaces the old two-strip layout (app-header + event-hero).              */

.event-banner {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 60px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  /* Subtle shadow so content slides under it cleanly */
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.ev-banner-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}

.ev-banner-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.ev-banner-dates {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 4px;
}
.ev-banner-dates:not(:empty)::before {
  content: ' · ';
  white-space: pre;
}

/* Pencil that fades in when hovering the title/dates area */
.btn-edit-pencil {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--muted);
  opacity: 0;
  flex-shrink: 0;
  margin-left: 6px;
  line-height: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.ev-banner-info:hover .btn-edit-pencil {
  opacity: 1;
}
.btn-edit-pencil:hover {
  color: var(--accent);
  background: var(--surface-2, rgba(0,0,0,.05));
}

.app-main {
  padding: 16px 24px 80px;
}

.btn-sm { padding: 6px 14px; font-size: 13px; }

/* Shared sizing so all action-area buttons sit at the same height */
.btn-primary.btn-sm,
.btn-ghost.btn-sm,
.btn-ai.btn-sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
}

/* header-actions: groups buttons in the app-header right side */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── AI connect button ──────────────────────────────────────────────────────── */
.btn-ai {
  background: none;
  border: 1px solid #c4b5fd;
  border-radius: 6px;
  color: #7c3aed;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn-ai:hover   { background: #f5f3ff; border-color: #7c3aed; }
.btn-ai:disabled { opacity: .55; cursor: not-allowed; }

/* ── Hamburger ───────────────────────────────────────────────────────────── */

.btn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 6px;
  flex-shrink: 0;
}
.btn-hamburger span { display: block; height: 2px; background: var(--text); border-radius: 1px; }
.btn-hamburger:hover { background: var(--bg); }

/* ── Nav overlay (mobile backdrop) ──────────────────────────────────────── */

.nav-overlay {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.4);
  z-index: 49;
}
.nav-overlay.is-visible { display: block; }

/* ── Mobile breakpoint ───────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .app-shell { display: block; }
  .app-body  { height: 100%; } /* fill 100dvh shell when block context */

  .app-nav {
    /* on mobile, pull out of flow and slide in from left */
    position: fixed;
    top: 0; left: 0;
    width: 240px !important;
    min-width: 240px !important;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
  }
  .app-nav.nav-open { transform: translateX(0); }

  .btn-hamburger { display: flex; }
  .nav-collapse-btn { display: none; }

  .app-header { padding: 0 16px; }
  .app-main   { padding: 12px 16px 80px; }
}

@media (min-width: 701px) {
  #nav-close { display: none; }
}

/* ── Nav collapse button ─────────────────────────────────────────────────── */

.nav-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s, opacity .15s;
}
.nav-collapse-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border); }

/* Show ← when expanded, → when collapsed */
.nav-collapse-icon--open  { display: none; }
.nav-collapsed .nav-collapse-icon--close { display: none; }
.nav-collapsed .nav-collapse-icon--open  { display: block; }

/* .nav-text = any label that disappears in collapsed mode */
.nav-text { transition: opacity 0.15s ease; }

/* ── Collapsed nav state (desktop only) ──────────────────────────────────── */

@media (min-width: 701px) {
  .app-nav.nav-collapsed {
    width: 56px;
    min-width: 56px;
  }

  /* Header: center the logo mark; collapse button becomes a hover overlay */
  .app-nav.nav-collapsed .nav-header {
    padding: 0;
    justify-content: center;
  }
  .app-nav.nav-collapsed .nav-header .nav-text { display: none; }

  /* Pull button out of flex flow so the logo truly centers */
  .app-nav.nav-collapsed .nav-collapse-btn {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    border: none;
    background: rgba(245, 243, 239, 0.88);
    color: var(--accent-dk);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
  /* Fade in on header hover */
  .app-nav.nav-collapsed .nav-header:hover .nav-collapse-btn {
    opacity: 1;
    pointer-events: auto;
  }
  .app-nav.nav-collapsed .nav-collapse-btn:hover {
    background: rgba(245, 243, 239, 0.96);
    border: none;
  }

  /* Nav links: center icons, hide text */
  .app-nav.nav-collapsed .nav-links { padding: 12px 4px; }
  .app-nav.nav-collapsed .nav-link {
    justify-content: center;
    padding: 9px 4px;
  }
  .app-nav.nav-collapsed .nav-link .nav-text { display: none; }

  /* User area */
  .app-nav.nav-collapsed .nav-user { padding: 10px 4px 14px; align-items: center; }
  .app-nav.nav-collapsed .nav-user-profile { padding: 6px 4px; justify-content: center; }
  .app-nav.nav-collapsed .nav-user-profile .nav-text { display: none; }
  .app-nav.nav-collapsed .btn-nav-logout { justify-content: center; padding: 8px 4px; }
  .app-nav.nav-collapsed .btn-nav-logout .nav-text { display: none; }

  /* Tooltip on hover for icon-only state */
  .app-nav.nav-collapsed .nav-link { position: relative; }
  .app-nav.nav-collapsed .nav-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(28,27,24,.92);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }
}

/* ── Section headings ────────────────────────────────────────────────────── */

.section-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
  margin-bottom: 12px;
}

section + section,
section + .section-past { margin-top: 36px; }

/* ── Event list & cards ──────────────────────────────────────────────────── */

.event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: border-color .12s, box-shadow .12s;
}
.event-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(45,106,79,.14);
}

/* Calendar date block */
.ec-cal {
  flex-shrink: 0;
  width: 50px;
  text-align: center;
  background: var(--accent-lt);
  border-radius: 6px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ec-cal-tbd { background: var(--bg); }
.ec-cal-m {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--accent-dk);
  line-height: 1;
}
.ec-cal-d {
  font-size: 17px;
  font-weight: 800;
  color: var(--accent-dk);
  line-height: 1.2;
  margin-top: 2px;
}

.ec-body { flex: 1; min-width: 0; }

.ec-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ec-meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* "Happening Now" card — prominent left accent + subtle wash */
.event-card-current {
  border-left: 3px solid var(--accent);
  padding-left: 15px;
  background: linear-gradient(100deg, rgba(45,106,79,.05) 0%, var(--surface) 60%);
}
.ec-now {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--accent-dk);
  background: var(--accent-lt);
  border-radius: 4px;
  padding: 4px 8px;
  align-self: flex-start;
}

/* Past cards are dimmed until hovered */
.event-card-past { opacity: .65; }
.event-card-past:hover { opacity: 1; }

/* Role badges */
.role-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: capitalize;
  white-space: nowrap;
}
.badge-owner  { background: var(--accent-dk); color: #fff; }
.badge-admin  { background: #1d4ed8;          color: #fff; }
.badge-member { background: #e5e7eb;          color: #374151; }
.badge-guest  { background: #f3f4f6;          color: #6b7280; }

/* RSVP badges */
.rsvp-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.rsvp-yes   { background: #dcfce7; color: #15803d; }
.rsvp-no    { background: #fee2e2; color: #b91c1c; }
.rsvp-maybe { background: #fef9c3; color: #854d0e; }

/* ── Past toggle ─────────────────────────────────────────────────────────── */

.section-past { margin-top: 36px; }

.btn-past-toggle {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 14px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: color .12s;
}
.btn-past-toggle:hover,
.btn-past-toggle.is-open { color: var(--text); }

.event-list-past { margin-top: 10px; }

.btn-load-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

/* ── Empty / utility ─────────────────────────────────────────────────────── */

.events-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-size: 15px;
}
.list-empty { font-size: 14px; color: var(--muted); padding: 14px 0; }

/* ── New event form page ─────────────────────────────────────────────────── */

.page-header  { margin-bottom: 24px; }
.page-heading { font-size: 22px; font-weight: 700; }
.page-subheading { font-size: 14px; color: var(--muted); margin-top: 4px; }

.create-form { max-width: 560px; gap: 16px; }

.form-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

/* ── New-event two-column layout ─────────────────────────────────────────── */

/* Widen the content area to accommodate both columns */
.ne-main { max-width: 960px; }

/* Side-by-side on desktop; stacked on tablet/mobile */
.ne-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start; /* needed for .ne-panel sticky to work */
}

/* Left: the create form — remove old max-width so it fills its column */
.ne-form { max-width: none; }

/* Right: attendees panel — sticky below the app header */
.ne-panel {
  position: sticky;
  top: 70px; /* 54px header + 16px breathing room */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

/* Panel heading row */
.ne-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ne-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  flex: 1;
}
.ne-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-lt);
  color: var(--accent-dk);
  border-radius: 20px;
  padding: 1px 8px;
  line-height: 1.7;
  white-space: nowrap;
}

/* Email input + Add button */
.ne-invite-ta {
  width: 100%;
  box-sizing: border-box;
  min-height: 108px; /* ~5 rows */
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s;
}
.ne-invite-ta:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
}

/* Feedback message */
.ne-invite-msg {
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  margin: 0;
  background: var(--err-bg);
  color: var(--err);
  border: 1px solid var(--err-bdr);
  line-height: 1.4;
}
.ne-invite-msg.ne-invite-msg-ok {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: #86efac;
}

/* Invitee list */
.ne-invitee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}

.ne-invitee {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color .1s;
}
.ne-invitee:hover { border-color: var(--accent); }

.ne-inv-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.ne-inv-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ne-inv-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ne-inv-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ne-inv-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 3px 5px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .1s, background .1s;
}
.ne-inv-remove:hover { color: var(--err); background: var(--err-bg); }

/* Empty-state note */
.ne-empty-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Date range picker ───────────────────────────────────────────────────── */

.ne-date-range-wrap { position: relative; }

.ne-date-range-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.ne-date-range-btn:hover,
.ne-date-range-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}
.ne-cal-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--muted);
}
.ne-drb-placeholder { color: var(--muted); }

/* Popup */
.ne-cal-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.13);
  padding: 16px;
  min-width: 272px;
  user-select: none;
}

.ne-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ne-cal-nav {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 5px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: background .1s, color .1s;
}
.ne-cal-nav:hover { background: var(--bg); color: var(--text); }
.ne-cal-month {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* 7-column day grid */
.ne-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ne-cal-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  padding: 3px 0 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ne-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text);
  font-family: inherit;
  transition: background .1s, color .1s;
}
.ne-cal-day:hover { background: var(--bg); }
.ne-cal-day--empty { cursor: default; pointer-events: none; }

/* Selected endpoints */
.ne-cal-day--start,
.ne-cal-day--end {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.ne-cal-day--start { border-radius: 4px 0 0 4px; }
.ne-cal-day--end   { border-radius: 0 4px 4px 0; }
/* Single day: same start + end */
.ne-cal-day--start.ne-cal-day--end,
.ne-cal-day--single { border-radius: 4px; }

/* In-range fill */
.ne-cal-day--in-range {
  background: var(--accent-lt);
  color: var(--accent-dk);
  border-radius: 0;
}
/* Override hover when in range */
.ne-cal-day--in-range:hover { background: var(--accent-lt); }

.ne-cal-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 0;
  text-align: center;
}

/* Time row — shown after date selection */
.ne-date-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-top: 4px;
}
.ne-dt-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ne-dt-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ne-dt-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ne-dt-time {
  font-size: 14px;
  font-family: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.ne-dt-time:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}
.ne-dt-note {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

/* ── Timezone section (new-event + edit modal) ───────────────────────────── */

.ne-tz-section {
  margin-bottom: 16px;
}

/* Badge — shown when timezone is auto-detected from a geocoded location */
.ne-tz-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--accent-lt);
  border: 1px solid #a8d5b8;
  border-radius: 6px;
  font-size: 13px;
  color: #111827;
}
.ne-tz-globe {
  color: var(--accent);
  flex-shrink: 0;
}
.ne-tz-badge-text {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ne-tz-badge-text strong {
  font-weight: 600;
}
.ne-tz-badge-src {
  font-size: 12px;
  color: var(--muted);
}
.ne-tz-change-link {
  margin-left: 2px;
  font-size: 12px;
}

/* Required star in the manual label */
.ne-tz-star {
  color: var(--danger);
  font-weight: 600;
  margin-left: 1px;
}

/* Manual select inherits the default select styling */
.ne-tz-manual label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}
.ne-tz-manual select {
  margin-top: 2px;
}

/* ── Meals grid ──────────────────────────────────────────────────────────── */

.mg-wrap { overflow-x: auto; padding-bottom: 8px; }

.mg-grid {
  display: grid;
  grid-template-columns: 88px repeat(var(--mg-cols, 1), 165px);
  width: max-content;
  min-width: 100%;
  border-left: 1px solid var(--border);
  border-top:  1px solid var(--border);
  border-radius: 6px;
  overflow: clip;
}
.mg-cell {
  border-right:  1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 50px;
}
.mg-corner,
.mg-day-hd,
.mg-slot-lbl { background: var(--bg); }
.mg-day-hd {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.mg-dow  { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mg-date { font-size: 13px; font-weight: 600; color: var(--text); }
.mg-slot-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mg-cook-cell {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* override mg-cell's align-items:center so strips span full width */
  padding: 0;             /* override mg-cell's 10px side padding; strip uses its own margin */
  transition: background .2s;
}
.mg-cook-cell.has-menu { background: #fdf8f0; }
.mg-cook-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background .1s;
  min-height: 36px;
}
.mg-cook-strip:hover { background: var(--accent-lt); }
.mg-menu-input {
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  padding: 5px 8px;
  width: 100%;
  min-height: 58px; /* ~3 lines */
  box-sizing: border-box;
  outline: none;
  resize: none;
  overflow-y: auto;
}
.mg-menu-input::placeholder { color: var(--muted); font-style: italic; }
.mg-menu-input:focus { background: var(--accent-lt); }
.mg-menu-input.mg-menu-readonly { color: var(--muted); cursor: default; }
.mg-menu-input.mg-menu-readonly:focus { background: transparent; }
.mg-av {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0; line-height: 1;
}
.mg-cook-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-no-cook   { font-size: 12px; color: var(--muted); }

/* Empty cook strip — matches btn-add-day style */
.mg-cook-strip--empty {
  margin: 4px 2px;
  border: 1px solid #a8d5b8;
  border-radius: 5px;
  justify-content: center;
  background: var(--accent-lt);
  min-height: 28px;
  padding: 0;
  box-sizing: border-box;
}
.mg-cook-strip--empty .mg-no-cook { color: var(--accent); font-size: 13px; font-weight: 400; }
.mg-cook-strip--empty:hover { background: #b7e4c7; border-color: var(--accent); }
.mg-cook-strip--empty:hover .mg-no-cook { color: var(--accent-dk); }

/* Cook picker dropdown */
.mg-picker {
  position: fixed;
  z-index: 400;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.13);
  padding: 4px;
  min-width: 160px;
  max-height: 240px;
  overflow-y: auto;
}
.mg-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  transition: background .1s;
}
.mg-picker-item:hover       { background: var(--bg); }
.mg-picker-item.is-selected { font-weight: 700; color: var(--accent); }
.mg-picker-clear            { color: var(--muted); }
.mg-picker-clear:hover      { color: var(--err); background: var(--err-bg); }

/* ── Consolidated view page (view.php) ───────────────────────────────────── */

/* Override .app-main centering; two-column body handles its own layout */
.vw-main    { max-width: none; padding: 0; }
.vw-loading { padding: 60px 28px; }

/* Two-column body: grid + expenses on left, attendees sidebar on right */
.vw-body {
  display: grid;
  grid-template-columns: 1fr 264px;
  gap: 0 24px;
  align-items: start;
  padding: 24px 28px 48px;
}
.vw-main-col { min-width: 0; }
.vw-side-col {
  position: sticky;
  top: 62px; /* clears sticky event-banner (54px) + small gap */
}

/* Grid container scrolls horizontally if there are many days */
.vw-grid-container { overflow-x: auto; }

/* Expenses stub below the grid */
.vw-expenses-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.vw-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 8px;
}

/* ── Expense grid ──────────────────────────────────────────────────────────── */

.ex-wrap { overflow-x: auto; padding-bottom: 8px; }

.ex-grid {
  display: grid;
  grid-template-columns: 140px repeat(var(--ex-cols, 1), minmax(110px, 1fr));
  border: 1px solid var(--border);
  background: var(--border);  /* shows as 1-px dividers between cells */
  gap: 1px;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-width: max-content;
}

/* Base cell */
.ex-cell {
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 9px 12px;
  min-height: 42px;
  font-size: 13px;
  gap: 6px;
}

/* Corner: top-left empty */
.ex-corner { background: var(--bg); }

/* Header row: user avatars + names */
.ex-header-cell {
  background: var(--bg);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 8px;
  gap: 4px;
}
.ex-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.ex-name {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text);
}

/* Row label column */
.ex-label-cell {
  background: var(--bg);
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  justify-content: flex-end;
  text-align: right;
  padding-right: 14px;
}
.ex-other-label { color: var(--muted); font-weight: 400; font-style: italic; }
.ex-total-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
}

/* Amount cells */
.ex-amount-cell { justify-content: flex-end; }
.ex-amount-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.ex-no-amount { color: var(--border); font-size: 16px; margin: auto; }

.ex-amount-cell.is-editable { cursor: pointer; transition: background .1s; }
.ex-amount-cell.is-editable:hover { background: var(--accent-lt); }
.ex-amount-cell.is-editable:hover .ex-no-amount { color: var(--muted); }

/* "Other" row cells */
.ex-other-cell { justify-content: center; background: var(--surface); }
.ex-add-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.ex-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-lt);
}

/* Total row cells */
.ex-total-cell {
  justify-content: flex-end;
  background: var(--bg);
}
.ex-total-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

/* Empty state */
.ex-empty { padding: 20px 0 4px; font-size: 13px; color: var(--muted); }

/* ── Settle Up / payment handles section ─────────────────────────────────── */
.ex-pay-section {
  margin-top: 32px;
}
.ex-pay-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ex-pay-grid {
  display: grid;
  grid-template-columns: 140px repeat(var(--ex-cols, 1), minmax(110px, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--border);
  gap: 1px;
  box-shadow: var(--shadow);
  min-width: max-content;
}
.ex-pay-corner { min-height: 0; padding: 0; }
.ex-pay-cell {
  background: var(--surface);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
}
.ex-pay-cell-self {
  cursor: pointer;
  transition: background .1s;
}
.ex-pay-cell-self:hover { background: var(--accent-lt); }

/* Payment chips */
.pay-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  width: fit-content;
}
.pay-chip-venmo  { background: #e8f4fd; color: #008CFF; border: 1px solid #b3d9f7; }
.pay-chip-zelle  { background: #f2eafb; color: #6D1ED4; border: 1px solid #d9b8f7; }
.pay-chip-paypal { background: #e6f0fb; color: #003087; border: 1px solid #a8c4ea; }
.pay-chip-venmo:hover  { background: #cce5f8; }
.pay-chip-zelle:hover  { background: #e4d1f6; }
.pay-chip-paypal:hover { background: #c8d9f0; }
.pay-chip-add {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 20px;
  color: var(--muted);
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  width: fit-content;
}
.pay-chip-add:hover { border-color: var(--accent); color: var(--accent); }
.pay-chip-empty { font-size: 13px; color: var(--muted); }

/* ── Settlement / split section ─────────────────────────────────────────── */
.ex-split-section {
  margin-top: 32px;
}
.ex-split-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ex-split-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  flex-shrink: 0;
}
.ex-split-methods {
  display: flex;
  gap: 4px;
}
.ex-split-method {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}
.ex-split-method:hover:not(:disabled)  { background: var(--accent-lt); color: var(--accent); border-color: var(--accent); }
.ex-split-method.is-active  { background: var(--accent); color: #fff; border-color: var(--accent); }
.ex-split-method:disabled   { cursor: default; }

/* Config list */
.ex-split-config {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 24px;
}
.ex-split-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
}
.ex-split-row:last-of-type { border-bottom: none; }
.ex-split-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
}
.ex-split-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ex-split-input {
  width: 80px;
  text-align: right;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}
.ex-split-input:focus { outline: none; border-color: var(--accent); }
.ex-split-suffix { font-size: 13px; color: var(--muted); }
.ex-split-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg);
  font-size: 12px;
  flex-wrap: wrap;
}
.ex-split-sum-lbl { color: var(--muted); }
.ex-split-sum-val { font-weight: 600; color: var(--text); }
.ex-split-sum-sep { color: var(--border); }
.ex-split-sum-rem { font-weight: 600; }
.ex-split-sum-rem.is-ok   { color: var(--ok); }
.ex-split-sum-rem.is-warn { color: var(--err); }
.ex-split-sum-val.is-ok   { color: var(--ok); }
.ex-split-sum-val.is-warn { color: var(--err); }

/* Who pays who */
.ex-settle-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ex-settle-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.ex-settle-state {
  padding: 16px;
  font-size: 13px;
  color: var(--muted);
}
.ex-settle-ok { color: var(--ok) !important; }
.ex-settle-list { }
.ex-settle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ex-settle-row:last-child { border-bottom: none; }
.ex-settle-people {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.ex-settle-person {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ex-settle-name  { font-size: 13px; font-weight: 500; white-space: nowrap; }
.ex-settle-arrow { color: var(--muted); font-size: 14px; flex-shrink: 0; }
.ex-settle-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ex-settle-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.pay-chip-sm { font-size: 11px; padding: 2px 7px; }
.ex-av-sm { width: 28px !important; height: 28px !important; font-size: 10px !important; }

/* Payment modal hint text */
.pay-modal-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px;
}

/* Compact modal variant */
.modal-card-sm { max-width: 420px; }

/* Amount field with $ prefix */
.amount-field {
  position: relative;
  display: flex;
  align-items: center;
}
.amount-prefix {
  position: absolute;
  left: 10px;
  font-size: 14px;
  color: var(--muted);
  pointer-events: none;
  line-height: 1;
}
.amount-field input[type="number"] { padding-left: 22px; }

/* Attendees sidebar card */
.vw-attendees-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.vw-attendees-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
/* Compact attendee list inside the sidebar — strip card styling, use dividers */
.vw-attendees-card .att-section      { margin-bottom: 0; padding: 10px 14px 6px; }
.vw-attendees-card .att-section-head { margin-bottom: 6px; }
.vw-attendees-card .att-list         { gap: 0; }
.vw-attendees-card .att-item {
  padding: 8px 0;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.vw-attendees-card .att-list > .att-item:last-child { border-bottom: none; }
.vw-attendees-card .att-info { min-width: 0; }
.vw-attendees-card .att-name { font-size: 13px; }
.vw-attendees-card .att-sub  { font-size: 11px; }
.vw-attendees-card .att-rsvp { font-size: 11px; padding: 2px 6px; }
.vw-attendees-card .att-role { font-size: 10px; padding: 2px 5px; }
.vw-attendees-card .att-av   { width: 28px; height: 28px; font-size: 10px; }

/* ── Merged schedule+meals grid (vg-*) ───────────────────────────────────── */

.vg-grid {
  display: grid;
  grid-template-columns: 82px repeat(var(--day-count, 1), minmax(140px, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--border); /* shows as 1px gap lines */
  gap: 1px;
  box-shadow: var(--shadow);
  min-width: 340px;
}

.vg-cell { background: var(--surface); }

/* Corner (top-left empty cell) */
.vg-corner { background: var(--bg); }

/* Day header row */
.vg-day-header {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  min-height: 48px;
}

/* Row label column */
.vg-row-label {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 10px 8px 10px 4px;
  gap: 4px;
}
.vg-slot-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
}
.vg-meal-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  opacity: .75;
}

/* Body cell: flex column — activity on top, meal cook strip on bottom */
.vg-body-cell {
  display: flex;
  flex-direction: column;
  background: transparent; /* children cover it */
}

.vg-activity {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  min-height: 90px;
  flex: 1;
}

/* Meal cook strip */
.vg-cook-row {
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  min-height: 32px;
  cursor: default;
  transition: background .1s;
}
.vg-cook-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-no-cook   { font-size: 12px; color: var(--muted); }

/* Empty cook row — matches btn-add-day style */
.vg-cook-row--empty {
  background: var(--accent-lt);
  border: 1px solid #a8d5b8;
  border-radius: 5px;
  margin: 0 2px 6px;
  justify-content: center;
  min-height: 28px;
  box-sizing: border-box;
}
.vg-cook-row--empty .vg-no-cook { color: var(--accent); font-size: 13px; font-weight: 400; }
.view-page.is-editing .vg-cook-row--empty:hover { background: #b7e4c7; border-color: var(--accent); }
.view-page.is-editing .vg-cook-row--empty:hover .vg-no-cook { color: var(--accent-dk); }
.view-page:not(.is-editing) .vg-cook-row--empty { opacity: .5; cursor: default; }

/* Menu text row in the merged grid */
.vg-menu-row {
  display: none;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.vg-menu-row.has-text { display: block; }
.is-editing .vg-menu-row { display: block; }
.vg-menu-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--text);
  padding: 5px 8px;
  outline: none;
}
.vg-menu-input::placeholder { color: var(--muted); font-style: italic; }
.is-editing .vg-menu-input:focus { background: var(--accent-lt); }
.view-page:not(.is-editing) .vg-menu-input { pointer-events: none; }

/* Edit mode toggle button */
.btn-edit-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.btn-edit-mode:hover  { border-color: var(--accent); color: var(--accent); }
.btn-edit-mode.is-editing {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── View-page edit-mode guards ──────────────────────────────────────────────
   On view.php (body.view-page), editing affordances are hidden unless in edit mode.
   On event.php the meals tab is always editable — these rules don't apply there. */

.view-page:not(.is-editing) .btn-add-slot          { display: none !important; }
.view-page:not(.is-editing) .sched-item            { pointer-events: none; cursor: default; }
.view-page:not(.is-editing) .vg-cook-row           { cursor: default; }
.view-page:not(.is-editing) .vg-cook-row:hover     { background: var(--bg) !important; }
/* event.php meals tab cook cells still work when view-page class is absent */
.view-page.is-editing .vg-cook-row { cursor: pointer; }
.view-page.is-editing .vg-cook-row:hover { background: var(--accent-lt); }

/* Responsive: stack columns below 860px */
@media (max-width: 860px) {
  .vw-body { grid-template-columns: 1fr; padding: 16px 16px 40px; }
  .vw-side-col { position: static; }
}
@media (max-width: 600px) {
  .vg-grid { min-width: 280px; }
  .vg-row-label { padding: 8px 6px 8px 2px; }
  .vg-slot-name { font-size: 9px; }
  .vg-meal-label { display: none; }
}

/* ── Tablet / mobile: stack panels ──────────────────────────────────────── */
@media (max-width: 900px) {
  .ne-main   { max-width: 780px; }
  .ne-layout { grid-template-columns: 1fr; }
  .ne-panel  { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Event action buttons (header) ──────────────────────────────────────── */

.event-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* RSVP chip — default (no answer yet) */
@keyframes rsvp-nudge {
  0%, 100% { box-shadow: 0 0 0 0   rgba(45,106,79,.55); }
  55%      { box-shadow: 0 0 0 6px rgba(45,106,79,0);   }
}
.rsvp-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: border-color .12s, color .12s, background .12s;
  white-space: nowrap;
}
/* Unanswered — no RSVP modifier class present */
.rsvp-chip:not(.rsvp-chip-yes):not(.rsvp-chip-no):not(.rsvp-chip-maybe) {
  background: var(--accent-lt);
  border-color: var(--accent);
  color: var(--accent);
  animation: rsvp-nudge 2.2s ease-out infinite;
}
.rsvp-chip:not(.rsvp-chip-yes):not(.rsvp-chip-no):not(.rsvp-chip-maybe):hover {
  background: #b7e4c7;
  animation-play-state: paused;
}
.rsvp-chip:hover          { border-color: var(--text); color: var(--text); }
.rsvp-chip-yes            { background: #dcfce7; border-color: #86efac; color: #15803d; }
.rsvp-chip-yes:hover      { background: #bbf7d0; }
.rsvp-chip-no             { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.rsvp-chip-no:hover       { background: #fecaca; }
.rsvp-chip-maybe          { background: #fef9c3; border-color: #fde047; color: #854d0e; }
.rsvp-chip-maybe:hover    { background: #fef08a; }

@media (max-width: 700px) {
  .event-banner {
    /* Keep banner sticky on mobile so the hero always stays in view */
    position: sticky;
    top: 0;
    height: auto;
    min-height: 54px;
    padding: 10px 16px;
    flex-wrap: nowrap;
    gap: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .ev-banner-dates { display: none; }
  .event-actions { gap: 6px; }
  /* Hide Edit button from banner on mobile — tap the title instead */
  #btn-edit { display: none; }
  /* Indicate title is tappable */
  #hero-title { cursor: pointer; }
  /* Remove ✕ close button — the < button is enough */
  #nav-close { display: none; }
  /* Tighten main padding on mobile to maximise content width */
  #page-main { padding: 12px 12px 80px; }
}

/* ── Event tabs ──────────────────────────────────────────────────────────── */

/* Outer wrapper: sticky chrome (border, bg, z-index) */
.ev-tabs-outer {
  position: sticky;
  top: 60px; /* just below the sticky event-banner */
  z-index: 9;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
}
/* Inner row: flex tab buttons */
.ev-tabs {
  display: flex;
  padding: 0 28px;
  gap: 0;
}
.ev-tab {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* overlap the parent border-bottom */
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.ev-tab:hover { color: var(--text); }
.ev-tab.ev-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Summary tab panel ──────────────────────────────────────────────────── */

.sum-wrap { padding: 0 28px 48px; }

.sum-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0 8px;
  margin-bottom: 0;
}

.sum-section { margin-bottom: 40px; }

.sum-section-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Attendees in summary: two-column layout since it's full width */
#sum-attendees .att-section { margin-bottom: 20px; }
#sum-attendees .att-list    { column-count: 2; column-gap: 24px; }
#sum-attendees .att-item    { break-inside: avoid; }

/* ── Summary schedule pivot grid (days = rows, slots = columns) ──────────── */
.sum-sg {
  display: grid;
  grid-template-columns: 90px repeat(4, 1fr) minmax(110px, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--border); /* gap colour, same pattern as .schedule-grid */
  gap: 1px;
}
.sum-sg-cell {
  padding: 8px 10px;
  box-sizing: border-box;
}
.sum-sg-corner,
.sum-sg-slot-hdr,
.sum-sg-day-lbl  { background: var(--bg); }

.sum-sg-slot-hdr {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
}
.sum-sg-day-lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
}
.sum-sg-day-lbl .day-dow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  line-height: 1;
}
.sum-sg-day-lbl .day-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.sum-sg-body {
  background: var(--surface);
  min-height: 56px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* Schedule item cards inside summary grid — not interactive */
.sum-sg-body .sched-item { cursor: default; }
.sum-sg-body .sched-item:hover { filter: none; }
/* Stay column */
.sum-sg-stay { justify-content: center; gap: 4px; }
.sum-stay-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.sum-stay-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: var(--primary);
  border-radius: 3px;
  padding: 1px 5px;
  align-self: flex-start;
}
.sum-stay-badge-out { background: var(--muted); }

/* Tab panels — hidden/shown via JS; [hidden] { display:none } global rule handles it */

/* Footer row inside a tab panel (e.g. "Meals & Cooks →") */
.ev-tab-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* Placeholder state for stub tabs */
.ev-placeholder {
  padding: 40px 0;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 700px) {
  /* Tab bar outer: sits below the sticky 54px banner */
  .ev-tabs-outer { top: 54px; }

  /* Tab bar inner: horizontal scroll, no vertical drift on swipe */
  /* padding-right leaves room past the right fade overlay so the last tab scrolls fully into view */
  .ev-tabs {
    padding: 0 32px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .ev-tabs::-webkit-scrollbar { display: none; }
  .ev-tab { padding: 10px 12px; font-size: 13px; flex-shrink: 0; }

  /* Left + right chevron fade overlays — shown via JS-toggled classes */
  .ev-tabs-outer::before,
  .ev-tabs-outer::after {
    position: absolute;
    top: 0; bottom: 2px;
    width: 32px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 300;
    color: var(--muted);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 1;
  }
  .ev-tabs-outer::before {
    content: '‹';
    left: 0;
    background: linear-gradient(to left, transparent, var(--surface) 55%);
    justify-content: flex-start;
    padding-left: 6px;
  }
  .ev-tabs-outer::after {
    content: '›';
    right: 0;
    background: linear-gradient(to right, transparent, var(--surface) 55%);
    justify-content: flex-end;
    padding-right: 6px;
  }
  .ev-tabs-outer.has-left::before  { opacity: 1; }
  .ev-tabs-outer.has-right::after  { opacity: 1; }

  /* Travel / Expenses / Summary: allow horizontal scroll within the panel */
  #tab-travel,
  #tab-expenses,
  #tab-summary {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Travel: use max-content width so the 4-column table can overflow and scroll.
     #travel-content must also be max-content so the scroll container sees the full width. */
  #travel-content { width: max-content; min-width: 100%; }
  .trav-table { width: max-content; min-width: 100%; }
  .trav-row   { grid-template-columns: 150px 110px 160px 160px; }

  /* Expenses: single scroll container — ex-wrap defers overflow to #tab-expenses
     so the header row, pay grid, and split section all scroll together */
  #expenses-container { width: max-content; min-width: 100%; }
  .ex-wrap { overflow-x: visible; }

  /* Banner: hide location chip and Connect AI — give the title full flex-1 */
  #hero-location,
  #btn-connect-ai { display: none; }

  /* Keep the RSVP chip fully on screen — the info area shrinks, not the action area */
  #event-actions { flex-shrink: 0; }

  /* Connect AI in the nav drawer — mobile only */
  .nav-link.nav-link-ai-mobile { display: flex; }

  /* Modals: full-width sheet, prevent page scroll bleed */
  .modal-backdrop {
    padding: 20px 0 0;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .modal-card {
    width: 100%;
    max-width: 100% !important;
    border-radius: 12px 12px 0 0;
    /* --real-vh is set by JS from window.innerHeight, which correctly excludes the
       iOS Safari toolbar (unlike 100dvh which is unreliable there) */
    max-height: calc(var(--real-vh, 100dvh) - 20px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: 0;
  }
  /* Sticky footer — pins to the bottom of the visible modal area so buttons are
     always tappable regardless of form length. */
  .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 14px 20px;
    margin-top: 8px;
  }

  /* iOS Safari auto-zooms on any input with font-size < 16px.
     Force 16px on all form controls inside modals to prevent that behaviour. */
  .modal-card input,
  .modal-card select,
  .modal-card textarea,
  .ne-picker-search {
    font-size: 16px !important;
  }
}

/* ── Attendees tab ───────────────────────────────────────────────────────── */

.att-section { margin-bottom: 28px; }

.att-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.att-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.att-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-lt);
  color: var(--accent-dk);
  border-radius: 20px;
  padding: 1px 8px;
  line-height: 1.7;
  white-space: nowrap;
}

.att-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.att-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.att-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.att-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.att-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-role {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* Role colour variants */
.att-role--owner  { background: #eeedfe; color: #3c3489; }
.att-role--admin  { background: var(--accent-lt); color: var(--accent-dk); }
.att-role--member { background: var(--bg); color: var(--muted); border: 1px solid var(--border); font-weight: 500; }
.att-role--guest  { background: var(--bg); color: var(--muted); border: 1px solid var(--border); font-weight: 500; }
/* Editable role badge */
.att-role-editable { cursor: pointer; user-select: none; }
.att-role-editable:hover { filter: brightness(.92); }
.att-role-caret { font-size: 9px; opacity: .7; margin-left: 1px; }
/* Make member/guest editable badges look interactive (not just a muted label) */
.att-role--member.att-role-editable,
.att-role--guest.att-role-editable {
  color: var(--text);
  border-color: rgba(0,0,0,.22);
}
/* Role picker dropdown */
.att-role-dropdown {
  position: fixed;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  padding: 4px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.att-role-opt {
  background: none;
  border: none;
  border-radius: 5px;
  padding: 7px 12px;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}
.att-role-opt:hover:not(:disabled) { background: var(--accent-lt); color: var(--accent); }
.att-role-opt.is-current           { font-weight: 700; opacity: .5; cursor: default; }
.att-rsvp {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.att-rsvp-yes     { background: var(--ok-bg);   color: var(--ok);  }
.att-rsvp-no      { background: var(--err-bg);  color: var(--err); }
.att-rsvp-maybe   { background: #fefce8;        color: #a16207;    }
.att-rsvp-invited { background: var(--bg);      color: var(--muted); border: 1px solid var(--border); }

/* Editable RSVP badge — caret + hover affordance */
.att-rsvp-editable {
  cursor: pointer;
  user-select: none;
  gap: 3px;
  display: inline-flex;
  align-items: center;
}
.att-rsvp-editable:hover { filter: brightness(.92); }
.att-rsvp-caret { font-size: 9px; opacity: .7; }

/* Floating RSVP status picker */
.att-rsvp-dropdown {
  position: fixed;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  padding: 4px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.att-rsvp-opt {
  background: none;
  border: none;
  border-radius: 5px;
  padding: 7px 12px;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}
.att-rsvp-opt:hover:not(:disabled)  { background: var(--accent-lt); color: var(--accent); }
.att-rsvp-opt.is-current            { font-weight: 700; opacity: .5; cursor: default; }

/* ── Per-row action menu button ─────────────────────────────────────────── */
.att-menu-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
}
.att-menu-btn:hover { background: var(--bg); border-color: var(--border); color: var(--text); }

/* ── Action popup (floating, same pattern as cook picker) ────────────────── */
.att-menu-popup {
  position: fixed;
  z-index: 400;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.14);
  padding: 6px;
  min-width: 160px;
}
.att-menu-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 2px 6px 6px;
}
.att-menu-role-grid {
  display: flex;
  gap: 4px;
  padding: 0 2px 4px;
}
.att-role-btn {
  flex: 1;
  padding: 5px 6px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
  white-space: nowrap;
}
.att-role-btn:hover:not(:disabled)  { border-color: var(--accent); color: var(--accent); background: var(--accent-lt); }
.att-role-btn.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
.att-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.att-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .1s;
}
.att-menu-item:hover  { background: var(--bg); }
.att-menu-remove      { color: var(--err); }
.att-menu-remove:hover { background: var(--err-bg); }

/* ── Attendees tab top bar ───────────────────────────────────────────────── */
.att-top-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

/* ── Invite modal body ───────────────────────────────────────────────────── */
/* ── Invite / Add Attendees modal ────────────────────────────────────────── */
.modal-card.invite-modal { max-width: 560px; }

.invite-contacts-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.invite-contacts-toggle.is-open { background: var(--accent-lt); border-color: var(--accent); color: var(--accent); }
.invite-contacts-toggle.is-open #invite-contacts-chevron { transform: rotate(180deg); }

.invite-modal-body {
  padding: 14px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invite-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.invite-hint code {
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
  font-size: 12px;
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
}
.invite-modal-body .att-add-textarea {
  margin-bottom: 4px;
}
.modal-card .invite-modal-body + .modal-footer {
  padding: 8px 20px 20px;
}

/* ── Add-attendees panel ─────────────────────────────────────────────────── */
.att-add-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.att-add-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-lt);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.att-add-toggle:hover { background: #d6e8fd; border-color: var(--accent); }
/* Compact variant for the sidebar */
.att-add-toggle-sm { font-size: 12px; padding: 5px 10px; }

.att-add-panel {
  margin-top: 12px;
}
.att-add-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.att-add-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}
.att-add-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Sidebar add-panel: constrained padding */
.vw-att-add-wrap {
  padding: 10px 14px 12px;
  margin-top: 0;
  border-top: 1px solid var(--border);
}

/* ── Travel tab ─────────────────────────────────────────────────────────── */

.trav-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.trav-row {
  display: grid;
  grid-template-columns: 1fr 140px 1fr 1fr;
  align-items: start;
  border-bottom: 1px solid var(--border);
  min-height: 46px;
}
.trav-row:last-child { border-bottom: none; }
.trav-hdr {
  background: var(--bg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  min-height: 34px;
}
.trav-row:not(.trav-hdr):hover { background: var(--surface-hover, rgba(0,0,0,.02)); }
.trav-hdr { align-items: center; }

.trav-col { padding: 8px 12px; min-width: 0; }

.trav-col-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  align-self: center;  /* keep name+avatar centred even when leg cells are taller */
}
.trav-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.trav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mode badges */
.trav-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.trav-badge--flying  { background: #e6f1fb; color: #0c447c; }
.trav-badge--driving { background: #e1f5ee; color: #085041; }
.trav-badge--riding  { background: #eeedfe; color: #3c3489; }
.trav-badge--other   { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.trav-unknown { font-size: 13px; color: var(--muted); }

/* Leg summary cells */
.trav-col-leg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.trav-leg-main { color: var(--text); font-variant-numeric: tabular-nums; }
.trav-leg-sub  { font-size: 11px; color: var(--muted); }

/* Mode cell aligns with the name even when leg cells are tall */
.trav-col-mode { align-self: center; }

/* Shared token for all compact travel inputs/selects so they stay in sync */
.trav-mode-sel,
.trav-inline-inp,
.trav-inline-sel {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-family: inherit;
  padding: 3px 6px;
  height: 28px;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}
.trav-mode-sel { cursor: pointer; }
.trav-mode-sel:focus,
.trav-inline-inp:focus,
.trav-inline-sel:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background: var(--surface);
}
.trav-inline-inp::placeholder { color: var(--muted); font-style: italic; }

/* date/time: keep font overrides since browsers often reset these for native pickers */
.trav-inline-inp[type="date"],
.trav-inline-inp[type="time"] {
  font-family: inherit;
  font-size: 12px;
  padding: 0 4px; /* browser controls vertical spacing for native date/time chrome */
}

/* Inline leg input grid (2×2 for flying, 1×2 for driving) */
.trav-inline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.trav-inline-grid--2 { grid-template-columns: 1fr 1fr; }

/* ── Modal variants ──────────────────────────────────────────────────────── */

/* Shared backdrop class — all event-page modals use this */
.modal-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 200;
  padding: 40px 24px 24px;
  overflow-y: auto;
}

.modal-card-sm    { max-width: 340px; }
.modal-card-lg    { max-width: 520px; }
.modal-card--wide { max-width: 720px; width: 100%; }

.modal-card--wide .ai-modal-body {
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Connect AI modal ────────────────────────────────────────────────────── */

.ai-modal-body  { padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.ai-intro       { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }

/* Numbered sections */
.ai-section       { display: flex; flex-direction: column; gap: 6px; }
.ai-section-head  { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.ai-section-num   {
  width: 24px; height: 24px; flex-shrink: 0;
  background: #ede9fe; color: #7c3aed;
  border-radius: 50%; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ai-section-sub   { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; padding-left: 34px; }
.ai-section-sub em { color: var(--text); font-style: normal; font-weight: 500; }

/* Connector URL row */
.ai-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4f4f6;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 6px;
}
.ai-mcp-url {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
}

/* The copyable prompt */
.ai-prompt-wrap {
  position: relative;
  margin-top: 4px;
}
.ai-prompt-pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 6px;
  padding: 14px 16px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 260px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  color: #cdd6f4;
}
.ai-copy-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #fff; }

/* Prerequisites pill */
.ai-prereq {
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}
.ai-prereq strong { color: var(--text); }
.ai-prereq a      { color: var(--accent); }

/* Manual fallback (details/summary) */
.ai-manual         { border-top: 1px solid var(--border); padding-top: 16px; }
.ai-manual summary {
  font-size: 13px; color: var(--muted); cursor: pointer;
  list-style: none; user-select: none;
}
.ai-manual summary::-webkit-details-marker { display: none; }
.ai-manual summary::before { content: '▸ '; }
.ai-manual[open] summary::before { content: '▾ '; }
.ai-manual-steps {
  margin: 12px 0 0 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px; line-height: 1.6;
}
.ai-manual-steps a    { color: var(--accent); }
.ai-manual-steps code { font-size: 12px; }

/* Shared: config/JSON block inside manual section */
.ai-config-wrap { position: relative; }
.ai-config-pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  white-space: pre;
  word-break: normal;
}

.ai-paths       { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.ai-path-row    { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.ai-os          { font-size: 11px; font-weight: 600; color: var(--muted); min-width: 52px; }
.ai-path-row code { font-size: 11px; color: var(--text); word-break: break-all; }

.ai-token-note {
  font-size: 12px; color: var(--muted);
  background: #fefce8; border: 1px solid #fde68a;
  border-radius: 6px; padding: 8px 12px; margin: 0;
}

/* ── RSVP modal ──────────────────────────────────────────────────────────── */

.rsvp-options {
  display: flex;
  gap: 10px;
  padding: 16px 20px 20px;
}
.rsvp-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border: 2px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.rsvp-option:hover          { border-color: var(--accent); background: var(--accent-lt); }
.rsvp-option-active         { border-color: var(--accent); background: var(--accent-lt); }
.rsvp-opt-icon {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-dk);
}
.rsvp-opt-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ── Share modal ─────────────────────────────────────────────────────────── */

.share-body { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 16px; }

.share-create {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border-radius: 6px;
}

.share-select {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  width: 100%;
}
.share-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,106,79,.14);
}

.label-optional {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

.share-links-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
  margin-bottom: 8px;
}
.share-links-list { display: flex; flex-direction: column; gap: 8px; }

.share-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.share-link-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.share-link-label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-perm-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.share-perm-view    { background: #e0f2fe; color: #0369a1; }
.share-perm-respond { background: var(--accent-lt); color: var(--accent-dk); }

.share-link-btns { display: flex; gap: 6px; flex-shrink: 0; }

.btn-xs {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 5px;
}
.btn-revoke {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 5px;
  background: none;
  border: 1px solid var(--err-bdr);
  color: var(--err);
  cursor: pointer;
  font-weight: 600;
  transition: background .12s;
}
.btn-revoke:hover    { background: var(--err-bg); }
.btn-revoke:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULE & MEALS GRID  (schedule.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header breadcrumb ───────────────────────────────────────────────────── */

.page-crumb {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
}

/* ── Main override for schedule page (no max-width — grid needs full width) ─ */

.sched-main {
  max-width: none;
  padding: 24px 28px 80px;
}
@media (max-width: 700px) {
  .sched-main { padding: 16px 0 80px; }
}

/* ── Outer scroll wrapper ────────────────────────────────────────────────── */

.sg-outer {
  overflow-x: auto;
  /* Small padding so the box-shadow on .sg-grid isn't clipped */
  padding-bottom: 12px;
}

/* ── Grid container ──────────────────────────────────────────────────────── */

.sg-grid {
  /* --col-count is set by JS */
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-width: 560px;
  background: var(--border); /* gap colour — cells sit on top of this */
  box-shadow: var(--shadow);
}

/* ── Header row & slot rows share the same column template ──────────────── */

.sg-head,
.sg-slot-row {
  display: grid;
  grid-template-columns: 90px repeat(var(--col-count, 1), minmax(130px, 1fr));
  gap: 1px; /* exposes .sg-grid background as column lines */
}

/* ── Day header cells ────────────────────────────────────────────────────── */

.sg-head { background: var(--bg); }

.sg-day-header {
  background: var(--bg);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sg-corner { border-bottom: 1px solid var(--border); }

.sg-day-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.sg-day-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* ── Slot rows ───────────────────────────────────────────────────────────── */

.sg-slot-row { border-bottom: 1px solid var(--border); }
.sg-slot-row:last-of-type { border-bottom: none; }

/* Row label cell (left column) */
.sg-slot-label {
  background: var(--bg);
  padding: 10px 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 90px;
}

.sg-slot-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  line-height: 1;
}

/* Meal type tag */
.sg-meal-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  width: fit-content;
  line-height: 1.4;
}
.sg-meal-breakfast { background: #E1F5EE; color: #085041; }
.sg-meal-lunch     { background: #FAEEDA; color: #633806; }
.sg-meal-dinner    { background: #E6F1FB; color: #0C447C; }
.sg-meal-dessert   { background: #FBEAF0; color: #72243E; }

/* ── Day cells (data cells) ──────────────────────────────────────────────── */

.sg-day-cell {
  background: var(--surface);
  padding: 8px 10px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .1s;
}
.sg-day-cell:hover { background: #fafaf8; }

/* Activity textarea */
.sg-activity {
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  width: 100%;
  resize: none;
  flex: 1;
  min-height: 36px;
}
.sg-activity::placeholder { color: #c2bfba; }
.sg-save-error { outline: 2px solid var(--err) !important; border-radius: 2px; }

/* ── Meal row (at bottom of each cell) ──────────────────────────────────── */

.sg-meal-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.sg-meal-abbr {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Assigned cook pill */
.sg-cook-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px 2px 3px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text);
  transition: border-color .1s, background .1s;
}
.sg-cook-pill:hover { border-color: var(--accent); background: var(--accent-lt); }

/* Initials avatar */
.sg-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* "Assign cook" placeholder link */
.sg-no-cook {
  font-size: 11px;
  color: #c2bfba;
  font-style: italic;
  cursor: pointer;
  transition: color .1s;
}
.sg-no-cook:hover { color: var(--muted); }

/* ── Cook picker dropdown ────────────────────────────────────────────────── */

.sg-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
  /* position: fixed is set inline by JS */
}

.sg-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background .1s;
}
.sg-picker-item:hover     { background: var(--bg); }
.sg-picker-selected       { color: var(--accent-dk); font-weight: 600; }
.sg-picker-selected:hover { background: var(--accent-lt); }

.sg-picker-unassign {
  color: var(--err);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  border-radius: 4px 4px 0 0;
  margin-bottom: 2px;
}
.sg-picker-unassign:hover { background: var(--err-bg); }

.sg-picker-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* ── "Add another day" footer row ───────────────────────────────────────── */

.sg-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  border-top: 1px solid var(--border);
  background: var(--surface);
  transition: color .1s, background .1s;
  border-radius: 0 0 10px 10px;
}
.sg-add-row:hover { color: var(--text); background: var(--bg); }

.sg-plus-icon {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  flex-shrink: 0;
}

.muted { color: var(--muted); font-style: normal; }

/* ── Toast notification ─────────────────────────────────────────────────────── */

.app-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1f2937;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 9999;
}
.app-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Contacts page ──────────────────────────────────────────────────────────── */

.contacts-main {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 12px 24px;
  box-sizing: border-box;
  height: calc(100vh - var(--header-h));
}

/* ── Groups sidebar card ── */

.contacts-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.contacts-sidebar-head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.contacts-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.contacts-group-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1;
}
.contacts-group-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .12s;
}
.contacts-group-item:hover { background: var(--accent-lt); }
.contacts-group-item.is-active { background: var(--accent-lt); color: var(--accent); font-weight: 600; }
.cg-name  { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-count { font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; }
.cg-edit  { opacity: 0; font-size: 16px; padding: 2px 4px; flex-shrink: 0; }
.contacts-group-item:hover .cg-edit  { opacity: 1; }
.contacts-group-item.is-active .cg-count { background: transparent; border-color: var(--accent); color: var(--accent); }

/* ── Contacts body card ── */

.contacts-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.contacts-search-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}
.contacts-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.contacts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.contacts-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.contacts-row:last-child { border-bottom: none; }
.contacts-row:hover { background: var(--accent-lt); }
.contacts-row--add { justify-content: center; padding: 16px; border: none; }
.ct-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.ct-info { flex: 1; min-width: 0; }
.ct-name { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-sub  { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.ct-actions { display: flex; gap: 6px; flex-shrink: 0; opacity: 0; transition: opacity .1s; }
.contacts-row:hover .ct-actions { opacity: 1; }

.btn-xs { font-size: 12px; padding: 3px 8px; }
.btn-danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; border-radius: 6px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
.btn-danger:hover { background: #fca5a5; }

@media (max-width: 640px) {
  .contacts-main { grid-template-columns: 1fr; padding: 0; }

  /* Hide CSV upload on mobile */
  #btn-import-csv { display: none; }

  /* Groups: show as a horizontal scrollable pill bar above the contact list */
  .contacts-sidebar {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex-direction: row;
    overflow: visible;
    padding: 8px 16px 0;
  }
  .contacts-sidebar-head { display: none; }
  .contacts-group-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 4px 0 6px;
  }
  .contacts-group-list::-webkit-scrollbar { display: none; }
  .contacts-group-item {
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid var(--border);
    flex-shrink: 0;
  }
  .contacts-group-item:hover { background: var(--accent-lt); }
  .contacts-group-item.is-active {
    background: var(--accent-lt);
    border-color: var(--accent);
  }
  .cg-edit  { display: none; } /* no edit affordance on mobile pills */
  .cg-count { display: none; } /* count takes up too much pill space */

  .contacts-body { padding: 8px 16px 24px; }
}

/* ── Contact / group picker (invite panels) ─────────────────────────────────── */

.ne-contact-picker {
  margin-bottom: 10px;
  position: relative;
}
.ne-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 320px;
  max-height: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 200;
}
.ne-picker-search {
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  width: 100%;
}
/* Inline variant — used in the Add Attendees modal (not floating) */
.ne-picker-panel--inline {
  position: static;
  width: 100%;
  max-height: none;
  border-radius: 8px;
  box-shadow: none;
  z-index: auto;
  margin-top: 8px;
}

/* Two-column body below the search bar */
.ne-picker-body {
  display: flex;
  height: 260px;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

/* Left: group list */
.ne-picker-sidebar {
  width: 140px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ne-picker-sidebar-hd {
  padding: 7px 10px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.ne-picker-group-list {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  overflow-y: auto;
  flex: 1;
}
.ne-picker-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  transition: background .1s;
  gap: 4px;
}
.ne-picker-group-item:hover { background: var(--accent-lt); }
.ne-picker-group-item.is-active {
  background: var(--accent);
  color: #fff;
}
.ne-picker-group-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-picker-group-item-count {
  font-size: 10px;
  font-weight: 400;
  opacity: .65;
  flex-shrink: 0;
}

/* Right: contact list */
.ne-picker-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.ne-picker-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
}
.ne-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  transition: background .1s;
}
.ne-picker-item:hover { background: var(--accent-lt); }

/* Checkbox variant (group members) */
.ne-picker-item--check { padding: 5px 10px; }
.ne-picker-check-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  padding: 2px 0;
}
.ne-picker-check-label input[type=checkbox] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.ne-picker-info { flex: 1; min-width: 0; }
.ne-picker-name { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-picker-sub  { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-picker-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* Action bar at bottom of contact column when a group is selected */
.ne-picker-group-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.ne-picker-sel-btns { display: flex; gap: 4px; }

/* Legacy pill-style groups (new-event picker, kept for compatibility) */
.ne-picker-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.ne-picker-groups:empty { display: none; }
.ne-picker-group-btn {
  background: var(--accent-lt);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.ne-picker-group-btn:hover { background: var(--accent); color: #fff; }

/* ── Public RSVP page ───────────────────────────────────────────────────────── */

.rsvp-body {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 64px;
}
.rsvp-shell {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rsvp-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.rsvp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.rsvp-card--center { text-align: center; }
.rsvp-error-title { margin: 0 0 8px; font-size: 20px; }
.rsvp-event-header { margin-bottom: 16px; }
.rsvp-event-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.rsvp-event-meta { font-size: 14px; color: var(--muted); margin: 0 0 4px; }
.rsvp-event-organiser { font-size: 13px; color: var(--muted); margin: 0; }
.rsvp-event-desc { font-size: 14px; color: var(--text); margin: 0 0 20px; white-space: pre-wrap; }
.rsvp-picker-label { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.rsvp-btn-row { display: flex; gap: 10px; margin-bottom: 14px; }
.rsvp-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 10px;
  border: 2px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  transition: all .15s;
}
.rsvp-btn--yes:hover,   .rsvp-btn--yes.is-selected   { background: #dcfce7; border-color: #4ade80; color: #166534; }
.rsvp-btn--no:hover,    .rsvp-btn--no.is-selected     { background: #fee2e2; border-color: #f87171; color: #991b1b; }
.rsvp-btn--maybe:hover, .rsvp-btn--maybe.is-selected  { background: #fef9c3; border-color: #facc15; color: #854d0e; }
.rsvp-note {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  background: var(--bg);
  color: var(--text);
}
.rsvp-confirm { text-align: center; padding: 12px 0; }
.rsvp-confirm-msg { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.rsvp-footer { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.rsvp-signup-nudge { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }

/* ── Location picker ─────────────────────────────────────────────────────── */
.loc-field        { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.loc-field label  { font-size: 13px; color: var(--muted); }
.loc-picker       { position: relative; }
.loc-input        { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
                    font-size: 14px; background: var(--bg); color: var(--text); box-sizing: border-box; }
.loc-input:focus  { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.loc-suggestions  { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200;
                    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
                    box-shadow: 0 4px 16px rgba(0,0,0,.12); list-style: none; margin: 0; padding: 4px 0;
                    max-height: 240px; overflow-y: auto; }
.loc-suggestion   { padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.loc-suggestion:hover, .loc-suggestion:focus { background: var(--surface); }
.loc-sug-name     { font-size: 14px; font-weight: 500; color: var(--text); }
.loc-sug-full     { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Static map deep-link buttons ────────────────────────────────────────── */
.map-link          { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
                     font-weight: 500; color: var(--accent-dk); text-decoration: none;
                     padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
                     background: var(--bg); transition: background .12s, border-color .12s; }
.map-link:hover    { background: var(--surface); border-color: var(--accent); }

/* ── Inline map preview (inside modals) ──────────────────────────────────── */
.inline-map-wrap   { margin: 6px 0 4px; border-radius: 8px; overflow: hidden;
                     border: 1px solid var(--border); }
.inline-map-img    { display: block; width: 100%; height: 160px; object-fit: cover; }
.inline-map-links  { display: flex; gap: 12px; padding: 8px 10px; background: var(--bg);
                     border-top: 1px solid var(--border); }

/* ── Event card tiny map thumbnail ───────────────────────────────────────── */
.ec-map-thumb      { width: 72px; height: 54px; object-fit: cover; border-radius: 6px;
                     flex-shrink: 0; align-self: center; margin-left: auto; opacity: .9; }

/* Banner location chip */
.ev-banner-location { font-size: 12px; color: var(--muted); white-space: nowrap;
                      flex-shrink: 0; padding-left: 10px; }
.ev-banner-location:not([hidden])::before { content: ' · '; white-space: pre; }

/* ── RSVP inline registration ────────────────────────────────────────────── */
.rsvp-signup-panel  { margin-top: 4px; }
.rsvp-signup-heading { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 12px; text-align: center; }
.rsvp-signup-form   { display: flex; flex-direction: column; gap: 10px; }
.rsvp-signup-label  { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.rsvp-signup-label input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--bg); color: var(--text); }
.rsvp-signup-label input[readonly] { background: var(--surface); color: var(--muted); }
.rsvp-signup-alt    { font-size: 12px; color: var(--muted); text-align: center; margin: 8px 0 0; }

/* ── Verify / deleted account screens ───────────────────────────────────── */
.auth-card--center  { text-align: center; }
.auth-title-sm      { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.auth-subtext       { font-size: 14px; color: var(--muted); margin: 0 0 20px; line-height: 1.5; }
.auth-actions       { display: flex; flex-direction: column; gap: 10px; }
.verify-icon        { font-size: 2.5rem; margin-bottom: 10px; color: var(--accent); }
.form-success       { background: #dcfce7; border: 1px solid #4ade80; color: #166534; border-radius: 6px; padding: 8px 12px; font-size: 13px; text-align: center; }

/* ── Profile avatar section ──────────────────────────────────────────────── */
.profile-avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 4px;
  flex-wrap: wrap;
}
.profile-avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.profile-avatar-placeholder {
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-avatar-status {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  width: 100%;
}

/* ── Nav avatar ──────────────────────────────────────────────────────────── */
.nav-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
}
/* Hide person icon whenever the avatar image is visible */
.nav-avatar-img:not([hidden]) + .nav-user-icon { display: none !important; }

/* ── Phone field ─────────────────────────────────────────────────────────── */
.phone-field-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.phone-country-select {
  width: 110px;
  flex-shrink: 0;
  padding: 9px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.phone-number-input {
  flex: 1;
  min-width: 0;
}

/* ── SMS consent checkbox ────────────────────────────────────────────────── */
.sms-consent-label {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.45;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.sms-consent-label input[type=checkbox] {
  margin-top: 2px;
}

/* ── Profile danger zone ─────────────────────────────────────────────────── */
.profile-danger-zone { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 16px; }
.danger-summary     { font-size: 13px; color: var(--err); cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; }
.danger-summary::before { content: '›'; font-size: 16px; transition: transform .15s; }
details[open] .danger-summary::before { transform: rotate(90deg); }
.danger-body        { padding-top: 14px; }
.danger-body p      { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.danger-body label  { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.danger-body input  { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--bg); color: var(--text); }

/* ── Contacts: group checkboxes in contact modal ─────────────────────────── */
.contact-groups-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 130px;
  overflow-y: auto;
}
.contact-group-check-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  cursor: pointer;
  padding: 3px 0;
}
.ct-no-groups {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* ── Contacts: drag-to-group highlight ───────────────────────────────────── */
.contacts-group-item.drag-over {
  background: var(--accent-lt);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* ── CSV import modal ────────────────────────────────────────────────────── */
.csv-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  transition: border-color .15s, background .15s;
  cursor: default;
}
.csv-drop-zone.dz-over {
  border-color: var(--accent);
  background: var(--accent-lt);
}
.csv-dz-text { font-size: 14px; margin: 0; }
.csv-dz-hint { font-size: 12px; color: var(--muted); margin: 0; }
.csv-file-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.csv-file-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}
.csv-file-name-row svg { flex-shrink: 0; color: var(--accent); }
.csv-file-name-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-preview-count { font-size: 12px; color: var(--muted); margin: 0; padding-left: 24px; }
.csv-group-section { display: flex; flex-direction: column; gap: 6px; }
.csv-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.csv-group-or { font-size: 12px; color: var(--muted); }
.csv-group-select {
  flex: 1;
  min-width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}
.csv-progress { font-size: 13px; color: var(--muted); margin: 0; }

/* ── Attendees: group deselect checklist ─────────────────────────────────── */
.invite-group-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.igc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.igc-back { font-size: 18px; padding: 2px 6px; }
.igc-group-name { font-size: 13px; font-weight: 600; color: var(--text); }
.igc-notice {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.igc-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}
.igc-member-item { border-bottom: 1px solid var(--border); }
.igc-member-item:last-child { border-bottom: none; }
.igc-check-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text);
}
.igc-member-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.igc-member-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igc-member-sub  { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igc-footer {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRINT / PDF EXPORT  (event.php summary tab OR view.php → window.print())
   ══════════════════════════════════════════════════════════════════════════════ */

@media print {
  /* ── Hide chrome that shouldn't appear in a PDF ── */
  .app-nav,
  .btn-hamburger,
  .nav-overlay,
  .app-header,
  .event-actions,
  .ev-tabs,
  .modal-backdrop,
  #page-loading { display: none !important; }

  /* ── event.php: hide all tab panels except summary; hide the print button ── */
  .ev-tab-panel { display: none !important; }
  #tab-summary  { display: block !important; }
  .sum-actions  { display: none !important; }

  /* ── event.php: remove padding/overflow so summary fills the page ── */
  #page-main   { padding: 0 !important; overflow: visible !important; }
  .ev-content  { overflow: visible !important; }
  .sum-wrap    { padding: 8px 20px 32px !important; }

  /* ── Summary schedule grid: allow overflow for print ── */
  .sum-sg { overflow: visible !important; }

  /* ── Event banner: static, no shadow ── */
  .event-banner {
    position: static;
    box-shadow: none;
    border-bottom: 1px solid #ccc;
    padding: 10px 20px;
  }

  /* ── Full-width single-column body ── */
  .vw-main  { max-width: none; padding: 0; }
  .vw-body  { display: block; padding: 16px 20px 32px; }

  /* ── Grid and expense containers: no clipping in print ── */
  .vw-grid-container,
  .ex-wrap { overflow: visible; }

  /* ── Cards: no shadows or heavy borders in print ── */
  .vg-grid,
  .ex-grid { box-shadow: none; }

  /* ── Attendees: flow below expenses, multi-column ── */
  .vw-side-col {
    position: static;
    width: 100%;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
  }
  .vw-attendees-card {
    box-shadow: none;
    border: none;
    border-radius: 0;
  }
  .vw-attendees-head {
    padding: 0 0 8px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 12px;
  }
  /* Three-column layout for attendee list */
  .vw-attendees-card .att-section { margin-bottom: 16px; }
  .vw-attendees-card .att-list    { column-count: 3; column-gap: 24px; }
  .vw-attendees-card .att-item    { break-inside: avoid; }

  /* ── Hide attendee action menus ── */
  .att-item-menu-btn { display: none !important; }
}

/* ── Legal pages (privacy.php, terms.php) ───────────────────────────────────── */

.legal-page { background: var(--bg); }

.legal-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 28px 80px;
  min-height: 100vh;
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
  gap: 16px;
}

.legal-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.legal-logo-link:hover { opacity: .8; }

.legal-logo-wordmark {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.legal-header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  flex-shrink: 0;
}

.legal-header-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.legal-header-nav a:hover { color: var(--text); }

.legal-header-nav .btn-sm {
  font-size: 13px;
}

/* Article body */
.legal-body {
  color: var(--text);
  line-height: 1.75;
}

/* Inside the app shell, constrain width so long-form text doesn't span the full viewport */
.app-main .legal-body {
  max-width: 760px;
  padding-bottom: 48px;
}

.legal-body > h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

.legal-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 0;
}

.legal-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.legal-body h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 40px 0 10px;
}

.legal-body h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 8px;
}

.legal-body p { margin-bottom: 12px; }

.legal-body ul {
  padding-left: 22px;
  margin-bottom: 14px;
}

.legal-body li { margin-bottom: 5px; }

.legal-body strong { font-weight: 600; }

.legal-body a { color: var(--accent); }

.legal-body address {
  font-style: normal;
  line-height: 1.8;
}

.legal-footer {
  border-top: 1px solid var(--border);
  padding: 24px 0;
  margin-top: 48px;
  font-size: 13px;
  color: var(--muted);
}

/* Nav sidebar legal links */
.nav-legal {
  padding: 4px 16px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.nav-legal a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.nav-legal a:hover { color: var(--text); text-decoration: underline; }

.nav-legal span { color: var(--border); }

/* Hide legal links when nav is collapsed (icon-only mode) */
.app-nav.nav-collapsed .nav-legal { display: none; }

/* T&C / terms checkbox in auth forms */
.terms-label {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 4px;
}

.terms-label a {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 700px) {
  .legal-shell { padding: 0 16px 60px; }
  .legal-header { flex-wrap: wrap; }
  .legal-body > h1 { font-size: 24px; }
}

/* ── Homepage (home.php) ─────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

/* Header — overrides the global <header> rule for the homepage */
.hp-header { height: 64px; padding: 0 40px; }

.hp-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
}

.hp-logo-wordmark { color: var(--text); }

.hp-header-nav { display: flex; align-items: center; gap: 12px; }
.hp-header-nav a { text-decoration: none; }

/* Container */
.hp-container { max-width: 1080px; margin: 0 auto; padding: 0 40px; }

/* Large button modifier (higher specificity than base .btn-*) */
.btn-primary.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-ghost.btn-lg   { padding: 13px 27px; font-size: 15px; }
a.btn-primary, a.btn-ghost { text-decoration: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hp-hero { padding: 72px 0 80px; }

.hp-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hp-hero-headline {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 20px;
  color: var(--text);
}

.hp-hero-sub {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 36px;
}

.hp-hero-ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Visual placeholders ────────────────────────────────────────────────── */

.hp-visual-placeholder {
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 24px;
}

.hp-screenshot-placeholder {
  aspect-ratio: 16 / 7;
  margin-top: 40px;
}

/* ── Problem ────────────────────────────────────────────────────────────── */

.hp-problem {
  background: var(--surface);
  padding: 80px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.hp-problem-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.hp-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 24px;
}

.hp-problem-text {
  font-size: 18px;
  line-height: 1.85;
  color: var(--text);
}

.hp-problem-text p { margin-bottom: 20px; }
.hp-problem-text p:last-child { margin-bottom: 0; }

.hp-problem-kicker { font-style: italic; color: var(--muted); }

/* ── Features ───────────────────────────────────────────────────────────── */

.hp-features { padding: 80px 0; }

.hp-section-head {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 40px;
  color: var(--text);
}

.hp-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.hp-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}

.hp-feature-icon {
  width: 40px;
  height: 40px;
  background: var(--accent-lt);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.hp-feature-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.hp-feature-body {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

/* ── Expenses / Rob ─────────────────────────────────────────────────────── */

.hp-expenses {
  background: var(--surface);
  padding: 80px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.hp-expenses-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.hp-expenses-copy .hp-eyebrow { margin-bottom: 16px; }

.hp-expenses-copy h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  color: var(--text);
}

.hp-expenses-copy p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 14px;
}

.hp-expenses-copy p:last-child { margin-bottom: 0; }

.hp-expenses-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.hp-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 16px;
}

.hp-card-caption {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}

.hp-expense-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.hp-expense-row:last-child { border-bottom: none; padding-bottom: 0; }
.hp-expense-name  { color: var(--text); font-weight: 500; }
.hp-expense-owes  { color: var(--err); font-weight: 600; font-size: 13px; }
.hp-expense-clear { color: var(--ok);  font-weight: 600; font-size: 13px; }

/* ── Claude integration ─────────────────────────────────────────────────── */

.hp-claude {
  background: var(--accent-dk);
  padding: 80px 0;
}

.hp-claude-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.hp-claude .hp-eyebrow { color: var(--accent-lt); margin-bottom: 16px; }

.hp-claude h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  color: #fff;
}

.hp-claude p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,.75);
  margin-bottom: 16px;
}

.hp-claude-kicker {
  font-style: italic;
  color: rgba(255,255,255,.5) !important;
  font-size: 15px;
  margin-bottom: 0 !important;
}

/* ── Social proof ───────────────────────────────────────────────────────── */

.hp-social { padding: 80px 0; }

.hp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.hp-testimonial-placeholder {
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 36px 24px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.hp-testimonial-placeholder svg { opacity: .3; }
.hp-testimonial-placeholder strong { font-size: 13px; color: var(--text); }

/* ── Bottom CTA ─────────────────────────────────────────────────────────── */

.hp-cta {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 96px 0;
  text-align: center;
}

.hp-cta-inner {
  max-width: 540px;
  margin: 0 auto;
  padding: 0 40px;
}

.hp-cta h2 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 14px;
  color: var(--text);
}

.hp-cta p {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 32px;
}

.hp-fine-print {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
  margin-bottom: 0;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.hp-footer {
  padding: 28px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--border);
}

.hp-footer-links { display: flex; gap: 20px; }
.hp-footer-links a { color: var(--muted); text-decoration: none; }
.hp-footer-links a:hover { color: var(--text); }

/* ── Homepage responsive ─────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .hp-hero-inner    { grid-template-columns: 1fr; gap: 40px; }
  .hp-expenses-inner { grid-template-columns: 1fr; gap: 40px; }
  .hp-expenses-visual { max-width: 480px; }
  .hp-testimonials-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .hp-header         { padding: 0 20px; height: 56px; }
  .hp-container      { padding: 0 20px; }
  .hp-hero           { padding: 48px 0 56px; }
  .hp-hero-inner     { padding: 0 20px; gap: 32px; }
  .hp-hero-headline  { letter-spacing: -.02em; }
  .hp-problem        { padding: 56px 0; }
  .hp-problem-inner  { padding: 0 20px; }
  .hp-problem-text   { font-size: 16px; }
  .hp-features       { padding: 56px 0; }
  .hp-features-grid  { grid-template-columns: 1fr; }
  .hp-expenses       { padding: 56px 0; }
  .hp-expenses-inner { padding: 0 20px; }
  .hp-expenses-visual { max-width: 100%; }
  .hp-claude         { padding: 56px 0; }
  .hp-claude-inner   { padding: 0 20px; }
  .hp-claude h2      { font-size: 24px; }
  .hp-social         { padding: 56px 0; }
  .hp-testimonials-grid { grid-template-columns: 1fr; }
  .hp-cta            { padding: 64px 0; }
  .hp-cta-inner      { padding: 0 20px; }
  .hp-cta h2         { font-size: 26px; }
  .hp-footer         { padding: 24px 20px; flex-direction: column; align-items: flex-start; }
  .hp-section-head   { font-size: 24px; }
  .hp-expenses-copy h2 { font-size: 22px; }
}

/* ── Public shell (logged-out visitors on privacy/terms/contact) ─────────── */
.hp-legal-main { padding: 48px 0 80px; }
.hp-legal-content { max-width: 760px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 700px) {
  .hp-legal-content { padding: 0 20px; }
  .hp-legal-main { padding: 32px 0 60px; }
}

/* ── Google OAuth button ─────────────────────────────────────────────────── */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #3c4043;
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.btn-google:active { background: #f1f3f4; }
.btn-google-icon { width: 18px; height: 18px; flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 12px;
  color: var(--muted);
  user-select: none;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Contact form on the public contact page */
.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); }
.contact-form input,
.contact-form textarea { padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 15px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-success { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ok); border-radius: 6px; padding: 14px 16px; font-size: 14px; margin-top: 16px; }
.contact-error { background: var(--err-bg); border: 1px solid var(--err-bdr); color: var(--err); border-radius: 6px; padding: 14px 16px; font-size: 14px; margin-top: 16px; }

/* ── Summary export buttons ─────────────────────────────────────────────────── */
.sum-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Summary meals table ─────────────────────────────────────────────────────── */
.sum-meals-table { width: 100%; overflow-x: auto; }
.sum-mt-row { display: grid; grid-template-columns: 90px repeat(var(--smt-cols, 7), minmax(100px, 1fr)); border-bottom: 1px solid var(--border); }
.sum-mt-row:last-child { border-bottom: none; }
.sum-mt-hdr .sum-mt-cell { font-weight: 600; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: var(--bg); }
.sum-mt-slot { font-weight: 600; font-size: 13px; color: var(--text); background: var(--bg); }
.sum-mt-cell { padding: 8px 10px; font-size: 13px; border-right: 1px solid var(--border); }
.sum-mt-cell:last-child { border-right: none; }
.sum-mt-day { display: flex; flex-direction: column; gap: 1px; }
.sum-mt-dow  { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sum-mt-date { font-size: 13px; font-weight: 600; color: var(--text); }
.sum-mt-cook { display: block; font-weight: 500; color: var(--text); }
.sum-mt-menu { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: pre-wrap; }
.sum-mt-empty { color: var(--border); }

/* ── Summary travel table ────────────────────────────────────────────────────── */
.sum-trav-table { width: 100%; }
.sum-trav-row { display: grid; grid-template-columns: 1.4fr .8fr 1.4fr 1.4fr; border-bottom: 1px solid var(--border); }
.sum-trav-row:last-child { border-bottom: none; }
.sum-trav-hdr .sum-trav-cell { font-weight: 600; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: var(--bg); }
.sum-trav-cell { padding: 8px 10px; font-size: 13px; }
.sum-trav-av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-right: 6px; }
.sum-trav-name { display: flex; align-items: center; }
.sum-trav-empty { color: var(--border); }

/* ── label-note helper ───────────────────────────────────────────────────────── */
.label-note { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }

@media (max-width: 700px) {
  .sum-trav-row { grid-template-columns: 1fr 1fr; }
  .sum-trav-cell.sum-trav-leg:nth-child(4) { display: none; } /* hide departure on tiny screens */
}

/* ── AI Notes tab ─────────────────────────────────────────────────────────── */

.ain-wrap {
  padding: 16px;
  max-width: 760px;
}

.ain-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.ain-empty-sub {
  font-size: 13px;
  margin-top: 6px;
  color: var(--muted);
}

/* Card */
.ain-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* Header row: type badge + confidence badge + meta */
.ain-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.ain-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--text);
}

/* Confidence badges */
.ain-conf {
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 7px;
}
.ain-conf--confirmed  { background: #d4edda; color: #1a6630; }
.ain-conf--inferred   { background: #fff3cd; color: #856404; }
.ain-conf--uncertain  { background: #f8d7da; color: #842029; }

.ain-about {
  font-size: 12px;
  color: var(--muted);
  margin-left: 2px;
}

/* Meta row (acting user, agent id, date) */
.ain-meta {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ain-acting,
.ain-agent,
.ain-date {
  font-size: 12px;
  color: var(--muted);
}
.ain-date { white-space: nowrap; }

/* Note body */
.ain-note {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 12px;
  white-space: pre-wrap;
}

/* Flagged card state */
.ain-card--flagged {
  opacity: .55;
  border-color: #e8a0a0;
  background: #fff8f8;
}
.ain-flagged-badge {
  font-size: 11px;
  font-weight: 600;
  background: #fde8e8;
  color: #c0392b;
  border: 1px solid #e8a0a0;
  border-radius: 4px;
  padding: 2px 7px;
}

/* Flag button */
.ain-actions {
  display: flex;
  justify-content: flex-end;
}
.ain-flag-btn {
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color .1s, border-color .1s;
}
.ain-flag-btn:hover { color: #c0392b; border-color: #e88; }
.ain-flag-btn:disabled { opacity: .5; cursor: default; }