/**
 * Community — one feed over five domains. 8.638.0.
 *
 * Three columns on a desktop, one on a phone. §1 asks that the rail
 * "must not squeeze the feed into an unusably narrow column", so the
 * rail is a fixed track and the feed takes everything else, and below
 * 1280 the rail goes under the feed rather than fighting it for width.
 *
 * Colours are tokens throughout, so the page flips with the theme.
 */

.community-page {
  max-width: 1264px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  /* Clears the sticky site header. */
  padding-block: var(--space-8) var(--space-10);
}

.community-shell { display: block; }

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

/* ---- Create Post + overflow -------------------------------------- */

.community-create,
.community-more { position: relative; }

.community-create__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.community-create__btn::-webkit-details-marker,
.community-more__btn::-webkit-details-marker { display: none; }

.community-more__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}

.community-create__panel,
.community-more__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  min-width: 268px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
}

.community-more__panel { min-width: 220px; }

.community-create__item,
.community-more__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.community-more__item { align-items: center; }

.community-create__item:hover,
.community-more__item:hover { background: var(--color-surface); }

.community-create__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary-text);
}

.community-create__copy { display: flex; flex-direction: column; min-width: 0; }

.community-create__copy strong { color: var(--color-ink-heading); font-weight: var(--fw-semibold); }

.community-create__copy span { color: var(--color-text-muted); font-size: 0.8125rem; }

/* ---- Domain cards ------------------------------------------------ */

.community-domains {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.community-domain__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease;
}

.community-domain__link:hover { border-color: var(--color-primary); }

.community-domain__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary-text);
}

.community-domain--insight .community-domain__icon { color: var(--color-success-text); }

.community-domain--solution .community-domain__icon { color: var(--color-warning-text, var(--color-ink)); }

.community-domain__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.community-domain__title { color: var(--color-ink-heading); font-size: 1rem; }

.community-domain__sub { color: var(--color-text-muted); font-size: 0.75rem; }

.community-domain__desc {
  margin-top: var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
}

.community-domain__count {
  margin-top: var(--space-2);
  color: var(--color-primary-text);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
}

.community-domain__go { flex: 0 0 auto; color: var(--color-text-muted); margin-inline-start: auto; }

/* ---- Controls ---------------------------------------------------- */

.community-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.community-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
}

.community-search__icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.community-search__input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-6) + 4px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
}

.community-search__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* ---- Advanced filters -------------------------------------------- */

.community-filters { position: relative; }

.community-filters__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.community-filters__btn::-webkit-details-marker { display: none; }

.community-filters__count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
}

.community-filters__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  width: min(320px, calc(100vw - var(--space-6)));
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
}

.community-filters__group {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.community-filters__group legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.community-filters__select {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-sm);
}

.community-filters__radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.community-filters__note { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 0.8125rem; }

.community-filters__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

/* ---- Active filter chips ----------------------------------------- */

.community-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.community-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary-text);
  font-size: 0.8125rem;
  text-decoration: none;
}

.community-chip__x { font-size: 1rem; line-height: 1; }

.community-chip--clear { border-style: dashed; color: var(--color-text-muted); border-color: var(--color-border); }

/* ---- Tabs and sort ----------------------------------------------- */

.community-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-soft);
}

.community-tabs {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
  /* The tabs WRAP rather than shrink or scroll. §18 asks that labels
     stay readable instead of compressing until they are not, and the
     original answer to that was a horizontal scroller — but with six
     tabs and a 616px feed column the sixth was simply cut in half
     mid-word with nothing to show it continued. The wireframe wraps
     them onto a second row, which keeps every label whole and every
     tab reachable without a scroll gesture. */
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.community-tabs::-webkit-scrollbar { display: none; }

.community-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.community-tab:hover { background: var(--color-surface); }

.community-tab.is-active {
  background: var(--color-primary);
  color: var(--color-white);
}

.community-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
}

.community-sort__select {
  min-height: 40px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* ---- Feed cards -------------------------------------------------- */

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

.community-feed__item { margin-bottom: var(--space-3); }

.community-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

/* The left edge strip is gone (8.640.0).
   It existed because the type badge was a grey pill that said nothing
   at a glance, so the card needed a second, quieter signal. The badge
   now carries the type's own colour and its icon, which is what the
   wireframe uses and where a reader looks first — leaving the strip
   would state the same fact twice, in two different colour systems,
   and the wireframe has no such strip. */

.community-card__avatar img { border-radius: var(--radius-circle); display: block; }

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

.community-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.community-card__author { color: var(--color-ink-heading); font-weight: var(--fw-semibold); text-decoration: none; }

.community-card__author:hover { text-decoration: underline; }

.community-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-2) 0 0;
}

.community-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
}

.community-badge--featured { background: var(--color-warning-soft); color: var(--color-warning-text, var(--color-ink)); }

.community-badge--accepted { background: var(--color-success-soft, var(--color-surface)); color: var(--color-success-text); }

.community-card__title { margin: var(--space-2) 0 0; font-size: 1.0625rem; line-height: 1.35; }

.community-card__title a { color: var(--color-ink-heading); text-decoration: none; }

.community-card__title a:hover { color: var(--color-primary-text); }

.community-card__excerpt {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ---- Poll results on a card -------------------------------------- */

.community-poll { list-style: none; margin: var(--space-3) 0 0; padding: 0; }

.community-poll__row {
  display: grid;
  grid-template-columns: minmax(84px, 7rem) minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
  font-size: 0.8125rem;
}

.community-poll__label { color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.community-poll__bar {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border-soft);
  overflow: hidden;
}

.community-poll__fill { display: block; height: 100%; background: var(--color-primary); }

.community-poll__pct { text-align: end; color: var(--color-ink); font-variant-numeric: tabular-nums; }

.community-poll__foot { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 0.75rem; }

/* ---- Topics and engagement --------------------------------------- */

.community-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.community-card__topics a {
  display: inline-flex;
  align-items: center;
  /* 24px is the WCAG 2.2 target-size floor. */
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: 0.6875rem;
  text-decoration: none;
}

.community-card__topics a:hover { background: var(--color-border); }

.community-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.community-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.community-card__actions { display: flex; align-items: center; gap: var(--space-2); }

.community-card__cta { white-space: nowrap; }

/* ---- Card kebab -------------------------------------------------- */

.community-card__menu { position: relative; }

.community-card__menu-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}

.community-card__menu-btn::-webkit-details-marker { display: none; }

.community-card__menu-btn:hover { background: var(--color-surface); }

.community-card__menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: var(--z-dropdown);
  min-width: 212px;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
}

.community-card__menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.community-card__menu-item:hover { background: var(--color-surface); }

.community-card__menu-item--danger { color: var(--color-danger); }

.community-card__report { padding: var(--space-1) var(--space-2) 0; border-top: 1px solid var(--color-border-soft); margin-top: var(--space-1); }

.community-card__reason {
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  margin-bottom: 4px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.8125rem;
}

/* ---- Pager and empty --------------------------------------------- */

.community-pager {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.community-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.community-pager .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.community-empty {
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.community-empty__title { margin: 0 0 var(--space-2); font-weight: var(--fw-semibold); color: var(--color-ink-heading); }

.community-empty__lede { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); }

/* ---- Rail -------------------------------------------------------- */

.community-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.community-rail__card {
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.community-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.community-rail__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink-heading);
}

.community-rail__title .icon { color: var(--color-primary-text); }

.community-rail__all,
.community-rail__lede { font-size: 0.8125rem; }

.community-rail__all { color: var(--color-primary-text); text-decoration: none; }

.community-rail__all:hover { text-decoration: underline; }

.community-rail__lede { margin: 0 0 var(--space-3); color: var(--color-text-muted); }

.community-rail__note {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.community-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-stat { display: flex; flex-direction: column; gap: 2px; }

.community-stat__value {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--color-ink-heading);
  font-variant-numeric: tabular-nums;
}

.community-stat__label { color: var(--color-text-muted); font-size: 0.75rem; }

.community-topics,
.community-authors { list-style: none; margin: 0; padding: 0; }

.community-topics__row,
.community-authors__row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  font-size: 0.8125rem;
}

.community-topics__rank,
.community-authors__rank {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
}

.community-topics__name { color: var(--color-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.community-topics__name:hover { color: var(--color-primary-text); }

.community-topics__count,
.community-authors__count { color: var(--color-text-muted); font-size: 0.75rem; white-space: nowrap; }

.community-authors__who {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-ink);
  text-decoration: none;
}

.community-authors__who img { border-radius: var(--radius-circle); flex: 0 0 auto; }

.community-authors__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

.community-events__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-3);
}

.community-events__thumb img,
.community-events__fallback {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
}

.community-events__fallback {
  display: grid;
  place-items: center;
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.community-events__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.community-events__title {
  color: var(--color-ink-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.community-events__title:hover { color: var(--color-primary-text); }

.community-events__meta { color: var(--color-text-muted); font-size: 0.75rem; }

/* ---- Narrow ------------------------------------------------------ */

@media (max-width: 767px) {
  .community-page { padding-inline: var(--space-3); }

  /* The shared page header stacks and sizes the title; only the
     create menu's own width belongs to this page. */
  .page-header__actions > .community-create { flex: 1 1 auto; }

  .community-create__btn { width: 100%; justify-content: center; }

  /* Anchored to a 40px summary the panel would be 40px wide, so on a
     phone it spans the head instead. The same correction the Insights
     card menus needed in 8.636.0. */
  .community-create,
  .community-more,
  .community-filters { position: static; }

  .community-page .page-header { position: relative; }

  .community-controls { position: relative; }

  .community-create__panel,
  .community-more__panel {
    inset-inline: 0;
    min-width: 0;
  }

  .community-filters__panel { inset-inline: 0; width: auto; }

  .community-card { grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-3); }

  .community-card__avatar img { width: 32px; height: 32px; }

  .community-card__foot { flex-direction: column; align-items: stretch; }

  .community-card__actions { justify-content: space-between; }

  .community-poll__row { grid-template-columns: minmax(70px, 5.5rem) minmax(0, 1fr) 36px; }

  .community-filters__btn { width: 100%; justify-content: center; }
}

/* Three across, sized by the column rather than the window.
   ------------------------------------------------------------------
   The old rule asked for three columns from a 768px VIEWPORT, but the
   feed column is whatever is left after a 260px sidebar and a 320px
   rail: at 1280 that is 616px, so each card was 197px and
   "conversations" broke across two lines mid-word. A viewport width
   says nothing about this column, which is what made the original
   rule wrong — so the query asks the column itself.

   The container is declared only from 768px up, deliberately: below
   that the filter and create panels become position:fixed sheets, and
   container-type would make .community-main their containing block,
   so a full-screen sheet would be trapped inside the feed column. */
@media (min-width: 768px) {
  .community-main { container-type: inline-size; container-name: jdevfeed; }
}

@container jdevfeed (min-width: 600px) {
  .community-domains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Between 600 and 820px of COLUMN the three cards are 190–260px wide:
   room for the card, not for its description. The wireframe's shape —
   one row of three — is kept and the description is the line that
   goes, because the title, the sub-line and the count still say what
   the card is. Above that the full card returns. */
@container jdevfeed (min-width: 600px) and (max-width: 820px) {
  .community-domain { position: relative; }

  .community-domain__link { flex-direction: column; gap: var(--space-2); padding: var(--space-3); }

  .community-domain__desc { display: none; }

  .community-domain__icon { width: 40px; height: 40px; }

}

/* Tablet: the rail pairs up beneath the feed rather than running one
   long column nobody reaches. */
@media (min-width: 768px) and (max-width: 1279px) {
  .community-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 1280px) {
  .community-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: var(--space-8);
  }

  .community-rail {
    margin-top: 0;
    position: sticky;
    top: calc(var(--jdev-header-h, 73px) + var(--space-4));
  }
}

/* ---- Sidebar child navigation (Ask JDEVerse) ---------------------
   Lives here rather than in the sidebar's own stylesheet because the
   group it belongs to is Community's. */
.app-nav-sub { margin: 0 0 var(--space-1); }

.app-nav-sub__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding-inline: var(--space-3);
  margin-inline-start: var(--space-5);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}

/* Ask JDEVerse is a top-level entry on the board, flush with Community,
   Groups, Insights and Solutions, so the toggle takes the nav link's own
   metrics instead of the indent it carried while it was a child of the
   Community item. 8.656.0. */
.app-nav-sub__toggle {
  gap: var(--space-3);
  margin-inline-start: 0;
  padding-block: 6px;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.app-nav-sub__toggle .icon { flex-shrink: 0; color: var(--color-text-muted); }

.app-nav-sub__toggle:hover { background: var(--color-surface-muted, #F8F9FC); }

.app-nav-sub__toggle::-webkit-details-marker { display: none; }

.app-nav-sub__toggle::after {
  content: '+';
  margin-inline-start: auto;
  padding-inline-end: var(--space-2);
}

.app-nav-sub[open] .app-nav-sub__toggle::after { content: '\2212'; }

.app-nav-sub__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.app-nav-link--child {
  margin-inline-start: var(--space-6);
  font-size: 0.8125rem;
}

/* =================================================================
   MOBILE — full-screen sheets and bottom-nav clearance
   ================================================================= */

@media (max-width: 767px) {
  /* §17: "The central plus must not obscure the last visible card or
     its primary action. Add sufficient bottom padding to scrolling
     content so cards can be reached above the navigation." Derived
     from the bar's own height, with the FAB's rise and the safe-area
     inset on top, so a notched phone clears its home indicator too. */
  .community-page {
    padding-bottom: calc(
      var(--jdev-bottomnav-h, 56px)
      + var(--jdev-bottomnav-fab-rise, 14px)
      + env(safe-area-inset-bottom, 0px)
      + var(--space-8)
    );
  }

  /* §5 and §6 ask for full-screen panels on a phone rather than a
     narrow desktop popover. The markup is unchanged — these are the
     same <details> that work without script; only their presentation
     differs, so nothing depends on JavaScript to be usable. */
  .community-filters[open] .community-filters__panel,
  .community-create[open] .community-create__panel {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    /* Room for the sticky action row, and for the home indicator. */
    padding: var(--space-5) var(--space-4)
             calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  /* A full-screen sheet needs a title, which the popover did not. */
  .community-filters[open] .community-filters__panel::before {
    content: attr(data-sheet-title);
    display: block;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: var(--color-ink-heading);
  }

  /* Apply and Reset stay reachable without scrolling the sheet. */
  .community-filters[open] .community-filters__actions {
    position: sticky;
    bottom: 0;
    margin-top: var(--space-5);
    padding: var(--space-3) 0 calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
  }

  .community-filters[open] .community-filters__actions .btn--primary { flex: 1 1 auto; justify-content: center; }

  /* The summary becomes the sheet's close affordance while it is open,
     pinned above the sheet so it is always the way back out. */
  .community-filters[open] .community-filters__btn,
  .community-create[open] .community-create__btn {
    position: fixed;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    z-index: 1001;
    width: auto;
  }

  /* An unavailable status option says why rather than vanishing. */
  .community-filters__radio.is-unavailable { opacity: 0.55; cursor: not-allowed; }

  .community-filters__why { color: var(--color-text-muted); font-size: 0.75rem; }

  /* Create Post as a bottom sheet: it is a short list of five, so it
     rises from the bottom where the thumb already is rather than
     covering the whole screen. */
  .community-create[open] .community-create__panel {
    inset: auto 0 0 0;
    max-height: 85vh;
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }

  .community-create[open] .community-create__panel::before {
    content: attr(data-sheet-title);
    display: block;
    margin-bottom: var(--space-3);
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    color: var(--color-ink-heading);
  }

  .community-create__item { min-height: 56px; }
}

/* ---- §7.2 feed views (For You / Following / Recent / Unanswered) --- */
.community-views {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border-soft);
}

.community-views::-webkit-scrollbar { display: none; }

.community-view {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 2px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.community-view:hover { color: var(--color-ink); }

/* Underline AND weight AND colour: §20 asks that status never be
   carried by colour alone. */
.community-view.is-active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: var(--fw-semibold);
}

/* ==================================================================
   Visual system. 8.640.0.

   The page carried the wireframe's structure but almost none of its
   colour: every type badge was the same grey pill, the three domain
   cards differed only by a tinted glyph, the trending ranks were five
   identical circles, and the feed read as one long column of grey.
   The wireframe uses colour to say what a thing IS — so a reader can
   tell a Question from a Poll before reading either.

   One tone per content type, each a pair: a tinted surface and a text
   colour that passes AA on it. Both are redefined for dark mode, so
   the page flips with the theme rather than keeping light tints that
   glare. Every pair below was measured; the ratio is recorded beside
   it, and the lowest is 4.81:1 against a 4.5:1 requirement.
   ================================================================== */

.community-page {
  --tone-question-bg: #FFEDD5;
  --tone-question-fg: #9A4A05;   /* 5.46:1 */
  --tone-discussion-bg: #CCFBF1;
  --tone-discussion-fg: #0F766E; /* 4.86:1 */
  --tone-poll-bg: #EDEBFF;
  --tone-poll-fg: #5D4FE6;       /* 4.81:1 */
  --tone-insight-bg: #E0F2FE;
  --tone-insight-fg: #0B5FA5;    /* 5.73:1 */
  --tone-solution-bg: #DCFCE7;
  --tone-solution-fg: #0F7036;   /* 5.64:1 */
  --tone-featured-bg: #FEF3C7;
  --tone-featured-fg: #8A5600;   /* 5.53:1 */
  --tone-ask-bg: var(--tone-poll-bg);
  --tone-ask-fg: var(--tone-poll-fg);
}

html.jdev-dark .community-page {
  --tone-question-bg: #3B2A0A;
  --tone-question-fg: #FBBF24;   /* 8.27:1 */
  --tone-discussion-bg: #0C2E2A;
  --tone-discussion-fg: #5EEAD4; /* 9.86:1 */
  --tone-poll-bg: #1E1B4B;
  --tone-poll-fg: #8B7EFF;       /* 4.97:1 */
  --tone-insight-bg: #0C2B45;
  --tone-insight-fg: #7DD3FC;    /* 8.70:1 */
  --tone-solution-bg: #0C2E1A;
  --tone-solution-fg: #4ADE80;   /* 8.48:1 */
  --tone-featured-bg: #3B2A0A;
  --tone-featured-fg: #FBBF24;   /* 8.27:1 */
}

/* ---- Type badges ------------------------------------------------- */

.community-badge .icon { width: 12px; height: 12px; }

.community-badge--question   { background: var(--tone-question-bg);   color: var(--tone-question-fg); }
.community-badge--discussion { background: var(--tone-discussion-bg); color: var(--tone-discussion-fg); }
.community-badge--poll       { background: var(--tone-poll-bg);       color: var(--tone-poll-fg); }
.community-badge--insight    { background: var(--tone-insight-bg);    color: var(--tone-insight-fg); }
.community-badge--solution   { background: var(--tone-solution-bg);   color: var(--tone-solution-fg); }
.community-badge--featured   { background: var(--tone-featured-bg);   color: var(--tone-featured-fg); }
.community-badge--accepted   { background: var(--tone-solution-bg);   color: var(--tone-solution-fg); }

/* ---- Domain cards ------------------------------------------------ */

/* The icon tile carries the domain's colour, as in the wireframe —
   a tinted rounded square, not a glyph floating on the card. */
.community-domain__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--tone-ask-bg);
  color: var(--tone-ask-fg);
}

.community-domain__icon .icon { width: 24px; height: 24px; }

.community-domain--insight .community-domain__icon {
  background: var(--tone-insight-bg);
  color: var(--tone-insight-fg);
}

.community-domain--solution .community-domain__icon {
  background: var(--tone-solution-bg);
  color: var(--tone-solution-fg);
}

.community-domain__title { font-size: 1.0625rem; font-weight: var(--fw-bold); }

.community-domain__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.community-domain__count { margin-top: 0; }

.community-domain--insight .community-domain__count { color: var(--tone-insight-fg); }

.community-domain--solution .community-domain__count { color: var(--tone-solution-fg); }

/* The avatar stack. Overlapped, each face ringed in the card's own
   background so the overlap reads as depth rather than a smudge. */
.community-domain__faces { display: inline-flex; align-items: center; }

.community-domain__face { display: inline-flex; }

.community-domain__face + .community-domain__face { margin-inline-start: -10px; }

.community-domain__faces img {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--color-bg);
  background: var(--color-surface);
}

/* The arrow becomes the wireframe's round button. */
.community-domain__go {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  transition: background-color 120ms ease, color 120ms ease;
}

.community-domain__link:hover .community-domain__go {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---- Tabs, sort and layout --------------------------------------- */

.community-tab { gap: 6px; }

.community-tab .icon { width: 14px; height: 14px; }

.community-toolbar__right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.community-layouts {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.community-layouts__btn {
  display: grid;
  place-items: center;
  /* 32px of ink inside a 2px-padded group clears the 24px WCAG 2.2
     target minimum with the group's own padding counted. */
  width: 32px;
  height: 32px;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--color-text-muted);
}

.community-layouts__btn:hover { background: var(--color-surface); color: var(--color-ink); }

.community-layouts__btn.is-active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Grid layout: the same cards, two across, once there is room for two
   without crushing the title. Below that it stays a list, because a
   320px phone cannot hold two of these side by side. */
.community-feed--grid { display: grid; gap: var(--space-3); }

@media (min-width: 900px) {
  .community-feed--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-feed--grid .community-feed__item { margin: 0; }
  .community-feed--grid .community-card { height: 100%; }
}

/* ---- Poll ---------------------------------------------------------
   The fill carries the poll's own tone and a little depth, matching
   the wireframe's gradient bars. The percentage stays as text beside
   it, so the result never lives in the colour alone. */

.community-poll__bar {
  border-radius: var(--radius-full);
  background: var(--color-surface);
  overflow: hidden;
}

.community-poll__fill {
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), #8B7EFF);
}

/* ---- Rail ---------------------------------------------------------
   Trending ranks descend in heat, as in the wireframe: the top three
   are tinted, four and five stay quiet. The rank is decorative — the
   list is an <ol> and the order is already in the markup — so colour
   is never the only thing saying which is first. */

.community-topics__row:nth-child(1) .community-topics__rank {
  background: var(--tone-question-bg);
  color: var(--tone-question-fg);
}

.community-topics__row:nth-child(2) .community-topics__rank {
  background: var(--tone-featured-bg);
  color: var(--tone-featured-fg);
}

.community-topics__row:nth-child(3) .community-topics__rank {
  background: var(--tone-poll-bg);
  color: var(--tone-poll-fg);
}

.community-authors__row:nth-child(-n+3) .community-authors__rank {
  background: var(--tone-poll-bg);
  color: var(--tone-poll-fg);
}

.community-authors__who img {
  border-radius: var(--radius-circle);
  background: var(--color-surface);
}

/* Overview: four tinted tiles rather than four numbers in a row. */
.community-stats { gap: var(--space-2); }

.community-stat {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.community-stat__value { color: var(--tone-poll-fg); }

.community-stat:nth-child(2) .community-stat__value { color: var(--tone-discussion-fg); }

.community-stat:nth-child(3) .community-stat__value { color: var(--tone-insight-fg); }

.community-stat:nth-child(4) .community-stat__value { color: var(--tone-solution-fg); }

/* The row is a grid, so the action needs a track of its own rather
   than an auto margin that a grid item ignores. */
.community-events__row {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
}

.community-events__cta { white-space: nowrap; }



/* ---- Create menu --------------------------------------------------
   Each option wears its own type's colour, so the menu and the feed
   agree: the glyph you pick here is the glyph the card will carry. */

.community-create__item--question  .community-create__icon { background: var(--tone-question-bg);   color: var(--tone-question-fg); }
.community-create__item--discussion .community-create__icon { background: var(--tone-discussion-bg); color: var(--tone-discussion-fg); }
.community-create__item--poll      .community-create__icon { background: var(--tone-poll-bg);       color: var(--tone-poll-fg); }
.community-create__item--insight   .community-create__icon { background: var(--tone-insight-bg);    color: var(--tone-insight-fg); }
.community-create__item--solution  .community-create__icon { background: var(--tone-solution-bg);   color: var(--tone-solution-fg); }

/* ---- Card media ---------------------------------------------------
   An article with a cover image shows it, as the wireframe's Insight
   card does. Nothing is invented: a record without one keeps the
   text-only card rather than getting a placeholder. */

.community-card__media {
  display: block;
  margin: var(--space-3) 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.community-card__media img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* ==================================================================
   The domain card, as the wireframe draws it. 8.641.0.

   The card is the TINTED surface and the icon tile is the light one
   sitting on it — the previous build had that the other way round, a
   white card with a tinted tile, which is why the three domains read
   as one grey stack on a phone. The tint is the same tone the badge,
   the count and the create menu already use, so the colour means the
   same thing everywhere.
   ================================================================== */

.community-domain--ask .community-domain__link {
  background: var(--tone-ask-bg);
  border-color: transparent;
}

.community-domain--insight .community-domain__link {
  background: var(--tone-insight-bg);
  border-color: transparent;
}

.community-domain--solution .community-domain__link {
  background: var(--tone-solution-bg);
  border-color: transparent;
}

/* The tile reads as light-on-tint. A flat white would be a different
   white per card against three different tints, so it is the page's
   own background at a strength that sits on all three. */
.community-domain__icon {
  background: var(--color-bg);
  /* A soft lift rather than a border: the tile sits on three
     different tints, and one border colour cannot be right on all
     three, while a shadow reads the same on each. */
  box-shadow: 0 1px 2px rgb(16 24 40 / 8%), 0 0 0 1px rgb(16 24 40 / 4%);
}

html.jdev-dark .community-domain__icon {
  background: var(--color-surface);
  box-shadow: none;
}

.community-domain--ask .community-domain__icon { color: var(--tone-ask-fg); }

/* The figure carries the weight; the unit stays quiet beside it. */
.community-domain__count {
  color: var(--color-ink-soft);
  font-weight: var(--fw-regular, 400);
  font-size: var(--fs-sm);
}

.community-domain__n {
  color: var(--color-ink-heading);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  margin-inline-end: 2px;
}

.community-domain--insight .community-domain__count,
.community-domain--solution .community-domain__count { color: var(--color-ink-soft); }

/* An outlined ring, not a filled grey disc, and centred on the card's
   right edge rather than pinned to its top corner. */
.community-domain__link { align-items: center; }

.community-domain__go {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary-text);
}

.community-domain--insight .community-domain__go { border-color: var(--tone-insight-fg); color: var(--tone-insight-fg); }

.community-domain--solution .community-domain__go { border-color: var(--tone-solution-fg); color: var(--tone-solution-fg); }

/* ---- Phone ------------------------------------------------------- */

@media (max-width: 767.98px) {
  /* The wireframe opens on the title. The breadcrumb is one tap from
     the back gesture and the bottom nav, and it cost a line above the
     fold on the narrowest screens. */
  .community-page .insights-crumbs { display: none; }

  /* Title, sub-line, count — the description belongs to the desktop
     card, where there is room for it beside everything else. */
  .community-domain__desc { display: none; }

  /* No avatar stack on a phone: the wireframe's mobile card does not
     carry one, and at 320px it competed with the count for the same
     line. The desktop card keeps it. */
  .community-domain__faces { display: none; }

  .community-domain__link { gap: var(--space-3); padding: var(--space-4); }

  .community-domain__title { font-size: 1.125rem; }

  /* Search and filter share a row, as drawn: the filter collapses to
     its icon rather than taking a full-width row of its own. Its
     accessible name comes from the label text, which stays in the
     markup for screen readers. */
  .community-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
  }

  .community-filters__btn {
    width: 48px;
    min-width: 48px;
    justify-content: center;
    padding: 0;
  }

  .community-filters__btn > span:not(.community-filters__count):not(.u-sr-only) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Six tabs, three to a row, as drawn. The icons are what pushed a
     third row: on a phone the labels alone identify the tab, and the
     wireframe keeps only the Insights mark. */
  .community-tabs { gap: var(--space-2); }

  .community-tab {
    flex: 1 1 calc(33.333% - var(--space-2));
    justify-content: center;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-soft);
  }

  .community-tab.is-active { border-color: var(--color-primary); }

  .community-tab .icon { display: none; }

  .community-tab[data-type="insights"] .icon { display: block; }
}

/* The badges lead the card now, so the spacing moves with them: the
   type sits flush at the top and the author line follows it. */
.community-card__badges { margin: 0 0 var(--space-1); }

.community-card__meta { margin-top: 0; }

.community-card__in { color: var(--color-text-muted); }

/* A closed panel must take no space at all.
   On a phone the filter control is now a 48px icon button, so the
   panel — absolutely positioned inside it — inherited a 48px width
   while its own selects kept min-content, and the contents hung 46px
   past the right edge of the document in the CLOSED state. A closed
   <details> hides its contents from view but still leaves this box in
   layout, so it is removed from layout explicitly. The open state is
   untouched: it is still the full-screen sheet. */
@media (max-width: 767.98px) {
  .community-filters:not([open]) .community-filters__panel,
  .community-create:not([open]) .community-create__panel {
    display: none;
  }
}

/* ==================================================================
   Desktop, read against the wireframe. 8.642.0.
   ================================================================== */

/* The tile sits at the TOP of the card beside the title, and the
   arrow sits at the end of the count's row — not floating halfway
   down the card's right edge, which is where centring had put it. */
.community-domain__link { align-items: flex-start; }

.community-domain__body { flex: 1 1 auto; }

.community-domain__foot { width: 100%; }

.community-domain__go { margin-inline-start: auto; }

.community-create__caret { margin-inline-start: 2px; opacity: 0.9; }

/* ---- Toolbar on one row -------------------------------------------
   Six tabs, the sort control and the layout toggle share a line in
   the wireframe. They did not fit here: the tab padding alone spent
   144px of a 872px column, so the right-hand group wrapped onto a
   row of its own. Tightening the tabs buys the ~90px needed, and the
   group is pushed to the end so it sits right even when it wraps on
   a narrower column. */
@media (min-width: 768px) {
  .community-toolbar { align-items: center; gap: var(--space-3); }

  .community-tabs { flex: 1 1 auto; gap: 4px; }

  .community-tab { padding: 0 10px; }

  .community-toolbar__right { margin-inline-start: auto; }

  .community-sort__select { max-width: 140px; }
}

/* The tab glyph wears its type's colour, as the wireframe draws it.
   The active tab is solid, so its glyph follows the label to white
   rather than keeping a tone that would not read on the fill. */
.community-tab[data-type="questions"] .icon   { color: var(--tone-question-fg); }
.community-tab[data-type="discussions"] .icon { color: var(--tone-discussion-fg); }
.community-tab[data-type="polls"] .icon       { color: var(--tone-poll-fg); }
.community-tab[data-type="insights"] .icon    { color: var(--tone-insight-fg); }
.community-tab[data-type="solutions"] .icon   { color: var(--tone-solution-fg); }

.community-tab.is-active .icon { color: currentColor; }

/* ---- Rail: Community Overview -------------------------------------
   Four measures across one row, as drawn. They were a 2x2 grid of
   tinted tiles, which read as four buttons rather than one summary.
   The figures are the page's heading colour here, not the type
   tones: these four are a single statement about the community, and
   four different colours implied four different kinds of thing. */

.community-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.community-stat {
  padding: 0;
  background: none;
  border-radius: 0;
}

.community-stat__value,
.community-stat:nth-child(2) .community-stat__value,
.community-stat:nth-child(3) .community-stat__value,
.community-stat:nth-child(4) .community-stat__value {
  color: var(--color-ink-heading);
  font-size: 1.125rem;
}

.community-stat__label { font-size: 0.6875rem; line-height: 1.3; }

/* ---- Rail: header marks ------------------------------------------- */

.community-rail__mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}

.community-rail__mark--ask   { background: var(--tone-ask-bg);      color: var(--tone-ask-fg); }
.community-rail__mark--trend { background: var(--tone-question-bg); color: var(--tone-question-fg); }
.community-rail__mark--event { background: var(--tone-insight-bg);  color: var(--tone-insight-fg); }
.community-rail__mark--star  { background: var(--tone-featured-bg); color: var(--tone-featured-fg); }

/* ---- Rail: trending heat ramp -------------------------------------
   First, second and third are filled and descend in heat; fourth and
   fifth are plain numbers, as drawn. The list is an <ol>, so the
   order is in the markup and the colour is never the only thing
   saying which is first. Each pair was measured: 4.83, 5.18, 5.94. */

.community-topics__row:nth-child(1) .community-topics__rank {
  background: #DC2626;
  color: #FFFFFF;
}

.community-topics__row:nth-child(2) .community-topics__rank {
  background: #C2410C;
  color: #FFFFFF;
}

.community-topics__row:nth-child(3) .community-topics__rank {
  background: #FDE68A;
  color: #7C4A03;
}

.community-topics__row:nth-child(n+4) .community-topics__rank {
  background: none;
  color: var(--color-text-muted);
}

/* The foot is one row: faces, count, then the arrow at the end.
   It was wrapping because the three items plus the gaps came to
   within a couple of pixels of the available width, so the arrow
   dropped to a line of its own on all three cards. The row no longer
   wraps and the count is allowed to shrink instead — a longer unit
   ("2 published solutions") takes a second line within its own
   column while the arrow stays where the wireframe puts it. */
/* A grid, not a flex row. As a flex row the count shrank in
   proportion to the free space, fell below the width of its own
   longest word, and the page's global overflow-wrap broke
   "conversations" across two lines mid-word — the 8.640.0 bug,
   returning by a different route. Explicit tracks give the faces and
   the arrow exactly what they need and hand the rest to the count,
   which is enough to keep every word whole. */
.community-domain__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
}

/* Belt and braces: whatever the inherited wrapping rule is, a word in
   this label is never broken in the middle. */
.community-domain__count { overflow-wrap: normal; word-break: normal; }

/* ---- The domain card is two rows ----------------------------------
   Row one is the tile beside the text; row two is the foot, spanning
   the whole card. The foot used to live inside the text column, which
   left the count about 80px — less than the width of the word
   "conversations" — so it either broke mid-word or spilled under the
   arrow. Spanning the card gives it ~140px and the word fits whole.

   Measured, not eyeballed: a check now compares each count's longest
   word against the width of its column at every desktop size, which
   is how the spill was found after it had already passed a look. */
.community-domain__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon body"
    "foot foot";
  column-gap: var(--space-3);
  row-gap: var(--space-3);
}

.community-domain__icon { grid-area: icon; }

.community-domain__body { grid-area: body; }

.community-domain__foot { grid-area: foot; margin-top: 0; }

/* No avatar stack on a narrow card.
   The foot there has room for the count and the arrow and nothing
   more; with the stack in place the count fell to 61px against the
   93px its own longest word needs. This sits at the end of the file
   on purpose: the rule that gives the stack its display comes later
   than the container query, so hiding it from inside that query had
   no effect — the measurement said so while the page still looked
   plausible. */
@container jdevfeed (min-width: 600px) and (max-width: 820px) {
  .community-domain__faces { display: none; }
}

/* ---- Card detail, to the wireframe. 8.643.0 ----------------------- */

/* The verification tick, on the avatar's lower-right corner. */
.community-card__avatar { position: relative; display: inline-block; }

.community-card__tick {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--color-bg);
  background: var(--tone-solution-fg);
  color: #FFFFFF;
}

.community-card__tick .icon { width: 9px; height: 9px; }

/* Save carries its word, as drawn.
   The shared button is a fixed 34px circle, so a label inside it
   simply overflowed and ran across the primary action beside it. With
   a word it becomes a pill: auto width, real padding, and the height
   kept so it still lines up with the button next to it. */
.community-card__save .bookmark-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-height: 34px;
  padding: 0 12px;
}

.community-card__save .bookmark-form__label {
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
}

/* Two lines of excerpt, then an ellipsis — the wireframe's card does
   not run to a third. The clamp is presentational: the full text is in
   the markup and on the record's own page. */
.community-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Save joins the figures on the left; the action keeps the right. */
.community-card__actions { margin-inline-start: auto; }

.community-card__save { flex: 0 0 auto; }

/* The For You fallback notice. Quiet, but not hidden: it is the
   difference between "your topics" and "everything", and a member who
   cannot tell which they are reading has been misled. */
.community-fallback {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--tone-insight-bg);
  color: var(--color-ink);
  font-size: var(--fs-sm);
}

.community-fallback .icon { flex: 0 0 auto; color: var(--tone-insight-fg); margin-top: 2px; }

.community-fallback a { color: var(--tone-insight-fg); font-weight: var(--fw-semibold); }