/* ui08-community: editorial events and BLU leaderboard. Not paid seats. */

.ui08-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem var(--theme-gutter, 1.5rem) 3rem;
  color: #0B2545;
}

.ui08-kicker {
  margin: 0 0 0.35rem;
  color: #134074;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui08-page h1 {
  margin: 0 0 0.6rem;
  color: #0B2545;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  line-height: 1.2;
}

.ui08-lede,
.ui08-page p {
  color: var(--home-muted, #5c6b7a);
  font-size: 1rem;
  line-height: 1.55;
}

.ui08-lede {
  margin: 0 0 0.85rem;
}

.ui08-not-paid {
  margin: 0 0 1.25rem;
  padding: 0 0 0.75rem;
  border-bottom: 2px solid var(--home-line-strong, #c9d4e1);
  color: #0B2545;
  font-weight: 700;
}

.ui08-page h2 {
  margin: 1.5rem 0 0.5rem;
  color: #0B2545;
  font-size: 1.2rem;
  line-height: 1.3;
}

.ui08-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 1.5rem;
}

.ui08-actions .btn {
  text-decoration: none;
}

.ui08-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 0.5rem;
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--home-line, #e3e8ef);
}

.ui08-zones a {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #134074;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ui08-zones a.active {
  color: #0B2545;
  font-weight: 700;
}

.ui08-events-list,
.ui08-community-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ui08-events-list > li {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--home-line, #e3e8ef);
  background: var(--home-surface, #ffffff);
  border-radius: var(--home-radius, 12px);
  box-shadow: var(--home-shadow);
}

.ui08-event-when {
  margin: 0 0 0.2rem;
  color: #134074;
  font-size: 0.92rem;
  font-weight: 700;
}

.ui08-page .ui08-event-title {
  margin: 0;
  color: #0B2545;
  font-size: 1.35rem;
  line-height: 1.25;
}

.ui08-event-where,
.ui08-event-desc,
.ui08-event-byline {
  margin: 0.4rem 0 0;
}

.ui08-event-byline {
  font-size: 0.95rem;
}

.ui08-status {
  margin: 1rem 0;
  color: #0B2545;
}

.ui08-post {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--home-line, #e3e8ef);
}

.ui08-post h2 {
  margin-top: 0;
}

.ui08-post .ui08-actions {
  margin-bottom: 0;
}

.ui08-community-list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--home-line, #e3e8ef);
  border-radius: var(--home-radius, 12px);
  background: var(--home-surface, #ffffff);
  box-shadow: var(--home-shadow);
}

.ui08-order {
  color: var(--home-muted, #5c6b7a);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ui08-who a {
  color: #134074;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.ui08-meta {
  color: var(--home-muted, #5c6b7a);
  font-weight: 400;
}

.ui08-votes {
  color: #0B2545;
  font-weight: 700;
}

.ui08-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.ui08-pager button {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--home-line-strong, #c9d4e1);
  border-radius: 8px;
  background: var(--home-surface, #ffffff);
  color: var(--home-navy, #0b2545);
  font-family: inherit;
  cursor: pointer;
}

.ui08-pager button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui08-pager span {
  color: #0B2545;
  font-size: 0.9rem;
}

#ui08-chart:empty {
  display: none;
}

.ui08-chart {
  margin: 0 0 1.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ui08-chart-title {
  margin: 0 0 0.5rem;
  color: #0B2545;
  font-size: 1.05rem;
  font-weight: 700;
}

.ui08-chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 40rem;
}

.ui08-chart-reading {
  margin: 0.65rem 0 0;
  color: #0B2545;
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .ui08-community-list li {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .ui08-votes {
    grid-column: 2;
  }
}