/* ============================================================
   CYBEAR Portal — Field Marketing Enablement® CSS
   fme.css — Calendar view + Event creation drawer
   ============================================================ */

/* ── Page wrap ────────────────────────────────────────────── */
.fme-wrap {
  margin-left: var(--nav-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 50% 0%, #091E2A 0%, #061318 55%);
}
.fme-body { flex: 1; padding: 28px 32px 48px; }

/* ── Page header ──────────────────────────────────────────── */
.fme-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.fme-page-title {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  font-family: var(--font); letter-spacing: -0.01em;
}
.fme-page-subtitle {
  font-size: var(--text-sub); color: var(--text-dim);
  font-family: var(--font); margin-top: 3px;
}
.fme-year-wrap { position: relative; display: flex; align-items: center; }
.fme-year-wrap svg { position: absolute; right: 8px; pointer-events: none; width: 10px; height: 10px; stroke: var(--text-dim); fill: none; }

/* ── Monthly calendar grid ────────────────────────────────── */
.fme-calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1200px) { .fme-calendar-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .fme-calendar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .fme-calendar-grid { grid-template-columns: 1fr; } }

.fme-month-card {
  background: #101e26;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 170px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.fme-month-card:hover { border-color: rgba(249,169,67,0.4); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }

.fme-month-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  background: #101e26;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
  min-height: 44px;
}
.fme-month-name {
  font-size: var(--text-note); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-primary); font-family: var(--font);
  position: relative; z-index: 1;
}
.fme-month-icon { color: var(--text-dim); cursor: pointer; transition: color 0.15s; position: relative; z-index: 1; }
.fme-month-icon:hover { color: var(--gold-mid); }
.fme-month-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; display: block; }

/* Ghosted month number watermark */
.fme-month-name-wrap {
  position: relative; display: inline-flex; align-items: center;
  z-index: 1;
}
.fme-month-name {
  font-size: var(--text-note); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-primary); font-family: var(--font);
  position: relative; z-index: 1;
}
.fme-month-bg-num {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 52px; font-weight: 800; font-family: var(--font);
  color: rgba(255,255,255,0.07); letter-spacing: -0.04em;
  line-height: 1; pointer-events: none; -webkit-user-select: none; user-select: none; z-index: 0;
  white-space: nowrap;
}

/* Current month — gold border accent */
.fme-month-card.is-current-month {
  border: 2px solid rgba(249,169,67,0.6);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 1px rgba(249,169,67,0.15);
}
.fme-month-card.is-current-month .fme-month-name { color: var(--gold-light); font-weight: 800; font-size: var(--text-sub); letter-spacing: 0.12em; }

/* Status distribution bar */
.fme-status-bar {
  display: flex; height: 3px; width: 100%; overflow: hidden;
  border-top: none;
}
.fme-status-bar-seg { height: 100%; transition: width 0.3s ease; }
.fme-status-bar-seg.planning  { background: #4AADEC; }
.fme-status-bar-seg.confirmed { background: #18BDB0; }
.fme-status-bar-seg.ongoing   { background: #F47B30; }
.fme-status-bar-seg.wrap-up   { background: #E05263; }
.fme-status-bar-seg.completed { background: #6DC93A; }

.fme-month-body { flex: 1; display: flex; flex-direction: column; background: #101e26; }
.fme-month-events { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.fme-no-events {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-note); color: var(--text-dim); font-family: var(--font);
  font-style: italic; padding: 16px 0;
}

/* Event row within a month card */
.fme-event-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px; border-radius: 6px;
  cursor: pointer; transition: background 0.12s;
  min-width: 0;
}
.fme-event-item:hover { background: rgba(255,255,255,0.05); }
.fme-event-date {
  font-size: var(--text-label); font-weight: 700; color: var(--text-dim);
  font-family: var(--font); flex-shrink: 0; width: 28px;
  letter-spacing: 0.02em;
}
.fme-event-name {
  font-size: var(--text-note); font-weight: 500; color: var(--text-muted);
  font-family: var(--font); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fme-event-status {
  font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 10px;
  flex-shrink: 0; font-family: var(--font);
}
.fme-status-planning  { background: rgba(74,173,236,0.12);  color: #4AADEC; border: 1px solid rgba(74,173,236,0.2); }
.fme-status-confirmed { background: rgba(24,189,176,0.12);  color: #18BDB0; border: 1px solid rgba(24,189,176,0.2); }
.fme-status-ongoing   { background: rgba(244,123,48,0.12);  color: #F47B30; border: 1px solid rgba(244,123,48,0.2); }
.fme-status-completed { background: rgba(109,201,58,0.12);  color: #6DC93A; border: 1px solid rgba(109,201,58,0.2); }
.fme-status-cancelled { background: rgba(217,83,79,0.13);   color: #E06B67; border: 1px solid rgba(217,83,79,0.3); }
.fme-status-unapproved { background: rgba(148,161,172,0.14); color: #A6B2BC; border: 1px solid rgba(148,161,172,0.3); }

/* Dead events (cancelled / unapproved) stay on the calendar but read as inactive */
.fme-event-item.is-dead { opacity: 0.5; }
.fme-event-item.is-dead:hover { opacity: 0.75; }

/* Past-due "needs wrap-up" marker on calendar tiles (non-completed events whose day is over) */
.fme-event-wrapup {
  flex-shrink: 0; width: 12px; height: 12px; color: #E05263;
  display: inline-flex; align-items: center; justify-content: center;
}
.fme-event-wrapup svg { width: 12px; height: 12px; }

/* Breath animation drawing attention to past-due (overdue) events that need
   wrap-up — mirrors the ISAP "processing" pulse. Only fires on .is-overdue,
   which fmeIsEventPastDue sets after the event date has passed. */
@keyframes fme-overdue-breath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,82,99,0); }
  50%      { box-shadow: 0 0 6px 1px rgba(224,82,99,0.6); }
}
/* Wrap-Up: breathe on the LEFT BORDER and the status pill */
@keyframes fme-overdue-border {
  0%, 100% { box-shadow: inset 3px 0 0 rgba(224,82,99,0.35); }
  50%       { box-shadow: inset 3px 0 0 rgba(224,82,99,1); }
}
.fme-event-item.is-overdue { animation: fme-overdue-border 2s ease-in-out infinite; }
.fme-event-item.is-overdue .fme-event-status,
.fme-event-item.is-overdue .fme-event-wrapup {
  border-radius: 10px;
  animation: fme-overdue-breath 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .fme-event-item.is-overdue { animation: none; box-shadow: inset 3px 0 0 #E05263; }
  .fme-event-item.is-overdue .fme-event-status,
  .fme-event-item.is-overdue .fme-event-wrapup { animation: none; }
}

@keyframes fme-banner-breath {
  0%, 100% { border-color: rgba(224,82,99,0.28); box-shadow: 0 0 0 0 rgba(224,82,99,0); }
  50%       { border-color: rgba(224,82,99,0.65); box-shadow: 0 0 8px 1px rgba(224,82,99,0.18); }
}
/* Detail-view banner nudging the user to mark a passed event completed + log results */
.fme-wrapup-banner {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  background: rgba(224,82,99,0.10); border: 1px solid rgba(224,82,99,0.28);
  font-family: var(--font);
  animation: fme-banner-breath 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .fme-wrapup-banner { animation: none; border-color: rgba(224,82,99,0.65); }
}
.fme-wrapup-banner-icon { flex-shrink: 0; width: 18px; height: 18px; color: #E05263; display: inline-flex; }
.fme-wrapup-banner-icon svg { width: 18px; height: 18px; }
.fme-wrapup-banner-text {
  flex: 1; min-width: 0; font-size: var(--text-sub); color: var(--text-muted); line-height: 1.45;
}
.fme-wrapup-banner-text strong { color: #E05263; font-weight: 700; }
.fme-wrapup-banner-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  background: rgba(155,197,61,0.15); border: 1px solid rgba(155,197,61,0.4);
  color: var(--green); font-size: var(--text-note); font-weight: 700; font-family: var(--font);
  transition: background 0.15s;
}
.fme-wrapup-banner-btn:hover { background: rgba(155,197,61,0.25); }
.fme-wrapup-banner-btn svg { width: 12px; height: 12px; }

.fme-add-event-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 4px 10px 10px; padding: 6px 0;
  border-radius: 7px; border: 1px dashed rgba(45,161,196,0.35);
  background: transparent; color: #2DA1C4;
  font-size: var(--text-label); font-weight: 700; font-family: var(--font);
  letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-add-event-btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; flex-shrink: 0; }
.fme-add-event-btn:hover { border-color: rgba(249,169,67,0.4); color: var(--gold-mid); background: rgba(249,169,67,0.05); }

/* More events overflow button */
.fme-more-events-btn {
  display: flex; align-items: center; justify-content: center;
  margin: 2px 10px 8px; padding: 5px 8px;
  border-radius: 5px; border: 1px solid rgba(255,255,255,0.1);
  background: transparent; color: var(--text-dim);
  font-size: var(--text-label); font-weight: 600; font-family: var(--font);
  letter-spacing: 0.03em; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-more-events-btn:hover { color: var(--text-muted); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }

/* ── Overlay + Drawer ─────────────────────────────────────── */
.fme-overlay {
  position: fixed; inset: 0;
  background: rgba(4,12,16,0.8);
  z-index: 1500;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.fme-overlay.open { opacity: 1; pointer-events: all; }

.fme-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(76vw, 860px);
  background: #101e26;
  border-left: 1px solid var(--border);
  z-index: 1600;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.fme-drawer.open { transform: translateX(0); }

@media (max-width: 1024px) {
  .fme-drawer { width: calc(100vw - var(--nav-width)); }
}

/* ── Drawer header ────────────────────────────────────────── */
.fme-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fme-drawer-title {
  font-size: var(--text-body); font-weight: 700; color: var(--text-primary);
  font-family: var(--font); letter-spacing: -0.01em;
}
.fme-drawer-subtitle {
  font-size: var(--text-note); color: var(--text-dim); font-family: var(--font); margin-top: 2px;
}
.fme-drawer-header-right { display: flex; align-items: center; gap: 8px; }

/* Create Event button in drawer header */
.fme-create-btn {
  height: 32px; padding: 0 14px;
  background: rgba(249,169,67,0.15); border: 1px solid rgba(249,169,67,0.3);
  border-radius: 8px; color: var(--gold-light);
  font-size: var(--text-note); font-weight: 700; font-family: var(--font);
  letter-spacing: 0.04em; cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-create-btn:hover { background: rgba(249,169,67,0.25); border-color: rgba(249,169,67,0.5); }
.fme-create-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fme-create-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* Delete event button */
.fme-delete-btn {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid rgba(204,50,50,0.3); background: rgba(204,50,50,0.08);
  color: var(--red); cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-delete-btn:hover { background: rgba(204,50,50,0.18); border-color: rgba(204,50,50,0.55); }
.fme-delete-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* ── Drawer content (scrollable) ──────────────────────────── */
.fme-drawer-content {
  flex: 1; min-height: 0; overflow-y: auto; padding: 24px 24px 16px;
  display: flex; flex-direction: column;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.fme-drawer-content::-webkit-scrollbar { width: 4px; }
.fme-drawer-content::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }

/* ── Step labels / field groups ───────────────────────────── */
.fme-field-group { margin-bottom: 28px; }
.fme-field-label {
  font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gold-mid); font-family: var(--font);
  margin-bottom: 7px; display: block;
}
.fme-field-label .fme-required { color: var(--red); margin-left: 2px; }

/* ── Type toggle cards (Internal/External) ────────────────── */
.fme-toggle-row { display: flex; gap: 10px; }
.fme-toggle-card {
  flex: 1; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  display: flex; align-items: center; gap: 10px;
}
.fme-toggle-card:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); }
.fme-toggle-card.active {
  border-color: rgba(249,169,67,0.4); background: rgba(249,169,67,0.07);
}
.fme-toggle-card-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text-dim); transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-toggle-card.active .fme-toggle-card-icon {
  background: rgba(249,169,67,0.1); border-color: rgba(249,169,67,0.3); color: var(--gold-light);
}
.fme-toggle-card-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.fme-toggle-card-text { display: flex; flex-direction: column; gap: 2px; }
.fme-toggle-card-label {
  font-size: var(--text-sub); font-weight: 700; color: var(--text-muted);
  font-family: var(--font); transition: color 0.15s;
}
.fme-toggle-card.active .fme-toggle-card-label { color: var(--gold-light); }
.fme-toggle-card-sub {
  font-size: var(--text-label); color: var(--text-dim); font-family: var(--font); line-height: 1.4;
  transition: color 0.15s;
}
/* Same gap as the access-mode cards had: the icon and label both already pick up
   the active gold tint, but the sub/description text had no active-state rule at
   all and stayed var(--text-dim) regardless of selection. */
.fme-toggle-card.active .fme-toggle-card-sub { color: var(--gold-light); }

/* ── Radius slider ────────────────────────────────────────── */
/* Firefox range input styling */

/* ── Attendee exec grid ───────────────────────────────────── */
.fme-attendee-layout { display: flex; gap: 16px; flex: 1; min-height: 0; }
.fme-exec-grid-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.fme-exec-search {
  width: 100%; padding: 7px 12px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary); font-family: var(--font);
  font-size: var(--text-sub); outline: none; margin-bottom: 12px; transition: border-color 0.15s;
}
.fme-exec-search:focus { border-color: rgba(249,169,67,0.35); }
.fme-exec-search::placeholder { color: var(--text-dim); }

/* Exec selection grid — 2 col */
.fme-exec-select-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.fme-exec-select-grid::-webkit-scrollbar { width: 3px; }
.fme-exec-select-grid::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
/* Prevent cards from blowing out their grid column */
.fme-exec-select-grid .exec-card { margin-bottom: 0; min-width: 0; }
/* Constrain avatar images that lack the .avatar-img class */
.fme-exec-select-grid .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fme-exec-select-grid .card-name,
.fme-exec-select-grid .card-title,
.fme-exec-select-grid .card-company { min-width: 0; }

/* Reuse exec-card from panel.css — add a select overlay */
.fme-exec-card-wrap { position: relative; min-width: 0; }
.fme-exec-card-wrap .exec-card { cursor: pointer; -webkit-user-select: none; user-select: none; }
.fme-exec-select-check {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--border); background: rgba(6,19,24,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s; z-index: 2;
}
.fme-exec-select-check svg { width: 12px; height: 12px; stroke: currentColor; fill: none; display: none; }
.fme-exec-card-wrap.selected .fme-exec-select-check {
  background: var(--gold-mid); border-color: var(--gold-light);
}
.fme-exec-card-wrap.selected .fme-exec-select-check svg { display: block; stroke: #fff; }

/* Attendee sidebar */
.fme-attendee-sidebar {
  width: 180px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px;
  align-self: flex-start;
}
.fme-attendee-action-btn {
  width: 100%; padding: 10px 0; border-radius: 8px; cursor: pointer;
  font-size: var(--text-note); font-weight: 600; font-family: var(--font);
  letter-spacing: 0.03em; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-attendee-action-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; flex-shrink: 0; }
.fme-btn-manual {
  background: rgba(249,169,67,0.1); border: 1px solid rgba(249,169,67,0.25);
  color: var(--gold-light);
}
.fme-btn-manual:hover { background: rgba(249,169,67,0.18); border-color: rgba(249,169,67,0.4); }
.fme-btn-csv {
  background: rgba(45,161,196,0.08); border: 1px solid rgba(45,161,196,0.2);
  color: #2DA1C4;
}
.fme-btn-csv:hover { background: rgba(45,161,196,0.14); border-color: rgba(45,161,196,0.35); }

.fme-selected-list {
  border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 5px;
}
.fme-selected-label {
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-dim); font-family: var(--font); margin-bottom: 4px;
}
.fme-selected-chip {
  display: flex; align-items: center; gap: 5px; padding: 4px 6px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 6px; min-width: 0;
}
.fme-selected-chip-name {
  font-size: var(--text-label); font-weight: 500; color: var(--text-muted); font-family: var(--font);
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fme-selected-chip-edit,
.fme-selected-chip-remove {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  padding: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.12s, color 0.12s; flex-shrink: 0;
}
.fme-selected-chip-edit:hover { color: var(--gold-light); background: rgba(249,169,67,0.1); }
.fme-selected-chip-remove:hover { color: var(--red); background: rgba(204,50,50,0.1); }

/* ── Date picker calendar ─────────────────────────────────── */
.fme-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.fme-cal-month-label {
  font-size: 14px; font-weight: 700; color: var(--text-primary); font-family: var(--font);
}
.fme-cal-nav-btn {
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.04);
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-cal-nav-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.fme-cal-nav-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }

.fme-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.fme-cal-dow {
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim); font-family: var(--font);
  text-align: center; padding: 4px 0 8px;
}
.fme-cal-day {
  aspect-ratio: 1; border-radius: 8px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 6px; cursor: pointer; transition: background 0.12s; min-height: 52px;
}
.fme-cal-day:not(.fme-cal-empty):hover { background: rgba(255,255,255,0.06); }
.fme-cal-day.selected { background: rgba(249,169,67,0.15) !important; }
.fme-cal-day.today .fme-cal-day-num {
  background: rgba(255,255,255,0.1); border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
}
.fme-cal-day.selected .fme-cal-day-num {
  background: var(--gold-mid); border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: #061318; font-weight: 700;
}
.fme-cal-day-num {
  font-size: var(--text-sub); font-weight: 500; color: var(--text-muted); font-family: var(--font);
  line-height: 1;
}
.fme-cal-day.fme-cal-empty { cursor: default; pointer-events: none; }
.fme-cal-day.past .fme-cal-day-num { color: var(--text-dim); }
/* .fme-cal-day.past and .fme-cal-day.selected are equal-specificity
   3-class selectors — .past being defined later meant it silently won the
   text color on any day that was both (a dim blue-gray number on a gold
   circle, hard to read). This 4-class selector outranks both regardless of
   source order, so the selected state's dark text always wins. */
.fme-cal-day.selected.past .fme-cal-day-num { color: #061318; }
.fme-cal-events { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; width: 100%; padding: 0 2px; }
/* Event Calendar dates shown for awareness only while picking a date —
   blue rather than FME's gold so they read as "something else is
   happening" rather than an FME event. */
.fme-cal-event-dot {
  font-size: 8px; font-weight: 600; color: #2DA1C4;
  font-family: var(--font); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; line-height: 1.3; letter-spacing: 0.01em;
  background: rgba(45,161,196,0.1); border-radius: 2px; padding: 1px 3px;
}

/* Conference conflict indicator */

/* ── Venue cards ──────────────────────────────────────────── */

.fme-venue-card {
  border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--border); cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative; will-change: transform;
}
.fme-venue-card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.fme-venue-card.selected {
  border-color: rgba(249,169,67,0.5); box-shadow: 0 0 0 1px rgba(249,169,67,0.2);
}

/* Venue reservation panel — appears after card selection, above the divider */

/* Manual venue form */

/* Overview step */

/* Attendee row — uses blueprint-task base, overrides layout to horizontal */
.fme-ov-attendee-row {
  flex-direction: row; align-items: center; gap: 14px; min-height: 0;
}

/* 3-column info grid below attendees */
.fme-ov-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
/* Event Details spans the full top row; Management + Cost sit as equal halves below */
.fme-ov-info-grid > :first-child { grid-column: 1 / -1; }
/* Two-column field list inside the full-width Event Details card */
.fme-ov-details-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
/* Drop the underline from the bottom item of BOTH columns (the last two in DOM
   order) so neither column leaves a dangling line at the card bottom. */
.fme-ov-details-rows .fme-overview-meta-row:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 800px) {
  .fme-ov-info-grid { grid-template-columns: 1fr; }
  .fme-ov-info-grid > :first-child { grid-column: auto; }
  .fme-ov-details-rows { grid-template-columns: 1fr; }
}

/* Battlecard CTA per attendee — uses global .isap-btn variants */
.fme-bc-btn { min-width: 96px; justify-content: center; }

/* Check-in button — shown on attendee rows when event status is Ongoing */
/* Unchecked: quiet/neutral — available action, not yet done */
.fme-checkin-btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 26px; padding: 0 10px; border-radius: 6px; cursor: pointer;
  font-size: var(--text-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  font-family: var(--font); white-space: nowrap;
  border: 1.5px solid var(--border); background: rgba(255,255,255,0.03);
  color: var(--text-dim); transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fme-checkin-btn:hover {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); color: var(--text-muted);
}
/* Checked-in: green pill badge — visually a status, not a pending action.
   Hover dims to signal it's still clickable (to undo). */
.fme-checkin-btn.checked-in {
  border-radius: 20px; font-weight: 700;
  background: rgba(109,201,58,0.18); border-color: rgba(109,201,58,0.5); color: #7dd943;
}
.fme-checkin-btn.checked-in:hover {
  background: rgba(109,201,58,0.12); border-color: rgba(109,201,58,0.4); color: #6DC93A;
}
.fme-checkin-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Clickable exec block in attendee rows (opens the exec profile modal) */
.fme-ov-attendee-click { border-radius: 8px; transition: opacity 0.15s; }
.fme-ov-attendee-click:hover { opacity: 0.82; }
.fme-ov-attendee-click:hover .fme-attendee-name,
.fme-ov-attendee-click:hover .fme-lp-invite-name { color: var(--gold-light); transition: color 0.15s; }

/* Attendee table */
.fme-attendee-name {
  font-size: var(--text-sub); font-weight: 600; color: var(--text-primary);
  font-family: var(--font); white-space: nowrap;
}
/* Tooltip anchors hug the visible name — a full-width block host would center
   the [data-tip] pill over the whole line (same rule as .modal-company[data-tip]). */
.fme-attendee-name[data-tip],
.fme-lp-invite-name[data-tip] { width: fit-content; max-width: 100%; }
.fme-battlecard-btn {
  height: 24px; padding: 0 8px; border-radius: 5px; cursor: pointer;
  font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  font-family: var(--font); white-space: nowrap; transition: background 0.15s, border-color 0.15s;
  background: rgba(155,197,61,0.08); border: 1px solid rgba(155,197,61,0.2); color: var(--green);
}
.fme-battlecard-btn:hover { background: rgba(155,197,61,0.15); border-color: rgba(155,197,61,0.35); }

/* Overview sidebar */
.fme-overview-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
}
.fme-overview-card-title {
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gold-mid); font-family: var(--font);
  margin-bottom: 12px;
}
.fme-overview-meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.fme-overview-meta-row:last-child { border-bottom: none; }
.fme-overview-meta-label {
  width: 100%; margin-bottom: 2px;
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-dim); font-family: var(--font);
}
.fme-overview-meta-value {
  font-size: var(--text-sub); font-weight: 500; color: var(--text-primary); font-family: var(--font);
}
.fme-overview-badge {
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 10px; font-family: var(--font);
}
.fme-badge-roundtable   { background: rgba(45,161,196,0.12);  color: #2DA1C4;          border: 1px solid rgba(45,161,196,0.25);  }
.fme-badge-dinner       { background: rgba(249,169,67,0.12);  color: var(--gold-light); border: 1px solid rgba(249,169,67,0.25);  }
.fme-badge-presentation { background: rgba(155,197,61,0.12);  color: var(--green);      border: 1px solid rgba(155,197,61,0.25);  }
.fme-badge-breakfast    { background: rgba(212,111,160,0.12); color: #D46FA0;           border: 1px solid rgba(212,111,160,0.25); }
.fme-badge-workshop     { background: rgba(67,198,176,0.12);  color: #43C6B0;           border: 1px solid rgba(67,198,176,0.25);  }
.fme-badge-reception    { background: rgba(196,109,180,0.12); color: #C46DB4;           border: 1px solid rgba(196,109,180,0.25); }
.fme-badge-forum        { background: rgba(106,143,212,0.12); color: #6A8FD4;           border: 1px solid rgba(106,143,212,0.25); }
.fme-badge-happyhour    { background: rgba(91,130,245,0.12);  color: #5B82F5;           border: 1px solid rgba(91,130,245,0.25);  }
.fme-badge-networking   { background: rgba(224,92,107,0.12);  color: #E05C6B;           border: 1px solid rgba(224,92,107,0.25);  }
.fme-badge-other        { background: rgba(255,255,255,0.07); color: var(--text-muted); border: 1px solid var(--border);          }
.fme-badge-external     { background: rgba(204,50,50,0.1);    color: var(--red);        border: 1px solid rgba(204,50,50,0.25);   }
.fme-badge-internal     { background: rgba(45,161,196,0.08);  color: #2DA1C4;           border: 1px solid rgba(45,161,196,0.2);   }

/* Cost tracker */
.fme-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.fme-cost-field { display: flex; flex-direction: column; gap: 4px; }
.fme-cost-label {
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-dim); font-family: var(--font);
  display: flex; align-items: center; gap: 5px; margin-bottom: 4px;
}
.fme-cost-label svg {
  width: 10px; height: 10px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.fme-cost-input {
  width: 100%; padding: 6px 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary); font-family: var(--font);
  font-size: var(--text-sub); outline: none; box-sizing: border-box; transition: border-color 0.15s;
}
.fme-cost-input:focus { border-color: rgba(249,169,67,0.35); }
/* $ prefix chip — adds a dollar sign in front of cost inputs without restyling
   the input itself (keeps its own bg/border/color). Kept compact for the tight
   Edit Event layout. */
.fme-cost-input-wrap { display: flex; align-items: stretch; width: 100%; }
.fme-cost-dollar {
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px; flex-shrink: 0; -webkit-user-select: none; user-select: none;
  font-size: var(--text-micro); color: var(--text-dim); font-family: var(--font);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border); border-right: none;
  border-radius: 6px 0 0 6px;
}
.fme-cost-input-wrap .fme-cost-input {
  flex: 1; min-width: 0; width: auto;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding-left: 6px;
}
[data-theme="light"] .fme-cost-dollar { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #6A8C9A; }

/* Post-Event "Actual Spend": inputs+total on the left, comparison table on the
   right — side by side on wide drawers, stacking on narrow ones. */
.fme-post-spend-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 720px) { .fme-post-spend-split { grid-template-columns: 1fr; } }
.fme-cost-total {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.fme-cost-total-label {
  font-size: var(--text-label); font-weight: 700; color: var(--text-muted); font-family: var(--font);
}
.fme-cost-total-value {
  font-size: 15px; font-weight: 700; color: var(--gold-light); font-family: var(--font);
}
/* Expected Sponsorship — external events only; income entered alongside costs */
.fme-cost-sponsorship {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px; padding-top: 10px; margin-bottom: 4px;
  border-top: 1px dashed var(--border);
}
.fme-cost-sponsorship .fme-cost-label { color: var(--blue-light); }
/* ── Step progress bar (bottom of drawer) ─────────────────── */
.fme-drawer-footer {
  border-top: 1px solid var(--border); flex-shrink: 0;
  background: #101e26;
}
.fme-step-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.fme-nav-back {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.04); color: var(--text-dim);
  font-size: var(--text-note); font-weight: 600; font-family: var(--font); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-nav-back:hover { color: var(--text-muted); border-color: rgba(255,255,255,0.15); }
.fme-nav-back:disabled { opacity: 0.3; cursor: default; }
.fme-nav-back svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.fme-nav-next {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px;
  border-radius: 8px; border: 1px solid rgba(249,169,67,0.3);
  background: rgba(249,169,67,0.12); color: var(--gold-light);
  font-size: var(--text-note); font-weight: 700; font-family: var(--font); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-nav-next:hover { background: rgba(249,169,67,0.2); border-color: rgba(249,169,67,0.5); }
.fme-nav-next:disabled { opacity: 0.35; cursor: default; }
.fme-nav-next svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }

/* Step track */
.fme-step-track {
  display: flex; padding: 8px 14px; gap: 5px;
  overflow: hidden; scrollbar-width: none;
  align-items: center; justify-content: center;
}
.fme-step-track::-webkit-scrollbar { display: none; }

/* Default: collapsed icon-only pill (future steps) */
.fme-step-pill {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 32px; height: 32px; padding: 0;
  border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  transition: width 0.2s cubic-bezier(0.16,1,0.3,1), padding 0.2s cubic-bezier(0.16,1,0.3,1), background 0.2s cubic-bezier(0.16,1,0.3,1), border-color 0.2s cubic-bezier(0.16,1,0.3,1), min-width 0.2s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden; position: relative;
}
.fme-step-pill:hover { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }
.fme-step-pill .fme-step-pill-body { display: none; } /* hidden when collapsed */

/* Icon sizing in collapsed state */
.fme-step-pill-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); border-radius: 6px; transition: color 0.15s, background 0.15s;
  position: relative;
}
.fme-step-pill-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }

/* Done badge — a small overlay, not a replacement, so the step's own icon
   (colored green by .fme-step-pill.done .fme-step-pill-icon below) stays
   visible underneath it. */
.fme-step-pill-check {
  position: absolute; bottom: 1px; right: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); color: #06130a;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* Active: expands to show label, takes remaining space up to a cap */
.fme-step-pill.active {
  flex: 0 1 auto; width: auto; height: auto; padding: 7px 10px;
  min-width: 100px; max-width: 148px;
  border-color: rgba(249,169,67,0.35); background: rgba(249,169,67,0.07);
  justify-content: flex-start; gap: 8px;
}
.fme-step-pill.active .fme-step-pill-body {
  display: block; min-width: 0; flex: 1;
}
.fme-step-pill.active .fme-step-pill-icon {
  width: 24px; height: 24px; background: rgba(249,169,67,0.12); color: var(--gold-light);
}

/* Done: green checkmark, still compact */
.fme-step-pill.done {
  border-color: rgba(155,197,61,0.3); background: rgba(155,197,61,0.08);
}
.fme-step-pill.done:hover { border-color: rgba(155,197,61,0.5); background: rgba(155,197,61,0.14); }
.fme-step-pill.done .fme-step-pill-icon { color: var(--green); }

/* Visited (was-reached) but not current — dim icon, still clickable */
.fme-step-pill.visited {
  border-color: rgba(255,255,255,0.08); opacity: 0.7;
}
.fme-step-pill.visited:hover { opacity: 1; }

.fme-step-pill-label {
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--gold-light); font-family: var(--font); line-height: 1;
  margin-bottom: 2px; white-space: nowrap;
}
.fme-step-pill-data {
  font-size: var(--text-label); font-weight: 600; color: var(--text-primary);
  font-family: var(--font); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; width: 100%;
}

/* Mobile step indicator */
.fme-step-indicator {
  display: none; padding: 10px 20px;
  font-size: var(--text-note); color: var(--text-dim); font-family: var(--font);
  text-align: center;
}
.fme-step-indicator strong { color: var(--gold-light); }

@media (max-width: 768px) {
  .fme-step-track { display: none; }
  .fme-step-indicator { display: block; }
  .fme-attendee-layout { flex-direction: column; }
  .fme-attendee-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .fme-exec-select-grid { grid-template-columns: 1fr; max-height: 300px; }
}

/* ── Manual add dialog ────────────────────────────────────── */
.fme-dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(4,12,16,0.8); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.fme-dialog-overlay.open { opacity: 1; pointer-events: all; }
.fme-dialog {
  background: rgba(6,19,24,0.99); border: 1px solid var(--border);
  border-radius: 14px; width: 100%; max-width: 420px;
  padding: 22px; transform: translateY(12px); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.fme-dialog-overlay.open .fme-dialog { transform: translateY(0); }
.fme-dialog-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  font-family: var(--font); margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.fme-dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fme-dialog-full { grid-column: 1 / -1; }
.fme-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── Topbar specific to FME ───────────────────────────────── */

/* Light mode */
[data-theme="light"] .fme-wrap { background: #EEF2F4; }
[data-theme="light"] .fme-month-card { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
[data-theme="light"] .fme-month-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); border-color: rgba(27,70,86,0.3); }
[data-theme="light"] .fme-month-header { background: #FFFFFF; border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fme-month-body { background: #FFFFFF; }
[data-theme="light"] .fme-add-event-btn { background: transparent; }
[data-theme="light"] .fme-month-name { color: #0D2028; }
[data-theme="light"] .fme-event-name { color: #3A5A68; }
[data-theme="light"] .fme-event-date { color: #6A8C9A; }
[data-theme="light"] .fme-drawer { background: #EEF2F4; border-left-color: rgba(0,0,0,0.1); }
[data-theme="light"] .fme-drawer-header { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fme-drawer-footer { background: #EEF2F4; border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fme-step-nav { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fme-overview-card { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fme-dialog { background: #EEF2F4; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .fme-cost-input { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.1); color: #0D2028; }
[data-theme="light"] .fme-exec-search { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.1); color: #0D2028; }

/* ── Event detail view (drawer) ───────────────────────────── */
.fme-detail-wrap { padding: 4px 0; }
.fme-detail-header-band {
  padding: 0 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.fme-detail-event-title {
  /* extends .portal-content-title — apply both classes in markup */
  margin-bottom: 12px;
}
.fme-detail-section-title {
  font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gold-mid); font-family: var(--font);
  margin-bottom: 12px;
}
/* Sub-heading under a section title (e.g. Invited / Public Responses beneath the
   Attendees section) — subordinate to the gold section title: muted, no gold. */
.fme-ov-subhead {
  font-size: var(--text-note); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); font-family: var(--font);
}
[data-theme="light"] .fme-detail-header-band { border-bottom-color: rgba(0,0,0,0.08); }

/* ── Step 1 two-column layout (Type + Goal) ───────────────── */

/* Field hint — supplementary descriptor after a field/section label */
.fme-field-hint {
  font-size: var(--text-note); font-weight: 400; color: var(--text-dim);
  font-family: var(--font); text-transform: none; letter-spacing: 0;
  margin-left: 6px;
}

/* ── Exec event history badge (Step 3 attendee cards) ─────── */
.fme-exec-history-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.04em;
  color: var(--gold-light); background: rgba(249,169,67,0.1);
  border: 1px solid rgba(249,169,67,0.22); border-radius: 4px;
  padding: 1px 5px; font-family: var(--font); white-space: nowrap;
}
.fme-exec-history-badge svg { flex-shrink: 0; }

/* ── Detail view tabs ─────────────────────────────────────── */
.fme-detail-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 24px; flex-shrink: 0;
}
.fme-detail-tab {
  padding: 10px 18px; font-size: var(--text-note); font-weight: 600;
  font-family: var(--font); color: var(--text-dim); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s; white-space: nowrap;
}
.fme-detail-tab:hover { color: var(--text-muted); }
.fme-detail-tab.active { color: var(--gold-light); border-bottom-color: var(--gold-mid); }
.fme-detail-tab.post-event-tab { color: var(--text-dim); }
.fme-detail-tab.post-event-tab.active { color: var(--green); border-bottom-color: var(--green); }

/* ── Post-event tab ───────────────────────────────────────── */
.fme-post-event-wrap { padding: 4px 0; }
.fme-post-section-title {
  font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gold-mid); font-family: var(--font);
  margin-bottom: 14px; margin-top: 24px;
}
.fme-post-section-title:first-child { margin-top: 0; }
.fme-post-debrief {
  width: 100%; padding: 10px 12px; min-height: 90px; resize: vertical;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary); font-family: var(--font);
  font-size: var(--text-body); outline: none; transition: border-color 0.15s; line-height: 1.55;
}
.fme-post-debrief:focus { border-color: rgba(249,169,67,0.35); }
.fme-post-debrief::placeholder { color: var(--text-dim); }
.fme-post-save-btn {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 18px; margin-top: 20px;
  border-radius: 8px; border: 1px solid rgba(155,197,61,0.3);
  background: rgba(155,197,61,0.1); color: var(--green);
  font-size: var(--text-note); font-weight: 700; font-family: var(--font);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fme-post-save-btn:hover { background: rgba(155,197,61,0.18); border-color: rgba(155,197,61,0.5); }
.fme-post-summary {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px;
}
.fme-post-stat {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; text-align: center;
}
.fme-post-stat-value {
  font-size: 22px; font-weight: 700; color: var(--text-primary);
  font-family: var(--font);
}
.fme-post-stat-label {
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-dim); font-family: var(--font);
  margin-top: 3px;
}

/* ── Landing Page step (Step 7) ───────────────────────────── */
.fme-lp-url-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 20px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px;
}
.fme-lp-url-text {
  font-size: var(--text-note); color: var(--text-dim); font-family: var(--font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: italic;
}
.fme-lp-section {
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.fme-lp-section:last-child { border-bottom: none; }
.fme-lp-section-title {
  font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gold-mid); font-family: var(--font);
  margin-bottom: 14px;
}
.fme-lp-section-note {
  font-size: var(--text-note); color: var(--text-muted); font-family: var(--font);
  line-height: 1.55; margin-bottom: 12px;
}
/* Amber notice strip — the stale-publish warning (#fmeLPStaleStrip) and the
   self-hosted "no DELVEin email invites" notice share this treatment. */
.fme-lp-warn-strip {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 14px; padding: 9px 12px; border-radius: 8px;
  background: rgba(249,169,67,0.08); border: 1px solid rgba(249,169,67,0.3);
}
.fme-lp-warn-strip svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.fme-lp-warn-strip span {
  font-size: var(--text-note); color: rgba(249,169,67,0.9); font-family: var(--font);
  line-height: 1.5;
}
[data-theme="light"] .fme-lp-warn-strip {
  background: rgba(249,169,67,0.14); border-color: rgba(184,116,20,0.4);
}
[data-theme="light"] .fme-lp-warn-strip span { color: #8a5a10; }

/* Theme picker */
.fme-lp-theme-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.fme-lp-theme-card {
  width: 120px; height: 64px; border-radius: 10px; cursor: pointer;
  position: relative; border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
  display: flex; align-items: flex-end; padding: 8px;
  overflow: hidden;
}
.fme-lp-theme-card:hover { transform: translateY(-2px); }
.fme-lp-theme-card.active { border-color: var(--gold-mid); }
.fme-lp-theme-label {
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: rgba(255,255,255,0.7); font-family: var(--font);
  position: relative; z-index: 1;
}
.fme-lp-theme-check {
  position: absolute; top: 6px; right: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold-mid); display: flex; align-items: center; justify-content: center;
}

/* Section toggles */
.fme-lp-toggles { display: flex; flex-direction: column; gap: 0; }
.fme-lp-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.fme-lp-toggle-row:last-child { border-bottom: none; }
.fme-lp-toggle-label {
  font-size: var(--text-sub); font-weight: 600; color: var(--text-muted);
  font-family: var(--font);
}
.fme-lp-toggle-label.locked { color: var(--text-dim); }
.fme-lp-toggle-btn {
  width: 36px; height: 20px; border-radius: 10px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
  position: relative; transition: background 0.2s, border-color 0.2s;
  padding: 0;
}
.fme-lp-toggle-btn.on { background: rgba(155,197,61,0.2); border-color: rgba(155,197,61,0.4); }
.fme-lp-toggle-knob {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-dim); position: absolute; top: 2px; left: 2px;
  transition: transform 0.2s, background 0.2s;
}
.fme-lp-toggle-btn.on .fme-lp-toggle-knob {
  transform: translateX(16px); background: #9BC53D;
}

/* Host profile preview */
.fme-lp-host-preview {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
}
.fme-lp-host-name {
  font-size: var(--text-sub); font-weight: 700; color: var(--text-primary);
  font-family: var(--font); margin-bottom: 4px;
}
.fme-lp-host-title {
  font-size: var(--text-note); color: var(--text-muted); font-weight: 400;
}
.fme-lp-host-bio {
  font-size: var(--text-sub); color: var(--text-muted); font-family: var(--font);
  line-height: 1.6; margin-top: 6px;
}

/* Scrollable list region — caps height so a long attendee / public-response
   list scrolls inside its section instead of pushing the page down. */
.fme-scroll-list {
  max-height: 420px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Invite list */
.fme-lp-invite-list {
  display: flex; flex-direction: column; gap: 0;
  max-height: 420px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
}
.fme-lp-invite-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.fme-lp-invite-row:last-child { border-bottom: none; }
.fme-lp-invite-who { flex: 1; min-width: 0; }
.fme-lp-invite-name {
  display: block; font-size: var(--text-sub); font-weight: 600;
  color: var(--text-primary); font-family: var(--font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fme-lp-invite-co {
  display: block; font-size: var(--text-note); color: var(--text-dim);
  font-family: var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fme-lp-invite-status {
  font-size: var(--text-note); font-weight: 600; font-family: var(--font);
  white-space: nowrap; flex-shrink: 0; min-width: 80px; text-align: right;
}
.fme-lp-copy-btn { flex-shrink: 0; }

/* Light mode */
[data-theme="light"] .fme-lp-section { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .fme-lp-url-bar { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fme-lp-host-preview { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fme-lp-invite-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .fme-lp-toggle-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .fme-detail-tab { color: #6A8C9A; }
[data-theme="light"] .fme-detail-tab:hover { color: #0D2028; }
[data-theme="light"] .fme-detail-tab.active { color: var(--gold-mid); }
[data-theme="light"] .fme-post-debrief { background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.1); color: #0D2028; }
[data-theme="light"] .fme-post-stat { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }

/* ── Step 7 — Two-column landing page layout ──────────────── */
.fme-lp-layout {
  display: grid;
  grid-template-columns: 1fr 248px;
  gap: 0;
  align-items: start;
}
.fme-lp-form { min-width: 0; }
.fme-lp-wireframe-panel {
  padding: 0 0 20px 20px;
  position: sticky;
  top: 0;
}
.fme-lp-wireframe-label {
  font-size: var(--text-label); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-dim); font-family: var(--font);
  margin-bottom: 10px;
}
.fme-lp-wireframe-legend {
  display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.fme-lp-wf-legend-item {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--text-micro); color: var(--text-dim); font-family: var(--font);
}
.fme-lp-wf-bar-on    { width: 2px; height: 10px; border-radius: 1px; background: #9BC53D; }
.fme-lp-wf-bar-off   { width: 2px; height: 10px; border-radius: 1px; background: rgba(255,255,255,0.18); }
.fme-lp-wf-bar-empty { width: 2px; height: 10px; border-radius: 1px; background: #2DA1C4; }
@media (max-width: 620px) {
  .fme-lp-layout { grid-template-columns: 1fr; }
  .fme-lp-wireframe-panel { display: none; }
}

/* ── Custom inline select (.fme-sel-*) ──────────────────── */
/* Replaces all native <select> elements throughout FME with a               */
/* portal-styled trigger + dropdown consistent with the .isap-select-*        */
/* pattern used in typeahead and goal pickers.                                */
.fme-sel-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.fme-sel-trigger {
  display: flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 8px 0 10px; min-width: 110px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.fme-sel-trigger:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); }
.fme-sel-trigger.open { border-color: rgba(249,169,67,0.4); }
/* Form-size variant (matches isap-form-select height) */
.fme-sel-trigger.fme-sel-md {
  height: 38px; padding: 0 12px 0 14px;
  min-width: 160px; border-radius: 8px;
}
.fme-sel-val {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--text-label); font-weight: 600; font-family: var(--font);
}
.fme-sel-trigger.fme-sel-md .fme-sel-val { font-size: var(--text-sub); }
.fme-sel-chv { flex-shrink: 0; color: var(--text-dim); transition: transform 0.15s, color 0.15s; }
.fme-sel-chv svg { display: block; }
.fme-sel-trigger.open .fme-sel-chv { transform: rotate(180deg); color: var(--gold-mid); }
.fme-sel-drop {
  display: none; position: fixed; z-index: 9999; padding: 4px 0;
  background: #0a1e2a; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  min-width: 140px;
}
.fme-sel-drop.open { display: block; }
.fme-sel-opt {
  padding: 8px 14px; font-size: var(--text-note); font-weight: 600;
  font-family: var(--font); cursor: pointer; transition: background 0.1s;
  white-space: nowrap;
}
.fme-sel-opt:hover { background: rgba(255,255,255,0.06); }
.fme-sel-opt.active { background: rgba(249,169,67,0.07); }

/* Portal: rendered on document.body to escape drawer transform/overflow */
.fme-sel-portal {
  display: none; position: fixed; z-index: 99999; padding: 4px 0;
  background: #0a1e2a; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
}
.fme-sel-portal.open { display: block; }
.fme-sel-portal .fme-sel-opt {
  padding: 8px 14px; font-size: var(--text-note); font-weight: 600;
  font-family: var(--font); cursor: pointer; transition: background 0.1s; white-space: nowrap;
}
.fme-sel-portal .fme-sel-opt:hover { background: rgba(255,255,255,0.06); }
.fme-sel-portal .fme-sel-opt.active { background: rgba(249,169,67,0.07); }
[data-theme="light"] .fme-sel-portal { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
[data-theme="light"] .fme-sel-portal .fme-sel-opt:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .fme-sel-trigger { background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.1); color: #0D2028; }
[data-theme="light"] .fme-sel-trigger:hover { background: #fff; border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .fme-sel-trigger.open { border-color: rgba(27,70,86,0.5); }
[data-theme="light"] .fme-sel-drop { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
[data-theme="light"] .fme-sel-opt:hover { background: rgba(0,0,0,0.04); }

/* ── Event type card grid ────────────────────────────────────────────────────
   Six visual type cards in a 3x2 grid replacing the dropdown selector.
   Mirrors the fme-toggle-card pattern but scaled for 6 compact options.
*/
.fme-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.fme-type-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 12px 8px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-user-select: none; user-select: none; -webkit--webkit-user-select: none; user-select: none;
}
.fme-type-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--text-muted);
}
.fme-type-card.active {
  /* Fallback only — fmeSelectType() overrides with per-type color via inline style */
  background: rgba(249,169,67,0.1);
  border-color: rgba(249,169,67,0.5);
  color: var(--gold-light);
}
.fme-type-card svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.fme-type-card-label {
  font-size: var(--text-note); font-weight: 600;
  font-family: var(--font); letter-spacing: 0.01em;
  text-align: center; line-height: 1.2;
}
[data-theme="light"] .fme-type-card {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.1);
  color: var(--text-muted);
}
[data-theme="light"] .fme-type-card:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(27,70,86,0.25);
  color: var(--text-primary);
}
[data-theme="light"] .fme-type-card.active {
  /* Fallback only — overridden by fmeSelectType() inline style */
  background: rgba(224,142,62,0.1);
  border-color: rgba(224,142,62,0.45);
  color: var(--gold-mid);
}

/* ── Step 3 selected attendees avatar strip ───────────────────────────────
   Horizontal strip of selected exec avatars sitting above the search bar.
   Fills in as execs are selected; avatars overlap like a team roster.
*/
.fme-avatar-strip {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 14px;
}
.fme-avatar-strip-count {
  font-size: var(--text-note); color: var(--text-dim);
  font-family: var(--font); white-space: nowrap; flex-shrink: 0;
  min-width: 72px;
}
.fme-avatar-strip-count strong { color: var(--gold-light); font-weight: 700; }
.fme-avatar-strip-row {
  display: flex; align-items: center;
  flex: 1; flex-wrap: wrap;
  padding: 4px 2px;
  gap: 0;
  min-height: 38px;
}
.fme-avatar-strip-empty {
  font-size: var(--text-note); color: var(--text-dim);
  font-family: var(--font); font-style: italic;
}
.fme-strip-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(6,19,24,0.95);
  overflow: visible; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-left: -7px;
  transition: transform 0.15s, border-color 0.15s, z-index 0s;
  z-index: 1;
}
.fme-strip-avatar:first-child { margin-left: 0; }
.fme-strip-avatar:hover {
  transform: translateY(-4px) scale(1.12);
  z-index: 10;
}
.fme-strip-avatar-inner {
  width: 30px; height: 30px; border-radius: 50%;
  overflow: hidden; cursor: pointer; flex-shrink: 0;
  border: 2px solid rgba(6,19,24,0.95);
  transition: border-color 0.15s;
}
.fme-strip-avatar:hover .fme-strip-avatar-inner { border-color: rgba(249,169,67,0.7); }
.fme-strip-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fme-strip-avatar-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--gold-light); background: var(--blue-mid);
  font-family: var(--font);
}
/* X remove button — appears on hover, top-right of avatar */
.fme-strip-avatar-remove {
  position: absolute; top: -5px; right: -5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(204,50,50,0.9); border: 1.5px solid rgba(6,19,24,0.95);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: 0; transition: opacity 0.12s;
  z-index: 20;
}
.fme-strip-avatar-remove svg { width: 7px; height: 7px; stroke: #fff; }
.fme-strip-avatar:hover .fme-strip-avatar-remove { opacity: 1; }
[data-theme="light"] .fme-strip-avatar-inner { border-color: rgba(240,244,246,0.95); }
[data-theme="light"] .fme-strip-avatar:hover .fme-strip-avatar-inner { border-color: rgba(224,142,62,0.6); }

/* ── Step-3 attendee facet filters (sidebar) ─────────────────────────────────
   Same facets as the geo-view exec sidebar (Job Title / Time in Role /
   Archetype / DOI / Gender); pills mirror the geo pf-pill look, compacted. */
.fme-fltr-block { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.fme-fltr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fme-fltr-clear {
  background: none; border: none; color: var(--gold-mid); font-family: var(--font);
  font-size: var(--text-micro, 10px); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; cursor: pointer; padding: 2px 4px;
}
.fme-fltr-clear:hover { color: var(--gold-light); }
.fme-fltr-section { margin-top: 10px; }
.fme-fltr-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.fme-fltr-pill {
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.04); color: var(--text-muted);
  font-size: var(--text-micro, 10.5px); font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; user-select: none; white-space: nowrap; transition: all 0.13s;
}
.fme-fltr-pill:hover { border-color: rgba(249,169,67,0.4); color: var(--gold-light); }
.fme-fltr-pill.active {
  background: rgba(249,169,67,0.14); border-color: rgba(249,169,67,0.5);
  color: var(--gold-light);
}
.fme-fltr-count { font-size: 11px; color: var(--text-dim); margin: -4px 0 8px 2px; }

/* ── Step 5: venue skeleton cards ─────────────────────────────────────────────
   Blank cards shown while live /api/venues results load — no placeholder
   venue data. Same footprint as a populated card (130px banner + text block)
   so the grid doesn't jump when results populate in place. */
.fme-venue-skel {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  animation: fme-skel-pulse 1.6s ease-in-out infinite;
}
.fme-venue-skel-banner { height: 130px; background: rgba(255,255,255,0.04); }
.fme-venue-skel-body { padding: 12px 12px 14px; background: rgba(10,30,38,0.95); }
.fme-venue-skel-line {
  height: 10px; border-radius: 4px; background: rgba(255,255,255,0.07);
  margin-bottom: 8px;
}
.fme-venue-skel-line:last-child { margin-bottom: 2px; }
@keyframes fme-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }