/*
 * Dots & Boxes (web) - shell.css (owner: shell)
 * Tokens, base, background, glass & neon components, transitions and layout helpers.
 *
 * Sizing: every size is expressed in "design units" (--u), the Slate units of the UE game.
 *   Wide   (landscape desktop): reference 1920 x 1080 units   -> 1u = min(h/1080, w/1500) px, 0.5 .. 2.4 px
 *   Narrow (portrait / < 820):  reference  560 x 1200 units   -> 1u = min(w/560,  h/900)  px, 0.6 .. 1.6 px
 * js/shell.js sets --u and data-layout="wide|narrow" on <html> (matching DB.UI.isNarrow()); the media query
 * below is only the pre-script fallback. 1rem = 16u, so rem sizes scale with the layout too.
 *
 * Theme colors are custom properties written by DB.Themes.apply() (inline on <html>); the values here are the
 * pre-script fallback (Neon Night, or Paper when the OS is light) so the first frame is never unstyled.
 */

/* ============================================================================ Tokens */

:root {
	/* ---- theme (fallback: Neon Night) ---- */
	--bg-top: #0B0F1E;
	--bg-bottom: #1A1036;
	--bg-glow: rgba(124, 92, 255, 0.55);
	--particle: rgba(169, 184, 255, 0.60);
	--panel: rgba(28, 23, 66, 0.62);
	--panel-border: rgba(160, 140, 255, 0.26);
	--shadow: rgba(3, 2, 8, 0.55);
	--text: #F6F4FF;
	--text-muted: #B0ABD6;
	--accent: #8C6DFF;
	--accent2: #22E4FF;
	--button-text: #120B30;
	--secondary: #2A245A;
	--control: rgba(35, 30, 77, 0.92);
	--board-bg: rgba(17, 13, 41, 0.82);
	--dot: #E9E5FF;
	--edge-hint: rgba(255, 255, 255, 0.08);
	--success: #34E29B;
	--warning: #FFB84D;
	--danger: #FF5C7A;
	--p0: #22E4FF; --p1: #FF5CAD; --p2: #FFD84D; --p3: #5CF08F;
	--p4: #C68CFF; --p5: #FF944D; --p6: #4F8EFF; --p7: #FF6161;
	--accent-rgb: 140, 109, 255;
	--accent2-rgb: 34, 228, 255;
	--shadow-rgb: 3, 2, 8;
	--danger-rgb: 255, 92, 122;
	color-scheme: dark;

	/* ---- derived look (dark themes) ---- */
	--sheen-panel: 0.055;
	--sheen-vivid: 0.16;
	--sheen-soft: 0.07;

	/* ---- direction helpers (overridden for RTL below) ---- */
	--flow: 1;           /* +1 LTR, -1 RTL: multiply physical X translations by this */
	--fill-to: to right; /* gradient direction from the start edge to the end edge */

	/* ---- scale ---- */
	--u: clamp(0.5px, min(100vh / 1080, 100vw / 1500), 2.4px);

	/* ---- type ----
	   FDBStyle font sizes are Slate points; Slate renders them at 96 DPI, i.e. 96/72 units per point. --fs-k applies
	   that factor so text has the same size relative to the layout as in the UE game (Saved/Tour screenshots). */
	--fs-k: 1.3333;
	--font-body: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
	--font-display: 'Lalezar', 'Tajawal', sans-serif;
	--fs-title: calc(104 * var(--fs-k) * var(--u));
	--fs-h1: calc(60 * var(--fs-k) * var(--u));
	--fs-h2: calc(34 * var(--fs-k) * var(--u));
	--fs-body: calc(24 * var(--fs-k) * var(--u));
	--fs-small: calc(19 * var(--fs-k) * var(--u));
	--fs-button: calc(27 * var(--fs-k) * var(--u));
	--fs-seg: calc(22 * var(--fs-k) * var(--u));

	/* ---- metrics (Wide) ---- */
	--btn-h: calc(64 * var(--u));
	--btn-r: calc(18 * var(--u));
	--btn-min-w: calc(280 * var(--u));
	--icon-btn: calc(60 * var(--u));
	--panel-r: calc(28 * var(--u));
	--chip-r: calc(14 * var(--u));
	--seg-h: calc(52 * var(--u));
	--stepper-btn: calc(44 * var(--u));
	--swatch: calc(40 * var(--u));
	--control-h: calc(40 * var(--u));
	--sp-xs: calc(6 * var(--u));
	--sp-s: calc(12 * var(--u));
	--sp-m: calc(20 * var(--u));
	--sp-l: calc(32 * var(--u));
	--sp-xl: calc(48 * var(--u));
	--focus-ring: max(2px, calc(3 * var(--u)));

	/* ---- motion ---- */
	--ease-out: cubic-bezier(0.33, 1, 0.68, 1);      /* easeOutCubic */
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* easeInOutCubic */
	--ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);  /* easeOutBack */
	--t-fast: 120ms;
	--t-med: 220ms;
}

/* Pre-script fallback for a light OS (the game then defaults to the Paper theme). */
@media (prefers-color-scheme: light) {
	:root:not([data-light]) {
		--bg-top: #FBF7EF;
		--bg-bottom: #EFE5D2;
		--bg-glow: rgba(242, 196, 138, 0.40);
		--particle: rgba(125, 107, 82, 0.28);
		--panel: rgba(255, 253, 248, 0.80);
		--panel-border: rgba(61, 50, 34, 0.14);
		--shadow: rgba(94, 74, 44, 0.18);
		--text: #1D1812;
		--text-muted: #62584B;
		--accent: #2A5FD8;
		--accent2: #7A45D6;
		--button-text: #FFFFFF;
		--secondary: #EAE0CD;
		--control: rgba(228, 216, 194, 0.92);
		--accent-rgb: 42, 95, 216;
		--accent2-rgb: 122, 69, 214;
		--shadow-rgb: 94, 74, 44;
		color-scheme: light;
	}
}

:root[data-light="1"] {
	color-scheme: light;
	--sheen-panel: 0.10;
}

:root[data-light="0"] {
	color-scheme: dark;
}

/* Narrow (portrait phone) metrics - FDBStyle Narrow values. */
:root[data-layout="narrow"] {
	--fs-title: calc(64 * var(--fs-k) * var(--u));
	--fs-h1: calc(42 * var(--fs-k) * var(--u));
	--fs-h2: calc(27 * var(--fs-k) * var(--u));
	--fs-body: calc(21 * var(--fs-k) * var(--u));
	--fs-small: calc(17 * var(--fs-k) * var(--u));
	--fs-button: calc(24 * var(--fs-k) * var(--u));
	--fs-seg: calc(20 * var(--fs-k) * var(--u));
	--btn-h: calc(60 * var(--u));
	--btn-r: calc(16 * var(--u));
	--icon-btn: calc(56 * var(--u));
	--panel-r: calc(22 * var(--u));
	--chip-r: calc(12 * var(--u));
	--stepper-btn: calc(52 * var(--u));
	--swatch: calc(44 * var(--u));
	--control-h: calc(52 * var(--u));
	--sp-s: calc(10 * var(--u));
	--sp-m: calc(16 * var(--u));
	--sp-l: calc(22 * var(--u));
	--sp-xl: calc(30 * var(--u));
}

/* Pre-script fallback scale for narrow viewports (replaced by the exact value from shell.js). */
@media (max-width: 819.98px), (max-aspect-ratio: 1/1) {
	:root:not([data-layout]) {
		--u: clamp(0.6px, min(100vw / 560, 100vh / 900), 1.6px);
	}
}

[dir="rtl"] {
	--flow: -1;
	--fill-to: to left;
}

[dir="ltr"] {
	--flow: 1;
	--fill-to: to right;
}

/* ============================================================================ Base */

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

[hidden] {
	display: none !important;
}

html {
	height: 100%;
	overflow: hidden;
	font-size: calc(16 * var(--u));
	background-color: var(--bg-top);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
	background-color: var(--bg-bottom);
	background-image: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

#db-bg {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
}

#db-app {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

#db-app input,
#db-app textarea,
#db-app [contenteditable="true"] {
	-webkit-user-select: text;
	user-select: text;
}

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

h1, h2, h3, h4, p {
	margin: 0;
}

:where(button, [role="button"], input, select, textarea, a, summary, [tabindex]):focus-visible {
	outline: var(--focus-ring) solid var(--accent2);
	outline-offset: 2px;
}

::selection {
	background: rgba(var(--accent-rgb), 0.35);
}

/* ============================================================================ Router stage & screens */

.db-stage {
	position: relative;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
}

.db-stage.is-leaving {
	pointer-events: none;
}

/* Every screen root: a full-height flex column. It only scrolls as a last resort (e.g. a landscape phone); screens
   put their own scrolling regions in .db-scroll. */
.db-screen {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.db-screen::-webkit-scrollbar {
	display: none;
}

.db-screen:focus {
	outline: none;
}

/* ============================================================================ Layout helpers */

.db-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sp-s);
	min-width: 0;
}

.db-col {
	display: flex;
	flex-direction: column;
	gap: var(--sp-s);
	min-width: 0;
}

.db-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.db-grow {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

.db-spacer {
	flex: 1 1 auto;
}

.db-wrap {
	flex-wrap: wrap;
}

.db-gap-xs { gap: var(--sp-xs); }
.db-gap-s { gap: var(--sp-s); }
.db-gap-m { gap: var(--sp-m); }
.db-gap-l { gap: var(--sp-l); }
.db-gap-xl { gap: var(--sp-xl); }

/* A vertical scrolling region inside a screen (content that can exceed the height). */
.db-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--panel-border) transparent;
}

.db-scroll::-webkit-scrollbar {
	width: 8px;
}

.db-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.db-scroll::-webkit-scrollbar-thumb {
	background: var(--panel-border);
	border-radius: 8px;
}

.db-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================================ Typography */

.db-title {
	position: relative;
	isolation: isolate;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-title);
	line-height: 1.15;
	color: var(--text);
	text-align: center;
	text-wrap: balance;
	text-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.22);
}

/* Wide soft Accent glow behind the title. */
.db-title::before {
	content: "";
	position: absolute;
	inset: -70% -20%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.32), rgba(var(--accent-rgb), 0.12) 55%, rgba(var(--accent-rgb), 0) 100%);
}

.db-h1 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h1);
	line-height: 1.2;
	color: var(--text);
	text-wrap: balance;
}

.db-h2 {
	font-weight: 700;
	font-size: var(--fs-h2);
	line-height: 1.25;
	color: var(--text);
	text-wrap: balance;
}

.db-body {
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: 1.45;
	color: var(--text);
}

.db-small {
	font-weight: 400;
	font-size: var(--fs-small);
	line-height: 1.4;
	color: var(--text-muted);
}

.db-muted {
	color: var(--text-muted);
}

.db-display {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.1;
}

.db-num {
	font-variant-numeric: tabular-nums;
}

/* ============================================================================ Icons */

.db-icon {
	display: inline-block;
	flex: none;
	width: calc(var(--is, 24) * var(--u));
	height: calc(var(--is, 24) * var(--u));
	overflow: visible;
	vertical-align: middle;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.db-icon .f {
	fill: currentColor;
	stroke: none;
}

/* Back / Forward / Play point the other way in right-to-left layouts. */
.db-icon--dir {
	transform: scaleX(var(--flow));
}

/* ============================================================================ Buttons */

.db-btn {
	--bh: var(--btn-h);
	--btn-fill: var(--accent);
	--sheen: var(--sheen-soft);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-s);
	flex: none;
	height: var(--bh);
	min-width: min(var(--btn-min-w), 100%);
	max-width: 100%;
	margin: 0;
	padding: 0 var(--sp-m);
	border: 1.5px solid transparent;
	border-radius: var(--btn-r);
	background-color: var(--btn-fill);
	color: var(--text);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: var(--fs-button);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) var(--shadow);
	transition:
		scale var(--t-fast) var(--ease-out),
		box-shadow 160ms ease,
		border-color 160ms ease,
		background-color 160ms ease,
		color 160ms ease,
		opacity 160ms ease;
}

/* Glossy top highlight. */
.db-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, var(--sheen)) 0%, rgba(255, 255, 255, 0) 55%);
}

/* Hover (white) / press (black) overlay. */
.db-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background: transparent;
	transition: background-color var(--t-fast) ease;
}

.db-btn__label {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.35;
	padding-block: 0.05em;
}

.db-btn .db-icon {
	width: calc(var(--fs-button) * 0.98);
	height: calc(var(--fs-button) * 0.98);
}

.db-btn--primary {
	--btn-fill: var(--accent);
	--sheen: var(--sheen-vivid);
	color: var(--button-text);
	/* Accent with a whisper of Accent2 across the width (physical left -> right, as in the game). */
	background-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--accent2)));
	text-shadow: 0 calc(1.5 * var(--u)) 0 rgba(0, 0, 0, 0.18);
}

.db-btn--secondary {
	--btn-fill: var(--secondary);
	--sheen: var(--sheen-soft);
	border-color: var(--panel-border);
	color: var(--text);
}

.db-btn--ghost {
	--btn-fill: transparent;
	--sheen: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--text);
}

.db-btn--danger {
	--btn-fill: var(--danger);
	--sheen: var(--sheen-vivid);
	color: var(--button-text);
	text-shadow: 0 calc(1.5 * var(--u)) 0 rgba(0, 0, 0, 0.18);
}

/* Custom fill (e.g. a player color): white content. */
.db-btn--fill {
	--sheen: var(--sheen-vivid);
	background-image: none;
	border-color: transparent;
	color: #FFFFFF;
	text-shadow: 0 calc(1.5 * var(--u)) 0 rgba(0, 0, 0, 0.18);
}

.db-btn--circle {
	--bh: var(--icon-btn);
	gap: 0;
}

/* Doubled class: a circle stays a circle even if a screen's own class sets width/padding on the button. */
.db-btn.db-btn--circle {
	width: var(--bh);
	min-width: var(--bh);
	max-width: none;
	padding: 0;
	border-radius: 50%;
}

.db-btn--circle .db-icon {
	width: calc(var(--bh) * 0.44);
	height: calc(var(--bh) * 0.44);
}

.db-btn--block {
	display: flex;
	width: 100%;
}

.db-btn:disabled,
.db-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: default;
}

.db-btn:not(:disabled):active {
	scale: 0.97;
}

.db-btn:not(:disabled):not(.db-btn--ghost):active::after {
	background-color: rgba(0, 0, 0, 0.10);
}

.db-btn--ghost:not(:disabled):active {
	background-color: var(--control);
}

.db-btn:focus-visible {
	outline: var(--focus-ring) solid var(--accent2);
	outline-offset: calc(3 * var(--u));
}

@media (hover: hover) and (pointer: fine) {
	.db-btn:not(:disabled):hover {
		scale: 1.04;
	}

	.db-btn:not(:disabled):hover:active {
		scale: 0.97;
	}

	.db-btn:not(:disabled):not(.db-btn--ghost):hover::after {
		background-color: rgba(255, 255, 255, 0.07);
	}

	.db-btn:not(:disabled):not(.db-btn--ghost):hover:active::after {
		background-color: rgba(0, 0, 0, 0.10);
	}

	/* Neon glow for the vivid styles. */
	.db-btn--primary:not(:disabled):hover {
		box-shadow:
			0 calc(6 * var(--u)) calc(14 * var(--u)) var(--shadow),
			0 0 calc(20 * var(--u)) rgba(var(--accent-rgb), 0.55);
	}

	.db-btn--danger:not(:disabled):hover {
		box-shadow:
			0 calc(6 * var(--u)) calc(14 * var(--u)) var(--shadow),
			0 0 calc(20 * var(--u)) rgba(var(--danger-rgb), 0.55);
	}

	.db-btn--fill:not(:disabled):hover {
		box-shadow:
			0 calc(6 * var(--u)) calc(14 * var(--u)) var(--shadow),
			0 0 calc(20 * var(--u)) color-mix(in srgb, var(--btn-fill) 55%, transparent);
	}

	.db-btn--secondary:not(:disabled):hover {
		border-color: color-mix(in srgb, var(--accent) 60%, var(--panel-border));
		box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) var(--shadow);
	}

	.db-btn--ghost:not(:disabled):hover {
		background-color: var(--control);
	}
}

/* ============================================================================ Glass panel */

.db-panel {
	position: relative;
	min-width: 0;
	padding: var(--sp-l);
	border: 1.5px solid var(--panel-accent, var(--panel-border));
	border-radius: var(--panel-r);
	background-color: var(--panel);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--sheen-panel)) 0%, rgba(255, 255, 255, 0) 35%);
	box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) var(--shadow);
	color: var(--text);
}

.db-panel--flat {
	box-shadow: none;
}

/* ============================================================================ Segmented control */

.db-seg {
	--seg-c: var(--accent);
	--seg-pad: calc(4 * var(--u));
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: stretch;
	min-width: 0;
	height: var(--seg-h);
	padding: var(--seg-pad);
	border-radius: var(--chip-r);
	background-color: var(--control);
}

.db-seg__hl {
	position: absolute;
	top: var(--seg-pad);
	bottom: var(--seg-pad);
	inset-inline-start: var(--seg-pad);
	z-index: -1;
	width: calc((100% - 2 * var(--seg-pad)) / var(--n, 1));
	border-radius: max(2px, calc(var(--chip-r) - 3 * var(--u)));
	background-color: var(--seg-c);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%);
	box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) color-mix(in srgb, var(--seg-c) 35%, transparent);
	pointer-events: none;
	transform: translateX(calc(var(--i, 0) * 100% * var(--flow)));
	transition:
		transform 260ms var(--ease-out),
		background-color var(--t-med) linear,
		box-shadow var(--t-med) linear,
		opacity 180ms linear;
}

.db-seg.is-empty .db-seg__hl {
	opacity: 0;
}

.db-seg.no-slide .db-seg__hl {
	transition: none;
}

.db-seg__opt {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	/* Labels are centered in equal slots (SDBSegmented has no inner padding): keep the side padding small so
	   long labels ("ذكاء اصطناعي", "Medium") fit instead of being cut with an ellipsis. */
	padding: 0 calc(3 * var(--u));
	border: 0;
	border-radius: max(2px, calc(var(--chip-r) - 3 * var(--u)));
	background: transparent;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-seg);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	touch-action: manipulation;
	transition: color 160ms ease;
}

.db-seg__opt[aria-checked="true"] {
	color: var(--button-text);
}

.db-seg__opt:focus-visible {
	outline-offset: -2px;
}

.db-seg__opt:disabled {
	cursor: default;
}

.db-seg.is-disabled {
	opacity: 0.45;
}

@media (hover: hover) and (pointer: fine) {
	.db-seg__opt:not(:disabled):not([aria-checked="true"]):hover {
		color: var(--text);
	}
}

/* ============================================================================ Stepper */

.db-stepper {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-s);
	width: calc(220 * var(--u));
	max-width: 100%;
	min-height: var(--stepper-btn);
}

.db-stepper .db-btn {
	--bh: var(--stepper-btn);
}

.db-stepper__val {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h2);
	line-height: 1;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

/* ============================================================================ Toggle (64 x 34 pill) */

.db-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: calc(64 * var(--u));
	height: var(--control-h);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: calc(17 * var(--u));
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
}

.db-toggle__track {
	position: relative;
	display: block;
	width: calc(64 * var(--u));
	height: calc(34 * var(--u));
	border-radius: 999px;
	background-color: var(--control);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
	box-shadow: inset 0 0 0 1.25px var(--panel-border);
	transition: background-color var(--t-med) var(--ease-in-out), box-shadow var(--t-med) var(--ease-in-out);
}

.db-toggle__knob {
	position: absolute;
	top: calc(4 * var(--u));
	inset-inline-start: calc(4 * var(--u));
	width: calc(26 * var(--u));
	height: calc(26 * var(--u));
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.30);
	transition: transform 240ms var(--ease-in-out), scale var(--t-fast) ease;
}

.db-toggle[aria-checked="true"] .db-toggle__track {
	background-color: var(--accent);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%);
	box-shadow: 0 0 calc(10 * var(--u)) rgba(var(--accent-rgb), 0.30);
}

.db-toggle[aria-checked="true"] .db-toggle__knob {
	transform: translateX(calc(30 * var(--u) * var(--flow)));
}

.db-toggle:not(:disabled):active .db-toggle__knob {
	scale: 0.94;
}

.db-toggle:disabled {
	opacity: 0.45;
	cursor: default;
}

/* ============================================================================ Slider */

.db-slider {
	--v: 50%;
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: calc(320 * var(--u));
	max-width: 100%;
	height: var(--control-h);
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	touch-action: pan-y;
}

.db-slider::-webkit-slider-runnable-track {
	height: calc(8 * var(--u));
	border-radius: 999px;
	background: linear-gradient(var(--fill-to), var(--accent2) 0%, var(--accent) var(--v), var(--control) var(--v), var(--control) 100%);
}

.db-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: calc(26 * var(--u));
	height: calc(26 * var(--u));
	margin-top: calc(-9 * var(--u));
	border: 0;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow:
		0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.25),
		0 0 calc(16 * var(--u)) rgba(var(--accent-rgb), 0.45);
	transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.db-slider:active::-webkit-slider-thumb {
	transform: scale(1.12);
	box-shadow:
		0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.25),
		0 0 calc(22 * var(--u)) rgba(var(--accent-rgb), 0.55);
}

.db-slider::-moz-range-track {
	height: calc(8 * var(--u));
	border: 0;
	border-radius: 999px;
	background: linear-gradient(var(--fill-to), var(--accent2) 0%, var(--accent) var(--v), var(--control) var(--v), var(--control) 100%);
}

.db-slider::-moz-range-thumb {
	width: calc(26 * var(--u));
	height: calc(26 * var(--u));
	border: 0;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow:
		0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.25),
		0 0 calc(16 * var(--u)) rgba(var(--accent-rgb), 0.45);
}

.db-slider:focus-visible {
	outline: var(--focus-ring) solid var(--accent2);
	outline-offset: 4px;
	border-radius: 999px;
}

.db-slider:disabled {
	opacity: 0.45;
	cursor: default;
}

/* ============================================================================ Color swatch */

.db-swatch {
	--sw: var(--accent);
	--sz: var(--swatch);
	--ring: max(2px, calc(3 * var(--u)));
	position: relative;
	flex: none;
	width: var(--sz);
	height: var(--sz);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
}

/* The disc: 80% of the cell unselected; ring + gap + smaller disc when selected. */
.db-swatch::before {
	content: "";
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	background-color: var(--sw);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
	box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) var(--shadow);
	transition: inset var(--t-med) var(--ease-out), scale 140ms ease, box-shadow var(--t-med) ease;
}

.db-swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	border: var(--ring) solid var(--text);
	border-radius: 50%;
	opacity: 0;
	scale: 0.82;
	transition: opacity var(--t-med) ease, scale var(--t-med) var(--ease-out);
}

.db-swatch[aria-pressed="true"]::before {
	inset: calc(var(--ring) + 4.5 * var(--u));
	box-shadow:
		0 calc(2 * var(--u)) calc(6 * var(--u)) var(--shadow),
		0 0 calc(16 * var(--u)) color-mix(in srgb, var(--sw) 45%, transparent);
}

.db-swatch[aria-pressed="true"]::after {
	opacity: 1;
	scale: 1;
}

.db-swatch:not(:disabled):active::before {
	scale: 0.92;
}

.db-swatch:disabled {
	opacity: 0.45;
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	.db-swatch:not(:disabled):hover::before {
		scale: 1.07;
	}

	.db-swatch:not(:disabled):hover:active::before {
		scale: 0.92;
	}
}

/* ============================================================================ Text input (helper) */

.db-input {
	display: block;
	width: 100%;
	min-width: 0;
	height: var(--control-h);
	padding: 0 var(--sp-m);
	border: 1.5px solid var(--panel-border);
	border-radius: var(--chip-r);
	background-color: var(--control);
	color: var(--text);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-body);
	line-height: 1.2;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.db-input::placeholder {
	color: var(--text-muted);
	opacity: 0.75;
}

.db-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 calc(3 * var(--u)) rgba(var(--accent-rgb), 0.25);
}

/* ============================================================================ Section label & screen header */

.db-section-label {
	display: flex;
	align-items: center;
	gap: var(--sp-s);
	margin: 0;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-small);
	line-height: 1.2;
	text-transform: uppercase;
}

.db-section-label::before {
	content: "";
	flex: none;
	width: max(3px, calc(4 * var(--u)));
	height: 0.95em;
	border-radius: 2px;
	background: var(--accent);
}

/* Tracking only for Latin text: spacing out Arabic letters would break the joins. */
[dir="ltr"] .db-section-label {
	letter-spacing: 0.07em;
}

.db-header {
	display: grid;
	grid-template-columns: var(--icon-btn) minmax(0, 1fr) var(--icon-btn);
	align-items: center;
	gap: var(--sp-s);
	width: 100%;
	min-height: var(--icon-btn);
}

.db-header__back {
	grid-column: 1;
	grid-row: 1;
}

.db-header__title {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--text);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h1);
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.22);
}

/* ============================================================================ Entrance animations */

@keyframes db-enter {
	from {
		opacity: 0;
		translate: 0 calc(18 * var(--u));
	}
}

@keyframes db-enter-panel {
	from {
		opacity: 0;
		translate: 0 calc(18 * var(--u));
		scale: 0.985;
	}
}

/* Stagger with an inline --d (seconds), e.g. style="--d: 0.12s". Uses the individual `translate`/`scale`
   properties so hover/press scaling on buttons keeps working after the entrance. */
.db-enter {
	animation: db-enter 260ms var(--ease-out) var(--d, 0s) backwards;
}

.db-enter.db-enter--panel,
.db-panel.db-enter {
	animation-name: db-enter-panel;
	animation-duration: 300ms;
}

/* A screen rebuilt in place (language / theme / layout change) appears without replaying its entrance. */
.db-rebuilt .db-enter {
	animation: none;
}

@keyframes db-pop {
	from { scale: 1.18; }
	to { scale: 1; }
}

.db-pop {
	animation: db-pop var(--t-med) cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ============================================================================ Fallback / error screen */

.db-fallback {
	align-items: center;
	justify-content: flex-start;
	padding: var(--sp-l) var(--sp-m);
}

/* Centered with auto margins (not justify-content) so a tall panel still scrolls from its top. */
.db-fallback__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-m);
	flex: none;
	width: min(100%, calc(620 * var(--u)));
	margin-block: auto;
	text-align: center;
}

.db-fallback__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(88 * var(--u));
	height: calc(88 * var(--u));
	border-radius: calc(24 * var(--u));
	background: var(--control);
	color: var(--accent);
}

.db-fallback__detail {
	max-width: 100%;
	padding: var(--sp-s) var(--sp-m);
	border-radius: var(--chip-r);
	background: var(--control);
	color: var(--text-muted);
	font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
	font-size: var(--fs-small);
	line-height: 1.4;
	direction: ltr;
	text-align: start;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	-webkit-user-select: text;
	user-select: text;
}

.db-fallback__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-s);
	width: 100%;
}

/* ============================================================================ Boot placeholder (index.html) */

.db-boot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-m);
	height: 100%;
	padding: var(--sp-l) var(--sp-m);
	text-align: center;
	color: var(--text-muted);
	font-size: var(--fs-body);
}

.db-boot__mark {
	width: calc(72 * var(--u));
	height: calc(72 * var(--u));
	border-radius: 50%;
	border: calc(5 * var(--u)) solid var(--control);
	border-top-color: var(--accent);
	animation: db-spin 900ms linear infinite;
}

.db-boot__slow {
	max-width: 32em;
	font-size: var(--fs-small);
	opacity: 0;
	animation: db-appear 400ms ease 8s forwards;
}

@keyframes db-spin {
	to { rotate: 360deg; }
}

@keyframes db-appear {
	to { opacity: 1; }
}

/* ============================================================================ Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.db-enter,
	.db-pop {
		animation: none !important;
	}

	.db-btn,
	.db-btn::after,
	.db-seg__hl,
	.db-seg__opt,
	.db-toggle__track,
	.db-toggle__knob,
	.db-swatch::before,
	.db-swatch::after,
	.db-slider::-webkit-slider-thumb {
		transition-duration: 1ms !important;
	}

	.db-btn:not(:disabled):hover,
	.db-btn:not(:disabled):active {
		scale: none;
	}

	.db-boot__mark {
		animation: none;
	}
}