/*
 * The written pages, from demo/page.html.
 *
 * Copied from the design demo in public/demo/, unchanged. The demo is the
 * drawing; this is the same drawing served to players, and the only way to
 * keep those two the same over time is for one to be a copy of the other
 * rather than a reading of it.
 *
 * Edit the demo first, then copy it here.
 */

/* ===========================================================================
 * The reading template.
 * ===========================================================================
 *
 * One job: be read. So a measure of about 68 characters, a line height with
 * air in it, and headings that are findable when somebody is scanning for
 * the one paragraph they came for.
 */

.doc { padding: 20px 0 0; }
.doc .wrap { max-width: 46rem; }

/* The page's own header, which carries what the page is and when it last
   changed - the second one matters on a policy and nowhere else. */
.doc__head {
  padding: 24px 20px;
  border-radius: 22px;
  background: linear-gradient(150deg, var(--accent-soft), var(--surface) 65%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.doc__head h1 { font-size: clamp(1.6rem, 6vw, 2.25rem); font-weight: 800; margin-top: 10px; }
.doc__head p { margin-top: 10px; color: var(--ink-soft); max-width: 52ch; }
.doc__updated { margin-top: 14px; font-size: .8125rem; color: var(--ink-mute); }

/* Which page you are on. Four links, not a dropdown: there are four. */
.switch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.switch button {
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.switch button[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Jump links, for the pages long enough to need them. */
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.toc a {
  font-size: .8125rem;
  font-weight: 650;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--bg-tint);
  color: var(--ink-soft);
  text-decoration: none;
}
.toc a:hover { background: var(--accent-soft); color: var(--accent); }

article { margin-top: 18px; }
article[hidden] { display: none; }

.doc__body {
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  line-height: 1.7;
}
.doc__body > * + * { margin-top: 16px; }
.doc__body p { color: var(--ink-soft); max-width: 68ch; }
.doc__body > p:first-of-type { font-size: 1.0625rem; color: var(--ink); }

.doc__body h2 {
  font-size: 1.25rem;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 84px;
}
.doc__body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.doc__body h3 { font-size: 1rem; margin-top: 22px; }

.notice {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--warm-soft);
  color: var(--warm);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.55;
}

/* A heading and the first term under it are not the same line of thought,
   and * + * does not reach a list whose own margin is zero. */
.points { display: grid; gap: 14px; margin: 14px 0 0; }
.point dt { font-weight: 700; }
.point dd { margin: 3px 0 0; color: var(--ink-soft); font-size: .9375rem; max-width: 68ch; }

.plain { margin: 14px 0 0; padding-left: 20px; color: var(--ink-soft); display: grid; gap: 6px; }
.plain strong { color: var(--ink); }

.closer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--ink-mute);
}
.closer a { color: var(--accent); font-weight: 650; }

@media (min-width: 820px) {
  .doc__head { padding: 32px; }
  .doc__body { padding: 32px 34px; }
}