/*
 * Retroprose: a page read as a document open in the editor
 * (app/Views/layouts/reader.php), for the terms of use and the privacy
 * notice. On top of screen.css, which has the themes, the menu bar, the
 * status line and the key bar. The text keeps to the editor's 80
 * columns, in the text's font and size, with the Markdown marks the
 * editor would show dimmed (--mark): # before the heading, ## before
 * each section, - before each list item and ** round bold. The marks
 * are drawn by CSS and hidden from screen readers (the "/ ''" text).
 */

/* The text: the editor's scroller and its padding (.cm-scroller and
 * .cm-content in screen.css), so the columns line up with the status
 * line and the key bar. */
.rd-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 1em var(--gutter) 3em;
  font-family: var(--tfont);
  line-height: var(--lh);
}
/* No frame while it has the focus, as the editor's text has none: it
 * is not in the Tab order, and only takes the focus so the keys scroll. */
.rd-page:focus, .rd-page:focus-visible { outline: none; }

/* One blank line between blocks, as in the Markdown, and no other sizes. */
.rd-page :is(h1, h2, p, ul) { margin: 0 0 calc(var(--lh) * 1em); font-size: inherit; line-height: inherit; }
.rd-page :is(h1, h2) { color: var(--head); font-weight: var(--bw); }
.rd-page h1::before { content: "# "; content: "# " / ""; }
.rd-page h2::before { content: "## "; content: "## " / ""; }
.rd-page :is(h1, h2)::before,
.rd-page li::before,
.rd-page strong::before,
.rd-page strong::after { color: var(--mark); font-weight: 400; }

.rd-page strong { color: var(--hi); font-weight: var(--bw); }
.rd-page strong::before,
.rd-page strong::after { content: "**"; content: "**" / ""; }

/* A list item as "- " with the lines after it under its text. */
.rd-page ul { padding: 0; list-style: none; }
.rd-page li { padding-left: 2ch; }
.rd-page li::before { content: "- "; content: "- " / ""; display: inline-block; width: 2ch; margin-left: -2ch; }

/* Links: the accent colour, underlined, as the editor shows a link's words. */
.rd-page a { color: var(--acc); text-decoration: underline; text-underline-offset: .2em; }
.rd-page a:hover { color: var(--hi); }
.rd-page a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* The links to other pages, after a rule like a Markdown "---". */
.rd-page .rd-links { margin: calc(var(--lh) * 2em) 0 0; padding-top: calc(var(--lh) * 1em); border-top: 1px dashed var(--dim); }

/* The key bar's keys are links and buttons here, as on the error pages. */
.rd .fkeys a {
  display: flex;
  gap: .5ch;
  align-items: baseline;
  min-height: 32px;
  padding: .35em 0;
  white-space: nowrap;
  text-decoration: none;
  font-size: clamp(calc(13px * var(--scale)), 3.6vw, calc(var(--size) * .85));
}
.rd .fkeys a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* A phone's touch screen: keys a thumb can hit. */
@media (pointer: coarse) and (max-width: 560px), (pointer: coarse) and (max-height: 500px) {
  .rd .fkeys :is(a, button) { min-height: 44px; align-items: center; }
}

/* Printed: the words only, black on white, all of them. */
@media print {
  html, body { height: auto; overflow: visible; background: #ffffff; color: #000000; }
  body::after, .rp-skip, .topbar, .status, .fkeys { display: none !important; }
  .rd-page { overflow: visible; padding: 0; font-size: 11pt; }
  .rd-page :is(h1, h2, strong, a) { color: #000000; }
  .rd-page :is(h1, h2)::before, .rd-page li::before, .rd-page strong::before, .rd-page strong::after { color: #555555; }
}

@media (forced-colors: active) {
  .rd-page :is(h1, h2)::before, .rd-page li::before, .rd-page strong::before, .rd-page strong::after { color: GrayText; }
}