/* 
== == == == == == == == == == == == == == == == == == == == == == == == ==
TITLE:			tmtg.css v1.3.2
AUTHOR:			Timothy Beto
CONTACT:		tim@timcode.dev (bug reports and feature requests)
WEBSITE:		https://timcode.dev/tmtg
LICENSE:		MIT License, Copyright (c) 2026 Timothy Beto; full text in the LICENSE.txt file, or at https://opensource.org/license/mit
DATE CREATED:	Fri, 23 Jan 2026 14:26:00 GMT
DATE MODIFIED:	Wed, 04 Nov 2026 01:00:00 GMT
DESCRIPTION:	css stylesheet for TMTG (Tim's Multi Talented Gallery)
== == == == == == == == == == == == == == == == == == == == == == == == ==
*/

/* Registered so the value is converted to pixels on the container (where the arrows take their size) and inherited as pixels, rather than re-read in each element's own font size; browsers without @property fall back to a slightly wider margin */
@property --tmtg-arrow-clearance {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

/* Registered for the same reason: the slide-number row (in the caption stage's larger font) must match the toolbar space measured on the container */
@property --tmtg-toolbar-clearance {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

/* Registered for the same reason: on a phone held sideways, the slide number (in the caption stage's font size) sits beside the toolbar at exactly its height */
@property --tmtg-toolbar-height {
	syntax: '<length>';
	inherits: true;
	initial-value: 40px;
}

/* Registered for the same reason: the caption stage and the thumbnail strip use different font sizes, but their gaps must match */
@property --tmtg-edge-gap {
	syntax: '<length>';
	inherits: true;
	initial-value: 12px;
}

/* Registered for the same reason: the container, gallery, and thumbnail strip share one corner curve */
@property --tmtg-corner-radius {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

/* The colors the gallery actually uses, taken from the page's --tmtg-background, --tmtg-foreground, and --tmtg-accent (see the container below). Registered as colors, so a value the browser can't read as a color falls back to these defaults rather than leaving the gallery transparent or its text invisible; the script also reads them, already converted, for its contrast check */
@property --tmtg-color-bg {
	syntax: '<color>';
	inherits: true;
	initial-value: #000;
}

@property --tmtg-color-fg {
	syntax: '<color>';
	inherits: true;
	initial-value: #fff;
}

@property --tmtg-color-accent {
	syntax: '<color>';
	inherits: true;
	initial-value: rgb(100, 26, 0);
}

div.tmtgContainer {
	--tmtg-arrow-clearance: 4.75em; /* a little wider than the prev/next arrows (about 4.45em at the container's font size), so captions stay clear of them */
	--tmtg-toolbar-clearance: 3.75em; /* space reserved for the widget toolbar above the images, mirrored below them when nothing else is; change it here if the toolbar's height changes */
	--tmtg-edge-gap: .75em; /* the toolbar's distance below the gallery's top edge (.5em at its 1.5em font size); the thumbnail frame keeps the same spacing from the bottom */
	--tmtg-toolbar-height: calc(2.25em + 4px); /* the toolbar's height: its 1.5em font times the buttons' 1.2 line height, plus .15em padding above and below (all 2.25em here), plus its 2px borders */
	--tmtg-number-gap: calc(var(--tmtg-edge-gap) * 2 / 3); /* a slightly tighter gap above and below the captionless slide-number pill, so the image gives up less room; built from the registered gap, so it's the same length in the caption stage and the strip */
	padding: 0;
	margin: auto;
	margin-top: .3em;
	position: relative;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	min-width: 200px;
	container: tmtg / inline-size; /* makes the gallery's own width measurable from inside: cqw units and @container tmtg rules size the parts to the gallery, not the window, so a gallery in a narrow column looks the same whatever the window's size. Named so the strip's own container (below) can't answer the gallery's queries. A side effect: the width can't come from the contents, so the container must get its width from the page, as an ordinary block does */
	display: flex; /* stacks the gallery, caption stage, and thumbnail strip; the gallery takes the height the others leave */
	flex-direction: column;
	height: var(--tmtg-height, 100%); /* the "height" option, if set; otherwise fills a parent that has a height (and sizes to content in one that doesn't) */
	--tmtg-color-bg: var(--tmtg-background, #000); /* the page's colors, or the defaults; everything below reads these copies, so fullscreen can replace them (a page's #tmtgContainer rule would outrank the gallery's own rules if they used the page's variables directly) */
	--tmtg-color-fg: var(--tmtg-foreground, #fff);
	--tmtg-color-accent: var(--tmtg-accent, rgb(100, 26, 0)); /* a dark red, behind white icons on hover */
	background-color: var(--tmtg-color-bg); /* one backdrop for the whole widget, including the space beside the narrowed caption stage */
	--tmtg-corner-radius: 1.05em; /* the toolbar's .7em at its 1.5em font size, so the gallery's corners match the toolbar and thumbnail frame */
	border-radius: var(--tmtg-corner-radius);
	font-family: var(--tmtg-font, system-ui, sans-serif); /* the device's own interface font, with no download; set --tmtg-font on the container to use another. Scoped to the gallery, so the host page's text is untouched */
	line-height: 1.4; /* a fixed line spacing, rather than each font's own "normal", so caption heights match on every platform */
}

/* Each fullscreen rule also covers .tmtg-pseudo-fullscreen, the window-filling mode tmtg.js uses where the browser has no fullscreen (iPhones), so the two always look alike. :-webkit-full-screen is the older name, the only one Safari knew before 16.4 (iPads on iPadOS 15). :is() skips a name the browser doesn't recognize and keeps the rest, so listing both costs current browsers nothing; :not() would instead throw the whole rule away, which is why the "not fullscreen" rules wrap an :is() inside it */
div.tmtgContainer:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen) {
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
	position: relative;
	text-align: center;
	box-sizing: border-box;
	border-radius: 0;
	--tmtg-color-bg: #000; /* fullscreen is always black with white controls, whatever the page's colors: the image is all there is to see, and the page those colors were chosen to match is out of sight. The accent stays, since it sits behind white icons anyway */
	--tmtg-color-fg: #fff;
	--tmtg-mix-dim: 50% !important; /* the faint parts' usual strengths, which suit black and white. tmtg.js may strengthen them on the container to suit a light theme (see tmtgFitColors), and !important lets this rule win over those script-set values */
	--tmtg-mix-strip: 55% !important;
	--tmtg-mix-frame: 70% !important;
	--tmtg-mix-number: 86.7% !important;
	--tmtg-mix-pill: 22% !important;
}

/* The window-filling mode: must come after the rule above, whose position and size it replaces. tmtg.js also lifts it into the top layer where it can (as a popover), and these values override the browser's own popover styles too */
div.tmtgContainer.tmtg-pseudo-fullscreen {
	position: fixed;
	inset: 0; /* pinned to all four edges of the window, so it tracks Safari's toolbars, which a 100vh height doesn't */
	width: auto !important; /* !important, as in the browser's own fullscreen styles, so a height or width the page sets on the container itself can't shrink it */
	height: auto !important;
	max-width: none;
	max-height: none;
	border: 0;
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); /* keeps the controls clear of the notch or Dynamic Island in landscape; zero unless the page's viewport tag has viewport-fit=cover */
	overflow: hidden;
	overscroll-behavior: contain; /* a caption scrolled to its end doesn't go on to scroll the page behind */
	color: inherit; /* the popover styles would otherwise set the browser's default text color */
	z-index: 2147483647; /* the highest there is, for browsers without the top layer */
}

/* The padding above keeps the image and caption clear of the notch, but the toolbar and arrows are positioned absolutely, which measures from inside the border and ignores padding; they need the same clearance added themselves */
div.tmtgContainer.tmtg-pseudo-fullscreen div.tmtgToolbar {
	top: calc(var(--tmtg-edge-gap) + env(safe-area-inset-top, 0px));
}

div.tmtgContainer.tmtg-pseudo-fullscreen .tmtg-prev {
	left: env(safe-area-inset-left, 0px);
}

div.tmtgContainer.tmtg-pseudo-fullscreen .tmtg-next {
	right: env(safe-area-inset-right, 0px);
}

html.tmtg-pseudo-fullscreen-page {
	overflow: hidden; /* the page behind stays put while the gallery covers it */
}

div.tmtgGallery {
	background-color: var(--tmtg-color-bg);
	width: 100%;
	border-radius: var(--tmtg-corner-radius); /* its top corners sit in the container's, so they must curve the same way or their black would square them off */
	--tmtg-gallery-pad-top: var(--tmtg-toolbar-clearance); /* clears the widget toolbar, leaving a gap above the images */
	--tmtg-gallery-pad-x: 3em;
	--tmtg-gallery-pad-bottom: 0px;
	padding: var(--tmtg-gallery-pad-top) var(--tmtg-gallery-pad-x) var(--tmtg-gallery-pad-bottom); /* the padding lives in variables so the default height below can subtract it; rules that change it set the variable along with the padding */
	margin: auto;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex: 1 1 min(calc((100cqw - 2 * var(--tmtg-gallery-pad-x)) / (var(--tmtg-aspect, 3 / 2)) + var(--tmtg-gallery-pad-top) + var(--tmtg-gallery-pad-bottom)), max(60vh, calc(200px + var(--tmtg-gallery-pad-top) + var(--tmtg-gallery-pad-bottom)))); /* fills the container's remaining height. With no set height, the picture area takes a 3:2 shape (or the page's --tmtg-aspect), a common photo shape, at any gallery width, but never more than 60% of the window's height, so a wide gallery still fits on screen. That limit stops at a 200px picture: in a very short window the caption and strip keep their size, so the gallery can't fit anyway, and the image would otherwise shrink to nothing; the page scrolls instead. The shape still wins, so a narrow gallery isn't stretched. The padding is added back, since the basis includes it */
	min-height: 0; /* lets the gallery shrink below its image's natural height */
	overflow-x: clip; /* a sliding image starts partly outside the frame; this keeps it from showing over the arrows or the page. Only sideways, so the no-slides message can still grow downward; browsers without clip just show the slide's edge briefly */
	isolation: isolate; /* keeps the sliding image's painting inside the gallery. Without it, Firefox (seen on Linux) could fail to repaint the toolbar after a slide-in followed by a focus change, such as Shift+Tab between toolbar buttons: the toolbar vanished, though it stayed in the tab order, until the mouse moved. No z-index inside the gallery needs to reach outside it, so nothing else changes */
}

div.tmtgContainer:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen) div.tmtgGallery {
	width: 100%;
	padding: 0;
	padding-top: var(--tmtg-toolbar-clearance); /* clears the widget toolbar */
	margin: 0;
	border: 1px solid var(--tmtg-color-bg);
}

/* With the "toolbar" option off (tmtg-no-toolbar), there's nothing above the image to clear, so it keeps only the toolbar's own small gap from the top edge, and the image gets the rest */
div.tmtgContainer.tmtg-no-toolbar div.tmtgGallery {
	--tmtg-gallery-pad-top: var(--tmtg-edge-gap);
}

div.tmtgContainer.tmtg-no-toolbar div.tmtgToolbar {
	display: none; /* KYB: also takes its buttons out of the tab order */
}

/* Touch on the image (tmtg.js adds tmtg-swipe where it watches for swipes). The browser keeps vertical swipes, which scroll the page, and pinches, which zoom it, so visitors who need a closer look can have one; sideways swipes are left to tmtg.js, which changes the slide. In fullscreen there's nothing to scroll, so only pinches go to the browser. While zoomed in (tmtg-zoomed), one-finger drags go to the browser too, so visitors can move around the enlarged view; manipulation rather than auto leaves out double-tap zoom, as on the buttons. Browsers that don't know pinch-zoom drop the first two rules and handle every touch themselves, so pinching still works there, and so do swipes */
div.tmtgContainer.tmtg-swipe div.tmtgGallery {
	touch-action: pan-y pinch-zoom;
}

div.tmtgContainer.tmtg-swipe:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen) div.tmtgGallery {
	touch-action: pinch-zoom;
}

div.tmtgContainer.tmtg-swipe.tmtg-zoomed div.tmtgGallery {
	touch-action: manipulation;
}

div.tmtgGallery .tmtgNoSlides {
	color: var(--tmtg-color-fg);
	text-align: center;
	padding: 2em;
	width: 100%;
	font-size: 1.2em;
}

div.tmtgGallery .tmtgNoSlides pre {
	white-space: pre-wrap;
	margin-top: 2em;
	margin-bottom: 2em;
}

/* quick clicks and double-clicks on the controls and images would otherwise paint them with the selection highlight; the caption is left selectable, since visitors may want to copy its text, but not the slide number and its ": ", so a copy holds just the caption */
div.tmtgToolbar, div.tmtgGallery img, div.tmtgThumbs, #tmtgSlideNums, #tmtgSlideNumsSep {
	-webkit-user-select: none; /* Safari still needs the prefix */
	user-select: none;
}

div.tmtgGallery img {
	text-align: center;
	margin: 0; /* an auto margin above or below would stop the stretch below */
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: .3s;
	box-sizing: border-box;
	align-self: stretch; /* takes the gallery's height by stretching, not from height: 100%. With no set height, the gallery's height comes from flexing inside a container whose own height is auto, and Safari (seen on iPhone, and in WebKitGTK on Linux) won't resolve a percentage against that: the image fell back to its natural shape at full width, so in a wide, short gallery (a phone turned sideways) it ran far past the bottom. Stretching works in every browser */
	width: 100%;
	max-width: 100%;
	object-fit: var(--tmtg-object-fit, contain); /* the "objectFit" option: contain (whole image, default), cover (fills the frame, crops), or fill (fills the frame, stretches) */
	transform: translateZ(0); /* gives the image its own compositing layer, so Safari redraws it whole when its frame changes size. Without it, Safari (seen on iPhone, and in WebKitGTK on Linux) left a piece of the old drawing behind the image after captions were hidden and shown again. It moves nothing; the slide-in animations override it while they run, and only the image on show is drawn, so there's just one extra layer */
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* After navigation, tmtg.js gives the new image a class for the side it comes from: Next (and auto-advance) from the right, Previous from the left, a thumbnail from its side of the strip. It moves a short way in while fading in, settling into place. Only for visitors who haven't asked for reduced motion; everyone else, and decorative galleries, keep the plain fade above */
@media (prefers-reduced-motion: no-preference) {
	div.tmtgGallery img.tmtg-slide-from-right, div.tmtgGallery img.tmtg-slide-from-left {
		--tmtg-slide-distance: 25%; /* of the image's frame width; change it here to tune the slide */
		animation-duration: .35s; /* slightly longer than the fade, since movement takes a moment longer to read */
		animation-timing-function: cubic-bezier(.2, .7, .3, 1); /* ease-out: quick to start, gentle to settle */
	}

	div.tmtgGallery img.tmtg-slide-from-right {
		animation-name: tmtgSlideFromRight;
	}

	div.tmtgGallery img.tmtg-slide-from-left {
		animation-name: tmtgSlideFromLeft;
	}
}

@keyframes tmtgSlideFromRight {
	0% {
		opacity: 0;
		transform: translateX(var(--tmtg-slide-distance));
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes tmtgSlideFromLeft {
	0% {
		opacity: 0;
		transform: translateX(calc(-1 * var(--tmtg-slide-distance)));
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* Visitors who ask their system for reduced motion get the fade without the slide, and no growing buttons; hover and focus still brighten them. A fade involves no movement, which is what triggers motion sensitivity, so it's kept as a gentle sign of a new image; Apple's own Reduce Motion setting likewise swaps sliding for cross-fades */
@media (prefers-reduced-motion: reduce) {
	div.tmtgContainer div.tmtgToolbar button {
		transform: none; /* more specific than the :hover/:focus scale rules, so it wins wherever it sits; covers future toolbar widgets too. The prev/next arrows don't grow at all, so they need nothing here */
		transition: none;
	}
}

/* Decorative mode: no controls to clear, so the image fills the gallery inside a thin frame, and the gallery fills its container exactly */
div.tmtgContainer.tmtg-decorative {
	--tmtg-decorative-padding: .3em; /* the frame around the image; change it here or in your own stylesheet */
	margin: 0; /* the usual top margin would push a container-filling gallery past its container's bottom edge */
}

div.tmtgContainer.tmtg-decorative div.tmtgGallery {
	--tmtg-gallery-pad-top: var(--tmtg-decorative-padding);
	--tmtg-gallery-pad-x: var(--tmtg-decorative-padding);
	--tmtg-gallery-pad-bottom: var(--tmtg-decorative-padding);
	padding: var(--tmtg-decorative-padding);
}

div.tmtgContainer.tmtg-decorative div.tmtgGallery img {
	border-radius: max(0px, calc(var(--tmtg-corner-radius) - var(--tmtg-decorative-padding))); /* the image's corners follow the container's curve, so the thin frame keeps its width all the way round; never below zero if a page sets a thick frame */
}

/* Safety net: an older inline tmtgRun() call may build controls before the options are read; display: none also removes them from the tab order */
div.tmtgContainer.tmtg-decorative .tmtgToolbar, div.tmtgContainer.tmtg-decorative .tmtg-prev, div.tmtgContainer.tmtg-decorative .tmtg-next, div.tmtgContainer.tmtg-decorative div.tmtgCaptions, div.tmtgContainer.tmtg-decorative div.tmtgThumbs {
	display: none;
}

div.tmtgContainer:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen) div.tmtgGallery img {
	padding-top: .5%;
	padding-bottom: .5%;
	padding-right: 2%;
	padding-left: 2%;
}

div.tmtgThumbs {
	--tmtg-thumb-height: 4.5em; /* full-size thumb height; the stage height and the thumb width formula read it too */
	--tmtg-thumb-gap: 1em;
	--tmtg-thumb-frame-pad: .6em; /* room between the thumbs and the frame */
	--tmtg-thumb-frame-border: 2px;
	--tmtg-thumb-frame-radius: var(--tmtg-corner-radius); /* the gallery's own curve, so the frame follows when a page changes it */
	--tmtg-strip-arrow-width: 2em; /* the strip arrows: tall, narrow buttons, easy to tap */
	--tmtg-strip-arrow-gap: .5em; /* between each arrow and the frame */
	--tmtg-strip-arrow-space: 0px; /* the room the arrows take, when there are any (see .tmtg-has-arrows) */
	--tmtg-thumb-fit-width: calc((100cqw - 4 * var(--tmtg-thumb-gap) - 2 * (var(--tmtg-thumb-frame-pad) + var(--tmtg-thumb-frame-border)) - var(--tmtg-strip-arrow-space)) / 5); /* a fifth of what the strip has left after the gaps, the frame, and any strip arrows. Its cqw is measured where it's used, by the frame and the thumbs inside this strip */
	--tmtg-thumb-fit-height: min(var(--tmtg-thumb-height), var(--tmtg-thumb-fit-width) * 9 / 16); /* the thumbs' height: full height where there's room, and shorter as a narrow strip narrows them */
	display: flex; /* lines up back arrow, frame, forward arrow, centered as a group */
	align-items: center;
	justify-content: center;
	gap: var(--tmtg-strip-arrow-gap);
	touch-action: pan-y; /* vertical swipes still scroll the page; sideways swipes are left to tmtg.js, which moves five images */
	container-type: inline-size; /* lets the thumb width formula measure the strip with cqw, since the stage shrinks to fit the thumbs and can't be measured from inside */
	min-height: 3em;
	background-color: var(--tmtg-color-bg);
	width: 100%;
	border-radius: var(--tmtg-corner-radius); /* its bottom corners sit in the container's */
	padding: calc(1em - var(--tmtg-thumb-frame-pad) - var(--tmtg-thumb-frame-border)) 1em; /* the frame's padding and border come out of the top and bottom padding, so the strip keeps its height and the main image its size */
	text-align: center;
	margin: auto;
	margin-top: -.5em; /* hides rounded corners of gallery which are present in case thumbs = 0 */
	color: var(--tmtg-color-fg);
	box-sizing: border-box;
	flex: 0 0 auto; /* the strip keeps its height; the gallery above shrinks to make room */
	/*border: 1px dashed #11ff00;*/
}

div.tmtgContainer:not(:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen)) div.tmtgThumbs {
	padding-bottom: var(--tmtg-edge-gap); /* the frame sits as far above the gallery's bottom edge as the toolbar sits below its top; fullscreen keeps the tighter fit, where the screen edge frames it */
}

/* galleries of more than five images get the strip arrows; their width comes out of the space the five thumbs share, so all five still fit in a narrow strip */
div.tmtgThumbs.tmtg-has-arrows {
	--tmtg-strip-arrow-space: calc(2 * (var(--tmtg-strip-arrow-width) + var(--tmtg-strip-arrow-gap)));
}

div.tmtgThumbs div#tmtgThumbsStage {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center; /* keep the thumbs together as a group, rather than spread across a wide stage */
	gap: var(--tmtg-thumb-gap);
	overflow-x: hidden;
	width: fit-content; /* the stage is the frame, so it wraps the thumbs rather than spanning the strip */
	max-width: calc(100% - var(--tmtg-strip-arrow-space));
	padding: var(--tmtg-thumb-frame-pad);
	border: var(--tmtg-thumb-frame-border) solid color-mix(in srgb, var(--tmtg-color-fg) var(--tmtg-mix-frame, 70%), transparent); /* same as the widget toolbar */
	border-radius: var(--tmtg-thumb-frame-radius);
	margin: 0; /* the strip's flex layout centers it; auto margins would push the arrows out to the strip's edges */
	height: calc(var(--tmtg-thumb-fit-height) + 2 * (var(--tmtg-thumb-frame-pad) + var(--tmtg-thumb-frame-border))); /* the frame closes up around the thumbs as a narrow strip shrinks them, instead of leaving empty space above and below */
	position: relative; /* the thumbs leaving during a slide are placed against the frame */
	/*border: 1px dashed #11ff00;*/
}

/* each thumb is a button holding the image and its slide number; the button takes the size and shape, and the browser's own button styles are cleared */
div.tmtgThumbs div#tmtgThumbsStage button.tmtg-thumb {
	position: relative; /* the number is placed against it */
	width: min(calc(var(--tmtg-thumb-height) * 16 / 9), var(--tmtg-thumb-fit-width)); /* full height where there's room; in a narrow gallery, the width that fits all five unclipped */
	max-height: 100%;
	border-radius: max(0px, calc(var(--tmtg-thumb-frame-radius) - var(--tmtg-thumb-frame-pad) - var(--tmtg-thumb-frame-border))); /* inner corners follow the frame's curve; never below zero, for a page that sets small or square corners */
	flex: 0 0 auto; /* keep the 16:9 shape rather than shrinking to fit */
	align-self: center; /* shrunken thumbs sit mid-strip */
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	touch-action: manipulation; /* like the other buttons: no double-tap zoom delay */
}

/* After navigation, tmtg.js slides the strip over by the places the image moved: each thumb starts --tmtg-strip-shift from its place, where its old self was, and settles in, with the same timing as the main image's slide. The frame's overflow clips the thumbs arriving and leaving at its edges. The thumbs leaving are taken out of the layout, so the strip's size doesn't change. Bigger jumps, and visitors who ask for reduced motion, get the main image's fade instead (tmtg-strip-fading) */
div.tmtgThumbs div#tmtgThumbsStage button.tmtg-thumb.tmtg-thumb-leaving {
	position: absolute;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	div.tmtgThumbs div#tmtgThumbsStage.tmtg-strip-sliding button.tmtg-thumb {
		animation: tmtgStripShift .35s cubic-bezier(.2, .7, .3, 1);
	}
}

@keyframes tmtgStripShift {
	from {
		transform: translateX(var(--tmtg-strip-shift, 0px));
	}
}

div.tmtgThumbs div#tmtgThumbsStage.tmtg-strip-fading button.tmtg-thumb {
	animation: fadeInOpacity .3s ease-in;
}

/* KYB: a clear ring for keyboard focus; it fits inside the frame's padding, so the frame doesn't clip it */
div.tmtgThumbs div#tmtgThumbsStage button.tmtg-thumb:focus-visible {
	outline: 2px solid var(--tmtg-color-fg);
	outline-offset: 3px;
}

div.tmtgThumbs div#tmtgThumbsStage button.tmtg-thumb img {
	display: block; /* no stray space below, as an inline image would leave */
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9; /* one shape at every gallery width; the stage's fixed height caps the size, so the main image never gives up room */
	border-radius: inherit;
	object-fit: cover;
	object-position: 50% 20%;
	filter: saturate(10%); /* only the image dims, so the number keeps its full contrast */
	opacity: 0.7;
	transition: all 250ms ease-in;
}

div.tmtgThumbs div#tmtgThumbsStage button.tmtg-thumb:hover img, div.tmtgThumbs div#tmtgThumbsStage button.tmtg-thumb:focus-visible img {
	filter: saturate(80%);
}

div.tmtgThumbs div#tmtgThumbsStage button.tmtg-activated img {
	filter: saturate(100%);
	opacity: 1;
}

/* the slide number in the thumb's bottom-right corner. White on a 60% black pill keeps about 5.7:1 contrast even over a white image, above the 4.5:1 WCAG 1.4.3 asks of small text; the faint white of the main slide number's pill would vanish over light images */
div.tmtgThumbs div#tmtgThumbsStage span.tmtg-thumb-num {
	position: absolute;
	right: .25em;
	bottom: .25em;
	padding: .25em .5em;
	border-radius: 99em; /* fully rounded ends, however many digits */
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: .75em;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums; /* every digit the same width, so numbers don't jiggle as the strip moves */
	pointer-events: none; /* taps go to the button underneath */
}

/* the current thumb's number is reversed out, white with dark digits, marking where the visitor is */
div.tmtgThumbs div#tmtgThumbsStage button.tmtg-activated span.tmtg-thumb-num {
	background-color: #fff;
	color: #000;
}

/* the strip arrows: plain chevrons, dim at rest, like the toolbar icons. On hover or keyboard focus they turn white on a rounded patch of the main arrows' dark red, which ties the two pairs together. At 55% white on the strip's black they have about 6.6:1 contrast, well above the 3:1 WCAG 1.4.11 asks of controls */
div.tmtgThumbs button.tmtg-strip-arrow {
	flex: 0 0 auto;
	width: var(--tmtg-strip-arrow-width);
	height: max(var(--tmtg-thumb-fit-height), 24px); /* as tall as the thumbs: a large target, with the icon centered. Never under 24px, the smallest touch target WCAG 2.5.8 allows, though the thumbs get shorter than that in the narrowest strips */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: .5em;
	background: none;
	color: color-mix(in srgb, var(--tmtg-color-fg) var(--tmtg-mix-strip, 55%), transparent);
	font: inherit;
	cursor: pointer;
	touch-action: manipulation; /* like the other buttons: no double-tap zoom delay */
	transition: color 125ms ease-in, background-color 125ms ease-in; /* as quick as the main arrows */
}

div.tmtgThumbs button.tmtg-strip-arrow[hidden] {
	display: none; /* the rule above would otherwise override the hidden attribute */
}

div.tmtgThumbs button.tmtg-strip-arrow:hover, div.tmtgThumbs button.tmtg-strip-arrow:focus-visible {
	color: #fff; /* white on the accent, whatever the foreground, since the accent is always dark */
	background-color: color-mix(in srgb, var(--tmtg-color-accent) 80%, transparent); /* the main arrows' red */
}

/* after a click or tap, Page Up/Page Down, or a swipe across the strip, tmtg.js adds this class (tmtgFlash), and the strip arrow lights up and fades back to rest over 1s, as the main arrows do */
div.tmtgThumbs button.tmtg-strip-arrow.tmtg-fading {
	animation: tmtgStripArrowFade 1s ease-out forwards;
}

@keyframes tmtgStripArrowFade {
	from { background-color: color-mix(in srgb, var(--tmtg-color-accent) 80%, transparent); color: #fff; }
	to { background-color: transparent; color: color-mix(in srgb, var(--tmtg-color-fg) var(--tmtg-mix-strip, 55%), transparent); } /* browsers fade colors with their opacity factored in, so fading to transparent doesn't pass through gray */
}

div.tmtgThumbs button.tmtg-strip-arrow:focus-visible {
	outline: 2px solid var(--tmtg-color-fg); /* KYB: the same ring as the thumbs */
	outline-offset: 3px;
}

span.tmtg-strip-arrow-icon, span.tmtg-strip-arrow-icon svg {
	display: block;
	width: 1.75em;
	height: 1.75em;
}

div.tmtgCaptions {
	min-height: 4.5em; /* room for a two-line caption (with the number pill on its first line), so slides with one- or two-line captions keep the image the same size; longer captions grow the box */
	background-color: var(--tmtg-color-bg);
	width: auto; /* fills the space between its side margins */
	border-radius: 0em 0em .3em .3em;
	padding: 2em;
	padding-left: .5em; /* the side margins provide the clearance, so little padding is needed */
	padding-right: .5em;
	padding-bottom: .5em;
	padding-top: 1em;
	margin: auto;
	margin-top: -.5em;
	margin-left: var(--tmtg-arrow-clearance); /* keeps the caption, and its scrollbar, out from under the prev/next arrows */
	margin-right: var(--tmtg-arrow-clearance);
	color: var(--tmtg-color-fg);
	box-sizing: border-box;
	text-align: start; /* left in English and Spanish, right in a right-to-left language. Not justified: on narrow screens justifying stretched short lines into wide gaps between words, which make text harder to read, especially for people with dyslexia (WCAG 1.4.8) */
	flex: 0 0 auto;
	max-height: 50%; /* when the gallery has a set height, long captions never take more than half of it... */
	overflow-y: auto; /* ...and scroll beyond that, so no text is cut off */
	scrollbar-color: color-mix(in srgb, var(--tmtg-color-fg) var(--tmtg-mix-dim, 50%), transparent) transparent; /* subtle thumb on the stage, like the toolbar; ignored where unsupported */
	/*border: 1px dashed #11ff00;*/
	font-size: clamp(1em, .9em + .5cqw, 1.4em); /* grows with the gallery's width, but bounded so captions don't balloon in very wide galleries */
}

div.tmtgContainer:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen) div.tmtgCaptions {
	margin-top: 0;
	line-height: 150%;
	height: auto;
	min-height: 0; /* short captions take only the room they need */
	padding-top: 0;
	font-size: clamp(1.1em, 1em + .7cqw, 2em); /* the gallery fills the screen here, so its width is the screen's */
}

div.tmtgCaptions span {
	font-style: normal;
	font-weight: normal;
}


/* Widget toolbar: groups the feature buttons at the top-center of the gallery; add future widgets here */
div.tmtgToolbar {
	position: absolute;
	top: var(--tmtg-edge-gap); /* .5em at the toolbar's font size; the shared gap lets the sideways-phone slide number line up with it */
	height: var(--tmtg-toolbar-height); /* the height its contents give it anyway, set so the slide number can match it exactly */
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	gap: 1em;
	padding: .15em .5em;
	font-size: 1.5em;
	border: 2px solid color-mix(in srgb, var(--tmtg-color-fg) var(--tmtg-mix-frame, 70%), transparent);
	border-radius: var(--tmtg-corner-radius); /* the same curve as the gallery's corners (.7em at this font size), and it stays the same when a narrow gallery shrinks the toolbar */
	box-sizing: border-box;
	z-index: 99;
}

.tmtg-fullScreen, .tmtg-autoadv, .tmtg-captions, .tmtg-thumbs {
	text-align: center;
	cursor: pointer;
	padding: 0;
	margin: 0;
	font-size: 1em;
	line-height: 1.2;
	color: color-mix(in srgb, var(--tmtg-color-fg) var(--tmtg-mix-dim, 50%), transparent);
	background-color: transparent;
	border-radius: .2em;
	border: none;
	touch-action: manipulation;
	display: inline-block;
}

.tmtg-fullScreen:hover, .tmtg-fullScreen:focus-visible {
	color: var(--tmtg-color-fg);
	transform: scale(1.2);
}

.tmtg-autoadv:hover, .tmtg-autoadv:focus-visible, .tmtg-autoadv:active {
	color: var(--tmtg-color-fg);
	transform: scale(1.2);
}

.tmtg-captions:hover, .tmtg-captions:focus-visible {
	color: var(--tmtg-color-fg);
	transform: scale(1.2);
}

.tmtg-thumbs:hover, .tmtg-thumbs:focus-visible {
	color: var(--tmtg-color-fg);
	transform: scale(1.2);
}

/* KYB: keyboard focus shows the same white ring as the thumbs and strip arrows, instead of growing. A toggle that's on is already white, so with reduced motion (no growing) the browser's own ring was the only sign of focus, and its color varies by browser; this one is clear on the toolbar's black in every browser. A grown button's ring nearly touched the toolbar's border, so focus alone doesn't grow it; mouse hover still does, even on a focused button, and a tap does too (touch screens apply :hover, not :focus-visible). Written for any toolbar button, so future widgets get it too */
div.tmtgContainer div.tmtgToolbar button:focus-visible {
	outline: 2px solid var(--tmtg-color-fg);
	outline-offset: 2px;
}

div.tmtgContainer div.tmtgToolbar button:focus-visible:not(:hover) {
	transform: none; /* more specific than the :hover/:focus-visible scale rules above */
}

/* after a click or tap, tmtg.js adds this class (tmtgFlash): the button snaps back to its size and its color fades to its resting look over 0.5s, rather than staying grown and lit (on touch screens, until the next tap elsewhere). While the class is on, hover is switched off, so the button's own look is its resting one: white if the toggle is now on, dim if it's off. The animation gives only a starting frame, and the browser fills in the end from that resting look, so the same fade works for both states, even when fullscreen sets aria-pressed a moment later */
div.tmtgContainer div.tmtgToolbar button.tmtg-fading, div.tmtgContainer div.tmtgToolbar button.tmtg-fading:hover {
	transform: none;
	color: color-mix(in srgb, var(--tmtg-color-fg) var(--tmtg-mix-dim, 50%), transparent);
	animation: tmtgToolbarFade .5s ease-out;
}

div.tmtgContainer div.tmtgToolbar button.tmtg-fading[aria-pressed="true"] {
	color: var(--tmtg-color-fg); /* a toggle that's on rests at full strength, so only the size changes */
}

@keyframes tmtgToolbarFade {
	from { color: var(--tmtg-color-fg); }
}

.tmtg-captions[aria-pressed="true"] {
	color: var(--tmtg-color-fg); /* lit while the caption stage is showing */
}

/* With captions hidden, the caption stage shrinks to a slim row holding just the slide number, so visitors still know where they are. A gallery where no image has a caption (tmtg-no-captions, set by tmtg.js) looks the same: there's nothing to show in the taller row, and its captions button is gone, so visitors couldn't close the row up themselves */
div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions) div.tmtgCaptions {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	max-height: none;
	margin-top: 0; /* tall images reach the gallery's bottom edge, so the row no longer tucks under it */
	padding: var(--tmtg-number-gap) .5em 0; /* the gap above the pill; the strip below adds the same gap above its frame */
	overflow: hidden;
}

div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions) div.tmtgThumbs {
	margin-top: 0; /* no tucking under the number row, so the pill sits midway between the image and the thumbnail frame */
	padding-top: var(--tmtg-number-gap);
}

div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions) #tmtgCaption, div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions) #tmtgSlideNumsSep {
	display: none;
}

/* With thumbnails hidden too, the number row is the last thing below the image, so it takes the toolbar's height, mirroring the space above the image */
div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions).tmtg-thumbs-hidden div.tmtgCaptions {
	height: var(--tmtg-toolbar-clearance);
	margin-top: 0; /* no overlap with the gallery, so the row is exactly as tall as the space above the image */
	padding-top: 0;
	padding-bottom: 0;
}

/* With no toolbar, the space above the image is only the small edge gap, so the number row mirrors that instead: the gap below the pill matches the gap above the image */
div.tmtgContainer.tmtg-no-toolbar:is(.tmtg-captions-hidden, .tmtg-no-captions).tmtg-thumbs-hidden div.tmtgCaptions {
	height: auto;
	padding-top: var(--tmtg-number-gap);
	padding-bottom: var(--tmtg-edge-gap);
}

/* A lone image has no slide number; with captions hidden as well, the empty row goes and the gallery mirrors the toolbar clearance itself */
div.tmtgContainer.tmtg-single-slide #tmtgSlideNums, div.tmtgContainer.tmtg-single-slide #tmtgSlideNumsSep {
	display: none;
}

div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions).tmtg-single-slide div.tmtgCaptions {
	display: none;
}

div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions).tmtg-single-slide div.tmtgGallery {
	--tmtg-gallery-pad-bottom: var(--tmtg-toolbar-clearance);
	padding-bottom: var(--tmtg-toolbar-clearance);
}

div.tmtgContainer.tmtg-no-toolbar:is(.tmtg-captions-hidden, .tmtg-no-captions).tmtg-single-slide div.tmtgGallery {
	--tmtg-gallery-pad-bottom: var(--tmtg-edge-gap); /* mirrors the gap above, with no toolbar */
	padding-bottom: var(--tmtg-edge-gap);
}

.tmtg-autoadv[aria-pressed="true"] {
	color: var(--tmtg-color-fg); /* lit while auto-advance is running */
}

.tmtg-thumbs[aria-pressed="true"] {
	color: var(--tmtg-color-fg); /* lit while the thumbnail strip is showing */
}

.tmtg-fullScreen[aria-pressed="true"] {
	color: var(--tmtg-color-fg); /* lit while the gallery is fullscreen */
}

.tmtg-next, .tmtg-prev {
	--tmtg-arrow-icon: 1.35em; /* the icon's size; the semicircle below is worked out from it */
	--tmtg-arrow-pad-y: calc((var(--tmtg-arrow-icon) + 1.34em) / 2); /* makes the button exactly twice as tall as it is wide: the width is the icon plus .87em of side padding, the height the icon plus .4em of the icon's own padding, plus this above and below */
	cursor: pointer;
	position: absolute;
	top: 40%;
	width: auto;
	padding: 1em;
	padding-top: var(--tmtg-arrow-pad-y);
	padding-bottom: var(--tmtg-arrow-pad-y);
	margin-top: calc(.5em - var(--tmtg-arrow-pad-y)); /* keeps the arrow's center where it sat when the button was a taller rectangle (2em padding, -1.5em margin) */
	color: rgba(255, 255, 255, 0.85); /* the chevron; over the dark disc it has about 3.4:1 contrast even on a white image (and the disc about 4:1 against the image), above the 3:1 that WCAG 1.4.11 asks of controls. Toned down from the first version, which stood out too much over images in fullscreen; going lower drops below 3:1 */
	font-weight: bolder;
	font-size: 2em;
	background-color: transparent;
	border: none;
	transition: all 125ms ease-in;
	touch-action: manipulation;
	z-index: 99;
}

.tmtg-next:hover, .tmtg-prev:hover {
	background-color: color-mix(in srgb, var(--tmtg-color-accent) 80%, transparent);
	text-decoration: none;
	color: #fff;
	border: none;
	transition: all 125ms ease-in;
}


.tmtg-next:focus-visible, .tmtg-prev:focus-visible {
	background-color: color-mix(in srgb, var(--tmtg-color-accent) 80%, transparent);
	color: #fff;
}

.tmtg-next:active, .tmtg-prev:active {
	background-color: transparent;
	transition: all 125ms ease-in;
	color: #fff;
}

/* after a mouse click or tap, a Left/Right key, or a swipe on the image, tmtg.js adds this class (tmtgFlash), and the arrow's highlight appears and fades back to the resting look over 1s, starting at once. An animation outranks the :hover and :focus-visible rules, so it wins while the pointer rests on the arrow. Kept for reduced motion, since a fade involves no movement */
.tmtg-next.tmtg-fading, .tmtg-prev.tmtg-fading {
	animation: tmtgArrowFade 1s ease-out forwards;
}

.tmtg-fading span.tmtg-arrow-icon svg circle {
	animation: tmtgArrowDiscFade 1s ease-out forwards;
}

@keyframes tmtgArrowFade {
	from { background-color: color-mix(in srgb, var(--tmtg-color-accent) 80%, transparent); color: #fff; }
	to { background-color: transparent; color: rgba(255, 255, 255, 0.85); } /* browsers fade colors with their opacity factored in, so fading to transparent doesn't pass through gray */
}

@keyframes tmtgArrowDiscFade {
	from { fill-opacity: .7; }
	to { fill-opacity: .5; } /* the disc's resting opacity, set in the SVG */
}

.tmtg-next {
	right: 0;
	border-radius: 99em 0 0 99em; /* a semicircle, flat against the gallery's edge; the oversized radius is scaled down to exactly half the height */
	padding-right: .1em;
	padding-left: .77em; /* the gap between the icon and the button's inner edge; the captions' --tmtg-arrow-clearance allows for it */
	text-decoration: none;
}

.tmtg-prev {
	left: 0;
	border-radius: 0 99em 99em 0; /* see .tmtg-next */
	padding-left: .1em;
	padding-right: .77em; /* see .tmtg-next */
	text-decoration: none;
}

/* KYB: a lone image has nowhere to go, so its arrows, auto-advance button, and thumbnails button are hidden; display: none also takes them out of the tab order. tmtg.js sets the class on every run, so they come back if a page adds more images */
div.tmtgContainer.tmtg-single-slide :is(.tmtg-next, .tmtg-prev, .tmtg-autoadv, .tmtg-thumbs) {
	display: none;
}

div.tmtgContainer:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen) .tmtg-next, div.tmtgContainer:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen) .tmtg-prev {
	top: 50%; /* centered on the screen: top edge at the midpoint, then moved up by half the button's own height */
	margin-top: 0;
	transform: translateY(-50%);
}

.tmtg-next span.tmtg-arrow-icon, .tmtg-prev span.tmtg-arrow-icon {
	display: block; /* centers the icon in the button, rather than sitting it on the text baseline like a letter */
	padding: .2em 0; /* a little room above and below the icon inside the hover background */
}

span.tmtg-arrow-icon svg {
	display: block; /* no stray space under the icon, as an inline image would leave */
	width: var(--tmtg-arrow-icon); /* overrides the SVG's own 1em, which is only a fallback; the button's font size still scales it, so the narrow-gallery 4cqw rule shrinks it too */
	height: var(--tmtg-arrow-icon);
}

span.tmtg-arrow-icon svg circle {
	transition: fill-opacity 125ms ease; /* CSS outranks the SVG's own fill-opacity attribute, so these rules can change it */
}

/* hover and keyboard focus deepen the disc (and the buttons' rules turn the chevron fully white) rather than growing the icon: scaling a thin SVG stroke rounds to different pixels each frame, which made the chevron wiggle */
.tmtg-next:hover span.tmtg-arrow-icon svg circle, .tmtg-next:focus-visible span.tmtg-arrow-icon svg circle, .tmtg-prev:hover span.tmtg-arrow-icon svg circle, .tmtg-prev:focus-visible span.tmtg-arrow-icon svg circle {
	fill-opacity: .7;
}

#tmtgSlideNums, #tmtgSlideNumsSep {
	font-weight: bold;
	color: color-mix(in srgb, var(--tmtg-color-fg) var(--tmtg-mix-number, 86.7%), var(--tmtg-color-bg)); /* slightly softer than the caption text: #ddd on the default black */
	font-size: .9em;
	font-style: normal;
}

#tmtgSlideNums {
	display: inline-block;
	padding: .35em .75em;
	margin-right: .55em; /* the gap before the caption, now that the ": " is hidden */
	border-radius: 99em; /* fully rounded ends, however many digits */
	background-color: color-mix(in srgb, var(--tmtg-color-fg) var(--tmtg-mix-pill, 22%), transparent); /* the same faint tint as the toolbar icons' fill */
	line-height: 1;
	white-space: nowrap; /* "108 / 120" never breaks inside the pill */
	text-align: center;
}

/* the pill already sets the number apart, so the ": " is hidden from view; it stays in the page for screen readers, which would otherwise run the number straight into the caption */
#tmtgSlideNumsSep {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions) #tmtgSlideNums {
	margin-right: 0; /* alone in its row, so it centers exactly */
}

/* An image with no caption, in a gallery where others have one: the number moves to the middle of the caption row, as it does with captions hidden, rather than sitting alone at the start of an empty line. The row keeps its height, so the image stays the same size from one slide to the next and the page doesn't jump. The row's top padding is the larger by exactly its overlap with the gallery, so centering in the row centers the number in the part that shows */
div.tmtgContainer.tmtg-slide-uncaptioned div.tmtgCaptions {
	display: flex;
	align-items: center;
	justify-content: center;
}

div.tmtgContainer.tmtg-slide-uncaptioned #tmtgSlideNums {
	margin-right: 0;
}

/* KYB: no image has a caption, so the captions button would do nothing; display: none also takes it out of the tab order */
div.tmtgContainer.tmtg-no-captions .tmtg-captions {
	display: none;
}

/* text for screen readers only, such as the announcement of each new image: it stays in the page but takes no space and isn't shown. display: none would hide it from screen readers too */
.tmtg-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

span.tmtg-toolbar-icon, span.tmtg-toolbar-icon svg {
	display: block; /* the icon fills the button's 1.2em line exactly, so the toolbar keeps its height, with no stray space below as an inline image would leave */
}

/* A narrow gallery: on a phone, or in a narrow column on a wider screen. It asks about the gallery's own width, not the window's (@container, not @media), so a gallery in a sidebar gets this layout and a phone-sized window with nothing else in it gets the same */
@container tmtg (max-width: 576px) {
	.tmtg-next, .tmtg-prev {
		font-size: 4cqw; /* the arrows used to dim here too, which made them hard to see; they now look the same at every width */
	}

	.tmtg-next, .tmtg-prev {
		--tmtg-arrow-icon: max(1.35em, 28px); /* 1.35em of 4cqw gets small in a narrow gallery (19px at 360px wide); the floor keeps the icon comfortably visible, and the semicircle grows to match. Above about 520px wide, 1.35em is already larger, so nothing changes there */
	}

	div.tmtgContainer div.tmtgCaptions {
		--tmtg-arrow-clearance: calc(max(5.4cqw, 28px) + 4.1cqw); /* the arrow buttons here: the icon (1.35em of 4cqw, or the 28px floor) plus about 3.5cqw of padding, and a little gap; works out to 9.5cqw wherever the floor isn't in use. Set on the captions, the only part that reads it, since a container query can't style the container itself */
	}
	
	div.tmtgContainer div {
		width: 100%;
	}
	
	div.tmtgContainer div.tmtgCaptions {
		width: auto; /* fills the space between its side margins, like the toolbar exception below */
	}
	
	div.tmtgContainer div.tmtgToolbar {
		width: auto; /* keep the toolbar shrink-wrapped around its widgets */
	}

	/* The toolbar shrinks with the gallery, like the arrows: from its full 24px font at 576px wide down to 20px at 360px and below. Its buttons are 1.2em square, so 20px keeps each at 24 by 24 pixels, the smallest touch target WCAG 2.5.8 allows. The spacing around it is built from the same font size, so the image keeps its gap below the toolbar. Set on the gallery's parts rather than the container, which a container query can't style; the spacing values are registered, so each part gets them in pixels and passes them down */
	div.tmtgContainer > * {
		--tmtg-toolbar-font: clamp(20px, 13.3px + 1.85cqw, 24px);
		--tmtg-toolbar-height: calc(var(--tmtg-toolbar-font) * 1.5 + 4px); /* the buttons' 1.2em plus .15em padding above and below, and the 2px borders, as in the full-size value */
		--tmtg-toolbar-clearance: calc(var(--tmtg-toolbar-font) * 2.5); /* 3.75em of the container's font at full size */
		--tmtg-edge-gap: calc(var(--tmtg-toolbar-font) / 2); /* .75em of the container's font at full size */
		--tmtg-number-gap: calc(var(--tmtg-edge-gap) * 2 / 3); /* rebuilt from the new gap; the container's value was worked out from the old one */
	}

	div.tmtgContainer div.tmtgToolbar {
		font-size: var(--tmtg-toolbar-font);
	}

	/* the slide number shrinks with it, from its usual size at 576px wide to 12px at 360px and below. It's text, not a button, so the target size doesn't apply; 12px keeps the bold digits easy to read */
	div.tmtgContainer #tmtgSlideNums {
		font-size: clamp(12px, 6px + 1.65cqw, .9em);
	}
	
	div.tmtgCaptions span {
		font-size: .9em;
	}
	
	/* The strip starts hidden at this width (tmtg.js turns it off, and widening the gallery turns it back on), but visitors can show it with the thumbnails button. At full-size spacing the thumbs would be too small to see or tap (about 18 by 10 pixels in a 320px-wide gallery with strip arrows), so tighter gaps, a slimmer frame, and narrower arrows give the five thumbs most of the width; the numbers shrink to match */
	div.tmtgThumbs {
		--tmtg-thumb-gap: .35em;
		--tmtg-thumb-frame-pad: .3em;
		--tmtg-strip-arrow-width: 1.5em; /* 24px at the usual 16px font, the smallest touch target WCAG 2.5.8 allows */
		--tmtg-strip-arrow-gap: .2em;
		padding-left: .25em;
		padding-right: .25em;
	}

	div.tmtgThumbs div#tmtgThumbsStage span.tmtg-thumb-num {
		right: .15em;
		bottom: .15em;
		padding: .2em .4em;
		font-size: .6em;
	}
	
	div.tmtgGallery .tmtgNoSlides {
		font-size: .9em;
	}

}

/* A phone held sideways has very little height, so everything below the image goes: the strip and its button are hidden, captions start hidden (tmtg.js does that, and visitors can turn them back on), and the slide number moves up beside the toolbar. The test is a short, touch-first screen rather than a width, since a phone on its side is as wide as a small laptop. It comes after the narrow-phone rules above, since the smallest phones match both */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	div.tmtgThumbs, .tmtg-thumbs {
		display: none; /* KYB: display: none takes the button out of the tab order too */
	}

	/* the usual 60% cap left a sideways phone's image only about 130-165px tall, so here the gallery may take the whole screen height, with the same 3:2 (or --tmtg-aspect) limit. svh, not vh or dvh: Safari's vh is the height with its address bar hidden, so 100vh would run under the bar while it shows; dvh follows the bar, but then the image resizes in jumps as the bar slides in and out while scrolling. svh is the height with the bar showing, so it always fits and never moves. Browsers without svh drop both lines and keep the usual layout */
	div.tmtgContainer:not(:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen)) div.tmtgGallery {
		flex-basis: min(100svh, calc((100cqw - 2 * var(--tmtg-gallery-pad-x)) / (var(--tmtg-aspect, 3 / 2)) + var(--tmtg-gallery-pad-top) + var(--tmtg-gallery-pad-bottom)));
	}

	/* the whole widget fits on screen too, so captions visitors turn on take their room from the image instead of being pushed off the bottom */
	div.tmtgContainer:not(:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen)) {
		max-height: 100svh;
	}

	/* the number's pill moves to the top-left corner, level with the toolbar and the same height, so it takes no height from the image; it keeps its usual look. Screen readers still find it in the caption stage, just before the caption, since only its position on screen changes */
	div.tmtgContainer:not(:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen)) #tmtgSlideNums {
		position: absolute;
		top: var(--tmtg-edge-gap);
		left: var(--tmtg-edge-gap);
		height: var(--tmtg-toolbar-height);
		box-sizing: border-box;
		line-height: var(--tmtg-toolbar-height); /* centers the text in the taller pill; display is left alone, so a lone image's number stays hidden */
		margin: 0;
		padding: 0 .9em; /* a little wider than usual, in proportion to the taller pill */
		z-index: 99;
	}

	/* with no toolbar ("toolbar": false), the number still needs its place above the image, or it would cover the corner of a wide image; a lone image has no number, so it keeps the small gap */
	div.tmtgContainer.tmtg-no-toolbar:not(.tmtg-single-slide):not(:is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen)) div.tmtgGallery {
		--tmtg-gallery-pad-top: var(--tmtg-toolbar-clearance);
	}

	/* with captions hidden, the caption stage is empty, so it closes up entirely. Not display: none, which would hide the number (positioned or visually hidden) along with it */
	div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions) div.tmtgCaptions, div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions).tmtg-thumbs-hidden div.tmtgCaptions {
		height: 0;
		min-height: 0;
		padding: 0;
		margin: 0;
	}

	/* nothing is below the image then, so a small gap keeps it off the bottom edge and corners */
	div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions) div.tmtgGallery, div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions).tmtg-single-slide div.tmtgGallery {
		--tmtg-gallery-pad-bottom: var(--tmtg-edge-gap);
		padding-bottom: var(--tmtg-edge-gap);
	}

	div.tmtgContainer div.tmtgCaptions {
		min-height: 0; /* captions visitors turn on take only the lines they need, rather than the usual two */
	}

	/* sideways fullscreen is the most image-only view there is, so the number isn't shown at all, unless visitors turn captions on, when it comes back at the start of the caption. It's visually hidden, like the ": ", so screen readers still hear where they are */
	div.tmtgContainer:is(.tmtg-captions-hidden, .tmtg-no-captions):is(:fullscreen, :-webkit-full-screen, .tmtg-pseudo-fullscreen) #tmtgSlideNums {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}
/* == == EOF == == */