/* this file is being included for viewing as well as editing modes */

html, body {
	/* default font */
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 13px;
	line-height: 1.48em;
}

a, a:link, a:visited, a:active, a:hover {
	/* this removes the blue color from links on Chrome 7.0.517.41 */
	color: inherit;
	text-decoration: inherit;
}

#hg-centered-wrapper {
	/* Centered layout mode's container (module_page.inc.php).

	   pointer-events:none is load bearing, not decoration: the container spans
	   the canvas, so without it every click meant for the page background hits
	   the container instead of body - and the editor decides what is a
	   background click by testing e.target == document.body. That silently
	   breaks opening the page menu and deselecting objects. Events pass
	   through the container and are picked up by the objects themselves. */
	pointer-events: none;
}

#hg-centered-wrapper > .object {
	pointer-events: auto;
}

.object > img, .object > video, .object > iframe {
	/* Rounded corners (object-border-radius) apply to the OBJECT, and
	   border-radius does not clip children - so a text object rounds
	   correctly, because it paints its own background, while an image or a
	   video keeps square corners inside the rounded box. Inheriting the
	   radius rounds the media with the object without reaching for
	   overflow:hidden, which is the author's own separate decision (the
	   clip/show toggle). */
	border-radius: inherit;
}

.glue-edge-fade {
	/* A soft edge: the object's content fades out towards its edges instead
	   of stopping at them. module_object.inc.php stores only the DISTANCE, as
	   --glue-fade, and adds this class; the gradient lives here so there is
	   one of it rather than one in the editor and one in the renderer.

	   Two gradients, one per axis, INTERSECTED. Each one on its own fades
	   only two opposite edges and leaves a band straight through the middle
	   untouched; intersecting them - a pixel is opaque only where both say
	   opaque - is what fades all four evenly and keeps the feel of a
	   rectangle. Compositing is the whole mechanism, not a detail: with the
	   default (add) the two bands union instead, and the left and right edges
	   never fade at all. mask-composite: intersect is Firefox 53+ and Chrome
	   120+; -webkit-mask-composite: source-in is the older Blink spelling of
	   the same thing.

	   The class is on the object rather than the rule being on every .object
	   because a mask costs a compositing layer, and because a mask that goes
	   wrong hides its element entirely - not something to hand to objects
	   nobody has touched. */
	--glue-fade: 0px;
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 var(--glue-fade),
			#000 calc(100% - var(--glue-fade)), transparent),
		linear-gradient(to bottom, transparent, #000 var(--glue-fade),
			#000 calc(100% - var(--glue-fade)), transparent);
	mask-image:
		linear-gradient(to right, transparent, #000 var(--glue-fade),
			#000 calc(100% - var(--glue-fade)), transparent),
		linear-gradient(to bottom, transparent, #000 var(--glue-fade),
			#000 calc(100% - var(--glue-fade)), transparent);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.glue-glow {
	/* The whole box-shadow family behind an object, composed here, once:
	   the soft halo (the glow) and a directional drop shadow. That is the
	   difference between this and the edge fade below - the fade is a mask,
	   so it takes the text with it; shadows paint outside (or inside) the
	   box and never touch the content.

	   Only ingredients are stored, never a shadow: colours, the halo's
	   reach and strength, and the drop's distance, angle, blur and spread.
	   The class is on the element whenever any
	   member is, and the members nobody set stay invisible (a zero size,
	   a transparent colour, or an alpha that color-mix multiplies to
	   nothing), so adding one shadow never invents another. Everything
	   composes into this one box-shadow, so no member can ever become a
	   second declaration that overwrites the others.

	   The glow is three concentric layers (reach, twice reach, four times
	   reach) at falling alphas - one layer reads as a hard edge, the stack
	   as a soft halo. An optional second colour (--glue-glow-color2) puts
	   the halo's side layers into a duotone, and --glue-glow-inner gates
	   the inside layers (by alpha, not by size: a zero-sized layer is not
	   invisible, it is a solid box). The drop shadow is a distance in a
	   direction, resolved to x/y offsets HERE via cos()/sin() of the
	   stored angle - the angle keeps its unit, so the trig sees an angle
	   rather than a number.

	   Every variable used below has a default here, and every one must: a
	   single undefined variable makes the whole box-shadow invalid at
	   computed-value time and every layer vanishes at once. color-mix is
	   what lets a stored colour take an alpha without splitting it into
	   channels first (Chrome 111+, Firefox 113+); cos()/sin() are Chrome
	   111+/Firefox 108+. */
	--glue-glow-color: transparent;
	--glue-glow-spread: 0;
	--glue-glow-alpha: 80;
	--glue-glow-inner: 0;
	--glue-glow-color2: transparent;
	--glue-drop-color: transparent;
	--glue-drop-distance: 0;
	--glue-drop-angle: 0deg;
	--glue-drop-blur: 0;
	--glue-drop-spread: 0;
	box-shadow:
		0 0 calc(var(--glue-glow-spread) * 1px)
			color-mix(in srgb, var(--glue-glow-color) calc(var(--glue-glow-alpha) * 1%),
				transparent),
		0 0 calc(var(--glue-glow-spread) * 2px)
			color-mix(in srgb, var(--glue-glow-color) calc(var(--glue-glow-alpha) * 0.6%),
				transparent),
		0 0 calc(var(--glue-glow-spread) * 4px)
			color-mix(in srgb, var(--glue-glow-color) calc(var(--glue-glow-alpha) * 0.35%),
				transparent),
		inset 0 0 calc(var(--glue-glow-spread) * 1px)
			color-mix(in srgb, var(--glue-glow-color)
				calc(var(--glue-glow-alpha) * var(--glue-glow-inner) * 1%), transparent),
		inset 0 0 calc(var(--glue-glow-spread) * 2px)
			color-mix(in srgb, var(--glue-glow-color)
				calc(var(--glue-glow-alpha) * var(--glue-glow-inner) * 0.6%), transparent),
		inset 0 0 calc(var(--glue-glow-spread) * 4px)
			color-mix(in srgb, var(--glue-glow-color)
				calc(var(--glue-glow-alpha) * var(--glue-glow-inner) * 0.35%), transparent),
		inset calc(var(--glue-glow-spread) * 0.4px) 0 calc(var(--glue-glow-spread) * 1.6px)
			color-mix(in srgb, var(--glue-glow-color2) calc(100% * var(--glue-glow-inner)),
				transparent),
		inset calc(var(--glue-glow-spread) * -0.4px) 0 calc(var(--glue-glow-spread) * 6px)
			color-mix(in srgb, var(--glue-glow-color2) calc(100% * var(--glue-glow-inner)),
				transparent),
		calc(var(--glue-glow-spread) * -0.2px) 0 calc(var(--glue-glow-spread) * 1.6px)
			var(--glue-glow-color2),
		calc(var(--glue-glow-spread) * 0.2px) 0 calc(var(--glue-glow-spread) * 6px)
			var(--glue-glow-color2),
		calc(var(--glue-drop-distance) * cos(var(--glue-drop-angle)) * 1px)
			calc(var(--glue-drop-distance) * sin(var(--glue-drop-angle)) * 1px)
			calc(var(--glue-drop-blur) * 1px) calc(var(--glue-drop-spread) * 1px)
			var(--glue-drop-color);
}

.glue-text-shadow {
	/* A halo behind the text itself. Like the glow above it, what is stored
	   is the ingredients - a radius, a strength and a colour - and the value
	   is composed here, once. text-shadow has no spread of its own, so the
	   radius is the blur and the strength is the colour's alpha. */
	--glue-shadow-radius: 6;
	--glue-shadow-alpha: 80;
	--glue-shadow-color: #000;
	text-shadow: 0 0 calc(var(--glue-shadow-radius) * 1px)
		color-mix(in srgb, var(--glue-shadow-color)
			calc(var(--glue-shadow-alpha) * 1%), transparent);
}