/*
 * DLS Community page-specific Stitch presentation.
 * Source: Stitch project "DLS Community Design System".
 * DLS owns the HTML, state, permissions, copy, and all API-backed values.
 */
:root {
  --sc-primary: #003639;
  --sc-primary-container: #004e53;
  --sc-primary-fixed: #b0edf3;
  --sc-secondary: #575d78;
  --sc-surface: #fff;
  --sc-surface-low: #f0f3ff;
  --sc-surface-container: #e7eeff;
  --sc-text: #0f1c2e;
  --sc-muted: #596578;
  --sc-outline: #dfe5e7;
  --sc-danger: #ba1a1a;
  --sc-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.03);
}

/* Shared shell: exact desktop proportions from the Stitch Home screen. */
.community-app:not(.community-admin-app) .community-topbar {
  grid-template-columns: 280px minmax(320px, 576px) auto !important;
  height: 64px !important;
  padding: 0 24px !important;
  border-bottom: 1px solid #f0f1f3 !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(16px) !important;
}

.community-app:not(.community-admin-app) .community-mobile-brand {
  display: flex !important;
  visibility: visible !important;
  width: 256px !important;
  min-width: 256px !important;
  height: 64px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sc-primary) !important;
  font-family: "Hanken Grotesk", Inter, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.community-app:not(.community-admin-app) .community-mobile-brand span {
  display: inline !important;
  visibility: visible !important;
  color: var(--sc-primary) !important;
  opacity: 1 !important;
}

.community-app:not(.community-admin-app) .community-global-search {
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f3f4f6 !important;
  box-shadow: none !important;
}

.community-app:not(.community-admin-app) .community-layout {
  grid-template-columns: 280px minmax(0,760px) 380px !important;
  width: min(100%,1440px) !important;
  background: #fff !important;
}

.community-app:not(.community-admin-app) .community-section-nav {
  gap: 2px !important;
  padding: 24px 16px 32px !important;
}

.community-app:not(.community-admin-app) .community-network-brand {
  display: none !important;
}

.community-app:not(.community-admin-app) .community-view-button,
.community-app:not(.community-admin-app) .community-exit-link {
  min-height: 52px !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  color: var(--sc-secondary) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

.community-app:not(.community-admin-app) .community-view-button:hover,
.community-app:not(.community-admin-app) .community-exit-link:hover {
  background: #f4f5f6 !important;
}

.community-app:not(.community-admin-app) .community-view-button.active {
  color: var(--sc-primary) !important;
  background: transparent !important;
  font-weight: 800 !important;
}

.community-app:not(.community-admin-app) .community-rail-create {
  min-height: 54px !important;
  margin: 18px 0 8px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: var(--sc-shadow) !important;
}

.community-app:not(.community-admin-app) .community-content {
  padding: 32px 32px 88px !important;
}

.community-app:not(.community-admin-app) .community-right-rail {
  gap: 20px !important;
  padding: 32px !important;
  border-left: 1px solid #f0f1f3 !important;
}

.rail-card {
  padding: 20px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  box-shadow: var(--sc-shadow) !important;
}

/* Home / feed */
.community-content[data-community-view="home"] .timeline-header {
  min-height: 50px !important;
  padding: 0 2px 12px !important;
  border: 0 !important;
}

.community-content[data-community-view="home"] .timeline-header strong {
  color: var(--sc-primary) !important;
  font-size: 36px !important;
  line-height: 44px !important;
  font-weight: 800 !important;
}

.community-content[data-community-view="home"] .timeline-header small,
.community-content[data-community-view="home"] .timeline-header > span {
  display: none !important;
}

.community-content[data-community-view="home"] .feed-tabs {
  position: sticky !important;
  top: 64px !important;
  z-index: 10 !important;
  margin: 0 0 24px !important;
  border-bottom: 1px solid #eef0f2 !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(12px) !important;
}

.community-content[data-community-view="home"] .feed-tabs button {
  min-height: 46px !important;
  font-size: 14px !important;
}

.community-content[data-community-view="home"] .discoveries-strip {
  margin: 0 0 24px !important;
}

.community-content[data-community-view="home"] .discoveries-heading strong {
  font-size: 20px !important;
}

.community-content[data-community-view="home"] .mobile-story-item {
  width: 112px !important;
}

.community-content[data-community-view="home"] .mobile-story-item > span {
  width: 112px !important;
  height: 174px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg,#e7eeff,#b0edf3) !important;
  box-shadow: var(--sc-shadow) !important;
}

.community-content[data-community-view="home"] .quick-composer {
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
}

.community-content[data-community-view="home"] .quick-composer > button {
  min-height: 60px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--sc-shadow) !important;
}

.community-post {
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--sc-shadow) !important;
}

.community-post .post-head,
.community-post .post-copy,
.community-post .post-meta,
.community-post .post-engagement,
.community-post .post-actions,
.community-post .teacher-post-tools {
  margin-inline: 20px !important;
}

.community-post .post-head {
  padding-top: 18px !important;
}

.community-post .post-copy h2 {
  font-size: 22px !important;
  line-height: 30px !important;
}

.community-post .post-copy p {
  color: var(--sc-text) !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

.community-post .post-media {
  width: calc(100% - 40px) !important;
  margin: 14px 20px !important;
  border-radius: 12px !important;
}

.community-post .post-actions {
  min-height: 52px !important;
  border-top: 1px solid #eef0f2 !important;
}

/* Individually designed destination pages. */
.community-content[data-community-view]:not([data-community-view="home"]) .community-page-header {
  min-height: 156px !important;
  margin: 0 0 28px !important;
  padding: 28px 30px !important;
  border: 0 !important;
  border-radius: 24px !important;
  color: #fff !important;
  background: linear-gradient(135deg,var(--sc-primary),#075e63) !important;
  box-shadow: 0 18px 42px rgba(0,54,57,.14) !important;
}

.community-content[data-community-view]:not([data-community-view="home"]) .community-page-header h1,
.community-content[data-community-view]:not([data-community-view="home"]) .community-page-header p,
.community-content[data-community-view]:not([data-community-view="home"]) .community-page-header .community-kicker {
  color: #fff !important;
}

.community-content[data-community-view]:not([data-community-view="home"]) .community-page-header h1 {
  margin: 6px 0 !important;
  font-size: 36px !important;
  line-height: 44px !important;
  font-weight: 800 !important;
}

.community-content[data-community-view]:not([data-community-view="home"]) .community-page-header p {
  max-width: 560px !important;
  opacity: .82 !important;
}

.community-content[data-community-view="saved"] .collection-grid,
.community-content[data-community-view="groups"] .card-grid,
.community-content[data-community-view="challenges"] .card-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 20px !important;
}

.collection-card,
.feature-card {
  min-height: 230px !important;
  padding: 24px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  box-shadow: var(--sc-shadow) !important;
}

.collection-card h2,
.feature-card h2 {
  font-size: 22px !important;
  line-height: 30px !important;
}

.community-content[data-community-view="search"] .community-search {
  min-height: 58px !important;
  margin-bottom: 24px !important;
  border-radius: 999px !important;
  background: #f3f4f6 !important;
}

.community-content[data-community-view="search"] .search-groups {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

.community-content[data-community-view="search"] .search-groups > section,
.community-content[data-community-view="notifications"] .notification-list {
  padding: 24px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--sc-shadow) !important;
}

.community-content[data-community-view="profile"] .profile-hero {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: var(--sc-shadow) !important;
}

.community-content[data-community-view="profile"] .profile-cover {
  height: 210px !important;
  background: linear-gradient(125deg,var(--sc-primary),#1a858b 58%,#b0edf3) !important;
}

.community-content[data-community-view="shorts"] {
  min-height: calc(100vh - 64px) !important;
  padding: 24px !important;
  background: #050b12 !important;
}

.community-content[data-community-view="shorts"] .feed-list {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 18px !important;
}

.community-content[data-community-view="shorts"] .community-post {
  color: #fff !important;
  background: #111827 !important;
}

.community-content[data-community-view="shorts"] .community-post * {
  color: inherit !important;
}

/* Teacher screens from dedicated Stitch exports. */
.teacher-hub-header,
.post-analytics-header {
  padding: 30px !important;
  border: 0 !important;
  border-radius: 24px !important;
  color: #fff !important;
  background: linear-gradient(135deg,#11182f,#293554) !important;
  box-shadow: 0 16px 40px rgba(17,24,47,.16) !important;
}

.teacher-hub-header h1,
.post-analytics-header h1 {
  color: #fff !important;
  font-size: 36px !important;
}

.teacher-hub-header p,
.teacher-hub-header .community-kicker,
.post-analytics-header p,
.post-analytics-header .community-kicker {
  color: rgba(255,255,255,.78) !important;
}

.teacher-metric-grid,
.post-analytics-metrics {
  gap: 16px !important;
}

.teacher-metric-card,
.post-analytics-metrics article {
  padding: 20px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  box-shadow: var(--sc-shadow) !important;
}

/* School administrator: dedicated control-center design. */
.community-admin-app {
  background: #f9f9ff !important;
}

.community-admin-app .community-topbar {
  border-bottom: 1px solid var(--sc-outline) !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(14px) !important;
}

.community-admin-app .admin-section-nav {
  gap: 4px !important;
  width: 256px !important;
  padding: 84px 16px 24px !important;
  background: #fff !important;
}

.community-admin-app .community-view-button {
  min-height: 48px !important;
  border-radius: 12px !important;
}

.community-admin-app .community-view-button.active {
  color: var(--sc-primary) !important;
  background: var(--sc-primary-fixed) !important;
}

.community-admin-app .admin-community-content {
  width: min(100%,1184px) !important;
  padding: 32px 32px 64px !important;
}

.community-admin-app .admin-page-heading {
  padding: 32px !important;
  border-radius: 24px !important;
  color: #fff !important;
  background: linear-gradient(135deg,#11182f,#26334f) !important;
  box-shadow: 0 16px 40px rgba(17,24,47,.14) !important;
}

.community-admin-app .admin-page-heading h1,
.community-admin-app .admin-page-heading p,
.community-admin-app .admin-page-heading .community-kicker {
  color: #fff !important;
}

.community-admin-app .admin-metric-card,
.community-admin-app .community-panel,
.community-admin-app .admin-controls-form > section {
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--sc-shadow) !important;
}

.community-admin-app input,
.community-admin-app select,
.community-admin-app textarea,
.community-dialog input,
.community-dialog select,
.community-dialog textarea {
  width: 100% !important;
  min-height: 46px !important;
  padding: 11px 14px !important;
  border: 1px solid var(--sc-outline) !important;
  border-radius: 10px !important;
  color: var(--sc-text) !important;
  background: #fff !important;
  font: 500 15px/22px Inter, sans-serif !important;
  box-shadow: none !important;
}

.community-admin-app textarea,
.community-dialog textarea {
  min-height: 112px !important;
  resize: vertical !important;
}

.community-admin-app input:focus,
.community-admin-app select:focus,
.community-admin-app textarea:focus,
.community-dialog input:focus,
.community-dialog select:focus,
.community-dialog textarea:focus {
  outline: 3px solid rgba(176,237,243,.72) !important;
  border-color: var(--sc-primary) !important;
}

.community-admin-app label,
.community-dialog label {
  color: var(--sc-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Honest live-data empty states. */
.community-empty,
.admin-empty {
  min-height: 220px !important;
  padding: 36px !important;
  border: 1px dashed #cbd5d8 !important;
  border-radius: 16px !important;
  background: #fff !important;
  text-align: center !important;
  box-shadow: none !important;
}

.community-empty h2,
.admin-empty strong {
  color: var(--sc-primary) !important;
}

/* Dialogs use the dedicated Create Post / report / group form language. */
.community-dialog {
  width: min(92vw,680px) !important;
  max-height: 90vh !important;
  padding: 0 !important;
  overflow: auto !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(15,28,46,.24) !important;
}

.community-dialog.wide {
  width: min(94vw,1080px) !important;
}

.community-dialog::backdrop {
  background: rgba(15,28,46,.52) !important;
  backdrop-filter: blur(4px) !important;
}

.community-dialog-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  padding: 22px 24px !important;
  border-bottom: 1px solid var(--sc-outline) !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(12px) !important;
}

.community-dialog .community-form {
  padding: 24px !important;
}

@media (max-width:1180px) and (min-width:801px) {
  .community-app:not(.community-admin-app) .community-layout {
    grid-template-columns: 240px minmax(0,760px) !important;
  }
}

@media (max-width:800px) {
  .community-app:not(.community-admin-app) .community-mobile-brand {
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    font-size: 19px !important;
  }

  .community-app:not(.community-admin-app) .community-content {
    padding: 0 0 82px !important;
  }

  .community-content[data-community-view="home"] .timeline-header {
    padding: 18px 16px 8px !important;
  }

  .community-content[data-community-view="home"] .timeline-header strong {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .community-content[data-community-view="home"] .feed-tabs {
    top: 58px !important;
    margin: 0 0 16px !important;
    overflow-x: auto !important;
  }

  .community-content[data-community-view="home"] .discoveries-strip,
  .community-content[data-community-view="home"] .quick-composer {
    margin-inline: 14px !important;
  }

  .community-content[data-community-view="home"] .feed-list {
    padding: 0 !important;
  }

  .community-post {
    margin: 0 0 10px !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .community-post .post-media {
    width: 100% !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
  }

  .community-content[data-community-view]:not([data-community-view="home"]) {
    padding: 14px 14px 86px !important;
  }

  .community-content[data-community-view]:not([data-community-view="home"]) .community-page-header {
    min-height: 140px !important;
    padding: 22px !important;
    border-radius: 20px !important;
  }

  .community-content[data-community-view]:not([data-community-view="home"]) .community-page-header h1 {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .community-content[data-community-view="saved"] .collection-grid,
  .community-content[data-community-view="groups"] .card-grid,
  .community-content[data-community-view="challenges"] .card-grid,
  .community-content[data-community-view="shorts"] .feed-list {
    grid-template-columns: 1fr !important;
  }

  .community-dialog,
  .community-dialog.wide {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 94vh !important;
    margin: auto 0 0 !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .community-admin-app .admin-community-content {
    padding: 18px 14px 84px !important;
  }
}