/*
	TK PoolKit shared CSS.
	Load after Reset.css and before page-specific styles.
*/

:root {
	--ColorPaper: #fbfaf5;
	--ColorInk: #1f2a2b;
	--ColorText: #344446;
	--ColorMuted: #687879;
	--ColorHairline: #d9d3c4;
	--ColorSurface: #ffffff;
	--ColorSurfaceTint: #f1f7f5;
	--ColorSurfaceWarm: #f8f1df;
	--ColorAqua: #167f85;
	--ColorAquaDark: #0d5f66;
	--ColorAquaSoft: #dff1f0;
	--ColorCopper: #a85f2b;
	--ColorCopperSoft: #f6e5d8;
	--ColorSage: #4f7d5b;
	--ColorSageSoft: #e4f0e4;
	--ColorGold: #a7791c;
	--ColorGoldSoft: #f7ebc9;
	--ColorRose: #b94943;
	--ColorRoseSoft: #f6dfdc;
	--ColorViolet: #4c527c;
	--ColorVioletSoft: #e5e6f1;
	--ShadowSmall: 0 1px 0 rgba(31, 42, 43, 0.08), 0 12px 30px rgba(31, 42, 43, 0.06);
	--FocusRing: 0 0 0 3px rgba(22, 127, 133, 0.24);
	--FontBody: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
	--FontDisplay: Georgia, "Times New Roman", serif;
	--RadiusSmall: 4px;
	--RadiusMedium: 8px;
	--ControlHeight: 2.625rem;
	--LineLength: 68ch;
	--SiteWidth: 1160px;
	--Space2XS: 0.25rem;
	--SpaceXS: 0.5rem;
	--SpaceS: 0.75rem;
	--SpaceM: 1rem;
	--SpaceL: 1.5rem;
	--SpaceXL: 2rem;
	--Space2XL: 3rem;
	--Space3XL: 4.5rem;
}

html {
	background:
		linear-gradient(90deg, rgba(31, 42, 43, 0.035) 1px, transparent 1px) 0 0 / 3rem 3rem,
		linear-gradient(0deg, rgba(31, 42, 43, 0.03) 1px, transparent 1px) 0 0 / 3rem 3rem,
		var(--ColorPaper);
	color: var(--ColorText);
}

body {
	background:
		linear-gradient(180deg, rgba(22, 127, 133, 0.11), rgba(22, 127, 133, 0) 18rem),
		transparent;
	color: var(--ColorText);
	font-family: var(--FontBody);
	font-size: 1rem;
	line-height: 1.55;
}

a {
	color: var(--ColorAquaDark);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--ColorCopper);
}

strong {
	color: var(--ColorInk);
	font-weight: 700;
}

em {
	font-style: italic;
}

small {
	font-size: 0.875rem;
}

[hidden] {
	display: none !important;
}

code,
kbd {
	border: 1px solid color-mix(in srgb, var(--ColorHairline) 80%, var(--ColorInk));
	border-radius: var(--RadiusSmall);
	background: rgba(255, 255, 255, 0.68);
	color: var(--ColorInk);
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 0.9em;
}

code {
	padding: 0.07rem 0.28rem;
}

kbd {
	padding: 0.08rem 0.35rem;
	box-shadow: inset 0 -1px 0 rgba(31, 42, 43, 0.18);
	font-weight: 700;
}

hr {
	height: 1px;
	margin: var(--SpaceXL) 0;
	border: 0;
	background: var(--ColorHairline);
}

.SiteShell {
	min-height: 100vh;
	width: 100%;
	min-width: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.SiteShell > * {
	min-width: 0;
}

.SkipLink {
	position: absolute;
	top: var(--SpaceS);
	left: var(--SpaceS);
	z-index: 20;
	padding: var(--SpaceXS) var(--SpaceS);
	border-radius: var(--RadiusSmall);
	background: var(--ColorInk);
	color: #ffffff;
	transform: translateY(-160%);
}

.SkipLink:focus {
	transform: translateY(0);
}

.SiteHeader {
	position: relative;
	z-index: 50;
	border-bottom: 1px solid rgba(31, 42, 43, 0.12);
	background: rgba(251, 250, 245, 0.9);
	backdrop-filter: blur(12px);
}

.SiteHeaderInner {
	width: calc(100% - 2rem);
	max-width: var(--SiteWidth);
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--SpaceL);
	align-items: center;
	padding: var(--SpaceS) 0;
}

.SiteHeaderInner > * {
	min-width: 0;
}

.BrandMark {
	display: inline-grid;
	grid-template-columns: 2.45rem auto;
	gap: var(--SpaceS);
	align-items: center;
	color: var(--ColorInk);
	text-decoration: none;
}

.BrandMark:focus-visible {
	border-radius: var(--RadiusMedium);
	outline: none;
	box-shadow: var(--FocusRing);
}

.BrandIcon {
	width: 2.45rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--ColorAquaDark);
	border-radius: var(--RadiusMedium);
	background:
		linear-gradient(180deg, transparent 44%, rgba(22, 127, 133, 0.22) 44%),
		var(--ColorSurface);
	color: var(--ColorAquaDark);
	font-size: 0.88rem;
	font-weight: 850;
	line-height: 1;
}

.BrandText {
	display: grid;
	min-width: 0;
	line-height: 1.1;
}

.BrandName {
	font-family: var(--FontDisplay);
	font-size: 1.35rem;
	font-weight: 700;
}

.BrandTagline {
	color: var(--ColorMuted);
	font-size: 0.77rem;
	font-weight: 650;
	text-transform: uppercase;
}

.HeaderActions {
	position: relative;
	justify-self: end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceXS);
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
}

.SiteMenu {
	position: relative;
	z-index: 30;
}

.SiteMenuSummary {
	cursor: pointer;
	list-style: none;
}

.SiteMenuSummary::-webkit-details-marker {
	display: none;
}

.SiteMenuSummary::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	margin-top: -0.2rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 140ms ease;
}

.SiteMenu[open] .SiteMenuSummary::after {
	margin-top: 0.2rem;
	transform: rotate(225deg);
}

.SiteMenuPanel {
	position: absolute;
	top: calc(100% + var(--SpaceXS));
	right: 0;
	width: min(18rem, calc(100vw - 2rem));
	display: grid;
	gap: var(--Space2XS);
	padding: var(--SpaceXS);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: var(--ColorSurface);
	box-shadow: 0 18px 42px rgba(31, 42, 43, 0.18);
}

.SiteMenuLink {
	display: flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 var(--SpaceS);
	border: 1px solid transparent;
	border-radius: var(--RadiusSmall);
	color: var(--ColorText);
	font-weight: 800;
	text-decoration: none;
}

.SiteMenuLink:hover,
.SiteMenuLink:focus-visible {
	border-color: var(--ColorHairline);
	background: var(--ColorSurfaceTint);
	color: var(--ColorAquaDark);
	outline: none;
}

.SiteMenuLink[aria-current="page"] {
	border-color: var(--ColorAqua);
	background: var(--ColorAquaSoft);
	color: var(--ColorAquaDark);
}

.SiteNavigation {
	justify-self: end;
}

.NavigationList {
	display: flex;
	flex-wrap: wrap;
	gap: var(--Space2XS);
	justify-content: flex-end;
}

.NavigationLink {
	display: inline-flex;
	min-height: 2.25rem;
	align-items: center;
	padding: 0 var(--SpaceS);
	border: 1px solid transparent;
	border-radius: var(--RadiusSmall);
	color: var(--ColorText);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
}

.NavigationLink:hover,
.NavigationLink:focus-visible {
	border-color: var(--ColorHairline);
	background: rgba(255, 255, 255, 0.64);
	color: var(--ColorAquaDark);
	outline: none;
}

.NavigationLink[aria-current="page"] {
	border-color: var(--ColorAqua);
	background: var(--ColorAquaSoft);
	color: var(--ColorAquaDark);
}

.AuthControls {
	justify-self: end;
	min-width: 0;
}

.AuthControlsGroup {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--SpaceXS);
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
}

.AuthGate {
	margin-bottom: var(--SpaceXL);
}

.AuthGateHero {
	min-height: min(34rem, calc(100vh - 14rem));
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
	gap: var(--Space2XL);
	align-items: center;
}

.AuthGateCopy {
	display: grid;
	gap: var(--SpaceM);
	max-width: 760px;
}

.AuthGateActions {
	margin-top: var(--SpaceS);
}

.AuthGatePanel {
	display: grid;
	gap: var(--SpaceS);
	padding: var(--SpaceL);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(241, 247, 245, 0.84)),
		var(--ColorSurface);
	box-shadow: var(--ShadowSmall);
}

.AuthGateFeature {
	display: grid;
	gap: var(--Space2XS);
	padding: var(--SpaceM);
	border: 1px solid rgba(31, 42, 43, 0.1);
	border-radius: var(--RadiusSmall);
	background: rgba(255, 255, 255, 0.72);
}

.AuthGateFeature span {
	color: var(--ColorCopper);
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.AuthGateFeature strong {
	font-size: 1rem;
	line-height: 1.25;
}

.MainContent {
	width: calc(100% - 2rem);
	max-width: var(--SiteWidth);
	margin: 0 auto;
	padding: var(--Space2XL) 0 var(--Space3XL);
}

.PageHeader {
	display: grid;
	gap: var(--SpaceS);
	max-width: 820px;
	margin-bottom: var(--SpaceXL);
}

.PageKicker {
	color: var(--ColorCopper);
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
}

.PageTitle {
	color: var(--ColorInk);
	font-family: var(--FontDisplay);
	font-size: 4.5rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0.95;
}

.PageLead {
	max-width: var(--LineLength);
	color: var(--ColorText);
	font-size: 1.1rem;
}

.ContentSection {
	margin-top: var(--Space2XL);
}

.SectionHeader {
	display: grid;
	gap: var(--SpaceXS);
	max-width: var(--LineLength);
	margin-bottom: var(--SpaceM);
}

.SectionTitle {
	color: var(--ColorInk);
	font-family: var(--FontDisplay);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.12;
}

.SectionIntro {
	color: var(--ColorMuted);
}

.Subheading {
	color: var(--ColorInk);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.25;
}

.TextBlock {
	max-width: var(--LineLength);
}

.TextBlock > * + * {
	margin-top: var(--SpaceM);
}

.TextList,
.NumberList {
	display: grid;
	gap: var(--SpaceXS);
	padding-left: 1.25rem;
}

.TextList {
	list-style: disc;
}

.NumberList {
	list-style: decimal;
}

.MutedText {
	color: var(--ColorMuted);
}

.FinePrint {
	color: var(--ColorMuted);
	font-size: 0.875rem;
}

.LinkList {
	display: grid;
	gap: var(--SpaceXS);
}

.LinkList a {
	font-weight: 700;
}

.Cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceS);
	align-items: center;
}

.Stack {
	display: grid;
	gap: var(--SpaceM);
}

.StackLarge {
	display: grid;
	gap: var(--SpaceL);
}

.Stack > *,
.StackLarge > * {
	min-width: 0;
}

.Split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
	gap: var(--SpaceXL);
	align-items: start;
}

.Grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--SpaceM);
}

.GridWide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--SpaceM);
}

.Split > *,
.Grid > *,
.GridWide > *,
.FormGrid > * {
	min-width: 0;
}

.Panel {
	position: relative;
	padding: var(--SpaceL);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: color-mix(in srgb, var(--ColorSurface) 90%, var(--ColorPaper));
	box-shadow: var(--ShadowSmall);
}

.Panel::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 0.28rem;
	border-radius: var(--RadiusMedium) 0 0 var(--RadiusMedium);
	background: var(--ColorAqua);
}

.PanelWarm::before {
	background: var(--ColorCopper);
}

.PanelSage::before {
	background: var(--ColorSage);
}

.PanelViolet::before {
	background: var(--ColorViolet);
}

.Card {
	padding: var(--SpaceM);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.72);
}

a.Card {
	color: inherit;
	text-decoration: none;
	transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

a.Card:hover,
a.Card:focus-visible {
	border-color: var(--ColorAqua);
	background: var(--ColorSurface);
	color: inherit;
	outline: none;
	transform: translateY(-1px);
}

.CardTitle {
	color: var(--ColorInk);
	font-weight: 800;
	line-height: 1.25;
}

.CardMeta {
	color: var(--ColorMuted);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
}

.Metric {
	display: grid;
	gap: var(--Space2XS);
}

.MetricValue {
	color: var(--ColorInk);
	font-family: var(--FontDisplay);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
}

.MetricLabel {
	color: var(--ColorMuted);
	font-size: 0.875rem;
	font-weight: 700;
}

.Button {
	min-height: var(--ControlHeight);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--SpaceXS);
	padding: 0.05rem 0.95rem 0;
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusSmall);
	background: var(--ColorSurface);
	color: var(--ColorInk);
	font-weight: 800;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.Button:hover {
	border-color: var(--ColorAqua);
	background: var(--ColorAquaSoft);
	color: var(--ColorAquaDark);
}

.Button:active {
	transform: translateY(1px);
}

.Button:focus-visible,
.FieldControl:focus-visible,
.Choice input:focus-visible,
.SegmentedControl input:focus-visible + span,
.DialogClose:focus-visible {
	outline: none;
	box-shadow: var(--FocusRing);
}

.ButtonPrimary {
	border-color: var(--ColorAquaDark);
	background: var(--ColorAqua);
	color: #ffffff;
}

.ButtonPrimary:hover {
	border-color: var(--ColorAquaDark);
	background: var(--ColorAquaDark);
	color: #ffffff;
}

.ButtonSecondary {
	border-color: var(--ColorCopper);
	background: var(--ColorCopperSoft);
	color: #713812;
}

.ButtonSecondary:hover {
	border-color: var(--ColorCopper);
	background: #efd4bd;
	color: #713812;
}

.ButtonGhost {
	background: transparent;
}

.ButtonDanger {
	border-color: var(--ColorRose);
	background: var(--ColorRose);
	color: #ffffff;
}

.ButtonDanger:hover {
	border-color: #973732;
	background: #973732;
	color: #ffffff;
}

.ButtonSmall {
	min-height: 2rem;
	padding-inline: var(--SpaceS);
	font-size: 0.875rem;
}

.Button:disabled,
.Button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
	transform: none;
}

.Badge {
	display: inline-flex;
	min-height: 1.65rem;
	align-items: center;
	padding: 0.05rem 0.6rem 0;
	border: 1px solid var(--ColorHairline);
	border-radius: 999px;
	background: var(--ColorSurface);
	color: var(--ColorInk);
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1;
}

.BadgeAqua {
	border-color: var(--ColorAqua);
	background: var(--ColorAquaSoft);
	color: var(--ColorAquaDark);
}

.BadgeSage {
	border-color: var(--ColorSage);
	background: var(--ColorSageSoft);
	color: #2f5838;
}

.BadgeGold {
	border-color: var(--ColorGold);
	background: var(--ColorGoldSoft);
	color: #6b4b0f;
}

.BadgeRose {
	border-color: var(--ColorRose);
	background: var(--ColorRoseSoft);
	color: #81302d;
}

.Notice {
	padding: var(--SpaceM);
	border: 1px solid var(--ColorHairline);
	border-left-width: 0.35rem;
	border-radius: var(--RadiusSmall);
	background: rgba(255, 255, 255, 0.76);
}

.NoticeTitle {
	display: block;
	margin-bottom: var(--Space2XS);
	color: var(--ColorInk);
	font-weight: 800;
}

.NoticeInfo {
	border-left-color: var(--ColorAqua);
	background: var(--ColorAquaSoft);
}

.NoticeSuccess {
	border-left-color: var(--ColorSage);
	background: var(--ColorSageSoft);
}

.NoticeWarning {
	border-left-color: var(--ColorGold);
	background: var(--ColorGoldSoft);
}

.NoticeDanger {
	border-left-color: var(--ColorRose);
	background: var(--ColorRoseSoft);
}

.Toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceXS);
	align-items: center;
	padding: var(--SpaceXS);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.62);
}

.ToolbarDivider {
	width: 1px;
	align-self: stretch;
	background: var(--ColorHairline);
}

.Form {
	display: grid;
	gap: var(--SpaceM);
}

.FormGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--SpaceM);
}

.Field {
	display: grid;
	gap: var(--SpaceXS);
}

.FieldLabel {
	color: var(--ColorInk);
	font-size: 0.9rem;
	font-weight: 800;
}

.FieldHint {
	color: var(--ColorMuted);
	font-size: 0.875rem;
}

.FieldControl {
	width: 100%;
	min-height: var(--ControlHeight);
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusSmall);
	background: rgba(255, 255, 255, 0.82);
	color: var(--ColorInk);
}

.FieldControl:hover {
	border-color: color-mix(in srgb, var(--ColorAqua) 65%, var(--ColorHairline));
}

.FieldControl::placeholder {
	color: color-mix(in srgb, var(--ColorMuted) 70%, white);
}

textarea.FieldControl {
	min-height: 7.5rem;
	resize: vertical;
}

.InputGroup {
	display: grid;
	grid-template-columns: 1fr auto;
}

.InputGroup .FieldControl {
	border-radius: var(--RadiusSmall) 0 0 var(--RadiusSmall);
}

.InputSuffix,
.InputPrefix {
	min-height: var(--ControlHeight);
	display: inline-flex;
	align-items: center;
	padding: 0 var(--SpaceS);
	border: 1px solid var(--ColorHairline);
	background: var(--ColorSurfaceWarm);
	color: var(--ColorMuted);
	font-weight: 800;
}

.InputSuffix {
	border-left: 0;
	border-radius: 0 var(--RadiusSmall) var(--RadiusSmall) 0;
}

.ChoiceGroup {
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceS);
}

.Choice {
	display: inline-flex;
	gap: var(--SpaceXS);
	align-items: center;
	color: var(--ColorText);
	font-weight: 700;
}

.Choice input {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--ColorAqua);
}

.SegmentedControl {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0;
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusSmall);
	overflow: hidden;
	background: var(--ColorSurface);
}

.SegmentedControl label {
	display: inline-flex;
}

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

.SegmentedControl span {
	min-height: 2.25rem;
	display: inline-flex;
	align-items: center;
	padding: 0 var(--SpaceS);
	border-right: 1px solid var(--ColorHairline);
	color: var(--ColorText);
	font-weight: 800;
}

.SegmentedControl label:last-child span {
	border-right: 0;
}

.SegmentedControl input:checked + span {
	background: var(--ColorAqua);
	color: #ffffff;
}

.TableWrap {
	overflow-x: auto;
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.72);
}

.DataTable {
	width: 100%;
	min-width: 520px;
}

.DataTable th,
.DataTable td {
	padding: var(--SpaceS) var(--SpaceM);
	border-bottom: 1px solid var(--ColorHairline);
	text-align: left;
	vertical-align: top;
}

.DataTable th {
	background: var(--ColorSurfaceWarm);
	color: var(--ColorInk);
	font-size: 0.85rem;
	font-weight: 800;
	text-transform: uppercase;
}

.DataTable tr:last-child td {
	border-bottom: 0;
}

.DataTable tbody tr:hover {
	background: rgba(22, 127, 133, 0.08);
}

.Tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceXS);
	border-bottom: 1px solid var(--ColorHairline);
}

.TabLink {
	display: inline-flex;
	min-height: 2.5rem;
	align-items: center;
	padding: 0 var(--SpaceS);
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var(--RadiusSmall) var(--RadiusSmall) 0 0;
	color: var(--ColorText);
	font-weight: 800;
	text-decoration: none;
}

.TabLink:hover,
.TabLink[aria-current="page"] {
	border-color: var(--ColorHairline);
	background: var(--ColorSurface);
	color: var(--ColorAquaDark);
}

.EmptyState {
	display: grid;
	gap: var(--SpaceS);
	justify-items: start;
	padding: var(--SpaceL);
	border: 1px dashed color-mix(in srgb, var(--ColorHairline) 70%, var(--ColorAqua));
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.48);
}

.Breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceXS);
	margin-bottom: var(--SpaceM);
	color: var(--ColorMuted);
	font-size: 0.875rem;
	font-weight: 700;
}

.Breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: var(--SpaceXS);
	color: var(--ColorHairline);
}

.SiteFooter {
	border-top: 1px solid rgba(31, 42, 43, 0.12);
}

.SiteFooterInner {
	width: calc(100% - 2rem);
	max-width: var(--SiteWidth);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceS) var(--SpaceL);
	justify-content: space-between;
	padding: var(--SpaceL) 0;
	color: var(--ColorMuted);
	font-size: 0.9rem;
}

.Dialog {
	width: min(540px, calc(100% - 2rem));
	padding: 0;
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: var(--ColorSurface);
	color: var(--ColorText);
	box-shadow: 0 28px 70px rgba(31, 42, 43, 0.28);
}

.Dialog::backdrop {
	background: rgba(31, 42, 43, 0.36);
	backdrop-filter: blur(3px);
}

.DialogHeader {
	display: flex;
	gap: var(--SpaceM);
	align-items: start;
	justify-content: space-between;
	padding: var(--SpaceL) var(--SpaceL) var(--SpaceM);
	border-bottom: 1px solid var(--ColorHairline);
}

.DialogTitle {
	color: var(--ColorInk);
	font-family: var(--FontDisplay);
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.1;
}

.DialogClose {
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusSmall);
	background: transparent;
	color: var(--ColorText);
	font-weight: 800;
}

.DialogBody {
	padding: var(--SpaceL);
}

.DialogFooter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--SpaceS);
	justify-content: flex-end;
	padding: var(--SpaceM) var(--SpaceL) var(--SpaceL);
}

@media (max-width: 760px) {
	.SiteHeaderInner {
		grid-template-columns: 1fr;
		gap: var(--SpaceS);
	}

	.HeaderActions {
		justify-self: stretch;
		justify-content: space-between;
	}

	.SiteMenuPanel {
		right: auto;
		left: 0;
	}

	.SiteNavigation,
	.AuthControls {
		justify-self: stretch;
	}

	.AuthControlsGroup {
		justify-content: flex-start;
	}

	.NavigationList {
		justify-content: flex-start;
	}

	.NavigationLink {
		padding-inline: var(--SpaceXS);
	}

	.MainContent {
		padding-top: var(--SpaceXL);
	}

	.PageTitle {
		font-size: 3rem;
	}

	.Split {
		grid-template-columns: 1fr;
	}

	.AuthGateHero {
		min-height: auto;
		grid-template-columns: 1fr;
		gap: var(--SpaceXL);
	}

	.Panel,
	.Card,
	.EmptyState {
		padding: var(--SpaceM);
	}

	.AuthGatePanel,
	.AuthGateFeature {
		padding: var(--SpaceM);
	}
}

@media (max-width: 480px) {
	.SiteHeaderInner,
	.MainContent,
	.SiteFooterInner {
		width: calc(100% - 1rem);
	}

	.BrandMark {
		grid-template-columns: 2.25rem auto;
	}

	.BrandIcon {
		width: 2.25rem;
		height: 2rem;
		font-size: 0.82rem;
	}

	.NavigationList {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.NavigationLink {
		justify-content: center;
	}

	.PageTitle {
		font-size: 2.35rem;
	}

	.InputGroup {
		grid-template-columns: 1fr;
	}

	.InputGroup .FieldControl,
	.InputSuffix {
		border-radius: var(--RadiusSmall);
	}

	.InputSuffix {
		border-left: 1px solid var(--ColorHairline);
		border-top: 0;
	}
}