/* The Drawer. static-page.css
 * Content styling for Terms and the public Changelog — the two plain
 * content pages off the drawer's footer. Chrome (nav, footer) comes
 * from bench.js's benchNavHtml()/benchFooterHtml(), same as every
 * Thing page; this file is only the prose and the changelog list.
 */

.stp-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.1;
  margin: 0 0 var(--s4);
}

/* ── Terms ──────────────────────────────────────────────────────────────────── */

.stp-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: var(--s4) 0 var(--s2);
}

.stp-section:first-of-type { margin-top: 0; }

.stp-body-text {
  margin: 0 0 var(--s2);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 62ch;
}

.stp-footer-note {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--border-w) solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-faint);
}

.stp-footer-note a { color: var(--accent); }
.stp-footer-note a:hover { color: var(--ink); }

/* ── Changelog ──────────────────────────────────────────────────────────────── */
/* Class names here match changelog-public.js's own ids/classes (pcl-*)
 * unchanged, so the reader script needed no edits — only its markup's
 * container chrome and this stylesheet changed. */

.stp-lead {
  margin: 0 0 var(--s4);
  color: var(--ink-faint);
  font-size: var(--t-small);
}

.pcl-loading, .pcl-empty {
  color: var(--ink-faint);
  font-size: var(--t-small);
}

.pcl-list { list-style: none; margin: 0; padding: 0; }

.pcl-entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: var(--border-w) solid var(--line);
}

.pcl-entry:first-child { padding-top: 0; }
.pcl-entry:last-child { border-bottom: 0; }

.pcl-entry-date {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  padding-top: 3px;
}

.pcl-entry-body {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  white-space: pre-line;
}

@media (max-width: 899px) {
  .pcl-entry { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Start here (DR-062) ────────────────────────────────────────────────────── */
/* What the two older static pages had no use for: the opening line that
 * carries the live count, the one-line answer under a section heading, a
 * link inside body copy, and the sign-off. Everything else on that page
 * reuses stp-title, stp-section and stp-body-text unchanged. */

/* stp-section:first-of-type drops its top margin, which is right on Terms
 * where the first heading follows the title directly. Here body copy runs
 * above it, so the gap has to come back or the heading sits on the
 * paragraph. */
.stp-body-text + .stp-section { margin-top: var(--s4); }

.stp-opener {
  margin: 0 0 var(--s3);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
  max-width: 62ch;
}

.stp-answer {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 var(--s2);
  max-width: 62ch;
}

.stp-body-text a { color: var(--accent); }
.stp-body-text a:hover { color: var(--ink); }

.stp-signoff {
  margin: var(--s4) 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-soft);
}