/* rich-text.css — display rules for RENDERED RICH TEXT, wherever it appears.
 *
 * WHY THIS FILE EXISTS, AND WHY IT IS NOT quill.snow.css.
 * Six of the formats the editor offers (align, indent, size, font, direction, list check) do not
 * produce semantic HTML — they produce QUILL'S OWN CLASS NAMES, which DeltaRenderer.cs re-emits.
 * Without these rules the content is stored and rendered faithfully and still LOOKS like nothing:
 * centred text is not centred, "huge" is body size, an indent is flat. The failure is silent and
 * reads as a renderer bug.
 *
 * quill.snow.css is deliberately NOT used for this. That file is mostly editor CHROME — toolbar,
 * pickers, tooltips — none of which exists outside the editor, and loading it on the dashboard
 * would undo the per-page asset decision (Systems/StaticAssets.md §4.1) by the back door.
 *
 * THE ql- PREFIX IS THIRD-PARTY. It is neither gp- (global) nor page-specific, so it does not fit
 * UI/ClassNaming.md's two categories. This is the one place the project styles class names it did
 * not choose, because DeltaRenderer emits them to match what Quill produces in the editor. Do not
 * "correct" these to gp- — the editor would then render differently from the display surfaces.
 *
 * RENAMED 2026-08-11, from announcement-content.css / .gp-announcement. Announcements were the first
 * consumer and then stopped being the only one — blogs, team documents and the FAQ all render the
 * same Deltas through the same renderer. UI/ClassNaming.md's rule is that the moment a
 * component-scoped class is used by a second unrelated page its NAME is wrong, and this had four.
 * Announcement-named classes are for announcements; this is for rendered rich text.
 *
 * Loaded per-page by every surface that DISPLAYS a Delta:
 *   Roster/Manage.cshtml, Roster/RaiderView.cshtml, Home/Dashboard.cshtml (announcements),
 *   Blogs/View.cshtml (+ _BlogPublication), Faq/Index.cshtml, FaqInfo/Index.cshtml,
 *   TeamInfo/Team.cshtml
 */

/* --- The type standard ----------------------------------------------------------------------- */
/* ONE SIZE FOR ALL RENDERED RICH TEXT, set here rather than left to each container.

   Until 2026-08-11 this file set no font-size at all, so every surface inherited whatever its own
   card gave it: the FAQ answer was 0.813rem via .faq-info-answer, while blog posts and team
   documents inherited the 1rem body. Three surfaces showing the same kind of content at three
   sizes, none of them chosen. 0.875rem sits between them — a step up from the FAQ, a step down
   from the other two — and 1.6 is a reading line-height rather than the UI's 1.3.

   A surface that genuinely needs a different scale overrides font-size on the container; the
   headings below are in em, so the whole scale follows it. */
.gp-richtext {
    font-size: 0.875rem;
    line-height: 1.6;
}

/* HEADINGS WERE THE OTHER HALF OF THE PROBLEM. The block below sets margin, weight and line-height
   but never SIZE, so an h1 inside a post fell back to the UA's 2em — twice the body text, on a page
   whose own h1 is smaller than that. The scale is deliberately shallow: this is a heading inside a
   card, not a page title, and it must never outrank the surface's own heading.

   em, not rem, so a container that overrides the base size takes the scale with it. */
.gp-richtext h1 { font-size: 1.35em; }
.gp-richtext h2 { font-size: 1.2em; }
.gp-richtext h3 { font-size: 1.05em; }
.gp-richtext h4,
.gp-richtext h5,
.gp-richtext h6 { font-size: 1em; }

/* --- Block spacing -------------------------------------------------------------------------- */
/* The renderer emits one block element per line, including <p><br /></p> for a blank line, so
   margins must stay small or every announcement gains large gaps it was not written with. */
.gp-richtext p { margin: 0 0 0.35em; }
.gp-richtext p:last-child { margin-bottom: 0; }
.gp-richtext h1,
.gp-richtext h2,
.gp-richtext h3,
.gp-richtext h4,
.gp-richtext h5,
.gp-richtext h6 { margin: 0.5em 0 0.25em; font-weight: 600; line-height: 1.25; }
.gp-richtext ul,
.gp-richtext ol { padding-left: 1.5em; margin: 0.25em 0; }
.gp-richtext li { margin: 0.125em 0; }
.gp-richtext blockquote {
    margin: 0.35em 0;
    padding: 0.125em 0 0.125em 0.75em;
    border-left: 2px solid var(--line);
    color: var(--ink-3);
}
.gp-richtext pre {
    margin: 0.35em 0;
    padding: 0.5em 0.75em;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    white-space: pre-wrap;
    overflow-x: auto;
}
.gp-richtext code { padding: 0.1em 0.3em; background: var(--bg-2); border-radius: var(--r-sm); }
.gp-richtext pre code { padding: 0; background: none; }
.gp-richtext a { color: var(--accent); }
.gp-richtext img { max-width: 100%; height: auto; }

/* --- Alignment ------------------------------------------------------------------------------ */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-direction-rtl { direction: rtl; text-align: inherit; }

/* --- Indent --------------------------------------------------------------------------------- */
/* em rather than rem: an indent is spacing INTERNAL to the component, which is what UI/Units.md
   asks em for, and it keeps the step proportional to the surface's own text size. */
.ql-indent-1 { padding-left: 3em; }
.ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }
.ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; }
.ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; }
.ql-indent-8 { padding-left: 24em; }
.ql-direction-rtl.ql-indent-1 { padding-left: 0; padding-right: 3em; }
.ql-direction-rtl.ql-indent-2 { padding-left: 0; padding-right: 6em; }
.ql-direction-rtl.ql-indent-3 { padding-left: 0; padding-right: 9em; }
.ql-direction-rtl.ql-indent-4 { padding-left: 0; padding-right: 12em; }
.ql-direction-rtl.ql-indent-5 { padding-left: 0; padding-right: 15em; }
.ql-direction-rtl.ql-indent-6 { padding-left: 0; padding-right: 18em; }
.ql-direction-rtl.ql-indent-7 { padding-left: 0; padding-right: 21em; }
.ql-direction-rtl.ql-indent-8 { padding-left: 0; padding-right: 24em; }

/* --- Size ----------------------------------------------------------------------------------- */
/* DELIBERATE DEVIATION FROM Conventions 5.7 / UI/Units.md, which ask for rem on font-size.
   These four classes express a size RELATIVE TO THE SURROUNDING TEXT, and the three surfaces that
   display an announcement have different base sizes (0.75rem on the dashboard card, 0.875rem on
   the raider view). A fixed rem would make "huge" smaller than body text on one surface and
   enormous on another, which is the opposite of what the author chose. em is the correct unit for
   a relative-size format; the convention's default does not cover this case. */
.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge { font-size: 2.5em; }

/* --- Font ----------------------------------------------------------------------------------- */
/* Stacks match Quill's own defaults so the editor and the display surfaces agree. */
.ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.ql-font-monospace { font-family: Monaco, "Courier New", monospace; }

/* --- Checklist ------------------------------------------------------------------------------ */
/* A checklist is read-only outside the editor, so the marker is drawn rather than made interactive. */
.gp-richtext li.ql-unchecked,
.gp-richtext li.ql-checked { list-style: none; position: relative; padding-left: 1.25em; }
.gp-richtext li.ql-unchecked::before { content: "\2610"; position: absolute; left: 0; color: var(--ink-3); }
.gp-richtext li.ql-checked::before { content: "\2611"; position: absolute; left: 0; color: var(--ink-3); }

/* --- Embeds --------------------------------------------------------------------------------- */
.gp-richtext .ql-video { width: 100%; max-width: 30rem; aspect-ratio: 16 / 9; border: 0; display: block; margin: 0.35em 0; }
.gp-richtext .ql-formula { display: inline-block; }