/* ========================================
   SnapMeet — editorial, warm, conference floor
   ======================================== */

:root {
  --cream: #f7f1e8;
  --cream-2: #efe7d8;
  --paper: #fdfaf3;
  --ink: #1a2332;
  --ink-2: #2c3a52;
  --ink-soft: #5d6b82;
  --coral: #ff6b5b;
  --coral-dark: #e0533f;
  --moss: #5a7a52;
  --gold: #c79a4a;
  --line: rgba(26, 35, 50, 0.12);
  --line-strong: rgba(26, 35, 50, 0.25);
  --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.06), 0 1px 3px rgba(26, 35, 50, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 35, 50, 0.08), 0 2px 4px rgba(26, 35, 50, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 35, 50, 0.12), 0 4px 8px rgba(26, 35, 50, 0.06);
  --radius: 14px;
  --radius-sm: 8px;
  --max: 1400px;
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Geist', -apple-system, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', monospace;
  /* Patch B50 (C.3) — new themeable CSS vars used by Phase C. Defaults
     match the existing visual baseline. Per-event themes override these
     dynamically via applyEventTheme() (in app.js). Defaults are concrete
     hex values, not other CSS vars, so changing --ink doesn't cascade
     into changing button backgrounds. */
  --btn-bg: #1a2332;
  --btn-label: #fdfaf3;
  --banner-fill: #1a2332;
  --nav-bg: #f7f1e8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* Subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: multiply;
  z-index: 1;
}
body > * { position: relative; z-index: 2; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
a { color: var(--coral-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ========================================
   SCREENS
   ======================================== */
.screen { display: none; min-height: 100vh; animation: fadeIn 0.3s ease; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ========================================
   BRAND
   ======================================== */
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  cursor: pointer;
  white-space: nowrap;
}
.brand.small { font-size: 1.05rem; }
.brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
.brand.small .brand-mark { width: 26px; height: 26px; }

/* ========================================
   LANDING
   ======================================== */
.landing-header {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.landing-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px 16px;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px 48px;
  align-items: start;
  padding: 8px 0 24px;
}
.hero-text-top { grid-column: 1; grid-row: 1; }
.hero-visual-top { grid-column: 2; grid-row: 1; }
.hero-text-bot { grid-column: 1; grid-row: 2; }
.hero-visual-bot { grid-column: 2; grid-row: 2; }

/* Right column edges: keep illustration the same effective width as the
   how-strip, and align both to the same horizontal box so a vertical line
   passes through both. */
.hero-visual-top { display: flex; flex-direction: column; gap: 8px; }

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.eyebrow em { color: var(--coral-dark); font-style: italic; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
  font-variation-settings: "opsz" 110;
}
.accent {
  color: var(--coral);
  font-style: italic;
  font-variation-settings: "opsz" 144;
}

.hero-sub {
  font-size: 1rem;
  color: var(--ink-2);
  max-width: 520px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.hero-flow {
  font-size: 0.95rem;
  color: var(--ink-2);
  max-width: 520px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.hero-flow strong { color: var(--ink); }
.hero-free {
  font-size: 1.15rem;
  font-family: var(--font-display);
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 500;
}
.hero-free .accent {
  color: var(--coral);
  font-style: italic;
  font-weight: 600;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
}
.hero-cta-hubs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.hero-fineprint { display: none; }

/* Patch 8.2.6b — RIGHT column: compare link at top, illustration, vertical how-strip */
.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.hero-compare-top {
  margin: 0 0 4px;
  text-align: right;
}
.hero-compare-top .link-btn {
  font-size: 0.95rem;
  font-weight: 500;
}

.hero-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

.how-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Vertical variant: stacked items, no borders, used inside the right column.
   Item height matches the CTA row height (86px) so left and right columns
   share a horizontal grid — "01" aligns with Register, "02" with Personal,
   "03" with Corporate. */
.how-strip-vertical {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border: 0;
}
.how-strip-vertical .how-item {
  min-height: 86px;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.how-strip-vertical .how-item h3 {
  font-size: 1.2rem;
  margin: 2px 0 2px;
}
.how-strip-vertical .how-item p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

.how-item h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 8px 0 6px;
  letter-spacing: -0.01em;
}
.how-item p { color: var(--ink-soft); font-size: 0.97rem; }
.how-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--coral);
  letter-spacing: 0.15em;
}

.landing-foot {
  margin-top: 16px;
  padding: 16px 0 8px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.landing-foot .dot { margin: 0 8px; }
.landing-foot .link-btn { font-size: 0.85rem; color: var(--coral-dark); font-weight: 500; }
.landing-foot a { color: var(--coral-dark); text-decoration: none; font-weight: 500; }

/* Patch 8.2.6b — Mobile: stack hero, revert how-strip to horizontal-3-col */
@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 12px 0 16px;
  }
  .hero-visual {
    order: 2;
  }
  .how-strip-vertical {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 16px;
  }
  .hero-compare-top {
    text-align: left;
  }
}

/* ========================================
   BUTTONS
   ======================================== */
.primary-btn {
  /* Patch B50 (C.3) — read from --btn-bg / --btn-label so per-event themes
     can recolour. The default values of those vars match the prior visual
     (ink background, paper-coloured text) so non-themed events look unchanged. */
  background: var(--btn-bg);
  color: var(--btn-label);
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.97rem;
  letter-spacing: -0.005em;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
.primary-btn:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.primary-btn:active { transform: translateY(0); }
.primary-btn.full { width: 100%; justify-content: center; }

.ghost-btn {
  background: transparent;
  color: var(--ink);
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-weight: 500;
  font-size: 0.97rem;
  transition: all 0.15s ease;
}
.ghost-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.icon-btn {
  width: 40px; height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.link-btn {
  background: none;
  color: var(--coral-dark);
  font-weight: 500;
  padding: 0;
  font-size: inherit;
}
.link-btn:hover { text-decoration: underline; }

.danger-btn {
  background: #fbe9e6;
  color: var(--coral-dark);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid #f3c9c1;
  font-weight: 500;
  transition: all 0.15s ease;
}
.danger-btn:hover { background: var(--coral); color: white; border-color: var(--coral); }

.back-btn {
  background: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
  padding: 8px 0;
  margin-bottom: 16px;
  font-weight: 500;
}
.back-btn:hover { color: var(--ink); }

/* ========================================
   AUTH FORMS
   ======================================== */
.auth-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-wrap.wide { max-width: 640px; }

.auth-card {
  background: var(--paper);
  padding: 40px 36px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.admin-card { border-top: 4px solid var(--ink); }
.lock-icon { font-size: 2rem; margin-bottom: 8px; }

.auth-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.1;
}
.auth-sub {
  color: var(--ink-soft);
  margin-bottom: 28px;
  font-size: 0.95rem;
}
.auth-alt { margin-top: 18px; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }
.auth-alt.subtle { font-size: 0.8rem; opacity: 0.75; }
.auth-alt code { background: var(--cream-2); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85em; }

/* ========================================
   FORMS
   ======================================== */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* Patch B22 — where two or more fields sit side by side in a .form-row, align
   their input boxes to the TOP of each cell so the tops of adjacent inputs line
   up (per requirement). Label text above is a single line in these rows, so
   top-aligning the inputs lines them up regardless of differing hint heights
   below. (Supersedes the earlier 8.2.2b bottom-align approach.) */
.form-row label {
  align-self: start;
}
.form-row label > input:not([type="checkbox"]):not([type="radio"]),
.form-row label > select,
.form-row label > textarea {
  margin-top: 0;
}
/* B193 — in the New-purchase form, keep paired inputs aligned even when one
   field has a wrapping hint and the other does not: stretch the cells to equal
   height and anchor each control to the bottom of its cell. */
.ad-form .form-row { align-items: stretch; }
.ad-form .form-row label { align-self: stretch; }
.ad-form .form-row label > input:not([type="checkbox"]):not([type="radio"]),
.ad-form .form-row label > select,
.ad-form .form-row label > textarea {
  margin-top: auto;
}

/* Custom translatable file-picker button (replaces the browser-native
   "Choose File / No file chosen", which renders in the browser's own locale). */
.file-field { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-input-hidden { display: none !important; }
.file-name-readout { color: var(--ink-soft); font-size: 0.82rem; }

.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--ink-2);
  font-weight: 500;
}
.form label .hint, .form .hint {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.form label .hint code, .form .hint code {
  background: var(--cream-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="url"],
.form input[type="time"],
.form input[type="date"],
.form input[type="number"],
.form input[type="search"],
.form input[type="tel"],
.form select,
.form textarea {
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 0.97rem;
  color: var(--ink);
  transition: border 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 35, 50, 0.08);
}
.form textarea { resize: vertical; min-height: 100px; font-family: var(--font-body); }

.form input[type="color"] {
  width: 60px;
  height: 38px;
  padding: 2px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
}

.count { font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); float: right; }
.count.over { color: var(--coral-dark); font-weight: 600; }

.form-error {
  color: var(--coral-dark);
  font-size: 0.85rem;
  min-height: 1.2em;
  font-weight: 500;
}

.check {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  font-weight: 400 !important;
  font-size: 0.88rem !important;
  color: var(--ink-2) !important;
  line-height: 1.45;
}
.check input { margin-top: 2px; flex-shrink: 0; }

.consent {
  background: var(--cream-2);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.block-label {
  font-size: 0.88rem;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 10px;
}
/* B191 — keep the Web/Mobile uploader boxes aligned: equalise the label height
   and align the dashed zones to the bottom of each grid cell. */
.image-uploaders { align-items: stretch; }
.image-uploaders .image-uploader { justify-content: flex-start; }
.image-uploaders .block-label { min-height: 2.6em; margin-bottom: 6px; }
.availability-block { display: flex; flex-direction: column; }

.days-availability {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cream-2);
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.day-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 10px;
  align-items: center;
}
.day-row label.check { font-size: 0.85rem !important; min-width: 110px; }
.day-row input[type="time"] { padding: 11px 14px; font-size: 0.97rem; }
.day-row.disabled input[type="time"] { opacity: 0.4; pointer-events: none; }

/* ========================================
   APP HEADER
   ======================================== */
.app-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  /* Patch 8.1.0 — centre to page width for visual alignment with content */
  max-width: calc(var(--max) - 40px); /* B141 align to web-banner width */
  margin: 0 auto;
  width: 100%;
}
.admin-header { border-bottom-color: var(--ink); border-bottom-width: 2px; }
/* B144 — admin IWBT banner spans the full content width so it aligns with the
   global identity strip and the admin nav (both var(--max)). Overrides the
   attendee-hub narrowing on .app-header without affecting other screens. */
.app-header.admin-header { max-width: var(--max); }
/* B147 — organiser screen is a full-width (.tab-bar) layout like admin, so its
   banner spans the full content width to align with the nav + content (b141
   narrowed .app-header for the attendee hub's web-banner alignment). */
#screen-organiser .app-header { max-width: var(--max); }

.header-event {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-2);
  flex: 1;
  text-align: center;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

/* ========================================
   TAB BAR
   ======================================== */
.tab-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 0;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 65px;
  z-index: 9;
  /* Patch 8.1.0 — centre to page width */
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab {
  padding: 14px 18px;
  font-size: 0.93rem;
  color: var(--ink-soft);
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); }
.tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--coral);
}
.tab .badge {
  background: var(--coral);
  color: white;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.tab .badge:empty { display: none; }

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.25s ease; }

.subtabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
  border-bottom: 1px solid var(--line);
}
.subtab {
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subtab.active { color: var(--ink); border-bottom-color: var(--ink); }

.subtab-pane { display: none; }
.subtab-pane.active { display: block; }

/* ========================================
   APP MAIN
   ======================================== */
.app-main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px 20px 80px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.85rem;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  line-height: 1.1;
}
.section-sub {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin-bottom: 18px;
}

/* ========================================
   AD SLOTS
   ======================================== */
.sponsor-slot {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}
.sponsor-slot.empty { display: none; }
.ad-card {
  background: var(--ink);
  color: var(--paper);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.15s ease;
  text-decoration: none;
  border-left: 3px solid var(--coral);
}
.ad-card:hover { transform: translateY(-1px); text-decoration: none; }
.ad-card .ad-text { flex: 1; min-width: 0; }
.ad-card .promo-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  opacity: 0.5;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ad-card .ad-headline { font-weight: 600; font-size: 0.97rem; margin-bottom: 2px; }
.ad-card .ad-tagline { font-size: 0.85rem; opacity: 0.85; }
.ad-card .ad-sponsor { font-size: 0.75rem; opacity: 0.7; }

/* ========================================
   ATTENDEE LIST (Discover)
   ======================================== */
.search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.search-box input {
  flex: 1;
  min-width: 200px;
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 0.97rem;
}
.search-box input:focus { outline: none; border-color: var(--ink); }

.attendee-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
/* B189 — Search/Attendee advert tile interspersed in the attendee grid */
.search-advert-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.search-advert-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.search-advert-card .sa-label {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}
.search-advert-card .sa-img { display: block; border-radius: 8px; object-fit: cover; }
.search-advert-card .sa-web { width: 200px; height: 200px; max-width: 100%; }
.search-advert-card .sa-mob { display: none; width: 200px; height: 100px; max-width: 100%; }
.search-advert-card .sa-fallback {
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2, #faf4ea);
  border-radius: 8px; font-weight: 600; text-align: center; padding: 8px;
}
.search-advert-card .sa-headline { font-weight: 600; margin-top: 10px; text-align: center; }
.search-advert-card .sa-tagline { font-size: 0.85rem; color: var(--ink-2); text-align: center; margin-top: 2px; }
@media (max-width: 640px) {
  .search-advert-card .sa-web { display: none; }
  .search-advert-card .sa-mob { display: block; }
}

.attendee-card {
  background: var(--paper);
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.attendee-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.attendee-card .score {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.attendee-card .score.high { background: var(--coral); color: white; }
.attendee-card .score.med { background: var(--gold); color: white; }

.attendee-card .name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  padding-right: 60px;
}
.attendee-card .company {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-bottom: 12px;
}
.attendee-card .pitch {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin-bottom: 14px;
  line-height: 1.5;
  flex: 1;
}
.attendee-card .pitch.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Patch 8.0b.5.5 — small "Previously: …" footnote on synergy cards
   when there's terminal history with this attendee. Subtle italic, so it
   reads as context without competing with the live action button. */
.synergy-history-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 4px 0 8px;
}
.attendee-card .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.tag {
  background: var(--cream-2);
  color: var(--ink-2);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.tag.matched { background: var(--coral); color: white; }

.attendee-card .actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.attendee-card .actions button {
  flex: 1;
  padding: 10px 14px;
  font-size: 0.88rem;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.empty-state .icon { font-size: 2.4rem; margin-bottom: 12px; opacity: 0.5; }

/* ========================================
   REQUESTS LIST
   ======================================== */
.request-list, .meetings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.request-card, .meeting-card {
  background: var(--paper);
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.request-card .req-info { min-width: 0; }
.request-card .req-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.request-card .req-company { color: var(--ink-soft); font-size: 0.85rem; }
.request-card .req-msg { font-size: 0.9rem; margin-top: 8px; color: var(--ink-2); font-style: italic; }
.request-card .req-status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 6px;
}
.status-pending { background: #fcefce; color: #8a6b0e; }
.status-accepted { background: #d4ead0; color: #2f5d28; }
.status-rejected { background: #f4d8d4; color: #99362a; }
.status-booked { background: var(--ink); color: var(--paper); }

.req-actions { display: flex; flex-direction: column; gap: 6px; }
.req-actions button { padding: 8px 14px; font-size: 0.85rem; white-space: nowrap; }

.meeting-card .meet-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.meeting-card .meet-with {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
}
.meeting-card .meet-loc { font-size: 0.85rem; color: var(--ink-soft); margin-top: 4px; }
.meeting-card .meet-duration {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: var(--cream-2);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

/* ========================================
   ORGANISER
   ======================================== */
.org-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.event-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.event-card {
  background: var(--paper);
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  /* B185 — keep the tile to a max height of 200px so it aligns with the
     200×200 sponsor square; the synopsis clamp above absorbs long copy. */
  max-height: 200px;
  overflow: hidden;
}
.event-card .ev-code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--coral-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.event-card .ev-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.15;
}
.event-card .ev-dates {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-bottom: 14px;
}
.event-card .ev-stats {
  display: flex;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.event-card .stat-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  display: block;
  line-height: 1;
}
.event-card .stat-label {
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.billing-card {
  background: var(--paper);
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  max-width: 640px;
  margin: 0 auto;
}
.billing-status { margin-bottom: 16px; font-size: 1rem; }
.billing-card p { margin-bottom: 12px; color: var(--ink-2); }
.rate-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.92rem;
}
.rate-table th, .rate-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.rate-table th {
  background: var(--cream-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.muted { color: var(--ink-soft); font-size: 0.85rem; font-style: italic; }

/* ========================================
   ADMIN
   ======================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--paper);
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.stat-card .num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
}
.stat-card .lbl {
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

.danger-zone {
  background: #fdf3f1;
  border: 1px solid #f3c9c1;
  padding: 20px;
  border-radius: var(--radius);
  margin-top: 32px;
}
.danger-zone h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--coral-dark);
}

.db-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.db-tab {
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--cream-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.db-tab.active { background: var(--ink); color: var(--paper); }

.db-table-wrap {
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}
.db-output {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #d4dae3;
  padding: 16px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.sponsor-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.sponsor-item {
  background: var(--paper);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sponsor-item .info { min-width: 0; }
.sponsor-item .info strong { display: block; }
.sponsor-item .info small { color: var(--ink-soft); font-size: 0.78rem; }
.sponsor-item .del-btn {
  background: none;
  color: var(--coral-dark);
  font-size: 1.2rem;
  padding: 4px 8px;
}

/* ----- Email admin ----- */
.email-status-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.email-status-card.paused {
  border-color: var(--coral);
  background: #fdf3f1;
  border-left: 4px solid var(--coral);
}
.email-status-card .status-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 6px;
  background: var(--moss);
  color: white;
}
.email-status-card .status-pill.paused { background: var(--coral); }
.email-status-card .status-pill.disabled { background: var(--ink-soft); }
.email-status-card .meter-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.email-status-card .meter-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}
.email-status-card .meter-bar {
  height: 4px;
  background: var(--cream-2);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.email-status-card .meter-fill {
  height: 100%;
  background: var(--moss);
  transition: width 0.3s ease;
}
.email-status-card .meter-fill.warn { background: var(--gold); }
.email-status-card .meter-fill.full { background: var(--coral); }
.email-status-card .resume-btn {
  background: var(--coral);
  color: white;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9rem;
  align-self: center;
  justify-self: end;
}
.email-status-card .resume-btn:hover { background: var(--coral-dark); }

.email-settings-form {
  background: var(--paper);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  max-width: 720px;
  margin-bottom: 32px;
  margin-left: auto;
  margin-right: auto;
}
.master-switch {
  background: var(--cream-2);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.subsection-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.email-log-wrap {
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: auto;
  max-height: 480px;
}
.email-log {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.email-log th {
  background: var(--cream-2);
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--ink-2);
  position: sticky;
  top: 0;
}
.email-log td {
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.email-log td.col-status .pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  display: inline-block;
}
.pill.sent { background: #d4ead0; color: #2f5d28; }
.pill.blocked { background: #fcefce; color: #8a6b0e; }
.pill.failed { background: #f4d8d4; color: #99362a; }
.email-log td.col-detail { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.78rem; }
.email-log td.col-when { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }

/* ========================================
   MODAL
   ======================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 35, 50, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-backdrop.active { display: flex; }
.modal {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.25s ease;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

.modal h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.modal p { color: var(--ink-2); margin-bottom: 16px; font-size: 0.95rem; }
.modal .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.slot-btn {
  background: var(--cream-2);
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 0.15s ease;
}
.slot-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.slot-btn.selected { background: var(--coral); color: white; border-color: var(--coral); }

/* ========================================
   TOAST
   ======================================== */
#toast-container {
  background: transparent;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 40px;
  pointer-events: none;
}
#toast-container.active { display: flex; }
#toast {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.3s ease;
}
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ========================================
   PROFILE FORM
   ======================================== */
.profile-form {
  background: var(--paper);
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  max-width: 720px;
  margin: 0 auto;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0 48px;
    text-align: left;
  }
  .hero-visual { order: -1; }
  .hero-svg { max-width: 320px; margin: 0 auto; }
  .how-strip { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .landing-header { padding: 20px 24px; }
  .landing-main { padding: 24px; }
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .auth-card { padding: 28px 22px; }
  .auth-title { font-size: 1.65rem; }
  .section-title { font-size: 1.5rem; }
  .app-header { padding: 12px 16px; }
  .header-event { font-size: 0.88rem; }
  .app-main { padding: 20px 16px 80px; }
  .day-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
    background: var(--paper);
    border-radius: var(--radius-sm);
  }
  .day-row label.check { min-width: 0; }
  .request-card, .meeting-card { grid-template-columns: 1fr; }
  .req-actions { flex-direction: row; }
  .req-actions button { flex: 1; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .primary-btn, .hero-cta .ghost-btn { width: 100%; justify-content: center; }
  .org-head { flex-direction: column; align-items: stretch; }
  .org-head button { width: 100%; }
}

@media (max-width: 480px) {
  .landing-header { padding: 16px 20px; }
  .landing-main { padding: 20px; }
  .brand { font-size: 1.2rem; }
  .hero-title { font-size: 2.3rem; }
}

/* ========================================
   EMAIL ADMIN
   ======================================== */
.email-status-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 24px;
}
.email-status-card.paused {
  background: #fdf3f1;
  border-color: #f3c9c1;
  border-left: 4px solid var(--coral-dark);
}
.email-status-card.healthy {
  border-left: 4px solid var(--moss);
}
.email-status-card .status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.email-status-card .status-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.email-status-card .status-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.email-status-card .status-value.danger { color: var(--coral-dark); }
.email-status-card .status-value.warn { color: var(--gold); }
.email-status-card .status-value.ok { color: var(--moss); }
.email-status-card .pause-reason {
  font-size: 0.92rem;
  color: var(--coral-dark);
  margin-bottom: 12px;
  font-weight: 500;
}

.usage-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.usage-bar { display: flex; flex-direction: column; gap: 4px; }
.usage-bar .ub-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.usage-bar .ub-label strong { color: var(--ink); font-family: var(--font-mono); }
.usage-bar .ub-track {
  height: 6px;
  background: var(--cream-2);
  border-radius: 3px;
  overflow: hidden;
}
.usage-bar .ub-fill {
  height: 100%;
  background: var(--moss);
  transition: width 0.3s ease, background 0.2s ease;
}
.usage-bar .ub-fill.warn { background: var(--gold); }
.usage-bar .ub-fill.danger { background: var(--coral); }

.cap-emphasis {
  font-size: 0.68rem;
  background: var(--coral);
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 8px;
  font-weight: 600;
  vertical-align: middle;
}
/* Row that keeps a label's text and an inline pill (e.g. "primary limit")
   on the same line inside a column-flex .form label. */
.form label .label-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.master-switch {
  background: var(--cream-2);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
}
/* Patch B20b — the throttle form's form-rows have single-line labels but
   hints of differing heights below the inputs. The global bottom-align
   (margin-top:auto) then lands the two inputs at different heights. For this
   form, align inputs to the TOP instead so they sit directly under their
   equal-height labels and line up across the row. */
.email-settings-form .form-row { align-items: start; }
.email-settings-form .form-row label > input:not([type="checkbox"]):not([type="radio"]),
.email-settings-form .form-row label > select,
.email-settings-form .form-row label > textarea {
  margin-top: 0;
}

.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.subsection-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

.email-log-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 480px;
  overflow-y: auto;
}
.email-log {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.email-log thead {
  position: sticky;
  top: 0;
  background: var(--cream-2);
}
.email-log th, .email-log td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.email-log th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.email-log td .pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
}
.email-log td .pill.sent { background: #d4ead0; color: #2f5d28; }
.email-log td .pill.blocked { background: #fcefce; color: #8a6b0e; }
.email-log td .pill.failed { background: #f4d8d4; color: #99362a; }
.email-log .when { font-family: var(--font-mono); color: var(--ink-soft); white-space: nowrap; font-size: 0.78rem; }
.email-log .empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .email-log th:nth-child(3), .email-log td:nth-child(3) { display: none; }
  .email-log th, .email-log td { padding: 8px 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   ADS — ADMIN UI
   ======================================== */
.ad-subtabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.ad-subtab {
  padding: 10px 16px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}
.ad-subtab.active { color: var(--ink); border-bottom-color: var(--coral); }
.adsub-pane { display: none; animation: fadeIn 0.2s; }
.adsub-pane.active { display: block; }

.ad-form, .rate-form {
  background: var(--paper);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  max-width: 760px;
  margin: 0 auto;
}

.cost-preview {
  background: var(--cream-2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
}
.cost-preview .days { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); margin-left: 8px; font-weight: 400; }
.cost-preview .total { color: var(--coral-dark); }

.conflict-warning {
  background: #fdf3f1;
  border: 1px solid #f3c9c1;
  color: var(--coral-dark);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}
.conflict-warning.show { display: block; }

.image-uploaders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) { .image-uploaders { grid-template-columns: 1fr; } }

.image-uploader { display: flex; flex-direction: column; gap: 6px; }
.upload-zone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  background: var(--cream);
}
.upload-zone.has-image { border-style: solid; background: var(--paper); padding: 8px; }
.upload-preview { margin-top: 10px; }
.upload-preview img { max-width: 100%; max-height: 140px; border-radius: 6px; display: block; margin: 0 auto; }
.upload-preview .img-info { font-size: 0.8rem; color: var(--ink-soft); margin-top: 6px; font-family: var(--font-mono); }
.upload-progress { font-size: 0.85rem; color: var(--ink-soft); margin-top: 6px; }

.purchase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.purchase-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
@media (max-width: 640px) {
  .purchase-card { grid-template-columns: 1fr; }
}
.purchase-thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--cream-2);
}
.purchase-info { min-width: 0; }
.purchase-info .ptype {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 4px;
}
.purchase-info .ptype.banner { background: var(--coral); color: white; }
.purchase-info .ptype.compact { background: var(--cream-2); color: var(--ink); }
.purchase-info .pname {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.purchase-info .pmeta { color: var(--ink-soft); font-size: 0.85rem; margin-top: 2px; }
.purchase-info .pdates { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-2); margin-top: 4px; }
.purchase-cost {
  text-align: right;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
}
.purchase-cost .paid-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
}
.purchase-cost .paid { background: #d4ead0; color: #2f5d28; }
.purchase-cost .owed { background: #fcefce; color: #8a6b0e; }
.purchase-actions { display: flex; gap: 6px; }
.purchase-actions button { padding: 6px 10px; font-size: 0.8rem; }

.revenue-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.revenue-summary .rev-card {
  background: var(--paper);
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.revenue-summary .rev-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.revenue-summary .rev-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* ========================================
   ATTENDEE-SIDE AD RENDERING
   ======================================== */

/* Banner — top of page. Two images, CSS swaps based on viewport */
.banner-promo {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: white;
  margin-bottom: 20px;
  position: relative;
  transition: transform 0.15s ease;
}
.banner-promo:hover { transform: translateY(-1px); text-decoration: none; }
.banner-promo .promo-label {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border-radius: 999px;
  z-index: 2;
  color: white;
}
.banner-promo img {
  width: 100%;
  height: auto;
  display: block;
}
.banner-promo .banner-text {
  padding: 14px 18px;
}
.banner-promo .b-headline { font-weight: 600; font-size: 1.05rem; margin-bottom: 2px; }
.banner-promo .b-tagline { font-size: 0.9rem; opacity: 0.85; }
.banner-promo .b-sponsor { font-size: 0.78rem; opacity: 0.7; margin-top: 4px; }

.banner-promo .img-mobile { display: none; }
.banner-promo .img-web { display: block; }
@media (max-width: 640px) {
  .banner-promo .img-mobile { display: block; }
  .banner-promo .img-web { display: none; }
}

/* Compact — inserted into the attendee grid */
.compact-promo {
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.compact-promo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.compact-promo .ca-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.compact-promo img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin-bottom: 12px;
}
.compact-promo .ca-headline {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.compact-promo .ca-tagline { font-size: 0.9rem; color: var(--ink-2); flex: 1; margin-bottom: 10px; }
.compact-promo .ca-sponsor { font-size: 0.78rem; color: var(--ink-soft); }

/* ========================================
   ORGANISER EVENT DETAIL
   ======================================== */
.event-card.clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.event-card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ev-click-hint {
  margin-top: 12px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

#modal-container.wide .modal-inner,
#modal-container.wide {
  max-width: 1100px !important;
}

.event-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.event-detail-header h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
}
.event-detail-stats {
  display: flex;
  gap: 20px;
}
.event-detail-stats .stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  display: block;
}
.event-detail-stats .stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.event-detail-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.attendee-table-wrap {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.attendee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.attendee-table thead {
  position: sticky;
  top: 0;
  background: var(--cream-2);
  z-index: 2;
}
.attendee-table th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.attendee-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.attendee-table .pitch-cell {
  max-width: 280px;
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.attendee-table .numeric { font-family: var(--font-mono); font-size: 0.82rem; text-align: right; }
.attendee-table .empty-row {
  text-align: center;
  color: var(--ink-soft);
  padding: 32px;
}
.attendee-table tr:last-child td { border-bottom: none; }
.attendee-table tr:hover { background: var(--cream); }
.attendee-table .tag {
  display: inline-block;
  background: var(--cream-2);
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 999px;
  margin: 1px 2px 1px 0;
}

/* ========================================
   ADMIN DASHBOARD (Phase B.1)
   ======================================== */
.dashboard-section {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.dashboard-actions { display: flex; gap: 8px; }

.dashboard-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.filter-group { display: flex; flex-direction: column; gap: 4px; }

/* Corporate / Personal pill on the admin Performance-by-event rows. */
.event-mode-pill {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.4;
}
.event-mode-pill.is-corporate { background: #e7ecf3; color: #33506e; }
.event-mode-pill.is-personal { background: #fdeae1; color: #bb5a36; }.filter-group .block-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  font-weight: 600;
}
.filter-group select,
.filter-group input[type=date],
.filter-group input[type=search] {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--cream);
  font-family: inherit;
  font-size: 0.97rem;
  min-width: 140px;
}
#filter-custom-dates {
  flex-direction: row;
  gap: 10px;
  align-items: flex-end;
}
#filter-applied-summary {
  align-self: stretch;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-left: auto;
  padding-bottom: 6px;
}

.dashboard-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: auto;
  background: var(--paper);
}
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.dashboard-table thead {
  background: var(--cream-2);
}
.dashboard-table th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.dashboard-table .numeric { text-align: right; font-family: var(--font-mono); }
.dashboard-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.dashboard-table tbody tr:hover { background: var(--cream); }
.dashboard-table tbody tr:last-child td { border-bottom: none; }
.dashboard-table .ev-cell { font-weight: 500; }
.dashboard-table .ev-cell .ev-code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--coral-dark);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 2px;
}
.dashboard-table .ev-cell .ev-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
}
.dashboard-table .org-cell { color: var(--ink-2); }
.dashboard-table .org-cell .org-name { font-weight: 500; color: var(--ink); }
.dashboard-table .org-cell .org-email { font-size: 0.78rem; color: var(--ink-soft); display: block; }
.dashboard-table .date-cell { font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; color: var(--ink-2); }
.dashboard-table .empty-row {
  text-align: center;
  color: var(--ink-soft);
  padding: 32px;
}
.dashboard-table tfoot td {
  font-weight: 600;
  background: var(--cream-2);
  border-top: 2px solid var(--line-strong);
}
.dashboard-table tfoot .numeric { font-family: var(--font-mono); }

/* Global attendee search */
.search-input {
  width: 100%;
  max-width: 480px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.97rem;
  font-family: inherit;
  margin-top: 8px;
  background: var(--paper);
}
.search-input:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
#attendee-search-results {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.search-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.search-result:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }
.search-result .sr-name { font-weight: 500; font-family: var(--font-display); font-size: 1.05rem; }
.search-result .sr-meta { font-size: 0.82rem; color: var(--ink-2); }
.search-result .sr-event {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--coral-dark);
  letter-spacing: 0.04em;
  align-self: center;
}
.search-empty { padding: 16px; text-align: center; color: var(--ink-soft); font-size: 0.9rem; }

/* ========================================
   BLOCKLIST + ADMIN WRITE ACTIONS (Phase B.2)
   ======================================== */
.blocklist-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
  align-items: center;
}
.blocklist-form input {
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.97rem;
  background: var(--paper);
}
.blocklist-form input[type=email] { min-width: 220px; }
.blocklist-form input[type=text] { flex: 1; min-width: 180px; }
.blocklist-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.blocklist-item {
  display: grid;
  grid-template-columns: 1fr 2fr auto auto;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  align-items: center;
  font-size: 0.92rem;
}
.blocklist-item .bl-email { font-family: var(--font-mono); font-size: 0.88rem; }
.blocklist-item .bl-reason { color: var(--ink-2); font-style: italic; }
.blocklist-item .bl-reason.none { color: var(--ink-soft); font-style: normal; font-size: 0.85rem; }
.blocklist-item .bl-when {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.blocklist-empty { text-align: center; padding: 18px; color: var(--ink-soft); font-size: 0.9rem; }

/* Edit forms inside modals */
.admin-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.admin-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
}
.admin-edit-form input, .admin-edit-form select, .admin-edit-form textarea {
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.97rem;
  background: var(--paper);
}
.admin-edit-form textarea { resize: vertical; min-height: 80px; }
.admin-edit-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) { .admin-edit-form .form-row { grid-template-columns: 1fr; } }
.admin-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.admin-form-actions .danger-btn {
  background: #c84a3c;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.admin-form-actions .danger-btn:hover { background: #a8392d; }

/* Lock toggle pill */
.locked-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  background: #fcefce;
  color: #8a6b0e;
  margin-left: 6px;
  vertical-align: middle;
}

/* ============================================================
   PHASE B.3 — Account home, event cards, profile
   ============================================================ */
.account-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 24px;
}
.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 12px;
}
.account-actions { display: flex; gap: 8px; }
.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.event-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}
.event-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.event-card-head .ev-code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--coral-dark);
  font-weight: 600;
}
.event-card-name {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.2;
}
.event-card-pills {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.status-pill {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  background: var(--cream-2);
  color: var(--ink-2);
}
.status-pill.upcoming { background: #d4ecd6; color: #1d5b25; }
.status-pill.in-progress { background: #fde9c0; color: #7a4d04; }
.status-pill.past { background: #e9e5dc; color: #555; }
.status-pill.locked { background: #fcefce; color: #8a6b0e; }
.event-card-dates {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 8px 0 10px;
}
.event-card-synopsis {
  background: var(--cream);
  padding: 10px 14px;
  border-radius: 8px;
  line-height: 1.45;
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0 0 12px;
  /* B185 — keep the event tile compact (≈200px) and aligned with the square
     sponsor thumb: clamp the synopsis to 2 lines, truncating with an ellipsis
     ("…") rather than letting long copy grow the card. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-card-foot {
  display: flex;
  justify-content: flex-end;
}
.event-card-cta {
  font-size: 0.85rem;
  color: var(--coral-dark);
  font-weight: 500;
}
.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--ink-soft);
}
.form-success { color: var(--coral-dark); }
.switch-event-link {
  font-size: 0.85rem;
}

/* ============================================================
   AD SCHEDULE — admin diagnostic view
   ============================================================ */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.schedule-event-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.schedule-event-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.schedule-event-head .event-code {
  font-family: var(--font-mono);
  color: var(--coral-dark);
  font-size: 0.85rem;
  margin-right: 8px;
}
.schedule-event-ads {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.schedule-ad-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--cream-2, #faf4ea);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--line);
}
.schedule-ad-row.active {
  border-left-color: #25a55f;
  background: #ecfbf2;
}
.schedule-ad-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.95rem;
}
.schedule-ad-dates {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.schedule-ad-flags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ad-type-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  letter-spacing: 0.05em;
}
.ad-type-pill.ad-type-compact {
  background: var(--coral-dark);
}
.paid-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}
.paid-pill.paid {
  background: #d8f3df;
  color: #1f6a3d;
}
.paid-pill.unpaid {
  background: #fbe9d3;
  color: #92581f;
}
.flag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.flag.good { background: #d8f3df; color: #1f6a3d; }
.flag.warn { background: #fde2cd; color: #a14f12; }
.flag.dim { background: var(--line); color: var(--ink-soft); }
.status-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}
.status-pill.status-progress { background: #fef0c2; color: #846216; }
.status-pill.status-upcoming { background: #d8f3df; color: #1f6a3d; }
.status-pill.status-past { background: var(--line); color: var(--ink-soft); }

/* ============================================================
   EVENTS BROWSER — admin event drilldown
   ============================================================ */
.events-browser-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.events-browser-toolbar .search-input {
  flex: 1 1 280px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.97rem;
}
.checkbox-label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.events-browser-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.org-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.org-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--cream-2, #faf4ea);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
}
.org-header:hover { background: var(--line); }
.org-toggle {
  font-size: 0.7rem;
  color: var(--ink-soft);
  width: 14px;
}
.org-email {
  font-weight: 600;
  flex: 1 1 auto;
}
.org-count {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.org-events {
  padding: 0 12px 12px;
}
.event-browser-card {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.event-browser-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border: none;
  cursor: pointer;
  text-align: left;
  flex-wrap: wrap;
}
.event-browser-header:hover { background: var(--cream-2, #faf4ea); }
.event-browser-header .event-code {
  font-family: var(--font-mono);
  color: var(--coral-dark);
  font-size: 0.82rem;
}
.event-browser-header .event-name {
  font-weight: 500;
  margin-right: 4px;
}
.event-dates-mini {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-left: auto;
}
.event-browser-detail {
  padding: 16px;
  background: var(--cream-2, #faf4ea);
  border-top: 1px dashed var(--line);
}
.event-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) {
  .event-detail-grid { grid-template-columns: 1fr; }
}
.attendee-mini-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.attendee-mini-row {
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   Your events page — event card + sponsor thumb layout
   ============================================================ */
.event-card-wrap {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
}
.event-card-wrap .event-card {
  flex: 1 1 auto;
  margin-bottom: 0;
}
.event-card-btn {
  font-size: 0.85rem;
  padding: 6px 14px;
}
/* B185 — attendee "All My Events" card (Phase 1 of the advert/image spec):
   Open/Share moved up beside the status pill, synopsis clamped with an ellipsis,
   and the card capped at 200px tall on web so it lines up with the 200×200
   sponsor square. */
.event-card-wrap .event-card-head-main { min-width: 0; }
.event-card-wrap .event-card-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.event-card-wrap .event-card-foot { justify-content: flex-end; margin: 0; }
.event-card-wrap .event-card-btn,
.event-card-wrap .event-card-share-btn { font-size: 0.8rem; padding: 5px 12px; }
.event-card-wrap .event-card-synopsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}
@media (min-width: 641px) {
  .event-card-wrap .event-card { max-height: 200px; overflow: hidden; }
}

.sponsor-thumb {
  /* B182/B184 — square sponsor thumbnail (Mobile Banner 600×600) that matches
     the event card's height and sits flush with the row, but never displays
     larger than 200×200 (B184). */
  flex: 0 0 auto;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 200px;
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  background: var(--cream-2, #faf4ea);
  border: 1px solid var(--line);
  transition: transform 0.15s ease;
}
.sponsor-thumb:hover { transform: scale(1.03); }
.sponsor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sponsor-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  color: white;
  padding: 2px 6px;
  text-align: center;
}
@media (max-width: 640px) {
  /* B185 — on mobile the sponsor banner moves ABOVE the event card (was a
     small square to the right), shown as a 200×200 square. The card height
     cap is also released since the layout stacks vertically. */
  .event-card-wrap { flex-direction: column; align-items: stretch; }
  .event-card { max-height: none; overflow: visible; }
  .sponsor-thumb {
    order: -1;
    align-self: center;
    aspect-ratio: 1 / 1;
    width: 200px;
    height: 200px;
    max-width: 100%;
  }
}

/* ============================================================
   DISCOVER EVENTS — attendee-facing event discovery
   ============================================================ */
.discover-event-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  cursor: default;
}
.discover-event-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.tag-chip {
  background: var(--cream-2, #faf4ea);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--ink-soft);
}
.status-pill.promoted {
  background: #fef0c2;
  color: #846216;
}
.status-pill.match {
  background: #d8f3df;
  color: #1f6a3d;
}

/* Tag chips on the admin events browser */
.event-tags-mini {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ============================================================
   Smart sign-in detection — register form email notice
   ============================================================ */
.email-notice {
  background: #fef0c2;
  border-left: 4px solid #d4a017;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: -8px 0 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #846216;
}
.email-notice button.link-btn {
  background: none;
  border: none;
  color: #d4530c;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
}
.email-notice button.link-btn:hover { color: #b94409; }

/* ============================================================
   Edit event modal — booked ads/promotions read-only list
   ============================================================ */
.edit-bookings-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.booking-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--paper);
  font-size: 0.92rem;
}
.booking-row.active-today {
  background: #d8f3df;
  border-color: #5cb877;
}
/* B184 — image previews inside an ad placement row (full grid width) */
.booking-imgs {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 8px;
}
.booking-img { margin: 0; }
.booking-img figcaption {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft, #6b6b6b);
  margin-bottom: 3px;
}
.booking-img img {
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.booking-img.web img   { height: 52px; width: auto; max-width: 240px; object-fit: contain; }
.booking-img.wide img  { height: 52px; width: auto; max-width: 200px; object-fit: contain; }
.booking-img.square img{ width: 52px; height: 52px; object-fit: cover; }
/* B190 — viewable web/mobile image thumbnails in the organiser ad modal */
.org-ad-thumbs { display: flex; gap: 14px; margin: 10px 0 4px; flex-wrap: wrap; }
.org-ad-thumb { display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; align-items: flex-start; }
.org-ad-thumb img {
  max-width: 170px;
  max-height: 96px;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
  display: block;
}
.org-ad-thumb.empty {
  min-width: 110px;
  min-height: 60px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.org-ad-thumb-cap {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
}
.org-ad-thumb:hover img { box-shadow: var(--shadow-md); }
.booking-main strong { display: block; }
.booking-type {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.booking-dates {
  font-family: var(--font-mono);
  font-size: 0.88rem;
}
.booking-flags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.flag-active {
  background: #5cb877;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.flag-paid {
  background: #d8f3df;
  color: #1f6a3d;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.flag-owed {
  background: #fef0c2;
  color: #846216;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
@media (max-width: 600px) {
  .booking-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .booking-flags { justify-content: flex-start; }
}

/* ============================================================
   Admin Overview tiles — clickable
   ============================================================ */
.stat-card.clickable {
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.stat-card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background: var(--cream-2);
}
.stat-card.clickable:focus {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* ============================================================
   "Viewing event profile" banner
   ============================================================ */
.profile-context-banner {
  background: var(--cream-2);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.profile-context-banner strong { color: var(--ink); }
.profile-context-banner a { color: var(--coral-dark); font-weight: 600; }

/* ============================================================
   Discover Events tag highlighting
   ============================================================ */
.tag-chip.matched {
  background: #d8f3df;
  border-color: #5cb877;
  color: #1f6a3d;
  font-weight: 600;
}

/* ============================================================
   Select/deselect all on days picker
   ============================================================ */
.days-toggle-all {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.days-toggle-all:hover {
  background: var(--cream-2);
  color: var(--ink);
}

/* ============================================================
   Event info banner on the register screen
   ============================================================ */
.event-info-banner {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
}
.event-info-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.event-info-head strong {
  font-family: var(--font-serif);
  font-size: 1.05rem;
}
.event-info-head .ev-code {
  font-family: var(--font-mono);
  background: var(--cream-2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.event-info-dates {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 4px;
}
.event-info-synopsis {
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: var(--ink);
}

/* ============================================================
   Request + Meeting cards — show pitch and tags
   ============================================================ */
.req-pitch, .meet-pitch {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 6px 0;
  line-height: 1.5;
  font-style: italic;
}
.req-tags, .meet-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}
.req-tags .tag-chip, .meet-tags .tag-chip {
  font-size: 0.72rem;
  padding: 1px 8px;
}

/* ============================================================
   Admin Events browser — sub-tabs (Attendees / Requests / Bookings)
   ============================================================ */
.event-detail-ads-strip {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.event-detail-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.event-detail-subtab {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ink-soft);
}
.event-detail-subtab:hover { background: var(--cream-2); color: var(--ink); }
.event-detail-subtab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.event-detail-subpane { padding: 4px 0; }
.event-detail-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--cream-2);
  border-radius: var(--radius-sm);
}
.event-detail-filters label {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--ink-soft);
  gap: 2px;
}
.event-detail-filters input, .event-detail-filters select {
  font-size: 0.97rem;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.admin-request-list, .admin-booking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-request-row, .admin-booking-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--paper);
  display: grid;
  gap: 6px;
}
.admin-request-row.status-pending { border-left: 3px solid #d4a017; }
.admin-request-row.status-accepted { border-left: 3px solid #4a90c2; }
.admin-request-row.status-booked { border-left: 3px solid #5cb877; }
.admin-request-row.status-rejected { border-left: 3px solid #c0524a; }
.admin-request-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}
.admin-request-date {
  font-family: var(--font-mono);
  color: var(--ink-soft);
}
.admin-request-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 0.92rem;
}
.admin-request-actions, .admin-booking-actions {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .admin-request-parties { grid-template-columns: 1fr; }
}
.admin-booking-row {
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
}
.admin-booking-time {
  display: flex;
  flex-direction: column;
  min-width: 100px;
}
.admin-booking-parties { font-size: 0.92rem; }
.admin-booking-loc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .admin-booking-row {
    grid-template-columns: 1fr;
  }
  .admin-booking-actions { justify-content: flex-start; }
}

.admin-request-booking {
  background: #d8f3df;
  border-left: 3px solid #5cb877;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin: 4px 0;
  font-size: 0.88rem;
  color: #1f6a3d;
}

/* ============================================================
   Admin dashboard pagination
   ============================================================ */
.dashboard-pager {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.pager-controls {
  display: flex;
  gap: 18px;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}
.pager-controls label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.pager-controls select {
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.97rem;
}
.pager-range {
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.pager-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.pager-page {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 0 6px;
}
.pager-buttons button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Edit button on the event browser detail sub-tabs row */
.event-detail-subtab.edit-btn {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
}
.event-detail-subtab.edit-btn:hover {
  background: var(--coral-dark);
  color: var(--paper);
}

/* ============================================================
   Ad edit modal — image previews, schedule clickable, conflict
   ============================================================ */
.schedule-ad-row.clickable {
  cursor: pointer;
  transition: background 0.08s;
}
.schedule-ad-row.clickable:hover {
  background: var(--cream-2);
}
.image-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 12px 0;
}
@media (max-width: 600px) {
  .image-row { grid-template-columns: 1fr; }
}
.image-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.image-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream-2);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
}
.image-preview img {
  max-width: 100%;
  max-height: 140px;
  display: block;
}
.image-empty {
  color: var(--ink-soft);
  font-size: 0.82rem;
  padding: 16px;
  text-align: center;
}
.upload-progress {
  color: var(--ink-soft);
  font-size: 0.82rem;
  padding: 16px;
  text-align: center;
}

/* ============================================================
   Admin events browser — synopsis block in detail view
   ============================================================ */
.event-detail-synopsis {
  background: var(--cream-2);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}
.event-detail-synopsis strong {
  display: inline-block;
  margin-right: 8px;
  color: var(--ink);
}
.event-detail-synopsis .hint {
  color: var(--ink-soft);
  font-style: italic;
}

/* ============================================================
   My Meetings sub-tabs + cancelled state
   ============================================================ */
.meetings-subtabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
  border-bottom: 1px solid var(--line);
}
.meetings-subtab {
  background: none;
  border: none;
  padding: 8px 14px 12px;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.meetings-subtab:hover {
  color: var(--ink);
}
.meetings-subtab.active {
  color: var(--coral-dark);
  border-bottom-color: var(--coral);
  font-weight: 600;
}
.meeting-card.cancelled {
  background: var(--cream-2);
  opacity: 0.85;
}
.meeting-card.cancelled .meet-time {
  text-decoration: line-through;
  color: var(--ink-soft);
}
.cancelled-pill {
  display: inline-block;
  background: #fdf3f1;
  color: #a8392d;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  text-decoration: none;
}
/* Patch 8.0b.3 — notification badges */
.update-pill {
  display: inline-block;
  background: #e8f3fc;
  color: #1f5d8c;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  text-decoration: none;
}
.meeting-card.has-update,
.request-card.has-update {
  border-left: 3px solid #4fa3da;
  background: linear-gradient(to right, rgba(79, 163, 218, 0.04) 0%, transparent 30%);
}
.request-card.action-required {
  border-left: 3px solid #ff6b5b;
}
.request-card.has-update.action-required {
  border-left: 3px solid #ff6b5b;  /* action-required wins when both apply */
}
.meet-cancel-meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 6px 0;
  font-style: italic;
}
.meet-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
/* B166 — duration pill spans the top-right; the four actions (Replan / Cancel /
   Withdraw / Calendar) fall into a 2x2 grid instead of a tall single column. */
.meet-right .meet-duration { grid-column: 1 / -1; justify-self: end; align-self: center; }
.meet-right button { width: 100%; white-space: nowrap; }
.affected-list {
  margin: 8px 0 16px;
  padding-left: 20px;
  font-size: 0.92rem;
}
.affected-list li {
  margin: 4px 0;
}

/* ============================================================
   Event context banner (inside an event, below sponsor banner)
   ============================================================ */
.event-context-banner {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 auto 16px;
  max-width: calc(var(--max) - 40px); /* B141 align to web-banner width */
}
.event-context-banner:empty { display: none; }
.ctx-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0;
  font-size: 0.92rem;
}
.ctx-row strong { color: var(--ink); }
.ctx-row-dates {
  font-family: var(--font-mono);
  font-size: 0.88rem;
}
.ctx-code {
  font-family: var(--font-mono);
  background: var(--cream-2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.76rem;
  color: var(--coral-dark);
  margin-left: auto;
}
.ctx-synopsis {
  margin: 8px 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
  border-left: 3px solid var(--coral);
  padding-left: 10px;
}
.ctx-days-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ctx-day {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
}
.ctx-day-time {
  color: var(--ink-soft);
  font-size: 0.75rem;
  margin-left: 4px;
}

/* ============================================================
   PATCH 7 — Two-tab nav + new feature UI
   Items 1.5, 2, 3, 5, 6, 7, 8, 10
   ============================================================ */

/* TOP NAV (account-wide) — sticky above the event sub-nav.
   Default top:65px assumes there's an .app-header (65px tall) above this nav.
   Account-level screens that have NO .app-header use .top-nav.is-flush to
   sit at top:0 instead (avoids the unwanted gap below the identity strip). */
.top-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 0;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 65px;
  z-index: 11;
  /* Patch 8.1.0 — centre to page width */
  max-width: calc(var(--max) - 40px); /* B141 align to web-banner width */
  margin: 0 auto;
  width: 100%;
}
.top-nav.is-flush {
  top: 0;
}
.top-nav::-webkit-scrollbar { display: none; }

.top-tab {
  padding: 14px 18px;
  font-size: 0.93rem;
  color: var(--ink-soft);
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.top-tab:hover { color: var(--ink); }
.top-tab.active { color: var(--ink); }
.top-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--ink);   /* INK underline, distinct from sub-nav coral */
}
.top-tab .badge {
  background: var(--ink);
  color: white;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.top-tab .badge:empty { display: none; }

/* EVENT SUB-NAV — sticky below top-nav */
.event-sub-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 0;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 116px;   /* sits under the top-nav */
  z-index: 10;
  /* Patch 8.1.0 — centre to page width */
  max-width: calc(var(--max) - 40px); /* B141 align to web-banner width */
  margin: 0 auto;
  width: 100%;
}
.event-sub-nav::-webkit-scrollbar { display: none; }
/* B164 — attendee "Share my attendance" action, pinned to the right of the
   event sub-nav. Not a .tab, so it never participates in tab switching. */
.subnav-action {
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
  background: none;
  border: 1px solid var(--coral);
  color: var(--coral);
  border-radius: 999px;
  padding: 6px 14px;
  margin-right: 4px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.subnav-action:hover,
.subnav-action:focus-visible { background: var(--coral); color: #fff; }

.sub-tab {
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
}
.sub-tab:hover { color: var(--ink); }
.sub-tab.active { color: var(--ink); }
.sub-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--coral);
}
.sub-tab .badge {
  background: var(--coral);
  color: white;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.sub-tab .badge:empty { display: none; }

/* Approvals sub-tab count pills (Email pack purchases / Banner submissions /
   Date adjustments / Global block requests). Hidden when the count is zero. */
.ad-subtab .badge {
  background: var(--coral);
  color: white;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}
.ad-subtab .badge:empty { display: none; }

/* Feature sub-panes (used inside All Requests etc.) */
.feature-sub-pane { display: none; }
.feature-sub-pane.active { display: block; }

/* All-requests / all-meetings list rows */
.request-row .request-header,
.meeting-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.meeting-event-header {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 18px 0 10px;
  font-size: 1.1rem;
}
.event-meeting-block { margin-bottom: 24px; }
.cancelled-block summary {
  cursor: pointer;
  color: var(--ink-soft);
  padding: 8px 0;
  font-size: 0.9rem;
}
.meeting-row.cancelled { opacity: 0.65; }
.quote-mini {
  border-left: 3px solid var(--coral);
  padding-left: 10px;
  margin: 6px 0 4px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.pill {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pill.ok { background: rgba(90, 122, 82, 0.15); color: var(--moss); }
.pill.pending { background: rgba(199, 154, 74, 0.18); color: var(--gold); }
.pill.bad { background: rgba(255, 107, 91, 0.18); color: var(--coral-dark); }

/* Share modal */
.share-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.share-btn {
  display: block;
  text-align: center;
  padding: 12px;
  background: var(--cream-2);
  color: var(--ink);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.92rem;
  text-decoration: none;
  font-family: inherit;
}
.share-btn:hover { background: var(--cream); }

/* Email allowance modal */
.allowance-bar-wrap { padding: 8px 0; }
.allowance-bar {
  height: 12px;
  background: var(--cream-2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.allowance-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--moss) 0%, var(--gold) 70%, var(--coral) 100%);
  transition: width 0.3s ease;
}
.allowance-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.allowance-stats strong { color: var(--ink); }
.meta.warn { color: var(--coral-dark); }
.meta.ok { color: var(--moss); }
.buy-pack-row {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Banner placeholder (item 3) — shown when ad shell has no imagery */
.banner-promo.banner-pending {
  background: var(--cream-2);
  border: 1px dashed var(--line-strong);
  color: var(--ink-soft);
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  text-align: center;
}
.banner-pending-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.banner-pending-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.banner-pending strong { color: var(--ink); font-family: var(--font-display); }
.banner-pending-hint {
  font-size: 0.85rem;
  font-style: italic;
}

/* Generic data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 10px 0;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.data-table th {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.data-table code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--cream-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Submission card */
.submission-card {
  margin-bottom: 12px;
}
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.primary-btn.small, .ghost-btn.small {
  padding: 6px 12px;
  font-size: 0.82rem;
}
.ghost-btn.small.bad {
  color: var(--coral-dark);
  border-color: var(--coral-dark);
}

/* Toggle switch (admin feature flags) */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: 0.2s;
}
.switch .slider::before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 2px; top: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: var(--shadow-sm);
}
.switch input:checked + .slider { background: var(--moss); border-color: var(--moss); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* Form success state */
.form-success {
  color: var(--moss);
  background: rgba(90, 122, 82, 0.08);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-top: 10px;
  font-size: 0.92rem;
}

/* MOBILE — collapse top-nav into a wrapping row */
@media (max-width: 700px) {
  .top-nav, .event-sub-nav {
    padding: 0 4px;
  }
  .top-tab { padding: 12px 12px; font-size: 0.85rem; }
  .sub-tab { padding: 10px 10px; font-size: 0.82rem; }
  .event-sub-nav { top: 109px; }
  .share-grid { grid-template-columns: 1fr; }
}

/* Patch 7.4 — top-nav on account-level screens (no header bar above) */
#screen-account-home > .top-nav,
#screen-discover-events > .top-nav,
#screen-profile > .top-nav {
  top: 0;
}

/* Patch 7.5 — unified nav: action + spacer + signout */

/* The flex spacer that pushes the sign-out cluster to the right */
.top-nav-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

/* "+ Register for another event" action button — subtle differentiation */
.top-tab.top-tab-action {
  color: var(--coral-dark, var(--coral, #ff6b5b));
  font-weight: 600;
}
.top-tab.top-tab-action:hover {
  color: var(--ink);
}

/* "Sign out" — right-aligned, muted */
.top-tab.top-tab-signout {
  color: var(--ink-soft);
}
.top-tab.top-tab-signout:hover {
  color: var(--coral, #ff6b5b);
}
.top-tab.top-tab-signout.active::after,
.top-tab.top-tab-action.active::after {
  display: none; /* never show the active-underline on action/signout tabs */
}

/* On mobile, the spacer collapses; signout wraps below */
@media (max-width: 700px) {
  .top-nav-spacer { display: none; }
  .top-tab.top-tab-action,
  .top-tab.top-tab-signout {
    /* keep inline with the others when wrapping */
  }
}

/* Patch 8.0b.5 — global identity strip just under the global nav.
   Visible on every signed-in screen. Single source-of-truth on "which
   account am I?". Subtle muted band that doesn't compete with content.
   Patch 8.1.0 — centred to page width for visual alignment with content. */
.global-identity-strip {
  background: var(--cream-2, #f3ece1);
  color: var(--ink-soft, #555);
  font-size: 0.82rem;
  padding: 6px 24px;
  border-bottom: 1px solid var(--cream-3, #e3dccf);
  text-align: left;
  max-width: calc(var(--max) - 40px); /* B145 narrowed to align with bands; admin override below */
  margin: 0 auto;
  width: 100%;
}
.global-identity-strip.identity-full-width { max-width: var(--max); }
.global-identity-strip strong {
  color: var(--ink, #1a2332);
  font-weight: 600;
}
.global-identity-strip .identity-prefix {
  opacity: 0.7;
}
.global-identity-strip .identity-role {
  margin-left: 6px;
  font-size: 0.72rem;
  background: var(--coral-light, #ffdcd6);
  color: var(--coral-dark, #a8392d);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
@media (max-width: 700px) {
  .global-identity-strip { padding: 6px 12px; font-size: 0.78rem; }
}

/* Patch 8.0b.5 — tab-bar variants of the sign-out spacer + button so
   the organiser and admin dashboards can use the same right-aligned
   Sign out treatment as the account-level top-nav. */
.tab-bar-spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.tab.tab-signout {
  color: var(--ink-soft);
}
.tab.tab-signout:hover {
  color: var(--coral, #ff6b5b);
}
.tab.tab-signout.active::after {
  display: none; /* never show the active-underline on sign-out */
}
@media (max-width: 700px) {
  .tab-bar-spacer { display: none; }
}

/* ============================================================
   Patch 7.6 — Mobile hamburger global navigation
   ============================================================ */

/* Mobile nav bar — only visible on small screens */
.mobile-nav-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mobile-nav-bar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-nav-bar .brand-mark {
  width: 22px;
  height: 22px;
}
.mobile-nav-bar .brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
}

/* Hamburger icon: three lines that morph to an X */
.mobile-nav-toggle {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.mobile-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Backdrop — fades in behind the drawer */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 35, 50, 0.45);
  z-index: 60;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mobile-nav-backdrop.open { opacity: 1; }

/* Drawer — slides in from the right */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 320px);
  background: var(--paper);
  z-index: 70;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}
.mobile-nav-drawer.open { transform: translateX(0); }

.mobile-nav-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav-drawer-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
}
.mobile-nav-close {
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  color: var(--ink);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}
.mobile-nav-list li {
  padding: 0;
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  cursor: pointer;
  font-weight: 500;
}
.mobile-nav-link:hover, .mobile-nav-link:focus {
  background: var(--cream-2);
}
.mobile-nav-link-action {
  color: var(--coral-dark, var(--coral, #ff6b5b));
  font-weight: 600;
}
.mobile-nav-link-signout {
  color: var(--ink-soft);
  font-weight: 500;
}
.mobile-nav-link .badge {
  margin-left: auto;
  background: var(--ink);
  color: white;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}
.mobile-nav-link .badge:empty { display: none; }
.mobile-nav-separator {
  height: 1px;
  background: var(--line);
  margin: 8px 22px;
}
/* Patch B38 — drawer section headers (THIS EVENT / ALL EVENTS) and the coral
   divider that closes each section, matching the attendee drawer layout. */
.mobile-nav-header {
  padding: 16px 22px 6px;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.mobile-nav-list li.mobile-nav-header:first-child { padding-top: 8px; }
.mobile-nav-separator-coral {
  height: 2px;
  background: var(--coral, #ff6b5b);
  opacity: 0.85;
  margin: 12px 22px;
}

/* On mobile: hide the desktop top-nav, show the mobile bar */
@media (max-width: 700px) {
  .top-nav { display: none !important; }
  .mobile-nav-bar { display: flex; }
  /* The screens that previously had the top-nav at top:0 no longer need it */
  #screen-account-home > .top-nav,
  #screen-discover-events > .top-nav,
  #screen-profile > .top-nav,
  #screen-all-requests > .top-nav,
  #screen-all-meetings > .top-nav,
  #screen-attendee > .top-nav { display: none !important; }
  /* The event sub-nav (lower nav on the in-event screen) should sit just below the mobile bar */
  .event-sub-nav { top: 49px; }
}

/* On desktop: ensure mobile bar stays hidden */
@media (min-width: 701px) {
  .mobile-nav-bar { display: none !important; }
  .mobile-nav-drawer, .mobile-nav-backdrop { display: none !important; }
}

/* Patch 7.10 — Pre-fill notice on the register screen */
.prefill-banner {
  background: var(--cream-2);
  border-left: 3px solid var(--moss, #5a7a52);
  padding: 12px 14px;
  border-radius: 6px;
  margin: 12px 0 18px;
}
.prefill-banner p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.45;
}
.prefill-banner strong {
  color: var(--ink);
  font-weight: 600;
}

/* Patch 7.12 — Organiser ads & imagery modal */
.org-ads-list { display: flex; flex-direction: column; gap: 10px; }
.org-ad-row { padding: 12px 14px; }
.org-ad-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.org-ad-head strong { font-family: var(--font-display); font-weight: 500; }

/* ========================================
   Patch 8.1.0 — MY OVERVIEW FILTERS + PAGINATION
   ======================================== */

.overview-filters {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 12px 0 16px;
  padding: 0;
}
.overview-filters-details {
  padding: 12px 16px;
}
.overview-filters-details summary {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.overview-filters-details summary::-webkit-details-marker { display: none; }
.overview-filters-details summary::before {
  content: "▸";
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  color: var(--ink-soft);
}
.overview-filters-details[open] summary::before {
  transform: rotate(90deg);
}
.filter-summary {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.85rem;
}
.filter-section {
  margin-top: 14px;
}
.filter-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 600;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: all 0.12s ease;
}
.filter-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.filter-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.filter-count {
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.15);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
  color: inherit;
  opacity: 0.7;
}
.filter-chip:not(.active) .filter-count {
  background: var(--cream-2);
  color: var(--ink-soft);
  opacity: 1;
}
.filter-text-input {
  width: 100%;
  max-width: 360px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--paper);
}
.filter-text-input:focus {
  outline: none;
  border-color: var(--ink);
}
.filter-row-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 8px;
}
.filter-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ink-2);
  cursor: pointer;
}
.filter-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* PAGINATION */
.overview-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-2);
}
.pagination-info strong { color: var(--ink); }
.pagination-spacer { flex: 1; }
.pagination-controls {
  display: flex;
  gap: 8px;
}
.pagination-btn {
  padding: 6px 14px;
  font-size: 0.85rem;
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-size-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.pagination-size-label select {
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: inherit;
  background: var(--paper);
  cursor: pointer;
}
@media (max-width: 600px) {
  .overview-pagination {
    flex-direction: column;
    align-items: stretch;
  }
  .pagination-spacer { display: none; }
  .pagination-controls { justify-content: space-between; }
}

/* ========================================
   Patch 8.2.0 (B6) — ACTIVITY PILLS ON EVENT CARDS
   ======================================== */
.event-card-activity {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}
.activity-pill {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.activity-pill.activity-pending {
  background: #fff4e3;
  color: #8b5a17;
  border: 1px solid #f3e0b5;
}
.activity-pill.activity-accepted {
  background: #e8f3fc;
  color: #1f5d8c;
  border: 1px solid #c9def0;
}
.activity-pill.activity-booked {
  background: #e8f3ec;
  color: #2d6a3f;
  border: 1px solid #c4dccb;
}

/* ========================================
   Patch 8.2.0 (8.1) — PERSONAL EVENT UI
   ======================================== */

/* Corporate info / pricing page */
.corporate-info-block {
  margin: 24px 0;
}
.corporate-info-block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--ink);
}
.corporate-info-block ul {
  margin-left: 24px;
  color: var(--ink-2);
  line-height: 1.6;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.92rem;
}
.pricing-table th, .pricing-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.pricing-table th {
  background: var(--cream-2);
  font-weight: 600;
  color: var(--ink);
}
.pricing-table td:last-child {
  font-family: var(--font-mono);
  text-align: right;
}

/* Create personal event — checkbox row */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Personal Event Mgmt — event card list */
.pem-event-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 14px;
}
.pem-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.pem-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
}
.pem-dates {
  color: var(--ink-2);
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.pem-location {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.pem-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* Detail view */
.pem-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}
.pem-section h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.pem-attendees {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pem-attendee-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  gap: 12px;
}
.pem-attendee-info { flex: 1; }
.pem-attendee-pitch {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.4;
}
.pem-remove-btn {
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 0.85rem;
}

/* Patch 8.2.0 (B2.1) — Cross-event card action buttons */
.cross-event-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.cross-event-btn {
  padding: 6px 14px;
  font-size: 0.85rem;
}

/* ========================================
   Patch 8.2.0.1 — CARD SEPARATION
   Fix: cross-event card rows on All My Requests / Meetings had no
   visual separation between rows. Add background, border, padding,
   and margin so each row reads as a distinct card.
   ======================================== */
.card.request-row,
.card.meeting-row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.card.meeting-row.cancelled {
  background: var(--cream-2);
  opacity: 0.75;
}
.card.request-row .request-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
  gap: 12px;
}
.card.request-row .meta,
.card.meeting-row .meta {
  color: var(--ink-soft);
  font-size: 0.88rem;
  display: block;
  margin-top: 2px;
}
.card.request-row strong,
.card.meeting-row strong {
  font-size: 1rem;
}
.card.request-row .quote-mini,
.card.meeting-row .quote-mini {
  border-left: 3px solid var(--coral);
  padding-left: 10px;
  margin: 8px 0;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-style: italic;
}
.card.request-row .pill,
.card.meeting-row .pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.card.request-row .pill.ok,
.card.meeting-row .pill.ok {
  background: #e8f3ec;
  color: #2d6a3f;
  border: 1px solid #c4dccb;
}
.card.request-row .pill.bad,
.card.meeting-row .pill.bad {
  background: #fde8e6;
  color: #8b2e21;
  border: 1px solid #f0c8c1;
}
.card.request-row .pill.pending,
.card.meeting-row .pill.pending {
  background: #fff4e3;
  color: #8b5a17;
  border: 1px solid #f3e0b5;
}
/* "Withdrawn" / "Cancelled" / "Booked" pills coming through generic */
.card.request-row .pill:not(.ok):not(.bad):not(.pending),
.card.meeting-row .pill:not(.ok):not(.bad):not(.pending) {
  background: var(--cream-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* Patch 8.2.1 — section headers inside multi-section forms */
.form-section-header {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.form-section-header:first-child { margin-top: 0; }

/* ============================================================
   Patch 8.2.2 — Event Admin moderation UI
   ============================================================ */
.pem-subhead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  margin: 0 0 10px;
}
.pem-activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pem-activity-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.pem-activity-info {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.5;
}
.pem-activity-msg {
  margin-top: 6px;
  color: var(--ink-2);
  font-style: italic;
  font-size: 0.88rem;
  padding-left: 8px;
  border-left: 2px solid var(--coral);
}
.pem-activity-closed {
  opacity: 0.72;
}
.pem-activity-row .pill {
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink-soft);
  vertical-align: middle;
}
.pem-activity-row .pill.ok { background: #e8f0e1; color: #3d5435; }
.pem-activity-row .pill.pending { background: #fdf3d8; color: #7a5b14; }
.pem-closed-details summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.9rem;
  padding: 6px 0;
}
.pem-closed-details summary:hover { color: var(--ink); }
.pem-blocklist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pem-blocklist-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.pem-blocklist-row > div:first-child { flex: 1; }
.pem-cancel-mtg-btn,
.pem-withdraw-req-btn,
.pem-unblock-btn {
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 0.85rem;
}

/* ============================================================
   Patch 8.2.3a — Prominent event-code banner on PEM detail view
   ============================================================ */
.pem-code-banner {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 8px 0 16px;
  max-width: 480px;
}
.pem-code-banner-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.pem-code-banner-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pem-code-big {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  letter-spacing: 0.02em;
  padding: 0;
}
.pem-code-copy-btn {
  font-size: 0.85rem;
  padding: 6px 14px;
}

/* ============================================================
   Patch 8.2.3b — Social share buttons with brand colours
   ============================================================ */
.share-btn-linkedin:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.share-btn-facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.share-btn-twitter:hover { background: #14171a; color: #fff; border-color: #14171a; }
.share-btn-whatsapp:hover { background: #25d366; color: #fff; border-color: #25d366; }
.share-btn-email:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.share-btn-copy:hover { background: var(--coral); color: #fff; border-color: var(--coral); }

/* Patch 8.2.3b — compact share button on event cards alongside primary CTA */
.event-card-share-btn {
  font-size: 0.85rem;
  padding: 8px 14px;
  white-space: nowrap;
}
.event-card-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pem-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   Patch 8.2.3c — Share modal preview block
   ============================================================ */
.share-preview {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-sm);
}
.share-preview-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.share-preview-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  background: transparent;
  padding: 0;
}

/* ============================================================
   Patch 8.2.3d — Per-attendee block UI + admin queue
   ============================================================ */
.pem-attendee-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.pem-attendee-actions button {
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 4px 10px;
}
.attendee-actions-cell {
  white-space: nowrap;
}
.attendee-actions-cell button {
  font-size: 0.78rem;
  padding: 4px 10px;
  margin-right: 4px;
}

/* Admin global block requests queue */
.gbr-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.gbr-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.gbr-row-resolved { opacity: 0.7; background: var(--cream-2); }
.gbr-info { flex: 1; }
.gbr-info > div { margin-bottom: 4px; }
.gbr-reason {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--cream-2);
  border-left: 3px solid var(--coral);
  border-radius: 4px;
  font-style: italic;
  font-size: 0.9rem;
}
.gbr-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}
.gbr-actions button {
  font-size: 0.85rem;
  padding: 6px 12px;
  white-space: nowrap;
}

/* ============================================================
   Patch 8.2.3e — Attendee row layout: company-first header + tags
   ============================================================ */
.pem-attendee-company {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 2px;
}
.pem-attendee-name {
  display: block;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 2px;
}
.pem-attendee-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pem-attendee-tags .tag {
  font-size: 0.78rem;
  padding: 2px 10px;
  background: var(--cream-2);
  color: var(--ink-soft);
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-block;
}

/* ============================================================
   Patch 8.2.4 — Personal vs Corporate comparison page
   ============================================================ */
.hero-compare-link {
  margin-top: 6px;
  font-size: 0.92rem;
}
.hero-compare-link .link-btn {
  font-weight: 500;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0 36px;
}
@media (max-width: 720px) {
  .compare-grid { grid-template-columns: 1fr; }
}
.compare-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}
.compare-card-personal { border-top: 4px solid var(--coral); }
.compare-card-corporate { border-top: 4px solid var(--ink); }
.compare-card h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}
.compare-card ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 18px;
}
.compare-card ul li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: 0.95rem;
}
.compare-card ul li::before {
  content: "•";
  color: var(--coral);
  position: absolute;
  left: 6px;
  font-weight: bold;
}
.compare-card .primary-btn {
  margin-top: auto;
}

.compare-table-heading {
  margin: 32px 0 12px;
  font-size: 1.1rem;
}
.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.compare-table th,
.compare-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table th {
  background: var(--cream-2);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.compare-table th:nth-child(2),
.compare-table td:nth-child(2),
.compare-table th:nth-child(3),
.compare-table td:nth-child(3) {
  text-align: center;
  width: 28%;
}
.compare-section-row {
  background: var(--cream-2) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: left !important;
}

.compare-footer {
  text-align: center;
  margin-top: 24px;
}
.compare-footer-actions {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Patch B13 — Calendar export
   ============================================================ */
.calexport-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.calexport-grid a, .calexport-grid button {
  text-align: center;
  font-size: 0.95rem;
  padding: 12px;
  text-decoration: none;
  display: block;
}
.meet-cal-btn {
  white-space: nowrap;
}
.all-meetings-toolbar {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: flex-end;
}
.all-meetings-toolbar button {
  white-space: nowrap;
}

/* ============================================================
   Patch B7 — Unread indicator badge on event cards
   ============================================================ */
.event-card-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--coral);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}
.event-card-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
   Patch B16 — Admin overview clickable cells + sticky header
   ============================================================ */

/* Sticky column-header row on the Performance-by-event table */
.dashboard-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cream-2);
}
.dashboard-table thead th {
  background: var(--cream-2);
  box-shadow: 0 1px 0 0 var(--line);
}

/* Clickable cells — keep the row layout but indicate per-cell affordances */
.admin-cell-clickable {
  cursor: pointer;
}
.admin-cell-clickable:hover {
  background: var(--cream-2);
}
/* Drillable numeric cells (Attendees/Requests/Bookings/Ads) get a subtle
   underline-on-hover to show they go somewhere specific, not the row default */
.admin-cell-drill {
  position: relative;
}
.admin-cell-drill:hover {
  color: var(--coral);
}
.admin-cell-drill:hover::after {
  content: " →";
  font-size: 0.85em;
  opacity: 0.7;
}

/* Ad sales filter banner */
.ad-filter-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.ad-filter-banner button {
  font-size: 0.85rem;
  padding: 6px 12px;
  white-space: nowrap;
}

/* ============================================================
   Patch B17 — Muted Clear-form link variant
   ============================================================ */
.link-btn-muted {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.75;
}
.link-btn-muted:hover {
  color: var(--ink);
  opacity: 1;
}

/* ============================================================
   Patch 8.2.5 — Hero CTA rows with per-button description
   ============================================================ */
.hero-cta-with-desc {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  margin-top: 0;
}
.hero-cta-row {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 18px;
  align-items: center;
  /* Fixed equal row height — each CTA + its description occupies the same
     vertical slot, so the three rows are evenly spaced AND vertically aligned
     with the how-strip items on the right. */
  min-height: 86px;
  padding: 4px 0;
}
.hero-cta-row .hero-cta-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 11px 16px;
  font-size: 0.92rem;
}
.hero-cta-desc {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.42;
}
@media (max-width: 640px) {
  .hero-cta-row {
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: auto;
    padding: 8px 0;
  }
  .hero-cta-desc {
    font-size: 0.85rem;
    padding-left: 4px;
  }
}

/* ============================================================
   Patch B19 — Idle-state hint for attendee search
   ============================================================ */
.search-empty-idle {
  background: var(--cream-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  margin-top: 12px;
  font-style: italic;
}

/* ============================================================
   Help system — Phase 1
   ============================================================ */

/* Help nav buttons */
.top-tab-help {
  color: var(--coral-dark);
}
.top-tab-help:hover {
  background: var(--cream-2);
}

/* Inline page-help icon (next to page titles) */
.page-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 12px;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
  font-family: var(--font-sans);
}
.page-help-btn:hover {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
  transform: translateY(-1px);
}

/* Help screens layout */
.help-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 64px;
}
.help-page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

/* Index page */
.help-index-intro {
  margin-bottom: 32px;
}
.help-index-sub {
  font-size: 1.1rem;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.help-actor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.help-actor-tab {
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.help-actor-tab:hover {
  background: var(--cream-2);
}
.help-actor-tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.help-actor-section {
  margin-top: 36px;
}
.help-actor-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.help-actor-icon {
  font-size: 2rem;
  line-height: 1;
}
.help-actor-header h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}
.help-actor-header p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  max-width: 720px;
}

.help-howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.help-howto-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s ease;
}
.help-howto-card:hover {
  border-color: var(--coral);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.help-howto-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.help-howto-card p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}
.help-howto-card.is-stub {
  opacity: 0.65;
}
.help-howto-card.is-stub:hover {
  opacity: 1;
}
.help-stub-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  background: var(--cream-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 4px;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

/* Detail page */
.help-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.help-actor-badge {
  padding: 4px 12px;
  background: var(--cream-2);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.help-article {
  max-width: 780px;
}
.help-article h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.2rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.help-article .help-lead {
  font-size: 1.15rem;
  color: var(--ink-2);
  margin-bottom: 24px;
  line-height: 1.5;
}
.help-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  margin: 28px 0 12px;
  letter-spacing: -0.01em;
}
.help-body h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 22px 0 10px;
  letter-spacing: -0.005em;
}
.help-body p {
  margin: 0 0 14px;
  line-height: 1.6;
  color: var(--ink);
}
.help-body ul {
  margin: 0 0 16px;
  padding-left: 24px;
}
.help-body ul li {
  margin: 4px 0;
  line-height: 1.55;
  color: var(--ink);
}
.help-body strong {
  color: var(--ink);
}
.help-body em {
  font-style: italic;
}
.help-body code {
  background: var(--cream-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  border: 1px solid var(--line);
  color: var(--ink);
}
.help-body table.help-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 0.9rem;
}
.help-body table.help-table th,
.help-body table.help-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.help-body table.help-table th {
  background: var(--cream-2);
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.help-body .help-figure {
  margin: 22px 0;
  padding: 14px;
  background: var(--cream-2);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.help-body .help-figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
}
.help-body .help-figure figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}
/* Graceful fallback for missing screenshots — show the figcaption as
   primary content, with a placeholder block. */
.help-body .help-figure-missing img { display: none; }
.help-body .help-figure-missing {
  border: 1px dashed var(--line);
  text-align: center;
  padding: 24px 14px;
}
.help-body .help-figure-missing::before {
  content: "📷 Screenshot coming soon";
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-style: italic;
}
.help-body .help-figure-missing figcaption {
  font-style: normal;
  color: var(--ink-2);
  font-size: 0.9rem;
}

.help-coming-soon {
  padding: 24px;
  background: var(--cream-2);
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  margin: 16px 0;
}
.help-coming-soon p {
  margin: 0 0 8px;
}

.help-related {
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--cream-2);
  border-radius: var(--radius);
  border-left: 4px solid var(--coral);
}
.help-related h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
}
.help-related ul {
  margin: 0;
  padding-left: 20px;
}
.help-related ul li {
  margin: 6px 0;
  line-height: 1.5;
}
.help-related ul li a {
  color: var(--coral-dark);
  font-weight: 500;
}
.help-related ul li a:hover {
  color: var(--coral);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .help-main { padding: 20px 16px 48px; }
  .help-page-title { font-size: 1.8rem; }
  .help-article h1 { font-size: 1.7rem; }
  .help-actor-tabs { gap: 6px; }
  .help-actor-tab { padding: 6px 12px; font-size: 0.85rem; }
  .help-howto-grid { grid-template-columns: 1fr; }
}

/* Page-aware Help button injected into tab-bar role navs (organiser/admin) */
.tab.tab-help {
  color: var(--coral-dark);
}
.tab.tab-help:hover {
  background: var(--cream-2);
}

/* ============================================================
   Patch B23 — Inline-styled filter bars (.filter-row)
   ============================================================
   Some admin filter bars in features_ui.js are rendered with inline styles
   and the class `.filter-row` (Approvals -> Email pack history, etc.).
   Their inputs sit outside `.form`, so the site-wide input rules never
   reach them. We normalise them here to match the Email throttle look
   (the B22 reference: 11px 14px padding, 0.97rem font, line-strong border).
   The labels' inline font-size:12px requires !important to override.
   ============================================================ */

.filter-row {
  align-items: end;  /* harmless; matches what's inline already */
}

/* Labels: override the inline 12px so labels match the rest of the site.
   The inline rule is on the label element, so we must use !important. */
.filter-row label {
  font-size: 0.88rem !important;
  color: var(--ink-2);
  font-weight: 500;
  gap: 6px !important;
}

/* Inputs and selects in the filter row pick up consistent sizing.
   We keep min-width that's set inline (it's per-field). */
.filter-row input[type="text"],
.filter-row input[type="email"],
.filter-row input[type="date"],
.filter-row input[type="search"],
.filter-row input[type="number"],
.filter-row select {
  padding: 11px 14px;
  font-size: 0.97rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--ink);
  font-family: var(--font-body);
  transition: border 0.15s ease, box-shadow 0.15s ease;
}
.filter-row input:focus,
.filter-row select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 35, 50, 0.08);
}

/* The Apply/Clear buttons in these toolbars are sized with .small.
   When inputs are now taller, the buttons would look short next to them.
   Match button height to the input height so the whole row aligns. */
.filter-row .primary-btn.small,
.filter-row .ghost-btn.small {
  padding: 11px 18px;
  font-size: 0.95rem;
}

/* ============================================================
   Patch MOBILE — phone layout fixes
   ============================================================
   Applied at <=768px viewport. Covers:
   - Hide desktop top-nav / tab-bar; rely on hamburger drawer (handled by JS)
   - Wrap action-button rows into 2-column grid
   - Reflow .attendee-table into a card per row (column labels via ::before)
   - Horizontal scroll wrappers get a fade hint on the right edge
   - Filter-row (Approvals etc.) stacks one input per row, full width
   - Tighten identity strip + body padding
   ============================================================ */
@media (max-width: 768px) {
  /* --- Reduce body padding so we don't waste a thumb-width on margins --- */
  body { padding: 0; }
  .app-main, .landing-main { padding-left: 16px !important; padding-right: 16px !important; }

  /* ===========================================================
     ATTENDEE-FIRST LANDING REDESIGN (mobile only)
     -----------------------------------------------------------
     Goal: clean vertical scroll, content above the fold, no
     duplicated brand chrome, no decorative image. Source order
     stays the same; visual order is set with `order:`.
     ===========================================================*/
  /* Hide the duplicate brand+Sign-in landing header — the mobile-nav-bar
     above it already shows the brand, and Sign in lives in the drawer.
     This applies to ALL screens with a landing-header (landing, register,
     login, compare, corporate-info, magic-redeem, request-reset, reset-password). */
  .landing-header { display: none !important; }

  /* Hide the hero illustration on phones — pure decoration */
  .hero-svg { display: none !important; }

  /* Force the hero into a single vertical column on phones */
  .hero {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    padding-top: 18px;
  }
  /* Reorder so the narrative reads: eyebrow/headline/sub/FREE → CTAs → 01/02/03 → Compare */
  .hero-text-top    { order: 1; }
  .hero-text-bot    { order: 2; }   /* the 3 CTA buttons */
  .hero-visual-bot  { order: 3; }   /* 01 / 02 / 03 strip */
  .hero-visual-top  { order: 4; padding-top: 10px; }   /* Compare link only (image hidden above) */

  /* Tighten the type for narrow viewports */
  .hero h1.hero-title { font-size: 2rem; line-height: 1.15; }
  .hero .eyebrow { font-size: 0.85rem; margin-bottom: 6px; }
  .hero .hero-sub, .hero .hero-flow, .hero .hero-free { font-size: 0.95rem; line-height: 1.5; }

  /* CTA buttons full-width and tap-friendly */
  .hero-cta-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .hero-cta-btn { width: 100%; padding: 16px 18px; font-size: 1.02rem; min-height: 52px; }
  .hero-cta-desc { font-size: 0.88rem; line-height: 1.45; margin: 0 4px; color: var(--ink-soft); }

  /* "01 / 02 / 03" how-strip — already has .how-strip-vertical class, just tune type */
  .how-strip-vertical { display: flex; flex-direction: column; gap: 18px; }
  .how-item h3 { font-size: 1.1rem; margin: 4px 0; }
  .how-item p  { font-size: 0.95rem; line-height: 1.45; }
  .how-num { font-size: 0.85rem; }

  /* Compare link at the bottom — quiet, centred */
  .hero-compare-top { text-align: center; margin: 0; }
  .hero-compare-top .link-btn { font-size: 0.92rem; padding: 8px; }

  /* Footer: stay readable when wrapping */
  .landing-foot { font-size: 0.85rem; flex-wrap: wrap; gap: 6px; padding: 16px; line-height: 1.6; }

  /* ===========================================================
     END landing redesign
     ===========================================================*/

  /* ===========================================================
     ATTENDEE EVENT-HUB CARDS (mobile) — tap-friendly hierarchy
     -----------------------------------------------------------
     Each attendee card should have a clear hierarchy: name big,
     company secondary, pitch truncated, tags wrapping, and a
     prominent "Request meet" button. Tap targets >= 44px tall.
     ===========================================================*/
  .attendee-card {
    padding: 16px 14px !important;
    margin-bottom: 12px !important;
  }
  .attendee-card .name { font-size: 1.15rem; line-height: 1.25; margin: 0 0 2px; }
  .attendee-card .company { font-size: 0.92rem; margin: 0 0 8px; color: var(--ink-soft); }
  .attendee-card .pitch.truncated {
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .attendee-card .tag-list { gap: 4px; margin-bottom: 10px; }
  .attendee-card .tag { font-size: 0.78rem; padding: 3px 8px; }
  /* Actions: bigger tap targets, full-width on phones */
  .attendee-card .actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 10px;
  }
  .attendee-card .actions button {
    flex: 1 1 0;
    min-height: 44px;
    padding: 11px 14px;
    font-size: 0.95rem;
  }
  .attendee-card .score {
    font-size: 0.78rem;
    padding: 3px 8px;
  }

  /* --- Hide the desktop tab-bar (organiser/admin) on phones. The mobile
        drawer (hamburger) carries the same items. --- */
  .tab-bar { display: none !important; }

  /* --- Hide the desktop top-nav (attendee) on phones for the same reason.
        The mobile-nav-bar header sits above it instead. --- */
  .top-nav { display: none !important; }

  /* --- Hide the desktop app-header strip on screens that have a tab-bar,
        because the mobile-nav-bar already shows the brand on top.
        Patch B31 — added #screen-attendee and #screen-personal-event-mgmt
        which were missing from this rule, producing a duplicate brand strip
        on mobile. The event name previously shown on the right of the header
        is duplicated by the .event-context-banner below it, so no info lost. --- */
  #screen-organiser > .app-header,
  #screen-admin    > .app-header,
  #screen-attendee > .app-header,
  #screen-personal-event-mgmt > .app-header { display: none; }

  /* --- Identity strip: let it wrap nicely instead of breaking words --- */
  .global-identity-strip {
    font-size: 0.82rem;
    padding: 8px 16px;
    line-height: 1.4;
    word-break: break-word;
  }

  /* --- Section title: scale heading sizes for narrow viewports --- */
  .section-title { font-size: 1.4rem; line-height: 1.2; }
  h1.hero-title { font-size: 2rem; line-height: 1.15; }
  .hero-text-top, .hero-text-bot { padding: 0 4px; }

  /* --- Action-button rows wrap to a 2-column grid --- */
  .event-detail-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .event-detail-actions button { width: 100%; }

  /* --- Attendee table → card per row ---
       The table itself stays a <table>; we strip its tabular layout via CSS
       so each <tr> becomes a card and each <td> becomes a labelled row.
       Labels come from ::before on each cell, indexed by :nth-child to match
       the column order: Name / Company / Email / Tags / Pitch / Meeting / Actions
   */
  .attendee-table-wrap { overflow: visible; }
  .attendee-table { display: block; width: 100%; }
  .attendee-table thead { display: none; }
  .attendee-table tbody { display: block; }
  .attendee-table tr {
    display: block;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }
  .attendee-table td {
    display: block;
    padding: 4px 0;
    border: none;
    font-size: 0.92rem;
    line-height: 1.4;
  }
  .attendee-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 2px;
  }
  /* Hardcoded column labels (matching the seven <th> in the template) */
  .attendee-table td:nth-child(1)::before { content: 'Name'; }
  .attendee-table td:nth-child(2)::before { content: 'Company'; }
  .attendee-table td:nth-child(3)::before { content: 'Email'; }
  .attendee-table td:nth-child(4)::before { content: 'Tags'; }
  .attendee-table td:nth-child(5)::before { content: 'Pitch'; }
  .attendee-table td:nth-child(6)::before { content: 'Meeting'; }
  .attendee-table td:nth-child(7)::before { content: ''; } /* actions row — no label */
  .attendee-table td:nth-child(7) {
    margin-top: 8px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }
  /* Make per-row action buttons wrap and stretch nicely */
  .attendee-table td:nth-child(7) button {
    margin-right: 6px;
    margin-bottom: 4px;
  }

  /* --- Other tables: horizontal scroll with a fade hint on the right ---
       The hint indicates more columns are available off-screen. */
  .table-wrap, .data-table-wrap, .performance-table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap::after, .data-table-wrap::after, .performance-table-wrap::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(248, 240, 230, 0.95));
  }

  /* --- Filter rows stack vertically, full-width inputs --- */
  .filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .filter-row label {
    width: 100% !important;
  }
  .filter-row input,
  .filter-row select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* Apply/Clear buttons on filter row sit side-by-side */
  .filter-row .primary-btn.small,
  .filter-row .ghost-btn.small {
    flex: 1 1 auto;
  }

  /* --- Modal: shrink overlay padding so the modal uses more screen --- */
  .modal { padding: 14px; }
  .modal-actions { gap: 8px; }
  .modal-actions button { padding: 11px 14px; font-size: 0.95rem; min-height: 44px; }

  /* Modal content fills viewport better on phones, and the action bar sticks
     to the bottom so the primary button is always thumb-reachable. */
  .modal .modal-box, .modal-box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh;
    margin: 0 !important;
    border-radius: 14px 14px 0 0;
    display: flex;
    flex-direction: column;
  }
  .modal-box > .modal-actions {
    position: sticky;
    bottom: 0;
    background: white;
    padding-top: 10px;
    margin-top: auto;
    border-top: 1px solid var(--line);
  }

  /* --- Form rows: stack on phones rather than 1fr 1fr --- */
  .form-row { grid-template-columns: 1fr !important; }
  /* (admin-edit-form already has its own media-query for this — that still
     works because our rule has the same specificity and we use !important.) */

  /* --- Ad subtabs (Purchases / New / Schedule / Promotions / Rates):
        let them wrap to multiple rows on narrow screens --- */
  .ad-subtabs { flex-wrap: wrap; gap: 4px; }
  .ad-subtab { flex: 0 0 auto; }

  /* --- Sub-tab nav inside attendee event hub: allow horizontal scroll
        for narrow viewports. The admin event-detail-subtabs gets a 2x2
        grid instead (handled below) so all four buttons are visible. */
  .subtabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  /* --- Admin Events tree: 2x2 grid for the four sub-tab buttons
        (Attendees / Requests / Bookings / Edit event). The Edit event
        button has an inline margin-left:auto which we override so it
        sits in the grid like the other three. --- */
  .event-detail-subtabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .event-detail-subtabs .event-detail-subtab {
    margin: 0 !important;       /* defeat inline margin-left:auto */
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    text-align: center;
    font-size: 0.9rem;
  }
}

/* ============================================================
   Patch B26 — Organiser attendee-list filter
   ============================================================
   A filter bar sits above the .attendee-table inside the
   renderOrganiserEventDetail modal. On mobile (<768px) the bar is
   collapsed by default behind a "Filter ▾" button; on desktop the
   bar is always visible and the toggle button is hidden.
   ============================================================ */
.org-attendee-filter-wrap {
  margin: 12px 0 8px;
}
/* The toggle button is mobile-only — hide on desktop, show in the media
   query below. */
.org-attendee-filter-toggle {
  display: none;
}
.org-attendee-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.org-attendee-filter-row .filter-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
}
.org-attendee-filter-row .filter-search-wrap > span {
  font-size: 0.88rem;
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.org-attendee-filter-row input[name="q"] {
  flex: 1 1 auto;
  min-width: 0;
}
.org-attendee-filter-count {
  margin: 6px 2px 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.org-attendee-filter-empty {
  margin: 14px 4px;
  padding: 14px;
  background: var(--cream, #f8f0e6);
  border: 1px dashed var(--line, #d8c8b4);
  border-radius: 10px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.org-attendee-filter-empty .link-btn {
  margin-left: 6px;
}

/* Mobile: show the toggle, hide the form when collapsed */
@media (max-width: 768px) {
  .org-attendee-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  .org-attendee-filter-row.collapsed-mobile {
    display: none;
  }
  /* When expanded on mobile, the row stacks (the global mobile rule on
     .filter-row already handles this — full-width inputs, vertical stack). */
}

/* ============================================================
   Patch B27a — Help link in identity strip (mobile only)
   Patch B27b — Two-column layout fix to keep the button horizontal
   Patch B27c — Role chip + Help? share a guaranteed horizontal row
   Patch B27d — Three-line mobile layout (Name / Email / Role+Help)
   Patch B27e — Align role chip to left edge (matches Name/Email), strip
                pill styling from Help? — now plain text, soft-ink colour,
                underline on tap.
   ============================================================
   Mobile structure:
     ┌──────────────────────────────────────────┐
     │ Name                                     │
     │ Email                                    │
     │ [role]                            Help?  │
     └──────────────────────────────────────────┘

   All three lines start at the same left edge. The role line is a flex
   row: chip left, Help? right (via justify-content: space-between).
   The chip and Help? share a horizontal baseline.
   ============================================================ */

/* Default (desktop): single-line inline layout. */
.identity-help-btn {
  display: none;
}
.global-identity-strip .identity-line {
  display: inline;       /* desktop: flow inline as one continuous string */
}
.global-identity-strip .identity-line-name::after  { content: ' '; }
.global-identity-strip .identity-line-email::before { content: '('; }
.global-identity-strip .identity-line-email::after  { content: ') '; }

@media (max-width: 768px) {
  /* Hide inline ".page-help-btn" buttons next to screen titles on mobile.
     Help is offered via the identity-strip link instead. */
  .page-help-btn:not(.identity-help-btn) {
    display: none !important;
  }

  /* Identity strip stacks three lines vertically. All children start at the
     same left edge — no per-line padding/margin offsets. */
  .global-identity-strip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  /* Each line is its own block; reset the desktop inline decorations. */
  .global-identity-strip .identity-line {
    display: block;
    line-height: 1.35;
    word-break: break-word;
    margin: 0;
    padding: 0;
  }
  .global-identity-strip .identity-line-name {
    font-weight: 700;
  }
  .global-identity-strip .identity-line-email {
    color: var(--ink-soft, #5a4a36);
    font-size: 0.92rem;
  }
  /* Suppress desktop decorators on mobile */
  .global-identity-strip .identity-line-name::after,
  .global-identity-strip .identity-line-email::before,
  .global-identity-strip .identity-line-email::after {
    content: none;
  }

  /* Role line is a flex row: chip on the left at the same indent as name/email,
     Help? on the right. align-items: baseline keeps their text on one line. */
  .global-identity-strip .identity-line-role {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;            /* baseline-align chip text with Help text */
    justify-content: space-between;   /* chip left, Help? right */
    gap: 10px;
    margin-top: 4px;
    padding: 0;                       /* no inward indent */
  }

  /* Role chip: starts at the absolute left edge of the strip,
     never shrinks, keeps its natural width on one line. */
  .global-identity-strip .identity-line-role .identity-role {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    word-break: keep-all;
    display: inline-block;
  }

  /* Help? — plain text in soft-ink colour. Underlined when tapped/focused.
     No border, no background, no rounded shape. */
  .identity-help-btn {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--ink-soft, #5a4a36);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.35;                /* matches .identity-line line-height */
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    min-height: 0;                    /* defeat any inherited button min-height */
    -webkit-appearance: none;
    appearance: none;
  }
  .identity-help-btn:hover,
  .identity-help-btn:focus,
  .identity-help-btn:active {
    background: transparent;
    color: var(--ink-soft, #5a4a36);
    text-decoration: underline;       /* underline on tap / hover / keyboard focus */
    outline: none;
  }

  /* Edge case: no role — keep Help? right-aligned by itself */
  .global-identity-strip .identity-line-role:not(:has(> .identity-role)) {
    justify-content: flex-end;
  }
}

/* ============================================================
   Patch B27g — Multiple polish fixes
   ============================================================
   1. .modal-x-close: top-right X-close button injected into every modal by
      modal() in app.js. Always visible (mobile + desktop) — a tappable 32px
      square in the top-right corner of the modal container.
   2. Smaller chocolate-box action buttons on mobile: reduced padding and
      font-size so the action grid (Edit event / Share event / etc.) fits
      without dominating the viewport.
   3. .pricing-tiers list styling: clean bullets, comfortable spacing,
      bold tier labels.
   ============================================================ */

/* X-close button on every modal */
.modal-x-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-soft, #5a4a36);
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  z-index: 10;
  -webkit-appearance: none;
  appearance: none;
}
.modal-x-close:hover,
.modal-x-close:focus {
  background: var(--cream, #f8f0e6);
  color: var(--ink, #1a2332);
  outline: none;
}
.modal-x-close:active {
  background: var(--line, #d8c8b4);
}
/* Make the modal container position: relative so X positions correctly */
.modal {
  position: relative;
}

/* Pricing tiers list — used on landing pricing block and Billing section */
.pricing-tiers {
  list-style: disc inside;
  padding: 0;
  margin: 12px 0;
  line-height: 1.6;
}
.pricing-tiers li {
  margin-bottom: 6px;
}
.pricing-tiers li strong {
  color: var(--ink, #1a2332);
}

@media (max-width: 768px) {
  /* Smaller chocolate-box action buttons on mobile.
     Keep the 2-col grid (already established earlier in the file) but
     reduce padding and font-size so all 6+ actions fit on one screen. */
  .event-detail-actions button {
    padding: 10px 12px !important;
    font-size: 0.88rem !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
  }
  /* Reduce gap between the buttons too */
  .event-detail-actions {
    gap: 6px !important;
  }

  /* On mobile, also reduce top padding inside modal to leave room for X-close
     without it overlapping content */
  .modal {
    padding-top: 14px;
  }
  .modal > h2:first-child,
  .modal > h3:first-of-type,
  .modal > .modal-x-close + h2,
  .modal > .modal-x-close + h3 {
    padding-right: 40px;   /* ensure heading text doesn't sit under the X button */
  }
}

/* ============================================================
   Patch B28 — Graceful 403 fallback friendly state styling
   ============================================================
   Lightweight cosmetic polish for the modal contents rendered by
   showForbiddenState() in app.js. The modal itself uses the existing
   .modal styles; this just refines the embedded .forbidden-state panel.
   ============================================================ */
.forbidden-state {
  max-width: 380px;
  margin: 0 auto;
}
.forbidden-state h3 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.35rem;
}
.forbidden-state .modal-actions {
  margin-top: 20px;
}
.forbidden-state .modal-actions button {
  width: 100%;
  min-height: 44px;
}

/* ============================================================
   Patch B29 — Mobile brand-bar Sign-in pill
   ============================================================
   Small outlined pill button next to the brand, shown only when the user
   is signed out (visibility toggled by features_ui.js). Mobile-only via
   the existing media-query scope of the mobile-nav-bar; on desktop the
   whole mobile-nav-bar is hidden so this comes along for free.
   ============================================================ */
.mobile-nav-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;          /* push it to the right next to the hamburger */
  margin-right: 10px;         /* small gap between Sign-in and hamburger */
  padding: 6px 14px;
  background: transparent;
  border: 1.5px solid var(--ink, #1a2332);
  border-radius: 999px;
  color: var(--ink, #1a2332);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mobile-nav-signin:hover,
.mobile-nav-signin:focus {
  background: var(--ink, #1a2332);
  color: #fff;
  outline: none;
}
.mobile-nav-signin:active {
  background: var(--ink, #1a2332);
  color: #fff;
  transform: scale(0.97);
}
.mobile-nav-signin[hidden] {
  display: none !important;
}

/* ============================================================
   Patch B33 — Mobile attendee chocolate-box action grid
   ============================================================
   2x2 button grid above the event sub-tabs on the attendee event screen.
   Hidden entirely on desktop (sub-tab nav is the canonical attendee nav).
   On mobile, Event Profile and Attendance use a "pane-as-modal" treatment:
   the underlying tab-pane is the modal content, presented as a bottom-sheet
   with an X-close that returns the user to My Overview.
   ============================================================ */

/* Default: hide on desktop entirely */
.attendee-event-actions {
  display: none;
}

@media (max-width: 768px) {
  /* Show as 2x2 grid on mobile */
  .attendee-event-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 12px 0 16px;
  }
  /* B168 — active event tab reflected on the 2x2 grid button (stays visible so
     the user can switch tabs; replaces the old full-screen bottom-sheet). */
  .attendee-event-actions button.active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .attendee-event-actions button {
    padding: 10px 12px;
    font-size: 0.92rem;
    min-height: 0;
    line-height: 1.2;
  }
  /* B164 — the Share button is the odd 5th action: span both columns and tint
     it so it reads as the distinct "share" action rather than a tab jump. */
  .attendee-event-actions .subnav-share {
    grid-column: 1 / -1;
    border-color: var(--coral);
    color: var(--coral);
  }
  /* B200 — Group meetings is the other full-width action on mobile */
  .attendee-event-actions .subnav-gm-mobile {
    grid-column: 1 / -1;
  }

  /* Pane-as-modal treatment for Event Profile / Attendance on mobile.
     The tab-pane is already .active (so visible) — we just dress it up.
     Patch B34 — top adjusted to account for mobile-nav-bar height; X-close
     was previously hidden behind the header. */
  #screen-attendee .tab-pane.pane-as-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--cream, #faf3e8);
    overflow-y: auto;
    padding: 60px 18px 24px;        /* room at top for X-close button */
    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  }
  /* X-close button — Patch B34: scoped to the modalised pane (position:absolute
     within the pane, not position:fixed over the viewport) so it can't sit
     behind the mobile-nav-bar header at the top of the page. */
  .pane-as-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-dark, #f0e0c8);
    border: 1.5px solid var(--ink-soft, #5a4a36);
    border-radius: 50%;
    color: var(--ink, #1a2332);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 1001;
  }
  .pane-as-modal-close:hover,
  .pane-as-modal-close:focus {
    background: var(--ink, #1a2332);
    color: #fff;
    outline: none;
  }
  /* When a modal pane is open, prevent body scroll behind it */
  #screen-attendee:has(.tab-pane.pane-as-modal) {
    overflow: hidden;
  }
}

/* Patch B36 — Cancel button on the Attendance / Event Profile forms.
   Hidden on desktop (the sub-tab nav is the way back there); shown full-width
   on mobile as a reliable "discard & return to My Overview" control that, unlike
   the floating X, can't be obscured by the fixed brand bar at the top. */
.attendee-form-cancel { display: none; }
@media (max-width: 768px) {
  .attendee-form-cancel {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
}
/* Patch B38 — mobile-only "Close" on the Event Meetings pane (returns to origin). */
.attendee-pane-close { display: none; }
@media (max-width: 768px) {
  .attendee-pane-close {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 16px;
  }
}

/* ============================================================
   Patch B35 — Days widget Select all / Deselect all toolbar
   ============================================================
   Small button row sits between the "Days & hours" label and the list of
   day-rows in both the Attendance form and the Event Profile form. Lets
   users tick or untick all days at once instead of clicking 7+ checkboxes
   individually.
   ============================================================ */
.days-toolbar {
  display: flex;
  gap: 8px;
  margin: 4px 0 10px;
  flex-wrap: wrap;
}
.ghost-btn.small-btn,
.primary-btn.small-btn {
  padding: 6px 12px;
  font-size: 0.85rem;
  min-height: 32px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  /* On mobile, full-width side-by-side buttons */
  .days-toolbar {
    gap: 6px;
  }
  .ghost-btn.small-btn,
  .primary-btn.small-btn {
    flex: 1;
    padding: 8px 8px;
    font-size: 0.85rem;
  }
}

/* ============================================================
   Patch B36 — Privacy & data section styling
   ============================================================
   Two stacked action buttons (Download my data / Delete my account)
   on the account profile screen. Each button is taller than usual
   because it carries a primary label + a hint subtitle.
   ============================================================ */

.privacy-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  max-width: 480px;
}

.privacy-actions button {
  text-align: left;
  padding: 14px 18px;
  font-weight: 600;
}

.privacy-actions .hint {
  font-weight: normal;
  color: var(--ink-soft, #5a4a36);
}

.ghost-btn.danger {
  border-color: #c25a4a;
  color: #c25a4a;
}
.ghost-btn.danger:hover,
.ghost-btn.danger:focus {
  background: #c25a4a;
  color: #fff;
  outline: none;
}

.primary-btn.danger {
  background: #c25a4a;
  color: #fff;
}
.primary-btn.danger:hover,
.primary-btn.danger:focus {
  background: #a44a3c;
  outline: none;
}
.primary-btn.danger:disabled {
  background: #d0a99e;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .privacy-actions {
    max-width: none;
  }
}

/* ============================================================
   Patch B43 — Profile screen legal links footer
   ============================================================ */
.profile-legal-foot {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
}
.profile-legal-foot a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0 4px;
}
.profile-legal-foot a:hover {
  color: var(--coral-dark);
  text-decoration: underline;
}
.profile-legal-foot .dot {
  margin: 0 2px;
  color: var(--line-strong);
}

/* ============================================================
   Patch B44 (Bug 1) — IWBT brand banner on global-nav screens
   ============================================================
   The .app-header style already exists for screen-attendee. The new
   .app-header-global modifier inherits that style and is hidden on
   mobile, where the #mobile-nav-bar (with its own brand) is shown
   instead. The breakpoint mirrors the existing mobile-nav-bar
   visibility logic so we don't show the brand twice.
   ============================================================ */
@media (max-width: 768px) {
  .app-header-global { display: none; }
}

/* ============================================================
   Patch B48 (B.3.2) — Listing-page advert tile (320×120 advert)
   Interleaved every 5 event cards on All Events / Discover Events.
   Visually distinct from event cards: image-led, smaller, "Sponsored" label.
   ============================================================ */
.advert-tile {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 12px;
  margin: 8px 0;
  background: var(--cream-2, #faf6ee);
  border: 1px dashed var(--line, #d8d0bc);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.15s ease;
}
.advert-tile:hover {
  background: var(--cream-3, #f3ecda);
  text-decoration: none;
}
.advert-tile-label {
  position: absolute;
  top: 6px;
  left: 10px;
  background: rgba(26, 35, 50, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  z-index: 2;
}
.advert-tile-img {
  flex: 0 0 160px;
  width: 160px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  background: #f5f5f5;
  display: block;
}
.advert-tile-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #1a2332;
  background: var(--cream-3, #f3ecda);
}
.advert-tile-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-size: 0.94em;
  min-width: 0;
}
.advert-tile-text strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.advert-tile-text .meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .advert-tile-img {
    flex: 0 0 120px;
    width: 120px;
    height: 45px;
  }
}

/* ============================================================
   Patch B49 (B.4) — Event banner fallback (D10)
   Rendered in the sponsor-slot when no sponsor banner image exists.
   Coloured rectangle using event's colour scheme, event name in contrasting text.
   Matches the same horizontal slot dimensions as the sponsor banner above
   so the layout doesn't shift between sponsored / unsponsored events.
   ============================================================ */
.event-banner-fallback {
  display: block;
  width: 100%;
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 16px;
  min-height: 140px;
  /* Aspect-ratio-equivalent to 1200x300 banner so when laid out wide it matches */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}
.event-banner-fallback-inner {
  max-width: 80%;
}
.event-banner-fallback-code {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}
.event-banner-fallback-name {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  /* Use the inherited colour from the parent (set inline per scheme) */
  color: inherit;
}
@media (max-width: 700px) {
  .event-banner-fallback {
    min-height: 110px;
    padding: 22px 22px;
  }
  .event-banner-fallback-name {
    font-size: 24px;
  }
}

/* ============================================================
   i18n language switcher (Wave 1) — compact flag dropdown
   ============================================================ */
.lang-switcher-mount { display: inline-flex; align-items: center; }
select.lang-switcher {
  font: inherit;
  font-size: 0.9rem;
  padding: 4px 8px;
  border: 1px solid rgba(26, 35, 50, 0.18);
  border-radius: 8px;
  background: #fff;
  color: #1a2332;
  cursor: pointer;
  line-height: 1.2;
  appearance: auto;
}
select.lang-switcher:hover { border-color: #ff6b5b; }
.landing-nav .lang-switcher-mount { margin-right: 10px; }

/* i18n switcher inside the signed-in identity strip (Wave 2) */
.lang-switcher-mount.identity-lang { margin-left: 10px; display: inline-flex; vertical-align: middle; }
.identity-lang select.lang-switcher { font-size: 0.82rem; padding: 2px 6px; }


/* ============================================================
   High-contrast accessibility mode. User toggle sets data-contrast="high"
   on <html> (i18n.js). Re-themes the whole site via the palette variables,
   and because applyEventTheme() stands down when it's on, it also wins over
   per-event organiser branding.
   ============================================================ */
html[data-contrast="high"] {
  --cream: #ffffff;
  --cream-2: #f2f2f2;
  --paper: #ffffff;
  --ink: #000000;
  --ink-2: #000000;
  --ink-soft: #1c1c1c;
  --coral: #c0271a;
  --coral-dark: #97160c;
  --moss: #155422;
  --gold: #5a4708;
  --line: rgba(0, 0, 0, 0.55);
  --line-strong: #000000;
  --btn-bg: #000000;
  --btn-label: #ffffff;
  --banner-fill: #000000;
  --nav-bg: #ffffff;
}
/* Links underlined so they aren't distinguished by colour alone. */
html[data-contrast="high"] a { text-decoration: underline; }
/* Strong borders on form controls. */
html[data-contrast="high"] input,
html[data-contrast="high"] select,
html[data-contrast="high"] textarea { border: 1.5px solid #000 !important; }
/* Visible keyboard focus. */
html[data-contrast="high"] :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }
/* Status / mode pills + badges: white bg, black text, black border. The text
   label carries the meaning, so they stay legible without relying on hue. */
html[data-contrast="high"] .status-pending,
html[data-contrast="high"] .status-accepted,
html[data-contrast="high"] .status-rejected,
html[data-contrast="high"] .status-booked,
html[data-contrast="high"] .pill,
html[data-contrast="high"] .pill.sent,
html[data-contrast="high"] .pill.blocked,
html[data-contrast="high"] .pill.failed,
html[data-contrast="high"] .event-mode-pill,
html[data-contrast="high"] .event-mode-pill.is-corporate,
html[data-contrast="high"] .event-mode-pill.is-personal,
html[data-contrast="high"] .tab .badge,
html[data-contrast="high"] .sub-tab .badge,
html[data-contrast="high"] .ad-subtab .badge {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1.5px solid #000000 !important;
}
/* Event banner fallback paints inline colours on the element — override so the
   high-contrast preference wins there too. */
html[data-contrast="high"] .event-banner-fallback { background: #000000 !important; color: #ffffff !important; }

/* High-contrast toggle button (sits next to the language switcher). Styled in
   both modes; reflects state via .on and aria-pressed. */
.contrast-toggle {
  margin-left: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.contrast-toggle:hover { background: var(--cream-2); }
.contrast-toggle.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-contrast="high"] .contrast-toggle { border: 1.5px solid #000; }
html[data-contrast="high"] .contrast-toggle.on { background: #000; color: #fff; border-color: #000; }


/* Events-browser type filter (All / Corporate / Personal) — segmented control. */
.events-browser-modes {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
}
.ebmode-btn {
  border: 0;
  background: var(--paper);
  color: var(--ink-soft);
  padding: 8px 15px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ebmode-btn + .ebmode-btn { border-left: 1px solid var(--line); }
.ebmode-btn:hover { background: var(--cream-2); }
.ebmode-btn.active { background: var(--ink); color: var(--paper); }


/* Events-browser ad rows: View / Edit actions on the right */
.schedule-ad-row.has-actions { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.schedule-ad-row.has-actions .schedule-ad-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.schedule-ad-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ad-mini-btn { padding: 5px 12px; font-size: 0.82rem; line-height: 1.2; }

/* Ad placement image viewer modal */
.ad-view-images { display: flex; flex-wrap: wrap; gap: 16px; }
.ad-view-figure { margin: 0; }
.ad-view-figure figcaption { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 4px; }
.ad-view-figure img { max-width: 100%; max-height: 52vh; display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; }


/* "You'll be there" compact From/To summary with See all / Edit */
.ctx-attend-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctx-attend-summary { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ctx-day-lbl { font-weight: 700; opacity: 0.75; margin-right: 2px; }
.ctx-attend-btn {
  padding: 4px 12px;
  font-size: 0.82rem;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.ctx-attend-btn:hover { background: var(--cream-2); }
#ctx-days-all { flex-basis: 100%; margin-top: 6px; }
#ctx-days-all[hidden] { display: none; }

/* ============================================================
   B93 — Support ticketing (admin queue + detail)
   ============================================================ */
.support-search { margin: 12px 0; }
.support-search input {
  width: 100%;
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.sup-priority-tag {
  color: var(--coral);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: right;
}
.pill.sup-unread { background: var(--coral); color: #fff; }
.sup-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin: 8px 0 4px;
}
.sup-detail-meta > div { margin-bottom: 4px; }
.sup-detail-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sup-priority { font-size: 0.85rem; color: var(--ink-soft); }
.sup-priority select { margin-left: 6px; }
.sup-thread {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 12px 0;
  background: var(--paper);
}
.sup-msg { padding: 8px 2px 10px; border-bottom: 1px solid var(--line); }
.sup-msg:last-child { border-bottom: none; }
.sup-msg-head {
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--cream-2);
  padding: 4px 8px;
  border-radius: 4px;
}
.sup-msg-body { margin-top: 6px; font-size: 0.92rem; }
.sup-respond { margin-top: 14px; }
.sup-respond textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
}
.sup-respond-actions { display: flex; gap: 10px; margin-top: 8px; }
.sup-closed-note { margin-top: 12px; font-style: italic; }

/* B95 — user support (My Support Requests) */
.support-user-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.support-user-head .help-page-title { margin: 0; }
.sup-detail-sub { margin: 2px 0 10px; }

/* B95 — persistent Support entry in the global identity strip */
.identity-support-btn {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  cursor: pointer;
  margin-right: 8px;
  line-height: 1.4;
}
.identity-support-btn:hover { border-color: var(--coral); color: var(--coral-dark); }

/* B98 — Help "Support" button visibility driven by a body class set from the
   reliable identity render (no inline-style toggling). Hidden by default;
   shown only for signed-in non-admin users. */
.support-help-btn { display: none; }
body.iwbt-support-user .support-help-btn { display: inline-flex; align-items: center; }

/* B102 — status filter row on the All Requests views (support) */
.sup-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 14px;
  font-size: 0.9rem;
}
.sup-filter-label { color: var(--ink-soft); font-weight: 600; }
.sup-filter-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sup-filter-opt input { cursor: pointer; }

/* B118 — email verification banner (permanent until the user verifies) */
.verify-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff4e6;
  color: #7a3b00;
  border-bottom: 1px solid #f0c79a;
  padding: 10px 18px;
  font-size: 0.92rem;
  text-align: center;
  position: relative;
  z-index: 50;
}
.verify-banner-text { font-weight: 500; }
.verify-banner-btn {
  background: var(--coral, #ff6b5b);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.verify-banner-btn:hover { filter: brightness(0.95); }
.verify-banner-btn:disabled { opacity: 0.6; cursor: default; }

/* B119 — Users search: role + status badges */
.user-role-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
  background: #e8eef5;
  color: #3a4a5e;
}
.user-role-badge.role-organiser { background: #e6f0e9; color: #2f6a45; }
.user-role-badge.role-admin     { background: #f3e6f0; color: #7a3568; }
.user-role-badge.role-account   { background: #f0ece6; color: #6a5638; }
.user-status-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 4px;
}
.user-status-badge.is-deleted { background: #f6e0dc; color: #b23a2a; }
.search-result.is-deleted .sr-name { color: var(--ink-soft); }
.search-result.is-deleted { opacity: 0.82; }

/* B122 — inline note under the corporate-create email field */
.form-inline-note {
  margin: -2px 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.form-inline-note.ok   { background: #e6f0e9; color: #2f6a45; border: 1px solid #bcd9c6; }
.form-inline-note.warn { background: #f6e0dc; color: #b23a2a; border: 1px solid #e8b9b0; }

/* B123 — organiser event preview modal */
.preview-wrap > h3 { margin: 0 0 4px; }
.preview-hub {
  background: var(--pv-bg, #1a2332);
  color: var(--pv-fg, #ffffff);
  border-radius: 14px;
  padding: 18px;
  margin-top: 10px;
}
.preview-slot { margin-bottom: 18px; }
.preview-slot:last-child { margin-bottom: 0; }
.preview-slot-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 0.85; margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.preview-event-head { margin: 18px 0; }
.preview-event-head .ev-code { font-size: 0.75rem; opacity: 0.8; margin: 0; letter-spacing: 0.05em; }
.preview-event-head h2 { margin: 4px 0; }
.preview-event-head .ev-dates { opacity: 0.85; margin: 0 0 8px; }
.preview-synopsis { opacity: 0.92; line-height: 1.5; }
.preview-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.preview-tags .tag-chip { background: transparent; border: 1px solid currentColor; color: inherit; opacity: 0.8; }
.preview-adverts { display: flex; flex-wrap: wrap; gap: 14px; }
.preview-advert-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* B123/B124 — preview Discover list */
.preview-discover { display: flex; flex-direction: column; gap: 10px; }
.preview-attendee { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 12px 14px; }
.preview-attendee .pa-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.preview-attendee .pa-co { opacity: 0.8; font-size: 0.9rem; }
.preview-attendee .pa-pitch { margin: 8px 0 0; color: var(--pv-fg, #ffffff); opacity: 0.95; line-height: 1.45; font-size: 0.95rem; }
.preview-attendee .pa-pitch-empty { opacity: 0.5; font-style: italic; }
.preview-attendee .pa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.preview-advert-inline { background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.28); border-radius: 10px; padding: 10px; }
.preview-empty { opacity: 0.85; line-height: 1.5; margin: 0; }

/* B129 Phase 2 — admin bulk event actions */
.dashboard-bulk-bar { display:flex; align-items:center; gap:10px; margin:8px 0; padding:8px 12px; background:var(--surface, #fff); border:1px solid var(--line, #e4e2dd); border-radius:8px; }
.dashboard-bulk-bar #dashboard-bulk-count { font-weight:600; }
.dashboard-table th.bulk-col, .dashboard-table td.bulk-col { width:34px; text-align:center; padding-left:8px; padding-right:0; }
.ev-flag { display:inline-block; font-size:9px; font-weight:700; letter-spacing:.04em; padding:1px 5px; border-radius:4px; margin-left:4px; vertical-align:middle; }
.ev-flag.flag-private { background:#ede9fe; color:#5b21b6; }
.ev-flag.flag-deleted { background:#f4d8d4; color:#99362a; }
.ev-flag.flag-reg     { background:#fee2e2; color:#991b1b; }
.ev-flag.flag-email   { background:#fef3c7; color:#92400e; }
.ev-flag.flag-ads     { background:#e0f2fe; color:#075985; }

/* B141 — Admin Users tab: type filter pills */
.user-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
}
.user-filter-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-right: 2px;
}
.user-filter-pill {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.user-filter-pill:hover { border-color: var(--ink-soft); }
.user-filter-pill.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* B146 — organiser delete: event transfer/cancel resolution UI */
.org-resolve-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.org-resolve-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--paper);
}
.org-resolve-info { min-width: 0; }
.org-resolve-meta { color: var(--ink-soft); font-size: 0.85rem; margin-top: 3px; }
.org-resolve-actions { display: flex; gap: 8px; flex-shrink: 0; }
.org-resolve-cancel { color: #c84a3c; }
.org-transfer-results { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 360px; overflow-y: auto; }
.org-transfer-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--paper);
  transition: border-color 0.12s, background 0.12s;
}
.org-transfer-option:hover { border-color: var(--ink); background: var(--cream-2, #f3ece1); }
.org-transfer-option .oto-name { font-weight: 600; }
.org-transfer-option .oto-email { font-size: 0.82rem; color: var(--ink-soft); }

/* B153 — blocked/booked slots in the reserve-time grid */
.slot-btn.booked { opacity: .45; cursor: not-allowed; }
.slot-btn.booked .hint { font-size: .7rem; }

/* B165 — clickable Discover card (opens attendee profile), meeting-view list,
   and days-attending list. */
.attendee-card.clickable { cursor: pointer; transition: box-shadow 0.15s, transform 0.05s; }
.attendee-card.clickable:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.08); }
.attendee-card.clickable:active { transform: translateY(1px); }
.attendee-card .actions button { cursor: pointer; }
.mv-slots { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.mv-slots li { background: var(--paper, #fff); border: 1px solid var(--line, #e2e2e2); border-radius: 10px; padding: 10px 12px; }
.mv-slots .mv-loc { color: var(--ink-soft); font-size: 0.85rem; }
.att-days-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.85rem; color: var(--ink-soft); }
.att-days-list li { margin: 2px 0; }

/* ===== Group Meetings UI (B199) ===== */
.gm-title { margin: 0 0 4px; }
.gm-row { cursor: pointer; }
.gm-row:hover { box-shadow: var(--shadow-md); }
.gm-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gm-members { margin: 12px 0; }
.gm-mem-group { margin: 6px 0; line-height: 2; }
.gm-mem-label {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-soft, #6b6b6b); margin-right: 6px;
}
.gm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.85rem; margin: 2px;
}
.gm-chip.attending { border-color: var(--ink); font-weight: 600; }
.gm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.gm-x { background: none; border: none; cursor: pointer; color: var(--ink-2); font-size: 0.78rem; padding: 0 0 0 4px; line-height: 1; }
.gm-x:hover { color: var(--danger, #c0392b); }
.gm-heatmap-wrap { overflow-x: auto; margin: 14px 0; }
.gm-heatmap { border-collapse: collapse; font-size: 0.8rem; }
.gm-heatmap th, .gm-heatmap td {
  border: 1px solid var(--line); padding: 4px 6px; text-align: center; min-width: 54px;
}
.gm-heatmap th.gm-time { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.gm-cell { background: rgba(42, 157, 143, calc(var(--gm-ratio, 0) * 0.8)); }
.gm-cell span { font-size: 0.7rem; color: var(--ink); }
.gm-cell-na {
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 8px);
}
.gm-cell-pick { cursor: pointer; }
.gm-cell-pick:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
.gm-cell-selected { outline: 3px solid var(--ink); outline-offset: -3px; font-weight: 700; }
.gm-controls { margin-top: 14px; gap: 8px; flex-wrap: wrap; }
.gm-danger { color: var(--danger, #c0392b); }
.gm-invite-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.gm-invite-opt { display: block; padding: 4px 2px; cursor: pointer; }

/* ===== Group Meetings — invite type-ahead (B201) ===== */
.gm-invite-search {
  width: 100%; margin: 8px 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.gm-invite-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.gm-pick-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 11px; background: var(--ink); color: #fff;
  border-radius: 999px; font-size: 0.82rem;
}
.gm-pick-chip .gm-x { color: #fff; opacity: 0.8; }
.gm-pick-chip .gm-x:hover { color: #fff; opacity: 1; }
/* result rows (override the old block-label style) */
.gm-invite-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); padding: 8px 4px; cursor: pointer; font: inherit;
}
.gm-invite-opt:last-of-type { border-bottom: none; }
.gm-invite-opt:hover:not([disabled]) { background: var(--wash, #f6f6f4); }
.gm-invite-opt[disabled] { opacity: 0.5; cursor: default; }
.gm-opt-name { font-weight: 600; }
.gm-opt-sub { font-size: 0.78rem; color: var(--ink-2, #6b6b6b); }

/* ===== Group Meetings — guidance copy (B203) ===== */
.gm-row-cta { margin-top: 6px; font-size: 0.85rem; color: var(--coral); font-weight: 600; }
.gm-sched-note {
  margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--coral); border-radius: 8px;
  background: var(--wash, #f6f6f4); font-size: 0.9rem; line-height: 1.45;
}
.gm-sched-note em { font-style: italic; }

/* ===== Group Meetings — message + slot-info popover (B204) ===== */
.gm-message {
  margin: 10px 0; padding: 10px 12px; background: var(--wash, #f6f6f4);
  border-radius: 8px; font-size: 0.92rem; font-style: italic;
}
.gm-message-label {
  display: inline-block; font-style: normal; font-family: var(--font-mono);
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-2, #6b6b6b); margin-right: 6px;
}
.gm-grid-hint { margin: 10px 0 4px; }
.gm-cell-tap { cursor: pointer; }
.gm-cell-tap:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
.gm-cell-active { outline: 3px solid var(--coral); outline-offset: -3px; }
.gm-slot-detail { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.gm-slot-detail:empty { display: none; }
.gm-slot-head { margin-bottom: 6px; }
.gm-free-names { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gm-free-name { padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem; }
.gm-sched-btn { margin-top: 4px; }
.pill-action {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; background: var(--coral); color: #fff;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.gm-accept-btn { background: var(--coral) !important; border-color: var(--coral) !important; color: #fff !important; }
@media (max-width: 640px) {
  .gm-heatmap th, .gm-heatmap td { min-width: 46px; padding: 6px 5px; }
  .gm-free-names { gap: 5px; }
}