/*
  MyJeff design system
  ────────────────────
  One stylesheet, one source of truth. The contract lives in
  .cursor/rules/myjeff-ui.mdc and is enforced by tests/foundation/test_design_system.py:

  - Raw colors, shadows, font sizes, radii, durations, and z-indexes exist only
    in the :root token blocks below. Everything else references a token.
  - Components are defined once. Do not add "polish" or "override" sections at
    the bottom of this file; change the component where it is defined.
  - Every class used in a template must be defined here, and every class
    defined here must be used.

  Sections: 1 Tokens · 2 Base · 3 App shell · 4 Primitives · 5 Lists ·
  6 Feed · 7 Events · 8 Official · 9 Profiles · 10 Messages · 11 Alerts ·
  12 Pages · 13 Motion · 14 Responsive
*/

/* ═══════════════════════════ 1. Tokens ═══════════════════════════ */

:root {
  color-scheme: light dark;

  /* Brand palette: taken from the MyJeff mark (river navy, Ohio gold). */
  --navy-950: #06193d;
  --navy-900: #0a2657;
  --navy-800: #0b3478;
  --navy-600: #1a55b0;
  --gold-500: #f0ae1f;
  --gold-600: #d9950b;
  --gold-700: #8a5a00;
  --river-500: #2e8fb5;
  --green-500: #22a06b;
  --coral-500: #ef5b45;
  --slate-500: #75839a;
  --red-600: #d0342c;

  /* Semantic surfaces and text */
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-sunken: #eef1f6;
  --surface-hover: #f6f8fc;
  --material: rgba(250, 251, 253, 0.74);
  --material-strong: rgba(255, 255, 255, 0.92);
  --label: #0b1a33;
  --label-secondary: #56637a;
  --label-tertiary: #8b96a8;
  --separator: rgba(11, 26, 51, 0.09);
  --separator-strong: rgba(11, 26, 51, 0.16);
  --fill: rgba(11, 52, 120, 0.06);
  --fill-hover: rgba(11, 52, 120, 0.1);

  /* Interactive */
  --tint: var(--navy-800);
  --tint-soft: rgba(11, 52, 120, 0.08);
  --btn-primary-bg: var(--navy-800);
  --btn-primary-hover: var(--navy-900);
  --btn-primary-fg: #ffffff;
  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --on-accent: var(--navy-950);
  --accent-text: var(--gold-700);
  --accent-soft: #fdf1d3;
  --focus-ring: rgba(26, 85, 176, 0.5);

  /* Brand surfaces (hero, profile cover, own message bubbles) */
  --brand-surface: var(--navy-800);
  --on-brand: #ffffff;
  --on-brand-secondary: rgba(255, 255, 255, 0.8);
  --on-brand-faint: rgba(255, 255, 255, 0.28);
  --on-brand-fill: rgba(255, 255, 255, 0.14);
  --on-brand-fill-hover: rgba(255, 255, 255, 0.22);
  --bubble-own: var(--navy-800);
  --scrim: rgba(6, 25, 61, 0.72);

  /* Status */
  --danger: #b02a23;
  --danger-bg: #fdeceb;
  --success: #17694a;
  --success-bg: #e1f4ea;
  --warning: #8a5a00;
  --warning-bg: #fdf1d3;
  --info-bg: #e5edf9;
  --badge-count: var(--red-600);

  /* Chips */
  --chip-official-bg: var(--navy-800);
  --chip-official-fg: #ffffff;
  --chip-verified-bg: #e1f4ea;
  --chip-verified-fg: #17694a;
  --chip-voice-bg: #e2f2f8;
  --chip-voice-fg: #1b6a8a;
  --chip-accent-bg: #fdf1d3;
  --chip-accent-fg: #8a5a00;

  /* Verified seals, one pairing per account type */
  --seal-official-fill: var(--navy-800);
  --seal-official-mark: var(--gold-500);
  --seal-business-fill: var(--gold-500);
  --seal-business-mark: var(--navy-950);
  --seal-organization-fill: #1b7fa6;
  --seal-organization-mark: #ffffff;
  /* Staff shield for moderators and admins */
  --shield-fill: var(--success);
  --shield-mark: #ffffff;

  /* Icon tiles (Settings-style) */
  --tile-navy: var(--navy-800);
  --tile-gold: var(--gold-500);
  --tile-river: var(--river-500);
  --tile-green: var(--green-500);
  --tile-coral: var(--coral-500);
  --tile-slate: var(--slate-500);
  --tile-danger: var(--red-600);
  --tile-glyph: #ffffff;
  --tile-glyph-on-gold: var(--navy-950);

  /* Avatars */
  --avatar-bg: #e5edf9;
  --avatar-fg: var(--navy-800);
  --avatar-org-bg: #fdf1d3;
  --avatar-org-fg: #8a5a00;

  /* Type: Inter everywhere; Safari and iOS switch to SF Pro below. Chromium maps
     -apple-system to the local UI font (Segoe, Roboto), so it cannot lead the stack. */
  --font-ui: "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: var(--font-ui);
  --text-micro: 0.6875rem;
  --text-caption: 0.75rem;
  --text-footnote: 0.8125rem;
  --text-subhead: 0.9375rem;
  --text-callout: 1rem;
  --text-body: 1.0625rem;
  --text-title3: 1.25rem;
  --text-title2: 1.375rem;
  --text-title1: 1.75rem;
  --text-large: 2.125rem;
  --text-hero: clamp(2rem, 1.5rem + 2.4vw, 2.75rem);
  --text-display: 3.5rem;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.5;
  --tracking-tight: -0.024em;
  --tracking-title: -0.016em;
  --tracking-caps: 0.07em;

  /* Space (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --radius-avatar-org: 30%;
  --radius-circle: 50%;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(11, 26, 51, 0.05), 0 0 0 1px rgba(11, 26, 51, 0.035);
  --shadow-raised: 0 16px 40px -12px rgba(11, 26, 51, 0.28), 0 2px 8px rgba(11, 26, 51, 0.08);
  --shadow-fab: 0 12px 24px -8px rgba(217, 149, 11, 0.6), 0 2px 6px rgba(11, 26, 51, 0.14);
  --shadow-hero: 0 24px 48px -24px rgba(6, 25, 61, 0.6);
  --shadow-bar: 0 1px 0 rgba(11, 26, 51, 0.08);
  --shadow-ring: 0 0 0 4px var(--surface);

  /* Motion */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-toast: 5s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --press-scale: 0.97;

  /* Layers */
  --z-header: 40;
  --z-sidebar: 45;
  --z-tabbar: 50;
  --z-fab: 55;
  --z-menu: 60;
  --z-toast: 70;
  --z-skip: 100;

  /* Layout */
  --sidebar-w: 16.5rem;
  --header-h: 3.25rem;
  --tabbar-h: 3.5rem;
  --content-w: 42rem;
  --wide-w: 64rem;
  --gutter: 1rem;
  --tabbar-offset: calc(var(--tabbar-h) + env(safe-area-inset-bottom));

  /* The river wave from the MyJeff mark, used as a mask so it takes any token color. */
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath d='M0 52C120 20 240 20 340 44S520 72 600 36V80H0Z'/%3E%3C/svg%3E");
}

@supports (font: -apple-system-body) {
  :root {
    --font-ui: -apple-system, "SF Pro Text", system-ui, sans-serif;
    --font-display: -apple-system, "SF Pro Display", system-ui, sans-serif;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #060b16;
    --surface: #0f1728;
    --surface-sunken: #172136;
    --surface-hover: #141e33;
    --material: rgba(8, 13, 25, 0.72);
    --material-strong: rgba(22, 31, 50, 0.94);
    --label: #eef2fa;
    --label-secondary: #a2adc2;
    --label-tertiary: #6d7890;
    --separator: rgba(160, 180, 220, 0.12);
    --separator-strong: rgba(160, 180, 220, 0.22);
    --fill: rgba(140, 170, 230, 0.1);
    --fill-hover: rgba(140, 170, 230, 0.16);

    --tint: #8db8ff;
    --tint-soft: rgba(141, 184, 255, 0.14);
    --btn-primary-bg: #eef2fa;
    --btn-primary-hover: #ffffff;
    --btn-primary-fg: #06193d;
    --accent-text: #f6c453;
    --accent-soft: rgba(240, 174, 31, 0.16);
    --focus-ring: rgba(141, 184, 255, 0.55);

    --brand-surface: #0c2d66;
    --bubble-own: #1f5fc4;

    --danger: #ff8a80;
    --danger-bg: rgba(255, 99, 88, 0.14);
    --success: #6fd6a4;
    --success-bg: rgba(34, 160, 107, 0.16);
    --warning: #f6c453;
    --warning-bg: rgba(240, 174, 31, 0.16);
    --info-bg: rgba(141, 184, 255, 0.12);

    --chip-official-bg: #2f6ae0;
    --chip-verified-bg: rgba(34, 160, 107, 0.18);
    --chip-verified-fg: #6fd6a4;
    --chip-voice-bg: rgba(46, 143, 181, 0.2);
    --chip-voice-fg: #8fd3ee;
    --seal-official-fill: #3a78f0;
    --seal-organization-fill: #2e9cc6;
    --shield-fill: var(--green-500);
    --chip-accent-bg: rgba(240, 174, 31, 0.16);
    --chip-accent-fg: #f6c453;

    --tile-navy: #2f6ae0;

    --avatar-bg: #1b2a48;
    --avatar-fg: #b5d0ff;
    --avatar-org-bg: rgba(240, 174, 31, 0.18);
    --avatar-org-fg: #f6c453;

    --shadow-card: 0 0 0 1px rgba(160, 180, 220, 0.08);
    --shadow-raised: 0 20px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(160, 180, 220, 0.1);
    --shadow-fab: 0 12px 28px -8px rgba(240, 174, 31, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-hero: 0 0 0 1px rgba(160, 180, 220, 0.1);
    --shadow-bar: 0 1px 0 rgba(160, 180, 220, 0.1);
  }
}

/* ═══════════════════════════ 2. Base ═══════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: var(--tabbar-offset);
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-ui);
  font-size: var(--text-callout);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--tint);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

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

::selection {
  background: var(--accent-soft);
}

.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;
}

.skip-link {
  position: absolute;
  top: calc(-1 * var(--space-9));
  left: var(--space-4);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-3);
}

.icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--icon-fill, none);
  stroke: currentColor;
  stroke-width: var(--icon-stroke, 1.75);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════ 3. App shell ═══════════════════════════ */

.app {
  min-height: 100vh;
  min-height: 100dvh;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.site-main {
  flex: 1;
}

.shell {
  width: min(var(--wide-w), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.shell.narrow {
  width: min(var(--content-w), calc(100% - 2 * var(--gutter)));
}

.section {
  padding-block: var(--space-4) var(--space-9);
}

/* Brand lockup: circular mark + two-tone wordmark, as in the logo. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--label);
  text-decoration: none;
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-circle);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-title3);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.wordmark-my {
  color: var(--label);
}

.wordmark-jeff {
  color: var(--accent);
}

/* Top bar (phone and tablet) */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow var(--dur-base) var(--ease-out);
  view-transition-name: topbar;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-bar);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Bottom tab bar (phone and tablet) */
.mobile-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  min-height: var(--tabbar-offset);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--material);
  box-shadow: 0 -1px 0 var(--separator);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  view-transition-name: tabbar;
}

.mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: var(--tabbar-h);
  color: var(--label-secondary);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.mobile-nav a .icon {
  width: 1.625rem;
  height: 1.625rem;
}

.mobile-nav a[aria-current="page"] {
  --icon-fill: currentColor;
  --icon-detail: var(--surface);
  color: var(--tint);
}

.mobile-nav a:active {
  transform: scale(0.9);
}

/* Floating compose button (phone and tablet) */
.fab {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: calc(var(--tabbar-offset) + var(--space-4));
  z-index: var(--z-fab);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-fab);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}

.fab .icon {
  --icon-stroke: 2.1;
}

.fab:active {
  transform: scale(0.9);
}

/* Sidebar (desktop only; see section 14) */
.sidebar {
  display: none;
}

.nav-primary {
  display: grid;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3rem;
  padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-full);
  color: var(--label);
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.nav-item .icon {
  width: 1.625rem;
  height: 1.625rem;
}

.nav-item[aria-current="page"] {
  --icon-fill: currentColor;
  --icon-detail: var(--bg);
  font-weight: 700;
}

.nav-item:active {
  transform: scale(var(--press-scale));
}

.sidebar-account {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.sidebar-pitch {
  margin-bottom: var(--space-1);
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.account-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-full);
  color: var(--label);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.account-chip-text {
  display: grid;
  min-width: 0;
  line-height: var(--leading-snug);
}

.account-chip-text strong,
.account-chip-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chip-text strong {
  font-size: var(--text-subhead);
}

.account-chip-text span {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

/* Footer */
.site-footer {
  width: min(var(--content-w), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--separator);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.footer-nav a {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
  text-decoration: none;
}

.footer-credit {
  margin-top: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-caption);
}

/* Toasts (Django messages) */
.toasts {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--header-h) + var(--space-2));
  left: 50%;
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  width: min(28rem, calc(100% - 2 * var(--gutter)));
  transform: translateX(-50%);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--material-strong);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-subhead);
  font-weight: 500;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  animation: toast-in var(--dur-slow) var(--ease-spring) both;
}

.toast p {
  flex: 1;
}

.toast > .icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--tint);
}

.toast-success > .icon {
  --icon-stroke: 2.25;
  color: var(--success);
}

.toast-error > .icon,
.toast-warning > .icon {
  color: var(--danger);
}

.toast.is-leaving {
  animation: toast-out var(--dur-base) var(--ease-out) forwards;
}

.toast-close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--label-secondary);
}

.toast-close .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* ═══════════════════════════ 4. Primitives ═══════════════════════════ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  font-size: var(--text-callout);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn .icon {
  width: 1.25rem;
  height: 1.25rem;
  --icon-stroke: 2;
}

.btn:active {
  transform: scale(var(--press-scale));
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn[aria-busy="true"],
.post-action[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.btn-secondary {
  background: var(--fill);
  color: var(--tint);
}

.btn-tertiary {
  background: transparent;
  color: var(--tint);
}

.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-on-brand {
  background: var(--on-brand-fill);
  color: var(--on-brand);
}

.btn-danger-secondary {
  background: var(--danger-bg);
  color: var(--danger);
}

.btn-compact {
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  font-size: var(--text-subhead);
}

.btn-block {
  width: 100%;
}

.btn-toggle.is-selected {
  --icon-fill: currentColor;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--label);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.icon-button[aria-current="page"] {
  --icon-fill: currentColor;
  --icon-detail: var(--surface);
  color: var(--tint);
}

.icon-button:active {
  transform: scale(0.9);
}

.icon-button-sm {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--label-secondary);
}

.icon-button-sm .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.send-button {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
}

.send-button .icon {
  width: 1.125rem;
  height: 1.125rem;
  --icon-stroke: 2.5;
}

.send-button:active {
  transform: scale(0.88);
}

.send-button:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

/* Badges and chips */
.badge,
.identity-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.375rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--fill);
  color: var(--label-secondary);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.badge .icon {
  width: 0.875rem;
  height: 0.875rem;
  --icon-stroke: 2.25;
}

.badge-official {
  background: var(--chip-official-bg);
  color: var(--chip-official-fg);
}

.badge-verified {
  background: var(--chip-verified-bg);
  color: var(--chip-verified-fg);
}

.badge-voice {
  background: var(--chip-voice-bg);
  color: var(--chip-voice-fg);
}

.badge-sponsored,
.badge-recognition,
.badge-warning {
  background: var(--chip-accent-bg);
  color: var(--chip-accent-fg);
}

.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.icon-badge-wrap {
  position: relative;
  display: inline-grid;
}

.count-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.45rem;
  display: grid;
  place-items: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-full);
  background: var(--badge-count);
  box-shadow: 0 0 0 2px var(--bg);
  color: var(--on-brand);
  font-size: var(--text-micro);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.count-badge-inline {
  position: static;
  box-shadow: none;
}

/* Verified seal beside a name; shape and color identify the account type.
   The staff shield shares the same footprint. */
.verified-badge,
.staff-badge {
  display: inline-block;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.2em;
  vertical-align: -0.16em;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.verified-badge-lg,
.staff-badge-lg {
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.15em;
  vertical-align: -0.04em;
}

.verified-badge-official {
  --seal-fill: var(--seal-official-fill);
  --seal-mark: var(--seal-official-mark);
}

.verified-badge-business {
  --seal-fill: var(--seal-business-fill);
  --seal-mark: var(--seal-business-mark);
}

.verified-badge-organization {
  --seal-fill: var(--seal-organization-fill);
  --seal-mark: var(--seal-organization-mark);
}


/* Avatars */
.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-circle);
  object-fit: cover;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.avatar-fallback {
  font-size: var(--text-body);
}

.avatar-sm {
  width: 2.25rem;
  height: 2.25rem;
}

.avatar-sm.avatar-fallback {
  font-size: var(--text-subhead);
}

.avatar-md {
  width: 2.75rem;
  height: 2.75rem;
}

.avatar-lg {
  width: 4rem;
  height: 4rem;
}

.avatar-lg.avatar-fallback {
  font-size: var(--text-title2);
}

.avatar-xl {
  width: 6rem;
  height: 6rem;
}

.avatar-xl.avatar-fallback {
  font-size: var(--text-large);
}

.avatar-org {
  border-radius: var(--radius-avatar-org);
  background: var(--avatar-org-bg);
  color: var(--avatar-org-fg);
}

/* Page headers (iOS large title) */
.section-header {
  margin: var(--space-2) 0 var(--space-6);
}

.section-header h1 {
  font-size: var(--text-large);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.section-header p:not(.eyebrow) {
  max-width: 36rem;
  margin-top: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.section-header .header-action {
  margin-top: var(--space-4);
}

.section-header-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.eyebrow {
  margin-bottom: var(--space-1);
  color: var(--accent-text);
  font-size: var(--text-footnote);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.eyebrow a {
  color: inherit;
  text-decoration: none;
}

.lede {
  color: var(--label-secondary);
  font-size: var(--text-callout);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 2.75rem;
  margin: 0 0 var(--space-2) calc(-1 * var(--space-2));
  padding-right: var(--space-2);
  color: var(--tint);
  font-size: var(--text-callout);
  font-weight: 500;
  text-decoration: none;
}

.back-link .icon {
  --icon-stroke: 2.25;
}

.block-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.block-header h2 {
  font-size: var(--text-title2);
  font-weight: 700;
}

.block-header a {
  flex: none;
  font-size: var(--text-subhead);
  font-weight: 600;
  text-decoration: none;
}

.home-block {
  margin-top: var(--space-8);
}

.list-heading {
  margin: var(--space-7) 0 var(--space-3);
  font-size: var(--text-title3);
  font-weight: 700;
}

.section-group {
  margin-top: var(--space-6);
}

.section-group-title {
  margin: var(--space-6) var(--space-4) var(--space-2);
  color: var(--label-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-footnote);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.section-group > .section-group-title {
  margin-top: 0;
}

.subsection-title {
  margin: var(--space-7) 0 var(--space-3);
  font-size: var(--text-title3);
  font-weight: 700;
}

.footnote {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-7);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.footnote .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.attribution,
.meta-block,
.topic-status {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.topic-status {
  font-weight: 600;
}

/* Notices, empty states, disclosure, menus */
.notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: var(--text-subhead);
}

.notice > .icon {
  color: var(--tint);
}

.notice-action span {
  flex: 1;
}

.setup-banner {
  padding-top: var(--space-4);
}

.empty-panel {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-9) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.empty-panel > .icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--tint-soft);
  color: var(--tint);
}

.empty-panel :is(h1, h2) {
  font-size: var(--text-title3);
  font-weight: 700;
}

.empty-panel p {
  max-width: 28rem;
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.empty-panel .btn {
  margin-top: var(--space-3);
}

.empty-state {
  padding: var(--space-4) 0;
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.empty-state-spaced {
  margin-top: var(--space-4);
}

.disclosure {
  margin-top: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.disclosure summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-subhead);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.disclosure summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.5;
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}

.disclosure[open] summary::after {
  transform: rotate(-135deg);
}

.disclosure-danger summary {
  color: var(--danger);
}

.disclosure-body {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}

.menu {
  position: relative;
}

.menu summary {
  list-style: none;
}

.menu summary::-webkit-details-marker {
  display: none;
}

.menu-popover {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-menu);
  display: grid;
  min-width: 13rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--material-strong);
  box-shadow: var(--shadow-raised);
  transform-origin: top right;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  animation: menu-in var(--dur-base) var(--ease-ios) both;
}

.menu-popover > a,
.menu-popover button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  color: var(--label);
  font-size: var(--text-callout);
  text-align: left;
  text-decoration: none;
}

.menu-popover > * + * {
  border-top: 1px solid var(--separator);
}

.menu-popover .menu-danger {
  color: var(--danger);
}

/* Forms */
.stack-form {
  display: grid;
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field > label {
  font-size: var(--text-subhead);
  font-weight: 600;
}

input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="hidden"])),
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--separator-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-callout);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

textarea {
  min-height: 7rem;
  line-height: var(--leading-body);
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--label-tertiary);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--tint);
  outline: none;
  box-shadow: 0 0 0 4px var(--tint-soft);
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--tint);
}

input[type="file"] {
  font-size: var(--text-subhead);
}

.field:has(input[type="checkbox"]) {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.field-has-errors :is(input, select, textarea) {
  border-color: var(--danger);
}

.help {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.field-errors,
.form-errors {
  color: var(--danger);
  font-size: var(--text-footnote);
  font-weight: 500;
}

.field-errors ul,
.form-errors ul {
  list-style: none;
}

.form-errors {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  font-size: var(--text-subhead);
}

/* Segmented control on native radios, as in UISegmentedControl. */
.segmented {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--fill);
}

.segmented-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--label-secondary);
  font-size: var(--text-subhead);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.segmented-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented-option .icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.segmented-option:has(input:checked),
.segmented-option[aria-current="page"] {
  background: var(--surface);
  color: var(--label);
  box-shadow: var(--shadow-card);
}

.segmented-option:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

a.segmented-option {
  text-decoration: none;
}

.queue-filter {
  margin-bottom: var(--space-5);
}

.field[hidden] {
  display: none;
}

/* Donate: Square's card iframe and wallet buttons inside native fieldsets. */
.donate {
  display: grid;
  gap: var(--space-6);
}

.donate-section {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.donate-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 0;
  font-size: var(--text-title3);
  font-weight: 700;
}

.donate-optional {
  color: var(--label-tertiary);
  font-size: var(--text-footnote);
  font-weight: 500;
}

.amount-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--space-2);
}

.amount-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  border: 1px solid var(--separator-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-callout);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.amount-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.amount-option:hover {
  background: var(--surface-hover);
}

.amount-option:has(input:checked) {
  border-color: var(--tint);
  background: var(--tint-soft);
  color: var(--tint);
}

.amount-option:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.amount-custom {
  max-width: 14rem;
}

.wallet-buttons {
  display: grid;
  gap: var(--space-3);
}

.wallet-buttons:not(:has(:not([hidden]))) {
  display: none;
}

.apple-pay-button {
  display: block;
  width: 100%;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: donate;
  -apple-pay-button-style: black;
}

.google-pay-button {
  min-height: 3rem;
}

.apple-pay-button[hidden],
.google-pay-button[hidden],
.or-divider[hidden],
.donate-status[hidden] {
  display: none;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
  font-weight: 600;
}

.or-divider::before,
.or-divider::after {
  flex: 1;
  height: 1px;
  background: var(--separator);
  content: "";
}

.card-container {
  min-height: 5.5rem;
}

.card-container:empty {
  display: none;
}

.card-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  border: 1px dashed var(--separator-strong);
  border-radius: var(--radius-md);
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.donate-status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--text-subhead);
  font-weight: 500;
}

.donate-submit {
  font-variant-numeric: tabular-nums;
}

.secure-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.secure-note .icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--success);
}

.thanks-panel .thanks-amount {
  color: var(--tint);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.thanks-panel .action-row {
  justify-content: center;
}

.form-context {
  margin-bottom: var(--space-4);
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.form-footer {
  margin-top: var(--space-5);
  color: var(--label-secondary);
  font-size: var(--text-subhead);
  text-align: center;
}

.form-footer + .form-footer {
  margin-top: var(--space-2);
}

.form-actions,
.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.form-actions {
  margin-top: var(--space-2);
}

.action-row-compact {
  margin-top: var(--space-3);
}

.inline-action {
  display: inline-flex;
  margin-left: var(--space-2);
}

.inline-action-offset {
  margin-left: auto;
}

.danger-zone {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--separator);
}

.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.search-field {
  position: relative;
  flex: 1;
}

.search-field .icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--label-secondary);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-field input {
  min-height: 2.75rem;
  padding-left: 2.5rem;
  border-color: transparent;
  background: var(--fill);
}

.search-field input:focus-visible {
  background: var(--surface);
}

/* Prose (long-form text) */
.prose {
  max-width: 40rem;
  font-size: var(--text-body);
  line-height: 1.6;
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 1.8em;
  font-size: var(--text-title2);
  font-weight: 700;
}

.prose h3 {
  margin-top: 1.4em;
  font-size: var(--text-title3);
  font-weight: 700;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose blockquote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--accent);
  color: var(--label-secondary);
}

/* ═══════════════════════════ 5. Lists ═══════════════════════════ */

/* Grouped inset list: the primary list container (iOS Settings). */
.grouped-list,
.ops-list {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  list-style: none;
}

.grouped-list + .grouped-list {
  margin-top: var(--space-6);
}

.grouped-list > li,
.ops-list > li {
  position: relative;
  --separator-inset: var(--space-4);
}

.grouped-list > li:has(.icon-tile, .avatar, .date-tile) {
  --separator-inset: 4.25rem;
}

.grouped-list > li + li::before,
.ops-list > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: var(--separator-inset);
  border-top: 1px solid var(--separator);
}

.ops-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-subhead);
}

.ops-list > li > a {
  font-weight: 600;
  text-decoration: none;
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  color: var(--label);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.list-row:active {
  background: var(--fill);
}

.list-row-text {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
  line-height: var(--leading-snug);
}

.list-row-text strong {
  font-size: var(--text-callout);
  font-weight: 600;
}

.list-row-text span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--label-secondary);
  font-size: var(--text-subhead);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.list-row-chevron {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--label-tertiary);
  --icon-stroke: 2.25;
}

.list-row-danger strong {
  color: var(--danger);
}

/* Radio choices as a grouped list with a leading glyph, as in iOS Settings. */
.choice-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.choice-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.75rem;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.choice-row + .choice-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 4.25rem;
  border-top: 1px solid var(--separator);
}

.choice-row:has(input:checked) {
  background: var(--tint-soft);
}

.choice-row:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.choice-seal {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--label-secondary);
}

.choice-seal .verified-badge {
  width: 2rem;
  height: 2rem;
  margin: 0;
}

.org-fields {
  display: grid;
  gap: var(--space-4);
}

.account-type-form:has(input[value="individual"]:checked) .org-fields {
  display: none;
}

/* Label/value pairs in a grouped list, as in iOS "About". */
.detail-list {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.detail-list > div {
  display: grid;
  grid-template-columns: minmax(6rem, 30%) 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-subhead);
}

.detail-list > div + div {
  border-top: 1px solid var(--separator);
}

.detail-list dt {
  color: var(--label-secondary);
}

.detail-list dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 var(--space-2) var(--space-2) var(--space-4);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
  font-weight: 600;
}

.icon-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--tile-slate);
  color: var(--tile-glyph);
}

.icon-tile .icon {
  width: 1.25rem;
  height: 1.25rem;
  --icon-stroke: 2;
}

.tile-navy {
  background: var(--tile-navy);
}

.tile-gold {
  background: var(--tile-gold);
  color: var(--tile-glyph-on-gold);
}

.tile-river {
  background: var(--tile-river);
}

.tile-green {
  background: var(--tile-green);
}

.tile-coral {
  background: var(--tile-coral);
}

.tile-slate {
  background: var(--tile-slate);
}

.tile-danger {
  background: var(--tile-danger);
}

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.info-list li > .icon {
  margin-top: 1px;
  color: var(--tint);
}

.info-list li > span {
  display: grid;
  line-height: var(--leading-snug);
}

.info-list strong {
  font-size: var(--text-callout);
  font-weight: 600;
}

.info-list li > span > span {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.grouped-list > li:has(> .icon):not(:has(.list-row)) {
  --separator-inset: 3.25rem;
}

.card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.card-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.card-byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-subhead);
}

.card-byline time {
  margin-left: auto;
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.tile-grid {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.feature-tile {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  height: 100%;
  min-height: 9rem;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--label);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.feature-tile .icon-tile {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
}

.feature-tile .icon-tile .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.feature-tile:active {
  transform: scale(0.98);
}

.feature-tile-title {
  font-family: var(--font-display);
  font-size: var(--text-title3);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
}

.feature-tile-text {
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

/* ═══════════════════════════ 6. Feed ═══════════════════════════ */

.compose-prompt,
.composer {
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.compose-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--label-secondary);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.compose-prompt:active {
  transform: scale(0.99);
}

.compose-prompt-text {
  flex: 1;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--fill);
  overflow: hidden;
  font-size: var(--text-callout);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-prompt > .icon {
  margin-right: var(--space-2);
  color: var(--tint);
}

.composer {
  padding: var(--space-4);
}

.composer-row {
  display: flex;
  gap: var(--space-3);
}

.composer-main {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  min-width: 0;
}

.composer-prompt {
  padding-top: var(--space-1);
  font-size: var(--text-callout);
  font-weight: 700;
}

.composer .composer-input {
  min-height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--text-body);
  resize: none;
}

.composer .composer-input:focus-visible {
  box-shadow: none;
}

.composer:focus-within {
  box-shadow: var(--shadow-card), 0 0 0 3px var(--tint-soft);
}

.upload-preview {
  position: relative;
  width: fit-content;
  margin-top: var(--space-2);
}

.upload-preview img {
  max-height: 18rem;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.upload-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--scrim);
  color: var(--on-brand);
  font: inherit;
  font-size: var(--text-footnote);
  font-weight: 600;
  cursor: pointer;
}

.composer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--separator);
}

.composer-attach {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--fill);
  color: var(--tint);
  font-size: var(--text-subhead);
  font-weight: 600;
  cursor: pointer;
}

.composer-attach .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.composer-attach input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.composer-attach:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.composer-guidance {
  display: none;
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.character-count {
  margin-left: auto;
  color: var(--label-secondary);
  font-size: var(--text-footnote);
  font-variant-numeric: tabular-nums;
}

.character-count.is-near-limit {
  color: var(--danger);
  font-weight: 600;
}

.composer-actions {
  display: flex;
  gap: var(--space-2);
}

.post-feed {
  display: grid;
  gap: var(--space-3);
}

.post {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.post-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.post-more {
  flex: none;
  margin-right: calc(-1 * var(--space-2));
}

.post-avatar-link {
  flex: none;
  border-radius: var(--radius-full);
}

.post-byline {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: var(--leading-snug);
}

.post-name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.post-author {
  color: var(--label);
  font-size: var(--text-callout);
  font-weight: 700;
  text-decoration: none;
}

.post-time {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
  text-decoration: none;
}

.post-body {
  margin-top: var(--space-3);
  font-size: var(--text-body);
  line-height: 1.47;
  overflow-wrap: anywhere;
}

.post-body > p + p {
  margin-top: 0.6em;
}

.post-lead .post-body {
  font-size: var(--text-title3);
  line-height: 1.42;
  letter-spacing: -0.01em;
}

.post-media {
  display: block;
  margin: var(--space-3) 0 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.post-media img {
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
}

.post-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-3) calc(-1 * var(--space-2)) calc(-1 * var(--space-2));
}

.post-actions-end {
  margin-left: auto;
}

.post-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--label-secondary);
  font-size: var(--text-subhead);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.post-action .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.post-action:active {
  transform: scale(0.92);
}

.post-action-heart.is-selected {
  --icon-fill: var(--accent);
  color: var(--accent-text);
}

.post-action-heart.is-selected .icon {
  stroke: var(--accent);
}

.post-action-save.is-selected {
  --icon-fill: currentColor;
  color: var(--tint);
}

/* The heart pops only right after a tap (JS adds .is-popping), never on page load. */
.post-action-heart.is-popping .icon {
  animation: heart-pop var(--dur-slow) var(--ease-spring);
}

.post-action-heart.is-popping::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--space-3) + 0.6875rem);
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius-circle);
  pointer-events: none;
  animation: heart-burst var(--dur-slow) var(--ease-out) forwards;
}

/* Replies */
.thread {
  margin-top: var(--space-2);
}

.thread-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--fill);
  color: var(--label-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-footnote);
  font-weight: 600;
  vertical-align: 0.15em;
}

.reply-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.reply {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.reply.htmx-added {
  opacity: 0;
  transform: translateY(6px);
}

.reply-bubble {
  min-width: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-radius: var(--radius-xs) var(--radius-lg) var(--radius-lg) var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.reply-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.reply-author {
  color: var(--label);
  font-size: var(--text-subhead);
  font-weight: 700;
  text-decoration: none;
}

.reply-time {
  color: var(--label-secondary);
  font-size: var(--text-caption);
}

.reply-body {
  margin-top: 2px;
  font-size: var(--text-callout);
  overflow-wrap: anywhere;
}

.reply-body > p + p {
  margin-top: 0.5em;
}

.thread-empty {
  padding: var(--space-3) 0;
  color: var(--label-secondary);
  font-size: var(--text-subhead);
  list-style: none;
}

.reply-composer,
.message-compose {
  position: sticky;
  bottom: calc(var(--tabbar-offset) + var(--space-3));
  z-index: var(--z-header);
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background: var(--material-strong);
  box-shadow: var(--shadow-raised);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

.reply-composer:focus-within,
.message-compose:focus-within {
  box-shadow: var(--shadow-raised), 0 0 0 3px var(--tint-soft);
}

.reply-composer-field,
.message-compose-field {
  flex: 1;
  min-width: 0;
}

.reply-composer textarea,
.message-compose textarea {
  display: block;
  min-height: 2.25rem;
  max-height: 10rem;
  padding: var(--space-2) var(--space-2);
  border: 0;
  background: transparent;
  line-height: 1.35;
  resize: none;
}

.reply-composer textarea:focus-visible,
.message-compose textarea:focus-visible {
  box-shadow: none;
}

/* ═══════════════════════════ 7. Events ═══════════════════════════ */

.date-tile {
  display: grid;
  flex: none;
  place-content: center;
  width: 3rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  line-height: 1;
  text-align: center;
}

.date-tile-month {
  color: var(--accent-text);
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.date-tile-day {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: var(--text-title2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.date-tile-lg {
  width: 4rem;
  height: 4.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.date-tile-lg .date-tile-day {
  font-size: var(--text-title1);
}

/* Horizontal, swipeable rail */
.rail {
  display: grid;
  grid-auto-columns: 15rem;
  grid-auto-flow: column;
  gap: var(--space-3);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-1) var(--gutter) var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail > li {
  scroll-snap-align: start;
}

.event-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  height: 100%;
  min-height: 11.5rem;
  padding: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--label);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out);
}

.event-card:active {
  transform: scale(0.97);
}

.event-card-media {
  align-self: stretch;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
}

.event-card-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.event-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
}

.event-card-label {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--chip-accent-bg);
  color: var(--chip-accent-fg);
  font-size: var(--text-caption);
  font-weight: 700;
}

.event-card-title {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--text-callout);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.event-card-meta {
  display: -webkit-box;
  overflow: hidden;
  color: var(--label-secondary);
  font-size: var(--text-footnote);
  line-height: var(--leading-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.event-card .badge {
  margin-top: auto;
}

/* Event list row */
.event-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--label);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.event-row:active {
  background: var(--fill);
}

.event-main {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.event-title {
  font-size: var(--text-callout);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.event-meta {
  color: var(--label-secondary);
  font-size: var(--text-subhead);
  line-height: var(--leading-snug);
}

.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.event-thumb img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.event-cover {
  margin: 0 0 var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

.event-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.event-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-5);
}

.event-detail-header h1 {
  font-size: var(--text-title1);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.event-detail-header .event-tags {
  margin: 0 0 var(--space-2);
}

.event-actions {
  margin-bottom: var(--space-5);
}

/* ═══════════════════════════ 8. Official ═══════════════════════════ */

.official-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.official-item {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.official-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.official-seal {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--chip-official-bg);
  color: var(--chip-official-fg);
}

.official-seal .icon {
  width: 1.125rem;
  height: 1.125rem;
  --icon-stroke: 2;
}

.official-org {
  color: var(--label);
  font-size: var(--text-subhead);
  font-weight: 700;
}

.official-meta .badge {
  margin-left: auto;
}

.official-item :is(h2, h3) {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-title3);
  font-weight: 700;
}

.official-item :is(h2, h3) a {
  color: var(--label);
  text-decoration: none;
}

.official-item > p:not(.official-foot, .attribution) {
  display: -webkit-box;
  overflow: hidden;
  color: var(--label-secondary);
  font-size: var(--text-subhead);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.official-foot {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.official-foot > * + *::before {
  content: "·";
  margin-right: var(--space-2);
}

.official-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--info-bg);
  font-size: var(--text-subhead);
}

.article-header {
  margin-bottom: var(--space-5);
}

.article-header h1 {
  font-size: var(--text-title1);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.article-meta {
  margin-top: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

/* Sponsored: visually distinct from neighbors and Official. */
.sponsored-strip {
  padding-top: var(--space-4);
  border-top: 1px solid var(--separator);
}

.sponsored-header {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.sponsored-title {
  font-size: var(--text-title3);
  font-weight: 700;
}

.sponsored-note {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.sponsored-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.sponsored-item {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed var(--separator-strong);
  border-radius: var(--radius-lg);
}

.sponsored-item h3 {
  font-size: var(--text-callout);
  font-weight: 700;
}

.sponsored-item h3 a {
  color: var(--label);
}

.sponsored-item p:not(.attribution) {
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

/* ═══════════════════════════ 9. Profiles ═══════════════════════════ */

.profile-card {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.profile-cover {
  position: relative;
  height: 7rem;
  background: var(--brand-surface);
}

.profile-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2.75rem;
  background: var(--accent);
  opacity: 0.9;
  -webkit-mask: var(--wave-mask) bottom / 100% 100% no-repeat;
  mask: var(--wave-mask) bottom / 100% 100% no-repeat;
}

.profile-identity {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
  padding: 0 var(--space-5);
}

.profile-identity .avatar-xl {
  position: relative;
  margin-top: -3rem;
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-ring);
}

.profile-identity h1 {
  font-size: var(--text-title1);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.profile-account-type {
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.profile-bio {
  margin-top: var(--space-2);
  font-size: var(--text-callout);
}

.recognition-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.profile-shared {
  margin-top: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.profile-actions:empty {
  padding-bottom: var(--space-2);
}

.profile-actions .btn {
  white-space: normal;
}

.profile-edit-avatar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.account-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--label);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.account-card:active {
  transform: scale(0.99);
}

.account-card .list-row-text strong {
  font-family: var(--font-display);
  font-size: var(--text-title3);
  font-weight: 700;
}

/* ═══════════════════════════ 10. Messages ═══════════════════════════ */

.conversation-header {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  text-align: center;
}

.conversation-header h1 {
  margin-top: var(--space-2);
  font-size: var(--text-title2);
  font-weight: 700;
}

.conversation-header p {
  max-width: 22rem;
  color: var(--label-secondary);
  font-size: var(--text-footnote);
  text-wrap: balance;
}

.conversation-header p .icon {
  width: 1rem;
  height: 1rem;
  margin-right: var(--space-1);
  vertical-align: -0.2em;
}

.message-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
}

.bubble-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bubble-row.is-own {
  align-items: flex-end;
}

.bubble {
  max-width: min(78%, 30rem);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: var(--text-callout);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bubble > p + p {
  margin-top: 0.5em;
}

.is-own .bubble {
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  background: var(--bubble-own);
  box-shadow: none;
  color: var(--on-brand);
}

.card .bubble {
  max-width: none;
  background: var(--surface-sunken);
  box-shadow: none;
}

.bubble-meta {
  margin: 2px var(--space-2) var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-caption);
}

/* ═══════════════════════════ 11. Alerts ═══════════════════════════ */

.alert-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}

.grouped-list > .alert-row {
  --separator-inset: 2.25rem;
}

.unread-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45rem;
  border-radius: var(--radius-full);
  background: var(--tint);
  visibility: hidden;
}

.is-unread .unread-dot {
  visibility: visible;
}

.alert-main {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.alert-title {
  font-size: var(--text-callout);
  font-weight: 500;
}

.is-unread .alert-title {
  font-weight: 700;
}

.alert-title a {
  color: var(--label);
  text-decoration: none;
}

.alert-body {
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.alert-meta {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

/* ═══════════════════════════ 12. Pages ═══════════════════════════ */

/* Signed-out welcome: the brand moment. */
.welcome {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-7) var(--space-6) var(--space-10);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--brand-surface);
  box-shadow: var(--shadow-hero);
  color: var(--on-brand);
}

.welcome-mark {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-raised);
}

.welcome-kicker {
  color: var(--accent);
  font-size: var(--text-footnote);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.welcome h1 {
  max-width: 16ch;
  font-size: var(--text-hero);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
}

.welcome-lede {
  max-width: 32rem;
  color: var(--on-brand-secondary);
  font-size: var(--text-callout);
}

.welcome-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.welcome-wave {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 4.5rem;
}

.welcome-wave path:first-child {
  fill: var(--accent);
}

.welcome-wave path:last-child {
  fill: none;
  stroke: var(--on-brand-faint);
  stroke-width: 2;
}

/* Neighbors are talking (home) */
.discussion-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--label);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.discussion-item:active {
  background: var(--fill);
}

.discussion-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.discussion-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-subhead);
}

.discussion-meta time {
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.discussion-body {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-subhead);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Sign in, join, sign out */
.auth-card {
  width: min(26rem, calc(100% - 2 * var(--gutter)));
  margin: var(--space-4) auto 0;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.auth-mark {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-circle);
}

.auth-header {
  margin-bottom: var(--space-6);
  text-align: center;
}

.auth-header h1,
.auth-card > h1 {
  font-size: var(--text-title1);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
}

.auth-header p {
  margin-top: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-subhead);
}

.auth-card > .lede {
  margin: var(--space-2) 0 var(--space-5);
}

/* Administration */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  list-style: none;
}

.stat-strip li {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.stat-strip span {
  display: block;
  color: var(--label);
  font-family: var(--font-display);
  font-size: var(--text-title1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ops-grid {
  display: grid;
  gap: var(--space-7);
}

.ops-grid h2,
.content-section h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-title3);
  font-weight: 700;
}

.content-section {
  margin-top: var(--space-7);
}

.ops-sections {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

.ops-sections h3 {
  margin-bottom: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Search + filter row on Users and Posts pages */
.user-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.user-filters .search-field {
  flex: 1 1 14rem;
}

.user-filters select {
  flex: 0 1 auto;
  width: auto;
  min-height: 2.75rem;
}

.result-count {
  margin-bottom: var(--space-3);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.notice-danger > .icon {
  color: var(--danger);
}

.notice-warning > .icon {
  color: var(--warning);
}

.disclosure + .disclosure {
  margin-top: var(--space-3);
}

/* A post or reply under review, with its remove/restore control */
.content-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.content-row-text {
  display: grid;
  flex: 1 1 16rem;
  gap: var(--space-1);
  min-width: 0;
}

.content-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  color: var(--label-secondary);
  font-size: var(--text-footnote);
}

.content-row-meta a {
  color: var(--label);
  font-weight: 600;
  text-decoration: none;
}

.content-row-body {
  overflow-wrap: anywhere;
  font-size: var(--text-subhead);
}

.content-row-reason {
  color: var(--danger);
  font-size: var(--text-footnote);
}

.row-remove summary {
  list-style: none;
  cursor: pointer;
}

.row-remove summary::-webkit-details-marker {
  display: none;
}

.row-remove[open] summary {
  display: none;
}

.row-remove-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-footnote);
}

.row-remove-form input {
  width: 14rem;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
}

/* Errors */
.error-page {
  text-align: center;
}

.error-panel {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
}

.error-panel h1 {
  font-size: var(--text-title1);
  font-weight: 800;
}

.error-panel p:not(.eyebrow, .error-code) {
  max-width: 28rem;
  color: var(--label-secondary);
}

.error-code {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.error-panel-danger .error-code {
  color: var(--danger);
}

/* ═══════════════════════════ 13. Motion ═══════════════════════════ */

@keyframes heart-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes heart-burst {
  from { opacity: 0.9; transform: scale(0.4); }
  to { opacity: 0; transform: scale(1.5); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@keyframes menu-in {
  from { opacity: 0; transform: scale(0.9); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
}

@keyframes page-out {
  to { opacity: 0; }
}

/* Cross-page transitions (progressive: Chrome, Edge, Safari 18.2+). The top bar,
   tab bar, and sidebar keep their names so they stay put while content fades. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: var(--dur-fast) var(--ease-out) both page-out;
  }

  ::view-transition-new(root) {
    animation: var(--dur-base) var(--ease-out) both page-in;
  }
}

@media (hover: hover) {
  .btn-primary:hover { background: var(--btn-primary-hover); }
  .btn-secondary:hover,
  .btn-tertiary:hover { background: var(--fill-hover); }
  .btn-accent:hover,
  .fab:hover { background: var(--accent-hover); }
  .btn-on-brand:hover { background: var(--on-brand-fill-hover); }
  .icon-button:hover,
  .toast-close:hover,
  .nav-item:hover,
  .account-chip:hover { background: var(--fill); }
  .post-action:hover { background: var(--fill); color: var(--label); }
  .post-action-heart.is-selected:hover { color: var(--accent-text); }
  .list-row:hover,
  .event-row:hover,
  .discussion-item:hover,
  .menu-popover > a:hover,
  .menu-popover button:hover { background: var(--surface-hover); }
  .feature-tile:hover,
  .event-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
  .post-author:hover,
  .reply-author:hover,
  .official-item a:hover,
  .alert-title a:hover { text-decoration: underline; }
  .footer-nav a:hover { color: var(--label); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .btn,
  .post-action,
  .icon-button,
  .send-button {
    border: 1px solid ButtonText;
  }
}

/* ═══════════════════════════ 14. Responsive ═══════════════════════════ */

@media (min-width: 40rem) {
  :root {
    --gutter: 1.5rem;
  }

  .section {
    padding-top: var(--space-6);
  }

  .composer-guidance {
    display: inline;
  }

  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .welcome {
    padding: var(--space-9) var(--space-8) calc(var(--space-10) + var(--space-4));
  }

  .ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: social sidebar replaces the top bar, tab bar, and floating button. */
@media (min-width: 64rem) {
  body {
    padding-bottom: 0;
  }

  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    max-width: 80rem;
    margin-inline: auto;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    height: 100vh;
    height: 100dvh;
    padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5);
    overflow-y: auto;
    border-right: 1px solid var(--separator);
    view-transition-name: sidebar;
  }

  .sidebar .brand {
    padding-left: var(--space-2);
  }

  .sidebar .brand-mark {
    width: 2.25rem;
    height: 2.25rem;
  }

  .sidebar .wordmark {
    font-size: var(--text-title2);
  }

  .site-header,
  .mobile-nav,
  .fab {
    display: none;
  }

  .toasts {
    top: var(--space-5);
  }

  .section {
    padding-top: var(--space-8);
  }

  .reply-composer,
  .message-compose {
    bottom: var(--space-5);
  }

  .rail {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .section-header h1 {
    font-size: var(--text-large);
  }
}