/* DepthCraft skin for the vendored Trim page (public/trim/play/index.html, generated: never edit it).
   Loaded after the page's own <style>, so these rules restate its tokens and win on equal specificity.
   Spec: the UI overhaul DESIGN.md ("Chart and Log"), section 11, Trim.
   - Title card, results card and the Under the hood dialog are the DRY side: ink on chart paper.
   - The pause card is the WET side: a plate sheet with the decide fill on Resume.
   - The in-game HUD is drawn on canvas by the vendored code and is left alone.
   The page cannot import the site's global.css, so the tokens below are a copy of its section 3 block.
   The faces come from dc/fonts/fonts.css; its URLs are relative, so the /depthcraft base path keeps working. */
@import url("fonts/fonts.css");

/* ------------------------------------------------------------------ tokens */
:root {
	/* dry side: day chart */
	--dry-paper: #f3eee3;
	--dry-paper-2: #e8e1d2;
	--dry-shoal: #d5e6e1;
	--dry-shoal-2: #b6d4ce;
	--dry-contour: #86b7b1;
	--dry-ink: #14313a;
	--dry-ink-2: #435c63;
	--dry-rule: #c6ccc4;
	--dry-route: #a3306b;
	--dry-on-route: #ffffff;
	--dry-edge: transparent; /* the sheet's edge against the scrim; only night needs one */
	--dry-scheme: light;

	/* wet side: identical in both themes */
	--plate: #0f262d;
	--plate-2: #183a42;
	--plate-line: #2e525a;
	--on-plate: #f3eee3;
	--on-plate-2: #a9c4c0;
	--decide: #f3eee3;
	--on-decide: #14313a;
	--decide-edge: #b6d4ce; /* the pressed edge of the decide fill (shoal-2 by day) */
	--band: #d5e6e1;
	--band-line: #86b7b1;
	--alert: #c8323f;
	--on-alert: #ffffff;
	--scrim: rgba(9, 22, 26, 0.72);

	--serif: "Newsreader Variable", "Iowan Old Style", Georgia, serif;
	--sans: "Sofia Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cond: "Sofia Sans Condensed Variable", "Arial Narrow", system-ui, sans-serif;

	--radius: 3px;
	--gutter: 21px;
	--rail: 42px;

	/* the vendored page's own names, pointed at the system so nothing it styles stays navy and mint */
	--mono: var(--cond);
	--muted: var(--ink-2);
	--accent: var(--ink);
	--warn: var(--ink-2);
	--panel: var(--paper);
	--line: var(--rule);

	/* glyphs, painted with currentColor through a mask */
	--g-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
	--g-replay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16 10.5a6 6 0 1 1-2-4.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3Cpath d='M15.5 2.5v4.5H11' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
	--g-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='15' cy='4.5' r='2.3'/%3E%3Ccircle cx='15' cy='15.5' r='2.3'/%3E%3Ccircle cx='5' cy='10' r='2.3'/%3E%3Cpath d='M13 5.6L7 8.9M13 14.4L7 11.1'/%3E%3C/g%3E%3C/svg%3E");
	--g-cog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black'%3E%3Ccircle cx='10' cy='10' r='5.4' stroke-width='1.8'/%3E%3Ccircle cx='10' cy='10' r='1.9' stroke-width='1.6'/%3E%3Cpath d='M15.6 10h3M13.96 13.96l2.12 2.12M10 15.6v3M6.04 13.96l-2.12 2.12M4.4 10h-3M6.04 6.04L3.92 3.92M10 4.4v-3M13.96 6.04l2.12-2.12' stroke-width='2.8'/%3E%3C/g%3E%3C/svg%3E");
	--g-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 7.5h3.5L11 4v12l-4.5-3.5H3z' fill='black'/%3E%3Cpath d='M14 7a4 4 0 0 1 0 6' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
	--g-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 4.5l11 11M15.5 4.5l-11 11' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
	--g-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5l4.5 4.5L17 5' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E");
	--g-wrong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E");
}

/* night chart: dry tokens only; follows the phone unless the page sets data-theme */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) {
		--dry-paper: #12292f;
		--dry-paper-2: #0d2126;
		--dry-shoal: #1d434b;
		--dry-shoal-2: #2a5a62;
		--dry-contour: #4f8a86;
		--dry-ink: #f3eee3;
		--dry-ink-2: #a9c4c0;
		--dry-rule: #2b4a51;
		--dry-route: #e58bb7;
		--dry-on-route: #12292f;
		--dry-edge: #2b4a51;
		--dry-scheme: dark;
	}
}
:root[data-theme="night"] {
	--dry-paper: #12292f;
	--dry-paper-2: #0d2126;
	--dry-shoal: #1d434b;
	--dry-shoal-2: #2a5a62;
	--dry-contour: #4f8a86;
	--dry-ink: #f3eee3;
	--dry-ink-2: #a9c4c0;
	--dry-rule: #2b4a51;
	--dry-route: #e58bb7;
	--dry-on-route: #12292f;
	--dry-edge: #2b4a51;
	--dry-scheme: dark;
}

/* surface names: dry by default */
:root,
dialog#hood {
	--paper: var(--dry-paper);
	--paper-2: var(--dry-paper-2);
	--shoal: var(--dry-shoal);
	--shoal-2: var(--dry-shoal-2);
	--contour: var(--dry-contour);
	--ink: var(--dry-ink);
	--ink-2: var(--dry-ink-2);
	--rule: var(--dry-rule);
	--route: var(--dry-route);
	--on-route: var(--dry-on-route);
	--focus: var(--route);
	color-scheme: var(--dry-scheme);
}
/* the pause sheet is the wet side: the dry names point at plate values */
#paused {
	--paper: var(--plate);
	--paper-2: var(--plate-2);
	--ink: var(--on-plate);
	--ink-2: var(--on-plate-2);
	--rule: var(--plate-line);
	--shoal: var(--band);
	--focus: var(--on-plate);
	color-scheme: dark;
}
@media (max-width: 359px) {
	:root {
		--gutter: 16px;
		--rail: 35px;
	}
}

/* -------------------------------------------------------------------- base */
html,
body {
	background: var(--plate); /* the water side shows before the canvas paints; no lit patch */
	background-image: none;
	color: var(--ink);
	font: 400 17px/28px var(--sans);
}
p {
	margin: 0;
	font: 400 17px/28px var(--sans);
	color: var(--ink);
}
a {
	color: var(--ink);
	text-underline-offset: 4px;
}
:focus-visible,
button:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 1px;
}
canvas:focus-visible {
	outline: none; /* the game itself is the focus target; the page never drew a ring on it */
}

/* every button starts flat; each recipe below dresses its own */
button {
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--ink);
	font: 600 17px/1 var(--cond);
	box-shadow: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
button:hover {
	background: none;
}

/* ----------------------------------------------------------------- sheets */
/* the game behind a card is paused or flying its attract run: one static scrim, no blur */
.overlay {
	background: var(--scrim);
	padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.card {
	width: min(440px, 100%);
	padding: 0 var(--gutter) var(--gutter);
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--dry-edge);
	border-radius: var(--radius);
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	text-align: left;
	overscroll-behavior: contain;
}

/* the eyebrow becomes the sheet's top bar: a condensed meta line, then the double neatline */
.eyebrow {
	margin: 0;
	padding-top: 21px;
	font: 500 16px/21px var(--cond);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-2);
}
.eyebrow::after {
	content: "";
	display: block;
	height: 6px;
	margin-top: 7px;
	box-sizing: border-box;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--ink);
}
.eyebrow a {
	/* the way home from the title card: a 45 px tall tap area that leaves the 21 px line alone */
	display: inline-block;
	padding: 12px 0;
	margin: -12px 0;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------- title card */
#title h1 {
	margin: 14px 0 0;
	font: italic 400 64px/56px var(--serif);
	letter-spacing: -0.02em;
	color: var(--ink);
}
@media (max-width: 359px) {
	#title h1 {
		font-size: 56px;
	}
}

/* the three rules: emoji gone, rows numbered in the rail and ruled */
.rules {
	counter-reset: r;
	margin: 21px 0 0;
	padding: 0;
	display: block;
	border-top: 1px solid var(--ink);
	font: 400 17px/24px var(--sans);
}
.rules li {
	counter-increment: r;
	display: grid;
	grid-template-columns: var(--rail) 1fr;
	gap: 0;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
	line-height: 24px;
	color: var(--ink);
}
.rules li > span:first-child {
	display: none;
}
.rules li::before {
	content: counter(r, decimal-leading-zero);
	font: 600 15px/24px var(--cond);
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--ink-2);
}
@media (max-height: 700px) {
	.rules li {
		padding: 7px 0; /* more of the pickers clear the sticky Dive button on a short screen */
	}
}
.rules b {
	font-weight: 650;
	color: var(--ink);
}

/* map and reef pickers: the segmented control (6.18), full width, with its group name as a column head */
.card .row[role="group"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-top: 28px;
}
.card .blurb + .row[role="group"] {
	margin-top: 21px;
}
.card .row[role="group"]::before {
	content: attr(aria-label);
	content: attr(aria-label) / "";
	grid-column: 1 / -1;
	margin-bottom: 7px;
	font: 500 13px/21px var(--cond);
	color: var(--ink-2);
}
.card .row[role="group"] button {
	min-height: 44px;
	padding: 0 10px;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: none;
	color: var(--ink);
	font: 600 17px/1 var(--cond);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}
.card .row[role="group"] button + button {
	border-left: 0;
}
.card .row[role="group"] button:first-of-type {
	border-radius: var(--radius) 0 0 var(--radius);
}
.card .row[role="group"] button:last-of-type {
	border-radius: 0 var(--radius) var(--radius) 0;
}
.card .row[role="group"] button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.card .row[role="group"] button:focus-visible {
	position: relative;
	z-index: 1; /* the ring draws over the neighbouring segment, not under it */
}
.card .row[role="group"] button[aria-pressed="false"]:active {
	background: var(--paper-2);
}
.blurb {
	margin: 7px 0 0;
	font: 400 16px/21px var(--sans);
	color: var(--ink-2);
}
.blurb:empty {
	display: none;
}

/* the one primary per sheet: ink fill, label left, glyph right */
.primary {
	width: 100%;
	min-height: 56px;
	margin: 28px 0 0;
	padding: 0 21px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: var(--ink);
	color: var(--paper);
	border: 1.5px solid var(--ink);
	border-radius: var(--radius);
	box-shadow: none;
	font: 650 19px/1 var(--cond);
	letter-spacing: 0.005em;
	text-align: left;
}
.primary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--g-arrow) center / 20px 20px no-repeat;
	mask: var(--g-arrow) center / 20px 20px no-repeat;
}
/* phones keep :hover on the last button tapped (and the canvas cancels touchstart, so it never moves
   off), which would leave the vendored mint .primary:hover on Dive again; reset it everywhere first */
.primary:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}
.primary:active {
	background: var(--ink-2);
	border-color: var(--ink-2);
	transform: translateY(1px);
}
@media (hover: hover) {
	.primary:hover {
		background: var(--ink-2);
		border-color: var(--ink-2);
	}
}

/* Dive stays in reach: on a short screen (320x640, landscape) it rides the bottom of the scrolling
   card until the list above it is read, then scrolls on with the page. The paper outline keeps the
   rules from showing through around it. */
#dive {
	position: sticky;
	bottom: 0; /* sticky offsets count from inside the card's bottom padding */
	z-index: 1;
	outline: var(--gutter) solid var(--paper); /* as deep as that padding, so nothing peeks under it */
	outline-offset: 0;
}
/* a hairline at the top of that paper band, so where it covers the card it reads as a fold */
#dive::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--gutter));
	right: calc(-1 * var(--gutter));
	top: calc(-1 * var(--gutter));
	border-top: 1px solid var(--rule);
	pointer-events: none;
}
/* while focused the paper mask moves to a flat spread shadow (painted under the outline), so the
   focus ring can sit on top of it and the rows behind the sticky button still never show through */
#dive:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 var(--gutter) var(--paper);
}

#title-best {
	margin-top: 21px; /* clear of the Dive button's paper outline */
	font: 400 16px/21px var(--sans);
	color: var(--ink-2);
}
#title-best:empty {
	display: none;
}
.rotate {
	margin-top: 7px;
	font: 500 16px/21px var(--cond);
	color: var(--ink-2);
}

/* logbook: a column head row over a ruled two-column list of the site's species */
.log {
	margin-top: 42px;
	padding-top: 0;
	border-top: 0;
}
.log h3 {
	margin: 0;
	padding-bottom: 3px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font: 500 16px/21px var(--cond);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-2);
	border-bottom: 1px solid var(--ink);
}
#log-count {
	font-variant-numeric: tabular-nums lining-nums;
}
.log ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.log li:nth-child(odd) {
	padding-right: 14px;
}
.log li {
	min-height: 35px;
	display: flex;
	align-items: center;
	padding: 4px 0;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
	font: 500 16px/21px var(--cond);
	color: var(--ink-2);
}
/* a logged species is a name in the log, lettered like the water it lives in */
.log li.seen {
	border: 0;
	border-bottom: 1px solid var(--rule);
	font: italic 500 17px/21px var(--serif);
	color: var(--ink);
}

/* Under the hood, Sound, About this game: a ruled list of quiet links, one 44 px row each */
.foot {
	margin-top: 28px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--ink);
	font: 600 17px/1 var(--cond);
}
.foot button,
.foot a,
#share,
#hood-close {
	min-height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	background: none;
	color: var(--ink);
	font: 600 17px/1 var(--cond);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
}
.foot button::before,
#share::before,
#hood-close::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--g) center / 18px 18px no-repeat;
	mask: var(--g) center / 18px 18px no-repeat;
}
#hood-open {
	--g: var(--g-cog);
}
#sound {
	--g: var(--g-sound);
}
#share {
	--g: var(--g-share);
}
#hood-close {
	--g: var(--g-cross);
}
.foot button:active,
.foot a:active,
#share:active,
#hood-close:active {
	color: var(--ink-2);
}
.foot button,
.foot a {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	gap: 0;
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
}
/* every label hangs on the rail: the glyph sits in the rail column, a link without one is indented to match */
.foot button::before {
	width: var(--rail);
	background-position: left center;
	-webkit-mask-position: left center;
	mask-position: left center;
}
.foot a {
	padding-left: var(--rail);
}

/* ----------------------------------------------------------- results card */
/* on a phone held upright the sheet starts at the top inset and covers the HUD tiles behind it */
@media (orientation: portrait) {
	#results {
		place-items: start center;
	}
}
/* the debrief (6.15) where the markup allows: log top bar, italic headline, score, replay row
   right under it, the challenge link, then the lesson as Remarks and the dive as a ledger */
#results .card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 7px;
	align-content: start;
}
#results .card > *,
#results .stats > *,
#results .row > * {
	grid-column: 1 / -1;
	min-width: 0;
}
#results .stats,
#results .row {
	display: contents;
}
#results .eyebrow {
	order: 1;
}
#res-title {
	order: 2;
	margin: 14px 0 0;
	font: italic 400 44px/49px var(--serif);
	letter-spacing: -0.015em;
	color: var(--ink);
	text-shadow: none;
}
@media (max-width: 359px) {
	#res-title {
		font-size: 38px;
		line-height: 42px;
	}
}
/* New best: the headline settles in once, no overshoot and no glow */
#res-title.flourish {
	color: var(--ink);
	transform-origin: left center;
	animation: dc-settle 180ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes dc-settle {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
#results .stat {
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}
#results .stat.big {
	order: 3;
	margin-top: 14px;
}
#results .stat.big small {
	display: block;
	margin: 0;
	font: 500 13px/21px var(--cond);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-2);
}
#res-score {
	font: 700 44px/42px var(--cond);
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.01em;
	color: var(--ink);
}
#res-best {
	margin-left: 7px;
	font: 500 17px/1 var(--cond);
	font-style: normal;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--ink-2);
}

/* replay row: Dive again (primary) and Menu (secondary) side by side, Share as the quiet link */
#results #again {
	order: 4;
	grid-column: 1;
	margin-top: 21px;
	padding: 0 14px;
}
#again::after {
	-webkit-mask-image: var(--g-replay);
	mask-image: var(--g-replay);
}
#results #menu {
	order: 5;
	grid-column: 2;
	min-height: 56px;
	margin-top: 21px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border: 1.5px solid var(--ink);
	border-radius: var(--radius);
	background: none;
	color: var(--ink);
	font: 650 19px/1 var(--cond);
	letter-spacing: 0.005em;
	text-align: left;
}
#menu:active {
	background: var(--paper-2);
	transform: translateY(1px);
}
@media (hover: hover) {
	#menu:hover {
		background: var(--paper-2);
	}
}
#share {
	order: 6;
	justify-self: start;
	margin-top: 7px;
}
@media (max-width: 359px) {
	#results #again,
	#results #menu {
		padding: 0 12px;
		font-size: 17px;
	}
	#again::after {
		display: none;
	}
}

/* the lesson: Remarks, label at the gutter, the words hung on the rail */
#res-cause {
	order: 7;
	margin-top: 21px;
	padding-left: var(--rail);
	font: italic 450 18px/28px var(--serif);
	color: var(--ink);
}
#res-cause::before {
	content: "Remarks";
	display: block;
	margin-left: calc(-1 * var(--rail));
	font: 500 13px/21px var(--cond);
	font-style: normal;
	color: var(--ink-2);
}
#res-cause:empty {
	display: none;
}

/* the dive as a ledger: label left in prose, figure flush right in condensed tabular.
   No Total row: these are the dive's facts, not parts of the score. */
#results .stat:not(.big) {
	order: 8;
	min-height: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border-bottom: 1px solid var(--rule);
}
#results .stat:nth-child(2) {
	margin-top: 21px;
	border-top: 1px solid var(--ink);
}
#results .stat:not(.big) small {
	margin: 0;
	font: 400 16px/1.2 var(--sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}
#results .stat:not(.big) strong {
	font: 600 16px/1 var(--cond);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
	color: var(--ink);
}
#res-seen {
	order: 9;
	margin-top: 14px;
	font: 400 16px/21px var(--sans);
	color: var(--ink-2);
}
#res-seen:empty {
	display: none;
}

/* the next game: a ruled row like today's entry, the line in italic serif, arrow flush right */
.dc-next {
	order: 10;
	margin-top: 28px;
	min-height: 70px;
	padding: 14px 0;
	display: grid;
	grid-template-columns: 1fr 20px;
	column-gap: 14px;
	align-items: center;
	border: 0;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
	background: none;
	color: var(--ink);
	font: 400 16px/21px var(--sans);
	text-decoration: none;
}
.dc-next .t {
	display: block;
	font: italic 450 22px/28px var(--serif);
	color: var(--ink);
}
.dc-next .s {
	display: block;
	margin-top: 4px;
	font: 400 16px/21px var(--sans);
	color: var(--ink-2);
}
.dc-next svg {
	grid-column: 2;
	grid-row: 1;
	width: 20px;
	height: 20px;
}
.dc-next:active {
	background: var(--paper-2);
}

/* toast (Share copied): an ink strip on the left edge, not a mint pill */
#toast {
	left: max(14px, env(safe-area-inset-left));
	right: auto;
	bottom: max(14px, env(safe-area-inset-bottom));
	max-width: calc(100% - 28px);
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	transform: none;
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius);
	font: 650 17px/1 var(--cond);
}
#toast[hidden] {
	display: none;
}

/* ------------------------------------------------------------- pause card */
/* the wet side: a plate sheet at the bottom of the frozen scene, Resume as the decide fill (6.12) */
#paused {
	place-items: end center;
}
#paused .card {
	width: min(100%, 420px);
	padding: 21px var(--gutter) 14px;
	background: var(--plate);
	color: var(--on-plate);
	border: 0;
	border-top: 2px solid var(--on-plate);
	border-radius: 0;
}
#paused h2 {
	margin: 0;
	font: italic 400 36px/42px var(--serif);
	letter-spacing: 0;
	color: var(--on-plate);
}
#paused .card > p {
	margin-top: 7px;
	font: 400 17px/24px var(--sans);
	color: var(--on-plate-2);
}
#resume {
	margin-top: 21px;
	background: var(--decide);
	color: var(--on-decide);
	border: 0;
	box-shadow: inset 0 -4px 0 var(--decide-edge);
	font: 700 19px/1 var(--cond);
}
/* unconditional: a sticky phone :hover must not repaint the decide fill */
#resume:hover {
	background: var(--decide);
	border-color: transparent;
	color: var(--on-decide);
}
#resume:active {
	background: var(--decide);
	box-shadow: inset 0 2px 0 var(--decide-edge);
	transform: translateY(2px);
}
#paused .quiz {
	margin-top: 28px;
	margin-bottom: 0;
	border-bottom: 0;
}

/* --------------------------------------------------------------- the hood */
/* Under the hood: a dry bottom sheet on phones, neatline on top, scroll inside */
dialog#hood {
	width: min(680px, 100%);
	max-width: 100%;
	max-height: 88dvh;
	margin: auto auto 0;
	padding: 3px 0 0;
	background: var(--paper);
	color: var(--ink);
	border: 0;
	border-top: 2px solid var(--ink);
	border-radius: 0;
	box-shadow: none;
	overscroll-behavior: contain;
}
@media (min-width: 720px) {
	dialog#hood {
		margin: auto;
	}
}
dialog#hood::backdrop {
	background: var(--scrim);
}
.hood {
	padding: 0 var(--gutter) calc(28px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--ink);
}
/* the close link rides a sticky top row, so it is in reach however far the sheet scrolls and never sits on the text */
#hood-close {
	position: sticky;
	top: 0;
	float: none;
	z-index: 1;
	width: calc(100% + 2 * var(--gutter));
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter);
	min-height: 49px;
	justify-content: flex-end;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
}
/* the meta line is the sheet's crumb: pulled up into the sticky Close row on the left (and sticky with it),
   never an eyebrow over the title */
.hood .eyebrow {
	position: sticky;
	top: 0;
	z-index: 2;
	width: max-content;
	height: 49px;
	margin: -50px 0 0; /* the row is 49 px plus its 1 px rule */
	padding: 0;
	display: flex;
	align-items: center;
	font: 500 16px/21px var(--cond);
	color: var(--ink-2);
	pointer-events: none;
}
.hood .eyebrow::after {
	display: none; /* the sheet's own top edge is the neatline */
}
.hood h2 {
	margin: 21px 0 0;
	font: italic 400 36px/42px var(--serif);
	letter-spacing: -0.01em;
	color: var(--ink);
}
.hood h3 {
	margin: 28px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--ink);
	font: italic 450 22px/28px var(--serif);
	letter-spacing: 0;
	color: var(--ink);
}
.hood p,
.hood li {
	font: 400 17px/28px var(--sans);
	color: var(--ink);
}
.hood p {
	margin: 14px 0 0;
}
.hood ul {
	margin: 14px 0 0;
	padding-left: var(--gutter);
}
/* the sections hang on the rail under their gutter-aligned heads, as on the site's Hood sheet */
.hood > p:not(.eyebrow),
.hood > ul {
	margin-left: var(--rail);
}
.hood li + li {
	margin-top: 7px;
}
.hood code {
	padding: 0 4px;
	background: var(--paper-2);
	border-radius: 2px;
	color: var(--ink);
	font: 600 16px/1 var(--cond);
	font-variant-numeric: tabular-nums lining-nums;
}

/* -------------------------------------------------------------------- quiz */
/* dive quiz card: keep in step with apps/web/src/styles/quiz.css (DESIGN.md 6.19) */
.quiz {
	margin: 56px 0 14px;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
	background: none;
	text-align: left;
	color: var(--ink);
}
.quiz-label {
	margin: 7px 0 0;
	font: 500 13px/21px var(--cond);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-2);
}
.quiz-q {
	margin: 7px 0 14px;
	font: 400 20px/28px var(--serif);
	color: var(--ink);
}
.quiz-options {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--rule);
}
.quiz-option {
	display: grid;
	grid-template-columns: var(--rail) 1fr auto;
	align-items: center;
	min-height: 56px;
	width: 100%;
	padding: 7px 0;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-radius: 0;
	color: var(--ink);
	font: 400 17px/24px var(--sans);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.quiz-option:last-child {
	border-bottom: 0;
}
.quiz-option::before {
	content: "";
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
}
.quiz-option:hover:enabled {
	background: none;
	border-color: var(--rule);
}
.quiz-option:active:enabled {
	background: var(--paper-2);
}
.quiz-option:disabled {
	cursor: default;
	color: var(--ink-2);
}
.quiz-option[aria-pressed="true"]::before {
	background: radial-gradient(circle, var(--ink) 5px, transparent 5.5px);
}
/* feedback is a glyph plus a word, never colour alone */
.quiz-option.right,
.quiz-option.wrong {
	background: none;
	border-color: var(--rule);
	color: var(--ink);
}
.quiz-option.right::before,
.quiz-option.wrong::before {
	border: 0;
	border-radius: 0;
	background: var(--ink);
	-webkit-mask: var(--glyph) center / 20px 20px no-repeat;
	mask: var(--glyph) center / 20px 20px no-repeat;
}
.quiz-option.right {
	--glyph: var(--g-check);
}
.quiz-option.wrong {
	--glyph: var(--g-wrong);
}
.quiz-option.right::after,
.quiz-option.wrong::after {
	padding-left: 14px;
	font: 650 16px/1 var(--cond);
	white-space: nowrap;
}
.quiz-option.right::after {
	content: "Right.";
}
/* No word on the wrong pick: its cross marks it, and the explanation under the answers opens with "Not quite." */
.quiz-why {
	margin: 14px 0 0;
	padding-left: var(--rail);
	font: 400 16px/24px var(--sans);
	color: var(--ink);
}
.quiz-next {
	width: auto;
	min-height: 52px;
	margin: 14px 0;
	padding: 0 21px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: none;
	border: 1.5px solid var(--ink);
	border-radius: var(--radius);
	color: var(--ink);
	font: 650 19px/1 var(--cond);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	touch-action: manipulation;
}
.quiz-next:hover {
	background: none;
}
.quiz-next:active {
	background: var(--paper-2);
	transform: translateY(1px);
}
.quiz-why[hidden],
.quiz-next[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
	#res-title.flourish {
		animation: none;
	}
	.primary:active,
	#menu:active,
	#resume:active,
	.quiz-next:active {
		transform: none;
	}
}

/* While a dive is on nothing on the page can be selected, so iOS never raises its Copy / Look Up
   menu over the game. Toggled by fathom-bridge.js. */
html.dc-playing,
html.dc-playing * {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}