/**
 * 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 IS THE ONLY NEW TOKEN ON THIS PAGE. 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 {
	--fwa-panel: light-dark( #7F1518, #430A0C );
}

/*
 * ⚠️ 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 launch mark, 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 mark drawn for this ground, which is why it lives inside the panel and
 * nowhere else on the page.
 */
.fwa .fwa-hero__logo {
	display: block;
	width: clamp( 8rem, 6rem + 10vw, 11.5rem );
	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. The captures are light-mode only, so on a
 * dark page five bright phone screens would float with no edge; framing them makes them read as
 * objects rather than as holes in the page. A dark capture set is the real fix and is a
 * separate change.
 */
.fwa .fwa-shot__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1.25rem;
	border: 1px solid var( --fwa-rule );
	background: var( --fwa-surface );
}

.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( 6rem, 5rem + 6vw, 8.5rem );
	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 );
}

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