/* Community hub refresh */

body.site-community-hub .background-grid {
  opacity: 0.16;
}

body.site-community-hub .community-shell {
  width: min(100%, 1580px);
  padding-top: calc(var(--nav-height) + 24px);
}

body.site-community-hub .community-hero {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(118, 200, 135, 0.10), transparent 38%),
    linear-gradient(90deg, rgba(123, 168, 183, 0.10), transparent 56%),
    rgba(13, 22, 19, 0.82);
  box-shadow: var(--shadow);
}

body.site-community-hub .community-hero-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
}

body.site-community-hub .community-hero-mark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

body.site-community-hub .community-hero-copy {
  min-width: 0;
}

body.site-community-hub .community-hero .eyebrow {
  margin: 0 0 4px;
  color: var(--accent-blue);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.site-community-hub .community-hero h1 {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.16;
}

body.site-community-hub .community-hero-desc {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.9rem;
}

body.site-community-hub .community-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body.site-community-hub .community-page-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

body.site-community-hub .community-left-rail {
  grid-column: 1;
  position: sticky;
  top: calc(var(--nav-height) + 18px);
  display: grid;
  gap: 12px;
  width: 100%;
}

body.site-community-hub .community-main-column {
  grid-column: 2;
  display: grid;
  gap: 14px;
  min-width: 0;
}

body.site-community-hub .community-right-rail {
  grid-column: 3;
  justify-self: stretch;
  width: 100%;
  position: sticky;
  top: calc(var(--nav-height) + 18px);
  display: grid;
  gap: 12px;
}

body.site-community-hub .hub-channel {
  display: none;
}

body.site-community-hub .hub-channel.is-active {
  display: block;
}

body.site-community-hub .hub-board-head {
  display: grid;
  grid-template-columns: auto minmax(280px, 560px);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 0 2px;
}

body.site-community-hub .hub-title-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.site-community-hub .community-compose-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  flex: 1 1 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  padding: 6px 12px 6px 7px;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

body.site-community-hub .community-compose-entry:hover,
body.site-community-hub .community-compose-entry:focus-visible {
  border-color: rgba(118, 200, 135, 0.38);
  background: rgba(118, 200, 135, 0.09);
  color: var(--text-strong);
}

body.site-community-hub .community-compose-entry span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 800;
}

body.site-community-hub .community-compose-avatar {
  width: 32px;
  min-width: 32px;
  height: 32px;
  font-size: 0.82rem;
}

body.site-community-hub .community-content-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 4px;
}

body.site-community-hub .community-content-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 14px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
}

body.site-community-hub .community-content-tabs button:hover,
body.site-community-hub .community-content-tabs button:focus-visible,
body.site-community-hub .community-content-tabs button.is-active {
  background: rgba(139, 191, 152, 0.14);
  color: var(--text-strong);
  outline: none;
}

body.site-community-hub .side-title-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

body.site-community-hub .side-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid rgba(139, 191, 152, 0.32);
  border-radius: 8px;
  background: rgba(139, 191, 152, 0.12);
  color: var(--text-strong);
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

body.site-community-hub .side-action-link:hover,
body.site-community-hub .side-action-link:focus-visible {
  border-color: rgba(179, 216, 189, 0.48);
  background: rgba(139, 191, 152, 0.19);
}

body.site-community-hub .hub-board-head h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 1.05rem;
}

body.site-community-hub .hub-board-card,
body.site-community-hub .notice-board-list.forum-list,
body.site-community-hub .hub-inquiry-board .inquiry-list,
body.site-community-hub .notice-admin-form,
body.site-community-hub .hub-inquiry-board .inquiry-composer,
body.site-community-hub .forum-side-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(16, 25, 21, 0.72);
  box-shadow: none;
}

body.site-community-hub .hub-board-card {
  overflow: hidden;
}

body.site-community-hub .community-board.hub-board-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.site-community-hub .post-detail-layout {
  grid-template-columns: minmax(0, 1fr);
}

body.site-community-hub.is-community-post-detail .community-shell {
  width: min(100%, 920px);
}

body.site-community-hub.is-community-post-detail .community-page-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.site-community-hub.is-community-post-detail .community-left-rail,
body.site-community-hub.is-community-post-detail .community-right-rail {
  display: none !important;
}

body.site-community-hub.is-community-post-detail .community-main-column {
  grid-column: 1;
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-main-column {
  width: 100%;
  max-width: none;
}

body.site-community-hub.is-community-post-detail #app-view-post,
body.site-community-hub.is-community-post-detail .post-detail-layout,
body.site-community-hub.is-community-post-detail .post-detail {
  width: 100%;
}

body.site-community-hub .community-board .forum-filter-row {
  align-items: center;
  flex-direction: row;
  gap: 0;
  min-height: 64px;
}

body.site-community-hub .community-board .board-filter-main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;
  overflow: hidden;
}

body.site-community-hub .community-board .sort-select-wrap {
  display: flex;
  align-self: stretch;
  align-items: center;
  flex: 0 0 auto;
  justify-content: center;
  width: auto;
  margin-left: 0;
  border-top: 0;
  border-left: 1px solid var(--line);
  padding: 0 16px;
}

body.site-community-hub .hub-board-card .forum-filter-row {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

body.site-community-hub .hub-board-card .category-strip {
  align-items: center;
  width: 100%;
  border: 0;
  padding: 0;
}

body.site-community-hub .community-filter-strip {
  flex-wrap: wrap;
  gap: 8px;
}

body.site-community-hub .community-filter-strip button,
body.site-community-hub .community-side-row {
  cursor: pointer;
}

body.site-community-hub .community-panel-view.hidden {
  display: none !important;
}

body.site-community-hub .community-post-panel.is-active {
  display: block;
}

body.site-community-hub .community-chat-panel {
  display: grid;
  gap: 10px;
  min-height: 360px;
  padding: 16px;
}

body.site-community-hub .community-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

body.site-community-hub .community-chat-head strong {
  color: var(--text-strong);
  font-size: 0.94rem;
}

body.site-community-hub .community-chat-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 260px;
  max-height: min(560px, calc(100svh - var(--nav-height, 74px) - 270px));
  overflow: auto;
}

body.site-community-hub .community-chat-list > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

body.site-community-hub .community-chat-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 112px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
  padding: 7px 10px;
}

body.site-community-hub .community-chat-row strong,
body.site-community-hub .community-chat-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.site-community-hub .community-chat-row strong {
  color: var(--text-strong);
  font-size: 0.84rem;
}

body.site-community-hub .community-chat-row span {
  color: var(--text);
  font-size: 0.84rem;
}

body.site-community-hub .community-chat-row time {
  color: var(--muted);
  font-size: 0.75rem;
  text-align: right;
}

body.site-community-hub .community-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

body.site-community-hub .community-chat-form.is-disabled {
  opacity: 0.56;
  pointer-events: none;
}

body.site-community-hub .community-chat-form input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-strong);
  padding: 0 12px;
  font: inherit;
  font-size: 0.88rem;
}

body.site-community-hub .community-popular-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 780;
}

body.site-community-hub .community-popular-toggle input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
}

body.site-community-hub .hub-board-card .forum-list {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.site-community-hub .community-board .forum-list {
  overflow: visible;
}

body.site-community-hub .community-board .post-feed-item,
body.site-community-hub .community-board .post-item {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.site-community-hub .community-board .post-feed-item {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}

body.site-community-hub .community-board .post-feed-item:hover,
body.site-community-hub .community-board .post-item:hover {
  background: rgba(255, 255, 255, 0.024);
  box-shadow: none;
  transform: none;
}

body.site-community-hub .community-board .post-feed-item .post-title {
  font-size: 1.02rem;
  line-height: 1.36;
}

body.site-community-hub .community-board .post-feed-item .post-summary {
  max-width: 820px;
}

body.site-community-hub .community-board .post-item-status {
  display: block;
  min-height: 104px;
  padding: 18px;
  background: transparent;
}

body.site-community-hub .notice-admin-form,
body.site-community-hub .hub-inquiry-board .inquiry-composer {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px;
}

body.site-community-hub .notice-form-grid {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

body.site-community-hub .notice-form-grid label,
body.site-community-hub .notice-form-body {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 820;
}

body.site-community-hub .notice-pinned-toggle {
  display: inline-flex;
  grid-template-columns: auto auto;
  align-items: center;
  min-height: 40px;
  gap: 8px;
}

body.site-community-hub .notice-pinned-toggle input {
  width: auto;
}

body.site-community-hub .notice-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.site-community-hub .notice-form-message {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

body.site-community-hub .notice-write-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

body.site-community-hub .notice-write-entry-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.site-community-hub .notice-write-entry-copy strong {
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: 920;
}

body.site-community-hub .notice-write-entry-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

body.site-community-hub .notice-write-entry .forum-action-btn {
  min-height: 38px;
  white-space: nowrap;
}

body.site-community-hub .notice-board-list.forum-list {
  overflow: hidden;
}

body.site-community-hub .notice-board-list .forum-row {
  grid-template-columns: 66px minmax(0, 1fr) 90px 82px;
  min-height: 62px;
}

body.site-community-hub .hub-inquiry-board {
  display: grid;
  gap: 12px;
}

body.site-community-hub .hub-inquiry-board .inquiry-list {
  overflow: hidden;
}

body.site-community-hub .hub-inquiry-board .post-item {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  cursor: pointer;
}

body.site-community-hub .hub-inquiry-board .post-item:hover {
  background: rgba(255, 255, 255, 0.042);
}

body.site-community-hub .hub-inquiry-board .post-item > span {
  color: var(--accent-blue);
  font-weight: 850;
}

body.site-community-hub .forum-side-section {
  padding: 14px;
}

body.site-community-hub .community-ad-card {
  display: grid;
  min-height: 260px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

body.site-community-hub .community-ad-card strong {
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 900;
}

body.site-community-hub .forum-side-section.server-highlight {
  border-color: rgba(129, 187, 143, 0.30);
  background:
    linear-gradient(160deg, rgba(118, 200, 135, 0.11), transparent 58%),
    rgba(16, 25, 21, 0.82);
}

body.site-community-hub .user-snapshot {
  display: flex;
  align-items: center;
  gap: 11px;
}

body.site-community-hub .server-address-copy.compact {
  width: auto;
  min-width: 190px;
  min-height: 38px;
  border-radius: 999px;
}

body.site-community-hub .forum-side-section .side-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

body.site-community-hub .forum-side-section .side-stat-row:last-child {
  border-bottom: 0;
}

body.site-community-hub .forum-side-section .side-stat-row strong {
  color: var(--text-strong);
  font-size: 0.95rem;
}

body.site-community-hub .side-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  padding: 0 8px;
  font-size: 0.76rem;
  font-weight: 850;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

body.site-community-hub .side-more-link:hover,
body.site-community-hub .side-more-link:focus-visible {
  border-color: rgba(148, 182, 191, 0.26);
  background: rgba(148, 182, 191, 0.09);
  color: var(--text-strong);
}

body.site-community-hub .forum-side-section .side-preview-list {
  display: grid;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
body.site-community-hub .community-side-list,
body.site-community-hub .friend-list {
  display: grid;
  gap: 8px;
}

body.site-community-hub .community-side-row {
  display: flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 850;
  text-align: left;
}

body.site-community-hub .community-side-row:hover,
body.site-community-hub .community-side-row:focus-visible,
body.site-community-hub .community-side-row.is-active {
  border-color: rgba(139, 191, 152, 0.28);
  background: rgba(139, 191, 152, 0.11);
  color: var(--text-strong);
  outline: none;
}

body.site-community-hub .community-discover-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-radius: 8px;
  padding: 0 4px 0 10px;
}

body.site-community-hub .community-discover-row span {
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.site-community-hub .community-discover-row em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

body.site-community-hub .community-discover-row button {
  min-height: 28px;
  border: 1px solid rgba(139, 191, 152, 0.32);
  border-radius: 8px;
  background: rgba(139, 191, 152, 0.12);
  color: var(--text-strong);
  padding: 0 9px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
}

body.site-community-hub .friend-page {
  display: grid;
  gap: 14px;
  width: min(100%, 980px);
}

body.site-community-hub .friend-tab-panel,
body.site-community-hub .friend-follow-panel {
  width: 100%;
}

body.site-community-hub .friend-stats-grid,
body.site-community-hub .friend-follow-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

body.site-community-hub .friend-follow-summary {
  grid-template-columns: repeat(2, minmax(0, 150px)) auto;
  align-items: stretch;
}

body.site-community-hub .friend-stats-grid article,
body.site-community-hub .friend-follow-summary article {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px;
}

body.site-community-hub .friend-stats-grid span,
body.site-community-hub .friend-follow-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

body.site-community-hub .friend-stats-grid strong,
body.site-community-hub .friend-follow-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--text-strong);
  font-size: 1.45rem;
  line-height: 1;
}

body.site-community-hub .friend-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

body.site-community-hub .friend-tools input,
body.site-community-hub .friend-follow-add-form select,
body.site-community-hub .friend-follow-add-form input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-strong);
  padding: 0 10px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 780;
}

body.site-community-hub .friend-tools input::placeholder,
body.site-community-hub .friend-follow-add-form input::placeholder {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

body.site-community-hub .friend-filter-group {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 3px;
}

body.site-community-hub .friend-filter-group button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 9px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

body.site-community-hub .friend-filter-group button:hover,
body.site-community-hub .friend-filter-group button.is-active {
  background: rgba(139, 191, 152, 0.14);
  color: var(--text-strong);
}

body.site-community-hub .friend-add-form,
body.site-community-hub .friend-follow-add-form {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 8px;
  margin: 12px 0 0;
}

body.site-community-hub .friend-add-form select,
body.site-community-hub .friend-add-form input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-strong);
  padding: 0 10px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 780;
}

body.site-community-hub .friend-add-form input::placeholder {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

body.site-community-hub .friend-add-form .forum-action-btn,
body.site-community-hub .friend-follow-add-form .forum-action-btn,
body.site-community-hub .friend-follow-summary .forum-action-btn {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

body.site-community-hub .friend-message {
  min-height: 18px;
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

body.site-community-hub .friend-message.success {
  color: var(--accent-strong);
}

body.site-community-hub .friend-message.error {
  color: #ffb1a7;
}

body.site-community-hub .friend-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.036);
  padding: 8px;
}

body.site-community-hub .friend-row .friend-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.86rem;
}

body.site-community-hub .friend-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.site-community-hub .friend-main strong,
body.site-community-hub .friend-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.site-community-hub .friend-main strong {
  color: var(--text-strong);
  font-size: 0.9rem;
}

body.site-community-hub .friend-main span {
  color: var(--muted);
  font-size: 0.76rem;
}

body.site-community-hub .friend-presence {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

body.site-community-hub .friend-row.is-online .friend-presence {
  border-color: rgba(118, 200, 135, 0.36);
  background: rgba(118, 200, 135, 0.12);
  color: var(--accent-strong);
}

body.site-community-hub .friend-close-btn,
body.site-community-hub .friend-remove-btn {
  justify-self: end;
  min-height: 26px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 850;
  padding: 0 0 0 4px;
  cursor: pointer;
}

body.site-community-hub .friend-close-btn {
  border-left: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  padding: 0 8px;
}

body.site-community-hub .friend-close-btn.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-strong);
}

body.site-community-hub .friend-close-btn:hover,
body.site-community-hub .friend-remove-btn:hover {
  color: var(--text-strong);
}

body.site-community-hub .friend-status-row {
  grid-template-columns: minmax(0, 1fr);
  color: var(--muted);
  font-size: 0.84rem;
}

body.site-community-hub .friend-follow-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

body.site-community-hub .friend-follow-list-card {
  min-width: 0;
}

body.site-community-hub .friend-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

body.site-community-hub .friend-list-head strong {
  color: var(--text-strong);
  font-size: 0.94rem;
}

body.site-community-hub .friend-list-head span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

body.site-community-hub .friend-follow-list {
  display: grid;
  gap: 8px;
}

body.site-community-hub .friend-follow-list .follow-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.036);
  padding: 10px;
}

body.site-community-hub .friend-follow-list .follow-item.is-empty {
  grid-template-columns: 1fr;
  color: var(--muted);
}

body.site-community-hub .friend-follow-list .follow-person,
body.site-community-hub .friend-follow-list .follow-actions,
body.site-community-hub .friend-follow-list .follow-notify-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

body.site-community-hub .friend-follow-list .follow-person > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.site-community-hub .friend-follow-list .follow-person strong,
body.site-community-hub .friend-follow-list .follow-person span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.site-community-hub .friend-follow-list .follow-person strong {
  color: var(--text-strong);
  font-size: 0.88rem;
}

body.site-community-hub .friend-follow-list .follow-person span,
body.site-community-hub .friend-follow-list .follow-notify-toggle {
  color: var(--muted);
  font-size: 0.76rem;
}

body.site-community-hub .friend-follow-list .follow-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.site-community-hub .friend-follow-list .follow-notify-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

html[data-theme="light"] body.site-community-hub .community-hero,
html[data-theme="light"] body.site-community-hub .hub-board-card,
html[data-theme="light"] body.site-community-hub .notice-board-list.forum-list,
html[data-theme="light"] body.site-community-hub .hub-inquiry-board .inquiry-list,
html[data-theme="light"] body.site-community-hub .notice-admin-form,
html[data-theme="light"] body.site-community-hub .hub-inquiry-board .inquiry-composer,
html[data-theme="light"] body.site-community-hub .forum-side-section {
  background: rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] body.site-community-hub .community-board .post-feed-item,
html[data-theme="light"] body.site-community-hub .community-board .post-item,
html[data-theme="light"] body.site-community-hub .hub-inquiry-board .post-item {
  border-bottom-color: rgba(35, 67, 49, 0.14);
}

html[data-theme="light"] body.site-community-hub .community-compose-entry {
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] body.site-community-hub .friend-add-form select,
html[data-theme="light"] body.site-community-hub .friend-add-form input,
html[data-theme="light"] body.site-community-hub .friend-tools input,
html[data-theme="light"] body.site-community-hub .friend-filter-group,
html[data-theme="light"] body.site-community-hub .friend-follow-add-form select,
html[data-theme="light"] body.site-community-hub .friend-follow-add-form input,
html[data-theme="light"] body.site-community-hub .community-chat-form input,
html[data-theme="light"] body.site-community-hub .community-chat-row,
html[data-theme="light"] body.site-community-hub .friend-row,
html[data-theme="light"] body.site-community-hub .friend-stats-grid article,
html[data-theme="light"] body.site-community-hub .friend-follow-summary article,
html[data-theme="light"] body.site-community-hub .friend-follow-list .follow-item {
  background: rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] body.site-community-hub .community-board.hub-board-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 1380px) {
  body.site-community-hub .community-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  }

  body.site-community-hub .community-left-rail {
    display: none;
  }

  body.site-community-hub .community-main-column {
    grid-column: 1;
  }

  body.site-community-hub .community-right-rail {
    grid-column: 2;
    width: 100%;
  }}

@media (max-width: 720px) {
  body.site-community-hub .community-chat-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  body.site-community-hub .community-chat-row time {
    text-align: left;
  }

  body.site-community-hub .community-chat-form {
    grid-template-columns: minmax(0, 1fr);
  }}

@media (max-width: 1020px) {
  body.site-community-hub .community-page-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.site-community-hub .community-right-rail {
    grid-column: 1;
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}

@media (max-width: 760px) {
  body.site-community-hub .community-shell {
    padding-top: 150px;
  }

  body.site-community-hub .community-hero {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  body.site-community-hub .community-hero-mark {
    width: 48px;
    height: 48px;
  }

  body.site-community-hub .community-hero-mark img {
    width: 34px;
    height: 34px;
  }

  body.site-community-hub .community-head-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: stretch;
  }

  body.site-community-hub .hub-board-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.site-community-hub .server-address-copy.compact,
  body.site-community-hub .community-head-actions .forum-action-btn {
    width: 100%;
  }

  body.site-community-hub .community-board .forum-filter-row {
    flex-direction: row;
  }

  body.site-community-hub .community-board .board-filter-main {
    align-items: center;
    padding: 10px 8px;
  }

  body.site-community-hub .community-board .sort-select-wrap {
    flex: 0 0 132px;
    justify-content: center;
    width: auto;
    margin-left: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
    padding: 0 8px;
  }

  body.site-community-hub .community-board .sort-select-wrap span {
    display: none;
  }

  body.site-community-hub .community-board .sort-select-wrap select {
    width: 100%;
    min-width: 0;
  }

  body.site-community-hub .community-right-rail {
    grid-template-columns: 1fr;
  }

  body.site-community-hub .notice-form-grid {
    grid-template-columns: 1fr;
  }

  body.site-community-hub .notice-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.site-community-hub .notice-write-entry {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.site-community-hub .friend-stats-grid,
  body.site-community-hub .friend-follow-summary,
  body.site-community-hub .friend-follow-columns {
    grid-template-columns: 1fr;
  }

  body.site-community-hub .friend-tools,
  body.site-community-hub .friend-add-form,
  body.site-community-hub .friend-follow-add-form {
    grid-template-columns: 1fr;
  }

  body.site-community-hub .friend-filter-group {
    justify-content: stretch;
    width: 100%;
    overflow-x: auto;
  }

  body.site-community-hub .friend-filter-group button {
    flex: 1 0 auto;
  }

  body.site-community-hub .friend-add-form .forum-action-btn,
  body.site-community-hub .friend-follow-add-form .forum-action-btn,
  body.site-community-hub .friend-tools .forum-action-btn,
  body.site-community-hub .friend-follow-summary .forum-action-btn {
    width: 100%;
  }

  body.site-community-hub .notice-board-list .forum-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }}

@media (max-width: 520px) {
  body.site-community-hub .community-hero {
    grid-template-columns: 1fr;
  }

  body.site-community-hub .community-hero-mark {
    display: none;
  }

  body.site-community-hub .community-board .post-feed-item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 12px;
  }}
/* Inquiry center refresh */
body.site-community-hub .hub-inquiry-board .inquiry-composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 132px auto !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 12px !important;
}

body.site-community-hub .hub-inquiry-board .inquiry-composer input,
body.site-community-hub .hub-inquiry-board .inquiry-composer select {
  min-height: 42px !important;
}

body.site-community-hub .hub-inquiry-board .inquiry-composer textarea {
  grid-column: 1 / -1 !important;
  min-height: 148px !important;
  resize: vertical;
}

body.site-community-hub .hub-inquiry-board #inquiry-message {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

body.site-community-hub .inquiry-row {
  gap: 8px !important;
}

body.site-community-hub .inquiry-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

body.site-community-hub .inquiry-row-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.site-community-hub .inquiry-visibility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 1px solid rgba(139, 191, 152, 0.28);
  border-radius: 999px;
  background: rgba(139, 191, 152, 0.10);
  color: var(--accent-strong);
  padding: 0 9px;
  font-size: 0.74rem;
  font-weight: 950;
  white-space: nowrap;
}

body.site-community-hub .inquiry-visibility.is-private {
  border-color: rgba(215, 170, 100, 0.32);
  background: rgba(215, 170, 100, 0.10);
  color: var(--warning);
}

body.site-community-hub .inquiry-row-meta {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

@media (max-width: 720px) {
  body.site-community-hub .hub-inquiry-board .inquiry-composer {
    grid-template-columns: 1fr !important;
  }}

/* Community list rail placement and slight feed widening.
   Track 1 was reserved for the left rail, but the rail is position:fixed and the
   shell margin (--community-active-left-rail-width + gap) already clears it, so the
   reserved track is collapsed to 0 (otherwise it double-counts -> huge feed gap).
   Items keep their column numbers (left:1 fixed/ignored, main:2, right:3). */
html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-page-layout,
html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-page-layout {
  grid-template-columns: 0 minmax(0, 1fr) 280px !important;
  gap: 18px !important;
}

html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail,
html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  justify-items: stretch !important;
  width: 100% !important;
}

html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-main-column,
html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-main-column {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0;
}

html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-right-rail,
html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-right-rail {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: grid !important;
  justify-items: stretch !important;
  width: 100% !important;
}

html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-right-rail .community-ad-card,
html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-right-rail .community-ad-card {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 1380px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-main-column {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-right-rail {
    display: none !important;
  }

  /* Primary nav rail stays visible (it is the only navigation now). */
  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail {
    display: grid !important;
  }}

@media (max-width: 1020px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-page-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-main-column {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 1;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-right-rail {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 2;
    position: static;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail {
    grid-column: 1 !important;
    grid-row: auto !important;
    display: grid !important;
    order: 0;
    position: static !important;
    top: auto !important;
  }}

/* Match the hub post detail width to the write/detail article width. */
html body.site-community-hub.is-community-post-detail .community-shell,
html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-shell {
  width: min(calc(100% - 16px), 920px) !important;
  max-width: 920px !important;
}

html body.site-community-hub.is-community-post-detail .community-page-layout,
html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-page-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
}

html body.site-community-hub.is-community-post-detail .community-left-rail,
html body.site-community-hub.is-community-post-detail .community-right-rail,
html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-left-rail,
html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-right-rail {
  display: none !important;
}

html body.site-community-hub.is-community-post-detail .community-main-column,
html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-main-column {
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
}

html body.site-community-hub.is-community-post-detail #app-view-post,
html body.site-community-hub.is-community-post-detail .post-detail-layout,
html body.site-community-hub.is-community-post-detail .post-detail,
html[data-nav-align="center"] body.site-community-hub.is-community-post-detail #app-view-post,
html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .post-detail-layout,
html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .post-detail {
  width: 100% !important;
  max-width: 100% !important;
}

/* Integrated community rail: attach the left rail to the header edge. */
body.site-community-hub {
  --community-integrated-rail-width: 302px;
  --community-integrated-rail-gap: 22px;
  --community-integrated-content-max: 1280px;
}

@media (min-width: 1181px) {
  html body.site-community-hub .community-shell,
  html[data-nav-align="center"] body.site-community-hub .community-shell {
    box-sizing: border-box !important;
    width: min(
      calc(100% - var(--community-integrated-rail-width) - var(--community-integrated-rail-gap) - 18px),
      var(--community-integrated-content-max)
    ) !important;
    max-width: var(--community-integrated-content-max) !important;
    margin-right: 18px !important;
    margin-left: calc(var(--community-integrated-rail-width) + var(--community-integrated-rail-gap)) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail,
  html body.site-community-hub.is-community-post-detail .community-shell .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-shell .community-left-rail {
    position: fixed !important;
    inset: var(--nav-height, 74px) auto 0 0 !important;
    z-index: 64;
    display: grid !important;
    align-content: start;
    gap: 0 !important;
    box-sizing: border-box;
    width: var(--community-integrated-rail-width) !important;
    max-width: var(--community-integrated-rail-width) !important;
    border-right: 1px solid var(--line-strong);
    background: rgba(9, 12, 11, 0.90);
    backdrop-filter: blur(18px);
    padding: 20px 18px 34px !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html[data-theme="light"] body.site-community-hub .community-shell .community-left-rail,
  html[data-theme="light"] body.site-community-hub.is-community-post-detail .community-shell .community-left-rail {
    background: rgba(255, 255, 255, 0.90) !important;
    border-right-color: rgba(31, 42, 36, 0.13) !important;
  }

  html body.site-community-hub .community-left-rail .forum-side-section,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail .forum-side-section {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 18px 6px;
  }

  html body.site-community-hub .community-left-rail .side-title,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail .side-title {
    margin-bottom: 12px;
    color: var(--muted);
  }

  html body.site-community-hub .community-left-rail .side-title strong,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail .side-title strong {
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  html body.site-community-hub .community-left-rail :is(.side-link-row, .friend-row, .forum-row, .post-item),
  html[data-nav-align="center"] body.site-community-hub .community-left-rail :is(.side-link-row, .friend-row, .forum-row, .post-item) {
    border-radius: 8px;
    background: transparent;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
    gap: 18px !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-main-column {
    grid-column: 1 !important;
    width: 100% !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-right-rail {
    grid-column: 2 !important;
    display: grid !important;
    width: 100% !important;
  }

  html body.site-community-hub.is-community-post-detail .community-shell,
  html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-shell {
    width: min(
      calc(100% - var(--community-integrated-rail-width) - var(--community-integrated-rail-gap) - 18px),
      920px
    ) !important;
    max-width: 920px !important;
    margin-right: auto !important;
    margin-left: calc(var(--community-integrated-rail-width) + var(--community-integrated-rail-gap)) !important;
  }

  html body.site-community-hub.is-community-post-detail .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-page-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  html body.site-community-hub.is-community-post-detail .community-main-column,
  html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-main-column {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body.site-community-hub.is-community-post-detail .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-right-rail {
    display: none !important;
  }}

@media (max-width: 1180px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail,
  html body.site-community-hub.is-community-post-detail .community-shell .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub.is-community-post-detail .community-shell .community-left-rail {
    position: static !important;
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    gap: 10px !important;
    order: 3;
    width: 100% !important;
    max-width: none !important;
  }}

/* 2026-06-08: sidebar-native community rail and left-attached feed. */
body.site-community-hub {
  --community-integrated-rail-width: 334px;
  --community-integrated-rail-gap: 18px;
  --community-integrated-content-max: 1580px;
}

@media (min-width: 1181px) {
  html body.site-community-hub .community-shell,
  html[data-nav-align="center"] body.site-community-hub .community-shell {
    box-sizing: border-box !important;
    width: min(
      calc(100vw - var(--community-integrated-rail-width) - var(--community-integrated-rail-gap) - 18px),
      var(--community-integrated-content-max)
    ) !important;
    max-width: var(--community-integrated-content-max) !important;
    margin-right: auto !important;
    margin-left: calc(var(--community-integrated-rail-width) + var(--community-integrated-rail-gap)) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 344px) !important;
    gap: 22px !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-main-column {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-right-rail {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: 100% !important;
  }

  html body.site-community-hub .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail {
    position: fixed !important;
    inset: var(--nav-height, 74px) auto 0 0 !important;
    z-index: 64;
    display: block !important;
    box-sizing: border-box !important;
    width: var(--community-integrated-rail-width) !important;
    max-width: var(--community-integrated-rail-width) !important;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.020), rgba(255, 255, 255, 0.006)),
      color-mix(in srgb, var(--bg) 90%, #000 10%);
    padding: 26px 16px 36px !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 195, 188, 0.52) transparent;
  }

  html body.site-community-hub .community-left-rail::-webkit-scrollbar {
    width: 10px;
  }

  html body.site-community-hub .community-left-rail::-webkit-scrollbar-track {
    background: transparent;
  }

  html body.site-community-hub .community-left-rail::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(184, 195, 188, 0.46);
    background-clip: content-box;
  }

  html body.site-community-hub .community-left-rail::-webkit-scrollbar-thumb:hover {
    background: rgba(222, 238, 229, 0.64);
    background-clip: content-box;
  }

  html body.site-community-hub .community-left-rail .forum-side-section,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail .forum-side-section {
    border: 0 !important;
    border-top: 1px solid rgba(225, 233, 227, 0.13) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 18px 0 !important;
  }

  html body.site-community-hub .community-left-rail .forum-side-section:first-child,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail .forum-side-section:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  html body.site-community-hub .community-left-rail .side-title,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail .side-title {
    min-height: auto;
    margin: 0 0 10px !important;
  }

  html body.site-community-hub .community-left-rail .side-title strong,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail .side-title strong {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  html body.site-community-hub .community-left-rail :is(.community-side-list, .side-link-list, .forum-list),
  html[data-nav-align="center"] body.site-community-hub .community-left-rail :is(.community-side-list, .side-link-list, .forum-list) {
    gap: 4px !important;
  }

  html body.site-community-hub .community-left-rail :is(.community-side-row, .side-link-row, .community-discover-row),
  html[data-nav-align="center"] body.site-community-hub .community-left-rail :is(.community-side-row, .side-link-row, .community-discover-row) {
    min-height: 38px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text);
    padding: 0 12px !important;
  }

  html body.site-community-hub .community-left-rail :is(.community-side-row, .side-link-row):hover,
  html body.site-community-hub .community-left-rail :is(.community-side-row, .side-link-row):focus-visible,
  html body.site-community-hub .community-left-rail .community-side-row.is-active,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail :is(.community-side-row, .side-link-row):hover,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail :is(.community-side-row, .side-link-row):focus-visible,
  html[data-nav-align="center"] body.site-community-hub .community-left-rail .community-side-row.is-active {
    background: rgba(139, 191, 152, 0.12) !important;
    color: var(--text-strong);
    outline: none;
  }

  html body.site-community-hub .community-left-rail :is(.forum-row, .post-item),
  html[data-nav-align="center"] body.site-community-hub .community-left-rail :is(.forum-row, .post-item) {
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }}

/* Final gap removal: the fixed rail must not leave a phantom grid column. */
@media (min-width: 1181px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell {
    width: calc(100vw - var(--community-integrated-rail-width)) !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: var(--community-integrated-rail-width) !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 344px) !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-main-column,
  html body.site-community-hub:not(.is-community-post-detail) .hub-channel,
  html body.site-community-hub:not(.is-community-post-detail) .hub-board-head,
  html body.site-community-hub:not(.is-community-post-detail) .community-board.hub-board-card,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .hub-channel,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .hub-board-head,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-board.hub-board-card {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-right-rail {
    grid-column: 2 !important;
  }
}

/* Final rail layout: keep the sidebar in the grid so no empty column can remain. */
@media (min-width: 1181px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 18px !important;
    padding-left: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    display: grid !important;
    grid-template-columns: var(--community-integrated-rail-width) minmax(0, 1fr) minmax(300px, 344px) !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail {
    position: sticky !important;
    inset: auto !important;
    top: var(--nav-height, 74px) !important;
    z-index: 64 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    align-self: start !important;
    box-sizing: border-box !important;
    width: var(--community-integrated-rail-width) !important;
    max-width: var(--community-integrated-rail-width) !important;
    height: calc(100svh - var(--nav-height, 74px)) !important;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.020), rgba(255, 255, 255, 0.006)),
      color-mix(in srgb, var(--bg) 90%, #000 10%);
    padding: 26px 16px 36px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-main-column {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-right-rail {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: 100% !important;
  }
}

/* 2026-06-08: restore breathing room and add a collapsible left rail. */
body.site-community-hub {
  --community-main-rail-gap: 34px;
}

@media (min-width: 1181px) {
  body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    grid-template-columns: var(--community-integrated-rail-width) minmax(0, 1fr) minmax(300px, 344px) !important;
    column-gap: var(--community-main-rail-gap) !important;
    row-gap: 18px !important;
  }

  body.site-community-hub:not(.is-community-post-detail) .community-shell,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell {
    padding-right: 18px !important;
    padding-left: 0 !important;
  }}

/* 2026-06-08: keep the integrated rail off the viewport edge and away from content. */
body.site-community-hub {
  --community-outer-left-pad: 28px;
  --community-main-rail-gap: 48px;
}

@media (min-width: 1181px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell {
    width: calc(100vw - var(--community-outer-left-pad)) !important;
    margin-right: 0 !important;
    margin-left: var(--community-outer-left-pad) !important;
    padding-right: 18px !important;
    padding-left: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    column-gap: var(--community-main-rail-gap) !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail {
    justify-self: start !important;
    padding: 22px 20px 36px 22px !important;
    margin-left: 0 !important;
    border-right-color: rgba(225, 233, 227, 0.1) !important;
    transform: none !important;
    scrollbar-gutter: stable;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-main-column {
    min-width: 0 !important;
    margin-left: 0 !important;
  }}

@media (max-width: 760px) {
  body.site-community-hub {
    --community-outer-left-pad: 0px;
    --community-main-rail-gap: 18px;
  }}

@media (min-width: 1181px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell {
    box-sizing: border-box !important;
    width: min(100%, calc(
      var(--community-left-rail-width)
      + var(--community-feed-max-width)
      + var(--community-right-rail-width)
      + (var(--community-layout-gap) * 2)
      + 36px
    )) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    display: grid !important;
    grid-template-columns:
      minmax(240px, var(--community-left-rail-width))
      minmax(0, var(--community-feed-max-width))
      minmax(260px, var(--community-right-rail-width)) !important;
    justify-content: center !important;
    column-gap: var(--community-layout-gap) !important;
    row-gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail {
    position: sticky !important;
    top: calc(var(--nav-height, 74px) + 16px) !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    align-self: start !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100svh - var(--nav-height, 74px) - 34px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008)),
      rgba(16, 25, 21, 0.72) !important;
    padding: 14px 16px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-main-column {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: var(--community-feed-max-width) !important;
    min-width: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-right-rail {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: grid !important;
    width: 100% !important;
    max-width: var(--community-right-rail-width) !important;
    justify-self: stretch !important;
  }}

body.site-community-hub .community-board .post-feed-item,
body.site-community-hub .community-board .post-item {
  max-width: 100%;
}

body.site-community-hub .community-board .post-feed-item .post-summary {
  max-width: min(68ch, 100%);
}

body.site-community-hub .post-feed-main {
  max-width: 100%;
}

body.site-community-hub .community-map-card {
  display: grid;
  gap: 10px;
  overflow: hidden;
}

body.site-community-hub .community-map-frame-wrap {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 190px;
  border: 1px solid rgba(225, 233, 227, 0.13);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

body.site-community-hub .community-map-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

body.site-community-hub .community-compose-entry.is-disabled {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.032);
  color: var(--muted-2);
  cursor: not-allowed;
}
body.site-community.community-guest-readonly #inquiry-form,
body.site-community.community-guest-readonly .community-chat-form,
body.site-community.community-guest-readonly .friend-add-form,
body.site-community.community-guest-readonly .friend-follow-add-form {
  display: none !important;
}

@media (max-width: 1180px) {
  body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
    gap: 18px !important;
  }

  body.site-community-hub:not(.is-community-post-detail) .community-left-rail {
    grid-column: 1 / -1 !important;
    position: static !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    order: 3;
  }}

@media (max-width: 920px) {
  body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.site-community-hub:not(.is-community-post-detail) .community-right-rail {
    grid-column: 1 !important;
    max-width: none !important;
  }}

/* Community hub layout tokens. Canonical widths live in the block tagged
   2026-06-16 below (left 252 / feed 1080 / right 280 win, last-defined). */
body.site-community-hub {
  --community-layout-gap: 22px;
  --community-rail-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008)),
    rgba(16, 25, 21, 0.72);
}

@media (min-width: 1181px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell {
    box-sizing: border-box !important;
    width: min(100%, calc(
      var(--community-left-rail-width)
      + var(--community-feed-max-width)
      + var(--community-right-rail-width)
      + (var(--community-layout-gap) * 2)
      + 36px
    )) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    display: grid !important;
    grid-template-columns:
      var(--community-left-rail-width)
      minmax(0, var(--community-feed-max-width))
      minmax(260px, var(--community-right-rail-width)) !important;
    align-items: start !important;
    justify-content: center !important;
    gap: 18px var(--community-layout-gap) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail {
    position: sticky !important;
    top: calc(var(--nav-height, 74px) + 16px) !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    align-self: start !important;
    justify-self: stretch !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100svh - var(--nav-height, 74px) - 34px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--community-rail-bg) !important;
    padding: 14px 16px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail .forum-side-section,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail .forum-side-section {
    border: 0 !important;
    border-top: 1px solid rgba(225, 233, 227, 0.13) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 16px 0 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail .forum-side-section:first-of-type,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail .forum-side-section:first-of-type {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail .forum-side-section:first-of-type .side-title,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail .forum-side-section:first-of-type .side-title {
    min-height: 38px !important;
    padding-right: 48px !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-main-column {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: var(--community-feed-max-width) !important;
    min-width: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-right-rail {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: var(--community-right-rail-width) !important;
    justify-self: stretch !important;
  }}

@media (max-width: 1180px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail {
    position: static !important;
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--community-rail-bg) !important;
    padding: 14px !important;
    overflow: visible !important;
  }}

/* 2026-06-15: attach the desktop left rail to the top navigation bar.
   2026-06-17: unify on the ACTUAL rendered rail width (--community-integrated-rail-width,
   which wins via a higher-specificity rule). Was --community-left-rail-width (252px),
   which made the feed shell margin assume 252 while the rail is really 334 -> the shell
   underlapped the rail by ~60px (masked by an empty grid track). Now consistent. */
body.site-community-hub {
  --community-active-left-rail-width: var(--community-integrated-rail-width);
  --community-connected-nav-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
    rgba(9, 12, 11, 0.90);
}

@media (min-width: 1181px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell {
    box-sizing: border-box !important;
    width: min(
      calc(100vw - var(--community-active-left-rail-width) - var(--community-layout-gap)),
      calc(var(--community-feed-max-width) + var(--community-right-rail-width) + var(--community-layout-gap) + 36px)
    ) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: calc(var(--community-active-left-rail-width) + var(--community-layout-gap)) !important;
    padding-right: 18px !important;
    padding-left: 0 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-page-layout,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-page-layout {
    grid-template-columns:
      minmax(0, var(--community-feed-max-width))
      minmax(260px, var(--community-right-rail-width)) !important;
    justify-content: start !important;
    column-gap: var(--community-layout-gap) !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail {
    position: fixed !important;
    inset: var(--nav-height, 74px) auto 0 0 !important;
    z-index: 29 !important;
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    width: var(--community-active-left-rail-width) !important;
    min-width: var(--community-active-left-rail-width) !important;
    max-width: var(--community-active-left-rail-width) !important;
    height: auto !important;
    max-height: none !important;
    border: 0 !important;
    border-right: 1px solid rgba(225, 233, 227, 0.105) !important;
    border-radius: 0 !important;
    background: var(--community-connected-nav-bg) !important;
    padding: 14px 16px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-main-column,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-main-column {
    grid-column: 1 !important;
  }

  html body.site-community-hub:not(.is-community-post-detail) .community-right-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-right-rail {
    grid-column: 2 !important;
  }}

html[data-theme="light"] body.site-community-hub {
  --community-connected-nav-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.38)),
    rgba(255, 255, 255, 0.90);
}

/* ============================================================
   Left sidebar primary navigation (icon nav, X/Reddit style)
   ============================================================ */
body.site-community-hub .community-left-rail {
  gap: 6px !important;
  align-content: start;
}

/* 2026-06-16: wider feed + reliable rail scroll + top-bar compose button. */
body.site-community-hub {
  --community-left-rail-width: 252px;
  --community-feed-max-width: 1080px;
  --community-right-rail-width: 280px;
}

@media (min-width: 1181px) {
  /* Give the fixed left rail a definite height so a long list always scrolls. */
  html body.site-community-hub:not(.is-community-post-detail) .community-left-rail,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-left-rail {
    height: calc(100svh - var(--nav-height, 74px)) !important;
    max-height: calc(100svh - var(--nav-height, 74px)) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }}

/* Compose ("글쓰기") button promoted to the top navigation bar. */
.nav-compose-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-compose-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 2026-06-16: center the feed on screen (clamped so it never slides under the
   fixed rail), and right-align each post's meta (category · author · time). */
@media (min-width: 1181px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell,
  html[data-nav-align="center"] body.site-community-hub:not(.is-community-post-detail) .community-shell {
    --rail: var(--community-active-left-rail-width);
    --gap: var(--community-layout-gap);
    --block: calc(var(--community-feed-max-width) + var(--community-right-rail-width) + var(--gap));
    --shellw: min(var(--block), calc(100vw - var(--rail) - var(--gap) * 2));
    width: var(--shellw) !important;
    max-width: none !important;
    margin-left: max(calc(var(--rail) + var(--gap)), calc((100vw - var(--shellw)) / 2)) !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Post meta (장소 · 저자 · 일시) sits on the right of each row. */
body.site-community-hub .community-board .post-feed-item .post-feed-meta {
  justify-content: flex-end;
  text-align: right;
}

/* 2026-06-16: real full-screen chat (Discord-style) when the chat channel is
   active — fills the area right of the fixed left nav, not a small SNS window. */
@media (min-width: 1181px) {
  body.site-community-hub[data-community-channel="chat"] .chat-hub {
    position: fixed;
    /* Start exactly where the fixed left rail ends. The rail's effective width is
       --community-integrated-rail-width (a higher-specificity rule wins over the
       252px --community-active-left-rail-width), so match it to avoid overlap. */
    inset: var(--nav-height, 74px) 0 0 var(--community-integrated-rail-width, 334px);
    height: auto;
    min-height: 0;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    z-index: 25;
    background: var(--surface-solid);
    grid-template-columns: minmax(300px, 360px) 1fr;
  }

  body.site-community-hub[data-community-channel="chat"] .community-right-rail {
    display: none !important;
  }
}

/* A touch more height for the in-flow chat box on tablet widths. */
@media (min-width: 721px) and (max-width: 1180px) {
  body.site-community-hub .chat-hub {
    height: min(80vh, 820px);
  }
}

/* Mobile bottom tab bar — pin the icon rail to the viewport bottom (overrides
   the in-flow mobile rail rules above). Tab/icon styling is in muckwater-ui.css. */
@media (max-width: 768px) {
  html body.site-community-hub:not(.is-community-post-detail) .community-shell .community-left-rail {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 60 !important;
    display: flex !important;
    align-items: stretch !important;
    order: 9 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: var(--surface-solid, #121714) !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.32) !important;
  }
}

/* Chat: the floating theme toggle (z-index 80, bottom-right) sits on top of the
   composer's 전송 button (chat-hub is z-index 25), eating the click so messages
   can't be sent. Hide the toggle while the chat channel is open (all widths). */
body.site-community-hub[data-community-channel="chat"] .floating-theme-toggle {
  display: none !important;
}