@layer fonts, colors, layout, animations;

@layer fonts {
/* Inter (SIL OFL), self-hosted latin variable. */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--ff-base: "Inter", system-ui, sans-serif;
	--ff-code: "Cascadia Code", "Cascadia Mono", ui-monospace, monospace;
	--font: var(--ff-base);

	/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,21,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--fs-1: clamp(1.35rem, 1.1865rem + 0.7265vw, 1.7496rem);
	--fs-2: clamp(1.62rem, 1.3287rem + 1.2948vw, 2.3322rem);

	--font-size: 0.8125rem;
	--font-size-base: var(--font-size);
	--font-size-big: 1.35em;
	--font-size-small: 0.85em;
	--font-size-smaller: 0.75em;
	--font-size-lg: var(--font-size-big);
	--font-size-xl: var(--font-size-big);
	--font-size-md: var(--font-size-small);
	--font-size-sm: var(--font-size-smaller);
	--font-size-xs: var(--font-size-smaller);
	--font-size-overline: 0.6875rem;
	--font-size-title: var(--fs-1);
	--leading: 1.6;
	--leading-tight: 1.1;
	--tracking: 0;
	--tracking-wide: 0.04em;
	--weight: 300;
	--weight-medium: 400;
	--weight-semibold: 500;
	--weight-bold: 600;
	--weight-heavy: 600;
}

html {
	font-family: var(--ff-base, system-ui);
	font-size: 16px;
	line-height: var(--leading);

	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body {
	font-size: var(--font-size);
	font-weight: var(--weight);
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin-block: 0;
}

h1,
h2,
h3,
h4 {
	color: var(--ink);
	text-wrap: balance;
	line-height: var(--leading-tight);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

h1 {
	font-size: var(--font-size-title);
	font-weight: var(--weight-bold);
}

h2 {
	font-size: var(--fs-2);
	font-weight: var(--weight-semibold);
}

h3 {
	font-size: var(--fs-1);
	font-weight: var(--weight-semibold);
}

h4 {
	font-size: var(--font-size-lg);
	font-weight: var(--weight-semibold);
}

input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

code,
kbd,
pre,
samp {
	font-family: var(--ff-code, monospace);
}

strong,
b {
	font-weight: var(--weight-semibold);
}
}
@layer colors {
:root {
	color-scheme: light dark;

	--ink-light: #16181d;
	--ink-dark: #eceff2;
	--muted-light: #667085;
	--muted-dark: #a1a5ae;
	--faint-light: #98a2b3;
	--faint-dark: #757982;
	--canvas-light: #e8ecf3;
	--canvas-dark: #181a20;
	--surface-light: #f4f6fa;
	--surface-dark: #1e2126;
	--raised-light: #ffffff;
	--raised-dark: #2a2e35;
	--card-light: #ffffff;
	--card-dark: #262a31;
	--accent-light: #7a78c2;
	--accent-dark: #9897bd;
	--accent-hover-light: #6a68b0;
	--accent-hover-dark: #a8a7ca;
	--on-accent-light: #ffffff;
	--on-accent-dark: #ffffff;
	--ok-light: #16a34a;
	--ok-dark: #70b88a;
	--danger-light: #e5484d;
	--danger-dark: #d59494;
	--warning-light: #d97706;
	--warning-dark: #c3a65c;
	--ai-light: #2563eb;
	--ai-dark: #afc7e1;

	--ink: light-dark(var(--ink-light), var(--ink-dark));
	--muted: light-dark(var(--muted-light), var(--muted-dark));
	--faint: light-dark(var(--faint-light), var(--faint-dark));
	--canvas: light-dark(var(--canvas-light), var(--canvas-dark));
	--surface: light-dark(var(--surface-light), var(--surface-dark));
	--raised: light-dark(var(--raised-light), var(--raised-dark));
	--window-bg: light-dark(var(--card-light), var(--raised-dark));
	--card-bg: light-dark(var(--card-light), var(--card-dark));
	--hairline: light-dark(
		color-mix(in srgb, var(--ink) 15%, var(--surface)),
		color-mix(in srgb, var(--ink) 6%, var(--surface))
	);
	--border: var(--hairline);
	--control-border: light-dark(
		color-mix(in srgb, var(--ink) 18%, var(--surface)),
		color-mix(in srgb, var(--ink) 8%, var(--surface))
	);
	--accent: light-dark(var(--accent-light), var(--accent-dark));
	--accent-hover: light-dark(var(--accent-hover-light), var(--accent-hover-dark));
	--accent-subtle: color-mix(in srgb, var(--accent) 8%, var(--surface));
	--on-accent: light-dark(var(--on-accent-light), var(--on-accent-dark));
	--danger: light-dark(var(--danger-light), var(--danger-dark));
	--danger-subtle: color-mix(in srgb, var(--danger) 10%, var(--surface));
	--warning: light-dark(var(--warning-light), var(--warning-dark));
	--policy-stale: var(--warning);
	--ok: light-dark(var(--ok-light), var(--ok-dark));
	--feedback-bad: var(--danger);
	--feedback-neutral: var(--muted);
	--feedback-good: light-dark(#65a30d, #98b863);
	--feedback-great: var(--ok);
	--ai-text: light-dark(var(--ai-light), var(--ai-dark));
	--ai-surface: light-dark(var(--card-light), var(--raised-dark));
	--fill-hover: light-dark(
		color-mix(in srgb, var(--ink) 4%, var(--surface)),
		color-mix(in srgb, var(--ink) 10%, var(--surface))
	);
	--badge-bg: light-dark(
		color-mix(in srgb, var(--ink) 5%, var(--card-bg)),
		color-mix(in srgb, var(--ink) 12%, var(--raised))
	);
	--badge-fg: light-dark(var(--muted), color-mix(in srgb, var(--ink) 72%, var(--muted)));
	--shadow: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.42));
	--shadow-deep: light-dark(rgb(15 23 42 / 0.12), rgb(0 0 0 / 0.54));
	--shadow-soft: light-dark(rgb(15 23 42 / 0.04), rgb(0 0 0 / 0.24));
	--shadow-lift: light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.34));
	--elevation-control: 0 1px 1px light-dark(rgb(15 23 42 / 0.22), rgb(0 0 0 / 0.6));
	--elevation-control-pressed: 0 0 1px light-dark(rgb(15 23 42 / 0.22), rgb(0 0 0 / 0.6));
	--elevation-card: 0 1px 2px var(--shadow-soft), 0 8px 20px var(--shadow-lift);
	--elevation-window: 0 1px 2px var(--shadow), 0 12px 28px var(--shadow-deep);
	--elevation-inner: 0 0 3px var(--shadow);
	--paper-shadow: 0 8px 24px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.55));

	--panel-top: light-dark(var(--card-light), color-mix(in srgb, var(--ink) 6%, var(--surface)));
	--panel-fill: linear-gradient(to bottom, var(--panel-top) 0%, var(--surface) 100%);

	--focus-ring: light-dark(
		hsl(from var(--accent-light) 220 s l / 0.25),
		hsl(from var(--accent-dark) 220 s l / 0.25)
	);

	--elevated-bg: var(--card-bg);
	--elevated-hover: var(--fill-hover);
	--field-bg: light-dark(var(--card-light), var(--raised-dark));

	--header-ink: var(--ink);
	--header-muted: var(--muted);
	--header-fill: light-dark(
		color-mix(in srgb, var(--card-bg) 78%, transparent),
		color-mix(in srgb, var(--raised) 48%, transparent)
	);
	--header-fill-hover: light-dark(
		color-mix(in srgb, var(--accent) 8%, var(--card-bg)),
		color-mix(in srgb, var(--accent) 16%, var(--raised))
	);
	--header-solid: light-dark(var(--card-bg), color-mix(in srgb, var(--ink) 4%, var(--surface)));
	--header-chip-ring: 0 0 0 0 transparent;
	--header-chip-ring-active: 0 0 0 2px var(--canvas), 0 0 0 4px var(--focus-ring);

	--scrollbar-thumb: light-dark(#c5cbd6, #41464f);
	--scrollbar-track: light-dark(var(--canvas-light), var(--canvas-dark));
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
	scrollbar-width: thin;

	accent-color: var(--accent);
}

html {
	accent-color: var(--accent);
}

[data-theme="light"] {
	color-scheme: light;
}

[data-theme="dark"] {
	color-scheme: dark;
}

.ai-text {
	color: var(--ai-text);
}

.ai-surface {
	background: var(--ai-surface);
	border-radius: var(--radius-inner);
}

:is(input, textarea, select).ai-text {
	color: var(--ai-text);
}
}
@layer layout {
:root {
	/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,21,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
	--space-2xs: clamp(0.5625rem, 0.5114rem + 0.2273vw, 0.6875rem);
	--space-xs: clamp(0.875rem, 0.8239rem + 0.2273vw, 1rem);
	--space-s: clamp(1.125rem, 1.0483rem + 0.3409vw, 1.3125rem);
	--space-m: clamp(1.6875rem, 1.5597rem + 0.5682vw, 2rem);
	--space-l: clamp(2.25rem, 2.0966rem + 0.6818vw, 2.625rem);
	--space-xl: clamp(3.375rem, 3.1449rem + 1.0227vw, 3.9375rem);
	--space-2xl: clamp(4.5rem, 4.1932rem + 1.3636vw, 5.25rem);
	--space-3xl: clamp(6.75rem, 6.2898rem + 2.0455vw, 7.875rem);
	--space-4xl: clamp(9rem, 8.3864rem + 2.7273vw, 10.5rem);

	--space-3xs-2xs: clamp(0.3125rem, 0.1591rem + 0.6818vw, 0.6875rem);
	--space-2xs-xs: clamp(0.5625rem, 0.3835rem + 0.7955vw, 1rem);
	--space-xs-s: clamp(0.875rem, 0.696rem + 0.7955vw, 1.3125rem);
	--space-s-m: clamp(1.125rem, 0.767rem + 1.5909vw, 2rem);
	--space-m-l: clamp(1.6875rem, 1.304rem + 1.7045vw, 2.625rem);
	--space-l-xl: clamp(2.25rem, 1.5597rem + 3.0682vw, 3.9375rem);
	--space-xl-2xl: clamp(3.375rem, 2.608rem + 3.4091vw, 5.25rem);
	--space-2xl-3xl: clamp(4.5rem, 3.1193rem + 6.1364vw, 7.875rem);
	--space-3xl-4xl: clamp(6.75rem, 5.2159rem + 6.8182vw, 10.5rem);
	--space-s-l: clamp(1.125rem, 0.5114rem + 2.7273vw, 2.625rem);
	--space-2xl-4xl: clamp(4.5rem, 2.0455rem + 10.9091vw, 10.5rem);

	--focus-width: 2px;
	--focus-offset: 0px;
	--focus-offset-button: 1px;
	--focus-offset-input: calc(-1 * var(--focus-width));

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--gap-sm: var(--space-1);
	--gap: var(--space-2);
	--gap-md: var(--space-3);
	--gap-lg: var(--space-4);
	--card-gap: var(--space-5);
	--pad-page: var(--space-5);
	--pad-card: 1rem;
	--pad-control-block: 0.3rem;
	--pad-control-inline: 0.65rem;
	--pad-control: var(--pad-control-block) var(--pad-control-inline);
	--pad-input-block: 0.3rem;
	--pad-input-inline: 0.7rem;
	--pad-input: var(--pad-input-block) var(--pad-input-inline);
	--pad-input-tags: 0.4rem;
	--pad-cell: 0.65rem;
	--pad-cell-compact: 0.35rem;

	--radius-badge: 2px;
	--radius-inner: 4px;
	--radius-outer: calc(var(--radius-inner) + 4px);

	--content-max: 62.5rem;
	--chrome-inline: var(--space-3);
	--sidebar-width: 16.5rem;
	--header-height: 0px;
	--env-tape: 0px;
	--header-offset: 0px;
	--control-min: 1.875rem;
	--check-box: 1.15rem;
	--table-select-pad-start: 0.65rem;
	--table-select-pad-end: 0.3rem;
	--table-select: calc(var(--check-box) + var(--table-select-pad-start) + var(--table-select-pad-end));
	--control-lg: 2.6rem;
	--icon-size: 1.15em;
	--avatar-size: 2rem;
	--header-control-size: calc(var(--space-2) * 2 + 1em * var(--leading));
	--window-gap: var(--space-6);
	--window-max-block: calc(100dvh - var(--window-gap));
	--window-max-inline: calc(100dvi - var(--window-gap));
	--window-close-inset: 0.375rem;
	--window-close-clearance: 3rem;
}

@media (max-width: 700px) {
:root {
		--pad-page: var(--space-4);
		--pad-input-block: 0.2rem;
		--pad-input-inline: 0.7rem;
		--pad-input: 0.2rem 0.7rem;
		--pad-input-tags: 0.36rem;
		--window-gap: 0px;
		--window-max-block: 100dvh;
		--window-max-inline: 100svw;
	}
}

html {
	scroll-padding-block: 5lh;

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

html:is([data-environment="development"], [data-environment="transit"]) {
	--env-tape: 3px;
	--env-tape-shift: 22.627px;
}

html[data-environment="development"] {
	--env-tape-accent: #c41212;
}

html[data-environment="transit"] {
	--env-tape-accent: #fc0;
}

html:is([data-environment="development"], [data-environment="transit"])::after {
	content: "";
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 25;
	block-size: var(--env-tape);
	pointer-events: none;
	background: repeating-linear-gradient(-45deg, #111 0 8px, var(--env-tape-accent) 8px 16px);
	background-size: var(--env-tape-shift) var(--env-tape-shift);
	-webkit-mask-image: linear-gradient(to right, #000 0%, transparent 22%, transparent 78%, #000 100%);
	mask-image: linear-gradient(to right, #000 0%, transparent 22%, transparent 78%, #000 100%);

	@media (prefers-reduced-motion: no-preference) {
		animation: env-tape-march 1.2s linear infinite;
	}
}

@keyframes env-tape-march {
	to {
		background-position: var(--env-tape-shift) 0;
	}
}

@media print {
html:is([data-environment="development"], [data-environment="transit"]) {
		--env-tape: 0px;
	}
}

@media print {
html:is([data-environment="development"], [data-environment="transit"])::after {
		display: none;
	}
}

.glass-displace {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
}

html,
body {
	box-sizing: border-box;
	margin: 0;
	height: 100dvh;
	min-height: 0;
	overflow-x: hidden;
	background: var(--canvas);
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

html {
	background: var(--canvas);
	overflow-x: hidden;
	overflow-y: hidden;
}

body,
body * {
	box-sizing: border-box;
}

body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
}

#outlet {
	grid-row: 1;
	grid-column: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: auto;
	scrollbar-width: none;
	background: var(--canvas);
	margin-inline-start: var(--sidebar-width);
	padding: 0;
	box-sizing: border-box;
}

#outlet > x-breadcrumbs {
	position: sticky;
	top: 0;
	z-index: 1;
	flex: none;
	background: var(--canvas);
}

#page {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 0;
	inline-size: 100%;
	max-inline-size: none;
	box-sizing: border-box;
}

#outlet::-webkit-scrollbar {
	display: none;
}

html.is-kanban-reordering {
	user-select: none;
	cursor: grabbing;
}

html.is-list-reordering,
html.is-list-reordering * {
	cursor: grabbing !important;
}

html.is-media-reordering,
html.is-media-reordering * {
	cursor: grabbing !important;
}

x-app-header,
x-scrollbar,
x-toast {
	grid-row: 1;
	grid-column: 1;
}

#app-menu,
#app-bar-actions,
#app-actions {
	display: grid;
	gap: 2px;
	width: 100%;
}

#app-menu x-nav-item,
#app-actions x-nav-item,
#app-menu x-nav-group,
#app-actions x-nav-group {
	width: 100%;
}

#page[fill],
#page[not-found] {
	flex: 1 1 0;
	min-block-size: 0;
	display: flex;
	flex-direction: column;
	overflow: auto;
	padding: 0;
}

#page[stretch],
#page[kanban] {
	flex: 1 1 0;
	overflow: hidden;
}

#outlet:has(#page[fill]),
#outlet:has(#page[not-found]) {
	overflow: hidden;
}

@media (max-width: 40rem) {
	#app-menu,
	#app-actions {
		display: grid;
		gap: var(--space-1);
		width: 100%;
	}

	#app-menu x-nav-item,
	#app-actions x-nav-item,
	#app-menu x-nav-group,
	#app-actions x-nav-group {
		width: 100%;
	}
}
}
@layer animations {
:root {
	interpolate-size: allow-keywords;

	--animation-duration: 400ms;
	--page-transition-duration: 300ms;
	--animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--animation-stagger: 80ms;
	--header-chip-ring-motion: box-shadow var(--animation-duration) var(--animation-easing);
}

@property --fade-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --fade-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --fade-clip-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --fade-clip-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --guide-step {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

x-app-header {
	view-transition-name: header;
}

x-breadcrumbs::part(path) {
	view-transition-name: crumbs;
}

#page {
	view-transition-name: page;
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(header),
::view-transition-new(header) {
	animation: none;
	mix-blend-mode: normal;
}

::view-transition-group(header) {
	z-index: 20;
	animation: none;
}

::view-transition-group(crumbs) {
	z-index: 2;
	overflow: hidden;
	animation: none;
}

::view-transition-image-pair(crumbs) {
	isolation: isolate;
	mix-blend-mode: normal;
}

::view-transition-old(crumbs),
::view-transition-new(crumbs) {
	animation-name: none;
	animation-duration: var(--page-transition-duration);
	animation-timing-function: var(--animation-easing);
	animation-fill-mode: both;
	mix-blend-mode: normal;
	overflow: hidden;
}

::view-transition-group(page) {
	z-index: 1;
	overflow: clip;
}

::view-transition-old(page),
::view-transition-new(page) {
	animation-duration: var(--page-transition-duration);
	animation-timing-function: var(--animation-easing);
	animation-fill-mode: both;
	object-fit: none;
	object-position: top left;
	overflow: clip;
}

@keyframes page-to-left {
	to {
		transform: translateX(-2.5rem);
		opacity: 0;
	}
}

@keyframes page-from-right {
	from {
		transform: translateX(2.5rem);
		opacity: 0;
	}
}

@keyframes page-to-right {
	to {
		transform: translateX(2.5rem);
		opacity: 0;
	}
}

@keyframes page-from-left {
	from {
		transform: translateX(-2.5rem);
		opacity: 0;
	}
}

html:active-view-transition-type(forward)::view-transition-old(page),
html[data-transition="forward"]::view-transition-old(page) {
	animation-name: page-to-left;
	mix-blend-mode: normal;
}

html:active-view-transition-type(forward)::view-transition-new(page),
html[data-transition="forward"]::view-transition-new(page) {
	animation-name: page-from-right;
	mix-blend-mode: normal;
}

html:active-view-transition-type(back)::view-transition-old(page),
html[data-transition="back"]::view-transition-old(page) {
	animation-name: page-to-right;
	mix-blend-mode: normal;
}

html:active-view-transition-type(back)::view-transition-new(page),
html[data-transition="back"]::view-transition-new(page) {
	animation-name: page-from-left;
	mix-blend-mode: normal;
}

@keyframes crumbs-out {
	from {
		transform: translateY(0%);
	}
	to {
		transform: translateY(-100%);
	}
}

@keyframes crumbs-in {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0%);
	}
}

html.crumbs-move:is(:active-view-transition, [data-transition])::view-transition-old(crumbs) {
	animation-name: crumbs-out;
}

html.crumbs-move:is(:active-view-transition, [data-transition])::view-transition-new(crumbs) {
	animation-name: crumbs-in;
}
}