/*
 * Layer order (ADR 0008). `locked` comes first because, for !important declarations, the earliest
 * layer wins: its rules are all !important and beat any theme. Themes are imported into
 * `theme.room` / `theme.personal` and override `base` normally. Nothing here may be unlayered.
 */
@layer locked, base, theme.room, theme.personal;

/*
 * Rules no theme can override. Only what is listed here is locked; everything else is themeable.
 * The escape hatch also lives in the top layer (a popover), above anything a theme can draw.
 */
@layer locked {
	/* The escape hatch's ancestors: hiding one would hide the hatch with it. */
	html,
	body,
	itd-app {
		display: revert !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.itd-theme-escape {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: fixed !important;
		inset: auto 0.75rem 0.75rem auto !important;
		margin: 0 !important;
		width: auto !important;
		height: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		max-width: none !important;
		max-height: none !important;
		overflow: visible !important;
		transform: none !important;
		translate: none !important;
		scale: none !important;
		rotate: none !important;
		clip: auto !important;
		clip-path: none !important;
		mask: none !important;
		filter: none !important;
		zoom: 1 !important;
		content-visibility: visible !important;
		pointer-events: auto !important;
		cursor: pointer !important;
		z-index: 2147483647 !important;
		font:
			600 14px/1.2 system-ui,
			sans-serif !important;
		letter-spacing: normal !important;
		text-indent: 0 !important;
		text-transform: none !important;
		color: #000 !important;
		background: #fff !important;
		border: 2px solid #000 !important;
		border-radius: 6px !important;
		padding: 6px 10px !important;
		box-shadow: 0 2px 8px rgb(0 0 0 / 0.3) !important;

		&::before,
		&::after {
			content: none !important;
		}
	}
}

@layer base {
	/* Design tokens: the custom properties themes set (theming API, /theming.html). */
	:root {
		color-scheme: light dark;
		--itd-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
		--itd-bg: light-dark(#f4f3ef, #121318);
		--itd-surface: light-dark(#ffffff, #1f2026);
		--itd-fg: light-dark(#1c1d21, #ececef);
		--itd-muted: light-dark(#54585f, #aeb2bb);
		--itd-border: light-dark(#e2e0da, #3b3d48);
		--itd-accent: light-dark(#3152d6, #8aa2ff);
		--itd-accent-fg: light-dark(#ffffff, #0e1220);
		--itd-accent-soft: light-dark(#eaeefc, #232a45);
		--itd-success: light-dark(#1d7a46, #6fd69a);
		--itd-success-soft: light-dark(#e3f4ea, #1b3326);
		--itd-caution: light-dark(#7a4b00, #f2c065);
		--itd-caution-soft: light-dark(#fbf0d9, #3a2f17);
		--itd-danger: light-dark(#b42318, #ff8a80);
		/* Text on a --itd-danger background. */
		--itd-danger-fg: light-dark(#ffffff, #2a0602);
		--itd-warning: var(--itd-caution);
		/* Borders of fields: at least 3:1 against the surface. */
		--itd-outline: light-dark(#8e9097, #7c818c);
		--itd-shadow: light-dark(0 1px 2px rgb(20 20 30 / 0.06), 0 1px 2px rgb(0 0 0 / 0.4));
		--itd-shadow-raised: light-dark(0 6px 20px rgb(20 20 30 / 0.1), 0 6px 20px rgb(0 0 0 / 0.5));
		--itd-card-bg: var(--itd-surface);
		--itd-card-fg: var(--itd-fg);
		--itd-card-border: light-dark(#8c8f98, #6b707b);
		--itd-card-selected-bg: light-dark(#3152d6, #b8c4ff);
		--itd-card-selected-fg: light-dark(#ffffff, #102070);
		--itd-radius: 0.6rem;
		/* Fully rounded shapes: chips, badges, the timer, progress bars. */
		--itd-radius-pill: 999px;
		--itd-gap: 1rem;
		/* Panels (the columns and the stage) may be translucent; the surface behind dialogs,
		   menus and sheets stays opaque. */
		--itd-panel: var(--itd-surface);
		/* The dimmed page behind dialogs and bottom sheets. */
		--itd-backdrop: rgb(10 10 20 / 0.45);
		--itd-focus: var(--itd-accent);
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		font-family: var(--itd-font);
		font-size: 15px;
		line-height: 1.5;
		background: var(--itd-bg);
		color: var(--itd-fg);
		-webkit-font-smoothing: antialiased;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
		color: inherit;
	}

	/* Buttons: secondary by default, .itd-primary for the one main action, .itd-link-button for quiet ones. */
	button,
	label.itd-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.4em;
		min-height: 2.25rem;
		cursor: pointer;
		border: 1px solid var(--itd-border);
		background: var(--itd-surface);
		border-radius: var(--itd-radius);
		padding: 0.35em 0.9em;
		font-weight: 500;
		white-space: nowrap;
		transition:
			background-color 0.15s,
			border-color 0.15s,
			translate 0.15s,
			box-shadow 0.15s;

		&:hover:not(:disabled) {
			border-color: color-mix(in oklab, var(--itd-fg) 30%, var(--itd-border));
		}

		&:disabled {
			cursor: default;
			color: var(--itd-muted);
			background: color-mix(in oklab, var(--itd-muted) 8%, var(--itd-surface));
		}

		&.itd-primary {
			background: var(--itd-accent);
			color: var(--itd-accent-fg);
			border-color: transparent;
			font-weight: 600;

			&:hover:not(:disabled) {
				background: color-mix(in oklab, var(--itd-accent) 88%, black);
			}
		}

		&.large {
			min-height: 2.75rem;
			padding-inline: 1.25em;
			font-size: 1rem;
		}

		&.itd-link-button {
			border-color: transparent;
			background: none;
			color: var(--itd-accent);
			padding-inline: 0.5em;

			&:hover:not(:disabled) {
				text-decoration: underline;
				border-color: transparent;
			}
		}

		&.danger {
			color: var(--itd-danger);
		}

		&.itd-tonal {
			background: var(--itd-accent-soft);
			color: var(--itd-accent);
			border-color: transparent;
			font-weight: 600;
		}

		&.itd-chip {
			min-height: 2rem;
			padding: 0.2em 0.85em;
			border-radius: var(--itd-radius-pill);
			font-size: 0.875rem;
			background: var(--itd-surface);
			color: var(--itd-fg);
			border-color: var(--itd-border);

			&:hover:not(:disabled) {
				background: var(--itd-accent-soft);
				border-color: var(--itd-accent);
			}

			/* Selected filter chip: tonal fill and a check. */
			&[aria-pressed='true'] {
				background: var(--itd-accent-soft);
				border-color: transparent;
				color: var(--itd-accent);

				&::before {
					content: '✓';
					font-weight: 800;
				}
			}

			.itd-icon {
				width: 1rem;
				height: 1rem;
			}
		}

		&.itd-icon-button {
			width: 2.25rem;
			padding: 0;
		}

		@media (pointer: coarse) {
			min-height: 2.75rem;
		}
	}

	:focus-visible,
	/* A file picker's input is visually hidden inside its label: the label shows the focus. */
	label.itd-button:has(input:focus-visible) {
		outline: 2px solid var(--itd-focus);
		outline-offset: 2px;
	}

	.itd-icon {
		width: 1.1em;
		height: 1.1em;
		flex: none;
	}

	input,
	select,
	textarea {
		background: var(--itd-surface);
		border: 1px solid var(--itd-outline);
		border-radius: var(--itd-radius);
		padding: 0.4em 0.6em;
		min-height: 2.25rem;
		min-width: 0;

		/* Under 16px, mobile browsers zoom into a field when it gets focus. */
		@media (pointer: coarse) {
			font-size: max(16px, 1em);
		}

		&::placeholder {
			color: var(--itd-muted);
			opacity: 1;
		}
	}

	select {
		appearance: none;
		padding-right: 2rem;
		/* The chevron: two triangles in the muted color, so themes recolor it with --itd-muted. */
		background-image:
			linear-gradient(45deg, transparent 50%, var(--itd-muted) 50%),
			linear-gradient(135deg, var(--itd-muted) 50%, transparent 50%);
		background-repeat: no-repeat;
		background-position:
			right 0.95rem center,
			right 0.65rem center;
		background-size: 0.3rem 0.3rem;
		cursor: pointer;
	}

	input[type='checkbox'] {
		min-height: auto;
		width: 1.1rem;
		height: 1.1rem;
		accent-color: var(--itd-accent);
	}

	label {
		display: grid;
		gap: 0.3rem;
		font-weight: 500;

		&.checkbox {
			display: flex;
			align-items: center;
			gap: 0.5em;
		}
	}

	h1,
	h2,
	h3 {
		margin: 0;
		line-height: 1.25;
	}

	/* Panel headings: small, uppercase, muted. */
	.itd-participants > h2 {
		display: flex;
		align-items: center;
		min-height: 2.25rem;
	}

	section > h2,
	.itd-participants > h3,
	.itd-items-header > h2,
	.itd-settings-section > legend,
	.itd-settings-section > h3 {
		font-size: 0.8rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: color-mix(in oklab, var(--itd-fg) 75%, var(--itd-muted));
	}

	.itd-count {
		font-weight: 500;
		margin-left: 0.25em;
		color: var(--itd-muted);
	}

	section {
		background: var(--itd-panel);
		border: 1px solid var(--itd-border);
		border-radius: calc(var(--itd-radius) * 1.5);
		box-shadow: var(--itd-shadow);
		padding: var(--itd-gap);
		display: grid;
		gap: var(--itd-gap);
		align-content: start;
		min-width: 0;
	}

	ul,
	ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	hr {
		border: none;
		border-top: 1px solid var(--itd-border);
		margin: 0.25rem 0;
	}

	.itd-visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Pills: badges, statuses, phases. */
	.itd-badge,
	.itd-item-status,
	.itd-round-phase,
	.itd-vote-status {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		font-size: 0.8rem;
		font-weight: 600;
		line-height: 1;
		padding: 0.3em 0.6em;
		border-radius: var(--itd-radius-pill);
		background: color-mix(in oklab, var(--itd-muted) 12%, transparent);
		color: var(--itd-muted);
		white-space: nowrap;
	}

	.itd-badge[data-badge='host'] {
		color: var(--itd-fg);
		background: color-mix(in oklab, var(--itd-accent) 16%, transparent);
	}

	.itd-hint,
	small {
		color: var(--itd-muted);
		font-size: 0.875rem;
		font-weight: 400;
	}

	.itd-avatar {
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 50%;
		flex: none;
		box-shadow: 0 0 0 2px var(--itd-surface);
	}

	/* Popover menus, positioned under the button that opens them. */
	.itd-menu {
		margin: 0;
		inset: auto;
		position-area: block-end span-inline-start;
		position-try-fallbacks: flip-block, flip-inline;
		margin-block: 0.35rem;
		min-width: 12rem;
		padding: 0.35rem;
		border: 1px solid var(--itd-border);
		border-radius: var(--itd-radius);
		background: var(--itd-surface);
		color: var(--itd-fg);
		box-shadow: var(--itd-shadow-raised);

		&:popover-open {
			display: grid;
		}

		& > button,
		& > label.itd-button {
			justify-content: flex-start;
			border: none;
			background: none;
			font-weight: 450;
			width: 100%;

			&:hover:not(:disabled) {
				background: var(--itd-accent-soft);
			}
		}
	}

	#profile {
		position-anchor: --profile;
		min-width: 17rem;
		padding: 1rem;
		gap: 0.85rem;
	}

	.itd-profile-button {
		anchor-name: --profile;
		border-radius: var(--itd-radius-pill);
		padding: 0.2rem 0.6rem 0.2rem 0.2rem;
		gap: 0.5rem;

		.itd-avatar {
			width: 1.9rem;
			height: 1.9rem;
		}

		.itd-profile-name {
			max-width: 10rem;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.caret {
			width: 0.6rem;
			color: var(--itd-muted);
		}
	}

	.itd-avatar-colors {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1rem;
		margin: 0;
		padding: 0;
		border: none;

		legend {
			padding: 0;
			margin-bottom: 0.4rem;
			font-weight: 500;
		}

		/* On a line of its own, under the two pickers. */
		.default-colors {
			flex-basis: 100%;
			justify-content: flex-start;
			min-height: 2rem;
			padding-inline: 0;
		}
	}

	.color-field {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		font-weight: 450;

		input {
			width: 2.25rem;
			height: 2.25rem;
			min-height: 0;
			padding: 0.15rem;
			border-radius: 50%;
			cursor: pointer;

			&::-webkit-color-swatch-wrapper {
				padding: 0;
			}

			&::-webkit-color-swatch {
				border: none;
				border-radius: 50%;
			}

			&::-moz-color-swatch {
				border: none;
				border-radius: 50%;
			}
		}
	}

	.profile-avatar {
		display: flex;
		align-items: center;
		gap: 0.75rem;

		.itd-avatar {
			width: 2.5rem;
			height: 2.5rem;
		}
	}

	/* The avatar itself shows and hides the seed field. */
	.itd-avatar-seed-toggle {
		padding: 0.15rem;
		border-radius: var(--itd-radius-pill);
	}

	/* The seed field takes the menu's width rather than widening it; a long seed is cut off. */
	.itd-avatar-seed {
		display: grid;
		gap: 0.3rem;
		contain: inline-size;

		input {
			width: 100%;
			min-width: 0;
			font-family: ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
			font-size: 0.85rem;
		}
	}

	/* Copy link: the label (icon or text) switches to "Copied" for a moment. */
	.copy-link-label {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
	}

	.copy-link-done {
		display: none;
	}

	[data-copied] {
		.copy-link-label {
			display: none;
		}

		.copy-link-done {
			display: inline-flex;
		}
	}

	/* Start page */
	.itd-noscript {
		margin: 3rem auto 1rem;
		text-align: center;
	}

	.itd-start {
		max-width: 32rem;
		margin: clamp(2rem, 10vh, 6rem) auto 3rem;
		padding: 0 1rem;
		display: grid;
		gap: 1.25rem;
	}

	/* A fan of three cards: the start page's only decoration. */
	.itd-start-cards {
		display: flex;
		justify-content: center;
		height: 5.5rem;
		margin-bottom: 0.5rem;

		span {
			display: grid;
			place-items: center;
			width: 3.5rem;
			height: 5rem;
			margin-inline: -0.4rem;
			border: 2px solid var(--itd-card-border);
			border-radius: var(--itd-radius);
			background: var(--itd-card-bg);
			box-shadow: var(--itd-shadow-raised);
			font-size: 1.4rem;
			font-weight: 800;
			transform-origin: 50% 120%;

			&:nth-child(1) {
				rotate: -12deg;
			}

			&:nth-child(2) {
				translate: 0 -0.4rem;
				background: var(--itd-accent);
				color: var(--itd-accent-fg);
				border-color: transparent;
				z-index: 1;
			}

			&:nth-child(3) {
				rotate: 12deg;
			}
		}
	}

	.itd-start-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		h1 {
			font-size: 2rem;
			letter-spacing: -0.02em;
		}
	}

	.itd-start-tagline {
		margin: -0.5rem 0 0.5rem;
		color: var(--itd-muted);
		font-size: 1.05rem;
	}

	.itd-start-create {
		width: 100%;
		min-height: 3rem;
		font-size: 1.05rem;
	}

	/*
	 * What the app is, below the start page's tools: static in index.html, after the app, so search
	 * engines read it without JavaScript. Only on the start page; the column lines up with the tools.
	 */
	.itd-start-about {
		display: grid;
		gap: 0.75rem;
		width: min(30rem, 100% - 2rem);
		margin: 0 auto 3rem;
		line-height: 1.6;

		html[data-page='room'] & {
			display: none;
		}

		/* A headline, not a panel's label. */
		h2 {
			color: var(--itd-fg);
			font-size: 1.35rem;
			letter-spacing: -0.01em;
			line-height: 1.3;
			text-transform: none;
		}

		h3 {
			margin-top: 0.75rem;
			font-size: 1.05rem;
		}

		p {
			margin: 0;
		}

		strong {
			display: block;
		}
	}

	.itd-start-steps,
	.itd-start-features {
		display: grid;
		gap: 0.75rem;
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			padding: 0.75rem 1rem;
			border: 1px solid var(--itd-border);
			border-radius: var(--itd-radius);
			background: var(--itd-surface);
			color: var(--itd-muted);
		}

		strong {
			color: var(--itd-fg);
		}
	}

	/* The steps carry their number, so the order reads at a glance. */
	.itd-start-steps {
		counter-reset: itd-step;

		li {
			counter-increment: itd-step;

			strong::before {
				content: counter(itd-step) '. ';
				color: var(--itd-accent);
			}
		}
	}

	.itd-start-faq {
		display: grid;

		details {
			border-bottom: 1px solid var(--itd-border);
			padding: 0.6rem 0;
		}

		summary {
			cursor: pointer;
			font-weight: 600;
		}

		details p {
			margin-top: 0.4rem;
			color: var(--itd-muted);
		}
	}

	.itd-start-pick {
		display: grid;
		gap: 0.4rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--itd-border);
	}

	.itd-input-row {
		display: flex;
		gap: 0.5rem;

		input {
			flex: 1;
		}
	}

	/* A text button aligned with the column edge despite its padding. */
	.itd-start-snapshot {
		justify-self: start;
		margin-left: -0.5rem;
	}

	.itd-kept-room {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.6rem 0;
		border-top: 1px solid var(--itd-border);

		&:first-child {
			border-top: none;
			padding-top: 0;
		}

		.kept-room-text {
			flex: 1;
			display: grid;
			min-width: 0;
		}

		.itd-kept-room-name {
			font-weight: 600;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.itd-kept-room-meta {
			color: var(--itd-muted);
			font-size: 0.85rem;
		}
	}

	/* Room frame */
	.itd-room {
		padding: 1rem clamp(1rem, 2.5vw, 2rem) 3rem;
		display: grid;
		/* One column no wider than the screen, whatever the content's natural width. */
		grid-template-columns: minmax(0, 1fr);
		gap: var(--itd-gap);
		max-width: 80rem;
		margin: 0 auto;
	}

	.room-status {
		color: var(--itd-muted);
		margin: 2rem 0;
		text-align: center;
	}

	.itd-room-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		min-height: 3rem;
	}

	.itd-room-title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin-right: auto;
		min-width: 0;
	}

	.itd-room-name {
		font-size: 1.25rem;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The room's own actions sit by its name: download, (load), copy the link. Icon buttons. */
	.itd-room-title .itd-icon-button {
		width: 2.5rem;
		min-height: 2.5rem;
		flex: none;
		border-color: transparent;
		background: none;
		color: var(--itd-muted);

		&:hover:not(:disabled) {
			background: color-mix(in oklab, var(--itd-muted) 12%, transparent);
			color: var(--itd-fg);
			border-color: transparent;
		}
	}

	/* After copying, the link button briefly shows a green check. */
	.itd-room-title .itd-copy-link[data-copied] {
		color: var(--itd-success);
	}

	.profile-theme,
	.itd-leave-room {
		justify-content: flex-start;
		gap: 0.6rem;
	}

	.itd-room-actions {
		display: flex;
		align-items: center;
		gap: 0.5rem;

		& > button {
			min-height: 2.5rem;
		}

		.itd-icon-button {
			width: 2.5rem;
		}
	}

	/* The settings dialog's element must not take a grid row (and a gap) of its own. */
	.itd-room > itd-settings-dialog {
		display: contents;
	}

	.itd-notices {
		display: grid;
		gap: 0.5rem;

		&:empty {
			display: none;
		}

		& > p {
			margin: 0;
			padding: 0.6rem 0.9rem;
			border-radius: var(--itd-radius);
		}

		/* An error stays until dismissed or replaced. */
		& > .itd-error {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 0.25rem 1rem;
		}

		.itd-dismiss-error {
			min-height: 0;
			padding: 0;
			color: inherit;
			text-decoration: underline;
		}
	}

	.itd-warning,
	.itd-error {
		color: var(--itd-caution);
		background: var(--itd-caution-soft);
	}

	.itd-error {
		color: var(--itd-danger);
	}

	.itd-succession-note {
		color: var(--itd-fg);
		background: var(--itd-accent-soft);
	}

	.itd-name-dialog {
		width: min(28rem, 100% - 2rem);
		padding: 0;
		border: 1px solid var(--itd-border);
		border-radius: calc(var(--itd-radius) * 1.5);
		background: var(--itd-surface);
		color: var(--itd-fg);
		box-shadow: var(--itd-shadow-raised);

		&::backdrop {
			background: var(--itd-backdrop);
		}
	}

	.itd-name-prompt {
		display: grid;
		gap: 0.75rem;
		padding: 1.5rem;

		.itd-dialog-actions {
			display: flex;
			justify-content: end;
		}

		input {
			min-height: 3rem;
		}

		label {
			flex: 1 1 100%;
			min-width: 0;
		}

		input {
			width: 100%;
		}

		.itd-name-prompt-title {
			font-size: 1.5rem;
			font-weight: 650;
			text-wrap: balance;
		}

		.itd-name-prompt-hint {
			margin: 0;
			color: var(--itd-muted);
		}

		.itd-name-prompt-hint {
			width: 100%;
		}
	}

	.itd-room-layout {
		display: grid;
		gap: var(--itd-gap);
		/* Item list and participants: the same width, 256px; the stage takes the rest. */
		grid-template-columns: 16rem minmax(0, 1fr) 16rem;
		grid-template-areas: 'items round people';
		align-items: stretch;

		.itd-items-sheet {
			grid-area: items;
		}

		itd-round-panel {
			grid-area: round;
		}

		.itd-people-sheet {
			grid-area: people;
		}

		/* Without room for three columns, the stage is the only one; the lists become sheets. */
		@media (width < 64rem) {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: 'round';
		}
	}

	itd-item-list,
	itd-round-panel {
		display: block;
		min-width: 0;
	}

	/* Desktop: the room fills the screen height and each column scrolls on its own. */
	@media (width >= 64rem) {
		/* Header, notices if any, then the layout taking the rest of the screen. */
		.itd-room {
			height: 100dvh;
			grid-template-rows: auto minmax(0, 1fr);
			padding-bottom: clamp(1rem, 2.5vw, 2rem);

			&:has(> .itd-notices) {
				grid-template-rows: auto auto minmax(0, 1fr);
			}
		}

		.itd-room-layout {
			min-height: 0;
		}

		.itd-sheet,
		itd-item-list,
		itd-round-panel {
			min-height: 0;
			height: 100%;
		}

		.itd-sheet > section,
		itd-item-list > section,
		.itd-round {
			height: 100%;
			overflow: auto;
		}

		/*
		 * When the stage scrolls, its bottom band stays in view (below three columns it sticks to the
		 * screen instead). The offset is the stage's padding, which sticking measures from.
		 */
		.itd-action-band {
			position: sticky;
			bottom: calc(-1 * clamp(1.25rem, 2.5vw, 2rem));
			z-index: 5;
		}
	}

	/*
	 * The item list and the participants are "sheets": ordinary columns while the layout has three,
	 * bottom sheets opened by the floating buttons once it collapses.
	 */
	@media (width >= 64rem) {
		.itd-sheet {
			display: block;
			position: static;
			inset: auto;
			width: auto;
			height: auto;
			max-height: none;
			margin: 0;
			padding: 0;
			border: none;
			background: none;
			color: inherit;
			overflow: visible;
		}
	}

	/* The drag handle: a full-width strip at the top of a sheet, drawn as a short bar. */
	.itd-sheet-handle {
		display: none;
		width: 100%;
		min-height: 2rem;
		padding: 0;
		border: none;
		border-radius: 0;
		background: none;
		cursor: grab;
		touch-action: none;

		&::before {
			content: '';
			display: block;
			width: 2rem;
			height: 0.25rem;
			margin: 0.25rem auto 0;
			border-radius: var(--itd-radius-pill);
			background: color-mix(in oklab, var(--itd-muted) 55%, transparent);
		}

		&:hover:not(:disabled) {
			border-color: transparent;
		}

		&:active {
			cursor: grabbing;
		}

		.itd-sheet:popover-open > & {
			display: block;
			position: sticky;
			top: 0;
			z-index: 1;
			background: var(--itd-surface);
		}
	}

	/* Only once the layout collapses (see below). */
	.itd-sheet-buttons {
		position: fixed;
		inset: auto 1rem calc(1rem + env(safe-area-inset-bottom)) 1rem;
		display: none;
		justify-content: space-between;
		pointer-events: none;
		z-index: 10;
	}

	/* Above the escape hatch, which sits bottom right whenever a theme is active. */
	:root:is([data-room-theme], [data-personal-theme]) .itd-sheet-buttons {
		bottom: calc(4rem + env(safe-area-inset-bottom));
	}

	.itd-sheet-badge {
		min-width: 1.5rem;
		padding: 0.1rem 0.45rem;
		border-radius: var(--itd-radius-pill);
		background: var(--itd-accent);
		color: var(--itd-accent-fg);
		font-size: 0.8rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	/* An open sheet covers the buttons' job; they make way. */
	:root:has(.itd-sheet:popover-open) .itd-sheet-buttons {
		visibility: hidden;
	}

	.itd-sheet-button {
		pointer-events: auto;
		min-height: 3.5rem;
		padding: 0 1.25rem 0 1rem;
		gap: 0.6rem;
		border-radius: 1rem;
		border-color: color-mix(in oklab, var(--itd-border) 60%, transparent);
		background: color-mix(in oklab, var(--itd-accent) 14%, var(--itd-surface));
		color: var(--itd-fg);
		font-weight: 600;
		box-shadow: var(--itd-shadow-raised);

		.itd-icon {
			width: 1.3rem;
			height: 1.3rem;
			color: var(--itd-accent);
		}
	}

	@media (width < 64rem) {
		/*
		 * Positioning and transitions sit on the sheet itself, not only while it is open, so that
		 * closing animates too: the sheet slides down while the backdrop fades out.
		 */
		.itd-sheet {
			position: fixed;
			inset: auto 0 0;
			/* Full width on phones; on wider screens at most 40rem, centered. */
			width: min(100%, 40rem);
			max-width: none;
			margin-inline: auto;
			max-height: 85dvh;
			margin-block: 0;
			padding: 0 0 calc(1rem + env(safe-area-inset-bottom));
			border: none;
			border-top: 1px solid var(--itd-border);
			border-radius: 1.5rem 1.5rem 0 0;
			background: var(--itd-surface);
			color: var(--itd-fg);
			box-shadow: var(--itd-shadow-raised);
			overflow: auto;
			overscroll-behavior: contain;
			translate: 0 100%;
			transition:
				translate 0.25s cubic-bezier(0.2, 0, 0, 1),
				overlay 0.25s allow-discrete,
				display 0.25s allow-discrete;

			&::backdrop {
				background: rgb(0 0 0 / 0);
				transition:
					background-color 0.25s,
					overlay 0.25s allow-discrete,
					display 0.25s allow-discrete;
			}

			section {
				border: none;
				box-shadow: none;
				background: none;
			}
		}

		.itd-sheet:popover-open {
			translate: 0 0;

			/* --sheet-open goes from 1 to 0 while the sheet is dragged down (sheet-drag.ts). */
			&::backdrop {
				background: color-mix(
					in srgb,
					var(--itd-backdrop) calc(var(--sheet-open, 1) * 100%),
					transparent
				);
			}

			/* While a finger drags it, the sheet and its backdrop follow directly instead of easing. */
			&[data-dragging],
			&[data-dragging]::backdrop {
				transition: none;
			}

			@starting-style {
				translate: 0 100%;

				&::backdrop {
					background: rgb(0 0 0 / 0);
				}
			}
		}

		.itd-sheet-buttons {
			display: flex;
		}

		/* Room for the floating buttons under the stage. */
		.itd-room {
			padding-bottom: 6rem;
		}

		.itd-round {
			min-height: calc(100dvh - 12rem);
		}
	}

	/* Items */
	.itd-items-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.25rem;

		select {
			min-height: 2rem;
			font-size: 0.85rem;
			padding-block: 0.2em;
		}
	}

	.items-empty {
		color: var(--itd-muted);
		margin: 0;
	}

	.itd-item-list {
		display: grid;
		gap: 0.15rem;
		margin-inline: -0.5rem;
	}

	.itd-item {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		padding: 0.35rem 0.5rem 0.35rem 0.75rem;
		border-radius: var(--itd-radius);
		border-left: 3px solid transparent;
		background: transparent;

		/* Room for the always-visible menu button. */
		&:has(.itd-item-actions) {
			padding-right: 3.5rem;
		}

		&:hover {
			background: color-mix(in oklab, var(--itd-muted) 8%, transparent);
		}

		&[data-active='true'] {
			background: color-mix(in oklab, var(--itd-accent) 12%, transparent);
			border-left-color: var(--itd-accent);
		}

		&[data-status='rejected'] .itd-item-main {
			opacity: 0.75;

			.itd-item-text {
				text-decoration: line-through;
			}
		}

		flex-wrap: wrap;

		.itd-item-main {
			flex: 1;
			display: grid;
			justify-items: start;
			gap: 0.2rem;
			min-width: 0;
		}

		.itd-item-text {
			overflow-wrap: anywhere;
		}

		.itd-item-meta {
			display: flex;
			align-items: center;
			gap: 0.35rem;
		}

		.itd-item-estimate {
			min-width: 1.75rem;
			height: 1.75rem;
			padding: 0 0.4rem;
			display: inline-grid;
			place-items: center;
			border-radius: var(--itd-radius-pill);
			background: var(--itd-success-soft);
			color: var(--itd-success);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
		}

		/*
		 * Row actions float over the row's end, in the room its padding keeps free, so they never
		 * squeeze the title. No background of their own: the row's shows through, active or not.
		 */
		.itd-item-actions {
			position: absolute;
			right: 0.35rem;
			top: 50%;
			translate: 0 -50%;
			display: flex;
			align-items: center;
			gap: 0.15rem;
		}

		/* Clicking the item (not its grip or menu) makes it active: the text area is one button. */
		.itd-item-select {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 0.5rem;
			min-width: 0;
			min-height: 2.25rem;
			padding: 0;
			border: none;
			background: none;
			font-weight: inherit;
			text-align: left;
			white-space: normal;

			&:hover:not(:disabled) {
				border-color: transparent;
			}

			&[aria-current] {
				cursor: default;
			}
		}

		.itd-item-menu-button {
			width: 2.5rem;
			min-height: 2.5rem;
			border-color: transparent;
			background: none;
		}

		/* The menu button is always faintly there, fully on hover and focus. */
		@media (hover: hover) {
			.itd-item-menu-button {
				color: var(--itd-muted);
			}

			&:hover,
			&:focus-within,
			&:has(:popover-open) {
				.itd-item-menu-button {
					color: var(--itd-fg);
					background: color-mix(in oklab, var(--itd-muted) 14%, transparent);
				}
			}
		}

		/* Touch screens: no hover, so the actions sit in the row, always visible. */
		@media (hover: none) {
			&:has(.itd-item-actions) {
				padding-right: 0.5rem;
			}

			.itd-item-actions {
				position: static;
				translate: none;
			}
		}

		.item-edit {
			display: flex;
			gap: 0.35rem;
			width: 100%;

			input {
				flex: 1;
			}
		}
	}

	/* The grip at a row's start: drag it, or focus it and use the arrow keys. */
	.itd-item-drag-handle {
		flex: none;
		width: 1.5rem;
		min-height: 2rem;
		margin-left: -0.5rem;
		padding: 0;
		border-color: transparent;
		background: none;
		color: var(--itd-muted);
		cursor: grab;
		touch-action: none;

		&:hover:not(:disabled) {
			border-color: transparent;
			color: var(--itd-fg);
		}

		.itd-icon {
			width: 1.1rem;
			height: 1.1rem;
		}
	}

	.itd-item-list[data-dragging] {
		cursor: grabbing;
		user-select: none;

		.itd-item:not([data-dragging]) {
			transition: translate 0.15s ease;
		}
	}

	/*
	 * Reduced motion: nothing slides. Colors may still fade, and keyframe animations only run under
	 * prefers-reduced-motion: no-preference anyway.
	 */
	@media (prefers-reduced-motion: reduce) {
		button,
		label.itd-button {
			transition:
				background-color 0.15s,
				border-color 0.15s,
				box-shadow 0.15s;
		}

		.itd-sheet {
			transition:
				overlay 0.25s allow-discrete,
				display 0.25s allow-discrete;
		}

		.itd-item-list[data-dragging] .itd-item:not([data-dragging]) {
			transition: none;
		}
	}

	.itd-item[data-dragging] {
		position: relative;
		z-index: 2;
		background: var(--itd-surface);
		box-shadow: var(--itd-shadow-raised);

		.itd-item-drag-handle {
			cursor: grabbing;
		}
	}

	.itd-item-status {
		&[data-status='estimated'] {
			background: var(--itd-success-soft);
			color: var(--itd-success);
		}

		&[data-status='incomplete'] {
			background: var(--itd-caution-soft);
			color: var(--itd-caution);

			&::before {
				content: '!';
				font-weight: 800;
			}
		}

		&[data-status='rejected']::before {
			content: '✕';
		}
	}

	/* The estimate badge says it all for estimated items that have one. */
	.itd-item[data-status='estimated']:has(.itd-item-estimate) .itd-item-status {
		display: none;
	}

	/* Incomplete and Rejected items keep their final estimate, faded: it no longer counts. */
	.itd-item:is([data-status='incomplete'], [data-status='rejected']) .itd-item-estimate {
		opacity: 0.5;
	}

	.itd-items-total {
		margin: 0;
		padding-top: 0.75rem;
		border-top: 1px solid var(--itd-border);
		color: var(--itd-muted);
		font-size: 0.875rem;
	}

	.itd-add-items-panel {
		summary {
			display: inline-flex;
			align-items: center;
			min-height: 2.5rem;
			padding: 0 0.75rem;
			margin-left: -0.75rem;
			border-radius: var(--itd-radius);
			cursor: pointer;
			color: var(--itd-accent);
			font-weight: 600;
			list-style: none;

			&:hover {
				background: color-mix(in oklab, var(--itd-accent) 8%, transparent);
			}

			&::before {
				content: '+';
				margin-right: 0.4rem;
				font-size: 1.2rem;
				line-height: 1;
			}

			&::-webkit-details-marker {
				display: none;
			}
		}

		&[open] summary {
			margin-bottom: 0.6rem;
		}
	}

	.itd-add-items {
		display: grid;
		gap: 0.5rem;

		label {
			font-size: 0.85rem;
			color: var(--itd-muted);
		}

		textarea {
			resize: vertical;
		}

		button {
			justify-self: start;
		}
	}

	/* The stage */
	/* A column, so that the final-estimate bar can sit at the bottom of a full-height stage. */
	.itd-round {
		display: flex;
		flex-direction: column;
		padding: clamp(1.25rem, 2.5vw, 2rem);
		gap: 1.5rem;
		box-shadow: var(--itd-shadow-raised);
	}

	.itd-round-header {
		display: grid;
		justify-items: start;
		gap: 0.4rem;
		min-width: 0;
	}

	.itd-round-item {
		font-size: clamp(1.4rem, 2.2vw, 1.75rem);
		font-weight: 700;
		letter-spacing: -0.01em;
		overflow-wrap: anywhere;
	}

	.itd-round-hint {
		margin: 0;
		color: var(--itd-muted);
	}

	.itd-round-phase {
		&::before {
			content: '';
			width: 0.5em;
			height: 0.5em;
			border-radius: 50%;
			background: currentColor;
		}

		/* Phases are neutral; green and amber belong to the verdict. The dot shows activity. */
		color: var(--itd-fg);

		&[data-phase='voting']::before,
		&[data-phase='revealing']::before {
			color: var(--itd-accent);
		}
	}

	.itd-round[data-phase='none'] {
		justify-content: center;
	}

	.itd-round-empty {
		display: grid;
		justify-items: center;
		text-align: center;
		gap: 0.5rem;
		padding: 1rem;

		& > .itd-icon {
			width: 2.5rem;
			height: 2.5rem;
			color: var(--itd-muted);
		}

		h2 {
			font-size: 1.15rem;
		}

		p {
			margin: 0 0 0.5rem;
			color: var(--itd-muted);
			max-width: 28rem;
		}
	}

	.itd-start-voting {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;

		.itd-primary.large {
			min-height: 3rem;
			padding-inline: 1.75em;
		}
	}

	.itd-timer-field {
		display: grid;
		gap: 0.3rem;

		label {
			display: block;
		}
	}

	.itd-timer-choices {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
	}

	.input-with-suffix {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
		border: 1px solid var(--itd-outline);
		border-radius: var(--itd-radius);
		background: var(--itd-surface);

		input {
			border: none;
			width: 7.5rem;
			background: none;
		}

		.suffix {
			padding-right: 0.6rem;
			color: var(--itd-muted);
			font-weight: 400;
		}

		&:focus-within {
			outline: 2px solid var(--itd-focus);
			outline-offset: 2px;

			input {
				outline: none;
			}
		}
	}

	.itd-last-round {
		summary {
			cursor: pointer;
			color: var(--itd-muted);
			font-weight: 600;
			margin-bottom: 0.75rem;
		}
	}

	/* Voting: a fixed-height status row (progress or countdown), so the cards don't jump. */
	/* A fixed height whether it shows progress or the countdown, so the cards never move. */
	.itd-round-status {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		height: 6.5rem;
	}

	.itd-progress {
		display: grid;
		gap: 0.5rem;
	}

	.itd-progress-text {
		font-weight: 600;
	}

	/* A linear progress indicator: --done is the finished fraction. */
	.itd-progress-line {
		display: block;
		height: 4px;
		border-radius: var(--itd-radius-pill);
		background:
			linear-gradient(to right, var(--itd-accent) calc(var(--done, 0) * 100%), transparent 0),
			color-mix(in oklab, var(--itd-muted) 18%, transparent);
	}

	.itd-progress .itd-progress-line {
		width: min(16rem, 100%);
	}

	.itd-items-progress {
		display: grid;
		gap: 0.4rem;
		padding-top: 0.75rem;
		border-top: 1px solid var(--itd-border);

		.itd-items-total {
			padding-top: 0;
			border-top: none;
		}

		.itd-progress-line {
			background:
				linear-gradient(to right, var(--itd-success) calc(var(--done, 0) * 100%), transparent 0),
				color-mix(in oklab, var(--itd-muted) 18%, transparent);
		}
	}

	.itd-voter-avatars {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.itd-voter-avatar {
		position: relative;
		display: flex;

		.itd-avatar {
			width: 2.5rem;
			height: 2.5rem;
		}

		&[data-voted='false'] {
			.itd-avatar {
				opacity: 0.75;
			}

			&::after {
				content: '';
				position: absolute;
				inset: -3px;
				border-radius: 50%;
				border: 2px dashed var(--itd-muted);
			}
		}

		&[data-voted='true'] .itd-avatar {
			box-shadow:
				0 0 0 2px var(--itd-surface),
				0 0 0 4px var(--itd-success);
		}

		&[data-voted='true']::after {
			content: '✓';
			position: absolute;
			right: -0.2rem;
			bottom: -0.2rem;
			display: grid;
			place-items: center;
			width: 1.05rem;
			height: 1.05rem;
			border-radius: 50%;
			border: 2px solid var(--itd-surface);
			background: var(--itd-success);
			color: var(--itd-surface);
			font-size: 0.6rem;
			font-weight: 800;
		}
	}

	/* The countdown: its own band, label above a big number, so it can't be mistaken for a vote. */
	.itd-countdown {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		width: 100%;
		margin: 0;
		padding: 0.5rem;
		border-radius: var(--itd-radius);
		background: color-mix(in oklab, var(--itd-muted) 8%, transparent);
		color: var(--itd-muted);
		font-size: 0.85rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	/* Neutral, inside a ring: it must not look like a card or a vote. */
	.itd-countdown-number {
		display: grid;
		place-items: center;
		width: 4.5rem;
		height: 4.5rem;
		border-radius: 50%;
		border: 4px solid color-mix(in oklab, var(--itd-accent) 55%, transparent);
		color: var(--itd-fg);
		font-size: 2.5rem;
		font-weight: 800;
		letter-spacing: 0;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	/* During the countdown the cards stay readable and usable; only their frames recede. */
	.itd-round[data-counting-down='true'] .itd-card:not([data-selected='true']) {
		border-color: color-mix(in oklab, var(--itd-card-border) 65%, transparent);
		box-shadow: none;
	}

	@media (prefers-reduced-motion: no-preference) {
		.itd-countdown-number {
			animation: itd-tick 1s ease-out infinite;
		}
	}

	@keyframes itd-tick {
		from {
			scale: 1.25;
			opacity: 0.4;
		}

		30% {
			scale: 1;
			opacity: 1;
		}
	}

	.itd-timer {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		margin: 0;
		padding: 0.35rem 0.85rem;
		border-radius: var(--itd-radius-pill);
		background: color-mix(in oklab, var(--itd-muted) 9%, transparent);
		font-variant-numeric: tabular-nums;
		font-size: 1.1rem;
		font-weight: 650;

		&[data-ending='true'],
		&[data-expired='true'] {
			color: var(--itd-caution);
			background: var(--itd-caution-soft);
		}
	}

	.itd-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(4.25rem, 5.5rem));
		justify-content: center;
		gap: 0.6rem;
	}

	.itd-card {
		position: relative;
		aspect-ratio: 5 / 7;
		height: auto;
		font-size: 1.5rem;
		font-weight: 700;
		background: var(--itd-card-bg);
		color: var(--itd-card-fg);
		border: 2px solid var(--itd-card-border);
		border-radius: var(--itd-radius);
		box-shadow: var(--itd-shadow);

		&:hover:not(:disabled) {
			translate: 0 -0.15rem;
			border-color: var(--itd-accent);
		}

		&[data-selected='true'] {
			background: var(--itd-card-selected-bg);
			color: var(--itd-card-selected-fg);
			border-color: transparent;
			translate: 0 -0.4rem;
			box-shadow:
				0 0 0 3px color-mix(in oklab, var(--itd-accent) 30%, transparent),
				0 10px 20px color-mix(in oklab, var(--itd-accent) 30%, transparent);

			&::after {
				content: '✓';
				position: absolute;
				top: 0.25rem;
				right: 0.35rem;
				font-size: 1rem;
				font-weight: 800;
			}
		}
	}

	/* Under the cards and centered like them: the text answer and "Withdraw". */
	.itd-voting-actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: end;
		gap: 0.75rem;

		&:empty {
			display: none;
		}
	}

	.itd-text-answer {
		display: flex;
		align-items: end;
		gap: 0.5rem;
	}

	/* The host's one action while voting: a primary button, at the end of the band. */
	.itd-reveal-now {
		margin-left: auto;
		min-height: 2.5rem;
	}

	/* The reveal */
	/*
	 * The reveal fills the stage: the vote cards centered, in both directions, above the statistics
	 * and the verdict at the bottom (above the band).
	 */
	.itd-results {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.itd-vote-voter .itd-avatar {
		width: 1.4rem;
		height: 1.4rem;
		box-shadow: none;
	}

	.itd-round[data-phase='revealed'] .itd-results {
		flex: 1;

		.itd-votes {
			margin-block: auto;
		}
	}

	.itd-votes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		padding: 0.5rem 0;
	}

	.itd-vote {
		display: grid;
		justify-items: center;
		align-content: start;
		gap: 0.3rem;
		width: clamp(6rem, 11vw, 9rem);
		perspective: 40rem;

		.itd-vote-value {
			display: grid;
			place-items: center;
			width: 100%;
			aspect-ratio: 5 / 7;
			padding: 0.25rem;
			border: 2px solid var(--itd-card-border);
			border-radius: var(--itd-radius);
			background: var(--itd-card-bg);
			color: var(--itd-card-fg);
			font-size: clamp(2rem, 3.6vw, 3.25rem);
			font-weight: 750;
			box-shadow: var(--itd-shadow-raised);
			overflow-wrap: anywhere;
			text-align: center;
			line-height: 1.1;
		}

		/* A text answer in small print; one that is a number shows as large as the cards. */
		&[data-kind='text']:not([data-number]) .itd-vote-value {
			font-size: 0.85rem;
			font-weight: 600;
		}

		&[data-extreme='min'] .itd-vote-value {
			border-color: var(--itd-accent);
		}

		&[data-extreme='max'] .itd-vote-value {
			border-color: var(--itd-warning);
		}

		.itd-vote-extreme {
			font-size: 0.8rem;
			font-weight: 650;
			padding: 0.15em 0.5em;
			border-radius: var(--itd-radius-pill);
			background: var(--itd-accent-soft);
			color: var(--itd-accent);
		}

		&[data-extreme='max'] .itd-vote-extreme {
			background: var(--itd-caution-soft);
			color: var(--itd-caution);
		}

		.itd-vote-voter {
			display: inline-flex;
			align-items: center;
			gap: 0.35rem;
			font-size: 0.95rem;
			color: var(--itd-muted);
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.itd-results[data-animate='true'] .itd-vote-value {
			animation: itd-deal 0.45s backwards cubic-bezier(0.2, 0.7, 0.3, 1);
			animation-delay: calc(var(--i) * 70ms);
		}
	}

	@keyframes itd-deal {
		from {
			opacity: 0;
			translate: 0 1rem;
			rotate: y 180deg;
		}
	}

	/* The verdict: a tonal banner, icon and text left-aligned like the rest of the stage. */
	.itd-verdict {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		padding: 0.9rem 1.1rem;
		border-radius: var(--itd-radius);
		color: var(--itd-fg);
		background: color-mix(in oklab, var(--itd-muted) 9%, transparent);

		.itd-icon {
			width: 1.4rem;
			height: 1.4rem;
			margin-top: 0.1rem;
		}

		.itd-verdict-text {
			display: grid;
			gap: 0.1rem;

			strong {
				font-size: 1.15rem;
				font-weight: 650;
			}

			span {
				color: var(--itd-muted);
			}
		}

		&[data-verdict='consensus'] {
			background: var(--itd-success-soft);

			.itd-icon,
			strong {
				color: var(--itd-success);
			}
		}

		&[data-verdict='wide'] {
			background: var(--itd-caution-soft);

			.itd-icon,
			strong {
				color: var(--itd-caution);
			}
		}
	}

	.itd-results:has(.itd-verdict[data-verdict='consensus']) .itd-vote-value {
		border-color: var(--itd-success);
		box-shadow: 0 0 0 4px var(--itd-success-soft);
	}

	/*
	 * Consensus: the cards lie in one untidy pile, the last on top, each turned and shifted a little:
	 * at random where the browser has random(), so no two piles look alike, otherwise by its place
	 * (--i). Who voted what no longer matters; their names stay for screen readers.
	 */
	/*
	 * The consensus message takes no room: it floats just above the pile, centered (at the top of the
	 * results where anchor positioning isn't supported).
	 */
	.itd-results:has(.itd-verdict[data-verdict='consensus']) {
		position: relative;
		anchor-scope: --itd-pile;

		.itd-verdict[data-verdict='consensus'] {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 50%;
			translate: -50% 0;
			width: max-content;
			max-width: 100%;

			@supports (anchor-name: --itd-pile) {
				position-anchor: --itd-pile;
				top: auto;
				/* No higher than the top of the results: on a phone, over the pile's margin. */
				bottom: min(anchor(top), 100% - 3.5rem);
			}
		}
	}

	.itd-results:has(.itd-verdict[data-verdict='consensus']) .itd-votes {
		anchor-name: --itd-pile;
		display: grid;
		justify-content: center;
		padding-block: 1.5rem;

		.itd-vote {
			grid-area: 1 / 1;
			rotate: calc((mod(var(--i) * 7 + 3, 11) - 5) * 1.6deg);
			translate: calc((mod(var(--i) * 5 + 2, 9) - 4) * 0.3rem)
				calc((mod(var(--i) * 3 + 1, 7) - 3) * 0.2rem);

			@supports (rotate: random(-1deg, 1deg)) {
				rotate: random(-9deg, 9deg);
				translate: random(-1.2rem, 1.2rem) random(-0.6rem, 0.6rem);
			}
		}

		.itd-vote-voter {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.itd-results[data-animate='true'] .itd-verdict[data-verdict='consensus'] {
			animation: itd-celebrate 0.6s 0.4s backwards cubic-bezier(0.3, 1.6, 0.5, 1);
		}
	}

	/* The consensus message pops up as a whole. */
	@keyframes itd-celebrate {
		from {
			opacity: 0;
			scale: 0.4;
		}
	}

	/* The numbers as four tiles under the cards: label, value, and for min and max who voted it. */
	.itd-stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.6rem;
		margin: 0;

		@media (width < 30rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.itd-stat {
			display: grid;
			align-content: start;
			justify-items: center;
			text-align: center;
			gap: 0.15rem;
			padding: 0.65rem 0.9rem;
			border-radius: var(--itd-radius);
			background: color-mix(in oklab, var(--itd-muted) 7%, transparent);
		}

		dt {
			font-size: 0.8rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: var(--itd-muted);
		}

		dd {
			margin: 0;
			font-size: 1.5rem;
			font-weight: 750;
			font-variant-numeric: tabular-nums;
			line-height: 1.2;

			small {
				display: block;
				font-size: 0.875rem;
				font-weight: 500;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	/* The host's next step after a reveal */
	/* The host's next step, in the same place in every phase: a band at the bottom of the stage. */
	.itd-action-band {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: 0.75rem;
		/* auto on top: the bar sits at the bottom of a full-height stage. */
		margin: auto calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) calc(-1 * clamp(1.25rem, 2.5vw, 2rem));
		padding: 1rem clamp(1.25rem, 2.5vw, 2rem);
		border-top: 1px solid var(--itd-border);
		border-radius: 0 0 calc(var(--itd-radius) * 1.5) calc(var(--itd-radius) * 1.5);
		background: var(--itd-accent-soft);
	}

	/*
	 * The final-estimate band, as a grid: label, hint and the secondary actions (Use, Vote again)
	 * on the left, the value as big as a card's, then Save. The form is display: contents so its
	 * fields join the grid. Once saved, the value itself is the button to change it.
	 */
	/* Its element steps aside, so the band is the stage's own child: pushed down, and able to stick. */
	itd-estimate-band {
		display: contents;
	}

	.itd-final-estimate-band {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: 'text value primary';
		align-items: center;
		gap: 0.5rem 1.25rem;

		&[data-state='saved'] {
			background: var(--itd-success-soft);
		}
	}

	.itd-final-estimate {
		display: contents;
	}

	.itd-estimate-text {
		grid-area: text;
		display: grid;
		gap: 0.2rem;
		min-width: 0;
	}

	.itd-estimate-input,
	.itd-estimate-saved-value {
		grid-area: value;
	}

	.itd-save-estimate {
		grid-area: primary;

		/* Keeps the saved value where the field will be when switching to editing. */
		&[data-placeholder] {
			visibility: hidden;
		}
	}

	/* Use the suggestion, Vote again (or its confirmation): small, under the hint. */
	.itd-estimate-links {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25rem 1rem;
		margin-top: 0.25rem;

		& > button {
			min-height: 2.25rem;
			padding-inline: 0.5rem;
			margin-left: -0.5rem;
			border-color: transparent;
			background: none;
		}

		.itd-use-suggestion {
			color: var(--itd-accent);

			&:hover:not(:disabled) {
				background: color-mix(in oklab, var(--itd-accent) 8%, transparent);
				border-color: transparent;
			}
		}

		&:empty {
			display: none;
		}
	}

	/*
	 * The saved value is the button to change it: an outline appears on hover and focus. It has the
	 * input's size, so the value doesn't move between saved and editing.
	 */
	.itd-estimate-saved-value {
		width: 8rem;
		height: 5.5rem;
		padding: 0.25rem;
		border: 2px solid transparent;
		border-radius: calc(var(--itd-radius) * 1.5);
		background: none;

		&:hover:not(:disabled),
		&:focus-visible {
			border-color: var(--itd-outline);
			background: color-mix(in oklab, var(--itd-surface) 60%, transparent);
		}

		&:focus-visible {
			border-color: var(--itd-focus);
			outline: none;
		}
	}

	.itd-estimate-label {
		display: block;
		font-size: 0.8rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: color-mix(in oklab, var(--itd-fg) 75%, var(--itd-muted));
	}

	.itd-estimate-hint {
		color: var(--itd-muted);
	}

	.itd-estimate-input {
		width: 8rem;
		height: 5.5rem;
		padding: 0.25rem;
		text-align: center;
		font-size: 2.5rem;
		font-weight: 750;
		font-variant-numeric: tabular-nums;
		background: var(--itd-card-bg);
		color: var(--itd-card-fg);
		border: 2px solid var(--itd-outline);
		border-radius: calc(var(--itd-radius) * 1.5);

		&:focus-visible {
			border-color: var(--itd-focus);
			outline-offset: 1px;
		}
	}

	.itd-save-estimate {
		min-height: 3rem;
		padding-inline: 1.5rem;
		font-size: 1rem;
	}

	.itd-estimate-saved-value {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--itd-success);

		.itd-estimate-value {
			font-size: 2.5rem;
			font-weight: 750;
			line-height: 1;
			color: var(--itd-fg);
			font-variant-numeric: tabular-nums;
		}
	}

	/* Vote again discards the revealed votes: a quiet red text button that asks first. */
	.itd-vote-again {
		border-color: transparent;
		background: none;
		color: var(--itd-danger);

		&:hover:not(:disabled) {
			background: color-mix(in oklab, var(--itd-danger) 8%, transparent);
			border-color: transparent;
		}
	}

	.itd-revote-confirm {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
		font-weight: 600;

		button {
			min-height: 2.25rem;
		}

		.itd-discard-votes {
			background: var(--itd-danger);
			color: var(--itd-danger-fg);
			border-color: transparent;
		}
	}

	/* Below three columns the band sticks to the bottom of the screen, above the floating buttons. */
	@media (width < 64rem) {
		.itd-action-band {
			position: sticky;
			bottom: calc(4.75rem + env(safe-area-inset-bottom));
			z-index: 5;
			border-radius: calc(var(--itd-radius) * 1.5);
			box-shadow: var(--itd-shadow-raised);
		}
	}

	/* Phones: label on top, then value and Save, then Use and Vote again. */
	@media (width < 40rem) {
		.itd-final-estimate-band {
			grid-template-columns: minmax(0, 1fr) auto;
			grid-template-areas:
				'text text'
				'value primary';
			gap: 0.5rem 0.75rem;
		}

		.itd-estimate-input,
		.itd-estimate-saved-value {
			width: 100%;
			height: 4rem;
			font-size: 2rem;
		}

		.itd-estimate-saved-value .itd-estimate-value {
			font-size: 2rem;
		}
	}

	.itd-final-estimate-value {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin: 0;
		padding: 0.75rem 1rem;
		border-radius: var(--itd-radius);
		background: var(--itd-success-soft);
		color: var(--itd-success);
		font-weight: 600;

		strong {
			font-size: 1.5rem;
		}
	}

	/* Incomplete or Rejected: the estimate is kept, not decided, so it is shown faded. */
	.itd-final-estimate-value:is([data-status='incomplete'], [data-status='rejected']) {
		background: transparent;
		color: var(--itd-muted);

		strong {
			opacity: 0.7;
		}
	}

	/* Participants */
	.itd-participants ul {
		display: grid;
		gap: 0.15rem;
	}

	.itd-participant {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) 4.5rem;
		align-items: center;
		gap: 0.6rem;
		min-height: 2.75rem;

		.itd-participant-info {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.15rem 0.4rem;
			min-width: 0;
		}

		.itd-participant-badges {
			display: flex;
			flex-wrap: wrap;
			gap: 0.25rem;

			&:empty {
				display: none;
			}
		}

		.itd-you-marker {
			color: var(--itd-muted);
			font-weight: 400;
		}

		.itd-vote-status-cell {
			justify-self: end;
		}

		/* Disconnected: the avatar fades, the name stays readable in the muted color. */
		&[data-connected='false'] {
			color: var(--itd-muted);

			.itd-avatar {
				opacity: 0.45;
				filter: grayscale(1);
			}
		}

		/* Names wrap rather than being cut; the host badge moves to the next line if needed. */
		.itd-participant-name {
			min-width: 0;
			overflow-wrap: anywhere;
		}

		.itd-vote-status {
			background: none;
			padding-inline: 0;
			font-size: 0.875rem;

			&::before {
				content: '';
				width: 0.6em;
				height: 0.6em;
				border-radius: 50%;
				border: 2px solid currentColor;
			}
		}

		&[data-vote='voted'] .itd-vote-status {
			color: var(--itd-success);

			&::before {
				background: currentColor;
			}
		}
	}

	/* Dialogs */
	.itd-settings,
	.itd-theme-dialog {
		border: 1px solid var(--itd-border);
		border-radius: calc(var(--itd-radius) * 1.5);
		background: var(--itd-surface);
		color: var(--itd-fg);
		box-shadow: var(--itd-shadow-raised);
		padding: 0;

		&::backdrop {
			background: var(--itd-backdrop);
		}

		h2 {
			font-size: 1.2rem;
		}
	}

	.itd-theme-dialog {
		width: min(38rem, 100% - 2rem);
		max-height: 90vh;
		overflow: auto;

		form {
			display: grid;
			gap: 1rem;
			padding: 1.5rem;
		}

		a {
			color: var(--itd-accent);
		}

		.itd-hint {
			margin: 0;
		}

		.itd-dialog-actions {
			display: flex;
			justify-content: end;
		}

		.upload-theme {
			justify-self: start;
		}

		.itd-theme-tiles {
			border: none;
			margin: 0;
			padding: 0;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
			gap: 0.5rem;

			legend {
				font-weight: 600;
				margin-bottom: 0.5rem;
			}
		}

		.itd-theme-tile {
			position: relative;
			display: grid;
			gap: 0.35rem;
			padding: 0.4rem;
			border: 2px solid var(--itd-border);
			border-radius: var(--itd-radius);
			cursor: pointer;
			font-size: 0.85rem;
			font-weight: 500;

			input {
				position: absolute;
				opacity: 0;
				pointer-events: none;
			}

			&:has(input:checked) {
				border-color: var(--itd-accent);
				background: var(--itd-accent-soft);

				&::after {
					content: '✓';
					position: absolute;
					top: 0.3rem;
					right: 0.4rem;
					display: grid;
					place-items: center;
					width: 1.25rem;
					height: 1.25rem;
					border-radius: 50%;
					background: var(--itd-accent);
					color: var(--itd-accent-fg);
					font-size: 0.75rem;
					font-weight: 800;
				}
			}

			&:has(input:focus-visible) {
				outline: 2px solid var(--itd-focus);
				outline-offset: 2px;
			}

			/* The room's theme: a full row, preview beside the name. */
			&:first-of-type {
				grid-column: 1 / -1;
				grid-template-columns: 7rem 1fr;
				align-items: center;
				gap: 0.75rem;
			}
		}

		.itd-theme-swatch {
			position: relative;
			height: 2.75rem;
			border-radius: calc(var(--itd-radius) * 0.6);
			background: var(--bg, color-mix(in oklab, var(--itd-muted) 15%, transparent));
			border: 1px solid color-mix(in oklab, var(--itd-fg) 12%, transparent);
			overflow: hidden;
		}

		.itd-theme-swatch-card {
			position: absolute;
			left: 18%;
			top: 22%;
			width: 40%;
			height: 56%;
			border-radius: 3px;
			background: var(--surface, var(--itd-surface));
		}

		.itd-theme-swatch-accent {
			position: absolute;
			left: 64%;
			top: 38%;
			width: 22%;
			height: 24%;
			border-radius: var(--itd-radius-pill);
			background: var(--accent, var(--itd-accent));
		}
	}

	.itd-settings {
		width: min(40rem, 100% - 2rem);
		max-height: min(90vh, 52rem);

		&[open] {
			display: flex;
			flex-direction: column;
		}

		.itd-dialog-body {
			overflow: auto;
			/*
			 * Holds what is positioned inside it (the hidden file input), which would otherwise sit
			 * against the dialog and give it a second scroll bar.
			 */
			position: relative;
			padding: 1.5rem;
			display: grid;
			gap: 1.5rem;
			/* A shadow at the bottom edge while there is more to scroll. */
			background:
				linear-gradient(var(--itd-surface) 30%, transparent) center top / 100% 2.5rem no-repeat
					local,
				linear-gradient(transparent, var(--itd-surface) 70%) center bottom / 100% 2.5rem no-repeat
					local,
				radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.12), transparent) center top / 100%
					0.75rem no-repeat scroll,
				radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.12), transparent) center bottom /
					100% 0.75rem no-repeat scroll;
		}

		.itd-settings-form {
			display: grid;
			gap: 1.5rem;
		}

		.itd-settings-section {
			border: none;
			margin: 0;
			padding: 0;
			display: grid;
			gap: 0.75rem;

			legend {
				padding: 0;
				margin-bottom: 0.75rem;
			}
		}

		.itd-deck-preview {
			display: flex;
			flex-wrap: wrap;
			gap: 0.35rem;

			li {
				min-width: 2.25rem;
				padding: 0.3rem 0.5rem;
				border-radius: calc(var(--itd-radius) * 0.75);
				background: color-mix(in oklab, var(--itd-muted) 10%, transparent);
				text-align: center;
				font-weight: 650;
			}
		}

		.customize-deck {
			justify-self: start;
		}

		.deck-cards-header,
		.itd-deck-card {
			display: grid;
			grid-template-columns: 1fr 1fr auto;
			gap: 0.5rem;
			align-items: center;
		}

		.deck-cards-header {
			font-size: 0.8rem;
			font-weight: 600;
			color: var(--itd-muted);
			padding-right: 5rem;
		}

		.itd-deck-cards {
			display: grid;
			gap: 0.35rem;
		}

		.itd-deck-card input {
			min-height: 2rem;
		}

		.deck-settings > button {
			justify-self: start;
		}

		.itd-room-theme {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.itd-transfer-host {
			display: flex;
			flex-wrap: wrap;
			align-items: end;
			gap: 0.75rem;
			padding-top: 1.25rem;
			border-top: 1px solid var(--itd-border);

			h3 {
				width: 100%;
			}
		}

		.itd-hint {
			margin: 0;
		}

		.itd-dialog-actions {
			display: flex;
			justify-content: end;
			gap: 0.5rem;
			padding: 1rem 1.5rem;
			border-top: 1px solid var(--itd-border);
		}
	}

	/* Large screens, often shared in a call: a bigger stage. */
	@media (width >= 90rem) {
		.itd-room {
			max-width: 88rem;
		}

		.itd-round-item {
			font-size: 2rem;
		}

		.itd-cards {
			grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
		}

		.itd-card {
			font-size: 1.75rem;
		}
	}

	/* Phones: the stage first, a compact header. */
	@media (width < 40rem) {
		.itd-room {
			padding-inline: 0.75rem;
		}

		/* One row: the room name is cut off rather than pushing the actions to a second line. */
		.itd-room-header {
			gap: 0.5rem;
		}

		.itd-room-title {
			gap: 0.25rem;
		}

		.itd-room-name {
			font-size: 1.1rem;
		}

		.itd-room-actions {
			gap: 0.35rem;
		}

		.itd-profile-button {
			padding: 0.15rem;

			.itd-avatar {
				width: 2.6rem;
				height: 2.6rem;
			}

			.itd-profile-name,
			.caret {
				display: none;
			}
		}

		.itd-open-settings span {
			display: none;
		}

		.itd-open-settings {
			width: 2.75rem;
			padding: 0;
		}

		.itd-round-status {
			flex-wrap: wrap;
		}

		.itd-cards {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}