/* Rich-text formatting chosen in the admin editor (TinyMCE) – classes only, never inline styles, so the public
   CSP can stay `style-src 'self'`. The SAME file is loaded inside the editor (content_css + body_class "prose"),
   so editors see exactly what visitors get. Class names must start with "rt-" (HtmlSanitizer keeps only those).
   Text colours are WCAG AA (≥ 4.5:1) on white. */

/* ---- Font family ---- */
.prose .rt-ff-sans   { font-family: var(--font); }
.prose .rt-ff-modern { font-family: "Montserrat", var(--font); }
.prose .rt-ff-serif  { font-family: "Lora", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif; }
.prose .rt-ff-mono   { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .92em; }
.prose .rt-ff-script { font-family: var(--script); font-size: 1.35em; line-height: 1.2; }

/* ---- Font size ---- */
.prose .rt-fs-xs  { font-size: .75rem; }
.prose .rt-fs-sm  { font-size: .875rem; }
.prose .rt-fs-md  { font-size: 1rem; }
.prose .rt-fs-lg  { font-size: 1.2rem; }
.prose .rt-fs-xl  { font-size: 1.5rem; line-height: 1.35; }
.prose .rt-fs-2xl { font-size: 2rem; line-height: 1.25; }
.prose .rt-fs-3xl { font-size: 2.6rem; line-height: 1.15; }

/* ---- Text colour (AA on white) ---- */
.prose .rt-c-navy   { color: var(--night); }
.prose .rt-c-orange { color: var(--orange-deep); }
.prose .rt-c-gray   { color: var(--steel); }
.prose .rt-c-green  { color: var(--ok); }
.prose .rt-c-red    { color: var(--err); }
.prose .rt-c-blue   { color: #1F5FA8; }

/* ---- Highlight (background) ---- */
.prose .rt-hl-orange { background: var(--orange-tint); padding: 0 .15em; border-radius: 3px; }
.prose .rt-hl-yellow { background: #FFF2A8; padding: 0 .15em; border-radius: 3px; }
.prose .rt-hl-gray   { background: var(--lilac); padding: 0 .15em; border-radius: 3px; }
.prose .rt-hl-navy   { background: var(--night); color: #fff; padding: 0 .3em; border-radius: 3px; }

/* ---- Alignment (text blocks, table cells, images) ---- */
.prose .rt-al-left    { text-align: left; }
.prose .rt-al-center  { text-align: center; }
.prose .rt-al-right   { text-align: right; }
.prose .rt-al-justify { text-align: justify; }
.prose img.rt-al-center, .prose figure.rt-al-center { margin-left: auto; margin-right: auto; display: block; }
.prose img.rt-al-left,  .prose figure.rt-al-left  { float: left;  margin: .3rem 1.25rem 1rem 0; max-width: 50%; }
.prose img.rt-al-right, .prose figure.rt-al-right { float: right; margin: .3rem 0 1rem 1.25rem; max-width: 50%; }
.prose figure.rt-al-center img { margin-left: auto; margin-right: auto; }
.prose figcaption { font-size: .85rem; color: var(--steel); text-align: center; margin-top: -.75rem; }

/* ---- Line height ---- */
.prose .rt-lh-tight { line-height: 1.35; }
.prose .rt-lh-loose { line-height: 2; }

/* ---- Columns (layout blocks) – stack on phones ---- */
.prose .rt-cols { display: grid; gap: 1.5rem; margin: 1.25rem 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .rt-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose .rt-cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.prose .rt-cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.prose .rt-col > :first-child { margin-top: 0; }
.prose .rt-col > :last-child  { margin-bottom: 0; }
.prose .rt-col img { margin: 0 0 1rem; }
@media (max-width: 720px) { .prose .rt-cols, .prose .rt-cols-3, .prose .rt-cols-1-2, .prose .rt-cols-2-1 { grid-template-columns: 1fr; } }

/* ---- Callout boxes ---- */
.prose .rt-box { margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: var(--r-card); background: var(--lilac); border-left: 4px solid var(--steel); }
.prose .rt-box-note { background: var(--orange-tint); border-left-color: var(--orange); }
.prose .rt-box-ok   { background: #E7F4EC; border-left-color: var(--ok); }
.prose .rt-box-warn { background: #FBEAEA; border-left-color: var(--err); }
.prose .rt-box-dark { background: var(--night); color: #fff; border-left-color: var(--orange); }
.prose .rt-box-dark a { color: #FFB25C; }
.prose .rt-box > :last-child { margin-bottom: 0; }

/* ---- Link styled as a button ---- */
.prose a.rt-btn { display: inline-block; padding: .6rem 1.2rem; border-radius: 999px; background: var(--orange-btn); color: var(--on-orange); font-weight: 700; text-decoration: none; }
.prose a.rt-btn:hover { background: var(--orange-hover); color: var(--on-orange); }
.prose a.rt-btn-outline { display: inline-block; padding: .55rem 1.15rem; border-radius: 999px; border: 2px solid var(--night); color: var(--night); font-weight: 700; text-decoration: none; }

/* ---- Tables (presets picked in Table properties) ---- */
/* Full width on desktop; horizontal scroll only on phones (overrides the older display:block rule in 03-inner-pages). */
.prose table { display: table; }
@media (max-width: 720px) { .prose table { display: block; overflow-x: auto; } }
.prose table.rt-tbl-grid th, .prose table.rt-tbl-grid td { border: 1px solid var(--line); }
.prose table.rt-tbl-striped tbody tr:nth-child(even) td { background: var(--bg); }
.prose table.rt-tbl-compact th, .prose table.rt-tbl-compact td { padding: .4rem .6rem; font-size: .9rem; }
.prose table.rt-tbl-plain th, .prose table.rt-tbl-plain td { border: 0; }
.prose table.rt-tbl-plain thead th { background: none; color: inherit; border-bottom: 2px solid var(--night); }
.prose table.rt-tbl-orange thead th { background: var(--orange); color: var(--on-orange); }
.prose table.rt-tbl-fixed { table-layout: fixed; display: table; }
.prose td.rt-cell-orange, .prose th.rt-cell-orange { background: var(--orange-tint); }
.prose td.rt-cell-gray,   .prose th.rt-cell-gray   { background: var(--lilac); }
.prose td.rt-cell-navy,   .prose th.rt-cell-navy   { background: var(--night); color: #fff; }
.prose td.rt-va-middle,   .prose th.rt-va-middle   { vertical-align: middle; }
.prose caption { caption-side: bottom; font-size: .85rem; color: var(--steel); padding-top: .5rem; text-align: left; }

/* ---- Accordion (details/summary) ---- */
.prose details { margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--r-card); padding: .75rem 1rem; background: var(--paper); }
.prose details > summary { cursor: pointer; font-weight: 700; list-style-position: inside; }
.prose details[open] > summary { margin-bottom: .6rem; }

/* ---- Misc ---- */
.prose s { text-decoration-thickness: 2px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose pre { background: var(--night); color: #E8ECF3; padding: 1rem 1.25rem; border-radius: var(--r-card); overflow-x: auto; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .88rem; }
.prose :not(pre) > code { background: var(--lilac); padding: .1em .35em; border-radius: 4px; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .9em; }
.prose::after { content: ""; display: table; clear: both; }   /* contain floated images */