/* Community-focus polish — public community pages only (.community-* / .community-page).
   Tokens: oklch/theme variables from headless.css. No admin/KB/PM selectors. */

/* ---- Motion: content enter 180ms; header stays put ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  [data-slot="site-header"] {
    view-transition-name: community-site-header;
  }

  .community-page {
    animation: community-enter 180ms ease;
  }
}

@keyframes community-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .community-page,
  .community-page *,
  .community-focus-nav,
  .community-focus-nav *,
  .community-board-card,
  .community-board-card *,
  .topic-post--highlighted,
  .community-reply-highlight,
  .community-reply-kicker {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .site-content:has(.community-page) {
    animation: none !important;
  }
}

.site-content:has(.community-page) {
  animation: none;
}

/* ---- Page rhythm ---- */
.community-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
  /* Nav 4-col follows this column, not the viewport (reading pages are ~48rem). */
  container-type: inline-size;
  container-name: community-page;
}

@media (min-width: 640px) {
  .community-page {
    gap: 1.75rem; /* 28px */
  }
}

.community-hero {
  min-width: 0;
}

.community-hero h1 {
  margin: 0;
  font-size: 1.5625rem; /* 25px */
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.community-hero p,
.community-hero-lead {
  margin: 0.5rem 0 0; /* 8px */
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (min-width: 768px) {
  .community-hero h1 {
    font-size: 2rem; /* 32px */
    line-height: 1.25;
  }

  .community-hero p,
  .community-hero-lead {
    font-size: 0.9375rem;
    line-height: 1.75;
  }
}

.community-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.community-section-head h2 {
  margin: 0;
  font-size: 1.25rem; /* 20px */
  line-height: 1.35;
  font-weight: 650;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .community-section-head h2 {
    font-size: 1.375rem; /* 22px */
    font-weight: 700;
  }
}

.community-section-kicker {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* ---- Four-task nav ---- */
.community-focus-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem; /* 10px */
  margin: 0;
}

@container community-page (min-width: 56.25rem) {
  .community-focus-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem; /* 12px */
  }
}

.community-task {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 4.5rem; /* 72px */
  padding: 0.75rem 1rem;
  border-radius: 1rem; /* 16px cards */
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
}

@container community-page (min-width: 56.25rem) {
  .community-task {
    min-height: 5.5rem; /* 88px */
    padding: 1rem 1.25rem;
  }
}

.community-task-icon {
  display: flex;
  height: 2.25rem; /* 36px */
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem; /* 10px */
  background: color-mix(in srgb, var(--brand-gold) 14%, transparent);
  color: var(--brand-gold-strong, var(--primary));
}

.community-task-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.125rem;
}

.community-task-title {
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--foreground);
}

.community-task-desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.community-task--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 16%, transparent);
}

.community-task--primary .community-task-title {
  color: var(--primary-foreground);
}

.community-task--primary .community-task-desc {
  color: color-mix(in srgb, var(--primary-foreground) 78%, transparent);
}

.community-task--primary .community-task-icon {
  background: color-mix(in srgb, var(--primary-foreground) 16%, transparent);
  color: var(--primary-foreground);
}

.community-task--secondary.is-current {
  box-shadow: inset 0 0 0 2px var(--brand-gold-strong, var(--ring));
}

.community-task--secondary.is-current .community-task-title {
  box-shadow: inset 0 -2px 0 var(--brand-gold, var(--primary));
}

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

/* Board / inbox: compact 4-up rail — not 2×2 exhibition cards wrapping a dialog. */
.community-focus-nav--compact,
.board-page .community-focus-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem; /* 8px */
}

.community-focus-nav--compact .community-task,
.board-page .community-task {
  min-height: 2.75rem; /* 44px */
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  border-radius: 0.75rem; /* rounded-xl */
}

.community-focus-nav--compact .community-task-icon,
.board-page .community-task-icon {
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 0.5rem; /* rounded-lg */
}

.community-focus-nav--compact .community-task-icon svg,
.board-page .community-task-icon svg {
  height: 1rem;
  width: 1rem;
}

.community-focus-nav--compact .community-task-title,
.board-page .community-task-title {
  font-size: 0.875rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-focus-nav--compact .community-task-desc,
.board-page .community-task-desc {
  display: none;
}

@media (max-width: 639px) {
  .community-focus-nav--compact .community-task,
  .board-page .community-task {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    min-height: 3.5rem;
    text-align: center;
  }
}

.board-page.community-page {
  gap: 1rem;
}

@media (min-width: 640px) {
  .board-page.community-page {
    gap: 1.25rem;
  }
}

/* Inbox / empty board: one full-width panel, not two floating cards. */
.board-page .brand-empty,
.board-page .board-empty {
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: stretch;
  box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
  .community-task:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--border));
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--foreground) 16%, transparent);
    transform: translateY(-2px);
  }

  .community-task:hover .community-task-title {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .community-task--primary:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }

  .community-task:active {
    transform: translateY(0);
  }

  .community-focus-nav--compact .community-task:hover,
  .board-page .community-task:hover {
    transform: none;
  }
}

/* ---- Home feed hierarchy ---- */
.community-page .home-waterfall-chrome {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Beat home-waterfall.css `.home-waterfall-chrome h1` (same 0,1,1; later extra_head). */
.community-page .community-hero.home-waterfall-chrome h1 {
  font-size: 1.5625rem; /* 25px */
  line-height: 1.3;
  font-weight: 700;
}

.community-page .community-hero.home-waterfall-chrome .community-hero-lead,
.community-page .community-hero.home-waterfall-chrome .home-waterfall-lead {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .community-page .community-hero.home-waterfall-chrome h1 {
    font-size: 2rem; /* 32px */
    line-height: 1.25;
  }

  .community-page .community-hero.home-waterfall-chrome .community-hero-lead,
  .community-page .community-hero.home-waterfall-chrome .home-waterfall-lead {
    font-size: 0.9375rem;
    line-height: 1.75;
  }
}

.community-page .home-official-rail {
  margin: 0;
  padding: 0.75rem 0 0;
  border-bottom: none;
}

.community-page .home-official-rail__title {
  font-size: 0.875rem;
  font-weight: 650;
}

.community-page .home-official-rail__track {
  gap: 0.5rem;
}

.community-page .home-official-card.home-waterfall-card .hw-cover,
.community-page .home-official-card .hw-cover-inner {
  max-height: 7.5rem;
}

.community-page .hw-title,
.community-page .topic-slip-title,
.community-page .board-topic-title,
.community-topic-title {
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem; /* 17px */
  font-weight: 650;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .community-page .hw-title,
  .community-page .topic-slip-title,
  .community-page .board-topic-title,
  .community-topic-title {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
  }
}

.community-page .home-waterfall-card .hw-title,
.community-page .home-waterfall-card .topic-slip-title {
  -webkit-line-clamp: 3;
}

.community-page .home-waterfall-card:not(.home-official-card) .hw-excerpt-pc,
.community-page .home-waterfall-card:not(.home-official-card) .topic-slip-excerpt,
.community-page .home-waterfall-card:not(.home-official-card):not([data-has-cover="1"]) .hw-excerpt-pc,
.community-page .home-waterfall-card:not(.home-official-card):not([data-has-cover="1"]) .topic-slip-excerpt {
  display: -webkit-box;
  font-size: 0.875rem;
  line-height: 1.7;
  -webkit-line-clamp: 2;
  color: var(--muted-foreground);
}

.community-page .home-waterfall-card .hw-cover-inner {
  max-height: 14rem;
}

.community-page .home-waterfall-card .hw-body {
  padding: 1rem 1.125rem 1.125rem;
}

.community-page .home-waterfall-tools a {
  border-radius: 0.75rem;
}

.community-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.community-sort a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.9rem;
  border-radius: 0.75rem;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.community-sort a:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--muted) 45%, transparent);
}

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

.community-sort a.is-active {
  color: var(--foreground);
  font-weight: 600;
  background: color-mix(in srgb, var(--brand-gold-soft) 42%, var(--card));
  border-color: color-mix(in srgb, var(--brand-gold) 28%, var(--border));
}

.community-sort a.community-sort--hot {
  color: var(--muted-foreground);
  background: transparent;
  border-color: var(--border);
  font-weight: 500;
}

.community-sort a.community-sort--hot.is-active {
  color: var(--foreground);
  background: color-mix(in srgb, var(--muted) 55%, var(--card));
  border-color: var(--border);
}

@media (hover: hover) and (pointer: fine) {
  .community-page .home-waterfall-card:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 28%, var(--border));
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--foreground) 14%, transparent);
  }
}

/* ---- Forums / board cards ---- */
.community-page .forums-dir-stack--directory {
  gap: 1.25rem;
}

.community-forums-filter {
  width: 100%;
}

.community-forums-filter input {
  min-height: 2.75rem; /* 44px tap */
}

@media (min-width: 768px) {
  .community-forums-filter {
    max-width: 26.25rem; /* 420px */
  }
}

.community-forums-filter input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.community-filter-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.community-filter-empty[hidden] {
  display: none !important;
}

.community-filter-clear {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

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

.community-forum-tray.forum-slip-tray {
  overflow: visible;
  padding: 0.25rem 0.75rem 0.75rem;
  border-radius: 1rem;
  background: transparent;
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: none;
}

.community-forum-tray .forum-slip-tray-head {
  padding: 0.75rem 0.25rem;
  min-height: 2.75rem;
}

.community-forum-tray .forum-slip-tray-title {
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.35;
}

.community-forum-tray .forum-slip-tray-desc {
  -webkit-line-clamp: 2;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.community-board-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0.875rem; /* 14px */
  padding: 0 0 0.5rem !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (min-width: 768px) {
  .community-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

.community-board-card.board-slip {
  --board-accent: var(--forum-accent, var(--brand-gold));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 1rem; /* 16px mobile */
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent);
  opacity: 1;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

@media (min-width: 768px) {
  .community-board-card.board-slip {
    padding: 1.25rem; /* 20px */
  }
}

.community-board-card.board-slip--quiet,
.community-board-card.board-slip--live {
  opacity: 1;
  background: var(--card);
}

.community-board-card.board-slip:hover {
  border: 1px solid color-mix(in srgb, var(--brand-gold) 36%, var(--border));
  background: var(--card);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--foreground) 14%, transparent);
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .community-board-card.board-slip:hover {
    transform: translateY(-2px);
  }

  .community-board-card.board-slip:active {
    transform: translateY(0);
  }
}

.community-board-card .community-board-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.community-board-card .community-board-icon {
  display: flex;
  height: 2.5rem; /* 40px */
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--board-accent, var(--brand-gold)) 14%, transparent);
  color: var(--board-accent, var(--brand-gold-strong));
}

.community-board-card .community-board-title-link {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.75rem; /* 44px tap — same chip as board siblings */
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
  border-radius: 0.75rem;
}

.community-board-card .community-board-title {
  margin: 0;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .community-board-card .community-board-title {
    font-size: 1.0625rem;
  }
}

.community-board-card .community-board-count {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.75rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.community-board-card .community-board-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.community-board-card .community-board-topics {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid var(--border);
}

.community-board-card .community-board-topic {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem; /* 44px tap */
  min-width: 0;
  padding: 0.5rem 0.25rem;
  margin: 0 -0.25rem;
  border-radius: 0.75rem;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--foreground);
  text-decoration: none;
}

.community-board-card .community-board-topic-title {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.community-board-card .community-board-topic:hover .community-board-topic-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.community-board-card .community-board-topic:focus-visible,
.community-board-card .community-board-title-link:focus-visible,
.community-board-card .community-board-enter:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.community-board-card .community-board-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.community-board-card .community-board-enter {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--foreground);
  text-decoration: none;
  border-radius: 0.75rem;
}

.community-board-card .community-board-enter:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.community-board-card .community-board-empty,
.community-board-card .community-board-activity {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* ---- Board topic rows ---- */
.community-topic-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.community-topic-list.board-topic-list {
  gap: 0.75rem;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.community-topic-row.board-topic--strip {
  border-bottom: none;
  background: var(--card);
}

.community-topic-row.board-topic--strip:hover {
  background: var(--card);
}

.community-topic-row.board-topic--strip .board-topic-body {
  padding: 0;
}

.community-topic-row.board-topic--pinned {
  box-shadow: inset 3px 0 0 var(--brand-gold, var(--primary));
}

.community-topic-row {
  position: relative;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

@media (min-width: 768px) {
  .community-topic-row {
    padding: 1.25rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .community-topic-row:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 32%, var(--border));
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--foreground) 14%, transparent);
    transform: translateY(-2px);
  }

  .community-topic-row:active {
    transform: translateY(0);
  }
}

.community-topic-row:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.community-topic-row .community-topic-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.community-topic-excerpt {
  margin: 0.375rem 0 0; /* 6px */
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.community-topic-meta {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.community-board-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.community-board-heading-icon {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--brand-gold) 14%, transparent);
  color: var(--brand-gold-strong, var(--primary));
}

/* ---- Subscribe + subscriptions list ---- */
.community-subscribe {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.community-subscribe-btn {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.community-subscribe-btn.is-on {
  border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-gold-soft) 50%, var(--card));
}

.community-subscribe-btn:hover {
  border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--border));
  background: color-mix(in srgb, var(--muted) 45%, var(--card));
}

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


.community-sub-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-sub-item {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent);
}

@media (min-width: 768px) {
  .community-sub-item {
    padding: 1.25rem;
  }
}

.community-sub-item a {
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.5;
  color: var(--foreground);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.community-sub-item a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.community-sub-item a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.community-question-hint {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-gold-soft) 35%, var(--card));
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--foreground);
}

.community-question-hint[hidden] {
  display: none !important;
}

html.dark .community-task:not(.community-task--primary),
[data-theme="dark"] .community-task:not(.community-task--primary),
html.dark .community-board-card.board-slip,
[data-theme="dark"] .community-board-card.board-slip,
html.dark .community-topic-row,
[data-theme="dark"] .community-topic-row,
html.dark .community-sub-item,
[data-theme="dark"] .community-sub-item {
  background: var(--card);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}

html.dark .community-task--primary,
[data-theme="dark"] .community-task--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

/* ---- 路爷推荐 replies (topic.html) — gold inset + compact kicker; no scores ---- */
.topic-post--reply.topic-post--highlighted,
.community-reply-highlight {
  border-color: color-mix(in srgb, var(--brand-gold) 36%, var(--border));
  background: color-mix(in srgb, var(--brand-gold-soft) 35%, var(--card));
  box-shadow:
    inset 0.1875rem 0 0 var(--brand-gold, var(--primary)),
    0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.community-reply-kicker {
  font-size: 0.75rem;
  line-height: 1.25;
  padding: 0.125rem 0.5rem;
  color: var(--brand-gold-strong, var(--primary));
  background: color-mix(in srgb, var(--brand-gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 28%, var(--border));
}

@media (hover: hover) and (pointer: fine) {
  .topic-post--reply.topic-post--highlighted:hover,
  .community-reply-highlight:hover {
    border-color: color-mix(in srgb, var(--brand-gold) 48%, var(--border));
    box-shadow:
      inset 0.1875rem 0 0 var(--brand-gold, var(--primary)),
      0 4px 12px -4px color-mix(in srgb, var(--foreground) 14%, transparent);
  }
}

.topic-post--reply.topic-post--highlighted:focus-within,
.community-reply-highlight:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

html.dark .topic-post--reply.topic-post--highlighted,
[data-theme="dark"] .topic-post--reply.topic-post--highlighted,
html.dark .community-reply-highlight,
[data-theme="dark"] .community-reply-highlight {
  background: color-mix(in srgb, var(--brand-gold-soft) 28%, var(--card));
  box-shadow:
    inset 0.1875rem 0 0 var(--brand-gold, var(--primary)),
    0 1px 3px rgb(0 0 0 / 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .topic-post--highlighted,
  .community-reply-highlight,
  .community-reply-kicker {
    animation: none !important;
    transition: none !important;
  }
}

/* Full-page compose: editor is the page. No position:fixed sheet. */
.board-page-browse {
  display: contents;
}

.board-page-compose {
  display: none;
}

html[data-compose-page] .board-page-browse,
html[data-compose-page] .board-page .community-focus-nav {
  display: none;
}

html[data-compose-page] .board-page-compose {
  display: flex;
}

html[data-compose-page] .board-page.community-page {
  gap: 1rem;
}

.compose-page-bar {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.compose-page-editor + .md-editor .md-editor-surface,
html[data-compose-page] .md-editor-surface {
  min-height: 18rem;
}

.compose-vis-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.compose-vis-seg__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  transition: box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.compose-vis-seg__opt:hover {
  background: color-mix(in srgb, var(--muted) 40%, var(--card));
}

.compose-vis-seg__opt:has(:checked),
.compose-vis-seg__opt[data-state="checked"] {
  border-color: var(--brand-gold, var(--ring));
  box-shadow: 0 0 0 2px var(--brand-gold, var(--ring));
}

.compose-vis-seg__opt:has(:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.compose-vis-seg__opt.is-disabled,
.compose-vis-seg__opt:has(:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.compose-vis-seg__label {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--muted-foreground);
}

.compose-vis-seg__opt:has(:checked) .compose-vis-seg__label,
.compose-vis-seg__opt[data-state="checked"] .compose-vis-seg__label {
  color: var(--foreground);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .compose-vis-seg__opt {
    transition: none;
  }
}