/* Reading palette is local to the two plain-language pages. */
html.plain-document {
  --plain-paper: #fafaf8;
  --plain-ink: #171717;
  --plain-muted: #55554f;
  --plain-line: #d6d6cf;
  --plain-control: #898982;
  --plain-panel: #f2f2ee;
  --plain-button-hover: #353530;
  --plain-grain: url("/assets/paper-grain-v2-20260920.svg");
  --plain-scheme: light;
  background: var(--plain-paper);
  color: var(--plain-ink);
  color-scheme: var(--plain-scheme);
  scrollbar-color: var(--plain-control) var(--plain-paper);
}

html.plain-document[data-plain-theme="dark"] {
  --plain-paper: #171817;
  --plain-ink: #e6e5df;
  --plain-muted: #b5b7af;
  --plain-line: #474b45;
  --plain-control: #82867c;
  --plain-panel: #232622;
  --plain-button-hover: #d0d0c6;
  --plain-grain: none;
  --plain-scheme: dark;
}

/* Readable without JavaScript; an explicit light choice overrides the system. */
@media (prefers-color-scheme: dark) {
  html.plain-document:not([data-plain-theme="light"]) {
    --plain-paper: #171817;
    --plain-ink: #e6e5df;
    --plain-muted: #b5b7af;
    --plain-line: #474b45;
    --plain-control: #82867c;
    --plain-panel: #232622;
    --plain-button-hover: #d0d0c6;
    --plain-grain: none;
    --plain-scheme: dark;
  }
}

body.bw-paper.plain-page {
  --paper: var(--plain-paper);
  --paper-ink: var(--plain-ink);
  --paper-muted: var(--plain-muted);
  --paper-line: var(--plain-line);
  --paper-control: var(--plain-control);
  --paper-panel: var(--plain-panel);
  --paper-grain: var(--plain-grain);
  color-scheme: var(--plain-scheme);
  background-image: var(--plain-grain);
}

body.bw-paper.bw-shell.plain-page :is(.bw-home, .bw-home:hover) {
  color: var(--paper-ink);
}

body.bw-paper.plain-page :is(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--paper-ink);
  outline-offset: 4px;
}

body.bw-paper.plain-page ::selection {
  color: var(--paper);
  background: var(--paper-ink);
}

body.bw-paper.plain-page .skip-link {
  color: var(--paper);
  background: var(--paper-ink);
}

.plain-page .plain-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto 28px;
  font-size: 14px;
  line-height: 1.4;
}

.plain-page .plain-toolbar-label {
  color: var(--paper-muted);
}

.plain-page .plain-theme-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.plain-page .plain-theme-options button {
  appearance: none;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--paper-control);
  border-radius: 3px;
  background: transparent;
  color: var(--paper-ink);
  font: inherit;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
}

.plain-page .plain-theme-options button[aria-pressed="true"] {
  border-color: var(--paper-ink);
  background: var(--paper-ink);
  color: var(--paper);
}

/* Short introduction. Load after the shared paper styles. */
body.bw-paper.plain-page {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.bw-paper.bw-shell.plain-page > main {
  padding-top: clamp(28px, 4.5vw, 52px);
  padding-bottom: clamp(44px, 6vw, 76px);
}

.plain-page .plain-reader {
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin-inline: auto;
}

.plain-page .plain-reader :where(h1, h2, p, blockquote, a, figcaption) {
  overflow-wrap: anywhere;
}

.plain-page .plain-reader :where(h1, h2, p, figure, blockquote) {
  margin: 0;
}

.plain-page .plain-reader [id] {
  scroll-margin-top: 24px;
}

.plain-page .plain-kicker {
  margin-bottom: 14px;
  color: var(--paper-muted);
  font-size: 14px;
  line-height: 1.5;
}

.plain-page .plain-opening h1 {
  max-width: 18ch;
  font-size: clamp(2rem, 4.8vw, 3.375rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.plain-page .plain-opening .plain-lead {
  margin-top: 22px;
  font-size: clamp(1.125rem, 2.4vw, 1.25rem);
  line-height: 1.55;
}

.plain-page .plain-section {
  margin-top: 36px;
}

.plain-page .plain-section h2 {
  margin-bottom: 12px;
  font-size: clamp(1.375rem, 2.7vw, 1.625rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.plain-page .plain-section p + p {
  margin-top: 12px;
}

.plain-page .plain-example {
  margin-block: 20px;
  border: 1px solid var(--paper-control);
  background: var(--paper-panel);
}

.plain-page .plain-example > figcaption {
  padding: 12px 20px;
  border-bottom: 1px solid var(--paper-line);
  color: var(--paper-muted);
  font-size: 14px;
  line-height: 1.5;
}

.plain-page .plain-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plain-page .plain-pair > div {
  min-width: 0;
  padding: 20px;
}

.plain-page .plain-pair > div + div {
  border-left: 1px solid var(--paper-line);
}

.plain-page .plain-pair .plain-example-label {
  margin-bottom: 10px;
  color: var(--paper-muted);
  font-size: 14px;
  line-height: 1.5;
}

.plain-page .plain-pair blockquote {
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  line-height: 1.4;
}

.plain-page #boundary {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 2px solid var(--paper-ink);
}

/* Optional questions stay compact; native details works without JavaScript. */
.plain-page .plain-questions {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--paper-line);
}

.plain-page .plain-questions h2 {
  margin-bottom: 12px;
  font-size: clamp(1.375rem, 2.7vw, 1.625rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.plain-page .plain-questions-intro {
  color: var(--paper-muted);
  font-size: 16px;
  line-height: 1.55;
}

.plain-page .plain-question-list {
  margin-top: 20px;
  border-top: 1px solid var(--paper-line);
}

.plain-page .plain-question {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--paper-line);
}

.plain-page .plain-question > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 14px 0;
  color: var(--paper-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}

.plain-page .plain-question > summary::-webkit-details-marker {
  display: none;
}

.plain-page .plain-question > summary::after {
  content: "+";
  content: "+" / "";
  justify-self: center;
  color: var(--paper-muted);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.plain-page .plain-question[open] > summary::after {
  content: "−";
  content: "−" / "";
}

.plain-page .plain-answer {
  padding: 0 36px 22px 0;
  color: var(--paper-ink);
}

.plain-page .plain-answer p + p {
  margin-top: 12px;
}

.plain-page .plain-answer .plain-source {
  margin-top: 12px;
  color: var(--paper-muted);
  font-size: 14px;
  line-height: 1.5;
}

.plain-page .plain-source a {
  display: inline-block;
  min-height: 44px;
  padding-block: 10px;
}

.plain-page .plain-next {
  margin-top: 32px;
}

.plain-page .plain-closing {
  max-width: 32ch;
  font-size: clamp(1.25rem, 2.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
}

.plain-page .plain-reader a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.plain-page .plain-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 22px;
}

.plain-page .plain-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding-block: 10px;
  line-height: 1.4;
}

.plain-page .plain-actions .plain-button {
  padding: 12px 20px;
  border: 1px solid var(--paper-ink);
  background: var(--paper-ink);
  color: var(--paper);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.plain-page .plain-next .plain-more {
  margin-top: 16px;
  color: var(--paper-muted);
  font-size: 16px;
  line-height: 1.5;
}

.plain-page .plain-more a {
  display: inline-block;
  min-height: 44px;
  padding-block: 10px;
  color: var(--paper-ink);
}

.plain-page .plain-reader a:focus-visible {
  outline: 2px solid var(--paper-ink);
  outline-offset: 5px;
}

@media (hover: hover) {
  .plain-page .plain-reader a:hover {
    text-decoration-thickness: 2px;
  }
  .plain-page .plain-actions .plain-button:hover {
    background: var(--plain-button-hover);
  }
}

@media (max-width: 620px) {
  .plain-page .plain-toolbar {
    justify-content: flex-start;
    margin-bottom: 24px;
  }
  body.bw-paper.plain-page {
    font-size: 17px;
    line-height: 1.65;
  }
  .plain-page .plain-opening .plain-lead {
    margin-top: 18px;
  }
  .plain-page .plain-section {
    margin-top: 28px;
  }
  .plain-page .plain-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .plain-page .plain-example > figcaption,
  .plain-page .plain-pair > div {
    padding-inline: 16px;
  }
  .plain-page .plain-pair > div {
    padding-block: 16px;
  }
  .plain-page .plain-pair > div + div {
    border-left: 0;
    border-top: 1px solid var(--paper-line);
  }
  .plain-page #boundary {
    margin-top: 32px;
    padding-top: 22px;
  }
  .plain-page .plain-next {
    margin-top: 26px;
  }
  .plain-page .plain-questions {
    margin-top: 32px;
    padding-top: 24px;
  }
  .plain-page .plain-question > summary {
    font-size: 17px;
  }
  .plain-page .plain-answer {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plain-page,
  .plain-page * {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  html.plain-document,
  html.plain-document[data-plain-theme],
  html.plain-document:not([data-plain-theme]) {
    --plain-paper: Canvas;
    --plain-ink: CanvasText;
    --plain-muted: CanvasText;
    --plain-line: CanvasText;
    --plain-control: ButtonText;
    --plain-panel: Canvas;
    --plain-button-hover: ButtonFace;
    --plain-grain: none;
    color-scheme: light dark !important;
  }
  .plain-page .plain-theme-options button {
    color: ButtonText;
    background: ButtonFace;
    border-color: ButtonText;
  }
  .plain-page .plain-theme-options button[aria-pressed="true"] {
    border: 2px solid Highlight;
    color: HighlightText;
    background: Highlight;
  }
  body.bw-paper.plain-page :is(a, button, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
  .plain-page .plain-example,
  .plain-page #boundary,
  .plain-page .plain-example > figcaption,
  .plain-page .plain-pair > div + div {
    border-color: CanvasText;
  }
  .plain-page .plain-reader a {
    color: LinkText;
  }
  .plain-page .plain-actions .plain-button {
    border-color: ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }
  .plain-page .plain-reader a:focus-visible {
    outline-color: Highlight;
  }
}

@media print {
  html.plain-document,
  html.plain-document[data-plain-theme],
  html.plain-document:not([data-plain-theme]) {
    --plain-paper: #fff;
    --plain-ink: #000;
    --plain-muted: #444;
    --plain-line: #aaa;
    --plain-control: #777;
    --plain-panel: #fff;
    --plain-grain: none;
    --plain-scheme: light;
    color-scheme: light !important;
  }
  .plain-page .plain-toolbar {
    display: none !important;
  }
  body.bw-paper.plain-page {
    font-size: 11pt;
    line-height: 1.5;
  }
  body.bw-paper.bw-shell.plain-page > main {
    width: auto;
    padding: 0;
    margin: 0;
  }
  .plain-page .plain-reader {
    max-width: none;
  }
  .plain-page .plain-opening h1 {
    font-size: 28pt;
  }
  .plain-page .plain-section {
    margin-top: 20pt;
  }
  .plain-page .plain-section h2 {
    font-size: 16pt;
    break-after: avoid;
  }
  .plain-page .plain-reader p {
    orphans: 3;
    widows: 3;
  }
  .plain-page .plain-example {
    break-inside: avoid;
    background: #fff;
  }
  .plain-page .plain-actions .plain-button {
    color: #000;
    background: transparent;
  }
  .plain-page .plain-next {
    break-inside: avoid;
  }
  .plain-page .plain-questions h2 {
    font-size: 16pt;
    break-after: avoid;
  }
  .plain-page .plain-question > summary {
    min-height: 0;
    padding-block: 10pt;
    font-size: 12pt;
    break-after: avoid;
  }
  .plain-page .plain-question > summary::after {
    content: none;
  }
  .plain-page .plain-question::details-content {
    content-visibility: visible;
    display: block;
  }
  .plain-page .plain-answer {
    display: block !important;
    padding: 0 0 14pt;
  }
  .plain-page .plain-source a {
    min-height: 0;
    padding: 0;
  }
}