.event-code { font: 600 0.82em/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; }
a.event-code:hover { text-decoration: underline; }
h1 .event-code { font-size: 0.5em; vertical-align: middle; margin-left: 0.45em; }

:root {
  --ink: #101318;
  --muted: #6f7582;
  --soft: #eef0f3;
  --line: #dfe3e8;
  --panel: #fff;
  --bg: #f7f8fa;
  --black: #03070b;
  --red: #ef4338;
  --green: #0f8f46;
  --blue: #1268c7;
  --amber: #d99100;
  --danger: #c72525;
  --shadow: 0 8px 22px rgba(20, 25, 32, .08), 0 1px 2px rgba(20, 25, 32, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
pb-app-shell,
pb-dashboard,
pb-event-calendar,
pb-pipeline-board,
pb-events-list,
pb-events-upcoming,
pb-template-picker,
pb-event-workspace,
pb-lineup-editor,
pb-run-sheet,
pb-open-items,
pb-asset-manager,
pb-settlement-form,
pb-public-event-page,
pb-invite-acceptance,
pb-login-page,
pb-toast-stack,
pb-loading-state,
pb-promote-campaign-list,
pb-promote-campaign-overview,
pb-promote-health-card,
pb-promote-post-list,
pb-promote-post-editor,
pb-promote-broadcast-modal,
pb-promote-assets-card,
pb-promote-analytics-card,
pb-promote-settings,
pb-outbox-page,
pb-messages-inbox,
pb-messages-archive,
pb-messages-sent {
  display: block;
}
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .button {
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  font-weight: 750;
  cursor: pointer;
}
button.secondary, .button.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
button.danger { background: var(--red); }
button.danger, .button.danger { background: var(--red); color: #fff; border-color: var(--red); }
button.small, .button.small { padding: 7px 10px; font-size: 13px; }
input, select, textarea {
  width: 100%;
  border: 1px solid #cfd5dd;
  border-radius: 7px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
}
textarea { min-height: 92px; }
label { display: grid; gap: 6px; font-weight: 760; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: 0; }
h2 { margin-bottom: 12px; font-size: 22px; line-height: 1.15; }
h3 { margin-bottom: 8px; font-size: 15px; }
.muted { color: var(--muted); }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 294px minmax(0, 1fr);
  grid-template-rows: 92px minmax(0, 1fr) 70px;
}
.sidebar {
  grid-row: 1 / 4;
  background: radial-gradient(circle at 90% 22%, #111923 0, #03070b 40%, #000 100%);
  color: #fff;
  padding: 22px 28px;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 28px;
}
.brand, .mobile-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: 0;
}
.brand-mark {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  background: url("pb-logo2.png") center / contain no-repeat;
}
.side-nav { display: grid; gap: 8px; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 58px;
  padding: 0 13px;
  border-radius: 6px;
  color: rgba(255,255,255,.9);
  font-size: 18px;
  font-weight: 700;
  position: relative;
}
.side-nav a.active { background: rgba(255,255,255,.08); }
.side-nav a.active:before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 0 4px 4px 0;
  background: var(--red);
}

/* Collapsible parent nav groups (Events / Settings / Admin) */
.nav-group { display: grid; gap: 2px; }
.nav-parent {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 58px;
  padding: 0 13px;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  color: rgba(255,255,255,.9);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}
.nav-parent:hover { background: rgba(255,255,255,.05); }
.nav-parent .nav-parent-label { flex: 1; }
.nav-parent .nav-chevron {
  margin-left: auto;
  font-size: 13px;
  opacity: .65;
  transition: transform .15s ease;
}
.nav-group.open .nav-parent .nav-chevron { transform: rotate(90deg); }
.nav-group.active .nav-parent { color: #fff; }
.nav-children { display: none; }
.nav-group.open .nav-children { display: grid; gap: 4px; padding: 2px 0; }
.nav-children a {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 0 13px 0 34px;
  border-radius: 6px;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
.nav-children a:hover { color: #fff; }
.nav-children a.active { background: rgba(255,255,255,.08); color: #fff; }
.nav-children a.active:before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 0 4px 4px 0;
  background: var(--red);
}
.side-card, .venue-switch {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  border-radius: 8px;
}
.side-card {
  align-self: end;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.1;
}
.side-card strong { color: #fff; }
.side-card strong span { color: var(--red); }
.bolt {
  width: 17px;
  height: 32px;
  display: inline-block;
  background: #fff;
  clip-path: polygon(54% 0, 100% 0, 64% 42%, 100% 42%, 30% 100%, 48% 55%, 10% 55%);
}
.small-bolt { width: 10px; height: 18px; vertical-align: middle; margin-right: 10px; background: #fff; }
.venue-switch {
  width: 100%;
  min-height: 58px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  padding: 0 17px;
  font-size: 17px;
  font-weight: 650;
}
.chev {
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.copyright { align-self: end; margin: 0; color: rgba(255,255,255,.72); font-size: 14px; }

.topbar {
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding: 0 34px;
}
.mobile-brand { display: none; margin-right: auto; font-size: 28px; }
.nav-toggle { display: none; }
/* Mobile navigation drawer affordances — shown only in the ≤860 layout. */
.drawer-toggle, .drawer-close, .drawer-backdrop { display: none; }
.search {
  width: min(420px, 38vw);
  position: relative;
  display: block;
  font-weight: 400;
}
.search input {
  height: 50px;
  padding-left: 48px;
  background: #05080c;
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.bell, .avatar, .logout {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
}
.bell {
  width: 30px;
  height: 34px;
  border: 2px solid #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom: 0;
}
.bell:after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -4px;
  height: 2px;
  background: #fff;
}
.bell span {
  position: absolute;
  right: -9px;
  top: -10px;
  min-width: 21px;
  height: 21px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #222832;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.logout { opacity: .72; font-weight: 700; }
.topbar-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent, #2563eb);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .15s;
}
.topbar-create:hover { opacity: .9; }
.topbar-create i { font-size: 13px; }
.session-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  font-weight: 760;
  white-space: nowrap;
}

/* Realtime connection dot (docs/realtime-data.md) — see app.js's
   setupRealtimeIndicator(). Purely informational; title/aria-label carry the
   actual explanation, set from JS per state. */
.realtime-indicator { display: inline-flex; align-items: center; cursor: default; }
.realtime-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transition: background-color .3s ease;
}
.realtime-indicator[data-state="connected"] .realtime-dot { background: var(--green); }
.realtime-indicator[data-state="connecting"] .realtime-dot { background: var(--amber); animation: realtime-pulse 1.1s ease-in-out infinite; }
.realtime-indicator[data-state="disconnected"] .realtime-dot { background: var(--red); }
@keyframes realtime-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* pb-page-header — page title + blurb shown in the topbar on desktop */
pb-page-header { display: none; }
.ph-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.ph-blurb {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.workspace { padding: 30px 34px 38px; min-width: 0; }
.app-footer {
  background: var(--black);
  color: rgba(255,255,255,.76);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 34px;
  font-size: 15px;
}
.app-footer span:last-child { justify-self: end; }
.app-footer a { text-decoration: underline; }

.page-head, .section-head, .toolbar, .inline-actions, .tabs, .status-line {
  display: flex;
  align-items: center;
  gap: 12px;
}
.inline-actions { flex-wrap: wrap; }
.page-head { justify-content: space-between; margin-bottom: 28px; }
.section-head { justify-content: space-between; margin-bottom: 0; }
.subtle { color: var(--muted); font-size: 18px; }
.panel, .metric-card, .attention-card, .event-summary, .next-action, .today-card, .mobile-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.panel { margin-bottom: 18px; overflow: hidden; }
/* Panels clip to their rounded corners by default, but that also clips any
   open .print-menu dropdown (Add Tasks, Add preset, export/print, download
   menus) that pops outside the panel's box. Let overflow go visible only
   while one of those menus is actually open. */
.panel:has(.print-menu[open]) { overflow: visible; }
.panel-body { padding: 18px; }
.padded { padding: 18px; }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 22px;
  margin-bottom: 28px;
}
.metric-card {
  min-height: 150px;
  padding: 22px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: start;
}
.metric-card .icon-bubble { grid-row: span 2; }
.metric-card strong { grid-column: 2; font-size: 52px; line-height: 1; color: var(--muted); }
.metric-card h3 { font-size: 18px; margin: 8px 0 0; }
.metric-card p { grid-column: 2; margin: 0; color: var(--muted); font-size: 15px; }
.metric-card.green strong, .metric-card.green h3 { color: var(--green); }
.metric-card.red strong, .metric-card.red h3 { color: var(--danger); }
.metric-card.amber strong, .metric-card.amber h3 { color: var(--amber); }
/* Navigable metric card (e.g. New Leads → Leads inbox) */
a.metric-link { text-decoration: none; color: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
a.metric-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
a.metric-link:focus-visible { outline: 2px solid var(--accent, #6c5ce7); outline-offset: 2px; }
/* Customizable top metrics: gear toolbar + checkbox dropdown */
.metric-section { margin-bottom: 28px; }
.metric-section .metric-grid { margin-bottom: 0; }
.metric-toolbar { display: flex; justify-content: flex-end; position: relative; margin-bottom: 12px; }
.metric-customize[aria-expanded="true"] { background: #f4f6fa; border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.metric-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 232px;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 6px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.metric-menu-head { margin: 0 10px 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.metric-menu-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.metric-menu-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.metric-menu-item:hover { background: #f4f6fa; }
.metric-menu-item input { flex: none; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.icon-bubble {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eceef1;
  color: #101318;
}
.icon-bubble.red { background: #ffe0df; color: var(--danger); }
.icon-bubble.amber { background: #fff0c9; color: var(--amber); }
.icon-bubble.green { background: #d9f2e5; color: var(--green); }
.icon-bubble.blue { background: #dbeafe; color: var(--blue); }

/* ── Onboarding / getting-started checklist ─────────────────────────────── */
.onboarding-card {
  padding: 24px;
  margin-bottom: 28px;
  border-left: 4px solid var(--blue, #3b82f6);
}
.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.onboarding-title h2 { margin: 0 0 4px; font-size: 18px; }
.onboarding-title p  { margin: 0; }
.onboarding-progress {
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 20px;
}
.onboarding-progress-bar {
  height: 100%;
  background: var(--blue, #3b82f6);
  border-radius: 999px;
  transition: width .4s ease;
}
.onboarding-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.onboarding-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background .15s;
}
.onboarding-step:hover { background: var(--row-hover, rgba(0,0,0,.03)); }
.onboarding-check { font-size: 20px; flex-shrink: 0; color: var(--muted); }
.onboarding-step.is-done .onboarding-check { color: var(--green); }
.onboarding-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.onboarding-step-body strong { font-size: 15px; }
.onboarding-step-note { font-size: 13px; color: var(--muted); }
.onboarding-step.is-done .onboarding-step-body strong { text-decoration: line-through; color: var(--muted); }
/* ── end onboarding ─────────────────────────────────────────────────────── */

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .9fr);
  gap: 24px;
}
/* Was a marker class several panels already wrapped tables in with no
   behavior behind it (see the tk-list-scroll comment further down) — giving
   it real overflow makes every one of those panels' tables actually scroll
   on narrow viewports instead of silently clipping/wrapping. */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  text-align: left;
  vertical-align: middle;
}
.data-table th { color: var(--muted); font-size: 13px; font-weight: 760; }
.data-table th.sorted { color: var(--ink); }
.data-table th .th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.data-table th .th-sort:hover { color: var(--ink); }
.data-table th .sort-arrow { font-size: 11px; line-height: 1; }
/* Clickable table rows — used in the contracts list and anywhere a full-row
   click navigates to a detail view. The action cell stays visible on hover. */
.data-table tr.clickable-row { cursor: pointer; transition: background 120ms; }
.data-table tr.clickable-row:hover { background: var(--bg-alt, #f7f8fa); }
.data-table tr.clickable-row:hover td { color: var(--ink); }
.row-action-cell { text-align: right; white-space: nowrap; padding-right: 12px; }
/* Search results: the "matched in ..." excerpt line under a non-title hit
   (see search-results.js) — separated a touch from the title link above it. */
.search-match { margin-top: 3px; }
.contracts-table .row-action-cell .button { opacity: 0; transition: opacity 120ms; }
.contracts-table tr.clickable-row:hover .row-action-cell .button { opacity: 1; }
.status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 8px;
}
.status-dot.green { background: var(--green); }
.status-dot.blue { background: var(--blue); }
.status-dot.amber { background: #f5b21b; }
.status-dot.red { background: var(--danger); }
.status-dot.gray { background: #a8aeb8; }
/* Room-based calendar dot colours */
.status-dot.room-up   { background: #f59e0b; } /* amber — Upstairs */
.status-dot.room-down { background: #6366f1; } /* indigo — Downstairs */
.status-dot.room-both { background: #10b981; } /* emerald — Both Rooms */
.legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 16px 18px;
  color: var(--muted);
  font-size: 14px;
}
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  background: #e7e9ed;
  color: #4b5563;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-empty { background: #eef0f3; color: #5a606b; }
.status-proposed { background: #efe5ff; color: #6a2bb7; }
.status-hold { background: #ffd7d7; color: #ae1f1f; }
.status-confirmed { background: #d3f1df; color: #0c7a3c; }
.status-booked    { background: #bbf7d0; color: #065f46; }
.status-needs_assets { background: #ffedc2; color: #a06400; }
.status-assets_approved { background: #bbf7d0; color: #065f46; }
.status-ready_to_announce { background: #d9f3ef; color: #0b766b; }
.status-published { background: #d9ebff; color: #1466bd; }
.status-advanced { background: #d8f0e1; color: #0f7c3f; }
.status-completed, .status-settled { background: #e6e0ff; color: #5240a9; }
.status-canceled { background: #fde2e1; color: #b42318; }
/* Campaign send-status pills (draft/sending/sent/partial_failure/failed) — reuse
   the existing status-badge hue vocabulary so they read as the same family. */
.status-draft { background: #eef0f3; color: #5a606b; }
.status-sending { background: #d9ebff; color: #1466bd; }
.status-sent { background: #d3f1df; color: #0c7a3c; }
.status-partial_failure { background: #ffedc2; color: #a06400; }
.status-failed { background: #fde2e1; color: #b42318; }

.attention-list { display: grid; gap: 18px; padding: 18px; }
.attention-card {
  box-shadow: none;
  padding: 22px;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 18px;
  align-items: center;
  background: #fff8f7;
  border-color: #f5c8c5;
}
.attention-card.amber { background: #fff8ec; border-color: #f4d697; }
.attention-card strong { display: block; font-size: 18px; color: var(--danger); }
.attention-card.amber strong { color: #b97700; }
.attention-card p { margin: 2px 0 10px; color: #3d4148; }
.arrow {
  width: 13px;
  height: 13px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.calendar-page .filters {
  display: grid;
  grid-template-columns: 260px repeat(3, 1fr) auto;
  gap: 16px;
  margin-bottom: 18px;
}
.filter, .view-toggle {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #3d4450;
  box-shadow: 0 3px 10px rgba(20,25,32,.05);
}
/* .panel's default overflow:hidden (it clips content to its rounded corners)
   would otherwise disable position:sticky for any descendant — sticky needs
   every ancestor up to the actual scroll container (#app on desktop, the
   viewport on mobile) to leave overflow visible. The sticky head below
   supplies its own matching top corner radius so the rounded-card look is
   preserved even though the panel itself no longer clips. */
.calendar-shell { padding: 0; overflow: visible; }
.calendar-error-shell {
  min-height: min(680px, calc(100vh - 190px));
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
}
.calendar-error-state {
  width: min(640px, 100%);
  padding: clamp(32px, 5vw, 56px);
  border: 2px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 6%, #fff);
  box-shadow: 0 18px 50px rgba(20, 25, 32, .16);
  text-align: center;
}
.calendar-error-state h2 { margin: 12px 0 10px; font-size: clamp(24px, 3vw, 32px); }
.calendar-error-state p { margin: 0 auto 24px; max-width: 52ch; font-size: 16px; line-height: 1.55; }
.calendar-error-icon { color: var(--danger); font-size: 42px; }
.calendar-sticky-head { position: sticky; top: 0; z-index: 5; background: var(--panel, #fff); border-radius: 8px 8px 0 0; }
.calendar-toolbar {
  min-height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.calendar-controls, .calendar-actions { display: flex; gap: 8px; align-items: center; }
.calendar-actions { justify-content: flex-end; }
/* Continuous-scroll month grid (Grid view) — see EventCalendar in
   event-views.js. The weekday row is repeated once, sticky right below the
   sticky toolbar, rather than once per stacked month. */
.calendar-weekdays-sticky { border-bottom: 1px solid var(--line); }
.calendar-scroll { display: flex; flex-direction: column; }
.calendar-month-block + .calendar-month-block { border-top: 2px solid var(--line); }
.calendar-month-heading { margin: 16px 16px 4px; font-size: 15px; font-weight: 800; color: var(--muted); }
.calendar-load-sentinel { display: flex; align-items: center; justify-content: center; min-height: 36px; }
.calendar-load-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent, #2563eb);
  animation: spin .8s linear infinite;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}
.calendar-day, .weekday {
  min-height: 106px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 11px 13px;
}
.weekday {
  min-height: 34px;
  background: #fbfbfc;
  color: #4f5663;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.calendar-day:nth-child(7n), .weekday:nth-child(7n) { border-right: 0; }
.day-num { display: block; color: #4f5663; font-size: 13px; margin-bottom: 6px; }
.mini-event {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
}
.mini-event .status-dot { margin-right: 0; }
.mini-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
.mini-event-time { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mini-event:hover .mini-event-title { text-decoration: underline; }
/* Private event calendar chip — subtle grey background to distinguish from public shows. */
.mini-event-private { background: color-mix(in srgb, var(--muted) 12%, transparent); }
/* Event that hasn't reached Intake Complete yet (see needsIntake() in
   event-views.js) — faint amber wash so unfinished intake is visible without
   opening each show. Declared after .mini-event-private on purpose: a private
   rental still awaiting intake shows the actionable amber, not the grey. */
.mini-event-preintake { background: color-mix(in srgb, var(--amber) 15%, transparent); border-radius: 4px; }
.cal-agenda-row-preintake { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.mini-event-lock { font-size: 10px; flex-shrink: 0; margin-right: 1px; line-height: 1; }
/* Multi-day event chip on the day cells *after* its start day — same event,
   de-emphasised so the eye still lands on the day it actually begins. */
.mini-event-continued { opacity: 0.62; }
.mini-event-continued .mini-event-title { font-style: italic; }
.mini-event-continues { font-size: 10px; flex-shrink: 0; line-height: 1; color: var(--muted); }
/* Agenda view: same event shown on a later day of its own range. */
.cal-agenda-row-continued { opacity: 0.62; }
.cal-agenda-row-continued .cal-agenda-title { font-style: italic; }
.cal-agenda-daynum { font-style: normal; font-weight: 600; font-size: 11px; }
/* Private event badge in workspace header / form section-head */
.badge-private { font-size: 13px; margin-left: 8px; vertical-align: middle; }
.badge.status-private { background: #e8e4f0; color: #5b3b9a; }
/* Pipeline card — private events get a faint tint */
.pipe-card-private { border-left: 3px solid var(--muted); opacity: 0.9; }

/* Room conflict: two events booked into the same room with overlapping
   times (see roomConflictIds()/roomConflictDates() in core.js). Uses
   --danger rather than --red, which already means "canceled" elsewhere on
   the calendar, so a conflict reads as its own, more urgent signal. */
.calendar-day.has-conflict {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent);
}
.calendar-day.has-conflict .day-num { color: var(--danger); font-weight: 800; }
.mini-event-conflict { box-shadow: inset 0 0 0 1px var(--danger); border-radius: 4px; }
/* Lead-in/trail-off cells for the weeks a month's grid borrows from the
   adjacent month (see _renderMonthBlockHtml() in event-views.js) — left
   fully blank (no date number, no events) rather than dimmed-but-live,
   which is what was actually confusing people. */
.calendar-day.calendar-day-pad { background: var(--soft); cursor: default; }

/* Status colour key above the grid (dot colour = event status). */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 18px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.calendar-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend .legend-item .status-dot { margin-right: 0; }
/* Square swatch (vs. the round room dots) for the chip-tint key. */
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.legend-swatch-preintake {
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 45%, transparent);
}

/* Day cell split by floor: upstairs (On Broadway) above the divider, downstairs
   (The Mab) below it, whole-building "Both Rooms" bookings straddling. */
.calendar-split .calendar-day { display: flex; flex-direction: column; }
.cell-zone { display: flex; flex-direction: column; flex: 1 1 0; min-height: 26px; }
.zone-down { border-top: 1px dashed var(--line); margin-top: 5px; padding-top: 4px; }
.zone-both { display: flex; flex-direction: column; }
.zone-both .mini-event-title { font-style: italic; }
.zone-both .mini-event-title::after { content: " · both"; color: var(--muted); font-style: normal; font-weight: 600; }
.program-night {
  border: 1px dashed #c5ccd6;
  border-radius: 7px;
  color: #657084;
  text-align: center;
  padding: 8px 3px;
  font-size: 12px;
  transition: background .12s, border-color .12s, color .12s;
}
.calendar-day.calendar-clickable {
  cursor: pointer;
  transition: background .12s;
}
.calendar-day.calendar-clickable:hover {
  background: #f6f8fc;
}
.calendar-day.calendar-clickable:hover .program-night {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
  background: #fff;
}
.calendar-day.calendar-clickable:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}
.pipeline-controls {
  flex-wrap: wrap;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(#fff, #f7f8fa);
}
.pipeline-controls .date-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.pipeline-controls .date-field input {
  font-size: 14px;
}
.pipeline-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.pipe-col {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(#fff, #f7f8fa);
  padding: 10px;
  min-height: 300px;
}
.pipe-col h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.pipe-count { background: rgba(16,19,24,.08); border-radius: 999px; padding: 3px 8px; font-size: 12px; }
.pipe-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  margin-bottom: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pipe-card strong { display: block; margin-bottom: 5px; }
.pipe-card span, .pipe-card small { color: var(--muted); display: block; margin-bottom: 8px; }

.event-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  margin-bottom: 18px;
}
.back-link { color: var(--muted); font-weight: 750; margin-bottom: 6px; display: inline-block; }
.event-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.print-menu { position: relative; }
.print-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.print-menu > summary::-webkit-details-marker { display: none; }
.print-menu > summary::marker { content: ''; }
.print-menu .print-menu-items {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.print-menu .print-menu-items button {
  background: transparent;
  color: var(--ink);
  border: 0;
  text-align: left;
  padding: 9px 12px;
  font: inherit;
  border-radius: 4px;
  cursor: pointer;
}
.print-menu .print-menu-items button:hover { background: #f3f3f3; }
.event-more-menu { position: relative; flex: 0 0 auto; }
.event-more-menu > summary {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
}
.event-more-menu > summary::-webkit-details-marker { display: none; }
.event-more-menu > summary::marker { content: ''; }
.event-more-menu[open] > summary { background: var(--ink); color: #fff; border-color: var(--ink); }
.event-more-items {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 95;
  min-width: 210px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  transform-origin: top right;
  animation: event-more-slide .14s ease-out;
}
.event-more-menu:not([open]) .event-more-items { display: none; }
.event-more-items a,
.event-more-items button {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.event-more-items a:hover,
.event-more-items button:hover,
.event-more-items a:focus-visible,
.event-more-items button:focus-visible { background: var(--bg, #f3f3f3); }
.event-more-items i { width: 18px; color: var(--muted); text-align: center; }
@keyframes event-more-slide {
  from { opacity: 0; transform: translate3d(8px, -5px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .event-more-items { animation: none; }
}
.history-undo-items {
  width: 360px;
  max-width: 90vw;
  max-height: 420px;
  overflow-y: auto;
}
.history-undo-status { padding: 12px; font-size: 13px; }
.history-undo-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 9px 12px;
  white-space: normal;
}
.history-undo-row:disabled { cursor: default; opacity: 0.55; }
.history-undo-row:not(:disabled):hover { background: #f3f3f3; }
.history-undo-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.history-undo-time { font-size: 11px; }
.history-undo-desc { font-size: 13px; font-weight: 600; color: var(--ink); }
.history-undo-meta { font-size: 11px; }
.section-toggle-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 4px; cursor: pointer;
  font: inherit; color: var(--ink); white-space: nowrap; user-select: none;
}
.section-toggle-item:hover { background: #f3f3f3; }
.section-toggle-item input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--red, #c0392b); }

.guest-totals { font-size: 13px; }
.guest-list-body { padding: 8px 18px 16px; }
.guest-section { margin-top: 14px; }
.guest-section-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #555; margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.guest-section-head .muted { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 8px; font-size: 12px; }
.guest-row { align-items: center; }
.guest-row.checked-in { background: #f1f8f1; }
.guest-row .guest-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #555; min-width: 56px; }
.guest-row .guest-check input { margin: 0; }
.guest-add { background: #fafafa; border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; }
.workspace-tabs-wrap { position: relative; margin-bottom: 18px; }
.workspace-tabs {
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.workspace-tabs a {
  padding: 14px 13px;
  color: #4b5360;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.workspace-tabs a.active { color: #111; border-color: var(--red); font-weight: 900; }
/* "<<"/">>" scroll-edge markers. The tab bar's own text tends to line-wrap
   almost exactly at the visible width, so without these there's no visual
   hint that scrolling reveals more tabs — the last one just looks cut off
   mid-word (see event-workspace.js _wireTabScrollEdges). Each hides itself
   (via the `hidden` attribute) once its direction has nothing left to
   scroll to; clicking one also scrolls the bar. */
.tab-scroll-edge {
  position: absolute;
  top: 0;
  bottom: 1px; /* sit above the tab bar's own 1px border-bottom */
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  color: #4b5360;
  z-index: 1;
}
/* Without this, our own `display: flex` above (same specificity as the UA
   stylesheet's `[hidden] { display: none }`, but declared later) would win
   and the hidden attribute JS toggles would do nothing visually. */
.tab-scroll-edge[hidden] { display: none; }
.tab-scroll-edge:hover { color: #111; }
.tab-scroll-left {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(to right, var(--bg) 55%, transparent);
}
.tab-scroll-right {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(to left, var(--bg) 55%, transparent);
}
/* Compact header strip — sits above the tab nav. A small flyer thumbnail,
   a single-row fact strip, and inline stat pills, all on one line so it
   doesn't compete with the tabs/content below for vertical space. */
.event-summary {
  padding: 8px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}
.flyer {
  position: relative;
  overflow: hidden;
  width: 110px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: radial-gradient(circle at 80% 55%, var(--red) 0 10%, transparent 11%),
    linear-gradient(135deg, #111 0 60%, #2f3136);
  color: #fff;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  display: flex;
  align-items: flex-end;
}
/* Generative paint-splat background, sized to fill the flyer card. */
.flyer-splat {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Event title sits above the splat with a scrim for legibility. */
.flyer-title {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .75), 0 1px 2px rgba(0, 0, 0, .9);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 4px 0;
}
.fact {
  padding: 0 12px;
  border-left: 1px solid var(--line);
  min-height: auto;
}
.fact:first-child { border-left: none; padding-left: 0; }
.fact label { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.fact strong { display: block; font-size: 13.5px; line-height: 1.3; }
.event-stats { border-left: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-left: 16px; flex: 0 0 auto; }
.event-stat { display: flex; align-items: baseline; gap: 6px; padding: 0; border-bottom: 0; color: #4b5360; font-size: 12px; white-space: nowrap; }
.event-stat strong { color: var(--danger); font-size: 16px; line-height: 1; }
.event-stat button {
  border: none; background: none; padding: 0; margin: 0;
  font: inherit; font-size: 11px; color: var(--accent, #2563eb); cursor: pointer;
}
.event-stat button:hover { text-decoration: underline; }
.next-action {
  border-color: #f2c86e;
  background: #fffaf0;
  box-shadow: none;
  padding: 17px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.next-action-buttons { display: flex; align-items: center; gap: 8px; }
/* Collapsed state after the close (×) button is used — a slim strip instead
   of the full amber card, so dismissing doesn't fully vanish (still
   reversible) and doesn't strand the Refresh control behind nothing. */
.next-action-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 17px;
  margin-bottom: 18px;
  background: var(--soft);
  border-color: var(--line);
  font-size: 13px;
  color: #6b7280;
}
/* Workspace summary/readiness/next-action cards are web components; make the
   custom-element hosts layout-transparent so their inner markup sits exactly
   where the old inline markup did (block flow or overview-grid grid items). */
pb-event-summary, pb-event-readiness, pb-event-next-action { display: contents; }
pb-event-overview { display: block; }
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .75fr);
  gap: 18px;
}

/* ── Overview dashboard (card-grid summary, Overview tab) ──────────────────── */
.overview-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.overview-dashboard .span-3 { grid-column: 1 / -1; }
.overview-card { display: flex; flex-direction: column; margin-bottom: 0; }
.overview-card .section-head h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.overview-card .section-head h2 i { color: var(--muted); font-size: 13px; width: 16px; text-align: center; }
.ov-body { padding: 14px 18px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ov-body .empty-state { padding: 12px 0; }
.ov-footer { border-top: 1px solid var(--line); background: var(--soft); }
.ov-footer button {
  width: 100%; padding: 10px 18px; font-size: 13px; font-weight: 700;
  color: var(--accent, #2563eb); background: none; border: none; cursor: pointer; text-align: left;
}
.ov-footer button:hover { text-decoration: underline; }
.ov-divider { height: 1px; background: var(--line); margin: 2px 0; }
.ov-note { font-size: 13.5px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }

.ov-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.ov-stat label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
.ov-stat strong { font-size: 15px; font-weight: 700; }
.ov-stat strong a { color: var(--accent, #2563eb); }

/* ── Payments tab: deposit summary bar (Payments tab, event workspace) ─────── */
.summary-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.summary-row { display: flex; flex-direction: column; gap: 2px; }
.summary-row .label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.summary-row .value { font-size: 15px; font-weight: 700; }
.summary-row .value.value-warn { color: var(--danger); }
.summary-block .summary-spacer { flex: 1 1 auto; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.timeline-list { list-style: none; margin: 0; padding: 0; }
.timeline-row { display: grid; grid-template-columns: 60px 14px 1fr; gap: 10px; align-items: start; padding: 6px 0; }
.timeline-time { font-size: 12px; color: var(--muted); font-weight: 700; padding-top: 1px; white-space: nowrap; }
.timeline-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #2563eb); margin-top: 4px; position: relative; }
.timeline-row:not(:last-child) .timeline-dot::after {
  content: ''; position: absolute; top: 12px; left: 50%; width: 1px; height: 26px;
  background: var(--line); transform: translateX(-50%);
}
.timeline-label { font-size: 13.5px; line-height: 1.4; }

.ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ov-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; flex-wrap: wrap; }
.ov-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); min-width: 60px; }
.ov-name { font-weight: 600; }
.ov-time { margin-left: auto; font-size: 12px; white-space: nowrap; }
.ov-lineup-list .ov-role { min-width: 28px; }

.ov-contact-block + .ov-contact-block { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ov-contact-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 4px; }
.ov-contact-name { font-size: 14px; font-weight: 700; margin: 0 0 3px; }
.ov-contact-meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.ov-contact-meta a { color: inherit; }

.ov-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ov-task { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; }
.ov-check {
  width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line);
  flex: 0 0 auto; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff;
}
.ov-task.done .ov-check { background: var(--green); border-color: var(--green); }
.ov-task.done .ov-task-title { text-decoration: line-through; color: var(--muted); }

.ov-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ov-doc-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; min-width: 0; }
.ov-doc-icon { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; flex: 0 0 auto; }
.ov-doc-meta { min-width: 0; display: flex; flex-direction: column; }
.ov-doc-meta strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-doc-meta span { font-size: 11px; color: var(--muted); }

.chip-accent { background: var(--red); color: #fff; border-color: var(--red); }
.chip-green  { background: #e3f6e8; color: #0c7a3c; border-color: #bfe8cc; }
.chip-amber  { background: #fff0c9; color: #8a5a00; border-color: #f2d98a; }
.chip-red    { background: #fde2e1; color: #b42318; border-color: #f6c2bf; }
.chip-gray   { background: var(--soft); color: var(--muted); border-color: var(--line); }

@media (max-width: 1180px) {
  .overview-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-dashboard .span-3 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .overview-dashboard { grid-template-columns: 1fr; }
}

.health-row, .task-row, .schedule-row, .asset-row, .performer-row {
  display: grid;
  align-items: center;
  border-top: 1px solid var(--line);
}
.health-row { grid-template-columns: repeat(var(--readiness-cols, 6), 1fr); padding: 18px; gap: 10px; }
.health-item { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.check, .warn-mark, .neutral {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
}
.check { background: var(--green); }
.warn-mark { background: var(--amber); }
.neutral { background: #9299a4; }
.task-row { grid-template-columns: 26px 1fr 110px 80px; gap: 12px; padding: 12px 18px; }
.box { width: 18px; height: 18px; border: 1px solid #8b93a0; border-radius: 3px; }
.schedule-row { grid-template-columns: 92px 1fr 1.2fr 80px; gap: 14px; padding: 11px 18px; }
.performer-row { grid-template-columns: 36px 1fr 80px; gap: 10px; padding: 9px 18px; }
.asset-row { grid-template-columns: 90px 1fr auto; gap: 12px; padding: 14px 18px; }
.asset-thumb { width: 86px; height: 60px; border-radius: 5px; background: #111; color: #fff; padding: 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.notes { padding: 18px; line-height: 1.55; }
.empty-state { text-align: center; color: var(--muted); padding: 34px 18px; }
.loading-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 800;
}
.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--red);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 5px;
  opacity: 0.85;
}
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-form.compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.check-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.check-label input { width: auto; }
.wide { grid-column: 1 / -1; }
.form-section-head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 6px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-section-note { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #a8aeb8; }

/* Discount codes (ticketing-admin.js). The code itself reads as a token the
   operator will paste into an email, so it gets monospace + tracking. */
.discount-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; }
.discount-tiers {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
}
.discount-tiers legend {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 4px;
}
.discount-tiers label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.discount-tiers label input { width: auto; }
.discount-tier-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
/* Recurring events — <pb-recurrence-fields> (event-wizard.js Step 1 and the
   Event Details "Recurrence" panel in event-workspace.js). Spans the full
   width of whatever .grid-form it's dropped into; lays its own controls out
   in a nested grid rather than participating in the parent's columns. */
pb-recurrence-fields { display: block; grid-column: 1 / -1; }
pb-recurrence-fields .recurrence-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
pb-recurrence-fields .recurrence-body > label,
pb-recurrence-fields .recurrence-body > p { grid-column: 1 / -1; }
.recurrence-preview {
  grid-column: 1 / -1;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 13px;
}
.recurrence-preview li {
  background: var(--chip-bg, rgba(127, 127, 127, 0.12));
  border-radius: 999px;
  padding: 2px 10px;
}
.info-note {
  padding: 10px 14px;
  background: #f0f6ff;
  border: 1px solid #c3dafe;
  border-radius: 6px;
  font-size: 13px;
  color: #1e40af;
}
.save-status { margin: 4px 0 0; font-size: 14px; color: var(--muted); transition: color .2s ease; }
.save-status[data-state="saving"] { color: var(--muted); opacity: 0.85; }
.save-status[data-state="saved"] { color: #2fa84f; }
.save-status[data-state="saved"]::before { content: "\2713\00a0"; font-weight: 700; }
.save-status[data-state="error"] { color: #ef4338; }
.row-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  align-items: end;
}

/* --- Editable record lists: read-only review tables with hover-to-edit --- */
.section-head-actions { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.add-toggle {
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; line-height: 1; flex: 0 0 auto;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.add-toggle:hover { background: var(--red); border-color: var(--red); color: #fff; }
.add-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.add-toggle.active { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(45deg); }

[data-add-form] { border-top: 1px solid var(--line); background: var(--soft); }
[data-add-form][hidden] { display: none !important; }

.record-table { display: block; }
.record-head {
  display: none; gap: 8px; padding: 9px 18px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.record + .record { border-top: 1px solid var(--line); }
.record-view {
  display: grid; gap: 8px; align-items: center;
  padding: 11px 18px; position: relative;
  transition: background .12s ease;
}
.record-view:hover { background: var(--soft); }
.record.checked-in .record-view { background: #f1f8f1; }
.record.checked-in .record-view:hover { background: #e7f4e7; }
.record-cell { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.record-label { display: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.record-value { font-size: 14px; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.record-value .muted { color: var(--muted); }
.record-empty { color: var(--line); }

.record-edit {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border-radius: 6px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.record-view:hover .record-edit, .record-edit:focus-visible { opacity: 1; }
.record-edit:hover { color: #fff; background: var(--red); border-color: var(--red); }

.record .record-form { display: none; }
.record.editing .record-view { display: none; }
.record.editing .record-form { display: grid; background: var(--soft); border-top: none; }

.record-table--labeled .record-label { display: block; }

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  background: var(--soft); color: var(--ink); border: 1px solid var(--line);
  white-space: nowrap;
}
.guest-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; }
.guest-check input { margin: 0; }

@media (min-width: 861px) {
  .record-head { display: grid; }
  .record-table:not(.record-table--labeled) .record-label { display: none !important; }
}
@media (max-width: 860px) {
  .record-head { display: none; }
  .record-view { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding-right: 48px; }
  .record-label { display: block; }
  .record-edit { opacity: 1; top: 12px; transform: none; }
}
.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 250px)); gap: 14px; padding: 18px; justify-content: start; }
.asset-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; gap: 8px; }
.asset-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: #111; }
.asset-card img.asset-image { cursor: zoom-in; transition: filter 0.12s ease, transform 0.12s ease; }
.asset-card img.asset-image:hover { filter: brightness(1.05); }
.asset-card img.asset-image:focus-visible { outline: 2px solid var(--accent, #4c6fff); outline-offset: 2px; }
.asset-icon-tile { width: 100%; aspect-ratio: 4 / 3; border-radius: 5px; background: #111; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: #fff; font: inherit; padding: 0; }
.asset-icon-tile i { font-size: 34px; opacity: 0.9; }
.asset-icon-tile span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.asset-icon-tile:hover { filter: brightness(1.12); }
.asset-icon-tile:focus-visible { outline: 2px solid var(--accent, #4c6fff); outline-offset: 2px; }
.asset-card-event { font-size: 12px; }
.asset-card-event a { text-decoration: none; }

/* Contracts tab: "which asset is the signed contract?" picker — one
   selectable row per event asset (thumbnail, title, type), scrollable list
   modeled on .mlist-add-contacts-results. */
.contract-asset-picker {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 2px;
}
.contract-asset-row { width: 100%; padding: 7px 8px; border-radius: 6px; gap: 10px; }
.contract-asset-row:hover { background: var(--bg); }
.contract-asset-row input[type="radio"] { width: auto; flex-shrink: 0; }
.contract-asset-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.contract-asset-thumb.asset-thumb { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.contract-asset-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.contract-asset-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-uploaded-row td { background: color-mix(in srgb, var(--accent, #2563eb) 4%, transparent); }

/* Contracts tab: Create Contract modal's Generate/Upload mode switch — two
   clearly-labeled cards instead of a single ambiguous checkbox, so the two
   ways a contract gets attached to an event (boilerplate vs. a file you
   already have signed) read as a real either/or choice, not a "toggle". */
.contract-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contract-mode-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.contract-mode-option:hover { background: var(--bg); }
.contract-mode-option input[type="radio"] { width: auto; flex-shrink: 0; margin-top: 3px; }
.contract-mode-option:has(input:checked) { border-color: var(--accent, #2563eb); background: color-mix(in srgb, var(--accent, #2563eb) 6%, transparent); }
.contract-mode-option strong { display: block; }
.contract-mode-option small { color: var(--muted); }

/* Upload-mode's "choose a file, it uploads immediately" control. */
.contract-upload-row { position: relative; display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.contract-upload-row input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* Embedded PDF viewer (openAssetFileViewer in core.js) — reuses the shared
   modal chrome, just needs the embed itself to claim real height. */
.pdf-viewer-body { padding: 0; }
.pdf-viewer-embed { display: block; width: 100%; height: 72vh; border: 0; background: #525659; }
.pdf-viewer-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); }
.list-controls { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.checkbox-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; user-select: none; }
.checkbox-inline input { width: 16px; height: 16px; cursor: pointer; }
.inline-status {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.invite-list {
  display: grid;
  gap: 0;
}
.invite-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 12px 18px;
}
.invite-row input {
  font-size: 13px;
  color: var(--muted);
}
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { border-top: 1px solid var(--line); padding: 12px 18px; line-height: 1.5; }
.log-action { }
.log-meta { color: var(--muted); font-size: 0.85em; }
.log-date { }
.log-val { font-style: italic; }
.log-clipped { cursor: help; border-bottom: 1px dotted var(--muted); }
.log-empty { opacity: 0.4; font-style: italic; }
.log-changes { list-style: none; padding: 0 0 0 1em; margin: 4px 0 0; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.log-changes li { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.log-field { font-weight: 600; color: var(--body); }

.tonight-page { display: none; }
.tonight-page[aria-hidden="true"] { display: none !important; }
.mobile-tabs { display: none; }
.auth-card {
  max-width: 460px;
  margin: 64px auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 22px; margin-bottom: 20px; }
.passkey-btn {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity .15s;
}
.passkey-btn:disabled { opacity: .55; cursor: default; }
.passkey-btn:hover:not(:disabled) { opacity: .9; }
.passkey-icon { font-size: 18px; }
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0;
}
.auth-or::before, .auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-email-link > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 4px 0;
  list-style: none;
}
.auth-email-link > summary::-webkit-details-marker { display: none; }
.auth-email-link[open] > summary { margin-bottom: 14px; }
.auth-notice {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-notice.success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.auth-notice.error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.auth-card .primary.block,
.auth-card button.primary.block {
  width: 100%;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 700;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
}
.auth-card .primary.block:disabled { opacity: .55; cursor: default; }
.auth-card .primary.block:hover:not(:disabled) { opacity: .9; }
.auth-greeting { margin: 0 0 12px; font-size: 15px; }
.auth-greeting a.small { font-size: 12px; margin-left: 8px; color: var(--muted); }
.auth-sub { margin-top: 14px; text-align: center; font-size: 13px; }
.auth-sub a { color: var(--muted); }
.muted.small { font-size: 12px; }

/* ── Agenda / mini-calendar view ──────────────────────────────────────────── */

/* View toggle button group in the calendar toolbar */
.cal-view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cal-view-toggle button,
.cal-view-toggle a {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 0 12px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.cal-view-toggle button:last-child,
.cal-view-toggle a:last-child { border-right: 0; }
.cal-view-toggle button.active {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}

/* "Today" ring on grid cells */
.calendar-day.cal-today > .day-num {
  background: var(--accent, #2563eb);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

/* ── Mini calendar strip (agenda view) ──────────────────────────────────── */
.cal-mini {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px 6px;
  background: #f9fafb;
}
.cal-mini-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  letter-spacing: .04em;
}
.cal-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.cal-mini-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 3px 2px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
  min-height: 46px;
}
.cal-mini-day:hover { background: #eef1f7; }
.cal-mini-num {
  font-size: 13px;
  font-weight: 600;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
}
.cal-mini-day.other-month .cal-mini-num { color: #b0b8c5; font-weight: 400; }
.cal-mini-day.is-today .cal-mini-num {
  background: var(--accent, #2563eb);
  color: #fff;
  font-weight: 700;
}
.cal-mini-day.is-selected:not(.is-today) .cal-mini-num {
  background: #dde8ff;
  color: var(--accent, #2563eb);
  font-weight: 700;
}
/* Room conflict on this day — see .calendar-day.has-conflict above. */
.cal-mini-day.has-conflict { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.cal-mini-day.has-conflict .cal-mini-num { box-shadow: inset 0 0 0 2px var(--danger); }
.cal-mini-dots {
  display: flex;
  gap: 2px;
  min-height: 6px;
  margin-top: 3px;
  justify-content: center;
}
.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  font-style: normal;
}
.cal-dot-up   { background: #f59e0b; }
.cal-dot-down { background: #6366f1; }
.cal-dot-both { background: #10b981; }

/* ── Day agenda panel ────────────────────────────────────────────────────── */
.cal-day-agenda { border-top: 0; }
.cal-day-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}
.cal-day-header h2 {
  flex: 1 1 0;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}
.icon-btn:hover { background: #f4f6fa; }

.cal-venue-section { border-bottom: 1px solid var(--line); }
.cal-venue-section:last-child { border-bottom: 0; }
.cal-venue-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #f7f8fa;
  border-bottom: 1px solid var(--line);
}
.cal-venue-head h3 {
  flex: 1 1 0;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.cal-venue-head .status-dot { width: 10px; height: 10px; flex-shrink: 0; margin: 0; }
.cal-new-btn { flex-shrink: 0; }

.cal-agenda-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
  min-height: 54px;
}
.cal-agenda-row:last-child { border-bottom: 0; }
.cal-agenda-row:hover { background: #f6f8fc; }
/* Room conflict — see .calendar-day.has-conflict above. */
.cal-day-header-conflict { background: color-mix(in srgb, var(--danger) 8%, #fff); }
.cal-day-conflict-flag {
  margin: 0;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.cal-agenda-row-conflict { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.cal-agenda-row-conflict:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.cal-agenda-conflict-icon { color: var(--danger); font-size: 12px; }
.cal-agenda-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.cal-agenda-title {
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-available { padding: 10px 16px; }
.cal-available .program-night { display: inline-flex; width: 100%; justify-content: center; }

/* Hide view-mode label text on very narrow toolbars */
@media (max-width: 480px) { .cal-view-label { display: none; } }

/* Quick-create event modal — opened from topbar + button and calendar days. */
.quick-create-blank-fields {
  border: 0;
  padding: 0;
  margin: 0;
  display: contents;
}
.quick-create-blank-fields[hidden] { display: none; }
.quick-create-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}
.quick-create-actions .primary {
  background: var(--accent, #2563eb);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
}
.quick-create-actions .primary:disabled { opacity: .55; cursor: default; }
.quick-create-actions .secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid var(--line, #e3e4e8);
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}

/* Credential-setup modal — shown after sign-in for accounts with no
   passkey/password (until they set one or opt out). */
.credential-setup-card { width: min(640px, 100%); }
.credential-setup-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 14px;
}
@media (max-width: 560px) {
  .credential-setup-options { grid-template-columns: 1fr; }
}
.credential-setup-option {
  border: 1px solid var(--line, #e3e4e8);
  border-radius: 8px;
  padding: 14px;
  background: #fafbfd;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.credential-setup-option h3 { font-size: 14px; margin: 0; display: flex; align-items: center; gap: 8px; }
.credential-setup-option form { margin: 0; }
.credential-setup-option .primary.block {
  margin-top: auto;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.credential-setup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line, #e3e4e8);
  padding-top: 14px;
}
.credential-setup-footer .secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid var(--line, #e3e4e8);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: auto; }

/* Account settings panel */
.account-section { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 22px; }
.account-section:last-child { border-bottom: none; margin-bottom: 0; }
.account-section h2 { font-size: 16px; margin-bottom: 14px; }
.passkey-list { display: grid; gap: 8px; margin-bottom: 14px; }
.passkey-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, #f9fafb);
}
.passkey-item-info { flex: 1; }
.passkey-item-name { font-weight: 700; font-size: 14px; }
.passkey-item-meta { color: var(--muted); font-size: 12px; }
.stack { display: grid; gap: 14px; }
.error-text { color: var(--danger); }
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  z-index: 30;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
  border-radius: 8px;
  padding: 12px 14px;
  background: #101318;
  color: #fff;
  box-shadow: var(--shadow);
  font-weight: 760;
}
.toast.error { background: var(--danger); }
.toast-message { flex: 1; }
.toast-close {
  flex: none;
  margin: -4px -4px 0 0;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  opacity: 0.7;
  cursor: pointer;
}
.toast-close:hover { opacity: 1; }
.toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
/* ── Public event landing page (pb-public-event-page) ─────────────────────
   Dark, gig-poster-flavored layout: hero (flyer / vitals / sticky ticket
   card) over a three-up info grid (lineup, about, venue). Fully self
   contained under the .pev namespace — none of these classes are reused
   anywhere else in the app — except .tkp-* (the ticket purchase widget,
   which only ever mounts inside .pev-ticket-card) and .event-description
   (shared markdown-rendering rules also used elsewhere, restyled for dark
   here via the `.pev` ancestor scope below). */
.public-body { margin: 0; background: #0a0e14; color: #eef2f6; }

.pev {
  --pev-bg: #0a0e14;
  --pev-panel: #131a24;
  --pev-panel-2: #171f2b;
  --pev-border: rgba(255, 255, 255, 0.1);
  --pev-cyan: #2fd8e8;
  --pev-gold: #f4c44a;
  --pev-text: #eef2f6;
  --pev-muted: #94a1b5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pev-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 14px clamp(20px, 4vw, 64px);
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pev-border);
}
.pev-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 18px; }
.pev-brand-panic { color: #fff; }
.pev-brand-chip {
  color: var(--pev-cyan);
  border: 1px solid var(--pev-cyan);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Full-bleed: fluid edge padding instead of a hard max-width, so the page
   fills the viewport on a wide desktop monitor instead of floating in a
   narrow centered column. */
.pev-main { width: 100%; margin: 0; padding: 28px clamp(20px, 4vw, 64px) 56px; flex: 1; }

/* Hero: media / copy / sticky ticket card. Flexbox rather than a fixed-track
   grid so the copy column absorbs the extra space on ultra-wide screens
   (flex-grow 3) while media/ticket stay sane, capped widths — and so the
   responsive reflow below is just basis/wrap changes, no named grid areas. */
.pev-hero { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.pev-media { flex: 1 1 320px; max-width: 420px; display: grid; gap: 14px; }
.pev-flyer {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--pev-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.pev-flyer-placeholder { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 18px; }
.pev-flyer-placeholder paint-splat { position: absolute; inset: 0; }
.pev-flyer-placeholder-title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
/* "Share This Event" card — sits in the copy column just below the facts/
   tags (replaced a QR code that pointed back at the very page showing it —
   never actionable for a visitor already there). Real share-intent URLs for
   Facebook/X/Reddit/WhatsApp; Instagram has no such URL, so that button uses
   the native OS share sheet (see the click handler in PublicEventPage).
   Capped width + auto margins so it reads as a centered block rather than
   stretching across the (much wider on desktop) copy column. */
.pev-share-card { max-width: 440px; margin: 0 auto 20px; background: var(--pev-panel); border: 1px solid var(--pev-border); border-radius: 12px; padding: 16px; }
.pev-share-title { margin: 0 0 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pev-muted); text-align: center; }
.pev-share-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pev-share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pev-panel-2);
  border: 1px solid var(--pev-border);
  color: var(--pev-text);
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
}
.pev-share-btn:hover { border-color: var(--pev-cyan); color: var(--pev-cyan); }
.pev-share-btn.is-copied { border-color: var(--pev-cyan); color: var(--pev-cyan); }

.pev-copy { flex: 3 1 420px; min-width: 300px; }
.pev-eyebrow { margin: 0 0 8px; color: var(--pev-cyan); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
.pev-title { margin: 0 0 10px; font-size: clamp(28px, 3.6vw, 46px); font-weight: 900; line-height: 1.06; letter-spacing: -0.01em; text-transform: uppercase; }
.pev-with { margin: 0 0 20px; color: var(--pev-muted); font-size: 16px; }

/* Facts row: icon-over-text tiles divided by hairlines on desktop/tablet
   (matches the reference mockup); collapses to a plain icon-left-text-right
   stacked list on mobile, where columns would be too cramped. */
.pev-facts { list-style: none; margin: 0 0 20px; padding: 20px 0; border-top: 1px solid var(--pev-border); border-bottom: 1px solid var(--pev-border); display: flex; flex-wrap: wrap; justify-content: center; text-transform: uppercase; }
.pev-facts li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 22px; border-left: 1px solid var(--pev-border); font-size: 13.5px; line-height: 1.35; max-width: 170px; }
.pev-facts li:first-child { border-left: 0; }
.pev-facts i { color: var(--pev-cyan); font-size: 17px; }

.pev-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pev-tag {
  border: 1px solid var(--pev-border);
  color: var(--pev-text);
  background: var(--pev-panel-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pev-external-tickets {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pev-gold);
  color: #14110a;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 9px;
  text-decoration: none;
}
.pev-external-tickets:hover { background: #ffd469; }

.pev-ticket-card {
  flex: 1 1 360px;
  max-width: 400px;
  position: sticky;
  top: 88px;
  background: var(--pev-panel);
  border: 1px solid var(--pev-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
/* No ticket types on sale here (external ticketing, or none configured) and
   no post-checkout receipt to show — the widget renders nothing, so don't
   leave an empty bordered box floating in the layout. */
.pev-ticket-card:has(> pb-ticket-purchase:empty) { display: none; }

/* Info grid: lineup / about / venue */
.pev-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.pev-info-card { background: var(--pev-panel); border: 1px solid var(--pev-border); border-radius: 14px; padding: 20px; min-width: 0; }
.pev-info-card h2 { margin: 0 0 16px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pev-cyan); display: flex; align-items: center; gap: 8px; }
.pev-info-card h2 i { font-size: 13px; }

.pev-lineup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pev-lineup-list li { display: flex; align-items: center; gap: 12px; }
.pev-lineup-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pev-panel-2);
  border: 1px solid var(--pev-border);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--pev-cyan);
  flex: 0 0 auto;
}
.pev-lineup-body { display: grid; min-width: 0; }
.pev-lineup-body strong { font-size: 14.5px; overflow-wrap: anywhere; }
.pev-lineup-body span { font-size: 12.5px; color: var(--pev-muted); }

.pev-venue-name { font-weight: 800; margin: 0 0 4px; }
.pev-venue-map { height: 180px; margin: 12px 0 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--pev-border); background: var(--pev-panel-2); }
.pev-venue-map:empty { display: none; }
.pev-directions { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0; color: var(--pev-cyan); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.pev-directions:hover { text-decoration: underline; }

.pev-footer { border-top: 1px solid var(--pev-border); padding: 22px clamp(20px, 4vw, 64px); text-align: center; color: var(--pev-muted); font-size: 13px; }
.pev-footer strong { color: var(--pev-text); }

/* Markdown-rendered public event description, restyled for the dark page */
.pev .muted { color: var(--pev-muted); }
.pev .event-description { color: var(--pev-text); font-size: 15px; line-height: 1.65; }
.event-description { margin: 0; }
.event-description p { margin: 0 0 14px; }
.event-description p:last-child { margin-bottom: 0; }
.event-description h2.md-heading { font-size: 22px; margin: 22px 0 8px; }
.event-description h3.md-heading { font-size: 18px; margin: 18px 0 6px; }
.event-description ul.md-list,
.event-description ol.md-list { margin: 0 0 14px 22px; padding: 0; line-height: 1.7; }
.event-description a { color: var(--pev-cyan); text-decoration: underline; }

@media (max-width: 1080px) {
  /* Media + copy still share a row (their combined basis comfortably fits);
     the ticket card's 100% basis forces it onto its own full-width row
     underneath via the wrap, no named areas needed. */
  .pev-media { flex-basis: 260px; max-width: 320px; }
  .pev-copy { flex-basis: 300px; }
  .pev-ticket-card { flex-basis: 100%; max-width: none; position: static; }
}
@media (max-width: 720px) {
  .pev-main { padding: 20px clamp(16px, 5vw, 28px) 40px; }
  .pev-hero { flex-direction: column; gap: 22px; }
  .pev-media, .pev-copy, .pev-ticket-card { max-width: none; width: 100%; }
  /* Real flyer art is almost always a portrait poster — forcing it into a
     landscape 16/11 crop here was chopping off large chunks of the artwork
     (price, support acts, venue details often live near the bottom). Let the
     image keep its natural proportions instead, just capped so an unusually
     tall upload can't push the page too far. The placeholder has no art to
     crop, so it keeps its fixed box (falls back to the desktop 4/5 default). */
  img.pev-flyer { aspect-ratio: auto; max-height: 80vh; object-fit: contain; background: var(--pev-panel-2); }
  .pev-info-grid { grid-template-columns: 1fr; margin-top: 28px; }
  /* Icon-over-text tiles are too cramped on a phone-width screen — fall back
     to a plain icon-left-text-right stacked list instead, centered as a
     block on the page like the desktop tile row. */
  .pev-facts { flex-direction: column; align-items: center; gap: 12px; padding: 18px 0; }
  .pev-facts li { flex-direction: row; align-items: center; text-align: left; gap: 10px; padding: 0; border-left: 0; max-width: none; }
  /* iOS Safari auto-zooms the page when a focused input's font is under
     16px — bump just the buyer fields on mobile so tapping Name/Email/Phone
     doesn't yank the viewport in. */
  .tkp-buyer input { font-size: 16px; }
}

/* Public ticket purchase widget (pb-ticket-purchase) — only ever mounted
   inside .pev-ticket-card above, so it inherits the --pev-* palette. */
.tkp-title { margin: 0 0 14px; font-weight: 900; }
.tkp > .tkp-title {
  font-size: 15px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pev-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.tkp > .tkp-title::before, .tkp > .tkp-title::after {
  font: 900 13px/1 "Font Awesome 6 Free";
  content: "\f0e7";
  color: var(--pev-gold);
}
.tkp-receipt > .tkp-title { font-size: 19px; color: var(--pev-text); }
.tkp-list-label { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pev-muted); }
.tkp-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.tkp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1px solid var(--pev-border);
  border-radius: 10px;
  background: var(--pev-panel-2);
}
.tkp-row-out { opacity: 0.5; }
.tkp-info { grid-column: 1 / 2; display: grid; gap: 2px; min-width: 0; }
.tkp-name { font-weight: 800; font-size: 14px; }
.tkp-desc { font-size: 12.5px; color: var(--pev-muted); }
.tkp-price { grid-column: 2 / 3; grid-row: 1 / 2; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--pev-cyan); white-space: nowrap; }
.tkp-qty { grid-column: 1 / -1; justify-self: start; }
.tkp-soldout { font-size: 13px; color: var(--pev-muted); }

.tkp-stepper { display: inline-flex; align-items: center; border: 1px solid var(--pev-border); border-radius: 8px; overflow: hidden; background: var(--pev-bg); }
.tkp-step { width: 32px; height: 32px; border: 0; background: transparent; color: var(--pev-text); font-size: 16px; line-height: 1; cursor: pointer; }
.tkp-step:hover { background: rgba(255, 255, 255, 0.06); color: var(--pev-cyan); }
.tkp-qty-input {
  width: 44px;
  height: 32px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--pev-border);
  border-right: 1px solid var(--pev-border);
  background: transparent;
  color: var(--pev-text);
  font-weight: 700;
  -moz-appearance: textfield;
}
.tkp-qty-input::-webkit-inner-spin-button, .tkp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.tkp-buyer { display: grid; gap: 12px; margin: 18px 0; }
.tkp-buyer label { display: grid; gap: 6px; color: var(--pev-muted); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tkp-buyer input {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  background: var(--pev-bg);
  border: 1px solid var(--pev-border);
  color: var(--pev-text);
  border-radius: 8px;
  padding: 10px 12px;
}
.tkp-buyer input:focus { outline: none; border-color: var(--pev-cyan); }
.tkp-buyer .tkp-consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
.tkp-buyer .tkp-consent input { margin: 2px 0 0; padding: 0; accent-color: var(--pev-cyan); }
/* Private discount code entry. Intentionally understated — most buyers have
   no code, and the box shouldn't read as "you're missing a deal". */
.tkp-discount { margin: 0 0 4px; }
.tkp-discount-row { display: flex; gap: 8px; align-items: stretch; }
.tkp-discount-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--pev-bg);
  border: 1px solid var(--pev-border);
  color: var(--pev-text);
  border-radius: 8px;
  padding: 10px 12px;
}
.tkp-discount-row input::placeholder { letter-spacing: normal; text-transform: none; font-weight: 500; }
.tkp-discount-row input:focus { outline: none; border-color: var(--pev-cyan); }
.tkp-code-apply {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--pev-border);
  color: var(--pev-text);
  border-radius: 8px;
  padding: 0 16px;
  cursor: pointer;
}
.tkp-code-apply:hover { border-color: var(--pev-cyan); color: var(--pev-cyan); }
.tkp-discount-note { margin: 8px 0 0; font-size: 13px; }
.tkp-discount-ok { color: #7fd6a2; }
.tkp-discount-error { color: #ff8a8a; }
.tkp-discount-pending { color: var(--pev-muted); }
.tkp-code-clear {
  background: none;
  border: 0;
  padding: 0 0 0 6px;
  font: inherit;
  font-size: 12.5px;
  color: var(--pev-muted);
  text-decoration: underline;
  cursor: pointer;
}
.tkp-code-clear:hover { color: var(--pev-text); }

.tkp-error { color: #ff8a8a; margin: 0 0 12px; font-size: 13.5px; }
.tkp-footer { display: grid; gap: 10px; }
.tkp-total { display: none; }
.tkp [data-buy] {
  width: 100%;
  background: var(--pev-gold);
  color: #14110a;
  border: 0;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 10px;
  cursor: pointer;
}
.tkp [data-buy]:hover:not(:disabled) { background: #ffd469; }
.tkp [data-buy]:disabled { opacity: 0.4; cursor: not-allowed; }
.tkp-secure { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--pev-muted); display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Post-checkout receipt (shown inline after the provider redirects the buyer
   back here — see tickets-public.js pollReceipt()) */
.tkp-receipt {
  margin: 0 0 20px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(47, 216, 232, 0.08);
  border: 1px solid rgba(47, 216, 232, 0.35);
}
.tkp-ticket-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.tkp-ticket-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  background: var(--pev-panel-2);
  border-radius: 10px;
  padding: 12px;
}
.tkp-ticket-qr { width: 96px; height: 96px; border-radius: 6px; background: #fff; padding: 6px; }
.tkp-ticket-meta { display: grid; gap: 4px; min-width: 0; }
.tkp-ticket-meta strong { font-size: 14.5px; }
.tkp-ticket-code { font-variant-numeric: tabular-nums; color: var(--pev-muted); font-size: 12.5px; }
.tkp-ticket-meta a { color: var(--pev-cyan); }

/* Font Awesome icon sizing — nav, sidebar, topbar */
.side-nav a i,
.venue-switch i {
  font-size: 19px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.search > i {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: rgba(255,255,255,.5);
  pointer-events: none;
}
.icon-bubble i { font-size: 22px; }
.mobile-tabs a i { font-size: 22px; display: block; }

/* Legacy CSS-drawn icon base — kept for any remaining usages */
.icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
}
.icon.people:before, .icon.people:after { content: ""; position: absolute; border: 3px solid currentColor; border-radius: 50%; }
.icon.people:before { width: 9px; height: 9px; left: 2px; top: 2px; }
.icon.people:after { width: 13px; height: 13px; right: 1px; top: 6px; }
.icon.bars:before { content: ""; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 20px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 8px, currentColor 8px 11px, transparent 11px 16px, currentColor 16px 19px); }
.icon.gear { border: 3px solid currentColor; border-radius: 50%; }
.icon.dots:before { content: ""; position: absolute; top: 12px; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 9px 0 0 currentColor, 18px 0 0 currentColor; }

/* ── Desktop app shell ────────────────────────────────────────────────────
   Fixed to the viewport (100vw/100vh) so the shell never scrolls; only the
   content pane (and the nav rail, if it overflows) scroll. The footer is
   dropped here to maximize vertical space, and the sidebar can collapse to an
   icon-only rail via the topbar toggle. Mobile (≤860px) keeps its own layout. */
@media (min-width: 861px) {
  .app-shell {
    height: 100vh;
    min-height: 0;
    grid-template-rows: 92px minmax(0, 1fr);
    overflow: hidden;
  }
  .sidebar { grid-row: 1 / 3; overflow-y: auto; }
  /* overflow-anchor: none — the calendar's continuous-scroll grid manually
     compensates scrollTop when it prepends/prunes a month above the
     viewport (see event-views.js _adjustScroll); native scroll anchoring
     would otherwise apply its own correction on top of that, compounding
     into a much larger jump than intended. */
  .workspace { overflow-y: auto; min-height: 0; overflow-anchor: none; }
  .app-footer { display: none; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    opacity: .78;
    transition: opacity .15s;
  }
  .nav-toggle:hover { opacity: 1; }

  pb-page-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    gap: 2px;
  }

  /* Collapsed → icon-only rail. */
  .app-shell.nav-collapsed { grid-template-columns: 84px minmax(0, 1fr); }
  .nav-collapsed .sidebar { padding: 18px 12px; gap: 20px; justify-items: center; }
  .nav-collapsed .brand { justify-content: center; }
  .nav-collapsed .brand span:last-child,
  .nav-collapsed .side-card,
  .nav-collapsed .copyright { display: none; }
  .nav-collapsed .side-nav a,
  .nav-collapsed .venue-switch { font-size: 0; gap: 0; }
  .nav-collapsed .side-nav a i,
  .nav-collapsed .venue-switch i { font-size: 22px; }
  .nav-collapsed .side-nav a,
  .nav-collapsed .venue-switch {
    width: 58px;
    min-height: 58px;
    justify-content: center;
    padding: 0;
  }
  .nav-collapsed .side-nav a.active:before { left: -12px; }

  /* Collapsed rail: hide parent rows, flatten group children into an icon rail. */
  .nav-collapsed .nav-parent { display: none; }
  .nav-collapsed .nav-children { display: grid !important; gap: 4px; padding: 0; }
  .nav-collapsed .nav-children a {
    font-size: 0;
    gap: 0;
    width: 58px;
    min-height: 58px;
    justify-content: center;
    padding: 0;
  }
  .nav-collapsed .nav-children a i { font-size: 22px; }
  .nav-collapsed .nav-children a.active:before { left: -12px; }
}

@media (max-width: 1320px) {
  .app-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .sidebar { padding: 20px; }
  .brand { font-size: 29px; }
  .metric-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  .calendar-page .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline-board {
    grid-template-columns: repeat(8, minmax(190px, 1fr));
    overflow-x: auto;
    padding-bottom: 8px;
  }
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 94px minmax(0, 1fr); }
  .sidebar { padding: 18px 14px; gap: 20px; justify-items: center; }
  .brand { justify-content: center; }
  .brand span:last-child,
  .side-nav a,
  .venue-switch,
  .side-card,
  .copyright { font-size: 0; }
  .brand span:last-child, .side-card, .copyright { display: none; }
  .side-nav a i,
  .venue-switch i { font-size: 22px; }
  .side-nav a {
    width: 58px;
    min-height: 58px;
    justify-content: center;
    padding: 0;
    gap: 0;
  }
  .side-nav a.active:before { left: -14px; }
  .workspace { padding: 26px 24px 34px; }
  .topbar { padding: 0 24px; }
  .search { width: min(420px, 52vw); }
  .dashboard-grid, .overview-grid, .opp-panel-row-3 { grid-template-columns: 1fr; }
  .health-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calendar-grid {
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(132px, 1fr));
  }
}

@media (max-width: 860px) {
  .app-shell {
    display: block;
    min-height: 100vh;
    padding-bottom: 82px;
    background: #f4f5f7;
  }
  .search, .logout, .app-footer { display: none; }
  /* The drawer header carries the brand on mobile, so the topbar drops it and
     leads with the menu button instead (avoids a crowded, overflowing row). */
  .mobile-brand { display: none; }
  .topbar {
    min-height: 88px;
    padding: 14px 18px;
    justify-content: flex-end;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  /* ── Slide-in navigation drawer ──────────────────────────────────────────
     Reuses the desktop sidebar markup (full labelled nav + collapsible
     groups). Off-screen by default; slid in when .app-shell.drawer-open. */
  .drawer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-right: auto;           /* anchor left; push the actions to the right */
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 22px;
    flex: 0 0 auto;
  }
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 330px);
    padding: 18px 16px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 60;
    justify-items: stretch;
  }
  .app-shell.drawer-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 50px rgba(3, 7, 11, .55);
  }
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 11, .5);
    z-index: 50;
  }
  .app-shell.drawer-open .drawer-backdrop { display: block; }
  .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 20px;
  }
  /* Restore the full labelled nav inside the drawer (override the ≤1100 rail). */
  .sidebar .brand { justify-content: flex-start; font-size: 24px; padding-right: 46px; }
  .sidebar .brand span:last-child { display: inline; font-size: 24px; }
  .side-nav a {
    font-size: 16px;
    width: auto;
    min-height: 46px;
    justify-content: flex-start;
    padding: 0 12px;
    gap: 12px;
  }
  .side-nav a i { font-size: 18px; }
  .side-nav a.active:before { left: -16px; }
  .nav-parent-label { font-size: 15px; }
  .venue-switch {
    font-size: 14px;
    width: auto;
    gap: 10px;
    justify-content: flex-start;
  }
  .venue-switch i { font-size: 18px; }
  .copyright { display: none; }
  .workspace { padding: 18px; }
  h1 { font-size: 34px; }
  .page-head, .event-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .event-actions { flex-wrap: wrap; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .metric-card {
    min-height: 132px;
    padding: 16px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
  .metric-card strong { font-size: 38px; }
  .metric-card h3 { font-size: 16px; overflow-wrap: anywhere; }
  .metric-card p { font-size: 14px; }
  .icon-bubble { width: 46px; height: 46px; }
  .dashboard-grid, .overview-grid, .opp-panel-row-3 { grid-template-columns: 1fr; gap: 16px; }
  .calendar-page .filters { grid-template-columns: 1fr 1fr; gap: 10px; }
  .filter { min-height: 46px; padding: 0 12px; font-size: 14px; }
  .calendar-toolbar {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px;
  }
  .calendar-actions { justify-content: flex-start; flex-wrap: wrap; }
  .calendar-grid {
    display: grid;
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(128px, 1fr));
  }
  .calendar-day { min-height: 98px; }
  .pipeline-board {
    grid-template-columns: repeat(8, minmax(210px, 1fr));
    overflow-x: auto;
    margin-inline: -18px;
    padding: 0 18px 10px;
  }
  .event-summary {
    grid-template-columns: auto 1fr;
    grid-template-areas: "flyer facts" "stats stats";
    gap: 10px 14px;
  }
  .flyer { grid-area: flyer; }
  .facts-grid { grid-area: facts; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 0; }
  .event-stats { grid-area: stats; border-left: 0; padding-left: 0; padding-top: 8px; border-top: 1px solid var(--line); }
  .next-action {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .next-action-buttons { grid-column: 1 / -1; justify-self: stretch; }
  .next-action-buttons button { flex: 1; }
  .health-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-row, .schedule-row, .asset-row, .performer-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .row-form, .grid-form, .grid-form.compact {
    grid-template-columns: 1fr;
  }
  .workspace-tabs {
    margin-inline: -18px;
    padding-inline: 18px;
  }
  .tonight-page {
    display: grid;
    gap: 17px;
    padding: 0 0 26px;
    border-radius: 16px 16px 0 0;
    background: #f7f8fa;
    overflow: hidden;
  }
  .tonight-head { display: flex; gap: 24px; align-items: center; font-size: 30px; font-weight: 850; }
  .back-arrow { width: 26px; height: 26px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); }
  .today-card { padding: 18px; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 18px; }
  .today-card .icon-bubble { width: 80px; height: 80px; }
  .today-card h1 { font-size: 25px; overflow-wrap: anywhere; }
  .today-meta { display: grid; gap: 9px; color: #3f4651; font-size: 17px; }
  .today-status { display: flex; gap: 16px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; font-size: 15px; flex-wrap: wrap; }
  .next-action { border-color: #b7e2cc; background: #f2fbf6; grid-template-columns: 60px minmax(0, 1fr) 18px; padding: 20px; }
  .next-action .icon-bubble { width: 56px; height: 56px; background: var(--green); color: #fff; }
  .next-action h2 { margin: 0 0 9px; color: var(--green); font-size: 19px; text-transform: uppercase; }
  .next-action p { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 900; overflow-wrap: anywhere; }
  .mobile-panel { overflow: hidden; }
  .mobile-panel h2 { padding: 16px 24px; margin: 0; border-bottom: 1px solid var(--line); font-size: 28px; display: flex; justify-content: space-between; }
  .mobile-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 61px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 19px; }
  .mobile-row:last-child { border-bottom: 0; }
  .mobile-check { width: 31px; height: 31px; border: 2px solid #323841; border-radius: 5px; }
  .mobile-time { font-weight: 900; }
  .mobile-kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
  .mobile-kpi { min-height: 150px; display: grid; place-items: center; text-align: center; border-right: 1px solid var(--line); padding: 16px; }
  .mobile-kpi:last-child { border-right: 0; }
  .mobile-kpi strong { display: block; margin-top: 6px; font-size: 20px; }
  .mobile-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 104px;
    background: #05080c;
    color: rgba(255,255,255,.84);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    z-index: 12;
  }
  .mobile-tabs a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    font-size: 17px;
  }
  .mobile-tabs a.active {
    color: var(--red);
    background: rgba(255,255,255,.08);
    border-radius: 11px;
    margin: 10px;
  }

  /* ── Agenda view mobile tweaks ─────────────────────────────────────────── */
  .cal-mini { padding: 8px 10px 4px; }
  .cal-mini-day { min-height: 42px; }
  .cal-mini-num { width: 26px; height: 26px; font-size: 12px; }
  .cal-day-header { padding: 10px 14px; }
  .cal-day-header h2 { font-size: 13px; }
  .cal-agenda-row { padding: 11px 14px; grid-template-columns: 68px 1fr auto; gap: 8px; }
  .cal-agenda-title { font-size: 14px; }
  .cal-venue-head { padding: 8px 14px; }
}

@media (max-width: 560px) {
  .topbar { min-height: 92px; padding: 14px 18px; gap: 14px; }
  .mobile-brand { font-size: 28px; gap: 9px; }
  .mobile-brand .brand-mark { width: 46px; height: 46px; }
  .bell { transform: scale(.9); }
  .avatar { width: 46px; height: 46px; }
  .workspace { padding: 14px; }
  h1 { font-size: 30px; }
  .subtle { font-size: 16px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card {
    min-height: 0;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
  }
  .metric-card .icon-bubble { grid-row: auto; }
  .metric-card p { grid-column: 2 / -1; }
  .attention-card {
    grid-template-columns: 44px minmax(0, 1fr) 12px;
    padding: 16px;
    gap: 12px;
  }
  .panel { border-radius: 7px; }
  .section-head {
    align-items: flex-start;
    gap: 10px;
  }
  .section-head .button, .section-head button { flex: 0 0 auto; }
  .data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table td {
    display: block;
    width: 100%;
  }
  .data-table thead { display: none; }
  .data-table tr {
    border-top: 1px solid var(--line);
    padding: 12px 16px;
  }
  .data-table td {
    border: 0;
    padding: 6px 0;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  .data-table td:before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .legend { gap: 12px; }
  .calendar-page .filters { grid-template-columns: 1fr; }
  .calendar-grid { grid-template-columns: repeat(7, minmax(116px, 1fr)); }
  .calendar-day { min-height: 88px; padding: 9px; }
  .weekday { min-height: 30px; }
  .program-night { font-size: 11px; }
  .event-summary { padding: 10px; }
  .facts-grid, .health-row, .mobile-kpis { grid-template-columns: 1fr; }
  .event-stats { flex-direction: column; align-items: flex-start; gap: 6px; }
  .next-action { grid-template-columns: 42px minmax(0, 1fr); padding: 14px; }
  .today-card { grid-template-columns: 1fr; text-align: left; }
  .today-card .icon-bubble { width: 68px; height: 68px; }
  .today-card h1 { font-size: 24px; }
  .tonight-head { font-size: 28px; }
  .mobile-panel h2 { font-size: 22px; padding: 14px 16px; }
  .mobile-row { font-size: 17px; padding: 0 16px; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .mobile-kpi { border-right: 0; border-bottom: 1px solid var(--line); min-height: 104px; }
  .mobile-kpi:last-child { border-bottom: 0; }
  .mobile-tabs { height: 88px; }
  .mobile-tabs a { font-size: 13px; }
  .mobile-tabs a i { font-size: 19px; }
  .workspace-tabs {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

@media (max-width: 860px) {
  .tonight-page[aria-hidden="true"] { display: none !important; }
}

/* ── Admin pages ──────────────────────────────────────────────────────── */
.admin-tabs { margin-bottom: 22px; }
.admin-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-tabs i { font-size: 14px; }
.admin-table th, .admin-table td { vertical-align: top; }
.admin-table tr.muted-row td { color: var(--muted, #5a606b); }
.admin-table .row-actions {
  white-space: nowrap;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.admin-table small.muted { font-size: 12px; }

/* ── DB Browser ───────────────────────────────────────────────────────────
   Resizable split-pane inspector: a table list on the left, the selected
   table's rows filling the right, and (once a row is clicked) that right
   pane splitting vertically into a rows strip on top and a fieldset-style
   record detail below. Both the sidebar width and the rows/detail split are
   drag-resizable, mouse-driven the same way as a desktop file browser. */
pb-admin-db-browser { display: block; }

.dbx {
  display: flex;
  align-items: stretch;
  height: calc(100vh - 230px);
  min-height: 480px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dbx-tables {
  display: flex;
  flex-direction: column;
  width: 260px;
  min-width: 180px;
  max-width: 440px;
  flex-shrink: 0;
  position: relative;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.dbx-tables-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 760;
  font-size: 14px;
  color: var(--ink);
  flex-shrink: 0;
}
.dbx-tables-head i { color: var(--muted); }
.dbx-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--soft);
  border-radius: 999px;
  padding: 2px 9px;
}
.dbx-table-items { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.dbx-table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: 1px solid transparent;
  color: var(--ink);
  font-weight: 650;
  font-size: 13.5px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.dbx-table-item:hover { background: var(--soft); }
.dbx-table-item.active { background: var(--ink); color: #fff; }
.dbx-table-item.active .dbx-table-rows { color: rgba(255, 255, 255, .7); }
.dbx-table-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbx-table-rows { flex-shrink: 0; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.dbx-none { padding: 14px; color: var(--muted); font-size: 13px; }

/* Sidebar width drag handle */
.dbx-resize-v {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
}
.dbx-resize-v:hover, .dbx-resize-v.resizing { background: var(--line); }

.dbx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dbx-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
}
.dbx-empty i { font-size: 34px; color: var(--line); }

.dbx-split { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dbx-rows-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dbx-split.has-detail .dbx-rows-pane { flex: 0 0 auto; height: 55%; }

/* Rows/detail split drag handle */
.dbx-resize-h {
  height: 7px;
  margin-top: -4px;
  flex-shrink: 0;
  cursor: row-resize;
  position: relative;
  z-index: 5;
  background: transparent;
}
.dbx-resize-h:hover, .dbx-resize-h.resizing { background: var(--line); }

.dbx-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.dbx-toolbar-title { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dbx-toolbar-title i { color: var(--muted); }
.dbx-toolbar-actions { display: flex; align-items: center; gap: 14px; }
.dbx-download-menu .print-menu-items button { display: flex; align-items: center; gap: 8px; }
.dbx-pager { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.dbx-range { white-space: nowrap; }
.dbx-page-num { white-space: nowrap; font-weight: 700; color: var(--ink); }
.dbx-pager button { padding: 5px 8px; }

.dbx-rows-scroll { flex: 1; min-height: 0; overflow: auto; }
.dbx-data { font-size: 13px; }
.dbx-data th, .dbx-data td { white-space: nowrap; }
.dbx-data thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; }
.dbx-data thead tr.dbx-filter-row th { position: sticky; z-index: 1; padding: 6px 10px; border-top: 0; }
.dbx-filter-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--ink);
}
.dbx-filter-input:focus { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }
.dbx-nomatch { color: var(--muted); text-align: center; padding: 18px; white-space: normal; }
.dbx-pk { color: var(--amber); margin-left: 4px; font-size: 11px; }
.dbx-null { color: var(--muted); }
.dbx-nulltag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--muted);
  background: var(--soft);
  border-radius: 4px;
  padding: 1px 6px;
}
.dbx-row { cursor: pointer; transition: background 120ms; }
.dbx-row:hover td { background: var(--bg); }
.dbx-row.selected td { background: #eaf1ff; }
.dbx-loading { display: flex; align-items: center; gap: 8px; padding: 24px; color: var(--muted); }

/* ── Detail pane (fieldset-style record inspector) ── */
.dbx-detail-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.dbx-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  flex-shrink: 0;
}
.dbx-detail-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.dbx-detail-title i { color: var(--muted); }
.dbx-detail-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 16px; }

.dbx-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px 16px 16px;
  margin: 0;
  background: var(--panel);
}
.dbx-fieldset legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.dbx-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px 22px;
  padding-top: 10px;
}
.dbx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dbx-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 760;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}
.dbx-field-type { font-weight: 600; text-transform: none; letter-spacing: 0; color: #b7bec9; font-size: 11px; }
.dbx-field-value {
  font-size: 14px;
  color: var(--ink);
  word-break: break-word;
  white-space: pre-wrap;
}
.dbx-field.is-null .dbx-field-value { color: var(--muted); }

@media (max-width: 860px) {
  .dbx { flex-direction: column; height: auto; min-height: 0; }
  .dbx-tables { width: 100% !important; max-width: none; max-height: 240px; border-right: none; border-bottom: 1px solid var(--line); }
  .dbx-resize-v { display: none; }
  .dbx-split.has-detail .dbx-rows-pane { height: 320px !important; }
  .dbx-resize-h { display: none; }
  .dbx-fields { grid-template-columns: 1fr; }
}

/* ── DB History (audit log + undo/redo) ─────────────────────────────────────── */
.dbh-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.dbh-filters select, .dbh-filters input {
  font: inherit; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink);
}
.dbh-filters input { min-width: 160px; }
.dbh-pager { padding: 8px 16px; border-top: 1px solid var(--line); justify-content: flex-end; flex-shrink: 0; }
.dbh-table td:last-child { white-space: normal; }
.dbh-table td:nth-child(6) { white-space: normal; max-width: 320px; }

.dbh-meta { display: grid; gap: 6px; padding: 14px 16px; font-size: 13px; border-bottom: 1px solid var(--line); }
.dbh-meta strong { color: var(--muted); font-weight: 700; margin-right: 6px; }

.dbh-sql { margin: 0 16px 16px; }
.dbh-sql summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 0; }
.dbh-sql-pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  max-height: 260px;
  overflow: auto;
}

.dbh-actions { padding: 4px 16px 20px; }

.dbh-diff td { white-space: normal; }
.dbh-before { color: var(--danger); text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, .4); }
.dbh-after { color: #0c7a3c; font-weight: 600; }

.badge.dbh-insert { background: #d3f1df; color: #0c7a3c; }
.badge.dbh-update { background: #d9ebff; color: #1466bd; }
.badge.dbh-delete { background: #fde2e1; color: #b42318; }
.badge.dbh-gray   { background: #eef0f3; color: #5a606b; }

@media (max-width: 860px) {
  .dbh-filters { flex-direction: column; }
  .dbh-filters select, .dbh-filters input { width: 100%; box-sizing: border-box; }
}

/* Lightweight modal for edit dialogs (Users / Staff / Templates) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 17, 22, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 18px;
  overflow-y: auto;
}
.modal-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  width: min(640px, 100%);
  overflow: hidden;
}
.modal-card.wide { width: min(820px, 100%); }
/* Same hazard as `.ticketing [hidden]` below: the global `label { display: grid }`
   (and .grid-form's flex/grid children) are author rules, so they beat the UA
   `[hidden] { display: none }` and a toggled-off field would stay visible.
   Modals are appended to <body>, outside any panel scope, so they need their
   own guard — otherwise conditionally-shown fields (e.g. the percent/amount
   swap in the discount-code editor) silently do nothing. */
.modal-card [hidden] { display: none !important; }
.modal-card .section-head { background: #f7f8fb; border-bottom: 1px solid var(--line, #e3e4e8); }
.modal-card form { padding: 18px 22px 22px; }
.modal-card textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Recurring-series conflict-resolution dialog (EventRecurrencePanel,
   event-workspace.js) — one row per generated date, conflicted ones get a
   highlighted background plus a resolution <select>. */
.recurrence-conflict-table tr[data-conflict] { background: rgba(217, 119, 6, 0.1); }
.recurrence-conflict-table select[data-resolution] { width: 100%; min-width: 160px; }

/* ── Image lightbox ───────────────────────────────────────────────────── */
body.lightbox-open { overflow: hidden; }
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 9, 12, 0.92);
  cursor: zoom-out;
  animation: lightbox-fade 0.12s ease-out;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.lightbox-close {
  position: fixed;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Event staffing ───────────────────────────────────────────────────── */
.staffing-body { padding: 12px 18px 18px; }
.staffing-section + .staffing-section { margin-top: 14px; }
.staffing-day + .staffing-day { margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--line); }
.staffing-day-head {
  font-size: 15px; margin: 0 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.staffing-day-head .muted { font-weight: 400; font-size: 12px; margin-left: 8px; }
.staffing-row {
  align-items: center;
  position: relative;
  padding-bottom: 14px;
}
.staffing-row .staffing-contact {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 12px;
}
.staffing-add {
  background: #fafafa;
  border-top: 1px dashed var(--line, #e3e4e8);
  margin-top: 14px;
  padding-top: 12px;
}
.staffing-totals { font-size: 13px; }

/* ── Help page ─────────────────────────────────────────────────────────── */
.help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 50%;
  color: var(--muted, #5a606b);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
  transition: background-color .12s ease, color .12s ease;
}
.help-link:hover,
.help-link:focus-visible {
  background: rgba(0,0,0,.06);
  color: var(--red, #c0392b);
  outline: none;
}
.help-link i { font-size: 14px; }

.help-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.help-toc {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line, #e3e4e8);
  border-radius: 8px;
  padding: 14px 12px;
  font-size: 14px;
}
.help-toc-group + .help-toc-group { margin-top: 14px; }
.help-toc-group h4 {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--muted, #5a606b);
}
.help-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.help-toc a {
  display: block;
  padding: 5px 8px;
  border-radius: 4px;
  color: #1f2230;
  text-decoration: none;
  line-height: 1.3;
}
.help-toc a:hover { background: rgba(0,0,0,.04); }
.help-toc a.active {
  background: rgba(192,57,43,.08);
  color: var(--red, #c0392b);
  font-weight: 700;
}

.help-content { padding: 22px 28px; }
.help-section {
  scroll-margin-top: 90px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line, #e3e4e8);
}
.help-section:last-child { border-bottom: 0; margin-bottom: 0; }
.help-section h2 {
  font-size: 24px;
  margin: 0 0 12px;
  line-height: 1.25;
}
.help-section h3 {
  font-size: 16px;
  margin: 18px 0 8px;
  letter-spacing: 0.01em;
}
/* Sub-level inside a long h3 topic (e.g. the discount-code walkthroughs).
   Sits clearly below h3 rather than defaulting to near-body-size bold. */
.help-section h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7280);
  margin: 16px 0 6px;
}
.help-section p,
.help-section li { line-height: 1.55; }
.help-section ul,
.help-section ol { margin: 8px 0 12px 22px; padding: 0; }
.help-section li { margin-bottom: 4px; }
.help-section code {
  background: #f4f5f8;
  border: 1px solid var(--line, #e3e4e8);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 90%;
}
.help-section a { color: var(--red, #c0392b); text-decoration: underline; }
.help-shot {
  margin: 16px 0 18px;
}
.help-shot img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  border: 1px solid var(--line, #e3e4e8);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(20, 22, 28, .10);
}
.help-shot figcaption {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--muted, #6b7280);
  font-style: italic;
}
/* Callout tip box in help content */
.help-section .help-tip {
  background: #f0f7ff;
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
}
/* Data table in help content (private event status table, etc.) */
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 12px 0 18px;
}
.help-table th {
  text-align: left;
  padding: 8px 12px;
  background: #f4f5f8;
  border: 1px solid var(--line, #e3e4e8);
  font-weight: 700;
}
.help-table td {
  padding: 8px 12px;
  border: 1px solid var(--line, #e3e4e8);
  vertical-align: top;
  line-height: 1.45;
}
.help-table tr:nth-child(even) td { background: #fafafa; }
.help-section .help-back {
  margin-top: 14px;
  font-size: 13px;
}
.help-section .help-back a {
  color: var(--muted, #5a606b);
  text-decoration: none;
}
.help-section .help-back a:hover { color: var(--red, #c0392b); }

@media (max-width: 1100px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-toc {
    position: static;
    max-height: none;
  }
}


/* ── Contract / Deal Builder ──────────────────────────────────────────────── */
.contract-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.4fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}
.contract-layout .panel { margin: 0 0 16px; }
.contract-h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Deal-terms form */
.contract-deal-form .grid-form { padding: 0 16px 12px; }
.contract-fieldset { border-top: 1px solid var(--line); }
.contract-fieldset > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; }
.contract-fieldset > summary::-webkit-details-marker { display: none; }
.contract-fieldset > summary::before { content: "▸"; margin-right: 8px; color: var(--muted); }
.contract-fieldset[open] > summary::before { content: "▾"; }
.contract-newvar { padding: 0 16px 12px; border-top: 1px dashed var(--line); margin-top: 8px; }
.contract-save-row { display: flex; align-items: center; gap: 12px; }
.autosave-status { transition: opacity .3s; }

/* Preview document */
.contract-preview {
  background: #fff;
  padding: 28px 32px;
  max-height: 72vh;
  overflow: auto;
}
.contract-doc, .contract-pdf-holder .contract-doc { color: #111; font-family: Georgia, "Times New Roman", serif; line-height: 1.55; }
.contract-doc-head h1 { font-size: 22px; margin: 0 0 4px; }
.contract-doc-sub { color: #555; margin: 0 0 16px; font-style: italic; }
.contract-summary { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 13px; }
.contract-summary caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
.contract-summary th { text-align: left; width: 42%; padding: 3px 8px; color: #444; font-weight: 400; border-bottom: 1px solid #eee; }
.contract-summary td { padding: 3px 8px; border-bottom: 1px solid #eee; }
.contract-section { margin: 0 0 18px; }
.contract-section h2 { font-size: 15px; margin: 0 0 6px; }
.contract-section-body p { margin: 0 0 8px; text-align: justify; }
.contract-token-missing { background: #ffe2a8; color: #7a4b00; padding: 0 4px; border-radius: 3px; font-style: italic; }
/* Clickable tokens and missing-field links */
.contract-token-missing[data-token] { cursor: pointer; }
.contract-token-missing[data-token]:hover { background: #ffcc66; text-decoration: underline; }
.missing-field-link {
  cursor: pointer;
  transition: color .12s;
}
.missing-field-link:hover { color: var(--blue); text-decoration: underline; }
/* Inline-editable section bodies */
.contract-section-body[contenteditable] { cursor: text; border-radius: 4px; transition: outline .12s, background .12s; }
.contract-section-body[contenteditable]:hover { outline: 1px dashed #c8d5e8; }
.contract-section-body[contenteditable]:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  background: #fafcff;
  padding: 2px 4px;
}
.contract-section-body[contenteditable][data-dirty]:not(:focus)::after {
  content: ' ●';
  color: #f5b21b;
  font-size: 10px;
  vertical-align: middle;
}
/* Inline-editable contract title */
.contract-title-edit[contenteditable] { cursor: text; border-radius: 4px; display: inline-block; transition: outline .12s, background .12s; }
.contract-title-edit[contenteditable]:hover { outline: 1px dashed #c8d5e8; }
.contract-title-edit[contenteditable]:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  background: #fafcff;
  padding: 0 4px;
}
/* Field flash highlight — triggered on focusDealField (contracts.js) and on
   fields a realtime invalidation just updated in place (event-workspace.js's
   EventDetailsForm._applyRemoteData(), see docs/realtime-data.md). */
@keyframes field-highlight {
  0%   { box-shadow: 0 0 0 0   rgba(66,133,244,.55); }
  50%  { box-shadow: 0 0 0 6px rgba(66,133,244,.22); }
  100% { box-shadow: 0 0 0 0   rgba(66,133,244,0); }
}
.field-highlight { animation: field-highlight 1.2s ease-out; }

/* Status track */
.contract-status-track { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.contract-step { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.contract-step.done { background: #d7eede; color: var(--green); }
.contract-step.current { outline: 2px solid var(--blue); color: var(--ink); }

/* Signature panel */
.contract-signers { list-style: none; margin: 0 0 12px; padding: 0; }
.contract-signer { padding: 8px 0; border-bottom: 1px solid var(--line, #eee); display: flex; flex-direction: column; gap: 2px; }
.contract-signer:last-child { border-bottom: 0; }
.contract-signer-main { display: flex; align-items: baseline; gap: 6px; }
.contract-audit { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line, #eee); font-size: 12px; max-height: 220px; overflow-y: auto; }
.contract-audit li { padding: 3px 0; }
[data-panel="signing"] .inline-actions { margin-top: 6px; }

/* Review / warnings */
.contract-missing-list, .contract-risk-list { font-size: 13px; margin-top: 8px; }
.contract-missing-list ul, .contract-risk-list ul { margin: 4px 0 0; padding-left: 18px; }
.contract-missing-list strong { color: var(--amber); }
.contract-risk-list strong { color: var(--danger); }
.contract-ok .contract-h3 { color: var(--green); }

/* Risk badges */
.risk-badge { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.risk-low { background: #e7f1fb; color: var(--blue); }
.risk-medium { background: #fbf0d6; color: var(--amber); }
.risk-high { background: #fbe0de; color: var(--danger); }

/* Module list */
.contract-module-list { list-style: none; margin: 0; padding: 0; }
.contract-module-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  column-gap: 6px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  transition: background 0.1s;
}
.contract-module-list.is-manage li {
  grid-template-columns: 18px 1fr auto auto;
}
.contract-module-list li.excluded { opacity: .5; }
.contract-module-list li.dragging { opacity: 0.4; }
.contract-module-list li.drag-over { background: var(--soft); outline: 2px dashed var(--blue); outline-offset: -2px; border-radius: 4px; }
.contract-mod-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: grab;
  font-size: 11px;
  padding-top: 3px;
  opacity: 0.3;
  transition: opacity 0.12s;
}
.contract-mod-drag:active { cursor: grabbing; }
.contract-module-list li:hover .contract-mod-drag { opacity: 0.7; }
.contract-mod-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}
.contract-mod-toggle input[type="checkbox"] {
  margin-top: 2px; /* optical alignment with text cap-height */
  flex-shrink: 0;
}
.contract-mod-tags { display: flex; align-items: center; gap: 5px; padding-top: 1px; }
.contract-mod-actions { display: flex; gap: 2px; padding-top: 1px; }
/* Hide action buttons until the row is hovered (pointer devices only) */
@media (hover: hover) {
  .contract-mod-actions { opacity: 0; transition: opacity 0.12s; }
  .contract-module-list li:hover .contract-mod-actions,
  .contract-module-list li:focus-within .contract-mod-actions { opacity: 1; }
}
.auto-tag { font-size: 10px; background: var(--soft); color: var(--muted); padding: 1px 5px; border-radius: 4px; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; line-height: 1; color: var(--ink); }
.icon-btn:hover { background: var(--soft); }
.icon-btn.danger { color: var(--danger); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.contract-add-row { display: flex; gap: 8px; }
.contract-add-row select { flex: 1; }

/* Versions */
.contract-versions { list-style: none; margin: 0; padding: 0; }
.contract-versions li { padding: 4px 0; }
.linklike { background: none; border: none; color: var(--blue); cursor: pointer; padding: 0; font: inherit; }

/* Template wiring editor */
.wide-modal { max-width: 780px; width: 94vw; }
.contract-wiring th, .contract-wiring td { padding: 5px 8px; font-size: 13px; }
.contract-wiring [data-cond] { width: 100%; font-family: monospace; font-size: 12px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }

@media (max-width: 1100px) {
  .contract-layout { grid-template-columns: 1fr; }
}

/* ── Ticketing ───────────────────────────────────────────────────────────── */
/* The reveal forms (ticket types, comps, scanner) and the external-URL config
   carry the [hidden] attribute, but their display:grid/flex would otherwise win
   over the UA [hidden]{display:none}. Force hidden to mean hidden in here. */
.ticketing [hidden] { display: none !important; }
.ticketing .sub-head { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.ticketing .sub-head h3, .ticketing .danger-zone h3 { margin: 0; font-size: 15px; }
.ticketing .row-actions { display: flex; gap: 12px; white-space: nowrap; }
.ticket-note { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.ticket-note.padded { padding-top: 0; }

/* Small text-link buttons used in table row actions */
button.link { background: none; border: none; padding: 0; color: var(--blue); cursor: pointer; font: inherit; font-size: 13px; }
button.link:hover { text-decoration: underline; }
button.link.danger { color: var(--danger); }

/* Sales summary */
.ticketing-summary { padding-top: 16px; padding-bottom: 4px; }
.ticketing .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ticketing .stat { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.ticketing .stat-value { font-size: 22px; font-weight: 760; color: var(--ink); line-height: 1.1; }
.ticketing .stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Mode picker */
.ticketing-mode { display: block; }
.ticketing-mode .field-label { font-weight: 700; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-option { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.mode-option:hover { border-color: #c4cad3; }
.mode-option.selected { border-color: var(--blue); background: #f3f8ff; box-shadow: inset 0 0 0 1px var(--blue); }
.mode-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.mode-option-icon { width: 36px; height: 36px; border-radius: 8px; background: #eef2f7; color: var(--blue); display: grid; place-items: center; font-size: 16px; flex: 0 0 auto; }
.mode-option.selected .mode-option-icon { background: var(--blue); color: #fff; }
.mode-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mode-option-body strong { font-size: 14px; }
.mode-option-body .muted { font-size: 12.5px; line-height: 1.35; }
.mode-config { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-config .wide { grid-column: 1 / -1; }
.mode-config label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.mode-config input { font-weight: 400; }
.unsaved-hint { color: var(--amber); font-size: 12.5px; font-weight: 600; }

/* External preview card */
.external-link-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.external-link-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.external-link-info .muted { font-size: 12px; }
.external-link-url { font-weight: 600; word-break: break-all; color: var(--blue); }

/* Scanner links + comps */
.scanner-url { display: inline-block; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; }
.scanner-reveal { padding: 12px 0; }
.scanner-reveal .qr, .scanner-new .qr { margin-top: 10px; }
.comp-result { padding-top: 8px; }
.comp-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ticket-code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--soft); border-radius: 6px; padding: 3px 8px; }

/* Danger zone */
.ticketing .danger-zone { border-top: 1px solid var(--line); }
.ticketing .danger-zone h3 { color: var(--danger); }

@media (max-width: 760px) {
  .ticketing .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .mode-options { grid-template-columns: 1fr; }
  .mode-config { grid-template-columns: 1fr; }
  .external-link-card { flex-direction: column; align-items: stretch; }
}

/* ── Contacts (CRM) ───────────────────────────────────────────────────────── */
.contacts-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kpi-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 18px;
  box-shadow: var(--shadow);
}
.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--soft);
  color: var(--ink);
  font-size: 17px;
  flex: none;
}
.kpi-label { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.kpi-value { font-size: 22px; font-weight: 800; line-height: 1.15; }
.kpi-value small { font-size: 13px; font-weight: 600; color: var(--muted); }

.contacts-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.contacts-search { flex: 1 1 280px; max-width: 440px; }
.select-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.select-inline select { font: inherit; }
.contacts-table td.num, .contacts-table th.num { text-align: right; white-space: nowrap; }

.pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--line); font-size: 13px;
}
.pager-buttons { display: inline-flex; align-items: center; gap: 10px; }
.empty-note { color: var(--muted); padding: 22px 16px; }
.form-actions { display: flex; gap: 10px; }
.contact-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 2px 0 0; padding: 12px; background: var(--soft); border-radius: 8px; }
.contact-meta dt { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.contact-meta dd { margin: 2px 0 0; font-weight: 700; }

.contact-lists { border-top: 1px solid var(--line); }
.contact-lists-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-lists-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.contact-list-actions { display: flex; gap: 6px; }
.contact-list-add { display: flex; gap: 8px; align-items: center; }

/* ── Comp tickets on the guest list + issued-tickets table ───────────────── */
.comp-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comp-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
  background: #e7eafc; color: #3548c4;
}
.comp-view {
  font-size: 12px; font-weight: 700; text-decoration: none;
  padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink);
}
.comp-view:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.tickets-table td.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ticket-row.ticket-void td { opacity: .55; }
.ticket-row.ticket-redeemed td[data-label="Code"] { text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   Panic Promote — Visual Polish
   All selectors are scoped to .promote-* / pb-promote-* to avoid bleed.
   --promote-accent: #E5097F  (pink/magenta — mockup brand colour)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Badge tone variants (used by promote and potentially others) ─────────── */
.badge.success { background: #d3f1df; color: #0c7a3c; }
.badge.info    { background: #dbeafe; color: #1466bd; }
.badge.warning { background: #ffedc2; color: #a06400; }
.badge.error   { background: #fde2e1; color: #b42318; }

/* ── Promote accent token ─────────────────────────────────────────────────── */
:root {
  --promote-accent: #E5097F;
  --promote-accent-dark: #c2037a;
  --promote-accent-soft: #fce7f3;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.promote-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
  gap: 20px;
  align-items: start;
}
.promote-main-col, .promote-rail-col { min-width: 0; }

/* ── Campaign list page ───────────────────────────────────────────────────── */
.promote-campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.promote-campaign-card {
  padding: 0;
  transition: box-shadow .15s, transform .15s;
}
.promote-campaign-card:hover {
  box-shadow: 0 8px 28px rgba(229, 9, 127, .12), 0 1px 4px rgba(20, 25, 32, .07);
  transform: translateY(-1px);
}
.promote-campaign-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
}
.promote-campaign-meta { min-width: 0; }
.promote-campaign-title { font-size: 16px; margin: 0 0 4px; }
.promote-campaign-title a { text-decoration: none; }
.promote-campaign-title a:hover { color: var(--promote-accent); }
.promote-campaign-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.promote-campaign-stats { display: flex; align-items: center; gap: 12px; padding: 6px 18px; font-size: 13px; flex-wrap: wrap; }
.promote-stat { color: var(--muted); }
.promote-stat strong { color: var(--ink); font-weight: 700; }
.promote-missing { color: var(--amber, #d97706); }
.promote-days-badge {
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; background: #f1f3f5; color: var(--muted);
}

/* ── Health score bar ─────────────────────────────────────────────────────── */
.promote-score-bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 4px 18px 12px; }
.promote-score-fill { height: 100%; border-radius: 3px; background: var(--promote-accent); transition: width .4s ease; }
.promote-score-fill.success { background: var(--green, #16a34a); }
.promote-score-fill.warning { background: var(--amber, #d97706); }
.promote-score-fill.error   { background: var(--danger, #dc2626); }

/* ── Breadcrumb + page head ───────────────────────────────────────────────── */
.promote-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.promote-breadcrumb a { color: var(--muted); }
.promote-breadcrumb a:hover { color: var(--promote-accent); }
.promote-overview-title { margin: 0 0 4px; }
.promote-head-actions { display: flex; gap: 10px; align-items: center; }

/* ── Hero card ────────────────────────────────────────────────────────────── */
.promote-hero { overflow: hidden; }
.promote-hero-inner { display: flex; gap: 20px; padding: 20px; align-items: flex-start; }

/* Larger flyer thumbnail matching mockup (~170px wide poster format) */
.promote-hero-flyer { flex: 0 0 130px; }
.promote-hero-flyer-img {
  width: 130px;
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  display: block;
}
/* Placeholder when no flyer asset is available */
.promote-thumb.promote-hero-flyer-img {
  width: 130px;
  height: 170px;
  font-size: 32px;
}
.promote-hero-details { flex: 1; min-width: 0; }
.promote-hero-details h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.2; }
.promote-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ── Metric tiles row (GOAL / DAYS OUT / POSTS / STATUS) ─────────────────── */
.promote-metric-tiles {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--line);
}
.promote-metric-tile {
  flex: 1;
  padding: 14px 16px 12px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.promote-metric-tile:last-child { border-right: none; }
.promote-metric-value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.promote-metric-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--muted);
}

/* ── Post list ────────────────────────────────────────────────────────────── */
.promote-post-card {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  transition: background .12s;
}
.promote-post-card:first-child { border-top: none; }
.promote-post-card:hover { background: var(--soft, #f6f7f8); }
.promote-post-thumb { flex: 0 0 56px; }
.promote-post-body { flex: 1; min-width: 0; }
.promote-post-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.promote-post-title { font-size: 15px; }
.promote-post-preview { font-size: 13px; margin: 0 0 8px; line-height: 1.4; color: var(--muted); }
.promote-post-url { font-size: 13px; margin: 0 0 8px; overflow-wrap: anywhere; }
.promote-post-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Thumbnails ───────────────────────────────────────────────────────────── */
.promote-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.promote-thumb-placeholder {
  background: var(--soft, #f6f7f8);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.promote-asset-img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* ── Health card ──────────────────────────────────────────────────────────── */
.promote-health-card { margin-bottom: 16px; }
.promote-health-pct {
  font-size: 13px;
  font-weight: 800;
  color: var(--promote-accent);
}
.promote-health-meta { padding-bottom: 4px; font-size: 13px; }
.promote-health-list { list-style: none; margin: 0; padding: 0 18px; }
.promote-health-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13.5px;
  border-top: 1px solid var(--line);
}
.promote-health-item:first-child { border-top: none; }
.promote-health-icon {
  flex: 0 0 16px;
  font-size: 15px;
  line-height: 1;
}
.promote-health-label { flex: 1; }
.promote-health-detail {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  margin-left: auto;
}
/* Icon colour treatment per mockup */
.promote-health-success .promote-health-icon { color: #16a34a; }
.promote-health-warning .promote-health-icon { color: #d97706; }
.promote-health-error   .promote-health-icon { color: #9ca3af; }
.promote-health-more { padding: 10px 0; border-top: 1px solid var(--line); }
.promote-health-extra { padding: 0; }

/* ── Skeleton loading shimmer ─────────────────────────────────────────────── */
@keyframes promote-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.promote-skeleton {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--soft) 25%, #e9ecef 50%, var(--soft) 75%);
  background-size: 800px 100%;
  animation: promote-shimmer 1.4s ease infinite;
}
.promote-skeleton-line {
  height: 13px;
  margin: 6px 0;
  border-radius: 4px;
}
.promote-skeleton-block {
  height: 64px;
  border-radius: 6px;
  margin-bottom: 10px;
}
/* Section-level loading placeholder (used in rail cards before data arrives) */
.promote-loading-rail {
  padding: 18px;
}
.promote-loading-rail .promote-skeleton-line { width: 60%; }
.promote-loading-rail .promote-skeleton-line + .promote-skeleton-line { width: 85%; }
.promote-loading-rail .promote-skeleton-line + .promote-skeleton-line + .promote-skeleton-line { width: 40%; }

/* ── Assets card ──────────────────────────────────────────────────────────── */
.promote-assets-card { margin-bottom: 16px; }
.promote-assets-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.promote-asset-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.promote-asset-meta { text-align: center; font-size: 11px; }
.promote-asset-name {
  display: block;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

/* Ratio placeholder row */
.promote-ratio-row {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
}
.promote-ratio-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--muted);
}
.promote-ratio-thumbs { display: flex; gap: 10px; align-items: flex-end; }
.promote-ratio-thumb-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.promote-ratio-thumb {
  background: var(--soft, #f6f7f8);
  border: 1.5px dashed var(--line);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promote-ratio-thumb.ratio-square   { width: 44px; height: 44px; }
.promote-ratio-thumb.ratio-portrait { width: 38px; height: 48px; }
.promote-ratio-thumb.ratio-story    { width: 26px; height: 46px; }
.promote-ratio-thumb.ratio-landscape{ width: 60px; height: 34px; }
.promote-ratio-caption {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
}
/* legacy key span inside thumb (if markup not updated) */
.promote-ratio-key { font-size: 9px; color: var(--muted); font-weight: 700; }

/* ── Analytics card ───────────────────────────────────────────────────────── */
.promote-analytics-card { margin-bottom: 16px; }
.promote-analytics-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.promote-analytics-tile {
  padding: 12px 12px 8px;
  background: var(--soft, #f6f7f8);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.promote-analytics-tile-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.promote-analytics-label { }
.promote-analytics-value {
  font-size: 26px;
  font-weight: 800;
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  line-height: 1;
}
/* Pink sparkline */
.promote-spark {
  display: block;
  width: 100%;
  height: 26px;
  color: var(--promote-accent);
}
.promote-analytics-tile--na { opacity: 0.55; }
.promote-analytics-tile--na .promote-analytics-value { color: var(--muted); font-size: 22px; }
.promote-analytics-note {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  font-style: italic;
}
.promote-analytics-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding-top: 12px;
  padding-bottom: 4px;
}
/* Destination status table inside analytics card */
.promote-dest-results { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.promote-dest-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 8px 0 2px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.promote-dest-group-label:first-child { border-top: none; margin-top: 0; }
.promote-dest-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.promote-dest-result-icon { width: 16px; text-align: center; flex-shrink: 0; }
.promote-dest-result-key {
  flex: 1;
  text-transform: capitalize;
}
.promote-dest-result-status { font-size: 11px; }
.promote-dest-result-link {
  font-size: 11px;
  color: var(--promote-accent);
  text-decoration: none;
  white-space: nowrap;
}
.promote-dest-result-link:hover { text-decoration: underline; }

/* ── Broadcast modal ──────────────────────────────────────────────────────── */
.promote-dest-groups { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.promote-dest-group { }
.promote-dest-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}
.promote-dest-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--promote-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.promote-dest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.promote-dest-row:first-of-type { border-top: none; }
/* Coloured platform dot */
.promote-dest-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted);
}
.promote-dest-dot.dot-instagram   { background: #e1306c; }
.promote-dest-dot.dot-facebook    { background: #1877f2; }
.promote-dest-dot.dot-tiktok      { background: #010101; }
.promote-dest-dot.dot-email       { background: #16a34a; }
.promote-dest-dot.dot-eventbrite  { background: #f05537; }
.promote-dest-dot.dot-luma        { background: #8b5cf6; }
.promote-dest-dot.dot-bandsintown { background: #00b4e3; }
.promote-dest-dot.dot-funcheap    { background: #ea580c; }
.promote-dest-dot.dot-foopee      { background: #0369a1; }
.promote-dest-dot.dot-press       { background: #374151; }
.promote-dest-label { flex: 1; font-size: 14px; }
.promote-dest-check-label { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.promote-dest-status { margin-left: auto; font-size: 12px; font-weight: 700; }
/* Status colours per mockup (right-aligned) */
.promote-dest-status.badge.success { color: #0c7a3c; }
.promote-dest-status.badge.info    { color: #a06400; }
.promote-dest-status.badge.warning { color: var(--muted); }
/* Action info button on manual destinations */
.promote-dest-action-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  transition: color .12s, background .12s;
}
.promote-dest-action-btn:hover { color: var(--promote-accent); background: var(--soft); }

/* ── Action modal ─────────────────────────────────────────────────────────── */
.promote-action-card { max-width: 620px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.promote-action-title { font-size: 18px; margin: 0; display: flex; align-items: center; gap: 8px; }
.promote-action-title i { color: var(--promote-accent); }
.promote-action-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.promote-action-body { overflow-y: auto; flex: 1; }
.action-instructions {
  background: #f0f7ff;
  border-left: 3px solid var(--promote-accent, #6366f1);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.action-instructions h4 { margin: 0 0 6px; font-size: 13px; color: var(--promote-accent, #6366f1); display: flex; align-items: center; gap: 6px; }
.action-instruction-list { margin: 0; padding-left: 18px; }
.action-instruction-list li { font-size: 13px; color: var(--ink-dim); margin-bottom: 3px; }
.action-submit-links { display: flex; flex-direction: column; gap: 5px; }
.action-submit-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--promote-accent, #6366f1);
  text-decoration: none;
  padding: 6px 10px;
  background: var(--soft, #f5f5f8);
  border-radius: 6px;
  transition: background .15s, opacity .15s;
  word-break: break-all;
}
.action-submit-link:hover { background: var(--soft-hover, #eaeaf4); text-decoration: underline; }
.action-submit-link i { font-size: 11px; flex-shrink: 0; opacity: .75; }
.action-content-section { margin-bottom: 16px; }
.action-field { margin-bottom: 14px; }
.action-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 5px;
}
.action-field-value {
  font-size: 14px;
  color: var(--ink);
  padding: 8px 12px;
  background: var(--soft);
  border-radius: 6px;
  word-break: break-word;
}
.action-body-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 12.5px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  resize: vertical;
  min-height: 140px;
}
.action-to-input { width: 100%; box-sizing: border-box; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.action-status-msg { font-size: 13px; margin: 4px 0 0; min-height: 1.3em; color: var(--muted); }
.action-status-msg.error-text  { color: var(--color-error, #dc2626); }
.action-status-msg.promote-action-sent { color: #0c7a3c; }
.action-no-content {
  background: #fffbea;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: #92400e;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.action-no-content i { flex-shrink: 0; margin-top: 1px; }
.action-copy-btn { font-size: 12px; }

.promote-when-section { margin-bottom: 18px; }
.promote-when-section > strong { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.promote-when-section .check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 400;
}
.promote-schedule-dt {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: auto;
}

/* ── Post editor — main tab bar (Post / Channel Variants) ─────────────────── */
.promote-editor-tabbar {
  display: flex;
  border-bottom: 2px solid var(--line);
  background: #f7f8fb;
  padding: 0 6px;
  flex-shrink: 0;
}
.promote-editor-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  margin-bottom: -2px;
  transition: color .12s, border-color .12s, background .12s;
  white-space: nowrap;
}
.promote-editor-tab:hover:not(.active) {
  color: var(--ink);
  background: #eef0f5;
}
.promote-editor-tab.active {
  color: var(--promote-accent);
  border-bottom-color: var(--promote-accent);
  font-weight: 700;
  background: none;
}
.promote-editor-tab-badge {
  background: var(--promote-accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.5;
}

/* ── Post editor — variant tabs ───────────────────────────────────────────── */
.promote-variants-section { padding-top: 4px; }
.promote-variants-intro { font-size: 13px; }
.promote-variants-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.promote-variant-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
  border-bottom: 2px solid var(--line);
}
.promote-tab {
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  margin-bottom: -2px;
  transition: color .12s, border-color .12s;
}
.promote-tab:hover:not(.active) {
  color: var(--ink);
  background: var(--soft, #f6f7f8);
}
.promote-tab.active {
  color: var(--promote-accent);
  border-bottom-color: var(--promote-accent);
  font-weight: 700;
  background: none;
}
.promote-variant-panel { padding: 14px 0 4px; }
.promote-variant-panel label { display: block; margin-bottom: 10px; font-size: 13px; }
.promote-variant-panel textarea,
.promote-variant-panel input[type="text"],
.promote-variant-panel input.wide { width: 100%; box-sizing: border-box; font-size: 14px; }
.promote-variant-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.promote-char-count { font-size: 12px; }
.promote-variant-warnings { list-style: none; margin: 8px 0 0; padding: 0; }
.warning-item { font-size: 13px; color: var(--amber, #d97706); display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; }
.promote-variant-status { margin-bottom: 8px; font-size: 13px; }
.promote-variant-empty { color: var(--muted); font-size: 13px; margin-bottom: 10px; }

/* ── Modal card body scroll ───────────────────────────────────────────────── */
.modal-card-body { overflow-y: auto; max-height: 75vh; }

/* ── Accent buttons ───────────────────────────────────────────────────────── */
/* Primary promote action buttons use the magenta accent */
.promote-broadcast-btn,
button.promote-accent,
.button.promote-accent {
  background: var(--promote-accent);
  border-color: var(--promote-accent);
  color: #fff;
}
.promote-broadcast-btn:hover,
button.promote-accent:hover,
.button.promote-accent:hover {
  background: var(--promote-accent-dark);
  border-color: var(--promote-accent-dark);
}

/* Broadcast modal send button */
[data-broadcast-form] button[type="submit"] {
  background: var(--promote-accent);
  border-color: var(--promote-accent);
  color: #fff;
}
[data-broadcast-form] button[type="submit"]:hover {
  background: var(--promote-accent-dark);
  border-color: var(--promote-accent-dark);
}

/* ── Empty / error states ─────────────────────────────────────────────────── */
.promote-empty-state {
  padding: 32px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.promote-empty-state i { font-size: 32px; margin-bottom: 10px; display: block; opacity: .35; }
.promote-error-state {
  padding: 18px;
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  color: #b42318;
  font-size: 13px;
}

/* ── Mobile / responsive breakpoints ─────────────────────────────────────── */
@media (max-width: 900px) {
  .promote-overview-layout {
    grid-template-columns: 1fr;
  }
  /* Rail stacks below main column */
  .promote-rail-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }
  .promote-health-card,
  .promote-assets-card,
  .promote-analytics-card { margin-bottom: 0; }
  .promote-campaign-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .promote-analytics-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .promote-hero-inner { gap: 14px; padding: 14px; }
  .promote-hero-flyer { flex: 0 0 90px; }
  .promote-hero-flyer-img { width: 90px; height: 118px; }
  .promote-thumb.promote-hero-flyer-img { width: 90px; height: 118px; font-size: 24px; }
  .promote-hero-details h2 { font-size: 17px; }
  .promote-metric-tiles { flex-wrap: wrap; }
  .promote-metric-tile { flex: 1 1 50%; }
  .promote-analytics-tiles { grid-template-columns: 1fr; }
  .promote-rail-col { grid-template-columns: 1fr; }
  .promote-campaign-grid { grid-template-columns: 1fr; }
  .promote-variant-tabs { gap: 0; }
  .promote-tab { padding: 6px 9px; font-size: 11.5px; }
  .promote-dest-row { flex-wrap: wrap; }
  .promote-dest-status { margin-left: 0; }
}

/* ── Promote Settings page ──────────────────────────────────────────────────── */

.promote-settings-page {
  max-width: 1100px;
  padding: 24px;
}

.promote-settings-header {
  margin-bottom: 28px;
}
.promote-settings-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.promote-settings-header h2 i { color: var(--promote-accent); }
.promote-settings-header p   { margin: 0 0 14px; color: var(--muted); font-size: 14px; }

.promote-settings-venue label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.promote-settings-venue select {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

/* Group headings (Direct Posts / Event Platforms / Email) */
.promote-settings-group { margin-bottom: 32px; }
.promote-settings-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Card grid — 2 columns on wide, 1 on narrow */
.promote-settings-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

/* Individual platform card */
.promote-settings-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .15s;
}
.promote-settings-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* Card header: platform name + status badge */
.promote-settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--soft, #f6f7f8);
  gap: 8px;
}
.promote-settings-platform-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
}
.promote-settings-platform-name i {
  font-size: 18px;
  color: var(--promote-accent);
  width: 22px;
  text-align: center;
}

/* Fields area */
.promote-settings-fields {
  padding: 14px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.promote-settings-fields .form-row { margin: 0; }
.promote-settings-fields .form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.promote-settings-fields .form-input {
  margin-top: 3px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  background: var(--panel);
  color: var(--ink);
  box-sizing: border-box;
  transition: border-color .15s;
}
.promote-settings-fields .form-input:focus {
  outline: none;
  border-color: var(--promote-accent);
  box-shadow: 0 0 0 3px var(--promote-accent-soft);
}
.promote-settings-fields .form-hint {
  font-size: 11.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* Inline error below card header */
.promote-settings-error {
  margin: 0;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--danger, #dc2626);
  background: #fff5f5;
  border-bottom: 1px solid #fecaca;
}

/* Action row: Save / Disconnect / Docs */
.promote-settings-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.promote-settings-actions .button { font-size: 13px; }

/* Status badge tweaks inside settings cards */
.promote-settings-card-head .badge {
  font-size: 11px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.promote-settings-card-head .badge.success { background: #d3f1df; color: #0c7a3c; }
.promote-settings-card-head .badge.warning { background: #ffedc2; color: #a06400; }
.promote-settings-card-head .badge.danger  { background: #fde2e1; color: #b42318; }

/* Responsive: single column on small screens */
@media (max-width: 700px) {
  .promote-settings-page    { padding: 16px; }
  .promote-settings-cards   { grid-template-columns: 1fr; }
}

/* ── Outbox ──────────────────────────────────────────────────────────────────
   Split-pane layout: fixed header, scrollable table, scrollable detail pane.
   Global scroll is suppressed — each region handles its own overflow.
   ──────────────────────────────────────────────────────────────────────────── */

/* When the outbox page is mounted, make the workspace a flush flex container
   so the outbox page can fill it edge-to-edge and control its own scroll. */
/* Lock the shell to the viewport height when split-pane layout is active,
   so the flex chain is properly constrained top-to-bottom. */
.app-shell:has(#app.workspace-outbox) {
  height: 100vh;
  overflow: hidden;
}

#app.workspace-outbox {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

pb-outbox-page,
pb-messages-inbox,
pb-messages-archive,
pb-messages-sent,
pb-msg-campaigns,
pb-msg-lists,
pb-listmaster,
pb-tasks-app {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Page header (title + search) ─────────────────────────────────────────── */
.outbox-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 30px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}
.outbox-head h1 { margin: 0; font-size: 28px; }
.outbox-head .subtle { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.outbox-title-row { flex: 1 1 auto; min-width: 0; }
.outbox-search-row { flex-shrink: 0; align-self: flex-end; }

.outbox-search-label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  font-weight: 400;
  color: var(--muted);
  transition: border-color .15s, box-shadow .15s;
}
.outbox-search-label:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16,19,24,.08);
}
.outbox-search {
  width: 280px;
  max-width: 100%;
  border: 0;
  background: transparent;
  padding: 9px 0;
  font-size: 14px;
}
.outbox-search:focus { outline: none; }

/* ── Body: table pane + detail pane stacked ───────────────────────────────── */
.outbox-body {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Table pane grows to fill available space; shrinks when detail is open. */
.outbox-table-pane {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.outbox-table { width: 100%; border-collapse: collapse; }
.outbox-table thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
.outbox-table tbody tr { cursor: pointer; transition: background .1s; }
.outbox-table tbody tr:hover { background: var(--bg); }
.outbox-table tbody tr.selected { background: #eef4ff; }
.outbox-table tbody tr.selected:hover { background: #e4eeff; }
.outbox-date    { white-space: nowrap; font-size: 13px; color: var(--muted); }
.outbox-to      { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.outbox-subject { display: block; }
.outbox-template { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.outbox-empty   { text-align: center; padding: 48px 24px; color: var(--muted); font-size: 15px; }

/* Pager bar */
.outbox-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}
.pager-info   { flex: 1 1 auto; }
.pager-pages  { font-variant-numeric: tabular-nums; }

/* ── Resize bar (messages components drag-to-resize) ─────────────────────── */
.outbox-resize-bar {
  display: none;          /* shown only when .detail-open on parent component */
  flex-shrink: 0;
  height: 8px;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
  background: var(--line);
  user-select: none;
  touch-action: none;
  position: relative;
  transition: background .15s;
}
.detail-open .outbox-resize-bar {
  display: flex;
}
.outbox-resize-bar:hover {
  background: #c8cfda;
}
.outbox-resize-handle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1px;
  pointer-events: none;
  transition: border-color .15s, color .15s;
}
.outbox-resize-bar:hover .outbox-resize-handle {
  border-color: #8892a4;
  color: var(--ink);
}

/* ── Detail pane ──────────────────────────────────────────────────────────── */
.outbox-detail-pane {
  flex-shrink: 0;
  border-top: 2px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  /* Height driven by .detail-open on the parent */
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
}
.outbox-detail-pane[hidden] {
  display: none;
}
pb-outbox-page.detail-open .outbox-detail-pane,
pb-messages-inbox.detail-open .outbox-detail-pane,
pb-messages-archive.detail-open .outbox-detail-pane,
pb-messages-sent.detail-open .outbox-detail-pane {
  max-height: 48vh;
  overflow: hidden;
}
/* The outbox pane needs an explicit height (not just max-height) so that its
   flex children — .outbox-detail-inner → .outbox-detail-body → the iframe —
   have a definite container to fill.  Without this, every child's
   flex: 1 1 0 / min-height: 0 resolves to 0 px in an auto-height flex column
   and the email body is invisible.  max-height is kept so the CSS transition
   still animates from 0 → 48 vh (rendered height = min(transitioning-max-h, h)). */
pb-outbox-page.detail-open .outbox-detail-pane {
  height: 48vh;
}

/* Messages components override max-height with an explicit height variable
   so the drag-to-resize handle can control the split precisely. */
pb-messages-inbox .outbox-detail-pane,
pb-messages-archive .outbox-detail-pane,
pb-messages-sent .outbox-detail-pane,
pb-msg-campaigns .outbox-detail-pane,
pb-msg-lists .outbox-detail-pane {
  transition: flex-basis .22s ease;
}
pb-messages-inbox.detail-open .outbox-detail-pane,
pb-messages-archive.detail-open .outbox-detail-pane,
pb-messages-sent.detail-open .outbox-detail-pane,
pb-msg-campaigns.detail-open .outbox-detail-pane,
pb-msg-lists.detail-open .outbox-detail-pane {
  max-height: none;
  /* Use flex-basis so the pane participates in the flex split properly;
     the table pane above (flex: 1 1 0) fills whatever is left over. */
  flex: 0 0 var(--detail-h, 48vh);
  overflow: hidden;
}
pb-messages-inbox.resizing .outbox-detail-pane,
pb-messages-archive.resizing .outbox-detail-pane,
pb-messages-sent.resizing .outbox-detail-pane,
pb-msg-campaigns.resizing .outbox-detail-pane,
pb-msg-lists.resizing .outbox-detail-pane {
  transition: none;
}

/* Scrollable inner wrapper */
.outbox-detail-inner {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sticky header inside the detail pane */
.outbox-detail-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.outbox-detail-meta { flex: 1 1 0; min-width: 0; }
.outbox-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Mailing lists: the detail header packs name, description, member/created
   meta, and the action buttons onto a single compact row — just tall
   enough for the buttons — instead of the taller stacked layout the other
   Outbox-shaped pages (Messages, Campaigns) use for longer subject lines.
   Scoped to pb-msg-lists so those other pages are untouched. */
pb-msg-lists .outbox-detail-head {
  flex-wrap: nowrap;
  align-items: center;
  padding: 8px 20px;
}
pb-msg-lists .outbox-meta-list {
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 4px 14px;
}

/* Meta key-value list */
.outbox-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  font-size: 13px;
}
.outbox-meta-list > div { display: flex; align-items: baseline; gap: 5px; }
.outbox-meta-list dt { font-weight: 700; color: var(--muted); white-space: nowrap; }
.outbox-meta-list dd { margin: 0; word-break: break-all; }
.outbox-meta-list code { font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }

/* View toggle button group */
.outbox-view-toggle { display: flex; gap: 4px; }
.outbox-view-toggle button { min-width: 5em; }
.outbox-view-toggle button.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Body: iframe for HTML, pre for plain-text */
.outbox-detail-body {
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;   /* plain-text <pre> still scrolls here */
}
.outbox-email-frame {
  display: block;
  flex: 1 1 0;        /* fill whatever the detail pane gives */
  min-height: 0;
  width: 100%;
  border: 0;
  background: #fff;
}
.outbox-raw-body {
  margin: 0;
  padding: 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink);
  background: var(--bg);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* On mobile the workspace doesn't use the fixed-height grid so we relax
     the flush layout — each pane uses a fixed max-height instead. */
  #app.workspace-outbox {
    overflow: visible !important;
  }
  pb-outbox-page,
  pb-messages-inbox,
  pb-messages-archive,
  pb-messages-sent,
  pb-msg-campaigns,
  pb-msg-lists,
  pb-inbox-app {
    flex: none;
    display: block;
  }
  .outbox-head { padding: 16px; }
  .outbox-head h1 { font-size: 22px; }
  .outbox-search { width: 100%; }
  .outbox-search-row { width: 100%; }
  .outbox-search-label { width: 100%; }
  .outbox-body { display: block; }
  .outbox-resize-bar { display: none !important; }
  .outbox-table-pane { max-height: 52vh; overflow-y: auto; }
  pb-outbox-page.detail-open .outbox-detail-pane,
  pb-messages-inbox.detail-open .outbox-detail-pane,
  pb-messages-archive.detail-open .outbox-detail-pane,
  pb-messages-sent.detail-open .outbox-detail-pane,
  pb-msg-campaigns.detail-open .outbox-detail-pane,
  pb-msg-lists.detail-open .outbox-detail-pane {
    height: auto;
    max-height: 55vh;
  }
  .outbox-detail-head { padding: 10px 14px; }
  .outbox-detail-actions { width: 100%; justify-content: flex-end; }
  .outbox-email-frame { min-height: 180px; } /* floor for very small screens */
  pb-msg-lists .outbox-detail-head { flex-wrap: wrap; }
  pb-msg-lists .mlist-detail-fields { flex-wrap: wrap; }

  /* Responsive table: hide Template column, stack cells with labels */
  .outbox-table thead { display: none; }
  .outbox-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .outbox-table td { display: block; border: 0; padding: 0; }
  .outbox-table td[data-label="Date"]     { grid-column: 2; grid-row: 1; text-align: right; }
  .outbox-table td[data-label="Recipient"]{ grid-column: 1; grid-row: 1; }
  .outbox-table td[data-label="Subject"]  { grid-column: 1 / -1; grid-row: 2; }
  .outbox-table td[data-label="Template"] { display: none; }
}

@media (max-width: 540px) {
  .outbox-head { gap: 10px; }
  .outbox-meta-list { flex-direction: column; }
}

/* ── Campaigns ────────────────────────────────────────────────────────────────
   Marketing email campaigns (pb-msg-campaigns). Layout mirrors the Outbox/
   Messages split pane above (same .outbox-* classes) — these rules only cover
   the campaign-specific pieces layered on top of it: editable name/subject,
   the full-height HTML/text editor, the actions row (Recipients / Send Test /
   Send Campaign), the Recipients picker modal, and the event-picker modal
   used by "Generate from Event(s)". ──────────────────────────────────── */

.campaign-detail-body { display: flex; flex-direction: column; }

.campaign-editor-pane { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }

.campaign-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* Inline-editable text fields — transparent at rest, dashed hint on hover,
   solid focus ring on edit (same treatment as .contract-section-body). */
.campaign-name-input,
.campaign-subject-input {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  padding: 4px 6px;
  margin: 0 0 6px -6px;
  font: inherit;
  color: var(--ink);
  transition: outline .12s, background .12s, border-color .12s;
}
.campaign-title-row .campaign-name-input { width: auto; flex: 1 1 auto; font-size: 17px; font-weight: 800; margin-bottom: 0; }
.campaign-name-input:hover:not([readonly]),
.campaign-subject-input:hover:not([readonly]) { border-color: var(--line); background: var(--bg); }
.campaign-name-input:focus,
.campaign-subject-input:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16,19,24,.08);
}
.campaign-name-input[readonly],
.campaign-subject-input[readonly] { color: var(--muted); cursor: default; }

.campaign-locked-note { font-style: italic; margin: 2px 0 0; }

/* The editor frame/text-editor fill the whole detail pane (same as the base
   .outbox-email-frame flex: 1 1 0) — Recipients now lives in its own modal
   (opened via the "Recipients" button in the actions row below) instead of
   an inline section, so it no longer competes with the preview for space. */

.campaign-actions-row {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.campaign-recipients-btn i { margin-right: 2px; }

/* Recipients modal content (rendered into .modal-card-body.padded) */
.campaign-recipients-pane.modal-card-body { max-height: 70vh; }

.campaign-lists-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
}
.campaign-list-check.checkbox-row { display: flex; width: 100%; padding: 4px 0; }

.campaign-adhoc-search { position: relative; margin-bottom: 10px; }
.campaign-contact-search-label.outbox-search-label { width: 100%; }
.campaign-contact-search { width: 100%; }

.campaign-contact-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.campaign-contact-results li { padding: 2px 0; }
.campaign-contact-add {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 5px;
  padding: 7px 8px;
  font-weight: 400;
  cursor: pointer;
}
.campaign-contact-add:hover { background: var(--bg); }

.campaign-contact-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.campaign-contact-chip.chip { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; }
.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.chip-remove:hover { background: var(--red); color: #fff; }

.campaign-recipient-count { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }

.campaign-send-test-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.campaign-send-test-email { min-width: 220px; }

/* Event-picker modal (Generate from Event(s)) */
.campaign-event-picker { display: flex; flex-direction: column; gap: 14px; }
.campaign-event-filter-label.outbox-search-label { width: 100%; }
.campaign-event-filter { width: 100%; }
.campaign-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.campaign-event-list li { border-bottom: 1px solid var(--line); }
.campaign-event-list li:last-child { border-bottom: 0; }
.campaign-event-check.checkbox-row { display: flex; width: 100%; padding: 10px 12px; gap: 10px; }
.campaign-event-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.campaign-event-date { flex-shrink: 0; white-space: nowrap; }
.campaign-event-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ── Mailing Lists ────────────────────────────────────────────────────────────
   Named recipient groups (pb-msg-lists). Same Outbox/Messages split-pane shell;
   these rules cover the list-specific content: editable name/description,
   the members table toolbar/actions, and the add-contacts search+checklist.
   ──────────────────────────────────────────────────────────────────────────── */

.mlist-add-form { align-items: end; }
.mlist-add-form .mlist-field-error { grid-column: 1 / -1; }

.mlist-field-error { font-size: 12px; color: var(--red); }

/* Name + description sit side by side on one row (see the compact
   pb-msg-lists .outbox-detail-head rule above) instead of stacked. */
.mlist-detail-fields {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Positions the validation error as a floating tooltip below the name
   field instead of a block that would push the row taller. */
.mlist-name-wrap {
  position: relative;
  flex: 0 1 220px;
  min-width: 110px;
}
.mlist-name-wrap .mlist-field-error {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  margin-top: 3px;
  padding: 2px 6px;
  white-space: nowrap;
  background: var(--panel);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(16,19,24,.18);
}

.mlist-name-input {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  padding: 4px 6px;
  margin: 0 0 0 -6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  transition: outline .12s, background .12s, border-color .12s;
}
.mlist-name-input:hover { border-color: var(--line); background: var(--bg); }
.mlist-name-input:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16,19,24,.08);
}

.mlist-desc-input {
  display: block;
  flex: 1 1 240px;
  min-width: 120px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  padding: 4px 6px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  transition: outline .12s, background .12s, border-color .12s;
}
.mlist-desc-input:hover { border-color: var(--line); background: var(--bg); }
.mlist-desc-input:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16,19,24,.08);
}

.mlist-h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.mlist-members,
.mlist-add-contacts,
.mlist-import-csv,
.mlist-segment-rules {
  border-top: 1px solid var(--line);
  padding: 16px 20px;
}
.mlist-members-head,
.mlist-add-contacts-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
/* Pushes the one-click bulk action to the right of the search + filter. */
.mlist-add-contacts-head [data-add-all-opted] { margin-left: auto; }

.mlist-member-actions { display: flex; gap: 6px; justify-content: flex-end; }

.mlist-add-contacts-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.mlist-add-contacts-results li { padding: 0; }
.mlist-add-contacts-results .mlist-add-contacts-empty { padding: 8px 6px; }

/* Each result fills the full width of the box (a plain flex .checkbox-row
   only sizes to its single <label> child, which is what left-squished the
   rows) and lays the checkbox, name/email, and opted badge out across it. */
.mlist-add-contacts-results li.checkbox-row {
  width: 100%;
  border-radius: 6px;
}
.mlist-add-contacts-results li.checkbox-row:hover { background: var(--bg); }
.mlist-add-contacts-results li.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  cursor: pointer;
}
.mlist-add-contacts-results .mlist-contact-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.mlist-add-contacts-results .mlist-contact-info strong {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mlist-add-contacts-results .mlist-contact-info .muted {
  flex: 1 1 120px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mlist-add-contacts-results li.checkbox-row .badge { flex-shrink: 0; }

.mlist-add-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.mlist-add-actions-buttons { display: flex; gap: 8px; }

.mlist-import-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mlist-import-result { margin-top: 10px; }
.mlist-import-errors {
  margin: 4px 0 0;
  padding-left: 18px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--red);
}

.mlist-type-fieldset {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0;
  padding: 0;
  margin: 0;
  grid-column: 1 / -1;
}
.mlist-type-fieldset legend { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0; }
.mlist-rules-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}
.mlist-rules-form label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.mlist-rules-form input[type="number"] { width: 8em; }

.mlist-segment-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.mlist-segment-meta { font-size: 13px; color: var(--muted); margin: 0 0 10px; }

/* ── Event + Contract Creation Wizard ──────────────────────────────────────── */

pb-event-wizard { display: block; }

/* Shell: full-bleed below topbar */
.wizard-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 92px);
  background: var(--bg);
}

/* ── Header / stepper ──────────────────────────────────────────────────────── */
.wizard-header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 20px 28px 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.wizard-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.wizard-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.wizard-main-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}

.wizard-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* Progress bar */
.wizard-progress-track {
  height: 3px;
  background: var(--soft);
  border-radius: 2px;
  margin-bottom: 0;
  overflow: hidden;
}
.wizard-progress-bar {
  height: 100%;
  background: var(--red);
  border-radius: 2px;
  transition: width 0.35s ease;
}

/* Breadcrumb step list */
.wizard-step-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
}
.wizard-step-list::-webkit-scrollbar { display: none; }

.wizard-step-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 12px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s;
  line-height: 1;
}
.wizard-step-btn:hover:not(:disabled) { color: var(--ink); }
.wizard-step-btn:disabled             { cursor: default; opacity: 0.45; }

.wizard-step-item.is-active .wizard-step-btn {
  color: var(--ink);
  border-bottom-color: var(--red);
}
.wizard-step-item.is-done .wizard-step-btn { color: var(--green); }

.wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--soft);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.wizard-step-item.is-active .wizard-step-num { background: var(--red);   color: #fff; }
.wizard-step-item.is-done   .wizard-step-num { background: var(--green); color: #fff; }

@media (max-width: 600px) {
  .wizard-step-label { display: none; }
  .wizard-header     { padding: 14px 16px 0; }
}

/* ── Body layout ────────────────────────────────────────────────────────────── */
.wizard-body {
  display: grid;
  grid-template-columns: 1fr 272px;
  gap: 24px;
  padding: 28px 28px 60px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 860px) {
  .wizard-body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 16px 48px;
  }
  .wizard-sidebar { order: -1; }
}

/* ── Step panel ─────────────────────────────────────────────────────────────── */
.wizard-step-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
}

.wizard-step-desc {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 22px;
  line-height: 1.5;
}

.wizard-step-fields { margin-bottom: 28px; }

/* Nav row (Back / Continue / hint) */
.wizard-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.wizard-step-hint { margin-left: auto; }

.wizard-step-error {
  width: 100%;
  margin: 4px 0 0;
  font-size: 13px;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.wizard-sidebar {
  align-self: start;
  position: sticky;
  top: 152px;
}

.wizard-sidebar-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.wizard-sidebar-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 10px;
}

.sidebar-event-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
  word-break: break-word;
  line-height: 1.3;
}

.sidebar-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--soft);
}
.sidebar-fact:last-child { border-bottom: none; }
.sidebar-fact > span     { color: var(--muted); flex-shrink: 0; }

.wizard-sidebar-note {
  padding: 10px 12px;
  background: var(--soft);
  border-radius: 8px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.wizard-sidebar-note .fa-circle-info { margin-right: 4px; }

.wizard-sidebar-quick .button { width: 100%; justify-content: center; }

/* ── Deal type picker ────────────────────────────────────────────────────────── */
.deal-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

.deal-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px;
  background: var(--soft);
  border: 2px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
  line-height: 1.3;
}
.deal-type-card:hover:not(.selected) { background: #e6eaef; border-color: var(--line); }
.deal-type-card.selected {
  background: #fff2f2;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239,67,56,.1);
}
.deal-type-card i      { font-size: 18px; color: var(--red); }
.deal-type-card strong { font-weight: 760; font-size: 13px; }
.deal-type-card span   { color: var(--muted); font-size: 12px; line-height: 1.35; }

/* ── Contact typeahead ───────────────────────────────────────────────────────── */
.contact-search-wrap { position: relative; }

.contact-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  z-index: 50;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}

.contact-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--soft);
  background: none;
  cursor: pointer;
  font-size: 13px;
}
.contact-result:last-child { border-bottom: none; }
.contact-result:hover      { background: var(--soft); }
.contact-result strong     { font-weight: 700; }

.contact-searching,
.contact-no-results { padding: 10px 12px; font-size: 12px; }

/* ── Review step ─────────────────────────────────────────────────────────────── */
.wizard-review-missing {
  background: #fffbeb;
  border: 1px solid #f0d060;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 13px;
}
.wizard-review-missing ul        { margin: 8px 0 0; padding-left: 18px; }
.wizard-review-missing li        { margin-bottom: 5px; }
.wizard-review-missing .linklike { font-size: 13px; }

.wizard-review-ok {
  background: #edf7f2;
  color: var(--green);
  border: 1px solid #b2dfca;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.wizard-review-section {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--soft);
}
.wizard-review-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.wizard-review-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wizard-review-section-head h3 {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}

.review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.review-table tr            { border-bottom: 1px solid var(--soft); }
.review-table tr:last-child { border-bottom: none; }
.review-table .review-label {
  color: var(--muted);
  padding: 5px 10px 5px 0;
  width: 42%;
  vertical-align: top;
}
.review-table td:last-child { padding: 5px 0; }

/* ── Wizard Defaults Editor (Admin → Wizard tab) ────────────────────────────── */
pb-admin-wizard-defaults { display: block; }

.wd-editor {
  padding: 24px 28px 60px;
  max-width: 820px;
}

.wd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.wd-header h2 { margin: 0 0 4px; font-size: 20px; }

.wd-form { display: flex; flex-direction: column; gap: 24px; }

.wd-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 0;
  background: var(--panel);
}
.wd-section legend {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.wd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wd-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wd-input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  font-size: 14px;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.wd-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,67,56,.12); }

.wd-hint {
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .wd-editor { padding: 16px 16px 48px; }
  .wd-grid   { grid-template-columns: 1fr; }
  .wd-header { flex-direction: column; }
  .wd-save   { width: 100%; justify-content: center; }
}

/* ── Messages: nav badge, unread markers, compose modal ───────────────────── */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.nav-parent .nav-badge { margin-left: auto; }
.nav-parent .nav-badge + .nav-chevron { margin-left: 8px; }
.nav-children a .nav-badge { margin-left: auto; }
.nav-children a.active .nav-badge { background: #fff; color: var(--red); }

/* Unread row emphasis in the Inbox list */
.outbox-row.msg-unread .outbox-subject,
.outbox-row.msg-unread .outbox-to { font-weight: 800; }
.msg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
}
.msg-compose-btn { white-space: nowrap; }

/* Compose modal (appended to <body>; light theme) */
.msg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.45);
}
.msg-modal {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--panel);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.msg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.msg-modal-head h2 { margin: 0; font-size: 18px; }
.msg-modal-close {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--muted);
}
.msg-modal-form { display: grid; gap: 14px; padding: 20px; }
.msg-modal-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
}
.msg-modal-form select,
.msg-modal-form input,
.msg-modal-form textarea {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
}
.msg-modal-form textarea { resize: vertical; min-height: 120px; }
.msg-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ── Portal panel (pb-portal-panel) — renders into a .modal-card ─────────── */
.portal-panel-blurb {
  font-size: .875rem;
  color: var(--ink-dim);
  margin-bottom: 14px;
  line-height: 1.5;
}
.portal-create-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}
.portal-label-input {
  flex: 1 1 200px;
  min-width: 0;
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}
.portal-ttl-select,
.portal-kind-select {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}
.portal-link-kind {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent, #1a56c4);
  background: var(--accent-soft, #dbeafe);
  border-radius: 99px;
  padding: 2px 8px;
}
.portal-links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.portal-link-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.portal-link-meta {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.portal-link-label {
  font-weight: 600;
  font-size: .9rem;
}
.portal-link-info {
  font-size: .78rem;
  color: var(--ink-dim);
}
.portal-link-url {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--mono, monospace);
  font-size: .78rem;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-alt, #f5f4f0);
  color: var(--ink-dim);
  cursor: text;
  min-width: 0;
  width: 100%;
}
.portal-link-actions {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.portal-empty,
.portal-revoked-note {
  font-size: .82rem;
  color: var(--ink-dim);
  font-style: italic;
  margin-top: 8px;
}

/* ── QR code modal body (event-workspace.js EventWorkspace._openQrModal) ──── */
.qr-panel-blurb {
  font-size: .875rem;
  color: var(--ink-dim);
  margin-bottom: 14px;
  line-height: 1.5;
}
.qr-panel-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.qr-panel-image {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.qr-panel-actions {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qr-panel-url {
  font-family: var(--mono, monospace);
  font-size: .78rem;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-alt, #f5f4f0);
  color: var(--ink-dim);
  width: 100%;
}
.qr-panel-actions .inline-actions {
  flex-wrap: wrap;
}

/* ── Leads: clickable table rows ─────────────────────────────────────────── */
.leads-table-row {
  cursor: pointer;
  transition: background 0.1s;
}
.leads-table-row:hover td {
  background: #f0f4ff;
}
.leads-table-row:focus {
  outline: 2px solid var(--accent, #4f46e5);
  outline-offset: -2px;
}
.lead-title-link {
  color: var(--accent, #4f46e5);
  font-weight: 500;
}

/* ── Lead modal backdrop + card ─────────────────────────────────────────── */
body.lead-modal-open { overflow: hidden; }

/* pb-lead-modal is a block host; its fixed-position backdrop child
   positions itself against the viewport.  display:contents breaks
   position:fixed in several browsers, so we never use it here.
   The host is zero-size so it doesn't disturb body layout. */
pb-lead-modal {
  display: block;
  width: 0;
  height: 0;
  overflow: visible;
}

.lead-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15, 17, 22, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 16px 24px;
  overflow-y: auto;
  animation: lead-modal-fade 0.15s ease-out;
}
@keyframes lead-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lead-modal-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
  width: min(740px, 100%);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  animation: lead-modal-rise 0.18s ease-out;
}
@keyframes lead-modal-rise {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Modal header ────────────────────────────────────────────────────────── */
.lead-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 14px 20px;
  border-bottom: 1px solid var(--line, #e3e4e8);
  background: #f7f8fb;
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;
}
.lead-modal-title-block {
  flex: 1;
  min-width: 0;
}
.lead-modal-title {
  margin: 0;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lead-modal-date {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.lead-modal-close {
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #64748b);
  padding: 3px 7px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.lead-modal-close:hover { background: #e5e7eb; color: #111; }

/* ── Modal tab bar ───────────────────────────────────────────────────────── */
.lead-modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--line, #e3e4e8);
  background: #fafbfc;
  padding: 0 20px;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lead-modal-tabs button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted, #64748b);
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.lead-modal-tabs button:hover { color: #333; }
.lead-modal-tabs button.active {
  color: var(--accent, #4f46e5);
  border-bottom-color: var(--accent, #4f46e5);
  font-weight: 600;
}

/* ── Modal body (scrollable) ─────────────────────────────────────────────── */
.lead-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lead-modal-section {
  padding: 18px 20px 20px;
}

/* ── Modal footer ────────────────────────────────────────────────────────── */
.lead-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--line, #e3e4e8);
  background: #f7f8fb;
  border-radius: 0 0 12px 12px;
  flex-shrink: 0;
}

/* ── Details tab: 2-column form grid ─────────────────────────────────────── */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.field-label input,
.field-label select,
.field-label textarea {
  margin-top: 0;
  font-size: 14px;
}
@media (max-width: 520px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* ── Notes collapsible ───────────────────────────────────────────────────── */
.lead-notes-details > summary { list-style: none; }
.lead-notes-details > summary::-webkit-details-marker { display: none; }
.lead-note {
  border-left: 3px solid var(--line, #e3e4e8);
  padding: 6px 10px;
  margin-bottom: 10px;
}
.lead-note p { margin: 4px 0 0; font-size: 13px; }
.note-meta { font-size: 11px; }

/* ── Status flow tab ─────────────────────────────────────────────────────── */
.lead-status-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.status-flow-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--line, #e3e4e8);
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.status-flow-btn:hover { background: #f0f4ff; border-color: var(--accent, #4f46e5); }
.status-flow-btn.active {
  background: var(--accent, #4f46e5);
  border-color: var(--accent, #4f46e5);
  color: #fff;
  font-weight: 600;
}

/* ── Deal evaluator: compact number grid ──────────────────────────────────── */
.eval-fields-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
}
.eval-field-item {
  display: flex;
  flex-direction: column;
}
.eval-field-item span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eval-field-item input[type="number"] {
  font-size: 14px;
  padding: 5px 8px;
  width: 100%;
  min-width: 0;
}
.eval-results { border-top: 1px solid var(--line, #e3e4e8); padding-top: 16px; }
.eval-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
  margin-bottom: 10px;
}
.eval-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eval-result-item span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.eval-result-item strong { font-size: 15px; }
.eval-risk { margin-top: 6px; }

@media (max-width: 560px) {
  .eval-fields-compact  { grid-template-columns: repeat(2, 1fr); }
  .eval-result-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ── Lead modal: full-screen sheet on narrow mobile ──────────────────────── */
@media (max-width: 480px) {
  .lead-modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .lead-modal-card {
    border-radius: 18px 18px 0 0;
    max-height: 93vh;
    width: 100%;
  }
}

/* ── ListMaster (public/assets/listmaster.js) ─────────────────────────────────
   Sidebar-of-lists + member table + contact detail slide-over. Reuses this
   app's #app.workspace-outbox full-bleed/fixed-viewport shell (same mechanism
   as Outbox/Messages/the classic Mailing Lists page) so it gets edge-to-edge
   layout and independent scroll regions for free — see the
   `#app.workspace-outbox` / `pb-listmaster` rules above. */

pb-listmaster { --lm-accent: var(--blue); background: var(--bg); }

.lm-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.lm-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.lm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.lm-btn:hover:not(:disabled) { background: var(--soft); }
.lm-btn:disabled { opacity: .45; cursor: not-allowed; }
.lm-btn-primary { background: var(--lm-accent); border-color: var(--lm-accent); color: #fff; }
.lm-btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--lm-accent); }
.lm-btn-danger { color: var(--danger); border-color: #f3c9c7; }
.lm-btn-danger:hover:not(:disabled) { background: #fde2e1; }
.lm-btn-small { padding: 6px 10px; font-size: 12.5px; border-radius: 7px; }

.lm-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 260px;
  flex: 0 1 340px;
  color: var(--muted);
}
.lm-search input { border: none; background: none; outline: none; flex: 1; font-size: 13.5px; color: var(--ink); }
.lm-search kbd { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; background: var(--panel); }

.lm-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.lm-sidebar {
  flex: 0 0 250px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 16px 12px;
}
.lm-sidebar-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 6px 10px 8px;
}
.lm-tools-label { margin-top: 18px; }
.lm-list-nav, .lm-tools-nav { display: flex; flex-direction: column; gap: 2px; }
.lm-list-item, .lm-tool-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.lm-list-item:hover, .lm-tool-item:hover { background: var(--soft); }
.lm-list-item.active, .lm-tool-item.active { background: #e9f0fd; color: var(--lm-accent); }
.lm-list-item i, .lm-tool-item i { width: 16px; text-align: center; color: var(--muted); flex-shrink: 0; }
.lm-list-item.active i, .lm-tool-item.active i { color: var(--lm-accent); }
.lm-list-item .lm-list-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-list-item .lm-list-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.lm-list-item.active .lm-list-count { color: var(--lm-accent); }
.lm-list-item .fa-wand-magic-sparkles { font-size: 10px; }

.lm-create-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  margin-top: 6px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: none;
  color: var(--lm-accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lm-create-link:hover { background: #e9f0fd; }

.lm-sidebar-spacer { flex: 1 1 auto; }

.lm-storage-card {
  margin-top: 18px;
  padding: 12px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 12px;
}
.lm-storage-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.lm-storage-head strong { font-size: 12.5px; }
.lm-storage-pct { font-weight: 800; color: var(--muted); }
.lm-storage-bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; margin-bottom: 6px; }
.lm-storage-bar-fill { height: 100%; background: var(--lm-accent); border-radius: 4px; }
.lm-storage-bar-fill.lm-storage-hot { background: var(--danger); }
.lm-storage-sub { color: var(--muted); }
.lm-storage-edit { background: none; border: none; color: var(--lm-accent); font-weight: 700; cursor: pointer; padding: 0; font-size: 12px; margin-top: 4px; }

/* ── Main content ────────────────────────────────────────────────────────── */
.lm-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 20px 24px 32px; }
.lm-content { display: flex; flex-direction: column; gap: 16px; }

.lm-list-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lm-list-header h2 { margin: 0; font-size: 22px; }
.lm-list-header .lm-list-icon { color: var(--lm-accent); font-size: 18px; }
.lm-list-header .lm-list-desc { flex-basis: 100%; color: var(--muted); font-size: 13px; margin-top: -6px; }
.lm-list-header-actions { margin-left: auto; display: flex; gap: 8px; }

.lm-empty-state { padding: 60px 20px; text-align: center; color: var(--muted); }
.lm-empty-state i { font-size: 30px; margin-bottom: 10px; display: block; color: var(--line); }

.lm-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lm-stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; }
.lm-stat-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.lm-stat-value { font-size: 21px; font-weight: 800; line-height: 1.2; }
.lm-stat-value.lm-tone-green { color: var(--green); }
.lm-stat-value.lm-tone-amber { color: var(--amber); }
.lm-stat-value.lm-tone-red { color: var(--red); }
.lm-stat-sub { font-size: 12px; color: var(--muted); margin-left: 4px; font-weight: 600; }
.lm-stat-card.lm-stat-date .lm-stat-value { font-size: 14px; }

.lm-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--soft);
  border-radius: 10px;
}
.lm-bulk-count { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-left: auto; }

.lm-dropdown { position: relative; display: inline-flex; }
.lm-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
.lm-dropdown-menu[hidden] { display: none; }
.lm-dropdown-menu button, .lm-dropdown-menu .lm-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
}
.lm-dropdown-menu button:hover { background: var(--soft); }
.lm-dropdown-menu button.lm-danger-item { color: var(--danger); }
.lm-dropdown-search { padding: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.lm-dropdown-search input { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; }
.lm-dropdown-empty { padding: 8px 9px; color: var(--muted); font-size: 12.5px; }

.lm-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lm-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 10px;
  background: var(--panel);
}
.lm-filter-chip .lm-filter-badge { background: var(--lm-accent); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
.lm-filter-bar select {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel);
}
.lm-clear-filters { background: none; border: none; color: var(--lm-accent); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px; }
.lm-filter-spacer { flex: 1 1 auto; }

.lm-table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.lm-table { min-width: 720px; }
.lm-table th:first-child, .lm-table td:first-child { width: 36px; padding-left: 14px; }
.lm-table tbody tr { cursor: pointer; }
.lm-table tbody tr:hover { background: var(--bg); }
.lm-table tbody tr.lm-row-selected { background: #eef4ff; }
.lm-row-name { display: flex; align-items: center; gap: 10px; }
.lm-row-tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.lm-row-tags .lm-empty-cell, .lm-cell-muted { color: var(--muted); }

.lm-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.lm-avatar.lm-avatar-lg { width: 52px; height: 52px; font-size: 18px; }

.lm-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.lm-tag-pill .lm-tag-remove { cursor: pointer; opacity: .7; }
.lm-tag-pill .lm-tag-remove:hover { opacity: 1; }

.lm-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 4px 2px; font-size: 12.5px; color: var(--muted); }

/* ── Tags / History / Segments tool views ───────────────────────────────── */
.lm-tool-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lm-tool-header h2 { margin: 0; font-size: 20px; }
.lm-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 6px; }
.lm-tag-add-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lm-tag-add-form input[type="text"] { border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-size: 13px; }
.lm-tag-add-form input[type="color"] { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; padding: 2px; background: none; }

/* ── Contact detail slide-over ──────────────────────────────────────────── */
.lm-detail {
  flex: 0 0 380px;
  min-width: 0;
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.lm-detail[hidden] { display: none; }
.lm-detail-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.lm-detail-head-main { flex: 1; min-width: 0; }
.lm-detail-head-main h3 { margin: 0 0 4px; font-size: 17px; overflow-wrap: anywhere; }
.lm-detail-close { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px; }
.lm-detail-meta { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.lm-detail-meta li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.lm-detail-meta i { width: 14px; text-align: center; flex-shrink: 0; }

.lm-detail-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 14px; flex-shrink: 0; }
.lm-detail-tab {
  padding: 11px 12px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.lm-detail-tab.active { color: var(--lm-accent); border-bottom-color: var(--lm-accent); }

.lm-detail-body { padding: 16px 18px 24px; flex: 1; }
.lm-detail-section-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 10px; }
.lm-detail-section-label .lm-badge-count { background: var(--soft); color: var(--muted); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.lm-detail-section { margin-bottom: 22px; }
.lm-detail-tags-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lm-add-tag-btn { background: none; border: 1px dashed var(--line); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; }
.lm-add-tag-btn:hover { color: var(--lm-accent); border-color: var(--lm-accent); }

.lm-membership-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lm-membership-row { display: flex; align-items: flex-start; gap: 10px; }
.lm-membership-row input[type="checkbox"] { margin-top: 3px; }
.lm-membership-name { font-size: 13.5px; font-weight: 700; }
.lm-membership-sub { font-size: 12px; color: var(--muted); }

.lm-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lm-activity-item { display: flex; gap: 10px; }
.lm-activity-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--soft); color: var(--lm-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0; margin-top: 1px;
}
.lm-activity-message { font-size: 13px; }
.lm-activity-time { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.lm-notes-textarea { width: 100%; min-height: 160px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 13.5px; font-family: inherit; resize: vertical; }

.lm-detail-footer { padding: 14px 18px; border-top: 1px solid var(--line); }
.lm-detail-footer a { display: block; text-align: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
.lm-detail-footer a:hover { background: var(--soft); }

/* ── Add-members modal search list (reused by the "Add Members" dropdown) ── */
.lm-modal-search-results { list-style: none; margin: 10px 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.lm-modal-search-results li { border-bottom: 1px solid var(--line); }
.lm-modal-search-results li:last-child { border-bottom: none; }
.lm-modal-search-results label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.lm-modal-search-results .lm-contact-info { flex: 1; display: flex; flex-direction: column; }
.lm-modal-search-results .lm-contact-info strong { font-size: 13px; }
.lm-modal-search-results .lm-contact-info span { font-size: 12px; color: var(--muted); }

@media (max-width: 980px) {
  .lm-sidebar { flex-basis: 210px; }
  .lm-detail { position: fixed; inset: 0; z-index: 60; flex-basis: auto; width: 100%; }
}
@media (max-width: 720px) {
  .lm-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .lm-sidebar { flex: 0 0 auto; max-height: 260px; border-right: none; border-bottom: 1px solid var(--line); }
  .lm-main { overflow-y: visible; }
}

/* ── Tasks App (public/assets/tasks/*.js) ─────────────────────────────────────
   Standalone ClickUp/Asana-style task manager (tasks-ui.png): sidebar of
   task documents, a hierarchical task table / board / timeline / calendar,
   and a task detail slide-over. Reuses this app's #app.workspace-outbox
   full-bleed shell (see the pb-tasks-app rules above) and several existing
   generic classes (.badge/.status-*, .calendar-grid/.weekday/.calendar-day,
   .tabs, .pill) rather than duplicating them — only genuinely new markup
   gets a `tk-` prefixed class here. Structurally this mirrors ListMaster's
   sidebar+main+detail layout (the `.lm-*` block above) one section up. */

pb-tasks-app { background: var(--bg); }

.tk-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }

/* ── Sidebar: task documents ─────────────────────────────────────────────── */
.tk-sidebar {
  flex: 0 0 250px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 16px 12px;
}
.tk-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 10px; }
.tk-sidebar-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tk-icon-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 9px; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.tk-icon-btn:hover { background: var(--soft); }

.tk-doc-nav { display: flex; flex-direction: column; gap: 2px; }
.tk-doc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; border: none; background: none;
  color: var(--ink); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; width: 100%;
}
.tk-doc-item:hover { background: var(--soft); }
.tk-doc-item.active { background: #e9f0fd; color: var(--blue); }
.tk-doc-item i:first-child { width: 16px; text-align: center; flex-shrink: 0; }
.tk-doc-item-archived { opacity: .55; }
.tk-doc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-doc-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.tk-doc-item.active .tk-doc-count { color: var(--blue); }
.tk-doc-star { color: #d99100; font-size: 11px; }
.tk-empty-sidebar { padding: 10px 8px; }

.tk-archived-toggle {
  margin-top: 10px; background: none; border: 1px dashed var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.tk-archived-toggle:hover { color: var(--ink); border-color: var(--muted); }

/* ── "New task document" modal: visual icon picker ────────────────────────── */
.tk-icon-field-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tk-icon-field-label { font-weight: 760; }
.tk-icon-preview {
  width: 30px; height: 30px; border-radius: 8px; background: var(--soft);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.tk-icon-picker {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  max-height: 148px; overflow-y: auto;
}
.tk-icon-swatch {
  width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--muted);
  font-size: 14px; cursor: pointer;
}
.tk-icon-swatch:hover { border-color: var(--blue); color: var(--blue); }
.tk-icon-swatch.selected { border-color: var(--blue); background: #e9f0fd; color: var(--blue); }
.tk-icon-custom-input { font-size: 12.5px; }

/* ── Main pane: document header + tabs + active view ─────────────────────── */
.tk-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 20px 26px 40px; }

.tk-empty-main { padding: 70px 20px; text-align: center; color: var(--muted); }
.tk-empty-main i { font-size: 32px; color: var(--line); display: block; margin-bottom: 12px; }
.tk-empty-main h2 { margin: 0 0 6px; color: var(--ink); }
.tk-empty-main .button { margin-top: 14px; }

.tk-doc-header { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.tk-doc-header-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-doc-header-top h1 { margin: 0; font-size: 23px; }
.tk-star-btn { background: none; border: none; color: var(--line); font-size: 16px; cursor: pointer; padding: 2px; }
.tk-star-btn.active, .tk-star-btn:hover { color: #d99100; }
.tk-doc-status-select { width: auto; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 10px; }
.tk-doc-header-actions { margin-left: auto; display: flex; gap: 8px; }

.tk-doc-progress-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.tk-progress-bar { flex: 1 1 240px; max-width: 320px; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.tk-progress-fill { height: 100%; background: var(--green); border-radius: 4px; }
.tk-doc-progress-count { white-space: nowrap; }

.tk-tabs { margin-top: 14px; }

.tk-view-wrap { min-width: 0; }

/* ── List (hierarchical table) view ───────────────────────────────────────── */
/* Own (scoped) horizontal-scroll wrapper — unlike the plain `.table-scroll`
   class other panels use as a marker with no CSS behind it yet, this table's
   inline selects/date inputs have a real minimum readable width (below), so
   the wrapper needs to actually scroll rather than let the browser clip
   their text when the main pane is narrower than the table wants to be. */
.tk-list-scroll { margin-bottom: 10px; overflow-x: auto; }
.tk-task-table { min-width: 760px; }
.tk-task-table .tk-col-wbs { width: 44px; text-align: right; padding-right: 10px; }
.tk-task-table .tk-col-actions { width: 34px; }
.tk-task-table select, .tk-task-table input[type="date"] {
  border: 1px solid transparent; background: none; font-size: 12.5px; font-weight: 600; color: var(--ink);
  border-radius: 6px; padding: 4px 6px; width: 100%; min-width: 108px;
}
.tk-task-table select:hover, .tk-task-table input[type="date"]:hover,
.tk-task-table select:focus, .tk-task-table input[type="date"]:focus { border-color: var(--line); background: var(--panel); }
.tk-date-overdue { color: var(--danger); font-weight: 800; }

.tk-row-name { display: flex; align-items: center; gap: 6px; min-width: 220px; }
.tk-row-toggle, .tk-row-toggle-spacer { width: 18px; flex-shrink: 0; }
.tk-row-toggle { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; font-size: 11px; }
.tk-row-icon { width: 16px; text-align: center; flex-shrink: 0; color: var(--muted); }
.tk-row-icon-folder { color: var(--blue); }
.tk-row-status-icon { background: none; border: none; padding: 0; width: 16px; flex-shrink: 0; cursor: pointer; color: var(--line); font-size: 15px; }
.tk-row-status-icon .tk-icon-done, .tk-icon-done { color: var(--green); }
.tk-row-title { color: var(--ink); font-weight: 700; text-decoration: none; }
.tk-row-title:hover { text-decoration: underline; color: var(--blue); }
.tk-row-add-child { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; opacity: 0; }
tr[data-row]:hover .tk-row-add-child { opacity: 1; }
.tk-row-add-child:hover { color: var(--blue); }

.tk-add-row td { background: var(--soft); }
.tk-add-input { width: 100%; border: none; background: none; font-size: 13.5px; font-weight: 600; outline: none; padding: 4px 0; }

.tk-add-task-btn {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px dashed var(--line);
  border-radius: 8px; padding: 8px 12px; color: var(--blue); font-size: 13px; font-weight: 700; cursor: pointer;
}
.tk-add-task-btn:hover { background: #e9f0fd; }
.tk-list-empty { padding: 40px 10px; text-align: center; }
.tk-list-empty .button { margin-top: 10px; }

/* ── Priority flag ─────────────────────────────────────────────────────────── */
.tk-priority { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tk-priority-low { color: var(--muted); }
.tk-priority-medium { color: #1466bd; }
.tk-priority-high { color: #a06400; }
.tk-priority-urgent { color: var(--danger); }
select.tk-priority-select { font-weight: 700; }
select.tk-priority-low { color: var(--muted); }
select.tk-priority-medium { color: #1466bd; }
select.tk-priority-high { color: #a06400; }
select.tk-priority-urgent { color: var(--danger); }

/* ── Avatars ───────────────────────────────────────────────────────────────── */
.tk-avatar {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; text-transform: uppercase;
}
.tk-avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.tk-avatar-unassigned { background: var(--soft); color: var(--muted); border: 1px dashed var(--line); }

/* ── Board (Kanban) view ───────────────────────────────────────────────────── */
.tk-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.tk-board-col { flex: 0 0 270px; background: var(--soft); border-radius: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 320px); }
.tk-board-col-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 13px; font-weight: 800; }
.tk-board-col-body { flex: 1; overflow-y: auto; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 8px; }
.tk-board-col-body.drag-over { background: #e9f0fd; outline: 2px dashed var(--blue); outline-offset: -2px; }
.tk-board-empty { text-align: center; padding: 16px 4px; }

.tk-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; cursor: grab; box-shadow: none;
}
.tk-card:hover { border-color: var(--blue); }
.tk-card.dragging { opacity: .45; }
.tk-card-parent { display: flex; align-items: center; gap: 5px; }
.tk-card-title { color: var(--ink); font-weight: 700; text-decoration: none; font-size: 13.5px; }
.tk-card-title:hover { color: var(--blue); text-decoration: underline; }
.tk-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-card-due { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.tk-card-avatar { margin-left: auto; }

/* ── Timeline (Gantt) view ─────────────────────────────────────────────────── */
.tk-timeline { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.tk-gantt-header { display: flex; position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 1; }
.tk-gantt-label-spacer { flex: 0 0 220px; }
.tk-gantt-track-header { position: relative; flex: 1 1 auto; min-width: 560px; height: 32px; }
.tk-gantt-tick { position: absolute; top: 0; padding: 8px 0 0 6px; font-size: 11px; color: var(--muted); border-left: 1px solid var(--line); height: 100%; white-space: nowrap; }
.tk-gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); }
.tk-gantt-body { display: flex; flex-direction: column; }
.tk-gantt-row { display: flex; align-items: center; border-top: 1px solid var(--line); }
.tk-gantt-label { flex: 0 0 220px; padding: 9px 10px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-gantt-label a { color: var(--ink); text-decoration: none; font-weight: 600; }
.tk-gantt-label a:hover { color: var(--blue); text-decoration: underline; }
.tk-gantt-track { position: relative; flex: 1 1 auto; min-width: 560px; height: 38px; }
.tk-gantt-bar { position: absolute; top: 9px; height: 20px; border-radius: 5px; border: none; cursor: pointer; padding: 0; }
.tk-gantt-not_started { background: var(--line); }
.tk-gantt-in_progress { background: #ffd784; }
.tk-gantt-done { background: var(--green); }

/* ── Calendar view ─────────────────────────────────────────────────────────── */
.tk-cal-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tk-cal-toolbar h2 { margin: 0; font-size: 17px; }
.calendar-day.other-month { opacity: .45; }
.tk-cal-task { font-size: 11.5px; font-weight: 700; margin-top: 3px; padding: 2px 5px; border-radius: 5px; border-left: 3px solid var(--line); overflow: hidden; }
.tk-cal-task a { color: var(--ink); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-cal-task-not_started { border-left-color: var(--muted); background: var(--soft); }
.tk-cal-task-in_progress { border-left-color: #d99100; background: #fff6e2; }
.tk-cal-task-done { border-left-color: var(--green); background: #eafaf0; }
.tk-cal-more { margin-top: 2px; }

/* ── Task detail slide-over ───────────────────────────────────────────────── */
.tk-detail {
  flex: 0 0 400px; min-width: 0; background: var(--panel); border-left: 1px solid var(--line);
  overflow-y: auto; display: flex; flex-direction: column;
}
.tk-detail[hidden] { display: none; }
.tk-detail-head { position: relative; padding: 18px 42px 14px 18px; border-bottom: 1px solid var(--line); }
.tk-detail-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px; }
.tk-detail-close:hover { color: var(--ink); }
.tk-detail-breadcrumb { margin-bottom: 6px; }
.tk-detail-title-input { width: 100%; border: none; outline: none; background: none; font-size: 18px; font-weight: 800; color: var(--ink); padding: 2px 0; }
.tk-detail-title-input:focus { border-bottom: 1px solid var(--blue); }

.tk-detail-body { padding: 16px 18px 28px; flex: 1; }
.tk-detail-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 18px; }
.tk-detail-meta-grid label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.tk-detail-meta-grid select, .tk-detail-meta-grid input { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }

.tk-detail-section { margin-bottom: 22px; }
.tk-detail-section-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 10px; }
.tk-detail-section-label .pill { background: var(--soft); color: var(--muted); font-weight: 700; }

.tk-detail-desc { width: 100%; min-height: 80px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 13.5px; font-family: inherit; resize: vertical; }

.tk-checklist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-checklist-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-checklist-item label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.tk-checklist-done { text-decoration: line-through; color: var(--muted); }
.tk-checklist-remove { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; }
.tk-checklist-remove:hover { color: var(--danger); }
.tk-checklist-add input { width: 100%; border: 1px dashed var(--line); border-radius: 7px; padding: 7px 10px; font-size: 13px; background: none; }

.tk-tags-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-tag-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--ink); }
.tk-tag-pill i { cursor: pointer; opacity: .6; font-size: 10px; }
.tk-tag-pill i:hover { opacity: 1; color: var(--danger); }
.tk-add-tag-btn { background: none; border: 1px dashed var(--line); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; }
.tk-add-tag-btn:hover { color: var(--blue); border-color: var(--blue); }

.tk-dep-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tk-dep-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tk-dep-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-dep-row button { background: none; border: none; color: var(--muted); cursor: pointer; }
.tk-dep-row button:hover { color: var(--danger); }
.tk-add-dep-select { width: 100%; font-size: 12.5px; }

.tk-comment-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tk-comment-form textarea { width: 100%; min-height: 60px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; }
.tk-comment-form button { align-self: flex-end; }

.tk-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tk-activity-item { display: flex; gap: 10px; }
.tk-activity-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--soft); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; margin-top: 1px; }
.tk-activity-message { font-size: 13px; }
.tk-activity-time { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

@media (max-width: 980px) {
  .tk-sidebar { flex-basis: 210px; }
  .tk-detail { position: fixed; inset: 0; z-index: 60; flex-basis: auto; width: 100%; }
}
@media (max-width: 720px) {
  .tk-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .tk-sidebar { flex: 0 0 auto; max-height: 240px; border-right: none; border-bottom: 1px solid var(--line); }
  .tk-main { overflow-y: visible; }
  .tk-detail-meta-grid { grid-template-columns: 1fr; }
}

/* ── Upcoming Events (Events ▸ Upcoming card list) ─────────────────────────── */

.upcoming-page { display: flex; flex-direction: column; gap: 18px; }
.upcoming-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.upcoming-range-select { width: auto; min-width: 170px; }
.upcoming-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.upcoming-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.upcoming-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.upcoming-cards { display: flex; flex-direction: column; gap: 12px; }

.upcoming-card {
  display: grid;
  grid-template-columns: 56px 64px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.upcoming-card:hover { border-color: var(--blue); }
.upcoming-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Room conflict — see .calendar-day.has-conflict above. */
.upcoming-card.has-conflict { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--panel)); }
.upcoming-card.has-conflict:hover { border-color: var(--danger); }
.upcoming-conflict-icon { color: var(--danger); font-size: 14px; }
.upcoming-date { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.upcoming-dow { font-size: 11px; font-weight: 760; color: var(--muted); letter-spacing: .04em; }
.upcoming-mon { font-size: 12px; font-weight: 760; color: var(--blue); }
.upcoming-day { font-size: 22px; font-weight: 800; }
/* Multi-day badge ("2 DAYS" / "JUL" / "19–20"): the day + weekday-row text
   run longer than a single-day badge's "FRI" / "19", so both shrink a touch
   to keep the whole span inside the fixed 56px date column. */
.upcoming-date-range .upcoming-dow { font-size: 9px; letter-spacing: .02em; }
.upcoming-date-range .upcoming-mon { font-size: 10px; letter-spacing: -.02em; white-space: nowrap; }
.upcoming-date-range .upcoming-day { font-size: 16px; letter-spacing: -.01em; }
.upcoming-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--soft); flex-shrink: 0; }
.upcoming-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upcoming-thumb-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 20px; }
.upcoming-body { min-width: 0; }
.upcoming-body h3 { margin: 1px 0 2px; font-size: 17px; }
.upcoming-body h3 a { text-decoration: none; }
.upcoming-body h3 a:hover { text-decoration: underline; }
.upcoming-sub, .upcoming-venue { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.upcoming-sold, .upcoming-price { margin: 0; font-size: 13px; color: var(--muted); }
.upcoming-price { font-weight: 760; color: var(--ink); }
.upcoming-actions { position: relative; }
.upcoming-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 150px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.upcoming-menu a { padding: 8px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 700; }
.upcoming-menu a:hover { background: var(--soft); }
.upcoming-menu[hidden] { display: none; }

.badge.sales-on_sale { background: #d3f1df; color: #0c7a3c; }
.badge.sales-low_tickets { background: #ffedc2; color: #a06400; }
.badge.sales-sold_out { background: #fde2e1; color: #b42318; }
.badge.sales-free { background: #dbeafe; color: #1466bd; }

.upcoming-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--blue);
  border: 1px dashed var(--line);
  padding: 10px;
  font-size: 13.5px;
}
.upcoming-more:hover { background: var(--soft); }

.upcoming-footer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.upcoming-footer .metric-card { min-height: auto; padding: 16px; grid-template-columns: 40px 1fr; gap: 4px 12px; }
.upcoming-footer .metric-card .icon-bubble { width: 40px; height: 40px; font-size: 15px; }
.upcoming-footer .metric-card strong { font-size: 22px; white-space: nowrap; }
.upcoming-footer .metric-card h3 { font-size: 13px; }
.upcoming-footer .metric-card p { font-size: 12px; }

.upcoming-sidebar { align-self: start; position: sticky; top: 18px; }
.upcoming-clear { background: none; border: 0; color: var(--blue); font-weight: 700; font-size: 13px; padding: 0; cursor: pointer; }
.upcoming-filters-body { display: flex; flex-direction: column; gap: 18px; }
.upcoming-search { position: relative; display: block; }
.upcoming-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.upcoming-search input { padding-left: 32px; }
.upcoming-filter-group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.upcoming-range-label { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; }
.upcoming-status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.upcoming-venue-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.upcoming-venue-card strong { display: block; font-size: 14px; }
.upcoming-venue-card p { margin: 2px 0 0; }
.upcoming-export { width: 100%; justify-content: center; display: flex; align-items: center; gap: 8px; }

.mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mini-cal-head .icon-btn { width: 26px; height: 26px; }
.mini-cal-head strong { font-size: 13px; }
.mini-cal-weekdays, .mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mini-cal-weekdays span { font-size: 10.5px; color: var(--muted); padding: 2px 0; }
.mini-cal-day {
  border: 0;
  background: none;
  border-radius: 6px;
  font-size: 12.5px;
  padding: 6px 0;
  cursor: pointer;
  color: var(--ink);
}
.mini-cal-day:hover { background: var(--soft); }
.mini-cal-day.is-pad { cursor: default; }
.mini-cal-day.is-today { font-weight: 800; color: var(--blue); }
.mini-cal-day.in-range { background: var(--soft); }
.mini-cal-day.is-edge { background: var(--blue); color: #fff; }

@media (max-width: 860px) {
  .upcoming-layout { grid-template-columns: minmax(0, 1fr); }
  .upcoming-sidebar { position: static; }
  .upcoming-card { grid-template-columns: 44px 1fr; }
  .upcoming-thumb { display: none; }
  .upcoming-meta, .upcoming-actions { grid-column: 2; align-items: flex-start; text-align: left; }
  .upcoming-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Navigation Manager (public/assets/nav-manager.js) ────────────────────────
   Admin > Navigation. Three-pane layout: draggable item tree, edit form, live
   preview. The preview pane reuses .sidebar/.side-nav/.nav-group/etc. as-is
   (same markup renderNavHtml() produces for the real sidebar) inside a
   bounded, non-fixed frame — see .nav-preview-frame below for the override. */
.nav-manager-body { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.nav-manager-list, .nav-manager-edit, .nav-manager-preview {
  flex: 1 1 320px;
  min-width: 280px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}
.nav-manager-preview { flex-basis: 280px; max-width: 320px; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  margin-left: 8px;
}
.pill-home { background: var(--blue); color: #fff; }
.pill-muted { background: var(--soft); color: var(--muted); }

.nav-manager-tree { padding: 4px 12px 12px; }
.nav-row-group { border-bottom: 1px solid var(--line); }
.nav-row-group:last-child { border-bottom: 0; }
.nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.nav-row:hover { background: var(--soft); }
.nav-row.selected { background: var(--soft); outline: 2px solid var(--blue); outline-offset: -2px; }
.nav-row.dragging { opacity: 0.4; }
.nav-row.drag-over-nest { background: #e7f0fd; outline: 2px dashed var(--blue); outline-offset: -2px; }
.nav-row.drag-over-before { box-shadow: inset 0 2px 0 var(--blue); }
.nav-row.drag-over-after { box-shadow: inset 0 -2px 0 var(--blue); }
.nav-row-child { margin-left: 26px; }
.nav-row-chevron { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.nav-row-drag { color: var(--muted); cursor: grab; flex-shrink: 0; opacity: 0.55; }
.nav-row-drag:active { cursor: grabbing; }
.nav-row:hover .nav-row-drag { opacity: 0.9; }
.nav-row-icon { width: 18px; text-align: center; color: var(--muted); flex-shrink: 0; }
.nav-row-label { flex: 1 1 auto; font-weight: 700; font-size: 13.5px; }
.nav-row-delete {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
}
.nav-row:hover .nav-row-delete { opacity: 1; }
.nav-row-delete:hover { background: #fde2e1; color: var(--danger); }
.nav-row-children { padding-bottom: 4px; }
.nav-row-add-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px 26px;
  border: 0;
  background: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
}
.nav-row-add-child:hover { text-decoration: underline; }
.nav-manager-hint { border-top: 1px solid var(--line); }

.nav-edit-breadcrumb { font-size: 13px; }
.nav-edit-actions { display: flex; justify-content: flex-end; }
.nav-level-readout { margin: -6px 0 0; }
.nav-advanced { grid-column: 1 / -1; }
.nav-advanced summary { cursor: pointer; font-weight: 760; margin-bottom: 10px; }
.toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.toggle-row input { width: auto; }
.radio-row { display: flex; gap: 16px; font-weight: 400; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.radio-row input { width: auto; }
.req { color: var(--danger); }

.nav-preview-frame { padding: 0 16px 16px; }
.nav-preview-frame .sidebar {
  position: static;
  height: auto;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .nav-manager-list, .nav-manager-edit, .nav-manager-preview { flex-basis: 100%; max-width: none; max-height: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Automation > Processes — the process-graph designer/engine.
   All selectors scoped to .proc-* / pb-process-* / pb-processes-*.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  --proc-trigger: #0f8f46;
  --proc-operation: #1268c7;
  --proc-decision: #d99100;
  --proc-human: #d9711a;
  --proc-wait: #b8960b;
  --proc-ai: #0f9488;
  --proc-failure: #ef4338;
  --proc-end: #0f8f46;
  --proc-disabled: #a8aeb8;
}

pb-processes-list, pb-process-designer { display: block; }

/* ── Processes list ───────────────────────────────────────────────────────── */
pb-processes-list .status-dot.red { display: inline-block; margin-right: 6px; }

/* ── Designer shell ───────────────────────────────────────────────────────── */
.proc-designer { display: flex; flex-direction: column; gap: 14px; height: calc(100vh - 190px); min-height: 560px; }
.proc-designer-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 14px; }
.proc-designer-palette, .proc-designer-inspector {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
  min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
}
.proc-designer-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.proc-designer-live { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.proc-designer-live .proc-designer-main { flex: 1 1 auto; min-height: 320px; }
.proc-designer-history { flex: 1; min-height: 0; overflow-y: auto; }
/* [hidden] must win over the unconditional `display` rules above — an
   author rule that sets `display` on an element unconditionally otherwise
   beats the UA stylesheet's `[hidden] { display: none }` even though this
   looks like it "should" just work. Same gotcha, same fix pattern as any
   other panel that toggles visibility via the hidden attribute. */
.proc-designer-body[hidden], .proc-designer-live[hidden], .proc-designer-history[hidden] { display: none; }

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.proc-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.proc-toolbar-title { display: flex; align-items: center; gap: 12px; }
.proc-toolbar-back { font-size: 18px; color: var(--muted); }
.proc-toolbar-back:hover { color: var(--ink); }
.proc-toolbar-name { font-size: 20px; margin: 0; line-height: 1.15; }
.proc-toolbar-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.proc-toolbar-tabs { gap: 4px; background: var(--soft); border-radius: 8px; padding: 4px; }
.proc-toolbar-tabs button { background: none; border: none; color: var(--muted); font-weight: 750; padding: 7px 14px; border-radius: 6px; cursor: pointer; }
.proc-toolbar-tabs button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(20,25,32,.12); }
.proc-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.proc-validation-pill { display: inline-flex; gap: 8px; }
.proc-count.error { color: var(--danger); font-weight: 800; }
.proc-count.warning { color: #a06400; font-weight: 800; }
.proc-toolbar-menu { position: relative; }
.proc-toolbar-menu-list {
  position: absolute; top: calc(100% + 4px); right: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 220px; z-index: 20; overflow: hidden;
}
.proc-toolbar-menu-list[hidden] { display: none; } /* see the [hidden]-vs-unconditional-display note above */
.proc-toolbar-menu-list button { background: none; color: var(--ink); border: none; border-radius: 0; text-align: left; padding: 10px 14px; font-weight: 600; }
.proc-toolbar-menu-list button:hover { background: var(--bg); }
.proc-toolbar-canvas-controls { justify-content: space-between; }
.proc-zoom-readout { font-size: 12px; color: var(--muted); font-weight: 700; min-width: 38px; text-align: center; }

/* ── Palette ──────────────────────────────────────────────────────────────── */
.proc-palette-search { position: relative; padding: 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.proc-palette-search i { color: var(--muted); }
.proc-palette-search input { border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 13px; }
.proc-palette-groups { overflow-y: auto; flex: 1; padding: 6px 10px 14px; }
.proc-palette-group summary { cursor: pointer; font-weight: 760; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 10px 4px 6px; }
.proc-palette-items { display: flex; flex-direction: column; gap: 4px; }
.proc-palette-item {
  display: flex; align-items: center; gap: 9px; text-align: left; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--proc-disabled); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-weight: 650; cursor: grab;
}
.proc-palette-item:hover { background: var(--bg); }
.proc-palette-item[data-tone="trigger"] { border-left-color: var(--proc-trigger); }
.proc-palette-item[data-tone="operation"] { border-left-color: var(--proc-operation); }
.proc-palette-item[data-tone="decision"] { border-left-color: var(--proc-decision); }
.proc-palette-item[data-tone="human"] { border-left-color: var(--proc-human); }
.proc-palette-item[data-tone="wait"] { border-left-color: var(--proc-wait); }
.proc-palette-item[data-tone="ai"] { border-left-color: var(--proc-ai); }
.proc-palette-item i { width: 16px; text-align: center; color: var(--muted); }

/* ── Canvas ───────────────────────────────────────────────────────────────── */
pb-process-canvas {
  display: block; position: relative; flex: 1; min-height: 320px; overflow: hidden; touch-action: none;
  background-color: var(--bg);
  background-image: radial-gradient(circle, #cfd5dd 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--line); border-radius: 8px;
  outline: none;
}
.proc-canvas-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.proc-canvas-edges { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; }
.proc-canvas-nodes { position: absolute; top: 0; left: 0; }
.proc-canvas-hint { position: absolute; left: 12px; bottom: 8px; margin: 0; max-width: 60%; pointer-events: none; }
.proc-canvas-rubberband { position: absolute; border: 1px dashed var(--accent, #2563eb); background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent); pointer-events: none; }

pb-process-node {
  position: absolute; width: 190px; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line);
  border-left: 5px solid var(--proc-disabled); border-radius: 10px; box-shadow: var(--shadow); cursor: grab; user-select: none;
}
pb-process-node:focus-visible, pb-process-node.selected { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
pb-process-node.has-error { border-color: var(--danger); }
pb-process-node.has-warning { border-color: #d99100; }
pb-process-node.disabled { opacity: .3; }
pb-process-node.is-current { outline: 3px solid var(--blue); outline-offset: 2px; }
pb-process-node.is-visited .proc-node-body { background: color-mix(in srgb, var(--green) 6%, transparent); }
pb-process-node[data-tone="trigger"] { border-left-color: var(--proc-trigger); }
pb-process-node[data-tone="operation"] { border-left-color: var(--proc-operation); }
pb-process-node[data-tone="decision"] { border-left-color: var(--proc-decision); }
pb-process-node[data-tone="human"] { border-left-color: var(--proc-human); }
pb-process-node[data-tone="wait"] { border-left-color: var(--proc-wait); }
pb-process-node[data-tone="ai"] { border-left-color: var(--proc-ai); }
pb-process-node[data-tone="failure"] { border-left-color: var(--proc-failure); }
pb-process-node[data-tone="end"] { border-left-color: var(--proc-end); }
.proc-node-body { padding: 9px 12px; border-radius: 0 9px 9px 0; }
.proc-node-head { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.proc-node-head i { font-size: 12px; }
.proc-node-type { font-size: 11px; font-weight: 760; text-transform: uppercase; letter-spacing: .03em; }
.proc-node-name { font-size: 14px; font-weight: 750; margin-top: 3px; line-height: 1.25; }
.proc-node-marker { margin-left: auto; }
.proc-node-marker.error { color: var(--danger); }
.proc-node-marker.warning { color: #d99100; }
.proc-node-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.proc-badge {
  font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 7px; border: none; cursor: pointer;
  background: var(--soft); color: var(--muted);
}
.proc-badge-active { background: #d3f1df; color: #0c7a3c; }
.proc-badge-waiting { background: #ffedc2; color: #a06400; }
.proc-badge-overdue { background: #fde2e1; color: #b42318; }
.proc-badge-failed { background: #fde2e1; color: #b42318; }

.proc-port {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; padding: 0; cursor: crosshair;
  background: var(--panel); border: 2px solid var(--muted); transform: translateY(-50%); z-index: 2;
}
.proc-port:hover { border-color: var(--accent, #2563eb); background: var(--accent, #2563eb); }
.proc-port-in { left: -7px; }
.proc-port-out { right: -7px; }
.proc-port-label {
  position: absolute; right: -8px; transform: translate(100%, -50%); white-space: nowrap; font-size: 10.5px;
  color: var(--muted); background: var(--panel); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line);
}
.proc-port-label em { font-style: normal; color: var(--proc-decision); }

.proc-edge { fill: none; stroke: #9aa2ad; stroke-width: 2; }
.proc-edge.is-default { stroke-width: 2.5; }
.proc-edge.selected { stroke: var(--accent, #2563eb); }
.proc-edge-conditional { stroke-dasharray: 6 4; }
.proc-edge-error { stroke: var(--danger); }
.proc-edge-timeout { stroke: var(--proc-wait); stroke-dasharray: 3 4; }
.proc-edge-escalation { stroke: #7c3aed; }
.proc-edge-data { stroke: var(--proc-ai); stroke-dasharray: 1 5; stroke-linecap: round; }
.proc-temp-edge { stroke: var(--accent, #2563eb); stroke-dasharray: 5 4; }
.proc-arrow { fill: #9aa2ad; }
.proc-arrow-error { fill: var(--danger); }
.proc-arrow-timeout { fill: var(--proc-wait); }
.proc-arrow-escalation { fill: #7c3aed; }
.proc-arrow-data { fill: var(--proc-ai); }
.proc-edge-label-wrap { overflow: visible; }
.proc-edge-label {
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px; font-size: 10.5px; color: var(--muted);
  text-align: center; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 100%;
}

.proc-canvas-minimap {
  position: absolute; right: 10px; bottom: 10px; width: 180px; height: 116px; background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden;
}
.proc-canvas-minimap svg { width: 100%; height: 100%; display: block; }
.proc-minimap-node { fill: #9aa2ad; }
.proc-minimap-node[data-tone="trigger"] { fill: var(--proc-trigger); }
.proc-minimap-node[data-tone="operation"] { fill: var(--proc-operation); }
.proc-minimap-node[data-tone="decision"] { fill: var(--proc-decision); }
.proc-minimap-node[data-tone="human"] { fill: var(--proc-human); }
.proc-minimap-viewport { position: absolute; border: 2px solid var(--accent, #2563eb); pointer-events: none; }

/* ── Inspector ────────────────────────────────────────────────────────────── */
.proc-inspector-empty { text-align: center; color: var(--muted); margin: auto; }
.proc-inspector-empty i { font-size: 26px; margin-bottom: 8px; display: block; }
.proc-inspector-body { overflow-y: auto; flex: 1; }
.proc-inspector-group { border-bottom: 1px solid var(--line); }
.proc-inspector-group summary { cursor: pointer; font-weight: 780; padding: 12px 14px; }
.proc-inspector-group[open] summary { border-bottom: 1px solid var(--line); }
.proc-branch-row { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.proc-branch-row input[type="text"] { font-size: 12.5px; padding: 7px 8px; }
.proc-form-field-row { display: grid; grid-template-columns: 1fr auto 1fr auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.proc-form-field-row input[type="text"], .proc-form-field-row select { font-size: 12.5px; padding: 7px 8px; }
.proc-connection-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.proc-connection-row:last-child { border-bottom: none; }
.proc-connection-list { margin-bottom: 10px; }

/* ── Live Cases drawer ────────────────────────────────────────────────────── */
pb-process-live-cases { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); flex-shrink: 0; max-height: 46%; display: flex; flex-direction: column; }
.proc-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; flex-wrap: wrap; }
.proc-drawer-toggle { background: none; border: none; font-weight: 780; font-size: 15px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); padding: 0; }
.proc-drawer-filters { display: flex; gap: 8px; }
.proc-drawer-filters input, .proc-drawer-filters select { width: auto; font-size: 13px; padding: 6px 9px; }
.proc-drawer-body { overflow-y: auto; border-top: 1px solid var(--line); }
.proc-instance-detail-row td { background: var(--bg); }
.proc-instance-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.proc-var-list { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.proc-instance-detail-grid h3 { margin: 16px 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.proc-instance-detail-grid h3:first-child { margin-top: 0; }
.proc-instance-task { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.proc-instance-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ── Shared <pb-process-step-form> — the "form view" of a process step,
   embedded in Live Cases, the Tasks inbox, and elsewhere in the app. ── */
pb-process-step-form { display: block; }
.proc-step-form, .proc-step-wait { display: flex; flex-direction: column; gap: 8px; }
.proc-step-form h4, .proc-step-wait h4 { margin: 0; font-size: 14px; }

/* ── Shared timeline (validation modal / simulation log / live-case detail) ── */
.proc-timeline { list-style: none; margin: 0; padding: 0; }
.proc-timeline li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.proc-timeline li:last-child { border-bottom: none; }
.proc-timeline .timeline-dot { flex-shrink: 0; margin-top: 6px; }

/* ── History tab ──────────────────────────────────────────────────────────── */
.proc-history-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.proc-history-preview pb-process-canvas { height: 420px; }

/* ── Validation modal / findings ──────────────────────────────────────────── */
.proc-finding-list { list-style: none; margin: 0 0 14px; padding: 0; }
.proc-finding { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.proc-finding-error i { color: var(--danger); }
.proc-finding-warning i { color: #d99100; }
.proc-sim-status { display: flex; align-items: center; gap: 8px; font-weight: 750; }
.proc-sim-status.success { color: var(--green); }
.proc-sim-status.error { color: var(--danger); }

/* ── Simulation modal ─────────────────────────────────────────────────────── */
.proc-sim-log { margin-top: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; max-height: 260px; overflow-y: auto; }
.proc-sim-log ol { margin: 0; padding-left: 18px; }
.proc-sim-log li { margin-bottom: 5px; font-size: 13px; }
.proc-sim-log li.error { color: var(--danger); }
.proc-sim-log li.warn { color: #a06400; }
.proc-sim-log li.success { color: var(--green); font-weight: 700; }

/* ── Responsive: collapse palette/inspector to drawers on tablet widths ───── */
@media (max-width: 1100px) {
  .proc-designer { height: auto; }
  .proc-designer-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 55vh) auto; }
  .proc-designer-palette, .proc-designer-inspector { max-height: 260px; }
  .proc-history-grid { grid-template-columns: 1fr; }
  .proc-instance-detail-grid { grid-template-columns: 1fr; }
}

/* ── AI Assistant drawer (public/assets/ai-drawer.js) ──────────────────────
   A persistent slide-over PANEL, not a modal: the rest of the app stays
   fully visible and interactive while this is open. Deliberately has no
   backdrop/scrim element at all (unlike .drawer-backdrop above, which the
   mobile nav drawer uses) — per the product requirement, it must not block
   or darken the app underneath. Closed via the header's close button or
   Escape only; there is no click-outside-to-dismiss since there's no
   backdrop to click. <pb-ai-drawer> itself is the sliding element (borrows
   the translateX + transition *mechanics* of the mobile nav drawer above,
   not its backdrop), positioned off-screen by default and toggled via a
   plain `.ai-drawer-open` class the component manages on itself. */
.topbar-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--proc-ai, #0f9488);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .15s;
}
.topbar-ai:hover { opacity: .9; }
.topbar-ai i { font-size: 13px; }
@media (max-width: 860px) {
  .topbar-ai span { display: none; }
  .topbar-ai { padding: 8px 10px; }
}

pb-ai-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100vw);
  z-index: 90;              /* above the mobile nav drawer (60); below .modal-backdrop (200) so a modal opened from inside a chat reply still wins */
  transform: translateX(100%);
  transition: transform .25s ease;
  pointer-events: none;      /* off-screen when closed — nothing to intercept clicks on */
}
pb-ai-drawer.ai-drawer-open {
  transform: translateX(0);
  pointer-events: auto;
}
.ai-drawer-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(20, 25, 32, .14);
}
.ai-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.ai-drawer-head strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.ai-drawer-head strong i { color: var(--proc-ai, #0f9488); }
.ai-drawer-head-sub { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.ai-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
.ai-drawer-close:hover { background: var(--line); }
.ai-drawer-transcript {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-drawer-empty { color: var(--muted); font-size: 13px; margin: 0; }
.ai-msg {
  max-width: 92%;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.ai-msg :is(p, ul, ol) { margin: 0 0 6px; }
.ai-msg :is(p, ul, ol):last-child { margin-bottom: 0; }
.ai-msg-user {
  align-self: flex-end;
  background: var(--proc-ai, #0f9488);
  color: #fff;
}
.ai-msg-assistant {
  align-self: flex-start;
  background: var(--soft);
  color: var(--ink);
}
.ai-msg-error {
  align-self: flex-start;
  background: #fdecec;
  color: var(--danger, #c72525);
  border: 1px solid rgba(199, 37, 37, .25);
}
.ai-msg-pending {
  align-self: flex-start;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}
.ai-drawer-form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.ai-drawer-input {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13.5px;
  max-height: 120px;
}
.ai-drawer-input:focus { outline: 2px solid var(--proc-ai, #0f9488); outline-offset: 1px; }
.ai-drawer-send {
  flex: 0 0 auto;
  background: var(--proc-ai, #0f9488);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.ai-drawer-send:disabled { opacity: .55; cursor: default; }
@media (max-width: 520px) {
  pb-ai-drawer { width: 100vw; }
}

/* ── AI Assistant proposal diff card (Phase 2: propose/apply) ──────────────
   Rendered in place of a plain assistant bubble when a propose_* tool call
   comes back on /ai/ask's response. Deliberately visually distinct (dashed
   border, its own head row) from an ordinary reply — this represents a
   change that has NOT happened yet, and Apply/Discard are the only way it
   ever will. See ai-drawer.js's renderProposalCard(). */
.ai-msg-proposal {
  align-self: stretch;
  max-width: 100%;
  background: var(--panel);
  border: 1px dashed var(--proc-ai, #0f9488);
  border-radius: 10px;
  padding: 10px 12px;
}
.ai-proposal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--proc-ai, #0f9488);
  margin-bottom: 8px;
}
.ai-proposal-list, .ai-proposal-dates { list-style: none; margin: 0; padding: 0; }
.ai-proposal-event { margin-bottom: 8px; }
.ai-proposal-event:last-child { margin-bottom: 0; }
.ai-proposal-event strong { font-size: 13px; }
.ai-diff-fields { list-style: none; margin: 4px 0 0; padding: 0 0 0 4px; font-size: 12.5px; color: var(--muted); }
.ai-diff-field { font-weight: 600; color: var(--ink); }
.ai-diff-before { text-decoration: line-through; opacity: .7; }
.ai-diff-after { color: var(--proc-ai, #0f9488); font-weight: 600; }
.ai-proposal-summary { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.ai-proposal-conflict-note { color: var(--amber, #d97706); font-size: 12.5px; font-weight: 650; margin: 0 0 8px; display: flex; align-items: flex-start; gap: 6px; }
.ai-proposal-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}
.ai-proposal-dates li {
  background: var(--soft);
  border-radius: 6px;
  padding: 3px 8px;
}
.ai-proposal-empty { color: var(--muted); font-size: 13px; margin: 0; }
.ai-proposal-error { color: var(--danger, #c72525); font-size: 12.5px; margin: 8px 0 0; }
.ai-proposal-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ai-proposal-apply, .ai-proposal-discard {
  flex: 1 1 auto;
  border: 0;
  border-radius: 7px;
  padding: 7px 10px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}
.ai-proposal-apply { background: var(--proc-ai, #0f9488); color: #fff; }
.ai-proposal-discard { background: var(--soft); color: var(--ink); }
.ai-proposal-status {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
}
.ai-proposal-status-applied { color: var(--proc-ai, #0f9488); }
.ai-proposal-status-discarded { color: var(--muted); }
.ai-proposal-status-applying, .ai-proposal-status-discarding { color: var(--muted); font-style: italic; }

/* ═════════════════════════════════════════════════════════════════════════
   ── Booking Inbox (incoming-ui.png) ─────────────────────────────────────────
   Three-column workspace: saved-view queue (ib-list) + conversation
   workspace (ib-main) + contact/event/AI detail panel (ib-detail). Reuses
   the #app.workspace-outbox full-bleed shell mechanism exactly like Tasks/
   ListMaster/Outbox — see the note above that block.
   ═══════════════════════════════════════════════════════════════════════ */

pb-inbox-app {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ib-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }

/* ── Middle column: saved-view queue ──────────────────────────────────────── */
.ib-list {
  width: 360px;
  flex: 0 0 360px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
/* <pb-inbox-list> is .ib-list's only child (see inbox-shell.js's
   renderList()) and, like <pb-inbox-workspace> above, is an unstyled custom
   element — it needs to be a flex container in its own right (not just
   auto-blockified) so its own children (.ib-list-head, fixed-size, and
   .ib-list-scroll, flex:1 1 auto below) size against .ib-list's bounded
   height instead of .ib-list-scroll growing to fit every row. */
pb-inbox-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ib-list-head { flex-shrink: 0; padding: 16px 16px 10px; border-bottom: 1px solid var(--line); }
.ib-list-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ib-list-head-row h2 { margin: 0; font-size: 18px; }
.ib-list-search { margin-top: 10px; position: relative; }
.ib-list-search input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  background: var(--bg);
}
.ib-list-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; }
.ib-list-view-select { margin-top: 8px; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; font-weight: 700; background: var(--bg); }
/* min-height: 0 is load-bearing here: without it a flex item's default
   min-height is auto (sized to its content), so this pane grows to fit
   every row instead of shrinking to the space .ib-list hands it — the
   overflow then gets clipped by an ancestor's overflow:hidden instead of
   being reachable by scrolling this element. Same fix as .ib-thread below
   and every other scrollable flex pane in this file (.dbx-rows-scroll,
   .proc-designer-history, etc.). */
.ib-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ib-list-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  align-items: flex-start;
}
.ib-list-item:hover { background: var(--bg); }
.ib-list-item.active { background: color-mix(in srgb, var(--blue) 10%, transparent); border-left: 3px solid var(--blue); padding-left: 13px; }
.ib-list-item.unread { font-weight: 700; }
.ib-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
}
.ib-list-item-body { flex: 1 1 auto; min-width: 0; }
.ib-list-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ib-list-item-name { font-size: 14px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-list-item-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.ib-list-item-meta { font-size: 12.5px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-list-item-row2 { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ib-thread-count { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.ib-list-item-icons { margin-left: auto; display: flex; gap: 6px; color: var(--muted); font-size: 12px; }
.ib-list-item-icons .ib-unread-dot { color: var(--blue); font-size: 8px; align-self: center; }
.ib-sla-warning { color: var(--danger, #b91c1c); font-weight: 700; }
.ib-cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.ib-cat-badge.cat-concert { background: #e0e7ff; color: #3730a3; }
.ib-cat-badge.cat-private_event, .ib-cat-badge.cat-corporate { background: #ede9fe; color: #5b21b6; }
.ib-cat-badge.cat-wedding { background: #ffe4e6; color: #9f1239; }
.ib-cat-badge.cat-comedy, .ib-cat-badge.cat-theatrical, .ib-cat-badge.cat-experimental_art { background: #fef3c7; color: #92400e; }
.ib-cat-badge.cat-cannabis_event { background: #dcfce7; color: #166534; }
.ib-cat-badge.cat-other, .ib-cat-badge.cat-none { background: #e7e9ed; color: #4b5563; }

/* ── Main column: workspace ──────────────────────────────────────────────── */
.ib-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* [data-workspace-mount] and <pb-inbox-workspace> sit between .ib-main and
   .ib-workspace (see inbox-shell.js's renderShell()/renderWorkspace()).
   Neither is a direct flex child of .ib-main's own flex column at the point
   that matters (the mount div is, but an unstyled custom element defaults to
   display:inline and only gets auto-blockified when it's itself a direct
   flex child) — so without this, .ib-workspace's `flex:1 1 auto; min-height:
   0` below has no flex container to size against and the whole workspace
   grows to its content height instead of .ib-main's bounded height, the same
   bug the .ib-list-scroll/.ib-thread comments describe. */
.ib-main [data-workspace-mount],
pb-inbox-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ib-empty-main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 8px; }
.ib-empty-main i { font-size: 40px; opacity: .4; }

.ib-workspace { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ib-workspace-head { flex-shrink: 0; padding: 18px 24px 0; }
.ib-workspace-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ib-workspace-title-row h1 { margin: 0; font-size: 24px; }
.ib-workspace-subline { display: flex; align-items: center; gap: 14px; margin-top: 4px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.ib-workspace-subline i { margin-right: 4px; }

.ib-status-bar {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  flex-wrap: wrap;
}
.ib-status-field { display: flex; flex-direction: column; gap: 3px; }
.ib-status-field label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ib-status-field select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-weight: 700; }
.ib-owner-chip { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.ib-score-ring { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.ib-score-ring.high { color: var(--green, #15803d); }
.ib-score-ring.medium { color: #b45309; }
.ib-score-ring.low { color: var(--muted); }
.ib-claim-btn { margin-left: auto; }

.ib-tabs { flex-shrink: 0; display: flex; gap: 0; margin-top: 14px; border-bottom: 1px solid var(--line); padding: 0 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.ib-tabs a { flex: 0 0 auto; padding: 10px 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.ib-tabs a.active { color: var(--blue); border-bottom-color: var(--blue); }
.ib-tabs a:hover { color: var(--ink); }

.ib-tab-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ── Conversation ─────────────────────────────────────────────────────────── */
/* <pb-inbox-conversation> (mounted directly into .ib-tab-body, see
   inbox-workspace.js's mountTab()) is a direct flex child so it gets
   auto-blockified, but that alone doesn't make it grow to fill .ib-tab-body
   or become a flex container for its own .ib-conversation child — same fix
   as <pb-inbox-list>/<pb-inbox-workspace> above. */
pb-inbox-conversation { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ib-conversation { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* min-height: 0 — see the comment on .ib-list-scroll above; same bug, same fix. */
.ib-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.ib-msg { max-width: 640px; }
.ib-msg.outbound { align-self: flex-end; }
.ib-msg-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.ib-msg-head .name { font-weight: 750; }
.ib-msg-head .via { color: var(--muted); }
.ib-msg-body { padding: 12px 14px; border-radius: 10px; background: var(--bg); white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.ib-msg-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.ib-msg-body a:hover { color: var(--ink); }
.ib-msg-body-html { padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.ib-email-frame { display: block; width: 100%; height: min(560px, 55vh); min-height: 280px; border: 0; background: #fff; }
.ib-msg.outbound .ib-msg-body { background: color-mix(in srgb, var(--blue) 12%, var(--panel)); }
.ib-msg.internal_note .ib-msg-body { background: #fef9c3; border: 1px dashed #d4af17; }
.ib-msg.system .ib-msg-body { background: transparent; color: var(--muted); font-style: italic; padding: 2px 0; }
.ib-msg.failed .ib-msg-body { background: #fef2f2; border: 1px solid #fecaca; }
.ib-msg-subject { font-size: 12px; font-weight: 750; margin: 0 0 5px; }
.ib-msg-error { color: #991b1b; font-size: 12px; margin-top: 5px; max-width: 520px; }
.ib-presence-banner { flex-shrink: 0; padding: 6px 24px; background: #fef3c7; color: #92400e; font-size: 12.5px; font-weight: 700; }
.ib-stale-warning { flex-shrink: 0; padding: 8px 24px; background: #fee2e2; color: #991b1b; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; justify-content: space-between; }

.ib-composer { flex-shrink: 0; border-top: 1px solid var(--line); padding: 10px 24px 16px; }
.ib-composer-modes { display: flex; gap: 4px; margin-bottom: 6px; }
.ib-composer-modes button { padding: 6px 10px; border: none; background: none; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; }
.ib-composer-modes button.active { color: var(--blue); border-bottom-color: var(--blue); }
.ib-composer-subject { width: 100%; margin-bottom: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.ib-composer textarea { width: 100%; min-height: 70px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; }
.ib-composer-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ib-composer-attachments > span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.ib-composer-attachments > span > button { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); padding: 0 2px; cursor: pointer; }
.ib-composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ib-composer-tools { display: flex; gap: 6px; color: var(--muted); }
.ib-composer-tools button { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px 6px; font-size: 14px; }
.ib-composer-tools button:hover { color: var(--ink); }

/* ── Bottom action bar ─────────────────────────────────────────────────────── */
/* Tiered ranking (primary/secondary/overflow) — see
   inbox-shared.js::computeActionBar() — keeps the 1-2 next-legal actions
   visually dominant instead of a flat wall of buttons. */
/* flex-wrap (not overflow-x: auto) — the tiered bar only ever shows ~4-5
   buttons now, so wrapping to a second line on a narrow viewport reads
   better than horizontal scrolling. Also load-bearing for the overflow
   menu below: setting overflow-x without overflow-y forces the UA to
   compute overflow-y as auto too (CSS Overflow spec), which would clip
   .ib-overflow-menu's absolutely-positioned popover (bottom: calc(100% +
   6px) — deliberately positioned *outside* this container's own box). */
.ib-action-bar { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--panel); }
.ib-action-bar .button { flex: 0 0 auto; }
.ib-action-bar .button.primary-green { background: var(--green, #16a34a); border-color: var(--green, #16a34a); color: #fff; }
.ib-overflow { position: relative; flex: 0 0 auto; }
.ib-overflow-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Was 20 — too low: it sat behind other always-mounted floating chrome,
     most notably pb-ai-drawer (z-index: 90), so the popover could open
     unreachable behind the AI Assistant tab/drawer. 95 clears every piece
     of persistent app chrome (mobile nav drawer 60, AI drawer 90) while
     staying below real modal overlays (.modal-backdrop and friends, 200+)
     so a dialog opened from inside the menu still wins. */
  z-index: 95;
}
.ib-overflow-menu button {
  background: none;
  border: none;
  color: var(--ink);
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ib-overflow-menu button:hover { background: var(--bg); }
.ib-overflow-menu button i { width: 14px; text-align: center; color: var(--muted); }
/* The [hidden] attribute toggles the menu (see inbox-workspace.js's
   this._overflowOpen) — an author-stylesheet display:flex above would
   otherwise win over the UA [hidden]{display:none} default. */
.ib-overflow-menu[hidden] { display: none; }

/* ── Right column: detail panel ───────────────────────────────────────────── */
.ib-detail { width: 300px; flex: 0 0 300px; border-left: 1px solid var(--line); overflow-y: auto; padding: 18px; background: var(--panel); }
.ib-detail-section { margin-bottom: 22px; }
.ib-detail-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ib-detail-section-head h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ib-detail-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 4px 0; }
.ib-detail-row .k { color: var(--muted); }
.ib-detail-row .v { font-weight: 600; text-align: right; }
.ib-ai-panel { background: color-mix(in srgb, var(--blue) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line)); border-radius: 8px; padding: 12px 14px; }
.ib-ai-confidence { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ib-routing-explanation { font-size: 13px; margin-top: 8px; padding: 8px 10px; background: var(--bg); border-radius: 6px; }
.ib-conflict-warning { font-size: 12.5px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 8px; margin-top: 6px; }

/* ── Responsive: tablet/mobile — collapse to a single active screen ───────── */
@media (max-width: 1100px) {
  .ib-detail { display: none; }
}
@media (max-width: 860px) {
  /* Same reasoning as the outbox/messages pages just above: on mobile the
     shell doesn't stretch #app to a definite flex height (pb-inbox-app is
     display:block here, per the shared mobile override above), so each
     pane needs its own viewport-relative max-height + scroll instead of
     assuming an ancestor will hand it 100% via flex. */
  .ib-body { display: block; height: auto; overflow: visible; }
  .ib-body.ib-body-list-active .ib-main { display: none; }
  .ib-body:not(.ib-body-list-active) .ib-list { display: none; }
  .ib-list { width: 100%; flex: none; max-height: 78vh; overflow-y: auto; border-right: none; }
  .ib-main { display: block; max-height: 78vh; overflow-y: auto; }
  .ib-workspace { display: block; }
  .ib-tab-body { max-height: none; overflow: visible; }
  .ib-thread { max-height: 40vh; }
  .ib-back-to-list { display: inline-flex !important; margin-left: 16px; }
}
.ib-back-to-list { display: none; background: none; border: none; color: var(--blue); font-weight: 700; cursor: pointer; padding: 4px 0 10px; align-items: center; gap: 6px; }

/* ── Opportunities (prospecting/sales-pipeline CRM) ──────────────────────── */
/* KPI row reuses .kpi-card/.kpi-icon/.kpi-label/.kpi-value from Contacts —
   only the grid wrapper and the small delta-subtext line are new here. */
.opp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kpi-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.kpi-card.kpi-warn .kpi-icon { background: #ffedc2; color: #a06400; }

/* Second dashboard row: Venue Availability Match / Suggestions / Recent
   Notes, three panels wide on desktop, stacking under the same breakpoints
   .dashboard-grid already collapses at (see the two media-query edits
   above) rather than inventing a third responsive rule. */
.opp-panel-row-3 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.opp-score-high { color: var(--green); font-weight: 800; }
.opp-score-mid  { color: var(--amber); font-weight: 800; }
.opp-score-low  { color: var(--red); font-weight: 800; }

.opp-suggestion-list, .opp-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.opp-suggestion { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.4; }
.opp-suggestion i { color: var(--amber); margin-top: 2px; flex: none; }
.opp-suggestion-high i { color: var(--red); }

.opp-note-item { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.opp-note-item:last-child { border-bottom: none; padding-bottom: 0; }
.opp-note-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.opp-note-item p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }

/* Conference list (Phase 3) — filter bar + tabs. */
.opp-conf-filters { flex-wrap: wrap; gap: 12px; }
.opp-conf-filters [data-tab] {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.opp-conf-filters [data-tab].active { background: var(--blue); border-color: var(--blue); color: #fff; }
.opp-conf-filters input[type="search"], .opp-conf-filters input[type="text"] { min-width: 0; }

/* Conference detail (Phase 3) — Key Facts, Peak Side-Event Windows, Side
   Event Signals, Open Tasks, and the small inline add-forms shared by
   several of those panels. */
.opp-fact-list, .opp-signal-list, .opp-task-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.opp-fact-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.opp-fact-item i.fa-check { color: var(--green); margin-top: 2px; flex: none; }
.opp-fact-item span { flex: 1; }
.opp-fact-source, .opp-fact-remove { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; flex: none; }
.opp-fact-remove:hover { color: var(--red); }

.opp-window-bands { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.opp-window-band { flex: 1 1 160px; min-width: 140px; }
.opp-window-band-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 6px; }
.opp-window-dates { display: flex; flex-wrap: wrap; gap: 6px; }
.opp-window-date { display: inline-block; padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--soft); }
.opp-window-date.opp-activity-very_high { background: #d3f1df; color: #0c7a3c; }
.opp-window-date.opp-activity-high { background: #ffedc2; color: #a06400; }

.opp-signal-item strong { display: block; font-size: 13.5px; }

.opp-task-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.opp-task-item label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.opp-task-item.opp-task-done label { color: var(--muted); text-decoration: line-through; }

.opp-inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.opp-inline-form input, .opp-inline-form textarea { flex: 1 1 200px; min-width: 0; }
.opp-inline-form-wide { flex-direction: column; align-items: flex-start; }
.opp-inline-form-wide textarea { width: 100%; }
.opp-inline-form button { flex: none; }

/* Add Company modal — existing-vs-new toggle + live search results. */
.opp-company-mode { display: flex; gap: 18px; font-size: 13.5px; font-weight: 600; }
.opp-company-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 180px; overflow-y: auto; }
.opp-company-result { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.opp-company-result:hover { border-color: var(--blue); }

/* Company detail (Phase 4) — main+rail layout (reuses the same grid shape
   as .promote-overview-layout, renamed under this module's own opp- prefix
   so the two stay independently tunable), avatar-initials chips for Key
   Contacts, and the small panels unique to this page (Company Intelligence,
   Venue Fit tag cloud, Activity feed). Reused by Phase 5's Opportunity
   detail (also spec'd a "right sidebar"). */
.opp-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
  gap: 20px;
  align-items: start;
}
.opp-detail-main, .opp-detail-rail { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.opp-avatar {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; text-transform: uppercase; margin-right: 8px;
}
.opp-contact-name-cell { display: flex; align-items: center; }

.opp-fact-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.opp-fact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.opp-fact-row span:last-child { font-weight: 600; text-align: right; }
.opp-company-description { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }

.opp-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.opp-activity-item { border-bottom: 1px solid var(--line); padding: 0 0 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.opp-activity-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.opp-activity-item strong { font-size: 13.5px; }

.opp-inline-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; flex: none; }

@media (max-width: 900px) {
  .opp-detail-layout { grid-template-columns: 1fr; }
  .opp-detail-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 600px) {
  .opp-detail-rail { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .opp-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .opp-window-bands { flex-direction: column; }
}

.pill-danger { background: #fde0e0; color: var(--red, #b91c1c); }

/* ── Pipeline board (Phase 5) — reuses .pipeline-board/.pipe-col/.pipe-card
   (event-views.js's Kanban, app.css:891) verbatim for the grid/column/card
   shell; everything below is card-content styling unique to Opportunities
   cards (probability, value, owner/date meta, note/task icon counts,
   warnings, the accessible stage <select>, and drag-over feedback). */
.opp-pipe-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.opp-pipe-filters input[type="search"] { flex: 1 1 220px; min-width: 0; }

.opp-pipeline-board { grid-template-columns: repeat(8, minmax(230px, 1fr)); overflow-x: auto; }
.opp-pipe-col.opp-pipe-col-over { outline: 2px dashed var(--blue); outline-offset: -4px; }
.opp-pipe-col-total { margin: -4px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.opp-pipe-add { width: 100%; margin-top: 4px; }

.opp-pipe-card { cursor: pointer; }
.opp-pipe-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px !important; }
.opp-pipe-card-head strong { margin-bottom: 0 !important; }
.opp-pipe-prob { font-size: 12px; font-weight: 800; color: var(--blue); }
.opp-pipe-name { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.opp-pipe-conf { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px !important; }
.opp-pipe-conf i { margin-right: 4px; }
.opp-pipe-value { display: block; font-weight: 800; margin-bottom: 8px !important; }
.opp-pipe-meta { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px !important; }
.opp-pipe-meta span { margin-bottom: 0 !important; display: inline; }
.opp-pipe-icons { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.opp-pipe-warnings { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.opp-pipe-warning { font-size: 11px; font-weight: 700; color: var(--amber, #a06400); display: flex; align-items: center; gap: 4px; }
.opp-pipe-warning-date_conflict, .opp-pipe-warning-needs_follow_up { color: var(--red, #b91c1c); }
.opp-pipe-actions { display: flex; flex-direction: column; gap: 6px; }
.opp-pipe-stage-select { width: 100%; font-size: 12px; }

/* ── Opportunity detail (Phase 5, opportunity-4.png) ─────────────────────── */
.opp-header-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.opp-header-fact { display: flex; flex-direction: column; gap: 4px; }
.opp-header-fact .muted { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.opp-header-fact strong { font-size: 14px; }

.opp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.opp-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 4px; margin-right: 18px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.opp-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.opp-qual-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opp-qual-item label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.opp-qual-item input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opp-qual-item i { color: var(--muted); }
.opp-qual-item i.opp-qual-done { color: var(--green); }

.opp-dm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opp-dm-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.opp-dm-item .badge { margin-left: 0; }

.opp-room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.opp-room-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; cursor: pointer; text-align: left;
}
.opp-room-card:disabled { cursor: default; }
.opp-room-card.opp-room-recommended { border-color: var(--green); }
.opp-room-card.opp-room-selected { box-shadow: 0 0 0 2px var(--blue) inset; }
.opp-fact-row-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 8px; }
.opp-budget-fit { font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--soft); margin-bottom: 14px; }
.opp-budget-fit-within_range { background: #d3f1df; color: #0c7a3c; }
.opp-budget-fit-above_range, .opp-budget-fit-below_range { background: #ffedc2; color: #a06400; }

.opp-note-tabs { flex-wrap: wrap; gap: 4px; }
.opp-tab-sm {
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.opp-tab-sm.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.opp-note-pin-toggle { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 0 0 4px; }
.opp-note-pin-toggle:hover { color: var(--amber, #a06400); }

.opp-linked-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.opp-linked-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.opp-linked-item i { color: var(--muted); margin-top: 2px; }
.opp-linked-item > div { display: flex; flex-direction: column; gap: 2px; }
.opp-linked-item .muted { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }

.opp-next-action { font-size: 13.5px; margin: 0 0 10px; }
.opp-risk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opp-risk-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--red, #b91c1c); }

.opp-quick-quote button { width: 100%; }

@media (max-width: 1320px) {
  .opp-pipeline-board { grid-template-columns: repeat(8, minmax(210px, 1fr)); }
}
@media (max-width: 760px) {
  .opp-header-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opp-tabs { overflow-x: auto; }
}

/* ── Notes workspace (Phase 6, opportunity-6.png) ─────────────────────────
   Three panes when width permits: note list / editor / context. Below
   1100px the context pane drops under the editor; below 760px all three
   stack, list-first, same "stack, don't lose content" rule every other
   Opportunities page's responsive breakpoints already follow. */
.opp-notes-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1.4fr) minmax(220px, 320px);
  gap: 16px;
  align-items: start;
}
.opp-notes-list-pane { display: flex; flex-direction: column; max-height: calc(100vh - 220px); min-height: 400px; }
.opp-notes-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.opp-notes-filters input[type="search"] { flex: 1 1 100%; }
.opp-notes-filters select, .opp-notes-filters input[type="text"] { font-size: 12.5px; }
.opp-notes-list { overflow-y: auto; flex: 1; padding: 6px; }

.opp-notes-list-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); border-radius: 8px; padding: 10px 8px; cursor: pointer; font: inherit; color: inherit;
}
.opp-notes-list-item:hover { background: var(--soft); }
.opp-notes-list-item.active { background: #e7f0ff; }
.opp-notes-list-item-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.opp-notes-list-item-head i { color: var(--amber, #a06400); }
.opp-notes-list-contexts { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.opp-notes-list-contexts .pill { margin: 0; }
.opp-notes-list-preview { font-size: 13px; margin: 0 0 4px; color: var(--ink); line-height: 1.4; }

.opp-notes-editor-pane, .opp-notes-context-pane { min-height: 400px; }
.opp-notes-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; min-height: 360px; color: var(--muted); text-align: center; }
.opp-notes-empty i { font-size: 32px; }

.opp-notes-editor-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.opp-notes-editor-head-actions { margin-left: auto; display: flex; gap: 8px; }

.opp-notes-link-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.opp-notes-link-chip { display: inline-flex; align-items: center; gap: 6px; }
.opp-notes-link-chip button { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 13px; line-height: 1; }
.opp-notes-link-chip button:hover { color: var(--red, #b91c1c); }

.opp-notes-toolbar { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px 8px 0 0; border-bottom: none; padding: 6px; background: var(--soft); }
.opp-notes-toolbar button { background: none; border: none; width: 30px; height: 30px; border-radius: 6px; color: var(--ink); cursor: pointer; }
.opp-notes-toolbar button:hover { background: rgba(0,0,0,.06); }
.opp-notes-toolbar-spacer { flex: 1; }
.opp-notes-toolbar button.active { background: var(--blue); color: #fff; }
.opp-notes-toolbar > button[data-toggle-preview] { width: auto; padding: 0 10px; font-size: 12.5px; font-weight: 700; }

.opp-notes-textarea {
  width: 100%; min-height: 260px; resize: vertical; border: 1px solid var(--line); border-radius: 0 0 8px 8px;
  padding: 12px; font: inherit; font-size: 14px; line-height: 1.5;
}
.opp-notes-preview {
  min-height: 260px; border: 1px solid var(--line); border-radius: 0 0 8px 8px; padding: 12px; background: #fff;
}
.opp-notes-preview .md-heading { margin: 12px 0 6px; }
.opp-notes-preview .md-list, .opp-notes-preview .md-checklist { margin: 0 0 10px 20px; padding: 0; line-height: 1.6; }
.opp-notes-preview .md-checklist { list-style: none; margin-left: 4px; }
.opp-notes-preview .md-checklist li { display: flex; align-items: baseline; gap: 6px; }
.opp-notes-preview p { margin: 0 0 10px; line-height: 1.6; }

.opp-notes-tags-field { display: block; margin: 10px 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.opp-notes-tags-field input { display: block; width: 100%; margin-top: 4px; font-weight: 400; color: var(--ink); }

.opp-notes-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.opp-notes-history { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.opp-notes-version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.opp-notes-version-item { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.opp-notes-version-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.opp-notes-version-body { font-size: 13px; color: var(--muted); margin: 0; }

.opp-notes-context-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.opp-notes-context-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.opp-notes-context-item i { color: var(--muted); margin-top: 2px; }
.opp-notes-context-item .muted { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; display: block; }
.opp-notes-ai-panel { background: var(--soft); }

@media (max-width: 1100px) {
  .opp-notes-workspace { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  .opp-notes-context-pane { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 760px) {
  .opp-notes-workspace { grid-template-columns: 1fr; }
  .opp-notes-list-pane { max-height: 320px; }
}

/* ── AI Research panel (Phase 7) — <pb-opportunities-ai-research>, embedded
   into Discover / Conference detail / Company detail. Reuses .panel/.badge/
   .button throughout; only the job-list rows and the review modal's
   checklist sections are new. ────────────────────────────────────────────── */
.opp-ai-research-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.opp-ai-research-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.opp-ai-research-jobs li { border-top: 1px solid var(--line); padding-top: 10px; }
.opp-ai-research-jobs li:first-child { border-top: none; padding-top: 0; }
.opp-ai-research-job-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.opp-ai-research-job-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }

.opp-ai-review { max-height: 65vh; overflow-y: auto; }
.opp-ai-review-section { margin-bottom: 18px; }
.opp-ai-review-section h3 { margin: 0 0 8px; font-size: 14px; }
.opp-ai-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.opp-ai-review-list li { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.opp-ai-review-list li:last-child { border-bottom: none; padding-bottom: 0; }
.opp-ai-review-list label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.opp-ai-review-list label.opp-ai-imported { cursor: default; opacity: 0.7; }
.opp-ai-review-list input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; }
.opp-ai-review-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ── Phase 8: Opportunity Score panel (opportunity-detail.js right rail) ──
   Reuses .panel/.pill/.badge/.opp-score-* (scoreTone(), shared.js) — only
   the component-bar list and the total-score chip are new. ─────────────── */
.opp-score-panel .section-head { align-items: center; }
.opp-score-total { font-size: 22px; font-weight: 800; line-height: 1; }
.opp-score-total small { font-size: 12px; font-weight: 600; color: var(--muted); }
.opp-score-components { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opp-score-component-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.opp-score-bar { height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.opp-score-bar span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.opp-score-reasons { list-style: disc; margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }