/* The System Studio 1.6 — communauté fonctionnelle et sans commandes décoratives. */
.sidebar nav .community-main-nav {
  margin-top: 3px;
  border: 1px solid #293231;
  background: linear-gradient(110deg, #111817, #0d1010);
  color: #d8e2df;
}

.sidebar nav .community-main-nav:hover,
.sidebar nav .community-main-nav.active {
  border-color: #41665d;
  background: linear-gradient(110deg, #172723, #101715);
  box-shadow: inset 2px 0 #78d5b7;
}

.sidebar nav .community-main-nav > span { display: grid; gap: 3px; }
.sidebar nav .community-main-nav > span > small {
  color: #668078;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .1em;
}
.sidebar nav .community-main-nav > b {
  min-width: 24px;
  background: #1c302a;
  color: #8ce7c3;
}

.os-community-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 19px 22px;
  border: 1px solid #2c3d38;
  border-radius: 16px;
  background: linear-gradient(105deg, #111b18, #0c0f0e 72%);
}
.os-community-callout > span {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid #3b5d53;
  border-radius: 13px;
  background: #182c26;
  color: #9de8cf;
  font-size: 17px;
}
.os-community-callout small {
  color: #6f9489;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}
.os-community-callout h2 { margin: 5px 0 3px; font-size: 15px; }
.os-community-callout p { margin: 0; color: #71807b; font-size: 9px; line-height: 1.5; }
.os-community-callout > aside { display: grid; gap: 2px; min-width: 72px; text-align: right; }
.os-community-callout > aside strong { font-size: 22px; }
.os-community-callout > button {
  padding: 10px 13px;
  border: 1px solid #3c5b52;
  border-radius: 9px;
  background: #14221e;
  color: #afe8d5;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.os-community-callout > button:hover { border-color: #68a896; background: #1a3029; color: #fff; }
.os-community-callout button b { margin-left: 7px; }

.community-view .page-head { margin-bottom: 22px; }
.community-switcher { scrollbar-width: thin; }
.community-switcher > button { min-width: 156px; }
.community-switcher > button.active { border-color: #4e8174; background: #152722; }
.community-switcher > button.active > span { background: #21443a; color: #a3efd6; }

.community-kpis article > span {
  color: #646d6a;
  font-size: 7px;
  line-height: 1.35;
}

.campus-sort-label {
  display: grid;
  gap: 5px;
  color: #666d6b;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}
.campus-sort-label select {
  min-width: 150px;
  padding: 8px 29px 8px 10px;
  border: 1px solid #303735;
  border-radius: 8px;
  outline: 0;
  background: #0b0e0d;
  color: #d9dfdd;
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}
.campus-sort-label select:focus { border-color: #5b8b7d; box-shadow: 0 0 0 3px #5b8b7d22; }

.community-search-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 15px 8px;
  padding: 9px 11px;
  border: 1px solid #2b3d38;
  border-radius: 8px;
  background: #101816;
  color: #8d9a96;
  font-size: 8px;
}
.community-search-state button {
  border: 0;
  background: transparent;
  color: #9adbc6;
  font: inherit;
  cursor: pointer;
}

.campus-feed .campus-post {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid #252b29;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.campus-feed .campus-post:hover { background: #111816; }
.campus-feed .campus-post:focus-visible { outline: 2px solid #70bca7; outline-offset: -2px; }
.campus-feed .campus-post > div { min-width: 0; }
.campus-post header b.followed { border-color: #35594f; background: #172a25; color: #86d7bc; }
.campus-post footer { display: flex; flex-wrap: wrap; gap: 11px; }
.campus-post footer > span { color: #6c7572; font-size: 7px; }
.campus-open { align-self: center; color: #7ebba9; font-size: 7px; white-space: nowrap; }

.campus-menu > button.active { background: #17231f; color: #b9dfd3; }
.campus-menu > div button,
.campus-about button {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  border: 1px solid #385148;
  border-radius: 8px;
  background: #14201c;
  color: #a6d9c8;
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}
.campus-menu > div button:hover,
.campus-about button:hover { border-color: #5f8f81; background: #1a2c26; color: #fff; }

.campus-ranking > button {
  width: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #252b29;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.campus-ranking > button:hover strong { color: #9de1cb; }
.campus-ranking > button > span { color: #5d8277; font-size: 8px; }
.campus-ranking > button > div { display: grid; min-width: 0; gap: 4px; }
.campus-ranking > button strong,
.campus-ranking > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campus-ranking > button strong { font-size: 8px; }
.campus-ranking > button small { color: #606966; font-size: 6px; }
.community-side-empty { margin: 12px 0 0; color: #646d6a; font-size: 8px; line-height: 1.5; }
.community-empty { margin: 16px; }

.os-search-none > span { display: block; margin: 7px 0 13px; color: #6c6c73; font-size: 9px; }

@media (max-width: 1100px) {
  .os-community-callout { grid-template-columns: auto minmax(0, 1fr) auto; }
  .os-community-callout > aside { display: none; }
}

@media (max-width: 840px) {
  .sidebar nav .community-main-nav > span > small { display: none; }
  .os-community-callout { grid-template-columns: auto minmax(0, 1fr); }
  .os-community-callout > button { grid-column: 2; justify-self: start; }
  .campus-feed .campus-post { grid-template-columns: 36px minmax(0, 1fr); }
  .campus-open { display: none; }
}

@media (max-width: 560px) {
  .os-community-callout { gap: 12px; padding: 17px; }
  .os-community-callout > span { width: 38px; height: 38px; }
  .community-kpis { grid-template-columns: 1fr 1fr; }
  .campus-feed > header { align-items: stretch; flex-direction: column; gap: 12px; }
  .campus-sort-label select { width: 100%; min-height: 44px; font-size: 12px; }
  .campus-feed .campus-post { padding: 16px 13px; }
  .campus-post footer > span { font-size: 9px; }
}