/**
 * FerventWord App Support
 *
 * Colors are the same `light-dark()` tokens the sibling `ferventword` plugin defines, and
 * the same values the app's palette is derived from — so a passage read in the app and the
 * same page read on the site agree on brand color by construction rather than by memory.
 *
 * `color-scheme` is REQUIRED here: without it every `light-dark()` below silently returns
 * its light value however the visitor's OS is set.
 */

.fwa {
	color-scheme: light dark;

	--fwa-ink: light-dark( #282528, #E0E0DF );
	--fwa-ink-muted: light-dark( #595959, #A09F9F );
	--fwa-accent: light-dark( #7F1518, #D98E8E );
	--fwa-surface: light-dark( #FFFFFF, #302D30 );
	--fwa-rule: light-dark( rgba( 0, 0, 0, .12 ), rgba( 224, 224, 223, .16 ) );

	color: var( --fwa-ink );
	max-width: 42rem;
}

.fwa a { color: var( --fwa-accent ); }

/*
 * ⚠️ THE PAGE ENDS FLUSH AGAINST THE THEME'S FOOTER WITHOUT THIS, AND ONLY ON THE LONG PAGES.
 * Measured on the live site: the landing page's closing panel sat 0px above the footer, while
 * every prose page had ~271px — the theme supplies space below `.entry-content` that a trailing
 * paragraph's own collapsing margin reaches and a filled block does not. So a filled element at
 * the foot of the page butts straight into a black footer, and nothing in this stylesheet was
 * asking for space of its own.
 *
 * ⚠️ `:not( .fwa-chrome )` BECAUSE `.fwa` IS ON THE BAR TOO. The bar sets its own 2rem below
 * itself and must not gain a second one. Excluding it by class rather than listing the four body
 * wrappers means a template added later gets this without anybody remembering to.
 *
 * ⚠️ AND NEITHER GATE CAN SEE THIS, for the reason the list rule above records: there is no theme
 * in the preview, so a page that ends correctly there can still collide with a footer in
 * production.
 */
.fwa:not( .fwa-chrome ) { margin-bottom: 4rem; }

/*
 * ⚠️ EVERY LIST HERE SET `list-style: none` ON THE `ul` AND THE THEME PUT THE BULLETS BACK.
 *
 * A theme's content styles are written as `.entry-content ul li { list-style: disc }` or near
 * enough — the marker is set on the LIST ITEM, and a rule on the `ul` alone never competes with
 * it, whatever it says. So the section bar, the topic list, the feature cards and the screenshot
 * strip all rendered with a bullet floating to the left of each one, on the live site, while
 * every rule in this file read as though they would not.
 *
 * Stated once, on the `li`, at (0,2,2) so it outranks the shape a theme is likely to use. Prose
 * lists opt back in by carrying `.fwa-bullets`, which is the one place a marker is wanted.
 *
 * ⚠️ AND NEITHER GATE CAN SEE THIS CLASS OF DEFECT. `tools/preview.php` inlines this stylesheet
 * and nothing else, so there is no theme in the preview and never will be — a rule the theme
 * overrides looks perfect there. Anything that depends on WINNING against a theme has to be
 * reasoned about here and looked at on the real site; the preview can only prove the markup is
 * what we think it is.
 */
.fwa ul:not( .fwa-bullets ),
.fwa ul:not( .fwa-bullets ) > li {
	list-style: none;
}

.fwa .fwa-heading {
	color: var( --fwa-ink );
	margin: 2rem 0 .5rem;
	line-height: 1.25;
}

.fwa .fwa-paragraph { margin: 0 0 1rem; line-height: 1.6; }
.fwa .fwa-bullets { margin: 0 0 1rem 1.25rem; line-height: 1.6; }
.fwa .fwa-bullets li { margin-bottom: .35rem; }

.fwa .fwa-summary {
	color: var( --fwa-ink-muted );
	font-size: 1.05rem;
	margin-bottom: 1.5rem;
}

.fwa .fwa-topics { list-style: none; margin: 0; padding: 0; }

.fwa .fwa-topics li {
	border-top: 1px solid var( --fwa-rule );
	padding: 1rem 0;
}

.fwa .fwa-topics li:last-child { border-bottom: 1px solid var( --fwa-rule ); }
.fwa .fwa-topics a { font-weight: 600; text-decoration: none; }
.fwa .fwa-topics p { color: var( --fwa-ink-muted ); margin: .25rem 0 0; }

/*
 * The section bar.
 *
 * No new colour is introduced here: `--fwa-ink-muted` and `--fwa-accent` are the tokens
 * `.fwa-summary` and every link already use, so the palette test this stylesheet is derived
 * from has nothing new to cover.
 *
 * The bar's wrapper carries `.fwa`, which is what gives it these tokens AND the 42rem measure
 * the prose below it sits on — the two line up because they are the same rule, not because
 * two numbers were kept equal by hand.
 */

.fwa-chrome { margin-bottom: 2rem; }

.fwa .fwa-nav { border-bottom: 1px solid var( --fwa-rule ); }

/*
 * `flex-wrap` is why four items need no hamburger and no JavaScript at any width: they hold
 * one line on a 375px phone and drop to a second if they ever stop fitting. The gap is
 * asymmetric for that case — .25rem between wrapped rows, 1.5rem between items.
 */
.fwa .fwa-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0 0 .75rem;
}

/*
 * ⚠️ The transparent border is not decoration. It reserves the current item's underline on
 * every link, so moving between sections shifts nothing.
 *
 * This selector is (0,2,1) and the `.fwa a` rule above is (0,1,1), which is what makes a
 * non-current item muted rather than accent.
 */
.fwa .fwa-nav a {
	display: inline-block;
	padding: .35rem 0;
	color: var( --fwa-ink-muted );
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid transparent;
}

.fwa .fwa-nav a:hover,
.fwa .fwa-nav a:focus { color: var( --fwa-accent ); }

/* The current section is carried by weight and a rule, never by colour alone. */
.fwa .fwa-nav .is-current a {
	color: var( --fwa-accent );
	border-bottom-color: var( --fwa-accent );
}

.fwa .fwa-breadcrumb { margin: .75rem 0 0; font-size: .95rem; }
.fwa .fwa-breadcrumb a { color: var( --fwa-ink-muted ); text-decoration: none; }
.fwa .fwa-breadcrumb a:hover,
.fwa .fwa-breadcrumb a:focus { color: var( --fwa-accent ); }

/*
 * The landing page.
 *
 * ⚠️ NO NEW COLOUR IS INTRODUCED BELOW. Every rule uses the five tokens declared at the top of
 * this file, so the palette these are derived from has nothing new to cover — the same
 * discipline the section bar keeps.
 *
 * ⚠️ AND NO MEDIA QUERIES, WHICH IS THIS FILE'S OWN CONVENTION. `clamp()` and
 * `auto-fit`/`minmax` do the work: at 375px every grid is one column, at 60rem the feature
 * cards are three across and the screenshots five.
 */

/*
 * ⚠️ THE ONE PAGE THAT IS NOT 42rem. `.fwa` declares the palette AND the measure; this (0,2,0)
 * rule overrides the measure alone, so `FWA_Nav::render()` widens the bar by putting the same
 * two classes on it rather than by keeping a second number equal to this one by hand.
 *
 * ⚠️ IT MAY WIDEN NOTHING, AND THE PAGE MUST STILL BE RIGHT WHEN IT DOES NOT. This renders
 * inside the theme's content column, which can be narrower than 60rem — so every grid below is
 * `auto-fit` and the layout is correct at 42rem too. Do not reach for a `100vw` full-bleed
 * trick to force it: a filled band inside somebody else's column stops at an arbitrary edge.
 */
.fwa.fwa-wide { max-width: 60rem; }

/*
 * The hero panel.
 *
 * ⚠️ THE PANEL COLOUR IS READ, NOT CHOSEN. Both values are the app's own
 * `Assets.xcassets/LaunchBackground.colorset` — the ground its launch screen puts this exact
 * white mark on — so the first thing a visitor sees and the first thing the app shows are the
 * same colour by construction. §15 makes the same argument about the screenshot caption band:
 * the one piece of brand colour with no test behind it is the one somebody picked by eye.
 *
 * ⚠️ AND IT WAS THE ONLY NEW TOKEN ON THIS PAGE UNTIL THE LIGHTBOX. The stylesheet's rule is
 * that a colour comes from the five declared at the top; this is a sixth, and it earns that by
 * being a SURFACE — the five have no filled brand ground among them, because until now nothing
 * here had one. White on both values clears 4.5:1 (light 6.6:1, dark 15.9:1).
 * `--fwa-scrim` below is the seventh, and it earns its place the same way.
 */
.fwa {
	--fwa-panel: light-dark( #7F1518, #430A0C );
}

/*
 * The lightbox's scrim.
 *
 * ⚠️ IT IS ONE VALUE IN BOTH APPEARANCES, WHICH IS THE SAME ARGUMENT THE PANEL MAKES ABOVE. A
 * lightbox is a theatre: a light-grey scrim behind a light screenshot is a low-contrast mush
 * that needs the strip's hairline brought back to be legible at all. And because the ground
 * does not change with the appearance, white ink on it clears 4.5:1 in BOTH by construction
 * rather than by two measurements — exactly how the panel earns its white text.
 *
 * ⚠️ AND IT IS A LITERAL RATHER THAN A `color-mix()` OF `--fwa-panel`, WHICH IS THE IDIOM ONE
 * RULE BELOW. If `color-mix` does not parse, the custom property still substitutes and makes
 * `background` invalid at computed-value time — which resets it to `unset`, NOT to a preceding
 * declaration in the same rule. A derived gradient that fails is a flat panel; a derived scrim
 * that fails is a TRANSPARENT MODAL over a readable page, which is the page unusable.
 */
.fwa {
	--fwa-scrim: rgba( 18, 15, 16, .94 );
}

/*
 * ⚠️ THE GRADIENT IS DERIVED FROM THE TOKEN RATHER THAN BEING A SECOND HEX. `color-mix` keeps
 * one value authoritative, so changing the panel changes both stops — a hand-picked second
 * colour is how a palette acquires a member nothing governs.
 */
.fwa .fwa-hero,
.fwa .fwa-closing {
	background: linear-gradient(
		158deg,
		var( --fwa-panel ),
		color-mix( in srgb, var( --fwa-panel ), #000 24% )
	);
	border-radius: 1.25rem;
	color: #FFF;
	text-align: center;
	padding: clamp( 2.5rem, 1rem + 6vw, 4.5rem ) 1.5rem;
	margin: 0 0 2rem;
}

/*
 * ⚠️ WHITE, NOT A TOKEN, AND THAT IS THE POINT OF A PANEL. Everything inside sits on
 * `--fwa-panel` in both appearances, so it must not follow the page's ink — `--fwa-ink` in
 * light is near-black and would be unreadable here.
 */
.fwa .fwa-hero a,
.fwa .fwa-closing a { color: #FFF; }

/*
 * The Wide logo, copied verbatim from the app rather than redrawn — see
 * `assets/img/ferventword-logo.svg`, whose own header says replacing the file is the whole
 * update. It is a WHITE logo drawn for this ground, which is why it lives inside the panel and
 * nowhere else on the page.
 *
 * ⚠️ SIZED BY WIDTH FOR A 3.6:1 LOGO. The square logo it replaced (2026-10-01) was 11.5rem at
 * most; the same width here would set the FERVENT lettering at a few pixels, so the range is
 * wider — and `max-width` keeps it inside a phone's panel.
 */
.fwa .fwa-hero__logo {
	display: block;
	width: clamp( 14rem, 10rem + 18vw, 22rem );
	max-width: 100%;
	height: auto;
	margin: 0 auto 1.25rem;
}

/*
 * ⚠️ SMALLER AND MEASURED, BECAUSE IT IS A SENTENCE NOW AND NOT A NAME. At the old 3.25rem top
 * end this headline ran four lines on a phone and two very long ones at 60rem; a `max-width`
 * holds it to a readable measure on the wide panel rather than spanning the whole 960px.
 */
.fwa .fwa-hero__title {
	color: #FFF;
	font-size: clamp( 1.6rem, 1.1rem + 2.2vw, 2.5rem );
	line-height: 1.2;
	max-width: 24ch;
	margin: 0 auto .75rem;
}

/* Slightly softened rather than a second colour: still white, still 4.5:1 clear at .85. */
/* ⚠️ 38rem, not 34: at 34 this line broke three ways on the wide panel and left "you." alone
 * on the last one. The copy was shortened in the same change — a widow is usually a sentence
 * that is one clause too long, not a measure that is one rem too short. */
.fwa .fwa-hero__tagline {
	color: rgba( 255, 255, 255, .85 );
	font-size: clamp( 1.05rem, .95rem + .5vw, 1.3rem );
	line-height: 1.5;
	max-width: 38rem;
	margin: 0 auto 2rem;
}

/*
 * ⚠️ A STATUS PILL, DELIBERATELY NOT A BUTTON. No fill, no shadow, no pointer cursor — because
 * there is nothing behind it until the app ships, and a control that looks pressable and is not
 * is worse than a sentence. `templates/overview.php` renders it as a `<span>` for the same
 * reason, and `tools/upgrade-test.php` asserts it is not a link.
 */
/*
 * ⚠️ SOLID, BECAUSE IT DOES SOMETHING NOW. Its predecessor was an OUTLINE pill, and outlined
 * deliberately — it was a `<span>` that could not be pressed, and a control that looks pressable
 * and is not is worse than a sentence. That reasoning inverted the page: the biggest thing in
 * the panel did nothing, while the one working action hid in grey body text below it. The button
 * is the mailto now, so it may look like a button.
 *
 * ⚠️ THE TEXT COLOUR IS THE PANEL, NOT A TOKEN. A white ground under `--fwa-panel` ink is the
 * same ratio as the panel under white — 6.6:1 light, 15.9:1 dark — so it clears 4.5:1 in both
 * appearances without introducing a colour.
 */
.fwa .fwa-cta__button {
	display: inline-block;
	background: #FFF;
	border-radius: 999px;
	color: var( --fwa-panel );
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	padding: .85rem 1.75rem;
	text-decoration: none;
}

/* ⚠️ Overrides the white-link rule above, which would otherwise leave this invisible on its
 * own white ground. Both panels, because both carry the button. */
.fwa .fwa-hero .fwa-cta__button,
.fwa .fwa-closing .fwa-cta__button { color: var( --fwa-panel ); }

.fwa .fwa-cta__button:hover,
.fwa .fwa-cta__button:focus { background: rgba( 255, 255, 255, .88 ); }

.fwa .fwa-cta { margin: 0; }

.fwa .fwa-cta__note {
	color: rgba( 255, 255, 255, .8 );
	font-size: .95rem;
	line-height: 1.6;
	margin: 1rem 0 0;
}

/* Bands separate with the rule token and never a background fill — see the note above. */
.fwa .fwa-band {
	border-top: 1px solid var( --fwa-rule );
	padding-top: 2rem;
	margin-top: 2.5rem;
}

/* The panel is its own separation, so the band under it does not need a second one. */
.fwa .fwa-hero + .fwa-band { border-top: 0; }

/*
 * ⚠️ `min( 15rem, 100% )` RATHER THAN A BARE `15rem`. A bare minimum overflows any container
 * narrower than itself, which is exactly what a theme sidebar or a 320px phone produces — the
 * symptom is a page that scrolls sideways, and it never shows up at the widths people test.
 */
.fwa .fwa-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 15rem, 100% ), 1fr ) );
	gap: 1.75rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* This is what colours every icon, in both appearances, from one declaration. */
.fwa .fwa-icon {
	display: inline-flex;
	color: var( --fwa-accent );
}

.fwa .fwa-icon svg { width: 1.75rem; height: 1.75rem; display: block; }

.fwa .fwa-card__title {
	color: var( --fwa-ink );
	font-size: 1.05rem;
	line-height: 1.3;
	margin: .6rem 0 .35rem;
}

.fwa .fwa-card__body {
	color: var( --fwa-ink-muted );
	line-height: 1.6;
	margin: 0;
}

/*
 * ⚠️ 10rem, NOT 11rem, AND THE NUMBER IS ARITHMETIC RATHER THAN TASTE. Five shots at the 60rem
 * measure need 5 × min + 4 × gap to fit inside 960px: at 11rem that is 976px, so the fifth
 * wrapped onto a row of its own and the band read as four-plus-a-stray. At 10rem it is 896px.
 * Change the count, the gap or the measure and this needs redoing — LOOK at the band after.
 */
/*
 * The appearance toggle above the screenshot strip.
 *
 * ⚠️ THE CURRENT OPTION IS CARRIED BY A FILL AND A WEIGHT, NEVER BY COLOUR ALONE — the same
 * rule the section bar keeps, and the same one §14 makes the app keep for its bookmark slots.
 * `aria-pressed` says it a third way, for a reader who sees neither.
 *
 * ⚠️ AND IT IS NOT `prefers-color-scheme`. The page follows the visitor's appearance; these are
 * pictures OF an app, and a visitor browsing in dark has not asked to see the app in dark.
 */
.fwa .fwa-appearance {
	display: inline-flex;
	gap: .25rem;
	border: 1px solid var( --fwa-rule );
	border-radius: 999px;
	padding: .25rem;
	margin: 0 0 1.5rem;
}

.fwa .fwa-appearance__option {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 999px;
	color: var( --fwa-ink-muted );
	cursor: pointer;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	/* 44pt is the app's own floor for a hit region; this is the web's equivalent of it. */
	min-height: 2.25rem;
	padding: .35rem 1.1rem;
}

.fwa .fwa-appearance__option:hover { color: var( --fwa-ink ); }

.fwa .fwa-appearance__option.is-current {
	background: var( --fwa-panel );
	color: #FFF;
}

.fwa .fwa-shots__list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 10rem, 100% ), 1fr ) );
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * ⚠️ THE SURFACE AND THE HAIRLINE ARE NOT DECORATION. Whichever appearance is selected, one of
 * the two sets is always the opposite of the page it sits on — light shots on a dark page float
 * with no edge, dark shots on a light one — and framing them makes them read as objects rather
 * than as holes.
 *
 * ⚠️ THIS SAID "the captures are light-mode only" AND CALLED A DARK SET "the real fix and a
 * separate change". That change shipped: there are two sets and a toggle above them, so the
 * reason stands and the sentence explaining it had stopped being true.
 */
/*
 * ⚠️ THE CORNER IS THE DEVICE'S OWN, AS A PERCENTAGE, AND 1.25rem LEFT BLACK WEDGES. The app's
 * captures black out the screen's rounded corners (`capture.sh --mask=black`, which is what makes
 * the Dynamic Island deterministic), and the black runs 200px in from each corner of a 1320×2868
 * frame. The app's caption pass clips it at 0.145/0.920 of the image's width; this is the same
 * radius, written as `width% / height%` so it scales with the image at every size: 15.8% of the
 * width, and 15.8% × 1320/2868 = 7.3% of the height. A fixed rem radius is right only at one
 * width, and the 0.1.0 set never showed this because it was captured before the mask.
 */
.fwa .fwa-shot__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 15.8% / 7.3%;
	border: 1px solid var( --fwa-rule );
	background: var( --fwa-surface );
}

/*
 * ⚠️ `display: block`, OR THE INLINE ANCHOR ADDS A DESCENDER'S WORTH OF SPACE UNDER EVERY SHOT
 * and the hairline above draws around the gap rather than around the picture.
 */
.fwa .fwa-shot__link {
	display: block;
	border-radius: 15.8% / 7.3%;
	cursor: zoom-in;
}

/*
 * ⚠️ DECLARED, BECAUSE `a:focus { outline: none }` IS THE MOST COMMON LINE IN ANYBODY'S
 * STYLESHEET AND NEITHER GATE CAN SEE A THEME. `tools/preview.php` inlines this file and
 * nothing else, so a ring the theme removes looks perfect there — the same blindness the list
 * markers above are written against.
 */
.fwa .fwa-shot__link:focus-visible {
	outline: 2px solid var( --fwa-accent );
	outline-offset: 3px;
}

.fwa .fwa-shot__caption {
	color: var( --fwa-ink-muted );
	font-size: .9rem;
	line-height: 1.5;
	margin: .6rem 0 0;
}

.fwa .fwa-quotes__list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 18rem, 100% ), 1fr ) );
	gap: 1.5rem 2rem;
}

.fwa .fwa-quote {
	border-left: 3px solid var( --fwa-accent );
	margin: 0;
	padding: .25rem 0 .25rem 1rem;
}

.fwa .fwa-quote p {
	font-size: 1.1rem;
	line-height: 1.5;
	margin: 0 0 .4rem;
}

.fwa .fwa-quote__cite {
	color: var( --fwa-ink-muted );
	font-size: .9rem;
	font-style: normal;
}

/*
 * The closing panel.
 *
 * ⚠️ IT SHARES THE HERO'S GROUND RULE RATHER THAN RESTATING IT — one `background`, one radius,
 * one padding, two selectors. Two panels meant to look identical and described in two places
 * are two panels that drift, and this one is a bookend: it is wrong the moment it stops
 * matching the top of the page.
 *
 * ⚠️ THE TAGLINE IS AN `<h2>`, NOT A PARAGRAPH. It is the section's heading in meaning as well
 * as in size — the section is about it — and it gives `aria-labelledby` something real to name.
 */
.fwa .fwa-closing { margin: 3rem 0 0; }

.fwa .fwa-closing__logo {
	display: block;
	width: clamp( 11rem, 8rem + 12vw, 16rem );
	max-width: 100%;
	height: auto;
	margin: 0 auto 1.5rem;
}

/*
 * ⚠️ PROMINENT, WHICH IS THE WHOLE REASON THIS PANEL EXISTS. It spent one round as a quiet grey
 * italic line under a list of links, which is where a sentence goes to be skipped.
 */
.fwa .fwa-closing__tagline {
	color: #FFF;
	font-size: clamp( 1.4rem, 1rem + 1.8vw, 2.1rem );
	line-height: 1.3;
	max-width: 26ch;
	margin: 0 auto 1.25rem;
}

.fwa .fwa-closing__note {
	color: rgba( 255, 255, 255, .85 );
	font-size: 1rem;
	line-height: 1.6;
	max-width: 34rem;
	margin: 0 auto 2rem;
}

.fwa-error {
	border-left: 4px solid light-dark( #7F1518, #D98E8E );
	padding: .75rem 1rem;
	background: light-dark( #EDDCDD, #3A2A2B );
}

/*
 * The lightbox.
 *
 * ⚠️ IT IS A REAL `<dialog>` OPENED WITH `showModal()`, AND THE REASON IS THE TOP LAYER RATHER
 * THAN THE FREE ESCAPE KEY. A hand-rolled `position: fixed` overlay is defeated by any
 * ancestor `transform`, `filter` or `will-change` (which resolves `fixed` against that
 * ancestor instead of the viewport), by any ancestor `overflow`, and by any stacking context
 * with a bigger `z-index` — and this page renders inside a theme that uses all three. A modal
 * dialog paints above every one of them and cannot be clipped.
 *
 * ⚠️ AND NEITHER GATE IN THIS REPOSITORY CAN SEE THAT GO WRONG. `tools/preview.php` renders
 * with no theme, and it renders this dialog CLOSED. The mechanism was chosen precisely because
 * the failure it avoids is the one nothing here could report.
 */

/*
 * ⚠️ `display: none` IS DECLARED HERE RATHER THAN INHERITED FROM THE UA SHEET, AND THAT IS THE
 * WHOLE NO-JAVASCRIPT STORY. A browser that has never heard of `<dialog>` treats it as an
 * unknown INLINE element — it has no UA rule to hide it — so a close button, an empty frame and
 * two chevrons would render in the page flow under the strip, on the page a visitor lands on
 * first. The layout lives on `[open]` for the same reason.
 */
.fwa .fwa-lightbox { display: none; }

/*
 * ⚠️ THE UA SHEET CAPS A DIALOG AT `calc( 100% - 6px - 2em )` IN BOTH AXES and gives it a solid
 * border, 1em of padding and a `canvas` background. A "full screen" lightbox that does not say
 * otherwise is a bordered box inset by a couple of ems, and it looks deliberate.
 *
 * ⚠️ `100vh` THEN `100dvh`, BOTH, BECAUSE THE TWO SUPPORT FLOORS DO NOT COINCIDE. `showModal()`
 * is Chrome 37 / Safari 15.4 and `dvh` is Chrome 108, so there is a real browser with a working
 * dialog and no `dvh` — and on iOS `100vh` is the LARGE viewport, which puts the bottom bar
 * under Safari's toolbar, exactly where the chevrons are. The usual objection to `dvh` (it
 * resizes as the toolbar collapses) cannot apply: the page cannot scroll while this is open.
 */
.fwa .fwa-lightbox[open] {
	display: grid;
	grid-template-rows: auto minmax( 0, 1fr ) auto;
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var( --fwa-scrim );
	overscroll-behavior: contain;
}

/* Belt and braces. The dialog itself carries the scrim, so this is never what anyone sees —
   `::backdrop` inheritance differs across engines and must not be the mechanism. */
.fwa .fwa-lightbox::backdrop { background: var( --fwa-scrim, rgba( 18, 15, 16, .94 ) ); }

/*
 * ⚠️ THE BARS RESERVE THEIR OWN ROWS, WHICH IS WHAT KEEPS EVERY CONTROL OFF THE SCREENSHOT.
 * White on the scrim is about 15:1 in both appearances over any picture; white on whatever
 * happens to be in the top-left corner of a capture is a coin toss.
 */
.fwa .fwa-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .75rem;
	padding: max( .75rem, env( safe-area-inset-top ) ) max( .75rem, env( safe-area-inset-right ) )
		.25rem max( .75rem, env( safe-area-inset-left ) );
}

.fwa .fwa-lightbox__bar--controls {
	justify-content: center;
	padding-top: .25rem;
	padding-bottom: max( .9rem, env( safe-area-inset-bottom ) );
}

/*
 * ⚠️ `minmax( 0, 1fr )` ON THE ROW ABOVE AND `min-height: 0` HERE ARE ONE FIX IN TWO PLACES. A
 * bare `1fr` track has an `auto` minimum, so it refuses to shrink below the image's intrinsic
 * 1629px and the picture overflows the viewport instead of fitting it.
 */
.fwa .fwa-lightbox__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	padding: 0 max( .75rem, env( safe-area-inset-right ) ) 0 max( .75rem, env( safe-area-inset-left ) );
}

/*
 * ⚠️ THE 750px CAP IS THE FILE'S OWN WIDTH AND IS NOT DECORATION. Height is always the binding
 * constraint on a 750×1629 portrait shot, so without it a tall display gives the image a
 * computed width of ~920px and the browser upscales a 750px JPG into a blurry one.
 *
 * ⚠️ AND `height: auto` IS REQUIRED because the `width`/`height` attributes otherwise supply a
 * used height that beats `max-height`.
 */
.fwa .fwa-lightbox__img {
	max-width: min( 100%, 750px );
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 15.8% / 7.3%;     /* the device's corner — see `.fwa-shot__img` */
	border: 1px solid rgba( 255, 255, 255, .16 );
}

.fwa .fwa-lightbox__control {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	/* 44px is the app's own floor for a hit region, and this is the web's. */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, .35 );
	border-radius: 999px;
	background: rgba( 255, 255, 255, .14 );
	color: #FFF;
	cursor: pointer;
}

.fwa .fwa-lightbox__control svg {
	width: 1.35rem;
	height: 1.35rem;
}

.fwa .fwa-lightbox__control:hover { background: rgba( 255, 255, 255, .26 ); }

/* White, never `--fwa-accent`: the accent is #7F1518 in light, which is invisible on the scrim. */
.fwa .fwa-lightbox__control:focus-visible {
	outline: 2px solid #FFF;
	outline-offset: 2px;
}

/*
 * ⚠️ `0 1 22rem` RATHER THAN `1 1 auto`, WHICH IS WHAT IT WAS AND LOOKED WRONG ON A WIDE SCREEN.
 * Growing the caption to fill the bar pushed the two chevrons into opposite corners — about
 * 1200px apart on a desktop, a foot of empty scrim between each one and the picture it moves.
 * At `0 1 22rem` the three group in the middle under the shot and still shrink on a phone.
 */
.fwa .fwa-lightbox__meta {
	flex: 0 1 22rem;
	text-align: center;
	margin: 0;
	padding: 0 .5rem;
	color: rgba( 255, 255, 255, .85 );
	font-size: .9rem;
	line-height: 1.4;
}

.fwa .fwa-lightbox__count {
	display: block;
	color: #FFF;
	font-weight: 600;
}

/* ⚠️ `:empty` IS HOW THE PORT WORKS. Prayer Mentions has no captions at all and ships the same
   structure; there, this span is never filled and simply takes no space. */
.fwa .fwa-lightbox__caption:empty { display: none; }

/* Clipped rather than `display: none`, or a screen reader skips the live region entirely. */
.fwa-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* Everything above is fluid, so no width media query is needed. Checked at 375px. */