/* ============================================================
   pages.css — Page-scoped layout overrides (keep small)
   ============================================================ */


/* ── Rules index / book (two-column with ToC) ───────────────── */
.rules-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* Hide the desktop sidebar ToC on mobile — .rules-toc-mobile handles it instead */
.rules-page > .rules-toc {
  display: none;
}

@media (min-width: 900px) {
  .rules-page {
    grid-template-columns: minmax(0, 1fr) 180px;
  }
  .rules-page > .rules-toc {
    display: block;
    position: sticky;
    top: calc(var(--space-5) + 3.5rem); /* below sticky header */
    padding: var(--space-4);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
}

/* Mobile ToC disclosure */
.rules-toc-mobile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  overflow: hidden;
}
.rules-toc-mobile > summary {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  background-color: var(--color-bg-sunken);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rules-toc-mobile > summary::after {
  content: "▾";
  font-size: var(--fs-xs);
  transition: transform var(--dur-fast) var(--ease-out);
}
.rules-toc-mobile[open] > summary::after { transform: rotate(180deg); }
.rules-toc-mobile .rules-toc__list {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 900px) {
  .rules-toc-mobile { display: none; }
}


/* ── Proposal detail page ───────────────────────────────────── */
.proposal-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.proposal-body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
  margin-bottom: var(--space-5);
}
.proposal-body p { max-width: none; }
.proposal-body p + p { margin-top: var(--space-4); }

/* Rule text readonly display */
.rule-readonly,
.rule-text-display {
  background-color: var(--color-bg-sunken);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}


/* ── Forum compose form ─────────────────────────────────────── */
.forum-compose {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
  box-shadow: var(--shadow-xs);
}
.forum-compose__heading {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}


/* ── Admin panel ────────────────────────────────────────────── */
.admin-section { margin-bottom: var(--space-6); }
.admin-section__heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.admin-mode-banner {
  background-color: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-warning);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}


/* ── Auth screens (login / register) ────────────────────────── */
.auth-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-7);
}
.auth-card {
  width: 100%;
  max-width: 26rem;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.auth-card__heading {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-5);
  letter-spacing: var(--tracking-tight);
}


/* ── Players page grid ──────────────────────────────────────── */
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.player-card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}
.player-card__name   { font-weight: var(--fw-semibold); color: var(--color-heading); margin-bottom: var(--space-2); }
.player-card__points { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--color-accent); margin-bottom: var(--space-2); }
.player-card__target { font-size: var(--fs-xs); color: var(--color-text-subtle); margin-bottom: var(--space-3); }