/**
 * NableU maintainer note
 * Purpose: Presents the authenticated Community text wall with explicit audience, resilient forms, readable latest-first posts, and narrow-screen/high-contrast support.
 */

.community-live-band,
.community-composer-panel {
  display: grid;
  align-items: flex-start;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--bg-panel);
}

.community-live-band {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-width: 2px;
  border-color: var(--accent);
}

.community-live-band > div,
.community-composer-panel > div {
  min-width: 0;
}

.community-live-band h2,
.community-composer-panel h2 {
  margin-bottom: 8px;
}

.community-composer-panel {
  max-width: 840px;
  border-left: 5px solid var(--accent);
}

.community-composer,
.community-edit-form,
.community-feed-list {
  display: grid;
  gap: 14px;
}

.community-composer textarea,
.community-edit-form textarea,
.community-post-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.community-composer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-muted);
}

.community-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.community-audience-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  color: var(--text-muted);
  background: var(--secondary-surface);
}

.community-draft-reminder {
  max-width: 840px;
}

.community-composer-meta p,
.community-composer-meta output,
.community-edit-form output {
  margin: 0;
}

.community-audience-confirmation {
  padding: 14px;
  border: 1px solid var(--border-medium);
  border-left: 5px solid var(--warning);
  border-radius: 12px;
  background: var(--secondary-surface);
}

.community-real-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 24px;
}

/* Community owns one readable workspace; explanations no longer reserve a rail. */
.status-scan-row:empty,
.community-workspace [hidden] {
  display: none !important;
}

.community-workspace {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 980px;
  min-width: 0;
}

.community-activity-list { display: grid; margin-top: 18px; }
.community-activity-item { padding: 18px 0; border-bottom: 1px solid var(--border-medium); min-width: 0; }
.community-activity-item header { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.community-activity-item p { margin: 8px 0; }
.community-activity-body { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.community-activity-item h4 { margin: 12px 0 6px; }
@media (forced-colors: active) {
  .community-view-nav button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
}

.community-workspace-heading h2,
.community-wall-heading h3,
.community-feed-header h3 {
  margin: 0;
}

.community-view-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.community-view-nav button {
  min-height: 44px;
  white-space: normal;
}

.community-view-nav button[aria-pressed="true"] {
  color: var(--accent-active-text);
  background: var(--accent);
  border-color: var(--accent);
}

.community-wall-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-start;
  justify-content: space-between;
}

.community-wall-heading > div:first-child {
  flex: 1 1 260px;
}

.community-audience-label {
  max-width: 68ch;
  color: var(--text-muted);
  margin: 8px 0 0;
}

.community-workspace .community-primary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.community-workspace .community-primary-actions button {
  width: auto;
}

.community-workspace .community-groups {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 16px;
}

.community-group-search { max-width: 480px; }
.community-group-search input { width: 100%; }

.community-group-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.community-group-row > div { min-width: 0; }
.community-group-row > button { flex: 0 0 auto; min-height: 44px; }
.community-group-row h3 { margin: 0 0 4px; }
.community-group-row p { margin: 6px 0; max-width: 68ch; }
.community-group-row .community-group-meta { color: var(--text-muted); }

.community-about {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

.community-about summary,
[data-community-support] summary {
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
}

.community-about > p { max-width: 68ch; }
.community-about > label { display: grid; gap: 8px; margin: 14px 0; max-width: 480px; }
.community-about input { width: 100%; }
.community-workspace .community-locality-settings { margin-top: 12px; }
.community-workspace .community-composer-panel { margin-top: 16px; }
.community-workspace .form-message:empty { display: none; }
[data-community-support] { min-width: 0; }
[data-community-support] > .card { padding: 0; border: 0; background: transparent; box-shadow: none; }
[data-community-support] .field-help { max-width: 72ch; }

:root[data-theme="high-contrast"] .community-view-nav button[aria-pressed="true"] {
  outline: 2px solid var(--text-main);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .community-group-row { flex-wrap: wrap; }
  .community-workspace .community-groups-heading button { width: auto; align-self: flex-start; }
  .community-workspace .community-feed-header { flex-wrap: wrap; gap: 8px; }
}

.community-feed-header {
  align-items: flex-start;
}

.community-feed-header .count-pill {
  flex: 0 0 auto;
  align-self: flex-start;
  white-space: nowrap;
}

.community-feed-list {
  margin-top: 16px;
}

.community-real-post header {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.community-author-mark {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--border-medium);
  border-radius: 50%;
  color: var(--text-main);
  background: var(--secondary-surface);
  font-weight: 800;
}

.community-post-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

.community-real-post footer .control-group {
  flex: 0 0 auto;
}

.community-load-more {
  justify-self: center;
  margin-top: 18px;
}

.community-hub-card article {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.community-locality-settings {
  overflow: clip;
  border: 1px solid var(--border-medium);
  border-radius: 18px;
  background: var(--bg-card);
}

.community-groups {
  display: grid;
  gap: 20px;
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--border-medium);
  border-radius: 18px;
  background: var(--bg-panel);
}

.community-groups-heading {
  align-items: flex-start;
}

.community-groups-heading > div {
  min-width: 0;
}

.community-group-editor {
  max-width: none;
}

.community-group-editor form,
.community-group-list,
.community-group-card,
[data-community-group-topic-options] {
  display: grid;
  gap: 14px;
}

.community-group-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.support-nablehood-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
#support-nablehood-panel, #support-nablehood-panel form, #support-nablehood-panel .community-group-card { min-width: 0; }
#support-nablehood-panel, #support-nablehood-panel .card { grid-template-columns: minmax(0, 1fr); }
#support-nablehood-panel > *, #support-nablehood-panel .section-heading > *, #support-nablehood-panel label { min-width: 0; }
#support-nablehood-panel .control-group { flex-wrap: wrap; }
#support-nablehood-panel input:not([type="checkbox"]), #support-nablehood-panel textarea, #support-nablehood-panel select { min-width: 0; width: 100%; box-sizing: border-box; }
#support-nablehood-panel button { min-height: 2.5rem; white-space: normal; }
#support-nablehood-panel p, #support-nablehood-panel h4 { overflow-wrap: anywhere; }
#support-nablehood-panel details { margin-block: 1rem; }
#support-nablehood-panel summary { cursor: pointer; padding-block: 0.6rem; }
@media (max-width: 560px) {
  #support-nablehood-panel .section-heading { flex-direction: column; align-items: stretch; }
  #support-nablehood-panel .notification-time-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  #support-nablehood-panel .community-group-card, #support-nablehood-panel button { border: 1px solid ButtonText; }
  #support-nablehood-panel :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

.community-group-columns > section {
  min-width: 0;
}

.community-group-card {
  padding: 16px;
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  background: var(--bg-card);
}

.community-group-card header,
.community-group-card footer,
.community-group-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.community-group-card header > div,
.community-group-card footer > div {
  min-width: 0;
}

.community-group-card h3,
.community-group-card p,
.community-group-card .eyebrow,
.community-group-boundary {
  margin: 0;
}

.community-group-card footer {
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.community-group-meta {
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.community-group-boundary {
  padding: 10px 12px;
  border-left: 4px solid var(--accent);
  color: var(--text-muted);
  background: var(--secondary-surface);
}

.community-locality-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.community-locality-settings > summary::-webkit-details-marker {
  display: none;
}

.community-locality-settings > summary span:first-child {
  display: grid;
  gap: 4px;
}

.community-locality-settings > summary small {
  color: var(--text-muted);
}

.community-locality-settings[open] > summary {
  border-bottom: 1px solid var(--line);
}

:root[data-theme="high-contrast"] .community-live-band,
:root[data-theme="high-contrast"] .community-composer-panel,
:root[data-theme="high-contrast"] .community-audience-confirmation,
:root[data-theme="high-contrast"] .community-audience-summary,
:root[data-theme="high-contrast"] .community-real-post,
:root[data-theme="high-contrast"] .community-locality-settings,
:root[data-theme="high-contrast"] .community-groups,
:root[data-theme="high-contrast"] .community-group-card {
  border-color: #ffffff;
}

.community-join-request {
  display: grid;
  gap: 0.6rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

[data-community-request-panel] {
  min-width: 0;
  margin-top: 1rem;
}

.community-discussions,
.community-manager {
  width: min(720px, calc(100% - 24px));
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.community-discussions { width: min(850px, calc(100% - 24px)); max-height: calc(100dvh - 24px); box-sizing: border-box; }
.community-discussions-page { width: 100%; max-height: none; overflow: visible; }
.community-discussions [hidden] { display: none !important; }
.community-discussions [data-discussion-content] { min-width: 0; }
.community-discussions input:not([type="checkbox"]), .community-discussions textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.community-discussions button { white-space: normal; }
.community-discussion-form { display: grid; gap: 0.7rem; min-width: 0; border: 1px solid var(--border-strong); border-radius: 12px; padding: 1rem; margin: 1rem 0; }
.community-discussion-check { display: flex !important; gap: 0.7rem; align-items: flex-start; }
.community-discussion-check input[type="checkbox"] { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; }
.community-discussion-check span { min-width: 0; }
.community-discussion-post { padding: 1rem 0; border-bottom: 1px solid var(--border-strong); }
.community-discussion-post header p { margin: 0.2rem 0; }
.community-discussion-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.community-discussions [data-discussion-groups] { display: grid; gap: 1rem; margin-top: 1rem; }
.community-discussions [data-discussion-status]:empty { display: none; }
.community-discussions .control-group { flex-wrap: wrap; }
.community-discussions > .community-manager-heading { margin-bottom: 0.8rem; }

.community-manager-heading,
.community-manager-member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.community-manager-fields { display: grid; gap: 0.6rem; min-width: 0; }
.community-manager-fields input,
.community-manager-fields textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.community-manager-members { list-style: none; padding: 0; }
.community-manager-member { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.community-manager-member p { margin: 0.25rem 0; }

@media (max-width: 900px) {
  .community-live-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-primary-actions {
    justify-content: flex-start;
  }

  .community-real-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-group-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-real-layout .community-context {
    position: static;
  }
}

@media (max-width: 640px) {
  .community-composer-meta,
  .community-audience-summary,
  .community-real-post footer,
  .community-locality-settings > summary {
    align-items: stretch;
    flex-direction: column;
  }

  .community-primary-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .community-groups-heading,
  .community-group-card header,
  .community-group-card footer {
    align-items: stretch;
    flex-direction: column;
  }

  .community-groups-heading button,
  .community-group-card footer button,
  .community-group-editor .control-group,
  .community-group-editor .control-group button {
    width: 100%;
  }

  .community-primary-actions button {
    width: 100%;
  }

  .community-real-post header {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .community-author-mark {
    width: 42px;
    height: 42px;
  }

  .community-real-post header .status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .community-real-post footer .control-group,
  .community-real-post footer .control-group button,
  .community-composer .control-group,
  .community-composer .control-group button {
    width: 100%;
  }
}