/*
 * WebUpp Styles: what every page shares, all of it in tokens. A direction
 * remaps the tokens on html[data-style="<slug>"] (inc/style-set.php, from
 * styles/<slug>.json) and adds its own voice in assets/css/<slug>.css,
 * loaded on its page only. Nothing here writes a colour that only works on
 * one ground. The parent's sections.css declares the --wu-* aliases on
 * :root from the preset colours; this file sets the slots the parent
 * leaves to a child.
 */

:root {
	--wu-accent: var(--wp--preset--color--accent);
	--wu-header-h: 72px;
}

html {
	scroll-padding-top: calc(var(--wu-header-h) + 16px);
	background: var(--wu-ground);
	color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

::selection {
	background: color-mix(in srgb, var(--wu-accent) 35%, transparent);
	color: var(--wu-text);
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wu-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Sections sit straight on the main element. */
.upp-main > .wp-block-post-content > * {
	margin-block: 0;
}

/* ---------- Browser frame on any ground (parent inc/browser-frame.php markup) ---------- */

.upp-frame {
	--upp-frame-bar: 28px;
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--wu-line-strong);
	border-radius: var(--st-image-radius, 12px);
	background: var(--wu-surface);
	box-shadow: 0 24px 60px -26px var(--st-frame-shadow, rgba(0, 0, 0, 0.6));
}

.upp-frame__bar {
	border-bottom: 1px solid var(--wu-line);
	background: var(--wu-surface);
}

.upp-frame__dots span {
	background: var(--wu-line-strong);
}

.upp-frame__address {
	background: var(--wu-surface-2);
	color: var(--wu-muted);
}

.upp-frame__screen {
	background: var(--wu-surface-2);
}

/* Coloured glows under a frame: the direction's three glow colours. */
.upp-frame--glow {
	box-shadow: 0 30px 80px -28px var(--st-glow, transparent), 0 24px 60px -26px var(--st-frame-shadow, rgba(0, 0, 0, 0.6));
}

.st-glow-a { --st-glow: var(--st-glow-a, transparent); }
.st-glow-b { --st-glow: var(--st-glow-b, transparent); }
.st-glow-c { --st-glow: var(--st-glow-c, transparent); }

/* ---------- Drawn panels (Night's method: the brief and the launch report) ---------- */

.st-dpanel {
	display: grid;
	align-content: start;
	gap: 18px;
	padding: 28px;
	aspect-ratio: 16 / 10;
	box-sizing: border-box;
	background: linear-gradient(180deg, var(--wu-surface-2), var(--wu-surface));
	font-size: 15px;
}

.st-dpanel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wu-line);
}

.st-dpanel__label {
	color: var(--wu-accent);
	font-family: var(--wu-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.st-dpanel__meta {
	color: var(--wu-muted);
	font-family: var(--wu-mono);
	font-size: 12px;
}

.st-dpanel__rows {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-dpanel__rows li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wu-line);
}

.st-dpanel__what {
	color: var(--wu-text);
}

.st-dpanel__note {
	color: var(--wu-muted);
	text-align: right;
}

.st-dpanel__big {
	color: var(--wu-text);
	font-family: var(--wu-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

/* ---------- Labels: the parent's chip and numbered label, voiced per direction ---------- */

.st-label {
	margin: 0;
}

/* ---------- Phone frame (st_phone()): the browser frame's phone twin ---------- */

.st-phone {
	margin: 0;
	padding: 5px;
	border: 1px solid var(--wu-line-strong);
	border-radius: 26px;
	background: var(--wu-surface-2);
	box-shadow: 0 24px 50px -20px var(--st-frame-shadow, rgba(0, 0, 0, 0.6));
}

.st-phone__screen {
	overflow: hidden;
	aspect-ratio: 375 / 760;
	border-radius: 21px;
	background: var(--wu-surface);
}

.st-phone__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* In the glow hero's stack: the phone stands in front, lower right. */
.wu-ghero__layer--3.st-layer-phone {
	z-index: 4;
	top: auto;
	right: -2%;
	bottom: -6%;
	width: 24%;
}

/* The drawn style sheet (Night's design stage). */
.st-dpanel__specimen {
	margin: 0;
	color: var(--wu-text);
	font-family: var(--wu-display);
	font-size: 64px;
	font-weight: var(--st-display-weight, 800);
	line-height: 1;
	letter-spacing: -0.03em;
}

.st-dpanel__type {
	display: flex;
	gap: 16px;
	margin: 0;
	color: var(--wu-muted);
	font-family: var(--wu-mono);
	font-size: 12px;
}

.st-dpanel__chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-dpanel__chips li {
	display: grid;
	gap: 6px;
}

.st-dpanel__chip {
	height: 40px;
	border: 1px solid var(--wu-line-strong);
	border-radius: 8px;
}

.st-dpanel__chips .st-dpanel__note {
	font-family: var(--wu-mono);
	font-size: 11px;
	text-align: left;
}

/* ---------- Shared by several blocks (hero proof line, the link on to the next question) ---------- */

/* The proof line: facts in a row, separated by a small dot (st/split-hero, st/products). */
.st-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 36px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--wu-line);
	color: var(--wu-text);
	font-size: 15px;
	font-weight: 500;
	list-style: none;
}

/* The heroes reset their children's margins (> * { margin-block: 0 }) and
   print after this file, so the proof line's own space is restated at
   their specificity plus one. */
:is(.st-hero__text, .st-products__text) > .st-proof {
	margin-top: 36px;
}

.st-proof li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.st-proof li + li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wu-accent);
}

/* The link on to the next question (FOUR-QUESTIONS.md rule 3). */
.st-next {
	margin: 32px 0 0;
}