/* ============================================================
   Impact — Design system
   Visual language: a real social platform for real people.
   Warm neutral surfaces · ink text · green used ONLY for
   action/progress/impact · editorial serif display · flat.

   No neon glows, no glassmorphism, no decorative gradients.
   The content (photos, videos, real progress) is the star.
   ============================================================ */

:root {
  /* Tell the browser which theme this document actually renders in.
     Without it the UA assumed a light page, so every native control — and the
     `buttontext` system colour that any <button> WITHOUT an explicit `color`
     falls back to — was painted black. On the dark theme that made bare
     buttons (e.g. .onb-choice) unreadable. Component styles that set `color`
     were fine, which is why only a handful of buttons ever looked broken. */
  color-scheme: light;

  /* Brand green — the accent. Actions, progress, active states.
     Matched to the public website's green (--iu-green) so the marketing
     site and the app read as one product. */
  /* Keyboard focus ring — the website's cyan, so tabbing looks identical
     on both surfaces. */
  --focus-ring: #4fa7c7;

  --brand: #2d806c;
  --brand-hover: #216457;
  --accent: #2d806c;
  --accent-strong: #1b5748;
  --tint: #ddf4e9;
  --tint-strong: #bfe6d4;
  --on-solid: #ffffff;

  /* Compat aliases (used by inline styles / legacy classes) */
  --evergreen-700: #2d806c;
  --evergreen-800: #216457;
  --evergreen-600: #3fa486;
  --evergreen-500: #3fa486;
  --evergreen-100: #ddf4e9;
  --evergreen-50: #f0fbf5;

  /* Neutrals — cool green-tinted greys, the website's own greys
     (--iu-ink / --iu-copy / --iu-muted / --iu-border). */
  --ink-950: #14201e;
  --ink-700: #2c3a37;
  --ink-600: #61716d;
  --ink-500: #7c8b87;
  --ink-400: #a3b0ac;
  --ink-200: #dfe6e3;
  --ink-100: #eef2f0;

  --canvas-0: #ffffff;
  --canvas-50: #f6f9f7;
  --canvas-100: #eef3f0;

  --sun-700: #96601c;
  --sun-100: #fff0d5;
  --sky-700: #216a8a;
  --sky-100: #dff3fa;
  --coral-700: #9d4744;
  --coral-100: #f7e1de;
  --danger-700: #b3261e;
  --danger-100: #f9e0de;

  /* Semantic surfaces */
  --bg: var(--canvas-50);
  --surface: var(--canvas-0);
  --surface-1: var(--canvas-0);
  --surface-2: var(--canvas-100);
  --surface-50: var(--canvas-100);
  --border: var(--ink-200);
  --hairline: var(--ink-200);
  --border-strong: var(--ink-400);
  --text: var(--ink-950);
  --text-1: var(--ink-950);
  --text-2: var(--ink-600);
  --text-3: var(--ink-500);

  /* Account-menu foreground. Every enabled row (and its icon) uses this one
     token, so the menu cannot drift per item. On the light surface a mint
     green would be unreadable, so it resolves to the deep brand green here and
     to the light mint (#7bd3ad) in the dark theme — ~9.7:1 on that surface. */
  --menu-fg: #1b5748;

  /* Flat, quiet shadows — the website's shadow family */
  --shadow-flat: 0 1px 2px rgba(20, 32, 30, 0.04);
  --shadow-soft: 0 2px 7px rgba(20, 32, 30, 0.05);
  --shadow-raised: 0 12px 32px rgba(20, 32, 30, 0.14);
  --shadow-card: 0 2px 7px rgba(20, 32, 30, 0.03);

  --r-card: 17px;
  /* Pricing / feature cards sit a touch softer than a standard card. */
  --r-card-lg: 20px;
  --r-control: 12px;
  --r-md: 12px;
  --r-sm: 10px;
  --r-pill: 999px;
  /* Legacy aliases. ~40 rules still say `border-radius: var(--radius)`; the
     token was never defined, so those declarations were invalid and every one
     of them rendered as a hard 0 — the square pricing cards were the visible
     symptom. Defining the alias fixes them all at the source. */
  --radius: 14px;
  --radius-2: var(--r-card);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;

  /* One typeface, the website's: Inter everywhere, with tight tracking on
     display sizes. The old editorial serif belongs to the pre-website look. */
  --font:
    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font);

  /* App shell content width (desktop) — the website's 1160px container */
  --app-max: 1160px;

  /* Placeholder cover for projects without a real photo */
  --cover-fallback: #eef3f0;

  /* Legacy aliases — some feature panels (Impact AI, Verifier, Owner labs)
     reference these names. They were never defined here, so every
     `var(--card-bg)` / `var(--line)` call silently fell back to hardcoded
     #fff and broke the dark theme. Map them to the real surface tokens. */
  --card-bg: var(--surface-1);
  --line: var(--border);
  --muted: var(--text-3);
  --warn: var(--sun-700);
  --danger: var(--danger-700);
  --success: var(--evergreen-600);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e1513;
    --surface: #141d1b;
    --surface-1: #141d1b;
    --surface-2: #1a2623;
    --surface-50: #1a2623;
    --border: rgba(255, 255, 255, 0.11);
    --hairline: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.22);
    --text: #e8f0ee;
    --text-1: #e8f0ee;
    --text-2: #a8b6b2;
    --text-3: #7e8d89;
    /* Light mint on the dark surface: ~9.7:1, and visibly "on" rather than a
       neutral grey that reads as disabled. */
    --menu-fg: #7bd3ad;

    --focus-ring: #6bbbd8;

    --brand: #63c49d;
    --brand-hover: #7bd3ad;
    --accent: #63c49d;
    --accent-strong: #a4e3c8;
    --tint: rgba(99, 196, 157, 0.14);
    --tint-strong: rgba(99, 196, 157, 0.28);
    --on-solid: #0e1513;

    --evergreen-700: #63c49d;
    --evergreen-800: #7bd3ad;
    --evergreen-600: #63c49d;
    --evergreen-500: #7bd3ad;
    --evergreen-100: rgba(99, 196, 157, 0.14);
    --evergreen-50: rgba(99, 196, 157, 0.07);

    --ink-950: #e8f0ee;
    --ink-700: #c3cfcb;
    --ink-600: #a8b6b2;
    --ink-500: #7e8d89;
    --ink-400: #5c6663;
    --ink-200: rgba(255, 255, 255, 0.11);
    --ink-100: rgba(255, 255, 255, 0.06);

    --canvas-0: #141d1b;
    --canvas-100: #1a2623;
    --canvas-50: #0e1513;

    --danger-700: #e5685d;
    --danger-100: rgba(229, 104, 93, 0.14);
    --sky-700: #6bbbd8;
    --sky-100: rgba(107, 187, 216, 0.14);
    --sun-700: #f0b45f;
    --sun-100: rgba(240, 180, 95, 0.14);
    --coral-700: #c97a72;
    --coral-100: rgba(201, 122, 114, 0.14);

    --shadow-flat: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.2);
    --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.2);

    --cover-fallback: #1a2623;

    --card-bg: var(--surface-1);
    --line: var(--border);
    --muted: var(--text-3);
    --warn: var(--sun-700);
    --danger: var(--danger-700);
    --success: var(--evergreen-600);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell {
  /* legacy fallback for any injected `.shell` — the live app uses `.app-body`.
     Keep the old max-width here so legacy views still render sensibly. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--s-4);
}

/* ============================================================
   App shell — dark SaaS layout: sidebar + top bar + content.
   Mobile-first: a top bar with a drawer menu; wide screens get
   a fixed left sidebar and a centered 1280px content column.
   ============================================================ */
.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- Top bar (mobile + tablet) ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text-1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.brand-mark {
  display: inline-flex;
}

.brand-name {
  transform: translateY(1px);
}

/* ---------- Official Impact United lockup ---------- */
/* The supplied artwork is a raster image with its own dark-green background.
   It is presented as a deliberate plaque rather than run through a keying
   filter, so no cream or mint pixel is damaged or haloed. */
.impact-logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}
.impact-logo {
  --impact-logo-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--impact-logo-height) * 0.18);
  background: #081712;
  line-height: 0;
  box-shadow: 0 1px 2px rgba(20, 32, 30, 0.12);
}
.impact-logo__img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--impact-logo-height);
  object-fit: contain;
}
.impact-logo--xs {
  --impact-logo-height: 34px;
}
.impact-logo--sm {
  --impact-logo-height: 44px;
}
.impact-logo--md {
  --impact-logo-height: 54px;
}
.impact-logo--lg {
  --impact-logo-height: 58px;
}
.impact-logo--xl {
  --impact-logo-height: 96px;
}
.brand--logo {
  line-height: 0;
}
.loading-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-4);
}
.onb-done-logo {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--s-4);
}

.sidebar-brand {
  display: none;
}

.topnav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topnav .btn {
  font-size: 13.5px;
  min-height: 34px;
  padding: 0 var(--s-3);
}

/* Current screen, stated in the mobile top bar. The drawer is closed on
   phones, so without this the only way to know where you are was the content
   itself. It never competes with the brand: same size as body copy, tighter
   tracking, and it yields (ellipsis) when the bar is crowded. */
.topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--s-1);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-title[hidden] {
  display: none;
}
@media (max-width: 359px) {
  /* Below ~360px there is no room for brand + screen + account. */
  .topbar-title {
    display: none;
  }
}

/* Avatar account menu (the only top-level account control).
   The dropdown and its items were previously unstyled — that is why Sign out
   rendered as a raw default browser button. Items are quiet menu rows; Sign
   out is a restrained icon + label action (red is reserved for destructive
   actions such as deleting an account). */
.account-menu {
  position: relative;
  display: inline-flex;
}
.account-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 4px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s ease;
}
.account-menu-btn:hover {
  background: var(--surface-2);
}
.account-menu-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.account-menu-chevron {
  color: var(--text-3);
}
.account-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 224px;
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 12px 32px rgba(10, 22, 16, 0.18);
}
.account-menu-dropdown[hidden] {
  display: none;
}
.account-menu-dropdown a,
.account-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-control);
  background: none;
  /* EVERY enabled row takes its foreground from --menu-fg (light mint on the
     dark surface, deep green on the light one), including any icon inside it —
     the icons are inline SVG drawn with `currentColor`, so they inherit this
     automatically. --text was the wrong token to reach for: it is a near-white
     neutral, so "enabled" rows looked disabled until hover. Hover changes the
     SURFACE only; the label colour never changes state, which is what made the
     old rows look faded at rest. */
  color: var(--menu-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.account-menu-dropdown a:hover,
.account-menu-dropdown button:hover {
  background: color-mix(in srgb, var(--menu-fg) 14%, transparent);
  color: var(--menu-fg);
}
/* Keyboard focus and the selected/current row keep the same readable label and
   get the same quiet surface treatment instead of a colour change. */
.account-menu-dropdown a:focus-visible,
.account-menu-dropdown button:focus-visible {
  background: color-mix(in srgb, var(--menu-fg) 14%, transparent);
  color: var(--menu-fg);
}
.account-menu-dropdown a[aria-current='page'] {
  background: color-mix(in srgb, var(--menu-fg) 10%, transparent);
  color: var(--menu-fg);
}
/* Genuinely disabled rows stay dim and non-interactive. */
.account-menu-dropdown a[aria-disabled='true'],
.account-menu-dropdown button:disabled {
  color: var(--text-3);
  cursor: not-allowed;
  opacity: 0.8;
}
.account-menu-dropdown a[aria-disabled='true']:hover,
.account-menu-dropdown button:disabled:hover {
  background: none;
}
.account-menu-dropdown a:focus-visible,
.account-menu-dropdown button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.menu-label {
  padding: var(--s-1) var(--s-3) var(--s-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-3);
  text-transform: uppercase;
}
.menu-sep {
  height: 1px;
  background: var(--border);
  margin: var(--s-1) 0;
}
/* Reserved for genuinely destructive actions (e.g. delete account). Scoped to
   the dropdown so it outranks the shared row rule above — otherwise the mint
   foreground would repaint a destructive action as a normal one. */
.account-menu-dropdown .menu-danger {
  color: var(--danger-700);
}
.account-menu-dropdown .menu-danger:hover,
.account-menu-dropdown .menu-danger:focus-visible {
  background: color-mix(in srgb, var(--danger-700) 12%, transparent);
  color: var(--danger-700);
}

.nav-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 var(--s-1);
}

.view {
  flex: 1;
  outline: none;
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-8);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-8);
  font-size: 12.5px;
  color: var(--text-3);
  max-width: var(--app-max);
  margin: 0 auto;
  width: 100%;
}

.footer a {
  color: var(--text-3);
  text-decoration: none;
}
.footer a:hover {
  color: var(--accent);
}

/* ---------- Sidebar ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(78vw, 280px);
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition:
    transform 0.2s ease,
    visibility 0.2s ease;
  z-index: 60;
  padding: var(--s-4) var(--s-3);
  overflow-y: auto;
}
body.sidebar-open .sidebar {
  transform: translateX(0);
  box-shadow: var(--shadow-raised);
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 13, 12, 0.5);
  z-index: 55;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.nav-group:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Account rows (Privacy & data, Sign out all devices). Desktop only: on
   phones and tablets the avatar menu already holds exactly these two, and the
   brief is that a destination is never listed twice in the same viewport. */
.nav-group.desktop-nav {
  display: none;
}
@media (min-width: 1024px) {
  .nav-group.desktop-nav {
    display: flex;
  }
}
.nav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--s-2) var(--s-3) var(--s-1);
}

/* Sidebar navigation row. This class is for <a> anchors only — the Sign out
   control is a <button> and owns its own styling in `.sidebar-signout`
   below, so a button never inherits browser default chrome through here. */
.sidenav-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  /* Readable at rest, not only on hover. --text-2 made an enabled row look
     disabled until the pointer touched it; the active row still takes the
     mint accent, so "current page" remains the only colour distinction. */
  color: var(--text-1);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.sidenav-link svg {
  color: var(--text-3);
  flex: none;
}
.sidenav-link:hover {
  background: var(--surface-2);
  color: var(--text-1);
}
.sidenav-link.active {
  background: var(--tint);
  color: var(--accent-strong);
  font-weight: 600;
}
.sidenav-link.active svg {
  color: var(--accent);
}

/* Sidebar Sign out — a real <button>, and deliberately its own component so
   it never depends on the anchor row above. The explicit `appearance`/
   `background`/`border`/`box-shadow` reset is the root-cause fix for the old
   'big white rectangle': without it the browser's default button chrome
   (buttonface background, outset border, Arial font) painted the row as a
   light block while the surrounding anchors looked normal.

   Idle: no container at all — visually identical to Profile / Messages.
   Hover / press: a restrained warm sign-out tint (never a bright red block). */
.sidebar-signout {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  color: var(--text-2);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  /* Idle state: transparent container, zero chrome. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.sidebar-signout svg {
  color: var(--text-3);
  flex: none;
}
.sidebar-signout:hover {
  background: color-mix(in srgb, var(--danger-700) 8%, transparent);
  color: var(--danger-700);
}
.sidebar-signout:hover svg {
  color: var(--danger-700);
}
.sidebar-signout:active {
  background: color-mix(in srgb, var(--danger-700) 13%, transparent);
}
.sidebar-signout:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Collapse control (desktop only) — the single sidebar collapse control. */
.sidebar-collapse {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  flex: none;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.12s ease,
    color 0.12s ease;
}
.sidebar-collapse:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.sidebar-collapse .coll-expand {
  display: none;
}

/* Floating restore button — hidden by default. Shown by the desktop mode
   rules below ONLY while the sidebar is hidden, so it never overlaps the
   brand or creates a stray hamburger on the logo. (The old `display:
   inline-flex` here overrode the `hidden` attribute and made it permanent.) */
.sidebar-restore {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.12s ease,
    color 0.12s ease;
}
.sidebar-restore:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Wide screens: persistent left sidebar + centered column, top bar merges. */
@media (min-width: 1024px) {
  .app {
    flex-direction: row;
  }
  .topbar {
    display: none; /* brand + menu live in the sidebar on wide screens */
  }
  .app-body {
    margin-left: 264px;
  }
  .sidebar {
    transform: none;
    width: 264px;
    box-shadow: none;
  }
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0 var(--s-2) var(--s-4);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: var(--s-3);
  }
  .sidebar-collapse {
    display: inline-flex;
  }
  .sidebar-scrim {
    display: none !important;
  }
  .view,
  .footer {
    max-width: var(--app-max);
  }
  /* Keep consumer social content readable on wide screens — the workspace/
     admin pages use the full column, but feed cards and forms stay focused. */
  .feed-list,
  .video-feed,
  .comment-form,
  .create-screen .card,
  .project-screen,
  .search-head {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ---------- Desktop sidebar modes: expanded / collapsed / focus ----------

     COLLAPSED hides the sidebar ENTIRELY — no brand, no icon rail, no
     labels, no search, no divider. The content column reclaims the full
     sidebar width. The floating restore button is the only thing shown
     while hidden. FOCUS (used by Reels' own expand toggle) behaves the
     same way, so both states share one implementation. */
  .sidebar {
    transition:
      transform 0.2s ease,
      visibility 0.2s ease;
  }
  .app-body {
    transition: margin-left 0.2s ease;
  }
  body.sidebar-collapsed .sidebar,
  body.sidebar-focus .sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    border-right: 0;
    box-shadow: none;
  }
  body.sidebar-collapsed .app-body,
  body.sidebar-focus .app-body {
    margin-left: 0;
  }
  /* Reclaim the full sidebar width: allow the content column to breathe
     beyond the default 1100px cap. Inner lists keep their own readable
     max-widths (see .feed-list/.video-feed rules above), so nothing
     stretches unnaturally — but Reels/Pricing/Admin/Org pages genuinely
     expand into the freed space. */
  body.sidebar-collapsed .view,
  body.sidebar-focus .view {
    max-width: min(var(--app-max-collapsed, 1360px), calc(100vw - var(--s-8)));
  }
  body.sidebar-collapsed .footer,
  body.sidebar-focus .footer {
    max-width: min(var(--app-max-collapsed, 1360px), calc(100vw - var(--s-8)));
  }
  /* Immersive feed: the swipe feed IS the app surface — full available
     width and full viewport height on desktop (the topbar + bottom nav
     that the mobile height calc assumes do not exist here). No floating
     centered box, no leftover strip below the content. */
  body.swipe-active .view {
    max-width: none;
    padding: 0;
  }
  body.swipe-active .swipe-feed {
    height: 100dvh;
    margin: 0;
  }
  .sidebar-restore {
    display: none;
  }
  body.sidebar-collapsed .sidebar-restore,
  body.sidebar-focus .sidebar-restore {
    display: inline-flex;
  }
}

/* Restrained motion — no sliding when the user asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .app-body,
  .sidebar-restore {
    transition: none !important;
  }
}

/* Backend connection status (health check) */
.conn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
}
.conn-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--evergreen-500);
}
.conn-status.is-offline .dot {
  background: var(--coral-700);
}
@media (prefers-reduced-motion: no-preference) {
  .conn-status .dot {
    transition: background 0.3s ease;
  }
}

/* ---------- Typography ---------- */
h1,
h2,
h3 {
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-3);
}
h1 {
  font-size: 28px;
  font-weight: 600;
}
h2 {
  font-size: 22px;
  font-weight: 600;
}
h3 {
  font-size: 16px;
  font-weight: 600;
}
p {
  margin: 0 0 var(--s-4);
}
.muted {
  color: var(--text-2);
}
.small {
  font-size: 13px;
}
.tiny {
  font-size: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--brand);
  color: var(--on-solid);
  min-height: 48px;
  font-size: 15.5px;
}
.btn-primary:hover {
  background: var(--brand-hover);
}
.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  padding: 0 var(--s-2);
}
.btn-ghost:hover {
  background: var(--tint);
}

.btn-danger {
  background: var(--surface);
  color: var(--danger-700);
  border-color: var(--danger-100);
}
.btn-danger:hover {
  background: var(--danger-100);
  border-color: var(--danger-700);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  min-height: 36px;
  padding: 0 var(--s-4);
  font-size: 13.5px;
}

/* ---------- Cards & layout ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-5);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.wrap {
  flex-wrap: wrap;
}
.grow {
  flex: 1;
}

.hero {
  text-align: center;
  padding: var(--s-9) 0 var(--s-7);
}
.hero > .impact-logo {
  margin: 0 auto var(--s-5);
  display: flex;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 32px;
}
.hero .mission {
  font-size: 16.5px;
  color: var(--text-2);
  max-width: 380px;
  margin: 0 auto var(--s-6);
}

.social-proof {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--text-2);
  margin-top: var(--s-5);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--evergreen-500);
}

/* ---------- Forms ---------- */
.field {
  margin-bottom: var(--s-4);
}

.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: var(--s-2);
  color: var(--text);
}

.field .hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: var(--s-1);
}

.input,
.select,
textarea.input {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font);
  font-size: 15.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

textarea.input {
  min-height: 96px;
  resize: vertical;
}

.input::placeholder {
  color: var(--text-3);
}

.input:focus,
.select:focus,
textarea.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint);
}

.input.invalid {
  border-color: var(--danger-700);
}

.field-error {
  font-size: 12.5px;
  color: var(--danger-700);
  margin-top: var(--s-1);
  min-height: 0;
}

.form-error,
.form-success {
  border-radius: var(--r-control);
  padding: var(--s-3) var(--s-4);
  font-size: 13.5px;
  margin-bottom: var(--s-4);
}
.form-error {
  background: var(--danger-100);
  color: var(--danger-700);
}
.form-success {
  background: var(--tint);
  color: var(--accent-strong);
}

/* Password strength */
.strength {
  display: flex;
  gap: var(--s-1);
  margin-top: var(--s-2);
}
.strength span {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  transition: background 0.15s ease;
}
.strength[data-score='1'] span:nth-child(1) {
  background: var(--danger-700);
}
.strength[data-score='2'] span:nth-child(-n + 2) {
  background: var(--sun-700);
}
.strength[data-score='3'] span:nth-child(-n + 3) {
  background: var(--sky-700);
}
.strength[data-score='4'] span:nth-child(-n + 4) {
  background: var(--evergreen-500);
}
.strength-label {
  font-size: 12px;
  color: var(--text-3);
  margin-top: var(--s-1);
}

/* ---------- Chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--s-3);
  line-height: 1.25;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.chip.selected {
  background: var(--tint);
  border-color: var(--tint-strong);
  color: var(--accent-strong);
  font-weight: 600;
}
.chip[aria-pressed='true']::before {
  content: '✓ ';
}
.chip:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.chip.static {
  cursor: default;
}
.chip.static[data-color] {
  border-color: transparent;
}

/* ---------- Avatar ---------- */
.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.avatar-lg {
  width: 96px;
  height: 96px;
}
.avatar-sm {
  width: 36px;
  height: 36px;
}
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  background: var(--evergreen-700);
  border: 1px solid transparent;
}
@media (prefers-color-scheme: dark) {
  .avatar-initials {
    color: var(--on-solid);
  }
}

.avatar-picker {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.avatar-picker .avatar {
  width: 72px;
  height: 72px;
}
.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* ---------- Profile ---------- */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-6) 0 var(--s-4);
}
.profile-header .username {
  color: var(--text-3);
  font-size: 14px;
  margin: 0;
}
.profile-header h2 {
  font-family: var(--font-display);
}
.profile-header .bio {
  color: var(--text-2);
  margin-top: var(--s-3);
  max-width: 420px;
}

/* Quiet secondary account metadata under the handle — no pills. */
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: var(--s-2) 0 0;
  color: var(--text-3);
  font-size: 13px;
}
.profile-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.profile-meta-item:not(:first-child)::before {
  content: '·';
  margin-right: 3px;
  color: var(--text-4, var(--border-strong));
}
.profile-org-ref {
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
}
.profile-org-ref:hover {
  color: var(--accent);
}
.profile-meta .v-mark {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  vertical-align: -1px;
}

.badges {
  display: flex;
  gap: var(--s-2);
  justify-content: center;
  margin-top: var(--s-3);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 12px;
  font-weight: 600;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
}
.badge-verified {
  background: var(--tint);
  color: var(--accent-strong);
}
.badge-role {
  background: var(--sky-100);
  color: var(--sky-700);
}
.badge-warn {
  background: var(--sun-100);
  color: var(--sun-700);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin: var(--s-4) 0;
}
/* Four KPI boxes don't fit a phone — wrap to 2×2 on narrow screens. */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: var(--s-3) var(--s-2);
  text-align: center;
}
.stat .num {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat .lbl {
  font-size: 11.5px;
  color: var(--text-3);
}

.section {
  margin-bottom: var(--s-6);
}
.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}

/* ---------- Sessions / devices ---------- */
.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.device-row:last-child {
  border-bottom: none;
}
.device-icon {
  font-size: 18px;
}
.device-meta .name {
  font-weight: 600;
  font-size: 14px;
}
.device-meta .sub {
  font-size: 12px;
  color: var(--text-3);
}

/* ---------- Toggle ---------- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
}
.toggle-row:last-child {
  border-bottom: none;
}
.toggle-row .meta .name {
  font-weight: 600;
  font-size: 14px;
}
.toggle-row .meta .sub {
  font-size: 12.5px;
  color: var(--text-3);
}

.toggle {
  position: relative;
  width: 46px;
  height: 26px;
  flex: none;
  cursor: pointer;
}
.toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.toggle .track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--ink-200);
  transition: background 0.15s ease;
}
.toggle .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-flat);
  transition: transform 0.15s ease;
}
.toggle input:checked ~ .track {
  background: var(--brand);
}
.toggle input:checked ~ .thumb {
  transform: translateX(20px);
}
.toggle input:focus-visible ~ .track {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Dev mailbox ---------- */
.dev-inbox {
  margin-top: var(--s-4);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-control);
  padding: var(--s-4);
  font-size: 13px;
}
.dev-inbox .dev-label {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-2);
}
.dev-inbox .mail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  margin-top: var(--s-2);
}

/* ---------- Toasts ---------- */
.toast-root {
  position: fixed;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  z-index: 100;
  width: min(92vw, 420px);
}
.toast {
  background: var(--text);
  color: var(--bg);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-raised);
  font-size: 14px;
  font-weight: 500;
  animation: toast-in 0.2s ease;
}
.toast.success {
  background: var(--brand);
  color: var(--on-solid);
}
.toast.error {
  background: var(--danger-700);
  color: #fff;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Skeleton / loading ---------- */
.skeleton {
  border-radius: var(--r-control);
  background: linear-gradient(90deg, var(--ink-100) 25%, var(--surface-2) 50%, var(--ink-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.skeleton-text {
  height: 14px;
  margin-bottom: var(--s-3);
}
.skeleton-text.w60 {
  width: 60%;
}
.skeleton-text.w40 {
  width: 40%;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--ink-100);
  border-top-color: var(--evergreen-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.center-cta {
  text-align: center;
  padding: var(--s-7) 0;
}
.center-cta .spinner {
  margin: 0 auto var(--s-4);
}
.center-cta .loading-brand {
  margin-bottom: var(--s-4);
}

/* ---------- Misc ---------- */
.divider {
  height: 1px;
  background: var(--border);
  margin: var(--s-6) 0;
}
.danger-zone {
  border-color: var(--danger-100);
}
.required::after {
  content: ' *';
  color: var(--danger-700);
}
.hidden {
  display: none !important;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--surface);
  padding: var(--s-2) var(--s-4);
  z-index: 999;
}
.skip-link:focus {
  left: var(--s-2);
  top: var(--s-2);
}

/* ============================================================
   Bottom navigation — Home / Discover / Create (FAB) / Activity / Profile /
   Report, hairline top
   Mobile + tablet only. Desktop uses the sidebar; the bottom nav
   must NOT appear at wide widths (spec: desktop nav only).
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 560px);
  height: 64px;
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(64px + env(safe-area-inset-bottom));
}
.has-bn .view {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  .bottom-nav {
    display: none;
  }
  .has-bn .view {
    padding-bottom: var(--s-8);
  }
}
@media (max-width: 1023px) {
  /* Focus-mode controls are desktop-only — on phones/tablets the drawer is
     the nav, so a floating restore button or Expand toggle is dead UI. */
  #sidebar-restore {
    display: none !important;
  }
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  transition: color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.bn-item:hover {
  color: var(--text-2);
}
.bn-item.active {
  color: var(--accent);
}
.bn-icon {
  display: inline-flex;
}

.bn-fab {
  flex: 0 0 56px;
  align-self: center;
  margin: 0 4px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition:
    transform 0.12s ease,
    background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.bn-fab:hover {
  background: var(--brand-hover);
}
.bn-fab:active {
  transform: scale(0.96);
}
.bn-fab.active {
  box-shadow: 0 0 0 3px var(--tint);
}

/* ---------- Feed hero ---------- */
.feed-hero {
  padding: var(--s-5) 0 var(--s-2);
}
.feed-hero h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: var(--s-1);
}
.feed-hero p {
  font-size: 14px;
  margin: 0;
  color: var(--text-2);
}

/* ---------- Feed toolbar ---------- */
.feed-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding: var(--s-2) 0 var(--s-3);
}
.sort-tabs {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  scrollbar-width: none;
}
.sort-tabs::-webkit-scrollbar {
  display: none;
}
.sort-tab {
  flex: none;
  min-height: 34px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sort-tab:hover {
  color: var(--text);
  background: var(--surface-2);
}
.sort-tab.active {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.cat-rail {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding: var(--s-1) 0 var(--s-2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-rail::-webkit-scrollbar {
  display: none;
}
.cat-chip {
  flex: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: default;
}
.cat-chip:hover {
  background: var(--surface-2);
  color: var(--text);
}
.cat-chip.active {
  background: var(--tint);
  color: var(--accent-strong);
}

/* ---------- Feed cards ---------- */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-4);
}
.feed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.12s ease;
}
.feed-card:hover {
  border-color: var(--border-strong);
}

.cover-link {
  display: block;
  text-decoration: none;
}
.cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: var(--cover-fallback);
}
.cover-hero {
  aspect-ratio: 16 / 8;
}

/* Placeholder cover for projects without a real photo: quiet,
   category-tinted wash + soft editorial glyph. No neon. */
.cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cover-placeholder::after {
  content: '';
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat, var(--evergreen-500)) 14%, transparent);
}

.card-body {
  padding: var(--s-4) var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.card-meta-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.chip-static.cat-chip {
  background: color-mix(in srgb, var(--cat, var(--evergreen-500)) 10%, var(--surface));
  color: var(--cat, var(--accent));
  cursor: default;
  font-weight: 600;
}
.stage-badge {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--sky-100);
  color: var(--sky-700);
}
.stage-in-progress {
  background: var(--tint);
  color: var(--accent-strong);
}
.stage-launched {
  background: var(--sky-100);
  color: var(--sky-700);
}
.stage-prototype {
  background: var(--sun-100);
  color: var(--sun-700);
}
.stage-idea {
  background: var(--surface-2);
  color: var(--text-2);
}
.stage-research {
  background: var(--coral-100);
  color: var(--coral-700);
}
.remote-tag,
.loc-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.loc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.card-title a {
  color: var(--text);
  text-decoration: none;
}
.card-title a:hover {
  color: var(--accent);
}
.card-pitch {
  font-size: 14.5px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.55;
}

.card-creator {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  margin-top: var(--s-1);
}
.creator-name {
  font-weight: 600;
}
.card-time {
  color: var(--text-3);
  font-size: 12px;
}

.follow-btn {
  flex: none;
  min-height: 30px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.follow-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.follow-btn.on {
  background: var(--tint);
  border-color: var(--tint-strong);
  color: var(--accent-strong);
}
.follow-btn.pending {
  opacity: 0.6;
}

.need-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.need-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.need-more {
  font-size: 11.5px;
  color: var(--text-3);
  align-self: center;
}

/* Action row — plain text buttons, hover tint, green only when active */
.card-actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
  margin-top: var(--s-1);
  margin-inline: calc(-1 * var(--s-4));
  padding-inline: var(--s-4);
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--s-3);
  border-radius: var(--r-control);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.action-btn svg {
  flex: none;
}
.action-btn .count {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.action-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}
.action-btn:active {
  transform: scale(0.96);
}
.action-btn.on {
  background: var(--tint);
  color: var(--accent-strong);
}
.action-btn.on .count {
  color: var(--accent-strong);
}
.action-btn.pending {
  opacity: 0.6;
  pointer-events: none;
}

/* Pull-to-refresh */
.ptr-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ptr-hint.visible {
  opacity: 1;
  height: 28px;
}
.ptr-arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}
.ptr-hint.spinning .ptr-arrow {
  animation: spin 0.7s linear infinite;
}

/* Offline / error banners */
.offline-banner,
.feed-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-control);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-2) 0 0;
}
.offline-banner {
  background: var(--sun-100);
  color: var(--sun-700);
}
.feed-error {
  background: var(--danger-100);
  color: var(--danger-700);
}

/* Feed loader / empty */
.feed-sentinel {
  height: 8px;
}
.feed-loader {
  display: flex;
  justify-content: center;
  padding: var(--s-4) 0;
}
.feed-empty {
  text-align: center;
  padding: var(--s-9) var(--s-4);
}
.feed-empty h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: var(--s-4) 0 var(--s-1);
}
.feed-empty p {
  max-width: 320px;
  margin: 0 auto var(--s-5);
  color: var(--text-2);
}
.empty-art {
  display: inline-flex;
  opacity: 0.9;
}

/* Recommended rail */
.rec-section {
  padding-top: var(--s-5);
}
.rec-scroll {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  padding: var(--s-2) 0 var(--s-4);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rec-scroll::-webkit-scrollbar {
  display: none;
}
.rec-card {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.12s ease;
}
.rec-card:hover {
  border-color: var(--border-strong);
}
.rec-reason {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--tint);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  align-self: flex-start;
}
.rec-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.rec-meta {
  font-size: 12px;
  color: var(--text-3);
}

/* ---------- Project detail ---------- */
.project-detail > .cover-hero {
  margin-inline: calc(-1 * var(--s-4));
  width: calc(100% + 2 * var(--s-4));
  aspect-ratio: 16 / 7.5;
  border-radius: 0;
}
.project-main {
  padding: var(--s-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.project-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: var(--s-2) 0 0;
  line-height: 1.2;
}
.project-pitch {
  font-size: 16px;
  margin: 0;
  color: var(--text-2);
}
.project-creator {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.creator-line {
  font-size: 14px;
  font-weight: 600;
}
.project-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.project-actions .action-btn {
  min-height: 40px;
  font-size: 14px;
  padding: 0 var(--s-4);
  border-color: var(--border-strong);
  background: var(--surface);
}
.project-actions .action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.project-actions .action-btn.on {
  border-color: var(--tint-strong);
  background: var(--tint);
  color: var(--accent-strong);
}
.project-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
.project-story {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}
.project-story p {
  margin: 0 0 var(--s-4);
}

.related-scroll {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}
.related-scroll::-webkit-scrollbar {
  display: none;
}
.related-card {
  flex: 0 0 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.12s ease;
}
.related-card:hover {
  border-color: var(--border-strong);
}
.related-card .cover {
  aspect-ratio: 16 / 9;
}
.related-body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.related-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.related-meta {
  font-size: 11.5px;
  color: var(--text-3);
}

/* ---------- Comments ---------- */
.comment-form {
  display: flex;
  gap: var(--s-2);
  align-items: flex-end;
  margin-bottom: var(--s-4);
}
.comment-form .input {
  flex: 1;
  min-height: 44px;
}
.comment-form .btn {
  flex: none;
}
.comment {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
}
.avatar-tiny {
  width: 32px;
  height: 32px;
  font-size: 12px;
  flex: none;
}
.comment-body {
  flex: 1;
}
.comment-head {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 13px;
  margin-bottom: 2px;
}
.comment-text {
  font-size: 14px;
  line-height: 1.55;
}

/* Project skeleton */
.project-skeletons {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-4);
}
.skeleton-card {
  pointer-events: none;
}
.cover-skeleton {
  height: 190px;
  border-radius: 0;
}

/* ---------- Default avatars ---------- */
.avatar-initials {
  font-size: 24px;
  letter-spacing: 0.02em;
  user-select: none;
}
.avatar-initials.avatar-sm {
  font-size: 13px;
}
.avatar-initials.avatar-tiny {
  font-size: 12px;
}
.avatar-initials.avatar-lg {
  font-size: 32px;
}

/* ---------- Create project ---------- */
.create-screen {
  padding-top: var(--s-4);
}
.create-screen .card {
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Modal + avatar crop ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 15, 14, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  animation: modal-in 0.16s ease;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-raised);
  width: 100%;
  max-width: 380px;
  padding: var(--s-5);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-head h3 {
  font-family: var(--font-display);
  font-size: 19px;
}
.modal-close {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  padding: var(--s-1);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.modal-close:hover {
  background: var(--surface-2);
  color: var(--text-1);
}
.crop-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 300px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--r-card);
  background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface-1) 0% 50%) 0 0 / 20px
    20px;
  touch-action: none;
  cursor: grab;
}
.crop-stage:active {
  cursor: grabbing;
}
.crop-stage img {
  max-width: none;
  user-select: none;
  pointer-events: none;
  will-change: left, top, width, height;
}
.crop-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow:
    0 0 0 999px rgba(10, 15, 13, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.crop-controls {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.crop-controls input[type='range'] {
  flex: 1;
  accent-color: var(--brand);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}
.upload-progress {
  margin-top: var(--s-4);
}
.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.15s ease;
}
body.modal-open {
  overflow: hidden;
}

/* ---------- Search ---------- */
.search-head {
  padding: var(--s-4) 0 var(--s-3);
}
.search-head h1 {
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: var(--s-3);
}
.search-box {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--surface-1);
  color: var(--text-3);
}
.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint);
}
.search-box .input {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 12px 0;
}
.search-box .input:focus {
  box-shadow: none;
}
.search-hint {
  padding: var(--s-6) var(--s-2);
  text-align: center;
  color: var(--text-2);
}
.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-8) 0;
}
.user-results {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.user-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-1);
  text-decoration: none;
  color: var(--text-1);
  transition: border-color 0.12s ease;
}
.user-row:hover {
  border-color: var(--border-strong);
}
.user-row-name {
  font-weight: 600;
}
.user-row-bio {
  margin-top: 2px;
}

/* ---------- Request to join ---------- */
.join-cta {
  margin: var(--s-4) 0;
}
.join-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
  align-items: flex-end;
}
.join-form textarea {
  width: 100%;
}
.join-banner {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-card);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.join-banner.joined {
  background: var(--tint);
  color: var(--accent-strong);
}
.join-banner.pending {
  background: var(--surface-2);
  color: var(--text-2);
}
.join-inbox {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-1);
}
.join-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.join-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
}
.join-row:first-of-type {
  border-top: 0;
}
.join-row.decided {
  opacity: 0.65;
}
.join-row-name {
  font-weight: 600;
  color: var(--text-1);
  text-decoration: none;
}
.join-row-actions {
  display: flex;
  gap: var(--s-2);
  flex: none;
}
.join-row .ok {
  color: var(--evergreen-600);
}
.creator-line {
  color: var(--text-1);
  font-weight: 600;
  text-decoration: none;
}
.creator-line:hover {
  color: var(--accent);
}
.project-creator .tiny a {
  color: var(--text-3);
  text-decoration: none;
}
.project-creator .tiny a:hover {
  color: var(--accent);
}

/* ---------- Gallery + media pickers ---------- */
.gallery-scroll {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding: var(--s-2) 0;
  scroll-snap-type: x mandatory;
}
.gallery-img {
  width: 180px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--r-sm);
  scroll-snap-align: start;
  border: 1px solid var(--border);
}
.media-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.media-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 96px;
  height: 96px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-card);
  color: var(--text-3);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    color 0.12s ease;
}
.media-tile:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.media-plus {
  font-size: 24px;
  line-height: 1;
}
.media-label {
  font-size: 11.5px;
  font-weight: 600;
}
.media-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
}
.media-previews {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* ---------- Profile contribution tabs ---------- */
.contrib-tabs {
  display: flex;
  gap: var(--s-1);
  margin: var(--s-3) 0 var(--s-4);
  padding: 3px;
  background: var(--surface-2);
  border-radius: 999px;
  width: fit-content;
}
.contrib-tab {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.contrib-tab.active {
  background: var(--surface-1);
  color: var(--accent);
}

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .shell {
    max-width: 680px;
  }
  h1 {
    font-size: 32px;
  }
  .feed-hero h1 {
    font-size: 28px;
  }
  .project-detail > .cover-hero {
    margin-inline: 0;
    width: 100%;
    border-radius: var(--r-card);
  }
}

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

/* ============================================================
   Campaigns, action & video (007)
   ============================================================ */

/* Feed mode toggle (Projects / Videos) */
.feed-mode {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px;
  margin: var(--s-3) 0;
  width: fit-content;
}
.feed-mode-tab {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.feed-mode-tab:hover {
  color: var(--text);
}
.feed-mode-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-flat);
}

/* Campaign video feed */
.video-feed {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.video-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.12s ease;
}
.video-card:hover {
  border-color: var(--border-strong);
}
.video-card-link {
  display: block;
  background: #000;
}
.feed-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0a0a0a;
}
.video-card-body {
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.video-caption {
  margin: 0 0 var(--s-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.video-creator-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.video-project-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.video-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
}
.video-title:hover {
  color: var(--accent);
}
.video-meta {
  margin: var(--s-2) 0 var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.video-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Campaign goal + progress */
.campaign-goal {
  background: var(--tint);
  border: 1px solid var(--tint-strong);
  border-radius: var(--r-card);
  padding: var(--s-5);
}
.campaign-goal .section-title {
  color: var(--accent-strong);
}
.progress-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.4s ease;
}

/* Updates & videos */
.updates {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-3);
}
.update-item {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-4);
  background: var(--surface);
}
.update-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.update-video {
  display: block;
  width: 100%;
  border-radius: var(--r-md);
  background: #0a0a0a;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.update-caption {
  margin: var(--s-2) 0 0;
  font-size: 14.5px;
  color: var(--text);
  white-space: pre-wrap;
}
.update-form,
.opp-form {
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  background: var(--surface-50);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.update-media-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.update-progress {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.icon-btn {
  border: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.icon-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}
.icon-btn svg {
  display: block;
}

/* Volunteer opportunities */
.opp-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.opp-card {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-4);
  background: var(--surface);
}
.opp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.opp-fill {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--tint);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.opp-fill.full {
  color: var(--coral-700);
  background: var(--coral-100);
}
.opp-meta {
  margin: var(--s-2) 0 var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.opp-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.opp-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* Team */
.team-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.team-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.team-name {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.team-name:hover {
  color: var(--accent);
}
.role-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1.25;
  padding: 3px 10px;
  background: var(--surface-2);
  border-color: transparent;
  color: var(--text-2);
  font-weight: 600;
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--s-3);
  position: relative;
}
.tl-item {
  display: flex;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  position: relative;
}
.tl-item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.tl-item:last-child::before {
  display: none;
}
.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
  background: var(--brand);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border-strong);
  z-index: 1;
}
.tl-dot.tl-video {
  background: var(--sun-700);
}
.tl-dot.tl-join,
.tl-dot.tl-volunteer {
  background: var(--sky-700);
}
.tl-body {
  flex: 1;
}
.tl-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tl-title svg {
  color: var(--text-3);
}

/* Creator dashboard */
.owner-dashboard {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--surface);
}
.owner-dashboard .stats-grid {
  margin: var(--s-3) 0;
}
.progress-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.progress-form input[type='range'] {
  width: 100%;
  accent-color: var(--brand);
}

/* Share sheet */
.share-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.share-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  object-fit: cover;
}
.share-cover {
  display: block;
  background: var(--cover-fallback);
  position: relative;
}
.share-cover::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat, var(--evergreen-500)) 16%, transparent);
}
.share-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text);
}
.share-cta .btn {
  width: 100%;
}
.share-url {
  font-size: 12px;
  color: var(--text-3);
  word-break: break-all;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
}

/* Report link + profile actions */
.report-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: var(--s-1) 0;
}
.report-link:hover {
  color: var(--coral-700);
}
.profile-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}

/* ============================================================
   Trust architecture — verification, organizations, admin (008)
   Same language: flat surfaces, hairline borders, green accent.
   ============================================================ */

/* Verification badges — calm, informative, never flashy. */
/* Compact inline verified mark (next to a name/handle). */
.v-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #1a6fb5;
  color: #fff;
  cursor: pointer;
  vertical-align: -2px;
  margin-left: 4px;
  transition: background 0.12s ease;
}
.profile-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.profile-name-row .v-mark {
  margin-top: var(--s-3); /* sit on the h2 baseline inside the row */
}
.v-mark:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.v-mark:hover {
  background: #155a94;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0;
}

/* Verification info panel */
.v-info-head {
  margin-bottom: var(--s-3);
}
.v-info-head .v-mark {
  width: 22px;
  height: 22px;
  margin: 0 0 var(--s-2);
}
.v-info-list {
  margin: 0 0 var(--s-3);
}
.v-info-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.v-info-list dt {
  color: var(--text-3);
  font-weight: 500;
}
.v-info-list dd {
  margin: 0;
  color: var(--text);
  text-align: right;
}
.v-info-what {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  padding: var(--s-3);
}
.v-info-what strong {
  display: block;
  font-size: 13px;
  margin-bottom: var(--s-1);
}
.v-info-what p {
  margin: 0 0 var(--s-2);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

/* Status banners */
.v-status {
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-400);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.v-status-title {
  font-weight: 700;
  font-size: 15px;
}
.v-status.v-verified {
  border-left-color: var(--brand);
}
.v-status.v-verified .v-status-title {
  color: var(--brand);
}
.v-status.v-rejected,
.v-status.v-suspended {
  border-left-color: var(--danger-700);
}
.v-status.v-rejected .v-status-title,
.v-status.v-suspended .v-status-title {
  color: var(--danger-700);
}
.v-status.v-submitted,
.v-status.v-under_review,
.v-status.v-info_requested {
  border-left-color: var(--sky-700);
}
.v-status.v-submitted .v-status-title,
.v-status.v-under_review .v-status-title,
.v-status.v-info_requested .v-status-title {
  color: var(--sky-700);
}

/* Verification / org screens */
.v-screen {
  max-width: 640px;
  margin: 0 auto;
}

/* Organization application: one readable column for Back, title, policy and
   form. The notice is a full-width block, never a narrow flex child beside the
   title, so it cannot squeeze its copy into a tall column. */
.v-screen.org-apply-screen {
  max-width: 860px;
}
.org-apply-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.org-apply-back {
  margin-left: calc(var(--s-2) * -1);
}
.org-apply-intro {
  max-width: 72ch;
}
.org-apply-intro h1 {
  margin: 0;
  font-family: var(--font-display, 'Source Serif 4', serif);
  font-weight: 600;
}
.org-apply-intro p {
  margin: var(--s-1) 0 0;
}
.org-apply-notice {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.org-apply-notice:empty {
  display: none;
}
.org-review-note {
  border: 1px solid var(--line, var(--hairline));
  border-left: 3px solid var(--accent);
  border-radius: var(--radius, 12px);
  background: var(--evergreen-50, var(--surface-2));
  padding: var(--s-3);
}
.org-review-note strong {
  display: block;
  margin-bottom: var(--s-1);
}
.org-review-note p {
  margin: 0;
  max-width: 82ch;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.org-apply-card {
  padding: var(--s-4);
}
.org-location-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: var(--s-3);
  align-items: start;
}
.org-location-grid .field {
  min-width: 0;
}
.org-location-grid .input,
.org-location-grid .select {
  width: 100%;
  box-sizing: border-box;
}
.org-location-hint {
  margin: calc(var(--s-1) * -1) 0 var(--s-3);
}

@media (max-width: 720px) {
  .org-apply-card {
    padding: var(--s-3);
  }
  .org-field-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--s-2) !important;
  }
  .org-field-row .field {
    width: 100%;
  }
  .org-location-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
  .org-doc-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .org-review-note p {
    max-width: none;
  }
}
.v-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.v-header h1 {
  font-family: var(--font-display, 'Source Serif 4', serif);
  font-weight: 600;
}
.v-header .v-status {
  width: 100%;
  margin-top: var(--s-2);
}
.v-status ~ .v-status {
  margin-top: var(--s-2);
}

/* Org apply form */
.org-doc-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr auto;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  align-items: center;
}
.org-ref-row {
  background: var(--surface-2, #fff);
  border: 1px solid var(--hairline);
  border-radius: var(--radius, 12px);
  padding: var(--s-2);
  margin-bottom: var(--s-2);
}
button.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.org-doc-row .doc-status {
  white-space: nowrap;
  font-size: 12px;
}
@media (max-width: 560px) {
  .org-doc-row {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
}
.doc-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.doc-row:last-child {
  border-bottom: 0;
}
.doc-name {
  font-weight: 600;
  font-size: 14px;
}
.doc-upload {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.doc-preview {
  max-width: 100%;
  max-height: 55vh;
  object-fit: contain;
  border-radius: var(--r-control);
}

/* Org profile */
.org-profile-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.org-profile-head h1 {
  font-family: var(--font-display, 'Source Serif 4', serif);
  font-weight: 600;
}

/* Admin console */
.admin-title {
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.admin-dash-stats {
  margin: var(--s-4) 0 var(--s-3);
}
.admin-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.admin-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-1);
}
.admin-head h2 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}
.admin-tabs {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
  overflow-x: auto;
}
.admin-tab {
  appearance: none;
  border: 0;
  background: none;
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.admin-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.admin-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.admin-row {
  display: flex;
  align-items: center;
  /* Review rows carry a title, a status chip and an action. On a phone the
     three cannot share one line, and without wrapping the row pushed the
     action past the viewport edge and made the whole page scroll sideways. */
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  background: var(--surface);
}
.admin-row > * {
  min-width: 0;
}
.admin-row-title {
  font-weight: 600;
  font-size: 14px;
}
/* Rows carry ids, event keys and timestamps. They must break inside the row
   (never widen it) — an unbreakable token used to push whole pages into
   horizontal scrolling on phones. */
.admin-row .admin-row-title,
.admin-row .tiny {
  overflow-wrap: anywhere;
}
.admin-status {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-3);
  white-space: nowrap;
}
.admin-status.s-approved,
.admin-status.s-verified {
  background: var(--tint);
  color: var(--brand);
}
.admin-status.s-submitted,
.admin-status.s-under_review {
  background: var(--sky-100);
  color: var(--sky-700);
}
.admin-status.s-info_requested {
  background: var(--sun-100);
  color: var(--sun-700);
}
.admin-status.s-rejected,
.admin-status.s-suspended {
  background: var(--danger-100);
  color: var(--danger-700);
}

/* ---- AI review (migration 010) ---- */
.ai-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-3);
  white-space: nowrap;
}
.ai-chip-approve {
  background: var(--tint);
  color: var(--brand);
}
.ai-chip-escalate {
  background: var(--sun-100);
  color: var(--sun-700);
}
.ai-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.ai-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--sun-500);
  transition: width 0.4s ease;
}
.ai-bar-approve {
  background: var(--brand);
}
.ai-check {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ai-check:last-child {
  border-bottom: 0;
}
.ai-check-ok .ai-check-name {
  color: var(--brand);
}
.ai-check-bad .ai-check-name {
  color: var(--danger-700);
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.toggle-row:last-child {
  border-bottom: 0;
}
.toggle-row input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}
.admin-detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.answer-field {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.answer-field:last-child {
  border-bottom: 0;
}
.review-line {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.review-line:last-child {
  border-bottom: 0;
}

/* Feed verified filter */
.verif-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.verif-toggle.on {
  border-color: var(--brand);
  background: var(--tint);
  color: var(--brand);
}

/* Campaign verification request form on the project page */
.campaign-trust {
  border-top: 1px solid var(--hairline);
}
.cv-form {
  margin-top: var(--s-3);
}

/* ============================================================
   Onboarding (migration 014) — one question per screen
   ============================================================ */
.onboarding {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-8);
  min-height: 70vh;
  display: flex;
  flex-direction: column;
}
.onb-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
  margin-bottom: var(--s-6);
}
.onb-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.35s ease;
}
.onb-step {
  flex: 1;
}
.onb-step h1 {
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
}
.onb-step .mission {
  font-size: 1.05rem;
  color: var(--text-2);
  margin: 0 0 var(--s-5);
}
.onb-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.onb-resume {
  margin-left: auto;
}
.onb-choices {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.onb-choice {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  text-align: left;
  padding: var(--s-4);
  border: 1.5px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  /* Explicit colour: a bare <button> otherwise inherits the UA `buttontext`
     system colour rather than the theme's text colour. */
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}
.onb-choice:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: 0 2px 12px rgba(30, 107, 79, 0.08);
}
.onb-choice:active {
  transform: scale(0.995);
}
.onb-choice:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* Chosen card — stays legible while the save is in flight. */
.onb-choice.selected,
.onb-choice[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.onb-choice:disabled {
  cursor: progress;
  opacity: 0.75;
  color: var(--text);
}
.onb-choice-icon {
  font-size: 1.6rem;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  flex: none;
}
.onb-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.onb-choice-text strong {
  font-size: 1.02rem;
  color: var(--text);
}
/* --text-2 rather than the global muted token: the muted grey sat just under
   WCAG AA (4.5:1) against the dark card surface for 0.9rem body copy. */
.onb-choice-text .muted {
  font-size: 0.9rem;
  color: var(--text-2);
}
/* Inline, screen-reader-announced failure for a step save. */
.onb-error {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--danger-700);
  border-radius: var(--r-control);
  background: var(--danger-100);
  color: var(--danger-700);
  font-size: 0.92rem;
}
/* Visible progress while a choice is being saved, so a slow request does not
   look like a dead button. */
.onb-choice[aria-busy='true'] {
  opacity: 0.8;
}
.onb-choice[aria-busy='true']::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-5);
}
.btn-lg {
  padding: 14px 22px;
  font-size: 1.05rem;
}

/* ============================================================
   Owner Center (migration 014) — INTERNAL, FOUNDER ACCESS ONLY
   ============================================================ */
.owner {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-8);
}
.owner-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.owner-header h1 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.owner .section-title {
  margin-top: var(--s-6);
}
.owner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.owner-table th,
.owner-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.owner-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  font-weight: 600;
}

/* ============================================================
   Home feed — full-screen vertical swipe (DISCOVER → WATCH)
   ============================================================ */

/* Immersive mode: hide the page footer so the feed truly fills the screen. */
body.swipe-active .footer {
  display: none;
}
body.swipe-active .view {
  /* Immersive Reels: the feed's negative margins cancel this padding, so it
     spans the full column edge to edge while other views stay padded. */
  padding-bottom: 0;
  padding-top: 0;
}
.swipe-feed {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) 0;
  height: calc(100dvh - 57px - 64px); /* topbar (≈57px) + fixed bottom nav */
}

.swipe-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  padding: calc(var(--s-4) + env(safe-area-inset-top)) var(--s-4) var(--s-3);
  background: linear-gradient(180deg, rgba(10, 14, 12, 0.62) 0%, rgba(10, 14, 12, 0) 100%);
  pointer-events: none;
}
.swipe-head > * {
  pointer-events: auto;
}

.swipe-sorts {
  display: flex;
  gap: var(--s-2);
  justify-content: center;
  margin-bottom: var(--s-2);
}
.swipe-sort {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 16, 14, 0.42);
  color: #f2f4f1;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.swipe-sort:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.swipe-sort.active {
  background: var(--on-solid);
  color: var(--accent-strong);
  border-color: var(--on-solid);
}

/* Compact Topics control — replaces the global topic-chip rail. The feed
   keeps individual per-post topic labels (topic-chip/cat-chip), but the
   full-width category rail is gone. */
.feed-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  pointer-events: auto;
}
.topics-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-control);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 16, 14, 0.5);
  color: #eef1ee;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.topics-btn:hover {
  background: rgba(12, 16, 14, 0.74);
  border-color: rgba(255, 255, 255, 0.34);
}
.topics-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.topics-btn.filtered {
  background: rgba(26, 111, 181, 0.4);
  border-color: rgba(130, 186, 232, 0.65);
}
.topics-btn-chevron {
  color: rgba(238, 241, 238, 0.72);
  transition: transform 0.12s ease;
}
.topics-btn[aria-expanded='true'] .topics-btn-chevron {
  transform: rotate(180deg);
}

/* Topic selector panel — popover on desktop, bottom sheet on phones. */
.topics-panel {
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--surface);
  color: var(--text-1);
}
.topics-popover {
  min-width: 232px;
  max-width: 300px;
  max-height: 400px;
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 12px 32px rgba(10, 22, 16, 0.28);
}
body.topics-open {
  overflow: hidden;
}
.topics-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  max-height: 74dvh;
  padding: var(--s-2) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 40px rgba(10, 22, 16, 0.3);
  animation: topics-sheet-up 0.18s ease;
}
@keyframes topics-sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.topics-backdrop {
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(8, 12, 10, 0.5);
}
.topics-sheet-handle {
  width: 36px;
  height: 4px;
  margin: var(--s-2) auto var(--s-1);
  border-radius: 999px;
  background: var(--border-strong);
}
.topics-sheet-title {
  font-size: 15px;
  font-weight: 600;
  padding: 0 var(--s-2) var(--s-1);
}
.topics-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--surface-2);
  color: var(--text-3);
}
.topics-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: 13.5px;
  outline: none;
}
.topics-search input::placeholder {
  color: var(--text-3);
}
.topics-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  max-height: 320px;
}
.topics-sheet .topics-list {
  max-height: 46dvh;
}
.topic-option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.topic-option svg {
  flex: none;
  color: var(--accent-strong);
  opacity: 0;
}
.topic-option.selected svg {
  opacity: 1;
}
.topic-option:hover,
.topic-option:focus-visible {
  background: var(--surface-2);
  color: var(--text-1);
}
.topic-option.selected {
  color: var(--text-1);
  font-weight: 600;
}
.topic-option:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.swipe-viewport {
  flex: 1;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
  outline: none;
}
.swipe-viewport::-webkit-scrollbar {
  display: none;
}
.swipe-loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swipe-slide {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  overflow: hidden;
  background: #0d1210;
}

.swipe-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--cover-fallback);
}
.swipe-placeholder {
  background: radial-gradient(
    120% 90% at 20% 10%,
    color-mix(in srgb, var(--cat, var(--evergreen-500)) 26%, #101614) 0%,
    #101614 60%
  );
}
.swipe-placeholder::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat, var(--evergreen-500)) 18%, transparent);
}

.swipe-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 12, 10, 0.34) 0%,
    rgba(8, 12, 10, 0) 26%,
    rgba(8, 12, 10, 0) 46%,
    rgba(8, 12, 10, 0.88) 100%
  );
  pointer-events: none;
}

.swipe-body {
  position: absolute;
  left: var(--s-4);
  right: 84px;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  color: #fff;
  z-index: 5;
}

.swipe-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.swipe-emergency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffd9d2;
  background: rgba(179, 38, 30, 0.82);
  padding: 3px 10px;
  border-radius: 999px;
}

.swipe-title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 5.4vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-2);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}
.swipe-title a {
  color: inherit;
  text-decoration: none;
}

.swipe-org {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  flex-wrap: wrap;
}
.swipe-org-name {
  font-weight: 700;
  font-size: 14px;
}

.swipe-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #e7ece8;
  margin-bottom: var(--s-2);
}

.swipe-pitch {
  margin: 0 0 var(--s-3);
  font-size: 14.5px;
  line-height: 1.45;
  color: #f0f3f0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.swipe-goal {
  margin-bottom: var(--s-3);
  max-width: 420px;
}
.swipe-goal-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
  margin-bottom: 6px;
}
.swipe-goal-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--evergreen-400, #63c49d);
}
.swipe-goal-note {
  font-size: 12px;
  color: #dfe6e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swipe-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.swipe-cta {
  appearance: none;
  border: none;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: #10231a;
  background: var(--on-solid);
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.12s ease,
    background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.swipe-cta:hover {
  transform: translateY(-1px);
}
.swipe-cta:active {
  transform: scale(0.98);
}
.swipe-more {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(12, 16, 14, 0.4);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.swipe-rail {
  position: absolute;
  right: var(--s-3);
  bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  z-index: 6;
}
.swipe-rail-btn {
  appearance: none;
  background: none;
  border: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sr-ic {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(12, 16, 14, 0.42);
  transition: background 0.15s ease;
}
.sr-ic.on {
  color: #ff8b74;
}
.swipe-rail-btn.on .sr-ic {
  color: #ff8b74;
}
.sr-count {
  font-size: 11.5px;
}

.swipe-count {
  position: absolute;
  right: var(--s-3);
  top: calc(var(--s-4) + env(safe-area-inset-top));
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(12, 16, 14, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 13;
}

.swipe-empty {
  height: 100%;
  justify-content: center;
}

/* ============================================================
   Discover — browse causes, emergency, search
   ============================================================ */

.discover-screen {
  padding-top: var(--s-2);
}
.discover-head h1 {
  font-family: var(--font-display);
  margin: 0 0 var(--s-3);
}
.discover-section {
  margin-top: var(--s-5);
}
/* Belt-and-braces: nothing inside Discover may create a horizontal page
   scroll (clipped, not scrollable, so layout bugs can never hide content
   behind an accidental sideways pan). Inner scrollers (mode tabs, emergency
   rail) keep their own overflow-x: auto. */
.discover-screen {
  overflow-x: clip;
}

/* Discover mode tabs — page-level content filters, NOT sidebar items. */
.discover-tabs {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.discover-tabs::-webkit-scrollbar {
  display: none;
}
.discover-tab {
  flex: none;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.discover-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.discover-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-solid);
}

/* Discover mode lists (campaigns / organizations / people / reels). */
.org-row-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.org-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s ease;
}
.org-row:hover {
  border-color: var(--accent);
}
.org-row-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}
.org-row-logo-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--tint);
  color: var(--accent-strong);
}
.org-row-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.org-row-name .v-mark {
  width: 16px;
  height: 16px;
  flex: none;
}
/* Non-interactive status glyph inside a row link (the row itself is the
   link; the mark is decoration here, so no button semantics or pointer). */
.org-row-name .v-mark-static {
  cursor: default;
}
.org-row-meta {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 1px;
}
.org-row-mission {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.45;
}

/* ---------- Directory pages (/campaigns, /organizations) ---------- */
.dir-screen {
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--s-2);
}
.dir-head h1 {
  font-family: var(--font-display);
  margin: 0 0 var(--s-1);
}
.dir-sub {
  color: var(--text-2);
  margin: 0 0 var(--s-4);
  font-size: 14px;
}
.dir-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.dir-search {
  position: relative;
  flex: 1 1 220px;
}
.dir-search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.dir-search .input {
  padding-left: 40px;
  min-height: 46px;
}
.dir-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  min-height: 46px;
  padding-right: var(--s-4);
}
.dir-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.dir-toggle input {
  accent-color: var(--brand);
  width: 15px;
  height: 15px;
  margin: 0;
}
.dir-load {
  display: block;
  margin: var(--s-5) auto 0;
}

.reel-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-2);
}
.reel-tile {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--border);
  display: block;
  background: #000;
}
.reel-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel-tile-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(160deg, var(--accent-strong), #0c2a20);
}
.reel-tile-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 8px 6px;
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Discover — Volunteer Opportunities tab: real gigs (GET /gigs). */
.gig-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
.gig-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-1);
}
.gig-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}
.gig-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}
.gig-type {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.25;
}
.gig-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--text-2);
}
.gig-org-wrap {
  display: inline-flex;
  align-items: center;
}
.gig-org {
  color: var(--text-1);
  font-weight: 600;
  text-decoration: none;
}
.gig-org:hover {
  color: var(--accent);
}
.gig-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.25;
}
.gig-card-desc {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}
.gig-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.gig-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

/* Discover — Posts tab: real campaign video updates (GET /feed/updates). */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-4);
  padding-top: var(--s-2);
}
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-1);
  text-decoration: none;
  color: var(--text-1);
  transition: border-color 0.12s ease;
}
.post-card:hover {
  border-color: var(--border-strong);
}
.post-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: #0d1210;
  color: var(--text-3);
  font-size: 22px;
  font-weight: 700;
}
.post-media-ph {
  background: radial-gradient(
    120% 90% at 20% 10%,
    color-mix(in srgb, var(--evergreen-500) 22%, #101614) 0%,
    #101614 60%
  );
}
.post-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
}
.post-caption {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-meta {
  font-size: 12px;
  color: var(--text-3);
}
.discover-mode-body .feed-empty {
  margin-top: var(--s-4);
}

.cat-grid {
  display: grid;
  /* Adaptive chip grid: as many columns as fit (≥240px each), collapsing to
     one column on narrow screens. A fixed repeat(2, 1fr) could push the
     right column past the viewport when the content column is squeezed
     (persistent sidebar at ~1024–1100px), clipping the second column.
     min(100%, 240px) keeps single-column on mobile. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--s-2);
}
.cat-tile {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  /* Grid items default to min-width:auto — a long category name could
     otherwise inflate the track and force horizontal overflow. */
  min-width: 0;
  padding: var(--s-3);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition:
    border-color 0.12s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.cat-tile:hover {
  border-color: color-mix(in srgb, var(--cat, var(--evergreen-500)) 55%, var(--border));
  transform: translateY(-1px);
}
.cat-tile-emoji {
  font-size: 22px;
  line-height: 1;
}

.emergency-rail {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.emergency-rail::-webkit-scrollbar {
  display: none;
}
.emergency-card {
  flex: 0 0 260px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--coral-100);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.emergency-card .cover {
  aspect-ratio: 16 / 10;
}
.emergency-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3);
}
.emergency-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--coral-700);
  background: var(--coral-100);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ============================================================
   Volunteer bottom sheet (§8)
   ============================================================ */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 14, 12, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: sheet-fade 0.18s ease;
}
.sheet {
  width: min(100%, 560px);
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: var(--s-3) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  max-height: 82dvh;
  overflow-y: auto;
  animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.sheet-grip {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
  margin: 0 auto var(--s-4);
}
.sheet-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-3);
}
.sheet-dl dt {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}
.sheet-dl dd {
  margin: 0;
  font-size: 13.5px;
}
.sheet-events {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.sheet-event {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.sheet-event-title {
  font-weight: 700;
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes sheet-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================
   Campaign page — DISCOVER → WATCH → TRUST → ACT
   ============================================================ */

.project-hero {
  width: 100%;
  max-height: 62dvh;
  object-fit: cover;
  background: #0d1210;
  border-radius: var(--r-card);
  display: block;
}
.completed-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--tint);
  border: 1px solid var(--tint-strong);
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.completed-banner > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-solid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.completed-banner strong {
  display: block;
}
.creator-line-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.project-emergency {
  background: var(--coral-100);
  color: var(--coral-700);
}
.project-cta-row {
  margin: var(--s-4) 0 var(--s-3);
}
.campaign-transparency .v-info-list div {
  justify-content: space-between;
}
.project-stats .stats-grid {
  margin-top: 0;
}

/* ============================================================
   Activity
   ============================================================ */

.activity-screen .feed-list {
  padding-top: 0;
}
.activity-list .feed-card {
  margin-bottom: var(--s-3);
}

@media (max-width: 480px) {
  .swipe-body {
    right: 72px;
  }
}

/* ============================================================
   Staff + Verification Team + Connections + Messaging (migration 015)
   ============================================================ */

.badge-ok {
  background: var(--tint);
  color: var(--accent-strong);
}

/* ---- Shared inline-link design system (legal, consent, prose, footer) ----
   One consistent link treatment everywhere: Impact accent, never browser-
   default purple/blue, no generic purple visited state, AA-visible focus ring.
   Component styles (buttons, nav, cards) override these low-specificity rules. */
a {
  color: var(--accent-strong, #1a6fb5);
  text-decoration: none;
}
a:visited {
  color: var(--accent-strong, #1a6fb5);
}
a:hover {
  color: var(--evergreen-600, #198754);
}
a:not(.btn):not(.reel-action-btn):not(.account-menu-btn):hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Text control that behaves like a link (contact sales inline prompts). */
.linklike {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.linklike:hover {
  color: var(--accent-strong);
}
.badge-danger {
  background: var(--danger-100);
  color: var(--danger-700);
}

/* ---- Staff invitation banner (Part 3) ---- */
.staff-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--tint), #e8f5e9);
  border-bottom: 1px solid rgba(18, 130, 100, 0.25);
  padding: var(--s-2) var(--s-4);
}
.staff-banner-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: 14px;
}
.staff-banner-inner .row {
  margin-left: auto;
}

/* ---- Verifier case review (Part 7) ---- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-3);
}
.case-decision-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--s-3);
  margin-top: var(--s-4);
}
.case-decision-inner {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Team workspace (Part 17) ---- */
.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.stat-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-3);
  text-align: center;
  min-width: 0;
}
.stat-box .num {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: break-word;
}

/* Human-readable verification activity — no raw event names / JSON. */
.team-activity {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-right: var(--s-1);
}
.activity-case {
  color: var(--accent-strong);
  text-decoration: underline;
}
.activity-case:hover {
  text-decoration: none;
}

/* ---- Chat (Part 16) ---- */
.chat-thread {
  max-height: 56vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2) 0;
}
.chat-msg {
  max-width: 78%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: var(--s-2) var(--s-3);
}
.chat-msg.mine {
  align-self: flex-end;
  background: var(--tint);
  border-color: rgba(18, 130, 100, 0.25);
  border-radius: 14px 14px 4px 14px;
}
.chat-meta {
  font-size: 12px;
  margin-bottom: 2px;
}
.chat-body {
  font-size: 14.5px;
  line-height: 1.45;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.chat-body a {
  color: var(--accent-strong);
  text-decoration: underline;
}
.chat-composer {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.chat-composer .input {
  flex: 1;
}
.thread-menu {
  position: absolute;
  right: var(--s-3);
  top: var(--s-4);
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding: var(--s-1);
}
.thread-menu button {
  background: none;
  border: 0;
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: 14px;
  cursor: pointer;
}
.thread-menu button:hover {
  background: var(--surface-2);
}

/* ---- Social messaging upgrade (migration 058) ---- */
.chat-msg {
  position: relative;
}
.chat-msg .msg-actions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.chat-msg:hover .msg-actions,
.chat-msg:focus-within .msg-actions {
  opacity: 1;
}
.msg-actions button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-600);
}
.msg-actions button:hover {
  background: var(--surface-2);
}
.chat-media {
  display: block;
  margin: 4px 0;
  border-radius: 12px;
  max-width: 100%;
}
.chat-photo {
  max-height: 360px;
  object-fit: cover;
}
.chat-video {
  max-height: 360px;
  background: #000;
}
.chat-reply {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 4px var(--s-2);
  margin-bottom: 4px;
}
.chat-reply-who {
  font-size: 12px;
  font-weight: 600;
}
.chat-reply-text {
  font-size: 12.5px;
  color: var(--ink-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.reaction-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 13px;
  cursor: pointer;
}
.reaction-chip.mine {
  border-color: var(--accent);
  background: var(--tint);
}
.reaction-pop {
  position: absolute;
  z-index: 40;
  bottom: -34px;
  left: 0;
  display: flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  padding: 3px 6px;
}
.reaction-pick {
  border: 0;
  background: none;
  font-size: 17px;
  cursor: pointer;
  line-height: 1;
}
.reaction-pick:hover {
  transform: scale(1.2);
}
.composer-reply {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 4px var(--s-2);
  margin-top: var(--s-2);
}
.composer-reply-who {
  font-size: 12px;
  font-weight: 600;
}
.composer-reply-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-progress {
  margin-top: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.upload-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.upload-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.15s ease;
}
.group-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.group-members {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 40vh;
  overflow-y: auto;
}
.group-member {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--line);
}
.group-member-main {
  flex: 1;
  min-width: 0;
}

/* ---- Messages (Part 13) ---- */
.messages {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-4);
}
.messages-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.messages.thread {
  max-width: 680px;
}
.conv-row {
  text-decoration: none;
  color: inherit;
}
.conv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent-strong);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.unread-badge {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-solid);
  font-size: 11px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.conv-unread {
  color: inherit;
  font-weight: 600;
}

/* ============================================================
   Messages v2 (migration 037) — new-message composer, recipient search,
   two-pane conversation layout, thread composer and the GIF picker.
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 15, 14, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  animation: modal-in 0.16s ease;
}
.modal-overlay .modal {
  max-height: 86vh;
  overflow-y: auto;
}
.modal-lg {
  max-width: 520px;
}

/* ---- Two-pane shell: list | thread ---- */
.messages {
  display: grid;
  grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--s-4);
}
.msg-list-pane {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-1);
  overflow: hidden;
}
.msg-list-pane .messages-head {
  padding: var(--s-3) var(--s-3) 0;
  margin-bottom: var(--s-2);
}
.msg-list-pane .messages-head h1 {
  font-size: 1.3rem;
  margin: 0;
}
.msg-list-pane .admin-tabs {
  padding: 0 var(--s-3);
}
.msg-panel {
  min-height: 120px;
}
.msg-thread-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.thread-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-align: center;
  min-height: 52vh;
  padding: var(--s-5);
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
}
.thread-blank h3 {
  margin: 0;
}

/* ---- Conversation rows ---- */
.msg-list {
  display: flex;
  flex-direction: column;
}
.msg-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}
.msg-row:last-child {
  border-bottom: 0;
}
.msg-row:hover,
.msg-row:focus-visible {
  background: var(--surface-2);
}
.msg-row.unread {
  background: var(--tint);
}
.msg-row-main {
  min-width: 0;
  flex: 1;
}
.msg-row-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.msg-row-name {
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-row-time {
  margin-left: auto;
  flex: none;
}
.msg-row-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-row-preview {
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-avatar,
.recipient-avatar,
.thread-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.msg-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.msg-request-actions {
  margin-top: var(--s-2);
  gap: var(--s-2);
  flex-wrap: wrap;
}
.msg-empty {
  padding: var(--s-5) var(--s-4);
}

/* ---- Thread ---- */
.thread-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-1);
  position: relative;
}
.thread-head h1 {
  margin: 0;
  font-size: 1.1rem;
}
.thread-who {
  flex: 1;
  min-width: 0;
}
.thread-name {
  display: flex;
  align-items: center;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-thread-pane .chat-thread {
  max-height: none;
  flex: 1;
  min-height: 46vh;
  max-height: 58vh;
}
.chat-composer {
  align-items: flex-end;
}
.chat-input {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 140px;
  line-height: 1.45;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14.5px;
}
.chat-input[aria-busy='true'] {
  opacity: 0.6;
}
.gif-btn {
  flex: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 11.5px;
}
.chat-gif {
  display: block;
  max-width: 240px;
  width: auto;
  height: auto;
  border-radius: 12px;
}
.chat-caption {
  margin-top: var(--s-1);
}

/* ---- Recipient search ---- */
.compose-results {
  margin-top: var(--s-3);
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.compose-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: var(--s-2) 0 var(--s-1);
}
.recipient-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.recipient-row:hover,
.recipient-row:focus-visible {
  background: var(--surface-2);
}
.recipient-row.busy {
  opacity: 0.55;
  pointer-events: none;
}
.recipient-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.recipient-name {
  display: flex;
  align-items: center;
  font-weight: 600;
}
.recipient-sub {
  text-transform: none;
  letter-spacing: 0;
}
/* The real @username is never ellipsised: two long similar handles in one
   list must stay distinguishable. It wraps instead of truncating. */
.recipient-handle {
  font-size: 12.5px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
/* The bio is only a preview, so it is clamped to two lines. */
.recipient-bio {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
}
.recipient-state {
  flex: none;
  align-self: flex-start;
  padding-top: 2px;
}
.recipient-row.active,
.recipient-row[aria-selected='true'] {
  background: var(--tint);
}
.recipient-row[aria-selected='true'] .recipient-name {
  color: var(--text);
}
.compose-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-3);
  text-align: center;
}
.compose-state p {
  margin: 0;
  max-width: 46ch;
}
.compose-draft-to {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0 var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-3);
}
.compose-draft-to .recipient-main {
  flex: 1;
}
.composer-textarea {
  display: block;
  width: 100%;
  min-height: 128px;
  margin-top: var(--s-2);
  padding: var(--s-3);
  resize: vertical;
  font: inherit;
  line-height: 1.55;
}

/* ---- GIF picker ---- */
.gif-grid {
  margin-top: var(--s-3);
  max-height: 48vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}
.gif-grid.busy {
  opacity: 0.6;
  pointer-events: none;
}
.gif-tile {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    transform 0.12s ease;
}
.gif-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gif-tile:hover,
.gif-tile:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.gif-link {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.report-reasons {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-3);
}
.report-reason {
  justify-content: flex-start;
  text-align: left;
}

/* ---- Sidebar unread badge ---- */
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-solid);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* ---- Responsive: one pane at a time on mobile/tablet ---- */
@media (max-width: 999px) {
  .messages {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-3);
    gap: 0;
  }
  .messages[data-thread='1'] .msg-list-pane {
    display: none;
  }
  .messages[data-thread='0'] .msg-thread-pane {
    display: none;
  }
  .msg-list-pane {
    border: 0;
    background: transparent;
  }
  .msg-list-pane .messages-head,
  .msg-list-pane .admin-tabs {
    padding-left: 0;
    padding-right: 0;
  }
  .msg-row {
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    margin-bottom: var(--s-2);
    background: var(--surface-1);
  }
  .msg-thread-pane .chat-thread {
    min-height: 40vh;
    max-height: 52vh;
  }
  /* Composer stays pinned above the mobile bottom nav / keyboard. */
  .chat-composer {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 1000px) {
  .thread-back {
    display: none;
  }
}

/* ---- Profile actions (Part 11) ---- */
.profile-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

/* ---- Verification queue ---- */
.owner .stat-row {
  margin: var(--s-3) 0;
}

/* Founder preview modes — View as User / View as Verifier (Part 20).
   Client-side masking only; the backend role is never changed. */
.preview-pill {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  padding: var(--s-2) var(--s-3);
  background: var(--brand);
  color: var(--on-solid);
  font-size: 13px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.preview-pill-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}
.preview-pill .btn {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.preview-pill .btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* IMPACT TESTING banner on the ordinary screens (renderTestingPill in app.js).
   Same slot as the preview pill; it is only shown when the SERVER reports the
   session was opened from the staff testing workspace, and the two are never
   active for the same account in practice. Dark, not brand-green, so it cannot
   be mistaken for a product announcement. */
.preview-pill.testing-pill {
  background: #0f1113;
  color: #f2f7f4;
}
.testing-pill .btn {
  border-color: rgba(255, 255, 255, 0.55);
  color: #f2f7f4;
  background: transparent;
}
.testing-pill .btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
@media (max-width: 640px) {
  .preview-pill.testing-pill {
    position: static;
    flex-wrap: wrap;
  }
  .preview-pill.testing-pill .preview-pill-inner {
    gap: var(--s-2);
  }
}

/* ============================================================
   Impact AI — organization assistant (migration 016)
   Clean, professional, on-brand (no glowing AI template).
   ============================================================ */

.ai-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 64px);
}

.ai-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: var(--card-bg, #fff);
  position: sticky;
  top: 0;
  z-index: 10;
}

.ai-org-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.ai-recs {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.ai-reco.muted {
  opacity: 0.62;
}

.ai-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-bottom: var(--s-5);
}

.chip-btn {
  appearance: none;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.14));
  background: var(--card-bg, #fff);
  color: inherit;
  border-radius: 999px;
  padding: var(--s-2) var(--s-3);
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    transform 0.1s ease;
}
.chip-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}

.ai-notif-new {
  background: rgba(31, 107, 79, 0.05);
  border-radius: var(--r-card, 10px);
}

/* ---- Chat ---- */

.ai-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: calc(100dvh - 190px);
}

.ai-empty {
  text-align: center;
  margin: auto;
  max-width: 420px;
  padding: var(--s-6) var(--s-4);
  color: var(--muted, #6b7a73);
}
.ai-empty-icon {
  font-size: 34px;
  margin-bottom: var(--s-2);
}

.ai-msg {
  display: flex;
  gap: var(--s-2);
  max-width: 88%;
}
.ai-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.ai-msg-assistant {
  align-self: flex-start;
}

.ai-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: none;
}

.ai-bubble {
  border-radius: 14px;
  padding: var(--s-3);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  min-width: 40px;
}
.ai-msg-user .ai-bubble {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.ai-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.ai-streaming::after {
  content: '▍';
  animation: ai-blink 0.9s step-end infinite;
  color: var(--brand);
}
@keyframes ai-blink {
  50% {
    opacity: 0;
  }
}

.ai-composer {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: var(--card-bg, #fff);
  position: sticky;
  bottom: 0;
}

/* ---- Action proposals (PREPARE → CONFIRM → EXECUTE) ---- */

.ai-proposal {
  align-self: center;
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--brand);
  border-radius: var(--r-card, 12px);
  padding: var(--s-4);
  background: var(--card-bg, #fff);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  display: grid;
  gap: var(--s-2);
}
.ai-proposal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.ai-proposal-warn {
  border: 1px solid var(--danger, #c0392b);
  background: rgba(192, 57, 43, 0.06);
  color: var(--danger, #c0392b);
  border-radius: 8px;
  padding: var(--s-2) var(--s-3);
  font-size: 13px;
}
.ai-proposal-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Founder test mode ---- */

.ai-test-box {
  border: 1px dashed var(--warn, #b7791f);
  border-radius: var(--r-card, 10px);
  padding: var(--s-3);
  background: rgba(183, 121, 31, 0.05);
}

.switch-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  cursor: pointer;
}

/* ---- Legal & Compliance ---- */
.legal-doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-3);
}
.legal-doc-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.legal-doc-item:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.legal-doc-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.legal-doc-title {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}
.legal-doc-arrow {
  color: var(--muted);
  font-size: 16px;
}
.legal-doc-page {
  padding: var(--s-6) var(--s-5);
}
.legal-doc-header {
  margin-bottom: var(--s-5);
}
.legal-doc-header h2 {
  margin: var(--s-3) 0 var(--s-1);
}
.legal-doc-body {
  line-height: 1.7;
  font-size: 15px;
  color: var(--text);
}
.legal-doc-body h3 {
  font-size: 17px;
  font-weight: 700;
  margin: var(--s-5) 0 var(--s-2);
}
.legal-doc-body p {
  margin: 0 0 var(--s-3);
}
.legal-doc-body ul {
  margin: 0 0 var(--s-3);
  padding-left: var(--s-5);
}
.legal-doc-body li {
  margin-bottom: var(--s-1);
}
.legal-doc-body a {
  color: var(--brand);
}
.legal-doc-body strong {
  font-weight: 600;
}
.legal-doc-body .tiny.muted {
  margin-top: var(--s-3);
  font-style: italic;
}
.legal-doc-footer {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.legal-section {
  margin-bottom: var(--s-4);
}
.legal-section .legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-3) 0;
  font-size: 14px;
}
.legal-section .legal-table th,
.legal-section .legal-table td {
  text-align: left;
  padding: var(--s-2);
  border: 1px solid var(--border);
  vertical-align: top;
}
.legal-section .legal-table th {
  background: var(--bg-soft, rgba(127, 127, 127, 0.08));
}
.legal-section .legal-table tr:first-child th {
  border-top: none;
}
.legal-section .legal-table tr:last-child td {
  border-bottom: none;
}
.legal-section .legal-table th:first-child,
.legal-section .legal-table td:first-child {
  border-left: none;
}
.legal-section .legal-table th:last-child,
.legal-section .legal-table td:last-child {
  border-right: none;
}
.switch-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 14px;
  cursor: pointer;
}

/* ---- Reels — vertical video feed kept inside the Impact app frame ----
   The reel is a centered 9:16 card inside the normal page; the surrounding
   navigation + background stay visible. Feed tabs + a horizontally
   scrollable cause carousel sit above the reel. */
.reels-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: var(--s-4);
}

/* --- Header: title + centered feed tabs --- */
.reels-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
}
.reels-header-copy h1,
.reels-header-copy h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.reels-header-copy p {
  margin: var(--s-1) 0 0;
  font-size: 13.5px;
  color: var(--text-2);
}

/* Reels focus toggle — expand view (hide sidebar) / restore. */
.reels-focus-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}
.reels-focus-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.reels-focus-toggle.active {
  background: var(--tint);
  border-color: var(--tint-strong);
  color: var(--accent-strong);
}
.reels-feed-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto;
}
.reels-tab {
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.reels-tab:hover {
  color: var(--text);
}
.reels-tab.active {
  background: var(--surface-1);
  color: var(--accent-strong);
  box-shadow: var(--shadow-flat);
}

/* --- Cause category carousel: arrows + edge fade + horizontal scroll --- */
.reels-cats {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  max-width: 100%;
}
.reels-cat-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: all 0.15s;
  user-select: none;
  z-index: 2;
}
.reels-cat-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.reels-cat-btn[disabled] {
  opacity: 0.3;
  cursor: default;
  border-color: var(--border);
  color: var(--text-3);
}
.reels-cat-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.reels-cat-rail {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Horizontal inset keeps the FIRST chip fully visible (never clipped at
     the left edge) and gives snap targets breathing room. */
  padding: var(--s-1) var(--s-2);
  scroll-padding-left: var(--s-2);
}
.reels-cat-rail::-webkit-scrollbar {
  display: none;
}
.reels-cat-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--s-3);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: all 0.15s;
}
.reels-cat-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.reels-cat-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-solid);
}
.reels-cat-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 1;
}
.reels-cat-fade.left {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.reels-cat-fade.right {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}
.reels-cat-fade.show {
  opacity: 1;
}

/* --- Feed: normal flow, reel centered as polished 9:16 card --- */
.reels-feed {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.reels-loading,
.reels-error,
.reels-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-4);
  text-align: center;
}
.reels-empty h3 {
  margin: var(--s-3) 0 var(--s-2);
  font-size: 18px;
}
.reel-card {
  position: relative;
  width: min(100%, 420px, calc(74dvh * 9 / 16));
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
}

/* Focus mode (sidebar hidden): the reel takes the freed column width and
   grows while keeping 9:16 proportions, centered in the available area. */
body.sidebar-focus .reels-container {
  max-width: 560px;
}
body.sidebar-focus .reel-card {
  width: min(100%, 540px, calc(86dvh * 9 / 16));
  box-shadow: var(--shadow-raised);
}
@media (max-width: 1023px) {
  /* On phones/tablets there is no persistent sidebar to hide — the reel
     already fills the column, so focus mode changes nothing visual. */
  body.sidebar-focus .reels-container {
    max-width: 460px;
  }
  body.sidebar-focus .reel-card {
    width: min(100%, 420px, calc(74dvh * 9 / 16));
  }
}
.reel-media {
  position: absolute;
  inset: 0;
  /* A quiet placeholder, never a silent black rectangle. */
  background: linear-gradient(155deg, #17251f 0%, #0b1311 72%);
  isolation: isolate;
}
.reel-poster {
  position: absolute;
  inset: 0;
  /* Above the video until a real frame has decoded, so a file that is still
     loading (or fails) shows the Reel’s own thumbnail instead of black. */
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.reel-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}
.reel-media-loading,
.reel-media-status {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-5);
  text-align: center;
}
.reel-media-loading {
  background: rgba(8, 14, 12, 0.38);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  font-weight: 600;
}
.reel-media-status {
  background: rgba(7, 13, 11, 0.8);
  color: #fff;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.reel-media-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.reel-media-status-title {
  margin: var(--s-1) 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.reel-media-status-text {
  margin: 0;
  max-width: 250px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.reel-media-status .btn {
  margin-top: var(--s-2);
}
.reel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-4);
  background: linear-gradient(transparent 0%, transparent 55%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}
.reel-overlay > * {
  pointer-events: auto;
}
.reel-org-info {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-right: var(--s-2);
}
.reel-org-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}
.reel-org-details {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
}
.reel-org-name {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.reel-follow {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.reel-follow.active {
  background: rgba(255, 255, 255, 0.2);
}
.reel-bottom {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
}
.reel-caption-area {
  flex: 1;
  min-width: 0;
}
.reel-cause {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #0e1513;
  background: #fff;
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: var(--s-2);
  gap: 5px;
}
.reel-campaign {
  color: #cfe3d8;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: var(--s-1);
}
.reel-caption {
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.reel-location {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  margin-top: var(--s-2);
}
.reel-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  padding-bottom: var(--s-1);
}
.reel-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.reel-action-btn svg {
  fill: rgba(255, 255, 255, 0.92);
  transition:
    fill 0.15s,
    transform 0.15s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.reel-action-btn:hover svg {
  fill: #fff;
  transform: scale(1.1);
}
.reel-action-btn.active svg {
  fill: #3fa87d;
}
.reel-action-btn .count {
  font-size: 11px;
  font-weight: 600;
}
.reel-stats {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.reel-ctas {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
.reel-donate-btn {
  background: var(--brand) !important;
  color: var(--on-solid) !important;
  font-weight: 700;
}
.reel-volunteer-btn {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-weight: 700;
}

/* ============================================================
   Location-based, one-Reel-at-a-time stage (migration 059)
   ============================================================ */

/* ---- Location chip + radius panel ---- */
.reels-loc-row {
  position: relative;
  display: flex;
  justify-content: center;
}
.reels-loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.reels-loc-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.reels-loc-radius {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11px;
  color: var(--text-3);
}
.reels-loc-panel {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 40;
  width: min(330px, 92vw);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-1);
  box-shadow: var(--shadow-raised);
  text-align: left;
}
.reels-loc-panel.hidden {
  display: none;
}
.reels-loc-field {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}
.reels-loc-radii {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--s-2) 0;
}
.reels-radius-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.reels-radius-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-solid);
}
.reels-loc-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.reels-widen-note {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
}
.reels-widen-note.hidden {
  display: none;
}

/* ---- The stage: exactly one Reel ---- */
.reels-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  outline: none;
  overscroll-behavior: contain;
}
.reels-stage:focus-visible {
  border-radius: var(--r-card);
  box-shadow: 0 0 0 3px var(--tint-strong);
}
.reels-stage-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.reels-stage-status.hidden {
  display: none;
}
.reel-slide,
.reel-slide-inner {
  width: 100%;
}
.reel-slide-inner.from-below {
  animation: reelStepFromBelow 260ms ease-out;
}
.reel-slide-inner.from-above {
  animation: reelStepFromAbove 260ms ease-out;
}
.reel-slide-inner.no-motion {
  animation: none;
}
@keyframes reelStepFromBelow {
  from {
    transform: translateY(26px);
    opacity: 0.55;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes reelStepFromAbove {
  from {
    transform: translateY(-26px);
    opacity: 0.55;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reel-slide-inner {
    animation: none !important;
  }
}
.reels-side-nav {
  position: absolute;
  top: 50%;
  right: -64px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.reels-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.reels-nav-btn:hover:not([disabled]) {
  border-color: var(--accent);
  color: var(--accent);
}
.reels-nav-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}
.reels-nav-btn.active {
  transform: scale(0.94);
}
.reels-nav-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.reels-keyhint {
  margin: var(--s-3) 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}
body.sidebar-focus .reels-stage {
  max-width: 540px;
}
@media (max-width: 1023px) {
  /* No room beside the card: the arrows sit under it, phones swipe. */
  .reels-side-nav {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    margin-top: var(--s-3);
  }
  .reels-keyhint {
    display: none;
  }
}
@media (max-width: 640px) {
  /* Phones: the Reel owns the visible area; swipe is the primary gesture. */
  .reels-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .reels-header {
    padding: 0 var(--s-3);
  }
  .reels-stage {
    max-width: 100%;
  }
  .reels-stage .reel-card {
    width: 100%;
    height: calc(100dvh - 232px);
    min-height: 420px;
    aspect-ratio: auto;
    border-radius: 16px;
  }
}

/* ---- Per-Reel additions ---- */
.reel-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.reel-sound-toggle.active {
  background: rgba(63, 168, 125, 0.92);
  border-color: rgba(63, 168, 125, 0.92);
}
.reel-local-chip {
  display: inline-flex;
  margin-top: var(--s-2);
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(63, 168, 125, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.reel-action-primary {
  font-weight: 700;
}

/* ---- Donation Sheet ---- */
.donation-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}
.donation-sheet.hidden {
  display: none;
}
.donation-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.donation-sheet-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--card-bg);
  border-radius: 16px 16px 0 0;
  padding: var(--s-5);
  max-height: 85vh;
  overflow-y: auto;
  animation: slide-up 0.25s ease-out;
}
@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.donation-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
}
.donation-sheet-header h3 {
  margin: 0;
  font-size: 18px;
}
.donation-sheet-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-2);
  padding: var(--s-1);
}
.donation-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.donation-amount {
  padding: var(--s-3);
  border-radius: 12px;
  border: 2px solid var(--border);
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.donation-amount:hover {
  border-color: var(--brand);
}
.donation-amount.active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-solid);
}
.donation-custom {
  grid-column: 1 / -1;
  padding: var(--s-3);
  border-radius: 12px;
  border: 2px solid var(--border);
  font-size: 16px;
  text-align: center;
}
.donation-recurring {
  margin-bottom: var(--s-3);
  font-size: 14px;
  color: var(--text-2);
}
.donation-note {
  margin-bottom: var(--s-4);
}
.donation-confirm {
  font-size: 16px;
  font-weight: 700;
  padding: var(--s-3);
}
.donation-success {
  text-align: center;
  padding: var(--s-6) 0;
}
.donation-success-icon {
  font-size: 48px;
  color: var(--brand);
  margin-bottom: var(--s-3);
}
.reel-detail-container {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--s-4);
}

/* ---- Expanded Reel viewer (in-page, no native fullscreen required) ----
   The stage — and therefore the currently playing <video> — is never moved
   or re-rendered; it is only laid out over the viewport. Entering and leaving
   keeps the Reel, its playback position and its place in the feed.
   Works in Safari because it is plain CSS, not the Fullscreen API. */
body.reels-expanded,
html.reels-expanded {
  overflow: hidden;
}
.reels-collapse {
  display: none;
}
body.reels-expanded .topbar,
body.reels-expanded .sidebar,
body.reels-expanded .sidebar-restore,
body.reels-expanded .sidebar-scrim,
body.reels-expanded .footer,
body.reels-expanded .assistant-fab,
body.reels-expanded .reels-header,
body.reels-expanded #donation-sheet {
  display: none !important;
}
body.reels-expanded .view {
  padding: 0;
}
body.reels-expanded .reels-container {
  max-width: none;
  margin: 0;
  padding: 0;
}
body.reels-expanded #reels-stage {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: max(56px, calc(env(safe-area-inset-top) + 40px)) max(16px, env(safe-area-inset-right))
    max(74px, calc(env(safe-area-inset-bottom) + 58px)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 30%, #10201b 0%, #050a09 72%);
}
body.reels-expanded #reels-stage:focus-visible {
  box-shadow: none;
}
body.reels-expanded .reel-slide,
body.reels-expanded .reel-slide-inner {
  width: auto;
}
body.reels-expanded .reel-card {
  width: auto;
  height: min(calc(100vh - 132px), calc((100vw - 32px) * 16 / 9));
  height: min(calc(100dvh - 132px), calc((100vw - 32px) * 16 / 9));
  max-width: calc(100vw - 32px);
  border-radius: 14px;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.6);
}
body.reels-expanded .reel-video,
body.reels-expanded .reel-poster {
  /* Full frame, never cropped, whatever the Reel’s shape. */
  object-fit: contain;
}
body.reels-expanded .reels-collapse {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px var(--s-4);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(9, 16, 14, 0.78);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.reels-expanded .reels-collapse:hover {
  background: rgba(24, 40, 34, 0.92);
  border-color: #fff;
}
body.reels-expanded .reels-side-nav {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  right: auto;
  top: auto;
  transform: translateX(-50%);
  flex-direction: row;
  gap: var(--s-3);
  margin: 0;
  z-index: 5;
}
body.reels-expanded .reels-side-nav .reels-nav-btn {
  width: 44px;
  height: 44px;
  background: rgba(9, 16, 14, 0.78);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.reels-expanded .reels-side-nav .reels-nav-count {
  color: rgba(255, 255, 255, 0.9);
}
body.reels-expanded .reels-keyhint {
  display: none;
}
@media (max-height: 520px) {
  body.reels-expanded #reels-stage {
    padding: 48px 12px 58px;
  }
  body.reels-expanded .reel-card {
    height: min(calc(100dvh - 112px), calc((100vw - 24px) * 16 / 9));
  }
}

/* ---- Public pricing (migration 021) ---- */
.pricing-hero {
  text-align: center;
  padding: var(--s-6) var(--s-3) var(--s-4);
}
/* Keep the last plan actions clear of the fixed assistant button. */
.pricing-page {
  padding-bottom: 120px;
}
/* The floating assistant is fixed to the bottom-right of the viewport, so on a
   wide screen it can sit over the right edge of the pricing copy while the page
   scrolls under it. Reserving a gutter at the widths where the content column
   reaches that corner keeps every sentence and every plan action clear of it. */
@media (min-width: 1200px) {
  .pricing-page .pricing-section,
  .pricing-page .pricing-hero {
    padding-right: calc(var(--s-3) + 56px);
  }
}
.pricing-section {
  max-width: 1100px;
  margin: 0 auto var(--s-6);
  padding: 0 var(--s-3);
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-3);
  align-items: stretch;
}
/* The individual section has exactly two plans (free + Impact Personal). */
.plans-grid-pair {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (max-width: 700px) {
  .plans-grid-pair {
    grid-template-columns: 1fr;
  }
}
.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  /* Cards in a row share a height, so the action buttons line up instead of
     floating in the middle of a short card. */
  height: 100%;
}
/* The action always sits at the bottom of the card. */
.plan-card > .btn:last-child,
.plan-card > .btn-block:last-child {
  margin-top: auto;
}
.plan-card.plan-recommended {
  border-color: var(--evergreen-600);
  /* A box-shadow ring follows the card's own radius; an outline would not. */
  box-shadow: 0 0 0 1px var(--evergreen-600);
}
.plan-card .plan-price {
  line-height: 1.15;
}
.plan-card h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.plan-price {
  font-size: 1.6rem;
}
.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  display: grid;
  gap: var(--s-1);
}
.plan-features li::before {
  content: '• ';
  color: var(--evergreen-600);
}
.credit-grid,
.boost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.credit-card {
  text-align: center;
  padding: var(--s-4);
}
.credit-amt {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--evergreen-700);
}
.credit-price {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: var(--s-1);
}

/* ---- Owner monetization / QA ---- */
.owner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.owner-table th,
.owner-table td {
  text-align: left;
  padding: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.owner-table th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--text-2);
}
.plan-row {
  cursor: pointer;
}
.plan-row:hover {
  background: var(--evergreen-50, #eef4f0);
}
.admin-banner {
  background: var(--evergreen-50, #eef4f0);
  border: 1px solid var(--evergreen-200, #cfe3d8);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
}
.toggle-row input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: var(--evergreen-700);
}
.code-block {
  background: #0e1412;
  color: #d7f0e4;
  border-radius: var(--radius);
  padding: var(--s-3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  overflow: auto;
}

/* ---- Pricing commercial hub (Part 14) ---- */
.pill-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.pill-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  font-size: 12.5px;
}
.pill-price strong {
  font-weight: 600;
  color: var(--text-1);
}
.pill-price span {
  color: var(--text-3);
}
.badge-ok {
  background: var(--tint);
  color: var(--accent-strong);
}

/* ============================================================
   Solutions hub + product pages (/solutions…)
   ============================================================ */
.solutions-page {
  padding-top: var(--s-2);
}
.solutions-hero h1 {
  font-family: var(--font-display);
  margin: 0 0 var(--s-2);
}
.solutions-hero p.muted {
  margin: 0 0 var(--s-4);
  max-width: 640px;
}
.sol-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: 13px;
  margin-bottom: var(--s-4);
}
.sol-nav a {
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
}
.sol-nav a:hover {
  color: var(--accent);
}
.sol-nav-sep {
  color: var(--ink-400);
}
.sol-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 640px) {
  .sol-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.sol-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.sol-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
}
.sol-card h2 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0 0 var(--s-2);
}
.sol-card p {
  margin: 0;
}
.sol-contact-card {
  margin-top: var(--s-5);
}
.sol-detail-card {
  padding: var(--s-5);
}
.sol-detail-section {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.sol-detail-section:last-of-type {
  border-bottom: 0;
}
.sol-detail-section h3 {
  margin: 0 0 var(--s-2);
  font-size: 15px;
}
.sol-caps {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--s-1);
}
.sol-caps li {
  font-size: 14px;
}

/* Contact Sales modal */
.sales-modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-raised);
  width: 100%;
  max-width: 560px;
  padding: var(--s-5);
  max-height: 90dvh;
  overflow-y: auto;
}
.sales-success {
  text-align: center;
  padding: var(--s-4) 0 var(--s-2);
}
.sales-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tint);
  color: var(--accent-strong);
  font-size: 24px;
  margin-bottom: var(--s-3);
}

/* ============ Self-serve checkout (/billing, /billing/boost, sheets) ============ */

.ck-clickable {
  cursor: pointer;
  transition:
    border-color 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease;
}
.ck-clickable:hover {
  border-color: var(--accent-strong, #1a6fb5);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.ck-clickable:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.ck-clickable .credit-price {
  margin-bottom: var(--s-2);
}

.ck-modal .ck-body {
  max-height: 70vh;
  overflow-y: auto;
  display: grid;
  gap: var(--s-3);
}
.ck-loading {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
  color: var(--muted, #6b7280);
}
.ck-section h3 {
  margin-top: 0;
}
.ck-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--s-2) 0;
}
.ck-seg-btn {
  background: var(--surface);
  border: 0;
  padding: var(--s-2) var(--s-3);
  font: inherit;
  cursor: pointer;
  color: var(--muted, #6b7280);
}
.ck-seg-btn.on {
  background: var(--tint);
  color: var(--accent-strong, #1a6fb5);
  font-weight: 600;
}
.ck-price {
  font-size: 1.6rem;
  margin: var(--s-1) 0;
}
.ck-price-inline strong {
  font-size: 1.3rem;
  color: var(--evergreen-700, #0f5132);
}
.ck-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  display: grid;
  gap: var(--s-1);
}
.ck-feats li::before {
  content: '✓ ';
  color: var(--evergreen-600, #198754);
}
.ck-orgline {
  font-size: 0.9rem;
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ck-balance {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-1) var(--s-3);
  font-size: 0.9rem;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ck-testmode {
  font-size: 0.82rem;
  color: var(--warn-700, #b45309);
  background: color-mix(in srgb, var(--warn-700, #b45309) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn-700, #b45309) 35%, transparent);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
}
.ck-success {
  text-align: center;
  padding: var(--s-4) 0;
}
.ck-success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--evergreen-600, #198754);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.ck-steps {
  display: flex;
  gap: var(--s-2);
  font-size: 0.8rem;
  color: var(--muted, #6b7280);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.ck-steps span.on {
  color: var(--accent-strong, #1a6fb5);
  font-weight: 600;
}
.ck-targets {
  display: grid;
  gap: var(--s-2);
}
.ck-target {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  background: var(--surface);
  font-size: 0.9rem;
}
.ck-target.on {
  border-color: var(--accent-strong, #1a6fb5);
  box-shadow: 0 0 0 1px var(--accent-strong, #1a6fb5);
}
.ck-target-type {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-strong, #1a6fb5);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  flex: none;
}
.ck-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius);
  flex: none;
}
.ck-objectives {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
}
.ck-obj {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  background: var(--surface);
  font-size: 0.9rem;
}
.ck-obj.on {
  border-color: var(--accent-strong, #1a6fb5);
  box-shadow: 0 0 0 1px var(--accent-strong, #1a6fb5);
}
.ck-summary {
  display: grid;
  gap: var(--s-2);
  font-size: 0.9rem;
}
.ck-summary > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-2);
}
.ck-summary span {
  color: var(--muted, #6b7280);
}

/* ============================================================
   Founder Analytics — private growth & impact intelligence.
   Founder-only surface (server-enforced). Flat, editorial, and
   consistent with the Owner Center's visual language.
   ============================================================ */

.founder {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-8);
}

.f-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.f-head h1 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  letter-spacing: -0.01em;
}
.f-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: var(--s-1);
}
.f-head-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.f-range {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.f-range-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.f-range-btn + .f-range-btn {
  border-left: 1px solid var(--border);
}
.f-range-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}
.f-range-btn.active {
  background: var(--brand);
  color: var(--on-solid);
}

/* Ask bar */
.f-ask {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-left: 3px solid var(--brand);
}
.f-ask-head {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  flex-wrap: wrap;
}
.f-ask-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.f-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px 11px;
  font: inherit;
  font-size: 0.74rem;
  color: var(--text-2);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.f-chip:hover {
  background: var(--tint);
  color: var(--accent-strong);
  border-color: var(--tint-strong);
}
.f-ask-out {
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}
.f-answer p {
  margin: 0 0 var(--s-2);
  line-height: 1.5;
}
.f-narrative {
  color: var(--text-2);
  font-style: italic;
}
.f-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0;
}
.f-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 9px;
  background: var(--surface-2);
}

/* Alerts */
.f-alerts {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
}
.f-alerts-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: var(--s-2);
}
.f-alert-list {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.f-alert {
  border-left: 3px solid var(--border);
  border-radius: 8px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
}
.f-alert-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 2px;
}
.f-alert-warning {
  border-left-color: var(--danger);
}
.f-alert-critical {
  border-left-color: var(--danger-700);
}
.f-alert-watch {
  border-left-color: var(--sun-700);
}
.f-alert-info {
  border-left-color: var(--brand);
}

/* Body: nav + panel */
.f-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.f-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--s-4);
}
.f-nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.f-nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
.f-nav-item.active {
  background: var(--tint);
  color: var(--accent-strong);
  font-weight: 650;
}
.f-nav-ico {
  font-size: 0.7rem;
  opacity: 0.7;
}
.f-panel {
  min-width: 0;
}
.f-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.f-section-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

/* KPI cards */
.f-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
}
.f-kpi {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.f-kpi-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-3);
}
.f-kpi-value {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.f-kpi-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.f-delta {
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
}
.f-delta.up {
  color: var(--accent-strong);
  background: var(--tint);
}
.f-delta.down {
  color: var(--danger-700);
  background: var(--danger-100);
}
.f-delta.flat {
  color: var(--text-3);
  background: var(--surface-2);
  font-weight: 600;
}
.f-vs {
  font-size: 0.7rem;
  color: var(--text-3);
}

/* Charts */
.f-chart {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: var(--s-3);
}
.f-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: var(--f-chart-h, 96px);
}
.f-bar {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  min-width: 2px;
  height: 100%;
}
.f-bar > span {
  width: 100%;
  background: var(--brand);
  opacity: 0.75;
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s ease;
}
.f-bar:hover > span {
  opacity: 1;
}
.f-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-2);
  font-size: 0.68rem;
  color: var(--text-3);
}

/* Tables */
.f-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.f-table-wrap .owner-table {
  width: 100%;
  border-collapse: collapse;
}
.f-table-wrap .owner-table th,
.f-table-wrap .owner-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.f-table-wrap .owner-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Daily brief */
.f-brief {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.f-brief-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.f-brief-head h3 {
  margin: 0;
  font-size: 1.1rem;
}
.f-brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-4);
}
.f-brief-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: var(--s-1);
}
.f-brief-list {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 3px;
  font-size: 0.86rem;
}
.f-brief-analysis {
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}
.f-brief-analysis p {
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .f-body {
    grid-template-columns: 1fr;
  }
  .f-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--s-1);
  }
  .f-nav-item {
    white-space: nowrap;
  }
}

/* Founder Analytics is a dense read: print only the panel itself. */
@media print {
  .topbar,
  .sidebar,
  .sidebar-restore,
  .footer,
  .f-head-actions,
  .f-nav,
  .f-ask,
  .f-alerts,
  .toast-root {
    display: none !important;
  }
  .f-body {
    grid-template-columns: 1fr;
  }
  .founder {
    padding: 0;
  }
  .f-kpi,
  .f-chart,
  .f-table-wrap,
  .f-brief {
    break-inside: avoid;
  }
}

/* ============================================================
   Impact AI — Coming Soon
   A calm, confident "not yet" surface: no prompt box, no Send,
   no action. Paper surfaces, hairline borders, and brand green
   reserved for real actions. Introduces interest without
   pretending the feature already works.
   ============================================================ */
.coming-soon {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-4) var(--s-9);
}
.cs-hero {
  text-align: center;
  padding: var(--s-6) 0 var(--s-5);
}
.cs-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--evergreen-700);
  background: var(--tint);
  border: 1px solid var(--tint-strong);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}
.cs-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-1);
  color: var(--text);
}
.cs-tagline {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--s-2);
}
.cs-desc {
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.6;
}
.cs-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.cs-cap {
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.cs-cap:hover {
  border-color: var(--tint-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.cs-cap-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.cs-cap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.cs-cap-list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-2);
  line-height: 1.45;
}
.cs-cap-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tint-strong);
  box-shadow: inset 0 0 0 2px var(--evergreen-700);
}
.cs-foot {
  margin: var(--s-5) auto 0;
  max-width: 62ch;
  text-align: center;
  line-height: 1.6;
}

/* Pricing — AI block while Impact AI is Coming Soon */
.coming-soon-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.coming-soon-note p {
  margin: 0;
}

/* Founder AI Lab — internal-only banner */
.cs-lab-banner {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

/* ============================================================
   Impact United — Community Offers (communityOffers.js)
   Reuses the existing card/badge/field/button design system; only
   layout helpers are added. Accessible by default: visible focus
   states come from the shared system, motion is disabled under
   prefers-reduced-motion, and status text is never colour-only.
   ============================================================ */

.cof-shell {
  width: 100%;
  max-width: var(--content-max, 1080px);
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-8);
}

.cof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
}
.cof-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cof-card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cof-detail {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--s-3);
  align-items: start;
}
@media (max-width: 860px) {
  .cof-detail {
    grid-template-columns: 1fr;
  }
}
.cof-detail h3 {
  margin: var(--s-3) 0 var(--s-1);
}
.cof-detail h3:first-child {
  margin-top: 0;
}
.cof-actions {
  margin-top: var(--s-3);
}
.cof-actions .btn {
  width: 100%;
}

.cof-stat {
  min-width: 108px;
  text-decoration: none;
}
.cof-stat .card-body {
  padding: var(--s-3);
}
.cof-stat-n {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.cof-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-3);
  counter-reset: cof-step;
}
.cof-steps li {
  font-size: 12px;
  color: var(--text-muted, #5b6660);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  counter-increment: cof-step;
}
.cof-steps li::before {
  content: counter(cof-step) '. ';
  font-weight: 700;
}
.cof-steps li.is-current {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  font-weight: 600;
}
.cof-steps li.is-done {
  border-color: var(--accent-strong);
}

.cof-catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.cof-catcard {
  text-align: left;
  cursor: pointer;
  background: var(--surface-1);
  font: inherit;
  color: inherit;
}
.cof-catcard.is-selected {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 2px var(--tint);
}
.cof-catcard:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.cof-preview .card-body {
  background: var(--surface-2, var(--surface-1));
}

.cof-apps {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cof-app-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.cof-app-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
/* Six columns of real data cannot fit a phone (the table's min-content is
   wider than the card), so the report scrolls sideways instead of clipping the
   last columns — the same approach the schools gradebook uses. */
.cof-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cof-table th,
.cof-table td {
  text-align: left;
  padding: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.cof-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted, #5b6660);
}

@media (prefers-reduced-motion: reduce) {
  .cof-catcard,
  .cof-card {
    transition: none;
  }
}

/* ============================================================
   Impact AI assistant — shared side panel / mobile drawer.
   The panel is appended to <body>, so it never disturbs #view or
   the page's own form state.
   ============================================================ */

.assistant-fab {
  /* A fixed control can sit on top of whatever scrolls under it. The wide
     label pill covered pricing-card copy and plan actions on desktop, so this
     is a compact circular button: the label lives in the tooltip and
     accessible name, and the reach of the button no longer crosses the
     content column. */
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-solid);
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.assistant-fab-label {
  display: none;
}
.assistant-fab:hover {
  background: var(--brand-hover);
}
.assistant-fab:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
}
body.assistant-open .assistant-fab {
  display: none;
}
/* Verification reviewers work in a focused workspace; the consumer assistant
   is not part of that job. */
body.reviewer-workspace .assistant-fab,
body.reviewer-workspace .assistant-panel {
  display: none !important;
}

.assistant-panel {
  position: fixed;
  top: 0;
  right: 0;
  /* Height is driven by visualViewport in assistant.js so a phone keyboard
     cannot cover the composer. 100% is the fallback where that API is absent. */
  height: 100%;
  z-index: 70;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
}
.assistant-resize {
  position: absolute;
  top: 0;
  left: -3px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
}
.assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.assistant-id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.assistant-idtext {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.assistant-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.assistant-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistant-tag {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.2;
}
/* Short, plain statement of what this assistant can do, plus the page it is on.
   Replaces the old full-width context row: more information, fewer pixels. */
.assistant-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 6px 14px 7px;
  border-bottom: 1px solid var(--line);
}
.assistant-sub-text {
  flex: 1 1 190px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
/* Server-sourced limits note (e.g. free-form answers while AI is not fully
   released). Never a client-written claim. */
.assistant-note {
  margin: 0;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-100);
  color: var(--text-2);
  font-size: 10.5px;
  line-height: 1.4;
}
.assistant-head-actions {
  display: flex;
  gap: 2px;
}
.assistant-icon {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 15px;
  cursor: pointer;
}
.assistant-icon:hover {
  background: var(--ink-100);
}
.assistant-icon:focus-visible {
  outline: 2px solid var(--focus-ring);
}
.assistant-context {
  border: 0;
  padding: 0;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.assistant-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-100);
  color: var(--text-2);
  font-size: 12px;
}
button.assistant-chip-btn {
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
}
button.assistant-chip-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.assistant-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assistant-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Small role label above a bubble, so "who said this" never relies on colour
   and alignment alone. */
.assistant-who {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.assistant-msg-user .assistant-who {
  align-self: flex-end;
}
.assistant-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
}
.assistant-msg-user {
  align-items: flex-end;
}
.assistant-bubble {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ink-100);
  font-size: 14px;
  line-height: 1.5;
}
.assistant-msg-user .assistant-bubble {
  background: var(--brand);
  color: #fff;
}
.assistant-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
}
.assistant-msg-foot {
  margin-top: 6px;
}
.assistant-src {
  font-size: 10.5px;
  color: var(--muted);
}
.assistant-refs {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.assistant-ref {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.assistant-msg-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.assistant-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.assistant-start {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.assistant-start-title {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Unavailable state — shown instead of a chat box that could only fail. */
.assistant-unavail {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-100);
  font-size: 13px;
}
.assistant-error {
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid #e7b4b4;
  background: #fdf3f3;
  color: #8a2f2f;
  font-size: 13px;
}
.assistant-form {
  border-top: 1px solid var(--line);
  padding: 10px 12px 12px;
}
.assistant-form textarea {
  width: 100%;
  /* Auto-grown from one row by assistant.js; no manual resize handle, which
     would fight the keyboard-aware layout. */
  min-height: 44px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit;
  line-height: 1.45;
  background: var(--card-bg);
  color: var(--text);
}
.assistant-form textarea:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.assistant-form textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.assistant-form-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.assistant-foot {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--muted);
}
.assistant-public-note {
  padding: 8px 14px 12px;
  color: var(--muted);
}
.assistant-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.assistant-history-open {
  flex: 1;
  text-align: left;
}
.assistant-escalate .field {
  margin-bottom: 10px;
}
.assistant-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  margin: 6px 0;
}
.assistant-quick-security {
  margin-top: 10px;
  text-align: center;
}
.assistant-done {
  text-align: center;
  padding: 8px;
}
.assistant-panel.is-collapsed .assistant-body,
.assistant-panel.is-collapsed .assistant-form,
.assistant-panel.is-collapsed .assistant-public-note,
.assistant-panel.is-collapsed .assistant-sub,
.assistant-panel.is-collapsed .assistant-note {
  display: none;
}
/* Folded while the user types on a phone (see assistant.js) — the transcript
   needs the room more than the explanation does at that moment. */
.assistant-panel.is-compact .assistant-sub,
.assistant-panel.is-compact .assistant-note {
  display: none;
}
.sidenav-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
}

@media (max-width: 720px) {
  .assistant-panel {
    width: 100vw;
    box-shadow: none;
  }
  .assistant-resize {
    display: none;
  }
  /* Room for the home indicator under the composer. */
  .assistant-form {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  /* On a phone every vertical pixel of chrome is a message the user cannot
     see, so the redundant "automated assistant" sub-label goes; the AI badge,
     the assistant name and the capability line all still say it. */
  .assistant-tag {
    display: none;
  }
  .assistant-head {
    padding: 10px 12px;
  }
  .assistant-fab {
    right: 14px;
    bottom: 96px;
  }
  .assistant-fab-label {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .assistant-panel {
    animation: assistant-in 0.18s ease-out;
  }
  @keyframes assistant-in {
    from {
      transform: translateX(16px);
      opacity: 0.6;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}

@media print {
  .assistant-panel,
  .assistant-fab {
    display: none !important;
  }
}

/* ============================================================
   Two assistants + two pricing sections (migration 052)
   ============================================================ */

/* Reserve the fixed assistant button's column on wide viewports. The 52px
   button sits at right:18px, and the pricing grid is wide enough that the
   outer plan card reached underneath it — the last words of a feature line
   were covered. The button no longer crosses the content column. */
@media (min-width: 900px) {
  #pricing-body {
    padding-right: 56px;
  }
}

.pricing-tabs {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2, var(--surface));
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.pricing-tab {
  border: 0;
  background: transparent;
  color: var(--muted, inherit);
  font: inherit;
  font-weight: 600;
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.pricing-tab:hover {
  color: inherit;
}
.pricing-tab.on {
  /* --accent is mint in the dark theme, so the label must come from
     --on-solid (near-black there, white on the light theme's dark green).
     The old --accent-contrast token was never defined, so this fell back to
     white-on-mint and looked like a disabled control. */
  background: var(--accent, #111);
  color: var(--on-solid);
}
@media (max-width: 640px) {
  .pricing-tabs {
    width: 100%;
    border-radius: var(--r-2, 12px);
  }
  .pricing-tab {
    flex: 1 1 100%;
    text-align: center;
  }
}

.ai-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.ai-compare-card h4,
.ai-compare-card strong {
  font-size: 1rem;
}

.coming-soon-note {
  border-style: dashed;
}

/* ---- assistant panel: assistant selector, usage, upsell ---- */

.assistant-switch {
  display: flex;
  gap: 6px;
  padding: 8px 10px 0;
}
.assistant-switch-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 5px 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.assistant-switch-btn .tiny {
  font-size: 0.68rem;
  line-height: 1.2;
}
.assistant-switch-btn.on {
  border-color: var(--accent, #111);
  box-shadow: inset 0 0 0 1px var(--accent, #111);
}
.assistant-switch-btn.locked:not(.on) .assistant-switch-name::after {
  content: ' 🔒';
  font-size: 0.75em;
}
.assistant-switch-name {
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.2;
}
.assistant-usage {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 12px 6px;
  font-size: 0.72rem;
  color: var(--muted, inherit);
  flex-wrap: wrap;
}
.assistant-badge-business {
  background: var(--accent, #111);
  color: var(--accent-contrast, #fff);
}
.assistant-upsell {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.assistant-upsell-title {
  margin: 0;
  font-size: 1.05rem;
}
.assistant-upsell-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-2);
}
.assistant-upsell-card {
  padding: var(--s-3);
}

/* ============================================================
   Impact for Schools — classroom workspace (classroom.js)
   Original design language: quiet surfaces, one clear next action,
   plain labels. Reuses the shared tokens above.
   ============================================================ */

.cw-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.cw-shell .card {
  margin: 0;
}

.cw-nav {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface, var(--bg));
  scrollbar-width: none;
}
.cw-nav::-webkit-scrollbar {
  display: none;
}
.cw-nav-link {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.cw-nav-link:hover {
  background: var(--canvas-100, rgba(0, 0, 0, 0.05));
  color: inherit;
}
.cw-nav-link.is-active {
  background: var(--accent, #1f6feb);
  color: var(--accent-contrast, #fff);
}

.cw-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.82rem;
}
.cw-role {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--muted);
}

.cw-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
}
.cw-subtitle {
  margin: var(--s-5) 0 0;
  font-size: 1.15rem;
}
.cw-eyebrow {
  margin: 0 0 var(--s-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cw-hero {
  border-left: 4px solid var(--accent, #1f6feb);
}
.cw-hero-title {
  margin: 0 0 var(--s-2);
  font-size: 1.4rem;
}
.cw-hero-meta {
  margin: 0 0 var(--s-3);
  color: var(--muted);
  font-size: 0.9rem;
}

.cw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-2);
}
.cw-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cw-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cw-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cw-count {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-2, 12px);
  background: var(--surface, var(--bg));
}
.cw-count-num {
  font-size: 1.4rem;
  font-weight: 700;
}
.cw-count-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.cw-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.cw-row:last-child {
  border-bottom: 0;
}
a.cw-row:hover {
  background: var(--canvas-50, rgba(0, 0, 0, 0.02));
}
.cw-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cw-row-main strong {
  font-weight: 650;
}
.cw-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.cw-chevron {
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
}

.cw-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cw-head-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.cw-back {
  font-size: 0.84rem;
  color: var(--muted);
  text-decoration: none;
}
.cw-back:hover {
  text-decoration: underline;
}

.cw-md {
  font-size: 0.95rem;
  line-height: 1.55;
}
.cw-md p {
  margin: 0 0 var(--s-3);
}
.cw-md ul,
.cw-md ol {
  margin: 0 0 var(--s-3);
  padding-left: 1.2rem;
}
.cw-md li {
  margin-bottom: 4px;
}
.cw-instructions {
  background: var(--canvas-50, rgba(0, 0, 0, 0.02));
  padding: var(--s-3);
  border-radius: var(--radius-2, 12px);
}
.cw-submission {
  white-space: pre-wrap;
}
.cw-list {
  margin: 0 0 var(--s-3);
  padding-left: 1.15rem;
  font-size: 0.92rem;
}
.cw-flow li {
  margin-bottom: 6px;
}
.cw-facts {
  display: grid;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.cw-facts > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-2);
}
.cw-facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.cw-facts dd {
  margin: 0;
  font-size: 0.92rem;
}

.cw-announce,
.cw-feedback,
.cw-project {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.cw-announce:last-child,
.cw-feedback:last-child,
.cw-project:last-child {
  border-bottom: 0;
}
.cw-announce header,
.cw-feedback header,
.cw-project header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s-2);
}
.cw-project header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.cw-replies {
  margin-top: var(--s-3);
  padding-left: var(--s-3);
  border-left: 2px solid var(--border);
}
.cw-reply {
  margin-bottom: var(--s-2);
  font-size: 0.92rem;
}
.cw-feedback-card {
  border-left: 4px solid var(--ok, #2f9e44);
}

.cw-class-card {
  display: block;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-2, 14px);
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--s-3);
  background: var(--surface, var(--bg));
}
.cw-class-card:hover {
  border-color: var(--border-strong);
}
.cw-class-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.cw-class-head h2 {
  margin: 0;
  font-size: 1.1rem;
}
.cw-project-title {
  margin: 0;
  font-size: 1.05rem;
}

.cw-tasks {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.cw-task {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.9rem;
}
.cw-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
}
.cw-dot-doing {
  background: var(--accent, #1f6feb);
}
.cw-dot-done {
  background: var(--ok, #2f9e44);
}

.cw-rubric {
  margin-top: var(--s-3);
}
.cw-rubric-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}
.cw-rubric-row:last-child {
  border-bottom: 0;
}

.cw-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--canvas-100, rgba(0, 0, 0, 0.08));
  overflow: hidden;
  margin-bottom: var(--s-2);
}
.cw-progress span {
  display: block;
  height: 100%;
  background: var(--accent, #1f6feb);
}

.cw-private-note,
.cw-callout {
  padding: var(--s-3);
  border-radius: var(--radius-2, 12px);
  border: 1px solid var(--border);
  background: var(--canvas-50, rgba(0, 0, 0, 0.03));
  font-size: 0.9rem;
}
.cw-callout {
  margin-top: var(--s-3);
}

.cw-table {
  display: flex;
  flex-direction: column;
}
.cw-table-row {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) repeat(3, minmax(48px, 0.6fr)) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.cw-table-row:last-child {
  border-bottom: 0;
}
.cw-checklist .cw-table-row {
  grid-template-columns: minmax(200px, 3fr) repeat(3, 72px);
}
.cw-table-head {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.cw-yes {
  color: var(--ok, #2f9e44);
  font-weight: 700;
}
.cw-no {
  color: var(--muted);
}

.cw-code,
.cw-code-mini > div {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-2, 12px);
  padding: var(--s-3);
}
.cw-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.cw-code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  padding: var(--s-2) 0;
}
.cw-code-mini {
  display: grid;
  gap: var(--s-2);
}
.cw-code-mini strong {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  display: block;
}

.cw-demo-banner {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-2, 12px);
  border: 1px solid var(--accent, #1f6feb);
  background: color-mix(in srgb, var(--accent, #1f6feb) 10%, transparent);
  font-size: 0.88rem;
}
.cw-demo-banner-lg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cw-demo-chip {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent, #1f6feb);
  color: var(--accent, #1f6feb);
}
.cw-gate-closed {
  border-left: 4px solid var(--warn, #e8590c);
}

.cw-role-card {
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-2, 14px);
  background: var(--surface, var(--bg));
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cw-role-card h3 {
  margin: 0;
  font-size: 1rem;
}

.cw-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-2, 14px);
  overflow: hidden;
  background: var(--surface, var(--bg));
}
.cw-preview header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  background: var(--canvas-50, rgba(0, 0, 0, 0.03));
}
.cw-preview-body {
  padding: var(--s-3);
}
.cw-preview-hero {
  margin: 0 0 var(--s-2);
  font-weight: 700;
}
.cw-preview-foot {
  margin-top: var(--s-3);
}

.cw-entry {
  max-width: 720px;
}
.cw-entry-card {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-3, 18px);
  background: var(--surface, var(--bg));
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.school-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius-3, 18px);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--surface, var(--bg));
}
.school-entry-title {
  margin: 0 0 4px;
  font-weight: 700;
}
.school-entry-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.school-entry-option {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2, 14px);
  text-decoration: none;
  color: inherit;
}
.school-entry-option:hover {
  border-color: var(--accent, #1f6feb);
}
.school-entry-option span {
  display: flex;
  flex-direction: column;
}
.school-entry-option small {
  color: var(--muted);
  font-size: 0.8rem;
}
.school-entry-icon {
  font-size: 1.4rem;
}

/* ============================================================
   Impact for Schools — Volunteering Only (schoolVolunteer.js)
   The program console and the join panel reuse the shared .field/.input
   primitives; these are the two helpers they add — a labelled field whose
   label wraps the control, and the school/admin checkbox row.
   ============================================================ */
.field > .label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: var(--s-2);
  color: var(--text);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: 13.5px;
  margin: var(--s-2) 0;
  cursor: pointer;
}

.checkbox-row input[type='checkbox'] {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--evergreen-700);
}

.cw-code-value {
  word-break: break-all;
}

/* The setup cards on the application page are buttons in a grid: reset the
   button chrome so the card styling reads as the control. */
button.cw-role-card {
  font: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.cw-role-card.is-selected {
  border-color: var(--evergreen-700);
  box-shadow: 0 0 0 3px var(--evergreen-100);
}

@media (max-width: 640px) {
  .cw-shell {
    padding: var(--s-3) var(--s-3) var(--s-7);
  }
  .cw-title {
    font-size: 1.35rem;
  }
  .cw-table-row {
    grid-template-columns: 1fr auto;
  }
  .cw-checklist .cw-table-row {
    grid-template-columns: 1fr repeat(3, 46px);
  }
  .cw-facts > div {
    grid-template-columns: 1fr;
  }
  .cw-page-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Owner Preview Center (migration 061) — owner-only workspace
   ============================================================ */

/* The demo preview banner sits in the page flow (the founder masking pill is
   fixed at the top, so two fixed bars would overlap). */
#demo-preview-pill {
  position: static;
  background: var(--sky-700);
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.opc {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.opc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.opc-head h1 {
  margin: var(--s-2) 0 var(--s-1);
  font-size: 28px;
}
.opc-head-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.opc-locked {
  max-width: 680px;
  margin: var(--s-6) auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.opc-banner {
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
}
.opc-banner.demo {
  background: var(--sky-100);
  border-color: var(--sky-700);
}
.opc-banner.owner {
  background: var(--tint);
  border-color: var(--tint-strong);
}
.opc-banner-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: 13px;
}
.opc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
}
.opc-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 900px) {
  .opc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.opc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--s-3);
  max-height: 80vh;
  overflow: auto;
}
.opc-nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.opc-nav-item:hover {
  background: var(--surface-2);
}
.opc-nav-item.active {
  background: var(--tint);
  border-color: var(--tint-strong);
  color: var(--accent-strong);
  font-weight: 600;
}
.opc-main {
  min-width: 0;
}
.opc-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.opc-card {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.opc-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
}
.opc-card-head h3 {
  margin: 0 0 2px;
  font-size: 16px;
}
.opc-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.opc-chip.ok {
  background: var(--tint);
  color: var(--accent-strong);
  border-color: var(--tint-strong);
}
.opc-chip.demo {
  background: var(--sky-100);
  color: var(--sky-700);
  border-color: var(--sky-700);
}
.opc-chip.partial {
  background: var(--sun-100);
  color: var(--sun-700);
  border-color: var(--sun-700);
}
.opc-chip.blocked {
  background: var(--coral-100);
  color: var(--coral-700);
  border-color: var(--coral-700);
}
.opc-chip.none {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border-strong);
}
.opc-flag {
  color: var(--coral-700);
  font-size: 12px;
  margin: 0;
}
.opc-integration {
  color: var(--sun-700);
  margin: 0;
}
.opc-actions {
  flex-wrap: wrap;
  gap: var(--s-2);
}
.opc-feedback {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: 1px dashed var(--border);
  padding-top: var(--s-2);
}
.opc-filter {
  max-width: 240px;
}
.opc-flow-select {
  max-width: 420px;
}
.opc-steps {
  list-style: none;
  margin: var(--s-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.opc-step-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.opc-step-btn:hover {
  background: var(--surface-2);
}
.opc-steps li.active .opc-step-btn {
  background: var(--tint);
  border-color: var(--tint-strong);
}
.opc-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.opc-step-detail {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-3);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.opc-table-wrap {
  overflow-x: auto;
  margin-top: var(--s-3);
}
.opc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.opc-table th,
.opc-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.opc-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.opc-subhead {
  margin: var(--s-5) 0 0;
  font-size: 15px;
}

/* ============================================================
   Impact Personal AI (migration 062) — the individual's own
   assistant. Uses the same tokens, chips, badges and cards as the
   rest of Impact so it reads as the same product, not a bolt-on.
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pai {
  max-width: 880px;
  margin: 0 auto;
}
.pai-head {
  margin-bottom: var(--s-4);
}
.pai-title {
  margin: 0;
  font-size: 26px;
}
.pai-sub {
  margin: var(--s-1) 0 0;
  max-width: 62ch;
}
.pai-free {
  flex: 0 0 auto;
}
.pai-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.pai-quota {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border);
}
.pai-quota-low {
  border-color: var(--warn, #b8860b);
}
.pai-notice {
  margin: var(--s-2) 0 0;
}
.pai-chat {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pai-thread {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: 58vh;
  overflow-y: auto;
}
.pai-empty {
  margin: 0;
}
.pai-msg {
  border-radius: var(--r-2, 12px);
  padding: var(--s-3);
  border: 1px solid var(--border);
}
.pai-msg-me {
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
}
.pai-msg-ai {
  background: var(--surface, transparent);
  border-left: 3px solid var(--accent, #1e6b4f);
}
.pai-msg-who {
  margin-bottom: 4px;
}
.pai-msg-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}
.pai-msg-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.pai-composer {
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}
.pai-input {
  width: 100%;
  resize: vertical;
  font: inherit;
}
.pai-composer-foot {
  margin-top: var(--s-2);
  align-items: center;
}
.pai-loading,
.pai-error,
.pai-limit {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2, 12px);
  font-size: 13px;
}
.pai-loading {
  background: var(--surface-2, rgba(255, 255, 255, 0.05));
  color: var(--text-2, inherit);
}
.pai-error {
  flex-wrap: wrap;
  border: 1px solid var(--danger, #a33);
  background: rgba(170, 51, 51, 0.08);
}
.pai-limit {
  display: block;
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
}
.pai-starters,
.pai-history {
  margin-top: var(--s-3);
}
.pai-chip-wrap,
.pai-history {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.pai-starter {
  cursor: pointer;
  text-align: left;
}
.pai-starter-disabled {
  opacity: 0.55;
  cursor: default;
}
.pai-cap {
  margin-top: var(--s-3);
}
.pai-unavailable {
  margin-bottom: var(--s-3);
}
.pai-disclaimer,
.pai-foot {
  margin-top: var(--s-3);
}
.pai-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* ============================================================
   DESIGN-LANGUAGE UNIFICATION — app ⇄ public website
   ------------------------------------------------------------
   The public website (public/site/site.css, the --iu-* tokens) is
   the design reference for the whole product. This section restyles
   the primitives the app already uses — type, buttons, fields,
   cards, chips, badges, empty/loading states, toasts — plus the
   signed-out auth shell, so marketing and app read as one product.

   It is appended last on purpose: at equal specificity these rules
   win over the older component rules above, which keeps the change
   reviewable in one place instead of scattered through 9k lines.
   No behaviour, route, role or API contract depends on any of it.
   ============================================================ */

/* ---------- Type: one family, the website's tight display tracking ---------- */
h1,
h2,
h3 {
  font-family: var(--font);
  font-weight: 750;
  letter-spacing: -0.036em;
  line-height: 1.16;
}
h1 {
  font-size: 30px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 17px;
}
.hero h1 {
  font-size: clamp(34px, 5.2vw, 46px);
  letter-spacing: -0.062em;
  line-height: 1.04;
  font-weight: 780;
}

/* ---------- Focus: the website's cyan ring, everywhere ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ---------- Buttons ---------- */
.btn {
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-control);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
  }
}
.btn-primary {
  min-height: 46px;
  font-size: 14px;
  background: var(--brand);
  color: var(--on-solid);
}
.btn-primary:hover {
  background: var(--brand-hover);
}
.btn-primary:disabled,
.btn-primary[aria-disabled='true'] {
  opacity: 0.6;
  transform: none;
}
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--surface);
}
.btn-ghost {
  color: var(--brand);
  font-weight: 650;
}
.btn-ghost:hover {
  background: var(--tint);
  color: var(--brand-hover);
}
.btn-sm {
  min-height: 36px;
  padding: 0 13px;
  font-size: 12.5px;
}
.btn-block {
  min-height: 46px;
}

/* ---------- Fields ---------- */
.field label,
.field-label {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.005em;
  color: var(--text-2);
}
.field .hint,
.hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}
/*
 * ONE canonical field treatment.
 *
 * `.input`/`.select` used to be declared twice with different heights,
 * borders and font sizes, and several forms (Recruiting filters, the school
 * workspace request) rendered plain <input>/<select> with no class at all —
 * which is why those pages showed tiny grey native boxes next to proper
 * Impact fields. The `.field` selectors below mean a control is styled by
 * being part of a form field, with or without the helper class, so a new form
 * cannot silently regress.
 */
.input,
.select,
textarea.input,
.field input:not([type='checkbox']):not([type='radio']),
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
}
textarea.input,
.field textarea {
  padding: var(--s-3);
  min-height: 112px;
  resize: vertical;
}
select,
.select,
.field select {
  /* Keep the native arrow and keyboard behaviour; only the box is ours. */
  padding-right: 34px;
  cursor: pointer;
}
.input:hover,
.select:hover,
textarea.input:hover,
.field input:not([type='checkbox']):not([type='radio']):hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--brand);
}
.input:focus,
.select:focus,
textarea.input:focus,
.field input:not([type='checkbox']):not([type='radio']):focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--tint);
}
.input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
}
/* Checkboxes keep their native control but get a consistent size, colour and
   label alignment wherever they appear. */
input[type='checkbox'],
input[type='radio'] {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.checkbox-row,
label.row input[type='checkbox'] {
  align-items: flex-start;
  line-height: 1.45;
}
.checkbox-row input[type='checkbox'] {
  margin-top: 2px;
}
.form-error,
.form-success {
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.5;
}
.form-error {
  background: var(--danger-100);
  border-color: color-mix(in srgb, var(--danger-700) 28%, transparent);
}
.form-success {
  background: var(--tint);
  border-color: var(--tint-strong);
}
.field-error {
  font-size: 12px;
}

/* ---------- Surfaces ---------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: var(--s-6);
}
.divider {
  height: 1px;
  background: var(--hairline);
  margin: var(--s-5) 0;
}

/* ---------- Chips, pills and badges ---------- */
.chip {
  min-height: 34px;
  padding: 0 13px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}
.chip:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--surface);
}
.chip.selected,
.chip[aria-pressed='true'] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-solid);
}
.badge {
  border-radius: var(--r-pill);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.005em;
}

/* ---------- Loading and empty states ---------- */
.skeleton {
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--text-3) 14%, transparent);
}
.empty-art,
.empty-state {
  border-radius: var(--r-card);
}

/* ---------- Toasts ---------- */
.toast {
  border-radius: var(--r-control);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-raised);
}

/* The mark follows the brand token in both themes (the SVG uses currentColor). */
.brand-mark {
  color: var(--brand);
}

/* ---------- Signed-out auth shell ---------- */
/* The auth routes use the marketing website's own framing: the marketing
   panel on the left, the form on the right, nothing else competing. The app
   chrome (sidebar, top bar, drawer) is hidden here — a signed-out visitor has
   no workspace to navigate — while the footer (and with it the live
   connection indicator) stays visible. */
body.is-auth .topbar,
body.is-auth .sidebar,
body.is-auth .sidebar-restore,
body.is-auth .sidebar-scrim {
  display: none;
}
body.is-auth .view {
  max-width: none;
  padding: 0;
}
/* The wide-screen layout reserves 264px for the sidebar via .app-body's
   left margin. Auth routes hide the sidebar entirely, so that offset must be
   reclaimed too — otherwise the sign-in/up shell sits in the right 80% of the
   screen with a dead 264px gutter down the left. */
body.is-auth .app-body {
  margin-left: 0;
}
body.is-auth .footer {
  max-width: min(1160px, calc(100% - 48px));
}

/* ---------- First-time setup shell (onboarding + US eligibility) ---------- */
/* Setup is a focused task, not a tour of the app. While it is unfinished the
   workspace chrome is REMOVED (not collapsed): sidebar, mobile top bar, the
   drawer scrim, the composer, the bottom navigation, the Ask Impact button and
   the footer. The onboarding shell below is the entire page. */
body.is-onboarding .topbar,
body.is-onboarding .sidebar,
body.is-onboarding .sidebar-restore,
body.is-onboarding .sidebar-scrim,
body.is-onboarding .bottom-nav,
body.is-onboarding .assistant-fab,
body.is-onboarding .assistant-panel,
body.is-onboarding .footer {
  display: none !important;
}
body.is-onboarding .app-body {
  margin-left: 0;
}
body.is-onboarding .view {
  max-width: none;
  padding: 0;
  outline: none;
}
body.is-onboarding .onboarding {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.onb-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      1200px 500px at 50% -10%,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 70%
    ),
    var(--bg);
}
.onb-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.onb-topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.onb-topbar .brand-mark svg {
  border-radius: 8px;
  display: block;
}
.onb-topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.onb-main {
  width: min(660px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 6vw, 56px) clamp(16px, 4vw, 24px) 64px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.onb-stepmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: 10px;
}
.onb-shell .onb-progress {
  margin-bottom: var(--s-6);
}

/* US eligibility / availability */
.elig-question {
  font-family: var(--font-serif, inherit);
  font-size: clamp(1.55rem, 4vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
}
.elig-choices {
  display: grid;
  gap: 12px;
  margin-top: var(--s-4);
}
.elig-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  border: 1.5px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.elig-choice strong {
  font-size: 1rem;
}
.elig-choice span {
  font-size: 0.9rem;
  color: var(--text-2);
}
.elig-choice:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.elig-choice:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.elig-choice:disabled {
  cursor: progress;
  opacity: 0.75;
}
.elig-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0 0 var(--s-3);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.elig-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s-5);
}

/* Organization application: the first invalid field must be unmistakable. */
#org-form .input.invalid,
#org-form .select.invalid {
  border-color: var(--danger-700);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-700) 18%, transparent);
}
#org-form [aria-invalid='true'] {
  scroll-margin-top: 90px;
}
.org-application-loading {
  min-height: 120px;
  display: flex;
  align-items: center;
}
.application-card {
  max-width: 780px;
}
.application-card .v-info-list {
  margin-top: var(--s-3);
}
.application-card .app-reviewer-note {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.app-next-steps {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: 0.94rem;
}
.application-screen .v-header {
  align-items: flex-start;
}

/* Campaign cards: the same fundraising summary as the campaign page. */
.card-funding {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 6px;
}
.card-funding .funding-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
.card-funding .funding-line strong {
  color: var(--text);
}
.card-funding .progress-track {
  height: 8px;
}
.card-funding .progress-fill {
  background: var(--accent);
}

.auth-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100dvh - 120px);
}
.auth-aside {
  display: none;
}
.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-4) var(--s-8);
  width: 100%;
}
.auth-card {
  width: min(460px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: var(--s-6);
}
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-5);
  color: var(--text);
  text-decoration: none;
}
.auth-brand .brand-mark svg {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
}
.auth-brand-name {
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -0.05em;
}
.auth-brand-name span {
  color: var(--brand);
}
.auth-head {
  margin-bottom: var(--s-5);
}
.auth-head h1,
.auth-head h2 {
  margin: 0 0 var(--s-2);
  font-size: 26px;
  letter-spacing: -0.045em;
}
.auth-head .lede {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}
.auth-head .lede strong {
  color: var(--text);
}
.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 var(--s-2);
  color: var(--brand);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.auth-eyebrow::before {
  content: '';
  width: 21px;
  height: 1px;
  background: var(--brand);
}
.auth-alt {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}
.auth-password-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.auth-password-row a {
  font-size: 12px;
  font-weight: 650;
  color: var(--brand);
  text-decoration: none;
}
.auth-password-row a:hover {
  text-decoration: underline;
}
.auth-reveal {
  position: relative;
}
.auth-reveal > .input {
  padding-right: 92px;
}
.auth-reveal > button {
  position: absolute;
  top: 23px; /* the input is 46px tall; keep the control centred on it even
                when a field error is appended below */
  right: 6px;
  transform: translateY(-50%);
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
.auth-reveal > button:hover {
  background: var(--surface-2);
  color: var(--text);
}
.auth-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--text-3);
}
.auth-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-trust svg {
  width: 14px;
  height: 14px;
  color: var(--brand);
}
.auth-site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-4);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
}
.auth-site-link:hover {
  color: var(--brand);
}
.auth-panel-note {
  width: min(460px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-2);
  padding: var(--s-5);
}
.auth-panel-note > .auth-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s-3);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.auth-panel-note > .auth-note-head svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.auth-note-copy {
  margin: 0 0 var(--s-4);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}

/* The right-hand marketing panel appears only when there is room for it. */
@media (min-width: 1024px) {
  body.is-auth .app-body {
    padding: 0;
  }
  .auth-shell {
    grid-template-columns: minmax(360px, 0.85fr) minmax(460px, 1fr);
    align-items: stretch;
    min-height: calc(100dvh - 96px);
  }
  .auth-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-7);
    border-right: 1px solid var(--border);
    background: var(--surface);
    padding: var(--s-8) var(--s-8) var(--s-7);
  }
  .auth-aside-body {
    max-width: 430px;
  }
  .auth-eyebrow {
    margin-bottom: var(--s-4);
  }
  .auth-aside-title {
    margin: 0 0 var(--s-4);
    font-size: clamp(34px, 3.6vw, 46px);
    font-weight: 780;
    letter-spacing: -0.065em;
    line-height: 1.02;
  }
  .auth-aside-title span {
    color: var(--brand);
  }
  .auth-aside-copy {
    margin: 0 0 var(--s-6);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-2);
  }
  .auth-points {
    display: grid;
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .auth-points li {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-2);
  }
  .auth-points strong {
    display: block;
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
  }
  .auth-point-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    background: var(--tint);
    color: var(--brand);
  }
  .auth-point-icon svg {
    width: 16px;
    height: 16px;
  }
  .auth-aside-foot {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-3);
  }
  .auth-main {
    justify-content: center;
    padding: var(--s-8) var(--s-7);
  }
}

/* ============================================================
   Report centre (migration 065)
   The /report page, the contextual report dialog, and the staff review
   queue + detail view. Uses the app's tokens, so light and dark both work.
   ============================================================ */
.rc-screen {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: var(--s-6);
}
.rc-layout {
  display: block;
}
.rc-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ---- The "reviewed, not an emergency" notice ---- */
.rc-notice {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--tint-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-control);
  background: var(--tint);
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.5;
}
.rc-notice strong {
  display: block;
  margin-bottom: 2px;
}

/* ---- Category picker ---- */
.rc-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.rc-legend {
  font-weight: 700;
  font-size: 14px;
  padding: 0;
  margin-bottom: var(--s-3);
}
.rc-cats {
  display: grid;
  gap: var(--s-2);
}
.rc-cat {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  cursor: pointer;
}
.rc-cat:hover {
  border-color: var(--border-strong);
}
.rc-cat input {
  margin-top: 3px;
  accent-color: var(--brand);
  flex: none;
}
.rc-cat:has(input:checked) {
  border-color: var(--brand);
  background: var(--tint);
}
.rc-cat:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.rc-cat-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rc-cat-body strong {
  font-size: 14px;
}

/* ---- Target: searchable select ---- */
.rc-target-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
#rc-target-q[role='combobox'] {
  width: 100%;
}
.rc-results {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  max-height: 260px;
  overflow-y: auto;
  box-shadow: var(--shadow-soft);
}
.rc-result {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.rc-result:hover,
.rc-result:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.rc-result:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring) inset;
}
.rc-result-label {
  font-weight: 600;
  font-size: 14px;
}
.rc-selected {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--tint-strong);
  border-radius: var(--r-control);
  background: var(--tint);
}
.rc-selected strong {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rc-manual summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}
.rc-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.rc-count {
  text-align: right;
  margin: 2px 0 0;
}

/* ---- Errors, actions, success ---- */
.rc-error {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--danger-100);
  border-radius: var(--r-control);
  background: var(--danger-100);
  color: var(--danger-700);
  font-size: 13.5px;
  font-weight: 600;
}
.rc-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.rc-target-fixed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--tint-strong);
  border-radius: var(--r-control);
  background: var(--tint);
}
.rc-target-fixed strong {
  overflow-wrap: anywhere;
}
.rc-success {
  text-align: center;
  padding: var(--s-5) var(--s-2);
}
.rc-success h3 {
  margin: var(--s-3) 0 var(--s-2);
  font-family: var(--font-display, 'Source Serif 4', serif);
}
.rc-success-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--brand);
  font-size: 26px;
  font-weight: 700;
}
.rc-ref {
  font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-1);
  margin: var(--s-2) 0;
  overflow-wrap: anywhere;
}
.rc-modal {
  width: 100%;
  max-width: 520px;
}

/* ---- Staff review queue + detail ---- */
.rc-queue-tabs {
  display: flex;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
  overflow-x: auto;
}
.rc-queue-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
}
.rc-queue-tab:hover {
  border-color: var(--border-strong);
}
.rc-queue-tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-solid);
}
.rc-queue-row {
  cursor: pointer;
}
.rc-queue-row:hover {
  border-color: var(--border-strong);
}
.rc-queue-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.rc-chevron {
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
}
.rc-pill {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}
.rc-pill-open,
.rc-pill-new {
  background: var(--sun-100);
  color: var(--sun-700);
  border-color: var(--sun-100);
}
.rc-pill-reviewed,
.rc-pill-in_review {
  background: var(--sky-100);
  color: var(--sky-700);
  border-color: var(--sky-100);
}
.rc-pill-resolved {
  background: var(--tint);
  color: var(--brand-hover);
  border-color: var(--tint-strong);
}
.rc-pill-dismissed,
.rc-pill-closed {
  background: var(--surface-2);
  color: var(--text-3);
}
.rc-detail {
  margin-top: var(--s-3);
}
.rc-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.rc-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}
.rc-detail-grid dt {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-3);
  margin-bottom: 2px;
}
.rc-detail-grid dd {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.rc-detail-body h4 {
  margin: 0 0 var(--s-2);
  font-size: 14px;
}
.rc-detail-body p {
  margin: 0;
}
.rc-detail-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

@media (max-width: 560px) {
  .rc-two,
  .rc-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Bot verification (Cloudflare Turnstile) ----------------
   The widget is third-party content inside our form: reserve its height so the
   submit button does not jump while it loads, keep it inside narrow phones,
   and make every state (loading, expired, failed, complete) readable. */
.turnstile-field {
  margin: 0 0 var(--s-4);
}
.turnstile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 6px;
}
.turnstile-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.turnstile-slot {
  display: flex;
  justify-content: flex-start;
  min-height: 66px;
  max-width: 100%;
  overflow: hidden;
}
.turnstile-slot iframe {
  max-width: 100%;
}
.turnstile-status {
  min-height: 18px;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}
.turnstile-status[data-tone='ok'] {
  color: #1e6b4f;
}
.turnstile-status[data-tone='warn'] {
  color: #8a5a00;
}
.turnstile-status[data-tone='error'] {
  color: #b42318;
}
.turnstile-retry {
  border: 0;
  background: none;
  padding: 4px 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand, #1e6b4f);
  text-decoration: underline;
  cursor: pointer;
}
.turnstile-retry.hidden {
  display: none;
}
@media (max-width: 380px) {
  .turnstile-slot {
    transform: scale(0.92);
    transform-origin: left top;
  }
}

/* ------------------------------------------------------------
   Publishing identity + campaign funding (org testing)
   One shared identity control in the campaign and Reel composers.
   ------------------------------------------------------------ */
.identity-picker {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  margin: 0 0 var(--s-4);
  border: 1px solid var(--line, #dfe5e1);
  border-radius: var(--r-card, 12px);
  background: var(--surface-2, #f7faf8);
}
.identity-picker label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #5d6b63);
  margin: 0;
}
.identity-picker select {
  width: 100%;
}
.identity-picker.is-org {
  border-color: var(--evergreen-600, #2f7d5d);
  background: var(--evergreen-50, #eff7f2);
}
.identity-note {
  margin: 0;
  line-height: 1.5;
}
.identity-badge {
  display: inline-block;
  margin-top: 2px;
  color: var(--evergreen-700, #1e6b4f);
  font-weight: 600;
}
.funding-fields {
  border: 1px solid var(--line, #dfe5e1);
  border-radius: var(--r-card, 12px);
  padding: var(--s-3);
  margin: 0 0 var(--s-4);
}
.funding-fields legend {
  padding: 0 var(--s-2);
  font-weight: 700;
}
.funding-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-2) 0;
  font-size: 20px;
}
.funding-total strong {
  font-size: 24px;
}
.project-org-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--s-3);
  font-size: 15px;
}
.project-org-name {
  font-weight: 700;
  color: var(--evergreen-700, #1e6b4f);
  text-decoration: none;
}
.project-org-name:hover {
  text-decoration: underline;
}
.contribution-sheet {
  display: grid;
  gap: var(--s-2);
}
/* Fee split shown before payment: the Impact platform fee is part of the
   entered amount, and processing costs are the provider's, shown apart. */
.contribution-split {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  padding: var(--s-2) var(--s-3);
  line-height: 1.5;
}
.contribution-split:empty {
  display: none;
}
.contribution-split strong {
  color: var(--text-1);
}

/* ============================================================
   Posts, threaded comments, local updates and post moderation
   (migration 069). Built on the app tokens, so light and dark
   both keep the green/mint identity.
   ============================================================ */

/* ---- Shared small controls used by these screens ---- */
.link-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  text-decoration: none;
}
.link-btn:hover {
  text-decoration: underline;
}
.link-btn.danger {
  color: var(--danger-700);
}
.link-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.switch-row:last-of-type {
  border-bottom: 0;
}
.switch-row input {
  margin-top: 3px;
  accent-color: var(--brand);
  flex: none;
}
.switch-row strong {
  display: block;
  font-size: 14px;
}
.switch-row .tiny {
  display: block;
}
.chip-x {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.75;
}
.chip-x:hover {
  opacity: 1;
}

/* ---- Posts feed ---- */
.posts-screen,
.post-detail-screen {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: var(--s-8);
}
.posts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.posts-head h1 {
  margin: 2px 0 var(--s-1);
  font-size: clamp(26px, 5vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.posts-head p {
  margin: 0;
}
.posts-head-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.posts-head-actions .btn {
  white-space: nowrap;
}

.composer-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.composer-card[hidden] {
  display: none;
}
.composer-heading {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.composer-card .input,
.composer-card .textarea {
  width: 100%;
}
.composer-body {
  min-height: 104px;
  resize: vertical;
}
.composer-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.composer-tools .grow {
  flex: 1;
}
.composer-schedule {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2, 10px);
  background: var(--surface-2, transparent);
}
.composer-schedule[hidden] {
  display: none;
}
.composer-schedule .input {
  width: auto;
  min-width: 200px;
}
.composer-hint {
  margin: 0;
}
.file-btn {
  cursor: pointer;
}
.image-previews {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.image-preview {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.moderation-feedback {
  padding: var(--s-3);
  border-radius: var(--r-control);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
}
.moderation-feedback p {
  margin: var(--s-1) 0 var(--s-2);
}
.moderation-feedback.ok {
  border-color: var(--tint-strong);
  background: var(--tint);
}
.moderation-feedback.warn {
  border-color: var(--sun-100);
  background: var(--sun-100);
  color: var(--sun-700);
}
.moderation-feedback.danger {
  border-color: var(--danger-100);
  background: var(--danger-100);
  color: var(--danger-700);
}

.posts-tabs {
  display: flex;
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.posts-tabs::-webkit-scrollbar {
  display: none;
}
.posts-tab {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.posts-tab:hover {
  color: var(--text-1);
  background: var(--surface-2);
}
.posts-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.posts-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.post-feed {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.posts-more {
  display: flex;
  justify-content: center;
  margin-top: var(--s-4);
}

.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-4);
}
.post-card:hover {
  border-color: var(--border-strong);
}
.post-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.post-head-text {
  flex: 1;
  min-width: 0;
}
.post-byline {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.post-org {
  font-weight: 700;
}
.post-meta {
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-3);
}
.post-edit-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  flex: none;
}
.post-edit-link:hover {
  text-decoration: underline;
}
.org-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--r-control);
  background: var(--tint);
  color: var(--brand);
  font-weight: 800;
  overflow: hidden;
}
.org-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-content {
  margin-top: var(--s-3);
}
.post-title {
  margin: 0 0 var(--s-2);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.post-title a {
  color: var(--text-1);
  text-decoration: none;
}
.post-title a:hover {
  text-decoration: underline;
}
.post-title-lg {
  font-size: clamp(22px, 4.5vw, 28px);
}
.post-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-1);
  overflow-wrap: anywhere;
  white-space: normal;
}
.post-images {
  display: grid;
  gap: 4px;
  margin-top: var(--s-3);
  border-radius: var(--r-control);
  overflow: hidden;
}
.post-images.count-2,
.post-images.count-4 {
  grid-template-columns: 1fr 1fr;
}
.post-images.count-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.post-image {
  display: block;
  background: var(--surface-2);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}
.post-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
}
.post-action:hover {
  background: var(--surface-2);
  color: var(--text-1);
}
.post-action.on {
  color: var(--brand);
}
.post-action:disabled {
  opacity: 0.6;
  cursor: default;
}
.post-action-quiet {
  color: var(--text-3);
}
.post-action:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.post-action .count {
  font-variant-numeric: tabular-nums;
}

/* ---- Post detail + comments ---- */
.post-detail-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.post-detail-top .btn:first-child {
  margin-right: auto;
}
.post-card-detail {
  margin-bottom: var(--s-4);
}
.mod-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  border-radius: var(--r-control);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
}
.mod-banner p {
  margin: 2px 0 0;
}
.mod-banner.mod-needs_revision {
  border-color: var(--sun-100);
  background: var(--sun-100);
  color: var(--sun-700);
}
.mod-banner.mod-blocked,
.mod-banner.mod-removed {
  border-color: var(--danger-100);
  background: var(--danger-100);
  color: var(--danger-700);
}
.mod-banner.mod-held {
  border-color: var(--sky-100);
  background: var(--sky-100);
  color: var(--sky-700);
}
.mod-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.mod-chip.mod-blocked,
.mod-chip.mod-revise,
.mod-chip.mod-block {
  border-color: var(--danger-100);
  background: var(--danger-100);
  color: var(--danger-700);
}
.mod-chip.mod-held {
  border-color: var(--sun-100);
  background: var(--sun-100);
  color: var(--sun-700);
}
.post-edit-slot,
.post-appeal-slot {
  margin-top: var(--s-3);
}
.post-edit-form,
.appeal-form {
  display: grid;
  gap: var(--s-2);
}
.post-appeal-entry {
  margin-top: var(--s-2);
}
.comments-section {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.comments-head h2 {
  margin: 0 0 var(--s-3);
  font-size: 17px;
}
.comment-signin {
  margin-bottom: var(--s-4);
}
.comment-form {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.comment-form.compact {
  margin: var(--s-2) 0 var(--s-2);
}
.comment-form .textarea {
  width: 100%;
  resize: vertical;
}
.comment-identity {
  max-width: 320px;
}
.comment-identity-label {
  margin-bottom: -4px;
}
.comment-form-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.comment-form-actions .grow {
  flex: 1;
}
.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.comment {
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.comment:first-child {
  border-top: 0;
  padding-top: 0;
}
.comment-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}
.comment-head .grow {
  flex: 1;
  min-width: 0;
}
.comment-byline {
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.comment-body {
  margin: var(--s-2) 0;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.comment.is-removed .comment-body {
  font-style: italic;
}
.comment.is-flagged {
  opacity: 0.9;
}
.comment-mod-reason {
  margin: var(--s-1) 0 var(--s-2);
  font-size: 12px;
  color: var(--danger-700);
  overflow-wrap: anywhere;
}
.comment-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.comment-replies {
  margin-top: var(--s-3);
  padding-left: var(--s-3);
  border-left: 2px solid var(--tint-strong);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.comment-edit-slot,
.comment-reply-slot {
  margin-top: var(--s-2);
}
.comment-edit-form {
  display: grid;
  gap: var(--s-2);
}
.comment-empty {
  margin: var(--s-3) 0 0;
}
.avatar-xs {
  width: 26px;
  height: 26px;
  font-size: 10px;
  flex: 0 0 auto;
}

/* ---- Admin: post moderation ---- */
.mod-provider {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-2);
  font-size: 12.5px;
}
.mod-provider.ok {
  border-color: var(--tint-strong);
  background: var(--tint);
}
.mod-provider.warn {
  border-color: var(--sun-100);
  background: var(--sun-100);
  color: var(--sun-700);
}
#mod-case-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.mod-case {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.mod-case:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.mod-case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.mod-case-head strong {
  overflow-wrap: anywhere;
}
.mod-case-excerpt {
  font-size: 12.5px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.mod-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.mod-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--s-3);
  margin: var(--s-3) 0;
  border-radius: var(--r-control);
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.6;
  max-height: 420px;
  overflow: auto;
}
.mod-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: var(--s-3);
  font-size: 12.5px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* ---- City picker (onboarding, settings, prompt) ---- */
.city-picker {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.city-results {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-control);
  overflow: hidden;
}
.city-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-top: 0;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.city-result:first-child {
  border-top: 1px solid var(--border);
  border-radius: var(--r-control) var(--r-control) 0 0;
}
.city-result:last-child {
  border-radius: 0 0 var(--r-control) var(--r-control);
}
.city-result:hover,
.city-result:focus-visible {
  background: var(--tint);
}
.city-result span {
  font-size: 12px;
  color: var(--text-3);
}
.city-nearby {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.city-selected {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.city-prompt {
  max-width: 520px;
}

/* ---- Local settings ---- */
.settings-local-screen {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.local-settings-form,
.muted-orgs-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
}
.local-settings-form .section-title,
.muted-orgs-card .section-title {
  margin: var(--s-2) 0 0;
  font-size: 16px;
}
.current-city {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.settings-saved {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  background: var(--tint);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
}
.muted-org-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.muted-org-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.muted-org-list li:last-child {
  border-bottom: 0;
}
.org-area-settings {
  padding: var(--s-4);
}
.org-area-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
}
.org-area-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.multi-city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* ---- Notification centre ---- */
.notifications-screen {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: var(--s-8);
}
.notification-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.notification-item.unread {
  border-color: var(--tint-strong);
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--brand);
}
.notification-item .grow {
  flex: 1;
  min-width: 0;
}
.notification-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-3);
  font-weight: 700;
}
.notification-icon.local {
  background: var(--tint);
  color: var(--brand);
}
.notification-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}
.notification-body {
  margin: 2px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.notification-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.notification-item .tiny {
  font-size: 11.5px;
}

/* ---- Dismissible local popup (in-app toast style) ---- */
.local-popup {
  position: fixed;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: 76px;
  z-index: 70;
  width: min(92vw, 380px);
  padding: var(--s-4);
  border: 1px solid var(--tint-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--shadow-raised);
}
.local-popup-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.local-popup-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.local-popup-title {
  display: block;
  margin: 2px 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.local-popup-body {
  margin: 0 0 var(--s-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.local-popup-actions {
  display: flex;
  gap: var(--s-2);
}

@media (min-width: 900px) {
  .local-popup {
    left: auto;
    right: 28px;
    transform: none;
    bottom: 28px;
  }
}

@media (max-width: 640px) {
  .posts-head h1 {
    font-size: 26px;
  }
  .posts-head-actions {
    width: 100%;
  }
  .posts-head-actions .btn {
    flex: 1;
    text-align: center;
  }
  .post-card,
  .composer-card,
  .comments-section,
  .local-settings-form,
  .muted-orgs-card,
  .org-area-settings {
    padding: var(--s-3);
  }
  .post-action {
    padding: 7px 8px;
  }
  .post-action .action-label {
    display: none;
  }
  .post-action-quiet .action-label {
    display: inline;
  }
  .comment-replies {
    padding-left: var(--s-2);
  }
  .comment-identity {
    max-width: none;
  }
  .notification-item {
    padding: var(--s-3);
  }
  .post-images.count-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .posts-tab,
  .post-card,
  .notification-item {
    transition: none;
  }
}

/* The `hidden` attribute must always win over a component's display rule.
   Without this, `.composer-card { display: grid }` and `.btn { display:
   inline-flex }` kept hidden elements visible. */
[hidden] {
  display: none !important;
}

/* ============================================================
   Stage 1 — dedicated Create Post screen, profile and verification
   presentation, and the shared confirmation dialog.
   ============================================================ */

/* ---- Create Post (own route: no feed chrome, no tabs, no list) ---- */
.composer-screen {
  max-width: 760px;
  margin: 0 auto;
}
.composer-page {
  padding-bottom: var(--s-6);
}
.composer-back {
  margin: 0 0 var(--s-3) calc(var(--s-2) * -1);
}
.composer-page-head {
  margin: 0 0 var(--s-4);
  max-width: 68ch;
}
.composer-page-head h1 {
  margin: 0;
  font-family: var(--font-display, 'Source Serif 4', serif);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.composer-page-head p {
  margin: var(--s-1) 0 0;
}
.composer-form {
  display: grid;
  gap: var(--s-4);
  padding: clamp(var(--s-3), 3vw, var(--s-5));
}
.composer-form .field {
  margin: 0;
}
.composer-body {
  width: 100%;
  min-height: 180px;
  max-height: min(55vh, 480px);
  padding: var(--s-4);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  resize: none;
  overflow-y: auto;
}
.composer-body::placeholder {
  color: var(--text-3);
}
.composer-body:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--tint);
}
.composer-body.invalid {
  border-color: var(--danger-700);
}
.composer-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.composer-count {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.composer-count.over {
  color: var(--danger-700);
  font-weight: 600;
}
.composer-attach {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.composer-notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  border-color: var(--border-strong);
}
.composer-notice-actions {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
}
.composer-progress {
  display: grid;
  gap: var(--s-2);
}
.image-preview {
  position: relative;
}
.image-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 15, 13, 0.78);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.image-preview-remove:hover {
  background: var(--danger-700);
}
.image-preview-remove:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .composer-notice {
    flex-direction: column;
  }
  .composer-notice-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
  }
  .composer-actions {
    flex-direction: row;
  }
  .composer-actions .btn {
    flex: 1;
  }
  .composer-actions .btn-primary {
    flex: 1.6;
  }
  .composer-meta {
    flex-direction: column;
    gap: var(--s-1);
  }
}

/* ---- Profile: email action, identity card, deletion ---- */
/* NOTE: the one-off `.profile-edit-btn` colour override that used to live here
   was removed. Edit profile is an ordinary `.btn.btn-primary`, so it now gets
   its label from `--on-solid` like every other primary action. Keeping a
   per-button palette was what made one button readable and the next one not. */
.verify-email-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  flex-wrap: wrap;
}
.verify-email-copy {
  flex: 1 1 320px;
  min-width: 240px;
}
.verify-email-actions {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
}
.email-verify-title,
.identity-card-title,
.delete-account-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
[data-verify-email-status][data-tone='ok'],
[data-verify-resend-status][data-tone='ok'] {
  color: var(--brand);
}
[data-verify-email-status][data-tone='error'],
[data-verify-resend-status][data-tone='error'] {
  color: var(--danger-700);
}
.identity-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
}
.identity-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.identity-card-copy {
  margin: 0;
  max-width: 70ch;
}
.identity-state {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.identity-state-verified {
  border-color: transparent;
  background: var(--tint);
  color: var(--brand);
}
.identity-state-pending {
  border-color: transparent;
  background: var(--sky-100);
  color: var(--sky-700);
}
.identity-state-warning {
  border-color: transparent;
  background: var(--danger-100);
  color: var(--danger-700);
}
.delete-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  flex-wrap: wrap;
}
.delete-account-copy {
  flex: 1 1 320px;
}

@media (max-width: 560px) {
  .verify-email-actions {
    align-items: stretch;
    width: 100%;
  }
  .delete-account-card {
    align-items: stretch;
  }
  .delete-account-card .btn {
    width: 100%;
  }
}

/* ---- Verification screen: breathing room and one card hierarchy ---- */
.v-screen--verify {
  /* /verify uses the focused auth shell, whose .view deliberately has no
     padding. Give this screen its own readable gutter on phones. */
  padding: clamp(24px, 7vh, 96px) var(--s-4) var(--s-6);
  box-sizing: border-box;
}
.v-header--verify {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.v-header--verify .v-back {
  margin-left: calc(var(--s-2) * -1);
}
.v-header-copy {
  width: 100%;
}
.v-header-copy h1 {
  margin: 0;
}
.v-header-copy p {
  margin: var(--s-1) 0 0;
  max-width: 64ch;
}
.verify-card-title {
  margin: 0 0 var(--s-2);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.verify-card > .v-status:last-of-type {
  margin-bottom: var(--s-4);
}
/* The consent row is a paragraph, not a one-line switch: keep the checkbox
   at the first line instead of floating it into the middle of the wrap. */
.v-consent .switch-label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  line-height: 1.5;
}
.v-consent .switch-label input {
  flex: none;
  margin-top: 3px;
}
.verify-card {
  padding: clamp(var(--s-3), 3vw, var(--s-5));
}
.v-consent {
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-2);
}
.v-status.v-closed {
  border-left-color: var(--ink-400);
}
.v-status.v-closed .v-status-title {
  color: var(--text);
}

@media (max-width: 720px) {
  .v-screen--verify {
    padding-top: clamp(20px, 4vh, 40px);
  }
}

/* ---- Shared confirmation dialog ---- */
.dialog-modal {
  max-width: 440px;
}
.dialog-copy {
  margin: var(--s-2) 0 0;
}
.dialog-fields {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
}
.dialog-fields .field {
  margin: 0;
}
.dialog-note {
  margin: var(--s-3) 0 0;
}
.dialog-actions {
  margin-top: var(--s-4);
}
.dialog-modal .form-error {
  margin-top: var(--s-3);
}

@media (max-width: 560px) {
  .modal-overlay {
    padding: var(--s-3);
  }
  .dialog-modal {
    max-height: 90vh;
  }
}

/* ---- Plan & billing (Impact Personal) ---------------------------------- */
.billing-rows {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
}
.billing-rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: baseline;
}
.billing-rows dt {
  margin: 0;
}
.billing-rows dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}
.consent-row input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--evergreen-600);
}
@media (max-width: 480px) {
  .billing-rows > div {
    flex-direction: column;
    gap: 2px;
  }
  .billing-rows dd {
    text-align: left;
  }
}

/* ============================================================
   Company workspace setup (#/company/setup)

   One vertical checklist: a status marker, the step, an honest sentence about
   what is missing, and — only when the customer can actually act — one button.
   Steps are plain list items so a screen reader reads them in order and the
   page needs no ARIA cleverness beyond the progress bar.
   ============================================================ */
.setup-page {
  max-width: 820px;
  margin: 0 auto;
}
.setup-head {
  margin-bottom: var(--s-5);
}
.setup-head h1 {
  margin: var(--s-2) 0 var(--s-2);
  font-size: clamp(24px, 4vw, 32px);
}
.setup-head p {
  margin: 0 0 var(--s-2);
}
.setup-progress {
  margin-bottom: var(--s-4);
}
.setup-bar {
  margin-top: var(--s-2);
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.setup-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.3s ease;
}
.setup-next {
  border-radius: var(--r-card-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.setup-next.is-complete {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.setup-steps {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.setup-step {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-card-lg);
  background: var(--surface);
}
.setup-step.is-done {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}
.setup-step.is-blocked {
  background: var(--surface-2);
}
.setup-step-marker {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-solid);
  background: var(--accent);
}
.setup-step.is-done .setup-step-marker {
  background: var(--accent-strong);
}
.setup-step.is-blocked .setup-step-marker {
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.setup-step-body {
  flex: 1;
  min-width: 0;
}
.setup-step-head {
  gap: var(--s-2);
  flex-wrap: wrap;
}
.setup-step-head strong {
  font-size: 15px;
}
.setup-step-detail {
  margin: var(--s-1) 0 0;
}
.setup-step-action {
  margin-top: var(--s-3);
}
.setup-waiting {
  margin: 0 0 var(--s-4);
}
.setup-help {
  padding: var(--s-4);
  border-radius: var(--r-card-lg);
}
/* Below-the-fold phone widths: the status badge moves under the title instead
   of squeezing it, and the button goes full width for a comfortable target. */
@media (max-width: 520px) {
  .setup-step {
    padding: var(--s-3);
  }
  .setup-step-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
  }
  .setup-step-action .btn {
    width: 100%;
  }
}

/* Neutral badge for "not needed" / "not yet available" — deliberately quieter
   than badge-role so it never reads as an actionable state. */
.badge-muted {
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}

/* The setup page is a single column of reading; cap it rather than stretching
   a checklist across a 1160px desktop viewport. */
.view:has(> .setup-page) {
  max-width: 900px;
}

/* ============================================================
   IMPACT TESTING — the staff testing workspace (#/testing)

   A separate surface, not a customer screen: the dark banner marks the whole
   page as a test environment, and the cards reuse the app's rounded surfaces,
   form controls and focus ring so nothing about it looks like a different
   product. Buttons inherit the shared .btn styles (dark text on mint), so the
   contrast fixes elsewhere apply here automatically.
   ============================================================ */
.testing-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-9);
}
.testing-root {
  display: grid;
  gap: var(--s-5);
}
.testing-banner {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: 10px var(--s-4);
  border-radius: var(--r-pill);
  background: var(--ink-950);
  color: var(--tint);
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-soft);
}
.testing-banner strong {
  color: #ffffff;
  letter-spacing: 0.08em;
}
.testing-banner-sep {
  color: var(--ink-400);
}
.testing-banner-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--evergreen-500);
  box-shadow: 0 0 0 3px rgba(63, 164, 134, 0.25);
}
.testing-card {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-card-lg);
}
.testing-card h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}
.testing-card h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.testing-card p {
  margin: 0;
}
.testing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.testing-code-input {
  min-height: 56px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px;
  letter-spacing: 0.35em;
  text-align: center;
}
.testing-who {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.testing-who .avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tint-strong);
  color: var(--accent-strong);
  font-weight: 700;
}
.testing-list,
.testing-blockers {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding-left: var(--s-5);
}
.testing-list li {
  line-height: 1.55;
}
.testing-blockers {
  gap: var(--s-2);
}
.testing-blockers li {
  display: grid;
  gap: 2px;
}
.testing-blockers strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--danger-700);
}
/* Captured test mail in the workspace (testing.js). Disclosure per message so a
   long verification body never pushes the rest of the page away. */
.testing-mail {
  margin-top: var(--s-3);
  display: grid;
  gap: var(--s-2);
}
.testing-mail-item {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-3);
  background: var(--surface-2);
}
.testing-mail-item summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: baseline;
}
.testing-mail-body {
  margin: var(--s-2) 0 0;
  padding: var(--s-2);
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
}
/* The staff entry point on the customer sign-in screen: present and legible,
   but visually subordinate to the customer form it sits under. */
.auth-staff {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
}
.auth-staff a {
  font-weight: 600;
}
@media (max-width: 640px) {
  .testing-shell {
    padding: var(--s-4) var(--s-3) var(--s-8);
  }
  .testing-card {
    padding: var(--s-5);
  }
  .testing-code-input {
    font-size: 20px;
    letter-spacing: 0.25em;
  }
  .testing-who {
    align-items: flex-start;
  }
  .testing-actions .btn {
    width: 100%;
    justify-content: center;
  }
}