:root {
  /* Surface Hierarchy (Tonal Layering) */
  --bg-recessed: #000000;
  --bg-base: #0a0a0b;
  --bg-elevated: #1a191b;
  --bg-floating: #2c2c2d;
  
  /* Typography Colors */
  --text-primary: #ffffff;
  --text-secondary: #adaaab;
  --text-muted: #767577; /* WCAG AA 4.5:1 contrast against #0a0a0b */
  
  /* Accents */
  --accent-primary: #00ff66;
  --accent-secondary: #039d5e;
  --accent-tertiary: #00e3fd;
  --signal-error: #ff7351;

  /* Ghost Borders */
  --border-ghost: rgba(255, 255, 255, 0.15);
  --border-hairline: rgba(255, 255, 255, 0.05);
  --border-focus: rgba(0, 255, 102, 0.40);

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  /* Between --space-4 and --space-6 on the 4px scale */
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Typography (system stack; no third-party font CDNs — aligns with CSP style-src 'self') */
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", "Liberation Mono", monospace;
  
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  /* Full pill for poll liquid tubes only (exception to default card/button radii; see docs/ui_ux.md) */
  --radius-poll-tube: 9999px;

  /* Z-Index */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal: 50;

  /* Layout max widths (content columns) */
  --max-width-page-form: 25rem;
  --max-width-page-narrow: 37.5rem;
  --max-width-page-wide: 50rem;
  --max-width-feed: 64rem;
  --sidebar-left-width: 14.5rem;
  --feed-center-max-width: 42rem;
  --sidebar-right-width: 18.5rem;
  --layout-gap: var(--space-6);
  --layout-max-width-shell: calc(var(--sidebar-left-width) + var(--feed-center-max-width) + var(--sidebar-right-width) + var(--layout-gap) + var(--layout-gap));

  /* Minimum interactive target (Fitts's Law) */
  --touch-target-min: 2.75rem;
  /* Dense chrome (toolbar chips, inline filters) */
  --control-height-compact: 2.375rem;
  /* Comment row: up/down (tighter than post sidebar votes) */
  --comment-vote-target: 2.25rem;
  --comment-vote-font-size: var(--text-sm);
  /* Comment action row: one shared text-control rhythm (reply, report, moderation, thread). */
  --comment-action-target: var(--comment-vote-target);
  --comment-action-font-size: var(--text-xs);
  /* JS: clickable thread gutter (reserved in layout before JS for stable paint) */
  --comment-thread-rail-width: 0.75rem;

  /* Active vote: gradient fills the glyph only + soft glow (no button box) */
  --vote-cast-glow-near: 0.55rem;
  --vote-cast-glow-far: 1.15rem;

  /* Primary CTA (accent glass pill) */
  --btn-primary-border-mix: 52%;
  --btn-primary-highlight-mix: 34%;
  --btn-primary-glow-hover: 26%;

  /* Comment composer submit (fused bar; tertiary + glass, not primary green) */
  --comment-submit-bg-elevated-pct: 50%;
  --comment-submit-bg-hover-pct: 64%;
  --comment-submit-glow-hover: 22%;

  /* Derived surfaces (match --bg-base #0a0a0b) */
  --rgb-bg-base: 10, 10, 11;

  /* Glassmorphism (frosted chrome + cards; lower opacity so blur reads) */
  --blur-glass: 16px;
  --blur-glass-card: 12px;
  --glass-saturate: 1.22;
  --opacity-glass-chrome: 0.62;
  --opacity-glass-footer: 0.5;
  --glass-card-fill-pct: 52%;
  --glass-card-fill-hover-pct: 68%;
  --border-glass-highlight: color-mix(in srgb, var(--text-primary) 10%, transparent);

  --avatar-size: 5rem;
  --avatar-glow-blur: 1.5rem;
  --avatar-block-alpha-low: 0.22;
  --avatar-block-alpha-medium: 0.42;
  --avatar-block-alpha-high: 0.68;
  --avatar-block-alpha-solid: 0.92;

  --textarea-min-rows-height: 6rem;
  --admin-proof-max-height: 12.5rem;

  /* Sticky feed toolbar sits below one-line sticky header */
  --layout-header-sticky-offset: calc(var(--space-4) * 2 + var(--text-xl) + var(--space-2));

  /* Brand mark before site name (empty string to hide) */
  --brand-mark: "\203A";

  /* Text selection (mock: neon highlight on dark text) */
  --selection-bg: color-mix(in srgb, var(--accent-primary) 38%, var(--bg-floating));
  --selection-fg: var(--bg-recessed);
}

/* Wide-Gamut Display P3 Signal Enhancements (P3 Hardware / Wide Gamut Displays) */
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-primary: color(display-p3 0 1 0.4);
      --accent-secondary: color(display-p3 0.01 0.62 0.37);
      --accent-tertiary: color(display-p3 0 0.89 1);
      --signal-error: color(display-p3 1 0.45 0.32);
      --border-focus: color(display-p3 0 1 0.4 / 0.45);
      --border-glass-highlight: color-mix(in display-p3, var(--text-primary) 12%, transparent);
    }
  }
}

/* OLED & High Dynamic Range (HDR) Display Enhancements */
@media (dynamic-range: high), (contrast-preference: high) {
  :root {
    --bg-base: #000000;
    --rgb-bg-base: 0, 0, 0;
    --border-ghost: rgba(255, 255, 255, 0.18);
    --border-hairline: rgba(255, 255, 255, 0.08);
  }
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.16);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 9999px;
  transition: background-color 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--accent-primary) 70%, white);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--accent-primary);
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  background-color: var(--bg-base);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}

/* Skip link: keyboard users jump past repetitive chrome */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-modal) + 1);
  padding: var(--space-2) var(--space-4);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--bg-recessed);
  background-color: var(--accent-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform 0.2s ease-in-out, outline 0.2s ease-in-out;
}

.skip-link:focus-visible {
  transform: translateY(var(--space-4));
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: 0 var(--space-2) var(--space-4) color-mix(in srgb, var(--bg-recessed) 45%, transparent);
}

/* Screen Reader Only Utility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tag--danger {
  background-color: var(--signal-error);
  color: var(--bg-recessed);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.text-success {
  color: var(--accent-primary);
  font-weight: var(--weight-bold);
}

.text-danger {
  color: var(--signal-error);
  font-weight: var(--weight-bold);
}

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

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-family: var(--font-display);
  margin-bottom: var(--space-4);
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

a:hover {
  filter: brightness(1.2);
}

a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Layout Shell & Fluid Responsive Grid */
.app-shell {
  width: 100%;
  max-width: var(--layout-max-width-shell);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-gap);
  min-height: 100vh;
  box-sizing: border-box;
  transition: grid-template-columns 0.3s ease-in-out, gap 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.app-shell > * {
  min-width: 0;
  max-width: 100%;
}

.mobile-header {
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid var(--border-hairline);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background-color: rgba(var(--rgb-bg-base), var(--opacity-glass-chrome));
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-glass)) saturate(var(--glass-saturate));
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
  overflow: hidden;
}

.header-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.header-search-form {
  flex: 1 1 auto;
  min-width: 0;
}

.header-search-input {
  width: 100%;
  min-width: 0;
}

.desktop-sidebar-left,
.desktop-sidebar-right {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, width 0.3s ease-in-out;
}

.app-center-column {
  width: 100%;
  max-width: var(--feed-center-max-width);
  margin: 0 auto;
  min-width: 0;
  transition: max-width 0.3s ease-in-out;
}

/* Medium / Compact Desktop (640px - 1079px): Slim Icon Rail + Centered Content */
@media (min-width: 640px) {
  .mobile-header {
    display: none;
  }
  .desktop-sidebar-left {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .app-shell {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .app-center-column {
    margin: 0;
  }
  /* Slim Rail Tweaks */
  .sidebar-nav-text,
  .sidebar-username,
  .sidebar-btn-text {
    display: none;
  }
  .sidebar-brand-title {
    padding: var(--space-2);
    text-align: center;
  }
  .sidebar-nav-item {
    position: relative;
    justify-content: center;
    padding: var(--space-3);
  }
  .sidebar-nav-item .nav-unread-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    margin-left: 0;
    font-size: 0.65rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.2rem;
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-primary) 50%, transparent);
  }
  .sidebar-post-btn {
    padding: var(--space-3);
    min-height: var(--touch-target-min);
  }
  .sidebar-user-footer {
    padding: var(--space-2);
    align-items: center;
  }
}

/* Desktop Wide (>= 1080px): Full 3-Column Shell (Left Nav + Centered Main + Right Sidebar) */
@media (min-width: 1080px) {
  :root {
    --feed-center-max-width: var(--max-width-page-wide);
  }

  .desktop-sidebar-right {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .app-shell {
    grid-template-columns: var(--sidebar-left-width) minmax(0, var(--feed-center-max-width)) var(--sidebar-right-width);
    justify-content: center;
  }
  /* Expand Full Rail Text & Buttons */
  .sidebar-nav-text,
  .sidebar-username,
  .sidebar-btn-text {
    display: inline;
  }
  .sidebar-brand-title {
    padding: var(--space-2) var(--space-3);
    text-align: left;
  }
  .sidebar-nav-item {
    position: relative;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
  }
  .sidebar-nav-item .nav-unread-badge {
    position: static;
    margin-left: auto;
    font-size: var(--text-xs);
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--space-2);
  }
  .sidebar-post-btn {
    padding: var(--space-3) var(--space-5);
  }
  .sidebar-user-footer {
    padding: var(--space-3);
    align-items: stretch;
  }
}

/* Subforum Touch Slider (Zero Scrollbar) */
.forum-slider {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--space-1) 0;
}

.forum-slider::-webkit-scrollbar {
  display: none;
}

/* Explore Hero Search Section */
.explore-hero-header {
  text-align: center;
  margin-bottom: var(--space-6);
  padding: var(--space-2) 0;
}

.explore-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

.explore-search-form {
  max-width: 36rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.explore-search-bar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.explore-input-icon {
  font-size: var(--text-base);
  color: var(--text-muted);
  padding: 0 var(--space-3);
  user-select: none;
}

.explore-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--space-2) var(--space-2) !important;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  outline: none !important;
}

.explore-submit-btn {
  flex-shrink: 0;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-2) var(--space-4) !important;
  min-height: var(--control-height-compact) !important;
}

.explore-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.explore-filter-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.explore-filter-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.explore-select {
  background-color: var(--bg-recessed);
}

/* Unified Authentication Cards */
.auth-card-container {
  max-width: none;
  margin: var(--space-6) auto;
  width: 100%;
}

.auth-card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

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

.auth-card-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.auth-card-subtitle {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.auth-field-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.auth-input {
  width: 100%;
  min-height: 2.75rem;
  background-color: var(--bg-recessed);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  transition: all 0.2s ease-in-out;
}

.auth-input:focus-visible {
  border-color: var(--accent-primary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.auth-field-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.auth-submit-btn {
  margin-top: var(--space-2);
  min-height: 2.75rem;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
}

.auth-card-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.auth-switch-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.auth-switch-link:hover {
  text-decoration: underline;
}

.forum-slider-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.feed-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-elevated);
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a0a0a0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 0.6rem auto;
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-poll-tube);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.feed-sort-select:hover,
.feed-sort-select:focus-visible {
  background-color: var(--bg-floating);
  color: var(--text-primary);
  border-color: var(--accent-primary);
  outline: none;
}

.forum-slider .forum-nav-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-poll-tube);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.forum-slider .forum-nav-link:hover {
  background-color: var(--bg-floating);
  color: var(--text-primary);
  border-color: var(--border-ghost);
}

.forum-slider .forum-nav-link.is-current {
  color: var(--bg-recessed);
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  font-weight: var(--weight-bold);
}

/* Mobile Slide-Over Drawer Navigation */
.mobile-menu-toggle {
  background: transparent;
  border: 1px solid var(--border-ghost);
  color: var(--text-primary);
  font-size: var(--text-base);
  padding: var(--space-1) var(--space-3);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.mobile-menu-toggle:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

.mobile-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 17.5rem;
  max-width: 82vw;
  background-color: var(--bg-base);
  border-right: 1px solid var(--border-ghost);
  z-index: var(--z-modal);
  transform: translateX(-100%);
  transition: transform 0.25s ease-in-out;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}

.mobile-menu-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-xl);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease-in-out;
}

.mobile-menu-close:hover {
  color: var(--signal-error);
}

.mobile-drawer-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Sidebar Components & Sticky Layouts */
.sidebar-sticky-wrap {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
}

.sidebar-brand-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  display: inline-block;
}

.sidebar-brand-title::before {
  content: var(--brand-mark) " ";
  color: var(--accent-primary);
}

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

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.sidebar-nav-item:hover {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

.sidebar-nav-item.is-current {
  color: var(--accent-primary);
  background-color: var(--bg-elevated);
  font-weight: var(--weight-bold);
}

.sidebar-nav-icon {
  font-size: var(--text-lg);
  color: var(--accent-primary);
}

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

.sidebar-post-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  background-color: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-elevated));
  background-image: none;
  border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-ghost));
  color: var(--accent-primary);
  font-family: var(--font-mono);
  letter-spacing: 0.035em;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-primary) 12%, transparent);
  filter: none;
}

.sidebar-post-btn.btn:hover {
  background-color: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-ghost));
  color: var(--accent-primary);
  box-shadow: 0 var(--space-2) var(--space-4) color-mix(in srgb, var(--accent-primary) 14%, transparent);
  filter: none;
}

.sidebar-post-btn.btn:active {
  background-color: color-mix(in srgb, var(--accent-primary) 24%, var(--bg-elevated));
  transform: translateY(0);
}

.sidebar-post-btn.btn:focus-visible {
  outline-color: var(--accent-primary);
}

.sidebar-user-footer {
  margin-top: auto;
  padding: var(--space-3);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-username {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--accent-primary);
}

.sidebar-user-footer .form-inline {
  width: 100%;
}

.sidebar-logout-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-recessed);
  background-image: none;
  border-color: var(--border-ghost);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  box-shadow: none;
  filter: none;
}

.sidebar-logout-btn.btn:hover {
  background-color: color-mix(in srgb, var(--bg-floating) 72%, var(--bg-recessed));
  border-color: color-mix(in srgb, var(--text-secondary) 42%, var(--border-ghost));
  color: var(--text-primary);
  box-shadow: none;
  filter: none;
}

.sidebar-logout-btn.btn:active {
  background-color: var(--bg-floating);
  transform: translateY(0);
}

.sidebar-logout-btn.btn:focus-visible {
  outline-color: var(--accent-primary);
}

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

.sidebar-widget-title {
  font-size: var(--text-sm);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.sidebar-subforums-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-subforum-item {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease-in-out;
}

.sidebar-subforum-item:hover {
  color: var(--accent-primary);
  background-color: var(--bg-floating);
}

/* Fallback Container */
.container {
  max-width: var(--max-width-page-wide);
  margin: 0 auto;
  padding: var(--space-4);
}

.container.container--feed {
  max-width: var(--max-width-feed);
}

main {
  display: flex;
  flex-direction: column;
}

/* Components */
.card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  transition: all 0.2s ease-in-out;
}

.card:not(.card--quiet):hover {
  border-color: var(--accent-primary);
}

.card--quiet:hover {
  border-color: var(--border-ghost);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  min-height: var(--control-height-compact);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent-primary) var(--btn-primary-border-mix), transparent);
  color: var(--bg-recessed);
  background-color: var(--accent-primary);
  background-image: linear-gradient(
    168deg,
    color-mix(in srgb, var(--text-primary) var(--btn-primary-highlight-mix), var(--accent-primary)) 0%,
    var(--accent-primary) 36%,
    color-mix(in srgb, var(--accent-secondary) 38%, var(--accent-primary)) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 30%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--bg-recessed) 22%, transparent);
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.btn:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 78%, transparent);
  filter: brightness(1.06) saturate(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 42%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--bg-recessed) 14%, transparent),
    0 6px 22px color-mix(in srgb, var(--accent-primary) var(--btn-primary-glow-hover), transparent);
}

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

/* Outline-style buttons: set --btn-outline-color and --btn-outline-hover-pct per variant */
.btn-secondary {
  --btn-outline-color: var(--accent-primary);
  --btn-outline-hover-pct: 14%;
  background-color: transparent;
  background-image: none;
  color: var(--btn-outline-color);
  border: 1px solid var(--btn-outline-color);
  box-shadow: none;
  filter: none;
}

.btn-danger {
  --btn-outline-color: var(--signal-error);
  --btn-outline-hover-pct: 18%;
  background-color: transparent;
  background-image: none;
  color: var(--btn-outline-color);
  border: 1px solid var(--btn-outline-color);
  box-shadow: none;
  filter: none;
}

.btn-secondary:hover,
.btn-danger:hover {
  background-image: none;
  background-color: color-mix(in srgb, var(--btn-outline-color) var(--btn-outline-hover-pct), transparent);
  color: var(--btn-outline-color);
  transform: translateY(-1px);
  filter: none;
  box-shadow: none;
}

.btn-secondary:focus-visible,
.btn-danger:focus-visible {
  outline: 2px solid var(--btn-outline-color);
  outline-offset: 2px;
}

.post-owner-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}

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

.post-delete-ack {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 16rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.post-delete-ack input {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: var(--space-1);
}

.input {
  width: 100%;
  background-color: var(--bg-recessed);
  border: 1px solid var(--border-ghost);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  margin-bottom: var(--space-4);
}

.input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--border-focus);
}

.input:focus-visible {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--border-focus);
}

select.input {
  cursor: pointer;
  min-height: var(--touch-target-min);
}

input.input {
  min-height: var(--touch-target-min);
}

textarea.input {
  min-height: var(--textarea-min-rows-height);
  resize: vertical;
  line-height: 1.5;
}

/* Metadata */
.meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  display: flex;
  gap: var(--space-2);
}

.tag {
  background-color: var(--bg-recessed);
  color: var(--accent-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

/* Profile — deterministic username-seeded mosaic avatar */
.profile-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  overflow: hidden;
  border: 2px solid var(--accent-primary);
  background-color: hsl(var(--avatar-hue, 160), 42%, 18%);
  box-shadow: 0 0 var(--avatar-glow-blur) hsla(var(--avatar-hue, 160), 80%, 45%, 0.25);
}

.profile-avatar--hue-0 { --avatar-hue: 0; }
.profile-avatar--hue-1 { --avatar-hue: 15; }
.profile-avatar--hue-2 { --avatar-hue: 30; }
.profile-avatar--hue-3 { --avatar-hue: 45; }
.profile-avatar--hue-4 { --avatar-hue: 60; }
.profile-avatar--hue-5 { --avatar-hue: 75; }
.profile-avatar--hue-6 { --avatar-hue: 90; }
.profile-avatar--hue-7 { --avatar-hue: 105; }
.profile-avatar--hue-8 { --avatar-hue: 120; }
.profile-avatar--hue-9 { --avatar-hue: 135; }
.profile-avatar--hue-10 { --avatar-hue: 150; }
.profile-avatar--hue-11 { --avatar-hue: 165; }
.profile-avatar--hue-12 { --avatar-hue: 180; }
.profile-avatar--hue-13 { --avatar-hue: 195; }
.profile-avatar--hue-14 { --avatar-hue: 210; }
.profile-avatar--hue-15 { --avatar-hue: 225; }
.profile-avatar--hue-16 { --avatar-hue: 240; }
.profile-avatar--hue-17 { --avatar-hue: 255; }
.profile-avatar--hue-18 { --avatar-hue: 270; }
.profile-avatar--hue-19 { --avatar-hue: 285; }
.profile-avatar--hue-20 { --avatar-hue: 300; }
.profile-avatar--hue-21 { --avatar-hue: 315; }
.profile-avatar--hue-22 { --avatar-hue: 330; }
.profile-avatar--hue-23 { --avatar-hue: 345; }

.profile-avatar-block {
  min-width: 0;
  min-height: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.profile-avatar-block--tone-0 { background-color: hsl(var(--avatar-hue, 160), 76%, 58%); }
.profile-avatar-block--tone-1 { background-color: hsl(calc(var(--avatar-hue, 160) + 34), 68%, 50%); }
.profile-avatar-block--tone-2 { background-color: hsl(calc(var(--avatar-hue, 160) + 196), 64%, 62%); }

.profile-avatar-block--opacity-1 { opacity: var(--avatar-block-alpha-low); }
.profile-avatar-block--opacity-2 { opacity: var(--avatar-block-alpha-medium); }
.profile-avatar-block--opacity-3 { opacity: var(--avatar-block-alpha-high); }
.profile-avatar-block--opacity-4 { opacity: var(--avatar-block-alpha-solid); }
}

.profile-activity-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-activity-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-activity-item {
  min-width: 0;
}

.profile-activity-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  padding: var(--space-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-pct), transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.profile-activity-link:hover {
  border-color: var(--border-ghost);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-hover-pct), transparent);
}

.profile-activity-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.profile-activity-title {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.profile-activity-kind {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--accent-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-activity-preview {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.profile-activity-body-preview {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  line-height: 1.45;
  margin: 0;
}

.settings-credential-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-credential-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Surfaces (templates use bg-recessed / bg-base modifiers) */
.bg-recessed {
  background-color: var(--bg-recessed);
}

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

/* Layout shell */
.header-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.brand-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.brand-title::before {
  content: var(--brand-mark);
  margin-right: var(--space-2);
  color: color-mix(in srgb, var(--accent-primary) 72%, transparent);
  font-weight: var(--weight-bold);
}

.header-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  row-gap: var(--space-2);
  column-gap: var(--space-2);
  max-width: 100%;
}

/* Fitts’s Law: header text links share a comfortable hit area */
.header-nav > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
}

.nav-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  box-sizing: border-box;
  padding: 0 var(--space-2);
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  line-height: 1;
  color: var(--bg-base);
  background: var(--accent-primary);
  border-radius: var(--radius-full);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

/* Logout: frosted chip — matches feed glass, not neon outline */
.header-nav .btn.btn-secondary.btn-compact {
  --btn-outline-color: var(--text-muted);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-secondary);
  min-height: auto;
  padding: var(--space-2) var(--space-4);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-pct), transparent);
  background-image: none;
  -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  transform: none;
  filter: none;
}

.header-nav .btn.btn-secondary.btn-compact:hover {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-hover-pct), transparent);
  border-color: var(--border-ghost);
  transform: none;
  filter: none;
}

.header-nav .btn.btn-secondary.btn-compact:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent-primary) 45%, transparent);
  outline-offset: 2px;
}

/* Notifications inbox */
.notifications-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.notifications-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notifications-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline);
  background: color-mix(in srgb, var(--bg-elevated) 40%, transparent);
}

.notifications-item--unread {
  border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--border-hairline));
}

.notifications-item-body p {
  margin: 0 0 var(--space-2);
}

.notifications-item-time {
  margin-bottom: 0 !important;
}

.notifications-pagination {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
}

.comment-delete-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.comment-delete-ack {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.form-inline {
  display: inline;
}

.btn-compact {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  min-height: var(--touch-target-min);
}

.site-footer {
  margin-top: var(--space-12);
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  text-align: center;
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-glass)) saturate(var(--glass-saturate));
  background-color: rgba(var(--rgb-bg-base), var(--opacity-glass-footer));
}

.site-footer .meta {
  justify-content: center;
  width: 100%;
}

/* Feed (home) */
.feed-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.feed-header h1 {
  margin-bottom: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.forum-nav {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.forum-nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  min-height: var(--control-height-compact);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.forum-nav-link:hover {
  color: var(--text-primary);
  border-color: var(--border-ghost);
}

.forum-nav-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.forum-nav-link.is-current {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.forum-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  text-decoration: none;
}

/* Links only: Fitts’s Law + clear focus (inactive forum uses span.forum-chip--inactive) */
a.forum-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-compact);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

a.forum-chip:hover {
  text-decoration: none;
  border-color: var(--border-hairline);
  background-color: color-mix(in srgb, var(--bg-elevated) 35%, transparent);
}

a.forum-chip:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.forum-chip--inactive {
  cursor: default;
  opacity: 0.85;
}

.forum-chip--inactive:hover {
  text-decoration: none;
}

.post-card-forum,
.post-detail-forum {
  margin-bottom: var(--space-2);
}

.feed-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.feed-sort-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Segmented control: dense glass chip aligned with post cards */
.feed-sort-field {
  display: inline-flex;
  align-items: stretch;
  min-height: var(--control-height-compact);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-pct), transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  overflow: hidden;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.feed-sort-field:hover {
  border-color: var(--border-ghost);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-hover-pct), transparent);
}

.feed-sort-field:focus-within {
  border-color: color-mix(in srgb, var(--text-primary) 18%, transparent);
  box-shadow: inset 0 1px 0 var(--border-glass-highlight), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.feed-sort-field .feed-sort-label {
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-right: 1px solid var(--border-hairline);
  background-color: transparent;
  flex-shrink: 0;
  cursor: pointer;
}

.feed-sort-select-wrap {
  position: relative;
  flex: 1;
  min-width: 6rem;
}

.feed-sort-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-2);
  width: var(--space-2);
  height: var(--space-2);
  margin-top: calc(-1 * var(--space-1));
  border-right: 1px solid color-mix(in srgb, var(--text-secondary) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 50%, transparent);
  transform: rotate(45deg);
  pointer-events: none;
  opacity: 0.75;
}

.feed-sort-select {
  width: 100%;
  height: 100%;
  min-height: var(--control-height-compact);
  margin: 0;
  padding: var(--space-1) calc(var(--space-6) + var(--space-1)) var(--space-1) var(--space-2);
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  transition: color 0.2s ease-in-out;
}

.feed-sort-select:hover {
  color: var(--text-primary);
}

.feed-sort-select:focus {
  outline: none;
}

.feed-sort-select option {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  text-transform: none;
}

.feed-sort-apply {
  margin-bottom: 0;
}

/* Noscript apply: glass outline, not primary CTA green */
.feed-sort-form .btn.feed-sort-apply {
  min-height: var(--control-height-compact);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-pct), transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  transform: none;
}

.feed-sort-form .btn.feed-sort-apply:hover {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-hover-pct), transparent);
  border-color: var(--border-ghost);
  transform: none;
}

.feed-sort-form .btn.feed-sort-apply:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
  outline-offset: 1px;
}

.sort-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.sort-link {
  color: var(--text-muted);
  transition: color 0.2s ease-in-out;
}

.sort-link:hover {
  color: var(--text-secondary);
  filter: none;
}

.sort-link.is-current {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-primary) 45%, transparent);
}

.sort-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.feed-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.feed-footer[aria-busy="true"] {
  color: var(--text-secondary);
}

.feed-empty-state {
  margin: 0;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  border: 1px dashed var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--bg-elevated) 28%, transparent);
}

[data-feed-batch] {
  display: flow-root;
}

[data-feed-top-spacer],
[data-feed-bottom-spacer] {
  height: var(--feed-spacer-height, 0px);
}

/* Feed list: mock-aligned post cards (frosted glass over feed scroll) */
.feed .post-card {
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
  margin-bottom: var(--space-3);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-pct), transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  border-left-width: 2px;
  border-left-color: color-mix(in srgb, var(--accent-primary) 42%, transparent);
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.feed .post-card:not(.card--quiet):hover,
.feed .post-card:not(.card--quiet):focus-within {
  border-color: var(--border-ghost);
  border-left-color: var(--accent-primary);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-hover-pct), transparent);
}

.feed .post-card .post-card-row {
  gap: var(--space-3);
  align-items: flex-start;
}

.feed .post-card .vote-control {
  width: 2rem;
}

.feed .post-card .btn-vote {
  font-size: var(--text-sm);
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.feed .post-card .post-card-score {
  font-size: var(--text-sm);
  line-height: 1.2;
}

.feed .post-card .post-card-main h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-1);
}

.feed .post-card .post-card-main .meta {
  font-size: var(--text-xs);
  line-height: 1.35;
}

/* Feed cards borrow the detail view's hierarchy while retaining feed density. */
.feed .post-card {
  padding: var(--space-4);
  border: 1px solid var(--border-hairline);
  border-left-width: 1px;
  border-left-color: var(--border-hairline);
  background-color: var(--bg-base);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.feed .post-card:not(.card--quiet):hover,
.feed .post-card:not(.card--quiet):focus-within {
  border-color: var(--border-ghost);
  border-left-color: var(--border-ghost);
  background-color: color-mix(in srgb, var(--bg-base) 84%, var(--bg-elevated));
}

.feed .post-card .post-card-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.feed .post-card .post-card-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.feed .post-card .post-card-title a:hover {
  color: var(--accent-tertiary);
}

.feed .post-card .post-card-title a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.post-card-context {
  margin-bottom: var(--space-3);
}

.post-card-context .post-card-forum {
  margin: 0;
}

.post-card-content {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--bg-recessed);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
}

.feed .post-card .post-engagement {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-hairline);
}

/* Quoted post embed (Twitter-style card; specs/post_quoting_prd.md) */
.post-quote-embed {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.post-quote-embed__inner {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-ghost);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  text-decoration: none;
  color: inherit;
}

.post-quote-embed__link:hover {
  border-color: var(--accent-primary);
}

.post-quote-embed__link:focus-visible {
  border-color: var(--accent-primary);
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.post-quote-embed__inner--muted {
  cursor: default;
}

.post-quote-embed__author {
  display: block;
  margin-bottom: var(--space-1);
}

.post-quote-embed__title {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.post-quote-embed__excerpt {
  display: block;
  white-space: pre-wrap;
  color: var(--text-secondary);
  font-size: 0.9em;
  line-height: 1.4;
}

.post-detail .post-quote-embed {
  margin-bottom: var(--space-4);
}

/* Thread context stays referential, not dominant. */
.post-detail .post-quote-embed__inner {
  padding: var(--space-2) var(--space-3);
}

.post-detail .post-quote-embed__author,
.post-detail .post-quote-embed__title {
  margin-bottom: 0;
}

.post-detail .post-quote-embed__inner {
  display: grid;
  gap: var(--space-1);
}

.post-detail .post-quote-embed__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.post-quote-action a {
  color: var(--accent-tertiary);
}

/* Post detail & cards */
.page-card {
  width: 100%;
  margin-inline: auto;
}

.page-card--narrow {
  max-width: none;
}

.page-card--wide {
  max-width: none;
}

.page-card--form {
  max-width: none;
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
}

.post-detail-row {
  margin-bottom: var(--space-6);
}

.post-detail-main {
  min-width: 0;
}

.post-detail-backbar {
  margin-bottom: var(--space-3);
}

.post-detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.post-detail-back:hover {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.post-detail-back:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.post-title-lead {
  margin-bottom: var(--space-2);
}

.post-title-lead--tombstone {
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.post-detail-meta-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-meta-row {
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: var(--space-1);
  column-gap: var(--space-2);
}

.post-meta-verified-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}

.post-meta-verified {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
  letter-spacing: 0.03em;
  cursor: help;
}

.post-meta-flair-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.tag--post-flair {
  padding: 0.1rem var(--space-2);
  font-size: calc(var(--text-xs) * 0.95);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background-color: var(--bg-elevated);
  cursor: help;
}

.post-meta-byline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.post-meta-byline a {
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.post-meta-identity-line {
  flex-basis: 100%;
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.post-meta-username-link {
  font-size: 0.92em;
  opacity: 0.9;
}

/* .meta uses --font-mono; use sans for digits and inline SVG (not emoji) for a reliable “eye” on all OSes. */
.post-views-meta {
  font-family: var(--font-sans);
  color: var(--text-muted);
  cursor: help;
  white-space: nowrap;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
}

.post-views-meta .post-views-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.post-views-meta .post-views-svg {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  vertical-align: middle;
  opacity: 0.92;
}

.post-content-body {
  white-space: normal;
  word-break: break-word;
  font-family: var(--font-sans);
}

.post-content-body--tombstone {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.vote-control--disabled {
  justify-content: flex-start;
  padding-top: var(--space-2);
}

.post-card-score--muted {
  color: var(--text-muted);
}

.comments-section {
  margin-top: var(--space-12);
  min-width: 0;
  width: 100%;
}

.comments-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-ghost);
  padding-bottom: var(--space-2);
}

.comments-section-head h2 {
  margin-bottom: 0;
}

/* Fused textarea + submit: reads as one composer, matches thread chrome */
.comment-compose-form textarea.input,
.reply-form textarea.input {
  margin-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom-color: var(--border-hairline);
}

.comment-compose-form .btn.btn-comment-submit,
.reply-form .btn.btn-comment-submit {
  width: 100%;
  margin: 0;
  min-height: var(--control-height-compact);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border: 1px solid var(--border-ghost);
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-tertiary);
  background-color: color-mix(
    in srgb,
    var(--bg-elevated) var(--comment-submit-bg-elevated-pct),
    var(--bg-recessed)
  );
  background-image: none;
  filter: none;
  transform: none;
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.comment-compose-form .btn.btn-comment-submit:hover,
.reply-form .btn.btn-comment-submit:hover {
  color: var(--text-primary);
  background-color: color-mix(
    in srgb,
    var(--bg-elevated) var(--comment-submit-bg-hover-pct),
    transparent
  );
  background-image: none;
  border-color: color-mix(in srgb, var(--accent-tertiary) 32%, var(--border-ghost));
  filter: none;
  transform: none;
  box-shadow:
    inset 0 1px 0 var(--border-glass-highlight),
    0 0 1.25rem color-mix(in srgb, var(--accent-tertiary) var(--comment-submit-glow-hover), transparent);
}

.comment-compose-form .btn.btn-comment-submit:focus-visible,
.reply-form .btn.btn-comment-submit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-tertiary) 50%, transparent);
  outline-offset: 2px;
}

.vote-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--space-8);
  flex-shrink: 0;
}

.btn-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-lg);
  font-family: inherit;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-sm);
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.btn-vote:hover {
  color: var(--accent-primary);
}

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

.btn-vote.btn-vote--cast-up {
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: linear-gradient(
    158deg,
    color-mix(in srgb, var(--text-primary) 88%, var(--accent-primary)) 0%,
    color-mix(in srgb, var(--accent-primary) 92%, transparent) 28%,
    var(--accent-primary) 52%,
    color-mix(in srgb, var(--accent-secondary) 65%, var(--bg-base)) 72%,
    color-mix(in srgb, var(--accent-primary) 45%, var(--bg-recessed)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 var(--vote-cast-glow-near) color-mix(in srgb, var(--accent-primary) 50%, transparent))
    drop-shadow(0 0 var(--vote-cast-glow-far) color-mix(in srgb, var(--accent-primary) 22%, transparent));
  transition: filter 0.2s ease-in-out;
}

.btn-vote.btn-vote--cast-up:hover {
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 calc(var(--vote-cast-glow-near) + 0.15rem) color-mix(in srgb, var(--accent-primary) 62%, transparent))
    drop-shadow(0 0 calc(var(--vote-cast-glow-far) + 0.25rem) color-mix(in srgb, var(--accent-primary) 30%, transparent));
}

.btn-vote.btn-vote--cast-down {
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: linear-gradient(
    158deg,
    color-mix(in srgb, var(--text-primary) 75%, var(--signal-error)) 0%,
    color-mix(in srgb, var(--signal-error) 88%, transparent) 30%,
    color-mix(in srgb, var(--signal-error) 95%, var(--bg-recessed)) 52%,
    color-mix(in srgb, var(--accent-secondary) 35%, var(--signal-error)) 74%,
    color-mix(in srgb, var(--signal-error) 40%, var(--bg-recessed)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 var(--vote-cast-glow-near) color-mix(in srgb, var(--signal-error) 48%, transparent))
    drop-shadow(0 0 var(--vote-cast-glow-far) color-mix(in srgb, var(--signal-error) 20%, transparent));
  transition: filter 0.2s ease-in-out;
}

.btn-vote.btn-vote--cast-down:hover {
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 calc(var(--vote-cast-glow-near) + 0.15rem) color-mix(in srgb, var(--signal-error) 58%, transparent))
    drop-shadow(0 0 calc(var(--vote-cast-glow-far) + 0.25rem) color-mix(in srgb, var(--signal-error) 28%, transparent));
}

.btn-vote.btn-vote--cast-up:focus-visible,
.btn-vote.btn-vote--cast-down:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.post-card-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.post-card-main {
  flex: 1;
  min-width: 0;
}

.post-card-score {
  text-align: center;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.post-card-main h2 {
  font-size: var(--text-xl);
  line-height: 1.35;
}

.post-card-main h2 a {
  color: inherit;
  transition: color 0.2s ease-in-out;
}

.post-card-main h2 a:hover {
  color: var(--accent-primary);
}

/* Profile */
.profile-identity-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}

.profile-header-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-2);
}

.profile-identity-line {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.profile-username-heading {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: var(--weight-semibold);
  margin: 0;
  letter-spacing: -0.02em;
}

.profile-header-credentials,
.profile-standing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.profile-standing-row {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.profile-standing-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}

.profile-standing-item strong {
  color: var(--text-secondary);
  font-weight: var(--weight-bold);
}

.profile-private-summary {
  margin: 0;
}

.profile-timeline-nav {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-hairline);
}

.profile-timeline-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
  white-space: nowrap;
}

.profile-timeline-nav a:hover {
  color: var(--text-primary);
}

.profile-timeline-nav a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}

.profile-timeline-nav a[aria-current="page"] {
  border-bottom-color: var(--accent-primary);
  color: var(--accent-primary);
}

.profile-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--feed-center-max-width);
}

.profile-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.profile-avatar--compact {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
}

.profile-timeline-heading {
  margin: 0;
  font-size: var(--text-lg);
}

.profile-post-feed {
  width: 100%;
}

.profile-comment-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.profile-comment-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.profile-comment-context,
.profile-comment-content {
  margin: 0;
}

.profile-comment-context a,
.profile-comment-footer a {
  color: var(--accent-tertiary);
}

.profile-comment-content {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
}

.profile-comment-engagement {
  width: 100%;
  margin-top: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-hairline);
}

.profile-comment-footer,
.profile-timeline-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.profile-timeline-pagination {
  min-height: var(--touch-target-min);
}

.profile-timeline-pagination a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--accent-tertiary);
}

.profile-trust-hint {
  max-width: 42rem;
}

.settings-profile-axes {
  border-bottom: 1px solid var(--border-ghost);
  padding-bottom: var(--space-4);
}

.profile-private-notice {
  text-align: center;
  padding: var(--space-8);
}

.profile-restricted-msg {
  color: var(--text-secondary);
}

.profile-bio-text {
  white-space: pre-wrap;
  color: var(--text-secondary);
}

.profile-reputation-value {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  cursor: help;
  margin: 0;
}

.section-heading {
  border-bottom: 1px solid var(--border-ghost);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-2);
}

.tag-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.profile-tag-row--trust {
  align-items: baseline;
}

.tag--profile-member {
  cursor: help;
}

.settings-credential-chip,
.admin-pending-credential-chip {
  cursor: help;
}

.mol-profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.profile-more-actions,
.profile-moderation-actions {
  color: var(--text-secondary);
}

.profile-more-actions summary,
.profile-moderation-actions summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  list-style: none;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.profile-more-actions summary::-webkit-details-marker,
.profile-moderation-actions summary::-webkit-details-marker {
  display: none;
}

.profile-more-actions summary:hover,
.profile-moderation-actions summary:hover {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--bg-floating) 60%, transparent);
}

.profile-more-actions summary:focus-visible,
.profile-moderation-actions summary:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.profile-more-actions[open] form,
.profile-moderation-actions[open] form {
  padding-top: var(--space-2);
}

.profile-moderation-actions {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-4);
}

.profile-owner-actions {
  margin: 0;
  border-top: 1px solid var(--border-ghost);
  padding-top: var(--space-4);
}

/* Shared account and administration page frame: mirrors profile hierarchy. */
.workspace-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-6);
}

.workspace-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}

.workspace-page-header h1 {
  margin: 0;
  font-size: var(--text-xl);
}

.workspace-page-lede {
  max-width: var(--feed-center-max-width);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.workspace-page-header .forum-nav {
  margin: 0;
}

.workspace-panel {
  padding: var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-pct), transparent);
  -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
}

.workspace-panel:focus-within {
  border-color: var(--border-ghost);
}

/* Settings */
.settings-status {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--accent-primary) 9%, transparent);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.settings-status--error {
  border-color: color-mix(in srgb, var(--signal-error) 42%, transparent);
  background-color: color-mix(in srgb, var(--signal-error) 10%, transparent);
}

.settings-section {
  margin: 0;
  padding-bottom: var(--space-6);
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  min-width: 0;
}

.settings-section-title {
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.settings-preferences {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target-min);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.settings-checkbox-row:hover {
  background-color: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}

.settings-checkbox-row:focus-within {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.settings-checkbox-row input {
  width: var(--space-4);
  height: var(--space-4);
  accent-color: var(--accent-primary);
  flex-shrink: 0;
}

.settings-checkbox-row span {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.settings-checkbox-row strong {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.settings-checkbox-row small {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.settings-managed-section {
  padding-top: var(--space-2);
}

.settings-danger-zone {
  border-color: color-mix(in srgb, var(--signal-error) 48%, var(--border-hairline));
  background-color: color-mix(in srgb, var(--signal-error) 7%, var(--bg-elevated));
}

.settings-account-delete-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.settings-account-delete-form .input {
  max-width: 28rem;
}

.settings-account-delete-form .btn {
  margin-top: var(--space-2);
}

.admin-filter-form,
.admin-filters-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-filter-form {
  margin-bottom: var(--space-6);
}

.admin-filter-form .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  max-width: 42rem;
}

.admin-filter-form .btn {
  justify-self: start;
  margin-top: var(--space-2);
}

.table-scroll {
  overflow-x: auto;
}

.admin-filters-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
}

.admin-filters-table th,
.admin-filters-table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-hairline);
}

.admin-filters-table th {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
}

.settings-managed-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-managed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "summary actions"
    "delete delete";
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--bg-elevated) 58%, transparent);
}

.settings-item-summary {
  grid-area: summary;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.settings-visibility-status {
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.settings-visibility-status.is-hidden {
  color: var(--text-muted);
}

.settings-row-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.settings-flair-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
}

.settings-flair-add-row .input {
  flex: 1 1 12rem;
  margin-bottom: 0;
  min-width: 0;
}

.settings-flair-cap-notice {
  color: var(--accent-tertiary);
}

.settings-delete-confirm {
  max-inline-size: 100%;
}

.settings-delete-form {
  grid-area: delete;
}

.settings-delete-confirm > summary {
  list-style: none;
}

.settings-delete-confirm > summary::-webkit-details-marker {
  display: none;
}

.settings-delete-cancel {
  display: none;
}

.settings-delete-confirm[open] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.settings-delete-confirm[open] .settings-delete-trigger {
  display: none;
}

.settings-delete-confirm[open] .settings-delete-cancel {
  display: inline;
}

.settings-delete-confirm[open] > summary,
.settings-delete-confirm[open] > .btn {
  order: 0;
}

.settings-delete-ack {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 0 100%;
  order: 1;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--signal-error) 6%, transparent);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  cursor: pointer;
}

.settings-row-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 37.5rem) {
  .settings-managed-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "summary"
      "actions"
      "delete";
    align-items: stretch;
  }

  .settings-row-actions {
    align-items: stretch;
  }
}

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

.form-actions .meta {
  margin-bottom: 0;
}

.form-actions--spaced {
  gap: var(--space-4);
}

/* Auth cards */
.auth-card-foot {
  text-align: center;
  margin-top: var(--space-4);
}

.text-center {
  text-align: center;
}

.w-full {
  width: 100%;
}

/* Admin */
.admin-subnav {
  margin-bottom: 0;
}

.admin-status {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--accent-primary) 9%, transparent);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.admin-section-title {
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.admin-claim-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.admin-claim-head h3 {
  margin-bottom: 0;
}

.admin-proof-block {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  max-height: var(--admin-proof-max-height);
  overflow: auto;
  border: 1px solid var(--border-ghost);
}

.admin-proof-label {
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-decision-copy {
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.admin-decision-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.admin-decision-actions .btn {
  min-height: var(--touch-target-min);
}

.admin-report-resolution {
  flex: 1 0 100%;
}

.admin-report-resolution > summary {
  list-style: none;
}

.admin-report-resolution > summary::-webkit-details-marker {
  display: none;
}

.admin-report-resolution[open] {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--signal-error) 35%, transparent);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--signal-error) 6%, transparent);
}

.admin-report-resolution-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.admin-report-resolution-form .input {
  margin-bottom: 0;
}

.admin-reject-form {
  flex: 1 0 100%;
}

.admin-reject-confirm > summary {
  list-style: none;
}

.admin-reject-confirm > summary::-webkit-details-marker {
  display: none;
}

.admin-reject-cancel {
  display: none;
}

.admin-reject-confirm[open] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--signal-error) 35%, transparent);
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--signal-error) 6%, transparent);
}

.admin-reject-confirm[open] .admin-reject-trigger {
  display: none;
}

.admin-reject-confirm[open] .admin-reject-cancel {
  display: inline;
}

.admin-reject-ack {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 16rem;
  min-height: var(--touch-target-min);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* Solid admin actions: per-button tokens + shared focus */
.btn-approve {
  --admin-btn-bg: var(--accent-secondary);
  --admin-btn-bg-hover: var(--accent-primary);
  --admin-btn-fg: var(--text-primary);
  --admin-btn-fg-hover: var(--bg-recessed);
  background-color: var(--admin-btn-bg);
  background-image: none;
  color: var(--admin-btn-fg);
  transition: all 0.2s ease-in-out;
}

.btn-approve:hover {
  background-color: var(--admin-btn-bg-hover);
  background-image: none;
  color: var(--admin-btn-fg-hover);
  filter: none;
  box-shadow: none;
}

.btn-reject {
  --admin-btn-bg: var(--signal-error);
  background-color: var(--admin-btn-bg);
  background-image: none;
  color: var(--text-primary);
  transition: all 0.2s ease-in-out;
}

.btn-reject:hover {
  background-image: none;
  filter: brightness(1.1);
  box-shadow: none;
}

.btn-approve:focus-visible,
.btn-reject:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.claims-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  gap: var(--space-4);
}

/* Comments thread */
.comments-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.comment-thread-item {
  position: relative;
  border-left: none;
  min-width: 0;
  padding-left: calc(var(--comment-thread-rail-width) + var(--space-4));
}

.comment-thread-inner,
.comment-children {
  min-width: 0;
}

.comment-thread-rail {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--comment-thread-rail-width);
  margin: 0;
  padding: 0;
  border: none;
  border-left: 2px solid var(--border-ghost);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-sizing: border-box;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

html:not(.forum-js) .comment-thread-rail {
  pointer-events: none;
  cursor: default;
}

.forum-js .comment-thread-rail:hover,
.forum-js .comment-thread-rail:focus-visible {
  background-color: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border-left-color: var(--accent-primary);
}

.forum-js .comment-thread-rail:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* In layout from first paint; invisible until JS (avoids action-row reflow when deferred script runs) */
html:not(.forum-js) .comment-hide-replies {
  visibility: hidden;
  pointer-events: none;
}

.comment.is-comment-thread-collapsed > .comment-thread-inner > .comment-thread-collapsible {
  display: none;
}

.comment.is-comment-children-collapsed .comment-thread-collapsible > .comment-children {
  display: none;
}

.comment-meta-row {
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: var(--space-1);
  column-gap: var(--space-2);
}

.comment-meta-byline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.comment-author {
  color: var(--accent-tertiary);
  font-weight: var(--weight-medium);
}

.comment-author-handle {
  font-size: 0.92em;
  opacity: 0.9;
}

.comment-body {
  color: var(--text-secondary);
}

.reply-form {
  margin-top: var(--space-4);
}

.reply-form.is-hidden {
  display: none;
}

.comment-children {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.comment .actions {
  gap: var(--space-1);
}

.comment-moderation-reports {
  min-width: 0;
}

.comment-moderation-reports[open] {
  flex: 1 0 100%;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--signal-warning) 42%, transparent);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--signal-warning) 7%, var(--bg-recessed));
}

.comment-moderation-reports-trigger {
  color: color-mix(in srgb, var(--signal-warning) 76%, var(--text-primary));
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.comment-moderation-reports-trigger::-webkit-details-marker {
  display: none;
}

.comment-moderation-reports-trigger::marker {
  content: "";
}

.comment-moderation-reports[open] .comment-moderation-reports-trigger {
  justify-content: flex-start;
}

.comment-moderation-report-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.comment-moderation-report + .comment-moderation-report {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-ghost);
}

.comment-moderation-report-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.comment-moderation-report-meta .tag {
  color: color-mix(in srgb, var(--signal-warning) 78%, var(--text-primary));
}

.comment-moderation-report-description {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.comment .actions form .btn-vote {
  font-size: var(--comment-vote-font-size);
  min-width: var(--comment-vote-target);
  min-height: var(--comment-vote-target);
  width: var(--comment-vote-target);
  padding: 0;
}

.comment .actions > .btn-vote[data-reply-toggle],
.comment .actions > .btn-vote.comment-hide-replies,
.comment .actions > a.btn-vote,
.comment .actions > .comment-moderation-reports > .comment-moderation-reports-trigger,
.comment .actions > .comment-delete-form > .comment-delete-trigger {
  min-height: var(--comment-action-target);
  min-width: auto;
  width: auto;
  padding-inline: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--comment-action-font-size);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-compact);
}

/* Post poll — glass tube; liquid width % is relative to .poll-cylinder-liquid-track only */
.post-poll {
  --poll-glass-rim: calc(var(--space-1) / 2);
  --poll-track-inset: calc(var(--space-1) / 2);
  --poll-inner-min-h: var(--touch-target-min);
  --poll-track-void: color-mix(in srgb, var(--bg-recessed) 55%, black 45%);
  --poll-track-overlay-strong: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-primary) 6%, transparent) 0%,
    transparent 40%,
    color-mix(in srgb, var(--bg-recessed) 28%, black 72%) 100%
  );
  --poll-track-overlay-soft: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-primary) 4%, transparent) 0%,
    transparent 42%,
    color-mix(in srgb, var(--bg-recessed) 10%, black 90%) 100%
  );
  --poll-glass-border: color-mix(in srgb, var(--text-primary) 14%, transparent);
  --poll-glass-face-shine: linear-gradient(
    155deg,
    color-mix(in srgb, var(--text-primary) 16%, transparent) 0%,
    color-mix(in srgb, var(--text-primary) 5%, transparent) 38%,
    color-mix(in srgb, var(--bg-recessed) 12%, transparent) 72%,
    color-mix(in srgb, var(--bg-recessed) 22%, transparent) 100%
  );
  --poll-glass-base: color-mix(in srgb, var(--text-primary) 1.5%, transparent);
  --poll-glass-inset-top: color-mix(in srgb, var(--text-primary) 22%, transparent);
  --poll-glass-inset-bottom: color-mix(in srgb, var(--bg-recessed) 35%, black 65%);
  --poll-glass-outer-shadow: 0 10px 30px -10px color-mix(in srgb, var(--bg-recessed) 80%, black 20%);
  --poll-fill-gradient: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-primary) 55%, var(--text-primary) 45%) 0%,
    var(--accent-primary) 35%,
    color-mix(in srgb, var(--accent-secondary) 92%, black 8%) 100%
  );
  --poll-fill-solid: color-mix(in srgb, var(--accent-primary) 78%, var(--accent-secondary) 22%);
  --poll-fill-glow: 0 0 16px color-mix(in srgb, var(--accent-primary) 42%, transparent);
  --poll-fill-trail-opacity: 0.58;
  --poll-specular-peak: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--text-primary) 22%, transparent) 0%,
    color-mix(in srgb, var(--text-primary) 6%, transparent) 55%,
    transparent 100%
  );
  --poll-bottom-gleam: linear-gradient(
    to top,
    color-mix(in srgb, var(--text-primary) 8%, transparent) 0%,
    transparent 100%
  );
  --poll-specular-layer-opacity: 0.85;
}

.post-poll.card.card--quiet.bg-recessed {
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}

/* Parent-owned separation (padding avoids mixing margin-top on the section; see docs/ui_ux.md §6) */
.post-poll-slot {
  padding-top: var(--space-4);
}

.post-card .post-poll-slot {
  padding-top: var(--space-2);
}

.post-poll-heading {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  margin-bottom: 0;
}

.post-poll-meta {
  margin-bottom: var(--space-1);
}

.post-poll-login-hint {
  margin-bottom: var(--space-1);
}

.post-poll-cylinders {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-poll-cylinder-wrap {
  margin: 0;
}

.poll-cylinder-form {
  margin: 0;
  display: block;
}

button.poll-cylinder.poll-cylinder--vote {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: inherit;
  color: inherit;
  border-radius: var(--radius-poll-tube);
  transition: transform 0.2s ease-in-out;
}

button.poll-cylinder--vote:active {
  transform: scale(0.992);
}

button.poll-cylinder--vote:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

button.poll-cylinder--vote:focus-visible:not(:disabled) .poll-cylinder-glass {
  border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--poll-glass-border));
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, var(--text-primary) 10%, transparent),
    inset 0 -2px 4px color-mix(in srgb, var(--bg-recessed) 60%, black 40%),
    0 0 0 1px color-mix(in srgb, var(--accent-primary) 28%, transparent),
    var(--poll-glass-outer-shadow),
    0 0 22px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

button.poll-cylinder--vote:hover:not(:disabled) .poll-cylinder-glass {
  border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--poll-glass-border));
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, var(--text-primary) 10%, transparent),
    inset 0 -2px 4px color-mix(in srgb, var(--bg-recessed) 60%, black 40%),
    0 0 0 1px color-mix(in srgb, var(--accent-primary) 28%, transparent),
    var(--poll-glass-outer-shadow),
    0 0 22px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

button.poll-cylinder.poll-cylinder--readonly:disabled {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: not-allowed;
  font: inherit;
  text-align: inherit;
  color: inherit;
  border-radius: var(--radius-poll-tube);
}

.poll-cylinder--readonly:disabled .poll-cylinder-glass {
  opacity: 0.78;
}

/*
 * Outer wall: frosted tube (inset highlights + depth) + backdrop blur.
 * Inner chamber: padded so liquid sits visibly *inside* the tube (dark void around it).
 */
.poll-cylinder-glass {
  display: block;
  padding: var(--poll-glass-rim);
  border-radius: var(--radius-poll-tube);
  border: 1px solid var(--poll-glass-border);
  background: var(--poll-glass-face-shine), var(--poll-glass-base);
  background-blend-mode: normal, normal;
  -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, var(--text-primary) 10%, transparent),
    inset 0 -2px 4px color-mix(in srgb, var(--bg-recessed) 60%, black 40%),
    inset 0 1px 0 var(--poll-glass-inset-top),
    inset 0 -2px 6px var(--poll-glass-inset-bottom),
    inset 0 0 0 1px color-mix(in srgb, var(--bg-recessed) 20%, black 80%),
    0 2px 0 color-mix(in srgb, var(--text-primary) 4%, transparent),
    var(--poll-glass-outer-shadow);
}

.poll-cylinder--yours .poll-cylinder-glass {
  border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--poll-glass-border));
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, var(--text-primary) 10%, transparent),
    inset 0 -2px 4px color-mix(in srgb, var(--bg-recessed) 60%, black 40%),
    inset 0 1px 0 var(--poll-glass-inset-top),
    0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--accent-primary) 14%, transparent),
    var(--poll-glass-outer-shadow);
}

/* Hollow tube: fill level is width % of .poll-cylinder-liquid-track (left → right) */
.poll-cylinder-inner {
  position: relative;
  display: block;
  min-height: var(--poll-inner-min-h);
  border-radius: var(--radius-poll-tube);
  overflow: hidden;
  box-sizing: border-box;
}

.poll-cylinder-liquid-track {
  position: absolute;
  left: var(--poll-track-inset);
  right: var(--poll-track-inset);
  top: var(--poll-track-inset);
  bottom: var(--poll-track-inset);
  border-radius: var(--radius-poll-tube);
  overflow: hidden;
  z-index: 0;
  background-color: var(--poll-track-void);
  box-shadow:
    inset 0 3px 14px color-mix(in srgb, var(--bg-recessed) 62%, black 38%),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}

/* Specular cap above the liquid (inside track) — must not sit under .poll-cylinder-inner or it masks the fill */
.poll-cylinder-liquid-track::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0;
  height: 30%;
  border-radius: var(--radius-poll-tube);
  pointer-events: none;
  z-index: 2;
  background: var(--poll-specular-peak);
  opacity: var(--poll-specular-layer-opacity);
}

/* Bottom gleam (first paint) + chamber gloss under the liquid fill */
.poll-cylinder-liquid-track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background-image: var(--poll-bottom-gleam), var(--poll-track-overlay-strong);
}

.poll-cylinder--result .poll-cylinder-liquid-track::after,
.poll-cylinder--vote .poll-cylinder-liquid-track::after {
  background-image: var(--poll-bottom-gleam), var(--poll-track-overlay-soft);
}

/* Native progress keeps the percentage semantic and CSP-safe without inline styles. */
.poll-cylinder-fill {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  border-radius: var(--radius-poll-tube);
  z-index: 1;
  overflow: hidden;
  background: transparent;
  transition: opacity 0.35s ease;
}

.poll-cylinder-fill::-webkit-progress-bar {
  background: transparent;
}

.poll-cylinder-fill::-webkit-progress-value,
.poll-cylinder-fill::-moz-progress-bar {
  border-radius: var(--radius-poll-tube);
  background-color: var(--poll-fill-solid);
  background-image: var(--poll-fill-gradient);
  box-shadow:
    inset 0 10px 15px -3px color-mix(in srgb, var(--bg-recessed) 30%, black 70%),
    inset 0 2px 0 color-mix(in srgb, var(--text-primary) 28%, transparent),
    inset 0 -3px 10px color-mix(in srgb, var(--bg-recessed) 32%, black 68%),
    var(--poll-fill-glow);
}

.post-poll--has-unique-leader .poll-cylinder--result:not(.poll-cylinder--leading) .poll-cylinder-fill {
  opacity: var(--poll-fill-trail-opacity);
  box-shadow:
    inset 0 10px 15px -3px color-mix(in srgb, var(--bg-recessed) 30%, black 70%),
    inset 0 2px 0 color-mix(in srgb, var(--text-primary) 18%, transparent),
    inset 0 -3px 10px color-mix(in srgb, var(--bg-recessed) 32%, black 68%),
    0 0 12px color-mix(in srgb, var(--accent-primary) 14%, transparent);
}

.post-poll--has-unique-leader .poll-cylinder--vote:not(.poll-cylinder--leading) .poll-cylinder-fill--preview {
  opacity: calc(0.42 + var(--poll-fill-trail-opacity) * 0.35);
}

.poll-cylinder-fill--preview {
  opacity: 0.62;
  box-shadow:
    inset 0 10px 15px -3px color-mix(in srgb, var(--bg-recessed) 28%, black 72%),
    inset 0 2px 0 color-mix(in srgb, var(--text-primary) 22%, transparent),
    inset 0 -2px 8px color-mix(in srgb, var(--bg-recessed) 28%, black 72%),
    0 0 14px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .poll-cylinder-fill {
    transition: none;
  }

  button.poll-cylinder--vote {
    transition: none;
  }
}

.poll-cylinder-fill--idle {
  display: none;
}

.poll-cylinder-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--poll-inner-min-h);
  padding: 0.1rem var(--space-3);
  pointer-events: none;
}

.poll-cylinder-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--text-primary);
  text-align: left;
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--bg-recessed) 90%, black 10%),
    0 0 1px color-mix(in srgb, var(--bg-recessed) 55%, black 45%);
}

.poll-cylinder-trailing {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.poll-cylinder-pct {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--bg-recessed) 60%, black 40%),
    0 0 1px color-mix(in srgb, var(--bg-recessed) 55%, black 45%);
}

.poll-cylinder--leading .poll-cylinder-pct {
  color: color-mix(in srgb, var(--text-primary) 88%, var(--accent-primary) 12%);
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--bg-recessed) 90%, black 10%),
    0 0 12px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.poll-cylinder-lead {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-primary) 82%, var(--text-secondary) 18%);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--bg-recessed) 85%, black 15%);
}

.poll-cylinder-your-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--bg-recessed) 70%, black 30%));
}

.poll-cylinder-your-vote-svg {
  display: block;
  width: var(--text-sm);
  height: var(--text-sm);
}

.poll-fieldset {
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
}

.poll-fieldset > legend.poll-fieldset-legend {
  padding: 0 var(--space-2);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.poll-enable-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.poll-options-panel.is-collapsed[hidden] {
  display: none;
}

.poll-options-panel:not([hidden]) {
  display: block;
  margin-top: var(--space-3);
}

/* Utility */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* Admin Dashboard Styles */
.admin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
  text-decoration: none;
  min-height: var(--touch-target-min);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.metric-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(0, 255, 102, 0.1);
}

.metric-card:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.metric-title {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.metric-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.metric-card--alert:hover {
  border-color: var(--accent-tertiary);
  box-shadow: 0 4px 12px rgba(0, 227, 253, 0.1);
}

.admin-config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 37.5rem) {
  .admin-config-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.config-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-hairline);
}

.config-label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.config-value {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  align-self: flex-start;
}

.config-value.tag {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
}

.tag-success {
  color: var(--bg-recessed);
  background-color: var(--accent-primary);
}

.tag-disabled {
  color: var(--text-muted);
  background-color: var(--bg-recessed);
  border: 1px solid var(--border-hairline);
}

.audit-log-item {
  margin-bottom: var(--space-2);
  transition: border-color 0.2s ease-in-out;
}

.audit-log-item[open] {
  border-color: var(--border-ghost);
}

.audit-log-item summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-2) 0;
  list-style: none; /* remove default arrow */
}

.audit-log-item summary::-webkit-details-marker {
  display: none; /* remove default arrow for Safari */
}

.audit-log-item summary:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.audit-log-time {
  min-width: 11rem;
}

.audit-log-event {
  min-width: 8rem;
  text-align: center;
}

.audit-log-outcome {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.outcome-ok {
  color: var(--bg-recessed);
  background-color: var(--accent-primary);
}

.outcome-deny {
  color: var(--bg-recessed);
  background-color: var(--signal-error);
}

.outcome-error {
  color: var(--bg-recessed);
  background-color: var(--signal-error);
}

.audit-log-actor {
  margin-left: auto;
}

.audit-log-toggle-icon {
  color: var(--text-muted);
  transition: transform 0.2s ease-in-out;
  margin-left: var(--space-2);
}

.audit-log-item[open] .audit-log-toggle-icon {
  transform: rotate(90deg);
}

.border-top-ghost {
  border-top: 1px solid var(--border-hairline);
}

.audit-extra-block {
  font-size: var(--text-xs);
  padding: var(--space-3);
  max-height: var(--admin-proof-max-height);
  overflow-y: auto;
}

/* Poll Segmentation Styling */
.poll-segmented-warning {
  padding: var(--space-3);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.poll-segmented-warning-title {
  color: var(--signal-error);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-1);
}

.poll-consent-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

.poll-consent-checkbox {
  cursor: pointer;
  width: 1.15rem;
  height: 1.15rem;
}

.poll-consent-checkbox:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.poll-segmentation-selector-row {
  margin-bottom: var(--space-3);
}

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

.poll-segment-select {
  width: auto !important;
  padding-inline: var(--space-2);
  height: 2.25rem;
  margin-bottom: 0 !important;
}

.poll-optional-sharing-panel {
  padding: var(--space-3);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.poll-optional-sharing-title {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.poll-share-tags-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.poll-share-tag-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.poll-share-tag-checkbox {
  cursor: pointer;
}

.poll-share-tag-checkbox:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.poll-segment-breakdown {
  list-style: none;
  padding: 0;
  padding-left: var(--space-4);
  margin: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.poll-segment-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.poll-segment-label-text {
  flex-shrink: 0;
  min-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poll-segment-bar-outer {
  flex-grow: 1;
  height: 6px;
  background-color: var(--bg-recessed);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
  position: relative;
}

.poll-segment-bar-inner {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.poll-segment-bar-inner::-webkit-progress-bar {
  background: transparent;
}

.poll-segment-bar-inner::-webkit-progress-value,
.poll-segment-bar-inner::-moz-progress-bar {
  background-color: var(--accent-secondary);
}

.poll-segment-value-text {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: right;
  min-width: 4.5rem;
}

/* Error Page & Alert Banners */
.error-card-container {
  max-width: none;
  margin: var(--space-8) auto;
  width: 100%;
  padding: 0;
}

.error-card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.error-card-header {
  margin-bottom: var(--space-6);
}

.error-status-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-danger);
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.error-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.error-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.error-btn {
  min-height: 44px;
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3.5) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-4);
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--text-danger);
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--text-success);
}

.alert-icon {
  font-size: var(--text-base);
  line-height: 1;
  flex-shrink: 0;
}

.alert-message {
  flex: 1;
  font-weight: var(--weight-medium);
}

/* ═══════════════════════════════════════════════════════════
   FORM PAGE: Composer & Editor UX Improvements
   ═══════════════════════════════════════════════════════════ */

/* ── Form page breadcrumb / context header ── */
.form-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-hairline);
}

.form-page-header-crumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.form-page-header-crumb:hover {
  color: var(--text-secondary);
}

.form-page-header-crumb:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.form-page-header-sep {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  user-select: none;
  aria-hidden: true;
}

.form-page-header-current {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

/* ── Label row with inline char counter ── */
.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-1);
}

.form-char-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: color 0.2s ease-in-out;
  white-space: nowrap;
  flex-shrink: 0;
}

.form-char-count--warn {
  color: color-mix(in srgb, var(--signal-error) 55%, var(--text-secondary));
}

.form-char-count--error {
  color: var(--signal-error);
  font-weight: var(--weight-medium);
}

/* ── New post: concise composition guidance ── */
.new-post-intro {
  margin-bottom: var(--space-6);
}

.new-post-intro h1 {
  margin-bottom: var(--space-2);
}

.new-post-intro p,
.form-field-hint {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-2);
}

.new-post-editor {
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-pct), var(--bg-base));
  backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
}

.new-post-form {
  display: grid;
  gap: var(--space-6);
}

.new-post-field {
  min-width: 0;
}

.new-post-field .form-field-hint {
  margin-bottom: var(--space-2);
}

.new-post-field .input {
  width: 100%;
}

.new-post-form .form-label-row {
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

/* ── Form section tonal grouping (No-Line Rule — uses background shift) ── */
.form-section {
  background-color: color-mix(in srgb, var(--bg-elevated) 60%, var(--bg-base));
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.form-section:last-child {
  margin-bottom: 0;
}

/* ── Poll composer ── */
.poll-composer {
  min-inline-size: 0;
}

.poll-composer-legend {
  padding: 0;
}

.poll-enable-label {
  align-items: center;
  min-height: var(--touch-target-min);
  margin-bottom: 0;
  padding: 0 var(--space-2);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.poll-enable-label input {
  block-size: var(--space-4);
  inline-size: var(--space-4);
  accent-color: var(--accent-primary);
}

.poll-enable-label:focus-within {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.poll-enable-optional {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.poll-composer > .form-field-hint {
  margin-bottom: var(--space-4);
}

.new-post-poll.form-section {
  margin-bottom: 0;
  background-color: color-mix(in srgb, var(--bg-elevated) 72%, var(--bg-base));
}

.new-post-poll:has(#poll-enabled:checked) {
  border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-ghost));
  background-color: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-elevated));
}

.poll-options-panel:not([hidden]) {
  margin-top: 0;
}

@media (max-width: 37.5rem) {
  .form-actions--spaced {
    align-items: stretch;
    flex-direction: column;
  }

  .form-actions--spaced .btn {
    justify-content: center;
    width: 100%;
  }

  .new-post-footer {
    align-items: stretch;
  }
}

/* ── Edit post: revision draft pill ── */
.edit-post-meta-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.edit-post-draft-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  color: var(--accent-tertiary);
  background-color: color-mix(in srgb, var(--accent-tertiary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-tertiary) 25%, transparent);
}

.edit-post-title-preview {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28rem;
}

/* ── Quote preview (new post with quote) ── */
.new-post-quote-preview {
  border-left: 2px solid color-mix(in srgb, var(--accent-tertiary) 50%, transparent);
  padding-left: var(--space-3);
}

.new-post-form .media-upload-section {
  margin-top: 0;
  margin-bottom: 0;
}

.new-post-media-btn {
  width: fit-content;
}

.new-post-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.new-post-footer .form-actions--spaced {
  gap: var(--space-2);
}

.new-post-footer .form-kbd-hint {
  order: 2;
  margin-top: 0;
  margin-bottom: 0;
}

.new-post-submit.btn {
  min-width: calc((var(--touch-target-min) * 2) + var(--space-4));
  border-color: color-mix(in srgb, var(--accent-primary) 64%, var(--text-primary) 16%);
  background-color: var(--accent-primary);
  background-image: none;
  color: var(--bg-base);
  font-family: var(--font-mono);
  letter-spacing: 0.035em;
  box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.new-post-submit.btn:hover {
  border-color: var(--accent-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 90%, var(--text-primary));
  box-shadow: 0 var(--space-2) var(--space-4) color-mix(in srgb, var(--accent-primary) 28%, transparent);
  color: var(--bg-base);
  filter: none;
  transform: translateY(-1px);
}

.new-post-submit.btn:active {
  background-color: var(--accent-secondary);
  transform: translateY(0);
}

.new-post-submit.btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.new-post-submit.btn:disabled {
  border-color: var(--border-ghost);
  background-color: var(--bg-floating);
  box-shadow: none;
  color: var(--text-muted);
}

.new-post-quote-preview a {
  color: var(--accent-tertiary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color 0.2s ease-in-out;
}

.new-post-quote-preview a:hover {
  color: var(--text-primary);
}

.new-post-quote-preview a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Comment composer card ── */
.composer-card {
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-pct), var(--bg-base));
  backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-glass-card)) saturate(var(--glass-saturate));
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-hairline);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.composer-card:focus-within {
  border-color: var(--border-ghost);
  box-shadow: 0 0 0 1px var(--border-hairline);
}

.composer-card-inner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.composer-avatar-mono {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
  letter-spacing: 0;
  user-select: none;
}

.composer-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* The fused textarea+submit pattern — keep existing .comment-compose-form rules intact */
.composer-card .comment-compose-form,
.composer-card .comment-compose-form .btn.btn-comment-submit {
  margin-bottom: 0;
}

/* ── Keyboard shortcut hint ── */
.form-kbd-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
  display: none; /* shown by JS when JS is available */
}

.forum-js .form-kbd-hint {
  display: block;
}

/* ── Submit button: inactive (no content) state ── */
.btn.btn-comment-submit.btn--inactive {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Post deletion: destructive zone ── */
.post-delete-zone {
  background-color: color-mix(in srgb, var(--signal-error) 6%, var(--bg-recessed));
  border: 1px solid color-mix(in srgb, var(--signal-error) 18%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.post-delete-zone-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--signal-error) 80%, var(--text-secondary));
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-delete-zone-icon {
  font-size: var(--text-base);
  line-height: 1;
  flex-shrink: 0;
}

.post-delete-zone-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Improved delete ack styling inside zone */
.post-delete-zone .post-delete-ack {
  max-width: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Delete button disabled state */
.btn.btn-danger:disabled,
.btn.btn-danger[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  filter: none;
  background-image: none;
  box-shadow: none;
}

/* ── Comment delete: inline reveal pattern ── */
.comment-delete-reveal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.comment-delete-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.forum-js .comment-delete-confirm {
  display: none;
}

.forum-js .comment-delete-confirm.is-visible {
  display: inline-flex;
}

.comment-delete-trigger {
  /* inherits .btn-vote styling */
  color: color-mix(in srgb, var(--signal-error) 65%, var(--text-muted));
  transition: color 0.2s ease-in-out;
}

.comment-delete-trigger:hover {
  color: var(--signal-error);
}

.comment-delete-trigger:focus-visible {
  outline: 2px solid var(--signal-error);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Reply form: entrance animation ── */
@keyframes replySlideIn {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reply-form:not(.is-hidden) {
  animation: replySlideIn 0.18s ease-out forwards;
}

/* ── Owner tools: horizontal divider before the delete zone ── */
.post-owner-tools-edit-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-ghost);
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.post-owner-tools-edit-link:hover {
  color: var(--text-primary);
  border-color: var(--border-ghost);
  background-color: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}

.post-owner-tools-edit-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Vertical stack layout for owner tools zone */
.post-owner-tools {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

/* CSP-safe template utility classes. */
.poll-segmented-tags-summary {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.poll-segmented-empty-copy,
.poll-segment-empty,
.poll-share-tags-current {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.poll-consent-copy {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.poll-segment-empty {
  padding-left: var(--space-4);
}

.poll-enable-label--passive {
  pointer-events: none;
}

.poll-enable-optional {
  margin-left: var(--space-1);
}

.poll-options-label-row {
  padding-top: var(--space-3);
}

.search-result-item {
  margin-bottom: var(--space-5);
}

.search-comment-context {
  margin-bottom: var(--space-1);
}

.search-comment-kind {
  background: transparent;
  padding-left: 0;
}

.search-snippet {
  margin-bottom: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-subtle);
  color: var(--text-secondary);
  font-style: italic;
}

.search-comment-link {
  display: inline-block;
}

.body--drawer-open {
  overflow: hidden;
}



/* Post-management form feedback. */
.new-post-quote-title,
.new-post-quote-copy,
.new-post-quote-actions,
.post-delete-zone-copy {
  margin: 0;
}

.new-post-quote-title {
  margin-bottom: var(--space-1);
}

.new-post-quote-copy,
.post-delete-zone-copy {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.new-post-quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.new-post-quote-actions a:last-child {
  color: var(--text-muted);
}

.post-context-action a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--accent-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
}

.post-context-action a:hover {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--accent-tertiary) 10%, transparent);
}

.post-context-action a:focus-visible,
.edit-post-title-preview:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.edit-post-title-preview {
  color: var(--text-secondary);
  text-decoration: none;
}

.edit-post-title-preview:hover {
  color: var(--accent-tertiary);
}

.post-delete-zone-copy {
  max-width: var(--max-width-page-narrow);
}

.form-is-submitting .btn,
.form-is-submitting .feed-composer-submit {
  cursor: progress;
}

.form-is-submitting .btn:not(:disabled),
.form-is-submitting .feed-composer-submit:not(:disabled) {
  pointer-events: none;
}

/* Standalone proof-of-work rejection response. */
.pow-error-page {
  margin: 0;
  background: var(--bg-base);
  color: var(--signal-error);
  font-family: var(--font-sans);
}

.pow-error-page__content {
  max-width: var(--max-width-page-narrow);
  margin: 0 auto;
  padding: var(--space-8);
  text-align: center;
}

.pow-error-page__home-link {
  color: var(--accent-primary);
}

/* Social timeline hierarchy: reusable identity, composition, and engagement molecules. */
.identity-monogram {
  width: var(--touch-target-min);
  min-width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: grid;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.2s ease-in-out;
}

.identity-monogram:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  transform: translateY(calc(-1 * var(--space-1)));
}

.identity-monogram:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.timeline-toolbar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.timeline-mode {
  padding-bottom: var(--space-1);
}

.timeline-context {
  margin-bottom: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-hairline);
}

.feed-composer {
  width: 100%;
  padding: var(--space-3);
  margin-bottom: 0;
  border-color: var(--border-hairline);
  background-color: var(--bg-base);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.feed-composer:hover {
  border-color: var(--border-ghost);
  background-color: var(--bg-base);
}

.feed-composer:focus-within {
  border-color: var(--border-focus);
}

.feed-composer .identity-monogram {
  width: var(--control-height-compact);
  min-width: var(--control-height-compact);
  height: var(--control-height-compact);
}

.feed-composer .post-card-social {
  gap: var(--space-2);
}

.feed-composer-form {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--bg-recessed);
}

.feed-composer-title,
.feed-composer-content {
  min-height: var(--touch-target-min);
  margin: 0;
  padding: var(--space-3);
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}

.feed-composer-title {
  border-bottom-color: var(--border-hairline);
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

.feed-composer-content {
  resize: none;
  min-height: calc(var(--space-8) + var(--space-6));
  color: var(--text-primary);
  line-height: var(--line-height-normal);
}

.feed-composer-title:focus-visible,
.feed-composer-content:focus-visible {
  border-color: var(--accent-primary);
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.feed-composer-controls,
.feed-composer-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feed-composer-controls {
  justify-content: flex-end;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-hairline);
  background-color: var(--bg-base);
}

.feed-composer-actions {
  margin-left: 0;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.feed-composer-utilities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.feed-composer-actions .btn {
  min-height: var(--touch-target-min);
}

.feed-media-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  color: var(--text-secondary);
  background-color: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  transition: all 0.2s ease-in-out;
}

.feed-media-btn--icon-only {
  justify-content: center;
  min-width: var(--touch-target-min);
  padding: 0;
}

.feed-media-icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}

.feed-media-btn:hover {
  color: var(--accent-tertiary);
  background-color: color-mix(in srgb, var(--accent-tertiary) 10%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent-tertiary) 55%, var(--border-ghost));
  transform: translateY(-1px);
}

.feed-media-btn:focus-within {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.feed-composer-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc((var(--touch-target-min) * 2) + var(--space-2));
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 64%, var(--text-primary) 16%);
  border-radius: var(--radius-sm);
  background-color: var(--accent-primary);
  color: var(--bg-base);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.035em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.feed-composer-submit:hover {
  border-color: var(--accent-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 90%, var(--text-primary));
  box-shadow: 0 var(--space-2) var(--space-4) color-mix(in srgb, var(--accent-primary) 28%, transparent);
  color: var(--bg-base);
  filter: none;
  transform: translateY(-1px);
}

.feed-composer-submit:active {
  background-color: var(--accent-secondary);
  transform: translateY(0);
}

.feed-composer-submit:disabled {
  border-color: var(--border-ghost);
  background-color: var(--bg-floating);
  box-shadow: none;
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
}

.feed-composer-actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.feed-composer-actions a:hover {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.feed-composer-actions a:focus-visible,
.feed-composer-forum .input:focus-visible,
.feed-composer-submit:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.feed .post-card {
  padding: var(--space-4);
  border-left-width: 1px;
}

.post-card-social,
.post-detail-author-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.post-card-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.post-card-main .post-meta-row {
  margin-bottom: var(--space-1);
}

.post-card-main .post-card-forum {
  margin-bottom: var(--space-1);
}

.post-card-main h2 {
  margin-bottom: var(--space-2);
}

.post-engagement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.post-engagement-vote {
  width: auto;
  flex-direction: row;
  gap: var(--space-1);
}

/* The compact feed rule gives the legacy vertical control a narrow width.
   Reassert the horizontal timeline control's intrinsic width so its vote
   buttons cannot spill into the reply and view links. */
.feed .post-card .post-engagement-vote {
  width: auto;
  min-width: calc((var(--touch-target-min) * 2) + var(--space-6) + (var(--space-1) * 2));
  flex: 0 0 auto;
}

.post-engagement-vote form {
  display: flex;
}

.post-engagement-vote .btn-vote {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.post-engagement-vote .post-card-score {
  min-width: var(--space-6);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.post-engagement-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.post-engagement-link:hover {
  color: var(--accent-tertiary);
  background-color: color-mix(in srgb, var(--accent-tertiary) 10%, transparent);
}

.post-engagement-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

@media (dynamic-range: high), (contrast-preference: high) {
  .feed-media-btn {
    background-color: color-mix(in srgb, var(--bg-floating) 72%, transparent);
    border-color: color-mix(in srgb, var(--text-primary) 22%, var(--border-ghost));
  }

  .feed-composer-submit {
    border-color: color-mix(in srgb, var(--accent-primary) 76%, var(--text-primary) 18%);
    box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--accent-primary) 26%, transparent);
  }

  .new-post-submit.btn {
    border-color: color-mix(in srgb, var(--accent-primary) 76%, var(--text-primary) 18%);
    box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--accent-primary) 26%, transparent);
  }
}

.post-engagement-view-detail {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
}

.post-engagement-more {
  position: relative;
}

.post-engagement-more summary {
  cursor: pointer;
  list-style: none;
}

.post-engagement-more summary::-webkit-details-marker {
  display: none;
}

.post-engagement-more[open] > summary {
  color: var(--accent-tertiary);
  background-color: color-mix(in srgb, var(--accent-tertiary) 10%, transparent);
}

.post-engagement-more-menu {
  display: none;
}

.post-engagement-more[open] .post-engagement-more-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-1));
  z-index: var(--z-dropdown);
  display: grid;
  min-width: max-content;
  padding: var(--space-1);
  background-color: var(--bg-floating);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  box-shadow: 0 var(--space-2) var(--space-4) color-mix(in srgb, var(--bg-recessed) 62%, transparent);
}

.post-engagement-more-menu a {
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.post-engagement-more-menu a:hover {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

.post-engagement-more-menu a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.post-engagement-more-menu .post-engagement-report:hover {
  color: var(--signal-error);
}

.post-engagement-more-menu .post-management {
  display: grid;
}

.post-engagement-more-menu .post-management > summary {
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--signal-error);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  list-style: none;
  transition: all 0.2s ease-in-out;
}

.post-engagement-more-menu .post-management > summary::-webkit-details-marker {
  display: none;
}

.post-engagement-more-menu .post-management > summary:hover,
.post-engagement-more-menu .post-management[open] > summary {
  background-color: color-mix(in srgb, var(--signal-error) 10%, transparent);
}

.post-engagement-more-menu .post-management > summary:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.post-engagement-more-menu .post-management[open] {
  padding-top: var(--space-2);
}

.post-engagement-more-menu .post-management > .post-delete-zone {
  width: min(var(--max-width-page-narrow), calc(100vw - var(--space-8)));
}

.post-detail-author-header {
  margin-bottom: var(--space-3);
}

.post-detail-author-header .post-meta-row {
  flex: 1;
}

.profile-social-header {
  align-items: flex-start;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
}

@media (max-width: 37.5rem) {
  .feed-header {
    align-items: stretch;
  }

  .feed-composer-controls,
  .feed-composer-actions {
    align-items: stretch;
    width: 100%;
  }

  .feed-composer-actions {
    margin-left: 0;
    justify-content: space-between;
  }

  .post-engagement-label {
    display: none;
  }
}

.hashtag-link {
  color: var(--accent-tertiary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.hashtag-link:hover {
  color: var(--accent-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  text-decoration: underline;
}

.hashtag-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Context-Aware Right Sidebar Styling */

.sidebar-widget {
  margin-bottom: var(--space-4);
}

.sidebar-widget-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.sidebar-thread-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-thread-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-thread-link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.15s ease-in-out;
}

.sidebar-thread-link:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

.sidebar-thread-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sidebar-thread-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.sidebar-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sidebar-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background-color: color-mix(in srgb, var(--bg-elevated) var(--glass-card-fill-pct), transparent);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.sidebar-tag-pill:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background-color: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.sidebar-tag-pill:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.sidebar-rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-rules-list li {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
  position: relative;
  padding-left: var(--space-3);
}

.sidebar-rules-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-tertiary);
}

.sidebar-subforum-desc {
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.sidebar-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background-color: var(--bg-recessed);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.sidebar-stat-num {
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
}

.sidebar-stat-label {
  color: var(--text-muted);
}

.sidebar-author-card {
  display: flex;
  flex-direction: column;
}

.sidebar-author-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-decoration: none;
}

.sidebar-author-name:hover {
  color: var(--accent-primary);
}

.sidebar-author-bio {
  margin-top: var(--space-1);
  line-height: 1.4;
}

.sidebar-author-stats {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-hairline);
}

.sidebar-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-stat-val {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.sidebar-stat-key {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.sidebar-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.sidebar-footer-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.sidebar-footer-link:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

.sidebar-footer-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sidebar-footer-sep {
  color: var(--text-muted);
  opacity: 0.6;
}

.sidebar-footer-copy {
  color: var(--text-muted);
}

/* ==========================================================================
   About / Landing Page Styles
   ========================================================================== */
.about-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-4) 0 var(--space-12) 0;
  max-width: 100%;
}

.about-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
}

.about-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--weight-extrabold);
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 0;
}

.about-lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 42rem;
  margin-bottom: var(--space-4);
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Value Props Grid */
.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-4);
}

.about-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.about-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-ghost));
}

.about-card-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.about-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 0;
}

.about-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Feed Teaser & Section Headers */
.about-section-header {
  margin-bottom: var(--space-6);
}

.about-section-title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.about-section-subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: 0;
}

.about-mock-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-mock-card {
  padding: var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mock-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
}

.mock-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mock-meta {
  color: var(--text-muted);
}

.mock-score {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
}

.mock-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 0;
}

.mock-card-body {
  margin-top: var(--space-1);
}

.mock-telemetry-pill {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-recessed);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.mock-poll-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-recessed);
  border-radius: var(--radius-sm);
}

.mock-poll-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.mock-poll-bar {
  height: 0.5rem;
  background: var(--bg-base);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.mock-poll-fill {
  height: 100%;
  background: var(--accent-primary);
  border-radius: var(--radius-pill);
}

.mock-poll-fill--34 {
  width: 34%;
}

.mock-poll-result {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-primary);
  font-weight: var(--weight-bold);
}

.mock-card-footer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-hairline);
}

/* Security Breakdown Grid */
.about-security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}

.about-security-card {
  padding: var(--space-5);
  background: var(--bg-recessed);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.about-security-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-ghost));
}

.about-security-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
  margin-bottom: var(--space-2);
}

.about-security-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0;
}

/* FAQ Accordion */
.about-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.about-faq-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease-in-out;
}

.about-faq-item[open] {
  border-color: var(--border-hairline);
}

.about-faq-question {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about-faq-question::-webkit-details-marker {
  display: none;
}

.about-faq-question::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--text-muted);
  transition: transform 0.2s ease-in-out;
}

.about-faq-item[open] .about-faq-question::after {
  content: "−";
  color: var(--accent-primary);
}

.about-faq-question:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}

.about-faq-answer {
  padding: 0 var(--space-5) var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.about-faq-answer p {
  margin-bottom: 0;
}

/* Bottom CTA Section */
.about-cta-section {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--border-glass-highlight);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.about-cta-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  margin-bottom: 0;
}

.about-cta-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.about-cta-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   POST MEDIA GRID  — Twitter-style adaptive image layout
   ═══════════════════════════════════════════════════════════ */

.media-grid {
  display: grid;
  gap: 2px;
  margin-top: var(--space-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Constrain height in feed cards; full height in detail view */
  max-height: 512px;
  width: 100%;
}

/* ── 1 item: full-width single image ── */
.media-grid-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* ── 2 items: side-by-side 50/50 ── */
.media-grid-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

/* ── 3 items: one tall left, two stacked right ── */
.media-grid-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.media-grid-3 .media-item-0 {
  grid-row: 1 / 3;
}

/* ── 4 items: 2×2 grid ── */
.media-grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* ── Grid item base ── */
.media-grid-item {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-recessed);
  min-height: 0;
}

/* ── Media element (image or video) fills its cell ── */
.media-element {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  min-height: 120px;
  max-height: 512px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.media-element:hover {
  transform: scale(1.02);
  filter: brightness(1.08);
}

.media-video {
  cursor: default;
}

.media-video:hover {
  transform: none;
  filter: none;
}

/* ── GIF wrapper and badge ── */
.media-gif-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.media-gif-wrapper .media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-gif-badge {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.65);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

/* ── Moderated media placeholder ── */
.media-moderated-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: color-mix(in srgb, var(--bg-recessed) 80%, var(--signal-warning) 20%);
  border: 1px dashed color-mix(in srgb, var(--signal-warning) 50%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}

.moderated-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.moderated-text {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX — full-screen image overlay
   ═══════════════════════════════════════════════════════════ */

#lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: lightbox-fade-in 0.15s ease-out;
}

#lightbox-modal.is-open {
  display: flex;
}

@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-content {
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-poll-tube);
  cursor: pointer;
  transition: background 0.15s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.lightbox-close:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.lightbox-carousel-control,
.lightbox-status {
  position: absolute;
  z-index: var(--z-dropdown);
}

.lightbox-carousel-control[hidden],
.lightbox-status[hidden] {
  display: none;
}

.lightbox-carousel-control {
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-recessed) 72%, transparent);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-poll-tube);
  cursor: pointer;
  transform: translateY(-50%);
}

.lightbox-carousel-control:hover {
  background: color-mix(in srgb, var(--bg-floating) 82%, transparent);
}

.lightbox-carousel-control:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.lightbox-prev {
  left: var(--space-4);
}

.lightbox-next {
  right: var(--space-4);
}

.lightbox-status {
  top: var(--space-4);
  left: 50%;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-recessed) 72%, transparent);
  border-radius: var(--radius-sm);
  transform: translateX(-50%);
}

.lightbox-caption {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  max-width: 80vw;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.55);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  text-align: center;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   UPLOAD PREVIEW — inline thumbnail cards before submit
   ═══════════════════════════════════════════════════════════ */

.media-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.media-preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 120px;
  flex-shrink: 0;
}

.media-preview-thumb {
  position: relative;
  width: 120px;
  height: 90px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-recessed);
  border: 1px solid var(--border-hairline);
}

.media-preview-thumb img,
.media-preview-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.media-preview-remove {
  position: absolute;
  z-index: 99;
  pointer-events: auto;
  top: var(--space-1);
  right: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.15s ease;
  line-height: 1;
}

.media-preview-remove:hover {
  background: var(--signal-error);
}

.media-preview-remove:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.media-preview-alt-input {
  width: 100%;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* ── Media upload box in full editor ── */
.media-upload-section {
  margin-top: var(--space-4);
}

.media-upload-box {
  padding: var(--space-4);
  border: 1px dashed var(--border-ghost);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-recessed) 60%, transparent);
  transition: border-color 0.2s ease;
}

.media-upload-box:has([data-media-input]:focus) {
  border-color: var(--accent-primary);
}

  pointer-events: auto;
  top: var(--space-1);
  right: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.15s ease;
  line-height: 1;
}

.media-preview-remove:hover {
  background: var(--signal-error);
}

.media-preview-remove:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.media-preview-alt-input {
  width: 100%;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* ── Media upload box in full editor ── */
.media-upload-section {
  margin-top: var(--space-4);
}

.media-upload-box {
  padding: var(--space-4);
  border: 1px dashed var(--border-ghost);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-recessed) 60%, transparent);
  transition: border-color 0.2s ease;
}

.media-upload-box:has([data-media-input]:focus) {
  border-color: var(--accent-primary);
}

.media-select-btn {
  cursor: pointer;
}

/* ── At-capacity: dim the attach button once 4 files are selected ── */
.media-select-btn.is-disabled,
.feed-media-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   TACTILE MICRO-INTERACTIONS & PERSONAL TOUCH
   ═══════════════════════════════════════════════════════════ */

/* Spring bounce animation when casting a vote or interacting with pills */
.vote-btn-active-bounce,
.vote-action-btn:active,
.poll-option-btn:active {
  animation: springBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes springBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Liquid progress tube smooth transition */
.poll-tube-progress {
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* User profile status message chip */
.profile-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-elevated) 80%, var(--accent-primary) 10%);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-poll-tube);
  line-height: 1.4;
  word-break: break-word;
}

.profile-status-icon {
  color: var(--accent-primary);
  flex-shrink: 0;
}

.sidebar-craft-note {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: center;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .vote-btn-active-bounce,
  .vote-action-btn:active,
  .poll-option-btn:active {
    animation: none !important;
  }
}

.comment-accepted-highlight {
  border-left: 3px solid var(--accent-primary) !important;
  background-color: rgba(0, 255, 102, 0.03);
}

.btn-accept-solution {
  color: var(--text-secondary);
  border-color: var(--border-ghost);
}

.btn-accept-solution:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.btn-unaccept-solution {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: rgba(0, 255, 102, 0.1);
}

/* Post Type Badges (Show Bit & Ask Bit) */
.post-type-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
  display: inline-block;
  vertical-align: middle;
}

.post-type-badge--show {
  color: var(--accent-primary);
  background: rgba(0, 255, 102, 0.1);
  border: 1px solid rgba(0, 255, 102, 0.3);
}

.post-type-badge--ask {
  color: var(--accent-tertiary);
  background: rgba(0, 227, 253, 0.1);
  border: 1px solid rgba(0, 227, 253, 0.3);
}

.composer-type-toggles {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.btn-toggle-type {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  padding: var(--space-2) var(--space-3);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-toggle-type:hover {
  color: var(--text-primary);
  background: var(--bg-floating);
}

.btn-toggle-type.active {
  color: var(--accent-primary);
  background: rgba(0, 255, 102, 0.1);
  border-color: rgba(0, 255, 102, 0.3);
}

.btn-toggle-type:focus-visible {
  outline: 2px solid var(--accent-tertiary);
  outline-offset: 2px;
}


/* ==========================================================================
   Compensation Benchmarks & Company Reviews (Glassmorphic Styling)
   ========================================================================== */

.benchmarks-container, .companies-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.comp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.averages-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.percentiles-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.submissions-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 9999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-ghost);
    white-space: nowrap;
}

.glass-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-ghost);
    border-radius: 8px;
    padding: var(--space-4);
    backdrop-filter: blur(12px);
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.stat-highlight {
    color: var(--accent-primary);
}

.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent);
  margin: var(--space-4) 0;
}

.benchmarks-toolbar-wrapper {
  width: 100%;
}

.filter-bar-capsule {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 4px 6px 4px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-radius: 9999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-bar-capsule:focus-within {
  border-color: rgba(0, 227, 253, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 12px rgba(0, 227, 253, 0.15);
}

.filter-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.search-icon-prefix {
  font-size: 11px;
  opacity: 0.6;
  user-select: none;
}

.filter-input-search {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: var(--text-xs);
  color: var(--text-primary);
  padding: 4px 0;
}

.filter-input-search::placeholder {
  color: var(--text-muted);
}

.filter-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.filter-select-wrap {
  flex: 0 0 auto;
}

.filter-select-pill {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 18px 4px 4px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 2px center !important;
}

.filter-select-pill option {
  background: #111216;
  color: #fff;
}

.filter-actions-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.filter-submit-btn {
  background: var(--accent-tertiary);
  color: #000;
  font-weight: 700;
  font-size: 11px;
  font-family: var(--font-mono);
  border: none;
  border-radius: 9999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(0, 227, 253, 0.25);
}

.filter-submit-btn:hover {
  background: #33efff;
  transform: scale(1.02);
  box-shadow: 0 0 14px rgba(0, 227, 253, 0.4);
}

.filter-clear-btn {
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 4px 8px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.filter-clear-btn:hover {
  color: #ff5555;
  background: rgba(255, 68, 68, 0.12);
}

.amber-star-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 10px;
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.3);
  border-radius: 9999px;
  color: #ffaa00;
}

.red-star-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 10px;
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.3);
  border-radius: 9999px;
  color: #ff5555;
}

.company-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.rank-section-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.green-rank-title {
  color: var(--accent-primary);
}

.red-rank-title {
  color: #ff5555;
}

.company-rank-card {
  background: rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-border-green {
  border-top: 2px solid var(--accent-primary);
}

.card-border-red {
  border-top: 2px solid #ff5555;
}

.company-rank-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.review-card {
  background: rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.review-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.filter-form-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.filter-group--search {
  flex: 1 1 auto;
  min-width: 0;
}

.filter-group--select {
  flex: 0 1 160px;
  min-width: 0;
}

.filter-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.filter-form .form-input,
.filter-form .form-select {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-form .form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.filter-form .form-input:focus-visible,
.filter-form .form-select:focus-visible {
  border-color: var(--accent-tertiary);
  box-shadow: 0 0 10px rgba(0, 227, 253, 0.2);
  outline: none;
}

.btn-filter-apply {
  background: rgba(0, 227, 253, 0.12);
  border: 1px solid rgba(0, 227, 253, 0.4);
  color: var(--accent-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(0, 227, 253, 0.1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-filter-apply:hover {
  background: rgba(0, 227, 253, 0.25);
  border-color: var(--accent-tertiary);
  box-shadow: 0 0 16px rgba(0, 227, 253, 0.25);
  transform: translateY(-1px);
}

.btn-filter-clear {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: 9999px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-filter-clear:hover {
  color: #ff5555;
  border-color: rgba(255, 68, 68, 0.3);
  background: rgba(255, 68, 68, 0.08);
}

.benchmarks-toolbar, .companies-toolbar {
    padding: var(--space-3) var(--space-4);
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.filter-group {
    flex: 1;
    min-width: 180px;
}

.filter-group.flex-grow {
    flex-grow: 2;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.benchmarks-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--text-sm);
}

.benchmarks-table th, .benchmarks-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
}

.benchmarks-table th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
}

.benchmarks-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.total-comp-cell {
    color: var(--accent-primary);
}

.badge-gold {
    background: rgba(0, 227, 253, 0.15);
    color: var(--accent-tertiary);
    border: 1px solid rgba(0, 227, 253, 0.4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-verified {
    background: rgba(0, 255, 102, 0.12);
    color: var(--accent-primary);
    border: 1px solid rgba(0, 255, 102, 0.3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: 4px;
}

.company-summaries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.company-summary-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.company-name-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.company-name-title a,
.review-company-name a,
.review-company-name {
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.company-name-title a:hover,
.review-company-name a:hover {
    color: var(--accent-primary) !important;
    text-decoration: underline;
}

.star-rating {
    color: var(--accent-primary);
    font-weight: 700;
}

.rating-stars-badge {
    color: var(--accent-tertiary);
    font-weight: 700;
    font-family: var(--font-mono);
}

.review-section p {
    color: var(--text-secondary);
    line-height: 1.5;
}

.th-num, .comp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.badge-pros {
    background: rgba(0, 255, 102, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(0, 255, 102, 0.3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-cons {
    background: rgba(255, 68, 68, 0.1);
    color: #ff5555;
    border: 1px solid rgba(255, 68, 68, 0.3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: 4px;
}

.stat-card--primary {
  border-top: 2px solid var(--accent-primary);
}

.stat-card--tertiary {
  border-top: 2px solid var(--accent-tertiary);
}

.stat-tertiary-highlight {
  color: var(--accent-tertiary);
}

.location-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.location-tag--remote {
  background: rgba(0, 255, 102, 0.1);
  color: var(--accent-primary);
  border: 1px solid rgba(0, 255, 102, 0.3);
}

.location-tag--hybrid {
  background: rgba(0, 227, 253, 0.1);
  color: var(--accent-tertiary);
  border: 1px solid rgba(0, 227, 253, 0.3);
}

.location-tag--onsite {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  border: 1px solid var(--border-hairline);
}

.comp-progress-track {
  width: 100%;
  max-width: 90px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 4px;
  margin-left: auto;
  overflow: hidden;
}

.comp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
  border-radius: 2px;
}

.proof-upload-dropzone {
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--bg-elevated) 40%, transparent);
  border: 1px dashed var(--border-ghost);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease-in-out;
}

.proof-upload-dropzone:focus-within,
.proof-upload-dropzone:hover {
  border-color: var(--accent-tertiary);
}

.total-comp-pill {
  display: inline-block;
  font-size: var(--text-base);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.35);
  border-radius: 9999px;
  color: var(--accent-primary);
  box-shadow: 0 0 14px rgba(0, 255, 102, 0.15);
}

.badge-gold-chip {
  background: rgba(0, 227, 253, 0.12);
  color: var(--accent-tertiary);
  border: 1px solid rgba(0, 227, 253, 0.35);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 9999px;
}

.benchmark-entries-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.benchmark-entry-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.benchmark-entry-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.entry-meta-col {
  flex: 1 1 30%;
}

.entry-breakdown-col {
  flex: 1 1 40%;
}

.entry-total-col {
  flex: 0 0 auto;
  text-align: right;
}

.tags-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.badge-exp-pill {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
}

.comp-chip-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.comp-chip {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
}

.submit-benchmark-disclosure {
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.submit-benchmark-disclosure:hover {
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 20px rgba(6, 182, 212, 0.08);
}

.submit-benchmark-disclosure[open] {
  border-color: var(--accent-primary);
  background: var(--bg-elevated);
}

.submit-benchmark-trigger {
  padding: var(--space-4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  background: transparent;
  transition: background-color 0.2s ease-in-out;
}

.submit-benchmark-trigger::-webkit-details-marker {
  display: none;
}

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

.trigger-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.15);
}

.badge-privacy-chip {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-family: var(--font-mono);
}

.cta-trigger-btn {
  background: linear-gradient(135deg, var(--accent-primary) 0%, #0891b2 100%);
  color: #000;
  font-weight: 700;
  font-size: var(--text-xs);
  padding: 8px 18px;
  border-radius: 9999px;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.submit-benchmark-trigger:hover .cta-trigger-btn {
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);
}

.submit-benchmark-body {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.4);
}

.comp-submit-form .form-group {
  display: flex;
  flex-direction: column;
}

.comp-submit-form .form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.comp-submit-form .form-input,
.comp-submit-form .form-select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  transition: all 0.2s ease-in-out;
}

.comp-submit-form .form-input:focus,
.comp-submit-form .form-select:focus {
  border-color: var(--accent-primary);
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
  outline: none;
}

.comp-submit-form select.form-select option {
  background: #0f172a;
  color: #f8fafc;
}

.comp-submit-form .checkbox-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.comp-submit-form .checkbox-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.comp-submit-form .proof-upload-dropzone {
  background: rgba(6, 182, 212, 0.03);
  border: 1px dashed rgba(6, 182, 212, 0.3);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comp-submit-form .form-file-input {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.comp-submit-form .form-file-input::file-selector-button {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-primary);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 12px;
  transition: all 0.2s ease;
}

.comp-submit-form .form-file-input::file-selector-button:hover {
  background: rgba(6, 182, 212, 0.25);
  border-color: var(--accent-primary);
}

.comp-submit-btn {
  background: linear-gradient(135deg, var(--accent-primary) 0%, #0891b2 100%);
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.35);
  transition: all 0.2s ease-in-out;
}

.comp-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.6);
}

.filter-form input:focus-visible,
.filter-form select:focus-visible,
.comp-submit-form input:focus-visible,
.comp-submit-form select:focus-visible,
.review-submit-form input:focus-visible,
.review-submit-form select:focus-visible,
.review-submit-form textarea:focus-visible {
    outline: 2px solid var(--accent-tertiary);
    outline-offset: 2px;
}

/* Auth Tabs for Magic Link Sign-In */
.auth-tabs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-ghost);
  padding-bottom: var(--space-2);
}

.auth-tab-btn {
  flex: 1;
  min-height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.auth-tab-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-floating);
}

.auth-tab-btn.active {
  color: var(--text-primary);
  background-color: var(--bg-floating);
  border-color: var(--border-ghost);
  font-weight: var(--weight-bold);
}

.auth-tab-btn:focus-visible {
  outline: 2px solid var(--accent-tertiary);
  outline-offset: 2px;
}

.auth-tab-panel.hidden {
  display: none;
}