/*
 * Display CSS for saved rich-text content. Replaces ckeditor-img.css.
 *
 * Jodit ships NO content stylesheet - es2021/ holds only editor chrome - so
 * unlike CKEditor's split bundle there is no upstream file to vendor here. This
 * one is ours and is maintained by hand.
 *
 * It carries BOTH dialects on purpose. Stored content is years of
 * CKEditor-flavoured markup (figure wrappers, figcaption, image-style-* classes)
 * and nothing rewrites it: the Story 0 spike established that Jodit round-trips
 * all of it untouched, so the cheapest correct migration is no data migration,
 * and the two dialects coexist permanently. Do not "clean this up" by deleting
 * the legacy group - it is what keeps existing pages rendering.
 *
 * Brought in by @form.richtextContent, which also wraps the value in
 * .tilin-content.
 *
 * Three groups below:
 *   1. unscoped rules, kept unscoped because ckeditor-img.css was
 *   2. the legacy CKEditor dialect, self-namespacing so it needs no scope
 *   3. the nine `style` definitions, scoped because their names are generic
 */

/* ------------------------------------------------------------------ *
 * 1. Unscoped - preserving ckeditor-img.css's reach
 *
 * This was a bare `img` rule on every page that linked ckeditor-img.css, so
 * images outside rich-text content depend on it too. Scoping it to
 * .tilin-content would quietly narrow it and shrink nothing but our own
 * confidence, so it stays as it was.
 * ------------------------------------------------------------------ */

img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ *
 * 2. Legacy CKEditor content dialect
 *
 * These selectors are CKEditor's own and cannot collide with solution CSS, so
 * they are left unscoped - which also means they keep working on pages that
 * have not yet been converted to @form.richtextContent.
 * ------------------------------------------------------------------ */

/* Alignment classes, as in ckeditor-img.css. */
.image-style-align-center {
	margin: 0 auto;
}

.image-style-block-align-right {
	margin-left: auto;
}

.image-style-block-align-left {
	margin-right: auto;
}

.image-style-align-left {
	display: inline;
	float: left;
	margin: 0 1em 1em 0;
}

.image-style-align-right {
	display: inline;
	float: right;
	margin: 0 0 1em 1em;
}

/*
 * Images and captions. CKEditor wraps a block image in <figure class="image">
 * with an optional <figcaption>; without these the caption rendered as an
 * unstyled paragraph and the figure carried the browser's default 40px margin
 * (finding 12).
 */
figure.image {
	display: table;
	clear: both;
	margin: 1em auto;
	max-width: 100%;
}

figure.image > img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

figure.image > figcaption,
figure.table > figcaption {
	display: table-caption;
	caption-side: bottom;
	padding: 0.4em 0.6em;
	font-size: 0.9em;
	line-height: 1.4;
	text-align: center;
	background-color: #f7f7f7;
	color: #333;
}

/* An author-resized image carries its width as an inline style on the figure. */
figure.image.image_resized {
	max-width: 100%;
}

figure.image.image_resized > img {
	width: 100%;
}

/* Tables. Same story: the wrapper is a figure, and the borders are inline
   styles from tableProperties/tableCellProperties, which survive untouched. */
figure.table {
	display: table;
	margin: 1em auto;
	max-width: 100%;
	overflow-x: auto;
}

figure.table > table {
	border-collapse: collapse;
	max-width: 100%;
	height: 100%;
}

figure.table > table > tbody > tr > td,
figure.table > table > thead > tr > th {
	border: 1px solid #bfbfbf;
	padding: 0.3em 0.5em;
	min-width: 2em;
}

/* htmlEmbed's wrapper, and MediaEmbed's - the latter is <oembed> inside a
   figure, which no browser renders, so keep it out of the flow rather than
   leaving an empty gap. */
.raw-html-embed {
	max-width: 100%;
}

figure.media {
	display: block;
	margin: 1em 0;
	clear: both;
}

figure.media oembed {
	display: none;
}

/* Jodit inserts video embeds as a plain iframe; keep them from overflowing. */
.tilin-content iframe {
	max-width: 100%;
}

.tilin-content blockquote {
	border-left: 4px solid #cfcfcf;
	margin-left: 0;
	padding-left: 1em;
	font-style: italic;
}

/* ------------------------------------------------------------------ *
 * 3. The nine `style` definitions
 *
 * None of these had CSS anywhere in the repository, so every one of the nine
 * toolbar options did nothing visible (finding 11). They are styled here rather
 * than trimmed because content authored with them over the years already
 * carries the classes - deleting the options does not delete the markup.
 *
 * Only `marker` and `spoiler` can still be *applied*: Jodit's classSpan commits
 * a class to the selection, so the seven block-level ones have no equivalent.
 * They keep rendering; they just cannot be added to new content.
 *
 * Scoped to .tilin-content because the names are generic enough to collide -
 * a solution stylesheet is entitled to its own .marker or .category.
 * ------------------------------------------------------------------ */

.tilin-content .category {
	margin: 0 0 0.3em;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.tilin-content .document-title {
	margin: 0 0 0.2em;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.2;
	border: 0;
}

.tilin-content .document-subtitle {
	margin: 0 0 1em;
	font-size: 1.2em;
	font-weight: normal;
	color: #5c5c5c;
}

.tilin-content .info-box {
	margin: 1.2em 0;
	padding: 0.9em 1.1em;
	border: 1px solid #b6d4e3;
	border-left-width: 4px;
	border-radius: 3px;
	background: #eef7fb;
}

.tilin-content .side-quote {
	float: right;
	width: 36%;
	margin: 0 0 1em 1.5em;
	padding: 0 0 0 1em;
	border-left: 4px solid #cfcfcf;
	font-size: 1.15em;
	font-style: italic;
	line-height: 1.4;
}

.tilin-content .marker {
	background-color: #fdfd77;
}

/*
 * A spoiler hides its text until the reader asks for it. Kept accessible: the
 * text is still in the DOM and still selectable, it is only painted out.
 */
.tilin-content .spoiler {
	background-color: #2b2b2b;
	color: transparent;
	border-radius: 2px;
	transition: color 0.15s;
}

.tilin-content .spoiler:hover,
.tilin-content .spoiler:focus-within {
	color: #fff;
}

.tilin-content .fancy-code {
	padding: 1em 1.2em;
	border-radius: 4px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	line-height: 1.5;
	overflow-x: auto;
}

.tilin-content .fancy-code-dark {
	background: #272822;
	color: #f8f8f2;
}

.tilin-content .fancy-code-bright {
	background: #f7f7f7;
	color: #2b2b2b;
	border: 1px solid #e0e0e0;
}

/* Media queries last, so the narrow-screen overrides win. */
@media only screen and (max-width: 1025px) {
	/* A floated quote or image at a third of the width is unreadable on a
	   phone - stack everything instead. */
	.tilin-content .side-quote,
	.image-style-align-left,
	.image-style-align-right {
		float: none;
		display: block;
		width: auto;
		margin: 1em 0;
		padding-left: 1em;
	}
}