/* ════════════════════════════════════════════════════════════
   RSVP W/ ME — "Stub" design system (2026-10-09)
   ────────────────────────────────────────────────────────────
   Single source of truth for the shared design vocabulary.
   Spec: docs/2026-10-09-stub-redesign-rollout.md; mockups in
   docs/prototypes/2026-10-09-stub-mockups/.
   Magenta = you (Going, Add, Like). Teal = friends (names,
   avatars, Invite). No red, no black pills. Ticket-corner
   (10px) buttons. Bricolage Grotesque titles, Instrument Sans
   body, DM Mono times.
   ════════════════════════════════════════════════════════════ */

/* Self-hosted, latin subset, variable weights. SIL OFL 1.1 — see
   static/fonts/README.md. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 500 800; font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 400 700; font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/instrument-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal; font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/dm-mono-500-latin.woff2') format('woff2');
}

:root {
  /* Type */
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Neutrals — the legacy --stone-* names are kept so older rules
     pick up the new paper/ink ramp without a rewrite. */
  --stone-50:  #FAF8F5;
  --stone-100: #F5F3EF;
  --stone-200: #E6E2DA;
  --stone-300: #D9D4CA;
  --stone-400: #CFC9BE;
  --stone-500: #8C8794;
  --stone-600: #5E5A66;
  --stone-700: #4A4652;
  --stone-800: #2E2A35;
  --stone-900: #18171C;
  /* Semantic */
  --bg: #F5F3EF;
  --surface: #FFFFFF;
  --raised: #F5F3EF;
  --ink: #18171C;
  --ink-muted: #5E5A66;
  --ink-subtle: #8C8794;
  --line: #E6E2DA;
  --border-subtle: #EFEBE4;
  --border: #E6E2DA;
  --hover-bg: rgba(24, 23, 28, 0.04);
  /* You = magenta. Going, + Add event, Like, the sticky ticket bar. */
  --you: #C8177F;
  --you-deep: #A3126A;
  --you-tint: #FCE4F1;
  --you-ink: #8A0E57;
  --on-you: #FFFFFF;
  /* Friends = teal. Friend names, avatars, Invite. */
  --friend: #0B7A75;
  --friend-deep: #08615D;
  --friend-text: #0B7A75;
  --friend-tint: #DDF3F1;
  --friend-ink: #0A5C58;
  /* Free / Went = green chip pair. */
  --free-tint: #E3F4EA;
  --free-ink: #17663A;
  /* Legacy engagement tokens, remapped onto the Stub palette.
     Like + Going both read as "you" (magenta); Went stays green
     (proof); Share reads as outward/friends (teal). */
  --accent: var(--you);
  --accent-deep: var(--you-deep);
  --like-tint: var(--you-tint);
  --like-tint-hover: #F9D2E8;
  --rsvp: var(--you);
  --rsvp-deep: var(--you-ink);
  --rsvp-tint: var(--you-tint);
  --rsvp-tint-hover: #F9D2E8;
  --rsvp-unconfirmed: var(--you);
  --rsvp-unconfirmed-deep: var(--you-ink);
  --rsvp-unconfirmed-tint: var(--you-tint);
  --rsvp-unconfirmed-tint-hover: #F9D2E8;
  --went: #17663A;
  --went-deep: #0F4D2A;
  --went-tint: #E3F4EA;
  --went-tint-hover: #CDEBD9;
  --share: var(--friend);
  --share-deep: var(--friend-deep);
  --share-tint: var(--friend-tint);
  --share-tint-hover: #C7EAE6;
  /* Destructive — no-show, field errors, destructive actions only. */
  --destructive: #B3261E;
  --destructive-tint: rgba(179, 38, 30, 0.08);
  /* Shape — ticket corners, not pills. */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-card: 18px;
}
/* Dark palette — from docs/prototypes/2026-10-09-stub-mockups/darken.py. */
:root[data-theme="dark"] {
  --stone-50:  #1C1B20;
  --stone-100: #2A2733;
  --stone-200: #2E2B35;
  --stone-300: #3A3642;
  --stone-400: #4A4652;
  --stone-500: #8C8794;
  --stone-600: #A8A3B0;
  --stone-700: #D6D2DC;
  --stone-800: #E8E5EC;
  --stone-900: #F2F0EC;
  --bg: #121114;
  --surface: #1C1B20;
  --raised: #2A2733;
  --ink: #F2F0EC;
  --ink-muted: #A8A3B0;
  --ink-subtle: #7D7887;
  --line: #2E2B35;
  --border-subtle: #26242C;
  --border: #2E2B35;
  --hover-bg: rgba(255, 255, 255, 0.05);
  --you-deep: #DE2A93;
  --you-tint: #3A1230;
  --you-ink: #FF8FD0;
  --friend-text: #5FD4C8;
  --friend-tint: #0F2E2C;
  --friend-ink: #7EE0D6;
  --free-tint: #12301F;
  --free-ink: #6EE7A0;
  --like-tint-hover: #4A1840;
  --rsvp-tint-hover: #4A1840;
  --rsvp-unconfirmed-tint-hover: #4A1840;
  --went: #6EE7A0;
  --went-deep: #4ADE80;
  --went-tint: #12301F;
  --went-tint-hover: #1A4029;
  --share: var(--friend-text);
  --share-deep: var(--friend-ink);
  --share-tint-hover: #143B38;
  --destructive: #F28B82;
  --destructive-tint: rgba(242, 139, 130, 0.12);
}
/* Tag-cat chip text colors — lighter in dark mode for legibility. */
:root[data-theme="dark"] .tags .tag-cat-workshop    { color: #c4b5fd; }
:root[data-theme="dark"] .tags .tag-cat-networking  { color: #f9a8d4; }
:root[data-theme="dark"] .tags .tag-cat-talk        { color: #93c5fd; }
:root[data-theme="dark"] .tags .tag-cat-demo        { color: #fca5a5; }
:root[data-theme="dark"] .tags .tag-cat-social      { color: #67e8f9; }
:root[data-theme="dark"] .tags .tag-cat-conference  { color: #a5b4fc; }
:root[data-theme="dark"] .tags .tag-cat-class       { color: #d6d3d1; }
:root[data-theme="dark"] .tags .tag-cat-ai          { color: #f0abfc; }
:root[data-theme="dark"] .tags .tag-cat-engineering { color: #fdba74; }
:root[data-theme="dark"] .tags .tag-cat-security    { color: #bef264; }
:root[data-theme="dark"] .tags .tag-cat-startup     { color: #fda4af; }
:root[data-theme="dark"] .tags .tag-cat-data        { color: #7dd3fc; }
:root[data-theme="dark"] .tags .tag-cat-founders    { color: #fde047; }
:root[data-theme="dark"] .tag-cost-free             { color: #6ee7b7; }
:root[data-theme="dark"] .tag-cost-paid             { color: #fde047; }

* { box-sizing: border-box; }

/* ------------------------------------------------------------------
   Accessibility — keyboard focus indicators.
   Use :focus-visible so mouse clicks don't show the ring but keyboard
   tab does. The 2px outline + 2px offset matches WCAG 2.4.7 (focus
   visible) without colliding with the existing border styles.
   ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Dark mode — use the higher-contrast accent token. */
@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline-color: var(--accent);
  }
}

body {
  font: 15px/1.55 var(--font-body);
  font-variant-numeric: tabular-nums;
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1.5rem 4rem;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { margin: 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-weight: 700; letter-spacing: -0.01em; }
h3 { font-weight: 700; }
.mono { font-family: var(--font-mono); }

/* Flash / error */
.error { background: var(--destructive-tint); color: var(--destructive); border: 1px solid var(--border-subtle); padding: .75rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .875rem; }
.flash { background: var(--friend-tint); color: var(--friend-ink); border: 1px solid var(--border-subtle); padding: .75rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .875rem; }
.flash a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.flash a:hover { text-decoration: none; }

/* Theme switch — sliding light/dark toggle.
   Note: we deliberately do NOT suppress :focus-visible here; the
   sitewide accessibility rule above paints a keyboard focus ring so
   the toggle remains reachable for keyboard users. Mouse/touch hover
   and active states stay chrome-free. */
.theme-switch,
.theme-switch:hover, .theme-switch:active {
  background: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none; appearance: none;
  transform: none !important;
}
.theme-switch { border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
.theme-switch-track {
  position: relative; display: inline-flex; align-items: center;
  width: 66px; height: 36px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px; padding: 0 7px;
}
:root[data-theme="dark"] .theme-switch-track { background: #1c1917; border-color: rgba(255, 255, 255, 0.15); }
.theme-switch-icon {
  position: absolute; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  margin-top: -6px;
  z-index: 0;
}
.theme-switch-icon.sun  { left: 10px;  background: #000000; }
.theme-switch-icon.moon { right: 10px; background: #000000; }
:root[data-theme="dark"] .theme-switch-icon.sun  { background: #ffffff; }
:root[data-theme="dark"] .theme-switch-icon.moon { background: #ffffff; }
.theme-switch-thumb {
  position: absolute; top: 6px; left: 4px;
  width: 24px; height: 24px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 0;
}
:root[data-theme="dark"] .theme-switch-thumb {
  background: #44403c;
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateX(32px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
}

/* Site header — a full-bleed white bar. The body is a centered 1200px
   column, so the bar's background bleeds to the viewport edges with the
   box-shadow + clip-path trick (no 100vw, so no horizontal scrollbar). */
.site-header {
  margin: -3rem 0 2rem; padding: 14px 0;
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface), 0 1px 0 100vmax var(--line);
  clip-path: inset(0 -100vmax -1px);
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; }
.brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark { display: block; flex: 0 0 auto; }
.brand-name {
  margin: 0; font-family: var(--font-display);
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
}
.primary-nav { display: flex; gap: 4px; }
.primary-nav .nav-link {
  padding: 8px 14px; border-radius: var(--radius);
  font-size: 15px; font-weight: 500; color: var(--ink-muted);
  text-decoration: none; margin: 0;
}
.primary-nav .nav-link:hover { color: var(--ink); background: var(--hover-bg); }
.primary-nav .nav-link.is-active { background: var(--ink); color: var(--surface); font-weight: 600; }
.search-form-header {
  flex: 1 1 220px; display: flex; align-items: center; gap: 8px;
  background: var(--raised); border-radius: var(--radius);
  padding: 0 16px; color: var(--ink-muted);
}
.search-form-header input[type=search] {
  border: 0; background: transparent; box-shadow: none;
  padding: 10px 0; font-size: 15px; width: 100%; color: var(--ink);
}
.search-form-header input[type=search]:focus { box-shadow: none; outline: none; }
.search-form-header:focus-within { outline: 2px solid var(--friend); outline-offset: 0; }

.auth-nav { display: flex; align-items: center; gap: .85rem; font-size: .85rem; margin-left: auto; }
@media (max-width: 640px) {
  .site-header { margin-top: -1.5rem; gap: 12px; }
  .search-form-header { order: 10; flex-basis: 100%; }
  .primary-nav { order: 11; flex-basis: 100%; }
  .auth-nav { gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
  .auth-button { padding: 0 .75rem; font-size: .8rem; }
  .brand-name { font-size: 19px; }
  .brand-mark { width: 34px; height: 30px; }
}
.auth-user {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 36px; box-sizing: border-box;
  color: var(--ink); text-decoration: none;
  padding: 0 .75rem; border-radius: var(--radius);
  transition: background .15s;
}
.auth-user:hover { background: var(--stone-100); }
.auth-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border-subtle); object-fit: cover;
}
.auth-name { font-weight: 500; }
.auth-link {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 .25rem;
  color: var(--ink-muted); text-decoration: none; font-size: .8rem;
}
.auth-link:hover { color: var(--ink); text-decoration: underline; }
/* "Sign out" is a CSRF-protected POST form; the button reuses .auth-link and
   resets native button chrome so it looks identical to the old link. */
.auth-logout-form { display: inline-flex; margin: 0; }
.auth-logout-btn { background: none; border: 0; cursor: pointer; font: inherit; }
.auth-button {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 36px; box-sizing: border-box;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 1rem; text-decoration: none; font-weight: 500;
  transition: background .15s, border-color .15s;
}
.auth-button:hover { background: var(--stone-100); border-color: var(--ink-subtle); }

/* Add-event CTA — the one filled control in the chrome, so it reads as the
   primary action rather than another link. Everything else in the nav is an
   outline pill or a bare link; this is the only thing wearing the accent,
   which is the whole point: its job is to attract the click. */
.nav-add-event {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 40px; box-sizing: border-box;
  padding: 0 16px;
  background: var(--you); color: var(--on-you);
  border: 1px solid var(--you);
  border-radius: var(--radius);
  text-decoration: none; font-weight: 600; font-size: 15px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.nav-add-event:hover {
  background: var(--accent-deep); border-color: var(--accent-deep);
}
.nav-add-event:active { transform: translateY(1px); }
.nav-add-event:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-add-event-plus { font-size: 1.05rem; line-height: 1; font-weight: 500; margin-top: -1px; }
/* Narrow screens: keep the plus, drop the word, so the nav never wraps. */
@media (max-width: 560px) {
  .nav-add-event { padding: 0 .7rem; font-size: 0; gap: 0; }
  .nav-add-event-plus { font-size: 1.25rem; }
}

/* Section / date headings — Inter uppercase mini-label per Rick's 2026-06-05 call. */
.date-heading,
.section-heading {
  margin: 0 0 .35rem;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink); line-height: 1.4;
  padding-bottom: .55rem; border-bottom: 1px solid var(--border-subtle);
}

/* Underline-on-active nav */
.nav {
  display: flex; gap: 1.5rem; margin-bottom: 2rem;
  font-size: .875rem; border-bottom: 1px solid var(--border-subtle);
}
.nav a {
  color: var(--ink-muted); text-decoration: none;
  padding: .65rem 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--stone-300); }
.nav a.active { color: var(--ink); border-bottom-color: var(--accent); }

/* Three-tab nav (PRD §6.3) — shared with index. */
.feed-toggle {
  display: inline-flex; gap: 1.5rem;
  margin: 0 0 1.5rem; padding: 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: .85rem;
}
.feed-toggle-item {
  color: var(--ink-muted); text-decoration: none;
  padding: .5rem 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  font-weight: 500;
}
.feed-toggle-item:hover { color: var(--ink); border-bottom-color: var(--stone-300); }
.feed-toggle-item.active { color: var(--ink); border-bottom-color: var(--accent); }
.feed-toggle-item.active:hover { border-bottom-color: var(--accent); }

/* Tag chips — uniform vocabulary. */
.tag {
  font-family: var(--font-body);
  font-size: .7rem; line-height: 1.2;
  padding: 2px 7px; border-radius: 10px;
  text-decoration: none; white-space: nowrap;
  background: var(--stone-100);
  border: 1px solid transparent;
  color: var(--ink-muted);
  transition: background .15s, color .15s, border-color .15s;
  display: inline-block;
}
/* Restore [hidden] semantics on .tag — without this the browser's
   UA `[hidden] { display: none }` is overridden by .tag's explicit
   display rule, so the "+N more" overflow tags render visible even
   though they carry the hidden attribute. */
.tag[hidden] { display: none;
}
.tag-canonical { color: var(--ink); }
.tag-freeform  { color: var(--ink-muted); }
.tag:hover { background: var(--stone-200); color: var(--ink); border-color: var(--border-subtle); }
.tag.is-on {
  background: var(--ink); color: var(--surface);
  border-color: var(--ink);
}
.tag.is-on:hover { background: var(--ink); color: var(--surface); opacity: .85; }

/* Per-event tag-chip category accents (scoped to event/tag groups). */
.event-tags .tag-cat-workshop,    .tags .tag-cat-workshop    { color: #6d28d9; }
.event-tags .tag-cat-networking,  .tags .tag-cat-networking  { color: #be185d; }
.event-tags .tag-cat-talk,        .tags .tag-cat-talk        { color: #1d4ed8; }
.event-tags .tag-cat-demo,        .tags .tag-cat-demo        { color: #b91c1c; }
.event-tags .tag-cat-social,      .tags .tag-cat-social      { color: #0e7490; }
.event-tags .tag-cat-conference,  .tags .tag-cat-conference  { color: #4338ca; }
.event-tags .tag-cat-class,       .tags .tag-cat-class       { color: #57534e; }
.event-tags .tag-cat-ai,          .tags .tag-cat-ai          { color: #a21caf; }
.event-tags .tag-cat-engineering, .tags .tag-cat-engineering { color: #c2410c; }
.event-tags .tag-cat-security,    .tags .tag-cat-security    { color: #3f6212; }
.event-tags .tag-cat-startup,     .tags .tag-cat-startup     { color: #be123c; }
.event-tags .tag-cat-data,        .tags .tag-cat-data        { color: #075985; }
.event-tags .tag-cat-founders,    .tags .tag-cat-founders    { color: #854d0e; }

/* Cost chips */
.tag-cost-free { color: #047857; background: rgba(5, 150, 105, 0.12); border: 1px solid rgba(5, 150, 105, 0.35); }
.tag-cost-paid { color: #a16207; background: rgba(234, 179, 8, 0.15); border: 1px solid rgba(234, 179, 8, 0.4); }
.tag-cost-free:hover, .tag-cost-paid:hover { background: inherit; color: inherit; border-color: inherit; }

/* Buttons base */
/* Default button = ink outline with ticket corners. No black fills: the
   only filled buttons are magenta (you) and teal (friends) actions. */
button {
  padding: .5rem 1rem; font-size: .875rem; font-weight: 600;
  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .05s;
}
button:hover { background: var(--raised); }
button:active { transform: translateY(1px); }

/* Form input base */
input[type=text], input[type=url], input[type=email], input[type=search], textarea, select {
  padding: .6rem .85rem; font-size: .9rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=url]:focus, input[type=email]:focus, input[type=search]:focus, textarea:focus, select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.06);
}

/* Empty state */
.empty { color: var(--ink-muted); padding: 4rem 0; text-align: center; font-size: .9rem; }
.empty a { color: var(--ink); }

/* Heart + cal base sizes — referenced by macros and inline svgs. */
.heart { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; display: inline-block; vertical-align: middle; }
.heart-filled { fill: currentColor; stroke-width: 1; }
.cal { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }

/* ════════════════════════════════════════════════════════════
   ACTION-BAR TOKENS (.ta / .ta-btn / .action-cta / .cta-*)
   ────────────────────────────────────────────────────────────
   Shared event-row action vocabulary. Used on index event rows,
   profile timeline rows, and any future card surface that needs
   like/RSVP/went/share state. Page-specific layout wrappers
   (.event-actions, .timeline-actions) stay in their templates;
   these tokens travel with the chrome.

   Each ta-slot is FIXED-WIDTH (3rem) so icon columns line up
   across rows even when counts vary 0 → 1 → 999. Icon anchors
   at the slot's left; count flows to its right within the same
   cell. Width math: 18 (icon) + 4 (gap) + ~24 (3-digit tabular
   Inter at .78rem) = ~46px → 3rem with breathing room.
   ════════════════════════════════════════════════════════════ */
.ta-form {
  display: inline-flex; margin: 0; padding: 0;
  flex: 0 0 auto;
}
.ta {
  display: inline-flex; align-items: center;
  justify-content: flex-start;
  gap: .3rem;
  width: 3rem; height: 18px;
  color: var(--ink-subtle);
  opacity: .55;
  transition: color .15s, opacity .15s;
}
.ta svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ta-btn {
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer; color: inherit; font: inherit;
  text-decoration: none;  /* share action degrades to an <a> with no JS (L2) */
  display: inline-flex; align-items: center;
  justify-content: flex-start;
  gap: .3rem;
  width: 3rem; height: 18px;
}
.ta-btn:hover { opacity: 1; }
.ta-btn .ta-count, span.ta > .ta-count {
  font-size: .78rem; font-weight: 500;
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ta-on { opacity: 1; }
.ta-on .ta-count { color: inherit; }
/* State colors — hard-coded for cross-template parity. */
/* Engagement-state color hierarchy. Locked sitewide:
     Like     = RED    (interest)
     RSVP     = YELLOW (intent — single tone, confirmed OR unconfirmed)
     Went     = GREEN  (proof — actually showed up)
     Share    = BLUE   (outward signal — distinct from the three states)
   Anything that violates this is a bug. The data layer still
   distinguishes confirmed vs unconfirmed RSVP; the visual layer treats
   both as "you said you're going" and reserves green for verified
   attendance. */
.ta-liked            { color: var(--accent); }
.ta-rsvp             { color: var(--rsvp); }
.ta-rsvp-confirmed   { color: var(--rsvp); }
.ta-rsvp-unconfirmed { color: var(--rsvp); }
.ta-went             { color: var(--went); }
/* Checked-in check icon — heavier stroke + green = "this happened." */
.ta-went svg { stroke-width: 3.5; }
/* Share icon — green when count > 0 = "this event got attention." */
.ta-share.ta-on { color: var(--share); }

/* Pre-check-in WENT button. Visually DISTINCT from the checked-in
   static green chip — otherwise the user can't tell whether they've
   successfully checked in or are still being invited to click. Default:
   muted ink-subtle (matches other inactive chips). Hover: green tint.
   Live-window variant adds a subtle pulse to signal "now is the time"
   without flooding the row with green. Solid green is RESERVED for
   .ta.ta-on.ta-went (you actually went). */
.ta-btn-checkin {
  opacity: 0.85;
  color: var(--ink-subtle);
  border-radius: var(--radius);
  position: relative;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.ta-btn-checkin:hover {
  opacity: 1;
  color: var(--went-deep);
  background: var(--went-tint);
}
.ta-btn-checkin-live {
  opacity: 1;
  color: var(--rsvp);
  animation: ta-checkin-pulse 1.6s ease-in-out infinite;
}
.ta-btn-checkin-live:hover {
  color: var(--went-deep);
  animation: none;
}
@keyframes ta-checkin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--rsvp-tint); }
  50%      { box-shadow: 0 0 0 4px var(--rsvp-tint); }
}

/* ════════════════════════════════════════════════════════════
   FEED ACTION CHIP STYLING — Substack-pattern icon-and-count-inside-
   one-chip with COLORED hover tint per state (red/yellow/green/blue).
   Scoped to `.event-actions` so the chip aesthetic applies on the home
   feed + trending feed without touching profile-timeline or event-
   detail action-rail surfaces (each has its own scoping).

   Per Rick 2026-06-12: hover should produce a SHADE of the action's
   own color, not a neutral black/white tint. Each chip's default
   :hover swaps in the state's `--<state>-tint-hover` token plus deeper
   ink so the affordance reads as "this is the thing you'd be doing."
   The :hover treatment fires regardless of active state — even an
   already-liked chip gets a slightly deeper red tint to signal
   "tap to unlike."

   Reference design captured in PRD §B.1 Substack entry (2026-06-12).
   ════════════════════════════════════════════════════════════ */
.event-actions .ta-btn,
.event-actions .ta {
  min-width: 3rem; width: auto; height: auto;
  padding: .3rem .55rem;
  border-radius: var(--radius);
  gap: .35rem;
  background: transparent;
  transition: color .15s ease, background .15s ease, opacity .15s ease;
}
.event-actions .ta-btn:hover,
.event-actions .ta:hover {
  opacity: 1;
}
/* Default-state hover tints — colored shade of each action's own
   palette. The button is currently INACTIVE; hover signals "this is
   what you'd do." Color also deepens so the icon stays legible against
   the new background. */
.event-actions .ta-btn-like:hover {
  background: var(--like-tint-hover);
  color: var(--accent);
}
.event-actions .ta-btn-rsvp:hover {
  background: var(--rsvp-tint-hover);
  color: var(--rsvp);
}
.event-actions .ta-share:hover {
  background: var(--share-tint-hover);
  color: var(--share);
}
.event-actions .ta-btn-checkin:hover {
  /* Pre-checkin button is muted by default; hover surfaces green
     to invite the action. Already declared above with the same
     intent; this rule reinforces inside .event-actions scope. */
  background: var(--went-tint-hover);
  color: var(--went-deep);
}
/* ACTIVE (.ta-on) — filled chip in the state's tint color, ink in
   the state's color. The chip reads as "this is your state right now."
   Hover on an active chip deepens the fill to signal "tap to undo." */
.event-actions .ta.ta-on,
.event-actions .ta-btn.ta-on {
  background: var(--like-tint);
  opacity: 1;
}
.event-actions .ta-btn-like.ta-on,
.event-actions .ta-btn-like.ta-liked {
  background: var(--like-tint);
  color: var(--accent);
}
.event-actions .ta-btn-like.ta-on:hover,
.event-actions .ta-btn-like.ta-liked:hover {
  background: var(--like-tint-hover);
}
.event-actions .ta-btn-rsvp.ta-on,
.event-actions .ta-btn-rsvp.ta-rsvp {
  background: var(--rsvp-tint);
  color: var(--rsvp);
}
.event-actions .ta-btn-rsvp.ta-on:hover,
.event-actions .ta-btn-rsvp.ta-rsvp:hover {
  background: var(--rsvp-tint-hover);
}
.event-actions .ta.ta-went {
  /* Static "you went" chip — solid filled state. */
  background: var(--went-tint);
  color: var(--went);
}
.event-actions .ta-share.ta-on {
  background: var(--share-tint);
  color: var(--share);
}
.event-actions .ta-share.ta-on:hover {
  background: var(--share-tint-hover);
}

/* State CTAs — pill-style "do something now" affordances.
   Visual hierarchy: passive icons recede, pills lean forward.
   Only one or two CTAs ever visible at a time. */
.action-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem;
  font-family: var(--font-body);
  font-size: .73rem; font-weight: 600;
  border-radius: var(--radius); cursor: pointer;
  background: transparent; border: 1px solid currentColor;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap; line-height: 1;
}
.action-cta .ico { width: 13px; height: 13px; stroke-width: 2.5; }

/* "I registered" — amber outline, fills on hover. The visual ask:
   promote your unconfirmed Going to honest registered. */
.cta-confirm {
  color: var(--rsvp-unconfirmed-deep);
  border-color: var(--rsvp-unconfirmed);
}
.cta-confirm:hover {
  background: var(--rsvp-unconfirmed);
  color: var(--surface);
  border-color: var(--rsvp-unconfirmed);
}

/* "Check in" — green outline with the only animated element in the
   row vocabulary (pip pulses). Motion marks "right now, here, do it." */
.cta-checkin {
  color: var(--went-deep);
  border-color: var(--went);
  padding-left: .55rem;
}
.cta-checkin:hover {
  background: var(--went);
  color: var(--surface);
  border-color: var(--went);
}
.cta-pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--went);
  animation: checkin-pulse 2.1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes checkin-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.35); }
}

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

/* PRD §4.4 live-event check-in modal. Editorial-honest aesthetic:
   Newsreader display serif for the heading (it's a sentence, not a
   ribbon — "You said you'd be there."), Inter for body, warm off-
   white card, yellow letterpress-style top border tying back to the
   RSVP color, generous spacing, refined buttons that earn their
   weight. No more generic "alert dialog" feel. */
.checkin-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 25, 23, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  animation: checkin-modal-fade-in 0.22s ease-out;
}
@keyframes checkin-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.checkin-modal {
  background: #fbf8f3;
  color: #1c1917;
  border-radius: 6px;
  max-width: 560px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45),
              0 2px 8px rgba(0,0,0,0.18);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 2.2rem 2.2rem 1.4rem;
  position: relative;
  border-top: 6px solid var(--rsvp);
  animation: checkin-modal-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes checkin-modal-rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
:root[data-theme="dark"] .checkin-modal {
  background: #2a2522;
  color: #fafaf9;
}
.checkin-modal-close {
  position: absolute;
  top: 0.75rem; right: 0.85rem;
  background: transparent; border: none;
  width: 32px; height: 32px;
  border-radius: var(--radius);
  font-size: 1.5rem; line-height: 1;
  color: #78716c;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.checkin-modal-close:hover {
  background: rgba(0,0,0,0.05);
  color: #1c1917;
}
:root[data-theme="dark"] .checkin-modal-close:hover {
  background: rgba(255,255,255,0.08);
  color: #fafaf9;
}
.checkin-modal-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.85rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  color: inherit;
}
.checkin-modal-lede {
  margin: 0 0 1.5rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: #57534e;
}
:root[data-theme="dark"] .checkin-modal-lede { color: #d6d3d1; }

.checkin-modal-card {
  background: #fff;
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-left: 3px solid var(--went);
  border-radius: 4px;
  padding: 1.1rem 1.2rem 1.15rem;
  margin-bottom: 0.9rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
:root[data-theme="dark"] .checkin-modal-card {
  background: #1c1917;
  border-color: rgba(255, 245, 235, 0.10);
  border-left: 3px solid var(--went);
}
.checkin-modal-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.checkin-modal-card h3 a { color: inherit; text-decoration: none; }
.checkin-modal-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.checkin-modal-meta {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #78716c;
}
:root[data-theme="dark"] .checkin-modal-meta { color: #a8a29e; }

.checkin-modal-actions { display: flex; flex-direction: column; gap: 0.55rem; }
.checkin-modal-actions form { margin: 0; }
.checkin-modal-actions .checkin-gps-form,
.checkin-modal-actions .checkin-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.checkin-modal-actions .checkin-form input {
  flex: 1; min-width: 0;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #fbf8f3;
  border: 1px solid rgba(28, 25, 23, 0.15);
  border-radius: 4px;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.checkin-modal-actions .checkin-form input:focus {
  border-color: var(--rsvp);
  background: #fff;
}
:root[data-theme="dark"] .checkin-modal-actions .checkin-form input {
  background: #1c1917;
  border-color: rgba(255, 245, 235, 0.15);
}
.checkin-modal-actions button,
.checkin-modal-actions .checkin-gps-btn {
  padding: 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  background: #1c1917;
  color: #fbf8f3;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s;
}
.checkin-modal-actions button:hover,
.checkin-modal-actions .checkin-gps-btn:hover {
  background: #292524;
}
.checkin-modal-actions button:active,
.checkin-modal-actions .checkin-gps-btn:active { transform: translateY(1px); }
.checkin-modal-actions .checkin-gps-btn { width: 100%; }
.checkin-modal-actions .no-show-form button {
  background: transparent;
  color: var(--destructive);
  border: 1px solid rgba(178, 42, 42, 0.35);
  width: 100%;
  font-weight: 500;
}
.checkin-modal-actions .no-show-form button:hover {
  background: rgba(178, 42, 42, 0.06);
  border-color: rgba(178, 42, 42, 0.6);
}
/* Armed state — the inline two-click confirmation. First click swaps
   in red fill + "Confirm" copy; second click submits. Replaces the
   native confirm() popup that looked ugly over our own modal. */
.checkin-modal-actions .no-show-form button.confirm-armed { background: var(--destructive); color: #fff; border-color: var(--destructive); font-weight: 700; }
.checkin-modal-actions .no-show-form button.confirm-armed:hover { background: #8c1f1f; }
.checkin-modal-actions .checkin-gps-msg {
  margin: 0.25rem 0 0; font-size: 0.85rem; min-height: 1em; width: 100%;
}
.checkin-modal-actions .checkin-gps-msg[data-status="error"] { color: var(--destructive); }
.checkin-modal-actions .checkin-gps-msg[data-status="success"] { color: var(--went-deep, #386); }
/* Bulk-checkin shortcut — the hero action at the top of the modal.
   Sized larger, with confident weight, full-bleed across the card, in
   the locked WENT green. */
.checkin-bulk-form { margin: 0 0 1.5rem; }
.checkin-bulk-btn {
  width: 100%;
  padding: 0.95rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 4px;
  border: none;
  background: var(--went);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
  box-shadow: 0 1px 0 var(--went-deep);
}
.checkin-bulk-btn:hover {
  background: var(--went-deep);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}
.checkin-bulk-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--went-deep); }

.checkin-modal-flash {
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  background: var(--went-tint);
  border-left: 3px solid var(--went);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--went-deep);
}
.checkin-modal-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(28, 25, 23, 0.08);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.55;
  color: #78716c;
  font-style: italic;
}
:root[data-theme="dark"] .checkin-modal-footer {
  color: #a8a29e;
  border-top-color: rgba(255, 245, 235, 0.08);
}

/* RSVP-intent interstitial. Fires once before the user's first RSVP
   (unless they've dismissed it permanently). Warns them that Going
   on RSVP w/ me is a real commitment and silent no-shows ding the
   profile. */
.rsvp-intent-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.rsvp-intent-modal {
  /* --paper was an undefined token; the hardcoded #fff fallback fired in
     dark mode, producing near-white --ink text on white background.
     Use --surface so the modal flips with the theme. */
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  max-width: 480px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  padding: 1.5rem;
  border-top: 4px solid var(--rsvp);
}
.rsvp-intent-heading {
  margin: 0 0 0.75rem; font-size: 1.3rem;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
.rsvp-intent-body {
  margin: 0 0 0.75rem;
  font-size: 0.95rem; line-height: 1.45;
  color: var(--ink, #333);
}
/* Plain emphasis — the prior treatment colored <strong>Like</strong>
   coral (engagement palette = like-red) and <em>are</em> green (went).
   Out of context the words read as broken JS rather than intentional;
   the engagement-palette indexing is too clever for an interstitial
   the user has 8 seconds to absorb. Neutral bold + italic. */
.rsvp-intent-body strong { font-weight: 700; color: inherit; }
.rsvp-intent-body em { font-style: italic; font-weight: 500; color: inherit; }
.rsvp-intent-dismiss {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 1rem 0;
  padding: 0.6rem 0.75rem;
  background: var(--rsvp-tint);
  border-radius: 6px;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--ink, #333);
}
.rsvp-intent-dismiss input { margin: 0; cursor: pointer; }
.rsvp-intent-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  margin-top: 0.5rem;
}
.rsvp-intent-btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem; font-weight: 600;
  border-radius: 6px; border: none;
  cursor: pointer;
  font-family: inherit;
}
/* Yellow (--rsvp) on white text was ~1.2:1 in dark mode and ~3:1
   in light mode — both fail WCAG AA for normal text. Dark text on
   yellow is the conventional accessible direction (think road-sign
   contrast). Keep the RSVP-yellow brand; flip the text to ink. */
.rsvp-intent-btn-primary {
  background: var(--rsvp);
  color: var(--stone-900, #111);
}
.rsvp-intent-btn-primary:hover {
  background: var(--rsvp-deep);
  color: var(--stone-900, #111);
}
.rsvp-intent-btn-secondary {
  background: transparent; color: var(--ink-muted);
  border: 1px solid var(--border);
}
.rsvp-intent-btn-secondary:hover { background: var(--hover-bg); }
/* "Like instead" — the softer alternative the modal copy points at.
   Carries the like affinity (heart red) so it reads as the Like action,
   not a second dismissal. */
.rsvp-intent-btn-like {
  background: var(--like-tint); color: var(--accent);
  border: 1px solid var(--accent);
}
.rsvp-intent-btn-like:hover { background: var(--like-tint-hover); }

/* ------------------------------------------------------------------
   Mobile baseline — applies project-wide.
   Individual templates may layer their own @media (max-width: 640px)
   block inside their <style> element to override stuck max-widths
   or oversized fonts that don't collapse via the shared rules below.
   Breakpoint matches the one already in index.html and profile.html.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  body {
    margin: 1.5rem auto;
    padding: 0 1rem 3rem;
    max-width: 100%;
  }
  h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .brand-name {
    font-size: 1.35rem;
  }
  /* Long titles, hashes, and URLs should wrap instead of overflowing
     the viewport. Restricted to text containers — leaves layout
     containers (cards, rows) alone. */
  h1, h2, h3, h4,
  .page-title,
  .event-title,
  .source-url,
  .source-note,
  .description {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Wide tables (admin surfaces) should scroll horizontally rather
     than blowing out the document width. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Touch targets — 44×44 minimum on touch sizes (WCAG 2.5.5).
     Applies on the mobile breakpoint only; desktop pointer doesn't
     need this. */
  .ta-btn,
  .intro-card-dismiss,
  .checkin-modal-close,
  .followed-tag-unfollow-btn,
  .follower-follow-btn,
  .vouch-action-btn,
  .follow-action-btn,
  .rsvp-intent-btn,
  .share-modal-close,
  .cta,
  .go-home {
    min-width: 44px;
    min-height: 44px;
    /* Center the icon/glyph inside the larger hitbox without
       changing its size. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Tag chips: bigger touch target without distorting the chip look.
     Use padding instead of min-height so adjacent chips don't all
     become huge boxes. */
  .tag {
    padding: 8px 12px;
  }
}

/* ════════════════════════════════════════════════════════════
   LIVE PILLS — Happening Now richer surface (PRD §4.8.1)
   ────────────────────────────────────────────────────────────
   `.live-pill-here`  — "N here" — count of distinct check-ins
                        in the live window. Green = went/proof
                        per the sitewide engagement-state palette.
   `.live-pill-follow` — "N you follow" — count of followed users
                         currently checked in. Visually distinct
                         from `.live-pill-here` to signal the
                         higher-order trust signal per §6.3.1.
   Both render inline within `.event-meta` (index Active rows)
   and `.owner-stream-meta` (profile owner-view Happening rows).
   Suppressed silently when count is zero — no deadweight pills.
   ════════════════════════════════════════════════════════════ */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  padding: .2rem .55rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.live-pill-here {
  color: var(--went-deep);
  background: var(--went-tint);
  border: 1px solid transparent;
}
.live-pill-here .live-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--went);
  animation: live-pill-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pill-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.live-pill-follow {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-subtle);
}
:root[data-theme="dark"] .live-pill-follow {
  border-color: var(--border);
}

/* ════════════════════════════════════════════════════════════
   PLATFORM HANDLES — "Find me on" surface (PRD §1.1 step 2)
   ────────────────────────────────────────────────────────────
   Public-profile chip strip + edit-form fieldset for the five
   source-platform handles (Luma, Eventbrite, Meetup, Partiful,
   Calagator). Foundational for the RSVP handoff smoothness +
   forward-compat with v0.7 OAuth claim matching.
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   LAYOUT GRID — single-column by default; .layout-with-sidebar
   becomes a two-column desktop grid with a sticky right rail.
   Used on the signed-out homepage (intro-card sidebar) and on
   the owner-view profile page (bookmarklet sidebar). Same
   construct, two surfaces. Moved from index.html inline 2026-06-11. */
.layout {
  display: grid;
  /* minmax(0, …) so a long venue or title can't widen the track past the
     viewport on phones (a bare 1fr has an auto minimum). */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.layout > * { min-width: 0; }
@media (min-width: 960px) {
  .layout-with-sidebar {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2.5rem;
    align-items: start;
  }
  .layout-with-sidebar .feed-col { grid-column: 1; grid-row: 1; min-width: 0; }
  .layout-with-sidebar .sidebar-col {
    grid-column: 2; grid-row: 1;
    position: sticky; top: 1rem;
    margin-bottom: 0;
    align-self: start;
  }
}

/* ════════════════════════════════════════════════════════════
   INTRO CARD — contained sidebar-style card used for "What is
   RSVP w/ me?" on the signed-out homepage (PRD §4.10) and for the
   bookmarklet section on /@<handle>. Stone-100 surface, padded,
   no border, rounded — borrows the same vocabulary so secondary
   informational blocks read consistently across surfaces.
   Moved from templates/index.html inline 2026-06-11.
   ════════════════════════════════════════════════════════════ */
.intro-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.15rem 1.25rem;
  margin: 0 0 1.5rem;
  position: relative;
}
.intro-card[hidden] { display: none; }
.intro-card-headline {
  margin: 0 0 .3rem;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.005em;
  color: var(--ink);
}
.intro-card-tagline {
  font-size: .875rem; line-height: 1.5; color: var(--ink-muted);
  margin: 0 0 .85rem;
}
.intro-card-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--you); color: var(--on-you);
  padding: .55rem .95rem; border-radius: var(--radius);
  text-decoration: none; font-size: .9rem; font-weight: 600;
  transition: background 0.15s ease;
}
.intro-card-cta:hover { background: var(--you-deep); color: var(--on-you); }
.intro-card-unlocks {
  margin: .65rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.intro-card-stats {
  display: flex; flex-direction: column; gap: .25rem;
  margin-top: .85rem; padding-top: .75rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-muted); font-size: .8rem;
}
.intro-card-stats .stat-num { color: var(--ink); font-weight: 600; }
.intro-card-stats .stat-pending { color: var(--ink-subtle); font-style: italic; }
.intro-card-footer {
  margin-top: .75rem;
  color: var(--ink-subtle); font-size: .75rem;
}
.intro-card-footer a { color: var(--ink-muted); }
.intro-card-dismiss {
  position: absolute; top: .5rem; right: .65rem;
  background: none; border: none; color: var(--ink-subtle);
  font-size: 1rem; cursor: pointer; padding: .2rem .4rem;
  line-height: 1; border-radius: 4px;
}
.intro-card-dismiss:hover { background: var(--hover-bg); color: var(--ink); }
@media (max-width: 640px) {
  .intro-card { padding: .85rem 1rem; margin-bottom: 1rem; }
  .intro-card-headline { font-size: 1rem; }
  .intro-card-tagline { font-size: .95rem; }
}

/* ════════════════════════════════════════════════════════════
   PROFILE CARD — shared identity block used on /@<handle> and
   the /followers and /following sub-views. Header stays static;
   the column underneath swaps. Was inline in profile.html; moved
   here so followers.html / following.html can reuse identically.
   ════════════════════════════════════════════════════════════ */
.profile-card {
  display: flex; align-items: flex-start; gap: 1.1rem;
  margin: 0 0 1.75rem;
}
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--border-subtle); object-fit: cover;
  flex: 0 0 auto;
}
.profile-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800; line-height: 1.05;
  letter-spacing: -0.025em;
}
.profile-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .45rem;
  margin: .35rem 0 0;
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted);
}
.profile-meta .sep { color: var(--ink-subtle); font-weight: 400; user-select: none; }
.profile-handle, .profile-email, .profile-city, .profile-joined {
  margin: 0; padding: 0;
  color: inherit; font: inherit;
}
.follows-you-pill {
  display: inline-block; margin-left: .55rem;
  padding: 2px 8px; border-radius: 10px;
  font-size: .65rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; vertical-align: middle;
  background: var(--stone-100); color: var(--ink-muted);
  border: 1px solid var(--border-subtle);
}
.profile-bio {
  margin: .85rem 0 0;
  font-family: var(--font-body);
  font-size: 1.05rem; line-height: 1.55; color: var(--ink);
  font-weight: 400; max-width: 56ch;
}
.profile-follows {
  display: flex; gap: .85rem; align-items: baseline;
  margin: .6rem 0 0; font-size: .95rem;
  font-family: var(--font-body);
}
.profile-follows a { color: var(--ink-muted); text-decoration: none; }
.profile-follows a strong {
  color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-right: .25rem;
}
.profile-follows a:hover { color: var(--ink); text-decoration: underline; }
.profile-follows .sep { color: var(--ink-subtle); }
/* Owner edit controls — small utility buttons in the header, directly
   below the follow counts (owner-view only). Added 2026-06-19. */
.profile-header-actions {
  display: flex; gap: .5rem; flex-wrap: wrap; margin: .55rem 0 0;
}
.profile-header-actions .btn-sm {
  display: inline-block; padding: .28rem .7rem;
  font-size: .8rem; font-weight: 500; line-height: 1.2;
  border-radius: var(--radius); text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
  transition: background .15s, border-color .15s;
}
.profile-header-actions .btn-sm:hover {
  background: var(--stone-100); border-color: var(--ink-subtle);
}
/* Active-view indicator — when rendered on /followers or /following,
   the matching link gains a bottom border so the header doubles as
   the tab indicator. Mirrors the X / Threads pattern. */
.profile-follows-link.is-active { color: var(--ink); }
.profile-follows-link.is-active strong { color: var(--ink); }
.profile-follows-link.is-active {
  border-bottom: 2px solid var(--ink);
  padding-bottom: .15rem;
}

.profile-platforms {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem;
  margin: .85rem 0 0;
  font-family: var(--font-body);
  font-size: .78rem;
}
.profile-platforms-label {
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  font-weight: 600;
  margin-right: .15rem;
}
.platform-chip {
  display: inline-flex; align-items: center;
  padding: .25rem .65rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
  transition: background .15s ease, border-color .15s ease;
}
a.platform-chip:hover {
  background: var(--hover-bg, var(--stone-100));
  border-color: var(--ink-subtle);
}

/* Edit-form fieldset — visually unify the five handle inputs as a
   single coherent group. Reuses .field for child padding. */
.field-group.platform-handles {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius, 8px);
  padding: 1rem 1.25rem .5rem;
  margin: 1.25rem 0;
  background: transparent;
}
.field-group.platform-handles legend {
  font-weight: 600;
  font-size: .9rem;
  padding: 0 .35rem;
  color: var(--ink);
}
.field-group.platform-handles .field-hint {
  display: block;
  margin: -.35rem 0 .75rem;
  color: var(--ink-muted);
  font-size: .82rem;
}

/* ============================================================
   Vouching surfaces (PRD §4.4 vouching, shipped 2026-06-09)
   Inbox + event_detail picker partials + chrome-header badge.
   Mechanic audit F9 — was inline-styles, lifted here.
   ============================================================ */

/* Inbox /inbox — pending vouches awaiting current user's action */
/* Full body width like River and /me; head + tabs reuse .river-*. */
.inbox-col { min-width: 0; }
.inbox-col .river-tabs { margin-bottom: 1.5rem; }
.inbox-col .river-tab .count { margin-left: 4px; font-weight: 500; color: var(--ink-subtle); }
.inbox-card {
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.inbox-card__title {
  font-family: var(--font-display);
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}
.inbox-card__title a {
  color: inherit;
  text-decoration: none;
}
.inbox-card__about {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 0.8rem;
}
.inbox-card__note {
  font-size: 0.9rem;
  font-style: italic;
  margin: 0 0 0.8rem;
}
.inbox-card__actions {
  display: flex;
  gap: 0.5rem;
}
.inbox-card__actions form {
  margin: 0;
}
.inbox-empty {
  color: var(--ink-muted);
  font-style: italic;
}
.vouch-action-btn {
  border: none;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}
.vouch-action-btn.is-yes {
  background: var(--went, #2e7d32);
  color: #fff;
}
.vouch-action-btn.is-no {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--border, #e0e0e0);
  font-weight: 400;
}
.vouch-action-btn.is-dispute {
  background: transparent;
  color: var(--destructive);
  border: 1px solid var(--destructive);
}

/* event_detail picker partials — _vouch_request_form + _vouch_offer_form */
.vouch-block {
  margin: 1.5rem 0;
  padding: 1.2rem;
  border-radius: 4px;
}
.vouch-block--request {
  background: var(--rsvp-tint, #fff8e1);
  border-left: 3px solid var(--rsvp, #f5c518);
}
.vouch-block--offer {
  background: var(--went-tint, #e8f5e9);
  border-left: 3px solid var(--went, #2e7d32);
}
.vouch-block__title {
  font-family: var(--font-display);
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.vouch-block__lede {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
}
.vouch-block__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.vouch-block__select {
  flex: 1;
  min-width: 200px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.vouch-block__note {
  flex: 1.5;
  min-width: 200px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.vouch-block__submit {
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}
.vouch-block--request .vouch-block__submit {
  background: var(--rsvp, #f5c518);
  color: #000;
}
.vouch-block--offer .vouch-block__submit {
  background: var(--went, #2e7d32);
  color: #fff;
}

/* chrome-header inbox link + pending-vouch badge */
.nav-inbox-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  margin-right: 0.4rem;
}
.nav-badge {
  background: var(--you);
  color: var(--on-you);
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.4rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   SHARE MODAL — picker modal that replaces the OS-level
   navigator.share() sheet on `.ta-share` button clicks. Markup
   in templates/_share_modal.html; behavior in static/js/share_modal.js.
   Mirrors the .checkin-modal-* backdrop + rise animation vocabulary.
   ════════════════════════════════════════════════════════════ */
.share-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 25, 23, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  animation: share-modal-fade-in 0.22s ease-out;
}
.share-modal-backdrop[hidden] { display: none; }
@keyframes share-modal-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
.share-modal {
  /* Substack-pattern soft modal background — slightly tinted off the
     surface so the modal reads as "a moment" rather than another panel.
     Light theme: very faint rose tint. Dark theme: warm-stone surface. */
  background: var(--share-modal-bg, var(--surface)); color: var(--ink);
  border-radius: 14px;
  max-width: 420px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.18);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.75rem 1.5rem 1.25rem;
  position: relative;
  animation: share-modal-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
:root {
  --share-modal-bg: #fef7f1; /* warm-rose tint over Stone-50 */
}
:root[data-theme="dark"] {
  --share-modal-bg: #2a2522; /* slightly warmer than surface */
}
@keyframes share-modal-rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.share-modal-close {
  position: absolute; top: 0.65rem; right: 0.65rem;
  background: transparent; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: var(--ink-subtle);
  cursor: pointer; transition: background 0.15s, color 0.15s;
  z-index: 1;
}
.share-modal-close:hover { background: var(--hover-bg); color: var(--ink); }
.share-modal-title {
  margin: 0 0 1rem; font-size: 1rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.005em;
  /* Tighter top margin so the OG-card preview gets visual primacy. */
}

/* ── OG-card preview block (Substack-pattern centered preview) ── */
.share-modal-preview {
  margin: 0 0 1.25rem;
}
.share-modal-preview-card {
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px var(--border-subtle);
}
.share-modal-preview-hero {
  /* Magenta hero band stands in for an event image; most events
     don't generally carry hero images, so this gives the card the
     visual weight a real OG card would have. Calendar icon centered. */
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: rgba(255, 255, 255, 0.92);
  height: 140px;
  display: flex; align-items: center; justify-content: center;
}
.share-modal-preview-hero svg {
  width: 56px; height: 56px;
  opacity: 0.85;
}
.share-modal-preview-body {
  padding: .75rem .9rem .9rem;
  background: var(--surface);
}
.share-modal-preview-brand {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-subtle);
  margin: 0 0 .25rem;
}
.share-modal-preview-title {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 500; line-height: 1.3;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Share modal: card date/venue lines + copy-link status (usability #16) ── */
.share-modal-preview-meta {
  font-family: var(--font-body);
  font-size: .8rem; line-height: 1.35;
  color: var(--ink-subtle);
  margin: .2rem 0 0;
}
.share-modal-status {
  min-height: 1.25rem;
  margin: 0 0 .6rem;
  font-size: .85rem; font-weight: 600;
  text-align: center;
  color: var(--ink);
}

/* ── Tile grid (4-column on desktop, 4-column on mobile too at this
   modal width since tiles are compact) ── */
.share-modal-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.share-tile {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: .65rem .4rem .5rem;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  font: inherit;
  transition: background .15s, border-color .15s, transform .12s;
  min-height: 70px;
}
.share-tile:hover {
  background: var(--hover-bg);
  border-color: var(--ink-subtle);
  transform: translateY(-1px);
}
.share-tile:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.share-tile-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-muted);
}
.share-tile-icon svg {
  width: 22px; height: 22px;
}
.share-tile-label {
  font-size: .72rem; font-weight: 500;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.1;
}
/* Brand colors per tile — icon picks up the platform color on hover so
   the tile reads as "this is the platform you're handing off to." */
.share-tile:hover .share-tile-icon { color: var(--ink); }
.share-target-copy:hover     .share-tile-icon { color: var(--accent); }
.share-target-bluesky:hover  .share-tile-icon { color: #0085ff; }
.share-target-twitter:hover  .share-tile-icon { color: #1da1f2; }
.share-target-linkedin:hover .share-tile-icon { color: #0a66c2; }
.share-target-threads:hover  .share-tile-icon { color: var(--ink); }
.share-target-mastodon:hover .share-tile-icon { color: #6364ff; }
.share-target-facebook:hover .share-tile-icon { color: #1877f2; }
.share-target-email:hover    .share-tile-icon { color: var(--ink-muted); }

/* Copy-link "Copied!" feedback state (flashed by share_modal.js after
   a successful clipboard write). */
.share-tile.is-copied { background: var(--like-tint); border-color: var(--accent); }
.share-tile.is-copied .share-tile-icon { color: var(--accent); }
.share-tile.is-copied .share-tile-label { color: var(--accent); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   EVENT ACTION RAIL — sticky right-rail action stack on the
   event detail page. Three .ta-btn-* icons (like / RSVP / share)
   stacked vertically with labels + counts. Uses the same
   .ta-btn / .ta-on / .ta-liked / .ta-rsvp / .ta-share state
   vocabulary as the home feed so colors and behavior stay in sync.
   Lives inside .sidebar-col via .layout-with-sidebar — desktop
   only; mobile collapses the rail beneath the article.
   ════════════════════════════════════════════════════════════ */
.event-action-rail {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .35rem 0;
  /* Borderless rail — matches the de-boxed editorial body on the event
     detail page (2026-06-17). Item hover states carry the affordance;
     the filled/bordered container read as a different UI kit. */
}
.event-action-rail-item { width: 100%; display: block; margin: 0; }
/* Anchor rail items (e.g. Add to calendar) — kill the default underline
   so they match the button items. Added 2026-06-17. */
.event-action-rail a.ta-btn { text-decoration: none; }
.event-action-rail .ta,
.event-action-rail .ta-btn {
  width: 100%; height: auto;
  padding: .6rem .75rem;
  gap: .75rem;
  font-size: .9rem;
  color: var(--ink);
  opacity: 1;
  border-radius: var(--radius);
  justify-content: flex-start;
  text-align: left;
}
.event-action-rail .ta-btn:hover { background: var(--hover-bg); opacity: 1; }
.event-action-rail .ta svg,
.event-action-rail .ta-btn svg { width: 20px; height: 20px; }
.event-action-rail-label {
  flex: 1; font-weight: 500; color: var(--ink);
}
.event-action-rail .ta-count {
  font-size: .85rem; font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.event-action-rail .ta-on .ta-count { color: inherit; }

/* ════════════════════════════════════════════════════════════
   EVENT ATTENDEE STACK — social-proof teaser on event-feed
   rows. Overlapping avatar circles + "Alice, Bob and N others"
   caption. Anchors the row to the event detail page (which
   carries the full attendees list — no separate /attendees
   route per Rick's spec 2026-06-11).
   ════════════════════════════════════════════════════════════ */
.event-attendee-stack {
  display: inline-flex; align-items: center; gap: .65rem;
  margin: .35rem 0 0;
  padding: .25rem .5rem .25rem .35rem;
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-size: .85rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.event-attendee-stack:hover {
  background: var(--hover-bg);
  color: var(--ink);
}
.event-attendee-stack-avatars {
  display: inline-flex; flex-direction: row-reverse;
  flex: 0 0 auto;
}
.event-attendee-stack-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--hover-bg);
  border: 2px solid var(--bg);
  margin-left: -7px;
  overflow: hidden;
  flex: 0 0 auto;
  position: relative;
}
.event-attendee-stack-avatar:last-child { margin-left: 0; }
.event-attendee-stack-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.event-attendee-stack-avatar.is-followed {
  border-color: var(--accent);
}
/* (Initials fallback removed 2026-06-12 — users without picture_url now
   get a DiceBear-generated shapes-style SVG keyed off user.id. The
   `<img>` tag stays in the template unconditionally; the src is either
   the real picture_url or the deterministic dicebear URL. The .is-initial
   class + the per-user HSL inline style are no longer emitted by the
   _event_attendee_stack.html template.) */

/* Follower-row avatar sizing (used by _follower_row.html — surfaced
   on the followers/following list views AND the event-detail attendees
   list). Inline styles in followers.html + following.html already
   declare this, but event_detail.html doesn't import that block, so
   the avatar would render unconstrained when _follower_row.html is
   included on the event-detail page. Globalize the sizing here so
   every include site gets the 48×48 round chip. */
.follower-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--hover-bg);
  flex-shrink: 0;
  object-fit: cover;
}

/* Full follower-row layout — globalized from followers.html + following.html
   inline <style> blocks (2026-06-12) so event_detail.html attendees render
   as the same horizontal row construct instead of stacking vertically. The
   inline blocks on those two pages have been trimmed to page-specific rules
   only (.list-wrap, .list-pagination, .list-empty). */
.follower-row {
  display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.1rem 0;
  margin: 0;
  background: transparent;
  transition: background .15s ease;
}
.follower-row + .follower-row { box-shadow: 0 -1px 0 var(--border-subtle) inset; }
.follower-row:hover { background: var(--hover-bg); }
.follower-avatar--anonymous { background: var(--hover-bg); }
.follower-body { flex: 1; min-width: 0; }
.follower-name-line { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; line-height: 1.2; }
.follower-display-name { font-weight: 600; color: var(--ink); font-size: 1rem; text-decoration: none; }
.follower-display-name:hover { text-decoration: underline; }
.follower-handle { color: var(--ink-muted); font-size: .9rem; }
.follower-follows-you { background: var(--hover-bg); color: var(--ink-muted); font-size: .72rem;
                        padding: .15rem .5rem; border-radius: var(--radius-sm); font-weight: 500; }
.follower-bio { color: var(--ink-muted); font-size: .9rem; margin-top: .5rem;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.follower-meta { display: flex; gap: .5rem; margin-top: .65rem; flex-wrap: wrap; }
.follower-reliability { background: var(--went-tint); color: var(--went-deep); font-size: .74rem;
                         padding: .2rem .55rem; border-radius: 12px; font-weight: 500; }
.follower-tag-chip { background: var(--hover-bg); color: var(--ink-muted); font-size: .72rem;
                      padding: .18rem .5rem; border-radius: var(--radius-sm); }
.follower-action-form { margin: 0; }
.follower-follow-btn { background: var(--ink); color: var(--surface); border: 0;
                       padding: .5rem 1.1rem; border-radius: var(--radius); font-size: .85rem;
                       font-weight: 500; cursor: pointer; flex-shrink: 0; align-self: flex-start; }
.follower-follow-btn.is-following { background: transparent; color: var(--ink); border: 1px solid var(--border); }

.event-attendee-stack-caption {
  line-height: 1.3;
}
.event-attendee-stack-caption strong {
  color: var(--ink); font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   EVENT DETAIL ATTENDEES BLOCK — section heading + trust-mode
   counts line above the full attendees list (rendered with
   _follower_row.html, same construct /followers and /following use).
   ════════════════════════════════════════════════════════════ */
.attendees-block { margin: 1.75rem 0 1rem; }
.attendees-heading {
  margin: 0 0 .25rem;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap;
}
.attendees-heading .attendees-count {
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted);
}
.attendees-trust-note {
  margin: 0 0 1rem;
  font-size: .85rem; color: var(--ink-muted);
}
.attendees-block .follower-row {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
}
.attendees-block .follower-row:last-of-type { border-bottom: 0; }

/* Compact action strip — sits below an event row's meta line in the
   owner-stream + other contexts that reuse _event_action_strip.html.
   Inherits the .ta-btn icon vocabulary; just adds spacing + alignment. */
.event-action-strip {
  display: inline-flex; align-items: center;
  gap: 1.5rem;
  margin-top: .55rem;
}
.owner-stream-row .event-action-strip { margin-top: .45rem; }

/* ════════════════════════════════════════════════════════════
   /ME — me.html, me_past.html, me_friends.html (Stub, 2026-10-09)
   ════════════════════════════════════════════════════════════ */
.me-page {
  display: grid; gap: 40px; align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) { .me-page { grid-template-columns: minmax(0, 1fr) 300px; } }
.me-main { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.me-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.me-single { max-width: 760px; }
.me-private {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--raised); color: var(--ink-muted);
  font-size: 13px; font-weight: 600;
}
.me-title-h1 {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 800;
  font-size: 44px; letter-spacing: -0.03em; line-height: 1;
}
.me-paste {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 6px 6px 14px; color: var(--ink-muted);
}
.me-paste input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 8px 0; }
.me-paste input:focus { box-shadow: none; }
.me-paste button { background: var(--you); color: var(--on-you); border-color: var(--you); }
.me-paste button:hover { background: var(--you-deep); }
.me-paste:focus-within { outline: 2px solid var(--friend); }
.me-paste + .me-sub { margin-top: 8px; }
.me-h2 {
  margin: 0 0 12px; font-family: var(--font-display);
  font-size: 26px; font-weight: 700; letter-spacing: -0.015em;
}
.me-h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.me-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.me-sub { color: var(--ink-muted); font-size: .95rem; margin: 0 0 12px; }
.me-group {
  margin: 4px 0 10px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted);
}
.stub-list + .me-group { margin-top: 20px; }
.me-more { margin: 14px 0 0; }
.me-more a { color: var(--ink); font-weight: 600; text-decoration: none; }
.me-more a:hover { color: var(--friend-text); }
.me-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 18px;
}
.me-card-btn { padding: 8px 14px; font-size: 14px; }
.me-friends { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.me-friends li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.me-friends-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.me-friend-name { flex: 1; }
.me-avatar {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--friend); color: #FFFFFF; font-size: 13px; font-weight: 700;
}
/* Segmented control (Coming up: All / Going / Liked). */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius); background: var(--raised); }
.seg-item {
  padding: 6px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-muted); text-decoration: none;
}
.seg-item:hover { color: var(--ink); }
.seg-item.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(24, 23, 28, 0.08); }
@media (max-width: 640px) {
  .me-title-h1 { font-size: 34px; }
  .me-h2 { font-size: 22px; }
}

/* Signed-in nav account menu (flagged me_dashboard) */
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.nav-link { text-decoration: none; }
.nav-link.is-active { font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   EVENT ROW — the ticket stub (templates/_event_row.html)
   ────────────────────────────────────────────────────────────
   One row everywhere: river, /me, profile, trending. Mono time
   in the stub, dashed tear line + half-circle notches, body with
   title → where/source/price → friends → Going / ♡ / Invite.
   ════════════════════════════════════════════════════════════ */
.stub-list { display: flex; flex-direction: column; gap: 12px; }
.stub-row {
  position: relative;
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.stub-notch {
  position: absolute; left: 85px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
}
.stub-notch-top { top: -10px; }
.stub-notch-bottom { bottom: -10px; }
.stub-time {
  padding: 18px 0 18px 18px;
  border-right: 2px dashed var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.stub-time-hm, .stub-time-when {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 22px; letter-spacing: -0.02em; line-height: 1;
}
.stub-time-when { font-size: 14px; line-height: 1.3; padding-right: 10px; }
.stub-time-ampm { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.stub-time-date {
  margin-bottom: 6px; padding-right: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--you-ink);
}
.stub-live {
  margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--you-ink); letter-spacing: 0.04em;
}
.stub-body {
  padding: 16px 18px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.stub-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
  color: var(--ink); text-decoration: none;
  overflow-wrap: anywhere;
}
.stub-title:hover { color: var(--friend-text); }
.stub-where {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 14px; color: var(--ink-muted);
}
.stub-sep { user-select: none; }
.stub-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; line-height: 1.4;
}
.stub-source { background: var(--raised); color: var(--stone-700); text-decoration: none; }
a.stub-source:hover { background: var(--friend-tint); color: var(--friend-ink); }
.stub-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--platform-color, var(--ink-subtle));
}
.stub-free { background: var(--free-tint); color: var(--free-ink); }
.stub-paid { background: var(--raised); color: var(--ink-muted); }
/* Per-platform brand hues for the source dot — external brand colors
   carrying meaning, not design-system drift. */
.platform-meetup       { --platform-color: #ED1C40; }
.platform-eventbrite   { --platform-color: #F05537; }
.platform-luma         { --platform-color: #7E22CE; }
.platform-calagator    { --platform-color: #16A34A; }
.platform-partiful     { --platform-color: #DB2777; }
.platform-tickettailor { --platform-color: #3461EB; }
.platform-ics          { --platform-color: #4A6FA5; }
.platform-external     { --platform-color: #8C8794; }
.stub-friends { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.stub-friends strong { color: var(--friend-text); font-weight: 600; }
.stub-count { color: var(--ink-muted); }
.stub-faces { display: flex; }
.stub-face {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--friend); color: #FFFFFF;
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--surface);
}
.stub-face + .stub-face { margin-left: -8px; }
.stub-face:nth-child(2) { background: var(--friend-deep); }
.stub-face:nth-child(3) { background: var(--stone-700); }
.stub-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.stub-actions .ta-form { display: inline-flex; margin: 0; }
.btn-going, .btn-like, .btn-invite {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-going {
  padding: 7px 16px;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-going:hover { background: var(--you-tint); border-color: var(--you); color: var(--you-ink); }
.btn-going.is-on {
  padding: 8.5px 17.5px;
  background: var(--you); color: var(--on-you); border: 0;
}
.btn-going.is-on:hover { background: var(--you-deep); color: var(--on-you); }
.btn-like {
  padding: 8px 12px; border: 0;
  background: var(--raised); color: var(--ink);
}
.btn-like:hover { background: var(--you-tint); color: var(--you-ink); }
.btn-like.ta-on { background: var(--you-tint); color: var(--you-ink); }
.btn-like.ta-on svg { color: var(--you); }
.btn-like .ta-count { font-size: 14px; font-weight: 600; color: inherit; }
.btn-invite {
  padding: 8px 10px; border: 0;
  background: transparent; color: var(--ink-muted);
}
.btn-invite:hover { background: var(--friend-tint); color: var(--friend-ink); }
/* share_modal.js appends a share count to .ta-share; Invite shows none. */
.btn-invite .ta-count { display: none; }
@media (max-width: 640px) {
  .stub-row { grid-template-columns: 76px minmax(0, 1fr); }
  .stub-notch { left: 66px; }
  .stub-time { padding: 16px 0 16px 14px; }
  .stub-time-hm { font-size: 19px; }
  .stub-body { padding: 14px 14px; }
  .stub-title { font-size: 18px; }
}

/* Day group heading (river + /me). */
.day-group { margin-top: 36px; }
.day-group:first-of-type { margin-top: 24px; }
.day-heading {
  margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
}
.day-heading-date { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-muted); }

/* ════════════════════════════════════════════════════════════
   PROFILE — templates/profile.html (moved from its inline <style>,
   Stub redesign 2026-10-09). Timeline rows are the shared stub row.
   ════════════════════════════════════════════════════════════ */
.profile-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0 0 .85rem; }
.stat { display: flex; align-items: baseline; gap: .4rem; }
.stat-n { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.stat-label { color: var(--ink-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.stat-link { color: inherit; text-decoration: none; }
.stat-link:hover .stat-label { text-decoration: underline; }
.common-tags { margin: 1.5rem 0 1.75rem; }
.common-tags-label, .contribution-count {
  margin: 0 0 .65rem; padding-bottom: .55rem;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted); border-bottom: 1px solid var(--line);
}
.common-tags-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.common-tags .tag {
  font-size: .8rem; padding: 4px 10px; border-radius: var(--radius-sm);
  text-decoration: none; background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.common-tags .tag:hover { border-color: var(--friend); color: var(--friend-ink); }
.common-tags-empty { color: var(--ink-subtle); font-size: .9rem; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: .55rem 1rem;
  font-size: .9rem; font-weight: 600; border-radius: var(--radius);
  text-decoration: none; border: 1px solid var(--stone-300);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.btn:hover { background: var(--raised); }
.btn-primary { background: var(--you); color: var(--on-you); border-color: var(--you); }
.btn-primary:hover { background: var(--you-deep); border-color: var(--you-deep); }
/* Follow = a friends action → teal. */
.follow-btn {
  display: inline-block; padding: .55rem 1.25rem; font-size: .95rem; font-weight: 600;
  border-radius: var(--radius); border: 1.5px solid var(--friend);
  background: var(--friend); color: #FFFFFF; cursor: pointer;
}
.follow-btn:hover { background: var(--friend-deep); border-color: var(--friend-deep); }
.follow-btn.following { background: var(--friend-tint); color: var(--friend-ink); border-color: var(--friend-tint); }
.follow-btn.following:hover { background: var(--surface); color: var(--destructive); border-color: var(--destructive); }
.follow-btn.following:hover::after { content: ' ✕'; }
.follow-graph-summary { margin: .5rem 0 1.5rem; color: var(--ink-muted); font-size: .95rem; }
.follow-graph-summary strong { color: var(--ink); font-weight: 600; }
.follow-graph-summary a { color: var(--friend-text); }
.reliability-row { margin: 1rem 0 1.5rem; }
.reliability-label { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600; }
/* Reliability tiers — semantic hues, one per tier. */
.reliability-label-highly-reliable { background: var(--free-tint); color: var(--free-ink); }
.reliability-label-usually-attends { background: var(--friend-tint); color: var(--friend-ink); }
.reliability-label-mixed-attendance { background: #FFF4D6; color: #6B4E0A; }
.reliability-label-new-attendee { background: var(--raised); color: var(--ink-muted); }
:root[data-theme="dark"] .reliability-label-mixed-attendance { background: #2E2610; color: #F2E2B0; }
.reliability-hint { color: var(--ink-subtle); font-size: .85rem; margin-left: .5rem; }
.followed-tags-block { margin: 1.5rem 0 1rem; }
.followed-tags-heading, .feed-subscriptions-heading, .safety-heading {
  font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0 0 .65rem;
}
.followed-tags-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.followed-tag-chip {
  display: inline-flex; align-items: center; gap: .15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .3rem .65rem; font-size: .85rem; font-weight: 500;
}
.followed-tag-link { color: var(--ink); text-decoration: none; }
.followed-tag-link:hover { color: var(--friend-text); }
.followed-tag-unfollow-form { margin: 0 0 0 .1rem; display: inline; }
.followed-tag-unfollow-btn { background: transparent; border: 0; color: var(--ink-muted); padding: 0 .2rem; line-height: 1; font-size: .85rem; }
.followed-tag-unfollow-btn:hover { color: var(--destructive); background: transparent; }
.followed-tags-empty { color: var(--ink-muted); font-size: .9rem; margin: 0; }
.followed-tags-empty a { color: var(--friend-text); }
/* Profile tabs — same underline construct as the river tabs. */
.timelines { margin: 1.75rem 0 0; }
.timeline-tabs {
  display: flex; gap: 28px; margin: 0 0 20px;
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.timeline-tab {
  padding: 12px 0; margin-bottom: -1px;
  font-size: 16px; font-weight: 500; color: var(--ink-muted);
  text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap;
}
.timeline-tab:hover { color: var(--ink); }
.timeline-tab.is-active { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.timeline-pane { display: none; }
.timeline-pane.is-active { display: block; }
.stub-note { font-size: 13px; color: var(--ink-muted); }
.timeline-pager { display: flex; gap: 1.25rem; margin: 1.25rem 0 0; }
.timeline-pager-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.timeline-pager-link:hover { color: var(--friend-text); }
.timeline-empty { color: var(--ink-muted); padding: 1.5rem 0; }
.timeline-empty a { color: var(--friend-text); }
/* Contribution heatmap — ONE css grid: col 1 day labels, cols 2..N+1
   fluid week columns; row 1 month labels, rows 2..8 the 7 days. Every
   element is placed by explicit grid-column/grid-row, so labels and
   cells share tracks and can't drift. Magenta scale = your activity. */
.contribution-grid { margin: 1.75rem 0 1.25rem; color: var(--ink-muted); }
.contribution-area {
  display: grid;
  grid-template-columns: 22px repeat(var(--weeks, 53), minmax(0, 1fr));
  grid-template-rows: auto repeat(7, auto);
  column-gap: 2px; row-gap: 2px; width: 100%;
}
.contribution-month {
  font-size: .68rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-subtle);
  white-space: nowrap; overflow: visible; align-self: end; padding-bottom: 4px; line-height: 1;
}
.contribution-day {
  grid-column: 1; font-size: .68rem; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-subtle); white-space: nowrap;
  align-self: center; justify-self: end; padding-right: 4px; line-height: 1;
}
.contribution-cell {
  width: 100%; aspect-ratio: 1; background: var(--ci-0); border-radius: 2px;
  outline: 1px solid var(--ci-outline); outline-offset: -1px;
}
.contribution-cell:hover { outline-color: var(--ink-muted); }
.ci-0 { background: var(--ci-0); }
.ci-1 { background: var(--ci-1); }
.ci-2 { background: var(--ci-2); }
.ci-3 { background: var(--ci-3); }
:root { --ci-0: #EFEBE4; --ci-1: #F6B9DB; --ci-2: #E05BA6; --ci-3: #A3126A; --ci-outline: rgba(24, 23, 28, 0.05); }
:root[data-theme="dark"] { --ci-0: #26242C; --ci-1: #5A1A48; --ci-2: #A3126A; --ci-3: #FF8FD0; --ci-outline: rgba(255, 255, 255, 0.05); }
.contribution-legend {
  display: flex; align-items: center; gap: .35rem; margin-top: .85rem;
  justify-content: flex-end; font-size: .72rem; color: var(--ink-subtle);
}
.contribution-swatch {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
  outline: 1px solid var(--ci-outline); outline-offset: -1px;
}
@media (max-width: 640px) {
  .contribution-area { grid-template-columns: 18px repeat(var(--weeks, 53), minmax(0, 1fr)); column-gap: 1px; row-gap: 1px; }
  .contribution-month, .contribution-day { font-size: .6rem; }
  .timeline-tabs { gap: 20px; }
}
/* Profile edit form */
form.profile-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .9rem; font-weight: 600; color: var(--ink); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--friend); box-shadow: 0 0 0 3px var(--friend-tint); }
.field-hint { font-size: .8rem; color: var(--ink-muted); }
.field-hint a { color: var(--friend-text); }
.field-hint code { background: var(--raised); padding: 0 4px; border-radius: 3px; font-family: var(--font-mono); font-size: .9em; }
.field-inline { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-muted); margin-top: .15rem; }
.field-inline input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--friend); }
.handle-validation-hint { display: block; font-size: .8rem; color: var(--destructive); margin-top: .25rem; min-height: 1em; }
.handle-validation-hint:empty { display: none; }
.field--error input, .field--error textarea, .field--error select { border-color: var(--destructive); }
.danger-zone-block {
  margin-top: 2rem; padding: 1rem 1.1rem;
  border: 1px solid var(--destructive); border-radius: var(--radius);
  background: var(--destructive-tint);
}
.danger-zone-heading { margin: 0 0 .5rem; color: var(--destructive); font-family: var(--font-display); }
.danger-zone-copy { font-size: .9rem; color: var(--ink-muted); margin: 0 0 .75rem; }
.danger-zone-form .field { margin-bottom: .75rem; }
.btn-danger { background: var(--destructive); color: #FFFFFF; border: none; }
.btn-danger:hover { background: var(--destructive); filter: brightness(.92); }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════
   BUTTON VARIANTS shared by the event page + rows
   ════════════════════════════════════════════════════════════ */
.btn-lg { padding: 12px 18px; font-size: 16px; }
.btn-going.btn-lg { padding: 10.5px 22px; }
.btn-going.btn-lg.is-on { padding: 12px 22px; }
.btn-invite-solid, .btn-quiet, .btn-small {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius); font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.btn-invite-solid { background: var(--friend); color: #FFFFFF; border: 0; }
.btn-invite-solid:hover { background: var(--friend-deep); color: #FFFFFF; }
.btn-invite-solid .ta-count { display: none; }
.btn-quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--stone-300); }
.btn-quiet:hover { background: var(--raised); }
.btn-small { padding: .35rem .8rem; font-size: .85rem; background: var(--surface); color: var(--ink-muted); border: 1px solid var(--line); }
.btn-destructive { color: var(--destructive); border-color: var(--destructive); background: transparent; }
.btn-destructive:hover { background: var(--destructive-tint); }

/* ════════════════════════════════════════════════════════════
   EVENT PAGE — templates/event_detail.html
   ════════════════════════════════════════════════════════════ */
.event-page {
  display: grid; gap: 48px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main" "aside";
  align-items: start;
}
@media (min-width: 900px) {
  .event-page { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); grid-template-areas: "aside main"; }
}
.event-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.event-aside { grid-area: aside; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.event-title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 56px; letter-spacing: -0.035em; line-height: 1;
  overflow-wrap: anywhere;
}
.event-facts { display: flex; flex-direction: column; gap: 14px; }
.event-fact { display: flex; align-items: center; gap: 14px; }
.event-fact-main { font-weight: 600; font-size: 17px; }
.event-fact-sub { color: var(--ink-muted); text-decoration: none; }
a.event-fact-sub:hover { color: var(--friend-text); }
.date-chip {
  width: 48px; flex: 0 0 auto; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--stone-300); text-align: center; background: var(--surface);
  display: flex; flex-direction: column;
}
.date-chip-month { background: var(--you); color: #FFFFFF; font-size: 11px; font-weight: 700; padding: 2px 0; }
.date-chip-day { font-family: var(--font-display); font-weight: 700; font-size: 20px; padding: 2px 0 4px; }
.fact-icon {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: var(--radius);
  border: 1px solid var(--stone-300); background: var(--surface);
  display: grid; place-items: center; color: var(--ink);
}
.event-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 20px;
}
.event-card-going {
  margin: 0 0 16px; font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: var(--friend-ink);
}
.event-card-sub { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.event-card-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.event-card-actions .ta-form { display: inline-flex; margin: 0; }
.event-card-register { margin: 14px 0 0; font-size: 15px; color: var(--ink-muted); }
.event-card-register a { color: var(--ink); font-weight: 600; }
.event-card-register a:hover { color: var(--friend-text); }
.event-admin-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.event-admin-row input[type=text] { padding: .35rem .6rem; font-size: .85rem; }
.event-admin-note { font-size: .85rem; color: var(--ink-muted); }
.event-section-heading {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
}
.event-main .description {
  font-size: 17px; line-height: 1.6; color: var(--stone-800);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.aside-label {
  font-size: 13px; font-weight: 700; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.aside-host { padding-top: 12px; font-weight: 600; }
.listed-on { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.listed-on-link {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--ink); text-decoration: none;
}
.listed-on-link:hover { color: var(--friend-text); }
.listed-on-link .stub-dot { flex: 0 0 auto; }
.listed-on-arrow { margin-left: auto; color: var(--ink-muted); }
.aside-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-muted); }
.aside-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.topic-chip {
  padding: 6px 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.topic-chip:hover { border-color: var(--friend); color: var(--friend-ink); }
.tag-cluster { display: inline-flex; align-items: stretch; }
.tag-cluster .topic-chip:not(:only-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tag-follow-inline-form { margin: 0; display: inline-flex; }
.tag-follow-inline-btn {
  padding: 0 .6rem; font-size: .9rem; font-weight: 700; line-height: 1;
  background: var(--surface); color: var(--ink-muted);
  border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tag-follow-inline-btn:hover { background: var(--friend-tint); color: var(--friend-ink); }
.tag-follow-inline-btn.following { background: var(--friend); color: #FFFFFF; border-color: var(--friend); }
/* Check-in block (flag-gated) */
.checkin-status.checked-in { color: var(--went-deep); font-weight: 600; background: var(--went-tint); padding: .55rem .85rem; border-radius: var(--radius); }
.checkin-status.closed, .checkin-hint { color: var(--ink-muted); font-size: .95rem; }
.checkin-hint a { color: var(--friend-text); }
.checkin-set-form, .checkin-form { display: flex; gap: .5rem; margin: 0 0 .65rem; flex-wrap: wrap; align-items: center; }
.checkin-set-form input, .checkin-form input { flex: 1 1 auto; }
.checkin-num { width: 6em; flex: 0 0 auto !important; }
.checkin-set-note { font-size: .85rem; color: var(--ink-muted); }
.checkin-gps-form { margin: 0 0 .65rem; }
.checkin-gps-btn { width: 100%; background: var(--went-tint); color: var(--went-deep); border-color: var(--went); }
.checkin-gps-btn:hover { background: var(--went-tint-hover); }
.checkin-gps-btn:disabled { opacity: .55; cursor: progress; }
.checkin-gps-msg { margin: .4rem 0 0; font-size: .88rem; color: var(--ink-muted); min-height: 1.1em; }
.checkin-gps-msg[data-status="error"] { color: var(--destructive); }
.checkin-gps-msg[data-status="success"] { color: var(--went-deep); }
.checkin-set-form-wrapper { margin-top: .75rem; }
.checkin-set-form-wrapper > summary { cursor: pointer; font-size: .9rem; color: var(--ink-muted); }
.checkin-set-form-wrapper > form { margin-top: .5rem; }
.checkin-roster-block .roster-heading, .roster-heading {
  margin: 1rem 0 .35rem; font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted);
}
.checkin-via-badge {
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  font-size: .75rem; border-radius: var(--radius-sm);
  background: var(--raised); color: var(--ink-muted);
}
/* Sticky ticket bar */
.ticket-bar {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 50;
  display: flex; justify-content: center; padding: 0 16px;
}
.ticket-bar[hidden] { display: none; }
.ticket-bar-inner {
  position: relative; width: 100%; max-width: 760px;
  background: var(--you); color: #FFFFFF; border-radius: 14px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  box-shadow: 0 16px 40px rgba(24, 23, 28, 0.25); overflow: hidden;
}
.ticket-bar-text { padding: 14px 20px; min-width: 0; }
.ticket-bar-when { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.ticket-bar-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-bar-action { padding: 12px 16px; border-left: 2px dashed rgba(255, 255, 255, 0.5); display: flex; align-items: center; }
.ticket-bar-btn { background: #FFFFFF; color: var(--you); border-radius: var(--radius); padding: 12px 20px; font-size: 15px; font-weight: 600; text-decoration: none; }
.footer {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  color: var(--ink-subtle); font-size: .85rem;
}
.footer a { color: var(--ink-muted); }
@media (max-width: 640px) {
  .event-page { gap: 32px; }
  .event-title { font-size: 36px; }
  .event-card { padding: 16px; }
  .btn-lg { padding: 10px 14px; font-size: 15px; }
  .ticket-bar { bottom: 12px; }
}

/* ════════════════════════════════════════════════════════════
   RIVER — templates/index.html (moved from its inline <style>)
   ════════════════════════════════════════════════════════════ */
.river-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 44px; letter-spacing: -0.03em; line-height: 1;
}
.river-sub { margin: 8px 0 0; color: var(--ink-muted); font-size: 16px; }
.river-tabs {
  margin-top: 24px; display: flex; gap: 28px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.river-tab {
  padding: 12px 0; white-space: nowrap;
  font-size: 16px; font-weight: 500; color: var(--ink-muted);
  text-decoration: none; border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.river-tab:hover { color: var(--ink); }
.river-tab.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.river-sentence { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-muted); }
.sf-pick { display: inline-block; position: relative; }
.sf-pick > summary {
  display: inline; list-style: none; cursor: pointer;
  font-weight: 600; color: var(--ink);
  border-bottom: 2px dashed var(--friend-text);
}
.sf-pick > summary::-webkit-details-marker { display: none; }
.sf-pick[open] > summary { color: var(--friend-text); }
.sf-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; min-width: 220px;
  max-height: 320px; overflow-y: auto;
  padding: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(24, 23, 28, 0.12);
  font-size: 15px; line-height: 1.3;
}
.sf-menu a {
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.sf-menu a:hover { background: var(--raised); }
.sf-menu a[aria-current="true"] { background: var(--friend-tint); color: var(--friend-ink); font-weight: 600; }
.sf-search { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px dashed var(--friend-text); }
.river-note { margin: .75rem 0 0; font-size: .85rem; color: var(--ink-muted); }
.river-note a { color: var(--friend-text); }

/* ── Saved searches (2026-10-10, paid) ── chips + save box under the
   sentence filter. Magenta = your own actions; the default chip is filled. */
.saved-searches { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.saved-search {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 4px 2px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: .85rem;
}
.saved-search.is-default { border-color: var(--you); background: var(--you-tint); }
.saved-search-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.saved-search-link[aria-current="true"] { color: var(--you-ink); }
.saved-search-form { display: inline; margin: 0; }
.saved-search-act {
  font: inherit; font-size: .8rem; padding: 4px 6px; border: 0; background: none;
  color: var(--ink-muted); cursor: pointer; border-radius: var(--radius-sm);
}
.saved-search-act:hover { color: var(--you-ink); background: var(--you-tint); }
.saved-search.is-default .saved-search-act:first-child { color: var(--you-ink); }
.saved-search-save { margin: .75rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; }
.saved-search-save label { color: var(--ink-muted); }
.saved-search-save input[type="text"] {
  flex: 1 1 200px; min-width: 0; max-width: 320px; font: inherit; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.saved-search-save .saved-search-act { border: 1.5px solid var(--you); color: var(--you-ink); padding: 5px 12px; font-weight: 600; }
.saved-search-cta { margin: .75rem 0 0; font-size: .85rem; color: var(--ink-subtle); }
.tag-follow-form { margin: .75rem 0 0; display: inline-block; }
.tag-follow-btn {
  font-size: .85rem; font-weight: 600; padding: .45rem .9rem;
  border-radius: var(--radius); border: 1.5px solid var(--ink);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.tag-follow-btn:hover { background: var(--friend-tint); border-color: var(--friend); color: var(--friend-ink); }
.tag-follow-btn.following { background: var(--friend); border-color: var(--friend); color: #FFFFFF; }
.active-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--you); align-self: center;
  animation: active-pulse 2s ease-out infinite;
}
@keyframes active-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 23, 127, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(200, 23, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 23, 127, 0); }
}
.load-more-events { margin: 28px 0 0; text-align: center; }
.load-more-events a {
  display: inline-block; padding: 10px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--ink); color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.load-more-events a:hover { background: var(--raised); }
.site-footer-row {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--ink-subtle); font-size: .85rem;
}
.site-footer-row a { color: var(--ink-muted); text-decoration: none; }
.site-footer-row a:hover { color: var(--ink); text-decoration: underline; }
.intro-card-stats-monthly {
  font-size: .9rem; color: var(--ink-muted); line-height: 1.5;
  margin-top: .85rem; padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.intro-card-stats-monthly .stat-num { color: var(--ink); font-weight: 600; }
/* Admin tools (operator-only — collapsed by default) */
.admin-tools { margin: 3rem 0 0; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.admin-tools > summary {
  list-style: none; cursor: pointer;
  color: var(--ink-muted); font-size: .85rem; font-weight: 500;
}
.admin-tools > summary::-webkit-details-marker { display: none; }
.admin-tools > summary::before { content: "+ "; color: var(--ink-subtle); }
.admin-tools[open] > summary::before { content: "− "; }
.admin-tools-body { padding-top: 1rem; }
.admin-import-form { display: flex; gap: .5rem; margin-bottom: 1rem; }
.admin-import-form input[type=url] { flex: 1; min-width: 0; }
.sync-form { display: inline; margin: 0; }
.sync-form button { background: var(--raised); color: var(--ink); }
.feeds { margin-top: 1rem; font-size: .8rem; color: var(--ink-muted); }
.feeds > summary { cursor: pointer; font-weight: 500; }
.feeds .row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
@media (max-width: 640px) {
  .river-title { font-size: 34px; }
  .river-tabs { gap: 20px; }
  .river-tab { font-size: 15px; }
  .river-sentence { font-size: 16px; }
  .sf-menu { min-width: 200px; max-width: calc(100vw - 2rem); }
}

/* ════════════════════════════════════════════════════════════
   STATIC PAGES — templates/about.html, privacy.html, terms.html
   (shared wrapper: .about-page)
   ════════════════════════════════════════════════════════════ */
.about-page { max-width: 680px; margin: 0 auto; }
.about-page .page-title {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; margin: 0 0 .35rem;
}
.about-page .lede {
  font-size: 1.15rem; line-height: 1.55;
  color: var(--ink-muted); margin: 0 0 2.25rem;
}
.about-page h3 {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink);
  margin: 2.5rem 0 .75rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.about-page p { margin: 0 0 1rem; font-size: .98rem; line-height: 1.65; }
.about-page ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.about-page li { margin-bottom: .35rem; line-height: 1.55; }
.about-page a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px dotted var(--ink-subtle);
  transition: border-color .15s ease, color .15s ease;
}
.about-page a:hover { border-bottom-color: var(--ink); }
.about-page code {
  background: var(--raised); padding: 1px 6px;
  border-radius: var(--radius-sm); font-size: .9em;
}
.about-page .stats-strip {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding: 1rem 1.25rem; margin: 1.5rem 0 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem; color: var(--ink-muted);
}
.about-page .stat-num { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.about-page a.cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--you); color: var(--on-you);
  padding: .65rem 1.1rem; border-radius: var(--radius);
  font-size: .92rem; font-weight: 600;
  margin: 1rem 0 2rem;
  border: 1px solid var(--you);
  transition: background .15s ease;
}
.about-page a.cta:hover { background: var(--you-deep); border-color: var(--you-deep); color: var(--on-you); }
.about-page .footer-row {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-subtle); font-size: .85rem;
}
.about-page .footer-row a { color: var(--ink-muted); border-bottom-color: transparent; }
.about-page .footer-row a:hover { border-bottom-color: var(--ink-subtle); color: var(--ink); }
@media (max-width: 640px) {
  .about-page { max-width: 100%; }
  .about-page .page-title { font-size: 1.85rem; line-height: 1.1; }
  .about-page .lede { font-size: 1.02rem; }
  .about-page .stats-strip { gap: .75rem 1.25rem; padding: .85rem 1rem; }
}

/* ════════════════════════════════════════════════════════════
   ADD EVENT (soon) — templates/add_event_soon.html
   ════════════════════════════════════════════════════════════ */
.soon-page { max-width: 560px; margin: 0 auto; padding-bottom: 4rem; }
.soon-page .page-title {
  font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.1; margin: 2.5rem 0 .5rem;
}
.soon-page .soon-badge {
  display: inline-block; margin-bottom: 1.25rem;
  padding: .2rem .6rem; border-radius: var(--radius-sm);
  background: var(--you-tint); color: var(--you-ink);
  border: 1px solid var(--you);
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.soon-page .lede { font-size: 1.12rem; line-height: 1.6; color: var(--ink-muted); margin: 0 0 1.5rem; }
.soon-page p { margin: 0 0 1rem; font-size: .97rem; line-height: 1.65; }
.soon-page .soon-note {
  margin: 1.75rem 0 0; padding: 1rem 1.15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .92rem; line-height: 1.6; color: var(--ink-muted);
}
.soon-page .soon-actions { margin-top: 2rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.soon-page .soon-actions a {
  display: inline-flex; align-items: center; height: 38px;
  padding: 0 1.1rem; border-radius: var(--radius);
  border: 1.5px solid var(--ink); color: var(--ink); background: var(--surface);
  text-decoration: none; font-weight: 600; font-size: .93rem;
  transition: background .15s;
}
.soon-page .soon-actions a:hover { background: var(--raised); }

/* ════════════════════════════════════════════════════════════
   ADMIN PANEL — templates/admin/*.html (spec 2026-10-10)
   ════════════════════════════════════════════════════════════ */
.admin-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1.25rem; font-size: .9rem; }
.admin-counts { list-style: none; padding: 0; display: grid; gap: .5rem; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-table th, .admin-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.admin-filters { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; margin-bottom: 1rem; font-size: .85rem; }
.admin-filters fieldset { border: 0; padding: 0; margin: 0; }
.admin-form label { display: block; margin: .6rem 0 .2rem; font-weight: 600; }
.admin-form input[type=text], .admin-form input[type=url], .admin-form textarea { width: 100%; box-sizing: border-box; }
.admin-error { color: var(--destructive); }
.admin-readonly { font-size: .8rem; color: var(--ink-muted); margin: 1.5rem 0; }
.admin-paging { margin: 1rem 0; display: flex; gap: 1rem; }
.admin-inline-form { display: inline; margin-left: .5rem; }
.admin-blocked-row td { font-size: .8rem; color: var(--ink-muted); word-break: break-all; }

/* ════════════════════════════════════════════════════════════
   ADMIN BASELINE — templates/admin_baseline.html, admin_baseline_report.html
   ════════════════════════════════════════════════════════════ */
.admin-page { max-width: 1100px; margin: 0 auto; }
.admin-page--form { max-width: 720px; }
.admin-page nav.crumbs { margin-bottom: 1.5rem; font-size: .85rem; color: var(--ink-muted); }
.admin-page nav.crumbs a { color: var(--ink-muted); text-decoration: none; }
.admin-page nav.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.admin-page h2 {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 2.5rem 0 .5rem;
}
.admin-page h2:first-of-type { margin-top: 1rem; }
.admin-page--form h2 { font-size: 1.75rem; }
.admin-page .lede { color: var(--ink-muted); margin: 0 0 1.5rem; font-size: .95rem; }
.admin-page--form .lede { margin-bottom: 2rem; }
.admin-page .frame {
  color: var(--ink-muted); font-size: .9rem;
  border-left: 2px solid var(--you);
  padding: .55rem 0 .55rem .9rem;
  margin: 1rem 0 1.5rem;
}
.admin-page table {
  width: 100%; border-collapse: collapse; margin: .5rem 0 1rem;
  font-size: .92rem;
}
.admin-page th, .admin-page td {
  text-align: left; padding: .55rem .75rem;
  border-bottom: 1px solid var(--line);
}
.admin-page th {
  font-weight: 600; color: var(--ink-muted);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
}
.admin-page th.num, .admin-page td.num { text-align: right; font-family: var(--font-mono); }
.admin-page th.num { font-family: var(--font-body); }
.admin-page table a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted transparent; transition: border-color .15s; }
.admin-page table a:hover { border-bottom-color: var(--ink-subtle); }
.admin-page .empty-table {
  color: var(--ink-muted); font-style: italic; padding: 1rem;
  border: 1px dashed var(--border); border-radius: var(--radius);
  font-size: .9rem;
}
.admin-page form.inline { display: inline-block; margin: 0; }
.admin-page--form label {
  display: block; font-weight: 600; margin: 1.25rem 0 .4rem;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted);
}
.admin-page--form select, .admin-page--form input, .admin-page--form textarea { width: 100%; }
.admin-page--form textarea { min-height: 5rem; resize: vertical; }
.admin-page--form .hint { color: var(--ink-subtle); font-size: .8rem; margin-top: .3rem; }
.admin-page--form .actions { margin-top: 1.75rem; gap: 1rem; align-items: center; }
.admin-page--form .actions a { color: var(--ink-muted); text-decoration: none; font-size: .9rem; }
.admin-page--form .actions a:hover { color: var(--ink); text-decoration: underline; }
.admin-page code { background: var(--raised); padding: 1px 6px; border-radius: var(--radius-sm); font-size: .9em; }
@media (max-width: 640px) {
  .admin-page { max-width: 100%; }
  .admin-page h2 { font-size: 1.25rem; }
  .admin-page th, .admin-page td { padding: .45rem .55rem; font-size: .85rem; }
  .admin-page table { font-size: .85rem; display: block; overflow-x: auto; }
}

/* ════════════════════════════════════════════════════════════
   CITIES — templates/cities.html
   ════════════════════════════════════════════════════════════ */
.cities-page { max-width: 680px; margin: 0 auto; }
.cities-page h2.page-title {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; margin: 0 0 .35rem;
}
.cities-page .lede { font-size: 1.05rem; line-height: 1.55; color: var(--ink-muted); margin: 0 0 2.25rem; }
.cities-page .section-heading { margin: 2.5rem 0 .75rem; }
.cities-page .city-list {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.cities-page .city-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.cities-page .city-row .city-name { font-weight: 500; color: var(--ink); }
.cities-page .city-row .city-meta {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted);
}
.cities-page .city-row.live .city-meta { color: var(--free-ink); }
.cities-page .city-row.pre-launch .city-meta { color: var(--you-ink); }
.cities-page .empty-line { color: var(--ink-subtle); font-style: italic; margin: 0 0 1.5rem; }
.cities-page .signup-form {
  margin: 1rem 0 2rem; padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cities-page .signup-form .row { display: flex; gap: .65rem; flex-wrap: wrap; margin-bottom: .65rem; }
.cities-page .signup-form label {
  display: block; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted); margin-bottom: .25rem;
}
.cities-page .signup-form .field { flex: 1; min-width: 0; }
.cities-page .signup-form .field-city { flex: 3; min-width: 180px; }
.cities-page .signup-form .field-state { flex: 0 0 80px; }
.cities-page .signup-form .field-note { width: 100%; }
.cities-page .signup-form input[type=text],
.cities-page .signup-form input[type=email],
.cities-page .signup-form textarea { width: 100%; }
.cities-page .signup-form textarea { resize: vertical; min-height: 60px; }
.cities-page .signup-form .helper { font-size: .8rem; color: var(--ink-subtle); margin: .5rem 0 0; }
.cities-page .signup-form button[type=submit] {
  background: var(--you); color: var(--on-you); border-color: var(--you);
  padding: .55rem 1.25rem; font-weight: 600;
}
.cities-page .signup-form button[type=submit]:hover { background: var(--you-deep); border-color: var(--you-deep); }
.cities-page .footer-row {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-subtle); font-size: .85rem;
}
.cities-page .footer-row a {
  color: var(--ink-muted); text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color .15s ease, color .15s ease;
}
.cities-page .footer-row a:hover { color: var(--ink); border-bottom-color: var(--ink-subtle); }
@media (max-width: 640px) {
  .cities-page { max-width: 100%; }
  .cities-page h2.page-title { font-size: 1.85rem; line-height: 1.1; }
  .cities-page .lede { font-size: 1rem; }
  .cities-page .signup-form .row { flex-direction: column; gap: .85rem; }
  .cities-page .signup-form .field,
  .cities-page .signup-form .field-city,
  .cities-page .signup-form .field-state { flex: 1 1 100%; min-width: 0; }
  .cities-page .city-row { flex-wrap: wrap; gap: .35rem; }
}

/* ════════════════════════════════════════════════════════════
   DENSITY — templates/density.html
   PRD §3.2.3: density is weight, not rank — no day is highlighted.
   ════════════════════════════════════════════════════════════ */
.density-page h2.page-title {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.03em;
  margin: 1rem 0 .35rem;
}
.density-page .density-coverage { color: var(--ink-muted); font-size: .9rem; max-width: 60ch; margin: 0 0 1.5rem; }
.density-page .density-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; max-width: 40rem; }
.density-page .density-cell {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  padding: .4rem; min-height: 3.2rem; font-size: .75rem;
  min-width: 0;
}
.density-page .density-bar { letter-spacing: -.05em; color: var(--friend-text); }
.density-page .density-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: .35rem; max-width: 40rem; margin: 0 0 .35rem;
  font-size: .7rem; color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: .04em;
}
.density-page .density-dow span { padding-left: .4rem; }
.density-page .density-cell.is-blank { border-color: transparent; background: transparent; }
.density-page .density-month { font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   ERROR + PROFILE 404 — templates/error.html, profile_404.html
   ════════════════════════════════════════════════════════════ */
.error-page, .four-oh-four { max-width: 640px; margin: 0 auto; }
.error-page h2, .four-oh-four h2 {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.15; margin: 2rem 0 .75rem;
}
.error-page p, .four-oh-four p { color: var(--ink-muted); margin: 0 0 1.5rem; }
.four-oh-four code {
  background: var(--raised); padding: 1px 6px;
  border-radius: var(--radius-sm); font-size: .9em;
}
.error-page .go-home, .four-oh-four .go-home {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 36px; padding: 0 1rem;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink); text-decoration: none; font-weight: 600;
  transition: background .15s;
}
.error-page .go-home:hover, .four-oh-four .go-home:hover { background: var(--raised); }

/* ════════════════════════════════════════════════════════════
   FEEDBACK — templates/feedback.html
   ════════════════════════════════════════════════════════════ */
.feedback-page { max-width: 760px; margin: 0 auto; }
.feedback-page nav.crumbs { margin-bottom: 1.5rem; font-size: .85rem; color: var(--ink-muted); }
.feedback-page nav.crumbs a { color: var(--ink-muted); text-decoration: none; }
.feedback-page nav.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.feedback-page h2.page-title {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.03em;
  margin: 1rem 0 .5rem;
}
.feedback-page .lede { color: var(--ink-muted); margin: 0 0 2rem; max-width: 56ch; font-size: .95rem; }
.feedback-page form.submit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 2rem;
}
.feedback-page form.submit h3 {
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted); margin: 0 0 1rem;
}
.feedback-page form.submit label {
  display: block; font-weight: 600;
  margin: .9rem 0 .35rem; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted);
}
.feedback-page form.submit input[type="text"], .feedback-page form.submit textarea { width: 100%; }
.feedback-page form.submit textarea { min-height: 5rem; resize: vertical; }
.feedback-page form.submit .submit-row { margin-top: 1rem; }
.feedback-page form.submit .submit-row button {
  background: var(--you); color: var(--on-you); border-color: var(--you);
}
.feedback-page form.submit .submit-row button:hover { background: var(--you-deep); border-color: var(--you-deep); }
.feedback-page form.submit .char-counter {
  display: block; margin-top: .25rem;
  color: var(--ink-muted); font-size: .72rem;
  font-family: var(--font-mono);
}
.feedback-page form.submit .char-counter.near-cap { color: var(--ink); }
.feedback-page form.submit .char-counter.at-cap { color: var(--you-ink); }
.feedback-page .signin-cta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-bottom: 2rem;
  color: var(--ink-muted); font-size: .9rem;
}
.feedback-page .signin-cta a { color: var(--friend-text); font-weight: 600; }
.feedback-page ul.items { list-style: none; padding: 0; margin: 0; }
.feedback-page li.item {
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: 1.25rem; padding: 1rem 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.feedback-page li.item:first-child { border-top: 0; padding-top: .5rem; }
.feedback-page .vote { text-align: center; }
.feedback-page .vote form { margin: 0; display: inline-block; }
.feedback-page .vote button {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .35rem 0; font-weight: 600;
  width: 4rem; cursor: pointer; line-height: 1.3;
  transition: border-color .15s, color .15s, background .15s;
}
.feedback-page .vote button:hover { border-color: var(--ink-subtle); background: var(--raised); }
.feedback-page .vote button.voted { background: var(--you-tint); color: var(--you-ink); border-color: var(--you); }
.feedback-page .vote .arrow { display: block; font-size: 1rem; line-height: 1; }
.feedback-page .vote .count { display: block; font-family: var(--font-mono); font-size: 1.05rem; }
.feedback-page .body h4 {
  font-family: var(--font-display);
  margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.01em;
}
.feedback-page .body .meta {
  color: var(--ink-muted); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em;
  font-weight: 500; margin-bottom: .55rem;
}
.feedback-page .body .desc { color: var(--ink); white-space: pre-wrap; margin: .4rem 0 .6rem; font-size: .94rem; }
.feedback-page .chip {
  display: inline-block; vertical-align: middle;
  padding: 2px 7px; border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  margin-left: .35rem;
  border: 1px solid transparent;
}
.feedback-page .chip.submitted   { color: var(--ink-muted); background: var(--raised); border-color: var(--line); }
/* Status chips carry meaning by hue (cyan/indigo/amber/emerald) — semantic
   per-category colors, with dark-mode variants below. */
.feedback-page .chip.considering { color: #0369a1; background: rgba(2,132,199,.10); border-color: rgba(2,132,199,.25); }
.feedback-page .chip.planned     { color: #4338ca; background: rgba(79,70,229,.10); border-color: rgba(79,70,229,.25); }
.feedback-page .chip.in_progress { color: #b45309; background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.25); }
.feedback-page .chip.shipped     { color: var(--free-ink); background: var(--free-tint); border-color: rgba(23,102,58,.25); }
.feedback-page .chip.declined    { color: var(--ink-subtle); background: var(--raised); border-color: var(--line); text-decoration: line-through; }
:root[data-theme="dark"] .feedback-page .chip.considering { color: #7dd3fc; }
:root[data-theme="dark"] .feedback-page .chip.planned     { color: #a5b4fc; }
:root[data-theme="dark"] .feedback-page .chip.in_progress { color: #fdba74; }
:root[data-theme="dark"] .feedback-page .chip.shipped     { border-color: rgba(110,231,160,.25); }
.feedback-page .admin-status { margin-top: .5rem; font-size: .82rem; color: var(--ink-muted); }
.feedback-page .admin-status form { display: inline-flex; gap: .35rem; margin: 0; align-items: center; }
.feedback-page .admin-status select {
  padding: .25rem .5rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: .8rem;
}
.feedback-page .admin-status button { font-size: .78rem; padding: .3rem .7rem; }
.feedback-page .empty-list { color: var(--ink-muted); font-style: italic; padding: 3rem 0; text-align: center; }
.feedback-page .sort-bar {
  display: flex; gap: .5rem; align-items: baseline;
  margin: 0 0 1rem; font-size: .78rem; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.feedback-page .sort-bar .sort-label { font-weight: 600; }
.feedback-page .sort-bar a {
  color: var(--ink-muted); text-decoration: none;
  padding: .15rem .5rem; border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.feedback-page .sort-bar a:hover { color: var(--ink); }
.feedback-page .sort-bar a.active { color: var(--ink); background: var(--raised); border-color: var(--line); }
@media (max-width: 640px) {
  .feedback-page { max-width: 100%; }
  .feedback-page h2.page-title { font-size: 1.65rem; line-height: 1.15; }
  .feedback-page li.item { grid-template-columns: 3.25rem 1fr; gap: .85rem; }
  .feedback-page .vote button { width: 3rem; }
}

/* ════════════════════════════════════════════════════════════
   FOLLOWERS / FOLLOWING — templates/followers.html, following.html
   (follower-row layout itself lives with the shared rows above)
   ════════════════════════════════════════════════════════════ */
.follow-list-page .list-wrap { padding: 1rem 0; }
.follow-list-page .list-pagination { display: flex; justify-content: space-between; padding: 1.5rem 0 1rem; font-size: .9rem; }
.follow-list-page .list-pagination a { color: var(--ink); text-decoration: none; }
.follow-list-page .list-pagination a:hover { text-decoration: underline; }
.follow-list-page .list-pagination .disabled { color: var(--ink-subtle); }
.follow-list-page .follower-follow-btn {
  background: var(--friend); color: #FFFFFF; border: 1.5px solid var(--friend);
}
.follow-list-page .follower-follow-btn:hover { background: var(--friend-deep); border-color: var(--friend-deep); }
.follow-list-page .follower-follow-btn.is-following {
  background: var(--surface); color: var(--ink); border: 1px solid var(--stone-300);
}
.follow-list-page .follower-row + .follower-row { box-shadow: 0 -1px 0 var(--line) inset; }
.follow-list-page .list-empty { padding: 2rem 0; text-align: center; color: var(--ink-muted); font-size: .95rem; }
.follow-list-page .list-empty a,
.follow-list-page .list-empty button {
  color: var(--friend-text); background: none; border: 0;
  text-decoration: underline; cursor: pointer; padding: 0; font: inherit;
}

/* ════════════════════════════════════════════════════════════
   IMPORT PREVIEW — templates/import_preview.html
   ════════════════════════════════════════════════════════════ */
.import-page { max-width: 680px; margin: 0 auto; }
.import-page h2.page-title {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; margin: 0 0 .35rem;
}
.import-page .lede { font-size: 1.15rem; line-height: 1.55; color: var(--ink-muted); margin: 0 0 2.25rem; }
.import-page .crumbs { margin-bottom: 1.25rem; font-size: .85rem; }
.import-page .crumbs a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px dotted var(--ink-subtle); }
.import-page .crumbs a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.import-page .import-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 0 0 1.75rem;
}
.import-page .import-card h3 {
  font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; margin: 0 0 .65rem; color: var(--ink);
}
.import-page .import-card .event-when,
.import-page .import-card .event-venue,
.import-page .import-card .event-host {
  margin: 0 0 .3rem; font-size: .95rem; color: var(--ink-muted); line-height: 1.4;
}
.import-page .import-card .event-when { color: var(--ink); font-family: var(--font-mono); font-weight: 500; font-size: .9rem; }
.import-page .import-card .event-description { margin: .9rem 0 0; font-size: .98rem; line-height: 1.6; color: var(--ink-muted); }
.import-page .import-card .event-meta {
  margin: 1rem 0 0; padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-subtle);
  text-transform: uppercase; letter-spacing: .06em;
}
.import-page .import-actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; margin: 0 0 2rem;
}
.import-page .import-actions form { margin: 0; }
.import-page .cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--you); color: var(--on-you);
  padding: .65rem 1.1rem; border-radius: var(--radius);
  text-decoration: none; font-size: .92rem; font-weight: 600;
  border: 1.5px solid var(--you);
  font-family: var(--font-body);
  cursor: pointer; line-height: 1;
  transition: background .15s ease;
}
.import-page .cta:hover { background: var(--you-deep); color: var(--on-you); border-color: var(--you-deep); }
.import-page .cta-ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); }
.import-page .cta-ghost:hover { background: var(--raised); color: var(--ink); border-color: var(--ink); }
.import-page .import-error-reason {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--destructive);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem; margin: 0 0 1.5rem;
  color: var(--ink); font-size: .98rem; line-height: 1.5;
}
.import-page .footer-row {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-subtle); font-size: .85rem;
}
.import-page .footer-row a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px dotted var(--ink-subtle); }
.import-page .footer-row a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.import-page .import-manual-form .field { margin: 0 0 1.15rem; }
.import-page .import-manual-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.15rem; }
.import-page .import-manual-form .field-row .field { margin: 0; }
.import-page .import-manual-form label,
.import-page .import-manual-form legend {
  display: block; font-size: .9rem; font-weight: 600;
  margin: 0 0 .35rem; color: var(--ink);
}
.import-page .import-manual-form .req { color: var(--destructive); font-weight: 400; }
.import-page .import-manual-form input[type="text"],
.import-page .import-manual-form input[type="url"],
.import-page .import-manual-form input[type="datetime-local"],
.import-page .import-manual-form textarea {
  width: 100%; padding: .55rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: .95rem;
}
.import-page .import-manual-form textarea { resize: vertical; min-height: 5rem; }
.import-page .import-manual-form .field-error { margin: .25rem 0 0; color: var(--destructive); font-size: .85rem; }
.import-page .import-manual-form .tag-field {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .85rem 1rem;
}
.import-page .import-manual-form .tag-checks { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 .75rem; }
.import-page .import-manual-form .tag-check {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 400; margin: 0; font-size: .92rem;
}
.import-page .import-manual-form .tag-check input { margin: 0; }
@media (max-width: 640px) {
  .import-page { max-width: 100%; }
  .import-page h2.page-title { font-size: 1.85rem; line-height: 1.1; }
  .import-page .lede { font-size: 1.02rem; }
  .import-page .import-card { padding: 1.1rem 1.1rem 1rem; }
  .import-page .import-card h3 { font-size: 1.2rem; }
  .import-page .import-actions { flex-direction: column; align-items: stretch; }
  .import-page .import-actions form { width: 100%; }
  .import-page .cta { justify-content: center; width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   INBOX — templates/inbox.html (base .inbox-* rules sit with the
   shared pieces above; these are the page overrides)
   ════════════════════════════════════════════════════════════ */
.inbox-col .inbox-card { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
.inbox-col .inbox-card.follow-card { background: var(--raised); }
.inbox-col .follow-action-btn {
  background: var(--friend); color: #FFFFFF; border: 1.5px solid var(--friend);
  padding: .45rem .95rem; border-radius: var(--radius);
  font-size: .85rem; cursor: pointer;
}
.inbox-col .follow-action-btn:hover { background: var(--friend-deep); border-color: var(--friend-deep); }
.inbox-col .follow-action-btn.decline {
  background: var(--surface); color: var(--ink-muted);
  border: 1px solid var(--stone-300); margin-left: .5rem;
}
.inbox-col .follow-action-btn.decline:hover { background: var(--raised); }
.inbox-col .inbox-card__bio { color: var(--ink-muted); font-size: .88rem; }
.inbox-col .vouch-action-btn { border-radius: var(--radius); }
.inbox-col .vouch-action-btn.is-yes { background: var(--you); border: 1px solid var(--you); color: var(--on-you); }
.inbox-col .vouch-action-btn.is-yes:hover { background: var(--you-deep); border-color: var(--you-deep); }

/* ════════════════════════════════════════════════════════════
   TRENDING — templates/trending.html (event rows are the shared
   .stub-row macro; only page chrome lives here)
   ════════════════════════════════════════════════════════════ */
.trending-page h2.page-title {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.03em;
  margin: 1rem 0 .35rem;
}
.trending-page .lede { color: var(--ink-muted); margin: 0 0 2rem; font-size: .95rem; max-width: 56ch; }
.trending-page .empty-state {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem; color: var(--ink-muted); font-size: .95rem;
}
.trending-page .empty-state p { margin: 0 0 .5rem; }
.trending-page .empty-state p:last-child { margin-bottom: 0; }
.trending-page .empty-state strong { color: var(--ink); }
.trending-page .empty-state a { color: var(--friend-text); border-bottom: 1px dotted var(--ink-subtle); text-decoration: none; }
.trending-page .empty-state a:hover { border-bottom-color: var(--friend-text); }
@media (max-width: 640px) {
  .trending-page { max-width: 100%; }
  .trending-page h2.page-title { font-size: 1.65rem; line-height: 1.15; }
}

/* ════════════════════════════════════════════════════════════
   EVENT PRESENTATION — usability fixes, lane B (2026-10-10)
   Back link on the event page; links in cleaned descriptions.
   ════════════════════════════════════════════════════════════ */
.event-back {
  align-self: flex-start; font-size: 14px; font-weight: 600;
  color: var(--ink-muted); text-decoration: none;
}
.event-back:hover { color: var(--ink); text-decoration: underline; }
.event-main .description a { color: var(--friend-text); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   USABILITY LANE C (2026-10-10) — skip link, dismissed intro
   card reflow. Findings #17 and #20 in
   docs/2026-10-10-usability-test-logged-out.md.
   ════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute; left: 8px; top: 0;
  transform: translateY(-120%);
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  padding: 8px 14px; font-weight: 600; text-decoration: none;
  z-index: 100;
}
.skip-link:focus { transform: translateY(8px); }
@media (min-width: 960px) {
  /* The × on the intro card hides the aside; the grid then drops its empty
     280px rail so the feed uses the full width. */
  .layout-with-sidebar.intro-dismissed { grid-template-columns: minmax(0, 1fr); gap: 0; }
}