/* Content classes for authored assessment content, installed as a
   document-level stylesheet by every player (see players-shared
   ui/content-styles.ts).

   A rule applies inside a `[data-pie-content]` element only, which each player
   sets on the root it renders content into. Several selectors are bare
   (`h1`-`h6`, `table`, `th`, `.table`, `.center`), and unscoped they restyled
   the host page around the player. `:where()` keeps each selector's
   specificity, and a host that renders authored markup itself marks its
   container with the attribute.

   The exception is a rule whose selector requires a name only authored
   content carries: a KDS class (`kds-*`, `Kds*`), MathJax output (`mjx-*`,
   `TEX-*`) or a legacy content class (`.frac`, `.noprint`, `.passage-title`
   and the rest tests/content-styles-confinement.test.ts lists). Those stay
   document-wide, because elements portal menus and popovers holding authored
   markup to `<body>`, outside every `[data-pie-content]` root: an
   inline-dropdown's choices keep their KDS fractions and MathJax glyph fixes
   there. A rule that requires an authored-colour marker stays document-wide
   for the same reason. The `:root` sentinel below and the `[data-color-scheme]`
   rule that captures a scheme's ink and page stay unscoped too.

   Colour values resolve through the canonical --pie-* tokens with the original
   literal kept as the no-theme last resort. The literals came from content
   authored against a white page: `black` borders, `lightgray` table headers and
   a white loading scrim are invisible or illegible the moment the surface is
   not white, and a host that only swaps the theme cannot reach them. Ink takes
   --pie-text (DaisyUI base-content, the one family guaranteed against the
   surface), page-coloured fills take --pie-white, and one-step-off-the-page
   fills take --pie-background-dark. */
:where([data-pie-content]) .pie-loading {
	/* The Figma indigo is --pie-primary at 90%, so the ring follows the theme's
	   primary instead of pinning MD indigo on every page. */
	--pie-loading-accent: color-mix(
		in srgb,
		var(--pie-primary, #3f51b5) 90%,
		transparent
	);
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: var(--pie-white, #fff);
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9999;
	opacity: 0.4;
}

:where([data-pie-content]) .pie-loading.fixed {
	position: fixed;
}

:where([data-pie-content]) .pie-loading:before {
	content: "";
	background-color: rgba(0, 0, 0, 0);
	border: 5px solid var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
	opacity: 0.9;
	border-right: 5px solid rgba(0, 0, 0, 0);
	border-left: 5px solid rgba(0, 0, 0, 0);
	border-radius: 50px;
	box-shadow: 0 0 35px var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
	width: 50px;
	height: 50px;
	-moz-animation: spinPulse 1s infinite ease-in-out;
	-webkit-animation: spinPulse 1s infinite linear;
	margin: -25px 0 0 -25px;
	position: absolute;
	top: 50%;
	left: 50%;
}

:where([data-pie-content]) .pie-loading:after {
	content: "";
	background-color: rgba(0, 0, 0, 0);
	border: 5px solid var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
	opacity: 0.9;
	border-left: 5px solid rgba(0, 0, 0, 0);
	border-right: 5px solid rgba(0, 0, 0, 0);
	border-radius: 50px;
	box-shadow: 0 0 15px var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
	width: 30px;
	height: 30px;
	-moz-animation: spinoffPulse 1s infinite linear;
	-webkit-animation: spinoffPulse 1s infinite linear;
	margin: -15px 0 0 -15px;
	position: absolute;
	top: 50%;
	left: 50%;
}

@keyframes spinPulse {
	0% {
		transform: rotate(160deg);
		opacity: 0;
		box-shadow: 0 0 1px var(--pie-loading-accent, rgba(63, 81, 181, 0.9));
	}
	50% {
		transform: rotate(145deg);
		opacity: 1;
	}
	100% {
		transform: rotate(-320deg);
		opacity: 0;
	}
}

@keyframes spinoffPulse {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

:where([data-pie-content]) .pie-api-player img {
	max-width: inherit !important;
	max-height: inherit !important;
}

/*
 * PIE-94: horizontal-scroll wrapper for authored images inside passages and
 * item stems. The shared sanitizer (`sanitizeItemMarkup` in
 * `@pie-players/pie-players-shared`) wraps every `<img>` in
 * `<span class="pie-image-scroll">` before injection. When the image fits its
 * column the scrollbar stays hidden (overflow-x: auto); when it doesn't, the
 * wrapper — not the passage or section layout — provides the sideways scroll
 * needed to satisfy WCAG 1.4.10 Reflow at 400% zoom.
 *
 * The wrapper is inline-block so an image keeps its place in the line: a block
 * wrapper put every image on a line of its own, stacking a row of picture-graph
 * icons into a column and adding a line to every image choice. Its baseline is
 * its bottom edge, as an inline image's is, so the image sits where it did. An
 * image laid out as a block gets `pie-image-scroll-block` from the player, so
 * its wrapper adds no line box below it.
 */
:where([data-pie-content]) .pie-image-scroll {
	display: inline-block;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

:where([data-pie-content]) .pie-image-scroll.pie-image-scroll-block {
	display: block;
}

:where([data-pie-content]) .pie-image-scroll > img {
	display: block;
	max-width: none;
	height: auto;
}

:where([data-pie-content]) .pie-image-scroll:focus-visible {
	outline: 2px solid
		var(
			--pie-focus-ring-color,
			var(--pie-focus-outline, var(--pie-button-focus-outline, #1a73e8))
		);
	outline-offset: 2px;
}

/*
 * PIE-558: horizontal-scroll wrapper for authored tables. Mirrors `.pie-image-scroll`:
 * the shared sanitizer wraps every `<table>` outside a `pie-*` custom element
 * in `<div class="pie-table-scroll">`. When the table fits its column the
 * scrollbar stays hidden; when it doesn't, the wrapper provides the sideways
 * scroll needed to satisfy WCAG 1.4.10 Reflow at 400% zoom instead of forcing
 * the section layout to scroll horizontally.
 */
:where([data-pie-content]) .pie-table-scroll {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

:where([data-pie-content]) .pie-table-scroll > table {
	max-width: none;
}

:where([data-pie-content]) .pie-table-scroll:focus-visible {
	outline: 2px solid
		var(
			--pie-focus-ring-color,
			var(--pie-focus-outline, var(--pie-button-focus-outline, #1a73e8))
		);
	outline-offset: 2px;
}

/* These styles are used in the body content of an item -- they also appear in the item body editor. */

.book-title-k5 {
	text-decoration: underline;
}

.book-title {
	font-style: italic;
}

.block-quote {
	font-family: serif;
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 60%;
	border: 1px solid var(--pie-text, black);
	padding: 2px;
	display: block;
}

.text-block {
	font-family: serif;
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 60%;
	border: 1px solid var(--pie-text, black);
	padding: 2px;
	display: block;
}

.short-quote {
	font-weight: bold;
}

span.short-quote:before {
	content: open-quote;
}

span.short-quote:after {
	content: close-quote;
}

.word-callout {
	text-decoration: underline;
}

.relative-emphasis {
	text-transform: uppercase;
}

/* Authored red emphasis. --pie-content-emphasis is mapped from the DaisyUI error
   slot through the legible correction, so it clears 4.5:1 against the page on
   every shipped theme; the `red` literal it replaces measures 4:1 on white and
   fails SC 1.4.3 before any theme is involved. */
.content-emphasis {
	font-weight: bold;
	color: var(--pie-content-emphasis, #b00000);
}

span.passage-title:before {
	content: open-quote;
}

span.passage-title:after {
	content: close-quote;
}

.proper-name {
	font-style: italic;
}

.variable {
	font-style: italic;
}

.equation-block {
	text-align: center;
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 60%;
	padding: 2px;
	display: block;
}

.embedded-error {
	font-style: italic;
}

/*
 * The 20% gutters above are a wide-viewport look. Held at a 320px-equivalent
 * width they leave a ~190px column of very short lines, so they collapse there
 * instead — SC 1.4.10 Reflow.
 */
@media (max-width: 30rem) {
	.block-quote,
	.text-block,
	.equation-block {
		margin-left: 0;
		margin-right: 0;
		width: auto;
	}
}

/*
 * Presence sentinel. Players install this stylesheet themselves and read this
 * property to detect whether a host that opted out of installation shipped a
 * copy of its own. Not a themeable value — do not consume it for styling.
 */
:root {
	--pie-content-styles: 1;
}

/* PASSAGES */

div.passage-title,
div.passage-subtitle {
	font-weight: bold;
	text-align: center;
}

div.passage-author {
	text-align: center;
}

.p-number {
	float: left;
	font-size: 0.85em;
}

.numbered-paragraph {
	margin-left: 36px;
}

/* ch5680 - also temporary kds content styles that need to be externalized */
/* Inspect Styles */

@media print {
	.kds-noprint {
		display: none;
	}

	.noprint {
		display: none;
	}
}

.kds-absolute {
	border-left: 1px solid var(--pie-text, black);
	border-right: 1px solid var(--pie-text, black);
	padding: 0px 0.3em 0px 0.3em;
}

.abs {
	border-left: var(--pie-text, #000000) 1px solid;
	border-right: var(--pie-text, #000000) 1px solid;
	padding: 0px 0.3em 0px 0.3em;
}

.kds-border-1 {
	border: 1px solid var(--pie-text, black);
}

.kds-border-2 {
	border: 2px solid var(--pie-text, black);
}

.kds-center {
	margin: 0px;
	text-align: center;
}

:where([data-pie-content]) .center {
	text-align: center;
	margin: 0;
}

.kds-exponent {
	font-size: 85%;
	margin-left: -0.4em;
	position: relative;
	top: -1.4em;
}

sup.frac {
	position: relative;
	top: -1.4em;
	font-size: 70%;
	margin-left: -0.4em;
}

.kds-fillin {
	border: 1px solid var(--pie-text, black);
	display: inline-block;
	margin: 0em 0.2em;
	padding-left: 1em;
}

.fillin {
	margin: 0em 0.2em;
	padding-left: 1em;
	border: var(--pie-text, #000000) 1px solid;
	display: inline-block;
}

.kds-font-larger {
	font-size: larger;
}

.kds-font-smaller {
	font-size: smaller;
}

table.kds-fraction {
	border: 0px;
	display: inline-block;
	font-size: 85%;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
}

table.kds-fraction > tbody > tr > td.kds-numerator {
	border-bottom: 1px solid var(--pie-text, black);
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	text-align: center;
}

table.kds-fraction > tbody > tr > td.kds-denominator {
	border: 0px;
	text-align: center;
}

table.frac {
	display: inline-block;
	vertical-align: middle;
	font-size: 85%;
	border: 0px;
	margin: 0px;
	padding: 0px;
}

.frac .nu {
	border-left: 0px;
	border-top: 0px;
	border-right: 0px;
	border-bottom: var(--pie-text, #000000) 1px solid;
	text-align: center;
}

.frac .de {
	border: 0px;
	text-align: center;
}

.kds-hanging-indent {
	margin: 0px;
	padding-left: 3em;
	text-indent: -3em;
}

.kds-image-caption {
	font-family: Verdana, Arial, sans-serif;
	text-align: center;
}

.kds-image-left {
	float: left;
	margin-right: 5px;
}

.kds-image-right {
	float: right;
	margin-left: 5px;
}

.kds-indent {
	text-indent: 3em;
}

:where([data-pie-content]) .indent {
	text-indent: 3em;
}

.kds-nowrap {
	display: inline-block;
	white-space: nowrap;
}

.kds-overline {
	text-decoration: overline;
}

.kds-parentheses {
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 300%;
	font-weight: normal;
	position: relative;
	top: 8px;
}

b.frac {
	font-weight: normal;
	font-size: 300%;
	font-family: arial narrow;
	position: relative;
	top: +8px;
}

.kds-pi {
	font-family: "Times New Roman", serif;
	font-size: 1.2em;
}

.newradical {
	border-collapse: collapse;
	display: inline-block;
	vertical-align: middle;
}

.newradical td {
	border: 0px;
	padding: 0px;
	vertical-align: top;
}

.newradical td.vinculum {
	border-top: 1px solid var(--pie-text, black);
	padding: 0px;
	vertical-align: top;
}

.newradical div.exp {
	font-size: 0.7em;
	position: relative;
	left: 7px;
	bottom: 5px;
}

.kds-underline {
	text-decoration: underline;
}

:where([data-pie-content]) .under {
	text-decoration: underline;
}

.kds-verdana2t {
	border: 1px solid var(--pie-white, white);
	text-align: left;
	text-decoration: none;
	vertical-align: top;
}

.Verdana2t {
	vertical-align: top;
	text-align: left;
	text-decoration: none;
	border: 1px solid var(--pie-white, white);
}

.kds-whole-number {
	display: inline-block;
	font-size: 120%;
	margin: 0em 0em 0em 0.2em;
}

.whole {
	display: inline-block;
	margin: 0em 0em 0em 0.2em;
	font-size: 120%;
}

table.KdsTable01 {
	border: 1px solid var(--pie-text, black);
	border-collapse: collapse;
	border-spacing: 0px;
}

table.KdsTable01 > tbody > tr > th {
	background-color: var(--pie-background-dark, #d3d3d3);
	border: 1px solid var(--pie-text, black);
	font-weight: normal;
	padding: 2px;
	text-align: center;
}

table.KdsTable01 > tbody > tr > th.bold {
	background-color: var(--pie-background-dark, #d3d3d3);
	border: 1px solid var(--pie-text, black);
	font-weight: bold;
	padding: 2px;
	text-align: center;
}

table.KdsTable01 > tbody > tr > td {
	border: 1px solid var(--pie-text, black);
	padding: 2px;
	text-align: center;
}

table.KdsTable01 > tbody > tr > td.bold {
	border: 1px solid var(--pie-text, black);
	font-weight: bold;
	padding: 2px;
	text-align: center;
}

table.KdsTable02 {
	border: 1px solid var(--pie-text, black);
	border-collapse: collapse;
	border-spacing: 0px;
}

table.KdsTable02 > tbody > tr > th {
	background-color: var(--pie-background-dark, #d3d3d3);
	border: 1px solid var(--pie-text, black);
	font-weight: normal;
	padding: 2px;
}

table.KdsTable02 > tbody > tr > td {
	border: 1px solid var(--pie-text, black);
	padding: 2px;
}

/* Bootstrap 4 / Learnosity table classes, as content migrated from Learnosity
   carries them: `.table`, `.table-bordered`, `.table-striped`,
   `.table-no-border`, `.lrn_width_auto`. Hosts once imported these rules from
   pie-player-components to give data tables visible borders (PD-876).

   A layout table gets none of them. Authors mark one with `.table-no-border`,
   `role="presentation"` or both, and the grid, 100% width and cell padding
   pushed its letter tiles and images apart, where hosts that never imported
   the rules render it bare. The class carries the exclusion on its own,
   because one exported markup spells the role into the class list
   (`class="table … role= table-no-border"`) and has no role attribute.
   Elements leave presentation tables unstyled for the same reason (PIE-440).
   The exclusion sits in `:where()` so every selector keeps the specificity of
   its plain `.table` form.

   The grid rules paint the ink, as every other authored grid in this file
   does and as pie-lib's table grid falls back to: --pie-text is held to 4.5:1
   against the page, so the rules clear SC 1.4.11's 3:1 wherever the text is
   legible. They were a 15% mix, as faint as the fixed light grey (#dee2e6)
   they first shipped with: 1.41:1 on white. A lighter fixed share cannot be
   certified: the share that clears 3:1 depends on the palette, 62% on the
   Grey on Light Grey scheme, and is unknown for a host's own.
   --pie-border-light is no substitute either; the DaisyUI mapping fills it
   from base-200, a surface. Each rule reads the ink itself, not through a
   custom property, which would substitute var(--pie-text) where it is
   declared: a scoped <pie-theme scope="self"> below :root would not reach it,
   and neither would a shade fill's swapped ink (AUTHORED COLOURS below), which
   keeps the rules around adjacent filled cells in the scheme's page colour. */
:where([data-pie-content])
.table:where(:not(.table-no-border, [role="presentation"])) {
	width: 100%;
	margin-bottom: 1em;
	background-color: transparent;
	border-collapse: collapse;
}

/* Learnosity's opt-out of the full-width table: it sizes to its content
   (PD-194). */
:where([data-pie-content])
.table.lrn_width_auto:where(:not(.table-no-border, [role="presentation"])) {
	width: auto;
}

:where([data-pie-content])
	.table:where(:not(.table-no-border, [role="presentation"]))
	th,
:where([data-pie-content])
	.table:where(:not(.table-no-border, [role="presentation"]))
	td {
	padding: 0.75em;
	vertical-align: top;
	border-top: 1px solid var(--pie-text, black);
}

:where([data-pie-content])
	.table:where(:not(.table-no-border, [role="presentation"]))
	tbody
	+ tbody {
	border-top: 2px solid var(--pie-text, black);
}

:where([data-pie-content])
	.table:where(:not(.table-no-border, [role="presentation"]))
	thead
	th {
	vertical-align: bottom;
	border-bottom: 2px solid var(--pie-text, black);
}

:where([data-pie-content]) th {
	text-align: inherit;
}

:where([data-pie-content])
	.table-bordered:where(:not(.table-no-border, [role="presentation"])),
:where([data-pie-content])
	.table-bordered:where(:not(.table-no-border, [role="presentation"]))
	th,
:where([data-pie-content])
	.table-bordered:where(:not(.table-no-border, [role="presentation"]))
	td {
	border: 1px solid var(--pie-text, black);
}

:where([data-pie-content])
	.table-bordered:where(:not(.table-no-border, [role="presentation"]))
	thead
	td,
:where([data-pie-content])
	.table-bordered:where(:not(.table-no-border, [role="presentation"]))
	thead
	th {
	border-bottom-width: 2px;
}

:where([data-pie-content])
	.table-striped:where(:not(.table-no-border, [role="presentation"]))
	tbody
	tr:nth-of-type(odd) {
	background-color: color-mix(in srgb, var(--pie-text, #000) 5%, transparent);
}

:where([data-pie-content]) .text-center {
	text-align: center !important;
}

:where([data-pie-content]) .h5,
:where([data-pie-content]) h5 {
	font-size: 1.25em;
}

:where([data-pie-content]) h1,
:where([data-pie-content]) h2,
:where([data-pie-content]) h3,
:where([data-pie-content]) h4,
:where([data-pie-content]) h5,
:where([data-pie-content]) h6 {
	margin-top: 0;
}

/* Spacing and inheritance only: `font-weight: 500` used to sit here and flatten
   every authored heading to lighter-than-bold, weakening the visual hierarchy
   a screen-reader user gets from the heading level. */
:where([data-pie-content]) .h1,
:where([data-pie-content]) .h2,
:where([data-pie-content]) .h3,
:where([data-pie-content]) .h4,
:where([data-pie-content]) .h5,
:where([data-pie-content]) .h6,
:where([data-pie-content]) h1,
:where([data-pie-content]) h2,
:where([data-pie-content]) h3,
:where([data-pie-content]) h4,
:where([data-pie-content]) h5,
:where([data-pie-content]) h6 {
	margin-bottom: 0.5em;
	font-family: inherit;
	line-height: 1.2;
	color: inherit;
}

/*
 * Removed: a `#stimulus` / `#item` pair of 50% left floats and a
 * `.lrn_feature h3` margin override. The float pair hard-coded a two-column
 * layout keyed to two global ids — it cannot reflow at 400% zoom (SC 1.4.10),
 * and it applied to any element in the host document carrying those ids.
 * The legacy players never applied the margin override, so content migrated
 * with `.lrn_feature` keeps the heading margin it had there.
 */

.TEX-S3 {
	font-family: MJXZERO, MJXTEX-S3 !important;
}

.TEX-S2 {
	font-family: MJXZERO, MJXTEX-S2 !important;
}

.TEX-S1 {
	font-family: MJXZERO, MJXTEX-S1 !important;
}

.TEX-I {
	font-family: MJXZERO, MJXTEX-I !important;
}

mjx-c.mjx-c2032 {
	font-family: "CerebriSans", serif !important;
}

mjx-c.mjx-c22,
mjx-c.mjx-c27 {
	font-family: MJXZERO, serif !important;
}

:where([data-pie-content]) table {
	border-collapse: collapse;
}

.evaluate-bottom-border > :first-child::after {
	content: "";
	display: block;
	border-bottom: 1px solid
		color-mix(in srgb, var(--pie-text, #000) 15%, transparent);
}

/* ANSWER ELIMINATOR */

:where([data-pie-content]) .pie-answer-eliminator-toggle {
	/* em, not px: PNP font scaling raises the surrounding text size without
	   touching px boxes, which left a fixed 28px control under grown text. The
	   box is 1.75x the surrounding text and the glyph 1.125x — the 28px/18px the
	   control used to pin at a 16px base — and the box stays past SC 2.5.8's 24px
	   minimum for any base at or above 14px. The box divides by the glyph factor
	   because `em` in a length resolves against this element's own font-size, not
	   the parent's; a bare 1.75em here measures 31.5px, not 28px. */
	width: calc(1.75em / 1.125);
	height: calc(1.75em / 1.125);
	padding: 0;
	border: 1px solid var(--pie-border, #ccc);
	border-radius: 4px;
	background: var(--pie-white, #fff);
	cursor: pointer;
	font-size: 1.125em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(
		--pie-answer-eliminator-toggle-color,
		var(--pie-button-color, #8c8c8c)
	);
	transition: all 0.2s ease;
	z-index: 10;
}

:where([data-pie-content]) .pie-answer-eliminator-toggle:hover {
	background: var(--pie-secondary-background, #f0f0f0);
	border-color: var(--pie-border-dark, #999);
	color: var(--pie-text, #333);
}

:where([data-pie-content]) .pie-answer-eliminator-toggle--active,
:where([data-pie-content]) .pie-answer-eliminator-toggle--active:hover {
	background: var(--pie-incorrect, #ff9800);
	border-color: var(--pie-incorrect, #ff9800);
	color: var(--pie-white, #fff);
}

:where([data-pie-content]) .pie-answer-eliminator-eliminated-fallback {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: var(
		--pie-answer-eliminator-strike-color,
		var(--pie-incorrect, #ff9800)
	);
}

/*
 * Dims the choice as well as striking it, so elimination survives a strike
 * colour the learner cannot distinguish. Kept at 0.6 rather than lower: the text
 * stays readable, because eliminating a choice is reversible and the learner has
 * to be able to reconsider it.
 *
 * Keyed on the attribute rather than on the fallback class, because the class is
 * added only by the path for browsers without the CSS Highlight API. The
 * attribute is set by both paths, and a highlight pseudo cannot carry `opacity`
 * at all — declaring it there dimmed nothing, so the modern path shipped the
 * strike as its only cue.
 */
:where([data-pie-content]) [data-pie-answer-eliminated="true"] {
	opacity: 0.6;
}

:where([data-pie-content]) .pie-answer-eliminator-image-strike {
	position: relative;
	display: inline-block;
	max-width: 100%;
	/*
	 * Collapse the line-box strut so the wrapper hugs the image exactly (no
	 * baseline descender gap under it) and the X cannot overhang the artwork.
	 * It also keeps the image bottom on the text baseline, as an unwrapped
	 * baseline-aligned image sits.
	 */
	line-height: 0;
}

:where([data-pie-content]) .pie-answer-eliminator-image-strike-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

:where([data-pie-content]) .pie-answer-eliminator-image-strike-line {
	stroke: var(
		--pie-answer-eliminator-strike-color,
		var(--pie-incorrect, #ff9800)
	);
	stroke-width: 3;
	stroke-linecap: square;
}

/* Wider light line under each diagonal so the X stays legible on dark imagery. */
:where([data-pie-content]) .pie-answer-eliminator-image-strike-casing {
	stroke: var(
		--pie-answer-eliminator-image-strike-casing-color,
		rgba(255, 255, 255, 0.85)
	);
	stroke-width: 6;
	stroke-linecap: square;
}

/*
 * Eliminated math: MathJax's rendered glyphs are generated content, so neither
 * `::highlight()` nor `text-decoration` reaches them. The eliminator marks the
 * rendered math box instead and the paint happens here, in the same colour and
 * weight as the text line-through so a choice mixing prose and math reads as one
 * strike. Which mark it gets depends on the shape of the expression — the tool
 * measures the box and picks `--line` or `--cross`.
 */
:where([data-pie-content]) .pie-answer-eliminator-math-strike {
	position: relative;
	/*
	 * Internal: the resolved strike paint, so the rules below need not repeat the
	 * fallback chain. Not a themeable knob — set --pie-answer-eliminator-strike-color.
	 */
	--pie-answer-eliminator-strike-paint: var(
		--pie-answer-eliminator-strike-color,
		var(--pie-incorrect, #ff9800)
	);
}

/* A single row of symbols takes the same line-through as the surrounding prose. */
:where([data-pie-content]) .pie-answer-eliminator-math-strike--line::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 2px solid var(--pie-answer-eliminator-strike-paint);
	pointer-events: none;
}

/*
 * A stacked 2D layout (fraction, radical, matrix) takes the diagonals instead.
 * A centred line would land on the math axis — precisely where the fraction bar
 * already is — and read as a recoloured bar rather than an elimination, so the
 * expression is crossed out the way an eliminated image is. Corner keywords make
 * each gradient's transition run exactly corner to corner at any aspect ratio,
 * with a 1px feather either side of the 1px core for a smooth 2px line.
 */
:where([data-pie-content]) .pie-answer-eliminator-math-strike--cross::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(
			to bottom right,
			transparent calc(50% - 1.5px),
			var(--pie-answer-eliminator-strike-paint) calc(50% - 0.5px),
			var(--pie-answer-eliminator-strike-paint) calc(50% + 0.5px),
			transparent calc(50% + 1.5px)
		),
		linear-gradient(
			to bottom left,
			transparent calc(50% - 1.5px),
			var(--pie-answer-eliminator-strike-paint) calc(50% - 0.5px),
			var(--pie-answer-eliminator-strike-paint) calc(50% + 0.5px),
			transparent calc(50% + 1.5px)
		);
}

:where([data-pie-content]) .pie-answer-masked-fallback {
	opacity: 0.2;
	filter: blur(2px);
}

:where([data-pie-content]) .pie-answer-eliminator-sr-announcement {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* AUTHORED COLOURS

   Under a color scheme, colours written into authored markup give way to the
   scheme. Sanitizers mark the elements that carry one (`markAuthoredColors` in
   @pie-element/shared-utils): `data-pie-authored-ink` for a text colour,
   `data-pie-authored-border` for a border colour and `data-pie-authored-fill`
   for a background, `light` when it is near white and `shade` otherwise. Ink
   and borders take the scheme's text and border colours. A light fill, usually
   the page the text was pasted from, drops away. A shade fill (a header row, a highlight) inverts:
   it takes the scheme's ink, and everything inside it reads the scheme's page
   as its ink, so it keeps the contrast the scheme certifies and still stands
   out. The default theme stamps no data-color-scheme and keeps the authored
   colours. Gradients, background images and colours in MathJax output carry
   no marker and render as authored.

   The ink and page are captured on the element that declares the scheme's
   tokens, so the swap inside a fill reads them without a cycle, and a fill
   nested in a fill inverts once. Controls inside a fill read the swapped
   neutral tokens; accent and feedback tokens keep their page values.

   `!important` outranks the authored inline style, and the sanitizers drop
   `!important` from a marked declaration. The rules stay document-wide: the
   markers name authored content only, and elements portal authored markup to
   <body>. */
[data-color-scheme] {
	--pie-scheme-ink: var(--pie-text);
	--pie-scheme-page: var(--pie-background);
}

[data-color-scheme] [data-pie-authored-ink] {
	color: var(--pie-text) !important;
}

[data-color-scheme] [data-pie-authored-border] {
	border-color: var(--pie-border) !important;
}

[data-color-scheme] [data-pie-authored-fill="light"] {
	background-color: transparent !important;
	color: var(--pie-text) !important;
}

[data-color-scheme] [data-pie-authored-fill="shade"] {
	--pie-text: var(--pie-scheme-page);
	--pie-black: var(--pie-scheme-page);
	--pie-border: var(--pie-scheme-page);
	--pie-background: var(--pie-scheme-ink);
	--pie-white: var(--pie-scheme-ink);
	background-color: var(--pie-scheme-ink) !important;
	color: var(--pie-scheme-page) !important;
}