/* Zo design tokens, sourced from the live homepage (ts-packages/www). The whole app is server-rendered
   HTML, so these tokens + base styles are the single source of truth that makes every surface read as a
   Zo surface: warm-cream paper, EB Garamond display serif, Hanken Grotesk body, Matina Rounded ledes,
   Berkeley Mono for data, a soft aurora wash and a faint dot grid behind it all. */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

/* The two licensed homepage faces, served locally (see src/index.ts) so they render exactly. */
@font-face { font-family: "Matina Rounded"; src: url("/static/fonts/matina-rounded.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Berkeley Mono"; src: url("/static/fonts/berkeley-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  /* Warm-cream paper palette — identical hex to the homepage. */
  --background: #faf9f5;
  --foreground: #3d3929;
  --card: #fffdf8;
  --card-foreground: #3d3929;
  --popover: #fffdf8;
  --popover-foreground: #3d3929;
  --muted: #ede9de;
  --muted-foreground: #83827d;
  --border: #c5c4be;
  --input: #c5c4be;

  /* Interactive ink. "Primary" is the warm graphite of the homepage, not a saturated brand blue:
     primary buttons and the active nav pill read as warm dark, with cream type on top. */
  --primary: #3d3929;
  --primary-foreground: #faf9f5;
  --secondary: #f4f2ea;
  --secondary-foreground: #57534a;
  --accent: #ede9de;
  --accent-foreground: #3d3929;

  /* Status hues. Positive borrows the homepage's "free credits" green; destructive is a warm red. */
  --positive: oklch(0.52 0.1 155);
  --positive-soft: oklch(0.52 0.1 155 / 0.14);
  --destructive: oklch(0.55 0.16 25);
  --destructive-foreground: #fffdf8;

  --ring: oklch(0.74 0.04 80);
  --ring-shadow: 0 0 0 3px oklch(0.74 0.04 80 / 0.4);

  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "EB Garamond", Georgia, serif;
  --font-display: "Matina Rounded", Georgia, serif;
  --font-mono: "Berkeley Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  --radius: 0.875rem;

  /* Warm, layered shadows (homepage uses rgba(61,57,41,…) for the paper-on-paper drop). */
  --shadow-sm: 0 1px 2px rgba(61, 57, 41, 0.05), 0 1px 3px rgba(61, 57, 41, 0.04);
  --shadow-md: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 3px rgba(61, 57, 41, 0.05), 0 8px 24px rgba(61, 57, 41, 0.08);
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 1px 3px rgba(61, 57, 41, 0.05), 0 4px 12px rgba(61, 57, 41, 0.05), 0 18px 40px rgba(61, 57, 41, 0.08);

  /* Five-colour hero aurora — the exact homepage hues, rose included. */
  --aurora-cyan: oklch(0.84 0.042 236);
  --aurora-gold: oklch(0.92 0.036 96);
  --aurora-mint: oklch(0.9 0.036 172);
  --aurora-violet: oklch(0.82 0.048 312);
  --aurora-rose: oklch(0.85 0.044 12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--foreground); text-decoration: none; }
a:hover { color: var(--foreground); }

.muted { color: var(--muted-foreground); }
.mono { font-family: var(--font-mono); }

/* Display serif. The big marketing headings (hero, public sections, login) use EB Garamond with the
   homepage's graphite-metallic text fill; dense admin headings use the plain serif without the foil. */
.metal {
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.025em; line-height: 1.06;
  background: linear-gradient(170deg, rgb(52 52 64) 0%, rgb(88 88 100) 10%, rgb(58 58 72) 20%, rgb(100 100 112) 32%, rgb(64 64 78) 42%, rgb(92 92 106) 52%, rgb(54 54 68) 62%, rgb(86 86 100) 72%, rgb(56 56 70) 82%, rgb(80 80 94) 91%, rgb(60 60 74) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 -1px 0 rgb(255 255 255 / 0.35), 0 1px 1px rgb(0 0 0 / 0.3), 0 3px 6px rgb(0 0 0 / 0.12);
}

.center-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }

.card {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 32px; width: 100%; max-width: 400px;
}

.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-foreground);
}

h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin: 8px 0 4px; }

label { display: block; font-size: 14px; margin-bottom: 6px; }

input[type="email"],
input[type="text"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="number"] {
  width: 100%; padding: 10px 12px; font-family: var(--font-sans); font-size: 15px;
  color: var(--foreground); background: var(--card); border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px); outline: none;
}
input[type="email"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="number"]:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }

.note { margin-top: 16px; font-size: 13px; }
.note-sm { margin-top: 6px; font-size: 12px; }

/* Inline action form (e.g. grant credit on the Credits page). */
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; }
.form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.form-row .field { flex: 1 1 180px; min-width: 0; }
.form-row label { margin-bottom: 6px; }
.form-row .btn-skeu { flex: 0 0 auto; align-self: flex-end; }
/* Bare <select> inside a form-row field: match the global text-input treatment, otherwise it renders
   as an unstyled browser default next to design-system inputs (the Merch form complaint). */
.form-row .field select {
  width: 100%; padding: 10px 12px; font-family: var(--font-sans); font-size: 15px;
  color: var(--foreground); background: var(--card); border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px); outline: none; cursor: pointer;
}
.form-row .field select:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
/* Helper text under a select, and a compact inline checkbox that sits in the row like a control
   rather than a full-width bar. */
.field-hint { margin-top: 6px; font-size: 12px; color: var(--muted-foreground); }
.form-row .check-row {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--card);
  font-size: 13.5px; cursor: pointer; flex: 0 0 auto; align-self: flex-end;
}
.form-row .check-row input { margin: 0; flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--foreground); }
.flash { margin-top: 14px; font-size: 14px; display: none; }
.flash.show { display: block; }
.flash.ok { color: var(--positive); }
.flash.err { color: var(--destructive); }

.badge {
  display: inline-block; font-family: var(--font-mono); font-size: 12px; padding: 2px 10px;
  border-radius: 999px; background: var(--muted); color: var(--secondary-foreground);
}
.badge-live { background: var(--positive-soft); color: var(--positive); }
.badge-warn { background: oklch(0.55 0.16 25 / 0.1); color: var(--destructive); }
.badge-community { background: oklch(0.62 0.14 40 / 0.13); color: #c96442; }
.badge-direct {
  background: oklch(0.62 0.14 40 / 0.12); color: #c96442;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; vertical-align: middle;
}
.warn { color: var(--destructive); }

/* Integration "wired" pills: whether a city is connected to Luma / Loops. */
.wire {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; padding: 1px 7px 1px 16px;
  border-radius: 999px; border: 1px solid var(--border); position: relative; margin-right: 4px;
}
.wire::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 50%; background: var(--muted-foreground);
}
.wire-on { color: var(--positive); border-color: oklch(0.52 0.1 155 / 0.35); }
.wire-on::before { background: var(--positive); }
.wire-off { color: var(--muted-foreground); }

/* ── Authenticated app shell ───────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 248px 1fr; height: 100dvh; overflow: hidden; }

.sidebar {
  display: flex; flex-direction: column; border-right: 1px solid var(--border);
  background-color: var(--secondary);
  background-image: radial-gradient(color-mix(in oklch, var(--primary) 7%, transparent) 1px, transparent 1px);
  background-size: 6px 6px;
  padding: 20px 14px;
  height: 100dvh; overflow-y: auto; min-height: 0;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; }

.nav { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-foreground); padding: 0 12px 6px;
}
.nav-item {
  display: block; padding: 8px 12px; border-radius: calc(var(--radius) - 6px);
  color: var(--secondary-foreground); font-size: 14px; font-weight: 500;
}
.nav-item:hover { background: var(--accent); color: var(--accent-foreground); }
.nav-item.active { background: var(--primary); color: var(--primary-foreground); }

.sidebar-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.who { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; text-decoration: none; color: inherit; padding: 7px 9px; margin: 0 -9px; border-radius: calc(var(--radius) - 6px); transition: background 120ms ease; }
a.who:hover { background: var(--accent); }
a.who.active { background: var(--accent); }
.who-email { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Admin "View as": switcher in the sidebar foot + a banner shown while impersonating. */
.viewas-wrap { position: relative; }
.viewas-toggle {
  width: 100%; text-align: left; font-family: var(--font-sans); font-size: 12.5px;
  padding: 7px 10px; background: transparent; color: var(--muted-foreground);
  border: 1px dashed var(--border); border-radius: calc(var(--radius) - 6px); cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.viewas-toggle:hover { background: var(--accent); color: var(--foreground); border-color: var(--muted-foreground); }
.viewas-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 230px;
  background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
  box-shadow: 0 12px 28px rgba(61, 57, 41, 0.16); padding: 0; max-height: 380px; overflow-y: auto;
}
.viewas-searchwrap { position: sticky; top: 0; z-index: 1; padding: 8px; background: var(--card); border-bottom: 1px solid var(--border); }
.viewas-search {
  width: 100%; font-family: var(--font-sans); font-size: 12.5px; padding: 7px 9px;
  background: var(--background); color: var(--foreground); border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 7px); transition: box-shadow 120ms ease, border-color 120ms ease;
}
.viewas-search:focus { outline: none; border-color: var(--muted-foreground); box-shadow: 0 0 0 3px oklch(0.74 0.04 80 / 0.4); }
.viewas-list { padding: 6px; }
.viewas-group {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted-foreground); padding: 8px 9px 4px;
}
.viewas-loading { padding: 12px; font-size: 12px; color: var(--muted-foreground); }
.viewas-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  text-align: left; font-family: var(--font-sans); font-size: 13px; color: var(--foreground);
  background: transparent; border: 0; border-radius: calc(var(--radius) - 8px); padding: 7px 9px; cursor: pointer;
}
.viewas-opt:hover { background: var(--accent); }
.viewas-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.viewas-opt-sub { font-size: 11px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.viewas-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 24px; background: var(--secondary); border-bottom: 2px solid #c96442;
  color: var(--foreground); font-size: 13px;
}
.viewas-bar-txt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.viewas-bar strong { font-weight: 600; }
.viewas-exit {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; padding: 5px 12px; cursor: pointer;
  background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: calc(var(--radius) - 6px); white-space: nowrap;
}
.viewas-exit:hover { filter: brightness(1.12); }

.main { display: flex; flex-direction: column; min-width: 0; height: 100dvh; overflow-y: auto; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--card) 86%, transparent); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); }
.topbar::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--primary); opacity: 0; transition: width 0.18s ease, opacity 0.18s ease; }
body.nav-loading .topbar::after { width: 100%; opacity: 1; transition: width 0.9s cubic-bezier(0.1,0.7,0.3,1); }
body.nav-loading .content { opacity: 0.55; transition: opacity 0.12s ease; }
.content { transition: opacity 0.12s ease; }
.topbar-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.topbar-spacer { flex: 1; }
.btn-ghost {
  font-family: var(--font-sans); font-size: 13px; padding: 7px 12px; background: var(--card);
  color: var(--foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) - 6px); cursor: pointer;
}
.btn-ghost:hover { background: var(--accent); }
/* Data/table pages fill the available width so wide tables breathe. Reading-oriented pages (forms,
   prose) opt into a comfortable measure with .content.narrow instead of stretching edge to edge. */
.content { padding: 28px 32px; width: 100%; }
.content.narrow { max-width: 920px; }

/* Drawer chrome (mobile off-canvas sidebar). */
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; background: var(--card);
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 6px); cursor: pointer;
  color: var(--foreground); font-size: 20px; line-height: 1;
}
.icon-btn:hover { background: var(--accent); }
.hamburger { display: none; flex-direction: column; gap: 4px; font-size: 0; }
.hamburger span { display: block; width: 16px; height: 2px; background: var(--foreground); border-radius: 2px; }
.drawer-close { display: none; }
.scrim { display: none; }

.block { margin-bottom: 32px; }
.block h2 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin: 0 0 12px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.block-head h2 { margin: 0; }

/* Stat row */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.stat-n { font-family: var(--font-serif); font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.stat-l { margin-top: 6px; font-size: 13px; color: var(--muted-foreground); }
/* Provenance one-liner under a stat: where the number comes from, in the tile itself. */
.stat-note { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--muted-foreground); opacity: 0.8; }

/* Referral funnel: three stages (Views → Signups → Purchases) separated by arrow cells that carry the
   conversion rate. Compact tiles; rates in full-contrast ink (var(--accent) is a near-invisible beige
   on this paper, so it must never be used for type). Collapses to a vertical stack on narrow screens. */
.funnel { display: flex; align-items: stretch; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.funnel-stage { flex: 1 1 110px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 12px 14px; text-align: center; }
.funnel-n { font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.funnel-l { margin-top: 4px; font-size: 12px; color: var(--secondary-foreground); }
.funnel-arrow { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; }
.funnel-rate { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--foreground); }
.funnel-rate::before { content: "→ "; color: var(--muted-foreground); font-weight: 400; }
.funnel-cap { font-size: 10.5px; color: var(--secondary-foreground); }

/* The compact Cello sync control on the Referrals page: one right-aligned line above the sub-tabs. */
.sync-mini { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 10px; font-size: 12.5px; }
.sync-mini .flash { margin-top: 0; font-size: 12.5px; }
.sync-mini .muted { white-space: nowrap; }
.conv-import { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.conv-import input[type="file"] { font-size: 13px; color: var(--muted-foreground); }
@media (max-width: 640px) {
  .funnel { flex-direction: column; }
  .funnel-arrow { flex-direction: row; gap: 6px; padding: 4px 0; }
  .funnel-rate::before { content: "↓ "; }
}

.nc-amb-group { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* Searchable chip multiselect (create-city ambassadors, event-modal cohost picker). */
.msel { position: relative; }
.msel-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 6px); cursor: text; }
.msel-box:focus-within { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.msel-box input { flex: 1; min-width: 140px; border: none; outline: none; background: transparent; padding: 3px 2px; font-family: var(--font-sans); font-size: 13.5px; color: var(--foreground); }
.msel-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px 2px 9px; font-size: 12.5px; background: var(--secondary); border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; }
.msel-x { border: none; background: none; padding: 0 2px; font-size: 14px; line-height: 1; color: var(--muted-foreground); cursor: pointer; }
.msel-x:hover { color: var(--foreground); }
.msel-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 220px; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 6px); box-shadow: var(--shadow-md); padding: 4px; }
.msel-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; padding: 7px 9px; font-family: var(--font-sans); font-size: 13px; color: var(--foreground); border-radius: calc(var(--radius) - 8px); cursor: pointer; }
.msel-item[hidden] { display: none; }
.msel-item:hover { background: var(--secondary); }
.msel-item .muted { margin-left: auto; font-size: 11.5px; }
.msel-empty { padding: 8px 9px; font-size: 12.5px; }

/* City strip */
.city-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.city-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1); }
.city-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.city-name { font-weight: 600; margin-bottom: 4px; }
.city-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13px; }

/* Program Org Chart (Roster): a subtle top-right button opens a modal with a classic branching
   chart — owner top-center, a connected row of branches (one per city, headed by its lead), that
   city's ambassadors stacked in a column under the lead. Connectors are the classic CSS org-chart
   pseudo-element borders; wide charts scroll horizontally inside the modal. */
.org-launch { display: flex; justify-content: flex-end; margin: 0 0 12px; }
/* Inline add-admin form, revealed by the Add admin button in the Admins block head. */
.admin-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.admin-add[hidden] { display: none; }
.admin-add input { max-width: 240px; }
.admin-add .add-note { flex-basis: 100%; }
.modal-org { max-width: calc(100vw - 32px); width: fit-content; min-width: 340px; }
.org-modal-body { max-height: 74vh; overflow: auto; }
.org-chart { width: max-content; margin: 0 auto; padding: 12px 12px 18px; }
.org-chart .org-node { min-width: 160px; }
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; justify-content: center; }
.org-tree > li { display: flex; flex-direction: column; align-items: center; }
.org-tree ul { position: relative; padding-top: 22px; }
/* the drop line from the owner down to the branch row */
.org-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1px solid var(--border); }
.org-tree ul li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 10px 0; }
/* half-width top borders join the branches into one row line; ::after also drops a stub to the node */
.org-tree ul li::before, .org-tree ul li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1px solid var(--border); }
.org-tree ul li::after { right: auto; left: 50%; border-left: 1px solid var(--border); }
.org-tree ul li:first-child::before, .org-tree ul li:last-child::after { border: 0 none; }
.org-tree ul li:last-child::before { border-right: 1px solid var(--border); border-radius: 0 6px 0 0; }
.org-tree ul li:first-child::after { border-radius: 6px 0 0 0; }
.org-tree ul li:only-child { padding-top: 0; }
.org-tree ul li:only-child::before, .org-tree ul li:only-child::after { display: none; }
/* a city's ambassadors: a column under the lead, each chained by a short vertical stub */
.org-team { display: flex; flex-direction: column; align-items: center; }
.org-team .org-node { position: relative; margin-top: 12px; }
.org-team .org-node::before { content: ""; position: absolute; top: -13px; left: 50%; height: 12px; border-left: 1px solid var(--border); }
.org-node { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--background); width: fit-content; max-width: 360px; transition: border-color .15s ease, transform .15s ease; }
a.org-node:hover { border-color: var(--ring); transform: translateY(-1px); }
.org-node-owner { border-color: color-mix(in oklch, var(--primary) 30%, var(--border)); background: color-mix(in oklch, var(--primary) 6%, var(--card)); }
.org-ava { flex: none; width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: var(--font-mono); background: var(--muted); color: var(--secondary-foreground); }
.org-ava-lead { background: color-mix(in oklch, var(--primary) 16%, var(--card)); color: var(--primary); }
.org-ava-city { border-radius: 8px; background: color-mix(in oklch, var(--primary) 12%, var(--card)); color: var(--primary); }
.org-ava-group { border-radius: 8px; }
.org-who { display: flex; flex-direction: column; min-width: 0; }
.org-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-role { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Data table */
.table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.data-table tbody tr.clickable { cursor: pointer; }
.cell-name { font-weight: 600; }
.cell-sub { font-size: 12px; color: var(--muted-foreground); }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions > * + * { margin-left: 8px; }
.row-actions > * { vertical-align: middle; }
/* Inline swag/promo verdict controls under an event's request pills. */
.ask-pills { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ask-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ask-actions .btn-ghost { padding: 4px 9px; font-size: 12px; }
.empty-line { padding: 18px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.social { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; margin-right: 3px; }

.score { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.score-bar { flex: 1; height: 6px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.score-bar span { display: block; height: 100%; background: var(--primary); }
.score-n { font-size: 13px; min-width: 22px; text-align: right; }

/* Table chrome: filter chips, sortable headers, numeric alignment, summary clamp, and the pager. */
.block > .chips { margin-bottom: 14px; }
.data-table th.num, .data-table td.num { text-align: right; }
.th-sort { padding: 0; }
.th-sort a { display: flex; align-items: center; gap: 4px; padding: 12px 14px; color: var(--muted-foreground); }
.th-sort a:hover, .th-sort.is-sorted a { color: var(--foreground); }
.data-table th.num.th-sort a { justify-content: flex-end; }
.sort-ind { font-size: 9px; line-height: 1; }
.appd-cell { max-width: 340px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pager-info, .pager-page { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-foreground); }
.pager-controls { display: flex; align-items: center; gap: 10px; }
.pager-btn { font-size: 13px; padding: 6px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 6px); background: var(--card); color: var(--foreground); }
.pager-btn:hover { background: var(--accent); }
.pager-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ── Public surfaces: directory + city hubs ────────────────────────────── */

/* Top bar: a faithful clone of the www.zo.computer marketing nav — same wordmark lockup, same
   Product/Tutorials/Resources/About/Pricing structure with hover dropdowns, same dark graphite pill —
   so a click from the marketing site's Events tab lands here with no visual seam. Rendered in this
   sub-site's own warm-cream tokens (not www's white) so it sits cohesively above the aurora page. */
.zo-topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--background) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent); }
.zo-topbar-inner { display: flex; align-items: center; gap: 18px; max-width: 1080px; margin: 0 auto; height: 58px; padding: 0 24px; }
.zo-logo { display: inline-flex; align-items: center; padding: 4px; border-radius: 6px; transition: background .15s ease; }
.zo-logo:hover { background: var(--muted); }
/* The Zo wordmark as a CSS mask over the ink token — same technique + 499/213 lockup as the www topbar,
   just inked in the sub-site's warm foreground instead of pure black. */
.zo-chrome-logo { display: block; height: 30px; aspect-ratio: 499 / 213; background: var(--foreground); -webkit-mask: url("/static/wordmark.svg") center / contain no-repeat; mask: url("/static/wordmark.svg") center / contain no-repeat; }
.zo-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.zo-nav-group { position: relative; }
.zo-nav-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--secondary-foreground); padding: 8px 12px; border-radius: 7px; background: none; border: 0; cursor: pointer; transition: color .15s ease, background .15s ease; }
.zo-nav-link:hover { color: var(--foreground); background: var(--muted); }
.zo-nav-chev { width: 14px; height: 14px; opacity: 0.7; transition: transform .15s ease; }
.zo-nav-group:hover .zo-nav-chev, .zo-nav-group:focus-within .zo-nav-chev { transform: rotate(180deg); }
.zo-nav-panel { position: absolute; left: 0; top: 100%; margin-top: 6px; min-width: 13rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(61,57,41,0.14); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 30; }
.zo-nav-group:hover .zo-nav-panel, .zo-nav-group:focus-within .zo-nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.zo-nav-panel-link { display: flex; align-items: center; gap: 6px; padding: 9px 12px; font-family: var(--font-sans); font-size: 14.5px; color: var(--muted-foreground); border-radius: 8px; transition: color .12s ease, background .12s ease; }
.zo-nav-panel-link:hover { color: var(--foreground); background: var(--muted); }
.zo-ext { font-size: 0.85em; opacity: 0.7; }
/* The one element carried verbatim from www: the dark graphite CTA pill, identical in both palettes. */
/* "Log in" text link, mirroring the www topbar (dark warm ink, sits just left of the Sign-up pill). */
.zo-login { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--secondary-foreground); padding: 8px 6px; border-radius: 7px; white-space: nowrap; transition: color .15s ease; }
.zo-login:hover { color: var(--foreground); }
.zo-cta { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: #fafafa; padding: 9px 20px; border-radius: 9999px; background: linear-gradient(168deg, rgb(32 32 38) 0%, rgb(48 48 56) 30%, rgb(28 28 34) 55%, rgb(42 42 50) 80%, rgb(32 32 38) 100%); border: 1px solid rgb(255 255 255 / 0.08); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.16), 0 4px 12px rgb(0 0 0 / 0.12); transition: box-shadow .15s cubic-bezier(.23,1,.32,1), transform .15s cubic-bezier(.23,1,.32,1); }
.zo-cta:hover { color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 -1px 0 rgb(0 0 0 / 0.35), 0 2px 6px rgb(0 0 0 / 0.2), 0 8px 20px rgb(0 0 0 / 0.16); }
.zo-cta:active { transform: translateY(1px); }

/* Hamburger — hidden on desktop, shown at the tablet/mobile breakpoint alongside a right-aligned
   Sign-up pill. Three bars morph to an X when open. */
/* Matches the real www.zo.computer menu button: a subtle muted-filled rounded square with a soft inset
   highlight, not a bare icon. */
.zo-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 40px; height: 40px; padding: 0; background: color-mix(in oklch, var(--muted) 60%, transparent); border: 0; cursor: pointer; border-radius: 9px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -1px 0 rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.05); transition: background .15s ease, transform .12s ease; }
.zo-burger:hover { background: var(--muted); }
.zo-burger:active { transform: scale(0.97); }
.zo-burger span { display: block; width: 20px; height: 2px; background: var(--foreground); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.zo-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.zo-burger.is-open span:nth-child(2) { opacity: 0; }
.zo-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu sheet: drops under the topbar, holds the flattened marketing nav + Log in + Sign up. */
.zo-msheet { display: none; border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent); background: color-mix(in oklch, var(--background) 96%, transparent); backdrop-filter: saturate(1.3) blur(10px); -webkit-backdrop-filter: saturate(1.3) blur(10px); }
.zo-msheet.open { display: block; }
.zo-msheet-nav { display: flex; flex-direction: column; gap: 2px; max-width: 1080px; margin: 0 auto; padding: 12px 24px 20px; }
.zo-msheet-link { font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--foreground); padding: 11px 10px; border-radius: 9px; transition: background .12s ease; }
.zo-msheet-link:hover { background: var(--muted); }
/* A flattened group in the sheet, matched to the www.zo.computer mobile menu: a full-width mono
   section label, then its links flowing in a wrapped row beneath it. flex-basis:100% on the label
   forces the children onto the next line; each child is nowrap so a two-word item ("Your Zo") never
   breaks mid-label and never clips at the viewport edge — it just wraps to the next row. */
.zo-msheet-group { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px; row-gap: 2px; padding: 8px 0 4px; }
.zo-msheet-group-h { flex-basis: 100%; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); padding: 0 10px 6px; }
.zo-msheet-child { font-size: 15px; color: var(--secondary-foreground); padding: 8px 10px; white-space: nowrap; }
.zo-msheet-cta { align-self: flex-start; margin-top: 10px; padding: 11px 24px; }
body.zo-msheet-lock { overflow: hidden; }
/* Community sub-bar: this sub-site's OWN navigation, quieter than the marketing bar it sits under. */
.zo-subbar { position: sticky; top: 0; z-index: 19; background: color-mix(in oklch, var(--background) 82%, transparent); backdrop-filter: saturate(1.3) blur(8px); -webkit-backdrop-filter: saturate(1.3) blur(8px); border-bottom: 1px solid color-mix(in oklch, var(--border) 55%, transparent); }
.zo-subbar-inner { display: flex; align-items: center; gap: 16px; max-width: 1080px; margin: 0 auto; height: 46px; padding: 0 24px; }
.zo-sub-brand { display: inline-flex; align-items: center; font-family: var(--font-serif); font-weight: 600; font-size: 19px; letter-spacing: -0.005em; color: var(--foreground); line-height: 1; }
.zo-sub-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.zo-sub-link { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--muted-foreground); padding: 6px 12px; border-radius: 7px; transition: color .15s ease, background .15s ease; }
.zo-sub-link:hover { color: var(--foreground); background: var(--muted); }
.zo-sub-link.on { color: var(--foreground); background: var(--muted); }
.pub-main { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; }
.pub-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; padding: 28px 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted-foreground); }
.pub-footer a { color: var(--muted-foreground); }
.pub-footer a:hover { color: var(--foreground); }
.pub-foot-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: var(--foreground); }
.pub-foot-brand .peg { width: 18px; height: 18px; }
.pub-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

.hero { padding: 48px 0 32px; }
.hero-title {
  font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.05; margin: 6px 0 14px;
  background: linear-gradient(170deg, rgb(52 52 64) 0%, rgb(88 88 100) 10%, rgb(58 58 72) 20%, rgb(100 100 112) 32%, rgb(64 64 78) 42%, rgb(92 92 106) 52%, rgb(54 54 68) 62%, rgb(86 86 100) 72%, rgb(56 56 70) 82%, rgb(80 80 94) 91%, rgb(60 60 74) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 -1px 0 rgb(255 255 255 / 0.35), 0 1px 1px rgb(0 0 0 / 0.3), 0 3px 6px rgb(0 0 0 / 0.12);
}
.hero-sub { font-family: var(--font-display); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; margin: 0; max-width: 560px; color: var(--muted-foreground); }

.preview-banner {
  background: var(--positive-soft); border: 1px solid oklch(0.52 0.1 155 / 0.3);
  color: var(--positive); border-radius: calc(var(--radius) - 4px); padding: 10px 16px; font-size: 14px; margin: 8px 0 0;
}

.filters { margin-bottom: 28px; display: flex; flex-direction: column; gap: 12px; }
.search { display: flex; gap: 8px; }
.search input[type="search"] {
  flex: 1; max-width: 360px; padding: 9px 12px; font-family: var(--font-sans); font-size: 14px;
  color: var(--foreground); background: var(--card); border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px); outline: none;
}
.search input[type="search"]:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-start; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 999px; color: var(--secondary-foreground); background: var(--card);
  cursor: pointer; box-shadow: 0 1px 2px rgba(61,57,41,0.04); transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
button.chip { font-family: inherit; } /* chips are usually links; buttons don't inherit the font */
.chip:active { transform: translateY(1px); }
.chip:hover { border-color: var(--ring); }
.chip.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.chip-n { font-family: var(--font-mono); font-size: 11px; opacity: 0.7; }
/* A subordinate filter axis (e.g. Track) reads quieter than the primary status chips. */
.chips-sub { gap: 7px; margin-top: 8px; }
.chips-sub .chip { padding: 6px 13px; font-size: 13px; font-weight: 500; }
.chips-label {
  align-self: center; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted-foreground); margin-right: 2px;
}

/* Compact city rail: a single-line, horizontally scrollable filter that replaces both the tall city-
   card grid (events) and the wrapping chip cloud (directory). Fades at both edges hint there's more to
   scroll; the pills are quieter and smaller than the primary status chips. */
.city-rail { position: relative; margin-bottom: 26px; }
.city-rail::before, .city-rail::after {
  content: ""; position: absolute; top: 0; bottom: 8px; width: 34px; z-index: 2; pointer-events: none;
}
.city-rail::before { left: 0; background: linear-gradient(to right, var(--background), transparent); }
.city-rail::after { right: 0; background: linear-gradient(to left, var(--background), transparent); }
.city-rail-track {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-padding: 0 34px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent; -webkit-overflow-scrolling: touch;
}
.city-rail-track::-webkit-scrollbar { height: 6px; }
.city-rail-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.crail {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 14px; font-size: 13.5px; font-weight: 600; color: var(--secondary-foreground);
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(61,57,41,0.04); transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.crail:hover { border-color: var(--ring); }
.crail:active { transform: translateY(1px); }
.crail.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.crail-n { font-family: var(--font-mono); font-size: 11px; opacity: 0.72; }

/* Event detail modal: the cover keeps the whole flyer (contain over a blurred fill, like the card) but
   capped in height so a tall portrait flyer never dominates the modal — the two-class selector beats
   the card's 1/1 .ev-cover-wrap default. The actions row lines up Register with a quiet Luma link. */
.ev-modal-card .ev-cover-wrap { aspect-ratio: auto; height: 300px; }
.ev-modal-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ev-modal-link { font-size: 13px; color: var(--muted-foreground); border-bottom: 1px solid transparent; }
.ev-modal-link:hover { color: var(--foreground); border-color: var(--ring); }
.ev-modal-venue .ev-venue-ico { vertical-align: -1px; margin-right: 5px; opacity: 0.75; }

/* Sub-tab strip: switches the view of a single page (Events manage vs. embedded public preview).
   Reads as underlined tabs, not pills, so it never competes with the filter chip row below it. */
.subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.subtab {
  padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--muted-foreground);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease;
}
.subtab:hover { color: var(--foreground); }
.subtab.on { color: var(--foreground); border-bottom-color: var(--primary); }

/* Embedded same-origin preview (public events/directory shown inside the app for visualizing). */
.embed-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--card); }
.embed-frame { display: block; width: 100%; height: calc(100dvh - 188px); min-height: 520px; border: 0; }

/* ── Applications kanban ─────────────────────────────────────────────────────
   The funnel as columns: each stage is a quiet recessed lane, cards are raised. The board scrolls
   horizontally when the lanes don't fit, and each lane scrolls its own pile so the deep "New" column
   never stretches the page. */
/* The Track + Sort dropdowns sit above the board in one row. */
.board-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 18px; }

/* Dropdown filters (filterSelect): a labeled select that replaces a chip row. */
.filter-sel { display: inline-flex; align-items: center; gap: 8px; }
.filter-sel-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); }
.filter-sel select {
  padding: 8px 30px 8px 12px; font-family: var(--font-sans); font-size: 14px; color: var(--foreground);
  background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.filter-sel select:hover { border-color: var(--ring); }

/* Drag-and-drop between stages: the dragged card dims; a legal target column lights up. */
.kan-card[draggable="true"] { cursor: grab; }
.kan-card.dragging { opacity: 0.45; cursor: grabbing; }
.kan-col.drop-target { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.appd-move-head { margin: 0 0 10px; font-size: 15px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(244px, 1fr); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 10px; }
.kan-col { display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - 232px); background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius); }
.kan-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.kan-col-title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); }
.kan-col-count { font-size: 12px; color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; }
.kan-col-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; }
.kan-card {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 6px);
  box-shadow: var(--shadow-sm); cursor: pointer; font: inherit; color: var(--foreground);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.kan-card:hover { border-color: var(--ring); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.kan-card:active { transform: translateY(0); }
.kan-card-top { display: flex; align-items: center; gap: 8px; }
.kan-avatar { flex: none; width: 28px; height: 28px; border-radius: 999px; object-fit: cover; border: 1px solid var(--border); }
.kan-avatar-blank { display: inline-flex; align-items: center; justify-content: center; background: var(--muted); color: var(--muted-foreground); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; }
.kan-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.kan-score { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--foreground); background: var(--accent); border-radius: 999px; padding: 1px 8px; }
.kan-email { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kan-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kan-city { font-size: 12px; }
.kan-summary { margin: 2px 0 0; font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kan-foot { font-size: 11px; }
.kan-empty { font-size: 12.5px; padding: 8px 2px; }
.kan-more { margin-top: 2px; padding-top: 10px; font-size: 12px; border-top: 1px dashed var(--border); }

/* Inline "new city" creator inside the approve form (admin only). */
.appd-newcity { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.appd-nc-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.appd-nc-form[hidden] { display: none; }
.appd-nc-form input { flex: 1 1 150px; }
.appd-nc-msg { font-size: 12px; }

/* auto-rows 1fr: every card equalizes to the tallest in the grid, so sparse profiles don't leave
   ragged rows. Socials pin to the bottom (margin-top:auto); the slack lands mid-card as whitespace.
   Single-column (mobile) reverts to content height — uniform height serves no alignment there and
   just pads sparse cards. */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
@media (max-width: 640px) { .dir-grid { grid-auto-rows: auto; } }
.amb-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 10px;
  min-height: 256px;
  transition: transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s cubic-bezier(.23,1,.32,1);
}
.amb-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 2px 5px rgba(61,57,41,0.05), 0 10px 24px rgba(61,57,41,0.07), 0 30px 60px rgba(61,57,41,0.13); }
.amb-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.amb-photo { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 6px rgba(61,57,41,0.12); }
.amb-initials {
  width: 108px; height: 108px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, var(--accent), var(--muted)); color: var(--secondary-foreground); font-family: var(--font-mono); font-weight: 700; font-size: 32px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 6px rgba(61,57,41,0.1);
}
.amb-id { min-width: 0; }
.amb-name { font-family: var(--font-serif); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; }
.amb-where { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #c96442; margin-top: 4px; }
.amb-power { font-size: 14px; font-weight: 600; color: var(--foreground); }
.amb-bio { margin: 0; font-size: 14px; color: var(--muted-foreground); line-height: 1.5; text-align: center; }
.amb-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: auto; padding-top: 4px; }
a.social { color: var(--secondary-foreground); }
a.social:hover { border-color: var(--ring); color: var(--foreground); }

.block-pub { margin-top: 8px; margin-bottom: 36px; }
.block-h { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); margin: 0 0 14px; }

/* Three events per row on desktop (Joanna's call), two on tablet, one on phone. */
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ev-grid { grid-template-columns: 1fr; } }
.ev-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s cubic-bezier(.23,1,.32,1);
}
.ev-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 2px 5px rgba(61,57,41,0.05), 0 10px 24px rgba(61,57,41,0.07), 0 30px 60px rgba(61,57,41,0.13); }
/* Cover: show the WHOLE flyer (object-fit:contain) centered over a blurred, scaled fill of the same
   image, in a fixed 4:3 frame. Square/portrait/landscape flyers all fit with nothing cropped, and it
   holds its shape from mobile to desktop. */
.ev-cover-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--secondary); display: grid; place-items: center; }
.ev-cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.15); transform: scale(1.12); opacity: 0.5; }
.ev-cover { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.ev-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
/* When line: date reads strong (terracotta, mono, weighted), time sits quietly beside it. */
.ev-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ev-date { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #c96442; }
.ev-time { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--muted-foreground); }
.ev-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.ev-venue { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--secondary-foreground); }
.ev-venue-ico { display: inline-flex; color: var(--muted-foreground); flex: none; }
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; }
.ev-pill { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--secondary-foreground); background: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; }
/* Per-type tint — the same five-colour aurora wash, kept pale so the mono label stays readable. Gives
   the type "chip" a designed, on-palette pop of colour instead of one flat grey. */
.ev-pill--meetup     { background: color-mix(in oklch, var(--aurora-gold) 55%, var(--card)); border-color: color-mix(in oklch, var(--aurora-gold) 62%, var(--border)); }
.ev-pill--webinar    { background: color-mix(in oklch, var(--aurora-violet) 55%, var(--card)); border-color: color-mix(in oklch, var(--aurora-violet) 62%, var(--border)); }
.ev-pill--workshop   { background: color-mix(in oklch, var(--aurora-cyan) 55%, var(--card)); border-color: color-mix(in oklch, var(--aurora-cyan) 62%, var(--border)); }
.ev-pill--buildathon { background: color-mix(in oklch, var(--aurora-mint) 55%, var(--card)); border-color: color-mix(in oklch, var(--aurora-mint) 62%, var(--border)); }
.ev-pill--hackathon  { background: color-mix(in oklch, var(--aurora-cyan) 55%, var(--card)); border-color: color-mix(in oklch, var(--aurora-cyan) 62%, var(--border)); }
.ev-pill--vibe_sip   { background: color-mix(in oklch, var(--aurora-rose) 55%, var(--card)); border-color: color-mix(in oklch, var(--aurora-rose) 62%, var(--border)); }
.ev-pill--activation { background: color-mix(in oklch, var(--aurora-gold) 55%, var(--card)); border-color: color-mix(in oklch, var(--aurora-gold) 62%, var(--border)); }
.ev-place { font-size: 13px; color: var(--muted-foreground); }

/* Public events browser: a clickable card opens Luma's own registration overlay (or the external event
   page) directly — no detail modal of our own. Anchor + button variants share the card's raised look. */
button.ev-card { font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; width: 100%; }
a.ev-card--link { color: inherit; text-decoration: none; cursor: pointer; }
a.ev-card--link:hover { color: inherit; }
.ev-card--static { cursor: default; }
.ev-cover--blank {
  --evc-a: var(--aurora-gold);
  --evc-b: var(--aurora-rose);
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 80% 70% at 28% 22%, color-mix(in oklch, var(--evc-a) 42%, var(--card)) 0%, transparent 70%),
    radial-gradient(ellipse 80% 70% at 80% 84%, color-mix(in oklch, var(--evc-b) 34%, var(--card)) 0%, transparent 72%),
    var(--secondary);
}
/* Per-type hue pair for coverless events, so a grid of blanks isn't a wall of identical tiles.
   Meetup keeps the base gold/rose. */
.ev-cover--workshop { --evc-a: var(--aurora-cyan); --evc-b: var(--aurora-mint); }
.ev-cover--webinar { --evc-a: var(--aurora-violet); --evc-b: var(--aurora-cyan); }
.ev-cover--buildathon { --evc-a: var(--aurora-mint); --evc-b: var(--aurora-gold); }
.ev-cover--hackathon { --evc-a: var(--aurora-cyan); --evc-b: var(--aurora-violet); }
.ev-cover--vibe_sip { --evc-a: var(--aurora-rose); --evc-b: var(--aurora-violet); }
.ev-cover--activation { --evc-a: var(--aurora-gold); --evc-b: var(--aurora-mint); }
.ev-cover-mark { width: 92px; height: auto; opacity: 0.42; }
/* Center the dialog in the viewport on desktop (Joanna 2026-07-16: "not centered in the user's
   screen — they should be"). The overlay is a fixed, viewport-filling flex box; centering + the
   card's `max-height: calc(100dvh - 64px)` cap means the dialog is always fully inside the screen,
   so it can neither slide up under the sticky nav nor drop behind the footer. The overlay scrolls
   too (`overflow-y:auto` from `.modal-overlay`) as a fallback for very short viewports. */
.ev-modal { padding: 32px 16px; align-items: center; }
/* The card is a flex column capped to the viewport: cover + header stay put, the body scrolls inside.
   This keeps a long event (or the host form) from overflowing off the top under the sub-bar or off the
   bottom behind the footer — the whole dialog is always reachable, on mobile especially. The compound
   selector beats the generic `.modal { margin:auto }` (which pinned tall dialogs half off-screen). */
.ev-modal .ev-modal-card { margin: 0 auto; display: flex; flex-direction: column; max-height: calc(100dvh - 64px); }
.ev-modal .ev-modal-body { overflow-y: auto; }
.ev-modal-card .ev-cover-wrap { flex: 0 0 auto; }
.ev-modal-card .ev-modal-x { flex: 0 0 auto; }
.ev-modal-card { max-width: 560px; position: relative; overflow: hidden; }
.ev-modal-cover { width: 100%; height: 210px; object-fit: cover; background: var(--muted); display: block; }
.ev-modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 20px;
  line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm);
}
.ev-modal-x:hover { background: var(--secondary); }
.ev-modal-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.ev-modal-title { font-family: var(--font-serif); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.ev-modal-city { font-size: 13px; color: var(--muted-foreground); }
a.ev-modal-city:hover { color: var(--foreground); border-color: var(--ring); }
.ev-modal-venue { font-size: 14px; color: var(--muted-foreground); }
/* Condensed (Joanna 2026-07-16): the Luma body ran long and pushed Register off-screen. Smaller,
   tighter type keeps the description a supporting detail rather than the whole modal. */
.ev-modal-desc { font-size: 13px; line-height: 1.5; color: var(--muted-foreground); }
.ev-modal-desc p { margin: 0 0 8px; }
.ev-modal-desc p:last-child { margin-bottom: 0; }
.ev-modal-actions { margin-top: 6px; }
/* Register lives at the TOP of the modal and STAYS there — sticky to the top of the scrolling body so
   the (now-condensed) description scrolls underneath it. It is never at the bottom, never scrolled to.
   (Joanna 2026-07-16: "never put registration button scrollable down that modal.") */
.ev-modal-actions--top {
  position: sticky; top: 0; z-index: 3; margin: 2px 0 10px;
  padding: 8px 0 12px; background: var(--card);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
}
.ev-modal-actions--top .btn-skeu { width: 100%; }
body.ev-locked { overflow: hidden; }

.zero-state {
  background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 40px 32px; text-align: center; max-width: 560px; margin: 0 auto;
}
.zero-state h2 { font-family: var(--font-serif); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 6px; }
.news-form { display: flex; gap: 8px; justify-content: center; margin: 18px 0 10px; }
.news-form input[type="email"] { max-width: 280px; }
.news-form .btn-skeu { flex: 0 0 auto; }
.zero-state .note { font-size: 13px; color: var(--muted-foreground); }

.empty { padding: 40px; text-align: center; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius); }

/* City page "no events yet" 0-state: a warm, invitational panel (not a cold dashed box) with a
   calendar glyph, a serif line, and a direct "propose an event" CTA that opens the host modal. */
.city-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 44px 28px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.city-empty-ico {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  color: var(--muted-foreground); background: var(--secondary); border: 1px solid var(--border);
}
.city-empty-title { font-family: var(--font-serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.city-empty-sub { font-size: 14px; line-height: 1.55; max-width: 440px; margin: 0; }
.city-empty .btn-skeu { margin-top: 8px; }

/* ── City page (/events?city=<slug>): a status-driven place page — upcoming events + the team on
   the ground + a newsletter signup + an apply CTA. Reuses .hero, .ev-grid, .dir-grid, .empty. ───── */
.city-hero { padding-bottom: 18px; }
.city-nav { margin-top: 18px; }
.back-link { font-size: 14px; color: var(--muted-foreground); }
.back-link:hover { color: var(--foreground); }

.nl-ok, .nl-err { border-radius: calc(var(--radius) - 4px); padding: 11px 16px; font-size: 14px; margin: 4px 0 0; }
.nl-ok { background: var(--positive-soft); border: 1px solid oklch(0.52 0.1 155 / 0.3); color: var(--positive); }
.nl-err { background: var(--destructive-soft, var(--muted)); border: 1px solid var(--destructive); color: var(--destructive); }

.city-section { margin-top: 40px; }
.section-h { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 16px; }

/* Events landing "Browse by city": each card deep-links to that city's place page and previews what
   it leads with (event count / team / coming soon). Denser than an ambassador card — it's a nav tile. */
.city-browse { margin: 20px 0 8px; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
/* Clean paper city tiles — no aurora corner-glow (it muddied the interior). A raised card with a
   crisp mono eyebrow, serif name, and a footer that reads the live state, plus a hairline accent bar
   on hover. Matches the canonical Zo card component. */
.city-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px; min-height: 148px; padding: 20px 20px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); color: var(--foreground);
  transition: transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s cubic-bezier(.23,1,.32,1), border-color .25s ease;
}
.city-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #c96442, color-mix(in oklch, var(--aurora-gold) 80%, #c96442));
  opacity: 0; transition: opacity .25s ease;
}
.city-card:hover { transform: translateY(-4px); border-color: color-mix(in oklch, var(--border) 55%, #c96442); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 2px 5px rgba(61,57,41,0.05), 0 10px 24px rgba(61,57,41,0.07), 0 30px 60px rgba(61,57,41,0.13); }
.city-card:hover::after { opacity: 1; }
.city-where { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }
.city-name { font-family: var(--font-serif); font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.city-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.city-sub { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted-foreground); }
.city-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); flex: none; box-shadow: 0 0 0 3px var(--positive-soft); }
.city-foot .badge { flex: none; }
/* The Virtual pseudo-city: a soft on-brand tint sets it apart from the place-based city cards
   (no hard burnt-orange sliver). */
.city-card--virtual { background: color-mix(in oklch, var(--aurora-violet) 12%, var(--card)); }

/* Events landing top row: hero on the left, a compact click-through map tucked top-right. Stacks on
   narrow screens (map drops below the hero). */
.events-top { display: flex; gap: 32px; align-items: flex-start; }
.events-top-main { flex: 1 1 auto; min-width: 0; }
.events-top-aside { flex: 0 0 360px; max-width: 360px; padding-top: 40px; }
.events-top-aside .city-map { margin: 0; }
.events-top-aside .block-h { margin-bottom: 8px; }
.events-top-aside .map-wrap { padding: 10px; }
.events-top-aside .map-foot { display: none; }
.events-top-aside .cmap-label { font-size: 15px; }
@media (max-width: 900px) {
  .events-top { flex-direction: column; gap: 8px; }
  .events-top-aside { flex: none; max-width: 520px; width: 100%; padding-top: 0; margin-bottom: 8px; }
}

/* "Host an event" closing band — the demoted, secondary path (not the page's main CTA). */
.host-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin: 44px 0 8px; padding: 24px 26px;
  background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.host-band-title { font-family: var(--font-serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.host-band-sub { font-size: 14px; margin: 4px 0 0; max-width: 520px; }
.host-band .btn-skeu { flex: 0 0 auto; }

/* Discord: a single designed chip on city pages (replaces the old full-width call-out block). Warm
   paper pill with the Discord mark, a two-line label, and a hover lift. */
.discord-chip-row { margin: 20px 0 8px; }
.discord-chip {
  display: inline-flex; align-items: center; gap: 13px; max-width: 100%;
  padding: 13px 18px; background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow-sm); color: var(--foreground);
  transition: transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s ease, border-color .18s ease;
}
.discord-chip:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--border) 50%, #5865f2); box-shadow: var(--shadow-md); }
.discord-chip-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: #5865f2; color: #fff; }
.discord-chip-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.discord-chip-lead { font-weight: 600; font-size: 15px; }
.discord-chip-sub { font-size: 12.5px; color: var(--muted-foreground); }
.discord-chip-arw { margin-left: 4px; color: var(--muted-foreground); flex: none; }

.city-cta-block { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.city-apply {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px;
}
.ca-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 4px; }
.ca-sub { font-size: 14px; line-height: 1.55; margin: 0; }
.city-apply .btn-skeu { align-self: flex-start; }

.nl-form {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background: var(--secondary); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px;
}
.nl-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 4px; }
.nl-sub { font-size: 14px; line-height: 1.55; margin: 0; }
.nl-row { display: flex; gap: 8px; }
.nl-input {
  flex: 1; min-width: 0; padding: 9px 12px; font-family: var(--font-sans); font-size: 14px;
  color: var(--foreground); background: var(--card); border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px); outline: none;
}
.nl-input:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.nl-form .btn-skeu { flex: 0 0 auto; }

/* ── Public "propose an event" modal: a labeled form inside the event-modal frame. ─────────────── */
.hero-actions { margin-top: 20px; display: flex; gap: 10px; }
.hp-field { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.host-intro { font-size: 14px; line-height: 1.55; margin: 0 0 4px; }
.host-form { display: flex; flex-direction: column; gap: 15px; }
.host-form .form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Readable, sentence-case labels (the earlier tiny mono-uppercase caps were hard to scan) so the
   public form reads like the internal create-event modal. A .req dot marks the few required fields. */
.host-form label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--foreground);
}
.host-form .lbl { display: inline-flex; align-items: baseline; }
.host-form .req { color: var(--primary); margin-left: 2px; }
.host-form input, .host-form select, .host-form textarea {
  width: 100%; padding: 10px 12px; font-family: var(--font-sans); font-size: 14.5px;
  color: var(--foreground); background: var(--input); border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px); outline: none; transition: border-color .12s ease, box-shadow .12s ease;
}
.host-form input::placeholder, .host-form textarea::placeholder { color: color-mix(in oklch, var(--muted-foreground) 78%, transparent); }
.host-form input:focus, .host-form select:focus, .host-form textarea:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.host-form textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.host-form .field-hint { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--muted-foreground); }
.host-form .form-section { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin: 6px 0 -4px; }
.host-form .form-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.host-note { font-size: 13px; font-weight: 400; }
@media (max-width: 560px) {
  .host-form .form-cols { grid-template-columns: 1fr; }
  .ev-modal { padding: 14px 10px; }
  .ev-modal .ev-modal-card { max-height: calc(100dvh - 28px); }
  .ev-modal-card .ev-cover-wrap { height: 180px; }
  .ev-modal-title { font-size: 22px; }
  .ev-modal-body { padding: 18px 18px 22px; }
}

/* ── Location maps (numbered dots, not meshed bubbles) ─────────────────── */
.map-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.map-wrap-sm { max-width: 640px; }
.map-svg { width: 100%; height: auto; display: block; }

/* Compact expandable density map: a small card that opens a pan/zoom modal on click. */
.map-mini { max-width: 560px; cursor: zoom-in; }
.map-mini .map-wrap { padding: 12px; }
.map-mini:hover .map-wrap { border-color: var(--ring); }
.map-expand-hint { display: block; margin-top: 6px; font-size: 12px; }
.modal-map { max-width: 1080px; }
.map-zoom-btns { display: flex; align-items: center; gap: 6px; }
.map-modal-body { touch-action: none; user-select: none; }
.map-modal-body .map-svg { cursor: grab; }
.map-modal-body .map-svg.panning { cursor: grabbing; }
.map-heat { fill: var(--primary); fill-opacity: 0.1; }
.map-heat-layer { pointer-events: none; }
/* non-scaling-stroke: country borders keep their hairline weight while the modal map zooms. */
.map-land { fill: var(--muted); stroke: var(--border); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
/* A pin = a small solid dot with its count centred as a number; country-only points read hollow. */
.map-pin circle { fill: var(--primary); fill-opacity: 0.9; stroke: var(--card); stroke-width: 1; }
.map-pin:hover circle { fill-opacity: 1; }
.map-pin-n { fill: var(--primary-foreground); font-family: var(--font-mono); font-size: 11px; font-weight: 700; pointer-events: none; }
.map-pin-country circle { fill: var(--card); fill-opacity: 0.9; stroke: var(--primary); stroke-width: 1.2; stroke-dasharray: 3 2; }
.map-pin-country .map-pin-n { fill: var(--primary); }
.map-foot { margin: 10px 2px 0; font-size: 12px; color: var(--muted-foreground); }
/* Two maps side by side on Home; stacks under the tablet breakpoint. Each map-wrap fills its column. */
.map-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.map-cols .map-wrap-sm { max-width: none; }
.map-cols .block { margin-bottom: 0; }

/* ── Admin Home: attention strip + program overview ─────────────────────── */
/* Needs-attention card (admin Home): warm accent so it reads as "handle me", each row carrying its
   own button straight to the fix location. */
.attn-card { border-color: oklch(0.55 0.16 25 / 0.28); background: color-mix(in oklch, oklch(0.55 0.16 25 / 0.05) 60%, var(--card)); }
.attn-row { align-items: center; }
.attn-mark { background: oklch(0.55 0.16 25 / 0.12); color: var(--destructive); }
.onb-action { flex: none; margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .attn-row { flex-wrap: wrap; }
  .onb-action { margin-left: 30px; }
}

/* Action chips for queues that need an admin now. Warm-destructive accent so they read as "handle
   me", not decoration; the strip renders only when at least one queue is non-empty. */
.attn-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 32px; }
.attn-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid oklch(0.55 0.16 25 / 0.35); color: var(--foreground);
  font-size: 13px; text-decoration: none; box-shadow: var(--shadow-sm); }
.attn-item:hover { border-color: var(--destructive); }
.attn-n { font-family: var(--font-mono); font-weight: 700; color: var(--destructive); }
.attn-go { color: var(--muted-foreground); }
/* Four domain panels; each is a short list of derived numbers plus the link to the owning tab. */
.ov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.ov-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.ov-line:last-of-type { border-bottom: none; }
.ov-k { color: var(--muted-foreground); }
.ov-v { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.ov-note { margin-top: 10px; font-size: 12px; line-height: 1.45; }
.ov-link { margin-top: auto; padding-top: 12px; }
@media (max-width: 1100px) { .ov-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ov-grid { grid-template-columns: 1fr; } }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 272px; max-width: 84vw;
    transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--shadow-md);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 30; border: none; background: oklch(0.28 0.01 70 / 0.45); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  .hamburger { display: inline-flex; }
  .drawer-close { display: inline-grid; }
  .topbar { padding: 12px 16px; }
  .content { padding: 20px 16px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .map-cols { grid-template-columns: 1fr; }
  .zo-topbar-inner, .zo-subbar-inner, .pub-main, .pub-footer { padding-left: 16px; padding-right: 16px; }
}

/* Marketing nav collapse — mirrors www.zo.computer exactly: it switches at the `md` breakpoint
   (768px), NOT 860px. So iPad portrait (768–834px) keeps the FULL dropdown nav just like the real
   site, and only phones (<768px) get the hamburger. The phone bar also mirrors the real site: logo on
   the left, then "Log in" + the "Sign up" pill + the hamburger together on the right (Log in stays
   visible in the bar, it does not hide into the sheet). */
@media (max-width: 767px) {
  .zo-nav { display: none; }
  .zo-logo { margin-right: auto; }
  .zo-burger { display: inline-flex; }
  .zo-login { display: inline-flex; padding: 8px 8px; }
  .zo-sub-nav { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .hero-title { font-size: 2rem; }
  .hero-sub { font-size: 15px; }
  .city-cta-block { grid-template-columns: 1fr; }
  /* Sub-bar stacks: brand on its own row, the Events/Directory/Full-calendar nav on a single left-
     aligned row beneath it, so "Full calendar" no longer wraps under a right-pushed nav. */
  .zo-subbar-inner { height: auto; flex-wrap: wrap; gap: 2px 10px; padding-top: 8px; padding-bottom: 8px; }
  .zo-sub-brand { flex-basis: 100%; }
  .zo-sub-nav { margin-left: 0; flex-wrap: nowrap; }
  .zo-sub-link { padding: 6px 8px; }
}

@media (max-width: 480px) {
  .stat-row { grid-template-columns: 1fr; }
  .zo-topbar-inner { gap: 10px; }
  .pub-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pub-foot-links { gap: 16px; }
  .content { padding: 16px 14px; }
}

/* ── Brand assets ──────────────────────────────────────────────────────────
   The Pegasus mark is a CSS mask so it inherits a token colour; the "Zo" wordmark is the homepage SVG. */
.peg {
  display: inline-block; flex: none; background: var(--foreground);
  -webkit-mask: url("/static/pegasus.svg") center / contain no-repeat;
  mask: url("/static/pegasus.svg") center / contain no-repeat;
}
.wordmark { display: block; width: auto; }

/* Sidebar + public header lockup: Pegasus + Zo wordmark + a quiet sub-label in EB Garamond. */
.brand { display: flex; align-items: baseline; gap: 7px; font-family: var(--font-serif); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; line-height: 1; color: var(--foreground); }
.brand .peg { width: 20px; height: 20px; align-self: center; }
.brand .wordmark { height: 14px; }
.brand-sub { color: var(--muted-foreground); font-weight: 400; }
.pub-brand { display: flex; align-items: baseline; gap: 7px; font-family: var(--font-serif); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; line-height: 1; color: var(--foreground); }
.pub-brand .peg { width: 20px; height: 20px; align-self: center; }
.pub-brand .wordmark { height: 14px; }

/* ── Background texture ─────────────────────────────────────────────────────
   The signature homepage wash: a fixed aurora field + a faint dot grid behind everything. Marketing
   surfaces (login + public) opt in by adding .has-aurora on <body> with a .zo-bg element first. */
.zo-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 54% 40% at 16% 24%, color-mix(in oklch, var(--aurora-cyan) 26%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 52% 38% at 82% 20%, color-mix(in oklch, var(--aurora-gold) 24%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 58% 42% at 58% 76%, color-mix(in oklch, var(--aurora-violet) 22%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 48% 34% at 24% 78%, color-mix(in oklch, var(--aurora-mint) 20%, transparent) 0%, transparent 58%),
    color-mix(in oklch, var(--background) 86%, transparent);
  filter: saturate(1.08);
}
/* Secondary aurora: a heavily blurred wash that gives the paper its visible glow. Without this layer
   the base gradients read flat; the homepage owes its depth to this pass. */
.zo-bg::before {
  content: ""; position: absolute; inset: -18%; pointer-events: none;
  filter: blur(56px) saturate(0.98); opacity: 0.84; transform: translate3d(0, -4vh, 0);
  background:
    radial-gradient(ellipse 44% 78% at 10% 54%, oklch(0.92 0.07 22 / 0.2) 0%, transparent 78%),
    radial-gradient(ellipse 44% 78% at 32% 44%, oklch(0.95 0.06 80 / 0.18) 0%, transparent 78%),
    radial-gradient(ellipse 44% 78% at 54% 54%, oklch(0.94 0.07 158 / 0.18) 0%, transparent 78%),
    radial-gradient(ellipse 44% 78% at 74% 44%, oklch(0.92 0.07 230 / 0.18) 0%, transparent 78%),
    radial-gradient(ellipse 44% 78% at 92% 54%, oklch(0.9 0.07 304 / 0.18) 0%, transparent 78%);
}
/* Tight 6px dot lattice in the primary ink, masked so it fades toward the edges. Mirrors the
   homepage / landing .zo-dots layer exactly: gap, per-layer opacity, and mask. */
.zo-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  color: var(--primary); opacity: 0.07;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(ellipse 135% 105% at 50% 22%, #000 38%, transparent 84%);
  mask-image: radial-gradient(ellipse 135% 105% at 50% 22%, #000 38%, transparent 84%);
}
/* Cursor trail: the terracotta glow painted over the dot field as the pointer moves. The canvas sits
   inside .zo-bg (z-index 0) above the aurora/dot layers; its `color` is the terracotta ink the JS
   port reads via getComputedStyle to fill the trail dots. Content sits on z-index 1 above it. */
.zo-trail {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; color: #c96442;
}
body.has-aurora { background: var(--background); }
/* Lift the page body above the fixed .zo-bg aurora (z-index 0). The top/sub bars are NOT listed here:
   they are already sticky with their own higher z-index, and forcing them to z-index 1 would let the
   scrolling body paint over their open dropdown panels. */
body.has-aurora .pub-main,
body.has-aurora .pub-footer { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════════════════
   PUBLIC DESIGN PARITY with the live www.zo.computer marketing site (2026-07-16,
   from Joanna's zo-www-design-parity spec). Scoped to body.pub-body so ONLY the
   public events / directory / city pages shift — the internal admin app keeps its
   warm-olive theme untouched. www's current runtime palette is terracotta-primary,
   a darker cream (#f0ece6), and near-sharp corners; its body/UI face is MonoLisaText.
   ════════════════════════════════════════════════════════════════════════════ */

/* MonoLisaText — the www body/UI face (Latin subset), served locally (src/index.ts). */
@font-face {
  font-family: "MonoLisaText";
  src: url("/static/fonts/monolisa-text.woff2") format("woff2");
  font-weight: 1 900; font-style: normal; font-display: swap;
}

body.pub-body {
  /* Match the live site's PAGE BACKGROUNDS only (Joanna 2026-07-16): the darker warm cream + the
     aurora wash. The brand primary (olive) and the app's soft corners are kept — Joanna rejected the
     terracotta "orange pills" and the sharp/square corners the first parity pass introduced. So we
     take www's surface tones (background/card/muted/border) but NOT its --primary or --radius. */
  /* Exact live-www body background (read from getComputedStyle on www.zo.computer 2026-07-16) so an
     embed of these pages sits on the SAME paper as the host site — no pinker/darker mismatch. */
  --background: oklch(0.9445 0.0091 78.2807);
  --foreground: #28261b;
  --card: #fbfaf6;
  --card-foreground: #28261b;
  --popover: #fbfaf6;
  --popover-foreground: #28261b;
  --secondary: #e6e2d9;
  --secondary-foreground: #3d3929;
  --muted: #ebe7e0;
  --muted-foreground: #6b6658;
  --accent: #e6dfd1;
  --accent-foreground: #28261b;
  --border: #c8c2b8;
  --input: #ffffff;
  /* MonoLisaText leads the sans stack (Zo's body/UI face, per /brand). */
  --font-sans: "MonoLisaText", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* MonoLisaText wants tighter heading tracking, matching www's global h1–h6 rule. */
body.pub-body h1, body.pub-body h2, body.pub-body h3,
body.pub-body h4, body.pub-body h5, body.pub-body h6 { letter-spacing: -0.025em; }

/* Nav-bar finish (spec §5): www's quieter backdrop, muted 15px links, 4px hover radius,
   instant hover. The Sign-up pill (.zo-cta) already ships www's exact dark gradient. */
body.pub-body .zo-topbar {
  background: color-mix(in oklch, var(--background) 84%, transparent);
  backdrop-filter: saturate(1.04) blur(18px); -webkit-backdrop-filter: saturate(1.04) blur(18px);
}
body.pub-body .zo-nav-link { color: var(--muted-foreground); border-radius: 0.25rem; transition: color .12s ease, background .12s ease; }
body.pub-body .zo-nav-link:hover,
body.pub-body .zo-nav-trigger[aria-expanded="true"] { color: var(--foreground); background: color-mix(in srgb, var(--muted) 50%, transparent); }
body.pub-body .zo-login { color: var(--muted-foreground); }
body.pub-body .zo-login:hover { color: var(--foreground); }

/* Aurora parity (Joanna 2026-07-16, embed round): match www's ACTUAL `.zo-site-background`
   EXACTLY — the same four subtle radial gradients (verified identical hue/position/opacity to
   www live) over the paper, and NOTHING else. www does NOT paint the heavy blurred rose/violet
   glow pass we were layering on top (`::before` at 0.7) — that pass is what tinted an embed
   pinker + darker than the host page. So on public pages the glow is dropped and the extra
   saturate is removed; the wash now reads as the same warm cream www does. */
body.pub-body .zo-bg {
  background:
    radial-gradient(ellipse 54% 40% at 16% 24%, color-mix(in oklch, var(--aurora-cyan) 26%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 52% 38% at 82% 20%, color-mix(in oklch, var(--aurora-gold) 24%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 58% 42% at 58% 76%, color-mix(in oklch, var(--aurora-violet) 22%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 48% 34% at 24% 78%, color-mix(in oklch, var(--aurora-mint) 20%, transparent) 0%, transparent 58%),
    var(--background);
  filter: none;
}
body.pub-body .zo-bg::before { opacity: 0; }
body.pub-body .zo-bg::after { opacity: 0.055; }

/* ── Skeuomorphic CTA ────────────────────────────────────────────────────────
   The raised light pill used as the primary call-to-action across the homepage. Ported verbatim. */
.btn-skeu {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700; line-height: 1.25rem;
  height: 3rem; padding: 0 1.6rem; border-radius: var(--radius); cursor: pointer; white-space: nowrap; text-decoration: none;
  color: var(--foreground); overflow: hidden;
  background: linear-gradient(168deg, #fff 0%, #fcfcfc 40%, #f4f4f6 70%, #f8f8fa 100%);
  border: 1px solid rgb(0 0 0 / 0.06);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.06);
  transition: box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-skeu:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 1), inset 0 -1px 0 rgb(0 0 0 / 0.04), 0 2px 5px rgb(0 0 0 / 0.06), 0 8px 20px rgb(0 0 0 / 0.07); }
.btn-skeu:active { transform: translateY(1px); }
.btn-skeu.full { width: 100%; }

/* Event-card register pill: the skeu CTA, reused on the card grid so the register action reads as a
   real button (not unstyled link text the same color as its background). */
.ev-register {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none;
  height: 2.5rem; padding: 0 1.15rem; border-radius: var(--radius); cursor: pointer; color: var(--foreground);
  background: linear-gradient(168deg, #fff 0%, #fcfcfc 40%, #f4f4f6 70%, #f8f8fa 100%);
  border: 1px solid rgb(0 0 0 / 0.06);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.06);
  transition: box-shadow 150ms cubic-bezier(0.23,1,0.32,1), transform 150ms cubic-bezier(0.23,1,0.32,1);
  margin-top: 4px;
}
.ev-register:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 1), 0 2px 5px rgb(0 0 0 / 0.06), 0 8px 20px rgb(0 0 0 / 0.07); }
.ev-register:active { transform: translateY(1px); }

/* Inverted dark pill — the homepage's primary dark CTA. */
.btn-inverted {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700; line-height: 1.25rem;
  height: 3rem; padding: 0 1.6rem; border-radius: var(--radius); cursor: pointer; white-space: nowrap; text-decoration: none;
  color: rgb(250 250 250); overflow: hidden;
  background: linear-gradient(168deg, rgb(32 32 38) 0%, rgb(48 48 56) 30%, rgb(28 28 34) 55%, rgb(42 42 50) 80%, rgb(32 32 38) 100%);
  border: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.16), 0 4px 12px rgb(0 0 0 / 0.12);
  transition: box-shadow 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-inverted:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 -1px 0 rgb(0 0 0 / 0.3), 0 2px 5px rgb(0 0 0 / 0.18), 0 8px 20px rgb(0 0 0 / 0.14); }
.btn-inverted:active { transform: translateY(1px); }
.btn-inverted.full { width: 100%; }

/* Section badge — the homepage's pill-shaped eyebrow above big headings. */
.zo-sec-badge { display: inline-flex; align-items: center; border-radius: 0.5rem; padding: 0.375rem 0.75rem; background: var(--muted); margin-bottom: 16px; }
.zo-sec-badge span { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); line-height: 1.25; }

/* ── Auth (login) screen ─────────────────────────────────────────────────── */
.auth-wrap { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px 20px; }
.auth-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 32px 30px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; }
.auth-brand .peg { width: 42px; height: 42px; }
.auth-brand .wordmark { height: 22px; }
.auth-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); }
.auth-card h1 {
  font-family: var(--font-serif); font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
  text-align: center; margin: 0 0 6px;
  background: linear-gradient(170deg, rgb(52 52 64) 0%, rgb(88 88 100) 10%, rgb(58 58 72) 20%, rgb(100 100 112) 32%, rgb(64 64 78) 42%, rgb(92 92 106) 52%, rgb(54 54 68) 62%, rgb(86 86 100) 72%, rgb(56 56 70) 82%, rgb(80 80 94) 91%, rgb(60 60 74) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 -1px 0 rgb(255 255 255 / 0.35), 0 1px 1px rgb(0 0 0 / 0.3), 0 3px 6px rgb(0 0 0 / 0.12);
}
.auth-lede { font-family: var(--font-display); margin: 0 0 18px; font-size: 15px; color: var(--muted-foreground); text-align: center; line-height: 1.5; }
.auth-foot { font-size: 14px; color: var(--muted-foreground); }
.auth-foot a { color: var(--foreground); font-weight: 500; }

/* Post-submit confirmation: an unmistakable "we've sent it" state in place of the form. */
.auth-sent { text-align: center; }
.auth-sent-badge {
  width: 52px; height: 52px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--foreground); border: 1px solid var(--border);
}
.auth-sent-badge svg { width: 26px; height: 26px; }
.auth-sent .auth-lede { margin-bottom: 16px; }
.auth-sent-facts {
  list-style: none; margin: 0 0 18px; padding: 14px 16px; text-align: left;
  background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
  font-size: 13px; color: var(--muted-foreground); line-height: 1.5;
}
.auth-sent-facts li + li { margin-top: 7px; }
.auth-sent-facts strong { color: var(--foreground); font-weight: 500; }
.auth-sent .btn-ghost.full { width: 100%; padding: 9px 12px; }

/* ── Welcome / first-login agreement gate ──────────────────────────────────── */
.wel-wrap { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 48px 20px 64px; }
/* Exit-view bar for an admin who reached the agreement gate through "View as". Fixed so it is always
   reachable regardless of scroll; the page content is pushed down while it is shown. */
.wel-viewas-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 24px; background: var(--secondary); border-bottom: 2px solid #c96442;
  color: var(--foreground); font-size: 13px;
}
body.wel-is-viewing .wel-wrap { padding-top: 84px; }
.wel-card { width: 100%; max-width: 640px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 36px 38px; }
.wel-h1 {
  font-family: var(--font-serif); font-size: 30px; font-weight: 500; letter-spacing: -0.02em;
  text-align: center; margin: 4px 0 6px;
  background: linear-gradient(170deg, rgb(52 52 64) 0%, rgb(88 88 100) 10%, rgb(58 58 72) 20%, rgb(100 100 112) 32%, rgb(64 64 78) 42%, rgb(92 92 106) 52%, rgb(54 54 68) 62%, rgb(86 86 100) 72%, rgb(56 56 70) 82%, rgb(80 80 94) 91%, rgb(60 60 74) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 -1px 0 rgb(255 255 255 / 0.35), 0 1px 1px rgb(0 0 0 / 0.3), 0 3px 6px rgb(0 0 0 / 0.12);
}
.wel-lede { font-family: var(--font-display); margin: 0 auto 22px; max-width: 520px; font-size: 15px; color: var(--muted-foreground); text-align: center; line-height: 1.55; }
.wel-doc { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--background); padding: 22px 24px; margin-bottom: 24px; }
.wel-doc h1 { font-family: var(--font-serif); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 10px; }
.wel-doc h2 { font-family: var(--font-serif); font-size: 15px; font-weight: 500; margin: 18px 0 6px; }
.wel-doc h3 { font-family: var(--font-serif); font-size: 14px; font-weight: 500; margin: 14px 0 4px; }
.wel-doc p { font-size: 13.5px; line-height: 1.6; color: var(--foreground); margin: 0 0 10px; }
.wel-doc ul, .wel-doc ol { margin: 0 0 10px; padding-left: 20px; }
.wel-doc li { font-size: 13.5px; line-height: 1.55; margin: 0 0 4px; }
.wel-form { display: flex; flex-direction: column; gap: 18px; }
.wel-field { display: flex; flex-direction: column; gap: 5px; }
.wel-label { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--foreground); }
.wel-sub { font-size: 12.5px; line-height: 1.45; }
.wel-input { width: 100%; font-family: var(--font-sans); font-size: 15px; padding: 11px 13px; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) - 5px); transition: box-shadow 120ms ease, border-color 120ms ease; }
.wel-input:focus { outline: none; border-color: var(--muted-foreground); box-shadow: 0 0 0 3px oklch(0.74 0.04 80 / 0.4); }
.wel-sign { font-family: var(--font-serif); font-size: 19px; letter-spacing: 0.01em; }
.wel-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--foreground); line-height: 1.45; cursor: pointer; }
.wel-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--foreground); flex-shrink: 0; }

/* Intro splash: the warm first-screen shown before the agreement. "Let's build" or "Skip" reveals
   the agreement view in the same card. */
.wel-intro { display: flex; flex-direction: column; align-items: center; }
.wel-intro[hidden] { display: none; }
.wel-intro-body { font-family: var(--font-display); max-width: 480px; margin: 8px auto 4px; text-align: center; }
.wel-intro-body p { font-size: 16px; line-height: 1.62; color: var(--foreground); margin: 0 0 14px; }
.wel-intro-body .wel-intro-sign { font-family: var(--font-serif); font-size: 18px; color: var(--foreground); margin-top: 20px; }
.wel-intro-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 360px; margin-top: 26px; }
.wel-skip {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--muted-foreground);
  background: transparent; border: 0; padding: 4px 8px; cursor: pointer;
  transition: color 120ms ease;
}
.wel-skip:hover { color: var(--foreground); }
.note.ok { color: oklch(0.52 0.1 155); }
.note.err { color: oklch(0.55 0.16 25); }

/* ── Modal (event creation, etc.) ──────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-start; justify-content: center; padding: 48px 16px; background: oklch(0.28 0.01 70 / 0.5); overflow-y: auto; }
.modal-overlay.open { display: flex; }
/* margin:auto centers the dialog on both axes inside the flex overlay when it fits, and lets a tall
   dialog scroll from the top instead of being pinned to the viewport top. */
.modal { width: 100%; max-width: 580px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-title { font-family: var(--font-serif); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.modal-body { padding: 20px 22px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); }
.modal-foot .note { margin: 0; margin-right: auto; }

.page-actions { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.page-actions h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin: 0; }

/* ── City overview (/app/cities/:slug) ─────────────────────────────────────── */
.city-link { color: var(--foreground); font-weight: 600; }
.city-link:hover { text-decoration: underline; }
.back-link { display: inline-block; margin-bottom: 14px; font-size: 13px; color: var(--muted-foreground); }
.back-link:hover { color: var(--foreground); }

.city-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.city-head-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.city-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.city-wires { display: flex; align-items: center; gap: 6px; margin-top: 10px; }

.overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; display: flex; flex-direction: column; }
.panel h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin: 0 0 14px; }

.readiness { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.readiness li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.3; }
.check-mark { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; margin-top: 1px; }
.check-on { color: var(--foreground); }
.check-on .check-mark { background: var(--positive-soft); color: var(--positive); }
.check-off { color: var(--muted-foreground); }
.check-off .check-mark { background: var(--muted); color: var(--muted-foreground); }

/* Ambassador onboarding checklist */
.onb-list { gap: 10px; }
.onb-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px; align-items: center; gap: 12px; }
.onb-item .check-mark { margin-top: 0; }
.onb-body { flex: 1; min-width: 0; }
.onb-title { font-size: 14px; font-weight: 600; }
.onb-detail { font-size: 12px; margin-top: 2px; }
.onb-action { flex: none; }

/* The "Start here" card: a soft tinted panel so it reads as a temporary nudge, not a permanent fixture. */
.onb-card { border: 1px solid color-mix(in oklch, var(--border) 65%, transparent); background: color-mix(in oklch, var(--accent) 38%, transparent); box-shadow: none; }
.onb-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.onb-card-head h2 { margin: 0; }
.onb-card-sub { font-size: 12px; margin-top: 3px; }
.onb-card-head button { flex: none; }

/* Interviewer booking-link capture on Home: same tinted nudge, form kept to a readable width. */
.bk-prompt h2 { margin-bottom: 2px; }
.bk-prompt .onb-card-sub { margin: 0 0 14px; }
.bk-prompt form { max-width: 560px; }

/* Imported-member orientation walkthrough card */
.wt-block .onb-item { padding: 12px 16px; }
.wt-video { position: relative; width: 100%; padding-top: 56.25%; margin: 14px 0 4px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); background: var(--muted); }
.wt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.kv { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.kv-v { font-size: 16px; }

.econ { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 10px; }
.econ-cell { display: flex; flex-direction: column; gap: 4px; }
.econ-n { font-family: var(--font-serif); font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }

.lead-swap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.lead-swap select, .amb-manage, .amb-track, .amb-city {
  padding: 8px 10px; font-family: var(--font-sans); font-size: 14px; color: var(--foreground);
  background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 6px); outline: none; cursor: pointer;
}
.lead-swap select:focus, .amb-manage:focus, .amb-track:focus, .amb-city:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.amb-manage:disabled, .amb-track:disabled, .amb-city:disabled { opacity: 0.5; cursor: progress; }
.lead-swap .flash { margin-top: 0; }
.amb-remove:disabled { opacity: 0.5; cursor: progress; }

/* City Team section: the lead sits as a labeled row above the ambassador table. */
.team-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); }
.team-lead-l { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.team-lead .lead-swap { margin-top: 0; margin-left: auto; }
.amb-add-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.overview-grid.ov-single { grid-template-columns: 1fr; }

/* Compact button variant + an inline action group for tab headers. */
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.page-actions-grp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Inline reveal-on-toggle card forms (Venues add, Roster add-ambassador). */
.card-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 16px; }
.card-form[hidden] { display: none; }
.card-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.card-form-foot .flash { margin-top: 0; }
.amb-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.amb-add-row select { flex: 1; min-width: 240px; padding: 8px 10px; font-family: var(--font-sans); font-size: 14px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 6px); outline: none; cursor: pointer; }
.amb-add-row select:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.amb-add-row .flash { margin-top: 0; }

@media (max-width: 860px) { .overview-grid { grid-template-columns: 1fr; } }

/* Two-column form grid used inside the modal. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; margin: 0; }
.form-grid label[hidden] { display: none; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .check { flex-direction: row; align-items: center; gap: 8px; }
.form-grid .check input { width: auto; }
.form-grid select,
.form-grid textarea {
  width: 100%; padding: 10px 12px; font-family: var(--font-sans); font-size: 15px;
  color: var(--foreground); background: var(--card); border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px); outline: none;
}
.form-grid select:focus,
.form-grid textarea:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* A roomier modal for the event form, which carries more fields than a simple create dialog. */
.modal-wide { max-width: 660px; }
.lbl-opt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); font-weight: 400; }
/* Public-vs-internal event copy: colour-code the two hints so a host can't confuse what Luma publishes
   with what stays private. Green = goes public; amber = stays internal. Rendered as a block chip so the
   longer warning reads clearly under the field label. */
.lbl-opt.lbl-public, .lbl-opt.lbl-private { display: block; margin-top: 4px; text-transform: none; letter-spacing: 0; font-size: 11.5px; line-height: 1.4; padding: 5px 9px; border-radius: 7px; font-weight: 500; }
.lbl-opt.lbl-public { color: #1f6f43; background: color-mix(in oklch, #2f9e63 16%, transparent); border: 1px solid color-mix(in oklch, #2f9e63 34%, transparent); }
.lbl-opt.lbl-private { color: #8a5a12; background: color-mix(in oklch, #d08a2e 16%, transparent); border: 1px solid color-mix(in oklch, #d08a2e 34%, transparent); }
.btn-xs { font-size: 12.5px; padding: 5px 10px; }

/* A bordered sub-section inside the form (the venue picker + its inline add-venue panel). */
.field-group { border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); padding: 12px; background: oklch(0.99 0.004 95 / 0.4); display: flex; flex-direction: column; gap: 10px; }
.field-group[hidden] { display: none; }
.fg-head { display: flex; align-items: center; justify-content: space-between; }
.fg-label { font-size: 14px; }
.field-group > select { width: 100%; padding: 10px 12px; font-family: var(--font-sans); font-size: 15px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px); outline: none; }

.venue-info { font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.venue-info[hidden] { display: none; }
.vi-addr { color: var(--muted-foreground); }
.vi-facts { font-size: 13px; }
.vi-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vi-notes { font-size: 13px; font-style: italic; }
.vi-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vi-map { width: 100%; height: 150px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); }

.venue-subform { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.venue-subform[hidden] { display: none; }
.vsub-note { margin: 0; }
.vsub-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* OSM/Nominatim venue search: input + button row, then a pickable result list. */
.vsearch-row { display: flex; gap: 8px; align-items: center; }
.vsearch-row input { flex: 1; min-width: 0; padding: 10px 12px; font-family: var(--font-sans); font-size: 14px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px); outline: none; }
.vsearch-row input:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.vsearch-results { display: flex; flex-direction: column; gap: 4px; }
.vsearch-results[hidden] { display: none; }
.vsearch-note { font-size: 13px; }
.vsearch-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; font-family: var(--font-sans); font-size: 13px; color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); cursor: pointer; }
.vsearch-hit:hover { border-color: var(--ring); background: var(--accent); }
.vsearch-hit span { font-size: 12px; }
/* Host-facing venue notes shown under the name in the city Venues table. */
.ven-notes { font-size: 12px; font-weight: 400; font-style: italic; max-width: 280px; }

/* Swag / promo ask: the checkbox plus its reveal-on-tick detail textarea. */
.ask-block { display: flex; flex-direction: column; gap: 8px; }
.ask-block textarea { width: 100%; padding: 10px 12px; font-family: var(--font-sans); font-size: 14px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px); outline: none; }
.ask-block textarea:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }

/* Review modal: swag/promo verdict blocks. Reuses .field-group for the frame; the verdict is a row of
   radio labels, and the promo credit fields reveal only when its verdict is "Approve". */
.review-ask + .review-ask { margin-top: 10px; }
.ra-detail { font-size: 13px; }
.verdict-row { display: flex; flex-wrap: wrap; gap: 16px; }
/* flex-direction is explicit because a verdict row can sit inside .form-grid, whose label rule
   stacks children into a column. */
.verdict-row label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; margin: 0; }
.verdict-row input { width: auto; }
.promo-fields[hidden] { display: none; }
.swag-fields[hidden] { display: none; }

/* Fulfillment queue (admin-only Events sub-tab): one card per event carrying an unsettled swag/promo
   ask, each ask a task block with its own inline controls. Swag approves in a click; promo carries the
   same code/credit fields as the Manage modal. */
.fulfil-list { display: flex; flex-direction: column; gap: 14px; }
.fulfil-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.fulfil-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fulfil-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fulfil-task { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.fulfil-task-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.fulfil-kind { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--foreground); font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--muted); }
.fulfil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fulfil-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; margin: 0; }
.fulfil-grid .full { grid-column: 1 / -1; }
.fulfil-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fulfil-actions .fulfil-msg { margin: 0 auto 0 0; }
.fulfil-empty { border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px 20px; text-align: center; }
@media (max-width: 560px) { .fulfil-grid { grid-template-columns: 1fr; } .fulfil-head { flex-direction: column; } }

/* Settings: the per-user account + public-profile editor. */
.set-sub { color: var(--muted-foreground); font-size: 14px; margin: -4px 0 14px; }
.set-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.set-photo .amb-photo, .set-photo .amb-initials { width: 64px; height: 64px; font-size: 20px; }
.set-photo .field { flex: 1 1 auto; min-width: 0; }
.set-photo-controls { display: flex; flex-direction: column; gap: 6px; }
.set-photo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.set-photo-btns label { cursor: pointer; margin: 0; }
.set-photo-controls .note { margin: 0; }

/* Applicant detail drawer: read an application top-down, then act on it from the same surface. */
.row-click { cursor: pointer; }
.modal-wide { max-width: 980px; }
/* Wide drawer splits into a read column (who they are, every answer) and an act column (funnel). */
.appd-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 0 36px; }
.appd-col { min-width: 0; }
.appd-col-act { border-left: 1px solid var(--border); padding-left: 36px; }
.appd-col-act > .appd-section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 900px) {
  .appd-cols { grid-template-columns: 1fr; }
  .appd-col-act { border-left: 0; padding-left: 0; }
  .appd-col-act > .appd-section:first-child { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 16px; }
}
.appd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.appd-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.appd-avatar { flex: none; width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 1px solid var(--border); }
.appd-avatar-blank { display: inline-flex; align-items: center; justify-content: center; background: var(--muted); color: var(--muted-foreground); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; }
.appd-name { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.score-pill { flex: none; font-family: var(--font-mono); font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--muted); color: var(--foreground); }
.appd-summary { font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
/* The auto-score component breakdown under the summary: "answers 32/40 · socials 10/20 · …". */
.appd-score-parts { font-family: var(--font-mono); font-size: 12px; margin: -10px 0 16px; }
.appd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 4px; }
.appd-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.appd-k { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); }
.appd-v { font-size: 14px; word-break: break-word; }
.appd-v a { word-break: break-all; }
.appd-section { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 16px; }
.appd-section h3 { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); margin: 0 0 12px; }
.appd-q { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.appd-q:last-child { margin-bottom: 0; }
.appd-ql { font-size: 13px; font-weight: 600; }
.appd-qa { font-size: 14px; line-height: 1.55; color: var(--muted-foreground); white-space: pre-wrap; }
.appd-funnel-hint { font-size: 12.5px; line-height: 1.5; margin: -6px 0 12px; }
.appd-stage { border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: color-mix(in oklch, var(--card) 60%, transparent); padding: 12px 14px; margin-bottom: 10px; }
.appd-stage:last-child { margin-bottom: 0; }
.appd-stage-next { border-color: color-mix(in oklch, var(--primary) 55%, var(--border)); background: color-mix(in oklch, var(--accent) 45%, transparent); }
.appd-stage-head { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.appd-stage-t { font-size: 13.5px; font-weight: 600; }
.appd-next { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary-foreground); background: var(--primary); border-radius: 999px; padding: 2px 8px; }
.appd-stage-hint { font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
.appd-stage .appd-act { margin-bottom: 0; }
.appd-act { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.appd-act:last-child { margin-bottom: 0; }
.appd-act .field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; min-width: 0; }
.appd-act .field.wide { flex: 1 1 100%; }
.appd-act .field-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); }
.appd-act select, .appd-act input, .appd-act textarea {
  width: 100%; padding: 9px 11px; font-family: var(--font-sans); font-size: 14px; color: var(--foreground);
  background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 5px); outline: none;
}
.appd-act select:focus, .appd-act input:focus, .appd-act textarea:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.appd-act button { flex: 0 0 auto; }
.appd-skip { display: flex; align-items: center; gap: 7px; flex: 1 1 100%; font-size: 13px; color: var(--muted-foreground); cursor: pointer; }
.appd-act .appd-skip input[type="checkbox"] { width: auto; padding: 0; accent-color: var(--primary); }
.appd-msg { font-size: 14px; margin: 4px 0 0; min-height: 18px; }
.appd-msg.ok { color: var(--positive); }
.appd-msg.err { color: var(--destructive); }
.appd-hint { flex: 1 1 100%; font-size: 12.5px; color: var(--muted-foreground); margin: 2px 0 0; }

/* ── Brand kit ───────────────────────────────────────────────────────────────
   The in-app design system reference: logo, palette, type, voice. Reuses .block for sections. */
.page-lede { font-family: var(--font-display); font-size: 16px; color: var(--muted-foreground); margin: 0 0 28px; max-width: 60ch; }

/* Brand kit link-out card. The canonical kit lives on zo.computer, which sets frame-ancestors 'self'
   and so can't be iframed from this app; this card links out to it. */
.brand-embed { display: flex; gap: 24px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 24px 26px; text-decoration: none; color: inherit; transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.brand-embed:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.brand-embed-art { flex: none; width: 176px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: calc(var(--radius) - 3px); background:
  radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in oklch, var(--aurora-gold) 22%, transparent), transparent 70%), var(--secondary); }
.brand-embed-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; }
.brand-embed-body p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 52ch; }
.brand-embed-cta { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--foreground); background: var(--secondary); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; display: inline-block; }
.brand-embed:hover .brand-embed-cta { background: var(--muted); }
@media (max-width: 640px) { .brand-embed { flex-direction: column; align-items: stretch; } .brand-embed-art { width: 100%; } }

/* Brand kit embed. The canonical kit is proxied live from zo.computer and framed here (see brand.ts).
   .brand-head sits the lede next to an "open on zo.computer" escape hatch; the frame fills the viewport. */
.brand-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.brand-head .page-lede { margin: 0; }
.brand-frame-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
.brand-frame { display: block; width: 100%; height: calc(100dvh - 210px); min-height: 560px; border: 0; }

.sub-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin: 22px 0 12px; }

/* Logo tiles */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.logo-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.logo-art { height: 130px; display: flex; align-items: center; justify-content: center; gap: 8px; background:
  radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in oklch, var(--aurora-gold) 22%, transparent), transparent 70%), var(--secondary); }
.logo-peg { width: 56px; height: 56px; }
.logo-word { height: 30px; }
.logo-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }

/* Color swatches (click to copy) */
.swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.swatch { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow 150ms, transform 150ms; }
.swatch:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.swatch:active { transform: translateY(0); }
.swatch-chip { flex: none; width: 40px; height: 40px; border-radius: 9px; border: 1px solid rgba(61,57,41,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.swatch-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.swatch-name { font-size: 13px; font-weight: 600; }
.swatch-val { font-size: 11px; color: var(--muted-foreground); }
.swatch-note { font-size: 11px; color: var(--muted-foreground); line-height: 1.4; margin-top: 2px; }

/* Type specimens */
.type-list { display: flex; flex-direction: column; gap: 14px; }
.type-spec { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px 22px; }
.type-sample { color: var(--foreground); margin-bottom: 14px; line-height: 1.1; }
.spec-serif { font-family: var(--font-serif); font-size: 38px; font-weight: 500; letter-spacing: -0.02em; }
.spec-display { font-family: var(--font-display); font-size: 27px; }
.spec-sans { font-family: var(--font-sans); font-size: 22px; }
.spec-mono { font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.02em; }
.type-meta { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.type-name { font-size: 13px; font-weight: 600; }
.type-role { font-size: 13px; color: var(--muted-foreground); }
.type-meta .type-role { margin-right: auto; }

/* Voice + copy snippets */
.voice-rules { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; margin-bottom: 16px; }
.voice-rules p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.voice-rules ul { margin: 0; padding-left: 18px; }
.voice-rules li { font-size: 14px; line-height: 1.7; color: var(--secondary-foreground); }
.snippet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.snippet { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 3px); box-shadow: var(--shadow-sm); padding: 14px 16px; }
.snippet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.snippet-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); }
.snippet-text { margin: 0; font-size: 14px; line-height: 1.6; }

/* The small mono "copy" / "download" pill used across the kit */
.copy-pill { font-family: var(--font-mono); font-size: 11px; color: var(--foreground); background: var(--secondary); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 120ms; }
.copy-pill:hover { background: var(--muted); }

/* Copy confirmation toast */
.copy-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 14px); opacity: 0; pointer-events: none; background: var(--primary); color: var(--primary-foreground); font-family: var(--font-mono); font-size: 12px; padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow-md); transition: opacity 160ms, transform 160ms; z-index: 50; }
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }
.copy-pill.danger { color: var(--destructive); }
.copy-pill.danger:hover { background: var(--destructive-soft, var(--muted)); }

/* Toolkit: section blocks of authored cards. Cards follow the homepage card spec (hairline border,
   warm layered shadow, 12px radius, lift on hover). */
.toolkit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tk-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 18px 18px 16px; transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.tk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tk-card h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.tk-card-tags { display: flex; gap: 6px; flex-shrink: 0; }
.tk-body { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--foreground); }
.tk-body p { margin: 0 0 8px; }
.tk-body p:last-child { margin-bottom: 0; }
.tk-body > :first-child { margin-top: 0; }
.tk-body > :last-child { margin-bottom: 0; }

/* Content-aware card layouts (see renderCardBody): labelled records, step lists, and sub-labelled
   bullet lists, so each card reads the way its content is shaped. */
.tk-fields { margin: 10px 0; display: flex; flex-direction: column; gap: 7px; }
.tk-field { margin: 0; }
.tk-field-k { font-weight: 600; color: #c96442; }
.tk-field-k::after { content: ":"; color: var(--muted-foreground); }
.tk-steps { margin: 10px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.tk-steps li { line-height: 1.55; padding-left: 2px; }
.tk-sublabel { margin: 12px 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
.tk-lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.tk-lines li { line-height: 1.5; }
.tk-body a { color: #c96442; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.tk-body a:hover { text-decoration: none; }
.page-actions h2 .badge { vertical-align: middle; margin-left: 6px; }

/* Skills tab: the live registry grid sits below the seed cards, with a search box that filters the
   client-fetched catalog in place. Grid reuses .toolkit-cards / .tk-card styling. */
.tk-skills { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 18px; }
.tk-skills-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-skills-search {
  flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--foreground); font-family: var(--font-sans); font-size: 14px;
}
.tk-skills-search:focus { outline: none; border-color: #c96442; box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.12); }
.tk-skills-status { flex-shrink: 0; font-size: 12px; color: var(--muted-foreground); }

/* Toolkit tab rail: a left vertical list of icon+title tabs (mirrors Joanna's toolkit), with the
   active section's lede and cards in the panel to the right. Collapses to a horizontal scroller on
   narrow screens. */
.tk-layout { display: grid; grid-template-columns: 232px 1fr; gap: 28px; align-items: start; }
.tk-rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; }
.tk-tab {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent;
  color: var(--secondary-foreground); font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.tk-tab:hover { background: var(--secondary); color: var(--foreground); }
.tk-tab.active { background: var(--card); border-color: var(--border); color: var(--foreground); box-shadow: var(--shadow-sm); }
.tk-tab-icon { flex-shrink: 0; width: 22px; text-align: center; font-size: 15px; line-height: 1; }
.tk-tab-icon-empty { opacity: 0.35; }
.tk-tab-label { flex: 1; min-width: 0; }
.tk-tab-count { flex-shrink: 0; font-size: 10.5px; color: var(--muted-foreground); background: var(--secondary); border-radius: 999px; padding: 1px 7px; }
.tk-tab.active .tk-tab-count { background: var(--accent); }

.tk-panels { min-width: 0; }
.tk-panel { display: none; }
.tk-panel.active { display: block; animation: tk-fade 220ms ease; }
@keyframes tk-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tk-panel-head { margin-bottom: 18px; }
.tk-eyebrow { display: block; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 6px; }
.tk-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tk-panel-title h2 { font-family: var(--font-serif); font-size: 26px; font-weight: 500; letter-spacing: -0.015em; margin: 0; }
.tk-lede { font-family: var(--font-display); font-size: 15.5px; line-height: 1.55; color: var(--muted-foreground); margin: 8px 0 0; max-width: 64ch; }

/* Reader view: the first card of a section spans the grid as its anchor idea. */
.tk-card-hero { grid-column: 1 / -1; border-color: rgba(201, 100, 66, 0.35); background: linear-gradient(135deg, rgba(201, 100, 66, 0.07), var(--card) 60%); }
.tk-card-hero h3 { font-size: 22px; }
.tk-card-hero .tk-body { font-size: 15px; max-width: 72ch; }

/* Layouts echoing the old zo.space toolkit: an inverted full-width banner (Overview's closer), a
   compact 3-col tile wall (Integrations), accent-ink questions (Handle Doubt), and a master/detail
   picker (Use Cases, Channel Playbooks) that shows one persona/channel at a time. */
.tk-card-banner { grid-column: 1 / -1; background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.tk-card-banner h3 { color: inherit; font-size: 22px; }
.tk-card-banner .tk-body { color: inherit; opacity: 0.92; font-size: 15px; max-width: 72ch; }
.tk-card-banner .tk-field-k { color: #e9a58c; }
.tk-card-banner .tk-body a { color: #e9a58c; }
.toolkit-cards.tk-cols-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tk-qa .tk-card h3 { color: #c96442; }
.tk-picker-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tk-pick { font-family: var(--font-sans); font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); cursor: pointer; transition: background 120ms, color 120ms; }
.tk-pick:hover { color: var(--foreground); background: var(--secondary); }
.tk-pick.active { background: var(--foreground); border-color: var(--foreground); color: var(--background); }
.tk-pick-pane { display: none; }
.tk-pick-pane.active { display: block; animation: tk-fade 220ms ease; }

/* Pager under a long card grid (authored tabs past 9 cards; the Skills registry past 12). */
.tk-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.tk-pager-label { font-size: 12px; color: var(--muted-foreground); }
.tk-pager button:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 860px) {
  .tk-layout { grid-template-columns: 1fr; gap: 18px; }
  .tk-rail { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; position: static; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .tk-tab { width: auto; white-space: nowrap; flex-shrink: 0; }
  .tk-tab-label { flex: 0 0 auto; }
  .tk-panel-title h2 { font-size: 22px; }
}

/* "Join the community" CTA. A warm card with a terracotta accent stripe (accent ink, never a fill);
   the call to action is the same skeu pill used everywhere else. Body and button sit side by side on
   desktop and stack on mobile. */
.join-card {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid #c96442;
  border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 18px 20px;
}
.join-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 4px; }
.join-sub { font-size: 14px; line-height: 1.55; margin: 0; max-width: 56ch; }
.join-btn { flex-shrink: 0; white-space: nowrap; }
.dir-join { max-width: 1080px; margin: 28px auto 0; padding: 0 24px; }
.community-edit { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.community-edit input { flex: 1 1 320px; }
.community-edit .btn-skeu { flex-shrink: 0; }

@media (max-width: 640px) {
  .join-card { flex-direction: column; align-items: flex-start; gap: 14px; }
  .join-btn { width: 100%; text-align: center; }
}

@media (max-width: 860px) {
  .logo-grid { grid-template-columns: 1fr 1fr; }
  .swatch-grid { grid-template-columns: 1fr 1fr; }
  .snippet-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .logo-grid { grid-template-columns: 1fr; }
  .swatch-grid { grid-template-columns: 1fr; }
}

/* ── Updates (/app/updates): admin broadcast composer + the posted-update list with reach. ─────── */
.ann-form { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.ann-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; margin: 0; }
.ann-form textarea,
.ann-form select {
  width: 100%; padding: 10px 12px; font-family: var(--font-sans); font-size: 15px;
  color: var(--foreground); background: var(--card); border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px); outline: none; resize: vertical;
}
.ann-form textarea:focus,
.ann-form select:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.ann-form select { max-width: 260px; cursor: pointer; }
.ann-form-foot { display: flex; align-items: center; gap: 12px; }
.ann-form-foot .flash { margin-top: 0; margin-right: auto; }

.ann-list { display: flex; flex-direction: column; gap: 12px; }
.ann-item {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 18px;
}
.ann-item.is-archived { opacity: 0.6; }
.ann-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ann-by { font-size: 12px; }
.ann-when { font-size: 12px; margin-left: auto; }
.ann-item-title { font-family: var(--font-serif); font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.ann-item-text { font-size: 14px; line-height: 1.55; color: var(--foreground); }
.ann-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ann-reach { font-size: 13px; }

/* Recipient Home: a dismissible broadcast card at the top of an ambassador's / lead's Home, with the
   same terracotta accent stripe as the community card so it reads as a Zo message, not a system alert. */
.ann-block { display: flex; flex-direction: column; gap: 12px; }
.ann-card {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid #c96442; border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 16px 46px 16px 18px;
}
.ann-title { font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
.ann-text { font-size: 14.5px; line-height: 1.55; }
.ann-x {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: flex;
  align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  color: var(--muted-foreground); background: transparent; border: none; border-radius: 8px; cursor: pointer;
}
.ann-x:hover { background: var(--accent); color: var(--foreground); }
.ann-x:disabled { opacity: 0.5; cursor: progress; }

/* ── Team (/app/team): everyone with app access, inline role change + reversible deactivation. ───── */
.block-intro { margin: -4px 0 16px; }
.team-table tr.is-off td { opacity: 0.6; }
.team-table .row-actions { text-align: left; }
.badge-off { background: var(--muted); color: var(--muted-foreground); }
.role-sel {
  padding: 6px 10px; font-family: var(--font-sans); font-size: 14px; color: var(--foreground);
  background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px);
  cursor: pointer; outline: none;
}
.role-sel:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.btn-skeu.danger { background: var(--destructive); border-color: var(--destructive); color: #fff; }
.btn-ghost.danger { color: var(--destructive); }
.btn-ghost.danger:hover { background: var(--destructive-soft, var(--muted)); }
.off-cities { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.off-city { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.off-city select {
  padding: 8px 10px; font-family: var(--font-sans); font-size: 14px; color: var(--foreground);
  background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px);
  cursor: pointer; outline: none;
}
.off-city select:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }

/* ── Monthly check-in (/app/checkin): ambassador feedback form + admin insights. ─────────────────── */
.checkin-form { display: flex; flex-direction: column; gap: 20px; }
.checkin-q { display: flex; flex-direction: column; gap: 8px; }
.checkin-q > label { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--foreground); }
.checkin-q textarea {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--foreground);
  background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px);
  padding: 10px 12px; resize: vertical; outline: none;
}
.checkin-q textarea:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.sentiment-scale { display: flex; gap: 8px; }
.sent-opt { flex: 1; cursor: pointer; }
.sent-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sent-opt span {
  display: flex; align-items: center; justify-content: center; height: 46px;
  font-family: var(--font-mono); font-size: 16px; color: var(--muted-foreground);
  background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 4px);
  transition: background .15s, border-color .15s, color .15s;
}
.sent-opt:hover span { border-color: var(--muted-foreground); }
.sent-opt input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.sent-opt input:focus-visible + span { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.sent-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; }
.checkin-foot { display: flex; align-items: center; gap: 14px; }
.checkin-foot .flash { margin-top: 0; }
.checkin-status { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sent-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-family: var(--font-mono);
  font-size: 12px; background: var(--muted); color: var(--secondary-foreground);
}
.sent-1, .sent-2 { background: var(--destructive); color: #fff; }
.sent-3 { background: var(--muted); color: var(--secondary-foreground); }
.sent-4, .sent-5 { background: var(--positive-soft); color: var(--positive); }
/* History (ambassador) + responses (admin) */
.hist-list { display: flex; flex-direction: column; gap: 8px; }
.hist-row { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 4px 14px; }
.hist-row summary { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; list-style: none; }
.hist-row summary::-webkit-details-marker { display: none; }
.hist-period { font-weight: 600; }
.hist-body, .resp-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 14px; }
.hist-a .hist-q { display: block; font-size: 12px; margin-bottom: 2px; }
.resp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.resp-card { display: flex; flex-direction: column; gap: 10px; }
.resp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.data-table tr.is-sel td { background: color-mix(in oklch, var(--muted) 55%, transparent); }
/* Home check-in nudge card */
.checkin-home { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.checkin-home.open { border-color: var(--ring); }

/* Segmented List/Calendar toggle */
.seg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--card); box-shadow: var(--shadow-sm); }
.seg { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; padding: 6px 14px; border-radius: 999px; color: var(--muted-foreground); text-decoration: none; line-height: 1; }
.seg:hover { color: var(--foreground); }
.seg.on { background: var(--primary); color: var(--primary-foreground); }

/* Events month-grid calendar */
.cal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cal-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.cal-nav { display: flex; gap: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.cal-cell { min-width: 0; min-height: 104px; padding: 6px 7px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.cal-cell:nth-child(7n+7) { border-right: none; }
.cal-cell.is-out { background: color-mix(in oklch, var(--muted) 35%, transparent); }
.cal-cell.is-out .cal-date { color: var(--muted-foreground); opacity: 0.6; }
.cal-cell.is-today { background: color-mix(in oklch, var(--muted) 55%, transparent); }
.cal-cell.is-today .cal-date { color: var(--primary-foreground); background: var(--primary); border-radius: 999px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.cal-date { font-family: var(--font-mono); font-size: 12px; color: var(--foreground); }
.cal-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-ev { max-width: 100%; font-size: 11.5px; line-height: 1.25; padding: 2px 6px; border-radius: 6px; background: var(--muted); color: var(--foreground); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 2px solid var(--border); }
a.cal-ev:hover { border-color: var(--ring); background: color-mix(in oklch, var(--muted) 70%, transparent); }
.cal-ev-t { font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); }
.cal-ev.live { border-left-color: var(--positive); }
.cal-ev.live .cal-ev-t { color: var(--positive); }
.cal-ev.community { border-left-color: #c96442; }
.cal-ev.community .cal-ev-t { color: #c96442; }
@media (max-width: 720px) {
  .cal-cell { min-height: 72px; padding: 4px; }
  .cal-ev { font-size: 10px; padding: 1px 4px; }
  .cal-ev-t { display: none; }
}

/* Event content (the Content tab): per-event cards over a responsive thumbnail grid. */
.content-event { margin-top: 22px; }
.content-event:first-of-type { margin-top: 8px; }
.content-event-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ce-title { font-family: var(--font-display); font-size: 18px; color: var(--foreground); }
.ce-meta { font-size: 13px; }
.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ct-item { position: relative; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; box-shadow: var(--shadow-sm); }
.ct-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--muted); }
.ct-meta { padding: 7px 9px; font-size: 12px; color: var(--muted-foreground); display: flex; flex-direction: column; gap: 2px; }
.ct-cap { color: var(--foreground); line-height: 1.3; }
.ct-by { font-family: var(--font-mono); font-size: 11px; }
.ct-video { display: flex; flex-direction: column; }
.ct-vid { display: flex; align-items: center; gap: 8px; padding: 22px 12px; text-decoration: none; color: var(--foreground); background: var(--muted); aspect-ratio: 4 / 3; }
.ct-vid:hover { background: color-mix(in oklch, var(--muted) 70%, transparent); }
.ct-play { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 12px; }
.ct-vid-label { font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ct-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; line-height: 1; border: none; border-radius: 999px; background: color-mix(in oklch, var(--foreground) 72%, transparent); color: var(--background); font-size: 16px; cursor: pointer; opacity: 0; transition: opacity 0.12s ease; }
.ct-item:hover .ct-del, .ct-del:focus-visible { opacity: 1; }
.empty-state { text-align: center; padding: 40px 16px; border: 1px dashed var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--muted) 30%, transparent); }
.empty-state p { margin: 0 0 6px; }
@media (max-width: 720px) {
  .content-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .ct-del { opacity: 1; }
}

/* Automations tab: editable email + contract copy with token/CC callouts. */
.auto-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; margin-bottom: 18px; }
.auto-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.auto-name { font-family: var(--font-serif); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.auto-trigger { font-size: 13px; color: var(--muted-foreground); margin: 0 0 14px; }
.auto-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 14px; font-size: 13px; }
.auto-facts dt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); padding-top: 2px; }
.auto-facts dd { margin: 0; color: var(--foreground); }
.auto-facts dd.cc-set { color: #c96442; }
.token-list { display: flex; flex-direction: column; gap: 6px; }
.token-row { display: flex; gap: 10px; align-items: baseline; }
.token-chip { font-family: var(--font-mono); font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--muted); color: var(--secondary-foreground); white-space: nowrap; }
.token-desc { font-size: 13px; color: var(--muted-foreground); }
.auto-grid { display: flex; flex-direction: column; gap: 12px; }
.auto-field { display: flex; flex-direction: column; gap: 5px; }
.auto-field label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); }
.auto-field input, .auto-field textarea {
  width: 100%; padding: 9px 11px; font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  color: var(--foreground); background: var(--card); border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px); outline: none; resize: vertical;
}
.auto-field input:focus, .auto-field textarea:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }
.auto-field textarea.mono { font-family: var(--font-mono); font-size: 13px; }
.auto-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.auto-foot .flash { margin-top: 0; }
.auto-foot .spacer { flex: 1; }

/* Live email preview inside each automation card: the real rendered HTML in a sandboxed iframe. */
.auto-preview { margin-top: 4px; }
.auto-preview-subj { font-size: 13.5px; font-weight: 600; color: var(--foreground); }
.auto-preview-subj .token-desc { font-weight: 400; margin-right: 4px; }
.auto-preview-frame {
  width: 100%; height: 480px; border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px); background: #faf9f5;
}

/* Engine switches: the master on/off per automation engine on the Automations tab. */
.eng-note { font-size: 13px; color: var(--muted-foreground); margin: 0 0 4px; max-width: 64ch; }
.eng-warn { font-size: 13px; color: var(--destructive); margin: 8px 0 2px; }
.eng-group { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground); margin: 20px 0 4px; }
.eng-row { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--border); }
.eng-main { flex: 1; min-width: 0; }
.eng-title { font-size: 14.5px; font-weight: 500; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.eng-cadence { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.eng-desc { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; max-width: 68ch; }
.eng-last { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-foreground); margin-top: 5px; }
.eng-flash.show { margin-top: 4px; }
.eng-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; margin-top: 1px; }
.eng-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.eng-slider { position: absolute; inset: 0; background: var(--muted); border: 1px solid var(--border); border-radius: 999px; transition: background 0.15s, border-color 0.15s; cursor: pointer; }
.eng-slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); transition: transform 0.15s; }
.eng-switch input:checked + .eng-slider { background: var(--positive); border-color: var(--positive); }
.eng-switch input:checked + .eng-slider::before { transform: translateX(16px); }
.eng-switch input:disabled + .eng-slider { opacity: 0.45; cursor: not-allowed; }
.eng-switch input:focus-visible + .eng-slider { box-shadow: var(--ring-shadow); }

/* Logs: the merged admin activity feed (user actions + automation jobs + emails). */
.log-table td { vertical-align: top; }
.log-ts { white-space: nowrap; font-size: 13px; }
.log-abs { font-size: 10.5px; color: var(--muted-foreground); margin-top: 2px; }
.log-actor { font-weight: 500; }
.log-actor.sys { color: var(--muted-foreground); }
.log-role { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.log-src { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; }
.log-what { font-size: 12.5px; }
.log-detail { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; overflow-wrap: anywhere; }
.log-err { font-family: var(--font-mono); font-size: 11px; color: var(--destructive); margin-top: 4px; max-width: 60ch; overflow-wrap: anywhere; }
.log-status { white-space: nowrap; }
.log-search { display: inline-flex; margin-left: auto; }
.log-search input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: 13px; background: var(--card); min-width: 230px; }
.log-search input:focus { outline: none; border-color: var(--ring); box-shadow: var(--ring-shadow); }
.log-qnote { font-size: 13px; color: var(--muted-foreground); margin: -8px 0 12px; }

/* Automations: audience filter + collapsible email cards. */
.auto-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0 0 14px; }
details.auto-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
details.auto-card > summary::-webkit-details-marker { display: none; }
details.auto-card > summary .auto-name { flex: none; }
details.auto-card > summary .auto-sum { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.auto-card > summary .sum-caret { flex: none; color: var(--muted-foreground); transition: transform 0.15s; font-size: 11px; }
details.auto-card[open] > summary .sum-caret { transform: rotate(90deg); }
details.auto-card[open] > summary { margin-bottom: 10px; }
.auto-link-warn { color: var(--destructive); }

/* Automations: collapsible area sections, each holding switch+email units. */
.auto-sections { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; }
.auto-sections .block { margin-bottom: 0; }
details.auto-sec { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
details.auto-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 15px 20px; }
details.auto-sec > summary::-webkit-details-marker { display: none; }
.sec-caret { flex: none; color: var(--muted-foreground); transition: transform 0.15s; font-size: 11px; }
details.auto-sec[open] > summary .sec-caret { transform: rotate(90deg); }
.sec-name { font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.sec-meta { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); white-space: nowrap; }
details.auto-sec[open] > summary { border-bottom: 1px solid var(--border); }
.auto-sec-body { padding: 14px 20px 8px; }
.auto-sec-body > .eng-note:first-child { margin-top: 0; }

/* A switch and the emails it controls as one unit; consecutive units get a divider. */
.auto-unit { padding: 12px 0; }
.auto-unit:first-child { padding-top: 2px; }
.auto-unit + .auto-unit { border-top: 1px solid var(--border); }
.auto-unit .eng-row { border-top: none; padding: 0; }
.auto-unit-mails { margin: 10px 0 2px 52px; }
.auto-sec-body .auto-card { box-shadow: none; margin-bottom: 0; }
.auto-sec-body .auto-card + .auto-card { margin-top: 10px; }
.auto-card-nested { background: color-mix(in oklch, var(--muted) 28%, transparent); }
.auto-trig { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); background: var(--muted); border-radius: 999px; padding: 2px 9px; white-space: nowrap; flex: none; }
@media (max-width: 720px) {
  details.auto-sec > summary { padding: 13px 14px; }
  .auto-sec-body { padding: 12px 14px 6px; }
  .auto-unit-mails { margin-left: 0; }
}

/* Events: collapsible "needs review" queue pinned above the main table. */
details.review-sec { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
details.review-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 15px 20px; }
details.review-sec > summary::-webkit-details-marker { display: none; }
details.review-sec[open] > summary { border-bottom: 1px solid var(--border); }
details.review-sec[open] > summary .sec-caret { transform: rotate(90deg); }
.review-body { padding: 12px 20px 6px; }
@media (max-width: 720px) {
  details.review-sec > summary { padding: 13px 14px; }
  .review-body { padding: 11px 14px 4px; }
}