/* Every section inside already caps at --reading-width, so on a wide screen
   the page rendered as a narrow left-hugging column against a dead right
   half. Cap the main itself and the whole page centres like /me does. */
.cohort-main { padding-top: var(--space-32); max-width: var(--reading-width); }

.cohort-header { margin-bottom: var(--space-48); max-width: var(--reading-width); }
.cohort-headline {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-16);
  font-variation-settings: "opsz" 60;
}
.cohort-headline em { font-style: italic; color: var(--accent); font-weight: 400; }
.cohort-paragraph {
  font-family: var(--serif-body);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

.cohort-section-label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin: 0 0 var(--space-16);
}

.cohort-chart-section { margin-bottom: var(--space-48); max-width: var(--reading-width); }
.cohort-chart {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  margin: 0;
}
.cohort-chart svg { display: block; width: 100%; height: 200px; }
.cohort-chart .axis-label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  fill: var(--ink-faint);
  font-feature-settings: "tnum";
}
.cohort-chart .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cohort-chart .area {
  fill: var(--accent-soft);
  opacity: 0.6;
}
.cohort-chart .point {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2;
}
.cohort-chart .grid {
  stroke: var(--hairline);
  stroke-dasharray: 2 4;
}

.cohort-snippet-section { max-width: var(--reading-width); }
.cohort-snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-16);
}
.cohort-snippet-list {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cohort-snippet-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-12) var(--space-24);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: background var(--motion-micro) ease-out;
}
.cohort-snippet-row:last-child { border-bottom: none; }
.cohort-snippet-row:hover { background: var(--surface-2); }
.cohort-snippet-name {
  font-family: var(--serif-display);
  font-size: var(--text-base);
  font-weight: 500;
  font-variation-settings: "opsz" 18;
}
.cohort-snippet-reason {
  font-family: var(--serif-body);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Prayer rhythm (counts only) + tradition policy toggle */
.cohort-rhythm-section { margin-bottom: var(--space-48); }
.cohort-rhythm-line {
  font-family: var(--serif-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  margin: 0 0 var(--space-8);
  font-feature-settings: "tnum";
}
.cohort-rhythm-note {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink-faint);
  margin: 0;
}
.tradition-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.tradition-toggle button {
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-muted);
  padding: 6px 14px;
  cursor: pointer;
  transition: background var(--motion-micro) ease-out, color var(--motion-micro) ease-out;
}
.tradition-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.tradition-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cohort-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
}
/* The headline is long enough to take the whole row, so the import control
   wraps beneath it — where, left-aligned, it read as a stray caption above
   the summary sentence. Keep it on the right edge wherever it lands. */
.cohort-header-row .btn { margin-left: auto; }

/* Pulse note (C5): quoted pastoral voice, distinct from the stats sentence. */
.cohort-pulse-note {
  font-family: var(--serif-body);
  font-style: italic;
  color: var(--ink-muted);
  border-left: 2px solid var(--hairline);
  padding-left: var(--space-12);
  margin: var(--space-12) 0 0;
  max-width: 64ch;
}
.cohort-journey-line {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--accent);
  margin: var(--space-8) 0 0;
}