/* PIE font size scaling.
 *
 * Four presets on `--pie-font-scale`, selected by `data-font-size` on any
 * ancestor of the player — matching Learnosity's font-size accommodation
 * (100/125/150/175%), which is the scale K-12 programs already specify against.
 *
 *   <html data-font-size="large">          host owns the whole page
 *   <div data-font-size="large">           host scopes it to a region
 *
 * A host that drives theming through `<pie-theme>` sets the token directly
 * instead, and needs nothing from this file:
 *
 *   <pie-theme variables='{"--pie-font-scale":"1.25"}'>
 *
 * WHAT SCALES. Text that inherits its size scales, because the rules below set
 * `font-size` on the content hosts and inheritance crosses shadow boundaries.
 * Text whose own rule names `rem` or `px` does not: `rem` resolves against the
 * document root and `px` against nothing, and no rule inside a subtree can
 * change what either means. A host that needs those to follow as well has to
 * scale the root font size itself, which is a page-wide decision this package
 * does not make on its behalf. WCAG 2.2 1.4.4 is satisfied either way — browser
 * zoom remains available and unaffected — so this is a comfort accommodation
 * layered over that, not a substitute for it.
 *
 * `calc(1rem * var(--pie-font-scale))` is deliberately root-relative rather than
 * `em`-relative: the hosts nest (an item shell inside a section player inside a
 * themed region), and an `em` factor would compound at each level and multiply
 * 1.25 into 1.95.
 */

/* The unset default. Also declared by the base theme, so the token resolves
 * whether a host loads this file, `tokens.css`, or drives `<pie-theme>`. */
:root {
	--pie-font-scale: 1;
}

[data-font-size="normal"] {
	--pie-font-scale: 1;
}

[data-font-size="large"] {
	--pie-font-scale: 1.25;
}

[data-font-size="xlarge"] {
	--pie-font-scale: 1.5;
}

[data-font-size="xxlarge"] {
	--pie-font-scale: 1.75;
}

/* Content hosts.
 *
 * `pie-item-scope` and `pie-passage-shell` hold the section player's content,
 * the scope around a host's own item player too, and `pie-item-player` renders
 * PIE elements into its own shadow tree. `pie-player` is the externally
 * loaded item wrapper some hosts render items through instead, so both delivery
 * paths are covered — targeting only the wrapper, as this file previously did,
 * missed every item this repo renders itself.
 *
 * Scoped under `[data-font-size]` so the declaration only exists once a host has
 * opted in, and so a host's own rules keep the upper hand at equal specificity.
 */
[data-font-size] pie-item-scope,
[data-font-size] pie-passage-shell,
[data-font-size] pie-item-player,
[data-font-size] pie-player,
pie-item-scope[data-font-size],
pie-passage-shell[data-font-size],
pie-item-player[data-font-size],
pie-player[data-font-size] {
	font-size: calc(1rem * var(--pie-font-scale, 1));

	/* Long words at 175% overflow a column that fits them at 100%. */
	overflow-wrap: break-word;
}

/* Line height has to open up with the type or the block tightens as it grows.
 * A ratio, so a host that sets its own line-height still wins. */
[data-font-size="large"] pie-item-scope,
[data-font-size="large"] pie-passage-shell,
[data-font-size="large"] pie-item-player,
[data-font-size="large"] pie-player,
[data-font-size="xlarge"] pie-item-scope,
[data-font-size="xlarge"] pie-passage-shell,
[data-font-size="xlarge"] pie-item-player,
[data-font-size="xlarge"] pie-player,
[data-font-size="xxlarge"] pie-item-scope,
[data-font-size="xxlarge"] pie-passage-shell,
[data-font-size="xxlarge"] pie-item-player,
[data-font-size="xxlarge"] pie-player {
	line-height: 1.6;
}