/**
 * The roomy look, a trial (Brian, 2026-11-12, the app on his tablet on its side: "just having these big huge white
 * sides is not really ideal"; he asked to try both of these). Only on a page marked <html class="is-roomy">: in the app
 * always (while it is only on our own test phones), in a browser after ?roomy=1 (kept in that browser; ?roomy=0 ends
 * it). The switch is in functions.php. The app's own screens do the same (app repo src/lib/layout.ts, components/paper.tsx).
 *
 * - From 900px wide: the page is a white sheet with a soft grey either side of it, so the room at the sides reads as
 *   the page's edge, not as something missing. On every page, stories included.
 * - The column stays 720 on every page. A wider homepage and section pages with stories two across were tried the
 *   same day and taken out (Brian: "I like the gray and the stories pages look good. I just don't like the two-column
 *   layout").
 *
 * To end the trial: delete this file and the switch. To keep it: drop the is-roomy condition.
 */

html.is-roomy {
	--roomy-col: 720px;
	--roomy-margin: 48px;
	--roomy-sides: #e9eef4;
}

/* The white sheet: drawn behind everything, so nothing on the page moves. The site's header and footer still run
   from edge to edge over it. */
@media (min-width: 900px) {
	html.is-roomy body {
		--roomy-sheet: min(100%, calc(var(--roomy-col) + var(--roomy-margin) * 2));
		background: linear-gradient(
			to right,
			var(--roomy-sides) calc(50% - var(--roomy-sheet) / 2),
			var(--wp--preset--color--base, #fff) calc(50% - var(--roomy-sheet) / 2),
			var(--wp--preset--color--base, #fff) calc(50% + var(--roomy-sheet) / 2),
			var(--roomy-sides) calc(50% + var(--roomy-sheet) / 2)
		) !important;
	}

	/* A story's own white backing runs edge to edge: the sheet is its backing now. */
	html.is-roomy .single-post-article.has-base-background-color,
	html.is-roomy .story-next__after.has-base-background-color {
		background-color: transparent !important;
	}
}