/* Rich bodies (ADR-0016 decision 5): what a body written in the editor shows with, on the
   page ({% rich_css %}) and in the editing box ({% rich_editor_css %}). Formatting is
   classes only (the CSP's style-src has no 'unsafe-inline'): the palette rules below are
   core.richtext.COLORS, SIZES, FONTS, HIGHLIGHTS and ALIGNMENTS, in their order
   (test_richtext_palette.py compares them). Every colour reads at 4.5:1 or more on
   --surface, --bg, --sunk and --yellow-soft and on every background colour, so even 작게
   meets WCAG 1.4.3. Sizes are em: they follow the site's text size setting
   (data-font-scale). In forced colours the browser picks the colours (a background colour
   goes); lines that carry meaning (table rules, the quote bar) are borders, which it keeps. */

/* Spaces and line breaks show as they were written (ProseMirror's pre-wrap): a poem's
   indents stay. Bodies hold no whitespace between their blocks. */
.rt{white-space:pre-wrap;overflow-wrap:break-word}
/* A photo or video the text wraps round (.rt-fig-left, .rt-fig-right) floats: the body
   holds it, so what follows the body (attachments, replies) never rides up beside it. */
.rt{display:flow-root}

/* Palette: colour */
.rt-c-red{color:#B3261E}
.rt-c-orange{color:#A3470A}
.rt-c-brown{color:#6B4F00}
.rt-c-green{color:#2A6A4A}
.rt-c-teal{color:#00676B}
.rt-c-blue{color:#1F5FAE}
.rt-c-purple{color:#6A3FA0}
.rt-c-gray{color:#5E6B61}
/* Palette: size */
.rt-s-small{font-size:.875em}
.rt-s-large{font-size:1.25em}
.rt-s-xlarge{font-size:1.5em}
/* Palette: typeface (장식 is Latin only; Hangul falls back to the body serif) */
.rt-f-sans{font-family:var(--sans)}
.rt-f-display{font-family:var(--mono)}
/* Palette: background colour (light: the ink and every colour above stay ≥4.5:1 on it) */
.rt-h-yellow{background-color:#FFF1BD}
.rt-h-orange{background-color:#FBE4CE}
.rt-h-pink{background-color:#FCE5EC}
.rt-h-purple{background-color:#ECE5FA}
.rt-h-blue{background-color:#DCEBFA}
.rt-h-green{background-color:#D8EFE0}
.rt-h-gray{background-color:#E7EBE2}
/* A paragraph's or heading's alignment (core.richtext.ALIGNMENTS; left has no class) */
.rt-a-center{text-align:center}
.rt-a-right{text-align:right}
.rt-a-justify{text-align:justify}

/* Blocks */
.rt>*+*{margin-top:1.1em}
.rt h2{font-family:var(--serif);font-size:1.6rem;line-height:1.5;margin:1.6em 0 .6em}
.rt h3{font-family:var(--serif);font-size:1.3rem;line-height:1.5;margin:1.4em 0 .5em}
.rt :is(ul,ol){padding-inline-start:1.5em}
.rt ul{list-style:disc}
.rt ol{list-style:decimal}
.rt li>p{margin:0}
.rt blockquote{margin:1.5em 0;padding:.2em 0 .2em 1em;border-inline-start:4px solid var(--yellow);color:var(--ink)}
.rt blockquote>p+p{margin-top:.8em}
.rt hr{margin:2em 0;border:0;border-top:1px solid var(--line-strong)}
.rt a{text-underline-offset:3px}
/* Bold is a fixed weight: `bolder` from the light body text (--prose-weight 300) would be
   400, barely heavier. The site's serif is variable (200–900). */
.rt :is(strong,b){font-weight:700}

/* Photos: a photo on its own line is a figure, one in a list or a cell a picture. */
.rt picture{display:block}
.rt picture img{display:block;max-width:100%;height:auto;border-radius:12px;background:var(--sunk)}
.rt-figure{margin:1.6em 0}
.rt-figure picture img{margin-inline:auto}
.rt-figure figcaption{margin-top:.5em;font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--ink-2);text-align:center;white-space:normal}

/* Photo and video layout (core.richtext.FIGURE_SIZES, FIGURE_PLACES; ADR-0016 v0.7.8).
   A size is a share of the text column (centred); a placement floats the figure with the
   text wrapping round it (half the column when no size is given). No class: the column's
   width, centred. A heading, a rule, a table and a figure that does not wrap start below the
   floats (a block never slides under one), and on a phone a wrapped figure is a block of the
   whole column (the sizes of the centred ones stay). The sizes come after the placements so
   a size wins (test_richtext_palette compares the rules). */
.rt .rt-fig-left,.rt .rt-fig-right{width:50%;margin-block:.4em .8em}
.rt .rt-fig-left{float:left;margin-inline:0 1.4em}
.rt .rt-fig-right{float:right;margin-inline:1.4em 0}
.rt .rt-fig-w33{width:33.333%}
.rt .rt-fig-w50{width:50%}
.rt .rt-fig-w75{width:75%}
.rt :is(.rt-fig-w33,.rt-fig-w50,.rt-fig-w75):not(.rt-fig-left,.rt-fig-right){margin-inline:auto}
.rt :is(.rt-fig-w33,.rt-fig-w50,.rt-fig-w75) picture img{width:100%}
.rt :is(h2,hr,.rt-table){clear:both}
.rt :is(.rt-figure,.rt-video):not(.rt-fig-left,.rt-fig-right){clear:both}
@media (max-width:640px){
  .rt .rt-fig-left,.rt .rt-fig-right{float:none;width:100%;margin:1.6em 0}
}

/* Tables: a region the keyboard can scroll on a narrow screen (tabindex 0). */
.rt-table{max-width:100%;overflow-x:auto;margin:1.6em 0;white-space:normal}
.rt-table:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rt table{border-collapse:collapse;min-width:100%;font-size:.95em;line-height:1.7}
.rt :is(th,td){padding:8px 12px;border:1px solid var(--line-strong);vertical-align:top;text-align:start;white-space:pre-wrap}
.rt th{background:var(--sunk);font-weight:600}
.rt :is(th,td)>p{margin:0}

/* Videos: the site's player (media.css .media-player, repeated here: a page with a body
   need not load the gallery's sheet) and its captions and transcript link. */
.rt-video{margin:1.6em 0;white-space:normal}
.rt-video .media-player{position:relative;aspect-ratio:16/9;background:var(--deep)}
.rt-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rt-video figcaption{margin-top:8px;font-family:var(--sans);font-size:.92rem;line-height:1.6}
.rt-video-link{font-family:var(--sans)}

@media (forced-colors:active){
  .rt :is(th,td){border-color:CanvasText}
  .rt blockquote{border-inline-start-color:CanvasText}
  .rt hr{border-top-color:CanvasText}
  .rt picture img{border:1px solid CanvasText}
}