:root {
	color-scheme: light dark;

	/* Derived palette. The seed pair lives in css/identity.css and is the only
	   colour literal in the app: every token below is `oklch(from <seed> L C h)` —
	   an explicit lightness and chroma with the **hue taken from the accent**, so
	   re-skinning rotates the neutrals with the brand and no token can keep a
	   previous accent's channels.
	   Why relative colour rather than color-mix toward black/white: mixing keeps
	   the accent's full chroma, so dark surfaces came out as saturated greens
	   instead of near-neutrals. Stating L and C directly is both calibrated and
	   readable — the numbers are the design.
	   Why each token is a light-dark() of two functions rather than one function
	   over a light-dark() seed: neither color-mix() nor relative colour accepts
	   light-dark() as an input. It doesn't error — the declaration is dropped and
	   elements silently fall back to an inherited colour. */
	--bg:          light-dark(oklch(from var(--primary-l) 0.975 0.008 h), oklch(from var(--primary-d) 0.16 0.012 h));
	--bg-grad-top: light-dark(oklch(from var(--primary-l) 0.93  0.045 h), oklch(from var(--primary-d) 0.26 0.045 h));
	--surface:     light-dark(oklch(from var(--primary-l) 1     0     h), oklch(from var(--primary-d) 0.21 0.015 h));
	--surface-2:   light-dark(oklch(from var(--primary-l) 0.955 0.012 h), oklch(from var(--primary-d) 0.25 0.018 h));
	--surface-3:   light-dark(oklch(from var(--primary-l) 0.91  0.018 h), oklch(from var(--primary-d) 0.30 0.020 h));

	/* The de-emphasis ladder is three steps of lightness on one hue, so "dim" and
	   "faint" keep their relationship to the text in both schemes. */
	--text:        light-dark(oklch(from var(--primary-l) 0.22 0.020 h), oklch(from var(--primary-d) 0.96 0.015 h));
	--text-dim:    light-dark(oklch(from var(--primary-l) 0.45 0.020 h), oklch(from var(--primary-d) 0.74 0.020 h));
	--text-faint:  light-dark(oklch(from var(--primary-l) 0.62 0.018 h), oklch(from var(--primary-d) 0.56 0.020 h));

	--border:      light-dark(oklch(from var(--primary-l) 0.90 0.015 h), oklch(from var(--primary-d) 0.31 0.018 h));
	--nav-bg:      rgb(from var(--bg) r g b / 0.92);
	--nav-h:       62px;

	--color-primary-on-surface: light-dark(var(--color-primary-700), var(--color-primary-400));
	--color-primary-grad: linear-gradient(135deg,
		light-dark(var(--color-primary-dark), var(--color-primary)) 0%,
		light-dark(var(--color-primary), var(--color-primary-400)) 100%);

	/* The label that sits on top of a filled accent. White is right on the deep
	   light-mode felt (5.4:1) and unreadable on the bright dark-mode mint (2.1:1),
	   so dark mode inks it with a near-black of the same hue. */
	--on-primary:  light-dark(white, oklch(from var(--primary-d) 0.20 0.030 h));

	/* Semantic, not brand: these stay red whatever the accent is. */
	--danger:      light-dark(#dc2626, #ef4444);

	/* The card face — its own surface, a step lighter than the felt it sits on in
	   both schemes, because a playing card that matches its background stops
	   reading as an object. */
	--card-bg:     light-dark(oklch(from var(--primary-l) 1    0     h), oklch(from var(--primary-d) 0.245 0.020 h));
	--card-border: light-dark(oklch(from var(--primary-l) 0.89 0.020 h), oklch(from var(--primary-d) 0.35  0.025 h));
}

/* ─── Page headers ──────────────────────────────────────────────────────── */
.page-title {
	font: var(--font-h3);
	margin: var(--space-2xs) 0 var(--space-m);
}
.section-title {
	font: var(--font-h5);
	margin: var(--space-l) 0 var(--space-s);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: var(--space-s);

	& .muted { justify-self: end; font: var(--font-body-small-semibold); }
}

.top-bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-s);
	margin-bottom: var(--space-m);
}
.top-bar .brand {
	font: var(--font-h4);
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-xs);
}

svg.icon {
	width: 1em;
	height: 1em;
	font-size: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.15em;
	flex-shrink: 0;

	& .solid { fill: currentColor; stroke: none; }
}

.top-bar .brand .icon { color: var(--color-primary); font-size: 26px; }

.icon-btn {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	cursor: pointer;
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn .icon { font-size: 22px; }

.link-btn {
	background: none;
	border: none;
	color: var(--text-dim);
	font: var(--font-body-medium-semibold);
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	gap: var(--space-2xs);
	cursor: pointer;
	padding: var(--space-2xs) 0;
}
.link-btn:hover { color: var(--text); }
.link-btn .icon { font-size: 20px; }
.danger-text { color: var(--danger); }
.danger-text:hover { color: var(--danger); }

.ghost-btn {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 999px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-medium-medium);
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	gap: var(--space-xs);
	cursor: pointer;
}
.ghost-btn:hover { background: var(--surface-3); }
.ghost-btn .icon { font-size: 20px; }

.row-icon {
	background: none;
	border: none;
	color: var(--text-faint);
	display: grid;
	place-items: center;
	padding: var(--space-2xs);
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;

	&:hover { color: var(--text); background: var(--surface-3); }
	&:disabled { opacity: 0.3; cursor: default; background: none; }
	& .icon { font-size: 20px; }
}

/* ─── Fields ────────────────────────────────────────────────────────────── */
.text-input {
	width: 100%;
	min-width: 0;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-large-regular);

	&:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
	&::placeholder { color: var(--text-faint); }
}

.join-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-xs);
}

.code-input {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-h4);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.18em;
	text-align: center;
	text-transform: uppercase;

	&:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
	&::placeholder { color: var(--text-faint); letter-spacing: 0.18em; }
}

.code-pill {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95em;
	letter-spacing: 0.12em;
	background: var(--surface-3);
	border-radius: 6px;
	padding: 2px var(--space-2xs);
	color: var(--text);
}

/* ─── Cards & panels ────────────────────────────────────────────────────── */
.join-card, .panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 20px);
	padding: var(--space-l);
	display: grid;
	gap: var(--space-s);
	margin-bottom: var(--space-m);

	& h2 { font: var(--font-h5); margin: 0; }
	& p  { margin: 0; }
	& .section-title { margin-block: 0; }
}
.deck-note {
	font: var(--font-body-small-regular);
	font-variant-numeric: tabular-nums;
}

/* ─── Session lists (yours, and ones this device joined) ────────────────── */
.session-list { display: grid; gap: var(--space-xs); }
.session-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: var(--space-s) var(--space-m);
}
.session-main {
	display: grid;
	gap: var(--space-3xs);
	min-width: 0;
}
.session-name { font: var(--font-body-large-semibold); }
.session-meta {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-xs);
	font: var(--font-body-small-regular);
	color: var(--text-dim);
}
.tag-closed {
	background: var(--surface-3);
	color: var(--text-faint);
	border-radius: 999px;
	padding: 1px var(--space-xs);
	font: var(--font-body-xsmall-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ─── Room layout ───────────────────────────────────────────────────────── */
/* The host is the layout container — no wrapper div. Mobile stacks; from 900px
   the story queue moves beside the table and sticks while the table scrolls. */
room-page {
	display: grid;
	gap: var(--space-m);
	align-content: start;
	grid-template-areas:
		"head"
		"table"
		"stories";
}
room-page > .top-bar      { grid-area: head; margin-bottom: 0; }
room-page > .table-card   { grid-area: table; }
room-page > .stories-panel { grid-area: stories; }
room-page > .join-card,
room-page > .empty        { grid-area: table; }

@media (min-width: 900px) {
	room-page {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
		grid-template-areas:
			"head  head"
			"table stories";
		gap: var(--space-l);
	}
	room-page > .stories-panel {
		position: sticky;
		top: var(--space-m);
		align-self: start;
	}
	room-page > .join-card { max-width: 520px; }
}

/* More room: bigger cards rather than the same cards further apart. */
@media (min-width: 1200px) {
	room-page {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--space-xl);
	}
	.seat-grid { --seat-card-w: 72px; }
	.deck { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
	.card { font: var(--font-h3); }
	.table-card { padding: var(--space-xl); }
}

/* ─── Room header ───────────────────────────────────────────────────────── */
.room-head { display: grid; gap: var(--space-3xs); min-width: 0; }
.room-name { font: var(--font-h4); letter-spacing: -0.01em; }
.code-copy {
	background: none;
	border: none;
	color: var(--text-dim);
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0;
	cursor: pointer;

	& .icon { font-size: 16px; }
	&:hover { color: var(--text); }
}

.connection-warning {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--space-xs) var(--space-m);
	margin-bottom: var(--space-m);
	color: var(--text-dim);
	font: var(--font-body-small-semibold);

	& .icon { font-size: 18px; color: var(--color-warning); }
}

/* ─── The table ─────────────────────────────────────────────────────────── */
.table-card {
	/* A card table: a soft pool of accent light at the top, the app surface below.
	   Enough depth that the playing cards read as objects sitting on something. */
	background:
		radial-gradient(120% 70% at 50% -10%, rgb(from var(--color-primary) r g b / 0.10), transparent 60%),
		var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 20px);
	padding: var(--space-l);
	display: grid;
	gap: var(--space-m);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgb(from var(--color-primary) r g b / 0.06);
}
.table-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-s);
}
.table-eyebrow {
	font: var(--font-body-xsmall-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-faint);
	margin-bottom: var(--space-3xs);
}
.table-title { font: var(--font-h3); margin: 0; overflow-wrap: anywhere; letter-spacing: -0.02em; line-height: 1.15; }
.table-desc { margin: 0; color: var(--text-dim); font: var(--font-body-medium-regular); }
.estimate-badge {
	background: var(--color-primary-grad);
	color: #fff;
	border-radius: 14px;
	min-width: 52px;
	padding: var(--space-xs) var(--space-s);
	text-align: center;
	font: var(--font-h5);
}
/* Label + a hairline bar driven by --pct, so "3 of 5" is also a shape. */
.vote-progress {
	display: grid;
	gap: var(--space-xs);
	font: var(--font-body-small-semibold);
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.06em;

	&::after {
		content: "";
		height: 3px;
		border-radius: 999px;
		background:
			linear-gradient(var(--color-primary), var(--color-primary)) 0 / var(--pct, 0%) 100% no-repeat,
			var(--surface-3);
		transition: background-size 0.35s ease;
	}
	&.is-done {
		color: var(--color-primary-on-surface);
		&::after { background: var(--color-primary-grad); }
	}
}

/* ─── Seats ─────────────────────────────────────────────────────────────── */
/* The felt: seats sit on their own inset surface so the table has a middle. */
.seat-grid {
	--seat-card-w: 58px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	gap: var(--space-m) var(--space-s);
	justify-items: center;
	padding: var(--space-l) var(--space-m);
	border-radius: 16px;
	background:
		radial-gradient(90% 120% at 50% 0%, rgb(from var(--color-primary) r g b / 0.07), transparent 70%),
		var(--surface-2);
	border: var(--border-subtle);
}
.seat {
	display: grid;
	justify-items: center;
	/* Seats stretch to the tallest in the row; without this the leftover height is
	   dealt back into the card row, which overrides the card's aspect-ratio and
	   leaves the name baselines ragged from seat to seat. */
	align-content: start;
	gap: var(--space-xs);
	width: 100%;
	max-width: 92px;

	&.is-away { opacity: 0.6; }
}
.seat-name {
	max-width: 100%;
	font: var(--font-body-small-medium);
	color: var(--text-dim);
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	gap: var(--space-3xs);
}
.seat.is-me .seat-name { color: var(--text); font: var(--font-body-small-bold); }
.seat-crown .icon { font-size: 14px; color: var(--color-primary); vertical-align: -0.1em; }

/* One card per seat, turned over on reveal. The container itself rotates and the
   two faces sit back to back, so the flip needs no extra wrapper element. */
.seat-card {
	/* The two faces are stacked in one grid cell rather than absolutely positioned,
	   so the card is sized by its faces instead of needing a height of its own. */
	display: grid;
	align-self: start;
	width: var(--seat-card-w);
	transform-style: preserve-3d;
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.25, 1);
	transition-delay: calc(var(--i, 0) * 60ms);

	&.up { transform: rotateY(180deg); }
	&.down { transform: translateY(-4px); }
}
.card-face {
	grid-area: 1 / 1;
	height: calc(var(--seat-card-w) * 1.5);
	backface-visibility: hidden;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font: var(--font-h5);
	font-variant-numeric: tabular-nums;
}
.card-face--back {
	/* A woven lattice, not stripes: two crossing gradients over the brand colour. */
	background:
		repeating-linear-gradient(45deg, rgb(255 255 255 / 0.14) 0 3px, transparent 3px 7px),
		repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.14) 0 3px, transparent 3px 7px),
		var(--color-primary-grad);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 2px 6px rgb(from var(--color-primary) r g b / 0.35);
}
.card-face--front {
	transform: rotateY(180deg);
	background: var(--card-bg);
	color: var(--color-primary-on-surface);
	box-shadow: inset 0 0 0 1.5px var(--color-primary), 0 4px 12px rgba(0, 0, 0, 0.10);
}
/* Nobody has played yet. The state class is `waiting`, not `empty`: these
   components render into the light DOM, so class names share one namespace with
   the shared stylesheets — and `.empty` is the global empty-state utility, whose
   `padding: 60px` silently made unplayed seats 120px taller than played ones. */
.seat-card.waiting .card-face--back {
	background: none;
	box-shadow: none;
	border: 2px dashed var(--card-border);
	animation: seat-wait 2.4s ease-in-out infinite;
}
.seat-card.down .card-face--back { animation: card-played 0.25s ease-out; }

@keyframes seat-wait {
	/* Gentle: an away seat is already dimmed, and the two opacities multiply — at
	   0.4 an absent player's empty card faded to almost nothing. */
	50% { opacity: 0.6; }
}
@keyframes card-played {
	from { transform: translateY(6px) scale(0.94); opacity: 0.4; }
}

/* ─── The deck in your hand ─────────────────────────────────────────────── */
.deck {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
	gap: var(--space-xs);
}
.card {
	position: relative;
	aspect-ratio: 2 / 3;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	color: var(--text);
	font: var(--font-h4);
	font-variant-numeric: tabular-nums;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.25, 1), border-color 0.18s, box-shadow 0.18s;

	/* The corner pip a real card carries — drawn from the value already on the
	   element, so the markup stays one button with one label. */
	&::before {
		content: attr(data-value);
		position: absolute;
		inset-block-start: 5px;
		inset-inline-start: 6px;
		font: var(--font-body-xsmall-bold);
		color: var(--text-faint);
	}

	&:hover:not(:disabled) {
		transform: translateY(-6px);
		border-color: var(--color-outline);
		box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
	}
	&:active:not(:disabled) { transform: translateY(-2px) scale(0.98); }
	&:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
	&:disabled { cursor: default; }

	/* The played card lifts out of the hand and stays lifted. */
	&.picked {
		border-color: var(--color-primary);
		color: var(--color-primary-on-surface);
		background:
			linear-gradient(rgb(from var(--color-primary) r g b / 0.10), rgb(from var(--color-primary) r g b / 0.10)),
			var(--card-bg);
		transform: translateY(-10px);
		box-shadow: 0 10px 22px rgb(from var(--color-primary) r g b / 0.30);

		&::before { color: var(--color-primary); }
	}
}
.card--static { cursor: default; box-shadow: none; }
.deck--sample { margin-bottom: var(--space-xs); }
.deck-hint { font: var(--font-body-small-regular); margin: 0; text-align: center; }

/* ─── Reveal ────────────────────────────────────────────────────────────── */
/* Results are numbers, not a landscape: cap the width so three stats don't
   stretch to a metre apart on a desktop. */
.results {
	display: grid;
	gap: var(--space-m);
	justify-self: center;
	width: 100%;
	max-width: 560px;
	animation: results-in 0.35s ease-out 0.35s backwards;
}
.consensus {
	display: grid;
	grid-auto-flow: column;
	justify-content: center;
	align-items: center;
	gap: var(--space-xs);
	background: rgb(from var(--color-success) r g b / 0.12);
	color: var(--color-success);
	border: 1px solid rgb(from var(--color-success) r g b / 0.25);
	border-radius: 14px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-large-semibold);
	text-align: center;

	& .icon { font-size: 20px; }
}
.result-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-s);
}

/* Vote distribution: one column per card played, bar height from --fill. */
.distribution {
	display: grid;
	grid-auto-flow: column;
	/* Fixed-width columns, centred: with 1fr columns a two-card spread pushed the
	   bars to opposite ends of the panel and read as two unrelated numbers. */
	grid-auto-columns: 56px;
	align-items: end;
	justify-content: center;
	gap: var(--space-m);
	min-height: 104px;
	/* Hug the columns: a full-width panel behind two bars reads as mostly nothing. */
	width: fit-content;
	margin-inline: auto;
	padding: var(--space-s) var(--space-l) 0;
	border-radius: 14px;
	background: var(--surface-2);
	border: var(--border-subtle);
}
.dist-col {
	display: grid;
	grid-template-rows: 1fr auto auto;
	justify-items: center;
	gap: var(--space-2xs);
	height: 100%;
	max-width: 64px;
	padding-bottom: var(--space-s);
}
.dist-bar {
	width: 100%;
	max-width: 38px;
	height: 100%;
	display: grid;
	align-items: end;

	& span {
		display: block;
		width: 100%;
		height: var(--fill, 0%);
		min-height: 4px;
		border-radius: 6px 6px 2px 2px;
		background: var(--color-primary-grad);
		box-shadow: 0 2px 8px rgb(from var(--color-primary) r g b / 0.30);
		animation: bar-grow 0.45s cubic-bezier(0.2, 0.8, 0.25, 1) 0.4s backwards;
	}
}
.dist-card {
	font: var(--font-body-small-bold);
	font-variant-numeric: tabular-nums;
	min-width: 26px;
	text-align: center;
	padding: 1px var(--space-2xs);
	border-radius: 6px;
	background: var(--surface-3);
}
.dist-count { font: var(--font-body-xsmall-regular); color: var(--text-faint); }

@keyframes results-in {
	from { opacity: 0; transform: translateY(8px); }
}
@keyframes bar-grow {
	from { height: 0; }
}

/* ─── Facilitator controls ──────────────────────────────────────────────── */
.round-actions {
	display: grid;
	gap: var(--space-s);
	justify-items: stretch;
}
.accept-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-xs);
}
.estimate-input { text-align: center; font: var(--font-h5); }

/* ─── Stories ───────────────────────────────────────────────────────────── */
.stories-panel {
	display: grid;
	gap: var(--space-xs);
	align-content: start;

	& .section-title { margin-block: 0 var(--space-2xs); }
}
.stories-empty { padding: var(--space-s) var(--space-2xs); font: var(--font-body-small-regular); }
.story-list { display: grid; gap: var(--space-2xs); }
.story-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-auto-flow: column;
	align-items: center;
	gap: var(--space-2xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-s);
	transition: border-color 0.15s, background 0.15s;

	&:hover { border-color: var(--color-outline); }

	/* The story on the table: an accent rail down its leading edge. */
	&.current {
		border-color: var(--color-primary);
		background:
			linear-gradient(var(--color-primary), var(--color-primary)) 0 0 / 3px 100% no-repeat,
			rgb(from var(--color-primary) r g b / 0.08);
		padding-inline-start: calc(var(--space-s) + 3px);
	}
}
.story-main {
	background: none;
	border: none;
	color: inherit;
	text-align: start;
	font: var(--font-body-medium-medium);
	padding: var(--space-xs) 0;
	min-width: 0;
	cursor: pointer;
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-xs);

	&:disabled { cursor: default; }
}
.story-title { min-width: 0; }
.story-flag {
	font: var(--font-body-xsmall-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-warning);
}
.story-note-flag {
	display: grid;
	place-items: center;
	color: var(--text-faint);

	& .icon { font-size: 15px; }
}
.estimate-chip {
	background: var(--color-primary);
	color: #fff;
	border-radius: 999px;
	min-width: 26px;
	padding: 2px var(--space-xs);
	text-align: center;
	font: var(--font-body-small-bold);
	font-variant-numeric: tabular-nums;
}
.story-add {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-2xs);
}
.room-foot { margin-top: var(--space-xs); text-align: center; }

/* ─── Empty state ───────────────────────────────────────────────────────── */
.empty {
	text-align: center;
	color: var(--text-dim);
	padding: 60px var(--space-l);
}
.empty .icon { font-size: 54px; color: var(--surface-3); margin-bottom: var(--space-s); }
.empty p { margin: var(--space-2xs) 0; }

/* ─── Stats / settings ──────────────────────────────────────────────────── */
.stat {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: var(--space-m) var(--space-s);
	text-align: center;
	display: grid;
	gap: var(--space-3xs);
}
.stat-num { font: var(--font-h4); color: var(--color-primary-on-surface); font-variant-numeric: tabular-nums; }
.stat-label { font: var(--font-body-small-regular); color: var(--text-dim); }

.settings-list { display: grid; gap: var(--space-xs); }
.settings-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-s);
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: var(--space-m);
	font: var(--font-body-large-medium);
	text-align: start;
	cursor: pointer;
}
.settings-item:hover { background: var(--surface-3); }
.settings-item:disabled { opacity: 0.6; cursor: default; }
.settings-item .icon { font-size: 22px; color: var(--text-dim); }
.settings-hint { margin: var(--space-xs) var(--space-2xs) 0; font: var(--font-body-small-regular); }
.settings-foot {
	margin-top: var(--space-xl);
	text-align: center;
	font: var(--font-body-small-regular);

	.settings-version {
		display: block;
		margin-top: var(--space-2xs);
		color: var(--text-faint);
		font-variant-numeric: tabular-nums;
	}
}

/* ─── Segmented control (theme toggle) ──────────────────────────────────── */
.seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--space-2xs);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: var(--space-2xs);
	margin-bottom: var(--space-m);

	& button {
		border: none;
		background: none;
		color: var(--text-dim);
		font: var(--font-body-small-semibold);
		padding: var(--space-xs);
		border-radius: 9px;
		cursor: pointer;
		display: grid;
		grid-auto-flow: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);

		& .icon { font-size: 18px; }
		&.on { background: var(--color-primary); color: #fff; }
	}
}

/* ─── Taking a seat ─────────────────────────────────────────────────────── */
.role-hint { font: var(--font-body-small-regular); line-height: 1.5; }
.form-error { color: var(--danger); font: var(--font-body-small-medium); margin: 0; }

/* ─── Motion ────────────────────────────────────────────────────────────── */
/* Every animation here is decoration over a state that is already legible from
   colour and position, so honouring the preference costs nothing. */
@media (prefers-reduced-motion: reduce) {
	.seat-card,
	.card,
	.vote-progress::after {
		transition-duration: 0.01ms;
	}
	.results,
	.dist-bar span,
	.seat-card.waiting .card-face--back,
	.seat-card.down .card-face--back {
		animation: none;
	}
}

/* ─── On-accent labels ──────────────────────────────────────────────────── */
/* Everything that sits on a filled accent takes --on-primary rather than white.
   The shared css/buttons.css hardcodes `color: #fff` for .btn--brand, which is
   correct for the darker accents most kapps use; this file loads after it. */
.btn--brand,
.play-btn,
.estimate-badge,
.estimate-chip,
.seg button.on,
.chip.on {
	color: var(--on-primary);
}

/* ─── Sizing notes ──────────────────────────────────────────────────────── */
.notes {
	display: grid;
	grid-template-areas: "label" "shared" "mine";
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xs) var(--space-m);
	justify-self: center;
	width: 100%;
	max-width: 980px;
}
/* Wide enough for two readable columns: the room's notes, and your own box. Below
   it they stack, yours last — you write after reading what the table wrote. */
@media (width >= 900px) {
	.notes {
		grid-template-areas:
			"label  label"
			"shared mine";
		grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
		align-items: start;
	}
}
.notes-label { grid-area: label; }
.notes-shared {
	grid-area: shared;
	display: grid;
	gap: var(--space-xs);
	align-content: start;
}
.notes-mine {
	grid-area: mine;
	display: grid;
	gap: var(--space-2xs);
	align-content: start;
}
.note {
	display: grid;
	gap: var(--space-2xs);
}
.note-who {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-2xs);
	font: var(--font-body-small-semibold);
	color: var(--text-dim);
}
.notes-none {
	margin: 0;
	padding: var(--space-s) 0;
	font: var(--font-body-medium-regular);
}
.notes-label {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-2xs);
	font: var(--font-body-small-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-faint);

	& .icon { font-size: 16px; }
}
.notes-body {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: var(--space-s) var(--space-m);
	font: var(--font-body-medium-regular);
	line-height: 1.55;
	color: var(--text);
	overflow-wrap: anywhere;

	& ul, & ol { margin: var(--space-2xs) 0; padding-inline-start: var(--space-l); }
	& li { margin: 2px 0; }
	& code {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 0.9em;
		background: var(--surface-3);
		border-radius: 5px;
		padding: 1px 4px;
	}
}
.notes-edit {
	min-height: 84px;
	cursor: text;
	/* Without this the browser stores a trailing space as &nbsp;, and the line
	   shortcuts ("- ", "1. ") never match their own pattern. */
	white-space: pre-wrap;

	&:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }

	/* The placeholder is drawn rather than stored: a contenteditable with
	   placeholder text *in* it would save that text the moment anything else is
	   typed beside it. */
	&.is-empty::before {
		content: attr(data-placeholder);
		color: var(--text-faint);
		pointer-events: none;
	}
}
.notes-hint {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-s);
	margin: 0;
	font: var(--font-body-xsmall-regular);

	& code {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		color: var(--text-dim);
	}
}