/* ============================================================
   YesWeTrust — Design System
   Apple-premium · dark · glass over calm nature
   ============================================================ */

:root {
  /* surfaces */
  --bg-0: #0d0f0c;
  --bg-1: #12150f;

  /* ink */
  --ink:        #f3f6f3;
  --ink-2:      rgba(243, 246, 243, 0.62);
  --ink-3:      rgba(243, 246, 243, 0.52);   /* T6: 0.40 (3.6:1, fails AA) -> 0.52 (~5.3:1) for muted text; still clearly below --ink-2 */
  --ink-4:      rgba(243, 246, 243, 0.26);

  /* lines + glass */
  --line:       rgba(255, 255, 255, 0.12);
  --line-2:     rgba(255, 255, 255, 0.08);
  /* surfaces are DARK tints (not white film) so boxes stay legible over bright scenes */
  --glass:      rgba(10, 14, 12, 0.62);
  --glass-2:    rgba(16, 21, 18, 0.74);
  --glass-hi:   rgba(255, 255, 255, 0.15);

  /* nature accents (softened — less neon, more sage) */
  --green:      oklch(0.76 0.085 150);
  --green-mid:  oklch(0.58 0.09 152);
  --green-deep: oklch(0.40 0.07 156);
  --sky:        oklch(0.74 0.07 235);
  --sand:       oklch(0.82 0.07 80);

  /* radii */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px -28px rgba(0,0,0,0.7);
  --shadow-pop:  0 30px 80px -24px rgba(0,0,0,0.85);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --maxw: 1480px;

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* a11y: a visible keyboard-focus ring on every interactive control (was missing).
   No border-radius override here — the outline follows each control's own radius. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
/* robustness: a long unbroken string wraps instead of overflowing its container */
body { overflow-wrap: break-word; }
/* icon glyphs never clip at sub-pixel on iOS Safari */
.icon-btn svg { overflow: visible; }

/* Reserve the scrollbar's gutter whether or not it is showing. Without this the page's
   WIDTH depends on its HEIGHT: swapping a section for a taller or shorter one makes the
   vertical scrollbar appear or vanish, and the centred shell slides sideways by half a
   scrollbar and back. Costs nothing where scrollbars are overlays (macOS by default). */
html { scrollbar-gutter: stable; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
}

/* grain overlay — premium texture, applied app-wide via .grain */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

::selection { background: oklch(0.78 0.13 150 / 0.3); }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); background-clip: padding-box; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.shell {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px clamp(20px, 3.4vw, 48px) 64px;
}

/* full-bleed scene background layer — heavily blurred to a calm tonal wash */
.scene {
  position: fixed;
  inset: -80px;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(var(--scene-blur, 6px)) saturate(1.06);
  transition: opacity 0.6s var(--ease);
}
.scene-fade {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(125% 85% at 50% -10%, transparent 46%, rgba(4,7,8,0.45) 100%),
    linear-gradient(180deg, rgba(5,8,9,0.30) 0%, rgba(5,8,9,0.0) 32%, rgba(5,8,9,0.0) 60%, rgba(5,8,9,0.45) 100%);
}

/* ---- real nature scenes (premium calm photography + light, warm scrim) ---- */
.scene-night {
  background-image:
    radial-gradient(125% 88% at 50% 60%, rgba(12,14,11,0.10) 0%, rgba(12,14,11,0.40) 100%),
    linear-gradient(180deg, rgba(14,16,12,0.46) 0%, rgba(14,16,12,0.28) 50%, rgba(14,16,12,0.58) 100%),
    url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=2400&q=80");
}
.scene-grass {
  background-image:
    linear-gradient(180deg, rgba(12,16,11,0.42) 0%, rgba(12,16,11,0.26) 42%, rgba(12,16,11,0.56) 100%),
    url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=2400&q=80");
}
.scene-ocean {
  background-image:
    linear-gradient(180deg, rgba(11,15,16,0.44) 0%, rgba(11,15,16,0.28) 42%, rgba(11,15,16,0.56) 100%),
    url("https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=2400&q=80");
}
.scene-dawn {
  background-image:
    linear-gradient(180deg, rgba(15,15,13,0.44) 0%, rgba(15,15,13,0.28) 42%, rgba(15,15,13,0.58) 100%),
    url("https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=2400&q=80");
}

/* ============================================================
   GLASS PRIMITIVES
   ============================================================ */
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  box-shadow: var(--shadow-card);
}
.glass-soft {
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}

/* "account pending review" notice — shell-level under the top bar, or under the back bar on detail pages */
.pending-banner {
  position: relative; z-index: 6;
  margin: 0 0 16px; padding: 12px 18px; border-radius: 14px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--ink-2);
}
/* #17 — sit the banner right under the top bar without a huge gap */
.shell > .topbar + .pending-banner { margin-top: -6px; }
.shell:has(> .pending-banner) > .topbar { margin-bottom: 14px; }

/* ============================================================
   BUTTONS / PILLS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease), opacity 0.2s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-white { background: #fff; color: #0a0c0b; }
.btn-white:hover { background: #f0f2ef; }
.btn-ghost { background: var(--glass); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--glass-2); }
.btn-sm { height: 34px; padding: 0 16px; font-size: 13.5px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 16px;
  border-radius: 999px;
  font-size: 14px; font-weight: 450; letter-spacing: -0.01em;
  color: var(--ink-2);
  background: var(--glass);
  border: 1px solid var(--line-2);
  transition: all 0.2s var(--ease);
}
.chip:hover { color: var(--ink); background: var(--glass-2); }
.chip.is-active {
  background: #fff; color: #0a0c0b; border-color: #fff;
}
.chip-sm { height: 30px; padding: 0 13px; font-size: 12.5px; }
/* EVENTS-01: scrim strip behind the Events type filters so the chips read over the scene */
.ev-typefilter { align-items: center; width: fit-content; max-width: 100%;
  background: rgba(10,14,12,0.58); border: 1px solid var(--line-2); border-radius: 16px; padding: 7px 11px; }
.ev-typefilter .chip { color: var(--ink); background: var(--glass-2); }

/* ============================================================
   TOP NAV
   ============================================================ */
.topbar {
  position: relative; z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: clamp(28px, 5vh, 60px);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; letter-spacing: -0.02em;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, oklch(0.5 0.12 150), oklch(0.32 0.09 156));
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: 700; font-size: 17px; color: #fff;
  font-style: italic;
}
.brand-logo {
  height: 34px; width: auto; display: block;
  opacity: 0.96;
}

.nav {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  padding: 6px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  box-shadow: var(--shadow-card);
}
.nav-item {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 450; letter-spacing: -0.01em;
  color: var(--ink-2);
  background: transparent; border: none;
  transition: color 0.2s, background 0.2s var(--ease);
  white-space: nowrap;
}
.nav-item:hover { color: var(--ink); }
.nav-item.is-active { background: #fff; color: #0a0c0b; font-weight: 500; }
.nav-item svg { width: 16px; height: 16px; opacity: 0.85; }
.nav-lbl-short { display: none; }

.topbar-right {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.icon-btn {
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center;
  flex-shrink: 0;   /* crowded back bars must not squeeze (and clip) the glyph */
  background: var(--glass); border: 1px solid var(--line);
  color: var(--ink-2);
  transition: all 0.2s var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--glass-2); }
.icon-btn svg { width: 18px; height: 18px; }

.me {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: transparent; border: none; color: inherit;
  transition: background 0.2s var(--ease);
}
.me:hover { background: var(--glass); cursor: pointer; }

/* founder hub — company cards (compact grid) */
.cocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.cocard {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: left;
  padding: 0; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line-2);
  color: var(--ink);
  transition: transform 0.25s var(--ease), border-color 0.25s, background 0.25s;
}
.cocard:hover { transform: translateY(-3px); border-color: var(--line); background: var(--glass-2); }
.cocard-thumb {
  width: 100%; height: 118px; border-radius: 0; overflow: hidden;
  border: none; border-bottom: 1px solid var(--line); display: grid; place-items: center;
}
.cocard-thumb span { font-weight: 700; letter-spacing: 0.05em; font-size: 18px; opacity: 0.92; }
.cocard-body { flex: 1; padding: 16px 18px 18px; min-width: 0; }
.cocard-go { display: none; }
/* T2: tablet band still shows the desktop top-nav but it overflows — condense it
   (avatar only, drop the disabled "coming soon" items) so the header fits. */
@media (max-width: 880px) and (min-width: 721px) {
  .topbar .me > div:not(.avatar) { display: none; }
  .topbar .nav-item:disabled { display: none; }
  .topbar .nav { gap: 0; }
}
@media (max-width: 720px) {
  .cocards { grid-template-columns: 1fr; }
}
.me-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; }
.me-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.15; }

/* role switch */
.roleswitch {
  display: inline-flex; padding: 4px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(20px);
}
.roleswitch button {
  height: 32px; padding: 0 15px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  background: transparent; border: none; color: var(--ink-3);
  transition: all 0.22s var(--ease);
}
.roleswitch button.on { background: var(--glass-hi); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset; }

/* settings dropdown */
.icon-btn.is-on { color: var(--ink); background: var(--glass-2); }
.menu {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: 248px; padding: 12px; z-index: 41;
  background: rgba(11,15,14,0.82);
  border: 1px solid var(--line);
  border-radius: 20px;
  backdrop-filter: blur(32px) saturate(1.3);
  -webkit-backdrop-filter: blur(32px) saturate(1.3);
  box-shadow: var(--shadow-pop);
  animation: rise 0.22s var(--ease) both;
}
.menu .roleswitch { display: flex; width: 100%; background: rgba(255,255,255,0.04); }
.menu .roleswitch button { flex: 1; height: 36px; }
.menu-label { font-size: 12px; color: var(--ink-3); margin: 2px 2px 9px; }
.menu-sep { height: 1px; background: var(--line-2); margin: 12px 4px; }
.menu-item {
  display: block; width: 100%; text-align: left;
  height: 38px; padding: 0 10px; border-radius: 11px;
  background: transparent; border: none; color: var(--ink-2); font-size: 14px;
  transition: all 0.16s var(--ease);
}
.menu-item:hover { background: var(--glass-2); color: var(--ink); }

/* fixed-vocabulary dropdown picker (investor sectors / impact / stage focus) */
.pick { position: relative; display: inline-block; max-width: 100%; }
.pick-btn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 5px 11px; border-radius: 10px; text-align: left; cursor: pointer;
  background: var(--glass-2); border: 1px dashed var(--line);
  color: var(--ink-1); font-size: 13.5px; line-height: 1.45;
  transition: border-color 0.16s var(--ease);
}
.pick-btn:hover { border-color: var(--green); }
.pick-btn .pick-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-btn .pick-ph { color: var(--ink-3); }
.pick-panel { width: 236px; max-height: 296px; overflow-y: auto; left: 0; right: auto; top: calc(100% + 8px); }
.pick-opt { display: flex; align-items: center; gap: 9px; }
.pick-opt .pick-tick { width: 16px; display: inline-grid; place-items: center; color: var(--green); flex: none; }
.pick-opt.is-on { color: var(--ink); }

/* settings: top action row (mobile preview) */
.menu-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 42px; padding: 8px 10px; border-radius: 11px; margin-bottom: 4px;
  background: var(--glass-2); border: 1px solid var(--line-2); color: var(--ink); font-size: 14px; font-weight: 500;
  transition: background 0.16s var(--ease);
}
.menu-row:hover { background: var(--glass-hi); }
.menu-go { color: var(--ink-3); display: inline-flex; }

/* mobile preview frame */
.mframe-ov {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, rgba(20,28,24,0.92), rgba(6,8,7,0.95));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fade 0.22s var(--ease) both;
}
.mframe-label { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); color: var(--ink-2); font-size: 13px; letter-spacing: 0.03em; }
.mframe-dev {
  position: relative; width: 393px; max-width: calc(100vw - 28px);
  height: min(800px, calc(100vh - 88px)); flex: none;
  border-radius: 46px; padding: 11px; background: #000;
  box-shadow: 0 0 0 2px #2a2f2c, 0 40px 90px -30px rgba(0,0,0,0.9);
  animation: rise 0.28s var(--ease) both;
}
.mframe-dev::after {
  content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 128px; height: 30px; background: #000; border-radius: 0 0 18px 18px; z-index: 3;
}
.mframe-screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--bg-0); }
.mframe-screen iframe { width: 100%; height: 100%; border: 0; display: block; }

/* background picker swatches */
.bg-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bg-sw {
  aspect-ratio: 1; border-radius: 8px;
  background-size: cover; background-position: center;
  border: 1px solid var(--line); padding: 0; cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.bg-sw:hover { transform: translateY(-1px); }
.bg-sw.on { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px #fff; }

/* segmented control (map style) */
.seg { display: flex; gap: 6px; }
.seg-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em;
  transition: all 0.16s var(--ease);
}
.seg-btn:hover { color: var(--ink-2); background: var(--glass-2); }
.seg-btn.on { background: var(--glass-hi); color: var(--ink); border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset; }

/* blur range slider */
.blur-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; border-radius: 99px; margin: 4px 0 2px;
  background: rgba(255,255,255,0.14); cursor: pointer;
}
.blur-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff; border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.blur-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff; border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* role-specific top-bar action pill */
.topcta {
  display: inline-flex; align-items: center; gap: 11px;
  height: 44px; padding: 4px 18px 4px 6px;
  border-radius: 999px;
  background: #0c100e; border: 1px solid var(--line);
  color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  transition: background 0.2s var(--ease), transform 0.18s var(--ease);
  white-space: nowrap;
}
.topcta:hover { background: #131815; }
.topcta:active { transform: scale(0.98); }
.ava-stack { display: flex; }
.ava-stack > div { box-shadow: 0 0 0 2px #0c100e !important; }

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  position: relative;
  border-radius: 999px;
  display: grid; place-items: center;
  color: #fff; font-weight: 600; letter-spacing: -0.02em;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 6px 18px -8px rgba(0,0,0,0.7);
}
.avatar span { position: relative; z-index: 2; mix-blend-mode: plus-lighter; opacity: 0.92; }
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.eyebrow {
  font-size: 14px; color: var(--ink-3); font-weight: 450; letter-spacing: -0.01em;
  margin: 0 0 10px;
}

/* hero copy over photography — brighter + scrim for legibility */
.hero-copy { position: relative; }
.hero-copy::before {
  content: ""; position: absolute; z-index: -1;
  left: -40px; right: -40px; top: -30px; bottom: -30px;
  background: radial-gradient(80% 120% at 0% 30%, rgba(2,5,6,0.34), transparent 72%);
  pointer-events: none;
}
.hero-copy .eyebrow {
  color: rgba(240,244,240,0.74);
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12.5px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.hero-copy .display { text-shadow: 0 2px 20px rgba(0,0,0,0.34); }
.hero-copy .hero-sub {
  font-size: 15px; margin-top: 12px;
  color: rgba(240,244,240,0.66);
  text-shadow: 0 1px 9px rgba(0,0,0,0.4);
}
.display {
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.06; letter-spacing: -0.035em; font-weight: 600;
  margin: 0;
}
.h1 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.03em; font-weight: 600; margin: 0; line-height: 1.02; }
.h2 { font-size: 24px; letter-spacing: -0.02em; font-weight: 600; margin: 0; }
.label { font-size: 11px; color: rgba(243,246,243,0.55); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; }
.mono { font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; }

.ask {
  display: flex; align-items: center; gap: 10px;
  height: 46px; width: min(360px, 60vw); padding: 0 18px;
  border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  color: var(--ink-3); font-size: 14.5px;
  backdrop-filter: blur(20px);
  transition: all 0.2s var(--ease);
}
.ask:hover { background: var(--glass-2); color: var(--ink-2); }
.ask svg { width: 16px; height: 16px; }
.ask input::placeholder { color: var(--ink-3); opacity: 1; }

/* ============================================================
   ANIMATION
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.5); opacity: 0.3; }
}
.rise { animation: rise 0.6s var(--ease) both; }
.page-enter { animation: fade 0.4s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; }
}

/* ============================================================
   WORLD MAP
   ============================================================ */
.mapwrap {
  position: relative;
  width: 100%;
  overflow: visible;
}
/* discover / events — fluid height matches MAP_W:MAP_H so slice shows the full world */
.mapwrap-fluid {
  height: auto;
  aspect-ratio: 1000 / 480;
}
.mapsvg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.map-pulse { animation: map-pulse 2.6s var(--ease) infinite; }
@keyframes map-pulse {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
.map-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  pointer-events: none;
  transition: border-color 0.16s var(--ease);
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: rgba(10,14,13,0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-pop);
  white-space: nowrap;
  z-index: 5;
  animation: fade 0.18s var(--ease) both;
}
.map-tip-av {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset;
}
.map-tip-av span { mix-blend-mode: plus-lighter; opacity: 0.92; }
.map-tip-av.map-tip-lock { background: rgba(255,255,255,0.08); font-size: 17px; }
.map-tip-av.map-tip-lock span { mix-blend-mode: normal; opacity: 1; }
.map-tip::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: rgba(10,14,13,0.72);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.map-tip-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.map-tip-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.map-tip-city { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

/* ============================================================
   ACTIVITY
   ============================================================ */
.actstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; width: 100%; min-width: 0; }
.actcols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; margin-top: 40px; }
.actlist { display: flex; flex-direction: column; gap: 8px; }
.actrow {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 12px 16px; border-radius: var(--r-sm);
  background: rgba(10,14,12,0.55); border: 1px solid var(--line-2);
  color: var(--ink);
  transition: background 0.18s var(--ease), border-color 0.18s, transform 0.18s var(--ease);
}
.actrow:hover { background: rgba(16,21,18,0.7); border-color: var(--line); transform: translateX(2px); }
.actrow-main { flex: 1; min-width: 0; }
.actrow-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.actrow-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actrow-when { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* "You might want to connect to" — compact suggestion cards side by side
   instead of full-width rows (scopes over .actlist's flex column) */
.sugg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.sugg-list .actrow { min-width: 0; }
/* admin note chip: ellipsize when long; click toggles the full text
   (.chip is inline-flex, which never ellipsizes — hence inline-block) */
.sugg-note { display: inline-block; max-width: 200px; color: var(--green);
  line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sugg-note.is-open { max-width: 100%; height: auto; line-height: 1.5;
  white-space: normal; padding-top: 5px; padding-bottom: 5px; }
.istat-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
}
.ip-green { background: oklch(0.78 0.085 150 / 0.16); color: var(--green); border: 1px solid oklch(0.78 0.085 150 / 0.3); }
.ip-amber { background: oklch(0.82 0.07 80 / 0.16); color: oklch(0.86 0.09 80); border: 1px solid oklch(0.82 0.07 80 / 0.3); }
.ip-sky   { background: oklch(0.74 0.07 235 / 0.16); color: oklch(0.80 0.06 235); border: 1px solid oklch(0.74 0.07 235 / 0.3); }
.ip-red   { background: oklch(0.62 0.12 25 / 0.16); color: oklch(0.74 0.13 25); border: 1px solid oklch(0.62 0.12 25 / 0.3); }

/* currency select inside a numeric inline-edit slot (numfields, spec 2026-07-22) */
.ce-cur { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 7px; color: var(--ink-2); font: inherit; font-size: 11.5px; padding: 2px 4px; margin-right: 6px; vertical-align: middle; }
.ip-white { background: rgba(255,255,255,0.12); color: var(--ink); border: 1px solid var(--line); }
.act-empty { padding: 22px; text-align: center; color: var(--ink-3); font-size: 14px;
  border: 1px dashed var(--line); border-radius: var(--r-sm); }

.feed { display: flex; flex-direction: column; }
.feed-item {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 4px; border: none; border-bottom: 1px solid var(--line-2);
  background: transparent;
  transition: padding-left 0.18s var(--ease);
}
.feed-item:hover { padding-left: 10px; }
.feed-item:last-child { border-bottom: none; }
.feed-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; }
.fi-green { background: oklch(0.78 0.085 150 / 0.16); color: var(--green); }
.fi-amber { background: oklch(0.82 0.07 80 / 0.16); color: oklch(0.86 0.09 80); }
.fi-muted { background: var(--glass-2); color: var(--ink-2); }
.feed-text { flex: 1; font-size: 14px; color: var(--ink-2); }
.feed-text b { color: var(--ink); font-weight: 600; }
.feed-time { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

@media (max-width: 1000px) {
  .actstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actcols { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   TRUST FLAGS
   ============================================================ */
.flagrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fbadge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid; white-space: nowrap;
}
.fbadge svg { flex: none; }
.fbadge-ico { width: 26px; padding: 0; justify-content: center; }

/* save / bookmark on profile cards */
.savebtn {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(10,12,11,0.34); border: 1px solid var(--line); color: var(--ink-2);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.savebtn svg { width: 16px; height: 16px; }
.savebtn:hover { color: var(--ink); background: rgba(10,12,11,0.55); }
.savebtn.on { color: #0a0c0b; background: var(--green); border-color: transparent; }
.savebtn.on svg path { fill: currentColor; }
.savebtn:active { transform: scale(0.88); }

/* ============================================================
   ADMIN CONSOLE
   ============================================================ */
.adm-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.adm-delta { font-size: 12.5px; color: var(--green); margin-top: 10px; }
.adm-count {
  display: inline-grid; place-items: center; margin-left: 7px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: oklch(0.82 0.07 80 / 0.25); color: oklch(0.88 0.09 80);
  font-size: 11px; font-weight: 700;
}
/* ============ console nav — one field, one piece of moving glass ============
   The bar is a single trough whose tint is a gradient across three zones: amber where
   people are waiting on a decision, blue where you publish and maintain, green where
   there is only something to read. The colour turns over in the gap BETWEEN two
   groups (stops measured in admin.js), so no seam is ever drawn under a tab.

   Everything here is scoped to .admin-tabs. `.seg` is the app's general segmented
   control and is used in the events editor and elsewhere; none of this reaches it. */
:root {
  --adm-decide: oklch(0.86 0.09 80);
  --adm-curate: oklch(0.80 0.09 245);
  --adm-read:   oklch(0.76 0.085 150);
  --adm-bad:    oklch(0.74 0.13 25);
}

.seg.admin-tabs {
  position: relative; gap: 0; padding: 6px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line);
  justify-content: space-between;
}
.admin-tabs::before {
  content: ""; position: absolute; z-index: 0; inset: 6px; border-radius: 9px;
  background: var(--adm-field, transparent);
}
.admin-tabs .adm-block { display: flex; gap: 3px; min-width: 0; }

/* every tab is as wide as its own word: short labels stop wearing boxes built for
   "Sponsorships", and the slack that frees up becomes the space between the groups */
/* Only the label eases. `.seg-btn` transitions `all`, which here would fade the glass
   out over 160ms — and the glass carries a dark drop shadow, so the tab you just left
   spends that time showing the shadow with nothing on top of it: a dark ghost where
   you clicked. The pane itself appears and disappears at once. */
.admin-tabs .adm-tab {
  position: relative; z-index: 2; flex: 0 0 auto; padding: 0 15px;
  background: transparent; border-color: transparent; box-shadow: none;
  transition: color 0.16s var(--ease);
}
.admin-tabs .adm-tab:hover { background: transparent; color: var(--ink); }
/* the open section is a pane of glass on the tab itself — the same surface the rest
   of the site uses for "this one", sitting still */
.admin-tabs .adm-tab.on {
  color: var(--ink);
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    inset 1px 0 0 rgba(255,255,255,0.18),
    inset -1px 0 0 rgba(255,255,255,0.18),
    0 6px 18px -10px rgba(0,0,0,0.8);
}
/* holding work is the count and a brighter label, nothing more — a second filled box
   per lit tab would turn the field back into a row of tiles */
.admin-tabs .adm-tab.is-lit { color: var(--ink); font-weight: 600; }
.admin-tabs .adm-tab.is-bad .adm-count {
  background: oklch(0.62 0.12 25 / 0.28); color: oklch(0.78 0.13 25);
}

/* Reduce Transparency replaces the glass with a solid fill rather than thinning it */
@media (prefers-reduced-transparency: reduce) {
  .admin-tabs .adm-tab.on {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--glass-2); box-shadow: none; border-color: var(--line);
  }
}

.admin-tabs .adm-block[data-job="decide"] { --blk: var(--adm-decide); }
.admin-tabs .adm-block[data-job="curate"] { --blk: var(--adm-curate); }
.admin-tabs .adm-block[data-job="read"]   { --blk: var(--adm-read); }

@media (max-width: 720px) {
  /* The bar scrolls sideways here, so there is no slack to distribute — and a field
     painted on the trough would stay put while the tabs slid underneath it. Each block
     carries its own tint instead, which scrolls with the tabs it belongs to. */
  .seg.admin-tabs { justify-content: flex-start; gap: 8px; }
  .admin-tabs::before { display: none; }
  .admin-tabs .adm-block {
    background: color-mix(in oklch, var(--blk) 9%, transparent);
    border-radius: 10px; padding: 0 2px;
  }
  .admin-tabs .adm-tab { padding: 0 13px; }
}

.funnel { display: grid; gap: 13px; }
.funnel-row { display: grid; grid-template-columns: 170px 1fr 44px; align-items: center; gap: 14px; }
.funnel-lbl { font-size: 13.5px; color: var(--ink-2); }
.funnel-bar { height: 22px; border-radius: 7px; background: rgba(255,255,255,0.06); overflow: hidden; }
.funnel-bar > span { display: block; height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, oklch(0.45 0.08 155), oklch(0.72 0.11 150)); }
.funnel-n { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.admtable { padding: 6px 0; overflow: hidden; }
.admtr {
  display: grid; grid-template-columns: 1.3fr 1.1fr 0.9fr 1.2fr 70px;
  align-items: center; gap: 16px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
}
.admtr:last-child { border-bottom: none; }
.admtr-head {
  font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500;
  padding-top: 16px; padding-bottom: 10px;
}
/* investments tab — six columns, and no avatars, so the rows sit tighter */
.admtable-inv .admtr { grid-template-columns: 1.3fr 1.3fr 0.9fr 0.9fr 0.8fr 78px; }
.admtable-inv .admtr.is-editing { background: rgba(255,255,255,0.045); }
.adm-inv-amt { text-align: right; font-weight: 600; letter-spacing: -0.01em; color: var(--green); }
.adm-inv-acts { display: flex; gap: 6px; justify-content: flex-end; }
.adm-inv-acts .icon-btn { width: 30px; height: 30px; }
.adm-inv-hint { margin: 10px 0 16px; font-size: 13px; color: var(--ink-3); max-width: 72ch; line-height: 1.5; }
.adm-inv-form { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; margin-top: 18px; border-radius: var(--r-md); }
.adm-inv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.adm-inv-err { color: oklch(0.68 0.16 25); font-size: 13px; }
@media (max-width: 900px) {
  .adm-inv-grid { grid-template-columns: 1fr 1fr; }
  .admtable-inv .admtr { grid-template-columns: 1.2fr 1fr 0.9fr 70px; }
  .admtable-inv .admtr > :nth-child(4), .admtable-inv .admtr > :nth-child(5) { display: none; }
}

/* audit tab — five columns; detail takes the slack because it is the most
   variable-length field and the one worth reading in full */
.admtable-audit .admtr { grid-template-columns: 0.7fr 1fr 1.1fr 1.2fr 1.6fr; }
.admtable-audit .admtd-note { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .admtable-audit .admtr { grid-template-columns: 0.8fr 1fr 1.2fr; }
  .admtable-audit .admtr > :nth-child(4), .admtable-audit .admtr > :nth-child(5) { display: none; }
}

.admtd-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.admtd-who b { display: block; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.admtd-who em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); }
.admtd-note { font-size: 13px; color: var(--ink-2); }
.admtd-when { font-size: 12.5px; color: var(--ink-3); text-align: right; white-space: nowrap; }

@media (max-width: 1180px) { .adm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.adm-capital-chart { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
.adm-capital-chart svg { display: block; width: 100%; height: auto; max-width: 100%; }

@media (max-width: 720px) {
  .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .actcols .glass { padding: clamp(16px, 4vw, 22px) !important; }
  .adm-kpis .tile { padding: 16px 14px; min-width: 0; }
  .adm-kpis .tile-lbl { font-size: 10.5px; letter-spacing: 0.05em; line-height: 1.35; overflow-wrap: anywhere; }
  .adm-kpis .tile-num { font-size: clamp(22px, 6vw, 28px) !important; }
  .adm-kpis .adm-delta { font-size: 11.5px; margin-top: 8px; overflow-wrap: anywhere; }
  .funnel-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 36px; gap: 10px; }
  .funnel-lbl { font-size: 12.5px; overflow-wrap: anywhere; }
  .admin-tabs { width: 100% !important; max-width: 100%; }
  .admtable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admtr { grid-template-columns: 1fr 1fr; }
  .admtd-note, .admtd-when, .admtr-head { display: none; }
}

/* ============================================================
   UPLOAD TILES (founder hub)
   ============================================================ */
.upgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.uptile {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 20px; min-height: 178px;
  border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line-2);
}
.uptile.is-empty { background: rgba(10,14,12,0.35); border-style: dashed; border-color: var(--line); }
.uptile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.uptile-ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: rgba(255,255,255,0.07); color: var(--ink-2);
}
.uptile-state {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-4);
}
.uptile-state.ok { color: var(--green); }
.uptile-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.uptile-meta { font-size: 12.5px; color: var(--ink-3); margin: 5px 0 16px; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 1080px) { .upgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .upgrid { grid-template-columns: 1fr; } }

/* ============================================================
   ONBOARDING / SIGN-UP
   ============================================================ */
.ob-wrap { max-width: 720px; margin: 0 auto; padding-top: 2vh; width: 100%; min-width: 0; }
.ob-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(22px, 4.5vh, 48px); }
.ob-card { padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-xl); min-width: 0; }
.ob-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ob-side {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 24px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.045); border: 1px solid var(--line-2); color: var(--ink);
  transition: transform 0.22s var(--ease), background 0.22s, border-color 0.22s;
}
.ob-side:hover { transform: translateY(-3px); background: rgba(255,255,255,0.085); border-color: var(--line); }
.ob-side .uptile-ico { margin-bottom: 12px; }
.ob-side-t { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ob-side-s { font-size: 13px; color: var(--ink-3); line-height: 1.45; text-wrap: pretty; }
@media (max-width: 560px) { .ob-pick { grid-template-columns: 1fr; } }

.ob-steps { display: flex; gap: 4px; margin-bottom: 28px; flex-wrap: wrap; }
.ob-step {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px 0 6px; border-radius: 999px;
  background: transparent; border: none; color: var(--ink-3); font-size: 13px; font-weight: 500;
  transition: all 0.18s var(--ease);
}
.ob-step:hover { color: var(--ink-2); }
.ob-step-n {
  display: grid; place-items: center; width: 23px; height: 23px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--line-2);
  font-size: 11.5px; font-weight: 600;
}
.ob-step.on { color: var(--ink); background: rgba(255,255,255,0.07); }
.ob-step.on .ob-step-n { background: #fff; color: #0a0c0b; border-color: #fff; }
.ob-step.done { color: var(--ink-2); }
.ob-step.done .ob-step-n { background: oklch(0.78 0.085 150 / 0.2); color: var(--green); border-color: oklch(0.78 0.085 150 / 0.35); }

.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 720px) {
  .ob-wrap { padding-top: 1vh; }
  .ob-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .ob-foot .btn { width: 100%; }
}
@media (max-width: 560px) {
  .ob-grid { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-lbl { font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.02em; }
.field-in {
  height: 46px; padding: 0 15px; border-radius: 12px;
  background: rgba(255,255,255,0.055); border: 1px solid var(--line-2);
  color: var(--ink); font-size: 14.5px; font-family: inherit; letter-spacing: -0.01em;
  outline: none; transition: border-color 0.18s, background 0.18s;
}
.field-in:focus { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); }
/* A native dropdown list is drawn by the OS and does NOT inherit the field's
   colours — against this theme it opens as light-on-light and is barely legible.
   .dz-select solved that for the data room; the same treatment belongs on every
   field-in select (console event picker, attendance mode, currency pickers). */
select.field-in { cursor: pointer; }
select.field-in option, select.field-in optgroup,
.ce-cur option, .ce-cur optgroup { background: #10140f; color: var(--ink); }
/* multi-line fields: let rows drive the height and give the text real vertical padding */
textarea.field-in { height: auto; min-height: 72px; padding: 11px 15px; }
.field-hint { font-size: 12px; color: var(--ink-4); line-height: 1.45; }
.ob-note { font-size: 13.5px; color: var(--ink-3); margin: 0 0 6px; line-height: 1.5; text-wrap: pretty; }

.dropzone {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border-radius: var(--r-sm);
  background: rgba(10,14,12,0.35); border: 1px dashed var(--line);
}
.dropzone.is-filled { border-style: solid; border-color: var(--line-2); background: rgba(255,255,255,0.05); }
.dz-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.dz-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

.flagapply {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border-radius: var(--r-sm); cursor: pointer;
  background: rgba(255,255,255,0.035); border: 1px solid var(--line-2);
  transition: background 0.18s, border-color 0.18s;
}
.flagapply:hover { background: rgba(255,255,255,0.06); }
.flagapply.on { border-color: oklch(0.78 0.085 150 / 0.45); background: oklch(0.78 0.085 150 / 0.07); }
.obcheck {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; flex: none;
  border: 1px solid var(--line); color: #0a0c0b; background: transparent;
  transition: all 0.18s var(--ease);
}
.obcheck.on { background: var(--green); border-color: var(--green); }

.ob-review { border-radius: var(--r-sm); border: 1px solid var(--line-2); padding: 6px 18px; background: rgba(255,255,255,0.03); }
.ob-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-2);
}
.ob-done-ico {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 999px;
  background: oklch(0.78 0.085 150 / 0.16); color: var(--green);
  border: 1px solid oklch(0.78 0.085 150 / 0.35);
}

/* flag badges inside pcards sit above the click layer */
.pcard .flagrow { position: relative; }

/* event date block */
.ev-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 86px; padding: 8px 6px; border-radius: 12px;
  background: oklch(0.82 0.07 80 / 0.10); border: 1px solid oklch(0.82 0.07 80 / 0.25);
}
.ev-date-d { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: oklch(0.88 0.09 80); white-space: nowrap; }
.ev-date-y { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* event list rows */
.evrow {
  display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: var(--r-sm);
  background: rgba(10,14,12,0.55); border: 1px solid var(--line-2); color: var(--ink);
  transition: background 0.18s var(--ease), border-color 0.18s, transform 0.18s var(--ease);
}
.evrow:hover { background: rgba(16,21,18,0.7); border-color: var(--line); transform: translateX(2px); }
.evrow-main { flex: 1; min-width: 0; }
.evrow-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.evrow-meta { display: flex; align-items: center; gap: 9px; margin-top: 6px; flex-wrap: wrap; }
.evrow-loc { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evrow-blurb { font-size: 13px; color: var(--ink-2); margin-top: 7px; line-height: 1.45; text-wrap: pretty; }
.evrow-act { flex: none; }
.ev-guest-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 14px 18px; border-radius: 14px; margin-bottom: 14px; }
.ev-guest-cta p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ev-guest-cta-actions { display: flex; gap: 9px; flex: none; }

/* zoom controls — every pannable map, desktop + mobile */
.map-zoom { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; flex-direction: column; gap: 6px; }
.map-zoom-btn {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(10,13,12,0.72); color: var(--ink);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 18px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: background 0.16s var(--ease), opacity 0.16s;
}
.map-zoom-btn:hover { background: rgba(24,28,26,0.9); }
.map-zoom-btn:disabled { opacity: 0.35; cursor: default; }
/* touch devices: hide the +/−/1× chrome (it looks bad on phones) — pinch,
   double-tap and drag still zoom/pan. Kept on desktop, even in narrow windows. */
@media (hover: none) and (pointer: coarse) {
  .map-zoom { display: none; }
}

/* always-visible mini map cards (events) */
.map-anchor {
  position: absolute; width: 8px; height: 8px; border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px oklch(0.82 0.07 80 / 0.22), 0 0 12px oklch(0.82 0.07 80 / 0.5);
  pointer-events: none; z-index: 3;
}
.map-anchor-btn { pointer-events: auto; border: none; padding: 0; cursor: pointer; transition: transform 0.18s var(--ease), box-shadow 0.18s; }
.map-anchor-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 999px; }   /* T9: 44x44 invisible touch target around the 12px pin */
.map-anchor-btn:hover, .map-anchor-btn.is-open { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 0 4px oklch(0.82 0.07 80 / 0.3), 0 0 16px oklch(0.82 0.07 80 / 0.7); }
.map-card {
  position: absolute; z-index: 4;
  transform: translate(-50%, calc(-100% - 13px));
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(10,14,13,0.78); border: 1px solid var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,0.8);
  color: var(--ink); white-space: nowrap; cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s;
}
.map-card:hover { border-color: oklch(0.82 0.07 80 / 0.5); background: rgba(14,18,16,0.88); transform: translate(-50%, calc(-100% - 16px)); }
.map-card::after {
  content: ""; position: absolute; left: var(--stem, 50%); bottom: -4.5px;
  width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg);
  background: rgba(10,14,13,0.78);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.map-card.below {
  transform: translate(-50%, 13px);
}
.map-card.below:hover { transform: translate(-50%, 16px); }
.map-card.below::after {
  bottom: auto; top: -4.5px;
  border: none; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.map-card.is-open { z-index: 6; }
.map-card-t { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.map-card-s { font-size: 11px; color: oklch(0.88 0.09 80); }

/* ticket rows (event detail) */
.tixrow {
  display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
  padding: 13px 14px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.035); border: 1px solid var(--line-2); color: var(--ink);
  transition: background 0.18s var(--ease), border-color 0.18s;
}
.tixrow:hover { background: rgba(255,255,255,0.06); }
.tixrow.on { border-color: oklch(0.82 0.07 80 / 0.5); background: oklch(0.82 0.07 80 / 0.08); }
.tix-price { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.tixrow.on .tix-price { color: oklch(0.88 0.09 80); }

/* ============================================================
   PROFILE COMPLETENESS / EMPTY STATES
   ============================================================ */
.checklist { margin-top: 28px; padding: clamp(22px,3vw,32px); border-radius: var(--r-lg); }
.checklist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.checklist-sub { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; max-width: 420px; line-height: 1.5; text-wrap: pretty; }
.checklist-prog { text-align: right; flex: none; }
.checklist-pct { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--green); }
.checklist-pct span { font-size: 18px; }
.checklist-frac { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.checklist-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 720px) { .checklist-items { grid-template-columns: 1fr; } }
.chk-item {
  display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
  padding: 13px 15px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.035); border: 1px solid var(--line-2); color: var(--ink);
  transition: background 0.18s var(--ease), border-color 0.18s;
}
.chk-item:not(.done):hover { background: rgba(255,255,255,0.06); border-color: var(--line); }
.chk-item.done { opacity: 0.62; }
.chk-box {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; flex: none;
  border: 1px solid var(--line); color: #0a0c0b; background: transparent;
}
.chk-box.on { background: var(--green); border-color: var(--green); }
.chk-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: rgba(255,255,255,0.06); color: var(--ink-2); }
.chk-label { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.chk-meta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.chk-item.done .chk-label { text-decoration: line-through; text-decoration-color: var(--ink-4); }
.chk-cta { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--green); }

.emptyblock {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 40px 28px; border-radius: var(--r-md);
  border: 1px dashed var(--line); background: rgba(10,14,12,0.3);
}
.emptyblock-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,0.06); color: var(--ink-2); margin-bottom: 4px; }
.emptyblock-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.emptyblock-body { font-size: 13.5px; color: var(--ink-3); max-width: 380px; line-height: 1.5; text-wrap: pretty; }
.empty-inline { font-size: 15px; color: var(--ink-3); margin: 0; font-style: italic; }
.empty-inline .impact-link { font-style: normal; cursor: pointer; }

/* background scene picker (profile pages) */
.bg-swatches-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-swatches-row .bg-sw {
  width: 54px; aspect-ratio: 1; border-radius: 10px;
  background-size: cover; background-position: center;
  border: 1px solid var(--line); padding: 0; cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.bg-swatches-row .bg-sw:hover { transform: translateY(-2px); }
.bg-swatches-row .bg-sw.on { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px #fff; }
.co-bgpick { margin-bottom: 26px; padding: 16px 18px; border-radius: var(--r-md); }
.co-bgpick-hint { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* founder-pitch full-page player */
.pitch-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: clamp(16px, 4vw, 56px);
  background: rgba(4,6,5,0.82);
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  animation: fade 0.22s var(--ease) both;
}
.pitch-modal-stage { width: min(1040px, 100%); animation: rise 0.28s var(--ease) both; }
.pitch-modal-video {
  position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-lg);
  overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-pop);
}
.pitch-modal-video .play > div { width: 84px; height: 84px; }
.pitch-modal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding: 14px 18px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(26px) saturate(1.2); -webkit-backdrop-filter: blur(26px) saturate(1.2);
}
.pitch-modal-close {
  position: fixed; top: 22px; right: 22px; z-index: 2;
  width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--line); color: var(--ink);
  backdrop-filter: blur(20px); transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.pitch-modal-close:hover { background: var(--glass-hi); transform: scale(1.05); }
@media (max-width: 560px) {
  .pitch-modal-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .pitch-modal-bar .btn { width: 100%; }
}

/* add-to-calendar menu */
.calmenu {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 41;
  padding: 8px; border-radius: 14px;
  background: rgba(11,15,14,0.92); border: 1px solid var(--line);
  backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3);
  box-shadow: var(--shadow-pop); animation: rise 0.2s var(--ease) both;
}

/* admin activity — monthly bar charts + most-active leaderboard */
.barchart { display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 14px); height: 180px; padding-top: 8px; }
.barcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.barcol-stack { width: 100%; max-width: 38px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; }
.barseg { width: 100%; transition: height 0.5s var(--ease); }
.barseg.s0 { background: linear-gradient(180deg, oklch(0.72 0.11 150), oklch(0.5 0.09 152)); }
.barseg.s1 { background: oklch(0.82 0.07 80 / 0.75); }
.barcol-lbl { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.barcol-val { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.chart-legend { display: flex; gap: 18px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.lg-sq { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.lead-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; flex: none;
  font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,0.07); color: var(--ink-2); }
.lead-rank.top { background: oklch(0.82 0.07 80 / 0.2); color: oklch(0.88 0.09 80); }
.lead-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 7px; }
.lead-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, oklch(0.5 0.09 152), oklch(0.78 0.12 150)); }

/* ============================================================
   HOME v2 · map-only minimal
   ============================================================ */
.homev2 { position: relative; }
/* two-colour legend */
.map-legend {
  position: absolute; top: 14px; right: 6px; z-index: 5;
  display: flex; gap: 16px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  font-size: 12.5px; color: var(--ink-2);
}
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lg-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.homev2-map {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, calc(100dvh - 168px), 680px);
  margin: 0 calc(-1 * clamp(20px, 3.4vw, 48px));
}
.homev2-map-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.homev2-map-slot .mapwrap,
.homev2-map-slot .mapwrap-fluid,
.homev2-map-slot .mapwrap-css {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  overflow: hidden;
}
.homev2-overlay {
  position: relative;
  z-index: 2;
  flex: none;
  width: 100%;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: clamp(18px, 2.8vh, 28px) clamp(12px, 1.6vw, 24px);
}
.homev2-overlay > * { pointer-events: auto; }
.homev2-left { text-align: left; pointer-events: auto; }
/* "EUR 540k raised by Verdara" — the rotating raised-amounts feed pill */
.raise-pill { display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; margin: 0 0 18px; border-radius: 999px; cursor: pointer;
  background: rgba(10,14,12,0.6); border: 1px solid var(--line-2); backdrop-filter: blur(12px);
  color: var(--ink-3); font: inherit; font-size: 15px;
  transition: opacity 0.32s var(--ease), border-color 0.15s; }
.raise-pill:hover { border-color: var(--line); }
.raise-pill.is-swap { opacity: 0; }
/* guest view: the API withholds the company, so there is nothing to click */
.raise-pill.is-static { cursor: default; }
.raise-pill.is-static:hover { border-color: var(--line-2); }
.raise-amt { color: var(--green); font-weight: 700; letter-spacing: -0.01em; }
.raise-when { color: var(--ink-4, var(--ink-3)); opacity: 0.72; font-size: 0.92em; }
.raise-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--green);
  animation: raisePulse 2.4s var(--ease) infinite; }
@keyframes raisePulse {
  0% { box-shadow: 0 0 0 0 rgba(150, 224, 178, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(150, 224, 178, 0); }
  100% { box-shadow: 0 0 0 0 rgba(150, 224, 178, 0); }
}
.homev2-tag {
  margin: 0 0 24px;
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 400; letter-spacing: -0.04em; line-height: 0.94;
  color: var(--ink);
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.homev2-left .btn-lg { gap: 10px; }
.homev2-guestnote {
  max-width: 380px; margin: 0; font-size: 14px; line-height: 1.55;
  color: var(--ink-2); background: var(--glass); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 16px; backdrop-filter: blur(8px);
}
/* the word in the tagline the investment feed rolls through on a phone. It is
   plain text until it is carrying an amount, so the sentence reads as written
   whenever the feed is empty, still, or between items. */
.roll-word {
  display: inline-block; color: inherit;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.roll-word.is-live { color: var(--green); }
.roll-word.is-swap { opacity: 0; }
/* the attribution under it — empty (and gone) whenever the tagline reads plainly */
.roll-by {
  display: block; margin: -6px 0 16px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink-3); text-align: left;
  cursor: pointer; transition: opacity 0.3s var(--ease);
}
.roll-by:empty { display: none; }
.roll-by.is-swap { opacity: 0; }
.roll-by.is-static { cursor: default; }
/* the phone's replacement for the second CTA button (hidden until then) */
.homev2-signin-link {
  display: none; margin-top: 14px; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .roll-word, .roll-by { transition: none; }
}
.map-draghint {
  display: none; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
  padding: 7px 14px; border-radius: 999px; pointer-events: none;
  background: rgba(10,14,13,0.6); border: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: 12px; color: var(--ink-2); white-space: nowrap;
  animation: fade 0.6s var(--ease) both;
}
.minichart-card {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 26px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  box-shadow: var(--shadow-card);
}
.mc-stat { text-align: left; }
.mc-num { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.mc-lbl { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; margin-top: 6px; }
.mc-spark { width: 110px; opacity: 0.95; }
.mc-divider { width: 1px; align-self: stretch; background: var(--line); margin: 2px 0; }

@media (max-width: 640px) {
  .mc-spark { display: none; }
  .minichart-card { gap: 10px; padding: 8px 12px; }
}

/* HOME desktop + tablet (≥721px) */
@media (min-width: 721px) {
  .shell:has(.homev2) {
    padding-top: 16px;
    padding-bottom: 48px;
  }
  .shell:has(.homev2) .topbar {
    margin-bottom: clamp(14px, 2.2vh, 22px);
  }
  .homev2-map {
    min-height: clamp(460px, calc(100dvh - 132px), 720px);
    margin: 0 calc(-1 * clamp(20px, 3.4vw, 48px));
    width: auto;
  }
  .homev2-map .map-draghint { display: none; }
  .shell:has(.homev2) .site-footer { margin-top: 28px; }
}

.dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* discover — toolbar / map / filters are separate blocks, never stacked on the canvas */
.disc-toolbar { margin-top: 8px; }
.disc-seg { width: 280px; max-width: 100%; }
.disc-controls {
  display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap;
}
/* #3/#4 — inactive seg/chips read better over photography */
.disc-controls .seg-btn:not(.on) { background: var(--glass-2); border-color: var(--line); }
.disc-filters .chip:not(.is-active) { background: var(--glass-2); }
/* hide-map toggle (Discover + Events) */
/* search + map toggle live in one row, sized exactly like the seg buttons
   (same 34px height, same 10px radius) so the toolbar reads as ONE system */
.disc-tools { display: flex; align-items: stretch; gap: 8px; flex: 1 1 300px; min-width: 0; max-width: 480px; }
.map-toggle-btn { white-space: nowrap; flex: none; height: 34px; min-height: 34px; border-radius: 10px; padding: 0 14px; }
.map-toggle-btn[aria-pressed="true"] { color: var(--green); border-color: color-mix(in oklch, var(--green) 45%, transparent); }
.disc-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(10, 14, 12, 0.58);
  border: 1px solid var(--line);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.disc-search:focus-within {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(16, 21, 18, 0.82);
}
.disc-search svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); opacity: 0.9; }
.disc-search:focus-within svg { color: var(--ink-2); }
.disc-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.disc-search-input::placeholder { color: var(--ink-3); opacity: 1; }
.disc-map { margin: 10px 0 0; }
.disc-map .mapwrap-fluid {
  min-height: clamp(280px, 32vh, 480px);
}
/* margin-top lives here (not on the map) so the filters keep clear of the copy above
   whether the map is shown or hidden — otherwise, with the map hidden, the "browsing
   the full network" hint collapses onto the Sector/Badges rows. */
.disc-filters { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; margin-bottom: 4px; }

/* shared — maps break out of shell padding to fill horizontal band */
.map-bleed {
  position: relative;
  margin-left: calc(-1 * clamp(20px, 3.4vw, 48px));
  margin-right: calc(-1 * clamp(20px, 3.4vw, 48px));
}

/* events — toolbar groups scope + type filters with clear vertical rhythm */
.ev-toolbar {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 8px; margin-bottom: 0;
  position: relative; z-index: 2;
}
.ev-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ev-new-btn { margin-left: auto; }
.ev-filters { margin: 0; }
.ev-map {
  position: relative; z-index: 1; isolation: isolate;
  margin: 6px 0 22px;
  padding-top: 14px;
  overflow: visible;
}
.ev-map .mapwrap-fluid {
  min-height: clamp(300px, 34vh, 540px);
}

/* admin — new / edit event form */
.ev-form-card { max-width: 760px; }
.ev-form-err {
  color: oklch(0.7 0.13 25);
  font-size: 13px;
  min-height: 18px;
  margin-top: 12px;
}
.ev-form-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.ev-form-cover-field { margin-bottom: 4px; }
.ev-form-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(160px, 28vw, 220px);
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  background: rgba(10, 14, 12, 0.45);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.ev-form-cover:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(14, 19, 16, 0.55); }
.ev-form-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-form-cover-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  pointer-events: none;
}
.ev-form-cover-hint small { font-size: 12px; opacity: 0.85; }
.ev-form-cover-err {
  display: block;
  color: oklch(0.7 0.13 25);
  font-size: 12.5px;
  margin-top: 8px;
}
.ev-form-cover-actions { margin-top: 8px; }
.ev-delete-btn { color: oklch(0.72 0.12 25) !important; }
.ev-delete-btn:hover { background: rgba(180, 60, 50, 0.12) !important; }

/* detail pages — back bar + admin actions stay on one row */
.pagebackbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.pagebackbar-back { flex-shrink: 0; }
.pagebackbar .topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 8px;
}
.pagebackbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.pagebackbar-actions .icon-btn { flex-shrink: 0; }
.ev-admin-sched .ob-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
  .ev-admin-sched .ob-grid { grid-template-columns: 1fr; }
}
input[type="date"].field-in { color-scheme: dark; }
input[type="date"].ev-date-in {
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
}
input[type="date"].ev-date-in::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
  filter: invert(1);
}
.ev-form-date-field { max-width: min(220px, 100%); }
.ev-form-tickets { margin-top: 2px; }
.ev-form-tix-rows { display: grid; gap: 10px; margin-top: 8px; }
.ev-form-tix-row {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
}
.ev-form-tix-edit {
  display: grid;
  grid-template-columns: 1fr min(130px, 32%) auto;
  gap: 8px 10px;
  align-items: end;
}
.ev-form-tix-edit .field { margin: 0; min-width: 0; }
.ev-form-tix-note-field { grid-column: 1 / -2; }
.ev-form-tix-price-field { max-width: 140px; }
.ev-form-tix-rm { align-self: center; color: oklch(0.72 0.12 25) !important; }
.ev-form-tix-add { margin-top: 8px; }
@media (max-width: 560px) {
  .ev-form-tix-edit { grid-template-columns: 1fr auto; }
  .ev-form-tix-note-field { grid-column: 1 / -1; }
  .ev-form-tix-price-field { max-width: none; }
}
.ev-form-agenda-rows { display: grid; gap: 10px; margin-top: 8px; }
.ev-form-agenda-row {
  display: grid;
  grid-template-columns: minmax(78px, 0.9fr) minmax(66px, 0.75fr) 2fr auto;
  gap: 8px 10px;
  align-items: end;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
}
.ev-form-agenda-row .field { margin: 0; min-width: 0; }
.ev-form-agenda-day   { grid-column: 1; }
.ev-form-agenda-time  { grid-column: 2; }
.ev-form-agenda-title { grid-column: 3; }
.ev-form-agenda-row > .ev-form-tix-rm { grid-column: 4; grid-row: 1; align-self: end; }
.ev-form-agenda-body { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 560px) {
  .ev-form-agenda-row { grid-template-columns: 1fr auto; }
  .ev-form-agenda-day,
  .ev-form-agenda-time,
  .ev-form-agenda-title,
  .ev-form-agenda-body { grid-column: 1 / -2; grid-row: auto; }
  .ev-form-agenda-row > .ev-form-tix-rm { grid-column: 2; grid-row: 1; }
}

/* programme day header (view page) */
.ev-day-head {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin: 18px 0 10px; padding-left: 2px;
}
.ev-day-head:first-child { margin-top: 0; }

/* rendered Markdown event description */
.ev-desc-md { max-width: 600px; margin: 0 0 26px; color: var(--ink-2); font-size: 15.5px; line-height: 1.62; text-wrap: pretty; }
.ev-desc-md > :first-child { margin-top: 0; }
.ev-desc-md p { margin: 0 0 12px; }
.ev-desc-md h3, .ev-desc-md h4, .ev-desc-md h5, .ev-desc-md h6 { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; margin: 20px 0 8px; line-height: 1.3; }
.ev-desc-md h3 { font-size: 19px; }
.ev-desc-md h4 { font-size: 16.5px; }
.ev-desc-md h5, .ev-desc-md h6 { font-size: 14.5px; }
.ev-desc-md ul, .ev-desc-md ol { margin: 0 0 14px; padding-left: 22px; }
.ev-desc-md li { margin: 4px 0; }
.ev-desc-md a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 3px; }
.ev-desc-md a:hover { color: var(--green); }
.ev-desc-md code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; background: var(--glass-2); padding: 1px 5px; border-radius: 5px; }
.ev-desc-md strong { color: var(--ink-1); font-weight: 600; }

.pcard {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  height: 100%;
  padding: 30px 20px 22px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(14,19,16,0.66), rgba(10,14,12,0.6));
  border: 1px solid var(--line-2);
  text-align: center;
  cursor: pointer;
  transition: transform 0.28s var(--ease), border-color 0.28s, background 0.28s;
  overflow: hidden;
}
.pcard::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 0%, oklch(0.5 0.12 150 / 0.16), transparent 70%);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.pcard:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(20,27,22,0.78), rgba(12,17,14,0.72));
}
.pcard:hover::before { opacity: 1; }
/* self-reported portfolio entry without a URL — not clickable, no hover affordance */
.pcard-static { cursor: default; }
.pcard-static:hover {
  transform: none; border-color: var(--line-2);
  background: linear-gradient(180deg, rgba(14,19,16,0.66), rgba(10,14,12,0.6));
}
.pcard-static:hover::before { opacity: 0; }
.pcard-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; margin-top: 14px; position: relative; }
.pcard-logo {
  width: 92px; height: 92px; border-radius: 22px; overflow: hidden; position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 8px 22px -10px rgba(0,0,0,0.7);
}
.pcard-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* owner: swap a portfolio company's logo, badge on the avatar corner */
.pcard-logo-btn {
  position: absolute; bottom: -2px; right: -2px; z-index: 2;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; color: #fff;
  background: var(--green); border: 2px solid var(--bg-1);
  box-shadow: 0 4px 12px -3px rgba(0,0,0,0.6);
  transition: transform 0.16s var(--ease);
}
.pcard-logo-btn:hover { transform: scale(1.08); }
.pcard-logo-btn:disabled { opacity: 0.6; cursor: default; }
.pcard-sub { font-size: 13px; color: var(--ink-3); margin-top: 3px; position: relative; }
.pcard-main {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}
.pcard-badges {
  min-height: 32px; margin-top: 10px; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.pcard-foot {
  margin-top: auto; width: 100%; padding-top: 16px; flex-shrink: 0;
}
.pcard-foot .intro-btn { margin-top: 0; width: 100%; }
/* intro status colours */
.istat-requested {
  background: oklch(0.82 0.07 80 / 0.16); color: oklch(0.86 0.09 80);
  border: 1px solid oklch(0.82 0.07 80 / 0.30);
}
.istat-introduced {
  background: oklch(0.78 0.085 150 / 0.18); color: var(--green);
  border: 1px solid oklch(0.78 0.085 150 / 0.32);
}
.istat-requested:disabled, .istat-introduced:disabled { opacity: 1; }
.pcard-score {
  position: absolute; top: 12px; right: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-2);
  background: none; border: none; padding: 0;
  z-index: 2;
}

/* why-this-is-a-match panel */
.whymatch {
  margin-top: 28px;
  display: flex; align-items: center; gap: 28px;
  padding: 24px 28px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 0% 0%, oklch(0.55 0.1 150 / 0.16), transparent 62%),
    var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
}
.whymatch-score { text-align: center; flex: none; padding-right: 24px; border-right: 1px solid var(--line); }
.whymatch-num { font-size: 46px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--green); }
.whymatch-num span { font-size: 22px; }
.whymatch-cap { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.whymatch-body { flex: 1; }
.whymatch-lead { font-size: 15px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.5; text-wrap: pretty; }

@media (max-width: 760px) {
  .whymatch { flex-direction: column; align-items: stretch; gap: 18px; }
  .whymatch-score { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 18px; display: flex; align-items: baseline; gap: 10px; justify-content: center; }
}

/* ============================================================
   STAT TILES / PANELS
   ============================================================ */
.statrow {
  display: grid;
  grid-template-columns: 1.15fr 0.7fr 1.5fr 1.15fr;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
.tile {
  padding: 22px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
}
.tile-num { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.tile-lbl { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; }

.kpitiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line-2);
  width: 100%;
  min-width: 0;
}
.kpitile {
  padding: 24px 22px 26px;
  border-right: 1px dashed var(--line);
  background: rgba(10,14,12,0.5);
  backdrop-filter: blur(20px);
}
.kpitile:last-child { border-right: none; }
/* 8-tile financial grid: 2 rows of 4 */
.kpitiles-8 .kpitile { border-bottom: 1px dashed var(--line); }
.kpitiles-8 .kpitile:nth-child(4n) { border-right: none; }
.kpitiles-8 .kpitile:nth-last-child(-n+4) { border-bottom: none; }
.kpitile-top { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.kpitile-mid { font-size: 15px; color: var(--green); font-weight: 500; margin-top: 18px; }
.kpitile-lbl { font-size: 11px; color: var(--ink-3); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; }

/* attribute tiles (company hero) */
.attrtiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(8,12,11,0.55);
  backdrop-filter: blur(22px);
  width: 100%;
  min-width: 0;
}
.attr {
  padding: 24px 22px 22px;
  border-right: 1px dashed var(--line);
  min-height: 116px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.attr:last-child { border-right: none; }
.attr-val { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.attr-lbl { font-size: 11px; color: rgba(243,246,243,0.6); margin-top: auto; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; }

/* the pitch panel */
.pitch {
  width: 380px; flex: none;
  padding: 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(20,30,24,0.55), rgba(10,16,13,0.5));
  border: 1px solid var(--line);
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  box-shadow: var(--shadow-pop);
}
.pitch-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 14.5px;
}
.pitch-row:last-of-type { border-bottom: none; }
.pitch-row .k { color: var(--ink-2); }   /* PROFILE-01: more readable label contrast */
.pitch-row .v { font-weight: 600; letter-spacing: -0.01em; }

/* logged investments beneath Amount Raised — where the derived figure comes from.
   Indented and quieter than a pitch-row: supporting evidence, not another stat. */
.raise-log { padding: 2px 0 10px; border-bottom: 1px solid var(--line-2); }
.raise-log-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 5px 0 5px 14px; font-size: 13px; position: relative;
}
.raise-log-row::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--green); opacity: 0.55;
}
.raise-log-amt { color: var(--ink-1); font-weight: 600; letter-spacing: -0.01em; }
.raise-log-meta { color: var(--ink-3); font-size: 12.5px; text-align: right; }

/* vision cards */
.visiongrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vcard {
  padding: 26px;
  border-radius: var(--r-md);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.vtag {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 13px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  background: oklch(0.78 0.13 150 / 0.16); color: var(--green);
  margin-bottom: 16px;
}
.vcard h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; }
.vcard p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty; }

/* meter */
.meter { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 14px; }
.meter > span { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, oklch(0.6 0.12 150), oklch(0.82 0.14 150)); }

/* section header */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 22px; }

/* impact score band */
.impact-band {
  margin-top: 40px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
  padding: 30px 34px; border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
}
.impact-left { display: flex; align-items: center; gap: 26px; }
/* compact impact badge (no ESG breakdown) */
.impact-band-compact { display: flex; grid-template-columns: none; }
.impact-band-compact .impact-left { gap: 24px; }
.co-info .impact-band { margin-top: 24px; width: 100%; }

/* capital moved through the platform — investor + founder heroes.
   Same glass treatment as .impact-band, green accent on the figure. */
.trust-band {
  /* shrink-wraps its content — the hero is a flex column, whose children stretch
     to full width unless they carry a definite width of their own */
  margin: 0 0 22px; width: fit-content; max-width: 100%; align-self: flex-start;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 18px 24px; border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
}
.trust-num {
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--green); line-height: 1;
}
.trust-copy { display: grid; gap: 4px; }
.trust-lbl { font-size: 15px; font-weight: 500; color: var(--ink); }
.trust-meta { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 720px) {
  .trust-band { padding: 18px 20px; gap: 14px; }
}

/* data room — shared doc primitives (slot cards + library boxes) */
.doc-name { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.doc-meta { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.doc-act { display: grid; place-items: center; color: var(--ink-3); }
/* when the action is the owner's remove button, strip default button chrome */
button.doc-act { appearance: none; -webkit-appearance: none; background: none; border: 0;
  padding: 0; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font: inherit;
  transition: background 0.15s, color 0.15s; }
button.doc-act:hover { color: var(--ink-1); background: var(--glass-2); }
.doc-note { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; text-transform: none; letter-spacing: 0; }

/* data room — the 4 standard due-diligence slots */
.dz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dz-slot {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-height: 118px; padding: 14px 15px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line-2);
  text-align: left; color: var(--ink);
}
/* view mode: the whole slot card is a link that opens the document */
a.dz-slot { text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
a.dz-slot:hover { border-color: var(--line); background: var(--glass-2); }
.dz-slot-kind { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.dz-slot .doc-name { font-size: 14px; font-weight: 600; }
.dz-slot-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
button.dz-slot-empty {
  align-items: center; justify-content: center; text-align: center; gap: 8px;
  border-style: dashed; border-width: 1.5px; background: rgba(255,255,255,0.02);
  cursor: pointer; color: var(--ink-2); font: inherit;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
button.dz-slot-empty:hover { border-color: var(--green); color: var(--green); }
button.dz-slot-empty:disabled { opacity: 0.6; cursor: default; }
.dz-slot.is-missing, .dz-slot.is-locked { align-items: center; justify-content: center; text-align: center; gap: 8px; opacity: 0.6; }
@media (max-width: 720px) { .dz-grid { grid-template-columns: 1fr 1fr; } }

/* company2 preview — due-diligence library under the top-4 row */
.dz-lib { margin-top: 30px; display: grid; gap: 26px; }
.dz-lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 9px; }
.dz-lib-name { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.dz-lib-count { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.dz-lib-count.is-done { color: var(--green); }
/* each group is a band of boxes, styled like the hero attribute band */
.dz-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(8,12,11,0.55);
  backdrop-filter: blur(22px); }
.dz-fact { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
  min-height: 104px; padding: 15px 18px 16px; min-width: 0;
  border-right: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
  margin: 0 -1px -1px 0; }   /* edge borders melt into the band's own border */
.dz-fact .attr-lbl { margin-top: 0; }   /* title sits ABOVE the content, not pinned below */
.dz-fact-val { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; overflow-wrap: anywhere; }
.dz-fact-val.is-locked { color: var(--ink-3); font-weight: 500; }
.dz-fact.is-empty { background: rgba(255,255,255,0.015); }
.dz-facts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* Other documents: 4 per row, then wrap */
.dz-facts-4 .dz-fact { min-height: 0; }
.dz-fact-del { position: absolute; top: 8px; right: 8px; }
/* compact file lines inside a box */
.dz-file { display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.dz-file + .dz-file { margin-top: 6px; }
.dz-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.dz-file:hover .dz-file-name { text-decoration: underline; text-underline-offset: 2px; }
.dz-file .doc-meta { flex: none; }
.dz-file .doc-act { flex: none; }
.dz-file.is-locked { color: var(--ink-2); opacity: 0.75; }
.dz-cov { color: var(--ink-2); font-weight: 500; }
.dz-fact-input { width: 100%; background: transparent; border: 0; outline: none; padding: 0;
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; }
.dz-fact-input::placeholder { color: var(--ink-3); font-weight: 400; }
.dz-fact-input:disabled { opacity: 0.55; }
.dz-select { height: 32px; max-width: 100%; border-radius: 9px; padding: 0 8px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); color: var(--ink);
  font: inherit; font-size: 13px; }
.dz-select:focus { outline: none; border-color: var(--green); }
.dz-select option, .dz-select optgroup { background: #10140f; color: var(--ink); }
/* the single upload form under the library */
.dz-upform { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px;
  padding: 13px 15px; border: 1.5px dashed var(--line-2); border-radius: var(--r-sm);
  background: rgba(255,255,255,0.02); }
.dz-upform-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 640px) {
  .dz-facts, .dz-facts-4 { grid-template-columns: 1fr; }
  .dz-fact { min-height: 0; padding: 15px 16px 13px; }
}
.impact-num { font-size: 42px; font-weight: 600; letter-spacing: -0.03em; margin-top: 4px; line-height: 1; }
.impact-num span { font-size: 20px; color: var(--ink-3); font-weight: 500; }
.impact-note { font-size: 13.5px; color: var(--ink-3); margin-top: 12px; max-width: 360px; line-height: 1.5; }
.impact-link { color: var(--green); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.impact-dims { display: grid; gap: 17px; }
.dim-head { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); margin-bottom: 7px; }
.dim-val { color: var(--ink); font-weight: 600; }
.dim-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.dim-bar > span { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, oklch(0.55 0.11 152), oklch(0.82 0.14 150)); }

/* pitch-deck rail */
.deckrail { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.deckslide {
  flex: 0 0 320px; aspect-ratio: 16/9; border-radius: var(--r-md);
  border: 1px solid var(--line); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
  scroll-snap-align: start; cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.deckslide:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.22); }
.deckslide::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.55)); }
.deckslide-no { position: absolute; top: 16px; left: 22px; z-index: 2;
  font-size: 11.5px; letter-spacing: 0.12em; color: rgba(255,255,255,0.7); }
.deckslide-title { position: relative; z-index: 2; font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; text-wrap: pretty; }

/* founder video pitch */
.videopitch {
  position: relative; height: 300px; border-radius: var(--r-lg);
  border: 1px solid var(--line); overflow: hidden;
  display: flex; align-items: flex-end;
}
.videopitch::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 60% at 50% 42%, transparent, rgba(0,0,0,0.4)); }
.videopitch .play { z-index: 2; }
.videopitch .play > div { width: 60px; height: 60px; }
.videopitch-meta { position: relative; z-index: 3; padding: 26px; }

/* line chart card */
.chartcard { position: relative; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* company sibling-company tabs, on their own full-width row under the Go Back bar */
.pagebackbar-tabs { margin: 2px 0 12px; }
.pagebackbar-tabs:empty { display: none; }
.pagebackbar-tabs .chip-row { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; min-width: 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pagebackbar-tabs .chip-row::-webkit-scrollbar { display: none; }

/* deck embed */
.deck {
  position: relative;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
}
.deck .deck-cta {
  position: absolute; bottom: 16px; right: 16px;
}

/* small media thumb */
.thumb {
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}
.play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.play > div {
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.4);
  display: grid; place-items: center;
}

/* profile hero — content-height (no forced full-screen gap) */
.profile-hero {
  position: relative;
  display: flex; flex-direction: column;
  gap: 26px;
  padding-bottom: 4px;
  min-width: 0;
  max-width: 100%;
}
.profile-hero > div { min-width: 0; max-width: 100%; }
.profile-head-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; min-width: 0; }
.profile-head-copy { flex: 1; min-width: 0; }
.profile-meta-row { display: flex; align-items: center; gap: 14px; color: var(--ink-2); font-size: 14.5px; flex-wrap: wrap; min-width: 0; width: 100%; }
.profile-meta-item { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.profile-bio { max-width: 720px; width: 100%; overflow-wrap: anywhere; word-break: break-word; }

/* company hero — banner + logo header (content-height, no dead space) */
.co-hero { margin-top: 6px; }

/* ---- founder: highlighted PURPOSE ---- */
.purpose {
  margin-top: 44px;
  position: relative;
  padding: 30px clamp(24px, 3.5vw, 44px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, oklch(0.5 0.12 150 / 0.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  overflow: hidden;
}
.purpose::before {
  content: "\201C";
  position: absolute; top: -34px; left: 16px;
  font-size: 140px; line-height: 1; color: rgba(255,255,255,0.05);
  font-family: Georgia, "Times New Roman", serif;
}
.purpose-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--green); margin-bottom: 14px;
}
.purpose-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green);
  box-shadow: 0 0 0 4px oklch(0.78 0.13 150 / 0.18); }
.purpose-quote {
  position: relative; z-index: 1;
  margin: 0; max-width: 820px;
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; letter-spacing: -0.012em;
  font-weight: 500; color: var(--ink); text-wrap: pretty;
}
.purpose-by { margin-top: 16px; font-size: 14px; color: var(--ink-3); }

/* two-column block */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* media strip */
.mediastrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  grid-auto-rows: 200px;
}
.mediaslot { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }

/* journey timeline */
.timeline { display: grid; gap: 0; }
.tl-item {
  display: grid; grid-template-columns: 84px 24px 1fr; gap: 0; align-items: start;
  padding-bottom: 26px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-year { font-size: 14px; font-weight: 600; color: var(--ink-2); padding-top: 1px; font-variant-numeric: tabular-nums; }
.tl-dot { position: relative; justify-self: center; width: 11px; height: 11px; margin-top: 5px;
  border-radius: 999px; background: var(--green);
  box-shadow: 0 0 0 4px rgba(8,12,11,1), 0 0 0 5px var(--line); }
.tl-item:not(:last-child) .tl-dot::after {
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 1px; height: calc(100% + 26px); background: var(--line);
}
.tl-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.tl-text { font-size: 14px; color: var(--ink-2); margin: 5px 0 0; line-height: 1.5; max-width: 620px; text-wrap: pretty; }
.co-banner {
  position: relative;
  width: 100%;
  height: clamp(210px, 30vh, 320px);
  margin-bottom: 26px;
}
.co-logo {
  position: absolute; left: 22px; bottom: 18px; z-index: 4;
  width: 84px; height: 84px; border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(7,11,10,0.65), 0 16px 34px -12px rgba(0,0,0,0.75);
}
.co-cols {
  display: flex; gap: 28px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
}
.co-info { flex: 1 1 540px; min-width: 320px; }
.videopitch image-slot { z-index: 0; }

/* pitch-deck remove (edit mode) — neutral, turns red on hover */
.deck-remove-btn:hover { color: var(--bad, #e0716b); border-color: var(--bad, #e0716b); }

/* new-company page: the form + the "create with AI" shortcut side by side */
.newco-cols { display: flex; gap: 24px; align-items: flex-start; margin-top: 16px; }
.newco-cols > .newco-form { flex: 1 1 560px; min-width: 0; max-width: none; }
/* left column holds the main form + the optional "More details" box below it */
.newco-cols > .newco-main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.newco-main > .newco-form, .newco-main > .newco-details { max-width: none; }
/* AI panel: pending PDFs collected before extraction */
.newco-files { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.newco-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,0.04);
  font-size: 12.5px; color: var(--ink-2); }
.newco-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-1); font-weight: 500; }
.newco-file-size { flex: none; color: var(--ink-3); }
.newco-file .re-del { flex: none; }
.newco-ai { flex: 0 1 380px; min-width: 300px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg); }
.newco-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 30px 20px; border: 1.5px dashed var(--line); border-radius: var(--r-md);
  background: var(--glass-2); color: var(--ink-2); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.newco-drop:hover { border-color: var(--green); background: rgba(255, 255, 255, 0.05); }
.newco-drop.drag { border-color: var(--green); background: rgba(255, 255, 255, 0.09); border-style: solid; }
/* rotating ring while the AI reads the deck (YouTube-style loader) */
.newco-spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--green);
  animation: newco-spin 0.8s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes newco-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .newco-cols { flex-direction: column; }
  .newco-ai { flex: 1 1 auto; width: 100%; }
}

/* editable-image upload control (logo / banner / photo) — clean glass badge, bottom-right */
.editable-img { position: relative; }
.uploadbtn {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 13px; border-radius: 999px;
  background: rgba(10,13,12,0.74); color: #fff;
  border: 1px solid rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  cursor: pointer; transition: background 0.16s var(--ease), transform 0.12s var(--ease);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6);
}
.uploadbtn svg { flex: none; }
.uploadbtn:hover { background: rgba(24,28,26,0.9); }
.uploadbtn:active { transform: scale(0.96); }
.uploadbtn.is-err { border-color: var(--bad,#e0716b); color: var(--bad,#e0716b); }
/* round (logo): a compact camera badge in the corner; expands only to show status text */
.uploadbtn-round { right: 5px; bottom: 5px; width: 34px; padding: 0; gap: 0; justify-content: center; }
.uploadbtn-round .uploadbtn-txt { display: none; }
.uploadbtn-round.is-busy, .uploadbtn-round.is-err { width: auto; padding: 0 13px; gap: 6px; }
.uploadbtn-round.is-busy .uploadbtn-txt, .uploadbtn-round.is-err .uploadbtn-txt { display: inline; }
.videopitch::after { z-index: 1; }

@media (max-width: 1080px) {
  .statrow { grid-template-columns: 1fr 1fr; }
  .visiongrid { grid-template-columns: 1fr; }
  .pitch { width: 100%; }
  .ev-aside { width: 100%; }
  .attrtiles { grid-template-columns: 1fr 1fr; }
  .attr:nth-child(2) { border-right: none; }
  .attr:nth-child(1), .attr:nth-child(2) { border-bottom: 1px dashed var(--line); }
  .impact-band { grid-template-columns: 1fr; gap: 26px; }
  .twocol { grid-template-columns: 1fr; gap: 24px; }
  .mediastrip { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .mediaslot { grid-column: span 1 !important; }
}

/* ============================================================
   MOBILE — bottom tab bar + condensed chrome (≤720px)
   ============================================================ */
@media (max-width: 720px) {
  .shell { padding-left: 16px; padding-right: 16px; padding-bottom: 120px; min-width: 0; max-width: 100%; overflow-x: clip; }
  .shell:not(:has(.topbar)) { padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); }
  .shell:not(:has(.topbar)) .site-footer { margin-top: 20px; padding-top: 10px; }
  .page-enter { min-width: 0; max-width: 100%; overflow-x: clip; }
  .page-enter.events-page { overflow-x: visible; }
  /* nav drops to a fixed bottom bar (below), so the topbar is just brand | right cluster */
  .topbar { margin-bottom: clamp(20px, 4vh, 32px); grid-template-columns: 1fr auto; }

  /* nav becomes a fixed bottom tab bar */
  .nav {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    justify-content: space-around; gap: 2px;
    padding: 8px 6px; border-radius: 22px;
    background: rgba(9,13,12,0.9);
    box-shadow: 0 -2px 0 rgba(255,255,255,0.04) inset, 0 20px 44px -14px rgba(0,0,0,0.9);
  }
  .nav-item:disabled { display: none; }
  .nav-item { flex: 1; min-width: 0; flex-direction: column; gap: 2px; height: auto; padding: 7px 2px; border-radius: 15px; }
  .nav-item svg { width: 21px; height: 21px; opacity: 0.9; }
  .nav-item .nav-lbl { font-size: 10px; letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the tab bar stacks icon over label, so the live dot rides the icon's corner
     instead of becoming a third row that pushes the label out of the tab */
  .nav-item { position: relative; }
  .nav-live-dot { position: absolute; top: 5px; right: 50%; margin-right: -14px; }
  .nav-lbl-full { display: none; }
  .nav-lbl-short { display: inline; }
  .nav-item.is-active { background: var(--glass-2); color: var(--ink); font-weight: 600; }
  .nav-item.is-active svg { opacity: 1; }

  /* condense the right cluster — avatar only, no name text (keep the .avatar div!) */
  .me { padding: 4px; gap: 0; }
  .me > div:not(.avatar) { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .topbar-right { gap: 8px; }

  /* profile / detail two-column layouts stack cleanly */
  .co-cols, .profile-hero > div { gap: 22px; }
  .co-info { min-width: 0; }
  .glass, .glass-soft { max-width: 100%; min-width: 0; }
  .statrow { grid-template-columns: 1fr; }
  .attrtiles { grid-template-columns: 1fr 1fr; }
  /* T3: the 7-tab Admin Console bar scrolls — fade the right edge to signal "more →" */
  .admin-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  /* LAYOUT-01: let a long section title + its label/button stack instead of overlapping */
  .sec-head { flex-wrap: wrap; row-gap: 4px; margin-bottom: 18px; }
  /* LAYOUT-02: founder card stacks (avatar, then text, then full-width actions) */
  .cofounder-card { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  .cofounder-card > div:not(.avatar) { flex: none !important; width: 100%; }
  .cofounder-card > .btn { width: 100%; }
  /* detail back bar: icon-only actions on narrow screens */
  .pagebackbar { flex-wrap: nowrap; gap: 8px; }
  .pagebackbar-back-lbl { display: none; }
  .pagebackbar-back {
    width: 40px; min-width: 40px; height: 40px; min-height: 40px;
    padding: 0; display: inline-grid; place-items: center; gap: 0;
  }
  .pagebackbar .topbar-right { gap: 4px; }
  .pagebackbar-actions { gap: 4px; }
  .pagebackbar .icon-btn { width: 40px; height: 40px; }
  .pagebackbar .me { padding: 2px 4px 2px 6px; gap: 0; }
  .pagebar-done-lbl { display: none; }
  .pagebar-done-btn {
    width: 40px; min-width: 40px; height: 40px; min-height: 40px;
    padding: 0; display: inline-grid; place-items: center; gap: 0;
  }
  /* admin Approvals/Requests cards: wrap text, drop the buttons to their own row (ADMIN-01/02) */
  .actrow { flex-wrap: wrap; gap: 8px 12px; }
  .actrow-main { flex: 1 1 55%; }
  .actrow-name, .actrow-sub { white-space: normal; overflow: visible; }
  .actrow-sub { margin-top: 6px; }
  .actrow-when { font-size: 11.5px; }
  .actrow > div:last-child { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: 8px; }

  /* big display type a touch smaller so it never clips */
  .display { font-size: clamp(32px, 9vw, 48px); }

  /* segmented controls: fill width when they fit, scroll when they don't (admin 7-tab) */
  .seg { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-btn { flex: 1 0 auto; white-space: nowrap; }
  .admin-tabs { width: 100%; max-width: 100%; min-width: 0; }

  /* HOME mobile — map hero; copy + stats stacked (no side-by-side cramming) */
  .shell:has(.homev2) {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
  .shell:has(.homev2) .topbar {
    margin-bottom: 4px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .shell:has(.homev2) .pending-banner {
    margin-left: 16px;
    margin-right: 16px;
  }
  .shell:has(.homev2) .site-footer {
    margin-top: 8px;
    margin-bottom: 0;
    padding: 8px 16px 0;
    border-top: 1px solid var(--line-2);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 12px;
    font-size: 11.5px;
  }
  .shell:has(.homev2) .site-footer > span { width: auto; }
  .shell:has(.homev2) .site-footer-links { width: auto; gap: 8px 14px; }
  .app.has-cookiebar .shell:has(.homev2) .site-footer {
    margin-bottom: clamp(72px, 16vh, 110px);
  }
  /* the hero runs to the fold: the page claims the viewport minus the chrome
     around it (76px topbar + 92px footer and tab bar) and the map takes whatever
     the live strip above it does not. Sizing the map itself to the viewport is
     what left a band of page background under it — and, on the days the live
     strip exists, pushed the last card under the floating tab bar. */
  .homev2 {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 168px);
  }
  .homev2-map {
    justify-content: flex-end;
    flex: 1;
    min-height: 440px;
    width: 100%;
    margin: 0;
  }
  /* the shell drops its side padding so the map can be full-bleed, so anything
     above the map carries its own gutter — as the topbar and banner already do */
  .shell:has(.homev2) .home-live {
    padding-left: 16px;
    padding-right: 16px;
  }
  .homev2-map-slot {
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: auto;
  }
  .homev2-overlay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    padding: 0 20px 22px;
  }
  /* a phone has one column, so the copy takes it. Holding the desktop's narrow
     measure here only bought an empty gutter on the right. */
  .homev2-left {
    flex: none;
    width: 100%;
    max-width: none;
    text-align: left;
  }
  .homev2-tag {
    margin: 0 0 16px;
    font-size: clamp(34px, 10.5vw, 46px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
  }
  .homev2-guestnote { max-width: none; }
  .raise-pill { font-size: 12.5px; padding: 7px 13px; margin-bottom: 12px; gap: 7px; }
  .homev2-left .btn-lg {
    height: 42px;
    font-size: 14px;
    padding: 0 20px;
  }

  /* ---- what a phone drops, and why ----
     Each of these repeats something already on the screen. The tagline now
     carries the investment feed, the buttons say what the note said, the
     billboard says what the footer's logo strip says, and the phone itself
     already pans and pinches the map. */
  .homev2-preview-note { display: none; }
  .homev2-signin-btn { display: none; }
  .homev2-signin-link { display: inline-block; }
  .homev2 .hp-feat { display: none; }
  .shell:has(.homev2) .site-footer .sp-strip { display: none; }
  .homev2 .map-zoom,
  .homev2 .map-draghint { display: none; }

  /* a visitor who is not in the network yet gets the tagline and one way in —
     the numbers and the billboard are a member's furniture. NB this takes the
     home_hero billboard away from signed-out phone traffic. */
  .homev2.is-guest .homev2-right { display: none; }
  /* the numbers are the strongest thing on this page and a phone used to get
     none of them. The desktop glass pill does not survive at this width, so
     they read as a plain line under the CTA instead — and `order` floats them
     above the billboard, keeping the last card before the fold the sponsor's. */
  .homev2 .minichart-card {
    display: flex;
    order: -1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .homev2 .mc-spark,
  .homev2 .mc-divider { display: none; }
  .homev2 .mc-stat { display: inline-flex; align-items: baseline; gap: 7px; }
  .homev2 .mc-num { font-size: 17px; }
  .homev2 .mc-lbl { margin-top: 0; font-size: 10px; letter-spacing: 0.08em; }

  /* events mobile — map full-bleed like home (shell clip blocks negative margins) */
  .shell:has(.events-page) {
    padding-left: 0;
    padding-right: 0;
  }
  .shell:has(.events-page) > .topbar {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: clamp(14px, 3vh, 22px);
  }
  .events-page .ev-toolbar,
  .events-page .sec-head,
  .events-page .actlist {
    padding-left: 16px;
    padding-right: 16px;
  }
  .events-page .ev-map.map-bleed {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  .events-page .ev-map .mapwrap-fluid {
    min-height: clamp(260px, 48vw, 440px);
    aspect-ratio: 1000 / 480;
  }

  /* discover / events maps — edge-to-edge, tighter to filters */
  .map-bleed {
    margin-left: -16px;
    margin-right: -16px;
  }
  .disc-map { margin: 8px 0 14px !important; }
  .disc-map .mapwrap-fluid { min-height: clamp(220px, 44vw, 360px); }
  .ev-toolbar { gap: 10px !important; margin-bottom: 0 !important; }
  .ev-map {
    margin: 4px 0 14px !important;
    padding-top: 0 !important;
  }
  .ev-map .mapwrap-fluid { min-height: clamp(240px, calc(100dvh - 420px), 400px); }

  /* DISCOVER — stack controls; full-width search; scrollable tab chips */
  .disc-controls { flex-direction: column; align-items: stretch !important; margin-top: 12px !important; gap: 10px !important; }
  .disc-seg, .disc-controls .seg { width: 100% !important; max-width: 100%; }
  .disc-controls .chip-row { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .disc-controls .chip-row::-webkit-scrollbar { display: none; }
  .disc-controls .chip-row .chip { flex: none; }
  .disc-controls .disc-tools { order: 2; width: 100%; max-width: 100%; flex: 1 1 100%; }
  .disc-controls .chip-row { order: 3; }

  /* DISCOVER / matches — compact horizontal rows, full-width search */
  .dgrid { grid-template-columns: 1fr; gap: 9px; }
  .pcard { flex-direction: row; align-items: center; text-align: left; padding: 11px 13px; gap: 13px; }
  .pcard::before { display: none; }
  .pcard:hover { transform: none; }
  .pcard .avatar { width: 50px !important; height: 50px !important; font-size: 17px !important; }
  .pcard-logo { width: 50px; height: 50px; border-radius: 13px; flex: none; }
  .pcard-main { order: 1; flex: 1; min-width: 0; text-align: left; }
  .pcard-badges { min-height: 0; margin-top: 5px; justify-content: center !important; }
  .pcard-foot { order: 3; margin-top: 0; padding-top: 0; width: auto; flex: none; }
  .pcard-foot .intro-btn { width: auto; }
  .pcard-name { margin-top: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcard-sub { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcard .flagrow { margin-top: 0; justify-content: center !important; flex-wrap: nowrap; }
  .pcard .fbadge-ico { width: 22px; height: 22px; }
  .pcard-logo, .pcard .avatar { order: 0; }
  .pcard-score { position: static; order: 2; align-self: center; font-size: 14px; font-weight: 600; color: var(--green); }
  .pcard .btn { order: 3; margin-top: 0 !important; flex: none; height: 32px; padding: 0 13px; font-size: 12.5px; }
  .pcard .savebtn { display: none; }

  /* filter chip rows stay on one line, scroll horizontally */
  .filterrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filterrow::-webkit-scrollbar { display: none; }
  .filterrow .chip, .filterrow .label { flex: none; }

  /* form chip pickers (sectors, stages, focus…) stay on one scrollable line too */
  .field .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .field .chip-row::-webkit-scrollbar { display: none; }
  .field .chip-row .chip { flex: none; }

  /* profile Focus/Expertise chips: single scrollable line instead of wrapping (#7/#14) */
  .twocol .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .twocol .chip-row::-webkit-scrollbar { display: none; }
  .twocol .chip-row .chip { flex: none; }

  /* pending banner: centered text on small screens (#18) */
  .pending-banner { justify-content: center; text-align: center; flex-wrap: wrap; }


  /* EVENTS — scope tabs full width; New event on its own row */
  .ev-controls { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  .ev-controls .seg { width: 100% !important; max-width: 100%; }
  .ev-new-btn { margin-left: 0 !important; width: 100%; justify-content: center; }
  .ev-toolbar { gap: 12px !important; margin-bottom: 0 !important; }
  .disc-filters { gap: 8px !important; }
  .dgrid { margin-top: 12px !important; }

  /* profile — prevent horizontal bleed on detail pages */
  .profile-hero .profile-head-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .profile-hero .profile-head-copy { width: 100%; }
  .profile-hero .display { overflow-wrap: anywhere; word-break: break-word; }
  .profile-meta-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .profile-meta-row .meta-sep { display: none; }
  .profile-meta-flags { width: 100%; }
  .profile-meta-flags .flagrow { flex-wrap: wrap; }
  .profile-hero .profile-meta-row > span { width: 100%; }
  .profile-hero p, .profile-hero .profile-bio { max-width: 100% !important; width: 100% !important; overflow-wrap: anywhere; word-break: break-word; }
  .profile-hero .attrtiles { margin-top: 4px; width: 100%; grid-template-columns: 1fr; }
  .profile-hero .attr { min-width: 0; border-right: none !important; border-bottom: 1px dashed var(--line); min-height: 0; padding: 18px 16px; }
  .profile-hero .attr:last-child { border-bottom: none; }
  .profile-hero .attr-val { overflow-wrap: anywhere; word-break: break-word; font-size: clamp(15px, 4.2vw, 22px); }
  .profile-hero .hero-actions { width: 100%; display: flex; gap: 10px; }
  .profile-hero .hero-actions .btn,
  .profile-hero .hero-actions .uploadbtn { flex: 1 1 0; min-width: 0; justify-content: center; }
  .profile-hero .ce-slot-block { max-width: 100%; }

  .ev-map .map-card { display: none; }
  .ev-map .map-card.is-open { display: flex; }
  .ev-map .map-anchor { width: 12px; height: 12px; }
  .evrow { gap: 12px; padding: 12px 13px; }
  .evrow-name { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* T8: wrap long titles to 2 lines, no mid-word "…Ret…" */
  .evrow-meta { flex-wrap: wrap; margin-top: 4px; gap: 5px 9px; }   /* T8: location drops to its own line so the full city shows */
  .evrow-loc { overflow: visible; text-overflow: clip; }            /* T8: show full "City · N going", no "Zürich · 14…" */
  .evrow-blurb { display: none; }
  .ev-date { width: 86px; min-width: 86px; padding: 7px 6px; }   /* §2: uniform width (matches desktop) so every event title aligns; still fits "Jan 19–23" */
  .evrow-act.btn { height: 40px; padding: 0 16px; font-size: 13px; }   /* T9: bigger tap target (row is now multi-line, fits) */

  /* T9: interactive controls get a >=44px tap target on mobile.
     button.chip targets only the interactive filter chips — the static Tag()
     spans (span.chip) are left at their compact size. */
  button.chip { min-height: 44px; }
  .seg-btn { height: 44px; }
  .btn-sm { min-height: 44px; }
  /* discover / events — filter bars stay compact and match chip-sm scale */
  .disc-controls .seg-btn,
  .ev-controls .seg-btn { height: 34px; min-height: 34px; font-size: 12px; padding: 0 10px; }
  .disc-controls .chip,
  .disc-filters button.chip,
  .ev-filters button.chip { min-height: 0; height: 32px; padding: 0 12px; font-size: 12.5px; }
  .disc-filters .chip-sm,
  .ev-filters .chip-sm { height: 30px; padding: 0 11px; font-size: 12px; }
  .ev-typefilter { padding: 5px 9px; border-radius: 14px; }
  /* search + map toggle match the seg height (the 44px .btn-sm touch bump must not win) */
  .disc-controls .map-toggle-btn { height: 34px; min-height: 34px; font-size: 12px; }
  /* discover card intro icon pill — square, centered glyph (overrides .btn-sm min-height) */
  .pcard .intro-btn {
    width: 36px; height: 36px; min-height: 36px; min-width: 36px;
    padding: 0 !important; gap: 0;
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
  }
  .pcard .intro-btn svg { display: block; width: 15px; height: 15px; flex: none; }
  .pcard .intro-btn .btn-label { display: none; }

  /* settings dropdown: pin to viewport so it never clips off the left edge */
  .menu { position: fixed; top: 64px; right: 12px; left: auto; width: min(300px, calc(100vw - 24px)); }
  /* §7: dim + blur behind the menu sheet on mobile so it reads as a layer, no bleed-through
     (the overlay already closes on tap-outside; desktop keeps the plain dropdown, no scrim) */
  .menu-scrim { background: rgba(0,0,0,0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
}

@media (max-width: 480px) {
  .attrtiles { grid-template-columns: 1fr; }
  .attr { border-right: none !important; border-bottom: 1px dashed var(--line); min-height: 0; }
  .attr:last-child { border-bottom: none; }
  .adm-kpis { grid-template-columns: 1fr; }
  .actstats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpitiles { grid-template-columns: 1fr; }
  .kpitiles-8 .kpitile { border-right: none !important; border-bottom: 1px dashed var(--line); }
  .kpitiles-8 .kpitile:last-child { border-bottom: none; }
  .funnel-row { grid-template-columns: 1fr; }
  .funnel-n { text-align: left; }
  .nav-item .nav-lbl { font-size: 9.5px; }
  .map-card { max-width: 44vw; }
  .map-card-t, .map-card-s { white-space: normal; }
  /* back bar: drop the name text, keep avatar + actions */
  .topbar-right .me-name, .topbar-right .me-sub { display: none; }
}

/* ---- horizontal timeline editor (founder profile) ---- */
.tl-edit-wrap { margin-top: 8px; }
.tl-edit-rail {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding: 8px 2px 12px;
  scroll-behavior: smooth;
}
.tl-edit-col {
  flex: 0 0 248px;
  width: 248px;
  padding: 0 9px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tl-edit-noderow {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-edit-noderow::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  background: var(--line-2);
  transform: translateY(-50%);
}
.tl-edit-col:first-child .tl-edit-noderow::before { left: 50%; }
.tl-edit-addcol .tl-edit-noderow::before { right: 50%; }
.tl-edit-dot {
  position: relative; z-index: 1;
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--bg-1);
}
.tl-edit-year { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-edit-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl-edit-del {
  position: absolute;
  top: -10px; right: -10px;
  width: 24px; height: 24px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--glass-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tl-edit-del:hover { color: var(--ink); border-color: var(--line); }
.tl-edit-addcol { flex: 0 0 116px; width: 116px; align-items: center; }
.tl-edit-add {
  width: 42px; height: 42px; border-radius: 999px;
  border: 1.5px dashed var(--line);
  background: transparent; color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tl-edit-add:hover { border-color: var(--green); color: var(--green); }
.tl-edit-addlbl { font-size: 12px; color: var(--ink-3); margin-top: 2px; text-align: center; }
.tl-edit-empty { color: var(--ink-3); font-size: 13.5px; padding: 6px 2px; }

/* ---- compact repeatable-rows editor (links, track record) ---- */
.re-list { display: grid; gap: 8px; margin-top: 6px; }
.re-row { display: flex; gap: 8px; align-items: center; }
.re-row.re-row-stack { align-items: flex-start; }
.re-row .field-in { min-width: 0; }
.re-del {
  flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--line-2);
  color: var(--ink-3); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.re-del:hover { color: var(--ink); border-color: var(--line); }
.re-add {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 12px;
  background: transparent; border: 1.5px dashed var(--line);
  color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.re-add:hover { border-color: var(--green); color: var(--green); }
/* in column layouts (form list editors) the add button keeps its own line + spacing */
.field > .re-add { align-self: flex-start; margin-top: 8px; }

/* ---- field-by-field editing: hover a field → pencil → click to edit the text in place ---- */
.ce-slot { position: relative; cursor: text; border-radius: 8px;
  transition: background .12s ease, box-shadow .12s ease; }
.ce-slot:not(.ce-slot-block) { display: inline-block; vertical-align: top; }
.ce-slot:hover { background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px var(--line-2); }
.ce-slot.ce-active { background: rgba(255,255,255,0.04); box-shadow: 0 0 0 2px var(--green-mid); }
/* a slot holding a currency pill centers its children as a flex row — select
   baselines are browser-quirky against large digits, flex centering is not.
   Must come AFTER the inline-block rule above to win the cascade. */
.ce-slot:not(.ce-slot-block).ce-slot-cur { display: inline-flex; align-items: center; gap: 6px; }
.ce-slot-cur .ce-cur { margin-right: 0; }
.ce-slot [contenteditable="true"] { outline: none; }
.ce-pencil {
  position: absolute; top: -7px; right: -7px;
  width: 19px; height: 19px; border-radius: 999px;
  background: var(--green); color: #0a0c0b;
  display: grid; place-items: center; z-index: 3;
  opacity: 0; transform: scale(.7); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.ce-slot:hover .ce-pencil { opacity: 1; transform: scale(1); }
.ce-slot.ce-active .ce-pencil { opacity: 0; }
.link-edit-row { display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 5px 0 13px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--glass); }
/* the ✕ inside a link row stays quiet until hovered — no heavy dark circle */
.link-edit-row .re-del { width: 24px; height: 24px; background: transparent; border-color: transparent; color: var(--ink-3); }
.link-edit-row .re-del:hover { color: var(--ink); background: var(--glass-2); border-color: var(--line-2); }
.ce-empty { color: var(--ink-3); }
/* standalone form pages (new company, settings) — keep forms a readable width */
.settings-card { max-width: 760px; }
/* #20 — less air between fields, status line and CTA */
.settings-card .ob-grid { gap: 12px 16px; }
.settings-card .settings-note { margin-top: 4px; min-height: 0; }
.settings-card .ob-foot { margin-top: 12px; padding-top: 12px; }
/* dashed "add" tile for inline list editors (track tiles, portfolio cards) */
.ce-add-tile { display: grid; place-items: center; cursor: pointer; min-height: 64px;
  background: transparent; border: 1.5px dashed var(--line); border-radius: var(--r-sm);
  color: var(--ink-3); font-size: 13.5px;
  transition: color .15s ease, border-color .15s ease; }
.ce-add-tile:hover { border-color: var(--green); color: var(--green); }

/* ============================================================
   MARKETPLACE · product grid + product detail
   ============================================================ */
/* ---------- Media (video) page ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 14px; }
.media-card {
  display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; color: inherit; font: inherit;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.media-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-pop); }
.media-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-1); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(9,13,12,0.62); color: #fff; backdrop-filter: blur(4px);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.media-card:hover .media-play { background: var(--green); transform: scale(1.06); }
.media-cardbody { padding: 14px 16px 16px; }
.media-title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.media-blurb { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; line-height: 1.5; text-wrap: pretty; }
/* lightbox */
.media-lb {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: rgba(6,9,8,0.82); backdrop-filter: blur(8px); animation: fade 0.18s var(--ease) both;
}
.media-lb-card { width: min(960px, 100%); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-pop); }
.media-lb-stage { aspect-ratio: 16 / 9; width: 100%; background: #000; }
.media-lb-cap { padding: 16px 20px 20px; }
.media-lb-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.media-lb-blurb { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.55; }
.media-lb-close {
  position: fixed; top: 20px; right: 22px; width: 42px; height: 42px; z-index: 201;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgba(20,24,22,0.72); color: var(--ink); border: 1px solid var(--line-2);
}
.media-lb-close:hover { background: rgba(32,36,34,0.92); }
@media (max-width: 560px) { .media-lb { padding: 0; } .media-lb-card { border-radius: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; } }

.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.mkt-card {
  display: flex; flex-direction: column; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.mkt-card:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: 0 18px 40px -20px rgba(0,0,0,0.7); }
.mkt-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-1); overflow: hidden; }
.mkt-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-media .mkt-img { transition: transform 0.4s var(--ease); }
.mkt-card:hover .mkt-media .mkt-img { transform: scale(1.03); }
.mkt-cat {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(10,13,12,0.7); color: #fff; border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mkt-body { display: flex; flex-direction: column; gap: 5px; padding: 16px 16px 18px; flex: 1; }
.mkt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mkt-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.mkt-price { font-size: 15px; font-weight: 600; color: var(--green); white-space: nowrap; }
.mkt-maker-static { font-size: 12.5px; color: var(--ink-3); }
.mkt-blurb { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 3px 0 0; text-wrap: pretty; flex: 1; }
.mkt-view { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--ink); }
.mkt-view svg { transition: transform 0.18s var(--ease); }
.mkt-card:hover .mkt-view svg { transform: translateX(3px); }

/* ---------- product detail ---------- */
.pd { margin-top: 8px; }
.pd-cols { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.pd-media {
  position: relative; flex: 1 1 380px; min-width: 0; aspect-ratio: 4 / 3;
  border-radius: 22px; overflow: hidden; background: var(--bg-1); border: 1px solid var(--line-2);
}
.pd-content { flex: 1 1 340px; min-width: 0; }
.pd-title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.pd-maker {
  display: inline-block; margin-top: 8px; padding: 0; background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
}
.pd-maker:hover { color: var(--ink); }
.pd-price { display: flex; align-items: baseline; gap: 10px; margin: 20px 0; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.pd-unit { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.pd-text { font-size: 15px; color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
.pd-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 24px 0;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden;
}
.pd-stat { background: var(--bg-0); padding: 14px 16px; }
.pd-stat-v { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.pd-stat-k { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.pd-cta { width: 100%; margin-top: 4px; }
.pd-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.pd-note svg { flex: none; color: var(--green); }

@media (max-width: 720px) {
  .mkt-grid { grid-template-columns: 1fr; gap: 16px; }
  .pd-cols { gap: 20px; }
  .pd-price { margin: 16px 0; font-size: 26px; }
}

/* ============================================================
   LOADING SKELETONS (shimmer placeholders during list fetches)
   ============================================================ */
@keyframes skl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skl {
  background: linear-gradient(90deg, rgba(255,255,255,0.045) 25%, rgba(255,255,255,0.10) 37%, rgba(255,255,255,0.045) 63%);
  background-size: 200% 100%; animation: skl-shimmer 1.5s ease-in-out infinite; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) { .skl { animation: none; } }
.skl-line { height: 12px; border-radius: 6px; }
/* grid card skeleton (marketplace) */
.skl-card { display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; }
.skl-card .skl-media { aspect-ratio: 4 / 3; border-radius: 0; }
.skl-card .skl-body { display: flex; flex-direction: column; gap: 11px; padding: 16px 16px 20px; }
/* row skeleton (discover / events lists) */
.skl-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 12px;
  background: var(--glass); border: 1px solid var(--line-2); border-radius: 16px; }
.skl-row .skl-avatar { width: 52px; height: 52px; border-radius: 999px; flex: none; }
.skl-row .skl-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }

/* claim page — prepared-profile preview card */
.claim-preview {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--line-2);
}
.claim-preview-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.claim-preview-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ legal pages (privacy / terms) — draft templates ============ */
.legal-card { max-width: 760px; }
.legal-updated { color: var(--ink-3); font-size: 12.5px; margin-top: 8px; }
.legal-draft {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0 4px; padding: 8px 14px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: oklch(0.86 0.09 80);
  background: oklch(0.82 0.13 80 / 0.12); border: 1px solid oklch(0.82 0.13 80 / 0.35);
}
.legal-sec { margin-top: 26px; }
.legal-sec h2 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.legal-sec p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 8px; text-wrap: pretty; }
.legal-sec .legal-pending { font-style: italic; color: var(--ink-3); font-size: 12.5px; }

/* ============ site footer — legal links on every page ============ */
/* a column so an optional partner strip can sit above the legal row; the legal
   row itself keeps the layout the footer always had */
.site-footer {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 56px; padding: 18px 4px 6px;
  border-top: 1px solid var(--line-2); color: var(--ink-3); font-size: 12.5px;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.site-footer-legal {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  width: 100%; min-width: 0;
}
/* onboarding-style pages (sign-in / sign-up / legal / claim) are short — pin the
   footer to the bottom of the viewport instead of letting it float mid-page */
.shell:has(.ob-wrap) { display: flex; flex-direction: column; min-height: 100dvh; }
.shell:has(.ob-wrap) .site-footer { margin-top: auto; }

.site-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer-links button, .site-footer-links > span {
  background: none; border: 0; padding: 0; color: var(--ink-3);
  font: inherit; text-underline-offset: 3px;
  white-space: nowrap;
}
.site-footer-links button { cursor: pointer; }
.site-footer-links button:hover { color: var(--ink-1); text-decoration: underline; }
.footer-lbl-short { display: none; }

/* reserve space above the fixed cookie bar so footer + CTAs stay readable */
.app.has-cookiebar .site-footer { margin-bottom: clamp(120px, 28vh, 180px); }
.app.has-cookiebar .shell { scroll-padding-bottom: 160px; }

/* ============ cookie banner — first visit, essential-only notice ============ */
.cookiebar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 70;
  display: flex; align-items: center; gap: 16px;
  width: max-content; max-width: min(92vw, 620px); padding: 14px 18px; border-radius: 16px;
  box-sizing: border-box;
}
.cookiebar-txt { font-size: 13px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; min-width: 0; }
.cookiebar-ok { flex: none; }
.cookiebar-link {
  background: none; border: 0; padding: 0; color: var(--ink-1);
  font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 720px) {
  .site-footer {
    flex-direction: column; align-items: center; text-align: center;
    margin-top: 32px; gap: 10px; padding: 14px 8px 8px;
    max-width: 100%; box-sizing: border-box;
  }
  .site-footer > span { width: 100%; }
  .site-footer-links {
    justify-content: center; align-items: center;
    flex-direction: row; flex-wrap: wrap;
    gap: 8px 20px; width: 100%; max-width: 100%;
  }
  .site-footer-links button, .site-footer-links > span { white-space: normal; text-align: center; line-height: 1.35; }
}
@media (max-width: 400px) {
  .footer-lbl-full { display: none; }
  .footer-lbl-short { display: inline; }
}
@media (max-width: 560px) {
  .cookiebar {
    left: 12px; right: 12px; transform: none;
    flex-direction: column; align-items: stretch;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none;
  }
  .cookiebar .btn { width: 100%; }
  .app.has-cookiebar .site-footer { margin-bottom: clamp(148px, 32vh, 200px); }
}

/* ---------- profile completion pill (own profile top bar) ---------- */
.completion-pill-wrap { position: relative; display: inline-flex; }
.completion-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,0.04);
  color: var(--ink-1); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.completion-pill:hover { background: rgba(255,255,255,0.08); }
.completion-pill-label { color: var(--ink-2); font-weight: 500; }
.completion-meter { width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.10);
  overflow: hidden; }
.completion-meter-fill { display: block; height: 100%; border-radius: 3px; background: var(--good, #7fd7a4);
  transition: width .35s ease; }
.completion-pill.is-low .completion-meter-fill { background: var(--warn, #d9a441); }
.completion-panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 240px; max-width: 300px; padding: 12px 14px; border: 1px solid var(--line-2);
  border-radius: 12px; background: var(--bg-1, #151815); box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.completion-pill-wrap.is-open .completion-panel { display: block; }
.completion-warn { font-size: 12.5px; color: var(--warn, #d9a441); margin-bottom: 8px; }
.completion-item { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; text-align: left; }
/* clickable to-dos: a click jumps straight to the matching editor field */
.completion-item-link { display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; cursor: pointer; }
.completion-item-link:hover { color: var(--ink-1); }
/* small screens: keep the pill but drop the mini meter so the top bar never wraps */
@media (max-width: 520px) {
  .completion-meter { display: none; }
  .completion-pill { padding: 0 9px; }
}

/* hidden-from-network banner (own profile, approved-but-below-threshold) —
   reuses .pending-banner but carries a progress track and an amber accent.
   Block layout (not the banner's usual flex row): the track must span the
   banner's full inner width, edge to edge, under the dot+text head row.
   text-align:left also overrides the mobile center rule (#18) — a centered
   head row would strand the dot away from its text. */
.completion-hidden-banner { display: block; text-align: left; border: 1px solid rgba(217,164,65,0.28);
  padding: 18px 20px; margin-bottom: 30px; }
.completion-hidden-head { display: flex; align-items: flex-start; gap: 12px; }
.completion-hidden-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; margin-top: 5px;
  background: oklch(0.82 0.13 80); }
.completion-hidden-track { height: 8px; border-radius: 5px; background: rgba(255,255,255,0.08);
  overflow: hidden; margin: 14px 0 8px; }
.completion-hidden-fill { height: 100%; border-radius: 4px; background: var(--warn, #d9a441);
  transition: width .35s ease; }
.completion-hidden-next { font-size: 12.5px; color: var(--ink-3); }
.completion-next-link { padding: 0; border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.completion-next-link:hover { color: var(--ink-1); }

/* jump-to-field landing flash — briefly outlines the control a completion
   to-do points at ([data-ck]) so the eye lands with the scroll */
.ck-flash { animation: ck-flash 1.8s ease-out; border-radius: 10px; }
@keyframes ck-flash {
  0%, 55% { box-shadow: 0 0 0 2px var(--warn, #d9a441), 0 0 22px rgba(217,164,65,0.25); }
  100% { box-shadow: 0 0 0 2px transparent; }
}

/* ---- admin statistics: paired bars, ticket bands ---- */
.pbars-key { display: flex; justify-content: space-between; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
/* minmax(0,…) everywhere a track holds a bar: a plain 1fr floors at its
   content width, so the nowrap value label ("CHF 48.7M") pushed the row wider
   than the card instead of letting the bar shrink */
.pbar-row { display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, auto) minmax(0, 1fr);
  align-items: center; gap: 12px; padding: 7px 0; }
.pbar-row.is-other { opacity: .55; }
.pbar-side { display: grid; align-items: center; gap: 8px; min-width: 0; }
.pbar-side.left { grid-template-columns: auto minmax(0, 1fr); }
.pbar-side.right { grid-template-columns: minmax(0, 1fr) auto; }
.pbar-fill { height: 9px; border-radius: 5px; min-width: 2px; }
.pbar-side.left .pbar-fill { justify-self: end; }
.pbar-side.right .pbar-fill { justify-self: start; }
.pbar-fill.l { background: linear-gradient(90deg, rgba(126,231,168,.35), rgba(126,231,168,.85)); }
.pbar-fill.r { background: linear-gradient(90deg, rgba(125,197,255,.85), rgba(125,197,255,.35)); }
.pbar-val { font-size: 12px; color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pbar-label { text-align: center; font-size: 13px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pbars-empty { padding: 26px 0; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.seg.seg-mini .seg-btn { font-size: 11.5px; padding: 4px 10px; }
.tband { display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 42px;
  align-items: center; gap: 12px; padding: 6px 0; }
.tband-lbl { font-size: 13px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.tband-fill { height: 9px; border-radius: 5px; min-width: 2px;
  background: linear-gradient(90deg, rgba(125,197,255,.85), rgba(125,197,255,.35)); }
.tband-val { font-size: 12px; color: var(--ink-3); text-align: right;
  font-variant-numeric: tabular-nums; }
.stats-foot { margin: 18px 2px 0; font-size: 12px; line-height: 1.6;
  color: var(--ink-3); text-wrap: pretty; }
.stats-warn { color: #f0b429; }

/* event attendance panel */
.att-count { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.att-tier { width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--line-2);
  background: rgba(10,14,12,0.45); color: var(--ink);
  transition: border-color 0.16s, background 0.16s; }
.att-tier.is-on { border-color: oklch(0.82 0.09 150); background: rgba(16,26,20,0.7); }
.att-tier:disabled { cursor: default; }
.att-rail { display: grid; gap: 6px; margin-bottom: 4px; }
.att-row { display: flex; align-items: center; gap: 8px; }
.att-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 5px 7px; border-radius: 10px; background: none; border: none;
  color: var(--ink); text-align: left; cursor: pointer; }
.att-who:hover { background: rgba(255,255,255,0.05); }
.att-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-tier-lbl { font-size: 11px; color: var(--ink-3); flex: none; }
.att-intro { flex: none; padding: 0 9px; }
.att-more { font-size: 12.5px; color: var(--ink-3); padding: 4px 7px; }
.ev-form-tix-cur-field { max-width: 96px; }
.adm-ev-name { background: none; border: none; padding: 0; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.adm-ev-name:hover { text-decoration: underline; }

/* event assets: gallery, floor plan, partners, downloads */
/* gallery + floor plan: two compact cards side by side, not two full-width blocks */
.ev-media-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ev-media-cell { display: grid; gap: 9px; min-width: 0; }
.ev-media-lbl { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.ev-card { position: relative; display: block; width: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 14px; background: rgba(10,14,12,0.45);
  cursor: pointer; aspect-ratio: 4/3;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.ev-card:hover { border-color: var(--line); transform: translateY(-2px); }
.ev-card-stage { position: absolute; inset: 0; display: block; }
/* every photo is stacked; only the active one is opaque, so the card crossfades */
.ev-card-layer { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; opacity: 0; transition: opacity 0.9s var(--ease); }
.ev-card-layer.is-on { opacity: 1; }
.ev-card-badge { position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(8,10,9,0.62);
  border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(8px); }
.ev-card-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding: 26px 12px 10px; text-align: left;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.76)); }
.ev-card-cap { font-size: 12.5px; color: #fff; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-ticks { display: flex; gap: 3px; flex: none; padding-bottom: 3px; }
.ev-tick { width: 12px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.34);
  transition: background 0.3s var(--ease); }
.ev-tick.is-on { background: #fff; }
/* the plan is for reading — drift in on hover to say there is more here */
.ev-plan-card .ev-card-layer { object-fit: contain; background: rgba(255,255,255,0.03);
  transition: transform 3.2s var(--ease); }
.ev-plan-card:hover .ev-card-layer { transform: scale(1.09); }
@media (prefers-reduced-motion: reduce) {
  .ev-card, .ev-card-layer, .ev-tick { transition: none; }
  .ev-plan-card:hover .ev-card-layer { transform: none; }
}

/* right rail: the attendance panel plus reference material below it */
.ev-aside { width: 380px; flex: none; display: grid; gap: 16px; align-content: start; }
.ev-aside .pitch { width: 100%; }
.ev-aside-panel { padding: 18px; }
.ev-sponsors { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.ev-sponsor { display: grid; place-items: center; height: 50px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,0.045); }
.ev-sponsor img { max-height: 26px; max-width: 96px; object-fit: contain; display: block; }
/* rows are only as wide as their contents — no stretched bar with a gulf in the middle */
.ev-docs { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ev-doc { display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 9px 13px; border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(10,14,12,0.45); color: var(--ink); text-decoration: none;
  transition: background 0.16s, border-color 0.16s; }
.ev-doc:hover { background: rgba(16,21,18,0.7); border-color: var(--line); }
.ev-doc-name { flex: 0 1 auto; min-width: 0; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-doc-size { flex: none; font-size: 11.5px; color: var(--ink-3); }
.ev-lb-stage { display: grid; place-items: center; }
/* admin asset manager rows */
/* the event description, and its two-audience editor: the public half and the
   members' half stack with a label each, so which is which is never a guess */
.ev-desc-p { max-width: 600px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
  margin: 0 0 26px; text-wrap: pretty; }
.ev-desc-edit { display: grid; gap: 6px; margin-bottom: 26px; }
.ev-desc-edit .label { margin-top: 10px; }
.ev-desc-edit .label:first-child { margin-top: 0; }
.ev-desc-edit .ev-desc-p { margin-bottom: 0; }
.ev-assets-rows { display: grid; gap: 8px; margin-top: 4px; }
.ev-asset-row { display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--line-2); border-radius: 10px; background: rgba(10,14,12,0.4); }
.ev-asset-thumb { width: 46px; height: 40px; object-fit: cover; border-radius: 7px; flex: none;
  display: grid; place-items: center; background: rgba(255,255,255,0.06); color: var(--ink-3); }
.ev-asset-fields { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ev-asset-fields .field-in { height: 36px; font-size: 13px; }
.ev-asset-acts { display: flex; gap: 6px; flex: none; }
/* the public toggle: off is a padlock in the same grey as its neighbours, on is a
   lit eye — the state has to be readable across a list of eight thumbnails at a
   glance, so it changes colour and ground, not just the glyph */
.ev-asset-pub.is-on { color: var(--green); background: rgba(88,193,132,0.14);
  border-color: rgba(88,193,132,0.34); }

/* gallery carousel: big image, filmstrip floating over its lower edge */
.ev-lb-card { max-width: min(1180px, 94vw); }
.ev-lb-stage { position: relative; display: grid; place-items: center; }
.ev-lb-img { max-width: 100%; max-height: 76vh; display: block; border-radius: 14px; }
.ev-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  background: rgba(8,10,9,0.6); border: 1px solid rgba(255,255,255,0.16); color: #fff;
  cursor: pointer; backdrop-filter: blur(8px); transition: background 0.16s; }
.ev-lb-arrow:hover { background: rgba(8,10,9,0.85); }
.ev-lb-prev { left: 12px; }
.ev-lb-next { right: 12px; }
/* the strip scrolls sideways, so fifty photos never grow the bar */
.ev-strip { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 7px; max-width: min(92%, 660px); overflow-x: auto; overflow-y: hidden;
  padding: 8px; border-radius: 14px; background: rgba(8,10,9,0.62);
  border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px);
  scrollbar-width: none; scroll-behavior: smooth; }
.ev-strip::-webkit-scrollbar { display: none; }
.ev-strip-thumb { flex: none; width: 74px; height: 54px; padding: 0; overflow: hidden;
  border-radius: 8px; border: 2px solid transparent; background: none; cursor: pointer;
  opacity: 0.62; transition: opacity 0.16s, border-color 0.16s; }
.ev-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-strip-thumb:hover { opacity: 0.9; }
.ev-strip-thumb.is-on { opacity: 1; border-color: #fff; }

/* event videos */
.ev-videos { display: grid; gap: 10px; }
.ev-video { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 10px; border: 1px solid var(--line-2); border-radius: 14px;
  background: rgba(10,14,12,0.45); color: var(--ink); cursor: pointer;
  transition: background 0.18s, border-color 0.18s; }
.ev-video:hover { background: rgba(16,21,18,0.72); border-color: var(--line); }
.ev-video-thumb { position: relative; flex: none; width: 132px; aspect-ratio: 16/9;
  border-radius: 9px; overflow: hidden; display: block; }
.ev-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-video-body { display: grid; gap: 4px; min-width: 0; }
.ev-video-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ev-video-blurb { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.ev-past-thumb { position: relative; width: 100%; aspect-ratio: 16/9; padding: 0; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line-2); margin-bottom: 16px; cursor: pointer;
  display: block; background: none; }
.ev-past-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* covered section — the content behind this was never sent to the browser */
.lk { position: relative; display: block; width: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 14px; background: rgba(10,14,12,0.4);
  min-height: 132px; cursor: pointer; text-align: left;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); }
.lk-static { cursor: default; }
.lk:not(.lk-static):hover { border-color: var(--line); transform: translateY(-1px); }
.lk-skel { position: absolute; inset: 0; display: block; padding: 18px; }
.lk-lines { display: grid; gap: 11px; }
.lk-lines span { height: 10px; border-radius: 4px; background: rgba(255,255,255,0.10); display: block; }
.lk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; height: 100%; }
.lk-grid span { border-radius: 10px; background: rgba(255,255,255,0.10); display: block; }
.lk-frost { position: absolute; inset: 0; display: block;
  background: rgba(12,16,13,0.55); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  transition: backdrop-filter 0.3s var(--ease), background 0.3s var(--ease); }
.lk:not(.lk-static):hover .lk-frost { background: rgba(12,16,13,0.42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lk-body { position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 7px; text-align: center; padding: 12px; }
.lk-title { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.lk-invite { font-size: 12.5px; color: var(--ink-3); opacity: 0.75; max-width: 30ch;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease); }
.lk:not(.lk-static):hover .lk-invite { opacity: 1; color: var(--ink-2); }
/* the padlock: a case with a shackle that lifts and pivots open on hover */
.lk-icon { position: relative; width: 26px; height: 30px; display: block; }
.lk-case { position: absolute; left: 0; bottom: 0; width: 26px; height: 17px;
  border-radius: 5px; background: var(--ink-2); display: block; }
.lk-shackle { position: absolute; left: 6px; bottom: 14px; width: 14px; height: 12px;
  border: 2.5px solid var(--ink-2); border-bottom: none;
  border-radius: 7px 7px 0 0; display: block; transform-origin: left bottom;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lk:not(.lk-static):hover .lk-shackle { transform: translateY(-3px) rotate(-22deg); }
/* a lock standing in a media cell next to the gallery card — it has to match the
   card's 4:3 rather than its own min-height, or the row sits crooked */
.lk-cell { aspect-ratio: 4/3; min-height: 0; }
.lk-inline { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 999px; font-size: 12.5px; color: var(--ink-3);
  background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); }
.lk-note { font-size: 12.5px; color: var(--ink-3); margin: 12px 2px 0; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .lk, .lk-frost, .lk-shackle, .lk-invite { transition: none; }
  .lk:not(.lk-static):hover .lk-shackle { transform: none; }
}
/* event picker: as wide as its longest option needs and no wider, capped so a
   future long event name truncates instead of stretching the control */
.adm-ev-field { width: fit-content; max-width: 100%; }
.adm-ev-pick { width: auto; max-width: min(100%, 30rem);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 34px; }

/* ============================================================
   WELCOME POPUP · shown once when a signup lands in review, and
   reopenable from the pending banner's "What's next?".
   ============================================================ */
.pending-whatsnext {
  margin-left: auto; flex: none;
  background: none; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 5px 13px; font: inherit; font-size: 12.5px; color: var(--ink-1);
  cursor: pointer; white-space: nowrap; transition: border-color 0.15s, background 0.15s;
}
.pending-whatsnext:hover { border-color: var(--line); background: rgba(255,255,255,0.05); }

.wel-scrim {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: rgba(6,9,8,0.82); backdrop-filter: blur(8px); animation: fade 0.18s var(--ease) both;
  overflow-y: auto;
}
.wel-card {
  position: relative; width: min(520px, 100%);
  display: flex; flex-direction: column;
  padding: 30px 32px 32px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}
.wel-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  background: none; border: 1px solid transparent; color: var(--ink-3); cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.wel-close:hover { color: var(--ink-1); border-color: var(--line-2); }

.wel-head { display: flex; align-items: flex-start; gap: 13px; }
.wel-tick {
  flex: none; width: 30px; height: 30px; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(150,224,178,0.16); color: var(--green);
}
.wel-title { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.025em; }
.wel-sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }

/* a hairline with the section name sitting in it */
.wel-rule {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 16px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 500;
}
.wel-rule::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.wel-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wel-stat { min-width: 0; }
.wel-stat-num {
  font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wel-stat-lbl { margin-top: 3px; font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }

.wel-copy { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.wel-meter-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--ink-3); margin-bottom: 7px;
}
.wel-meter-head strong { color: var(--ink-1); font-size: 14px; font-weight: 600; }
.wel-meter { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.09); overflow: hidden; }
.wel-meter span {
  display: block; height: 100%; border-radius: 999px; background: var(--green);
  transition: width 0.4s var(--ease);
}

.wel-next { margin-top: 18px; }
.wel-next-lbl { font-size: 12px; color: var(--ink-3); margin-bottom: 7px; }
.wel-next-item {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 11px; margin-bottom: 6px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid transparent;
  font: inherit; font-size: 13.5px; color: var(--ink-2); text-align: left;
}
.wel-next-link { cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.wel-next-link svg { margin-left: auto; opacity: 0.5; flex: none; }
.wel-next-link:hover { border-color: var(--line-2); color: var(--ink-1); }
.wel-next-link:hover svg { opacity: 0.9; }

.wel-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 560px) {
  .wel-card { padding: 26px 20px 24px; }
  .wel-stats { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .wel-title { font-size: 20px; }
  .pending-whatsnext { margin-left: 0; }
}

/* ============ sponsorships — admin-placed sponsor units ============
   Two shapes from one record: a logo STRIP (footer, event rail, signup)
   and a promo CARD (discover grid, events list). Both carry a
   "Sponsored" label — an impact network that blurs paid placement into
   editorial content loses the trust in its name. */

.sp-strip { display: grid; gap: 10px; justify-items: center; margin: 34px 0 4px; width: 100%; min-width: 0; }
.sp-strip-lbl {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
/* the footer strip is quieter still — it repeats on every page */
.sp-strip-compact { margin: 0; gap: 8px; justify-items: start; }
.sp-strip-compact .sp-strip-lbl { font-size: 10px; letter-spacing: 0.12em; }

.sp-logos { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; justify-content: center; }
.sp-strip-compact .sp-logos { justify-content: flex-start; }
.sp-logo {
  display: grid; place-items: center; height: 50px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(255,255,255,0.045);
  color: var(--ink-2); font: inherit; text-decoration: none;
  transition: background 0.16s, border-color 0.16s;
}
a.sp-logo, button.sp-logo { cursor: pointer; }
a.sp-logo:hover, button.sp-logo:hover { background: rgba(255,255,255,0.08); border-color: var(--line); }
.sp-logo img { max-height: 26px; max-width: 96px; object-fit: contain; display: block; }
.sp-logo-txt { font-size: 13px; font-weight: 600; white-space: nowrap; }
.sp-strip-compact .sp-logo { height: 38px; padding: 0 11px; }
.sp-strip-compact .sp-logo img { max-height: 20px; max-width: 78px; }

/* the event Partners rail reuses the strip logos inside its own panel */
.ev-aside-panel .sp-logos { justify-content: flex-start; }

/* ---- promo card ---- */
.sp-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  color: inherit; text-decoration: none; text-align: left;
  font: inherit; padding: 0; min-width: 0;
}
.sp-card.is-clickable { cursor: pointer; transition: border-color 0.16s, transform 0.16s; }
.sp-card.is-clickable:hover { border-color: var(--line); transform: translateY(-2px); }
.sp-card-img { height: 118px; overflow: hidden; background: rgba(255,255,255,0.04); }
.sp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a logo is not a photo — letterbox it instead of cropping a brand mark */
.sp-card-img-logo { display: grid; place-items: center; }
.sp-card-img-logo img { width: auto; max-width: 70%; max-height: 56px; object-fit: contain; }
.sp-card-body { padding: 14px 15px 16px; display: grid; gap: 7px; align-content: start; }
.sp-card-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-tag {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 5px;
}
.sp-card-name { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.sp-card-blurb { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sp-card-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: 13px; font-weight: 600; color: var(--ink-1); }
.sp-card.is-clickable:hover .sp-card-cta { text-decoration: underline; text-underline-offset: 3px; }

/* in the events list the card is a row, not a tile — it sits among event rows */
.actlist > .sp-card { flex-direction: row; align-items: stretch; }
.actlist > .sp-card .sp-card-img { height: auto; width: 132px; flex: none; }
.actlist > .sp-card .sp-card-body { flex: 1 1 auto; justify-content: center; }

@media (max-width: 720px) {
  .sp-strip { margin-top: 24px; }
  .sp-logo { height: 42px; padding: 0 11px; }
  .sp-logo img { max-height: 22px; max-width: 78px; }
  .actlist > .sp-card { flex-direction: column; }
  .actlist > .sp-card .sp-card-img { width: 100%; height: 118px; }
}

/* ============ admin console · sponsorships tab ============ */
.sp-slots, .sp-brands { display: grid; gap: 10px; margin-top: 18px; }
.sp-slot, .sp-brand { border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: rgba(10,14,12,0.4); overflow: hidden; }
.sp-slot.is-open, .sp-brand.is-open { border-color: var(--line); }

.sp-slot-head, .sp-brand-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; background: none; border: 0; color: var(--ink-1);
  font: inherit; text-align: left; cursor: pointer;
}
.sp-slot-head:hover, .sp-brand-head:hover { background: rgba(255,255,255,0.03); }
.sp-slot-name, .sp-brand-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; }
.sp-slot-fmt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.sp-slot-cap { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-slot-cap.is-full { color: oklch(0.82 0.13 60); font-weight: 650; }
.sp-brand-num { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-brand-member { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.sp-brand-logo { display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line-2); border-radius: 8px; background: rgba(255,255,255,0.04); }
.sp-brand-logo img { max-width: 24px; max-height: 18px; object-fit: contain; }

.sp-slot-body, .sp-brand-body { padding: 4px 15px 16px; border-top: 1px solid var(--line-2); }
.sp-slot-top { display: flex; gap: 18px; align-items: flex-start; margin: 14px 0 16px; flex-wrap: wrap; }
/* the drawing is the point of the slots view: pick a place by sight, not by name */
.sp-wire { flex: none; display: grid; gap: 6px; justify-items: center; }
.sp-wire-cap { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.sp-prev {
  display: flex; flex-direction: column; gap: 4px;
  width: 132px; height: 96px; padding: 7px;
  border: 1px solid var(--line-2); border-radius: 7px; background: rgba(0,0,0,0.3);
}
.sp-prev-row { display: flex; gap: 4px; min-height: 0; }
.sp-prev-col { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.sp-prev-bar { height: 7px; flex: none; border-radius: 2px; background: rgba(255,255,255,0.14); }
.sp-prev-block, .sp-prev-cell { border-radius: 2px; background: rgba(255,255,255,0.07); min-height: 0; }
.sp-prev-map { border-radius: 3px; min-height: 0;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.13) 0 1px, transparent 1px) 0 0/5px 5px,
              rgba(255,255,255,0.05); }
.sp-prev-card { border-radius: 3px; margin: 0 22px; background: rgba(255,255,255,0.09); min-height: 0; }
.sp-prev-line { height: 3px; flex: none; border-radius: 2px; background: rgba(255,255,255,0.07); }
.sp-prev-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 4px; flex: 1; min-height: 0; }
/* the lit block is the sponsor's spot — the one thing the drawing exists to say */
.sp-prev-hl { flex: none; min-height: 11px; border-radius: 3px;
  background: var(--green); box-shadow: 0 0 0 1px oklch(0.76 0.085 150 / 0.45), 0 0 10px -2px var(--green); }
.sp-prev-grid .sp-prev-hl { min-height: 0; }
.sp-where { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.sp-note { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; text-wrap: pretty; }
.sp-hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.sp-empty { margin: 14px 0; font-size: 13.5px; color: var(--ink-3); }

.sp-plist { display: grid; gap: 7px; }
.sp-prow, .sp-brow { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 9px;
  background: rgba(255,255,255,0.03); font-size: 12.5px; }
.sp-prow-logo { display: grid; place-items: center; width: 30px; height: 24px; flex: none; }
.sp-prow-logo img { max-width: 30px; max-height: 20px; object-fit: contain; }
.sp-prow-name, .sp-brow-slot { flex: 1 1 150px; min-width: 0; font-weight: 600; font-size: 13px; }
.sp-prow-scope { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); }
.sp-prow-aud, .sp-prow-when { color: var(--ink-3); white-space: nowrap; }
.sp-prow-nums, .sp-brow-nums { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-ctr { color: var(--ink-3); }
.sp-prow-acts, .sp-brand-acts { display: flex; gap: 5px; margin-left: auto; }
.sp-brand-acts { margin-top: 12px; }
.sp-del { color: oklch(0.75 0.14 25); }

.sp-state { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-2); white-space: nowrap; }
.sp-state-live { color: var(--green); border-color: oklch(0.6 0.09 150 / 0.5); }
.sp-state-queued { color: oklch(0.84 0.1 85); border-color: oklch(0.7 0.1 85 / 0.45); }
.sp-state-ended, .sp-state-paused { color: var(--ink-3); }

.sp-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 26px; margin-left: auto; }
.sp-spark-bar { width: 3px; border-radius: 1px; background: oklch(0.7 0.08 150 / 0.75); }

.sp-add { margin-top: 18px; }
.sp-form { margin-top: 18px; padding: 16px; border-radius: var(--r-sm); }
.sp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sp-form-acts { display: flex; gap: 9px; margin-top: 16px; }
.sp-up { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sp-up-prev { display: grid; place-items: center; width: 62px; height: 40px; flex: none;
  border: 1px solid var(--line-2); border-radius: 8px; background: rgba(255,255,255,0.04); }
.sp-up-prev img { max-width: 52px; max-height: 30px; object-fit: contain; }

/* event editor: partners placed on every event are shown, not editable here */
.ev-asset-row.is-global { opacity: 0.62; }
.ev-asset-name { font-size: 13.5px; font-weight: 600; }
.ev-partner-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ev-partner-add .field-in { flex: 1 1 160px; min-width: 0; }

/* ============ sponsor banners — the billboard ============
   One record, two sizes: `compact` in the home overlay above the stat card,
   `wide` as a full-width band. In text mode the platform draws the copy over
   the art, so a single image serves both sizes and reflows on a phone. In
   artwork mode the sponsor's creative is rendered untouched — apart from the
   Sponsored mark, which is never optional. */

/* the overlay's right column: one panel, or the button that brings it back */
.homev2-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  pointer-events: auto; min-width: 0;
}

/* The editorial pick and the billboard are PAIRED, not merged: each keeps its own
   card, glass and shadow, separated by a 5px gap so they read as one compact unit
   without either losing its shape. The statistics pill below is untouched — it
   stays the wide rounded pill it has always been, at the normal column gap. */
.home-stack {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  pointer-events: auto; max-width: 100%;
}
/* positioned: the hide button rides on the pair's corner, so it stays on the
   cards no matter where the numbers row sits (mobile floats it above them) */
.home-pair {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  width: min(320px, 100%); max-width: 100%;
}
.home-pair:empty { display: none; }

/* hide / show */
.hp-hide {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--ink-2);
  background: rgba(6,9,8,0.55); border: 1px solid var(--line);
  transition: color 0.15s, background 0.15s;
}
.hp-hide:hover { color: var(--ink); background: rgba(6,9,8,0.8); }
.hp-show {
  pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 12.5px; color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: var(--shadow-card);
}
.hp-show:hover { color: var(--ink); border-color: var(--ink-3); }

/* content of the week — its own card, matching the sponsor's chrome so the pair
   reads as two of the same thing rather than a card and a fragment */
.hp-feat {
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; padding: 0; cursor: pointer; text-align: left;
  color: inherit; font: inherit;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: rgba(10,14,12,0.62);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--shadow-card);
  transition: border-color 0.16s, transform 0.16s;
}
.hp-feat:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.hp-feat-art { display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.hp-feat-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-feat-body { display: grid; gap: 4px; padding: 14px 18px 16px; }
.hp-feat-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 600; color: var(--green);
}
.hp-feat-title {
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  line-height: 1.3; text-wrap: pretty;
}
.hp-feat-cta { font-size: 12.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }

/* console editor — the controls span the card so long names stay readable */
.feat-field { width: 100%; }
.feat-field.field-in { width: 100%; max-width: 100%; }

/* console preview of the picture */
.feat-preview {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden;
  background: var(--glass-2); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.feat-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-preview-empty { color: var(--ink-4); font-size: 13px; }

.sp-banner {
  position: relative; display: flex; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(10,14,12,0.62);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  color: inherit; text-decoration: none; text-align: left; font: inherit; padding: 0;
  box-shadow: var(--shadow-card);
}
.sp-banner.is-clickable { cursor: pointer; transition: border-color 0.16s, transform 0.16s; }
.sp-banner.is-clickable:hover { border-color: var(--ink-3); transform: translateY(-2px); }

/* the art sits behind everything, dimmed enough that white text always clears AA */
.sp-banner-bg { position: absolute; inset: 0; z-index: -1; }
.sp-banner-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-banner-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,9,8,0.92) 0%, rgba(6,9,8,0.72) 46%, rgba(6,9,8,0.34) 100%);
}
.sp-banner-body { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; min-width: 0; }
.sp-banner-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-banner-name { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.sp-banner-head { font-weight: 640; letter-spacing: -0.015em; line-height: 1.16; text-wrap: balance; }
.sp-banner-blurb { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.sp-banner-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-1);
}
.sp-banner.is-clickable:hover .sp-banner-cta { text-decoration: underline; text-underline-offset: 3px; }

/* --- compact: the home overlay, above the stat pill --- */
.sp-banner-compact { width: min(320px, 100%); padding: 15px 17px; }
.sp-banner-compact .sp-banner-head { font-size: 17px; }

/* --- wide: a full-width band --- */
.sp-banner-wide { width: 100%; margin-top: 22px; padding: 22px clamp(18px, 3vw, 34px); min-height: 132px;
  align-items: center; }
.sp-banner-wide .sp-banner-head { font-size: clamp(19px, 2.2vw, 25px); }

/* --- artwork mode: their creative, our disclosure --- */
.sp-banner.is-artwork { padding: 0; background: none; border-color: var(--line-2); }
.sp-banner.is-artwork .sp-banner-bg { position: relative; z-index: 0; inset: auto; width: 100%; }
.sp-banner.is-artwork .sp-banner-bg::after { content: none; }   /* no scrim over supplied art */
.sp-banner.is-artwork .sp-banner-bg img { height: auto; object-fit: contain; }
.sp-banner-wide.is-artwork { min-height: 0; }
.sp-banner-mark {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  padding: 3px 6px; border-radius: 5px; color: var(--ink-2);
  background: rgba(6,9,8,0.72); backdrop-filter: blur(6px);
}

@media (max-width: 720px) {
  /* the overlay stacks on mobile — the billboard goes full width under the copy */
  .homev2-right { width: 100%; align-items: stretch; margin-top: 14px; }
  .home-stack { align-items: stretch; width: 100%; }
  .home-pair { width: 100%; }
  .hp-show { align-self: flex-start; }
  .sp-banner-compact { width: 100%; }
  .sp-banner-wide { min-height: 0; padding: 18px; margin-top: 18px; }
  .sp-banner-wide .sp-banner-blurb { display: none; }   /* headline + CTA carry it at this width */
  .sp-banner-bg::after {
    background: linear-gradient(180deg, rgba(6,9,8,0.7) 0%, rgba(6,9,8,0.9) 100%);
  }
}

/* console: the billboard half of the sponsor form, folded off from the rest */
.sp-banner-fields {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2);
}

/* discover, merged list: the card says what kind of record it is, because the
   tab no longer does. An eyebrow above the name, in the flow — both top corners
   are already taken (save button left, match score right). */
.pcard-kind {
  margin-top: 14px;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3);
}
/* the eyebrow supplies the gap the name would otherwise open itself */
.pcard-kind + .pcard-name { margin-top: 3px; }

/* ============================================================
   LIVE STREAM (events · Restream embed player)
   ============================================================ */

/* One pill everywhere "live" appears — event page, list row, home strip — so it
   reads as a single idea across the platform. Red is the only place the palette
   uses it; that is deliberate, nothing else on the site competes for it. */
.ev-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: oklch(0.55 0.20 25 / 0.92); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
  white-space: nowrap; flex: none;
}
.ev-live-dot {
  width: 5px; height: 5px; border-radius: 999px; background: #fff;
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* The player takes the hero. 16:9 rather than the cover's short banner — a video
   letterboxed into a 280px strip is a thumbnail, not a broadcast. */
.ev-live-banner {
  height: auto; aspect-ratio: 16 / 9; max-height: min(70vh, 620px);
  border-radius: 22px; overflow: hidden;
  background: #05070a;
  box-shadow: 0 0 0 1px oklch(0.55 0.20 25 / 0.35), 0 22px 60px -24px rgba(0,0,0,0.9);
}
.ev-live-frame { width: 100%; height: 100%; border: 0; display: block; }
/* the pill floats over the player, clear of Restream's own controls (bottom) */
.ev-live-banner .ev-live-pill { position: absolute; top: 14px; left: 14px; z-index: 4; }
/* on a cover photo the pill marks a stream this viewer cannot watch */
.co-banner > .ev-live-pill { position: absolute; top: 14px; left: 14px; z-index: 4; }

/* Live, but not for this viewer. A slim bar, not the frosted lockedBlock: for a
   guest the description below is already one, and two padlocks stacked read as a
   wall rather than an invitation. */
.ev-live-locked {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -12px 0 26px; padding: 12px 16px; border-radius: var(--r-sm);
  background: oklch(0.55 0.20 25 / 0.08);
  border: 1px solid oklch(0.55 0.20 25 / 0.28);
}
.ev-live-locked-txt { flex: 1; min-width: 200px; font-size: 13.5px; color: var(--ink-2); text-wrap: pretty; }

/* list row: the pill takes the date block's slot — a running stream is more use
   than the date of the day it is running on */
.ev-date-live {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 86px; padding: 8px 6px; border-radius: 12px;
  background: oklch(0.55 0.20 25 / 0.10); border: 1px solid oklch(0.55 0.20 25 / 0.30);
}
.evrow.is-live { border-color: oklch(0.55 0.20 25 / 0.35); }
.evrow.is-live:hover { border-color: oklch(0.55 0.20 25 / 0.55); }

/* map: a streaming pin pulses. On a map of forty pins motion is the only channel
   that carries "this one, now" without reading every card. */
.map-anchor-btn.is-live {
  background: oklch(0.62 0.20 25) !important;
  box-shadow: 0 0 0 3px oklch(0.55 0.20 25 / 0.30), 0 0 14px oklch(0.62 0.20 25 / 0.75);
  animation: mapLivePulse 1.8s ease-in-out infinite;
}
@keyframes mapLivePulse {
  0%, 100% { box-shadow: 0 0 0 3px oklch(0.55 0.20 25 / 0.30), 0 0 14px oklch(0.62 0.20 25 / 0.7); }
  50%      { box-shadow: 0 0 0 8px oklch(0.55 0.20 25 / 0.10), 0 0 22px oklch(0.62 0.20 25 / 0.9); }
}
.map-card.is-live .map-card-s { color: oklch(0.72 0.16 25); }

/* home: the one surface a member sees without going looking. Rendered only while
   something is streaming — an empty strip 364 days a year teaches people to
   ignore it. */
.home-live { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.home-live-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 15px; border-radius: var(--r-sm); color: var(--ink);
  background: oklch(0.55 0.20 25 / 0.09);
  border: 1px solid oklch(0.55 0.20 25 / 0.30);
  transition: background 0.18s var(--ease), border-color 0.18s, transform 0.18s var(--ease);
}
.home-live-row:hover {
  background: oklch(0.55 0.20 25 / 0.15); border-color: oklch(0.55 0.20 25 / 0.5);
  transform: translateX(2px);
}
.home-live-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.home-live-city { font-size: 12.5px; color: var(--ink-3); }
.home-live-go { margin-left: auto; font-size: 13px; color: var(--ink-2); white-space: nowrap; flex: none; }

/* Nav: Media goes red while the channel is streaming.

   Restrained on purpose — the nav is on every page, so a hard red block would shout
   at someone reading something else. The dot carries the motion, the label just
   warms towards red, and the active state still wins so you can tell where you are. */
.nav-item.is-live { color: oklch(0.72 0.16 25); }
.nav-item.is-live:hover { color: oklch(0.78 0.15 25); }
.nav-item.is-live.is-active { color: oklch(0.80 0.15 25); }
.nav-live-dot {
  width: 6px; height: 6px; border-radius: 999px; flex: none;
  background: oklch(0.62 0.20 25);
  box-shadow: 0 0 0 0 oklch(0.62 0.20 25 / 0.55);
  animation: navLivePulse 1.8s ease-in-out infinite;
}
/* the ring grows outward and fades, so it reads at a glance without the element
   itself moving and dragging the eye off the page content */
@keyframes navLivePulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.62 0.20 25 / 0.55); }
  70%  { box-shadow: 0 0 0 6px oklch(0.62 0.20 25 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.62 0.20 25 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-live-dot { animation: none; }
}

/* Media page: the site-wide channel.

   The tile borrows .media-card wholesale so a live stream sits in the grid as a
   peer of the recorded videos, and only the red carries the difference — the page
   should read as one set of things to watch, one of which is happening now. */
.media-live-rail { margin-bottom: 4px; }
.media-live-card { border-color: oklch(0.55 0.20 25 / 0.45); }
.media-live-card:hover { border-color: oklch(0.55 0.20 25 / 0.75); }
.media-live-thumb {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, oklch(0.55 0.20 25 / 0.28), transparent 68%), #0a0d12;
}
.media-live-thumb .ev-live-pill { position: absolute; top: 12px; left: 12px; z-index: 2; }
/* a padlock is not an invitation to press — dim it so the tile still reads as
   "something is happening" rather than "you failed" */
.media-play-locked { background: oklch(0.55 0.20 25 / 0.55); }
.media-card:hover .media-play-locked { background: oklch(0.55 0.20 25 / 0.75); }

/* the hero: same 16:9 treatment as the event page's player, so "watching a stream"
   looks identical wherever it happens */
.media-live-stage {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  max-height: min(70vh, 620px); margin-bottom: 22px;
  border-radius: 22px; overflow: hidden; background: #05070a;
  box-shadow: 0 0 0 1px oklch(0.55 0.20 25 / 0.35), 0 22px 60px -24px rgba(0,0,0,0.9);
}
.media-live-frame { width: 100%; height: 100%; border: 0; display: block; }
.media-live-stage .ev-live-pill { position: absolute; top: 14px; left: 14px; z-index: 4; }

.media-live-locked {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 14px 16px; border-radius: var(--r-sm);
  background: oklch(0.55 0.20 25 / 0.08);
  border: 1px solid oklch(0.55 0.20 25 / 0.28);
}
.media-live-locked-txt { flex: 1; min-width: 200px; font-size: 13.5px; color: var(--ink-2); text-wrap: pretty; }

/* the stream ended while someone was watching. A line, not a vanished player:
   an element disappearing under the cursor reads as a broken page. */
.media-live-ended {
  margin-bottom: 22px; padding: 14px 16px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--ink-3);
  background: var(--bg-1); border: 1px solid var(--line);
}

/* console: the Restream panel */
.rs-panel { display: grid; gap: 12px; }
.rs-creds {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--bg-1); border: 1px solid var(--line);
}
.rs-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.rs-err { font-size: 12.5px; color: oklch(0.72 0.16 25); text-wrap: pretty; }
.rs-events { display: grid; gap: 7px; margin-top: 4px; }
.rs-event { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.rs-warn { font-size: 11.5px; color: oklch(0.78 0.13 70); }

@media (max-width: 640px) {
  .ev-live-banner { border-radius: 16px; }
  .home-live-go { display: none; }
}

/* ============================================================
   EVENT PASSES
   A programme of sessions, a guest's pass, and the console that runs them.

   Built from the tokens above. One thing is added: a gold for Inner Circle,
   so that the upgrade reads as its own tier everywhere it appears — on a
   session, on a pass, on a guest's row — and is never confused with amber,
   which in this system means "waiting on someone".
   ============================================================ */
:root {
  --ic:       oklch(0.87 0.085 85);
  --ic-soft:  oklch(0.87 0.085 85 / 0.10);
  --ic-line:  oklch(0.87 0.085 85 / 0.42);
  --bad:      oklch(0.74 0.13 25);
  --bad-soft: oklch(0.62 0.12 25 / 0.14);
  --bad-line: oklch(0.62 0.12 25 / 0.42);
}

/* ---------- kit: pills, toasts, dialogs ---------- */
.kit-pill { white-space: nowrap; }
.kit-pill svg { flex: none; }
.ip-gold { background: var(--ic-soft); color: var(--ic); border: 1px solid var(--ic-line); }

.kit-toasts {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 120;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: min(520px, calc(100vw - 24px)); pointer-events: none;
}
.kit-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  max-width: 100%; padding: 11px 14px; border-radius: 14px;
  background: rgba(14,18,16,0.96); border: 1px solid var(--line);
  box-shadow: var(--shadow-pop); font-size: 14px; line-height: 1.4;
  animation: kit-rise 0.22s var(--ease) both;
}
.kit-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s; }
.kit-toast-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; flex: none;
  background: oklch(0.78 0.085 150 / 0.16); color: var(--green); }
.kit-toast-bad { border-color: var(--bad-line); }
.kit-toast-bad .kit-toast-ico { background: var(--bad-soft); color: var(--bad); }
.kit-toast-msg { flex: 1; min-width: 0; }
.kit-toast-act { flex: none; height: 32px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.1); border: 1px solid var(--line); color: var(--ink); }
.kit-toast-act:hover { background: rgba(255,255,255,0.16); }
.kit-toast-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px;
  background: transparent; border: 0; color: var(--ink-2); }
.kit-toast-x:hover { color: var(--ink); background: rgba(255,255,255,0.08); }
@keyframes kit-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kit-ov {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center;
  padding: 20px 16px; overflow-y: auto;
  background: rgba(4,6,5,0.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade 0.16s var(--ease) both;
}
.kit-dialog {
  width: min(460px, 100%); padding: 24px; border-radius: var(--r-lg); outline: none;
  background: rgba(16,21,18,0.94); box-shadow: var(--shadow-pop);
  animation: kit-rise 0.22s var(--ease) both;
}
.kit-dialog.is-wide { width: min(760px, 100%); }
.kit-dialog-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.kit-dialog-body { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.kit-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.kit-btn-danger { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.kit-btn-danger:hover { background: oklch(0.62 0.12 25 / 0.22); }
.kit-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.kit-sheet-sub { margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
/* Scoped to the event-pass screens. Unscoped, this dimmed every disabled button
   in the app, and several of those are statuses, not unavailable actions:
   "You're going" on an event page is a disabled button that must read as done. */
:where(.kit-ov, .pp, [class^="pa-"], [class*=" pa-"], [class^="ps-"], [class*=" ps-"]) .btn:disabled {
  opacity: 0.5; cursor: default;
}
@media (max-width: 560px) {
  .kit-ov { place-items: end center; padding: 0; }
  .kit-dialog, .kit-dialog.is-wide { width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; overflow-y: auto; }
  .kit-dialog-foot .btn { flex: 1 1 140px; height: 46px; }
}

/* ---------- shared words ---------- */
.ps-lead { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.ps-note { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.ps-note.is-bad { color: var(--bad); }
.ps-tz { margin: 14px 2px 0; font-size: 12px; color: var(--ink-3); }

/* ---------- the programme ---------- */
.ps-filter { max-width: 420px; margin-bottom: 18px; }
.ps-filter .seg-btn { height: 38px; font-size: 13px; }
.ps-days { display: grid; gap: 26px; }
.ps-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 2px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--green);
}
.ps-day-n { font-weight: 500; letter-spacing: 0.04em; color: var(--ink-3); }
.ps-day-rows { display: grid; gap: 8px; }

.ps-s {
  border-radius: var(--r-sm); background: rgba(10,14,12,0.5); border: 1px solid var(--line-2);
  transition: background 0.18s var(--ease), border-color 0.18s;
}
.ps-s:hover, .ps-s.is-open { background: rgba(16,21,18,0.66); border-color: var(--line); }
.ps-s.is-mine { border-color: oklch(0.76 0.085 150 / 0.38); background: oklch(0.76 0.085 150 / 0.055); }
.ps-s.is-declined .ps-s-title { color: var(--ink-2); }
.ps-s.is-started { opacity: 0.62; }
.ps-s-head {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  width: 100%; min-height: 62px; padding: 12px 14px; text-align: left;
  background: transparent; border: 0; color: var(--ink); border-radius: inherit;
}
.ps-s-time { font-size: 13.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-s-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ps-s-title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.ps-s-meta { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.ps-s-meta .kit-pill { height: 22px; padding: 0 9px; font-size: 11.5px; }
.ps-s-loc { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ps-s-loc svg { flex: none; }
.ps-cap { color: var(--ink-2); font-weight: 500; }
.ps-cap.is-full { color: var(--bad); }
.ps-s-side { display: flex; align-items: center; gap: 10px; }
.ps-s-chev { display: grid; place-items: center; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.ps-s.is-open .ps-s-chev { transform: rotate(90deg); }
.ps-s-detail { padding: 0 14px 14px 124px; }
.ps-s-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.ps-s-desc.is-empty { color: var(--ink-3); }
.ps-s-actions { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 12px; }
.ps-s-why { font-size: 12.5px; color: var(--ink-3); }

.ps-faces { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 99px;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.ps-faces:hover { background: var(--glass-2); color: var(--ink); }
.ps-faces-stack { display: inline-flex; }
.ps-faces-stack .avatar { margin-left: -7px; box-shadow: 0 0 0 2px #121713; }
.ps-faces-stack .avatar:first-child { margin-left: 0; }

.ps-people { display: grid; gap: 6px; max-height: min(60vh, 520px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.ps-people-loading { padding: 22px; text-align: center; color: var(--ink-3); font-size: 14px; }
.ps-person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; min-height: 56px;
  border-radius: 12px; background: transparent; border: 1px solid transparent; color: var(--ink); text-align: left; }
.ps-person:hover { background: rgba(255,255,255,0.05); border-color: var(--line-2); }
.ps-person-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-person-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.ps-person-sub { font-size: 12.5px; color: var(--ink-3); }

/* ---------- the one-line answer above the programme (phones only) ---------- */
.ps-bar { display: none; align-items: center; gap: 12px; width: 100%; margin-top: 26px; padding: 14px 16px; min-height: 60px;
  border-radius: var(--r-sm); text-align: left; color: var(--ink);
  background: oklch(0.76 0.085 150 / 0.09); border: 1px solid oklch(0.76 0.085 150 / 0.36); }
.ps-bar.is-static { background: oklch(0.82 0.07 80 / 0.10); border-color: oklch(0.82 0.07 80 / 0.34); }
.ps-bar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-bar-t { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ps-bar-s { font-size: 12.5px; color: var(--ink-2); }
.ps-bar-go { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 13.5px; font-weight: 600; color: var(--green); }
.ps-bar + .sec-head { margin-top: 26px !important; }
@media (max-width: 1000px) { .ps-bar { display: flex; } }

/* ---------- the panel on the event page ---------- */
.ps-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ps-mini { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 14px;
  border-radius: var(--r-sm); background: rgba(255,255,255,0.045); border: 1px solid var(--line); color: var(--ink); text-align: left; }
.ps-mini:hover { background: rgba(255,255,255,0.075); }
.ps-mini-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ps-mini-n { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ps-mini-code { font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.06em; }
.ps-mini-go { display: grid; place-items: center; color: var(--ink-3); flex: none; }

/* ---------- Inner Circle ---------- */
.ps-ic { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pp-ic .ps-ic { margin-top: 0; padding-top: 0; border-top: 0; }
.ps-ic-head { display: flex; align-items: flex-start; gap: 12px; }
.ps-ic-star { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: var(--ic-soft); border: 1px solid var(--ic-line); color: var(--ic); }
.ps-ic-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ps-ic-sub { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.ps-ic-have { display: grid; gap: 6px; margin-top: 14px; }
.ps-ic-have-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ic); font-weight: 500; }
.ps-ic-gift { font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.ps-ic-list { display: grid; gap: 0; margin-top: 12px; }
.ps-ic-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); }
.ps-ic-line:last-child { border-bottom: 0; }
.ps-ic-opts { display: grid; gap: 9px; margin-top: 14px; }
.ps-ic-opt.on { border-color: var(--ic-line); background: var(--ic-soft); }
.ps-ic-opt:disabled { opacity: 0.6; cursor: default; }
.ps-ic-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.ps-ic-now { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ps-ic-opt.on .ps-ic-now { color: var(--ic); }
.ps-ic-was { font-size: 12px; color: var(--ink-3); text-decoration: line-through; }
.ps-ic-days { display: grid; gap: 8px; margin-top: 12px; }
.ps-ic-days:empty { display: none; }
.ps-ic-daychips { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: 6px 13px;
  border-radius: 12px; background: var(--glass); border: 1px solid var(--line); color: var(--ink-2);
  font-size: 13.5px; font-weight: 600; text-align: left; transition: all 0.16s var(--ease); }
.ps-chip:hover { color: var(--ink); background: var(--glass-2); }
.ps-chip.on { border-color: var(--ic-line); background: var(--ic-soft); color: var(--ic); }
.ps-chip-n { font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.ps-ic-go { width: 100%; margin-top: 14px; }

/* ---------- the pass page ---------- */
.pp-body { margin-top: 6px; }
.pp-cols { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 14px 32px; align-items: start;
  grid-template-areas: "card prog" "aside prog"; grid-template-rows: auto 1fr; }
.pp-cardcol { grid-area: card; display: grid; gap: 12px; }
.pp-aside { grid-area: aside; display: grid; gap: 14px; }
.pp-right { grid-area: prog; min-width: 0; }
/* giving up a session is possible, not prominent: one quiet line per row, so a
   programme of ten sessions does not read as ten buttons */
.pp-decline { align-self: center; padding: 6px 4px; background: transparent; border: 0; border-radius: 6px;
  font-size: 13px; color: var(--ink-3); white-space: nowrap; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; transition: color 0.16s, text-decoration-color 0.16s; }
.pp-decline:hover { color: var(--ink); text-decoration-color: currentColor; }
.pp-decline[aria-busy="true"] { opacity: 0.7; }
.pp-skel { max-width: 720px; display: grid; gap: 10px; margin-top: 24px; }

.pc-wrap { container-type: inline-size; }
.pc {
  position: relative; aspect-ratio: 85.6 / 54; width: 100%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6cqw 6cqw 5.4cqw; border-radius: 4.6cqw; color: var(--ink);
  background:
    radial-gradient(120% 90% at 100% 0%, oklch(0.58 0.09 152 / 0.30), transparent 62%),
    linear-gradient(150deg, #1c2a22 0%, #0f1612 58%, #0b100d 100%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 34px 70px -34px rgba(0,0,0,0.9);
}
.pc.is-inner {
  background:
    radial-gradient(120% 90% at 100% 0%, oklch(0.87 0.085 85 / 0.26), transparent 60%),
    linear-gradient(150deg, #262419 0%, #13130e 58%, #0c0c09 100%);
  border-color: var(--ic-line);
}
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.pc-logo { height: 5.4cqw; width: auto; display: block; opacity: 0.94; }
.pc-kind { font-size: 2.9cqw; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.pc-top .kit-pill { height: 6.4cqw; padding: 0 2.6cqw; font-size: 2.9cqw; gap: 1.2cqw; }
.pc-top .kit-pill svg { width: 3cqw; height: 3cqw; }
.pc-event { font-size: 6.1cqw; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.pc-when { margin-top: 1.4cqw; font-size: 3.3cqw; color: var(--ink-2); }
.pc-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
.pc-who { display: flex; align-items: center; gap: 2.8cqw; min-width: 0; }
.pc-who .avatar { width: 11cqw !important; height: 11cqw !important; font-size: 3.8cqw !important; flex: none; }
.pc-name { font-size: 4.2cqw; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-role { font-size: 3cqw; color: var(--ink-2); margin-top: 0.5cqw; }
.pc-codebox { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; flex: none; }
.pc-qr { width: 21cqw; height: 21cqw; padding: 1.5cqw; border-radius: 2.4cqw; background: #fff; }
.pc-qr svg { display: block; width: 100%; height: 100%; }
.pc-code { font-size: 3.2cqw; letter-spacing: 0.14em; color: var(--ink); font-weight: 600; }
.pp-copy { justify-self: start; }

.pp-card { padding: 18px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); }
.pp-card.pp-ic { margin-top: 26px; border-color: var(--ic-line); background: linear-gradient(180deg, var(--ic-soft), rgba(10,14,12,0.5)); }
.pp-h { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pp-wa { width: 100%; height: 46px; }
.pp-contact { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.pp-contact-v { font-size: 14.5px; line-height: 1.45; color: var(--ink); user-select: all; }
.pp-contact.is-inner { padding-top: 14px; border-top: 1px solid var(--line-2); }
.pp-contact.is-inner .label { color: var(--ic); }
.pp-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.pp-switch { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; margin: 2px 0 0; border-radius: 99px;
  background: rgba(255,255,255,0.14); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background 0.18s var(--ease); }
.pp-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 99px;
  background: #fff; transition: transform 0.18s var(--ease); }
.pp-switch:checked { background: var(--green-mid); border-color: transparent; }
.pp-switch:checked::after { transform: translateX(18px); }
.pp-toggle-t { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.pp-toggle-s { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.pp-pay { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.pp-pay:first-of-type { border-top: 0; padding-top: 0; }
.pp-pay-l { font-size: 14px; font-weight: 600; }
.pp-pay-a { font-size: 14.5px; font-weight: 600; }
.pp-pay-r { margin-top: 2px; font-size: 12px; color: var(--ink-3); }

.pp-day { margin-bottom: 26px; }
.pp-rows { display: grid; gap: 8px; }
.pp-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 14px; border-radius: var(--r-sm); background: rgba(10,14,12,0.5); border: 1px solid var(--line-2); }
.pp-row.is-started { opacity: 0.62; }
.pp-row.is-declined { background: transparent; border-style: dashed; }
.pp-row.is-declined .pp-title { color: var(--ink-2); font-weight: 500; }
.pp-time { font-size: 13.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; padding-top: 2px; white-space: nowrap; }
.pp-main { min-width: 0; }
.pp-title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.pp-meta { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.pp-meta .kit-pill { height: 22px; padding: 0 9px; font-size: 11.5px; }
.pp-desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }

.pp-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 20px; border-radius: var(--r-sm);
  background: oklch(0.55 0.13 150 / 0.14); border: 1px solid oklch(0.66 0.13 150 / 0.45); }
.pp-banner.is-wait { background: oklch(0.82 0.07 80 / 0.12); border-color: oklch(0.82 0.07 80 / 0.4); }
.pp-banner.is-bad { background: var(--bad-soft); border-color: var(--bad-line); }
.pp-banner-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; flex: none; background: rgba(255,255,255,0.1); }
.pp-banner-t { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pp-banner-s { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pp-empty { max-width: 560px; margin: 40px auto 0; padding: 30px; border-radius: var(--r-lg); }
.pp-empty-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.pl { margin-bottom: 26px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pl-card { display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 84px; border-radius: var(--r-md); text-align: left; color: var(--ink);
  background: linear-gradient(150deg, rgba(34,48,40,0.7), rgba(12,18,15,0.7)); border: 1px solid var(--line); }
.pl-card:hover { border-color: rgba(255,255,255,0.24); }
.pl-card.is-past { opacity: 0.6; }
.pl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pl-event { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pl-meta { font-size: 12.5px; color: var(--ink-3); }

.claim-pass { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 15px; border-radius: 16px;
  background: oklch(0.76 0.085 150 / 0.08); border: 1px solid oklch(0.76 0.085 150 / 0.32); color: var(--green); }
.claim-pass svg { flex: none; }
.claim-pass-t { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.claim-pass-s { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }

@media (max-width: 980px) {
  /* one column, and the programme comes straight after the card: on a phone
     this page is opened to answer "where do I have to be" */
  .pp-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; grid-template-areas: "card" "prog" "aside"; grid-template-rows: none; }
  .pp-cardcol { max-width: 460px; }
}
@media (max-width: 640px) {
  .ps-s-head { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px; }
  .ps-s-time { grid-column: 1 / -1; font-size: 12.5px; color: var(--green); }
  .ps-s-detail { padding: 0 12px 12px; }
  .ps-s-side .kit-pill { height: 24px; padding: 0 9px; font-size: 11.5px; }
  .pp-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pp-time { color: var(--green); font-size: 12.5px; padding-top: 0; }
  .pp-decline { justify-self: start; margin-top: 2px; padding-left: 0; }
  .pp-cardcol { max-width: none; }
  /* the row's green edge already says "yours": keep the tick, drop the words */
  .ps-s-side .kit-pill.is-short-sm { width: 26px; height: 26px; padding: 0; justify-content: center; }
  .ps-s-side .kit-pill.is-short-sm .kit-pill-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pp-empty { padding: 22px; margin-top: 20px; }
}
/* touch: every control here is at least 44px tall, whatever its visual size */
@media (hover: none) and (pointer: coarse) {
  .ps-filter .seg-btn, .ps-faces, .kit-toast-act, .pp-copy, .pp-decline, .ps-bar,
  .ps-s-actions .btn, .pp-row .btn, .pp-empty-foot .btn { min-height: 44px; }
  /* below 16px iOS zooms the page on focus — scoped to the screens added here */
  .pa .field-in, .kit-dialog .field-in { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-toast, .kit-dialog, .kit-ov { animation: none; }
  .ps-s-chev, .pp-switch, .pp-switch::after { transition: none; }
}

/* ---------- console: event passes ---------- */
.pa-nav { display: flex; align-items: flex-end; gap: 14px 22px; flex-wrap: wrap; margin-bottom: 24px; }
.pa-evfield { flex: 0 1 440px; min-width: 240px; }
.pa-evpick { width: 100%; }
.pa-tabs { display: flex; gap: 4px; flex: 1 1 420px; min-width: 0; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.pa-tabs::-webkit-scrollbar { display: none; }
.pa-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px;
  background: transparent; border: 1px solid transparent; color: var(--ink-2); font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  transition: background 0.16s var(--ease), color 0.16s; }
.pa-tab:hover:not(:disabled) { color: var(--ink); background: var(--glass); }
.pa-tab.on { color: var(--ink); background: var(--glass-hi); border-color: var(--line); }
.pa-tab:disabled { opacity: 0.38; cursor: default; }
.pa-tab .adm-count { position: static; }
.pa-head { margin: 30px 0 14px; align-items: center; }
.pa-content > .pa-head:first-child, .pa-content > div > .pa-head:first-child { margin-top: 0; }
.pa-empty { display: flex; flex-direction: column; align-items: center; padding: 30px 22px; line-height: 1.5; text-wrap: pretty; }
.pa-skel { display: grid; gap: 10px; }
.pa-muted { color: var(--ink-3); }
.pa-err { margin: 12px 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 500;
  background: var(--bad-soft); border: 1px solid var(--bad-line); color: oklch(0.88 0.08 25); }
.pa-off { padding: 28px; max-width: 640px; }

.pa-ready { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pa-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pa-tiles.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-tile { display: flex; flex-direction: column; gap: 3px; padding: 18px; min-width: 0; text-align: left; color: var(--ink);
  border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line-2); }
.pa-tile.is-link:hover { border-color: var(--line); background: var(--glass-2); }
.pa-tile-n { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pa-tile-l { font-size: 13.5px; color: var(--ink-2); }
.pa-tile-s { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.pa-callout { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  margin: 14px 0; padding: 12px 16px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  background: oklch(0.82 0.07 80 / 0.09); border: 1px solid oklch(0.82 0.07 80 / 0.3); }
.pa-callout > span { flex: 1 1 320px; min-width: 0; text-wrap: pretty; }

.pa-fill { display: grid; gap: 20px; }
.pa-fill-day { display: grid; gap: 6px; }
.pa-fill-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 180px; gap: 14px; align-items: center; padding: 9px 14px;
  border-radius: 12px; background: rgba(10,14,12,0.45); border: 1px solid var(--line-2); font-size: 14px; }
.pa-fill-t { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-width: 0; font-weight: 500; }
.pa-fill-t .kit-pill { height: 22px; padding: 0 9px; font-size: 11.5px; }
.pa-fill-time { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 400; }
.pa-fill-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
.pa-over { color: var(--bad); font-weight: 600; }
.pa-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.pa-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green-mid); }
/* a session with no limit has nothing to be a fraction of: no track at all,
   rather than an empty one that reads as "nobody is coming" */
.pa-bar:empty { visibility: hidden; }
.pa-fill-row.is-over .pa-bar i { background: var(--bad); }

.pa-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pa-toolbar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 320px; justify-content: flex-end; }
.pa-search { height: 38px; flex: 1 1 220px; max-width: 320px; font-size: 14px; }
.pa-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pa-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 99px;
  background: var(--glass); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.pa-chip:hover { color: var(--ink); border-color: var(--line); }
.pa-chip.on { background: var(--glass-hi); border-color: var(--line); color: var(--ink); }
.pa-chip-n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.pa-chip.on .pa-chip-n { color: var(--ink-2); }

.pa-rows { display: grid; gap: 8px; }
.pa-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; min-height: 64px; text-align: left; color: var(--ink);
  border-radius: var(--r-sm); background: rgba(10,14,12,0.5); border: 1px solid var(--line-2); transition: background 0.16s var(--ease), border-color 0.16s; }
button.pa-row:hover, .pa-row:has(> button.pa-row-main:hover) { background: rgba(16,21,18,0.68); border-color: var(--line); }
.pa-rowcheck { flex: none; width: 18px; height: 18px; accent-color: var(--green); }
.pa-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; background: transparent; border: 0; padding: 0; color: inherit; text-align: left; }
.pa-row-t { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pa-row-role { font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.02em; }
.pa-row-s { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.pa-row-err { font-size: 12.5px; color: var(--bad); }
.pa-row-pills { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.pa-row-pills:empty { display: none; }
.pa-row-pills .kit-pill { height: 22px; padding: 0 9px; font-size: 11.5px; }
.pa-row-n { font-size: 12px; color: var(--ink-3); }
.pa-row-acts { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.pa-selall { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px 14px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.pa-selall input { width: 18px; height: 18px; accent-color: var(--green); }
.pa-more { width: 34px; height: 34px; }
.pa-dots { font-size: 13px; letter-spacing: 1px; line-height: 1; }
.pa-linkbtn { background: transparent; border: 0; padding: 0; color: var(--ink); font: inherit; font-weight: 600; text-align: left;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.pa-linkbtn:hover { text-decoration-color: currentColor; }

.pa-bulk { position: sticky; bottom: 14px; z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 12px 10px 18px; border-radius: 99px; background: rgba(14,18,16,0.96); border: 1px solid var(--line);
  box-shadow: var(--shadow-pop); }
.pa-bulk[hidden] { display: none; }
.pa-bulk-n { flex: 1; min-width: 90px; font-size: 14px; font-weight: 600; }

.pa-guest { border-radius: var(--r-sm); }
.pa-guest.is-open { background: rgba(10,14,12,0.35); border: 1px solid var(--line-2); }
.pa-guest.is-open > .pa-row { border-color: transparent; background: transparent; }
.pa-guest.is-off .pa-row-t { color: var(--ink-2); }
.pa-seats { display: grid; gap: 14px; padding: 4px 14px 16px 46px; }
.pa-seats-day { display: grid; gap: 7px; }
.pa-seats-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-seat { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 46px; max-width: 260px; padding: 6px 12px;
  border-radius: 12px; text-align: left; background: transparent; border: 1px dashed var(--line); color: var(--ink-3); transition: all 0.16s var(--ease); }
.pa-seat:hover:not(:disabled) { border-color: rgba(255,255,255,0.3); color: var(--ink); }
.pa-seat:disabled { opacity: 0.5; cursor: default; }
.pa-seat-t { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pa-seat-s { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pa-seat.is-active { border-style: solid; border-color: oklch(0.76 0.085 150 / 0.5); background: oklch(0.76 0.085 150 / 0.10); color: var(--ink); }
.pa-seat.is-active.is-inner { border-color: var(--ic-line); background: var(--ic-soft); }
.pa-seat.is-active .pa-seat-s { color: var(--ink-2); }
.pa-seat.is-withdrawn .pa-seat-t { text-decoration: line-through; }
.pa-seat.is-declined { border-style: dotted; }
.pa-earlier { padding: 18px; margin-bottom: 16px; display: grid; gap: 8px; }

.pa-import { padding: 20px; margin-bottom: 18px; }
.pa-import-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pa-import-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pa-wizard { display: flex; gap: 6px 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--ink-3); }
.pa-wizard li { display: inline-flex; align-items: center; gap: 8px; }
.pa-wizard-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--glass); border: 1px solid var(--line); }
.pa-wizard li.is-now { color: var(--ink); font-weight: 600; }
.pa-wizard li.is-now .pa-wizard-n { background: #fff; color: #0a0c0b; border-color: #fff; }
.pa-wizard li.is-done { color: var(--green); }
.pa-wizard li.is-done .pa-wizard-n { background: oklch(0.76 0.085 150 / 0.16); border-color: oklch(0.76 0.085 150 / 0.4); color: var(--green); }
.pa-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; text-align: center; cursor: pointer;
  border-radius: var(--r-md); border: 1.5px dashed var(--line); background: rgba(10,14,12,0.35); color: var(--ink-2); transition: all 0.16s var(--ease); }
.pa-drop:hover, .pa-drop.is-over, .pa-drop:focus-within { border-color: var(--green); color: var(--ink); background: oklch(0.76 0.085 150 / 0.06); }
.pa-drop.is-busy { pointer-events: none; opacity: 0.7; }
.pa-drop-t { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.pa-drop-s { font-size: 13px; color: var(--ink-3); max-width: 46ch; text-wrap: pretty; }
.pa-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pa-defaults { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.pa-defaults-t { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.pa-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.pa-check input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }

.pa-tablewrap { overflow-x: auto; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: rgba(10,14,12,0.4); }
.pa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pa-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.pa-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.pa-table tr:last-child td { border-bottom: 0; }
.pa-table tr.is-off td { color: var(--ink-3); }
.pa-map-h { font-weight: 600; }
.pa-map-s { color: var(--ink-3); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-map-sel { height: 38px; min-width: 190px; font-size: 14px; }

.pa-pick { display: grid; gap: 14px; margin-top: 8px; max-height: min(46vh, 380px); overflow-y: auto; padding-right: 4px; }
.pa-pick-day { display: grid; gap: 6px; }
.pa-pick-rows { display: grid; gap: 4px; }
.pa-pick-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.pa-pick-row:hover { background: rgba(255,255,255,0.045); }
.pa-pick-row input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.pa-pick-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pa-pick-t { font-size: 14px; font-weight: 500; }
.pa-pick-s { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pa-pick-none { color: var(--ink-3); font-size: 13.5px; }

.pa-answers { margin-top: 16px; }
.pa-answers summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); min-height: 32px; }
.pa-answers dl { margin: 10px 0 0; display: grid; gap: 10px; }
.pa-answers dt { font-size: 12px; color: var(--ink-3); }
.pa-answers dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.pa-fails { display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.pa-fail { padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); border: 1px solid var(--bad-line); }
.pa-fail-w { font-size: 14px; font-weight: 600; }
.pa-fail-y { margin-top: 2px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.pa-menu { display: grid; gap: 4px; }
.pa-menu-item { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 12px; text-align: left;
  background: transparent; border: 1px solid transparent; color: var(--ink); font-size: 14.5px; }
.pa-menu-item:hover { background: rgba(255,255,255,0.06); border-color: var(--line-2); }
.pa-menu-item.is-danger { color: var(--bad); }

.pa-sess { display: grid; gap: 22px; }
.pa-sess-row { cursor: pointer; }
.pa-sess-time { flex: none; width: 104px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pa-sess-n { flex: none; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pa-price { padding: 18px; }
.pa-price-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 15px; font-weight: 600; }
.pa-price-f { display: flex; justify-content: flex-end; margin-top: 14px; }
.pa-convert { padding: 18px; margin-top: 14px; display: grid; gap: 8px; }

.pa-mail { width: 100%; height: min(62vh, 640px); border: 1px solid var(--line-2); border-radius: 14px; background: #0d0f0c; }
.pa-toggles { display: grid; gap: 14px; }
.pa-toggle { padding: 14px 16px; border-radius: var(--r-sm); background: rgba(10,14,12,0.45); border: 1px solid var(--line-2); }
.pa-savebar { display: flex; justify-content: flex-end; margin-top: 20px; }
.pa-door-row { display: flex; align-items: flex-end; gap: 10px; max-width: 420px; }
.pa-door-row .field { flex: 1; }
.pa-door-row .btn { height: 46px; }
.pa-door-out { margin-top: 12px; max-width: 520px; }
.pa-door { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-2);
  background: oklch(0.55 0.13 150 / 0.14); border: 1px solid oklch(0.66 0.13 150 / 0.45); }
.pa-door strong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; color: var(--ink); }
.pa-door ul { margin: 4px 0 0; padding-left: 18px; font-variant-numeric: tabular-nums; }
.pa-door.is-bad { background: var(--bad-soft); border-color: var(--bad-line); }
.pa-exports { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1080px) {
  .pa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-fill-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pa-fill-row .pa-bar { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .pa-nav { margin-bottom: 18px; }
  .pa-evfield { flex-basis: 100%; }
  .pa-prices { grid-template-columns: minmax(0, 1fr); }
  .pa-toolbar-r { justify-content: flex-start; }
  .pa-search { max-width: none; flex-basis: 100%; }
  .pa-row { flex-wrap: wrap; }
  .pa-row-main { flex-basis: calc(100% - 40px); }
  .pa-row-acts { flex-basis: 100%; justify-content: flex-start; padding-left: 32px; }
  .pa-guest .pa-row-acts, .pa-earlier .pa-row-acts, .pa-convert .pa-row-acts { padding-left: 32px; }
  .pa-earlier .pa-row-acts, .pa-convert .pa-row-acts { padding-left: 0; }
  .pa-seats { padding-left: 14px; }
  .pa-sess-time { width: auto; flex-basis: 100%; color: var(--green); font-size: 12.5px; }
  .pa-bulk { border-radius: var(--r-md); padding: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .pa-bulk-n { flex-basis: 100%; }
  /* a table becomes a list of cards: each cell says what it is */
  .pa-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pa-stack, .pa-stack tbody, .pa-stack tr, .pa-stack td { display: block; width: 100%; }
  .pa-stack tr { padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
  .pa-stack tr:last-child { border-bottom: 0; }
  .pa-stack td { padding: 4px 0; border: 0; }
  .pa-stack td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
  .pa-map-sel { width: 100%; }
}
@media (max-width: 480px) { .pa-tiles, .pa-tiles.is-three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  /* The console's own tab bar scrolls sideways on a phone, but its three groups
     were still allowed to shrink — so each was squeezed narrower than the tabs
     inside it, and the tabs of one group were drawn over the next ("Approvals
     E vents Re..."). Found while adding a tab; it was already so with thirteen.
     A group in a scrolling row keeps its own width. */
  .admin-tabs .adm-block { flex: none; }
}
@media (hover: none) and (pointer: coarse) {
  .pa-tab, .pa-chip, .pa-row .btn, .pa-bulk .btn, .pa-toolbar .btn, .pa-exports .btn, .pa-more { min-height: 44px; }
  .pa-more { min-width: 44px; }
  .pa-rowcheck, .pa-selall input, .pa-check input, .pa-pick-row input { width: 22px; height: 22px; }
}