/* Phase 2 — Palette design pass on the secondary views (People, Agenda, Project
   round, Bets, Stand-in, Share, Working preferences, Editor). CSS only; reuses
   all existing data logic. Scoped to `main.app-main:not(#main-view)` so it hits
   every secondary view but never the timeline home. Uses the theme tokens, so
   Sage / Warm Paper / Brutalist all carry through. */

main.app-main:not(#main-view) {
  max-width: 64rem;   /* one consistent, roomier width for every page */
  margin: 0 auto;
  padding-top: 1.6rem;
}

/* Page header → editorial: a serif title over a hairline, calm back button. */
main.app-main:not(#main-view) .round-head {
  padding-bottom: 1rem;
  margin-bottom: 1.7rem;
  border-bottom: var(--border-w) solid var(--border);
}
main.app-main:not(#main-view) .round-title {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  text-wrap: balance;
}
:root[data-theme="brutal"] main.app-main:not(#main-view) .round-title {
  text-transform: uppercase;
  font-weight: 700;
}
/* the back control in the header reads as a quiet ghost button */
main.app-main:not(#main-view) .round-head > button:first-child {
  order: -1;
  color: var(--muted);
}
main.app-main:not(#main-view) .round-head > button:first-child:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* Section sub-headings inside these views → uppercase eyebrow labels. */
main.app-main:not(#main-view) h3,
main.app-main:not(#main-view) .roster-title,
main.app-main:not(#main-view) .prefs-label > span:first-child {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* Cards get a touch more breathing room + the shared shadow. */
main.app-main:not(#main-view) .roster,
main.app-main:not(#main-view) .people-members,
main.app-main:not(#main-view) .people-invites,
main.app-main:not(#main-view) .people-requests,
main.app-main:not(#main-view) .agenda,
main.app-main:not(#main-view) .bets-register,
main.app-main:not(#main-view) .bets-team,
main.app-main:not(#main-view) .standin-give,
main.app-main:not(#main-view) .standin-history,
main.app-main:not(#main-view) .share-send,
main.app-main:not(#main-view) .share-graders,
main.app-main:not(#main-view) .share-recent,
main.app-main:not(#main-view) .prefs-mine,
main.app-main:not(#main-view) .prefs-team {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.4rem;
}

/* List rows → hairline-separated, generous. */
/* Page editor → a real writing surface (shares the common page width). */
#editor-view .roster.editor { background: transparent; border: 0; box-shadow: none; padding: 0; }
#editor-body {
  width: 100%; box-sizing: border-box; min-height: 46rem; display: block;
  font: 1.02rem/1.75 var(--font-body, system-ui, sans-serif);
  padding: 2.6rem 3rem; resize: vertical;
  background: var(--surface); color: var(--text);
  border: var(--border-w) solid var(--border); border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
#editor-view .prefs-label:has(#editor-body) { font-size: .68rem; }
:root[data-theme="brutal"] #editor-body { font-family: var(--mono); }

main.app-main:not(#main-view) .agenda-items > *,
main.app-main:not(#main-view) .bets-list > *,
main.app-main:not(#main-view) .people-members-list > *,
main.app-main:not(#main-view) .people-request-list > *,
main.app-main:not(#main-view) .standin-history-list > * {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.85rem 1rem;
}